@sky.ui/core 0.0.38 → 0.0.40

package/dist/sky-form/sky-form.js

@@ -47,22 +47,22 @@ import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,sta
         target=${n(this.target||void 0)}
       >
         ${this.csrfToken?i`<input
-              type="hidden"
-              name="csrfmiddlewaretoken"
-              .value=${this.csrfToken}
-            />`:e}
+                type="hidden"
+                name="csrfmiddlewaretoken"
+                .value=${this.csrfToken}
+              />`:e}
         <slot></slot>
       </form>
 
       ${this.errorBox&&this.validationErrors.length>0&&this.showErrors&&this.validationActive?i`
-            <div class="error-wrapper" part="error-box">
-              <div class="error-container">
-                <div class="error-title">${this.errorBoxMessage}</div>
-                <ul class="error-list" part="error-list">
-                  ${this.validationErrors.map(t=>i`<li class="error-item">${t}</li>`)}
-                </ul>
+              <div class="error-wrapper" part="error-box">
+                <div class="error-container">
+                  <div class="error-title">${this.errorBoxMessage}</div>
+                  <ul class="error-list" part="error-list">
+                    ${this.validationErrors.map(t=>i`<li class="error-item">${t}</li>`)}
+                  </ul>
+                </div>
               </div>
-            </div>
-          `:e}
+            `:e}
     `}};d([r({type:Boolean})],c.prototype,"liveValidation",2),d([r({type:Boolean})],c.prototype,"showErrors",2),d([r({type:Boolean})],c.prototype,"errorBox",2),d([r({type:String})],c.prototype,"errorBoxMessage",2),d([r({type:String})],c.prototype,"mode",2),d([r({type:String})],c.prototype,"method",2),d([r({type:String})],c.prototype,"action",2),d([r({type:String})],c.prototype,"target",2),d([r({type:String})],c.prototype,"enctype",2),d([r({type:String})],c.prototype,"autocomplete",2),d([r({type:Boolean})],c.prototype,"noValidate",2),d([r({type:Boolean})],c.prototype,"enterSubmit",2),d([r({type:Boolean})],c.prototype,"resetOnSubmit",2),d([r({type:String})],c.prototype,"csrfToken",2),d([s()],c.prototype,"validationErrors",2),d([s()],c.prototype,"submitSuccess",2),d([s()],c.prototype,"validationActive",2),d([o("form")],c.prototype,"_formEl",2),c=d([a("sky-form")],c);export{c as SkyForm};
 //# sourceMappingURL=sky-form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-form.js","sources":["../../src/sky-form/sky-form.ts"],"sourcesContent":["import { LitElement, html, nothing, css } from \"lit\";\r\nimport { customElement, property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nexport type SkyFormMode = \"client\" | \"server\";\r\nexport type SkyFormMethod = \"get\" | \"post\";\r\nexport type SkyFormEnctype =\r\n  | \"application/x-www-form-urlencoded\"\r\n  | \"multipart/form-data\"\r\n  | \"text/plain\";\r\nexport type SkyFormAutocomplete = \"on\" | \"off\";\r\nexport type SkyFormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;\r\nexport type SkyFormChangeDetail = { values: SkyFormValues; formData: FormData; success: boolean };\r\nexport type SkyFormValidationErrorsDetail = { errors: string[] };\r\nexport type SkyFormSubmitDetail = { values: SkyFormValues; formData: FormData; success: boolean };\r\nexport type SkyFormFormDataFallbackDetail = { formData: FormData };\r\n\r\n/**\r\n * @element sky-form\r\n *\r\n * @summary Form wrapper with unified validation, error aggregation, and client/server submit flows.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/form\r\n *\r\n * @slot - Form elements: inputs, buttons, and other form controls.\r\n *\r\n * @property {boolean} liveValidation - Validates and emits `form-change` on value changes.\r\n * @property {boolean} showErrors - Shows validation errors in child controls when available.\r\n * @property {boolean} errorBox - Shows consolidated validation messages above the form.\r\n * @property {string} errorBoxMessage - Header message shown in the consolidated error box.\r\n * @property {SkyFormMode} mode - Submission mode (`client` or `server`).\r\n * @property {SkyFormMethod | undefined} method - Native form method in server mode.\r\n * @property {string | undefined} action - Native form action in server mode.\r\n * @property {string | undefined} target - Native form target in server mode.\r\n * @property {SkyFormEnctype | undefined} enctype - Native form encoding type.\r\n * @property {SkyFormAutocomplete | undefined} autocomplete - Native form autocomplete behavior.\r\n * @property {boolean} noValidate - Disables native HTML constraint UI.\r\n * @property {boolean} enterSubmit - Submits on Enter for non-textarea controls.\r\n * @property {boolean} resetOnSubmit - Resets form after successful submit.\r\n * @property {string | null} csrfToken - Optional CSRF token value for app-level submit handling.\r\n *\r\n * @fires {CustomEvent<SkyFormChangeDetail>} form-change - Fired when form values change in live validation mode.\r\n * @fires {CustomEvent<SkyFormValidationErrorsDetail>} validation-errors - Fired when aggregated validation errors change.\r\n * @fires {CustomEvent<SkyFormFormDataFallbackDetail> | FormDataEvent} formdata - Fired before client-mode submit with form data.\r\n * @fires {CustomEvent<SkyFormSubmitDetail>} form-submit - Fired after successful client-mode submit handling.\r\n *\r\n * @method checkValidity Returns native form validity without UI reporting.\r\n * @method reportValidity Returns native form validity and reports native UI messages.\r\n * @method requestSubmit Requests submission using optional submitter.\r\n * @method reset Resets native form and values.\r\n * @method resetForm Alias for `reset`.\r\n * @method submit Submits form using mode-specific client/server flow.\r\n *\r\n * @csspart error-box - Container for the consolidated error messages.\r\n * @csspart error-list - List element containing validation errors.\r\n *\r\n * @Behavior\r\n * - Provides seamless integration of custom form controls with native HTML form behavior\r\n * - Supports both client-side AJAX submissions and traditional server-side submissions\r\n * - Automatic validation aggregation from both native and custom form controls\r\n * - Light DOM rendering for proper browser form association\r\n *\r\n * The component automatically associates form controls (including custom elements) with the native form\r\n * using the `form` attribute, ensuring proper browser validation and FormData collection.\r\n *\r\n * - **Live Validation**: Validates on every input change (when liveValidation=true)\r\n * - **Submit Validation**: Validates only on form submission\r\n * - **Mixed Validation**: Combines both native HTML5 validation and custom component validation\r\n *\r\n * - **Client Mode**: Prevents page refresh, emits formdata/form-submit events for JavaScript handling\r\n * - **Server Mode**: Allows traditional form submission with page navigation/refresh\r\n *\r\n * @example\r\n * ```html\r\n * <sky-form id=\"login-form\" live-validation error-box>\r\n *   <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *   <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *   <sky-button type=\"submit\">Sign In</sky-button>\r\n * </sky-form>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-form id=\"login-form\" live-validation error-box @form-submit=\"onSubmit\">\r\n *     <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *     <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *     <sky-button type=\"submit\">Sign In</sky-button>\r\n *   </sky-form>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-form id=\"login-form\" live-validation error-box>\r\n *       <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *       <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *       <sky-button type=\"submit\">Sign In</sky-button>\r\n *     </sky-form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-form\")\r\nexport class SkyForm extends LitElement {\r\n\r\n  /**\r\n   * When true, validates form on every value change.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  liveValidation = false;\r\n\r\n  /**\r\n   * Controls whether validation errors are displayed.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  showErrors = true;\r\n\r\n  /**\r\n   * When true, displays a consolidated error box with all validation errors.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  errorBox = false;\r\n\r\n  /**\r\n   * Custom message displayed in the error box header.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  errorBoxMessage = \"Fix These Issues Before Submitting\";\r\n\r\n  /**\r\n   * Submission mode: 'client' prevents page refresh, 'server' allows native form submission.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  mode: SkyFormMode = \"client\";\r\n\r\n  /**\r\n   * HTTP method for form submission (when mode='server').\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  method?: SkyFormMethod;\r\n\r\n  /**\r\n   * URL for form submission (when mode='server').\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  action?: string;\r\n\r\n  /**\r\n   * Target window/frame for form submission.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  target?: string;\r\n\r\n  /**\r\n   * Form encoding type.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  enctype?: SkyFormEnctype;\r\n\r\n  /**\r\n   * HTML autocomplete attribute.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  autocomplete?: SkyFormAutocomplete;\r\n\r\n  /**\r\n   * When true, disables native HTML5 validation.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  noValidate = false;\r\n\r\n  /**\r\n   * When true, pressing Enter in any input submits the form (except textarea).\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  enterSubmit = false;\r\n\r\n  /**\r\n   * When true, resets the form after successful submission.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  resetOnSubmit = false;\r\n\r\n  /**\r\n   * CSRF token for form submission protection.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  csrfToken: string | null = null;\r\n\r\n  /**\r\n * Array of current validation error messages.\r\n * @private\r\n */\r\n  @state()\r\n  private validationErrors: string[] = [];\r\n\r\n  /**\r\n   * Indicates whether the last form submission was successful.\r\n   * @private\r\n   */\r\n  @state()\r\n  private submitSuccess = false;\r\n\r\n  /**\r\n * Indicates whether validation is currently active (errors shown).\r\n * @private\r\n */\r\n  @state()\r\n  private validationActive = false;\r\n\r\n\r\n\r\n  /** Reference to the native form element. */\r\n  @query(\"form\")\r\n  private _formEl!: HTMLFormElement;\r\n\r\n  private _mo?: MutationObserver;\r\n  private _syncQueued = false;\r\n  private _handlingSubmit = false;\r\n  private _handlingInvalid = false;\r\n\r\n  /** MUST be light DOM for button[form=\"...\"] + native id lookup */\r\n  protected override createRenderRoot(): this {\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Returns the native HTML form element.\r\n   * @public\r\n   */\r\n  public get formElement(): HTMLFormElement {\r\n    return this._formEl;\r\n  }\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this._queueSync();\r\n\r\n    // ✅ capture submit before it reaches the <form> target\r\n    this.addEventListener(\"submit\", this._onHostSubmitCapture as any, true);\r\n    this.addEventListener(\"formdata\", this._onFormDataCapture as any, true);\r\n    this.addEventListener(\"value-changed\", this._handleValueChanged as any);\r\n    this.addEventListener(\"keydown\", this._onEnterKey as any, true);\r\n    this.addEventListener(\"invalid\", this._onInvalidCapture as any, true);\r\n    this._mo = new MutationObserver(() => this._queueSync());\r\n    this._mo.observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    this.removeEventListener(\"submit\", this._onHostSubmitCapture as any, true);\r\n    this.removeEventListener(\"formdata\", this._onFormDataCapture as any, true);\r\n    this.removeEventListener(\"value-changed\", this._handleValueChanged as any);\r\n    this.removeEventListener(\"keydown\", this._onEnterKey as any, true);\r\n    this.removeEventListener(\"invalid\", this._onInvalidCapture as any, true);\r\n    this._mo?.disconnect();\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private _queueSync(): void {\r\n    if (this._syncQueued) return;\r\n    this._syncQueued = true;\r\n\r\n    queueMicrotask(() => {\r\n      this._syncQueued = false;\r\n      this._moveHostIdToNativeForm();\r\n      this._ensureNativeFormHasId();\r\n      this._assignFormOwnerToChildren();\r\n      this._refreshAggregates();\r\n    });\r\n  }\r\n\r\n  private _onEnterKey = (e: KeyboardEvent) => {\r\n    if (!this.enterSubmit) return;\r\n    if (e.key !== \"Enter\") return;\r\n\r\n    const target = e.target as HTMLElement;\r\n\r\n    // ⛔ allow Enter inside textarea\r\n    if (target instanceof HTMLTextAreaElement) return;\r\n\r\n    // ⛔ ignore if a submit button already handles it\r\n    if (target.closest('button[type=\"submit\"], input[type=\"submit\"]')) {\r\n      return;\r\n    }\r\n\r\n    e.preventDefault();\r\n    this.requestSubmit();\r\n  };\r\n\r\n  /**\r\n   * Make `document.getElementById(hostId)` return the native form.\r\n   * Copies host id => native form id and removes id from host to avoid duplicate ids.\r\n   */\r\n  private _moveHostIdToNativeForm() {\r\n    const hostId = this.id?.trim();\r\n    if (!hostId || !this._formEl) return;\r\n\r\n    // set native form id\r\n    if (this._formEl.id !== hostId) this._formEl.id = hostId;\r\n\r\n    // remove host id so DOM lookups hit <form>\r\n    if (this.id === hostId) this.removeAttribute(\"id\");\r\n  }\r\n\r\n  /**\r\n   * Slotted controls remain in the light DOM under `<sky-form>`, not under the inner `<form>`.\r\n   * `_assignFormOwnerToChildren` needs a stable `id` on that `<form>` to set `form=\"…\"` on\r\n   * associated controls. When the host has no `id`, generate one so association still works.\r\n   */\r\n  private _ensureNativeFormHasId(): void {\r\n    if (!this._formEl?.id) {\r\n      const suffix =\r\n        typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\"\r\n          ? crypto.randomUUID()\r\n          : `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;\r\n      this._formEl.id = `sky-form-${suffix}`;\r\n    }\r\n  }\r\n\r\n  private _handleValueChanged = (e: Event) => {\r\n    if (!this.liveValidation) return;\r\n\r\n    // Only process if it's coming from our form elements\r\n    const target = e.target as HTMLElement;\r\n    if (\r\n      !target.matches(\r\n        \"sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea\",\r\n      )\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    // Queue a sync to update validation errors\r\n    this._queueSync();\r\n\r\n    // Emit form-change event with current form data\r\n    this._emitFormChange();\r\n  };\r\n\r\n  /**\r\n   * Whether the form passes constraint validation, without calling `form.checkValidity()`.\r\n   * `HTMLFormElement.checkValidity()` dispatches `invalid` on each invalid control; during\r\n   * liveValidation that runs on every keystroke and our capture listener would focus the first\r\n   * invalid field, stealing focus from the control the user is editing.\r\n   */\r\n  private _formValidQuiet(): boolean {\r\n    const form = this._formEl;\r\n    if (!form) return true;\r\n\r\n    for (const el of Array.from(form.elements)) {\r\n      const h = el as HTMLElement & {\r\n        willValidate?: boolean;\r\n        validity?: ValidityState;\r\n      };\r\n      if (!(\"validity\" in h) || !h.validity) continue;\r\n      if (\"willValidate\" in h && h.willValidate === false) continue;\r\n      if (!h.validity.valid) return false;\r\n    }\r\n    return true;\r\n  }\r\n\r\n  private _emitFormChange(): void {\r\n    if (!this._formEl) return;\r\n\r\n    const fd = new FormData(this._formEl);\r\n    const json = this._formDataToJSON(fd);\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyFormChangeDetail>(\"form-change\", {\r\n        detail: {\r\n          values: json,\r\n          formData: fd,\r\n          success: this._formValidQuiet(),\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Assigns form ownership to elements not inside the native <form> element.\r\n   * Ensures browser association for native submit + validation + FormData.\r\n   */\r\n  private _assignFormOwnerToChildren() {\r\n    const formId = this._formEl?.id;\r\n    if (!formId) return;\r\n\r\n    const candidates = Array.from(\r\n      this.querySelectorAll<HTMLElement>(\r\n        [\r\n          \"input\",\r\n          \"select\",\r\n          \"textarea\",\r\n          \"button\",\r\n          \"sky-button\",\r\n          \"sky-input\",\r\n          \"sky-combobox\",\r\n          \"sky-datepicker\",\r\n          \"sky-checkbox\",\r\n          \"sky-radio-group\",\r\n          \"sky-otp\",\r\n          \"sky-serial\",\r\n          \"sky-counter\",\r\n          \"sky-switch\",\r\n        ].join(\",\"),\r\n      ),\r\n    );\r\n\r\n    for (const el of candidates) {\r\n      // already inside the real form = skip\r\n      if (el.closest(\"form\") === this._formEl) continue;\r\n\r\n      // assign ownership\r\n      if ((el as { form?: HTMLFormElement }).form?.id !== formId) el.setAttribute(\"form\", formId);\r\n    }\r\n  }\r\n\r\n  private _getSkyInputs() {\r\n    return Array.from(\r\n      this.querySelectorAll<any>(\r\n        \"sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch\",\r\n      ),\r\n    );\r\n  }\r\n\r\n  private _emitValidationErrors(): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyFormValidationErrorsDetail>(\"validation-errors\", {\r\n        detail: { errors: [...this.validationErrors] },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  private _onFormDataCapture = (e: Event) => {\r\n    // Only intercept native form's event\r\n    if (!(e.target instanceof HTMLFormElement)) return;\r\n    if (e.target !== this._formEl) return;\r\n\r\n    // ⛔ Stop native bubbling so Vue doesn't see it\r\n    e.stopImmediatePropagation();\r\n    // DO NOT preventDefault – formdata is informational\r\n  };\r\n\r\n  private _onInvalidCapture = (e: Event) => {\r\n    const t = e.target as any;\r\n\r\n    // only react to invalids belonging to THIS form\r\n    if (t?.form && t.form !== this._formEl) return;\r\n\r\n    e.preventDefault();\r\n    e.stopImmediatePropagation();\r\n\r\n    // ✅ this is the ONLY thing invalid should do\r\n    this._activateValidation();\r\n\r\n    this._focusFirstInvalid();\r\n  };\r\n\r\n  private _refreshAggregates() {\r\n    const errs: string[] = [];\r\n\r\n    // 1) sky-* component errors (if they provide them)\r\n    const skyInputs = this._getSkyInputs();\r\n    for (const input of skyInputs) {\r\n      // ✅ Only run validateInput when NOT inside invalid recursion\r\n      if (!this._handlingInvalid && typeof input.validateInput === \"function\") {\r\n        input.validateInput();\r\n      }\r\n\r\n      if (Array.isArray(input.validationErrors)) {\r\n        errs.push(...input.validationErrors);\r\n      }\r\n    }\r\n\r\n    // 2) native constraint validation messages from associated elements\r\n    const elements = Array.from(this._formEl.elements) as any[];\r\n    for (const el of elements) {\r\n      // Skip buttons etc\r\n      if (!(\"willValidate\" in el) || !el.willValidate) continue;\r\n\r\n      const isValid =\r\n        \"validity\" in el && el.validity ? el.validity.valid : true;\r\n\r\n      if (!isValid) {\r\n        const msg =\r\n          el.validationMessage || `${el.name || el.id || \"Field\"} is invalid`;\r\n        errs.push(msg);\r\n      }\r\n    }\r\n\r\n    const next = [...new Set(errs)];\r\n    if (next.join(\"|\") !== this.validationErrors.join(\"|\")) {\r\n      this.validationErrors = next;\r\n      this._emitValidationErrors();\r\n    }\r\n  }\r\n\r\n  private _focusFirstInvalid() {\r\n    const inputs = this._getSkyInputs();\r\n    const firstInvalid = inputs.find(input => input.invalid === true);\r\n\r\n    if (firstInvalid) {\r\n      this._focusElement(firstInvalid);\r\n    }\r\n  }\r\n\r\n  private _focusElement(element: HTMLElement) {\r\n    const prefersReducedMotion =\r\n      typeof matchMedia === \"function\" &&\r\n      matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n    element.scrollIntoView({\r\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\r\n      block: \"center\",\r\n    });\r\n    setTimeout(() => {\r\n      element.focus({ preventScroll: true });\r\n    }, 100);\r\n  }\r\n\r\n  private _syncNow() {\r\n    this._moveHostIdToNativeForm();\r\n    this._ensureNativeFormHasId();\r\n    this._assignFormOwnerToChildren();\r\n    this._refreshAggregates();\r\n  }\r\n\r\n  private _onHostSubmitCapture = (e: Event) => {\r\n    // only intercept submits coming from the inner native form\r\n    if (!(e.target instanceof HTMLFormElement)) return;\r\n    if (e.target !== this._formEl) return;\r\n\r\n    // avoid recursion when we re-dispatch\r\n    if (this._handlingSubmit) return;\r\n    this._handlingSubmit = true;\r\n\r\n    try {\r\n      this._syncNow();\r\n      // ✅ native validation first (like <form>)\r\n      const ok = this._formEl.checkValidity();\r\n      if (!ok) {\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n        this.submitSuccess = false;\r\n        this._focusFirstInvalid();\r\n        return;\r\n      }\r\n\r\n      // ✅ If mode is 'server', allow native form submission (page refresh/navigation)\r\n      if (this.mode === \"server\") {\r\n        // Just let the native form submit proceed normally\r\n        this.submitSuccess = true;\r\n        if (this.resetOnSubmit) {\r\n          queueMicrotask(() => this.reset());\r\n        }\r\n        return;\r\n      }\r\n\r\n      // Always prevent default for client mode to avoid page refresh\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n\r\n      const fd = new FormData(this._formEl);\r\n\r\n      // ✅ Emit a REAL FormDataEvent if available (so Vue handler can use e.formData)\r\n      let dispatched = false;\r\n      try {\r\n        // @ts-ignore\r\n        const fde = new FormDataEvent(\"formdata\", {\r\n          formData: fd,\r\n          bubbles: true,\r\n          composed: true,\r\n        });\r\n        this.dispatchEvent(fde);\r\n        dispatched = true;\r\n      } catch { }\r\n\r\n      // fallback for older browsers\r\n      if (!dispatched) {\r\n        this.dispatchEvent(\r\n          new CustomEvent<SkyFormFormDataFallbackDetail>(\"formdata\", {\r\n            detail: { formData: fd },\r\n            bubbles: true,\r\n            composed: true,\r\n          }),\r\n        );\r\n      }\r\n\r\n      // optional perk event (JSON)\r\n      const json = this._formDataToJSON(fd);\r\n      this.dispatchEvent(\r\n        new CustomEvent<SkyFormSubmitDetail>(\"form-submit\", {\r\n          detail: {\r\n            values: json,\r\n            formData: fd,\r\n            success: this._formEl.checkValidity(),\r\n          },\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n\r\n      this.submitSuccess = true;\r\n      if (this.resetOnSubmit) {\r\n        queueMicrotask(() => this.reset());\r\n      }\r\n    } finally {\r\n      this._handlingSubmit = false;\r\n    }\r\n  };\r\n\r\n  private _formDataToJSON(fd: FormData): SkyFormValues {\r\n    const obj: SkyFormValues = {};\r\n\r\n    fd.forEach((value, key) => {\r\n      if (key in obj) {\r\n        // convert to array if duplicate keys\r\n        if (Array.isArray(obj[key])) {\r\n          obj[key].push(value);\r\n        } else {\r\n          obj[key] = [obj[key], value];\r\n        }\r\n      } else {\r\n        obj[key] = value;\r\n      }\r\n    });\r\n\r\n    return obj;\r\n  }\r\n\r\n  /** Activates validation mode and refreshes error aggregates. */\r\n  private _activateValidation(): void {\r\n    this.validationActive = true;\r\n\r\n    const skyInputs = this._getSkyInputs();\r\n    for (const input of skyInputs) {\r\n      input.validationActive = true;\r\n      input.showErrors = true;\r\n    }\r\n\r\n    // 🔥 IMPORTANT: defer aggregation\r\n    queueMicrotask(() => this._refreshAggregates());\r\n  }\r\n\r\n  /**\r\n   * Checks form validity without displaying validation messages.\r\n   * @returns {boolean} True if the form is valid, false otherwise.\r\n   * @public\r\n   */\r\n  public checkValidity(): boolean {\r\n    // Sync synchronously: child controls must have their `form` association set\r\n    // before form.checkValidity() runs, otherwise they are excluded from\r\n    // form.elements and validity would be reported incorrectly.\r\n    this._syncNow();\r\n    return this._formEl?.checkValidity?.() ?? true;\r\n  }\r\n\r\n  /**\r\n   * Checks form validity and displays validation messages.\r\n   * @returns {boolean} True if the form is valid, false otherwise.\r\n   * @public\r\n   */\r\n  public reportValidity(): boolean {\r\n    this._syncNow();\r\n    return this._formEl?.reportValidity?.() ?? true;\r\n  }\r\n\r\n  /**\r\n   * Requests form submission (compatible with native requestSubmit).\r\n   * @param {HTMLElement} submitter - Optional submitter element.\r\n   * @public\r\n   */\r\n  public requestSubmit(submitter?: HTMLElement): void {\r\n    this._syncNow();\r\n    this._activateValidation();\r\n    // @ts-ignore\r\n    this._formEl?.requestSubmit?.(submitter);\r\n  }\r\n\r\n  /**\r\n   * Resets the form to its initial state.\r\n   * @public\r\n   */\r\n  public reset(): void {\r\n    this._queueSync();\r\n    this._formEl?.reset();\r\n  }\r\n\r\n  /**\r\n   * Resets the form to its initial state (alias for reset()).\r\n   * @public\r\n   */\r\n  public resetForm(): void {\r\n    this._queueSync();\r\n    this._formEl?.reset();\r\n  }\r\n\r\n  /**\r\n   * Manually submits the form, respecting the current mode setting.\r\n   * In client mode, triggers the client-side submission flow.\r\n   * In server mode, performs native form submission.\r\n   * @public\r\n   */\r\n  public submit(): void {\r\n    this._activateValidation();\r\n    if (this.mode === \"client\") {\r\n      // Trigger the client-side submission flow\r\n      const submitEvent = new SubmitEvent(\"submit\", {\r\n        bubbles: true,\r\n        cancelable: true,\r\n      });\r\n      this._formEl?.dispatchEvent(submitEvent);\r\n    } else {\r\n      // In server mode, use native form submission\r\n      this._formEl?.submit();\r\n    }\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <style>\r\n        /* Scoped to the sky-form tag: this is a light-DOM component, so\r\n           unscoped class selectors would leak into the whole document. */\r\n        sky-form .error-wrapper {\r\n          width: 100%;\r\n          display: flex;\r\n          justify-content: center;\r\n        }\r\n        sky-form .error-container {\r\n          margin: var(--sky-space-3, 12px) 0;\r\n          padding: var(--sky-space-2, 8px) var(--sky-space-3, 12px);\r\n          width: 100%;\r\n          border-radius: var(--sky-radius-secondary);\r\n          border: 1px solid var(--sky-danger-primary);\r\n          background: var(--sky-glass-solid);\r\n          box-shadow: var(--sky-box-shadow-primary);\r\n          position: relative;\r\n          z-index: inherit;\r\n        }\r\n        sky-form .error-title {\r\n          font-size: var(--sky-font-size-sm, 14px);\r\n          color: var(--sky-danger-primary);\r\n          width: 100%;\r\n          display: flex;\r\n          justify-content: center;\r\n        }\r\n        sky-form .error-list {\r\n          list-style-position: inside;\r\n          padding: var(--sky-space-1, 4px);\r\n          margin: 0;\r\n          text-align: start;\r\n        }\r\n        sky-form .error-item {\r\n          font-size: var(--sky-font-size-xs, 12px);\r\n          color: var(--sky-text-primary);\r\n        }\r\n      </style>\r\n\r\n      <form\r\n        part=\"form\"\r\n        method=${ifDefined(this.method)}\r\n        action=${ifDefined(this.action)}\r\n        enctype=${ifDefined(this.enctype)}\r\n        autocomplete=${ifDefined(this.autocomplete)}\r\n        ?novalidate=${this.noValidate}\r\n        target=${ifDefined(this.target || undefined)}\r\n      >\r\n        ${this.csrfToken\r\n        ? html`<input\r\n              type=\"hidden\"\r\n              name=\"csrfmiddlewaretoken\"\r\n              .value=${this.csrfToken}\r\n            />`\r\n        : nothing}\r\n        <slot></slot>\r\n      </form>\r\n\r\n      ${this.errorBox &&\r\n        this.validationErrors.length > 0 &&\r\n        this.showErrors &&\r\n        this.validationActive\r\n        ? html`\r\n            <div class=\"error-wrapper\" part=\"error-box\">\r\n              <div class=\"error-container\">\r\n                <div class=\"error-title\">${this.errorBoxMessage}</div>\r\n                <ul class=\"error-list\" part=\"error-list\">\r\n                  ${this.validationErrors.map(\r\n          (err) => html`<li class=\"error-item\">${err}</li>`,\r\n        )}\r\n                </ul>\r\n              </div>\r\n            </div>\r\n          `\r\n        : nothing}\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyForm","LitElement","constructor","super","arguments","this","liveValidation","showErrors","errorBox","errorBoxMessage","mode","noValidate","enterSubmit","resetOnSubmit","csrfToken","validationErrors","submitSuccess","validationActive","_syncQueued","_handlingSubmit","_handlingInvalid","_onEnterKey","e","key","target","HTMLTextAreaElement","closest","preventDefault","requestSubmit","_handleValueChanged","matches","_queueSync","_emitFormChange","_onFormDataCapture","HTMLFormElement","_formEl","stopImmediatePropagation","_onInvalidCapture","t","form","_activateValidation","_focusFirstInvalid","_onHostSubmitCapture","_syncNow","checkValidity","queueMicrotask","reset","fd","FormData","dispatched","fde","FormDataEvent","formData","bubbles","composed","dispatchEvent","CustomEvent","detail","json","_formDataToJSON","values","success","createRenderRoot","formElement","connectedCallback","addEventListener","_mo","MutationObserver","observe","childList","subtree","disconnectedCallback","removeEventListener","disconnect","_moveHostIdToNativeForm","_ensureNativeFormHasId","_assignFormOwnerToChildren","_refreshAggregates","hostId","id","trim","removeAttribute","suffix","crypto","randomUUID","Date","now","Math","random","toString","slice","_formValidQuiet","el","Array","from","elements","h","validity","willValidate","valid","formId","candidates","querySelectorAll","join","setAttribute","_getSkyInputs","_emitValidationErrors","errors","errs","skyInputs","input","validateInput","isArray","push","msg","validationMessage","name","next","Set","firstInvalid","find","invalid","_focusElement","element","prefersReducedMotion","matchMedia","scrollIntoView","behavior","block","setTimeout","focus","preventScroll","obj","forEach","value","reportValidity","submitter","resetForm","submit","submitEvent","SubmitEvent","cancelable","render","html","ifDefined","method","action","enctype","autocomplete","nothing","length","map","err","__decorateClass","property","type","Boolean","prototype","String","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-form.js","sources":["../../src/sky-form/sky-form.ts"],"sourcesContent":["import { LitElement, html, nothing, css } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type SkyFormMode = 'client' | 'server';\nexport type SkyFormMethod = 'get' | 'post';\nexport type SkyFormEnctype =\n  'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';\nexport type SkyFormAutocomplete = 'on' | 'off';\nexport type SkyFormValues = Record<\n  string,\n  FormDataEntryValue | FormDataEntryValue[]\n>;\nexport type SkyFormChangeDetail = {\n  values: SkyFormValues;\n  formData: FormData;\n  success: boolean;\n};\nexport type SkyFormValidationErrorsDetail = { errors: string[] };\nexport type SkyFormSubmitDetail = {\n  values: SkyFormValues;\n  formData: FormData;\n  success: boolean;\n};\nexport type SkyFormFormDataFallbackDetail = { formData: FormData };\n\n/**\n * @element sky-form\n *\n * @summary Form wrapper with unified validation, error aggregation, and client/server submit flows.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/form\n *\n * @slot - Form elements: inputs, buttons, and other form controls.\n *\n * @property {boolean} liveValidation - Validates and emits `form-change` on value changes.\n * @property {boolean} showErrors - Shows validation errors in child controls when available.\n * @property {boolean} errorBox - Shows consolidated validation messages above the form.\n * @property {string} errorBoxMessage - Header message shown in the consolidated error box.\n * @property {SkyFormMode} mode - Submission mode (`client` or `server`).\n * @property {SkyFormMethod | undefined} method - Native form method in server mode.\n * @property {string | undefined} action - Native form action in server mode.\n * @property {string | undefined} target - Native form target in server mode.\n * @property {SkyFormEnctype | undefined} enctype - Native form encoding type.\n * @property {SkyFormAutocomplete | undefined} autocomplete - Native form autocomplete behavior.\n * @property {boolean} noValidate - Disables native HTML constraint UI.\n * @property {boolean} enterSubmit - Submits on Enter for non-textarea controls.\n * @property {boolean} resetOnSubmit - Resets form after successful submit.\n * @property {string | null} csrfToken - Optional CSRF token value for app-level submit handling.\n *\n * @fires {CustomEvent<SkyFormChangeDetail>} form-change - Fired when form values change in live validation mode.\n * @fires {CustomEvent<SkyFormValidationErrorsDetail>} validation-errors - Fired when aggregated validation errors change.\n * @fires {CustomEvent<SkyFormFormDataFallbackDetail> | FormDataEvent} formdata - Fired before client-mode submit with form data.\n * @fires {CustomEvent<SkyFormSubmitDetail>} form-submit - Fired after successful client-mode submit handling.\n *\n * @method checkValidity Returns native form validity without UI reporting.\n * @method reportValidity Returns native form validity and reports native UI messages.\n * @method requestSubmit Requests submission using optional submitter.\n * @method reset Resets native form and values.\n * @method resetForm Alias for `reset`.\n * @method submit Submits form using mode-specific client/server flow.\n *\n * @csspart error-box - Container for the consolidated error messages.\n * @csspart error-list - List element containing validation errors.\n *\n * @Behavior\n * - Provides seamless integration of custom form controls with native HTML form behavior\n * - Supports both client-side AJAX submissions and traditional server-side submissions\n * - Automatic validation aggregation from both native and custom form controls\n * - Light DOM rendering for proper browser form association\n *\n * The component automatically associates form controls (including custom elements) with the native form\n * using the `form` attribute, ensuring proper browser validation and FormData collection.\n *\n * - **Live Validation**: Validates on every input change (when liveValidation=true)\n * - **Submit Validation**: Validates only on form submission\n * - **Mixed Validation**: Combines both native HTML5 validation and custom component validation\n *\n * - **Client Mode**: Prevents page refresh, emits formdata/form-submit events for JavaScript handling\n * - **Server Mode**: Allows traditional form submission with page navigation/refresh\n *\n * @example\n * ```html\n * <sky-form id=\"login-form\" live-validation error-box>\n *   <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\n *   <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\n *   <sky-button type=\"submit\">Sign In</sky-button>\n * </sky-form>\n * ```\n * ```vue\n * <template>\n *   <sky-form id=\"login-form\" live-validation error-box @form-submit=\"onSubmit\">\n *     <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\n *     <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\n *     <sky-button type=\"submit\">Sign In</sky-button>\n *   </sky-form>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-form id=\"login-form\" live-validation error-box>\n *       <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\n *       <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\n *       <sky-button type=\"submit\">Sign In</sky-button>\n *     </sky-form>\n *   );\n * }\n * ```\n */\n@customElement('sky-form')\nexport class SkyForm extends LitElement {\n  /**\n   * When true, validates form on every value change.\n   * @public\n   */\n  @property({ type: Boolean })\n  liveValidation = false;\n\n  /**\n   * Controls whether validation errors are displayed.\n   * @public\n   */\n  @property({ type: Boolean })\n  showErrors = true;\n\n  /**\n   * When true, displays a consolidated error box with all validation errors.\n   * @public\n   */\n  @property({ type: Boolean })\n  errorBox = false;\n\n  /**\n   * Custom message displayed in the error box header.\n   * @public\n   */\n  @property({ type: String })\n  errorBoxMessage = 'Fix These Issues Before Submitting';\n\n  /**\n   * Submission mode: 'client' prevents page refresh, 'server' allows native form submission.\n   * @public\n   */\n  @property({ type: String })\n  mode: SkyFormMode = 'client';\n\n  /**\n   * HTTP method for form submission (when mode='server').\n   * @public\n   */\n  @property({ type: String })\n  method?: SkyFormMethod;\n\n  /**\n   * URL for form submission (when mode='server').\n   * @public\n   */\n  @property({ type: String })\n  action?: string;\n\n  /**\n   * Target window/frame for form submission.\n   * @public\n   */\n  @property({ type: String })\n  target?: string;\n\n  /**\n   * Form encoding type.\n   * @public\n   */\n  @property({ type: String })\n  enctype?: SkyFormEnctype;\n\n  /**\n   * HTML autocomplete attribute.\n   * @public\n   */\n  @property({ type: String })\n  autocomplete?: SkyFormAutocomplete;\n\n  /**\n   * When true, disables native HTML5 validation.\n   * @public\n   */\n  @property({ type: Boolean })\n  noValidate = false;\n\n  /**\n   * When true, pressing Enter in any input submits the form (except textarea).\n   * @public\n   */\n  @property({ type: Boolean })\n  enterSubmit = false;\n\n  /**\n   * When true, resets the form after successful submission.\n   * @public\n   */\n  @property({ type: Boolean })\n  resetOnSubmit = false;\n\n  /**\n   * CSRF token for form submission protection.\n   * @public\n   */\n  @property({ type: String })\n  csrfToken: string | null = null;\n\n  /**\n   * Array of current validation error messages.\n   * @private\n   */\n  @state()\n  private validationErrors: string[] = [];\n\n  /**\n   * Indicates whether the last form submission was successful.\n   * @private\n   */\n  @state()\n  private submitSuccess = false;\n\n  /**\n   * Indicates whether validation is currently active (errors shown).\n   * @private\n   */\n  @state()\n  private validationActive = false;\n\n  /** Reference to the native form element. */\n  @query('form')\n  private _formEl!: HTMLFormElement;\n\n  private _mo?: MutationObserver;\n  private _syncQueued = false;\n  private _handlingSubmit = false;\n  private _handlingInvalid = false;\n\n  /** MUST be light DOM for button[form=\"...\"] + native id lookup */\n  protected override createRenderRoot(): this {\n    return this;\n  }\n\n  /**\n   * Returns the native HTML form element.\n   * @public\n   */\n  public get formElement(): HTMLFormElement {\n    return this._formEl;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._queueSync();\n\n    // ✅ capture submit before it reaches the <form> target\n    this.addEventListener('submit', this._onHostSubmitCapture as any, true);\n    this.addEventListener('formdata', this._onFormDataCapture as any, true);\n    this.addEventListener('value-changed', this._handleValueChanged as any);\n    this.addEventListener('keydown', this._onEnterKey as any, true);\n    this.addEventListener('invalid', this._onInvalidCapture as any, true);\n    this._mo = new MutationObserver(() => this._queueSync());\n    this._mo.observe(this, { childList: true, subtree: true });\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('submit', this._onHostSubmitCapture as any, true);\n    this.removeEventListener('formdata', this._onFormDataCapture as any, true);\n    this.removeEventListener('value-changed', this._handleValueChanged as any);\n    this.removeEventListener('keydown', this._onEnterKey as any, true);\n    this.removeEventListener('invalid', this._onInvalidCapture as any, true);\n    this._mo?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  private _queueSync(): void {\n    if (this._syncQueued) return;\n    this._syncQueued = true;\n\n    queueMicrotask(() => {\n      this._syncQueued = false;\n      this._moveHostIdToNativeForm();\n      this._ensureNativeFormHasId();\n      this._assignFormOwnerToChildren();\n      this._refreshAggregates();\n    });\n  }\n\n  private _onEnterKey = (e: KeyboardEvent) => {\n    if (!this.enterSubmit) return;\n    if (e.key !== 'Enter') return;\n\n    const target = e.target as HTMLElement;\n\n    // ⛔ allow Enter inside textarea\n    if (target instanceof HTMLTextAreaElement) return;\n\n    // ⛔ ignore if a submit button already handles it\n    if (target.closest('button[type=\"submit\"], input[type=\"submit\"]')) {\n      return;\n    }\n\n    e.preventDefault();\n    this.requestSubmit();\n  };\n\n  /**\n   * Make `document.getElementById(hostId)` return the native form.\n   * Copies host id => native form id and removes id from host to avoid duplicate ids.\n   */\n  private _moveHostIdToNativeForm() {\n    const hostId = this.id?.trim();\n    if (!hostId || !this._formEl) return;\n\n    // set native form id\n    if (this._formEl.id !== hostId) this._formEl.id = hostId;\n\n    // remove host id so DOM lookups hit <form>\n    if (this.id === hostId) this.removeAttribute('id');\n  }\n\n  /**\n   * Slotted controls remain in the light DOM under `<sky-form>`, not under the inner `<form>`.\n   * `_assignFormOwnerToChildren` needs a stable `id` on that `<form>` to set `form=\"…\"` on\n   * associated controls. When the host has no `id`, generate one so association still works.\n   */\n  private _ensureNativeFormHasId(): void {\n    if (!this._formEl?.id) {\n      const suffix =\n        typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n          ? crypto.randomUUID()\n          : `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;\n      this._formEl.id = `sky-form-${suffix}`;\n    }\n  }\n\n  private _handleValueChanged = (e: Event) => {\n    if (!this.liveValidation) return;\n\n    // Only process if it's coming from our form elements\n    const target = e.target as HTMLElement;\n    if (\n      !target.matches(\n        'sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea'\n      )\n    ) {\n      return;\n    }\n\n    // Queue a sync to update validation errors\n    this._queueSync();\n\n    // Emit form-change event with current form data\n    this._emitFormChange();\n  };\n\n  /**\n   * Whether the form passes constraint validation, without calling `form.checkValidity()`.\n   * `HTMLFormElement.checkValidity()` dispatches `invalid` on each invalid control; during\n   * liveValidation that runs on every keystroke and our capture listener would focus the first\n   * invalid field, stealing focus from the control the user is editing.\n   */\n  private _formValidQuiet(): boolean {\n    const form = this._formEl;\n    if (!form) return true;\n\n    for (const el of Array.from(form.elements)) {\n      const h = el as HTMLElement & {\n        willValidate?: boolean;\n        validity?: ValidityState;\n      };\n      if (!('validity' in h) || !h.validity) continue;\n      if ('willValidate' in h && h.willValidate === false) continue;\n      if (!h.validity.valid) return false;\n    }\n    return true;\n  }\n\n  private _emitFormChange(): void {\n    if (!this._formEl) return;\n\n    const fd = new FormData(this._formEl);\n    const json = this._formDataToJSON(fd);\n\n    this.dispatchEvent(\n      new CustomEvent<SkyFormChangeDetail>('form-change', {\n        detail: {\n          values: json,\n          formData: fd,\n          success: this._formValidQuiet(),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Assigns form ownership to elements not inside the native <form> element.\n   * Ensures browser association for native submit + validation + FormData.\n   */\n  private _assignFormOwnerToChildren() {\n    const formId = this._formEl?.id;\n    if (!formId) return;\n\n    const candidates = Array.from(\n      this.querySelectorAll<HTMLElement>(\n        [\n          'input',\n          'select',\n          'textarea',\n          'button',\n          'sky-button',\n          'sky-input',\n          'sky-combobox',\n          'sky-datepicker',\n          'sky-checkbox',\n          'sky-radio-group',\n          'sky-otp',\n          'sky-serial',\n          'sky-counter',\n          'sky-switch',\n        ].join(',')\n      )\n    );\n\n    for (const el of candidates) {\n      // already inside the real form = skip\n      if (el.closest('form') === this._formEl) continue;\n\n      // assign ownership\n      if ((el as { form?: HTMLFormElement }).form?.id !== formId)\n        el.setAttribute('form', formId);\n    }\n  }\n\n  private _getSkyInputs() {\n    return Array.from(\n      this.querySelectorAll<any>(\n        'sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch'\n      )\n    );\n  }\n\n  private _emitValidationErrors(): void {\n    this.dispatchEvent(\n      new CustomEvent<SkyFormValidationErrorsDetail>('validation-errors', {\n        detail: { errors: [...this.validationErrors] },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _onFormDataCapture = (e: Event) => {\n    // Only intercept native form's event\n    if (!(e.target instanceof HTMLFormElement)) return;\n    if (e.target !== this._formEl) return;\n\n    // ⛔ Stop native bubbling so Vue doesn't see it\n    e.stopImmediatePropagation();\n    // DO NOT preventDefault – formdata is informational\n  };\n\n  private _onInvalidCapture = (e: Event) => {\n    const t = e.target as any;\n\n    // only react to invalids belonging to THIS form\n    if (t?.form && t.form !== this._formEl) return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    // ✅ this is the ONLY thing invalid should do\n    this._activateValidation();\n\n    this._focusFirstInvalid();\n  };\n\n  private _refreshAggregates() {\n    const errs: string[] = [];\n\n    // 1) sky-* component errors (if they provide them)\n    const skyInputs = this._getSkyInputs();\n    for (const input of skyInputs) {\n      // ✅ Only run validateInput when NOT inside invalid recursion\n      if (!this._handlingInvalid && typeof input.validateInput === 'function') {\n        input.validateInput();\n      }\n\n      if (Array.isArray(input.validationErrors)) {\n        errs.push(...input.validationErrors);\n      }\n    }\n\n    // 2) native constraint validation messages from associated elements\n    const elements = Array.from(this._formEl.elements) as any[];\n    for (const el of elements) {\n      // Skip buttons etc\n      if (!('willValidate' in el) || !el.willValidate) continue;\n\n      const isValid =\n        'validity' in el && el.validity ? el.validity.valid : true;\n\n      if (!isValid) {\n        const msg =\n          el.validationMessage || `${el.name || el.id || 'Field'} is invalid`;\n        errs.push(msg);\n      }\n    }\n\n    const next = [...new Set(errs)];\n    if (next.join('|') !== this.validationErrors.join('|')) {\n      this.validationErrors = next;\n      this._emitValidationErrors();\n    }\n  }\n\n  private _focusFirstInvalid() {\n    const inputs = this._getSkyInputs();\n    const firstInvalid = inputs.find((input) => input.invalid === true);\n\n    if (firstInvalid) {\n      this._focusElement(firstInvalid);\n    }\n  }\n\n  private _focusElement(element: HTMLElement) {\n    const prefersReducedMotion =\n      typeof matchMedia === 'function' &&\n      matchMedia('(prefers-reduced-motion: reduce)').matches;\n    element.scrollIntoView({\n      behavior: prefersReducedMotion ? 'auto' : 'smooth',\n      block: 'center',\n    });\n    setTimeout(() => {\n      element.focus({ preventScroll: true });\n    }, 100);\n  }\n\n  private _syncNow() {\n    this._moveHostIdToNativeForm();\n    this._ensureNativeFormHasId();\n    this._assignFormOwnerToChildren();\n    this._refreshAggregates();\n  }\n\n  private _onHostSubmitCapture = (e: Event) => {\n    // only intercept submits coming from the inner native form\n    if (!(e.target instanceof HTMLFormElement)) return;\n    if (e.target !== this._formEl) return;\n\n    // avoid recursion when we re-dispatch\n    if (this._handlingSubmit) return;\n    this._handlingSubmit = true;\n\n    try {\n      this._syncNow();\n      // ✅ native validation first (like <form>)\n      const ok = this._formEl.checkValidity();\n      if (!ok) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n        this.submitSuccess = false;\n        this._focusFirstInvalid();\n        return;\n      }\n\n      // ✅ If mode is 'server', allow native form submission (page refresh/navigation)\n      if (this.mode === 'server') {\n        // Just let the native form submit proceed normally\n        this.submitSuccess = true;\n        if (this.resetOnSubmit) {\n          queueMicrotask(() => this.reset());\n        }\n        return;\n      }\n\n      // Always prevent default for client mode to avoid page refresh\n      e.preventDefault();\n      e.stopImmediatePropagation();\n\n      const fd = new FormData(this._formEl);\n\n      // ✅ Emit a REAL FormDataEvent if available (so Vue handler can use e.formData)\n      let dispatched = false;\n      try {\n        // @ts-ignore\n        const fde = new FormDataEvent('formdata', {\n          formData: fd,\n          bubbles: true,\n          composed: true,\n        });\n        this.dispatchEvent(fde);\n        dispatched = true;\n      } catch {}\n\n      // fallback for older browsers\n      if (!dispatched) {\n        this.dispatchEvent(\n          new CustomEvent<SkyFormFormDataFallbackDetail>('formdata', {\n            detail: { formData: fd },\n            bubbles: true,\n            composed: true,\n          })\n        );\n      }\n\n      // optional perk event (JSON)\n      const json = this._formDataToJSON(fd);\n      this.dispatchEvent(\n        new CustomEvent<SkyFormSubmitDetail>('form-submit', {\n          detail: {\n            values: json,\n            formData: fd,\n            success: this._formEl.checkValidity(),\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n\n      this.submitSuccess = true;\n      if (this.resetOnSubmit) {\n        queueMicrotask(() => this.reset());\n      }\n    } finally {\n      this._handlingSubmit = false;\n    }\n  };\n\n  private _formDataToJSON(fd: FormData): SkyFormValues {\n    const obj: SkyFormValues = {};\n\n    fd.forEach((value, key) => {\n      if (key in obj) {\n        // convert to array if duplicate keys\n        if (Array.isArray(obj[key])) {\n          obj[key].push(value);\n        } else {\n          obj[key] = [obj[key], value];\n        }\n      } else {\n        obj[key] = value;\n      }\n    });\n\n    return obj;\n  }\n\n  /** Activates validation mode and refreshes error aggregates. */\n  private _activateValidation(): void {\n    this.validationActive = true;\n\n    const skyInputs = this._getSkyInputs();\n    for (const input of skyInputs) {\n      input.validationActive = true;\n      input.showErrors = true;\n    }\n\n    // 🔥 IMPORTANT: defer aggregation\n    queueMicrotask(() => this._refreshAggregates());\n  }\n\n  /**\n   * Checks form validity without displaying validation messages.\n   * @returns {boolean} True if the form is valid, false otherwise.\n   * @public\n   */\n  public checkValidity(): boolean {\n    // Sync synchronously: child controls must have their `form` association set\n    // before form.checkValidity() runs, otherwise they are excluded from\n    // form.elements and validity would be reported incorrectly.\n    this._syncNow();\n    return this._formEl?.checkValidity?.() ?? true;\n  }\n\n  /**\n   * Checks form validity and displays validation messages.\n   * @returns {boolean} True if the form is valid, false otherwise.\n   * @public\n   */\n  public reportValidity(): boolean {\n    this._syncNow();\n    return this._formEl?.reportValidity?.() ?? true;\n  }\n\n  /**\n   * Requests form submission (compatible with native requestSubmit).\n   * @param {HTMLElement} submitter - Optional submitter element.\n   * @public\n   */\n  public requestSubmit(submitter?: HTMLElement): void {\n    this._syncNow();\n    this._activateValidation();\n    // @ts-ignore\n    this._formEl?.requestSubmit?.(submitter);\n  }\n\n  /**\n   * Resets the form to its initial state.\n   * @public\n   */\n  public reset(): void {\n    this._queueSync();\n    this._formEl?.reset();\n  }\n\n  /**\n   * Resets the form to its initial state (alias for reset()).\n   * @public\n   */\n  public resetForm(): void {\n    this._queueSync();\n    this._formEl?.reset();\n  }\n\n  /**\n   * Manually submits the form, respecting the current mode setting.\n   * In client mode, triggers the client-side submission flow.\n   * In server mode, performs native form submission.\n   * @public\n   */\n  public submit(): void {\n    this._activateValidation();\n    if (this.mode === 'client') {\n      // Trigger the client-side submission flow\n      const submitEvent = new SubmitEvent('submit', {\n        bubbles: true,\n        cancelable: true,\n      });\n      this._formEl?.dispatchEvent(submitEvent);\n    } else {\n      // In server mode, use native form submission\n      this._formEl?.submit();\n    }\n  }\n\n  override render() {\n    return html`\n      <style>\n        /* Scoped to the sky-form tag: this is a light-DOM component, so\n           unscoped class selectors would leak into the whole document. */\n        sky-form .error-wrapper {\n          width: 100%;\n          display: flex;\n          justify-content: center;\n        }\n        sky-form .error-container {\n          margin: var(--sky-space-3, 12px) 0;\n          padding: var(--sky-space-2, 8px) var(--sky-space-3, 12px);\n          width: 100%;\n          border-radius: var(--sky-radius-secondary);\n          border: 1px solid var(--sky-danger-primary);\n          background: var(--sky-glass-solid);\n          box-shadow: var(--sky-box-shadow-primary);\n          position: relative;\n          z-index: inherit;\n        }\n        sky-form .error-title {\n          font-size: var(--sky-font-size-sm, 14px);\n          color: var(--sky-danger-primary);\n          width: 100%;\n          display: flex;\n          justify-content: center;\n        }\n        sky-form .error-list {\n          list-style-position: inside;\n          padding: var(--sky-space-1, 4px);\n          margin: 0;\n          text-align: start;\n        }\n        sky-form .error-item {\n          font-size: var(--sky-font-size-xs, 12px);\n          color: var(--sky-text-primary);\n        }\n      </style>\n\n      <form\n        part=\"form\"\n        method=${ifDefined(this.method)}\n        action=${ifDefined(this.action)}\n        enctype=${ifDefined(this.enctype)}\n        autocomplete=${ifDefined(this.autocomplete)}\n        ?novalidate=${this.noValidate}\n        target=${ifDefined(this.target || undefined)}\n      >\n        ${\n          this.csrfToken\n            ? html`<input\n                type=\"hidden\"\n                name=\"csrfmiddlewaretoken\"\n                .value=${this.csrfToken}\n              />`\n            : nothing\n        }\n        <slot></slot>\n      </form>\n\n      ${\n        this.errorBox &&\n        this.validationErrors.length > 0 &&\n        this.showErrors &&\n        this.validationActive\n          ? html`\n              <div class=\"error-wrapper\" part=\"error-box\">\n                <div class=\"error-container\">\n                  <div class=\"error-title\">${this.errorBoxMessage}</div>\n                  <ul class=\"error-list\" part=\"error-list\">\n                    ${this.validationErrors.map(\n                      (err) => html`<li class=\"error-item\">${err}</li>`\n                    )}\n                  </ul>\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n}\n"],"names":["SkyForm","LitElement","constructor","super","arguments","this","liveValidation","showErrors","errorBox","errorBoxMessage","mode","noValidate","enterSubmit","resetOnSubmit","csrfToken","validationErrors","submitSuccess","validationActive","_syncQueued","_handlingSubmit","_handlingInvalid","_onEnterKey","e","key","target","HTMLTextAreaElement","closest","preventDefault","requestSubmit","_handleValueChanged","matches","_queueSync","_emitFormChange","_onFormDataCapture","HTMLFormElement","_formEl","stopImmediatePropagation","_onInvalidCapture","t","form","_activateValidation","_focusFirstInvalid","_onHostSubmitCapture","_syncNow","checkValidity","queueMicrotask","reset","fd","FormData","dispatched","fde","FormDataEvent","formData","bubbles","composed","dispatchEvent","CustomEvent","detail","json","_formDataToJSON","values","success","createRenderRoot","formElement","connectedCallback","addEventListener","_mo","MutationObserver","observe","childList","subtree","disconnectedCallback","removeEventListener","disconnect","_moveHostIdToNativeForm","_ensureNativeFormHasId","_assignFormOwnerToChildren","_refreshAggregates","hostId","id","trim","removeAttribute","suffix","crypto","randomUUID","Date","now","Math","random","toString","slice","_formValidQuiet","el","Array","from","elements","h","validity","willValidate","valid","formId","candidates","querySelectorAll","join","setAttribute","_getSkyInputs","_emitValidationErrors","errors","errs","skyInputs","input","validateInput","isArray","push","msg","validationMessage","name","next","Set","firstInvalid","find","invalid","_focusElement","element","prefersReducedMotion","matchMedia","scrollIntoView","behavior","block","setTimeout","focus","preventScroll","obj","forEach","value","reportValidity","submitter","resetForm","submit","submitEvent","SubmitEvent","cancelable","render","html","ifDefined","method","action","enctype","autocomplete","nothing","length","map","err","__decorateClass","property","type","Boolean","prototype","String","state","query","customElement"],"mappings":"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"}

