{"version":3,"file":"BqSwitch-DILc9pUA.cjs","names":[],"sources":["../src/components/switch/BqSwitch.ts"],"sourcesContent":["/**\r\n * Toggle switch form control.\r\n * @element bq-switch\r\n * @prop {string}  label   - Visible label\r\n * @prop {string}  name    - Input name\r\n * @prop {boolean} checked\r\n * @prop {boolean} disabled\r\n * @prop {string}  size    - sm | md | lg\r\n * @fires bq-change - { value: string, checked: boolean }\r\n */\r\nimport type { ComponentDefinition } from '@bquery/bquery/component';\r\nimport { bool, component, html } from '@bquery/bquery/component';\r\nimport { escapeHtml } from '@bquery/bquery/security';\r\nimport { createFormProxy, type FormProxy } from '../../utils/form.js';\r\nimport { getBaseStyles } from '../../utils/styles.js';\r\n\r\ntype BqSwitchProps = {\r\n  label: string;\r\n  name: string;\r\n  checked: boolean;\r\n  disabled: boolean;\r\n  size: string;\r\n};\r\n\r\nconst definition: ComponentDefinition<BqSwitchProps> = {\r\n  props: {\r\n    label: { type: String, default: '' },\r\n    name: { type: String, default: '' },\r\n    checked: { type: Boolean, default: false },\r\n    disabled: { type: Boolean, default: false },\r\n    size: { type: String, default: 'md' },\r\n  },\r\n  styles: `\r\n    ${getBaseStyles()}\r\n    *, *::before, *::after { box-sizing: border-box; }\r\n    :host { display: inline-flex; }\r\n    .control { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; font-family: var(--bq-font-family-sans); }\r\n    :host([disabled]) .control { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\r\n    .track {\r\n      position: relative; display: inline-block; background: var(--bq-border-emphasis,#cbd5e1);\r\n      border-radius: var(--bq-radius-full,9999px);\r\n      transition: background var(--bq-duration-fast) var(--bq-easing-standard);\r\n      flex-shrink: 0;\r\n    }\r\n    .track[data-size=\"sm\"] { width: 1.75rem; height: 1rem; }\r\n    .track[data-size=\"md\"] { width: 2.5rem; height: 1.375rem; }\r\n    .track[data-size=\"lg\"] { width: 3rem; height: 1.625rem; }\r\n    input { position: absolute; opacity: 0; width: 0; height: 0; }\r\n    .thumb {\r\n      position: absolute; top: 2px; left: 2px; background: #fff;\r\n      border-radius: 50%; transition: transform var(--bq-duration-fast) var(--bq-easing-standard);\r\n      box-shadow: var(--bq-shadow-sm);\r\n    }\r\n    .track[data-size=\"sm\"]  .thumb { width: calc(1rem - 4px);    height: calc(1rem - 4px); }\r\n    .track[data-size=\"md\"]  .thumb { width: calc(1.375rem - 4px); height: calc(1.375rem - 4px); }\r\n    .track[data-size=\"lg\"]  .thumb { width: calc(1.625rem - 4px); height: calc(1.625rem - 4px); }\r\n    :host([checked]) .track { background: var(--bq-color-primary-600,#2563eb); }\r\n    :host([checked]) .track[data-size=\"sm\"]  .thumb { transform: translateX(0.75rem); }\r\n    :host([checked]) .track[data-size=\"md\"]  .thumb { transform: translateX(1.125rem); }\r\n    :host([checked]) .track[data-size=\"lg\"]  .thumb { transform: translateX(1.375rem); }\r\n    input:focus-visible + .thumb { box-shadow: var(--bq-focus-ring); }\r\n    .label-text { font-size: var(--bq-font-size-sm,0.875rem); color: var(--bq-text-base,#0f172a); }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .track, .thumb { transition: none; }\r\n    }\r\n  `,\r\n  connected() {\r\n    const self = this;\r\n\r\n    // Form proxy for native <form> participation\r\n    const name = self.getAttribute('name') ?? '';\r\n    const value = self.hasAttribute('checked') ? 'on' : '';\r\n    const disabled = self.hasAttribute('disabled');\r\n    const proxy = createFormProxy(self, name, value, disabled);\r\n    (self as unknown as Record<string, unknown>)['_formProxy'] = proxy;\r\n\r\n    const handler = (e: Event) => {\r\n      const input = e.target as HTMLInputElement | null;\r\n      if (input?.type !== 'checkbox') return;\r\n      if (input.checked) self.setAttribute('checked', '');\r\n      else self.removeAttribute('checked');\r\n      proxy.setValue(input.checked ? 'on' : '');\r\n      self.dispatchEvent(\r\n        new CustomEvent('bq-change', {\r\n          detail: {\r\n            value: self.getAttribute('value') ?? (input.checked ? 'on' : ''),\r\n            checked: input.checked,\r\n          },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    };\r\n    (self as unknown as Record<string, unknown>)['_handler'] = handler;\r\n    self.shadowRoot?.addEventListener('change', handler);\r\n  },\r\n  disconnected() {\r\n    const h = (this as unknown as Record<string, unknown>)['_handler'] as\r\n      | EventListener\r\n      | undefined;\r\n    if (h) this.shadowRoot?.removeEventListener('change', h);\r\n    (\r\n      (this as unknown as Record<string, unknown>)['_formProxy'] as\r\n        | FormProxy\r\n        | undefined\r\n    )?.cleanup();\r\n  },\r\n  updated() {\r\n    const s = this as unknown as Record<string, unknown>;\r\n    const proxy = s['_formProxy'] as FormProxy | undefined;\r\n    if (proxy) {\r\n      proxy.setName(this.getAttribute('name') ?? '');\r\n      proxy.setValue(this.hasAttribute('checked') ? 'on' : '');\r\n      proxy.setDisabled(this.hasAttribute('disabled'));\r\n    }\r\n  },\r\n  render({ props }) {\r\n    return html`\r\n      <label class=\"control\" part=\"control\">\r\n        <span class=\"track\" data-size=\"${escapeHtml(props.size)}\">\r\n          <input\r\n            type=\"checkbox\"\r\n            part=\"input\"\r\n            name=\"${escapeHtml(props.name)}\"\r\n            ${bool('checked', props.checked)}\r\n            ${bool('disabled', props.disabled)}\r\n            role=\"switch\"\r\n            aria-checked=\"${props.checked ? 'true' : 'false'}\"\r\n            aria-label=\"${escapeHtml(props.label)}\"\r\n          />\r\n          <span class=\"thumb\" part=\"thumb\"></span>\r\n        </span>\r\n        ${props.label\r\n          ? `<span class=\"label-text\" part=\"label\">${escapeHtml(props.label)}</span>`\r\n          : ''}\r\n      </label>\r\n    `;\r\n  },\r\n};\r\n\r\ncomponent<BqSwitchProps>('bq-switch', definition);\r\n"],"mappings":";;;;;;AA4IA,2BAAA,EAAyB,aAAa;CAnHpC,OAAO;EACL,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAI;EACpC,MAAM;GAAE,MAAM;GAAQ,SAAS;GAAI;EACnC,SAAS;GAAE,MAAM;GAAS,SAAS;GAAO;EAC1C,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,MAAM;GAAE,MAAM;GAAQ,SAAS;GAAM;EACtC;CACD,QAAQ;MACJ,eAAA,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCpB,YAAY;EACV,MAAM,OAAO;EAMb,MAAM,QAAQ,aAAA,gBAAgB,MAHjB,KAAK,aAAa,OAAO,IAAI,IAC5B,KAAK,aAAa,UAAU,GAAG,OAAO,IACnC,KAAK,aAAa,WACc,CAAS;AACzD,OAA4C,gBAAgB;EAE7D,MAAM,WAAW,MAAa;GAC5B,MAAM,QAAQ,EAAE;AAChB,OAAI,OAAO,SAAS,WAAY;AAChC,OAAI,MAAM,QAAS,MAAK,aAAa,WAAW,GAAG;OAC9C,MAAK,gBAAgB,UAAU;AACpC,SAAM,SAAS,MAAM,UAAU,OAAO,GAAG;AACzC,QAAK,cACH,IAAI,YAAY,aAAa;IAC3B,QAAQ;KACN,OAAO,KAAK,aAAa,QAAQ,KAAK,MAAM,UAAU,OAAO;KAC7D,SAAS,MAAM;KAChB;IACD,SAAS;IACT,UAAU;IACX,CAAC,CACH;;AAEF,OAA4C,cAAc;AAC3D,OAAK,YAAY,iBAAiB,UAAU,QAAQ;;CAEtD,eAAe;EACb,MAAM,IAAK,KAA4C;AAGvD,MAAI,EAAG,MAAK,YAAY,oBAAoB,UAAU,EAAE;AAErD,OAA4C,eAG5C,SAAS;;CAEd,UAAU;EAER,MAAM,QAAQ,KAAE;AAChB,MAAI,OAAO;AACT,SAAM,QAAQ,KAAK,aAAa,OAAO,IAAI,GAAG;AAC9C,SAAM,SAAS,KAAK,aAAa,UAAU,GAAG,OAAO,GAAG;AACxD,SAAM,YAAY,KAAK,aAAa,WAAW,CAAC;;;CAGpD,OAAO,EAAE,SAAS;AAChB,SAAO,2BAAA,CAAI;;yCAE0B,2BAAA,GAAW,MAAM,KAAK,CAAC;;;;oBAI5C,2BAAA,GAAW,MAAM,KAAK,CAAC;cAC7B,2BAAA,GAAK,WAAW,MAAM,QAAQ,CAAC;cAC/B,2BAAA,GAAK,YAAY,MAAM,SAAS,CAAC;;4BAEnB,MAAM,UAAU,SAAS,QAAQ;0BACnC,2BAAA,GAAW,MAAM,MAAM,CAAC;;;;UAIxC,MAAM,QACJ,yCAAyC,2BAAA,GAAW,MAAM,MAAM,CAAC,WACjE,GAAG;;;;CAMuB,CAAW"}