{"version":3,"file":"BqSpinner-DYQLFD6e.cjs","names":[],"sources":["../src/components/spinner/BqSpinner.ts"],"sourcesContent":["/**\r\n * Spinner / loading indicator.\r\n * @element bq-spinner\r\n * @prop {string} size    - xs | sm | md | lg | xl\r\n * @prop {string} variant - primary | secondary | danger | success | white\r\n * @prop {string} label   - Accessible label (sr-only)\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 BqSpinnerProps = { size: string; variant: string; label: string };\r\n\r\nconst definition: ComponentDefinition<BqSpinnerProps> = {\r\n  props: {\r\n    size: { type: String, default: 'md' },\r\n    variant: { type: String, default: 'primary' },\r\n    label: { type: String, default: '' },\r\n  },\r\n  styles: `\r\n    ${getBaseStyles()}\r\n    :host { display: inline-flex; align-items: center; justify-content: center; }\r\n    .spinner {\r\n      border-radius: 50%; border-style: solid; border-width: 2.5px; border-color: transparent;\r\n      animation: spin 0.7s linear infinite;\r\n    }\r\n    .spinner[data-size=\"xs\"] { width: 1rem;   height: 1rem;   border-width: 2px; }\r\n    .spinner[data-size=\"sm\"] { width: 1.25rem; height: 1.25rem; border-width: 2px; }\r\n    .spinner[data-size=\"md\"] { width: 1.75rem; height: 1.75rem; border-width: 2.5px; }\r\n    .spinner[data-size=\"lg\"] { width: 2.5rem; height: 2.5rem; border-width: 3px; }\r\n    .spinner[data-size=\"xl\"] { width: 3.5rem; height: 3.5rem; border-width: 4px; }\r\n    .spinner[data-variant=\"primary\"]   { border-color: var(--bq-color-primary-200,#bfdbfe); border-top-color: var(--bq-color-primary-600,#2563eb); }\r\n    .spinner[data-variant=\"secondary\"] { border-color: var(--bq-color-secondary-200,#e2e8f0); border-top-color: var(--bq-color-secondary-600,#475569); }\r\n    .spinner[data-variant=\"danger\"]    { border-color: var(--bq-color-danger-100,#fee2e2); border-top-color: var(--bq-color-danger-600,#dc2626); }\r\n    .spinner[data-variant=\"success\"]   { border-color: var(--bq-color-success-100,#dcfce7); border-top-color: var(--bq-color-success-600,#16a34a); }\r\n    .spinner[data-variant=\"white\"]     { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }\r\n    @keyframes spin { to { transform: rotate(360deg); } }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .spinner { animation: none; }\r\n    }\r\n    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\r\n  `,\r\n  render({ props }) {\r\n    const trimmedLabel = props.label.trim();\r\n    const label = trimmedLabel !== '' ? trimmedLabel : t('common.loading');\r\n    return html`<div\r\n      class=\"spinner-root\"\r\n      role=\"status\"\r\n      aria-live=\"polite\"\r\n      aria-label=\"${escapeHtml(label)}\"\r\n    >\r\n      <div\r\n        part=\"spinner\"\r\n        class=\"spinner\"\r\n        data-size=\"${escapeHtml(props.size)}\"\r\n        data-variant=\"${escapeHtml(props.variant)}\"\r\n        aria-hidden=\"true\"\r\n      ></div>\r\n      <span class=\"sr-only\">${escapeHtml(label)}</span>\r\n    </div>`;\r\n  },\r\n};\r\n\r\ncomponent<BqSpinnerProps>('bq-spinner', definition);\r\n"],"mappings":";;;;;;AAiEA,2BAAA,EAA0B,cAAc;CAjDtC,OAAO;EACL,MAAM;GAAE,MAAM;GAAQ,SAAS;GAAM;EACrC,SAAS;GAAE,MAAM;GAAQ,SAAS;GAAW;EAC7C,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAI;EACrC;CACD,QAAQ;MACJ,eAAA,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBpB,OAAO,EAAE,SAAS;EAChB,MAAM,eAAe,MAAM,MAAM,MAAM;EACvC,MAAM,QAAQ,iBAAiB,KAAK,eAAe,aAAA,EAAE,iBAAiB;AACtE,SAAO,2BAAA,CAAI;;;;oBAIK,2BAAA,GAAW,MAAM,CAAC;;;;;qBAKjB,2BAAA,GAAW,MAAM,KAAK,CAAC;wBACpB,2BAAA,GAAW,MAAM,QAAQ,CAAC;;;8BAGpB,2BAAA,GAAW,MAAM,CAAC;;;CAKR,CAAW"}