package/dist/sky-grid/sky-grid.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement } from 'lit';
 export interface SkyGridColumnsConfig {
     columns: number;
     lg: number;
@@ -14,7 +14,7 @@ export interface SkyGridColumnsConfig {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/grid
+ * @documentation https://sky-ui.com/components/grid
  *
  * @slot - Default slot for grid items (direct children become grid items).
  * @property {number} columns - Base number of grid columns.

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

@@ -1 +1 @@
-{"version":3,"file":"sky-grid.js","sources":["../../src/sky-grid/sky-grid.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\n\r\nexport interface SkyGridColumnsConfig {\r\n  columns: number;\r\n  lg: number;\r\n  md: number;\r\n  sm: number;\r\n  xs: number;\r\n}\r\n\r\n/**\r\n * @element sky-grid\r\n *\r\n * @summary Responsive CSS grid container with configurable breakpoint column counts.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/grid\r\n *\r\n * @slot - Default slot for grid items (direct children become grid items).\r\n * @property {number} columns - Base number of grid columns.\r\n * @property {string} gap - Gap between grid items.\r\n * @property {number} lg - Column count at large breakpoints.\r\n * @property {number} md - Column count at medium breakpoints.\r\n * @property {number} sm - Column count at small breakpoints.\r\n * @property {number} xs - Column count at extra-small breakpoints.\r\n * @property {boolean} nowrap - Reuses `columns` across breakpoints when true.\r\n *\r\n * @csspart grid - The grid container element.\r\n *\r\n * @Behavior\r\n * - Uses CSS variables for runtime breakpoint column updates\r\n * - Supports explicit per-breakpoint column counts\r\n * - Supports `nowrap` mode to keep a fixed column count\r\n *\r\n * @example\r\n * ```html\r\n * <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\r\n *   <sky-card>Card 1</sky-card>\r\n *   <sky-card>Card 2</sky-card>\r\n *   <sky-card>Card 3</sky-card>\r\n *   <sky-card>Card 4</sky-card>\r\n * </sky-grid>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\r\n *     <sky-card>Card 1</sky-card>\r\n *     <sky-card>Card 2</sky-card>\r\n *     <sky-card>Card 3</sky-card>\r\n *     <sky-card>Card 4</sky-card>\r\n *   </sky-grid>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\r\n *       <sky-card>Card 1</sky-card>\r\n *       <sky-card>Card 2</sky-card>\r\n *       <sky-card>Card 3</sky-card>\r\n *       <sky-card>Card 4</sky-card>\r\n *     </sky-grid>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-grid\")\r\nexport class SkyGrid extends LitElement {\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n\r\n    .grid {\r\n      display: grid;\r\n      gap: var(--grid-gap, 1rem);\r\n      grid-template-columns: repeat(var(--grid-columns, 4), 1fr);\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      .grid {\r\n        grid-template-columns: repeat(var(--grid-columns-lg), 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .grid {\r\n        grid-template-columns: repeat(var(--grid-columns-md), 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .grid {\r\n        grid-template-columns: repeat(var(--grid-columns-sm), 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 576px) {\r\n      .grid {\r\n        grid-template-columns: repeat(var(--grid-columns-xs), 1fr);\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: Number }) columns = 12;\r\n  @property({ type: String }) gap = \"10px\";\r\n  @property({ type: Number }) lg = 3;\r\n  @property({ type: Number }) md = 2;\r\n  @property({ type: Number }) sm = 2;\r\n  @property({ type: Number }) xs = 1;\r\n  @property({ type: Boolean, reflect: true }) nowrap = false;\r\n\r\n  override updated(changedProperties: Map<string | number | symbol, unknown>): void {\r\n    if (\r\n      changedProperties.has(\"nowrap\") ||\r\n      changedProperties.has(\"lg\") ||\r\n      changedProperties.has(\"md\") ||\r\n      changedProperties.has(\"sm\") ||\r\n      changedProperties.has(\"xs\") ||\r\n      changedProperties.has(\"columns\")\r\n    ) {\r\n      this.style.setProperty(\"--grid-columns\", this.columns.toString());\r\n      if (this.nowrap) {\r\n        this.style.setProperty(\"--grid-columns-lg\", this.columns.toString());\r\n        this.style.setProperty(\"--grid-columns-md\", this.columns.toString());\r\n        this.style.setProperty(\"--grid-columns-sm\", this.columns.toString());\r\n        this.style.setProperty(\"--grid-columns-xs\", this.columns.toString());\r\n      } else {\r\n        this.style.setProperty(\r\n          \"--grid-columns-lg\",\r\n          (this.lg || this.columns).toString(),\r\n        );\r\n        this.style.setProperty(\r\n          \"--grid-columns-md\",\r\n          (this.md || this.columns).toString(),\r\n        );\r\n        this.style.setProperty(\r\n          \"--grid-columns-sm\",\r\n          (this.sm || this.columns).toString(),\r\n        );\r\n        this.style.setProperty(\r\n          \"--grid-columns-xs\",\r\n          (this.xs || this.columns).toString(),\r\n        );\r\n      }\r\n    }\r\n    if (changedProperties.has(\"gap\")) {\r\n      this.style.setProperty(\"--grid-gap\", this.gap);\r\n    }\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <div class=\"grid\">\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyGrid","LitElement","constructor","super","arguments","this","columns","gap","lg","md","sm","xs","nowrap","updated","changedProperties","has","style","setProperty","toString","render","html","styles","css","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","customElement"],"mappings":"oTAsEO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAqCuBC,KAAAC,QAAU,GACVD,KAAAE,IAAM,OACNF,KAAAG,GAAK,EACLH,KAAAI,GAAK,EACLJ,KAAAK,GAAK,EACLL,KAAAM,GAAK,EACWN,KAAAO,QAAS,CAAA,CAE5C,OAAAC,CAAQC,IAEbA,EAAkBC,IAAI,WACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,cAEtBV,KAAKW,MAAMC,YAAY,iBAAkBZ,KAAKC,QAAQY,YAClDb,KAAKO,QACPP,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,cAEzDb,KAAKW,MAAMC,YACT,qBACCZ,KAAKG,IAAMH,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKI,IAAMJ,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKK,IAAML,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKM,IAAMN,KAAKC,SAASY,cAI5BJ,EAAkBC,IAAI,QACxBV,KAAKW,MAAMC,YAAY,aAAcZ,KAAKE,IAE9C,CAES,MAAAY,GACP,OAAOC,CAAA;;;;KAKT,GA1FWpB,EACKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoCGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UArCP1B,EAqCiB2B,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAtCP5B,EAsCiB2B,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAvCP1B,EAuCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAxCP1B,EAwCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAzCP1B,EAyCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA1CP1B,EA0CiB2B,UAAA,KAAA,GACgBJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASC,SAAS,KA3CzB9B,EA2CiC2B,UAAA,SAAA,GA3CjC3B,EAANuB,EAAA,CADNQ,EAAc,aACF/B"}
+{"version":3,"file":"sky-grid.js","sources":["../../src/sky-grid/sky-grid.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport interface SkyGridColumnsConfig {\n  columns: number;\n  lg: number;\n  md: number;\n  sm: number;\n  xs: number;\n}\n\n/**\n * @element sky-grid\n *\n * @summary Responsive CSS grid container with configurable breakpoint column counts.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/grid\n *\n * @slot - Default slot for grid items (direct children become grid items).\n * @property {number} columns - Base number of grid columns.\n * @property {string} gap - Gap between grid items.\n * @property {number} lg - Column count at large breakpoints.\n * @property {number} md - Column count at medium breakpoints.\n * @property {number} sm - Column count at small breakpoints.\n * @property {number} xs - Column count at extra-small breakpoints.\n * @property {boolean} nowrap - Reuses `columns` across breakpoints when true.\n *\n * @csspart grid - The grid container element.\n *\n * @Behavior\n * - Uses CSS variables for runtime breakpoint column updates\n * - Supports explicit per-breakpoint column counts\n * - Supports `nowrap` mode to keep a fixed column count\n *\n * @example\n * ```html\n * <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\n *   <sky-card>Card 1</sky-card>\n *   <sky-card>Card 2</sky-card>\n *   <sky-card>Card 3</sky-card>\n *   <sky-card>Card 4</sky-card>\n * </sky-grid>\n * ```\n * ```vue\n * <template>\n *   <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\n *     <sky-card>Card 1</sky-card>\n *     <sky-card>Card 2</sky-card>\n *     <sky-card>Card 3</sky-card>\n *     <sky-card>Card 4</sky-card>\n *   </sky-grid>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-grid columns=\"12\" lg=\"4\" md=\"3\" sm=\"2\" xs=\"1\" gap=\"16px\">\n *       <sky-card>Card 1</sky-card>\n *       <sky-card>Card 2</sky-card>\n *       <sky-card>Card 3</sky-card>\n *       <sky-card>Card 4</sky-card>\n *     </sky-grid>\n *   );\n * }\n * ```\n */\n@customElement('sky-grid')\nexport class SkyGrid extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    .grid {\n      display: grid;\n      gap: var(--grid-gap, 1rem);\n      grid-template-columns: repeat(var(--grid-columns, 4), 1fr);\n    }\n\n    @media (max-width: 1200px) {\n      .grid {\n        grid-template-columns: repeat(var(--grid-columns-lg), 1fr);\n      }\n    }\n\n    @media (max-width: 992px) {\n      .grid {\n        grid-template-columns: repeat(var(--grid-columns-md), 1fr);\n      }\n    }\n\n    @media (max-width: 768px) {\n      .grid {\n        grid-template-columns: repeat(var(--grid-columns-sm), 1fr);\n      }\n    }\n\n    @media (max-width: 576px) {\n      .grid {\n        grid-template-columns: repeat(var(--grid-columns-xs), 1fr);\n      }\n    }\n  `;\n\n  @property({ type: Number }) columns = 12;\n  @property({ type: String }) gap = '10px';\n  @property({ type: Number }) lg = 3;\n  @property({ type: Number }) md = 2;\n  @property({ type: Number }) sm = 2;\n  @property({ type: Number }) xs = 1;\n  @property({ type: Boolean, reflect: true }) nowrap = false;\n\n  override updated(\n    changedProperties: Map<string | number | symbol, unknown>\n  ): void {\n    if (\n      changedProperties.has('nowrap') ||\n      changedProperties.has('lg') ||\n      changedProperties.has('md') ||\n      changedProperties.has('sm') ||\n      changedProperties.has('xs') ||\n      changedProperties.has('columns')\n    ) {\n      this.style.setProperty('--grid-columns', this.columns.toString());\n      if (this.nowrap) {\n        this.style.setProperty('--grid-columns-lg', this.columns.toString());\n        this.style.setProperty('--grid-columns-md', this.columns.toString());\n        this.style.setProperty('--grid-columns-sm', this.columns.toString());\n        this.style.setProperty('--grid-columns-xs', this.columns.toString());\n      } else {\n        this.style.setProperty(\n          '--grid-columns-lg',\n          (this.lg || this.columns).toString()\n        );\n        this.style.setProperty(\n          '--grid-columns-md',\n          (this.md || this.columns).toString()\n        );\n        this.style.setProperty(\n          '--grid-columns-sm',\n          (this.sm || this.columns).toString()\n        );\n        this.style.setProperty(\n          '--grid-columns-xs',\n          (this.xs || this.columns).toString()\n        );\n      }\n    }\n    if (changedProperties.has('gap')) {\n      this.style.setProperty('--grid-gap', this.gap);\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"grid\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["SkyGrid","LitElement","constructor","super","arguments","this","columns","gap","lg","md","sm","xs","nowrap","updated","changedProperties","has","style","setProperty","toString","render","html","styles","css","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","customElement"],"mappings":"oTAsEO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAqCuBC,KAAAC,QAAU,GACVD,KAAAE,IAAM,OACNF,KAAAG,GAAK,EACLH,KAAAI,GAAK,EACLJ,KAAAK,GAAK,EACLL,KAAAM,GAAK,EACWN,KAAAO,QAAS,CAAA,CAE5C,OAAAC,CACPC,IAGEA,EAAkBC,IAAI,WACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,cAEtBV,KAAKW,MAAMC,YAAY,iBAAkBZ,KAAKC,QAAQY,YAClDb,KAAKO,QACPP,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,YACzDb,KAAKW,MAAMC,YAAY,oBAAqBZ,KAAKC,QAAQY,cAEzDb,KAAKW,MAAMC,YACT,qBACCZ,KAAKG,IAAMH,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKI,IAAMJ,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKK,IAAML,KAAKC,SAASY,YAE5Bb,KAAKW,MAAMC,YACT,qBACCZ,KAAKM,IAAMN,KAAKC,SAASY,cAI5BJ,EAAkBC,IAAI,QACxBV,KAAKW,MAAMC,YAAY,aAAcZ,KAAKE,IAE9C,CAES,MAAAY,GACP,OAAOC,CAAA;;;;KAKT,GA5FWpB,EACKqB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoCGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UArCP1B,EAqCiB2B,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMG,UAtCP5B,EAsCiB2B,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAvCP1B,EAuCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAxCP1B,EAwCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAzCP1B,EAyCiB2B,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA1CP1B,EA0CiB2B,UAAA,KAAA,GACgBJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMI,QAASC,SAAS,KA3CzB9B,EA2CiC2B,UAAA,SAAA,GA3CjC3B,EAANuB,EAAA,CADNQ,EAAc,aACF/B"}

package/dist/sky-icon/sky-icon.d.ts

@@ -27,7 +27,7 @@ interface IconifyIcon {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/icon
+ * @documentation https://sky-ui.com/components/icon
  *
  * @slot - Optional fallback `<svg>` content when remote icon data is unavailable.
  * @property {string} icon - Icon name in `prefix:icon-name` format.

package/dist/sky-icon/sky-icon.js

@@ -16,7 +16,7 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       justify-content: center;
       vertical-align: middle;
     }
-   .icon {
+    .icon {
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"sky-icon.js","sources":["../../src/sky-icon/sky-icon.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { styleMap } from 'lit/directives/style-map.js';\r\nimport { resolveColor } from '../helper/utils/color-resolver';\r\nimport skyLocalSetData from './ion-local.json';\r\n\r\nexport type SkyIconSizeValue = string | number;\r\nexport type SkyIconRotateValue = string | number;\r\nexport type SkyIconFlip = '' | 'horizontal' | 'vertical' | 'horizontal,vertical';\r\n\r\ninterface IconifyCollection {\r\n  left?: number;\r\n  top?: number;\r\n  width?: number;\r\n  height?: number;\r\n}\r\n\r\ninterface IconifySetData extends IconifyCollection {\r\n  icons?: Record<string, IconifyIcon>;\r\n}\r\n\r\ninterface IconifyIcon {\r\n  body?: string;\r\n  left?: number;\r\n  top?: number;\r\n  width?: number;\r\n  height?: number;\r\n  viewBox?: string;\r\n}\r\n\r\nconst MAX_ICON_CACHE_SIZE = 100;\r\n\r\n\r\n/**\r\n * @element sky-icon\r\n *\r\n * @summary Icon renderer with Iconify fetch/caching, lazy loading, and optional slotted SVG fallback.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/icon\r\n *\r\n * @slot - Optional fallback `<svg>` content when remote icon data is unavailable.\r\n * @property {string} icon - Icon name in `prefix:icon-name` format.\r\n * @property {SkyIconSizeValue} width - Icon width value.\r\n * @property {SkyIconSizeValue} height - Icon height value.\r\n * @property {string} color - Icon color value.\r\n * @property {boolean} inline - Applies inline alignment behavior for text contexts.\r\n * @property {SkyIconFlip} flip - Flip transform descriptor.\r\n * @property {boolean} hFlip - Horizontal flip shortcut.\r\n * @property {boolean} vFlip - Vertical flip shortcut.\r\n * @property {SkyIconRotateValue} rotate - Rotation descriptor.\r\n * @property {boolean} lazy - Defers loading until the icon is visible.\r\n *\r\n * @method registerLocalSet Registers a local Iconify set for offline/custom usage.\r\n * @method registerLocalIcon Registers a single local icon override.\r\n *\r\n * @csspart icon - The icon container element.\r\n * @csspart svg - The rendered SVG element.\r\n *\r\n * @Behavior\r\n * - Resolves icons from local registrations first, then Iconify API.\r\n * - Uses bounded in-memory caching for fetched SVG payloads.\r\n * - Supports custom slotted SVG fallback when external fetch fails or is blocked.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>;\r\n * }\r\n * ```\r\n */\r\n@customElement('sky-icon')\r\nexport class SkyIcon extends LitElement {\r\n  /** Cache: icon name -> final SVG string (bounded by MAX_ICON_CACHE_SIZE, LRU eviction). */\r\n  private static _iconCache = new Map<string, string>();\r\n\r\n  /** Cache for in-flight fetches: icon name -> Promise<svg> */\r\n  private static _iconPromiseCache = new Map<string, Promise<string>>();\r\n\r\n  /** Local icon sets (prefix -> Iconify set data) for offline/custom icons */\r\n  private static _localSets = new Map<string, IconifySetData>();\r\n\r\n  /** Single local icons (full name -> icon data) */\r\n  private static _localIcons = new Map<string, IconifyIcon>();\r\n\r\n  /**\r\n   * Register a local icon set (Iconify-compatible JSON) for offline or custom icons.\r\n   * @param prefix - Set prefix (e.g. \"ion\", \"custom\"); use as icon=\"prefix:iconName\".\r\n   * @param data - Set data with `icons` and optional defaults (width, height, left, top).\r\n   */\r\n  static registerLocalSet(prefix: string, data: IconifySetData): void {\r\n    SkyIcon._localSets.set(prefix, data);\r\n    for (const key of SkyIcon._iconCache.keys()) {\r\n      if (key.startsWith(prefix + ':')) SkyIcon._iconCache.delete(key);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Register a single local icon (one-off custom icon without a full set).\r\n   * @param fullName - Full icon name, e.g. \"ion:heart\".\r\n   * @param icon - Icon data (body, width, height, viewBox, etc.).\r\n   */\r\n  static registerLocalIcon(fullName: string, icon: IconifyIcon): void {\r\n    SkyIcon._localIcons.set(fullName, icon);\r\n    SkyIcon._iconCache.delete(fullName);\r\n  }\r\n\r\n  static styles = css`\r\n    :host {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      vertical-align: middle;\r\n    }\r\n   .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n    }\r\n    .icon svg {\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      flex-shrink: 0;\r\n    }\r\n    /* Custom SVG in slot: inherit size and color */\r\n    .icon::slotted(svg) {\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n      flex-shrink: 0;\r\n      fill: currentColor;\r\n    }\r\n  `;\r\n\r\n  // ========================================================================\r\n  // Iconify-style public props\r\n  // ========================================================================\r\n\r\n  @property({ type: String })\r\n  icon = '';\r\n\r\n  @property({ type: String })\r\n  width: SkyIconSizeValue = '';\r\n\r\n  @property({ type: String })\r\n  height: SkyIconSizeValue = '';\r\n\r\n  @property({ type: String })\r\n  color = 'currentColor';\r\n\r\n  @property({ type: Boolean })\r\n  inline = false;\r\n\r\n  @property({ type: String })\r\n  flip: SkyIconFlip = '';\r\n\r\n  @property({ type: Boolean })\r\n  hFlip = false;\r\n\r\n  @property({ type: Boolean })\r\n  vFlip = false;\r\n\r\n  @property({ type: String })\r\n  rotate: SkyIconRotateValue = 0;\r\n\r\n  @property({ type: Boolean })\r\n  lazy = false;\r\n\r\n  // ========================================================================\r\n  // Internal state\r\n  // ========================================================================\r\n\r\n  @state()\r\n  private _svgContent: string | null = null;\r\n\r\n  @state()\r\n  private _hasSlottedSvg = false;\r\n\r\n  private _observer: IntersectionObserver | null = null;\r\n  private _visible = false;\r\n\r\n  // ========================================================================\r\n  // Lifecycle\r\n  // ========================================================================\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.lazy) {\r\n      this._startObserver();\r\n    } else {\r\n      this._visible = true;\r\n      if (this.icon && !this._hasSlottedSvg) {\r\n        this._loadIcon();\r\n      }\r\n    }\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._stopObserver();\r\n  }\r\n\r\n  override updated(changed: Map<string, unknown>): void {\r\n    // Lazy flag changed: reconfigure observer / visibility\r\n    if (changed.has('lazy')) {\r\n      if (this.lazy) {\r\n        this._startObserver();\r\n      } else {\r\n        this._stopObserver();\r\n        this._visible = true;\r\n        if (this.icon && !this._hasSlottedSvg) {\r\n          this._loadIcon();\r\n        }\r\n      }\r\n    }\r\n\r\n    // Icon changed: reload if visible and no custom SVG, otherwise clear\r\n    if (changed.has('icon')) {\r\n      if (this._hasSlottedSvg) {\r\n        this._setSvgContent(null);\r\n      } else if (!this.lazy || this._visible) {\r\n        this._loadIcon();\r\n      } else {\r\n        this._setSvgContent(null);\r\n      }\r\n    }\r\n  }\r\n\r\n  private _onSlotChange(e: Event): void {\r\n    const slot = e.target as HTMLSlotElement;\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    const hasSvg = nodes.some(\r\n      (n) => n.nodeType === Node.ELEMENT_NODE && (n as Element).tagName === 'SVG'\r\n    );\r\n    if (this._hasSlottedSvg !== hasSvg) {\r\n      this._hasSlottedSvg = hasSvg;\r\n      if (hasSvg && this.icon) {\r\n        this._setSvgContent(null);\r\n      } else if (!hasSvg && this.icon && (this._visible || !this.lazy)) {\r\n        this._loadIcon();\r\n      }\r\n    }\r\n  }\r\n\r\n  // ========================================================================\r\n  // Lazy loading\r\n  // ========================================================================\r\n\r\n  private _startObserver(): void {\r\n    if (typeof window === 'undefined') return;\r\n    if (this._observer || !('IntersectionObserver' in window)) return;\r\n\r\n    this._observer = new IntersectionObserver((entries) => {\r\n      if (entries.some((e) => e.isIntersecting)) {\r\n        this._visible = true;\r\n        if (!this._hasSlottedSvg && this.icon) {\r\n          this._loadIcon();\r\n        }\r\n        this._stopObserver();\r\n      }\r\n    });\r\n\r\n    this._observer.observe(this);\r\n  }\r\n\r\n  private _stopObserver(): void {\r\n    if (this._observer) {\r\n      this._observer.disconnect();\r\n      this._observer = null;\r\n    }\r\n  }\r\n\r\n  // ========================================================================\r\n  // State setter (avoids nested update warning)\r\n  // ========================================================================\r\n\r\n  private _setSvgContent(svg: string | null): void {\r\n    // Avoid unnecessary updates\r\n    if (this._svgContent === svg) return;\r\n\r\n    // Schedule after current update cycle\r\n    if (typeof queueMicrotask === 'function') {\r\n      queueMicrotask(() => {\r\n        this._svgContent = svg;\r\n      });\r\n    } else {\r\n      // Fallback for environments without queueMicrotask\r\n      Promise.resolve().then(() => {\r\n        this._svgContent = svg;\r\n      });\r\n    }\r\n  }\r\n\r\n  // ========================================================================\r\n  // Icon loading\r\n  // ========================================================================\r\n\r\n  private async _loadIcon(): Promise<void> {\r\n    const name = this.icon.trim();\r\n    if (!name) {\r\n      this._setSvgContent(null);\r\n      return;\r\n    }\r\n\r\n    // Cached SVG → still set via microtask to avoid nested update warning\r\n    const cached = SkyIcon._iconCache.get(name);\r\n    if (cached) {\r\n      this._setSvgContent(cached);\r\n      return;\r\n    }\r\n\r\n    let promise = SkyIcon._iconPromiseCache.get(name);\r\n    if (!promise) {\r\n      promise = this._fetchAndBuild(name);\r\n      SkyIcon._iconPromiseCache.set(name, promise);\r\n    }\r\n\r\n    try {\r\n      const svg = await promise;\r\n      this._setSvgContent(svg);\r\n      if (SkyIcon._iconCache.size >= MAX_ICON_CACHE_SIZE) {\r\n        const firstKey = SkyIcon._iconCache.keys().next().value;\r\n        if (firstKey != null) SkyIcon._iconCache.delete(firstKey);\r\n      }\r\n      SkyIcon._iconCache.set(name, svg);\r\n    } catch {\r\n      this._setSvgContent(null);\r\n    } finally {\r\n      SkyIcon._iconPromiseCache.delete(name);\r\n    }\r\n  }\r\n\r\n  private async _fetchAndBuild(full: string): Promise<string> {\r\n    const [prefix, iconName] = full.split(':');\r\n    if (!prefix || !iconName) throw new Error('Invalid icon name');\r\n\r\n    // 1) Single local icon (e.g. registerLocalIcon('ion:heart', {...}))\r\n    const singleLocal = SkyIcon._localIcons.get(full);\r\n    if (singleLocal) {\r\n      return this._buildSvg(singleLocal, {});\r\n    }\r\n\r\n    // 2) Local set (e.g. registerLocalSet('ion', { icons: { home: {...} } }))\r\n    const localSet = SkyIcon._localSets.get(prefix);\r\n    if (localSet?.icons?.[iconName]) {\r\n      return this._buildSvg(localSet.icons[iconName], localSet);\r\n    }\r\n\r\n    // 3) Fetch from Iconify API\r\n    const url = `https://api.iconify.design/${prefix}.json?icons=${iconName}`;\r\n    const res = await fetch(url);\r\n    if (!res.ok) throw new Error('Failed to fetch icon set');\r\n\r\n    const json = (await res.json()) as {\r\n      icons?: Record<string, IconifyIcon>;\r\n      left?: number;\r\n      top?: number;\r\n      width?: number;\r\n      height?: number;\r\n    };\r\n\r\n    const data = json.icons?.[iconName];\r\n    if (!data) throw new Error('Icon not found');\r\n\r\n    return this._buildSvg(data, json);\r\n  }\r\n\r\n  private _buildSvg(icon: IconifyIcon, set: IconifyCollection): string {\r\n    const body = icon.body ?? '';\r\n    const l = icon.left ?? set.left ?? 0;\r\n    const t = icon.top ?? set.top ?? 0;\r\n    const w = icon.width ?? set.width ?? 24;\r\n    const h = icon.height ?? set.height ?? 24;\r\n    const viewBox = icon.viewBox || `${l} ${t} ${w} ${h}`;\r\n\r\n    return `\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n           viewBox=\"${viewBox}\"\r\n           width=\"100%\"\r\n           height=\"100%\"\r\n           preserveAspectRatio=\"xMidYMid meet\"\r\n           fill=\"currentColor\">\r\n        ${body}\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  // ========================================================================\r\n  // Style helpers\r\n  // ========================================================================\r\n\r\n  private _normalize(v: string | number): string {\r\n    if (typeof v === 'number') return `${v}px`;\r\n    if (/^\\d+$/.test(v)) return `${v}px`;\r\n    return v;\r\n  }\r\n\r\n  private _rotationDeg(): number {\r\n    const v = this.rotate;\r\n    if (typeof v === 'number') return v * 90;\r\n    if (typeof v === 'string') {\r\n      if (v.endsWith('deg')) return parseFloat(v);\r\n      const n = parseInt(v, 10);\r\n      return Number.isFinite(n) ? n * 90 : 0;\r\n    }\r\n    return 0;\r\n  }\r\n\r\n  private _flipHas(val: 'horizontal' | 'vertical'): boolean {\r\n    return this.flip\r\n      .split(',')\r\n      .map((v) => v.trim().toLowerCase())\r\n      .includes(val);\r\n  }\r\n\r\n  private _transform(): string {\r\n    const deg = this._rotationDeg();\r\n    const h = this.hFlip || this._flipHas('horizontal');\r\n    const v = this.vFlip || this._flipHas('vertical');\r\n\r\n    const tr: string[] = [];\r\n    if (deg) tr.push(`rotate(${deg}deg)`);\r\n    if (h || v) tr.push(`scale(${h ? -1 : 1}, ${v ? -1 : 1})`);\r\n\r\n    return tr.join(' ');\r\n  }\r\n\r\n  private _baseStyle(): Record<string, string> {\r\n    const style: Record<string, string> = { color: resolveColor(this.color) };\r\n\r\n    if (this.width) style.width = this._normalize(this.width);\r\n    if (this.height) style.height = this._normalize(this.height);\r\n\r\n    if (!this.width && !this.height) {\r\n      style.width = '1em';\r\n      style.height = '1em';\r\n    }\r\n    if (this.inline) style.verticalAlign = '-0.125em';\r\n\r\n    return style;\r\n  }\r\n\r\n  // ========================================================================\r\n  // Render\r\n  // ========================================================================\r\n\r\n  override render() {\r\n    const style = this._baseStyle();\r\n    const tf = this._transform();\r\n    if (tf) style.transform = tf;\r\n\r\n    const showIconify = !this._hasSlottedSvg && this.icon && this._svgContent;\r\n\r\n    /* Iconify (API) path: same structure as before — single .icon div with innerHTML, no wrapper */\r\n    if (showIconify) {\r\n      return html`\r\n        <div\r\n          class=\"icon\"\r\n          style=${styleMap(style)}\r\n          part=\"icon\"\r\n          .innerHTML=${this._svgContent!}\r\n        ></div>\r\n      `;\r\n    }\r\n\r\n    /* Custom SVG slot or empty: render slot for detection and display */\r\n    return html`\r\n      <div class=\"icon\" style=${styleMap(style)} part=\"icon\">\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\n// Register default local set (ion from ion-local.json); users can add more via SkyIcon.registerLocalSet / registerLocalIcon\r\nconst defaultSet = skyLocalSetData as IconifySetData;\r\nif (defaultSet?.icons) {\r\n  SkyIcon.registerLocalSet('ion', defaultSet);\r\n}\r\n"],"names":["SkyIcon","LitElement","constructor","super","arguments","this","icon","width","height","color","inline","flip","hFlip","vFlip","rotate","lazy","_svgContent","_hasSlottedSvg","_observer","_visible","registerLocalSet","prefix","data","_localSets","set","key","_iconCache","keys","startsWith","delete","registerLocalIcon","fullName","_localIcons","connectedCallback","_startObserver","_loadIcon","disconnectedCallback","_stopObserver","updated","changed","has","_setSvgContent","_onSlotChange","e","hasSvg","target","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","tagName","window","IntersectionObserver","entries","isIntersecting","observe","disconnect","svg","queueMicrotask","Promise","resolve","then","name","trim","cached","get","promise","_iconPromiseCache","_fetchAndBuild","size","firstKey","next","value","full","iconName","split","Error","singleLocal","_buildSvg","localSet","icons","url","res","fetch","ok","json","body","l","left","t","top","w","h","viewBox","_normalize","v","test","_rotationDeg","endsWith","parseFloat","parseInt","Number","isFinite","_flipHas","val","map","toLowerCase","includes","_transform","deg","tr","push","join","_baseStyle","style","resolveColor","verticalAlign","render","tf","transform","html","styleMap","Map","styles","css","__decorateClass","property","type","String","prototype","Boolean","state","customElement","defaultSet","skyLocalSetData"],"mappings":"0dAkFO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAqELC,KAAAC,KAAO,GAGPD,KAAAE,MAA0B,GAG1BF,KAAAG,OAA2B,GAG3BH,KAAAI,MAAQ,eAGRJ,KAAAK,QAAS,EAGTL,KAAAM,KAAoB,GAGpBN,KAAAO,OAAQ,EAGRP,KAAAQ,OAAQ,EAGRR,KAAAS,OAA6B,EAG7BT,KAAAU,MAAO,EAOPV,KAAQW,YAA6B,KAGrCX,KAAQY,gBAAiB,EAEzBZ,KAAQa,UAAyC,KACjDb,KAAQc,UAAW,CAAA,CA3FnB,uBAAOC,CAAiBC,EAAgBC,GACtCtB,EAAQuB,WAAWC,IAAIH,EAAQC,GAC/B,IAAA,MAAWG,KAAOzB,EAAQ0B,WAAWC,OAC/BF,EAAIG,WAAWP,EAAS,MAAMrB,EAAQ0B,WAAWG,OAAOJ,EAEhE,CAOA,wBAAOK,CAAkBC,EAAkBzB,GACzCN,EAAQgC,YAAYR,IAAIO,EAAUzB,GAClCN,EAAQ0B,WAAWG,OAAOE,EAC5B,CAkFS,iBAAAE,GACP9B,MAAM8B,oBAEF5B,KAAKU,KACPV,KAAK6B,kBAEL7B,KAAKc,UAAW,EACZd,KAAKC,OAASD,KAAKY,gBACrBZ,KAAK8B,YAGX,CAES,oBAAAC,GACPjC,MAAMiC,uBACN/B,KAAKgC,eACP,CAES,OAAAC,CAAQC,GAEXA,EAAQC,IAAI,UACVnC,KAAKU,KACPV,KAAK6B,kBAEL7B,KAAKgC,gBACLhC,KAAKc,UAAW,EACZd,KAAKC,OAASD,KAAKY,gBACrBZ,KAAK8B,cAMPI,EAAQC,IAAI,UACVnC,KAAKY,eACPZ,KAAKoC,eAAe,OACVpC,KAAKU,MAAQV,KAAKc,SAC5Bd,KAAK8B,YAEL9B,KAAKoC,eAAe,MAG1B,CAEQ,aAAAC,CAAcC,GACpB,MAEMC,EAFOD,EAAEE,OACIC,cAAc,CAAEC,SAAS,IACvBC,KAClBC,GAAMA,EAAEC,WAAaC,KAAKC,cAA2C,QAA1BH,EAAcI,SAExDhD,KAAKY,iBAAmB2B,IAC1BvC,KAAKY,eAAiB2B,EAClBA,GAAUvC,KAAKC,KACjBD,KAAKoC,eAAe,MACVG,IAAUvC,KAAKC,OAASD,KAAKc,UAAad,KAAKU,MACzDV,KAAK8B,YAGX,CAMQ,cAAAD,GACgB,oBAAXoB,SACPjD,KAAKa,WAAe,yBAA0BoC,SAElDjD,KAAKa,UAAY,IAAIqC,qBAAsBC,IACrCA,EAAQR,KAAML,GAAMA,EAAEc,kBACxBpD,KAAKc,UAAW,GACXd,KAAKY,gBAAkBZ,KAAKC,MAC/BD,KAAK8B,YAEP9B,KAAKgC,mBAIThC,KAAKa,UAAUwC,QAAQrD,MACzB,CAEQ,aAAAgC,GACFhC,KAAKa,YACPb,KAAKa,UAAUyC,aACftD,KAAKa,UAAY,KAErB,CAMQ,cAAAuB,CAAemB,GAEjBvD,KAAKW,cAAgB4C,IAGK,mBAAnBC,eACTA,eAAe,KACbxD,KAAKW,YAAc4C,IAIrBE,QAAQC,UAAUC,KAAK,KACrB3D,KAAKW,YAAc4C,IAGzB,CAMA,eAAczB,GACZ,MAAM8B,EAAO5D,KAAKC,KAAK4D,OACvB,IAAKD,EAEH,YADA5D,KAAKoC,eAAe,MAKtB,MAAM0B,EAASnE,EAAQ0B,WAAW0C,IAAIH,GACtC,GAAIE,EAEF,YADA9D,KAAKoC,eAAe0B,GAItB,IAAIE,EAAUrE,EAAQsE,kBAAkBF,IAAIH,GACvCI,IACHA,EAAUhE,KAAKkE,eAAeN,GAC9BjE,EAAQsE,kBAAkB9C,IAAIyC,EAAMI,IAGtC,IACE,MAAMT,QAAYS,EAElB,GADAhE,KAAKoC,eAAemB,GAChB5D,EAAQ0B,WAAW8C,MA/SD,IA+S8B,CAClD,MAAMC,EAAWzE,EAAQ0B,WAAWC,OAAO+C,OAAOC,MAClC,MAAZF,GAAkBzE,EAAQ0B,WAAWG,OAAO4C,EAClD,CACAzE,EAAQ0B,WAAWF,IAAIyC,EAAML,EAC/B,CAAA,MACEvD,KAAKoC,eAAe,KACtB,CAAA,QACEzC,EAAQsE,kBAAkBzC,OAAOoC,EACnC,CACF,CAEA,oBAAcM,CAAeK,GAC3B,MAAOvD,EAAQwD,GAAYD,EAAKE,MAAM,KACtC,IAAKzD,IAAWwD,EAAU,MAAM,IAAIE,MAAM,qBAG1C,MAAMC,EAAchF,EAAQgC,YAAYoC,IAAIQ,GAC5C,GAAII,EACF,OAAO3E,KAAK4E,UAAUD,EAAa,IAIrC,MAAME,EAAWlF,EAAQuB,WAAW6C,IAAI/C,GACxC,GAAI6D,GAAUC,QAAQN,GACpB,OAAOxE,KAAK4E,UAAUC,EAASC,MAAMN,GAAWK,GAIlD,MAAME,EAAM,8BAA8B/D,gBAAqBwD,IACzDQ,QAAYC,MAAMF,GACxB,IAAKC,EAAIE,GAAI,MAAM,IAAIR,MAAM,4BAE7B,MAAMS,QAAcH,EAAIG,OAQlBlE,EAAOkE,EAAKL,QAAQN,GAC1B,IAAKvD,EAAM,MAAM,IAAIyD,MAAM,kBAE3B,OAAO1E,KAAK4E,UAAU3D,EAAMkE,EAC9B,CAEQ,SAAAP,CAAU3E,EAAmBkB,GACnC,MAAMiE,EAAOnF,EAAKmF,MAAQ,GACpBC,EAAIpF,EAAKqF,MAAQnE,EAAImE,MAAQ,EAC7BC,EAAItF,EAAKuF,KAAOrE,EAAIqE,KAAO,EAC3BC,EAAIxF,EAAKC,OAASiB,EAAIjB,OAAS,GAC/BwF,EAAIzF,EAAKE,QAAUgB,EAAIhB,QAAU,GAGvC,MAAO,wEAFSF,EAAK0F,SAAW,GAAGN,KAAKE,KAAKE,KAAKC,qJAS5CN,uBAGR,CAMQ,UAAAQ,CAAWC,GACjB,MAAiB,iBAANA,GACP,QAAQC,KAAKD,GADiB,GAAGA,MAE9BA,CACT,CAEQ,YAAAE,GACN,MAAMF,EAAI7F,KAAKS,OACf,GAAiB,iBAANoF,EAAgB,OAAW,GAAJA,EAClC,GAAiB,iBAANA,EAAgB,CACzB,GAAIA,EAAEG,SAAS,OAAQ,OAAOC,WAAWJ,GACzC,MAAMjD,EAAIsD,SAASL,EAAG,IACtB,OAAOM,OAAOC,SAASxD,GAAS,GAAJA,EAAS,CACvC,CACA,OAAO,CACT,CAEQ,QAAAyD,CAASC,GACf,OAAOtG,KAAKM,KACTmE,MAAM,KACN8B,IAAKV,GAAMA,EAAEhC,OAAO2C,eACpBC,SAASH,EACd,CAEQ,UAAAI,GACN,MAAMC,EAAM3G,KAAK+F,eACXL,EAAI1F,KAAKO,OAASP,KAAKqG,SAAS,cAChCR,EAAI7F,KAAKQ,OAASR,KAAKqG,SAAS,YAEhCO,EAAe,GAIrB,OAHID,GAAKC,EAAGC,KAAK,UAAUF,UACvBjB,GAAKG,IAAGe,EAAGC,KAAK,SAASnB,GAAI,EAAK,MAAMG,GAAI,EAAK,MAE9Ce,EAAGE,KAAK,IACjB,CAEQ,UAAAC,GACN,MAAMC,EAAgC,CAAE5G,MAAO6G,EAAajH,KAAKI,QAWjE,OATIJ,KAAKE,QAAO8G,EAAM9G,MAAQF,KAAK4F,WAAW5F,KAAKE,QAC/CF,KAAKG,SAAQ6G,EAAM7G,OAASH,KAAK4F,WAAW5F,KAAKG,SAEhDH,KAAKE,OAAUF,KAAKG,SACvB6G,EAAM9G,MAAQ,MACd8G,EAAM7G,OAAS,OAEbH,KAAKK,SAAQ2G,EAAME,cAAgB,YAEhCF,CACT,CAMS,MAAAG,GACP,MAAMH,EAAQhH,KAAK+G,aACbK,EAAKpH,KAAK0G,aACZU,MAAUC,UAAYD,GAK1B,OAHqBpH,KAAKY,gBAAkBZ,KAAKC,MAAQD,KAAKW,YAIrD2G,CAAA;;;kBAGKC,EAASP;;uBAEJhH,KAAKW;;QAMjB2G,CAAA;gCACqBC,EAASP;4BACbhH,KAAKqC;;KAG/B,GAlZW1C,EAEI0B,eAAiBmG,IAFrB7H,EAKIsE,sBAAwBuD,IAL5B7H,EAQIuB,eAAiBsG,IARrB7H,EAWIgC,gBAAkB6F,IAXtB7H,EAmCJ8H,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkChBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UApEPnI,EAqEXoI,UAAA,OAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAvEPnI,EAwEXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1EPnI,EA2EXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA7EPnI,EA8EXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAhFPrI,EAiFXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnFPnI,EAoFXoI,UAAA,OAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAtFPrI,EAuFXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAzFPrI,EA0FXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA5FPnI,EA6FXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WA/FPrI,EAgGXoI,UAAA,OAAA,GAOQJ,EAAA,CADPM,KAtGUtI,EAuGHoI,UAAA,cAAA,GAGAJ,EAAA,CADPM,KAzGUtI,EA0GHoI,UAAA,iBAAA,GA1GGpI,EAANgI,EAAA,CADNO,EAAc,aACFvI,GAsZb,MAAMwI,EAAaC,EACfD,GAAYrD,OACdnF,EAAQoB,iBAAiB,MAAOoH"}
+{"version":3,"file":"sky-icon.js","sources":["../../src/sky-icon/sky-icon.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { resolveColor } from '../helper/utils/color-resolver';\nimport skyLocalSetData from './ion-local.json';\n\nexport type SkyIconSizeValue = string | number;\nexport type SkyIconRotateValue = string | number;\nexport type SkyIconFlip =\n  '' | 'horizontal' | 'vertical' | 'horizontal,vertical';\n\ninterface IconifyCollection {\n  left?: number;\n  top?: number;\n  width?: number;\n  height?: number;\n}\n\ninterface IconifySetData extends IconifyCollection {\n  icons?: Record<string, IconifyIcon>;\n}\n\ninterface IconifyIcon {\n  body?: string;\n  left?: number;\n  top?: number;\n  width?: number;\n  height?: number;\n  viewBox?: string;\n}\n\nconst MAX_ICON_CACHE_SIZE = 100;\n\n/**\n * @element sky-icon\n *\n * @summary Icon renderer with Iconify fetch/caching, lazy loading, and optional slotted SVG fallback.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/icon\n *\n * @slot - Optional fallback `<svg>` content when remote icon data is unavailable.\n * @property {string} icon - Icon name in `prefix:icon-name` format.\n * @property {SkyIconSizeValue} width - Icon width value.\n * @property {SkyIconSizeValue} height - Icon height value.\n * @property {string} color - Icon color value.\n * @property {boolean} inline - Applies inline alignment behavior for text contexts.\n * @property {SkyIconFlip} flip - Flip transform descriptor.\n * @property {boolean} hFlip - Horizontal flip shortcut.\n * @property {boolean} vFlip - Vertical flip shortcut.\n * @property {SkyIconRotateValue} rotate - Rotation descriptor.\n * @property {boolean} lazy - Defers loading until the icon is visible.\n *\n * @method registerLocalSet Registers a local Iconify set for offline/custom usage.\n * @method registerLocalIcon Registers a single local icon override.\n *\n * @csspart icon - The icon container element.\n * @csspart svg - The rendered SVG element.\n *\n * @Behavior\n * - Resolves icons from local registrations first, then Iconify API.\n * - Uses bounded in-memory caching for fetched SVG payloads.\n * - Supports custom slotted SVG fallback when external fetch fails or is blocked.\n *\n * @example\n * ```html\n * <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>\n * ```\n * ```vue\n * <template>\n *   <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return <sky-icon icon=\"ion:home\" width=\"24\" height=\"24\" color=\"#3b82f6\"></sky-icon>;\n * }\n * ```\n */\n@customElement('sky-icon')\nexport class SkyIcon extends LitElement {\n  /** Cache: icon name -> final SVG string (bounded by MAX_ICON_CACHE_SIZE, LRU eviction). */\n  private static _iconCache = new Map<string, string>();\n\n  /** Cache for in-flight fetches: icon name -> Promise<svg> */\n  private static _iconPromiseCache = new Map<string, Promise<string>>();\n\n  /** Local icon sets (prefix -> Iconify set data) for offline/custom icons */\n  private static _localSets = new Map<string, IconifySetData>();\n\n  /** Single local icons (full name -> icon data) */\n  private static _localIcons = new Map<string, IconifyIcon>();\n\n  /**\n   * Register a local icon set (Iconify-compatible JSON) for offline or custom icons.\n   * @param prefix - Set prefix (e.g. \"ion\", \"custom\"); use as icon=\"prefix:iconName\".\n   * @param data - Set data with `icons` and optional defaults (width, height, left, top).\n   */\n  static registerLocalSet(prefix: string, data: IconifySetData): void {\n    SkyIcon._localSets.set(prefix, data);\n    for (const key of SkyIcon._iconCache.keys()) {\n      if (key.startsWith(prefix + ':')) SkyIcon._iconCache.delete(key);\n    }\n  }\n\n  /**\n   * Register a single local icon (one-off custom icon without a full set).\n   * @param fullName - Full icon name, e.g. \"ion:heart\".\n   * @param icon - Icon data (body, width, height, viewBox, etc.).\n   */\n  static registerLocalIcon(fullName: string, icon: IconifyIcon): void {\n    SkyIcon._localIcons.set(fullName, icon);\n    SkyIcon._iconCache.delete(fullName);\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      vertical-align: middle;\n    }\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    }\n    .icon svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      flex-shrink: 0;\n    }\n    /* Custom SVG in slot: inherit size and color */\n    .icon::slotted(svg) {\n      display: block;\n      width: 100%;\n      height: 100%;\n      flex-shrink: 0;\n      fill: currentColor;\n    }\n  `;\n\n  // ========================================================================\n  // Iconify-style public props\n  // ========================================================================\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  width: SkyIconSizeValue = '';\n\n  @property({ type: String })\n  height: SkyIconSizeValue = '';\n\n  @property({ type: String })\n  color = 'currentColor';\n\n  @property({ type: Boolean })\n  inline = false;\n\n  @property({ type: String })\n  flip: SkyIconFlip = '';\n\n  @property({ type: Boolean })\n  hFlip = false;\n\n  @property({ type: Boolean })\n  vFlip = false;\n\n  @property({ type: String })\n  rotate: SkyIconRotateValue = 0;\n\n  @property({ type: Boolean })\n  lazy = false;\n\n  // ========================================================================\n  // Internal state\n  // ========================================================================\n\n  @state()\n  private _svgContent: string | null = null;\n\n  @state()\n  private _hasSlottedSvg = false;\n\n  private _observer: IntersectionObserver | null = null;\n  private _visible = false;\n\n  // ========================================================================\n  // Lifecycle\n  // ========================================================================\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.lazy) {\n      this._startObserver();\n    } else {\n      this._visible = true;\n      if (this.icon && !this._hasSlottedSvg) {\n        this._loadIcon();\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopObserver();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    // Lazy flag changed: reconfigure observer / visibility\n    if (changed.has('lazy')) {\n      if (this.lazy) {\n        this._startObserver();\n      } else {\n        this._stopObserver();\n        this._visible = true;\n        if (this.icon && !this._hasSlottedSvg) {\n          this._loadIcon();\n        }\n      }\n    }\n\n    // Icon changed: reload if visible and no custom SVG, otherwise clear\n    if (changed.has('icon')) {\n      if (this._hasSlottedSvg) {\n        this._setSvgContent(null);\n      } else if (!this.lazy || this._visible) {\n        this._loadIcon();\n      } else {\n        this._setSvgContent(null);\n      }\n    }\n  }\n\n  private _onSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    const hasSvg = nodes.some(\n      (n) =>\n        n.nodeType === Node.ELEMENT_NODE && (n as Element).tagName === 'SVG'\n    );\n    if (this._hasSlottedSvg !== hasSvg) {\n      this._hasSlottedSvg = hasSvg;\n      if (hasSvg && this.icon) {\n        this._setSvgContent(null);\n      } else if (!hasSvg && this.icon && (this._visible || !this.lazy)) {\n        this._loadIcon();\n      }\n    }\n  }\n\n  // ========================================================================\n  // Lazy loading\n  // ========================================================================\n\n  private _startObserver(): void {\n    if (typeof window === 'undefined') return;\n    if (this._observer || !('IntersectionObserver' in window)) return;\n\n    this._observer = new IntersectionObserver((entries) => {\n      if (entries.some((e) => e.isIntersecting)) {\n        this._visible = true;\n        if (!this._hasSlottedSvg && this.icon) {\n          this._loadIcon();\n        }\n        this._stopObserver();\n      }\n    });\n\n    this._observer.observe(this);\n  }\n\n  private _stopObserver(): void {\n    if (this._observer) {\n      this._observer.disconnect();\n      this._observer = null;\n    }\n  }\n\n  // ========================================================================\n  // State setter (avoids nested update warning)\n  // ========================================================================\n\n  private _setSvgContent(svg: string | null): void {\n    // Avoid unnecessary updates\n    if (this._svgContent === svg) return;\n\n    // Schedule after current update cycle\n    if (typeof queueMicrotask === 'function') {\n      queueMicrotask(() => {\n        this._svgContent = svg;\n      });\n    } else {\n      // Fallback for environments without queueMicrotask\n      Promise.resolve().then(() => {\n        this._svgContent = svg;\n      });\n    }\n  }\n\n  // ========================================================================\n  // Icon loading\n  // ========================================================================\n\n  private async _loadIcon(): Promise<void> {\n    const name = this.icon.trim();\n    if (!name) {\n      this._setSvgContent(null);\n      return;\n    }\n\n    // Cached SVG → still set via microtask to avoid nested update warning\n    const cached = SkyIcon._iconCache.get(name);\n    if (cached) {\n      this._setSvgContent(cached);\n      return;\n    }\n\n    let promise = SkyIcon._iconPromiseCache.get(name);\n    if (!promise) {\n      promise = this._fetchAndBuild(name);\n      SkyIcon._iconPromiseCache.set(name, promise);\n    }\n\n    try {\n      const svg = await promise;\n      this._setSvgContent(svg);\n      if (SkyIcon._iconCache.size >= MAX_ICON_CACHE_SIZE) {\n        const firstKey = SkyIcon._iconCache.keys().next().value;\n        if (firstKey != null) SkyIcon._iconCache.delete(firstKey);\n      }\n      SkyIcon._iconCache.set(name, svg);\n    } catch {\n      this._setSvgContent(null);\n    } finally {\n      SkyIcon._iconPromiseCache.delete(name);\n    }\n  }\n\n  private async _fetchAndBuild(full: string): Promise<string> {\n    const [prefix, iconName] = full.split(':');\n    if (!prefix || !iconName) throw new Error('Invalid icon name');\n\n    // 1) Single local icon (e.g. registerLocalIcon('ion:heart', {...}))\n    const singleLocal = SkyIcon._localIcons.get(full);\n    if (singleLocal) {\n      return this._buildSvg(singleLocal, {});\n    }\n\n    // 2) Local set (e.g. registerLocalSet('ion', { icons: { home: {...} } }))\n    const localSet = SkyIcon._localSets.get(prefix);\n    if (localSet?.icons?.[iconName]) {\n      return this._buildSvg(localSet.icons[iconName], localSet);\n    }\n\n    // 3) Fetch from Iconify API\n    const url = `https://api.iconify.design/${prefix}.json?icons=${iconName}`;\n    const res = await fetch(url);\n    if (!res.ok) throw new Error('Failed to fetch icon set');\n\n    const json = (await res.json()) as {\n      icons?: Record<string, IconifyIcon>;\n      left?: number;\n      top?: number;\n      width?: number;\n      height?: number;\n    };\n\n    const data = json.icons?.[iconName];\n    if (!data) throw new Error('Icon not found');\n\n    return this._buildSvg(data, json);\n  }\n\n  private _buildSvg(icon: IconifyIcon, set: IconifyCollection): string {\n    const body = icon.body ?? '';\n    const l = icon.left ?? set.left ?? 0;\n    const t = icon.top ?? set.top ?? 0;\n    const w = icon.width ?? set.width ?? 24;\n    const h = icon.height ?? set.height ?? 24;\n    const viewBox = icon.viewBox || `${l} ${t} ${w} ${h}`;\n\n    return `\n      <svg xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"${viewBox}\"\n           width=\"100%\"\n           height=\"100%\"\n           preserveAspectRatio=\"xMidYMid meet\"\n           fill=\"currentColor\">\n        ${body}\n      </svg>\n    `;\n  }\n\n  // ========================================================================\n  // Style helpers\n  // ========================================================================\n\n  private _normalize(v: string | number): string {\n    if (typeof v === 'number') return `${v}px`;\n    if (/^\\d+$/.test(v)) return `${v}px`;\n    return v;\n  }\n\n  private _rotationDeg(): number {\n    const v = this.rotate;\n    if (typeof v === 'number') return v * 90;\n    if (typeof v === 'string') {\n      if (v.endsWith('deg')) return parseFloat(v);\n      const n = parseInt(v, 10);\n      return Number.isFinite(n) ? n * 90 : 0;\n    }\n    return 0;\n  }\n\n  private _flipHas(val: 'horizontal' | 'vertical'): boolean {\n    return this.flip\n      .split(',')\n      .map((v) => v.trim().toLowerCase())\n      .includes(val);\n  }\n\n  private _transform(): string {\n    const deg = this._rotationDeg();\n    const h = this.hFlip || this._flipHas('horizontal');\n    const v = this.vFlip || this._flipHas('vertical');\n\n    const tr: string[] = [];\n    if (deg) tr.push(`rotate(${deg}deg)`);\n    if (h || v) tr.push(`scale(${h ? -1 : 1}, ${v ? -1 : 1})`);\n\n    return tr.join(' ');\n  }\n\n  private _baseStyle(): Record<string, string> {\n    const style: Record<string, string> = { color: resolveColor(this.color) };\n\n    if (this.width) style.width = this._normalize(this.width);\n    if (this.height) style.height = this._normalize(this.height);\n\n    if (!this.width && !this.height) {\n      style.width = '1em';\n      style.height = '1em';\n    }\n    if (this.inline) style.verticalAlign = '-0.125em';\n\n    return style;\n  }\n\n  // ========================================================================\n  // Render\n  // ========================================================================\n\n  override render() {\n    const style = this._baseStyle();\n    const tf = this._transform();\n    if (tf) style.transform = tf;\n\n    const showIconify = !this._hasSlottedSvg && this.icon && this._svgContent;\n\n    /* Iconify (API) path: same structure as before — single .icon div with innerHTML, no wrapper */\n    if (showIconify) {\n      return html`\n        <div\n          class=\"icon\"\n          style=${styleMap(style)}\n          part=\"icon\"\n          .innerHTML=${this._svgContent!}\n        ></div>\n      `;\n    }\n\n    /* Custom SVG slot or empty: render slot for detection and display */\n    return html`\n      <div class=\"icon\" style=${styleMap(style)} part=\"icon\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\n// Register default local set (ion from ion-local.json); users can add more via SkyIcon.registerLocalSet / registerLocalIcon\nconst defaultSet = skyLocalSetData as IconifySetData;\nif (defaultSet?.icons) {\n  SkyIcon.registerLocalSet('ion', defaultSet);\n}\n"],"names":["SkyIcon","LitElement","constructor","super","arguments","this","icon","width","height","color","inline","flip","hFlip","vFlip","rotate","lazy","_svgContent","_hasSlottedSvg","_observer","_visible","registerLocalSet","prefix","data","_localSets","set","key","_iconCache","keys","startsWith","delete","registerLocalIcon","fullName","_localIcons","connectedCallback","_startObserver","_loadIcon","disconnectedCallback","_stopObserver","updated","changed","has","_setSvgContent","_onSlotChange","e","hasSvg","target","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","tagName","window","IntersectionObserver","entries","isIntersecting","observe","disconnect","svg","queueMicrotask","Promise","resolve","then","name","trim","cached","get","promise","_iconPromiseCache","_fetchAndBuild","size","firstKey","next","value","full","iconName","split","Error","singleLocal","_buildSvg","localSet","icons","url","res","fetch","ok","json","body","l","left","t","top","w","h","viewBox","_normalize","v","test","_rotationDeg","endsWith","parseFloat","parseInt","Number","isFinite","_flipHas","val","map","toLowerCase","includes","_transform","deg","tr","push","join","_baseStyle","style","resolveColor","verticalAlign","render","tf","transform","html","styleMap","Map","styles","css","__decorateClass","property","type","String","prototype","Boolean","state","customElement","defaultSet","skyLocalSetData"],"mappings":"0dAkFO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAqELC,KAAAC,KAAO,GAGPD,KAAAE,MAA0B,GAG1BF,KAAAG,OAA2B,GAG3BH,KAAAI,MAAQ,eAGRJ,KAAAK,QAAS,EAGTL,KAAAM,KAAoB,GAGpBN,KAAAO,OAAQ,EAGRP,KAAAQ,OAAQ,EAGRR,KAAAS,OAA6B,EAG7BT,KAAAU,MAAO,EAOPV,KAAQW,YAA6B,KAGrCX,KAAQY,gBAAiB,EAEzBZ,KAAQa,UAAyC,KACjDb,KAAQc,UAAW,CAAA,CA3FnB,uBAAOC,CAAiBC,EAAgBC,GACtCtB,EAAQuB,WAAWC,IAAIH,EAAQC,GAC/B,IAAA,MAAWG,KAAOzB,EAAQ0B,WAAWC,OAC/BF,EAAIG,WAAWP,EAAS,MAAMrB,EAAQ0B,WAAWG,OAAOJ,EAEhE,CAOA,wBAAOK,CAAkBC,EAAkBzB,GACzCN,EAAQgC,YAAYR,IAAIO,EAAUzB,GAClCN,EAAQ0B,WAAWG,OAAOE,EAC5B,CAkFS,iBAAAE,GACP9B,MAAM8B,oBAEF5B,KAAKU,KACPV,KAAK6B,kBAEL7B,KAAKc,UAAW,EACZd,KAAKC,OAASD,KAAKY,gBACrBZ,KAAK8B,YAGX,CAES,oBAAAC,GACPjC,MAAMiC,uBACN/B,KAAKgC,eACP,CAES,OAAAC,CAAQC,GAEXA,EAAQC,IAAI,UACVnC,KAAKU,KACPV,KAAK6B,kBAEL7B,KAAKgC,gBACLhC,KAAKc,UAAW,EACZd,KAAKC,OAASD,KAAKY,gBACrBZ,KAAK8B,cAMPI,EAAQC,IAAI,UACVnC,KAAKY,eACPZ,KAAKoC,eAAe,OACVpC,KAAKU,MAAQV,KAAKc,SAC5Bd,KAAK8B,YAEL9B,KAAKoC,eAAe,MAG1B,CAEQ,aAAAC,CAAcC,GACpB,MAEMC,EAFOD,EAAEE,OACIC,cAAc,CAAEC,SAAS,IACvBC,KAClBC,GACCA,EAAEC,WAAaC,KAAKC,cAA2C,QAA1BH,EAAcI,SAEnDhD,KAAKY,iBAAmB2B,IAC1BvC,KAAKY,eAAiB2B,EAClBA,GAAUvC,KAAKC,KACjBD,KAAKoC,eAAe,MACVG,IAAUvC,KAAKC,OAASD,KAAKc,UAAad,KAAKU,MACzDV,KAAK8B,YAGX,CAMQ,cAAAD,GACgB,oBAAXoB,SACPjD,KAAKa,WAAe,yBAA0BoC,SAElDjD,KAAKa,UAAY,IAAIqC,qBAAsBC,IACrCA,EAAQR,KAAML,GAAMA,EAAEc,kBACxBpD,KAAKc,UAAW,GACXd,KAAKY,gBAAkBZ,KAAKC,MAC/BD,KAAK8B,YAEP9B,KAAKgC,mBAIThC,KAAKa,UAAUwC,QAAQrD,MACzB,CAEQ,aAAAgC,GACFhC,KAAKa,YACPb,KAAKa,UAAUyC,aACftD,KAAKa,UAAY,KAErB,CAMQ,cAAAuB,CAAemB,GAEjBvD,KAAKW,cAAgB4C,IAGK,mBAAnBC,eACTA,eAAe,KACbxD,KAAKW,YAAc4C,IAIrBE,QAAQC,UAAUC,KAAK,KACrB3D,KAAKW,YAAc4C,IAGzB,CAMA,eAAczB,GACZ,MAAM8B,EAAO5D,KAAKC,KAAK4D,OACvB,IAAKD,EAEH,YADA5D,KAAKoC,eAAe,MAKtB,MAAM0B,EAASnE,EAAQ0B,WAAW0C,IAAIH,GACtC,GAAIE,EAEF,YADA9D,KAAKoC,eAAe0B,GAItB,IAAIE,EAAUrE,EAAQsE,kBAAkBF,IAAIH,GACvCI,IACHA,EAAUhE,KAAKkE,eAAeN,GAC9BjE,EAAQsE,kBAAkB9C,IAAIyC,EAAMI,IAGtC,IACE,MAAMT,QAAYS,EAElB,GADAhE,KAAKoC,eAAemB,GAChB5D,EAAQ0B,WAAW8C,MA/SD,IA+S8B,CAClD,MAAMC,EAAWzE,EAAQ0B,WAAWC,OAAO+C,OAAOC,MAClC,MAAZF,GAAkBzE,EAAQ0B,WAAWG,OAAO4C,EAClD,CACAzE,EAAQ0B,WAAWF,IAAIyC,EAAML,EAC/B,CAAA,MACEvD,KAAKoC,eAAe,KACtB,CAAA,QACEzC,EAAQsE,kBAAkBzC,OAAOoC,EACnC,CACF,CAEA,oBAAcM,CAAeK,GAC3B,MAAOvD,EAAQwD,GAAYD,EAAKE,MAAM,KACtC,IAAKzD,IAAWwD,EAAU,MAAM,IAAIE,MAAM,qBAG1C,MAAMC,EAAchF,EAAQgC,YAAYoC,IAAIQ,GAC5C,GAAII,EACF,OAAO3E,KAAK4E,UAAUD,EAAa,IAIrC,MAAME,EAAWlF,EAAQuB,WAAW6C,IAAI/C,GACxC,GAAI6D,GAAUC,QAAQN,GACpB,OAAOxE,KAAK4E,UAAUC,EAASC,MAAMN,GAAWK,GAIlD,MAAME,EAAM,8BAA8B/D,gBAAqBwD,IACzDQ,QAAYC,MAAMF,GACxB,IAAKC,EAAIE,GAAI,MAAM,IAAIR,MAAM,4BAE7B,MAAMS,QAAcH,EAAIG,OAQlBlE,EAAOkE,EAAKL,QAAQN,GAC1B,IAAKvD,EAAM,MAAM,IAAIyD,MAAM,kBAE3B,OAAO1E,KAAK4E,UAAU3D,EAAMkE,EAC9B,CAEQ,SAAAP,CAAU3E,EAAmBkB,GACnC,MAAMiE,EAAOnF,EAAKmF,MAAQ,GACpBC,EAAIpF,EAAKqF,MAAQnE,EAAImE,MAAQ,EAC7BC,EAAItF,EAAKuF,KAAOrE,EAAIqE,KAAO,EAC3BC,EAAIxF,EAAKC,OAASiB,EAAIjB,OAAS,GAC/BwF,EAAIzF,EAAKE,QAAUgB,EAAIhB,QAAU,GAGvC,MAAO,wEAFSF,EAAK0F,SAAW,GAAGN,KAAKE,KAAKE,KAAKC,qJAS5CN,uBAGR,CAMQ,UAAAQ,CAAWC,GACjB,MAAiB,iBAANA,GACP,QAAQC,KAAKD,GADiB,GAAGA,MAE9BA,CACT,CAEQ,YAAAE,GACN,MAAMF,EAAI7F,KAAKS,OACf,GAAiB,iBAANoF,EAAgB,OAAW,GAAJA,EAClC,GAAiB,iBAANA,EAAgB,CACzB,GAAIA,EAAEG,SAAS,OAAQ,OAAOC,WAAWJ,GACzC,MAAMjD,EAAIsD,SAASL,EAAG,IACtB,OAAOM,OAAOC,SAASxD,GAAS,GAAJA,EAAS,CACvC,CACA,OAAO,CACT,CAEQ,QAAAyD,CAASC,GACf,OAAOtG,KAAKM,KACTmE,MAAM,KACN8B,IAAKV,GAAMA,EAAEhC,OAAO2C,eACpBC,SAASH,EACd,CAEQ,UAAAI,GACN,MAAMC,EAAM3G,KAAK+F,eACXL,EAAI1F,KAAKO,OAASP,KAAKqG,SAAS,cAChCR,EAAI7F,KAAKQ,OAASR,KAAKqG,SAAS,YAEhCO,EAAe,GAIrB,OAHID,GAAKC,EAAGC,KAAK,UAAUF,UACvBjB,GAAKG,IAAGe,EAAGC,KAAK,SAASnB,GAAI,EAAK,MAAMG,GAAI,EAAK,MAE9Ce,EAAGE,KAAK,IACjB,CAEQ,UAAAC,GACN,MAAMC,EAAgC,CAAE5G,MAAO6G,EAAajH,KAAKI,QAWjE,OATIJ,KAAKE,QAAO8G,EAAM9G,MAAQF,KAAK4F,WAAW5F,KAAKE,QAC/CF,KAAKG,SAAQ6G,EAAM7G,OAASH,KAAK4F,WAAW5F,KAAKG,SAEhDH,KAAKE,OAAUF,KAAKG,SACvB6G,EAAM9G,MAAQ,MACd8G,EAAM7G,OAAS,OAEbH,KAAKK,SAAQ2G,EAAME,cAAgB,YAEhCF,CACT,CAMS,MAAAG,GACP,MAAMH,EAAQhH,KAAK+G,aACbK,EAAKpH,KAAK0G,aACZU,MAAUC,UAAYD,GAK1B,OAHqBpH,KAAKY,gBAAkBZ,KAAKC,MAAQD,KAAKW,YAIrD2G,CAAA;;;kBAGKC,EAASP;;uBAEJhH,KAAKW;;QAMjB2G,CAAA;gCACqBC,EAASP;4BACbhH,KAAKqC;;KAG/B,GAnZW1C,EAEI0B,eAAiBmG,IAFrB7H,EAKIsE,sBAAwBuD,IAL5B7H,EAQIuB,eAAiBsG,IARrB7H,EAWIgC,gBAAkB6F,IAXtB7H,EAmCJ8H,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkChBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UApEPnI,EAqEXoI,UAAA,OAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAvEPnI,EAwEXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1EPnI,EA2EXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA7EPnI,EA8EXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAhFPrI,EAiFXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnFPnI,EAoFXoI,UAAA,OAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAtFPrI,EAuFXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAzFPrI,EA0FXoI,UAAA,QAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA5FPnI,EA6FXoI,UAAA,SAAA,GAGAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WA/FPrI,EAgGXoI,UAAA,OAAA,GAOQJ,EAAA,CADPM,KAtGUtI,EAuGHoI,UAAA,cAAA,GAGAJ,EAAA,CADPM,KAzGUtI,EA0GHoI,UAAA,iBAAA,GA1GGpI,EAANgI,EAAA,CADNO,EAAc,aACFvI,GAuZb,MAAMwI,EAAaC,EACfD,GAAYrD,OACdnF,EAAQoB,iBAAiB,MAAOoH"}

package/dist/sky-image/sky-image.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from "lit";
-import type { PropertyValues } from "lit";
-export type SkyImageLoading = "lazy" | "eager";
-export type SkyImageDecoding = "async" | "sync" | "auto";
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+export type SkyImageLoading = 'lazy' | 'eager';
+export type SkyImageDecoding = 'async' | 'sync' | 'auto';
 /**
  * @element sky-image
  *
@@ -10,7 +10,7 @@ export type SkyImageDecoding = "async" | "sync" | "auto";
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/image
+ * @documentation https://sky-ui.com/components/image
  *
  * @slot - No slots are exposed; image content is rendered internally.
  * @property {string} src - Primary image source URL.

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

@@ -1 +1 @@
-{"version":3,"file":"sky-image.js","sources":["../../src/sky-image/sky-image.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport type { PropertyValues } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { resolveImageFallbackSrc } from \"./srcset-utils.js\";\r\n\r\nexport type SkyImageLoading = \"lazy\" | \"eager\";\r\nexport type SkyImageDecoding = \"async\" | \"sync\" | \"auto\";\r\n\r\n/**\r\n * @element sky-image\r\n *\r\n * @summary Responsive image component with style controls, `srcset`, and optional auto `sizes`.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/image\r\n *\r\n * @slot - No slots are exposed; image content is rendered internally.\r\n * @property {string} src - Primary image source URL.\r\n * @property {string} alt - Alternative text for accessibility.\r\n * @property {string} width - CSS width for the rendered image.\r\n * @property {string} height - CSS height for the rendered image.\r\n * @property {string | null} aspectRatio - CSS `aspect-ratio` value.\r\n * @property {string} borderRadius - CSS border radius.\r\n * @property {string} boxShadow - CSS box shadow.\r\n * @property {string} objectFit - CSS object-fit value.\r\n * @property {string} objectPosition - CSS object-position value.\r\n * @property {string} srcset - Responsive source set string.\r\n * @property {string} sizes - Responsive sizes string.\r\n * @property {boolean} autoSizes - Computes `sizes` from host width when true.\r\n * @property {SkyImageLoading} loading - Native loading hint.\r\n * @property {SkyImageDecoding} decoding - Native decoding hint.\r\n *\r\n * @csspart img - The underlying `<img>` element.\r\n *\r\n * @Behavior\r\n * - Renders a fallback visual placeholder when `src` is empty\r\n * - Supports automatic `sizes` updates using ResizeObserver\r\n * - Forwards native image loading and decoding hints\r\n *\r\n * @example\r\n * ```html\r\n * <sky-image\r\n *   src=\"/images/photo-1280.jpg\"\r\n *   srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *   sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *   alt=\"Responsive photo\"\r\n *   width=\"100%\"\r\n *   aspect-ratio=\"4/3\"\r\n *   border-radius=\"8px\"\r\n *   loading=\"lazy\"\r\n * ></sky-image>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-image\r\n *     src=\"/images/photo-1280.jpg\"\r\n *     srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *     sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *     alt=\"Responsive photo\"\r\n *     width=\"100%\"\r\n *     aspect-ratio=\"4/3\"\r\n *     border-radius=\"8px\"\r\n *   ></sky-image>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-image\r\n *       src=\"/images/photo-1280.jpg\"\r\n *       srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *       sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *       alt=\"Responsive photo\"\r\n *       width=\"100%\"\r\n *       aspect-ratio=\"4/3\"\r\n *       border-radius=\"8px\"\r\n *     ></sky-image>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-image\")\r\nexport class SkyImage extends LitElement {\r\n  @property({ type: String }) src = \"\";\r\n  @property({ type: String }) alt = \"Image\";\r\n  @property({ type: String }) width = \"auto\";\r\n  @property({ type: String }) height = \"auto\";\r\n  @property({ type: String }) aspectRatio: string | null = null;\r\n  @property({ type: String }) borderRadius = \"0\";\r\n  @property({ type: String }) boxShadow = \"none\";\r\n  @property({ type: String }) objectFit = \"cover\";\r\n  @property({ type: String }) objectPosition = \"center\";\r\n\r\n  @property({ type: String }) srcset = \"\";\r\n  @property({ type: String }) sizes = \"\";\r\n\r\n  @property({ type: Boolean }) autoSizes = false;\r\n  @state() private _computedSizes = \"\";\r\n\r\n  @property({ type: String }) loading: SkyImageLoading = \"lazy\";\r\n  @property({ type: String }) decoding: SkyImageDecoding = \"async\";\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      max-width: 100%;\r\n    }\r\n\r\n    img,\r\n    .placeholder {\r\n      display: block;\r\n      max-width: 100%;\r\n    }\r\n\r\n    .placeholder {\r\n      background: var(--sky-hover-tertiary);\r\n    }\r\n  `;\r\n\r\n  private _ro?: ResizeObserver;\r\n  private _sizesRafId: number | null = null;\r\n  private _updateSizes = () => {\r\n    if (this._sizesRafId != null) return;\r\n    this._sizesRafId = requestAnimationFrame(() => {\r\n      this._sizesRafId = null;\r\n      const w = Math.ceil(this.getBoundingClientRect().width);\r\n      if (w > 0) this._computedSizes = `${w}px`;\r\n    });\r\n  };\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // firstUpdated runs only once; re-create the observer when the element\r\n    // is moved back into the document after a disconnect.\r\n    this._ensureAutoSizesObserver();\r\n  }\r\n\r\n  override firstUpdated(): void {\r\n    this._ensureAutoSizesObserver();\r\n  }\r\n\r\n  private _ensureAutoSizesObserver(): void {\r\n    if (!this.autoSizes) return;\r\n    if (!this._ro) {\r\n      this._ro = new ResizeObserver(this._updateSizes);\r\n      this._ro.observe(this);\r\n    }\r\n    this._updateSizes();\r\n  }\r\n\r\n  override updated(changed: PropertyValues<this>): void {\r\n    super.updated(changed);\r\n\r\n    if (changed.has(\"autoSizes\")) {\r\n      if (this.autoSizes) {\r\n        this._ensureAutoSizesObserver();\r\n      } else {\r\n        this._ro?.disconnect();\r\n        this._ro = undefined;\r\n        this._computedSizes = \"\";\r\n      }\r\n    }\r\n\r\n    if (!this._shouldResyncImageSource(changed)) return;\r\n    this._resyncImageSource(\r\n      changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined,\r\n    );\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._ro?.disconnect();\r\n    this._ro = undefined;\r\n    if (this._sizesRafId != null) {\r\n      cancelAnimationFrame(this._sizesRafId);\r\n      this._sizesRafId = null;\r\n    }\r\n  }\r\n\r\n  /** Browsers keep the resolved resource when only srcset/sizes attrs change on a live <img>. */\r\n  private _shouldResyncImageSource(changed: PropertyValues<this>): boolean {\r\n    // Lit's PropertyValues<this> excludes private reactive state from keyof this,\r\n    // although @state changes are present in the runtime map.\r\n    const allChanged = changed as unknown as Map<PropertyKey, unknown>;\r\n    if (!this.src?.trim() && !this.srcset?.trim()) return false;\r\n    if (changed.has(\"src\") && changed.get(\"src\") !== undefined) return true;\r\n    if (changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined) return true;\r\n    if (changed.has(\"sizes\") && changed.get(\"sizes\") !== undefined) return true;\r\n    if (\r\n      this.autoSizes &&\r\n      allChanged.has(\"_computedSizes\") &&\r\n      allChanged.get(\"_computedSizes\") !== undefined\r\n    ) {\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  private _resolvedSizesAttr(): string {\r\n    return this.autoSizes ? this._computedSizes : this.sizes || \"\";\r\n  }\r\n\r\n  /** `src` used on <img> — must stay in sync with `srcset` when the set changes. */\r\n  private _displaySrc(): string {\r\n    const explicit = this.src?.trim() ?? \"\";\r\n    const srcset = this.srcset?.trim() ?? \"\";\r\n    if (!explicit && !srcset) return \"\";\r\n    if (!srcset) return explicit;\r\n    return resolveImageFallbackSrc(explicit, srcset);\r\n  }\r\n\r\n  private _applyImgAttrs(img: HTMLImageElement, srcsetChanged: boolean): void {\r\n    const srcset = this.srcset?.trim() ?? \"\";\r\n    const sizesAttr = this._resolvedSizesAttr();\r\n    const src = this._displaySrc();\r\n\r\n    if (srcset) img.srcset = srcset;\r\n    else img.removeAttribute(\"srcset\");\r\n\r\n    if (sizesAttr) img.sizes = sizesAttr;\r\n    else img.removeAttribute(\"sizes\");\r\n\r\n    // When the candidate list changes, drop `src` first so the UA cannot keep the old resource.\r\n    if (srcsetChanged) img.removeAttribute(\"src\");\r\n    img.src = src;\r\n  }\r\n\r\n  private _resyncImageSource(srcsetChanged = false): void {\r\n    const img = this.renderRoot.querySelector(\"img\");\r\n    if (!(img instanceof HTMLImageElement)) return;\r\n\r\n    const replacement = img.cloneNode(false) as HTMLImageElement;\r\n    replacement.alt = this.alt;\r\n    replacement.loading = this.loading;\r\n    replacement.decoding = this.decoding;\r\n    const style = img.getAttribute(\"style\");\r\n    if (style) replacement.setAttribute(\"style\", style);\r\n    replacement.setAttribute(\"part\", \"img\");\r\n\r\n    this._applyImgAttrs(replacement, srcsetChanged);\r\n    img.replaceWith(replacement);\r\n  }\r\n\r\n  override render() {\r\n    const sizesAttr = this._resolvedSizesAttr();\r\n    const displaySrc = this._displaySrc();\r\n    const hasSrc = displaySrc !== \"\";\r\n\r\n    const styleVars = {\r\n      width: this.width,\r\n      height: this.height,\r\n      borderRadius: this.borderRadius,\r\n      boxShadow: this.boxShadow,\r\n      objectFit: this.objectFit,\r\n      objectPosition: this.objectPosition,\r\n      aspectRatio: this.aspectRatio ?? \"auto\",\r\n    };\r\n\r\n    if (!hasSrc) {\r\n      return html`\r\n        <div\r\n          class=\"placeholder\"\r\n          part=\"img\"\r\n          style=${styleMap(styleVars)}\r\n          aria-label=${this.alt}\r\n          role=\"img\"\r\n        ></div>\r\n      `;\r\n    }\r\n\r\n    return html`\r\n      <img\r\n        src=${displaySrc}\r\n        alt=${this.alt}\r\n        srcset=${this.srcset || nothing}\r\n        sizes=${sizesAttr || nothing}\r\n        loading=${this.loading}\r\n        decoding=${this.decoding}\r\n        style=${styleMap(styleVars)}\r\n        part=\"img\"\r\n      />\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyImage","LitElement","constructor","super","arguments","this","src","alt","width","height","aspectRatio","borderRadius","boxShadow","objectFit","objectPosition","srcset","sizes","autoSizes","_computedSizes","loading","decoding","_sizesRafId","_updateSizes","requestAnimationFrame","w","Math","ceil","getBoundingClientRect","connectedCallback","_ensureAutoSizesObserver","firstUpdated","_ro","ResizeObserver","observe","updated","changed","has","disconnect","_shouldResyncImageSource","_resyncImageSource","get","disconnectedCallback","cancelAnimationFrame","allChanged","trim","_resolvedSizesAttr","_displaySrc","explicit","resolveImageFallbackSrc","_applyImgAttrs","img","srcsetChanged","sizesAttr","removeAttribute","renderRoot","querySelector","HTMLImageElement","replacement","cloneNode","style","getAttribute","setAttribute","replaceWith","render","displaySrc","hasSrc","styleVars","html","nothing","styleMap","styles","css","__decorateClass","property","type","String","prototype","Boolean","state","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-image.js","sources":["../../src/sky-image/sky-image.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { resolveImageFallbackSrc } from './srcset-utils.js';\n\nexport type SkyImageLoading = 'lazy' | 'eager';\nexport type SkyImageDecoding = 'async' | 'sync' | 'auto';\n\n/**\n * @element sky-image\n *\n * @summary Responsive image component with style controls, `srcset`, and optional auto `sizes`.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/image\n *\n * @slot - No slots are exposed; image content is rendered internally.\n * @property {string} src - Primary image source URL.\n * @property {string} alt - Alternative text for accessibility.\n * @property {string} width - CSS width for the rendered image.\n * @property {string} height - CSS height for the rendered image.\n * @property {string | null} aspectRatio - CSS `aspect-ratio` value.\n * @property {string} borderRadius - CSS border radius.\n * @property {string} boxShadow - CSS box shadow.\n * @property {string} objectFit - CSS object-fit value.\n * @property {string} objectPosition - CSS object-position value.\n * @property {string} srcset - Responsive source set string.\n * @property {string} sizes - Responsive sizes string.\n * @property {boolean} autoSizes - Computes `sizes` from host width when true.\n * @property {SkyImageLoading} loading - Native loading hint.\n * @property {SkyImageDecoding} decoding - Native decoding hint.\n *\n * @csspart img - The underlying `<img>` element.\n *\n * @Behavior\n * - Renders a fallback visual placeholder when `src` is empty\n * - Supports automatic `sizes` updates using ResizeObserver\n * - Forwards native image loading and decoding hints\n *\n * @example\n * ```html\n * <sky-image\n *   src=\"/images/photo-1280.jpg\"\n *   srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *   sizes=\"(max-width: 768px) 100vw, 50vw\"\n *   alt=\"Responsive photo\"\n *   width=\"100%\"\n *   aspect-ratio=\"4/3\"\n *   border-radius=\"8px\"\n *   loading=\"lazy\"\n * ></sky-image>\n * ```\n * ```vue\n * <template>\n *   <sky-image\n *     src=\"/images/photo-1280.jpg\"\n *     srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *     sizes=\"(max-width: 768px) 100vw, 50vw\"\n *     alt=\"Responsive photo\"\n *     width=\"100%\"\n *     aspect-ratio=\"4/3\"\n *     border-radius=\"8px\"\n *   ></sky-image>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-image\n *       src=\"/images/photo-1280.jpg\"\n *       srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *       sizes=\"(max-width: 768px) 100vw, 50vw\"\n *       alt=\"Responsive photo\"\n *       width=\"100%\"\n *       aspect-ratio=\"4/3\"\n *       border-radius=\"8px\"\n *     ></sky-image>\n *   );\n * }\n * ```\n */\n@customElement('sky-image')\nexport class SkyImage extends LitElement {\n  @property({ type: String }) src = '';\n  @property({ type: String }) alt = 'Image';\n  @property({ type: String }) width = 'auto';\n  @property({ type: String }) height = 'auto';\n  @property({ type: String }) aspectRatio: string | null = null;\n  @property({ type: String }) borderRadius = '0';\n  @property({ type: String }) boxShadow = 'none';\n  @property({ type: String }) objectFit = 'cover';\n  @property({ type: String }) objectPosition = 'center';\n\n  @property({ type: String }) srcset = '';\n  @property({ type: String }) sizes = '';\n\n  @property({ type: Boolean }) autoSizes = false;\n  @state() private _computedSizes = '';\n\n  @property({ type: String }) loading: SkyImageLoading = 'lazy';\n  @property({ type: String }) decoding: SkyImageDecoding = 'async';\n\n  static override styles = css`\n    :host {\n      display: inline-block;\n      max-width: 100%;\n    }\n\n    img,\n    .placeholder {\n      display: block;\n      max-width: 100%;\n    }\n\n    .placeholder {\n      background: var(--sky-hover-tertiary);\n    }\n  `;\n\n  private _ro?: ResizeObserver;\n  private _sizesRafId: number | null = null;\n  private _updateSizes = () => {\n    if (this._sizesRafId != null) return;\n    this._sizesRafId = requestAnimationFrame(() => {\n      this._sizesRafId = null;\n      const w = Math.ceil(this.getBoundingClientRect().width);\n      if (w > 0) this._computedSizes = `${w}px`;\n    });\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // firstUpdated runs only once; re-create the observer when the element\n    // is moved back into the document after a disconnect.\n    this._ensureAutoSizesObserver();\n  }\n\n  override firstUpdated(): void {\n    this._ensureAutoSizesObserver();\n  }\n\n  private _ensureAutoSizesObserver(): void {\n    if (!this.autoSizes) return;\n    if (!this._ro) {\n      this._ro = new ResizeObserver(this._updateSizes);\n      this._ro.observe(this);\n    }\n    this._updateSizes();\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n\n    if (changed.has('autoSizes')) {\n      if (this.autoSizes) {\n        this._ensureAutoSizesObserver();\n      } else {\n        this._ro?.disconnect();\n        this._ro = undefined;\n        this._computedSizes = '';\n      }\n    }\n\n    if (!this._shouldResyncImageSource(changed)) return;\n    this._resyncImageSource(\n      changed.has('srcset') && changed.get('srcset') !== undefined\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = undefined;\n    if (this._sizesRafId != null) {\n      cancelAnimationFrame(this._sizesRafId);\n      this._sizesRafId = null;\n    }\n  }\n\n  /** Browsers keep the resolved resource when only srcset/sizes attrs change on a live <img>. */\n  private _shouldResyncImageSource(changed: PropertyValues<this>): boolean {\n    // Lit's PropertyValues<this> excludes private reactive state from keyof this,\n    // although @state changes are present in the runtime map.\n    const allChanged = changed as unknown as Map<PropertyKey, unknown>;\n    if (!this.src?.trim() && !this.srcset?.trim()) return false;\n    if (changed.has('src') && changed.get('src') !== undefined) return true;\n    if (changed.has('srcset') && changed.get('srcset') !== undefined)\n      return true;\n    if (changed.has('sizes') && changed.get('sizes') !== undefined) return true;\n    if (\n      this.autoSizes &&\n      allChanged.has('_computedSizes') &&\n      allChanged.get('_computedSizes') !== undefined\n    ) {\n      return true;\n    }\n    return false;\n  }\n\n  private _resolvedSizesAttr(): string {\n    return this.autoSizes ? this._computedSizes : this.sizes || '';\n  }\n\n  /** `src` used on <img> — must stay in sync with `srcset` when the set changes. */\n  private _displaySrc(): string {\n    const explicit = this.src?.trim() ?? '';\n    const srcset = this.srcset?.trim() ?? '';\n    if (!explicit && !srcset) return '';\n    if (!srcset) return explicit;\n    return resolveImageFallbackSrc(explicit, srcset);\n  }\n\n  private _applyImgAttrs(img: HTMLImageElement, srcsetChanged: boolean): void {\n    const srcset = this.srcset?.trim() ?? '';\n    const sizesAttr = this._resolvedSizesAttr();\n    const src = this._displaySrc();\n\n    if (srcset) img.srcset = srcset;\n    else img.removeAttribute('srcset');\n\n    if (sizesAttr) img.sizes = sizesAttr;\n    else img.removeAttribute('sizes');\n\n    // When the candidate list changes, drop `src` first so the UA cannot keep the old resource.\n    if (srcsetChanged) img.removeAttribute('src');\n    img.src = src;\n  }\n\n  private _resyncImageSource(srcsetChanged = false): void {\n    const img = this.renderRoot.querySelector('img');\n    if (!(img instanceof HTMLImageElement)) return;\n\n    const replacement = img.cloneNode(false) as HTMLImageElement;\n    replacement.alt = this.alt;\n    replacement.loading = this.loading;\n    replacement.decoding = this.decoding;\n    const style = img.getAttribute('style');\n    if (style) replacement.setAttribute('style', style);\n    replacement.setAttribute('part', 'img');\n\n    this._applyImgAttrs(replacement, srcsetChanged);\n    img.replaceWith(replacement);\n  }\n\n  override render() {\n    const sizesAttr = this._resolvedSizesAttr();\n    const displaySrc = this._displaySrc();\n    const hasSrc = displaySrc !== '';\n\n    const styleVars = {\n      width: this.width,\n      height: this.height,\n      borderRadius: this.borderRadius,\n      boxShadow: this.boxShadow,\n      objectFit: this.objectFit,\n      objectPosition: this.objectPosition,\n      aspectRatio: this.aspectRatio ?? 'auto',\n    };\n\n    if (!hasSrc) {\n      return html`\n        <div\n          class=\"placeholder\"\n          part=\"img\"\n          style=${styleMap(styleVars)}\n          aria-label=${this.alt}\n          role=\"img\"\n        ></div>\n      `;\n    }\n\n    return html`\n      <img\n        src=${displaySrc}\n        alt=${this.alt}\n        srcset=${this.srcset || nothing}\n        sizes=${sizesAttr || nothing}\n        loading=${this.loading}\n        decoding=${this.decoding}\n        style=${styleMap(styleVars)}\n        part=\"img\"\n      />\n    `;\n  }\n}\n"],"names":["SkyImage","LitElement","constructor","super","arguments","this","src","alt","width","height","aspectRatio","borderRadius","boxShadow","objectFit","objectPosition","srcset","sizes","autoSizes","_computedSizes","loading","decoding","_sizesRafId","_updateSizes","requestAnimationFrame","w","Math","ceil","getBoundingClientRect","connectedCallback","_ensureAutoSizesObserver","firstUpdated","_ro","ResizeObserver","observe","updated","changed","has","disconnect","_shouldResyncImageSource","_resyncImageSource","get","disconnectedCallback","cancelAnimationFrame","allChanged","trim","_resolvedSizesAttr","_displaySrc","explicit","resolveImageFallbackSrc","_applyImgAttrs","img","srcsetChanged","sizesAttr","removeAttribute","renderRoot","querySelector","HTMLImageElement","replacement","cloneNode","style","getAttribute","setAttribute","replaceWith","render","displaySrc","hasSrc","styleVars","html","nothing","styleMap","styles","css","__decorateClass","property","type","String","prototype","Boolean","state","customElement"],"mappings":"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"}

package/dist/sky-image/srcset-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"srcset-utils.js","sources":["../../src/sky-image/srcset-utils.ts"],"sourcesContent":["export type SrcsetCandidate = {\r\n  url: string;\r\n  width?: number;\r\n  density?: number;\r\n};\r\n\r\n/** Parse a comma-separated `srcset` attribute into URL + descriptor pairs. */\r\nexport function parseSrcset(srcset: string): SrcsetCandidate[] {\r\n  const trimmed = srcset.trim();\r\n  if (!trimmed) return [];\r\n\r\n  const out: SrcsetCandidate[] = [];\r\n  for (const piece of trimmed.split(\",\")) {\r\n    const parts = piece.trim().split(/\\s+/).filter(Boolean);\r\n    const url = parts[0];\r\n    if (!url) continue;\r\n\r\n    const descriptor = parts[1];\r\n    if (!descriptor) {\r\n      out.push({ url });\r\n      continue;\r\n    }\r\n    if (descriptor.endsWith(\"w\")) {\r\n      const width = Number.parseInt(descriptor.slice(0, -1), 10);\r\n      out.push({ url, width: Number.isFinite(width) ? width : undefined });\r\n      continue;\r\n    }\r\n    if (descriptor.endsWith(\"x\")) {\r\n      const density = Number.parseFloat(descriptor.slice(0, -1));\r\n      out.push({ url, density: Number.isFinite(density) ? density : undefined });\r\n      continue;\r\n    }\r\n    out.push({ url });\r\n  }\r\n  return out;\r\n}\r\n\r\n/** Pick the `src` fallback the UA should use for a given `srcset`. */\r\nexport function resolveImageFallbackSrc(src: string, srcset: string): string {\r\n  const explicit = src.trim();\r\n  const candidates = parseSrcset(srcset);\r\n  if (!candidates.length) return explicit;\r\n\r\n  if (explicit && candidates.some((c) => c.url === explicit)) {\r\n    return explicit;\r\n  }\r\n\r\n  const widthCandidates = candidates.filter(\r\n    (c): c is SrcsetCandidate & { width: number } =>\r\n      typeof c.width === \"number\" && c.width > 0,\r\n  );\r\n  if (widthCandidates.length) {\r\n    return widthCandidates.reduce((best, c) =>\r\n      c.width >= best.width ? c : best,\r\n    ).url;\r\n  }\r\n\r\n  const densityCandidates = candidates.filter(\r\n    (c): c is SrcsetCandidate & { density: number } =>\r\n      typeof c.density === \"number\" && c.density > 0,\r\n  );\r\n  if (densityCandidates.length) {\r\n    return densityCandidates.reduce((best, c) =>\r\n      c.density >= best.density ? c : best,\r\n    ).url;\r\n  }\r\n\r\n  return candidates[0]?.url ?? explicit;\r\n}\r\n"],"names":["parseSrcset","srcset","trimmed","trim","out","piece","split","parts","filter","Boolean","url","descriptor","endsWith","width","Number","parseInt","slice","push","isFinite","density","parseFloat","resolveImageFallbackSrc","src","explicit","candidates","length","some","c","widthCandidates","reduce","best","densityCandidates"],"mappings":"AAOO,SAASA,EAAYC,GAC1B,MAAMC,EAAUD,EAAOE,OACvB,IAAKD,EAAS,MAAO,GAErB,MAAME,EAAyB,GAC/B,IAAA,MAAWC,KAASH,EAAQI,MAAM,KAAM,CACtC,MAAMC,EAAQF,EAAMF,OAAOG,MAAM,OAAOE,OAAOC,SACzCC,EAAMH,EAAM,GAClB,IAAKG,EAAK,SAEV,MAAMC,EAAaJ,EAAM,GACzB,GAAKI,EAAL,CAIA,GAAIA,EAAWC,SAAS,KAAM,CAC5B,MAAMC,EAAQC,OAAOC,SAASJ,EAAWK,MAAM,MAAQ,IACvDZ,EAAIa,KAAK,CAAEP,MAAKG,MAAOC,OAAOI,SAASL,GAASA,OAAQ,IACxD,QACF,CACA,GAAIF,EAAWC,SAAS,KAAM,CAC5B,MAAMO,EAAUL,OAAOM,WAAWT,EAAWK,MAAM,GAAG,IACtDZ,EAAIa,KAAK,CAAEP,MAAKS,QAASL,OAAOI,SAASC,GAAWA,OAAU,IAC9D,QACF,CACAf,EAAIa,KAAK,CAAEP,OAXX,MAFEN,EAAIa,KAAK,CAAEP,OAcf,CACA,OAAON,CACT,CAGO,SAASiB,EAAwBC,EAAarB,GACnD,MAAMsB,EAAWD,EAAInB,OACfqB,EAAaxB,EAAYC,GAC/B,IAAKuB,EAAWC,OAAQ,OAAOF,EAE/B,GAAIA,GAAYC,EAAWE,KAAMC,GAAMA,EAAEjB,MAAQa,GAC/C,OAAOA,EAGT,MAAMK,EAAkBJ,EAAWhB,OAChCmB,GACoB,iBAAZA,EAAEd,OAAsBc,EAAEd,MAAQ,GAE7C,GAAIe,EAAgBH,OAClB,OAAOG,EAAgBC,OAAO,CAACC,EAAMH,IACnCA,EAAEd,OAASiB,EAAKjB,MAAQc,EAAIG,GAC5BpB,IAGJ,MAAMqB,EAAoBP,EAAWhB,OAClCmB,GACsB,iBAAdA,EAAER,SAAwBQ,EAAER,QAAU,GAEjD,OAAIY,EAAkBN,OACbM,EAAkBF,OAAO,CAACC,EAAMH,IACrCA,EAAER,SAAWW,EAAKX,QAAUQ,EAAIG,GAChCpB,IAGGc,EAAW,IAAId,KAAOa,CAC/B"}
+{"version":3,"file":"srcset-utils.js","sources":["../../src/sky-image/srcset-utils.ts"],"sourcesContent":["export type SrcsetCandidate = {\n  url: string;\n  width?: number;\n  density?: number;\n};\n\n/** Parse a comma-separated `srcset` attribute into URL + descriptor pairs. */\nexport function parseSrcset(srcset: string): SrcsetCandidate[] {\n  const trimmed = srcset.trim();\n  if (!trimmed) return [];\n\n  const out: SrcsetCandidate[] = [];\n  for (const piece of trimmed.split(',')) {\n    const parts = piece.trim().split(/\\s+/).filter(Boolean);\n    const url = parts[0];\n    if (!url) continue;\n\n    const descriptor = parts[1];\n    if (!descriptor) {\n      out.push({ url });\n      continue;\n    }\n    if (descriptor.endsWith('w')) {\n      const width = Number.parseInt(descriptor.slice(0, -1), 10);\n      out.push({ url, width: Number.isFinite(width) ? width : undefined });\n      continue;\n    }\n    if (descriptor.endsWith('x')) {\n      const density = Number.parseFloat(descriptor.slice(0, -1));\n      out.push({\n        url,\n        density: Number.isFinite(density) ? density : undefined,\n      });\n      continue;\n    }\n    out.push({ url });\n  }\n  return out;\n}\n\n/** Pick the `src` fallback the UA should use for a given `srcset`. */\nexport function resolveImageFallbackSrc(src: string, srcset: string): string {\n  const explicit = src.trim();\n  const candidates = parseSrcset(srcset);\n  if (!candidates.length) return explicit;\n\n  if (explicit && candidates.some((c) => c.url === explicit)) {\n    return explicit;\n  }\n\n  const widthCandidates = candidates.filter(\n    (c): c is SrcsetCandidate & { width: number } =>\n      typeof c.width === 'number' && c.width > 0\n  );\n  if (widthCandidates.length) {\n    return widthCandidates.reduce((best, c) =>\n      c.width >= best.width ? c : best\n    ).url;\n  }\n\n  const densityCandidates = candidates.filter(\n    (c): c is SrcsetCandidate & { density: number } =>\n      typeof c.density === 'number' && c.density > 0\n  );\n  if (densityCandidates.length) {\n    return densityCandidates.reduce((best, c) =>\n      c.density >= best.density ? c : best\n    ).url;\n  }\n\n  return candidates[0]?.url ?? explicit;\n}\n"],"names":["parseSrcset","srcset","trimmed","trim","out","piece","split","parts","filter","Boolean","url","descriptor","endsWith","width","Number","parseInt","slice","push","isFinite","density","parseFloat","resolveImageFallbackSrc","src","explicit","candidates","length","some","c","widthCandidates","reduce","best","densityCandidates"],"mappings":"AAOO,SAASA,EAAYC,GAC1B,MAAMC,EAAUD,EAAOE,OACvB,IAAKD,EAAS,MAAO,GAErB,MAAME,EAAyB,GAC/B,IAAA,MAAWC,KAASH,EAAQI,MAAM,KAAM,CACtC,MAAMC,EAAQF,EAAMF,OAAOG,MAAM,OAAOE,OAAOC,SACzCC,EAAMH,EAAM,GAClB,IAAKG,EAAK,SAEV,MAAMC,EAAaJ,EAAM,GACzB,GAAKI,EAAL,CAIA,GAAIA,EAAWC,SAAS,KAAM,CAC5B,MAAMC,EAAQC,OAAOC,SAASJ,EAAWK,MAAM,MAAQ,IACvDZ,EAAIa,KAAK,CAAEP,MAAKG,MAAOC,OAAOI,SAASL,GAASA,OAAQ,IACxD,QACF,CACA,GAAIF,EAAWC,SAAS,KAAM,CAC5B,MAAMO,EAAUL,OAAOM,WAAWT,EAAWK,MAAM,GAAG,IACtDZ,EAAIa,KAAK,CACPP,MACAS,QAASL,OAAOI,SAASC,GAAWA,OAAU,IAEhD,QACF,CACAf,EAAIa,KAAK,CAAEP,OAdX,MAFEN,EAAIa,KAAK,CAAEP,OAiBf,CACA,OAAON,CACT,CAGO,SAASiB,EAAwBC,EAAarB,GACnD,MAAMsB,EAAWD,EAAInB,OACfqB,EAAaxB,EAAYC,GAC/B,IAAKuB,EAAWC,OAAQ,OAAOF,EAE/B,GAAIA,GAAYC,EAAWE,KAAMC,GAAMA,EAAEjB,MAAQa,GAC/C,OAAOA,EAGT,MAAMK,EAAkBJ,EAAWhB,OAChCmB,GACoB,iBAAZA,EAAEd,OAAsBc,EAAEd,MAAQ,GAE7C,GAAIe,EAAgBH,OAClB,OAAOG,EAAgBC,OAAO,CAACC,EAAMH,IACnCA,EAAEd,OAASiB,EAAKjB,MAAQc,EAAIG,GAC5BpB,IAGJ,MAAMqB,EAAoBP,EAAWhB,OAClCmB,GACsB,iBAAdA,EAAER,SAAwBQ,EAAER,QAAU,GAEjD,OAAIY,EAAkBN,OACbM,EAAkBF,OAAO,CAACC,EAAMH,IACrCA,EAAER,SAAWW,EAAKX,QAAUQ,EAAIG,GAChCpB,IAGGc,EAAW,IAAId,KAAOa,CAC/B"}