@sky.ui/core 0.0.41 → 0.0.43

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

@@ -1 +1 @@
-{"version":3,"file":"sky-flexcol.js","sources":["../../src/sky-flexcol/sky-flexcol.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\n\r\nexport type SkyFlexcolAlignSelf =\r\n  | \"auto\"\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"stretch\"\r\n  | \"baseline\";\r\n\r\n/**\r\n * @element sky-flexcol\r\n *\r\n * @summary Flex column item for `sky-flexbox` layouts with responsive span controls.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/flexbox\r\n *\r\n * @slot - Default slot for column content.\r\n *\r\n * @property {number} span - Base number of columns to span.\r\n * @property {number | undefined} spanLg - Span at large breakpoints.\r\n * @property {number | undefined} spanMd - Span at medium breakpoints.\r\n * @property {number | undefined} spanSm - Span at small breakpoints.\r\n * @property {number | undefined} spanXs - Span at extra-small breakpoints.\r\n * @property {number} grow - Flex grow factor.\r\n * @property {number} shrink - Flex shrink factor.\r\n * @property {string | null} basis - Flex basis override.\r\n * @property {number | undefined} order - Flex order override.\r\n * @property {SkyFlexcolAlignSelf | undefined} alignSelf - Cross-axis alignment override.\r\n * @method refreshStyles Re-applies CSS custom properties from current values.\r\n * @method getSpan Returns current base span value.\r\n * @method setSpan Updates base span value and refreshes styles.\r\n *\r\n * @csspart col - The flex item wrapper.\r\n *\r\n * @Behavior\r\n * - Designed to work within `<sky-flexbox>` containers\r\n * - Supports responsive column spans with breakpoint attributes\r\n * - Exposes all standard flex item properties\r\n * - Automatically syncs properties to CSS custom properties\r\n *\r\n * - `span`: Base span across columns (1 to container's column count)\r\n * - `span-lg`: Span at large screens (≤1200px)\r\n * - `span-md`: Span at medium screens (≤992px)\r\n * - `span-sm`: Span at small screens (≤768px)\r\n * - `span-xs`: Span at extra-small screens (≤576px)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\">\r\n *     <div class=\"card\">Main Content</div>\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\">\r\n *     <div class=\"card\">Sidebar</div>\r\n *   </sky-flexcol>\r\n * </sky-flexbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-flexbox col=\"12\" gap=\"16px\">\r\n *     <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *     <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *   </sky-flexbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-flexbox col=\"12\" gap=\"16px\">\r\n *       <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *       <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *     </sky-flexbox>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-flexcol\")\r\nexport class SkyFlexcol extends LitElement {\r\n  /**\r\n   * Number of columns to span.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  span = 1;\r\n\r\n  /**\r\n   * Columns spanned at large screens (≤1200px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanLg?: number;\r\n\r\n  /**\r\n   * Columns spanned at medium screens (≤992px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanMd?: number;\r\n\r\n  /**\r\n   * Columns spanned at small screens (≤768px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanSm?: number;\r\n\r\n  /**\r\n   * Columns spanned at extra-small screens (≤576px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanXs?: number;\r\n\r\n  /**\r\n   * Flex grow factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  grow = 0;\r\n\r\n  /**\r\n   * Flex shrink factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  shrink = 0;\r\n\r\n  /**\r\n   * Flex basis (e.g., `\"200px\"` or `\"auto\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  basis: string | null = null;\r\n\r\n  /**\r\n   * Flex order relative to siblings.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  order?: number;\r\n\r\n  /**\r\n   * Self alignment override.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignSelf?: SkyFlexcolAlignSelf;\r\n\r\nstatic override styles = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      /* These are read by the container’s ::slotted(*) rules */\r\n      flex-grow: var(--col-grow, 0);\r\n      flex-shrink: var(--col-shrink, 0);\r\n      order: var(--col-order, 0);\r\n      align-self: var(--col-align-self, auto);\r\n      /* If you set basis, it will override the basis calc coming from container's ::slotted(*) */\r\n      flex-basis: var(--col-basis, auto);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"spanLg\") ||\r\n      changed.has(\"spanMd\") ||\r\n      changed.has(\"spanSm\") ||\r\n      changed.has(\"spanXs\") ||\r\n      changed.has(\"grow\") ||\r\n      changed.has(\"shrink\") ||\r\n      changed.has(\"basis\") ||\r\n      changed.has(\"order\") ||\r\n      changed.has(\"alignSelf\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs component properties to CSS custom properties.\r\n   * @private\r\n   */\r\n  private syncVars() {\r\n    // Span properties\r\n    this.style.setProperty(\"--span\", String(this.span));\r\n    if (this.spanLg) this.style.setProperty(\"--span-lg\", String(this.spanLg));\r\n    if (this.spanMd) this.style.setProperty(\"--span-md\", String(this.spanMd));\r\n    if (this.spanSm) this.style.setProperty(\"--span-sm\", String(this.spanSm));\r\n    if (this.spanXs) this.style.setProperty(\"--span-xs\", String(this.spanXs));\r\n\r\n    // Flex properties\r\n    this.style.setProperty(\"--col-grow\", String(this.grow));\r\n    this.style.setProperty(\"--col-shrink\", String(this.shrink));\r\n\r\n    if (this.order != null) {\r\n      this.style.setProperty(\"--col-order\", String(this.order));\r\n    } else {\r\n      this.style.removeProperty(\"--col-order\");\r\n    }\r\n\r\n    if (this.alignSelf) {\r\n      this.style.setProperty(\"--col-align-self\", this.alignSelf);\r\n    } else {\r\n      this.style.removeProperty(\"--col-align-self\");\r\n    }\r\n\r\n    if (this.basis) {\r\n      this.style.setProperty(\"--col-basis\", this.basis);\r\n    } else {\r\n      this.style.removeProperty(\"--col-basis\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Forces resynchronization of CSS custom properties.\r\n   * Useful when properties are changed programmatically.\r\n   * @public\r\n   */\r\n  public refreshStyles() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /**\r\n   * Gets the current span value.\r\n   * @returns Current span value\r\n   * @public\r\n   */\r\n  public getSpan(): number {\r\n    return this.span;\r\n  }\r\n\r\n  /**\r\n   * Sets the span value and updates styles.\r\n   * @param value - New span value\r\n   * @public\r\n   */\r\n  public setSpan(value: number): void {\r\n    this.span = value;\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    return html` <slot part=\"col\"></slot> `;\r\n  }\r\n}\r\n"],"names":["SkyFlexcol","LitElement","constructor","super","arguments","this","span","grow","shrink","basis","firstUpdated","syncVars","updated","changed","has","style","setProperty","String","spanLg","spanMd","spanSm","spanXs","order","removeProperty","alignSelf","refreshStyles","getSpan","setSpan","value","render","html","styles","css","__decorateClass","property","type","Number","prototype","customElement"],"mappings":"oTAkFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,KAAO,EAmCPD,KAAAE,KAAO,EAOPF,KAAAG,OAAS,EAOTH,KAAAI,MAAuB,IAAA,CA+Bd,YAAAC,GACPL,KAAKM,UACP,CAGS,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,eAEZT,KAAKM,UAET,CAMQ,QAAAA,GAENN,KAAKU,MAAMC,YAAY,SAAUC,OAAOZ,KAAKC,OACzCD,KAAKa,QAAQb,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKa,SAC7Db,KAAKc,QAAQd,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKc,SAC7Dd,KAAKe,QAAQf,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKe,SAC7Df,KAAKgB,QAAQhB,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKgB,SAGjEhB,KAAKU,MAAMC,YAAY,aAAcC,OAAOZ,KAAKE,OACjDF,KAAKU,MAAMC,YAAY,eAAgBC,OAAOZ,KAAKG,SAEjC,MAAdH,KAAKiB,MACPjB,KAAKU,MAAMC,YAAY,cAAeC,OAAOZ,KAAKiB,QAElDjB,KAAKU,MAAMQ,eAAe,eAGxBlB,KAAKmB,UACPnB,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKmB,WAEhDnB,KAAKU,MAAMQ,eAAe,oBAGxBlB,KAAKI,MACPJ,KAAKU,MAAMC,YAAY,cAAeX,KAAKI,OAE3CJ,KAAKU,MAAMQ,eAAe,cAE9B,CAOO,aAAAE,GACLpB,KAAKM,UACP,CAOO,OAAAe,GACL,OAAOrB,KAAKC,IACd,CAOO,OAAAqB,CAAQC,GACbvB,KAAKC,KAAOsB,EACZvB,KAAKM,UACP,CAGS,MAAAkB,GACP,OAAOC,CAAA,4BACT,GA9KW9B,EAuEG+B,OAASC,CAAA;;;;;;;;;;;;IAjEvBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPpC,EAMXqC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPpC,EAaXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPpC,EAoBXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPpC,EA2BXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAjCPpC,EAkCXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPpC,EAyCXqC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA/CPpC,EAgDXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UAtDPjB,EAuDXqC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA7DPpC,EA8DXqC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UApEPjB,EAqEXqC,UAAA,YAAA,GArEWrC,EAANiC,EAAA,CADNK,EAAc,gBACFtC"}
+{"version":3,"file":"sky-flexcol.js","sources":["../../src/sky-flexcol/sky-flexcol.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyFlexcolAlignSelf =\r\n  | \"auto\"\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"stretch\"\r\n  | \"baseline\";\r\n\r\n/**\r\n * @element sky-flexcol\r\n *\r\n * @summary Flex column item for `sky-flexbox` layouts with responsive span controls.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/flexbox\r\n *\r\n * @slot - Default slot for column content.\r\n *\r\n * @property {number} span - Base number of columns to span.\r\n * @property {number | undefined} spanLg - Span at large breakpoints.\r\n * @property {number | undefined} spanMd - Span at medium breakpoints.\r\n * @property {number | undefined} spanSm - Span at small breakpoints.\r\n * @property {number | undefined} spanXs - Span at extra-small breakpoints.\r\n * @property {number} grow - Flex grow factor.\r\n * @property {number} shrink - Flex shrink factor.\r\n * @property {string | null} basis - Flex basis override.\r\n * @property {number | undefined} order - Flex order override.\r\n * @property {SkyFlexcolAlignSelf | undefined} alignSelf - Cross-axis alignment override.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method refreshStyles Re-applies CSS custom properties from current values.\r\n * @method getSpan Returns current base span value.\r\n * @method setSpan Updates base span value and refreshes styles.\r\n *\r\n * @csspart col - The flex item wrapper.\r\n *\r\n * @Behavior\r\n * - Designed to work within `<sky-flexbox>` containers\r\n * - Supports responsive column spans with breakpoint attributes\r\n * - Exposes all standard flex item properties\r\n * - Automatically syncs properties to CSS custom properties\r\n *\r\n * - `span`: Base span across columns (1 to container's column count)\r\n * - `span-lg`: Span at large screens (≤1200px)\r\n * - `span-md`: Span at medium screens (≤992px)\r\n * - `span-sm`: Span at small screens (≤768px)\r\n * - `span-xs`: Span at extra-small screens (≤576px)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\">\r\n *     <div class=\"card\">Main Content</div>\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\">\r\n *     <div class=\"card\">Sidebar</div>\r\n *   </sky-flexcol>\r\n * </sky-flexbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-flexbox col=\"12\" gap=\"16px\">\r\n *     <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *     <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *   </sky-flexbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-flexbox col=\"12\" gap=\"16px\">\r\n *       <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *       <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *     </sky-flexbox>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-flexcol\")\r\nexport class SkyFlexcol extends LitElement {\r\n  /**\r\n   * Number of columns to span.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  span = 1;\r\n\r\n  /**\r\n   * Columns spanned at large screens (≤1200px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanLg?: number;\r\n\r\n  /**\r\n   * Columns spanned at medium screens (≤992px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanMd?: number;\r\n\r\n  /**\r\n   * Columns spanned at small screens (≤768px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanSm?: number;\r\n\r\n  /**\r\n   * Columns spanned at extra-small screens (≤576px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanXs?: number;\r\n\r\n  /**\r\n   * Flex grow factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  grow = 0;\r\n\r\n  /**\r\n   * Flex shrink factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  shrink = 0;\r\n\r\n  /**\r\n   * Flex basis (e.g., `\"200px\"` or `\"auto\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  basis: string | null = null;\r\n\r\n  /**\r\n   * Flex order relative to siblings.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  order?: number;\r\n\r\n  /**\r\n   * Self alignment override.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignSelf?: SkyFlexcolAlignSelf;\r\n\r\nstatic override styles = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      /* These are read by the container’s ::slotted(*) rules */\r\n      flex-grow: var(--col-grow, 0);\r\n      flex-shrink: var(--col-shrink, 0);\r\n      order: var(--col-order, 0);\r\n      align-self: var(--col-align-self, auto);\r\n      /* If you set basis, it will override the basis calc coming from container's ::slotted(*) */\r\n      flex-basis: var(--col-basis, auto);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"spanLg\") ||\r\n      changed.has(\"spanMd\") ||\r\n      changed.has(\"spanSm\") ||\r\n      changed.has(\"spanXs\") ||\r\n      changed.has(\"grow\") ||\r\n      changed.has(\"shrink\") ||\r\n      changed.has(\"basis\") ||\r\n      changed.has(\"order\") ||\r\n      changed.has(\"alignSelf\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs component properties to CSS custom properties.\r\n   * @private\r\n   */\r\n  private syncVars() {\r\n    // Span properties\r\n    this.style.setProperty(\"--span\", String(this.span));\r\n    if (this.spanLg) this.style.setProperty(\"--span-lg\", String(this.spanLg));\r\n    if (this.spanMd) this.style.setProperty(\"--span-md\", String(this.spanMd));\r\n    if (this.spanSm) this.style.setProperty(\"--span-sm\", String(this.spanSm));\r\n    if (this.spanXs) this.style.setProperty(\"--span-xs\", String(this.spanXs));\r\n\r\n    // Flex properties\r\n    this.style.setProperty(\"--col-grow\", String(this.grow));\r\n    this.style.setProperty(\"--col-shrink\", String(this.shrink));\r\n\r\n    if (this.order != null) {\r\n      this.style.setProperty(\"--col-order\", String(this.order));\r\n    } else {\r\n      this.style.removeProperty(\"--col-order\");\r\n    }\r\n\r\n    if (this.alignSelf) {\r\n      this.style.setProperty(\"--col-align-self\", this.alignSelf);\r\n    } else {\r\n      this.style.removeProperty(\"--col-align-self\");\r\n    }\r\n\r\n    if (this.basis) {\r\n      this.style.setProperty(\"--col-basis\", this.basis);\r\n    } else {\r\n      this.style.removeProperty(\"--col-basis\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Forces resynchronization of CSS custom properties.\r\n   * Useful when properties are changed programmatically.\r\n   * @public\r\n   */\r\n  public refreshStyles() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /**\r\n   * Gets the current span value.\r\n   * @returns Current span value\r\n   * @public\r\n   */\r\n  public getSpan(): number {\r\n    return this.span;\r\n  }\r\n\r\n  /**\r\n   * Sets the span value and updates styles.\r\n   * @param value - New span value\r\n   * @public\r\n   */\r\n  public setSpan(value: number): void {\r\n    this.span = value;\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    return html` <slot part=\"col\"></slot> `;\r\n  }\r\n}\r\n"],"names":["SkyFlexcol","LitElement","constructor","super","arguments","this","span","grow","shrink","basis","preset","_presets","PresetController","firstUpdated","syncVars","updated","changed","has","style","setProperty","String","spanLg","spanMd","spanSm","spanXs","order","removeProperty","alignSelf","refreshStyles","getSpan","setSpan","value","render","html","styles","css","__decorateClass","property","type","Number","prototype","reflect","customElement"],"mappings":"kYAoFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,KAAO,EAmCPD,KAAAE,KAAO,EAOPF,KAAAG,OAAS,EAOTH,KAAAI,MAAuB,KAiCoBJ,KAAAK,OAAS,GAEpDL,KAAQM,SAAW,IAAIC,EAAiBP,KAAI,CAEnC,YAAAQ,GACPR,KAAKS,UACP,CAGS,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,eAEZZ,KAAKS,UAET,CAMQ,QAAAA,GAENT,KAAKa,MAAMC,YAAY,SAAUC,OAAOf,KAAKC,OACzCD,KAAKgB,QAAQhB,KAAKa,MAAMC,YAAY,YAAaC,OAAOf,KAAKgB,SAC7DhB,KAAKiB,QAAQjB,KAAKa,MAAMC,YAAY,YAAaC,OAAOf,KAAKiB,SAC7DjB,KAAKkB,QAAQlB,KAAKa,MAAMC,YAAY,YAAaC,OAAOf,KAAKkB,SAC7DlB,KAAKmB,QAAQnB,KAAKa,MAAMC,YAAY,YAAaC,OAAOf,KAAKmB,SAGjEnB,KAAKa,MAAMC,YAAY,aAAcC,OAAOf,KAAKE,OACjDF,KAAKa,MAAMC,YAAY,eAAgBC,OAAOf,KAAKG,SAEjC,MAAdH,KAAKoB,MACPpB,KAAKa,MAAMC,YAAY,cAAeC,OAAOf,KAAKoB,QAElDpB,KAAKa,MAAMQ,eAAe,eAGxBrB,KAAKsB,UACPtB,KAAKa,MAAMC,YAAY,mBAAoBd,KAAKsB,WAEhDtB,KAAKa,MAAMQ,eAAe,oBAGxBrB,KAAKI,MACPJ,KAAKa,MAAMC,YAAY,cAAed,KAAKI,OAE3CJ,KAAKa,MAAMQ,eAAe,cAE9B,CAOO,aAAAE,GACLvB,KAAKS,UACP,CAOO,OAAAe,GACL,OAAOxB,KAAKC,IACd,CAOO,OAAAwB,CAAQC,GACb1B,KAAKC,KAAOyB,EACZ1B,KAAKS,UACP,CAGS,MAAAkB,GACP,OAAOC,CAAA,4BACT,GApLWjC,EAuEGkC,OAASC,CAAA;;;;;;;;;;;;IAjEvBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPvC,EAMXwC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPvC,EAaXwC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPvC,EAoBXwC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPvC,EA2BXwC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAjCPvC,EAkCXwC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPvC,EAyCXwC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA/CPvC,EAgDXwC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UAtDPpB,EAuDXwC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA7DPvC,EA8DXwC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UApEPpB,EAqEXwC,UAAA,YAAA,GAmB2CJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMlB,OAAQqB,SAAS,KAxFxBzC,EAwFgCwC,UAAA,SAAA,GAxFhCxC,EAANoC,EAAA,CADNM,EAAc,gBACF1C"}

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

