{"version":3,"file":"BqAlert-aoKXTOTZ.cjs","names":[],"sources":["../src/components/alert/BqAlert.ts"],"sourcesContent":["/**\r\n * Alert component - contextual status message.\r\n * @element bq-alert\r\n * @prop {string}  variant    - info | success | warning | danger\r\n * @prop {string}  title      - Alert heading\r\n * @prop {boolean} dismissible - Show close button\r\n * @slot - Alert body content\r\n * @fires bq-close\r\n */\r\nimport { component, html } from '@bquery/bquery/component';\r\nimport type { ComponentDefinition } from '@bquery/bquery/component';\r\nimport { escapeHtml } from '@bquery/bquery/security';\r\nimport { getBaseStyles } from '../../utils/styles.js';\r\nimport { t } from '../../i18n/index.js';\r\n\r\ntype BqAlertProps = { variant: string; title: string; dismissible: boolean };\r\n\r\nconst definition: ComponentDefinition<BqAlertProps> = {\r\n  props: {\r\n    variant:    { type: String, default: 'info' },\r\n    title:      { type: String, default: '' },\r\n    dismissible:{ type: Boolean, default: false },\r\n  },\r\n  styles: `\r\n    ${getBaseStyles()}\r\n    *, *::before, *::after { box-sizing: border-box; }\r\n    :host { display: block; }\r\n    :host([hidden]) { display: none; }\r\n    .alert {\r\n      display: flex; align-items: flex-start; gap: 0.75rem;\r\n      padding: var(--bq-space-4,1rem); border-radius: var(--bq-radius-lg,0.5rem);\r\n      border: 1.5px solid transparent; font-family: var(--bq-font-family-sans);\r\n    }\r\n    .alert[data-variant=\"info\"]    { background: var(--bq-color-info-50,#eff6ff);    border-color: var(--bq-color-info-500,#3b82f6);    color: var(--bq-color-info-700,#1d4ed8); }\r\n    .alert[data-variant=\"success\"] { background: var(--bq-color-success-50,#f0fdf4); border-color: var(--bq-color-success-500,#22c55e); color: var(--bq-color-success-700,#15803d); }\r\n    .alert[data-variant=\"warning\"] { background: var(--bq-color-warning-50,#fffbeb); border-color: var(--bq-color-warning-500,#f59e0b); color: var(--bq-color-warning-700,#b45309); }\r\n    .alert[data-variant=\"danger\"]  { background: var(--bq-color-danger-50,#fef2f2);  border-color: var(--bq-color-danger-500,#ef4444);  color: var(--bq-color-danger-700,#b91c1c); }\r\n    .icon { font-size: 1.1em; flex-shrink: 0; margin-top: 0.1em; }\r\n    .content { flex: 1; min-width: 0; }\r\n    .alert-title { font-weight: var(--bq-font-weight-semibold,600); font-size: var(--bq-font-size-sm,0.875rem); margin-bottom: 0.25rem; }\r\n    .body { font-size: var(--bq-font-size-sm,0.875rem); }\r\n    .close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: inherit; padding: 0.25rem; border-radius: var(--bq-radius-md,0.375rem); opacity: 0.7; font-size: 0.875rem; }\r\n    .close:hover { opacity: 1; background: rgba(0,0,0,0.08); }\r\n    .close:focus-visible { outline: 2px solid transparent; box-shadow: var(--bq-focus-ring); }\r\n  `,\r\n  connected() {\r\n    const self = this;\r\n    const handler = (e: Event) => {\r\n      if ((e.target as Element).closest('.close')) {\r\n        self.setAttribute('hidden', '');\r\n        self.dispatchEvent(new CustomEvent('bq-close', { bubbles: true, composed: true }));\r\n      }\r\n    };\r\n    (self as unknown as Record<string, unknown>)['_handler'] = handler;\r\n    self.shadowRoot?.addEventListener('click', handler);\r\n  },\r\n  disconnected() {\r\n    const handler = (this as unknown as Record<string, unknown>)['_handler'] as EventListener | undefined;\r\n    if (handler) this.shadowRoot?.removeEventListener('click', handler);\r\n  },\r\n  render({ props }) {\r\n    const icons: Record<string, string> = { info: 'ℹ', success: '✓', warning: '⚠', danger: '✕' };\r\n    const icon = icons[props.variant] ?? 'ℹ';\r\n    const isAlert = props.variant === 'warning' || props.variant === 'danger';\r\n    return html`\r\n      <div part=\"alert\" class=\"alert\" data-variant=\"${escapeHtml(props.variant)}\"\r\n        role=\"${isAlert ? 'alert' : 'status'}\" aria-live=\"${isAlert ? 'assertive' : 'polite'}\">\r\n        <span class=\"icon\" aria-hidden=\"true\">${icon}</span>\r\n        <div class=\"content\">\r\n          ${props.title ? `<div class=\"alert-title\">${escapeHtml(props.title)}</div>` : ''}\r\n          <div class=\"body\"><slot></slot></div>\r\n        </div>\r\n        ${props.dismissible ? `<button type=\"button\" class=\"close\" aria-label=\"${t('common.close')}\">✕</button>` : ''}\r\n      </div>\r\n    `;\r\n  },\r\n};\r\n\r\ncomponent<BqAlertProps>('bq-alert', definition);\r\n"],"mappings":";;;;;;;;;;;;;;;AA8EA,2BAAA,EAAwB,YAAY;CA5DlC,OAAO;EACL,SAAY;GAAE,MAAM;GAAQ,SAAS;GAAQ;EAC7C,OAAY;GAAE,MAAM;GAAQ,SAAS;GAAI;EACzC,aAAY;GAAE,MAAM;GAAS,SAAS;GAAO;EAC9C;CACD,QAAQ;MACJ,eAAA,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBpB,YAAY;EACV,MAAM,OAAO;EACb,MAAM,WAAW,MAAa;AAC5B,OAAK,EAAE,OAAmB,QAAQ,SAAS,EAAE;AAC3C,SAAK,aAAa,UAAU,GAAG;AAC/B,SAAK,cAAc,IAAI,YAAY,YAAY;KAAE,SAAS;KAAM,UAAU;KAAM,CAAC,CAAC;;;AAGrF,OAA4C,cAAc;AAC3D,OAAK,YAAY,iBAAiB,SAAS,QAAQ;;CAErD,eAAe;EACb,MAAM,UAAW,KAA4C;AAC7D,MAAI,QAAS,MAAK,YAAY,oBAAoB,SAAS,QAAQ;;CAErE,OAAO,EAAE,SAAS;EAEhB,MAAM,OAAO;GAD2B,MAAM;GAAK,SAAS;GAAK,SAAS;GAAK,QAAQ;GAC1E,CAAM,MAAM,YAAY;EACrC,MAAM,UAAU,MAAM,YAAY,aAAa,MAAM,YAAY;AACjE,SAAO,2BAAA,CAAI;sDACuC,2BAAA,GAAW,MAAM,QAAQ,CAAC;gBAChE,UAAU,UAAU,SAAS,eAAe,UAAU,cAAc,SAAS;gDAC7C,KAAK;;YAEzC,MAAM,QAAQ,4BAA4B,2BAAA,GAAW,MAAM,MAAM,CAAC,UAAU,GAAG;;;UAGjF,MAAM,cAAc,mDAAmD,aAAA,EAAE,eAAe,CAAC,gBAAgB,GAAG;;;;CAMlF,CAAW"}