{"version":3,"file":"BqChip-BxCdcOor.cjs","names":[],"sources":["../src/components/chip/BqChip.ts"],"sourcesContent":["/**\r\n * Chip / tag component.\r\n * @element bq-chip\r\n * @prop {string} variant - primary | secondary | success | danger | warning | info\r\n * @prop {string} size - sm | md | lg\r\n * @prop {boolean} removable\r\n * @prop {boolean} selected\r\n * @prop {boolean} disabled\r\n * @slot - Chip label\r\n * @fires bq-remove\r\n * @fires bq-click\r\n */\r\nimport type { ComponentDefinition } from '@bquery/bquery/component';\r\nimport { component, html } from '@bquery/bquery/component';\r\nimport { escapeHtml } from '@bquery/bquery/security';\r\nimport { t } from '../../i18n/index.js';\r\nimport { getBaseStyles } from '../../utils/styles.js';\r\n\r\ntype BqChipProps = {\r\n variant: string;\r\n size: string;\r\n removable: boolean;\r\n selected: boolean;\r\n disabled: boolean;\r\n};\r\n\r\nconst definition: ComponentDefinition = {\r\n props: {\r\n variant: { type: String, default: 'primary' },\r\n size: { type: String, default: 'md' },\r\n removable: { type: Boolean, default: false },\r\n selected: { type: Boolean, default: false },\r\n disabled: { type: Boolean, default: false },\r\n },\r\n styles: `\r\n ${getBaseStyles()}\r\n *, *::before, *::after { box-sizing: border-box; }\r\n :host { display: inline-flex; }\r\n .chip {\r\n display: inline-flex; align-items: center; gap: 0.375rem;\r\n border-radius: var(--bq-radius-full,9999px); font-family: var(--bq-font-family-sans);\r\n font-weight: var(--bq-font-weight-medium,500); white-space: nowrap; cursor: pointer;\r\n border: 1.5px solid transparent;\r\n transition: all var(--bq-duration-fast) var(--bq-easing-standard);\r\n }\r\n .chip[data-size=\"sm\"] { font-size: 0.75rem; padding: 0.25rem 0.625rem; }\r\n .chip[data-size=\"md\"] { font-size: 0.875rem; padding: 0.375rem 0.75rem; }\r\n .chip[data-size=\"lg\"] { font-size: 1rem; padding: 0.5rem 1rem; }\r\n .chip[data-variant=\"primary\"] { background: var(--bq-color-primary-100,#dbeafe); color: var(--bq-color-primary-700,#1d4ed8); }\r\n .chip[data-variant=\"secondary\"] { background: var(--bq-color-secondary-100,#f1f5f9); color: var(--bq-color-secondary-700,#334155); }\r\n .chip[data-variant=\"success\"] { background: var(--bq-color-success-100,#dcfce7); color: var(--bq-color-success-700,#15803d); }\r\n .chip[data-variant=\"danger\"] { background: var(--bq-color-danger-100,#fee2e2); color: var(--bq-color-danger-700,#b91c1c); }\r\n .chip[data-variant=\"warning\"] { background: var(--bq-color-warning-100,#fef3c7); color: var(--bq-color-warning-700,#b45309); }\r\n .chip[data-variant=\"info\"] { background: var(--bq-color-info-100,#dbeafe); color: var(--bq-color-info-700,#1d4ed8); }\r\n .chip[aria-pressed=\"true\"] { border-color: currentColor; }\r\n .chip[aria-disabled=\"true\"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\r\n .remove-btn {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n background: none; border: none; cursor: pointer; color: inherit;\r\n padding: 0; width: 1rem; height: 1rem; border-radius: 50%; font-size: 0.75rem; opacity: 0.7;\r\n }\r\n .remove-btn:hover { opacity: 1; }\r\n .remove-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }\r\n @media (prefers-reduced-motion: reduce) {\r\n .chip { transition: none; }\r\n }\r\n `,\r\n connected() {\r\n const self = this;\r\n const handler = (e: Event) => {\r\n if (self.hasAttribute('disabled')) return;\r\n const target = e.target as Element;\r\n if (target.closest('.remove-btn')) {\r\n e.stopPropagation();\r\n self.dispatchEvent(\r\n new CustomEvent('bq-remove', { bubbles: true, composed: true })\r\n );\r\n return;\r\n }\r\n self.dispatchEvent(\r\n new CustomEvent('bq-click', { bubbles: true, composed: true })\r\n );\r\n };\r\n const keyHandler = (e: Event) => {\r\n if (self.hasAttribute('disabled')) return;\r\n const ke = e as KeyboardEvent;\r\n const target = e.target as HTMLElement | null;\r\n if (!target?.classList.contains('chip')) return;\r\n const isSpaceKeydown = ke.type === 'keydown' && ke.key === ' ';\r\n const isEnterKeydown =\r\n ke.type === 'keydown' && ke.key === 'Enter' && !ke.repeat;\r\n const isSpaceKeyup = ke.type === 'keyup' && ke.key === ' ';\r\n if (isSpaceKeydown) {\r\n e.preventDefault();\r\n return;\r\n }\r\n if (!isEnterKeydown && !isSpaceKeyup) return;\r\n e.preventDefault();\r\n // Handle remove button activation via keyboard\r\n const focusedTarget = ke.target as HTMLElement | null;\r\n if (focusedTarget?.closest('.remove-btn')) {\r\n self.dispatchEvent(\r\n new CustomEvent('bq-remove', { bubbles: true, composed: true })\r\n );\r\n return;\r\n }\r\n self.dispatchEvent(\r\n new CustomEvent('bq-click', { bubbles: true, composed: true })\r\n );\r\n };\r\n (self as unknown as Record)['_handler'] = handler;\r\n (self as unknown as Record)['_keyHandler'] = keyHandler;\r\n self.shadowRoot?.addEventListener('click', handler);\r\n self.shadowRoot?.addEventListener('keydown', keyHandler);\r\n self.shadowRoot?.addEventListener('keyup', keyHandler);\r\n },\r\n disconnected() {\r\n const handler = (this as unknown as Record)['_handler'] as\r\n | EventListener\r\n | undefined;\r\n const keyHandler = (this as unknown as Record)[\r\n '_keyHandler'\r\n ] as EventListener | undefined;\r\n if (handler) this.shadowRoot?.removeEventListener('click', handler);\r\n if (keyHandler) this.shadowRoot?.removeEventListener('keydown', keyHandler);\r\n if (keyHandler) this.shadowRoot?.removeEventListener('keyup', keyHandler);\r\n },\r\n render({ props }) {\r\n return html`\r\n \r\n \r\n ${props.removable\r\n ? ``\r\n : ''}\r\n \r\n `;\r\n },\r\n};\r\n\r\ncomponent('bq-chip', definition);\r\n"],"mappings":";;;;;;AAoJA,2BAAA,EAAuB,WAAW;CAzHhC,OAAO;EACL,SAAS;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC7C,MAAM;GAAE,MAAM;GAAQ,SAAS;GAAM;EACrC,WAAW;GAAE,MAAM;GAAS,SAAS;GAAO;EAC5C,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC5C;CACD,QAAQ;MACJ,eAAA,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCpB,YAAY;EACV,MAAM,OAAO;EACb,MAAM,WAAW,MAAa;AAC5B,OAAI,KAAK,aAAa,WAAW,CAAE;AAEnC,OADe,EAAE,OACN,QAAQ,cAAc,EAAE;AACjC,MAAE,iBAAiB;AACnB,SAAK,cACH,IAAI,YAAY,aAAa;KAAE,SAAS;KAAM,UAAU;KAAM,CAAC,CAChE;AACD;;AAEF,QAAK,cACH,IAAI,YAAY,YAAY;IAAE,SAAS;IAAM,UAAU;IAAM,CAAC,CAC/D;;EAEH,MAAM,cAAc,MAAa;AAC/B,OAAI,KAAK,aAAa,WAAW,CAAE;GACnC,MAAM,KAAK;AAEX,OAAI,CADW,EAAE,QACJ,UAAU,SAAS,OAAO,CAAE;GACzC,MAAM,iBAAiB,GAAG,SAAS,aAAa,GAAG,QAAQ;GAC3D,MAAM,iBACJ,GAAG,SAAS,aAAa,GAAG,QAAQ,WAAW,CAAC,GAAG;GACrD,MAAM,eAAe,GAAG,SAAS,WAAW,GAAG,QAAQ;AACvD,OAAI,gBAAgB;AAClB,MAAE,gBAAgB;AAClB;;AAEF,OAAI,CAAC,kBAAkB,CAAC,aAAc;AACtC,KAAE,gBAAgB;AAGlB,OADsB,GAAG,QACN,QAAQ,cAAc,EAAE;AACzC,SAAK,cACH,IAAI,YAAY,aAAa;KAAE,SAAS;KAAM,UAAU;KAAM,CAAC,CAChE;AACD;;AAEF,QAAK,cACH,IAAI,YAAY,YAAY;IAAE,SAAS;IAAM,UAAU;IAAM,CAAC,CAC/D;;AAEF,OAA4C,cAAc;AAC1D,OAA4C,iBAAiB;AAC9D,OAAK,YAAY,iBAAiB,SAAS,QAAQ;AACnD,OAAK,YAAY,iBAAiB,WAAW,WAAW;AACxD,OAAK,YAAY,iBAAiB,SAAS,WAAW;;CAExD,eAAe;EACb,MAAM,UAAW,KAA4C;EAG7D,MAAM,aAAc,KAClB;AAEF,MAAI,QAAS,MAAK,YAAY,oBAAoB,SAAS,QAAQ;AACnE,MAAI,WAAY,MAAK,YAAY,oBAAoB,WAAW,WAAW;AAC3E,MAAI,WAAY,MAAK,YAAY,oBAAoB,SAAS,WAAW;;CAE3E,OAAO,EAAE,SAAS;AAChB,SAAO,2BAAA,CAAI;;;;wBAIS,2BAAA,GAAW,MAAM,QAAQ,CAAC;qBAC7B,2BAAA,GAAW,MAAM,KAAK,CAAC;;oBAExB,MAAM,WAAW,OAAO,IAAI;wBACxB,MAAM,WAAW,SAAS,QAAQ;yBACjC,MAAM,WAAW,SAAS,QAAQ;;;UAGjD,MAAM,YACJ,wDAAwD,aAAA,EAAE,cAAc,CAAC,gBACzE,GAAG;;;;CAMmB,CAAW"}