@@ -28,7 +28,7 @@ export type SkyFormFormDataFallbackDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/form
+ * @documentation https://sky-ui.com/components/form
  *
  * @slot - Form elements: inputs, buttons, and other form controls.
  *
@@ -46,6 +46,7 @@ export type SkyFormFormDataFallbackDetail = {
  * @property {boolean} enterSubmit - Submits on Enter for non-textarea controls.
  * @property {boolean} resetOnSubmit - Resets form after successful submit.
  * @property {string | null} csrfToken - Optional CSRF token value for app-level submit handling.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @fires {CustomEvent<SkyFormChangeDetail>} form-change - Fired when form values change in live validation mode.
  * @fires {CustomEvent<SkyFormValidationErrorsDetail>} validation-errors - Fired when aggregated validation errors change.
@@ -200,6 +201,9 @@ export declare class SkyForm extends LitElement {
     private _handlingSubmit;
     private _handlingInvalid;
     /** MUST be light DOM for button[form="..."] + native id lookup */
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     protected createRenderRoot(): this;
     /**
      * Returns the native HTML form element.

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

@@ -1,4 +1,4 @@
-import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,state as s,query as o,customElement as a}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";var l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(t,e,i,r)=>{for(var s,o=r>1?void 0:r?h(e,i):e,a=t.length-1;a>=0;a--)(s=t[a])&&(o=(r?s(e,i,o):s(o))||o);return r&&o&&l(e,i,o),o};let c=class extends t{constructor(){super(...arguments),this.liveValidation=!1,this.showErrors=!0,this.errorBox=!1,this.errorBoxMessage="Fix These Issues Before Submitting",this.mode="client",this.noValidate=!1,this.enterSubmit=!1,this.resetOnSubmit=!1,this.csrfToken=null,this.validationErrors=[],this.submitSuccess=!1,this.validationActive=!1,this._syncQueued=!1,this._handlingSubmit=!1,this._handlingInvalid=!1,this._onEnterKey=t=>{if(!this.enterSubmit)return;if("Enter"!==t.key)return;const e=t.target;e instanceof HTMLTextAreaElement||e.closest('button[type="submit"], input[type="submit"]')||(t.preventDefault(),this.requestSubmit())},this._handleValueChanged=t=>{if(!this.liveValidation)return;t.target.matches("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea")&&(this._queueSync(),this._emitFormChange())},this._onFormDataCapture=t=>{t.target instanceof HTMLFormElement&&t.target===this._formEl&&t.stopImmediatePropagation()},this._onInvalidCapture=t=>{const e=t.target;e?.form&&e.form!==this._formEl||(t.preventDefault(),t.stopImmediatePropagation(),this._activateValidation(),this._focusFirstInvalid())},this._onHostSubmitCapture=t=>{if(t.target instanceof HTMLFormElement&&t.target===this._formEl&&!this._handlingSubmit){this._handlingSubmit=!0;try{this._syncNow();if(!this._formEl.checkValidity())return t.preventDefault(),t.stopImmediatePropagation(),this.submitSuccess=!1,void this._focusFirstInvalid();if("server"===this.mode)return this.submitSuccess=!0,void(this.resetOnSubmit&&queueMicrotask(()=>this.reset()));t.preventDefault(),t.stopImmediatePropagation();const e=new FormData(this._formEl);let i=!1;try{const t=new FormDataEvent("formdata",{formData:e,bubbles:!0,composed:!0});this.dispatchEvent(t),i=!0}catch{}i||this.dispatchEvent(new CustomEvent("formdata",{detail:{formData:e},bubbles:!0,composed:!0}));const r=this._formDataToJSON(e);this.dispatchEvent(new CustomEvent("form-submit",{detail:{values:r,formData:e,success:this._formEl.checkValidity()},bubbles:!0,composed:!0})),this.submitSuccess=!0,this.resetOnSubmit&&queueMicrotask(()=>this.reset())}finally{this._handlingSubmit=!1}}}}createRenderRoot(){return this}get formElement(){return this._formEl}connectedCallback(){super.connectedCallback(),this._queueSync(),this.addEventListener("submit",this._onHostSubmitCapture,!0),this.addEventListener("formdata",this._onFormDataCapture,!0),this.addEventListener("value-changed",this._handleValueChanged),this.addEventListener("keydown",this._onEnterKey,!0),this.addEventListener("invalid",this._onInvalidCapture,!0),this._mo=new MutationObserver(()=>this._queueSync()),this._mo.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("submit",this._onHostSubmitCapture,!0),this.removeEventListener("formdata",this._onFormDataCapture,!0),this.removeEventListener("value-changed",this._handleValueChanged),this.removeEventListener("keydown",this._onEnterKey,!0),this.removeEventListener("invalid",this._onInvalidCapture,!0),this._mo?.disconnect(),super.disconnectedCallback()}_queueSync(){this._syncQueued||(this._syncQueued=!0,queueMicrotask(()=>{this._syncQueued=!1,this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}))}_moveHostIdToNativeForm(){const t=this.id?.trim();t&&this._formEl&&(this._formEl.id!==t&&(this._formEl.id=t),this.id===t&&this.removeAttribute("id"))}_ensureNativeFormHasId(){if(!this._formEl?.id){const t="undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;this._formEl.id=`sky-form-${t}`}}_formValidQuiet(){const t=this._formEl;if(!t)return!0;for(const e of Array.from(t.elements)){const t=e;if("validity"in t&&t.validity&&!("willValidate"in t&&!1===t.willValidate||t.validity.valid))return!1}return!0}_emitFormChange(){if(!this._formEl)return;const t=new FormData(this._formEl),e=this._formDataToJSON(t);this.dispatchEvent(new CustomEvent("form-change",{detail:{values:e,formData:t,success:this._formValidQuiet()},bubbles:!0,composed:!0}))}_assignFormOwnerToChildren(){const t=this._formEl?.id;if(!t)return;const e=Array.from(this.querySelectorAll(["input","select","textarea","button","sky-button","sky-input","sky-combobox","sky-datepicker","sky-checkbox","sky-radio-group","sky-otp","sky-serial","sky-counter","sky-switch"].join(",")));for(const i of e)i.closest("form")!==this._formEl&&i.form?.id!==t&&i.setAttribute("form",t)}_getSkyInputs(){return Array.from(this.querySelectorAll("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch"))}_emitValidationErrors(){this.dispatchEvent(new CustomEvent("validation-errors",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}))}_refreshAggregates(){const t=[],e=this._getSkyInputs();for(const i of e)this._handlingInvalid||"function"!=typeof i.validateInput||i.validateInput(),Array.isArray(i.validationErrors)&&t.push(...i.validationErrors);const i=Array.from(this._formEl.elements);for(const e of i){if(!("willValidate"in e)||!e.willValidate)continue;if(!(!("validity"in e)||!e.validity||e.validity.valid)){const i=e.validationMessage||`${e.name||e.id||"Field"} is invalid`;t.push(i)}}const r=[...new Set(t)];r.join("|")!==this.validationErrors.join("|")&&(this.validationErrors=r,this._emitValidationErrors())}_focusFirstInvalid(){const t=this._getSkyInputs().find(t=>!0===t.invalid);t&&this._focusElement(t)}_focusElement(t){const e="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;t.scrollIntoView({behavior:e?"auto":"smooth",block:"center"}),setTimeout(()=>{t.focus({preventScroll:!0})},100)}_syncNow(){this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}_formDataToJSON(t){const e={};return t.forEach((t,i)=>{i in e?Array.isArray(e[i])?e[i].push(t):e[i]=[e[i],t]:e[i]=t}),e}_activateValidation(){this.validationActive=!0;const t=this._getSkyInputs();for(const e of t)e.validationActive=!0,e.showErrors=!0;queueMicrotask(()=>this._refreshAggregates())}checkValidity(){return this._syncNow(),this._formEl?.checkValidity?.()??!0}reportValidity(){return this._syncNow(),this._formEl?.reportValidity?.()??!0}requestSubmit(t){this._syncNow(),this._activateValidation(),this._formEl?.requestSubmit?.(t)}reset(){this._queueSync(),this._formEl?.reset()}resetForm(){this._queueSync(),this._formEl?.reset()}submit(){if(this._activateValidation(),"client"===this.mode){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});this._formEl?.dispatchEvent(t)}else this._formEl?.submit()}render(){return i`
+import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,state as s,query as o,customElement as a}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{PresetController as l}from"../helper/controllers/preset-controller.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,c=(t,e,i,r)=>{for(var s,o=r>1?void 0:r?d(e,i):e,a=t.length-1;a>=0;a--)(s=t[a])&&(o=(r?s(e,i,o):s(o))||o);return r&&o&&h(e,i,o),o};let m=class extends t{constructor(){super(...arguments),this.liveValidation=!1,this.showErrors=!0,this.errorBox=!1,this.errorBoxMessage="Fix These Issues Before Submitting",this.mode="client",this.noValidate=!1,this.enterSubmit=!1,this.resetOnSubmit=!1,this.csrfToken=null,this.validationErrors=[],this.submitSuccess=!1,this.validationActive=!1,this._syncQueued=!1,this._handlingSubmit=!1,this._handlingInvalid=!1,this.preset="",this._presets=new l(this),this._onEnterKey=t=>{if(!this.enterSubmit)return;if("Enter"!==t.key)return;const e=t.target;e instanceof HTMLTextAreaElement||e.closest('button[type="submit"], input[type="submit"]')||(t.preventDefault(),this.requestSubmit())},this._handleValueChanged=t=>{if(!this.liveValidation)return;t.target.matches("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea")&&(this._queueSync(),this._emitFormChange())},this._onFormDataCapture=t=>{t.target instanceof HTMLFormElement&&t.target===this._formEl&&t.stopImmediatePropagation()},this._onInvalidCapture=t=>{const e=t.target;e?.form&&e.form!==this._formEl||(t.preventDefault(),t.stopImmediatePropagation(),this._activateValidation(),this._focusFirstInvalid())},this._onHostSubmitCapture=t=>{if(t.target instanceof HTMLFormElement&&t.target===this._formEl&&!this._handlingSubmit){this._handlingSubmit=!0;try{this._syncNow();if(!this._formEl.checkValidity())return t.preventDefault(),t.stopImmediatePropagation(),this.submitSuccess=!1,void this._focusFirstInvalid();if("server"===this.mode)return this.submitSuccess=!0,void(this.resetOnSubmit&&queueMicrotask(()=>this.reset()));t.preventDefault(),t.stopImmediatePropagation();const e=new FormData(this._formEl);let i=!1;try{const t=new FormDataEvent("formdata",{formData:e,bubbles:!0,composed:!0});this.dispatchEvent(t),i=!0}catch{}i||this.dispatchEvent(new CustomEvent("formdata",{detail:{formData:e},bubbles:!0,composed:!0}));const r=this._formDataToJSON(e);this.dispatchEvent(new CustomEvent("form-submit",{detail:{values:r,formData:e,success:this._formEl.checkValidity()},bubbles:!0,composed:!0})),this.submitSuccess=!0,this.resetOnSubmit&&queueMicrotask(()=>this.reset())}finally{this._handlingSubmit=!1}}}}createRenderRoot(){return this}get formElement(){return this._formEl}connectedCallback(){super.connectedCallback(),this._queueSync(),this.addEventListener("submit",this._onHostSubmitCapture,!0),this.addEventListener("formdata",this._onFormDataCapture,!0),this.addEventListener("value-changed",this._handleValueChanged),this.addEventListener("keydown",this._onEnterKey,!0),this.addEventListener("invalid",this._onInvalidCapture,!0),this._mo=new MutationObserver(()=>this._queueSync()),this._mo.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("submit",this._onHostSubmitCapture,!0),this.removeEventListener("formdata",this._onFormDataCapture,!0),this.removeEventListener("value-changed",this._handleValueChanged),this.removeEventListener("keydown",this._onEnterKey,!0),this.removeEventListener("invalid",this._onInvalidCapture,!0),this._mo?.disconnect(),super.disconnectedCallback()}_queueSync(){this._syncQueued||(this._syncQueued=!0,queueMicrotask(()=>{this._syncQueued=!1,this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}))}_moveHostIdToNativeForm(){const t=this.id?.trim();t&&this._formEl&&(this._formEl.id!==t&&(this._formEl.id=t),this.id===t&&this.removeAttribute("id"))}_ensureNativeFormHasId(){if(!this._formEl?.id){const t="undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;this._formEl.id=`sky-form-${t}`}}_formValidQuiet(){const t=this._formEl;if(!t)return!0;for(const e of Array.from(t.elements)){const t=e;if("validity"in t&&t.validity&&!("willValidate"in t&&!1===t.willValidate||t.validity.valid))return!1}return!0}_emitFormChange(){if(!this._formEl)return;const t=new FormData(this._formEl),e=this._formDataToJSON(t);this.dispatchEvent(new CustomEvent("form-change",{detail:{values:e,formData:t,success:this._formValidQuiet()},bubbles:!0,composed:!0}))}_assignFormOwnerToChildren(){const t=this._formEl?.id;if(!t)return;const e=Array.from(this.querySelectorAll(["input","select","textarea","button","sky-button","sky-input","sky-combobox","sky-datepicker","sky-checkbox","sky-radio-group","sky-otp","sky-serial","sky-counter","sky-switch"].join(",")));for(const i of e)i.closest("form")!==this._formEl&&i.form?.id!==t&&i.setAttribute("form",t)}_getSkyInputs(){return Array.from(this.querySelectorAll("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch"))}_emitValidationErrors(){this.dispatchEvent(new CustomEvent("validation-errors",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}))}_refreshAggregates(){const t=[],e=this._getSkyInputs();for(const i of e)this._handlingInvalid||"function"!=typeof i.validateInput||i.validateInput(),Array.isArray(i.validationErrors)&&t.push(...i.validationErrors);const i=Array.from(this._formEl.elements);for(const e of i){if(!("willValidate"in e)||!e.willValidate)continue;if(!(!("validity"in e)||!e.validity||e.validity.valid)){const i=e.validationMessage||`${e.name||e.id||"Field"} is invalid`;t.push(i)}}const r=[...new Set(t)];r.join("|")!==this.validationErrors.join("|")&&(this.validationErrors=r,this._emitValidationErrors())}_focusFirstInvalid(){const t=this._getSkyInputs().find(t=>!0===t.invalid);t&&this._focusElement(t)}_focusElement(t){const e="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;t.scrollIntoView({behavior:e?"auto":"smooth",block:"center"}),setTimeout(()=>{t.focus({preventScroll:!0})},100)}_syncNow(){this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}_formDataToJSON(t){const e={};return t.forEach((t,i)=>{i in e?Array.isArray(e[i])?e[i].push(t):e[i]=[e[i],t]:e[i]=t}),e}_activateValidation(){this.validationActive=!0;const t=this._getSkyInputs();for(const e of t)e.validationActive=!0,e.showErrors=!0;queueMicrotask(()=>this._refreshAggregates())}checkValidity(){return this._syncNow(),this._formEl?.checkValidity?.()??!0}reportValidity(){return this._syncNow(),this._formEl?.reportValidity?.()??!0}requestSubmit(t){this._syncNow(),this._activateValidation(),this._formEl?.requestSubmit?.(t)}reset(){this._queueSync(),this._formEl?.reset()}resetForm(){this._queueSync(),this._formEl?.reset()}submit(){if(this._activateValidation(),"client"===this.mode){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});this._formEl?.dispatchEvent(t)}else this._formEl?.submit()}render(){return i`
       <style>
         /* Scoped to the sky-form tag: this is a light-DOM component, so
            unscoped class selectors would leak into the whole document. */
@@ -64,5 +64,5 @@ import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,sta
               </div>
             </div>
           `: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};
+    `}};c([r({type:Boolean})],m.prototype,"liveValidation",2),c([r({type:Boolean})],m.prototype,"showErrors",2),c([r({type:Boolean})],m.prototype,"errorBox",2),c([r({type:String})],m.prototype,"errorBoxMessage",2),c([r({type:String})],m.prototype,"mode",2),c([r({type:String})],m.prototype,"method",2),c([r({type:String})],m.prototype,"action",2),c([r({type:String})],m.prototype,"target",2),c([r({type:String})],m.prototype,"enctype",2),c([r({type:String})],m.prototype,"autocomplete",2),c([r({type:Boolean})],m.prototype,"noValidate",2),c([r({type:Boolean})],m.prototype,"enterSubmit",2),c([r({type:Boolean})],m.prototype,"resetOnSubmit",2),c([r({type:String})],m.prototype,"csrfToken",2),c([s()],m.prototype,"validationErrors",2),c([s()],m.prototype,"submitSuccess",2),c([s()],m.prototype,"validationActive",2),c([o("form")],m.prototype,"_formEl",2),c([r({type:String,reflect:!0})],m.prototype,"preset",2),m=c([a("sky-form")],m);export{m 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\";\r\nimport { customElement, property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\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 on the host before it reaches the inner <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    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 does not handle the inner form event.\r\n    e.stopImmediatePropagation();\r\n    // formdata is informational; do not preventDefault.\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    // invalid handler activates validation and focuses the first invalid field.\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      // Skip validateInput during invalid-event 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      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      // Server mode: allow native form submission (page refresh/navigation).\r\n      if (this.mode === \"server\") {\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 when available (Vue handlers 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    // Defer aggregation until validationActive is set on child controls.\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","preset","_presets","PresetController","_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","reflect","customElement"],"mappings":"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"}

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

