@sky.ui/core 0.0.38 → 0.0.39

package/dist/sky-radio/sky-radio.js

@@ -1,4 +1,4 @@
-import{css as e,LitElement as t,html as o}from"lit";import{property as r,state as s,customElement as i}from"lit/decorators.js";import{when as a}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as l}from"../helper/utils/color-resolver.js";import{FormControlBase as d}from"../helper/internals/form-control-base.js";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,p=(e,t,o,r)=>{for(var s,i=r>1?void 0:r?h(t,o):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(r?s(t,o,i):s(i))||i);return r&&i&&c(t,o,i),i};let u=class extends d{constructor(){super(),this.label="",this.value="",this.checked=!1,this.color="primary",this._hasMeaningfulSlot=!1,this._onSlotChange=e=>{const t=e.target,o=this._slotHasMeaningfulContent(t);o!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=o)},this.onNativeChange=e=>{const t=e.currentTarget;if(this.disabled||this.readonly)return void(t.checked!==this.checked&&(t.checked=this.checked));const o=t.checked&&!this.checked;if(this.checked=t.checked,this.checked&&this.name&&!this.closest("sky-radio-group")){const e=Array.from(document.querySelectorAll("sky-radio"));for(const t of e)t!==this&&t.name===this.name&&(t.checked=!1)}o&&(this.dispatchEvent(new CustomEvent("radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",e),this.reemitNativeEvent("input",e),this.syncFormValue(),this.syncValidity())},this.handleKeydown=e=>{if(!(this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key)){e.preventDefault();const t=this.shadowRoot?.querySelector("input[type='radio']");t?.click()}},this.captureDefaultValue("")}syncStyleVars(){this.style.setProperty("--radio-checked-color",l(this.color))}willUpdate(e){super.willUpdate(e),(0===e.size||e.has("color"))&&this.syncStyleVars()}check(){this.disabled||this.readonly||(this.checked=!0,this.syncFormValue())}focusRadio(){const e=this.shadowRoot?.querySelector('input[type="radio"]');e?.focus()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){const t=this.shadowRoot?.querySelector("input[type='radio']");e.has("checked")&&(t&&t.checked!==this.checked&&(t.checked=this.checked),void 0!==e.get("checked")&&(this.syncFormValue(),this.syncValidity())),(e.has("disabled")||e.has("readonly"))&&(t&&(t.disabled=this.disabled,t.readOnly=this.readonly),this.tabIndex=this.disabled?-1:0),e.has("value")&&(this.syncFormValue(),this.syncValidity())}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}getFormValue(){return this.checked?this.value:null}setValueFromFormState(e){this.checked="string"==typeof e&&e===this.value}getValidityAnchor(){return this.getNativeControl()||void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector("input[type='radio']")||null}onNativeValueMutated(e){const t=this.getNativeControl();t&&(this.checked=t.checked)}getCustomErrorMessage(){return this.validationErrors?.[0]||""}get validationErrors(){return this.required&&!this.checked?[this.requiredMessage]:[]}render(){return o`
+import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{property as s,state as i,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as c}from"../helper/utils/contrast-color.js";import{FormControlBase as h}from"../helper/internals/form-control-base.js";var p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(e,t,o,r)=>{for(var s,i=r>1?void 0:r?y(t,o):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(r?s(t,o,i):s(i))||i);return r&&i&&p(t,o,i),i};let k=class extends h{constructor(){super(),this.label="",this.value="",this.checked=!1,this.color="primary",this.compact=!1,this._hasMeaningfulSlot=!1,this._onSlotChange=e=>{const t=e.target,o=this._slotHasMeaningfulContent(t);o!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=o)},this.onNativeChange=e=>{const t=e.currentTarget;if(this.disabled||this.readonly)return void(t.checked!==this.checked&&(t.checked=this.checked));const o=t.checked&&!this.checked;if(this.checked=t.checked,this.checked&&this.name&&!this.closest("sky-radio-group")){const e=Array.from(document.querySelectorAll("sky-radio"));for(const t of e)t!==this&&t.name===this.name&&(t.checked=!1)}o&&(this.dispatchEvent(new CustomEvent("radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",e),this.reemitNativeEvent("input",e),this.syncFormValue(),this.syncValidity())},this.handleKeydown=e=>{if(!(this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key)){e.preventDefault();const t=this.shadowRoot?.querySelector("input[type='radio']");t?.click()}},this.captureDefaultValue("")}syncStyleVars(){this.style.setProperty("--radio-checked-color",d(this.color))}willUpdate(e){super.willUpdate(e),(0===e.size||e.has("color"))&&this.syncStyleVars()}check(){this.disabled||this.readonly||(this.checked=!0,this.syncFormValue())}focusRadio(){const e=this.shadowRoot?.querySelector('input[type="radio"]');e?.focus()}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){const t=this.shadowRoot?.querySelector("input[type='radio']");e.has("checked")&&(t&&t.checked!==this.checked&&(t.checked=this.checked),void 0!==e.get("checked")&&(this.syncFormValue(),this.syncValidity())),(e.has("disabled")||e.has("readonly"))&&(t&&(t.disabled=this.disabled,t.readOnly=this.readonly),this.tabIndex=this.disabled?-1:0),e.has("value")&&(this.syncFormValue(),this.syncValidity())}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}getFormValue(){return this.checked?this.value:null}setValueFromFormState(e){this.checked="string"==typeof e&&e===this.value}getValidityAnchor(){return this.getNativeControl()||void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector("input[type='radio']")||null}onNativeValueMutated(e){const t=this.getNativeControl();t&&(this.checked=t.checked)}getCustomErrorMessage(){return this.validationErrors?.[0]||""}get validationErrors(){return this.required&&!this.checked?[this.requiredMessage]:[]}render(){return r`
       <label
         part="label"
         ?disabled=${this.disabled}
@@ -21,12 +21,24 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
           part="wrapper"
         ></div>
         <slot @slotchange=${this._onSlotChange}></slot>
-        ${a(!this._hasMeaningfulSlot,()=>this.label)}
+        ${l(!this._hasMeaningfulSlot,()=>this.label)}
       </label>
-    `}};u.styles=e`
+    `}};k.styles=t`
     :host {
       display: inline-flex;
       align-items: center;
+      --sky-radio-size: 18px;
+      --sky-radio-dot: 10px;
+    }
+
+    :host([compact]) {
+      --sky-radio-size: 14px;
+      --sky-radio-dot: 8px;
+    }
+
+    :host([compact]) label {
+      font-size: var(--sky-font-size-xs);
+      gap: var(--sky-space-1, 4px);
     }
 
     /* readonly: allow focus + keyboard traversal, but show subtle visual state */
@@ -60,8 +72,8 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
     .radio-wrapper {
       position: relative;
       box-sizing: border-box;
-      width: 18px;
-      height: 18px;
+      width: var(--sky-radio-size);
+      height: var(--sky-radio-size);
       display: inline-block;
       background: var(--sky-glass-solid);
       backdrop-filter: none;
@@ -69,9 +81,9 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
       border: 2px solid var(--sky-text-tertiary);
       border-radius: 50%;
       transition:
-        border-color 0.3s ease-in-out,
-        background-color 0.3s ease-in-out,
-        box-shadow 0.3s ease-in-out;
+        border-color var(--sky-transition-normal, 200ms ease),
+        background-color var(--sky-transition-normal, 200ms ease),
+        box-shadow var(--sky-transition-normal, 200ms ease);
       cursor: pointer;
       flex-shrink: 0;
     }
@@ -82,13 +94,13 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0);
-      width: 10px;
-      height: 10px;
+      width: var(--sky-radio-dot);
+      height: var(--sky-radio-dot);
       background-color: var(--sky-glass-solid);
       border-radius: 50%;
       transition:
-        transform 0.3s ease-in-out,
-        background-color 0.3s ease-in-out;
+        transform var(--sky-transition-normal, 200ms ease),
+        background-color var(--sky-transition-normal, 200ms ease);
     }
 
     .radio-wrapper.checked {
@@ -98,6 +110,7 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
 
     .radio-wrapper.checked::before {
       transform: translate(-50%, -50%) scale(1);
+      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));
     }
 
     input[type="radio"] {
@@ -125,5 +138,7 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as r,state a
         transition: none;
       }
     }
-  `,u.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},p([r({type:String})],u.prototype,"label",2),p([r({type:String})],u.prototype,"value",2),p([r({type:Boolean,reflect:!0})],u.prototype,"checked",2),p([r({type:String})],u.prototype,"color",2),p([s()],u.prototype,"_hasMeaningfulSlot",2),u=p([i("sky-radio")],u);export{u as SkyRadio};
+
+    ${e(c([{selector:".radio-wrapper.checked::before",fillVar:"--radio-checked-color",property:"background-color"}]))}
+  `,k.shadowRootOptions={...o.shadowRootOptions,delegatesFocus:!0},u([s({type:String})],k.prototype,"label",2),u([s({type:String})],k.prototype,"value",2),u([s({type:Boolean,reflect:!0})],k.prototype,"checked",2),u([s({type:String})],k.prototype,"color",2),u([s({type:Boolean,reflect:!0})],k.prototype,"compact",2),u([i()],k.prototype,"_hasMeaningfulSlot",2),k=u([a("sky-radio")],k);export{k as SkyRadio};
 //# sourceMappingURL=sky-radio.js.map