@@ -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.
@@ -24,6 +24,7 @@ export interface SkyGridColumnsConfig {
  * @property {number} sm - Column count at small breakpoints.
  * @property {number} xs - Column count at extra-small breakpoints.
  * @property {boolean} nowrap - Reuses `columns` across breakpoints when true.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @csspart grid - The grid container element.
  *
@@ -65,6 +66,9 @@ export interface SkyGridColumnsConfig {
  * ```
  */
 export declare class SkyGrid extends LitElement {
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     columns: number;
     gap: string;

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

@@ -1,8 +1,8 @@
-import{css as t,LitElement as s,html as r}from"lit";import{property as e,customElement as i}from"lit/decorators.js";var o=Object.defineProperty,m=Object.getOwnPropertyDescriptor,l=(t,s,r,e)=>{for(var i,l=e>1?void 0:e?m(s,r):s,p=t.length-1;p>=0;p--)(i=t[p])&&(l=(e?i(s,r,l):i(l))||l);return e&&l&&o(s,r,l),l};let p=class extends s{constructor(){super(...arguments),this.columns=12,this.gap="10px",this.lg=3,this.md=2,this.sm=2,this.xs=1,this.nowrap=!1}updated(t){(t.has("nowrap")||t.has("lg")||t.has("md")||t.has("sm")||t.has("xs")||t.has("columns"))&&(this.style.setProperty("--grid-columns",this.columns.toString()),this.nowrap?(this.style.setProperty("--grid-columns-lg",this.columns.toString()),this.style.setProperty("--grid-columns-md",this.columns.toString()),this.style.setProperty("--grid-columns-sm",this.columns.toString()),this.style.setProperty("--grid-columns-xs",this.columns.toString())):(this.style.setProperty("--grid-columns-lg",(this.lg||this.columns).toString()),this.style.setProperty("--grid-columns-md",(this.md||this.columns).toString()),this.style.setProperty("--grid-columns-sm",(this.sm||this.columns).toString()),this.style.setProperty("--grid-columns-xs",(this.xs||this.columns).toString()))),t.has("gap")&&this.style.setProperty("--grid-gap",this.gap)}render(){return r`
+import{css as t,LitElement as r,html as s}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{PresetController as i}from"../helper/controllers/preset-controller.js";var p=Object.defineProperty,l=Object.getOwnPropertyDescriptor,m=(t,r,s,e)=>{for(var o,i=e>1?void 0:e?l(r,s):r,m=t.length-1;m>=0;m--)(o=t[m])&&(i=(e?o(r,s,i):o(i))||i);return e&&i&&p(r,s,i),i};let n=class extends r{constructor(){super(...arguments),this.preset="",this._presets=new i(this),this.columns=12,this.gap="10px",this.lg=3,this.md=2,this.sm=2,this.xs=1,this.nowrap=!1}updated(t){(t.has("nowrap")||t.has("lg")||t.has("md")||t.has("sm")||t.has("xs")||t.has("columns"))&&(this.style.setProperty("--grid-columns",this.columns.toString()),this.nowrap?(this.style.setProperty("--grid-columns-lg",this.columns.toString()),this.style.setProperty("--grid-columns-md",this.columns.toString()),this.style.setProperty("--grid-columns-sm",this.columns.toString()),this.style.setProperty("--grid-columns-xs",this.columns.toString())):(this.style.setProperty("--grid-columns-lg",(this.lg||this.columns).toString()),this.style.setProperty("--grid-columns-md",(this.md||this.columns).toString()),this.style.setProperty("--grid-columns-sm",(this.sm||this.columns).toString()),this.style.setProperty("--grid-columns-xs",(this.xs||this.columns).toString()))),t.has("gap")&&this.style.setProperty("--grid-gap",this.gap)}render(){return s`
       <div class="grid">
         <slot></slot>
       </div>
-    `}};p.styles=t`
+    `}};n.styles=t`
     :host {
       display: block;
     }
@@ -36,5 +36,5 @@ import{css as t,LitElement as s,html as r}from"lit";import{property as e,customE
         grid-template-columns: repeat(var(--grid-columns-xs), 1fr);
       }
     }
-  `,l([e({type:Number})],p.prototype,"columns",2),l([e({type:String})],p.prototype,"gap",2),l([e({type:Number})],p.prototype,"lg",2),l([e({type:Number})],p.prototype,"md",2),l([e({type:Number})],p.prototype,"sm",2),l([e({type:Number})],p.prototype,"xs",2),l([e({type:Boolean,reflect:!0})],p.prototype,"nowrap",2),p=l([i("sky-grid")],p);export{p as SkyGrid};
+  `,m([e({type:String,reflect:!0})],n.prototype,"preset",2),m([e({type:Number})],n.prototype,"columns",2),m([e({type:String})],n.prototype,"gap",2),m([e({type:Number})],n.prototype,"lg",2),m([e({type:Number})],n.prototype,"md",2),m([e({type:Number})],n.prototype,"sm",2),m([e({type:Number})],n.prototype,"xs",2),m([e({type:Boolean,reflect:!0})],n.prototype,"nowrap",2),n=m([o("sky-grid")],n);export{n as SkyGrid};
 //# sourceMappingURL=sky-grid.js.map

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\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\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://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 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\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\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\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","preset","_presets","PresetController","columns","gap","lg","md","sm","xs","nowrap","updated","changedProperties","has","style","setProperty","toString","render","html","styles","css","__decorateClass","property","type","String","reflect","prototype","Number","Boolean","customElement"],"mappings":"kYAwEO,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,GAAAC,SAAAC,WAGsCC,KAAAC,OAAS,GAEpDD,KAAQE,SAAW,IAAIC,EAAiBH,MAsCZA,KAAAI,QAAU,GACVJ,KAAAK,IAAM,OACNL,KAAAM,GAAK,EACLN,KAAAO,GAAK,EACLP,KAAAQ,GAAK,EACLR,KAAAS,GAAK,EACWT,KAAAU,QAAS,CAAA,CAE5C,OAAAC,CAAQC,IAEbA,EAAkBC,IAAI,WACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,OACtBD,EAAkBC,IAAI,cAEtBb,KAAKc,MAAMC,YAAY,iBAAkBf,KAAKI,QAAQY,YAClDhB,KAAKU,QACPV,KAAKc,MAAMC,YAAY,oBAAqBf,KAAKI,QAAQY,YACzDhB,KAAKc,MAAMC,YAAY,oBAAqBf,KAAKI,QAAQY,YACzDhB,KAAKc,MAAMC,YAAY,oBAAqBf,KAAKI,QAAQY,YACzDhB,KAAKc,MAAMC,YAAY,oBAAqBf,KAAKI,QAAQY,cAEzDhB,KAAKc,MAAMC,YACT,qBACCf,KAAKM,IAAMN,KAAKI,SAASY,YAE5BhB,KAAKc,MAAMC,YACT,qBACCf,KAAKO,IAAMP,KAAKI,SAASY,YAE5BhB,KAAKc,MAAMC,YACT,qBACCf,KAAKQ,IAAMR,KAAKI,SAASY,YAE5BhB,KAAKc,MAAMC,YACT,qBACCf,KAAKS,IAAMT,KAAKI,SAASY,cAI5BJ,EAAkBC,IAAI,QACxBb,KAAKc,MAAMC,YAAY,aAAcf,KAAKK,IAE9C,CAES,MAAAY,GACP,OAAOC,CAAA;;;;KAKT,GAhGWvB,EAOKwB,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJkBC,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAHxB9B,EAGgC+B,UAAA,SAAA,GAwCfL,EAAA,CAA3BC,EAAS,CAAEC,KAAMI,UA3CPhC,EA2CiB+B,UAAA,UAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UA5CP7B,EA4CiB+B,UAAA,MAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMI,UA7CPhC,EA6CiB+B,UAAA,KAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMI,UA9CPhC,EA8CiB+B,UAAA,KAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMI,UA/CPhC,EA+CiB+B,UAAA,KAAA,GACAL,EAAA,CAA3BC,EAAS,CAAEC,KAAMI,UAhDPhC,EAgDiB+B,UAAA,KAAA,GACgBL,EAAA,CAA3CC,EAAS,CAAEC,KAAMK,QAASH,SAAS,KAjDzB9B,EAiDiC+B,UAAA,SAAA,GAjDjC/B,EAAN0B,EAAA,CADNQ,EAAc,aACFlC"}

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.
@@ -88,6 +88,9 @@ export declare class SkyIcon extends LitElement {
      * @param icon - Icon data (body, width, height, viewBox, etc.).
      */
     static registerLocalIcon(fullName: string, icon: IconifyIcon): void;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     icon: string;
     width: SkyIconSizeValue;

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

@@ -1,4 +1,4 @@
-import{css as t,LitElement as e,html as i}from"lit";import{property as s,state as o,customElement as n}from"lit/decorators.js";import{styleMap as r}from"lit/directives/style-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import l from"./ion-local.json.js";var c=Object.defineProperty,a=Object.getOwnPropertyDescriptor,p=(t,e,i,s)=>{for(var o,n=s>1?void 0:s?a(e,i):e,r=t.length-1;r>=0;r--)(o=t[r])&&(n=(s?o(e,i,n):o(n))||n);return s&&n&&c(e,i,n),n};let _=class extends e{constructor(){super(...arguments),this.icon="",this.width="",this.height="",this.color="currentColor",this.inline=!1,this.flip="",this.hFlip=!1,this.vFlip=!1,this.rotate=0,this.lazy=!1,this._svgContent=null,this._hasSlottedSvg=!1,this._observer=null,this._visible=!1}static registerLocalSet(t,e){_._localSets.set(t,e);for(const e of _._iconCache.keys())e.startsWith(t+":")&&_._iconCache.delete(e)}static registerLocalIcon(t,e){_._localIcons.set(t,e),_._iconCache.delete(t)}connectedCallback(){super.connectedCallback(),this.lazy?this._startObserver():(this._visible=!0,this.icon&&!this._hasSlottedSvg&&this._loadIcon())}disconnectedCallback(){super.disconnectedCallback(),this._stopObserver()}updated(t){t.has("lazy")&&(this.lazy?this._startObserver():(this._stopObserver(),this._visible=!0,this.icon&&!this._hasSlottedSvg&&this._loadIcon())),t.has("icon")&&(this._hasSlottedSvg?this._setSvgContent(null):!this.lazy||this._visible?this._loadIcon():this._setSvgContent(null))}_onSlotChange(t){const e=t.target.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE&&"SVG"===t.tagName);this._hasSlottedSvg!==e&&(this._hasSlottedSvg=e,e&&this.icon?this._setSvgContent(null):e||!this.icon||!this._visible&&this.lazy||this._loadIcon())}_startObserver(){"undefined"!=typeof window&&!this._observer&&"IntersectionObserver"in window&&(this._observer=new IntersectionObserver(t=>{t.some(t=>t.isIntersecting)&&(this._visible=!0,!this._hasSlottedSvg&&this.icon&&this._loadIcon(),this._stopObserver())}),this._observer.observe(this))}_stopObserver(){this._observer&&(this._observer.disconnect(),this._observer=null)}_setSvgContent(t){this._svgContent!==t&&("function"==typeof queueMicrotask?queueMicrotask(()=>{this._svgContent=t}):Promise.resolve().then(()=>{this._svgContent=t}))}async _loadIcon(){const t=this.icon.trim();if(!t)return void this._setSvgContent(null);const e=_._iconCache.get(t);if(e)return void this._setSvgContent(e);let i=_._iconPromiseCache.get(t);i||(i=this._fetchAndBuild(t),_._iconPromiseCache.set(t,i));try{const e=await i;if(this._setSvgContent(e),_._iconCache.size>=100){const t=_._iconCache.keys().next().value;null!=t&&_._iconCache.delete(t)}_._iconCache.set(t,e)}catch{this._setSvgContent(null)}finally{_._iconPromiseCache.delete(t)}}async _fetchAndBuild(t){const[e,i]=t.split(":");if(!e||!i)throw new Error("Invalid icon name");const s=_._localIcons.get(t);if(s)return this._buildSvg(s,{});const o=_._localSets.get(e);if(o?.icons?.[i])return this._buildSvg(o.icons[i],o);const n=`https://api.iconify.design/${e}.json?icons=${i}`,r=await fetch(n);if(!r.ok)throw new Error("Failed to fetch icon set");const h=await r.json(),l=h.icons?.[i];if(!l)throw new Error("Icon not found");return this._buildSvg(l,h)}_buildSvg(t,e){const i=t.body??"",s=t.left??e.left??0,o=t.top??e.top??0,n=t.width??e.width??24,r=t.height??e.height??24;return`\n      <svg xmlns="http://www.w3.org/2000/svg"\n           viewBox="${t.viewBox||`${s} ${o} ${n} ${r}`}"\n           width="100%"\n           height="100%"\n           preserveAspectRatio="xMidYMid meet"\n           fill="currentColor">\n        ${i}\n      </svg>\n    `}_normalize(t){return"number"==typeof t||/^\d+$/.test(t)?`${t}px`:t}_rotationDeg(){const t=this.rotate;if("number"==typeof t)return 90*t;if("string"==typeof t){if(t.endsWith("deg"))return parseFloat(t);const e=parseInt(t,10);return Number.isFinite(e)?90*e:0}return 0}_flipHas(t){return this.flip.split(",").map(t=>t.trim().toLowerCase()).includes(t)}_transform(){const t=this._rotationDeg(),e=this.hFlip||this._flipHas("horizontal"),i=this.vFlip||this._flipHas("vertical"),s=[];return t&&s.push(`rotate(${t}deg)`),(e||i)&&s.push(`scale(${e?-1:1}, ${i?-1:1})`),s.join(" ")}_baseStyle(){const t={color:h(this.color)};return this.width&&(t.width=this._normalize(this.width)),this.height&&(t.height=this._normalize(this.height)),this.width||this.height||(t.width="1em",t.height="1em"),this.inline&&(t.verticalAlign="-0.125em"),t}render(){const t=this._baseStyle(),e=this._transform();e&&(t.transform=e);return!this._hasSlottedSvg&&this.icon&&this._svgContent?i`
+import{css as t,LitElement as e,html as i}from"lit";import{property as s,state as o,customElement as n}from"lit/decorators.js";import{styleMap as r}from"lit/directives/style-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import l from"./ion-local.json.js";import{PresetController as c}from"../helper/controllers/preset-controller.js";var a=Object.defineProperty,p=Object.getOwnPropertyDescriptor,_=(t,e,i,s)=>{for(var o,n=s>1?void 0:s?p(e,i):e,r=t.length-1;r>=0;r--)(o=t[r])&&(n=(s?o(e,i,n):o(n))||n);return s&&n&&a(e,i,n),n};let d=class extends e{constructor(){super(...arguments),this.preset="",this._presets=new c(this),this.icon="",this.width="",this.height="",this.color="currentColor",this.inline=!1,this.flip="",this.hFlip=!1,this.vFlip=!1,this.rotate=0,this.lazy=!1,this._svgContent=null,this._hasSlottedSvg=!1,this._observer=null,this._visible=!1}static registerLocalSet(t,e){d._localSets.set(t,e);for(const e of d._iconCache.keys())e.startsWith(t+":")&&d._iconCache.delete(e)}static registerLocalIcon(t,e){d._localIcons.set(t,e),d._iconCache.delete(t)}connectedCallback(){super.connectedCallback(),this.lazy?this._startObserver():(this._visible=!0,this.icon&&!this._hasSlottedSvg&&this._loadIcon())}disconnectedCallback(){super.disconnectedCallback(),this._stopObserver()}updated(t){t.has("lazy")&&(this.lazy?this._startObserver():(this._stopObserver(),this._visible=!0,this.icon&&!this._hasSlottedSvg&&this._loadIcon())),t.has("icon")&&(this._hasSlottedSvg?this._setSvgContent(null):!this.lazy||this._visible?this._loadIcon():this._setSvgContent(null))}_onSlotChange(t){const e=t.target.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE&&"SVG"===t.tagName);this._hasSlottedSvg!==e&&(this._hasSlottedSvg=e,e&&this.icon?this._setSvgContent(null):e||!this.icon||!this._visible&&this.lazy||this._loadIcon())}_startObserver(){"undefined"!=typeof window&&!this._observer&&"IntersectionObserver"in window&&(this._observer=new IntersectionObserver(t=>{t.some(t=>t.isIntersecting)&&(this._visible=!0,!this._hasSlottedSvg&&this.icon&&this._loadIcon(),this._stopObserver())}),this._observer.observe(this))}_stopObserver(){this._observer&&(this._observer.disconnect(),this._observer=null)}_setSvgContent(t){this._svgContent!==t&&("function"==typeof queueMicrotask?queueMicrotask(()=>{this._svgContent=t}):Promise.resolve().then(()=>{this._svgContent=t}))}async _loadIcon(){const t=this.icon.trim();if(!t)return void this._setSvgContent(null);const e=d._iconCache.get(t);if(e)return void this._setSvgContent(e);let i=d._iconPromiseCache.get(t);i||(i=this._fetchAndBuild(t),d._iconPromiseCache.set(t,i));try{const e=await i;if(this._setSvgContent(e),d._iconCache.size>=100){const t=d._iconCache.keys().next().value;null!=t&&d._iconCache.delete(t)}d._iconCache.set(t,e)}catch{this._setSvgContent(null)}finally{d._iconPromiseCache.delete(t)}}async _fetchAndBuild(t){const[e,i]=t.split(":");if(!e||!i)throw new Error("Invalid icon name");const s=d._localIcons.get(t);if(s)return this._buildSvg(s,{});const o=d._localSets.get(e);if(o?.icons?.[i])return this._buildSvg(o.icons[i],o);const n=`https://api.iconify.design/${e}.json?icons=${i}`,r=await fetch(n);if(!r.ok)throw new Error("Failed to fetch icon set");const h=await r.json(),l=h.icons?.[i];if(!l)throw new Error("Icon not found");return this._buildSvg(l,h)}_buildSvg(t,e){const i=t.body??"",s=t.left??e.left??0,o=t.top??e.top??0,n=t.width??e.width??24,r=t.height??e.height??24;return`\n      <svg xmlns="http://www.w3.org/2000/svg"\n           viewBox="${t.viewBox||`${s} ${o} ${n} ${r}`}"\n           width="100%"\n           height="100%"\n           preserveAspectRatio="xMidYMid meet"\n           fill="currentColor">\n        ${i}\n      </svg>\n    `}_normalize(t){return"number"==typeof t||/^\d+$/.test(t)?`${t}px`:t}_rotationDeg(){const t=this.rotate;if("number"==typeof t)return 90*t;if("string"==typeof t){if(t.endsWith("deg"))return parseFloat(t);const e=parseInt(t,10);return Number.isFinite(e)?90*e:0}return 0}_flipHas(t){return this.flip.split(",").map(t=>t.trim().toLowerCase()).includes(t)}_transform(){const t=this._rotationDeg(),e=this.hFlip||this._flipHas("horizontal"),i=this.vFlip||this._flipHas("vertical"),s=[];return t&&s.push(`rotate(${t}deg)`),(e||i)&&s.push(`scale(${e?-1:1}, ${i?-1:1})`),s.join(" ")}_baseStyle(){const t={color:h(this.color)};return this.width&&(t.width=this._normalize(this.width)),this.height&&(t.height=this._normalize(this.height)),this.width||this.height||(t.width="1em",t.height="1em"),this.inline&&(t.verticalAlign="-0.125em"),t}render(){const t=this._baseStyle(),e=this._transform();e&&(t.transform=e);return!this._hasSlottedSvg&&this.icon&&this._svgContent?i`
         <div
           class="icon"
           style=${r(t)}
@@ -9,14 +9,14 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       <div class="icon" style=${r(t)} part="icon">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
-    `}};_._iconCache=new Map,_._iconPromiseCache=new Map,_._localSets=new Map,_._localIcons=new Map,_.styles=t`
+    `}};d._iconCache=new Map,d._iconPromiseCache=new Map,d._localSets=new Map,d._localIcons=new Map,d.styles=t`
     :host {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       vertical-align: middle;
     }
-   .icon {
+    .icon {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -36,5 +36,5 @@ import{css as t,LitElement as e,html as i}from"lit";import{property as s,state a
       flex-shrink: 0;
       fill: currentColor;
     }
-  `,p([s({type:String})],_.prototype,"icon",2),p([s({type:String})],_.prototype,"width",2),p([s({type:String})],_.prototype,"height",2),p([s({type:String})],_.prototype,"color",2),p([s({type:Boolean})],_.prototype,"inline",2),p([s({type:String})],_.prototype,"flip",2),p([s({type:Boolean})],_.prototype,"hFlip",2),p([s({type:Boolean})],_.prototype,"vFlip",2),p([s({type:String})],_.prototype,"rotate",2),p([s({type:Boolean})],_.prototype,"lazy",2),p([o()],_.prototype,"_svgContent",2),p([o()],_.prototype,"_hasSlottedSvg",2),_=p([n("sky-icon")],_);const d=l;d?.icons&&_.registerLocalSet("ion",d);export{_ as SkyIcon};
+  `,_([s({type:String,reflect:!0})],d.prototype,"preset",2),_([s({type:String})],d.prototype,"icon",2),_([s({type:String})],d.prototype,"width",2),_([s({type:String})],d.prototype,"height",2),_([s({type:String})],d.prototype,"color",2),_([s({type:Boolean})],d.prototype,"inline",2),_([s({type:String})],d.prototype,"flip",2),_([s({type:Boolean})],d.prototype,"hFlip",2),_([s({type:Boolean})],d.prototype,"vFlip",2),_([s({type:String})],d.prototype,"rotate",2),_([s({type:Boolean})],d.prototype,"lazy",2),_([o()],d.prototype,"_svgContent",2),_([o()],d.prototype,"_hasSlottedSvg",2),d=_([n("sky-icon")],d);const g=l;g?.icons&&d.registerLocalSet("ion",g);export{d as SkyIcon};
 //# sourceMappingURL=sky-icon.js.map