package/dist/sky-radio/sky-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-radio.js","sources":["../../src/sky-radio/sky-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\n\r\nexport type SkyRadioSelectDetail = { value: string };\r\nexport type SkyRadioValidationErrorDetail = { errors: string[] };\r\nexport type SkyRadioValueClearedDetail = { value: \"\" };\r\n\r\n/**\r\n * @element sky-radio\r\n *\r\n * @summary Single radio option for grouped or standalone selection.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/radio\r\n *\r\n * @slot - Content to display instead of the label property.\r\n *\r\n * @csspart wrapper - The circular radio control element.\r\n * @csspart input - The native hidden radio input element.\r\n * @csspart label - The text label element.\r\n *\r\n * @property {string} label - Text label displayed beside the control.\r\n * @property {string} value - Option value used for selection and form value.\r\n * @property {boolean} checked - Whether this option is selected.\r\n * @property {string} name - Radio name used for same-name exclusivity.\r\n * @property {string} color - Accent color used in checked state.\r\n * @property {boolean} disabled - Disables user interaction.\r\n * @property {boolean} readonly - Prevents selection changes while still allowing focus.\r\n * @property {boolean} required - Enables required validation for standalone usage.\r\n * @property {string} requiredMessage - Error message for required validation failures.\r\n *\r\n * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.\r\n * @fires {Event} change - Native change event for form compatibility.\r\n * @fires {Event} input - Native input event for form compatibility.\r\n * @fires {CustomEvent<SkyRadioValidationErrorDetail>} validation-error - Fired when validation errors occur.\r\n * @fires {CustomEvent<SkyRadioValueClearedDetail>} value-cleared - Fired when selection is reset.\r\n * @method check Selects this radio option.\r\n * @method focusRadio Focuses the underlying native radio control.\r\n *\r\n * @Behavior\r\n * - Uses a native hidden radio input for semantics and keyboard interaction.\r\n * - Supports grouped usage inside `sky-radio-group` and standalone usage.\r\n * - Synchronizes checked state and form value through `FormControlBase`.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *   <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *   <sky-radio value=\"green\">Green Environment</sky-radio>\r\n * </sky-radio-group>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *     <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *     <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *   </sky-radio-group>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-radio-group label=\"Deployment\" name=\"deployment\">\r\n *       <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\r\n *       <sky-radio value=\"green\">Green Environment</sky-radio>\r\n *     </sky-radio-group>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-radio\")\r\nexport class SkyRadio extends FormControlBase {\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: String }) value: string = \"\";\r\n  @property({ type: Boolean, reflect: true }) checked: boolean = false;\r\n  @property({ type: String }) color: string = \"primary\";\r\n  @state() private _hasMeaningfulSlot = false;\r\n\r\n  private syncStyleVars(): void {\r\n    this.style.setProperty(\"--radio-checked-color\", resolveColor(this.color));\r\n  }\r\n\r\n  protected override willUpdate(changed: Map<string, unknown>): void {\r\n    super.willUpdate(changed);\r\n    if (changed.size === 0 || changed.has(\"color\")) {\r\n      this.syncStyleVars();\r\n    }\r\n  }\r\n\r\n  public check(): void {\r\n    if (this.disabled || this.readonly) return;\r\n    this.checked = true;\r\n    this.syncFormValue();\r\n  }\r\n\r\n  public focusRadio(): void {\r\n    const input = this.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null;\r\n    input?.focus();\r\n  }\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n\r\n    /* readonly: allow focus + keyboard traversal, but show subtle visual state */\r\n    :host([readonly]) label {\r\n      cursor: default;\r\n    }\r\n\r\n    label {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--sky-space-1\\\\.5, 6px);\r\n      color: var(--sky-text-primary);\r\n      cursor: pointer;\r\n      font-size: var(--sky-font-size-sm);\r\n      font-family: var(--sky-font);\r\n    }\r\n\r\n    label[disabled] {\r\n      pointer-events: none;\r\n      opacity: 0.6;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    :host([disabled]) label,\r\n    :host([disabled]) .radio-wrapper {\r\n      pointer-events: none;\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n\r\n    .radio-wrapper {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      width: 18px;\r\n      height: 18px;\r\n      display: inline-block;\r\n      background: var(--sky-glass-solid);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: 2px solid var(--sky-text-tertiary);\r\n      border-radius: 50%;\r\n      transition:\r\n        border-color 0.3s ease-in-out,\r\n        background-color 0.3s ease-in-out,\r\n        box-shadow 0.3s ease-in-out;\r\n      cursor: pointer;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .radio-wrapper::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%) scale(0);\r\n      width: 10px;\r\n      height: 10px;\r\n      background-color: var(--sky-glass-solid);\r\n      border-radius: 50%;\r\n      transition:\r\n        transform 0.3s ease-in-out,\r\n        background-color 0.3s ease-in-out;\r\n    }\r\n\r\n    .radio-wrapper.checked {\r\n      border-color: var(--radio-checked-color);\r\n      background-color: var(--radio-checked-color);\r\n    }\r\n\r\n    .radio-wrapper.checked::before {\r\n      transform: translate(-50%, -50%) scale(1);\r\n    }\r\n\r\n    input[type=\"radio\"] {\r\n      position: absolute;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      width: 0;\r\n      height: 0;\r\n    }\r\n\r\n    :host(:focus-within) .radio-wrapper {\r\n      box-shadow: var(--sky-focus-ring);\r\n      border-color: var(--radio-checked-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .radio-wrapper,\r\n      .radio-wrapper::before {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  constructor() {\r\n    super();\r\n    this.captureDefaultValue(\"\");\r\n  }\r\n  static override shadowRootOptions = {\r\n    ...LitElement.shadowRootOptions,\r\n    delegatesFocus: true,\r\n  };\r\n\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"keydown\", this.handleKeydown);\r\n    // Make the host focusable\r\n    if (!this.hasAttribute(\"tabindex\")) {\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    this.removeEventListener(\"keydown\", this.handleKeydown);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  override updated(changed: Map<string, unknown>): void {\r\n    const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n      \"input[type='radio']\",\r\n    );\r\n\r\n    if (changed.has(\"checked\")) {\r\n      if (input && input.checked !== this.checked) input.checked = this.checked;\r\n\r\n      if (changed.get(\"checked\") !== undefined) {\r\n        this.syncFormValue();\r\n        this.syncValidity();\r\n      }\r\n    }\r\n    if (changed.has(\"disabled\") || changed.has(\"readonly\")) {\r\n      if (input) {\r\n        input.disabled = this.disabled;\r\n        input.readOnly = this.readonly;\r\n      }\r\n      this.tabIndex = this.disabled ? -1 : 0;\r\n    }\r\n\r\n    if (changed.has(\"value\")) {\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  private _onSlotChange = (e: Event) => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const next = this._slotHasMeaningfulContent(slot);\r\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n  };\r\n\r\n  private onNativeChange = (e: Event) => {\r\n    const input = e.currentTarget as HTMLInputElement;\r\n\r\n    // ✅ Prevent state change when disabled or readonly, and re-sync native state\r\n    if (this.disabled || this.readonly) {\r\n      if (input.checked !== this.checked) {\r\n        input.checked = this.checked;\r\n      }\r\n      return;\r\n    }\r\n\r\n    const becameChecked = input.checked && !this.checked;\r\n    this.checked = input.checked;\r\n\r\n    // When used individually, uncheck siblings with the same name\r\n    if (this.checked && this.name && !this.closest(\"sky-radio-group\")) {\r\n      const all = Array.from(document.querySelectorAll<SkyRadio>(\"sky-radio\"));\r\n      for (const r of all) {\r\n        if (r !== this && r.name === this.name) r.checked = false;\r\n      }\r\n    }\r\n\r\n    if (becameChecked) {\r\n      // Dispatch custom event\r\n      this.dispatchEvent(\r\n        new CustomEvent<SkyRadioSelectDetail>(\"radio-select\", {\r\n          detail: { value: this.value },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n\r\n      // Dispatch native events for form compatibility\r\n      this.reemitNativeEvent(\"change\", e);\r\n      this.reemitNativeEvent(\"input\", e);\r\n\r\n      // Sync form value\r\n      this.syncFormValue();\r\n      this.syncValidity();\r\n    }\r\n  };\r\n\r\n  private handleKeydown = (event: KeyboardEvent) => {\r\n    // ✅ no keyboard activation in disabled/readonly mode\r\n    if (this.disabled || this.readonly) return;\r\n\r\n    if (event.key === \" \" || event.key === \"Enter\") {\r\n      event.preventDefault();\r\n      const input = this.shadowRoot?.querySelector<HTMLInputElement>(\r\n        \"input[type='radio']\"\r\n      );\r\n      input?.click();\r\n    }\r\n  };\r\n\r\n  // ============================================================\r\n  // FormControlBase implementation\r\n  // ============================================================\r\n\r\n  /** Get the current value for form submission */\r\n  protected override getFormValue(): FormState {\r\n    return this.checked ? this.value : null;\r\n  }\r\n\r\n  /** Set value from form state (e.g., form reset) */\r\n  protected override setValueFromFormState(state: FormState): void {\r\n    if (typeof state === \"string\") {\r\n      this.checked = state === this.value;\r\n    } else {\r\n      this.checked = false;\r\n    }\r\n  }\r\n\r\n  /** Get the validity anchor (the hidden input) */\r\n  protected override getValidityAnchor(): HTMLElement | undefined {\r\n    return this.getNativeControl() || undefined;\r\n  }\r\n\r\n  /** Check if empty (for required validation) */\r\n  protected override isEmpty(): boolean {\r\n    return !this.checked;\r\n  }\r\n\r\n  /** Get the native control (hidden radio input) */\r\n  protected override getNativeControl(): HTMLElement | null {\r\n    return this.shadowRoot?.querySelector<HTMLElement>(\"input[type='radio']\") || null;\r\n  }\r\n\r\n  /** Handle native value mutation */\r\n  protected override onNativeValueMutated(_native: any): void {\r\n    // Sync the checked state from native input\r\n    const input = this.getNativeControl() as HTMLInputElement;\r\n    if (input) {\r\n      this.checked = input.checked;\r\n    }\r\n  }\r\n\r\n  /** Override to provide custom error messages */\r\n  protected override getCustomErrorMessage(): string {\r\n    return this.validationErrors?.[0] || \"\";\r\n  }\r\n\r\n  /** Get current validation errors */\r\n  get validationErrors(): string[] {\r\n    return this.required && !this.checked ? [this.requiredMessage] : [];\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <label\r\n        part=\"label\"\r\n        ?disabled=${this.disabled}\r\n        ?readonly=${this.readonly}\r\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\r\n        aria-readonly=${this.readonly ? \"true\" : \"false\"}\r\n      >\r\n        <input\r\n          type=\"radio\"\r\n          part=\"input\"\r\n          .name=${this.name}\r\n          .value=${this.value}\r\n          .checked=${this.checked}\r\n          @change=${this.onNativeChange}\r\n          ?disabled=${this.disabled}\r\n          ?required=${this.required}\r\n        />\r\n        <div\r\n          class=${classMap({ \"radio-wrapper\": true, checked: this.checked })}\r\n          part=\"wrapper\"\r\n        ></div>\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasMeaningfulSlot, () => this.label)}\r\n      </label>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyRadio","FormControlBase","constructor","super","this","label","value","checked","color","_hasMeaningfulSlot","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","onNativeChange","input","currentTarget","disabled","readonly","becameChecked","name","closest","all","Array","from","document","querySelectorAll","r","dispatchEvent","CustomEvent","detail","bubbles","composed","reemitNativeEvent","syncFormValue","syncValidity","handleKeydown","event","key","preventDefault","shadowRoot","querySelector","click","captureDefaultValue","syncStyleVars","style","setProperty","resolveColor","willUpdate","changed","size","has","check","focusRadio","focus","connectedCallback","addEventListener","hasAttribute","tabIndex","disconnectedCallback","removeEventListener","updated","get","readOnly","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","getFormValue","setValueFromFormState","state","getValidityAnchor","getNativeControl","isEmpty","onNativeValueMutated","_native","getCustomErrorMessage","validationErrors","required","requiredMessage","render","html","classMap","when","styles","css","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-radio.js","sources":["../../src/sky-radio/sky-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { resolveColor } from \"../helper/utils/color-resolver\";\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\n\nexport type SkyRadioSelectDetail = { value: string };\nexport type SkyRadioValidationErrorDetail = { errors: string[] };\nexport type SkyRadioValueClearedDetail = { value: \"\" };\n\n/**\n * @element sky-radio\n *\n * @summary Single radio option for grouped or standalone selection.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/radio\n *\n * @slot - Content to display instead of the label property.\n *\n * @csspart wrapper - The circular radio control element.\n * @csspart input - The native hidden radio input element.\n * @csspart label - The text label element.\n *\n * @property {string} label - Text label displayed beside the control.\n * @property {string} value - Option value used for selection and form value.\n * @property {boolean} checked - Whether this option is selected.\n * @property {string} name - Radio name used for same-name exclusivity.\n * @property {string} color - Accent color used in checked state.\n * @property {boolean} disabled - Disables user interaction.\n * @property {boolean} readonly - Prevents selection changes while still allowing focus.\n * @property {boolean} required - Enables required validation for standalone usage.\n * @property {string} requiredMessage - Error message for required validation failures.\n * @property {boolean} compact - Compact control size.\n *\n * @fires {CustomEvent<SkyRadioSelectDetail>} radio-select - Fired when the option becomes selected.\n * @fires {Event} change - Native change event for form compatibility.\n * @fires {Event} input - Native input event for form compatibility.\n * @fires {CustomEvent<SkyRadioValidationErrorDetail>} validation-error - Fired when validation errors occur.\n * @fires {CustomEvent<SkyRadioValueClearedDetail>} value-cleared - Fired when selection is reset.\n * @method check Selects this radio option.\n * @method focusRadio Focuses the underlying native radio control.\n *\n * @Behavior\n * - Uses a native hidden radio input for semantics and keyboard interaction.\n * - Supports grouped usage inside `sky-radio-group` and standalone usage.\n * - Synchronizes checked state and form value through `FormControlBase`.\n *\n * @example\n * ```html\n * <sky-radio-group label=\"Deployment\" name=\"deployment\">\n *   <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\n *   <sky-radio value=\"green\">Green Environment</sky-radio>\n * </sky-radio-group>\n * ```\n * ```vue\n * <template>\n *   <sky-radio-group label=\"Deployment\" name=\"deployment\">\n *     <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\n *     <sky-radio value=\"green\">Green Environment</sky-radio>\n *   </sky-radio-group>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-radio-group label=\"Deployment\" name=\"deployment\">\n *       <sky-radio value=\"blue\" checked color=\"primary\">Blue Environment</sky-radio>\n *       <sky-radio value=\"green\">Green Environment</sky-radio>\n *     </sky-radio-group>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-radio\")\nexport class SkyRadio extends FormControlBase {\n  @property({ type: String }) label: string = \"\";\n  @property({ type: String }) value: string = \"\";\n  @property({ type: Boolean, reflect: true }) checked: boolean = false;\n  @property({ type: String }) color: string = \"primary\";\n  @property({ type: Boolean, reflect: true }) compact = false;\n  @state() private _hasMeaningfulSlot = false;\n\n  private syncStyleVars(): void {\n    this.style.setProperty(\"--radio-checked-color\", resolveColor(this.color));\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>): void {\n    super.willUpdate(changed);\n    if (changed.size === 0 || changed.has(\"color\")) {\n      this.syncStyleVars();\n    }\n  }\n\n  public check(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = true;\n    this.syncFormValue();\n  }\n\n  public focusRadio(): void {\n    const input = this.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null;\n    input?.focus();\n  }\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      --sky-radio-size: 18px;\n      --sky-radio-dot: 10px;\n    }\n\n    :host([compact]) {\n      --sky-radio-size: 14px;\n      --sky-radio-dot: 8px;\n    }\n\n    :host([compact]) label {\n      font-size: var(--sky-font-size-xs);\n      gap: var(--sky-space-1, 4px);\n    }\n\n    /* readonly: allow focus + keyboard traversal, but show subtle visual state */\n    :host([readonly]) label {\n      cursor: default;\n    }\n\n    label {\n      display: flex;\n      align-items: center;\n      gap: var(--sky-space-1\\\\.5, 6px);\n      color: var(--sky-text-primary);\n      cursor: pointer;\n      font-size: var(--sky-font-size-sm);\n      font-family: var(--sky-font);\n    }\n\n    label[disabled] {\n      pointer-events: none;\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    :host([disabled]) label,\n    :host([disabled]) .radio-wrapper {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.6;\n    }\n\n    .radio-wrapper {\n      position: relative;\n      box-sizing: border-box;\n      width: var(--sky-radio-size);\n      height: var(--sky-radio-size);\n      display: inline-block;\n      background: var(--sky-glass-solid);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      border: 2px solid var(--sky-text-tertiary);\n      border-radius: 50%;\n      transition:\n        border-color var(--sky-transition-normal, 200ms ease),\n        background-color var(--sky-transition-normal, 200ms ease),\n        box-shadow var(--sky-transition-normal, 200ms ease);\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .radio-wrapper::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) scale(0);\n      width: var(--sky-radio-dot);\n      height: var(--sky-radio-dot);\n      background-color: var(--sky-glass-solid);\n      border-radius: 50%;\n      transition:\n        transform var(--sky-transition-normal, 200ms ease),\n        background-color var(--sky-transition-normal, 200ms ease);\n    }\n\n    .radio-wrapper.checked {\n      border-color: var(--radio-checked-color);\n      background-color: var(--radio-checked-color);\n    }\n\n    .radio-wrapper.checked::before {\n      transform: translate(-50%, -50%) scale(1);\n      background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));\n    }\n\n    input[type=\"radio\"] {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 0;\n      height: 0;\n    }\n\n    :host(:focus-within) .radio-wrapper {\n      box-shadow: var(--sky-focus-ring);\n      border-color: var(--radio-checked-color);\n    }\n\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .radio-wrapper,\n      .radio-wrapper::before {\n        transition: none;\n      }\n    }\n\n    ${unsafeCSS(\n      cssOnFillEnhance([\n        {\n          selector: \".radio-wrapper.checked::before\",\n          fillVar: \"--radio-checked-color\",\n          property: \"background-color\",\n        },\n      ]),\n    )}\n  `;\n\n  constructor() {\n    super();\n    this.captureDefaultValue(\"\");\n  }\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", this.handleKeydown);\n    // Make the host focusable\n    if (!this.hasAttribute(\"tabindex\")) {\n      this.tabIndex = this.disabled ? -1 : 0;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener(\"keydown\", this.handleKeydown);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    const input = this.shadowRoot?.querySelector<HTMLInputElement>(\n      \"input[type='radio']\",\n    );\n\n    if (changed.has(\"checked\")) {\n      if (input && input.checked !== this.checked) input.checked = this.checked;\n\n      if (changed.get(\"checked\") !== undefined) {\n        this.syncFormValue();\n        this.syncValidity();\n      }\n    }\n    if (changed.has(\"disabled\") || changed.has(\"readonly\")) {\n      if (input) {\n        input.disabled = this.disabled;\n        input.readOnly = this.readonly;\n      }\n      this.tabIndex = this.disabled ? -1 : 0;\n    }\n\n    if (changed.has(\"value\")) {\n      this.syncFormValue();\n      this.syncValidity();\n    }\n  }\n\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\n    const nodes = slotEl.assignedNodes({ flatten: true });\n    return nodes.some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? true\n        : (n.textContent ?? \"\").trim().length > 0\n    );\n  }\n\n  private _onSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const next = this._slotHasMeaningfulContent(slot);\n    if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\n  };\n\n  private onNativeChange = (e: Event) => {\n    const input = e.currentTarget as HTMLInputElement;\n\n    // ✅ Prevent state change when disabled or readonly, and re-sync native state\n    if (this.disabled || this.readonly) {\n      if (input.checked !== this.checked) {\n        input.checked = this.checked;\n      }\n      return;\n    }\n\n    const becameChecked = input.checked && !this.checked;\n    this.checked = input.checked;\n\n    // When used individually, uncheck siblings with the same name\n    if (this.checked && this.name && !this.closest(\"sky-radio-group\")) {\n      const all = Array.from(document.querySelectorAll<SkyRadio>(\"sky-radio\"));\n      for (const r of all) {\n        if (r !== this && r.name === this.name) r.checked = false;\n      }\n    }\n\n    if (becameChecked) {\n      // Dispatch custom event\n      this.dispatchEvent(\n        new CustomEvent<SkyRadioSelectDetail>(\"radio-select\", {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n\n      // Dispatch native events for form compatibility\n      this.reemitNativeEvent(\"change\", e);\n      this.reemitNativeEvent(\"input\", e);\n\n      // Sync form value\n      this.syncFormValue();\n      this.syncValidity();\n    }\n  };\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    // ✅ no keyboard activation in disabled/readonly mode\n    if (this.disabled || this.readonly) return;\n\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      const input = this.shadowRoot?.querySelector<HTMLInputElement>(\n        \"input[type='radio']\"\n      );\n      input?.click();\n    }\n  };\n\n  // ============================================================\n  // FormControlBase implementation\n  // ============================================================\n\n  /** Get the current value for form submission */\n  protected override getFormValue(): FormState {\n    return this.checked ? this.value : null;\n  }\n\n  /** Set value from form state (e.g., form reset) */\n  protected override setValueFromFormState(state: FormState): void {\n    if (typeof state === \"string\") {\n      this.checked = state === this.value;\n    } else {\n      this.checked = false;\n    }\n  }\n\n  /** Get the validity anchor (the hidden input) */\n  protected override getValidityAnchor(): HTMLElement | undefined {\n    return this.getNativeControl() || undefined;\n  }\n\n  /** Check if empty (for required validation) */\n  protected override isEmpty(): boolean {\n    return !this.checked;\n  }\n\n  /** Get the native control (hidden radio input) */\n  protected override getNativeControl(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(\"input[type='radio']\") || null;\n  }\n\n  /** Handle native value mutation */\n  protected override onNativeValueMutated(_native: any): void {\n    // Sync the checked state from native input\n    const input = this.getNativeControl() as HTMLInputElement;\n    if (input) {\n      this.checked = input.checked;\n    }\n  }\n\n  /** Override to provide custom error messages */\n  protected override getCustomErrorMessage(): string {\n    return this.validationErrors?.[0] || \"\";\n  }\n\n  /** Get current validation errors */\n  get validationErrors(): string[] {\n    return this.required && !this.checked ? [this.requiredMessage] : [];\n  }\n\n  override render() {\n    return html`\n      <label\n        part=\"label\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-readonly=${this.readonly ? \"true\" : \"false\"}\n      >\n        <input\n          type=\"radio\"\n          part=\"input\"\n          .name=${this.name}\n          .value=${this.value}\n          .checked=${this.checked}\n          @change=${this.onNativeChange}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n        />\n        <div\n          class=${classMap({ \"radio-wrapper\": true, checked: this.checked })}\n          part=\"wrapper\"\n        ></div>\n        <slot @slotchange=${this._onSlotChange}></slot>\n        ${when(!this._hasMeaningfulSlot, () => this.label)}\n      </label>\n    `;\n  }\n}\n"],"names":["SkyRadio","FormControlBase","constructor","super","this","label","value","checked","color","compact","_hasMeaningfulSlot","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","onNativeChange","input","currentTarget","disabled","readonly","becameChecked","name","closest","all","Array","from","document","querySelectorAll","r","dispatchEvent","CustomEvent","detail","bubbles","composed","reemitNativeEvent","syncFormValue","syncValidity","handleKeydown","event","key","preventDefault","shadowRoot","querySelector","click","captureDefaultValue","syncStyleVars","style","setProperty","resolveColor","willUpdate","changed","size","has","check","focusRadio","focus","connectedCallback","addEventListener","hasAttribute","tabIndex","disconnectedCallback","removeEventListener","updated","get","readOnly","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","trim","length","getFormValue","setValueFromFormState","state","getValidityAnchor","getNativeControl","isEmpty","onNativeValueMutated","_native","getCustomErrorMessage","validationErrors","required","requiredMessage","render","html","classMap","when","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-sheet/sky-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-sheet.js","sources":["../../src/sky-sheet/sky-sheet.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver.js\";\r\n\r\nexport type SkySheetBackground = \"primary\" | \"secondary\" | \"tertiary\" | \"solid\" | \"transparent\";\r\nexport type SkySheetBlurLevel = \"none\" | \"sm\" | \"md\" | \"lg\";\r\nexport type SkySheetShadow = \"none\" | \"sm\" | \"md\" | \"lg\" | \"inset\";\r\nexport type SkySheetBorder = \"none\" | \"sm\" | \"md\" | \"lg\";\r\n\r\n/** Preset tokens or any CSS length (e.g. `1rem`, `16px`). */\r\nexport type SkySheetRadius = string;\r\n\r\nconst SHEET_RADIUS_PRESETS: Record<string, string> = {\r\n  none: \"0\",\r\n  sm: \"var(--sky-radius-primary)\",\r\n  md: \"var(--sky-radius-secondary)\",\r\n  lg: \"var(--sky-radius-tertiary)\",\r\n  xl: \"var(--sky-radius-full)\",\r\n};\r\n\r\n/** Preset map includes `xl`; arbitrary values pass through like `resolveRadius`. */\r\nexport function resolveSheetRadius(input: string): string {\r\n  if (Object.prototype.hasOwnProperty.call(SHEET_RADIUS_PRESETS, input)) {\r\n    return SHEET_RADIUS_PRESETS[input];\r\n  }\r\n  return resolveRadius(input);\r\n}\r\n\r\n/**\r\n * @element sky-sheet\r\n *\r\n * @summary Themed surface container with configurable background, blur, border, and shadow.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/sheet\r\n *\r\n * @slot - Content placed inside the sheet container.\r\n *\r\n * @property {SkySheetBackground} bg - Background style.\r\n * @property {SkySheetBlurLevel} blurLevel - Backdrop blur intensity.\r\n * @property {SkySheetShadow} shadow - Shadow style preset.\r\n * @property {SkySheetBorder} border - Border style preset.\r\n * @property {SkySheetRadius} radius - Preset (`none`, `sm`, `md`, `lg`, `xl`) or CSS length (`1rem`, `16px`).\r\n *\r\n * @Behavior\r\n * - Applies visual styles directly on `:host` for compact composition.\r\n * - Uses theme CSS variables for consistent glass and elevation tokens.\r\n * - Renders slot content without additional wrappers.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n *   <h3>Deployment Summary</h3>\r\n *   <p>All regional checks passed. Ready to promote to production.</p>\r\n * </sky-sheet>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n *     <h3>Deployment Summary</h3>\r\n *     <p>All regional checks passed. Ready to promote to production.</p>\r\n *   </sky-sheet>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\r\n *       <h3>Deployment Summary</h3>\r\n *       <p>All regional checks passed. Ready to promote to production.</p>\r\n *     </sky-sheet>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-sheet\")\r\nexport class SkySheet extends LitElement {\r\n\r\n  @property({ type: String, reflect: true })\r\n  bg: SkySheetBackground = \"primary\";\r\n\r\n  @property({ type: String, reflect: true })\r\n  blurLevel: SkySheetBlurLevel = \"sm\";\r\n\r\n  @property({ type: String, reflect: true })\r\n  shadow: SkySheetShadow = \"sm\";\r\n\r\n  @property({ type: String, reflect: true })\r\n  border: SkySheetBorder = \"sm\";\r\n\r\n  @property({ type: String, reflect: true })\r\n  radius: SkySheetRadius = \"md\";\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this._applyRadiusVar();\r\n  }\r\n\r\n  private _applyRadiusVar(): void {\r\n    this.style.setProperty(\"--sheet-radius\", resolveSheetRadius(this.radius));\r\n  }\r\n\r\n  protected override willUpdate(changed: PropertyValues): void {\r\n    super.willUpdate(changed);\r\n    if (changed.size === 0 || changed.has(\"radius\")) {\r\n      this._applyRadiusVar();\r\n    }\r\n  }\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      font-family: var(--sky-font);\r\n      width: 100%;\r\n      height: 100%;\r\n      padding: var(--sky-space-3, 12px);\r\n      border-radius: var(--sheet-radius, var(--sky-radius-secondary));\r\n    }\r\n\r\n    /* background */\r\n    :host([bg=\"primary\"]) {\r\n      background: var(--sky-glass-primary);\r\n    }\r\n    :host([bg=\"secondary\"]) {\r\n      background: var(--sky-glass-secondary);\r\n    }\r\n    :host([bg=\"tertiary\"]) {\r\n      background: var(--sky-glass-tertiary);\r\n    }\r\n    :host([bg=\"solid\"]) {\r\n      background: var(--sky-glass-solid);\r\n      background-image: none;\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n    :host([bg=\"transparent\"]) {\r\n      background: transparent;\r\n      background-image: none;\r\n    }\r\n\r\n    :host([bg=\"primary\"]:not([blurLevel=\"none\"])),\r\n    :host([bg=\"secondary\"]:not([blurLevel=\"none\"])),\r\n    :host([bg=\"tertiary\"]:not([blurLevel=\"none\"])) {\r\n      background-image: var(--sky-glass-surface);\r\n    }\r\n\r\n    :host([blurLevel=\"none\"]) {\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n    }\r\n    :host([blurLevel=\"sm\"]) {\r\n      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)\r\n        var(--sky-saturation-primary);\r\n      -webkit-backdrop-filter: var(--sky-blur-primary)\r\n        var(--sky-brightness-primary) var(--sky-saturation-primary);\r\n    }\r\n    :host([blurLevel=\"md\"]) {\r\n      backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)\r\n        var(--sky-saturation-secondary);\r\n      -webkit-backdrop-filter: var(--sky-blur-secondary)\r\n        var(--sky-brightness-secondary) var(--sky-saturation-secondary);\r\n    }\r\n    :host([blurLevel=\"lg\"]) {\r\n      backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)\r\n        var(--sky-saturation-tertiary);\r\n      -webkit-backdrop-filter: var(--sky-blur-tertiary)\r\n        var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);\r\n    }\r\n\r\n    /* shadow */\r\n    :host([shadow=\"none\"]) {\r\n      box-shadow: none;\r\n    }\r\n    :host([shadow=\"sm\"]) {\r\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\r\n    }\r\n    :host([shadow=\"md\"]) {\r\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);\r\n    }\r\n    :host([shadow=\"lg\"]) {\r\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);\r\n    }\r\n    :host([shadow=\"inset\"]) {\r\n      box-shadow: var(--sky-box-shadow-inset);\r\n    }\r\n\r\n    /* border */\r\n    :host([border=\"none\"]) {\r\n      border: none;\r\n    }\r\n    :host([border=\"sm\"]) {\r\n      border: var(--sky-border-primary);\r\n    }\r\n    :host([border=\"md\"]) {\r\n      border: var(--sky-border-secondary);\r\n    }\r\n    :host([border=\"lg\"]) {\r\n      border: var(--sky-border-tertiary);\r\n    }\r\n  `;\r\n\r\n  override render() {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n"],"names":["SHEET_RADIUS_PRESETS","none","sm","md","lg","xl","resolveSheetRadius","input","Object","prototype","hasOwnProperty","call","resolveRadius","SkySheet","LitElement","constructor","super","arguments","this","bg","blurLevel","shadow","border","radius","connectedCallback","_applyRadiusVar","style","setProperty","willUpdate","changed","size","has","render","html","styles","css","__decorateClass","property","type","String","reflect","customElement"],"mappings":"qXAYA,MAAMA,EAA+C,CACnDC,KAAM,IACNC,GAAI,4BACJC,GAAI,8BACJC,GAAI,6BACJC,GAAI,0BAIC,SAASC,EAAmBC,GACjC,OAAIC,OAAOC,UAAUC,eAAeC,KAAKX,EAAsBO,GACtDP,EAAqBO,GAEvBK,EAAcL,EACvB,CAoDO,IAAMM,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAGLC,KAAAC,GAAyB,UAGzBD,KAAAE,UAA+B,KAG/BF,KAAAG,OAAyB,KAGzBH,KAAAI,OAAyB,KAGzBJ,KAAAK,OAAyB,IAAA,CAEhB,iBAAAC,GACPR,MAAMQ,oBACNN,KAAKO,iBACP,CAEQ,eAAAA,GACNP,KAAKQ,MAAMC,YAAY,iBAAkBrB,EAAmBY,KAAKK,QACnE,CAEmB,UAAAK,CAAWC,GAC5Bb,MAAMY,WAAWC,IACI,IAAjBA,EAAQC,MAAcD,EAAQE,IAAI,YACpCb,KAAKO,iBAET,CA+FS,MAAAO,GACP,OAAOC,CAAA,eACT,GAhIWpB,EAiCKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA9BzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAFxB3B,EAGXJ,UAAA,KAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KALxB3B,EAMXJ,UAAA,YAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KARxB3B,EASXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAXxB3B,EAYXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxB3B,EAeXJ,UAAA,SAAA,GAfWI,EAANuB,EAAA,CADNK,EAAc,cACF5B"}
+{"version":3,"file":"sky-sheet.js","sources":["../../src/sky-sheet/sky-sheet.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { resolveRadius } from \"../helper/utils/size-resolver.js\";\n\nexport type SkySheetBackground = \"primary\" | \"secondary\" | \"tertiary\" | \"solid\" | \"transparent\";\nexport type SkySheetBlurLevel = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type SkySheetShadow = \"none\" | \"sm\" | \"md\" | \"lg\" | \"inset\";\nexport type SkySheetBorder = \"none\" | \"sm\" | \"md\" | \"lg\";\n\n/** Preset tokens or any CSS length (e.g. `1rem`, `16px`). */\nexport type SkySheetRadius = string;\n\nconst SHEET_RADIUS_PRESETS: Record<string, string> = {\n  none: \"0\",\n  sm: \"var(--sky-radius-primary)\",\n  md: \"var(--sky-radius-secondary)\",\n  lg: \"var(--sky-radius-tertiary)\",\n  xl: \"var(--sky-radius-full)\",\n};\n\n/** Preset map includes `xl`; arbitrary values pass through like `resolveRadius`. */\nexport function resolveSheetRadius(input: string): string {\n  if (Object.prototype.hasOwnProperty.call(SHEET_RADIUS_PRESETS, input)) {\n    return SHEET_RADIUS_PRESETS[input];\n  }\n  return resolveRadius(input);\n}\n\n/**\n * @element sky-sheet\n *\n * @summary Themed surface container with configurable background, blur, border, and shadow.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/sheet\n *\n * @slot - Content placed inside the sheet container.\n *\n * @property {SkySheetBackground} bg - Background style.\n * @property {SkySheetBlurLevel} blurLevel - Backdrop blur intensity.\n * @property {SkySheetShadow} shadow - Shadow style preset.\n * @property {SkySheetBorder} border - Border style preset.\n * @property {SkySheetRadius} radius - Preset (`none`, `sm`, `md`, `lg`, `xl`) or CSS length (`1rem`, `16px`).\n *\n * @Behavior\n * - Applies visual styles directly on `:host` for compact composition.\n * - Uses theme CSS variables for consistent glass and elevation tokens.\n * - Renders slot content without additional wrappers.\n *\n * @example\n * ```html\n * <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n *   <h3>Deployment Summary</h3>\n *   <p>All regional checks passed. Ready to promote to production.</p>\n * </sky-sheet>\n * ```\n * ```vue\n * <template>\n *   <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n *     <h3>Deployment Summary</h3>\n *     <p>All regional checks passed. Ready to promote to production.</p>\n *   </sky-sheet>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-sheet bg=\"solid\" blur-level=\"md\" shadow=\"lg\" border=\"md\" radius=\"lg\">\n *       <h3>Deployment Summary</h3>\n *       <p>All regional checks passed. Ready to promote to production.</p>\n *     </sky-sheet>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-sheet\")\nexport class SkySheet extends LitElement {\n\n  @property({ type: String, reflect: true })\n  bg: SkySheetBackground = \"primary\";\n\n  @property({ type: String, reflect: true })\n  blurLevel: SkySheetBlurLevel = \"sm\";\n\n  @property({ type: String, reflect: true })\n  shadow: SkySheetShadow = \"sm\";\n\n  @property({ type: String, reflect: true })\n  border: SkySheetBorder = \"sm\";\n\n  @property({ type: String, reflect: true })\n  radius: SkySheetRadius = \"md\";\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyRadiusVar();\n  }\n\n  private _applyRadiusVar(): void {\n    this.style.setProperty(\"--sheet-radius\", resolveSheetRadius(this.radius));\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.size === 0 || changed.has(\"radius\")) {\n      this._applyRadiusVar();\n    }\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      box-sizing: border-box;\n      font-family: var(--sky-font);\n      width: 100%;\n      height: 100%;\n      padding: var(--sky-space-3, 12px);\n      border-radius: var(--sheet-radius, var(--sky-radius-secondary));\n    }\n\n    /* background */\n    :host([bg=\"primary\"]) {\n      background: var(--sky-glass-primary);\n    }\n    :host([bg=\"secondary\"]) {\n      background: var(--sky-glass-secondary);\n    }\n    :host([bg=\"tertiary\"]) {\n      background: var(--sky-glass-tertiary);\n    }\n    :host([bg=\"solid\"]) {\n      background: var(--sky-glass-solid);\n      background-image: none;\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    :host([bg=\"transparent\"]) {\n      background: transparent;\n      background-image: none;\n    }\n\n    :host([bg=\"primary\"]:not([blurLevel=\"none\"])),\n    :host([bg=\"secondary\"]:not([blurLevel=\"none\"])),\n    :host([bg=\"tertiary\"]:not([blurLevel=\"none\"])) {\n      background-image: var(--sky-glass-surface);\n    }\n\n    :host([blurLevel=\"none\"]) {\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n    }\n    :host([blurLevel=\"sm\"]) {\n      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)\n        var(--sky-saturation-primary);\n      -webkit-backdrop-filter: var(--sky-blur-primary)\n        var(--sky-brightness-primary) var(--sky-saturation-primary);\n    }\n    :host([blurLevel=\"md\"]) {\n      backdrop-filter: var(--sky-blur-secondary) var(--sky-brightness-secondary)\n        var(--sky-saturation-secondary);\n      -webkit-backdrop-filter: var(--sky-blur-secondary)\n        var(--sky-brightness-secondary) var(--sky-saturation-secondary);\n    }\n    :host([blurLevel=\"lg\"]) {\n      backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)\n        var(--sky-saturation-tertiary);\n      -webkit-backdrop-filter: var(--sky-blur-tertiary)\n        var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);\n    }\n\n    /* shadow */\n    :host([shadow=\"none\"]) {\n      box-shadow: none;\n    }\n    :host([shadow=\"sm\"]) {\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-primary);\n    }\n    :host([shadow=\"md\"]) {\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-secondary);\n    }\n    :host([shadow=\"lg\"]) {\n      box-shadow: var(--sky-box-shadow-inset), var(--sky-box-shadow-tertiary);\n    }\n    :host([shadow=\"inset\"]) {\n      box-shadow: var(--sky-box-shadow-inset);\n    }\n\n    /* border */\n    :host([border=\"none\"]) {\n      border: none;\n    }\n    :host([border=\"sm\"]) {\n      border: var(--sky-border-primary);\n    }\n    :host([border=\"md\"]) {\n      border: var(--sky-border-secondary);\n    }\n    :host([border=\"lg\"]) {\n      border: var(--sky-border-tertiary);\n    }\n  `;\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n"],"names":["SHEET_RADIUS_PRESETS","none","sm","md","lg","xl","resolveSheetRadius","input","Object","prototype","hasOwnProperty","call","resolveRadius","SkySheet","LitElement","constructor","super","arguments","this","bg","blurLevel","shadow","border","radius","connectedCallback","_applyRadiusVar","style","setProperty","willUpdate","changed","size","has","render","html","styles","css","__decorateClass","property","type","String","reflect","customElement"],"mappings":"qXAYA,MAAMA,EAA+C,CACnDC,KAAM,IACNC,GAAI,4BACJC,GAAI,8BACJC,GAAI,6BACJC,GAAI,0BAIC,SAASC,EAAmBC,GACjC,OAAIC,OAAOC,UAAUC,eAAeC,KAAKX,EAAsBO,GACtDP,EAAqBO,GAEvBK,EAAcL,EACvB,CAoDO,IAAMM,EAAN,cAAuBC,EAAvB,WAAAC,GAAAC,SAAAC,WAGLC,KAAAC,GAAyB,UAGzBD,KAAAE,UAA+B,KAG/BF,KAAAG,OAAyB,KAGzBH,KAAAI,OAAyB,KAGzBJ,KAAAK,OAAyB,IAAA,CAEhB,iBAAAC,GACPR,MAAMQ,oBACNN,KAAKO,iBACP,CAEQ,eAAAA,GACNP,KAAKQ,MAAMC,YAAY,iBAAkBrB,EAAmBY,KAAKK,QACnE,CAEmB,UAAAK,CAAWC,GAC5Bb,MAAMY,WAAWC,IACI,IAAjBA,EAAQC,MAAcD,EAAQE,IAAI,YACpCb,KAAKO,iBAET,CA+FS,MAAAO,GACP,OAAOC,CAAA,eACT,GAhIWpB,EAiCKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA9BzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAFxB3B,EAGXJ,UAAA,KAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KALxB3B,EAMXJ,UAAA,YAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KARxB3B,EASXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAXxB3B,EAYXJ,UAAA,SAAA,GAGA2B,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAdxB3B,EAeXJ,UAAA,SAAA,GAfWI,EAANuB,EAAA,CADNK,EAAc,cACF5B"}

package/dist/sky-theme-provider/sky-theme-provider.js

@@ -1,4 +1,4 @@
-import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#F5F7FA",opacities:{primary:.34,secondary:.34,tertiary:.34,solid:1}},overlay:{color:"#F5F7FA",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#000000",opacity:{primary:.08,secondary:.11,tertiary:.14,solid:1}},fontFamily:"'SF Pro Text', 'Poppins', Arial, sans-serif",fontFamilyMono:"ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"0em",wide:"0.025em",wider:"0.05em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#FAFAFA",foreground:"#1A1A1A",active:"#0485f7",success:"#17C964",warning:"#F5A524",danger:"#Ff383c",info:"#9353D3"},blur:{primary:"10px",secondary:"20px",tertiary:"28px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 6px 18px rgba(0,0,0,0.05)",secondary:"0 10px 28px rgba(0,0,0,0.08)",tertiary:"0 16px 40px rgba(0,0,0,0.10)",inset:"inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.04)",hover:"0 8px 24px rgba(0,0,0,0.10)"},brightness:{primary:"1.02",secondary:"1.06",tertiary:"1.08"},saturation:{primary:"1.05",secondary:"1.12",tertiary:"1.18"},separator:"rgba(0,0,0,0.10)",border:{primary:"1px solid rgba(0,0,0,0.10)",secondary:"1px solid rgba(0,0,0,0.08)",tertiary:"1px solid rgba(0,0,0,0.06)"},glassSurface:{top:.24,bottom:.06},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85}},dark:{glass:{baseColor:"#181A1B",opacities:{primary:.4,secondary:.4,tertiary:.4,solid:1}},overlay:{color:"#181A1B",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#FFFFFF",opacity:{primary:.1,secondary:.14,tertiary:.18,solid:1}},fontFamily:"'SF Pro Text', 'Poppins', Arial, sans-serif",fontFamilyMono:"ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"0em",wide:"0.025em",wider:"0.05em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#181A1B",foreground:"#E5E5E5",active:"#0485f7",success:"#17C964",warning:"#f7b750",danger:"#db3b3e",info:"#9353D3"},blur:{primary:"10px",secondary:"20px",tertiary:"28px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 6px 18px rgba(0,0,0,0.28)",secondary:"0 10px 28px rgba(0,0,0,0.32)",tertiary:"0 16px 40px rgba(0,0,0,0.36)",inset:"inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.22)",hover:"0 8px 24px rgba(0,0,0,0.38)"},brightness:{primary:"1.0",secondary:"1.04",tertiary:"1.06"},saturation:{primary:"1.08",secondary:"1.15",tertiary:"1.22"},separator:"rgba(255,255,255,0.10)",border:{primary:"1px solid rgba(255,255,255,0.12)",secondary:"1px solid rgba(255,255,255,0.10)",tertiary:"1px solid rgba(255,255,255,0.08)"},glassSurface:{top:.26,bottom:.08},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85}}};function d(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function h(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}function b(e){return{light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})}}function g(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function f(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function x(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function v(e){return x(e),e}function $(e,r){const t=g(r),o=f(100*t);if(t<=0)return"transparent";if(t>=1)return v(e);if(x(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function S(e,r,t){return`color-mix(in oklch, ${e} ${f(r)}%, ${t})`}function w(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function E(e){return`\n${e} {\n  scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${w(e,"::-webkit-scrollbar-track")} {\n  background: var(--sky-scrollbar-track);\n}\n${w(e,"::-webkit-scrollbar-thumb")} {\n  background-color: var(--sky-scrollbar-thumb);\n}\n${w(e,"::-webkit-scrollbar-thumb:hover")} {\n  background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function z(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function F(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const C=i("sky/theme");let j=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=d(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??d())&&(this.mode=h("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=h(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=h(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??d(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\n      body {\n        font-family: var(--sky-font);\n        margin: 0;\n        padding: 0;\n        background: var(--sky-background-color);\n        color: var(--sky-text-primary);\n      }\n\n      html[data-sky-dialog-open="true"] {\n        overflow: hidden !important;\n        position: relative;\n        height: 100%;\n      }\n\n      ${E("html, body, *")}\n    `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}F(this.hostScrollbarStyleId,E("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",v(r?"#FFFFFF":"#0B1020")),o("sky-text-light",v(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",v(e.color.background)),o("sky-text-primary",v(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},d=c?.primary??S(n,m.primary,y),h=c?.secondary??S(n,m.secondary,y),p=c?.tertiary??S(n,m.tertiary,y),k=r?.4:.34,u={primary:g(l.primary,k),secondary:g(l.secondary??l.primary,k),tertiary:g(l.tertiary??l.primary,k),solid:g(l.solid,1)};o("sky-glass-primary",$(d,u.primary)),o("sky-glass-secondary",$(h,u.secondary)),o("sky-glass-tertiary",$(p,u.tertiary)),o("sky-glass-solid",$(n,u.solid));const b=g(e.glassSurface?.top,r?.26:.24),f=g(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n      180deg,\n      ${$(h,b)},\n      ${$(d,f)}\n    )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,$(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,$(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const x=e.scrollbar;o("sky-scrollbar-track",x?.track??"transparent"),o("sky-scrollbar-thumb",x?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",x?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const w=["active","success","warning","danger","info"];w.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),w.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),w.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-active-primary) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const E=(r,t)=>e.fontSize?.[r]??t,z=(r,t)=>e.lineHeight?.[r]??t,F=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of F){const s=E(r,"1rem"),a=z(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=E(r.size,"1rem"),s=j(r.weight,"400"),a=z(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(b(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=z(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=z(e,":root");F(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=b(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};j.styles=e`
+import{css as e,LitElement as r,html as t}from"lit";import{property as o,state as s,customElement as a}from"lit/decorators.js";import{createContext as i,provide as n}from"@lit/context";var c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,y=(e,r,t,o)=>{for(var s,a=o>1?void 0:o?l(r,t):r,i=e.length-1;i>=0;i--)(s=e[i])&&(a=(o?s(r,t,a):s(a))||a);return o&&a&&c(r,t,a),a};const m={light:{glass:{baseColor:"#FFFFFF",baseShades:{secondary:"#F1F5F9",tertiary:"#E2E8F0"},opacities:{primary:.1,secondary:.12,tertiary:.16,solid:.18}},overlay:{color:"#E8EEF6",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#0F172A",opacity:{primary:.06,secondary:.08,tertiary:.1,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#E8EEF6",foreground:"#0F172A",active:"#2563EB",success:"#17C964",warning:"#F5A524",danger:"#FF383C",info:"#6366F1"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04)",secondary:"0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05)",tertiary:"0 4px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(15, 23, 42, 0.03)",hover:"0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(15, 23, 42, 0.12)",border:{primary:"1px solid rgba(15, 23, 42, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(15, 23, 42, 0.14) 52%, transparent)"},glassSurface:{top:.14,bottom:.03},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 36%, #0F172A 20%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 54%, #0F172A 16%), transparent)"}},dark:{glass:{baseColor:"#141B2D",baseShades:{secondary:"#1A2235",tertiary:"#222C42"},opacities:{primary:.16,secondary:.18,tertiary:.22,solid:.24}},overlay:{color:"#0B1020",opacities:{primary:.75,secondary:.33,tertiary:.19,solid:1}},glassHover:{color:"#E2E8F0",opacity:{primary:.08,secondary:.1,tertiary:.12,solid:1}},fontFamily:"'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontFamilyMono:"'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem"},fontWeight:{thin:"100",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800"},lineHeight:{tight:"1.1",snug:"1.25",normal:"1.5",relaxed:"1.75",loose:"2"},letterSpacing:{tighter:"-0.03em",tight:"-0.015em",normal:"0em",wide:"0.02em",wider:"0.04em"},spacing:{0:"0px",px:"1px",.5:"0.125rem",1:"0.25rem",1.5:"0.375rem",2:"0.5rem",2.5:"0.625rem",3:"0.75rem",3.5:"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},color:{background:"#0B1020",foreground:"#E2E8F0",active:"#2563EB",success:"#17C964",warning:"#F7B750",danger:"#DB3B3E",info:"#818CF8"},blur:{primary:"12px",secondary:"24px",tertiary:"32px"},radius:{primary:"8px",secondary:"12px",tertiary:"16px",full:"9999px"},boxshadow:{primary:"0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.22)",secondary:"0 2px 4px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.26)",tertiary:"0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.3)",inset:"inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.18)",hover:"0 2px 6px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.32)"},brightness:{primary:"1.04",secondary:"1.08",tertiary:"1.10"},saturation:{primary:"1.08",secondary:"1.14",tertiary:"1.20"},separator:"rgba(226, 232, 240, 0.1)",border:{primary:"1px solid rgba(226, 232, 240, 0.14)",secondary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 72%, transparent)",tertiary:"1px solid color-mix(in srgb, rgba(226, 232, 240, 0.14) 52%, transparent)"},glassSurface:{top:.16,bottom:.05},motion:{duration:{instant:"0ms",fast:"120ms",normal:"200ms",slow:"300ms"},ease:{default:"cubic-bezier(0.4, 0, 0.2, 1)",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)",inOut:"cubic-bezier(0.4, 0, 0.2, 1)",bounce:"cubic-bezier(0.34, 1.56, 0.64, 1)"}},zIndex:{base:0,dropdown:1e3,sticky:1100,fixed:1200,modal:1300,popover:1400,toast:1500,max:9999},opacity:{disabled:.5,muted:.7,subtle:.85},scrollbar:{track:"transparent",thumb:"color-mix(in oklch, color-mix(in oklch, #2563EB 44%, #E2E8F0 16%), transparent)",thumbHover:"color-mix(in oklch, color-mix(in oklch, #2563EB 62%, #E2E8F0 12%), transparent)"}}};function d(){try{if("undefined"!=typeof localStorage){const e=localStorage.getItem("theme");return"light"===e||"dark"===e||"system"===e?e:"system"}}catch{}return"system"}function h(e){if("undefined"==typeof window)return"light";if("system"===e){try{if(window.matchMedia)return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{}return"light"}return e}function p(){if("undefined"==typeof document)return"light";const e=document.documentElement.getAttribute("data-theme");return"light"===e||"dark"===e?e:"undefined"!=typeof matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function k(e){if("undefined"==typeof window)return()=>{};const r=r=>{const{mode:t,preference:o}=r.detail||{};"light"===t||"dark"===t?e(t,o):e(p(),void 0)};return window.addEventListener("sky-theme",r),queueMicrotask(()=>e(p(),void 0)),()=>window.removeEventListener("sky-theme",r)}function u(e,r){const t=Array.isArray(e)?[...e]:{...e};for(const o in r){const s=r[o];s&&"object"==typeof s&&!Array.isArray(s)?t[o]=u(e[o],s):t[o]=s??e[o]}return t}function b(e){return{light:u(m.light,e.light??{}),dark:u(m.dark,e.dark??{})}}function g(e,r=1){const t="number"==typeof e&&Number.isFinite(e)?e:r;return Math.max(0,Math.min(1,t))}function x(e){return Number.isFinite(e)?Math.max(0,Math.min(100,Math.round(e))):100}function f(e){return/^oklch\(\s*[\d.]+\s+[\d.]+\s+[\d.]+(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.test(e.trim())}function v(e){return f(e),e}function $(e,r){const t=g(r),o=x(100*t);if(t<=0)return"transparent";if(t>=1)return v(e);if(f(e)){const r=e.trim();return r.includes("/")?r:r.replace(/\)$/,` / ${o}%)`)}return`color-mix(in oklch, ${e} ${o}%, transparent)`}function S(e,r,t){return`color-mix(in oklch, ${e} ${x(r)}%, ${t})`}function E(e,r){return e.split(",").map(e=>`${e.trim()}${r}`).join(",\n")}function w(e){return`\n${e} {\n  scrollbar-color: var(--sky-scrollbar-thumb) var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-track")} {\n  background: var(--sky-scrollbar-track);\n}\n${E(e,"::-webkit-scrollbar-thumb")} {\n  background-color: var(--sky-scrollbar-thumb);\n}\n${E(e,"::-webkit-scrollbar-thumb:hover")} {\n  background-color: var(--sky-scrollbar-thumb-hover);\n}\n`.trim()}function F(e,r){return`${r}{${Object.entries(e).map(([e,r])=>`${e.replace(/\./g,"\\.")}:${r};`).join("")}}`}function z(e,r){let t=document.getElementById(e);return t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=r,t}const C=i("sky/theme");let j=class extends r{constructor(){super(...arguments),this.scope="root",this.preference=d(),this.mode="light",this.persist=!0,this.broadcast=!0,this.media=null,this.globalStyleId="sky-theme-provider-global-style",this.hostScrollbarStyleId="sky-theme-provider-host-scrollbar",this.hostSheet=null,this.hostStyleEl=null,this.rootVarsStyleId="sky-theme-vars-root",this.onSystemChange=()=>{"system"===(this.preference??d())&&(this.mode=h("system"),this.applyVariables(),this.pushContext(),this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.mode=h(this.preference),this.pushContext(),this.setupSystemWatcher(),"host"===this.scope&&this.applyVariables()}disconnectedCallback(){if(super.disconnectedCallback(),this.media?.removeEventListener("change",this.onSystemChange),this.hostStyleEl&&this.hostStyleEl.parentNode&&(this.hostStyleEl.parentNode.removeChild(this.hostStyleEl),this.hostStyleEl=null),"host"===this.scope){const e=document.getElementById(this.globalStyleId);e&&e.remove();const r=document.getElementById(this.hostScrollbarStyleId);r&&r.remove()}}firstUpdated(){"root"!==this.scope&&"both"!==this.scope||this.applyVariables()}updated(e){super.updated(e),(e.has("userTheme")||e.has("mode")||e.has("preference")||e.has("scope"))&&this.pushContext()}willUpdate(e){const r=e.has("preference"),t=e.has("scope"),o=e.has("userTheme");let s=!1;if(r||t){const e=h(this.preference);e!==this.mode&&(this.mode=e,s=!0)}const a=!!this.hasUpdated;if(("host"===this.scope||a)&&(s||t||o)&&this.applyVariables(),r||s||o||t){this.pushContext();const e="host"===this.scope&&a&&(o||r||s||t);this.broadcast&&("root"===this.scope||"both"===this.scope||e)&&this.broadcastTheme()}}setRootThemeAttrs(){const e=document.documentElement;e.toggleAttribute("data-theme-light","light"===this.mode),e.toggleAttribute("data-theme-dark","dark"===this.mode),e.setAttribute("data-theme",this.mode),e.style.colorScheme=this.mode,e.classList.toggle("dark","dark"===this.mode)}broadcastTheme(){const e={mode:this.mode,preference:this.preference};window.dispatchEvent(new CustomEvent("sky-theme",{detail:e})),window.dispatchEvent(new CustomEvent("theme-change-global",{detail:e}))}setPreference(e){try{!this.persist||"root"!==this.scope&&"both"!==this.scope||localStorage.setItem("theme",e)}catch{}this.preference=e,!this.broadcast||"root"!==this.scope&&"both"!==this.scope||this.dispatchEvent(new CustomEvent("theme-change-global",{bubbles:!0,composed:!0}))}togglePreference(){const e=this.preference??d(),r="light"===e?"dark":"dark"===e?"system":"light";return this.setPreference(r),r}setupSystemWatcher(){"undefined"!=typeof window&&window.matchMedia&&(this.media=window.matchMedia("(prefers-color-scheme: dark)"),this.media.addEventListener("change",this.onSystemChange))}ensureGlobalStyle(){if("undefined"==typeof document)return;const e=`\n      body {\n        font-family: var(--sky-font);\n        margin: 0;\n        padding: 0;\n        background: var(--sky-background-color);\n        color: var(--sky-text-primary);\n      }\n\n      html[data-sky-dialog-open="true"] {\n        overflow: hidden !important;\n        position: relative;\n        height: 100%;\n      }\n\n      ${w("html, body, *")}\n    `.trim();let r=document.getElementById(this.globalStyleId);r?r.textContent=e:(r=document.createElement("style"),r.id=this.globalStyleId,r.textContent=e,document.head.appendChild(r))}applyHostNativeScrollbars(e){if("undefined"!=typeof document){if(this.toggleAttribute("sky-native-scrollbars",e),!e){const e=document.getElementById(this.hostScrollbarStyleId);return void(e&&e.remove())}z(this.hostScrollbarStyleId,w("sky-theme-provider[sky-native-scrollbars], sky-theme-provider[sky-native-scrollbars] *"))}}applyVariables(){const e=function(e,r){const t={},o=(e,r)=>{null!=r&&(t[`--${e}`]=r)};o("sky-text-dark",v(r?"#FFFFFF":"#0B1020")),o("sky-text-light",v(r?"#030712":"#FFFFFF"));const s=e.fontFamily,a=e.fontFamilyMono??"ui-monospace, monospace";o("sky-font",s),o("sky-font-sans",s),o("sky-font-mono",a),o("sky-background-color",v(e.color.background)),o("sky-text-primary",v(e.color.foreground));const i=r?{secondary:82,tertiary:66,quaternary:50,quinary:36}:{secondary:76,tertiary:60,quaternary:44,quinary:30};Object.entries(i).forEach(([e,r])=>{o(`sky-text-${e}`,`color-mix(in oklch, var(--sky-text-primary) ${r}%, var(--sky-background-color))`)}),["primary","secondary","tertiary","quaternary","quinary"].forEach(e=>{o(`sky-text-${e}-hover`,`color-mix(in oklch, var(--sky-text-${e}) 86%, var(--sky-text-dark))`)});const{baseColor:n,baseShades:c,opacities:l}=e.glass,y=e.color.foreground,m=r?{primary:96,secondary:88,tertiary:78}:{primary:96,secondary:90,tertiary:82},d=c?.primary??S(n,m.primary,y),h=c?.secondary??S(n,m.secondary,y),p=c?.tertiary??S(n,m.tertiary,y),k=r?.4:.34,u={primary:g(l.primary,k),secondary:g(l.secondary??l.primary,k),tertiary:g(l.tertiary??l.primary,k),solid:g(l.solid,1)};o("sky-glass-primary",$(d,u.primary)),o("sky-glass-secondary",$(h,u.secondary)),o("sky-glass-tertiary",$(p,u.tertiary)),o("sky-glass-solid",$(n,u.solid));const b=g(e.glassSurface?.top,r?.26:.24),x=g(e.glassSurface?.bottom,r?.08:.06);o("sky-glass-surface",`linear-gradient(\n      180deg,\n      ${$(h,b)},\n      ${$(d,x)}\n    )`),Object.entries(e.overlay.opacities).forEach(([r,t])=>{o(`sky-overlay-${r}`,$(e.overlay.color,t))}),Object.entries(e.glassHover.opacity).forEach(([r,t])=>{o(`sky-hover-${r}`,$(e.glassHover.color,t))}),Object.entries(e.border).forEach(([e,r])=>{o(`sky-border-${e}`,r)}),Object.entries(e.radius).forEach(([e,r])=>{o(`sky-radius-${e}`,r)}),Object.entries(e.blur).forEach(([e,r])=>{o(`sky-blur-${e}`,`blur(${r})`)}),Object.entries(e.brightness).forEach(([e,r])=>{o(`sky-brightness-${e}`,`brightness(${r})`)}),Object.entries(e.saturation).forEach(([e,r])=>{o(`sky-saturation-${e}`,`saturate(${r})`)}),Object.entries(e.boxshadow).forEach(([e,r])=>{o(`sky-box-shadow-${e}`,r)}),o("sky-border-light",e.separator),Object.entries(e.motion?.duration??{}).forEach(([e,r])=>{o(`sky-duration-${e}`,r)}),Object.entries(e.motion?.ease??{}).forEach(([e,r])=>{o(`sky-ease-${e}`,r)}),o("sky-transition-default",["background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),o("sky-transition-fast",["background-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","border-color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","color var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","box-shadow var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))","opacity var(--sky-duration-fast, 120ms) var(--sky-ease-default, cubic-bezier(0.4, 0, 0.2, 1))"].join(", ")),Object.entries(e.zIndex??{}).forEach(([e,r])=>{o(`sky-z-${e}`,String(r))}),Object.entries(e.opacity??{}).forEach(([e,r])=>{o(`sky-opacity-${e}`,String(r))});const f=e.scrollbar;o("sky-scrollbar-track",f?.track??"transparent"),o("sky-scrollbar-thumb",f?.thumb??(r?"color-mix(in oklch, var(--sky-text-tertiary) 78%, transparent)":"color-mix(in oklch, var(--sky-text-tertiary) 68%, transparent)")),o("sky-scrollbar-thumb-hover",f?.thumbHover??(r?"color-mix(in oklch, var(--sky-text-secondary) 52%, var(--sky-active-primary))":"color-mix(in oklch, var(--sky-text-secondary) 44%, var(--sky-active-primary))")),o("sky-text-shadow-on-glass",r?"0 1px 2px rgba(0,0,0,0.45)":"0 1px 1px rgba(255,255,255,0.55)");const E=["active","success","warning","danger","info"];E.forEach(r=>{const t=e.color[r];o(`sky-${r}-primary`,t),o(`sky-${r}-secondary`,`color-mix(in oklch, var(--sky-${r}-primary) 82%, var(--sky-background-color))`),o(`sky-${r}-tertiary`,`color-mix(in oklch, var(--sky-${r}-primary) 62%, var(--sky-background-color))`),o(`sky-${r}-quaternary`,`color-mix(in oklch, var(--sky-${r}-primary) 42%, var(--sky-background-color))`),o(`sky-${r}-quinary`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, var(--sky-background-color))`),o(`sky-${r}-primary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 88%, var(--sky-text-dark))`),o(`sky-${r}-secondary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 72%, var(--sky-text-dark))`),o(`sky-${r}-tertiary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 56%, var(--sky-text-dark))`),o(`sky-${r}-quaternary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 40%, var(--sky-text-dark))`),o(`sky-${r}-quinary-dark`,`color-mix(in oklch, var(--sky-${r}-primary) 28%, var(--sky-text-dark))`),o(`sky-${r}-g0`,`color-mix(in oklch, var(--sky-${r}-primary) 12%, transparent)`),o(`sky-${r}-g1`,`color-mix(in oklch, var(--sky-${r}-primary) 24%, transparent)`),o(`sky-${r}-g2`,`color-mix(in oklch, var(--sky-${r}-primary) 48%, transparent)`)}),E.forEach(e=>{o(`sky-${e}-primary-hover`,`color-mix(in oklch, var(--sky-${e}-primary) 86%, var(--sky-text-dark))`),o(`sky-${e}-secondary-hover`,`color-mix(in oklch, var(--sky-${e}-secondary) 86%, var(--sky-text-dark))`),o(`sky-${e}-tertiary-hover`,`color-mix(in oklch, var(--sky-${e}-tertiary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quaternary-hover`,`color-mix(in oklch, var(--sky-${e}-quaternary) 86%, var(--sky-text-dark))`),o(`sky-${e}-quinary-hover`,`color-mix(in oklch, var(--sky-${e}-quinary) 86%, var(--sky-text-dark))`)}),E.forEach(e=>{o(`sky-ring-${e}-1`,`0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-2`,`0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-3`,`0 0 0 3px var(--sky-${e}-primary)`),o(`sky-ring-${e}-4`,`0 0 0 4px var(--sky-${e}-primary)`),o(`sky-ring-${e}-5`,`0 0 0 5px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-1`,`inset 0 0 0 1px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-2`,`inset 0 0 0 2px var(--sky-${e}-primary)`),o(`sky-ring-${e}-inset-3`,`inset 0 0 0 3px var(--sky-${e}-primary)`)}),o("sky-focus-ring","0 0 0 3px color-mix(in oklch, var(--sky-active-primary) 42%, transparent)"),o("sky-focus-ring-offset","2px"),o("sky-text-white","oklch(1 0 0)"),o("sky-text-black","oklch(0 0 0)"),o("sky-on-color-fallback-light","var(--sky-text-white)"),o("sky-on-color-fallback-dark","var(--sky-text-black)"),o("sky-on-active-primary","var(--sky-on-color-fallback-light)"),o("sky-on-success-primary","var(--sky-on-color-fallback-dark)"),o("sky-on-warning-primary","var(--sky-on-color-fallback-dark)"),o("sky-on-danger-primary","var(--sky-on-color-fallback-light)"),o("sky-on-info-primary","var(--sky-on-color-fallback-light)"),Object.entries(e.fontSize??{}).forEach(([e,r])=>{o(`sky-font-size-${e}`,r)}),Object.entries(e.fontWeight??{}).forEach(([e,r])=>{o(`sky-font-weight-${e}`,r)}),Object.entries(e.lineHeight??{}).forEach(([e,r])=>{o(`sky-line-height-${e}`,r)}),Object.entries(e.letterSpacing??{}).forEach(([e,r])=>{o(`sky-letter-spacing-${e}`,r)});const w=(r,t)=>e.fontSize?.[r]??t,F=(r,t)=>e.lineHeight?.[r]??t,z=[{key:"xs",size:"xs",line:"tight"},{key:"sm",size:"sm",line:"snug"},{key:"md",size:"md",line:"normal"},{key:"lg",size:"lg",line:"snug"},{key:"xl",size:"xl",line:"snug"},{key:"2xl",size:"2xl",line:"tight"},{key:"3xl",size:"3xl",line:"tight"},{key:"4xl",size:"4xl",line:"tight"}];for(const{key:e,size:r,line:t}of z){const s=w(r,"1rem"),a=F(t,"1.5");o(`sky-font-${e}`,`${s} / ${a} var(--sky-font-sans)`),o(`sky-font-mono-${e}`,`${s} / ${a} var(--sky-font-mono)`)}Object.entries(e.spacing??{}).forEach(([e,r])=>{o(`sky-space-${e}`,r)});const C={body:{size:"md",weight:"normal",line:"normal"},label:{size:"sm",weight:"medium",line:"snug"},caption:{size:"xs",weight:"normal",line:"tight"},title:{size:"lg",weight:"semibold",line:"snug"},heading:{size:"2xl",weight:"bold",line:"tight"},display:{size:"4xl",weight:"bold",line:"tight"}},j=(r,t)=>e.fontWeight?.[r]??t;for(const[e,r]of Object.entries(C)){const t=w(r.size,"1rem"),s=j(r.weight,"400"),a=F(r.line,"1.5");o(`sky-text-${e}`,`${s} ${t}/${a} var(--sky-font-sans)`)}return t}(b(this.userTheme||{})[this.mode],"dark"===this.mode);if(this.toggleAttribute("data-theme-light","light"===this.mode),this.toggleAttribute("data-theme-dark","dark"===this.mode),"host"===this.scope||"both"===this.scope){const r=F(e,":host");if("adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype){if(!this.hostSheet){this.hostSheet=new CSSStyleSheet;const e=this.renderRoot.adoptedStyleSheets??[];this.renderRoot.adoptedStyleSheets=[...e,this.hostSheet]}this.hostSheet.replaceSync(r)}else this.hostStyleEl||(this.hostStyleEl=document.createElement("style"),this.renderRoot.appendChild(this.hostStyleEl)),this.hostStyleEl.textContent=r;this.style.removeProperty("color"),this.style.removeProperty("background"),this.applyHostNativeScrollbars(!0)}else this.applyHostNativeScrollbars(!1);if("root"===this.scope||"both"===this.scope){const r=F(e,":root");z(this.rootVarsStyleId,r),this.setRootThemeAttrs(),this.ensureGlobalStyle(),document.body&&(document.body.style.removeProperty("color"),document.body.style.removeProperty("background"),document.body.style.removeProperty("font-family")),this.broadcastTheme()}}pushContext(){const e=b(this.userTheme??{});this._ctx={mode:this.mode,preference:this.preference,theme:e,setPreference:e=>this.setPreference(e),togglePreference:()=>this.togglePreference()}}render(){return t`<slot></slot>`}};j.styles=e`
     :host {
       display: contents;
     }