@sky.ui/core 0.0.41 → 0.0.43

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

@@ -11,7 +11,7 @@ export type SkyDialogRequestCloseDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/dialog
+ * @documentation https://sky-ui.com/components/dialog
  * @dependency sky-icon
  *
  * @uiVModel open request-close sync=constant:false
@@ -44,6 +44,7 @@ export type SkyDialogRequestCloseDetail = {
  * @property {SkyDialogPadding} bodyPadding - Body padding token.
  * @property {SkyDialogPadding} footerPadding - Footer padding token.
  * @property {boolean} highlightOnOutsideClick - Enables highlight animation on rejected outside click.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method show Opens the dialog by setting `open` to true.
  * @method hide Closes the dialog by setting `open` to false.
  * @method focusDialog Focuses the native dialog surface.
@@ -157,6 +158,9 @@ export declare class SkyDialog extends LitElement {
     dialogRef: import("lit-html/directives/ref.js").Ref<HTMLDialogElement>;
     /** @private Handle clicks on the dialog backdrop (outside surface). */
     private _onBackdropPointerDown;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     constructor();
     /** @protected */

package/dist/sky-dialog/sky-dialog.js

@@ -1,4 +1,4 @@
-import{css as e,LitElement as t,html as o}from"lit";import{property as i,state as s,query as n,customElement as a}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{createRef as d,ref as l}from"lit/directives/ref.js";import{classMap as c}from"lit/directives/class-map.js";import{animate as h}from"@lit-labs/motion";import{SkyIcon as p}from"../sky-icon/sky-icon.js";var g=Object.defineProperty,y=Object.getOwnPropertyDescriptor,m=(e,t,o,i)=>{for(var s,n=i>1?void 0:i?y(t,o):t,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(i?s(t,o,n):s(n))||n);return i&&n&&g(t,o,n),n};let u=0,f=0,b=class extends t{constructor(){super(),this.open=!1,this.closable=!1,this.message="",this.overlay=!1,this.width="auto",this.separator=!1,this.persistent=!1,this.closeOnEsc=!1,this.headerPadding="sm",this.bodyPadding="sm",this.footerPadding="sm",this.highlightOnOutsideClick=!0,this._hasHeader=!1,this._hasBody=!1,this._hasFooter=!1,this._isClosing=!1,this._openAnimation=null,this._closeAnimation=null,this._highlightAnimation=null,this.dialogRef=d(),this._onBackdropPointerDown=e=>{const t=this.dialogElement;t&&t.open&&e.target===t&&(this.persistent?this._highlightDialog():this._requestClose("backdrop"))},this._onNativeClose=()=>{this.open&&requestAnimationFrame(()=>{this.dialogElement?.open||this.dialogElement?.showModal()})},this._onHeaderSlotChange=e=>{const t=e.target;this._hasHeader=this._slotHasContent(t)},this._onBodySlotChange=e=>{const t=e.target;this._hasBody=this._slotHasContent(t)},this._onFooterSlotChange=e=>{const t=e.target;this._hasFooter=this._slotHasContent(t)},this._onKeyDown=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),!this.persistent&&this.closeOnEsc?this._requestClose("escape"):this._highlightDialog())},this._handleCancel=this._handleCancel.bind(this)}firstUpdated(){const e=this.dialogElement;e&&(e.addEventListener("keydown",this._onKeyDown,{capture:!0}),e.addEventListener("pointerdown",this._onBackdropPointerDown),e.addEventListener("cancel",this._handleCancel),e.addEventListener("close",this._onNativeClose))}disconnectedCallback(){const e=this.dialogElement;e&&(e.removeEventListener("keydown",this._onKeyDown,{capture:!0}),e.removeEventListener("pointerdown",this._onBackdropPointerDown),e.removeEventListener("cancel",this._handleCancel),e.removeEventListener("close",this._onNativeClose)),super.disconnectedCallback(),this._unlockScroll(),e?.open&&e.close()}show(){this.open=!0}hide(){this.open=!1}focusDialog(){this.dialogElement&&this.dialogElement.focus()}getDialogElement(){return this.dialogElement}updated(e){e.has("open")&&requestAnimationFrame(()=>{this._handleOpenChange(e.get("open"))})}_handleOpenChange(e){this.dialogElement&&(this.open&&!this.dialogElement.open?(this._lockScroll(),this.dialogElement.showModal(),requestAnimationFrame(()=>{this._animateOpen()})):!this.open&&e&&(this._isClosing=!0,this._animateClose()))}_lockScroll(){"undefined"!=typeof window&&"undefined"!=typeof document&&(0===u&&(f=window.scrollY,window.scrollTo(0,0)),u++,document.documentElement.setAttribute("data-sky-dialog-open","true"))}_unlockScroll(){"undefined"!=typeof window&&"undefined"!=typeof document&&(u=Math.max(0,u-1),0===u&&(document.documentElement.removeAttribute("data-sky-dialog-open"),window.scrollTo(0,f)))}_prefersReducedMotion(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}_animateOpen(){const e=this.dialogElement;if(!e)return;this._openAnimation?.cancel(),this._closeAnimation?.cancel();const t=this._prefersReducedMotion()?0:300,o=e.animate([{opacity:0,transform:"scale(0.95)",transformOrigin:"center center"},{opacity:1,transform:"scale(1)",transformOrigin:"center center"}],{duration:t,easing:"ease-out",fill:"forwards"});o.onfinish=()=>{this.dispatchEvent(new CustomEvent("dialog-opened",{bubbles:!0,composed:!0}))},this._openAnimation=o}_animateClose(){const e=this.dialogElement;if(!e)return;this._openAnimation?.cancel(),this._closeAnimation?.cancel();const t=this._prefersReducedMotion()?0:150,o=e.animate([{opacity:1,transform:"scale(1)",transformOrigin:"center center"},{opacity:0,transform:"scale(0.95)",transformOrigin:"center center"}],{duration:t,easing:"ease-out",fill:"forwards"});o.onfinish=()=>{e.close(),this._unlockScroll(),this._isClosing=!1,this.dispatchEvent(new CustomEvent("dialog-closed",{bubbles:!0,composed:!0}))},this._closeAnimation=o}_handleCancel(e){e.preventDefault(),!this.persistent&&this.closeOnEsc?this._requestClose("escape"):this._highlightDialog()}_highlightDialog(){if(!this.highlightOnOutsideClick)return;if(this._prefersReducedMotion())return;const e=this.dialogElement;if(!e)return;this._highlightAnimation?.cancel();const t=e.animate([{transform:"scale(1)"},{transform:"scale(1.05)"},{transform:"scale(1)"}],{duration:300,easing:"ease-in-out"});this._highlightAnimation=t}_requestClose(e){this._isClosing||this.dispatchEvent(new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0}))}_slotHasContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType!==Node.TEXT_NODE||!!e.textContent?.trim())}render(){const e={none:!0,xs:!0,sm:!0,md:!0,lg:!0,xl:!0},t=e[this.headerPadding]?this.headerPadding:"md",i=e[this.bodyPadding]?this.bodyPadding:"md",s=e[this.footerPadding]?this.footerPadding:"md",n={};this._hasHeader&&(n[`header-padding-${t}`]=!0,this.separator&&(n["header-separator"]=!0));const a={};return this._hasFooter?(a.actions=!0,a[`footer-padding-${s}`]=!0,this.separator&&(a["footer-separator"]=!0)):a.actions=!0,o`
+import{css as e,LitElement as t,html as o}from"lit";import{property as i,state as s,query as n,customElement as a}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{createRef as d,ref as l}from"lit/directives/ref.js";import{classMap as c}from"lit/directives/class-map.js";import{animate as h}from"@lit-labs/motion";import{SkyIcon as p}from"../sky-icon/sky-icon.js";import{PresetController as g}from"../helper/controllers/preset-controller.js";var y=Object.defineProperty,m=Object.getOwnPropertyDescriptor,u=(e,t,o,i)=>{for(var s,n=i>1?void 0:i?m(t,o):t,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(i?s(t,o,n):s(n))||n);return i&&n&&y(t,o,n),n};let f=0,b=0,k=class extends t{constructor(){super(),this.open=!1,this.closable=!1,this.message="",this.overlay=!1,this.width="auto",this.separator=!1,this.persistent=!1,this.closeOnEsc=!1,this.headerPadding="sm",this.bodyPadding="sm",this.footerPadding="sm",this.highlightOnOutsideClick=!0,this._hasHeader=!1,this._hasBody=!1,this._hasFooter=!1,this._isClosing=!1,this._openAnimation=null,this._closeAnimation=null,this._highlightAnimation=null,this.dialogRef=d(),this._onBackdropPointerDown=e=>{const t=this.dialogElement;t&&t.open&&e.target===t&&(this.persistent?this._highlightDialog():this._requestClose("backdrop"))},this.preset="",this._presets=new g(this),this._onNativeClose=()=>{this.open&&requestAnimationFrame(()=>{this.dialogElement?.open||this.dialogElement?.showModal()})},this._onHeaderSlotChange=e=>{const t=e.target;this._hasHeader=this._slotHasContent(t)},this._onBodySlotChange=e=>{const t=e.target;this._hasBody=this._slotHasContent(t)},this._onFooterSlotChange=e=>{const t=e.target;this._hasFooter=this._slotHasContent(t)},this._onKeyDown=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),!this.persistent&&this.closeOnEsc?this._requestClose("escape"):this._highlightDialog())},this._handleCancel=this._handleCancel.bind(this)}firstUpdated(){const e=this.dialogElement;e&&(e.addEventListener("keydown",this._onKeyDown,{capture:!0}),e.addEventListener("pointerdown",this._onBackdropPointerDown),e.addEventListener("cancel",this._handleCancel),e.addEventListener("close",this._onNativeClose))}disconnectedCallback(){const e=this.dialogElement;e&&(e.removeEventListener("keydown",this._onKeyDown,{capture:!0}),e.removeEventListener("pointerdown",this._onBackdropPointerDown),e.removeEventListener("cancel",this._handleCancel),e.removeEventListener("close",this._onNativeClose)),super.disconnectedCallback(),this._unlockScroll(),e?.open&&e.close()}show(){this.open=!0}hide(){this.open=!1}focusDialog(){this.dialogElement&&this.dialogElement.focus()}getDialogElement(){return this.dialogElement}updated(e){e.has("open")&&requestAnimationFrame(()=>{this._handleOpenChange(e.get("open"))})}_handleOpenChange(e){this.dialogElement&&(this.open&&!this.dialogElement.open?(this._lockScroll(),this.dialogElement.showModal(),requestAnimationFrame(()=>{this._animateOpen()})):!this.open&&e&&(this._isClosing=!0,this._animateClose()))}_lockScroll(){"undefined"!=typeof window&&"undefined"!=typeof document&&(0===f&&(b=window.scrollY,window.scrollTo(0,0)),f++,document.documentElement.setAttribute("data-sky-dialog-open","true"))}_unlockScroll(){"undefined"!=typeof window&&"undefined"!=typeof document&&(f=Math.max(0,f-1),0===f&&(document.documentElement.removeAttribute("data-sky-dialog-open"),window.scrollTo(0,b)))}_prefersReducedMotion(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}_animateOpen(){const e=this.dialogElement;if(!e)return;this._openAnimation?.cancel(),this._closeAnimation?.cancel();const t=this._prefersReducedMotion()?0:300,o=e.animate([{opacity:0,transform:"scale(0.95)",transformOrigin:"center center"},{opacity:1,transform:"scale(1)",transformOrigin:"center center"}],{duration:t,easing:"ease-out",fill:"forwards"});o.onfinish=()=>{this.dispatchEvent(new CustomEvent("dialog-opened",{bubbles:!0,composed:!0}))},this._openAnimation=o}_animateClose(){const e=this.dialogElement;if(!e)return;this._openAnimation?.cancel(),this._closeAnimation?.cancel();const t=this._prefersReducedMotion()?0:150,o=e.animate([{opacity:1,transform:"scale(1)",transformOrigin:"center center"},{opacity:0,transform:"scale(0.95)",transformOrigin:"center center"}],{duration:t,easing:"ease-out",fill:"forwards"});o.onfinish=()=>{e.close(),this._unlockScroll(),this._isClosing=!1,this.dispatchEvent(new CustomEvent("dialog-closed",{bubbles:!0,composed:!0}))},this._closeAnimation=o}_handleCancel(e){e.preventDefault(),!this.persistent&&this.closeOnEsc?this._requestClose("escape"):this._highlightDialog()}_highlightDialog(){if(!this.highlightOnOutsideClick)return;if(this._prefersReducedMotion())return;const e=this.dialogElement;if(!e)return;this._highlightAnimation?.cancel();const t=e.animate([{transform:"scale(1)"},{transform:"scale(1.05)"},{transform:"scale(1)"}],{duration:300,easing:"ease-in-out"});this._highlightAnimation=t}_requestClose(e){this._isClosing||this.dispatchEvent(new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0}))}_slotHasContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType!==Node.TEXT_NODE||!!e.textContent?.trim())}render(){const e={none:!0,xs:!0,sm:!0,md:!0,lg:!0,xl:!0},t=e[this.headerPadding]?this.headerPadding:"md",i=e[this.bodyPadding]?this.bodyPadding:"md",s=e[this.footerPadding]?this.footerPadding:"md",n={};this._hasHeader&&(n[`header-padding-${t}`]=!0,this.separator&&(n["header-separator"]=!0));const a={};return this._hasFooter?(a.actions=!0,a[`footer-padding-${s}`]=!0,this.separator&&(a["footer-separator"]=!0)):a.actions=!0,o`
       <dialog
         part="dialog"
         aria-modal="true"
@@ -39,7 +39,7 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as i,state a
           </button>
         `)}
       </dialog>
-    `}};b.dependencies={"sky-icon":p},b.styles=e`
+    `}};k.dependencies={"sky-icon":p},k.styles=e`
     :host {
       display: contents;
       font-family: var(--sky-font);
@@ -208,5 +208,5 @@ import{css as e,LitElement as t,html as o}from"lit";import{property as i,state a
         transition: none;
       }
     }
-  `,m([i({type:Boolean,reflect:!0})],b.prototype,"open",2),m([i({type:Boolean,reflect:!0})],b.prototype,"closable",2),m([i({type:String})],b.prototype,"message",2),m([i({type:Boolean,reflect:!0})],b.prototype,"overlay",2),m([i({type:String})],b.prototype,"width",2),m([i({type:Boolean,reflect:!0})],b.prototype,"separator",2),m([i({type:Boolean,reflect:!0})],b.prototype,"persistent",2),m([i({type:Boolean,reflect:!0})],b.prototype,"closeOnEsc",2),m([i({type:String,reflect:!0})],b.prototype,"headerPadding",2),m([i({type:String,reflect:!0})],b.prototype,"bodyPadding",2),m([i({type:String,reflect:!0})],b.prototype,"footerPadding",2),m([i({type:Boolean,reflect:!0})],b.prototype,"highlightOnOutsideClick",2),m([s()],b.prototype,"_hasHeader",2),m([s()],b.prototype,"_hasBody",2),m([s()],b.prototype,"_hasFooter",2),m([s()],b.prototype,"_isClosing",2),m([n("dialog")],b.prototype,"dialogElement",2),b=m([a("sky-dialog")],b);export{b as SkyDialog};
+  `,u([i({type:Boolean,reflect:!0})],k.prototype,"open",2),u([i({type:Boolean,reflect:!0})],k.prototype,"closable",2),u([i({type:String})],k.prototype,"message",2),u([i({type:Boolean,reflect:!0})],k.prototype,"overlay",2),u([i({type:String})],k.prototype,"width",2),u([i({type:Boolean,reflect:!0})],k.prototype,"separator",2),u([i({type:Boolean,reflect:!0})],k.prototype,"persistent",2),u([i({type:Boolean,reflect:!0})],k.prototype,"closeOnEsc",2),u([i({type:String,reflect:!0})],k.prototype,"headerPadding",2),u([i({type:String,reflect:!0})],k.prototype,"bodyPadding",2),u([i({type:String,reflect:!0})],k.prototype,"footerPadding",2),u([i({type:Boolean,reflect:!0})],k.prototype,"highlightOnOutsideClick",2),u([s()],k.prototype,"_hasHeader",2),u([s()],k.prototype,"_hasBody",2),u([s()],k.prototype,"_hasFooter",2),u([s()],k.prototype,"_isClosing",2),u([n("dialog")],k.prototype,"dialogElement",2),u([i({type:String,reflect:!0})],k.prototype,"preset",2),k=u([a("sky-dialog")],k);export{k as SkyDialog};
 //# sourceMappingURL=sky-dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-dialog.js","sources":["../../src/sky-dialog/sky-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { ref, createRef } from \"lit/directives/ref.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { animate } from \"@lit-labs/motion\";\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\n\nexport type SkyDialogPadding = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type SkyDialogRequestCloseDetail = { reason: \"backdrop\" | \"escape\" | \"close-button\" };\n/** Shared scroll lock state so multiple dialogs don't double-restore scroll. */\nlet _dialogOpenCount = 0;\nlet _savedScrollY = 0;\n\n/**\n * @element sky-dialog\n *\n * @summary Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/dialog\n * @dependency sky-icon\n *\n * @uiVModel open request-close sync=constant:false\n *\n * @slot header - Header content area at the top of the dialog.\n * @slot body - Main content area of the dialog.\n * @slot footer - Footer actions area at the bottom of the dialog.\n *\n * @csspart dialog - The dialog surface wrapper element.\n * @csspart close-button - The top-right close button.\n * @csspart message - Optional message text shown above the body.\n * @csspart header - Container for the header slot.\n * @csspart content - Container for the body slot.\n * @csspart actions - Container for the footer slot.\n * @csspart footer - Alias part on the footer container.\n *\n * @fires {CustomEvent<SkyDialogRequestCloseDetail>} request-close - Fired when close intent is detected and parent should update `open`.\n * @fires {CustomEvent<void>} dialog-opened - Fired after open animation completes.\n * @fires {CustomEvent<void>} dialog-closed - Fired after close animation completes.\n *\n * @property {boolean} open - Whether the dialog is visible.\n * @property {boolean} closable - Shows a top-right close button.\n * @property {string} message - Optional message displayed above body content.\n * @property {boolean} overlay - Applies dim/blur backdrop effect.\n * @property {string} width - Max width of the dialog surface.\n * @property {boolean} separator - Shows separators around header/footer regions.\n * @property {boolean} persistent - Prevents outside/Escape close and highlights surface instead.\n * @property {boolean} closeOnEsc - Enables close intent on Escape key.\n * @property {SkyDialogPadding} headerPadding - Header padding token.\n * @property {SkyDialogPadding} bodyPadding - Body padding token.\n * @property {SkyDialogPadding} footerPadding - Footer padding token.\n * @property {boolean} highlightOnOutsideClick - Enables highlight animation on rejected outside click.\n * @method show Opens the dialog by setting `open` to true.\n * @method hide Closes the dialog by setting `open` to false.\n * @method focusDialog Focuses the native dialog surface.\n * @method getDialogElement Returns the native dialog element reference.\n *\n * @Behavior\n * - Uses native `<dialog>` element with enhanced functionality\n * - Controlled exclusively by the `open` attribute/property\n * - Uses native dialog focus behavior\n * - Supports smooth animations with configurable timing\n * - Uses the floating modal surface (frosted tertiary glass)\n * - **Standard**: Click outside closes dialog\n * - **Persistent**: Click outside highlights dialog instead of closing\n * - **Closable**: Shows close button in top-right corner\n * - **Escape handling**: Configurable Escape key behavior\n * - Uses `aria-modal=\"true\"` for screen reader isolation\n * - Native dialog focus behavior\n * - Escape key handling with user preferences\n * - Close button with appropriate ARIA label\n * - Respects reduced motion preferences\n * - Smooth open/close animations with scale effects\n * - Highlight animation for persistent dialogs\n * - Configurable animation durations\n * - Uses Web Animations API for performance\n * - Works with any content in header/body/footer slots\n * - Compatible with form controls and interactive content\n * - Can be nested or stacked\n * - Responsive width and padding\n *\n * @example\n * ```html\n * <sky-dialog open closable width=\"420px\" separator>\n *   <h3 slot=\"header\">Confirm Action</h3>\n *   <p slot=\"body\">Are you sure you want to proceed?</p>\n *   <div slot=\"footer\">\n *     <button>Cancel</button>\n *     <button>Confirm</button>\n *   </div>\n * </sky-dialog>\n * ```\n * ```vue\n * <template>\n *   <sky-dialog open closable width=\"420px\" separator>\n *     <h3 slot=\"header\">Confirm Action</h3>\n *     <p slot=\"body\">Are you sure you want to proceed?</p>\n *     <div slot=\"footer\">\n *       <button>Cancel</button>\n *       <button>Confirm</button>\n *     </div>\n *   </sky-dialog>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-dialog open closable width=\"420px\" separator>\n *       <h3 slot=\"header\">Confirm Action</h3>\n *       <p slot=\"body\">Are you sure you want to proceed?</p>\n *       <div slot=\"footer\">\n *         <button>Cancel</button>\n *         <button>Confirm</button>\n *       </div>\n *     </sky-dialog>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-dialog\")\nexport class SkyDialog extends LitElement {\n\n  static dependencies: Record<string, CustomElementConstructor> = {\n    \"sky-icon\": SkyIcon,\n  };\n\n  /** @public Whether the dialog is visible. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** @public Shows a top-right close button. */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /** @public Optional message displayed above the body. */\n  @property({ type: String })\n  message = \"\";\n\n  /** @public Applies dim/blur overlay on host. */\n  @property({ type: Boolean, reflect: true })\n  overlay = false;\n\n  /** @public Max width of the dialog surface (e.g., \"480px\" or \"auto\"). */\n  @property({ type: String })\n  width = \"auto\";\n\n  /** @public Shows header/footer separators. */\n  @property({ type: Boolean, reflect: true })\n  separator = false;\n\n  /** @public Prevents close on outside click, highlights instead. */\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  /** @public Enables closing on Escape key. */\n  @property({ type: Boolean, reflect: true })\n  closeOnEsc = false;\n\n  /** @public Padding token for header container. */\n  @property({ type: String, reflect: true })\n  headerPadding: SkyDialogPadding = \"sm\";\n\n  /** @public Padding token for body container. */\n  @property({ type: String, reflect: true })\n  bodyPadding: SkyDialogPadding = \"sm\";\n\n  /** @public Padding token for footer container. */\n  @property({ type: String, reflect: true })\n  footerPadding: SkyDialogPadding = \"sm\";\n\n\n  /** @public Highlights dialog on outside click instead of closing. */\n  @property({\n    type: Boolean,\n    reflect: true,\n  })\n  highlightOnOutsideClick = true;\n\n  /** @private Whether header slot has content. */\n  @state()\n  private _hasHeader = false;\n\n  /** @private Whether body slot has content. */\n  @state()\n  private _hasBody = false;\n\n  /** @private Whether footer slot has content. */\n  @state()\n  private _hasFooter = false;\n\n  /** @private Whether dialog is in closing animation. */\n  @state()\n  private _isClosing = false;\n\n  /** @private Open animation instance. */\n  private _openAnimation: Animation | null = null;\n\n  /** @private Close animation instance. */\n  private _closeAnimation: Animation | null = null;\n\n  /** @private Highlight animation instance. */\n  private _highlightAnimation: Animation | null = null;\n\n  /** @private Reference to the native dialog element. */\n  @query(\"dialog\")\n  private dialogElement?: HTMLDialogElement;\n\n  /** @public Ref for the dialog element (e.g. for focus trap or positioning). */\n  dialogRef = createRef<HTMLDialogElement>();\n\n  /** @private Handle clicks on the dialog backdrop (outside surface). */\n  private _onBackdropPointerDown = (event: PointerEvent): void => {\n    const dialog = this.dialogElement;\n    if (!dialog || !dialog.open) return;\n\n    // In the <dialog> element, backdrop clicks are retargeted to the dialog itself.\n    // Clicks inside the surface target inner elements.\n    if (event.target !== dialog) return;\n\n    // \"Persistent\" dialogs don't close via outside click; they highlight instead (optional).\n    if (this.persistent) {\n      this._highlightDialog();\n      return;\n    }\n\n    // Standard behavior: outside click requests close.\n    this._requestClose(\"backdrop\");\n  };\n\n  static override styles = css`\n    :host {\n      display: contents;\n      font-family: var(--sky-font);\n    }\n\n    /* Floating modal template (§20.3) — single canonical surface */\n    dialog {\n      padding: 0;\n      margin: auto;\n      color: var(--sky-text-primary);\n      position: fixed;\n      box-sizing: border-box;\n      width: 100%;\n      text-align: center;\n      overflow: hidden;\n      z-index: var(--sky-z-modal, 1300);\n      background: var(--sky-glass-tertiary);\n      background-image: var(--sky-glass-surface);\n      backdrop-filter: var(--sky-blur-tertiary) var(--sky-saturation-tertiary)\n        var(--sky-brightness-tertiary);\n      -webkit-backdrop-filter: var(--sky-blur-tertiary)\n        var(--sky-saturation-tertiary) var(--sky-brightness-tertiary);\n      border: var(--sky-border-tertiary);\n      border-radius: var(--sky-radius-tertiary);\n      box-shadow:\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-tertiary);\n    }\n\n    dialog::backdrop {\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: backdrop-filter 0.3s ease-in-out;\n    }\n\n    :host([overlay]) dialog::backdrop {\n      backdrop-filter: var(--sky-blur-tertiary);\n      -webkit-backdrop-filter: var(--sky-blur-tertiary);\n    }\n\n    .header-padding-none,\n    .body-padding-none,\n    .footer-padding-none {\n      padding: var(--sky-space-0, 0);\n    }\n\n    .header-padding-xs,\n    .body-padding-xs,\n    .footer-padding-xs {\n      padding: var(--sky-space-1, 4px);\n    }\n\n    .header-padding-sm,\n    .body-padding-sm,\n    .footer-padding-sm {\n      padding: var(--sky-space-2, 8px);\n    }\n\n    .header-padding-md,\n    .body-padding-md,\n    .footer-padding-md {\n      padding: var(--sky-space-4, 16px);\n    }\n\n    .header-padding-lg,\n    .body-padding-lg,\n    .footer-padding-lg {\n      padding: var(--sky-space-6, 24px);\n    }\n\n    .header-padding-xl,\n    .body-padding-xl,\n    .footer-padding-xl {\n      padding: var(--sky-space-8, 32px);\n    }\n\n    /* Close button — §20.6 inner dismiss affordance */\n    .close-button {\n      position: absolute;\n      top: var(--sky-space-1\\\\.5, 6px);\n      right: var(--sky-space-1\\\\.5, 6px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--sky-space-6, 24px);\n      height: var(--sky-space-6, 24px);\n      box-sizing: border-box;\n      border-radius: var(--sky-radius-full);\n      font-size: var(--sky-font-size-sm, 14px);\n      cursor: pointer;\n      color: var(--sky-text-primary);\n      border: none;\n      background-color: var(--sky-hover-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: color 0.2s ease, background-color 0.2s ease;\n      z-index: 1;\n    }\n\n    .close-button sky-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    }\n\n    .close-button:hover {\n      color: var(--sky-danger-primary);\n    }\n\n    .close-button:focus-visible {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    /* Message */\n    .message {\n      padding: var(--sky-space-4, 16px) 0;\n      margin: 0;\n    }\n\n    ::slotted([slot=\"header\"]) {\n      font-size: var(--sky-font-size-md, 16px);\n      font-weight: var(--sky-font-weight-bold, 700);\n      color: var(--sky-text-primary);\n      box-sizing: border-box;\n    }\n\n    dialog:focus,\n    dialog:focus-visible {\n      outline: none;\n    }\n\n    .header-separator {\n      border-bottom: var(--sky-border-primary);\n    }\n\n    .footer-separator {\n      border-top: var(--sky-border-primary);\n    }\n\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n    }\n\n    /* RTL support */\n    :host([dir=\"rtl\"]) .close-button {\n      right: auto;\n      left: var(--sky-space-1\\\\.5, 6px);\n    }\n\n    /* Animation classes */\n    dialog.opening {\n      opacity: 0;\n    }\n\n    dialog.closing {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      dialog::backdrop,\n      .close-button {\n        transition: none;\n      }\n    }\n  `;\n\n  constructor() {\n    super();\n    this._handleCancel = this._handleCancel.bind(this);\n  }\n\n  /** @protected */\n  override firstUpdated() {\n    const d = this.dialogElement;\n    if (!d) return;\n\n    // Capture phase is important so we beat the native <dialog> cancel/close behavior\n    d.addEventListener(\"keydown\", this._onKeyDown, { capture: true });\n    d.addEventListener(\"pointerdown\", this._onBackdropPointerDown);\n    d.addEventListener(\"cancel\", this._handleCancel as any); // optional extra safety\n    d.addEventListener(\"close\", this._onNativeClose); // keep state in sync (below)\n  }\n\n  /** @protected */\n  override disconnectedCallback() {\n    const d = this.dialogElement;\n    if (d) {\n      d.removeEventListener(\"keydown\", this._onKeyDown, {\n        capture: true,\n      } as any);\n      d.removeEventListener(\"pointerdown\", this._onBackdropPointerDown);\n      d.removeEventListener(\"cancel\", this._handleCancel as any);\n      d.removeEventListener(\"close\", this._onNativeClose);\n    }\n    super.disconnectedCallback();\n    this._unlockScroll();\n    if (d?.open) d.close();\n  }\n\n  /**\n   * Opens the dialog programmatically.\n   * @public\n   */\n  public show(): void {\n    this.open = true;\n  }\n\n  /**\n   * Closes the dialog programmatically.\n   * @public\n   */\n  public hide(): void {\n    this.open = false;\n  }\n\n  /**\n   * Manually focuses the dialog element.\n   * @public\n   */\n  public focusDialog(): void {\n    if (this.dialogElement) {\n      this.dialogElement.focus();\n    }\n  }\n\n  /**\n   * Gets the native dialog element.\n   * @returns The native HTMLDialogElement or undefined\n   * @public\n   */\n  public getDialogElement(): HTMLDialogElement | undefined {\n    return this.dialogElement;\n  }\n\n  /** @private */\n  private _onNativeClose = (): void => {\n    // If parent still says open=true, reopen immediately (persistent behavior)\n    if (this.open) {\n      // restore modal state\n      requestAnimationFrame(() => {\n        if (!this.dialogElement?.open) {\n          this.dialogElement?.showModal();\n        }\n      });\n    }\n  };\n\n  /** @protected */\n  override updated(changedProps: Map<string, any>) {\n    if (changedProps.has(\"open\")) {\n      // Use requestAnimationFrame to ensure DOM updates are complete\n      requestAnimationFrame(() => {\n        this._handleOpenChange(changedProps.get(\"open\"));\n      });\n    }\n  }\n\n  /**\n   * Handles open state changes.\n   * @param previousOpen - Previous open state\n   * @private\n   */\n  private _handleOpenChange(previousOpen: boolean): void {\n    if (!this.dialogElement) return;\n\n    if (this.open && !this.dialogElement.open) {\n      this._lockScroll();\n      this.dialogElement.showModal();\n\n      requestAnimationFrame(() => {\n        this._animateOpen();\n      });\n    } else if (!this.open && previousOpen) {\n      this._isClosing = true;\n      this._animateClose();\n    }\n  }\n\n  /** @private */\n  private _lockScroll(): void {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n    if (_dialogOpenCount === 0) {\n      _savedScrollY = window.scrollY;\n      window.scrollTo(0, 0);\n    }\n    _dialogOpenCount++;\n    document.documentElement.setAttribute(\"data-sky-dialog-open\", \"true\");\n  }\n\n  /** @private */\n  private _unlockScroll(): void {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n    _dialogOpenCount = Math.max(0, _dialogOpenCount - 1);\n    if (_dialogOpenCount === 0) {\n      document.documentElement.removeAttribute(\"data-sky-dialog-open\");\n      window.scrollTo(0, _savedScrollY);\n    }\n  }\n\n  /** @private */\n  private _prefersReducedMotion(): boolean {\n    if (typeof window === \"undefined\" || !window.matchMedia) return false;\n    return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  }\n\n  /** @private */\n  private _animateOpen(): void {\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n\n    this._openAnimation?.cancel();\n    this._closeAnimation?.cancel();\n\n    const duration = this._prefersReducedMotion() ? 0 : 300;\n    const animation = dialog.animate(\n      [\n        {\n          opacity: 0,\n          transform: \"scale(0.95)\",\n          transformOrigin: \"center center\",\n        },\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\n      ],\n      {\n        duration,\n        easing: \"ease-out\",\n        fill: \"forwards\",\n      },\n    );\n\n    animation.onfinish = () => {\n      this.dispatchEvent(\n        new CustomEvent(\"dialog-opened\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    };\n\n    this._openAnimation = animation;\n  }\n\n  /** @private */\n  private _animateClose(): void {\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n    this._openAnimation?.cancel();\n    this._closeAnimation?.cancel();\n\n    const duration = this._prefersReducedMotion() ? 0 : 150;\n    const animation = dialog.animate(\n      [\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\n        {\n          opacity: 0,\n          transform: \"scale(0.95)\",\n          transformOrigin: \"center center\",\n        },\n      ],\n      {\n        duration,\n        easing: \"ease-out\",\n        fill: \"forwards\",\n      },\n    );\n\n    animation.onfinish = () => {\n      dialog.close();\n      this._unlockScroll();\n      this._isClosing = false;\n      this.dispatchEvent(\n        new CustomEvent(\"dialog-closed\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    };\n\n    this._closeAnimation = animation;\n  }\n\n  /** @private */\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (this.persistent || !this.closeOnEsc) {\n      this._highlightDialog();\n      return;\n    }\n\n    this._requestClose(\"escape\");\n  }\n\n  /** @private */\n  private _highlightDialog(): void {\n    if (!this.highlightOnOutsideClick) return;\n    if (this._prefersReducedMotion()) return;\n\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n\n    this._highlightAnimation?.cancel();\n\n    const animation = dialog.animate(\n      [\n        { transform: \"scale(1)\" },\n        { transform: \"scale(1.05)\" },\n        { transform: \"scale(1)\" },\n      ],\n      {\n        duration: 300,\n        easing: \"ease-in-out\",\n      },\n    );\n\n    this._highlightAnimation = animation;\n  }\n\n\n\n  /** @private */\n  private _requestClose(reason: SkyDialogRequestCloseDetail[\"reason\"]): void {\n    if (this._isClosing) return;\n    this.dispatchEvent(\n      new CustomEvent<SkyDialogRequestCloseDetail>(\"request-close\", {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /**\n   * Checks if a slot has content.\n   * @param slot - Slot element to check\n   * @returns True if slot has content\n   * @private\n   */\n  private _slotHasContent(slot: HTMLSlotElement): boolean {\n    const nodes = slot.assignedNodes({ flatten: true });\n    return nodes.some((n) => {\n      if (n.nodeType === Node.TEXT_NODE) {\n        return !!n.textContent?.trim();\n      }\n      return true;\n    });\n  }\n\n  /** @private */\n  private _onHeaderSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeader = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onBodySlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasBody = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onFooterSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key !== \"Escape\") return;\n\n    // Always stop native <dialog> ESC behavior\n    e.preventDefault();\n    e.stopPropagation();\n    // If persistent OR closeOnEsc is false → do NOT close, just highlight\n    if (this.persistent || !this.closeOnEsc) {\n      this._highlightDialog();\n      return;\n    }\n\n    // Allowed to close via ESC\n    this._requestClose(\"escape\");\n  };\n\n  /** @protected */\n  override render() {\n    const valid: Record<SkyDialogPadding, true> = {\n      none: true,\n      xs: true,\n      sm: true,\n      md: true,\n      lg: true,\n      xl: true,\n    };\n\n    const hp = valid[this.headerPadding] ? this.headerPadding : \"md\";\n    const bp = valid[this.bodyPadding] ? this.bodyPadding : \"md\";\n    const fp = valid[this.footerPadding] ? this.footerPadding : \"md\";\n\n    const headerClasses: Record<string, boolean> = {};\n    if (this._hasHeader) {\n      headerClasses[`header-padding-${hp}`] = true;\n      if (this.separator) {\n        headerClasses[\"header-separator\"] = true;\n      }\n    }\n\n    const footerClasses: Record<string, boolean> = {};\n    if (this._hasFooter) {\n      footerClasses[\"actions\"] = true;\n      footerClasses[`footer-padding-${fp}`] = true;\n      if (this.separator) {\n        footerClasses[\"footer-separator\"] = true;\n      }\n    } else {\n      footerClasses[\"actions\"] = true;\n    }\n\n    return html`\n      <dialog\n        part=\"dialog\"\n        aria-modal=\"true\"\n        style=\"max-width: ${this.width};\"\n        @cancel=\"${this._handleCancel}\"\n        ${ref(this.dialogRef)}\n        ${animate({\n          keyframeOptions: {\n            duration: 300,\n            easing: \"ease-out\",\n          },\n        })}\n      >\n        <slot></slot>\n\n        ${when(this.message, () => html`\n          <p class=\"message\" part=\"message\">${this.message}</p>\n        `)}\n\n        <div class=${classMap(headerClasses)} part=\"header\">\n          <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot>\n        </div>\n\n        <div\n          class=${classMap({\n            [`body-padding-${bp}`]: this._hasBody,\n          })}\n          part=\"content\"\n        >\n          <slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>\n        </div>\n\n        <div class=${classMap(footerClasses)} part=\"actions footer\">\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n        ${when(this.closable, () => html`\n          <button\n            class=\"close-button\"\n            part=\"close-button\"\n            type=\"button\"\n            aria-label=\"Close dialog\"\n            @click=${() => this._requestClose(\"close-button\")}\n          >\n            <sky-icon icon=\"ion:close\"></sky-icon>\n          </button>\n        `)}\n      </dialog>\n    `;\n  }\n}\n"],"names":["_dialogOpenCount","_savedScrollY","SkyDialog","LitElement","constructor","super","this","open","closable","message","overlay","width","separator","persistent","closeOnEsc","headerPadding","bodyPadding","footerPadding","highlightOnOutsideClick","_hasHeader","_hasBody","_hasFooter","_isClosing","_openAnimation","_closeAnimation","_highlightAnimation","dialogRef","createRef","_onBackdropPointerDown","event","dialog","dialogElement","target","_highlightDialog","_requestClose","_onNativeClose","requestAnimationFrame","showModal","_onHeaderSlotChange","e","slot","_slotHasContent","_onBodySlotChange","_onFooterSlotChange","_onKeyDown","key","preventDefault","stopPropagation","_handleCancel","bind","firstUpdated","d","addEventListener","capture","disconnectedCallback","removeEventListener","_unlockScroll","close","show","hide","focusDialog","focus","getDialogElement","updated","changedProps","has","_handleOpenChange","get","previousOpen","_lockScroll","_animateOpen","_animateClose","window","document","scrollY","scrollTo","documentElement","setAttribute","Math","max","removeAttribute","_prefersReducedMotion","matchMedia","matches","cancel","duration","animation","animate","opacity","transform","transformOrigin","easing","fill","onfinish","dispatchEvent","CustomEvent","bubbles","composed","reason","detail","assignedNodes","flatten","some","n","nodeType","Node","TEXT_NODE","textContent","trim","render","valid","none","xs","sm","md","lg","xl","hp","bp","fp","headerClasses","footerClasses","html","ref","keyframeOptions","when","classMap","dependencies","SkyIcon","styles","css","__decorateClass","property","type","Boolean","reflect","prototype","String","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-dialog.js","sources":["../../src/sky-dialog/sky-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property, query, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { ref, createRef } from \"lit/directives/ref.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { animate } from \"@lit-labs/motion\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyDialogPadding = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\nexport type SkyDialogRequestCloseDetail = { reason: \"backdrop\" | \"escape\" | \"close-button\" };\r\n/** Shared scroll lock state so multiple dialogs don't double-restore scroll. */\r\nlet _dialogOpenCount = 0;\r\nlet _savedScrollY = 0;\r\n\r\n/**\r\n * @element sky-dialog\r\n *\r\n * @summary Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/dialog\r\n * @dependency sky-icon\r\n *\r\n * @uiVModel open request-close sync=constant:false\r\n *\r\n * @slot header - Header content area at the top of the dialog.\r\n * @slot body - Main content area of the dialog.\r\n * @slot footer - Footer actions area at the bottom of the dialog.\r\n *\r\n * @csspart dialog - The dialog surface wrapper element.\r\n * @csspart close-button - The top-right close button.\r\n * @csspart message - Optional message text shown above the body.\r\n * @csspart header - Container for the header slot.\r\n * @csspart content - Container for the body slot.\r\n * @csspart actions - Container for the footer slot.\r\n * @csspart footer - Alias part on the footer container.\r\n *\r\n * @fires {CustomEvent<SkyDialogRequestCloseDetail>} request-close - Fired when close intent is detected and parent should update `open`.\r\n * @fires {CustomEvent<void>} dialog-opened - Fired after open animation completes.\r\n * @fires {CustomEvent<void>} dialog-closed - Fired after close animation completes.\r\n *\r\n * @property {boolean} open - Whether the dialog is visible.\r\n * @property {boolean} closable - Shows a top-right close button.\r\n * @property {string} message - Optional message displayed above body content.\r\n * @property {boolean} overlay - Applies dim/blur backdrop effect.\r\n * @property {string} width - Max width of the dialog surface.\r\n * @property {boolean} separator - Shows separators around header/footer regions.\r\n * @property {boolean} persistent - Prevents outside/Escape close and highlights surface instead.\r\n * @property {boolean} closeOnEsc - Enables close intent on Escape key.\r\n * @property {SkyDialogPadding} headerPadding - Header padding token.\r\n * @property {SkyDialogPadding} bodyPadding - Body padding token.\r\n * @property {SkyDialogPadding} footerPadding - Footer padding token.\r\n * @property {boolean} highlightOnOutsideClick - Enables highlight animation on rejected outside click.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method show Opens the dialog by setting `open` to true.\r\n * @method hide Closes the dialog by setting `open` to false.\r\n * @method focusDialog Focuses the native dialog surface.\r\n * @method getDialogElement Returns the native dialog element reference.\r\n *\r\n * @Behavior\r\n * - Uses native `<dialog>` element with enhanced functionality\r\n * - Controlled exclusively by the `open` attribute/property\r\n * - Uses native dialog focus behavior\r\n * - Supports smooth animations with configurable timing\r\n * - Uses the floating modal surface (frosted tertiary glass)\r\n * - **Standard**: Click outside closes dialog\r\n * - **Persistent**: Click outside highlights dialog instead of closing\r\n * - **Closable**: Shows close button in top-right corner\r\n * - **Escape handling**: Configurable Escape key behavior\r\n * - Uses `aria-modal=\"true\"` for screen reader isolation\r\n * - Native dialog focus behavior\r\n * - Escape key handling with user preferences\r\n * - Close button with appropriate ARIA label\r\n * - Respects reduced motion preferences\r\n * - Smooth open/close animations with scale effects\r\n * - Highlight animation for persistent dialogs\r\n * - Configurable animation durations\r\n * - Uses Web Animations API for performance\r\n * - Works with any content in header/body/footer slots\r\n * - Compatible with form controls and interactive content\r\n * - Can be nested or stacked\r\n * - Responsive width and padding\r\n *\r\n * @example\r\n * ```html\r\n * <sky-dialog open closable width=\"420px\" separator>\r\n *   <h3 slot=\"header\">Confirm Action</h3>\r\n *   <p slot=\"body\">Are you sure you want to proceed?</p>\r\n *   <div slot=\"footer\">\r\n *     <button>Cancel</button>\r\n *     <button>Confirm</button>\r\n *   </div>\r\n * </sky-dialog>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-dialog open closable width=\"420px\" separator>\r\n *     <h3 slot=\"header\">Confirm Action</h3>\r\n *     <p slot=\"body\">Are you sure you want to proceed?</p>\r\n *     <div slot=\"footer\">\r\n *       <button>Cancel</button>\r\n *       <button>Confirm</button>\r\n *     </div>\r\n *   </sky-dialog>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-dialog open closable width=\"420px\" separator>\r\n *       <h3 slot=\"header\">Confirm Action</h3>\r\n *       <p slot=\"body\">Are you sure you want to proceed?</p>\r\n *       <div slot=\"footer\">\r\n *         <button>Cancel</button>\r\n *         <button>Confirm</button>\r\n *       </div>\r\n *     </sky-dialog>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-dialog\")\r\nexport class SkyDialog extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  /** @public Whether the dialog is visible. */\r\n  @property({ type: Boolean, reflect: true })\r\n  open = false;\r\n\r\n  /** @public Shows a top-right close button. */\r\n  @property({ type: Boolean, reflect: true })\r\n  closable = false;\r\n\r\n  /** @public Optional message displayed above the body. */\r\n  @property({ type: String })\r\n  message = \"\";\r\n\r\n  /** @public Applies dim/blur overlay on host. */\r\n  @property({ type: Boolean, reflect: true })\r\n  overlay = false;\r\n\r\n  /** @public Max width of the dialog surface (e.g., \"480px\" or \"auto\"). */\r\n  @property({ type: String })\r\n  width = \"auto\";\r\n\r\n  /** @public Shows header/footer separators. */\r\n  @property({ type: Boolean, reflect: true })\r\n  separator = false;\r\n\r\n  /** @public Prevents close on outside click, highlights instead. */\r\n  @property({ type: Boolean, reflect: true })\r\n  persistent = false;\r\n\r\n  /** @public Enables closing on Escape key. */\r\n  @property({ type: Boolean, reflect: true })\r\n  closeOnEsc = false;\r\n\r\n  /** @public Padding token for header container. */\r\n  @property({ type: String, reflect: true })\r\n  headerPadding: SkyDialogPadding = \"sm\";\r\n\r\n  /** @public Padding token for body container. */\r\n  @property({ type: String, reflect: true })\r\n  bodyPadding: SkyDialogPadding = \"sm\";\r\n\r\n  /** @public Padding token for footer container. */\r\n  @property({ type: String, reflect: true })\r\n  footerPadding: SkyDialogPadding = \"sm\";\r\n\r\n\r\n  /** @public Highlights dialog on outside click instead of closing. */\r\n  @property({\r\n    type: Boolean,\r\n    reflect: true,\r\n  })\r\n  highlightOnOutsideClick = true;\r\n\r\n  /** @private Whether header slot has content. */\r\n  @state()\r\n  private _hasHeader = false;\r\n\r\n  /** @private Whether body slot has content. */\r\n  @state()\r\n  private _hasBody = false;\r\n\r\n  /** @private Whether footer slot has content. */\r\n  @state()\r\n  private _hasFooter = false;\r\n\r\n  /** @private Whether dialog is in closing animation. */\r\n  @state()\r\n  private _isClosing = false;\r\n\r\n  /** @private Open animation instance. */\r\n  private _openAnimation: Animation | null = null;\r\n\r\n  /** @private Close animation instance. */\r\n  private _closeAnimation: Animation | null = null;\r\n\r\n  /** @private Highlight animation instance. */\r\n  private _highlightAnimation: Animation | null = null;\r\n\r\n  /** @private Reference to the native dialog element. */\r\n  @query(\"dialog\")\r\n  private dialogElement?: HTMLDialogElement;\r\n\r\n  /** @public Ref for the dialog element (e.g. for focus trap or positioning). */\r\n  dialogRef = createRef<HTMLDialogElement>();\r\n\r\n  /** @private Handle clicks on the dialog backdrop (outside surface). */\r\n  private _onBackdropPointerDown = (event: PointerEvent): void => {\r\n    const dialog = this.dialogElement;\r\n    if (!dialog || !dialog.open) return;\r\n\r\n    // In the <dialog> element, backdrop clicks are retargeted to the dialog itself.\r\n    // Clicks inside the surface target inner elements.\r\n    if (event.target !== dialog) return;\r\n\r\n    // \"Persistent\" dialogs don't close via outside click; they highlight instead (optional).\r\n    if (this.persistent) {\r\n      this._highlightDialog();\r\n      return;\r\n    }\r\n\r\n    // Standard behavior: outside click requests close.\r\n    this._requestClose(\"backdrop\");\r\n  };\r\n\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: contents;\r\n      font-family: var(--sky-font);\r\n    }\r\n\r\n    /* Floating modal template (§20.3) — single canonical surface */\r\n    dialog {\r\n      padding: 0;\r\n      margin: auto;\r\n      color: var(--sky-text-primary);\r\n      position: fixed;\r\n      box-sizing: border-box;\r\n      width: 100%;\r\n      text-align: center;\r\n      overflow: hidden;\r\n      z-index: var(--sky-z-modal, 1300);\r\n      background: var(--sky-glass-tertiary);\r\n      background-image: var(--sky-glass-surface);\r\n      backdrop-filter: var(--sky-blur-tertiary) var(--sky-saturation-tertiary)\r\n        var(--sky-brightness-tertiary);\r\n      -webkit-backdrop-filter: var(--sky-blur-tertiary)\r\n        var(--sky-saturation-tertiary) var(--sky-brightness-tertiary);\r\n      border: var(--sky-border-tertiary);\r\n      border-radius: var(--sky-radius-tertiary);\r\n      box-shadow:\r\n        var(--sky-box-shadow-inset),\r\n        var(--sky-box-shadow-tertiary);\r\n    }\r\n\r\n    dialog::backdrop {\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: backdrop-filter 0.3s ease-in-out;\r\n    }\r\n\r\n    :host([overlay]) dialog::backdrop {\r\n      backdrop-filter: var(--sky-blur-tertiary);\r\n      -webkit-backdrop-filter: var(--sky-blur-tertiary);\r\n    }\r\n\r\n    .header-padding-none,\r\n    .body-padding-none,\r\n    .footer-padding-none {\r\n      padding: var(--sky-space-0, 0);\r\n    }\r\n\r\n    .header-padding-xs,\r\n    .body-padding-xs,\r\n    .footer-padding-xs {\r\n      padding: var(--sky-space-1, 4px);\r\n    }\r\n\r\n    .header-padding-sm,\r\n    .body-padding-sm,\r\n    .footer-padding-sm {\r\n      padding: var(--sky-space-2, 8px);\r\n    }\r\n\r\n    .header-padding-md,\r\n    .body-padding-md,\r\n    .footer-padding-md {\r\n      padding: var(--sky-space-4, 16px);\r\n    }\r\n\r\n    .header-padding-lg,\r\n    .body-padding-lg,\r\n    .footer-padding-lg {\r\n      padding: var(--sky-space-6, 24px);\r\n    }\r\n\r\n    .header-padding-xl,\r\n    .body-padding-xl,\r\n    .footer-padding-xl {\r\n      padding: var(--sky-space-8, 32px);\r\n    }\r\n\r\n    /* Close button — §20.6 inner dismiss affordance */\r\n    .close-button {\r\n      position: absolute;\r\n      top: var(--sky-space-1\\\\.5, 6px);\r\n      right: var(--sky-space-1\\\\.5, 6px);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--sky-space-6, 24px);\r\n      height: var(--sky-space-6, 24px);\r\n      box-sizing: border-box;\r\n      border-radius: var(--sky-radius-full);\r\n      font-size: var(--sky-font-size-sm, 14px);\r\n      cursor: pointer;\r\n      color: var(--sky-text-primary);\r\n      border: none;\r\n      background-color: var(--sky-hover-primary);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      transition: color 0.2s ease, background-color 0.2s ease;\r\n      z-index: 1;\r\n    }\r\n\r\n    .close-button sky-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n    }\r\n\r\n    .close-button:hover {\r\n      color: var(--sky-danger-primary);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    /* Message */\r\n    .message {\r\n      padding: var(--sky-space-4, 16px) 0;\r\n      margin: 0;\r\n    }\r\n\r\n    ::slotted([slot=\"header\"]) {\r\n      font-size: var(--sky-font-size-md, 16px);\r\n      font-weight: var(--sky-font-weight-bold, 700);\r\n      color: var(--sky-text-primary);\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    dialog:focus,\r\n    dialog:focus-visible {\r\n      outline: none;\r\n    }\r\n\r\n    .header-separator {\r\n      border-bottom: var(--sky-border-primary);\r\n    }\r\n\r\n    .footer-separator {\r\n      border-top: var(--sky-border-primary);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    /* RTL support */\r\n    :host([dir=\"rtl\"]) .close-button {\r\n      right: auto;\r\n      left: var(--sky-space-1\\\\.5, 6px);\r\n    }\r\n\r\n    /* Animation classes */\r\n    dialog.opening {\r\n      opacity: 0;\r\n    }\r\n\r\n    dialog.closing {\r\n      opacity: 1;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      dialog::backdrop,\r\n      .close-button {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  constructor() {\r\n    super();\r\n    this._handleCancel = this._handleCancel.bind(this);\r\n  }\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    const d = this.dialogElement;\r\n    if (!d) return;\r\n\r\n    // Capture phase is important so we beat the native <dialog> cancel/close behavior\r\n    d.addEventListener(\"keydown\", this._onKeyDown, { capture: true });\r\n    d.addEventListener(\"pointerdown\", this._onBackdropPointerDown);\r\n    d.addEventListener(\"cancel\", this._handleCancel as any); // optional extra safety\r\n    d.addEventListener(\"close\", this._onNativeClose); // keep state in sync (below)\r\n  }\r\n\r\n  /** @protected */\r\n  override disconnectedCallback() {\r\n    const d = this.dialogElement;\r\n    if (d) {\r\n      d.removeEventListener(\"keydown\", this._onKeyDown, {\r\n        capture: true,\r\n      } as any);\r\n      d.removeEventListener(\"pointerdown\", this._onBackdropPointerDown);\r\n      d.removeEventListener(\"cancel\", this._handleCancel as any);\r\n      d.removeEventListener(\"close\", this._onNativeClose);\r\n    }\r\n    super.disconnectedCallback();\r\n    this._unlockScroll();\r\n    if (d?.open) d.close();\r\n  }\r\n\r\n  /**\r\n   * Opens the dialog programmatically.\r\n   * @public\r\n   */\r\n  public show(): void {\r\n    this.open = true;\r\n  }\r\n\r\n  /**\r\n   * Closes the dialog programmatically.\r\n   * @public\r\n   */\r\n  public hide(): void {\r\n    this.open = false;\r\n  }\r\n\r\n  /**\r\n   * Manually focuses the dialog element.\r\n   * @public\r\n   */\r\n  public focusDialog(): void {\r\n    if (this.dialogElement) {\r\n      this.dialogElement.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Gets the native dialog element.\r\n   * @returns The native HTMLDialogElement or undefined\r\n   * @public\r\n   */\r\n  public getDialogElement(): HTMLDialogElement | undefined {\r\n    return this.dialogElement;\r\n  }\r\n\r\n  /** @private */\r\n  private _onNativeClose = (): void => {\r\n    // If parent still says open=true, reopen immediately (persistent behavior)\r\n    if (this.open) {\r\n      // restore modal state\r\n      requestAnimationFrame(() => {\r\n        if (!this.dialogElement?.open) {\r\n          this.dialogElement?.showModal();\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  /** @protected */\r\n  override updated(changedProps: Map<string, any>) {\r\n    if (changedProps.has(\"open\")) {\r\n      // Use requestAnimationFrame to ensure DOM updates are complete\r\n      requestAnimationFrame(() => {\r\n        this._handleOpenChange(changedProps.get(\"open\"));\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles open state changes.\r\n   * @param previousOpen - Previous open state\r\n   * @private\r\n   */\r\n  private _handleOpenChange(previousOpen: boolean): void {\r\n    if (!this.dialogElement) return;\r\n\r\n    if (this.open && !this.dialogElement.open) {\r\n      this._lockScroll();\r\n      this.dialogElement.showModal();\r\n\r\n      requestAnimationFrame(() => {\r\n        this._animateOpen();\r\n      });\r\n    } else if (!this.open && previousOpen) {\r\n      this._isClosing = true;\r\n      this._animateClose();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  private _lockScroll(): void {\r\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\r\n    if (_dialogOpenCount === 0) {\r\n      _savedScrollY = window.scrollY;\r\n      window.scrollTo(0, 0);\r\n    }\r\n    _dialogOpenCount++;\r\n    document.documentElement.setAttribute(\"data-sky-dialog-open\", \"true\");\r\n  }\r\n\r\n  /** @private */\r\n  private _unlockScroll(): void {\r\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\r\n    _dialogOpenCount = Math.max(0, _dialogOpenCount - 1);\r\n    if (_dialogOpenCount === 0) {\r\n      document.documentElement.removeAttribute(\"data-sky-dialog-open\");\r\n      window.scrollTo(0, _savedScrollY);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  private _prefersReducedMotion(): boolean {\r\n    if (typeof window === \"undefined\" || !window.matchMedia) return false;\r\n    return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n  }\r\n\r\n  /** @private */\r\n  private _animateOpen(): void {\r\n    const dialog = this.dialogElement;\r\n    if (!dialog) return;\r\n\r\n    this._openAnimation?.cancel();\r\n    this._closeAnimation?.cancel();\r\n\r\n    const duration = this._prefersReducedMotion() ? 0 : 300;\r\n    const animation = dialog.animate(\r\n      [\r\n        {\r\n          opacity: 0,\r\n          transform: \"scale(0.95)\",\r\n          transformOrigin: \"center center\",\r\n        },\r\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\r\n      ],\r\n      {\r\n        duration,\r\n        easing: \"ease-out\",\r\n        fill: \"forwards\",\r\n      },\r\n    );\r\n\r\n    animation.onfinish = () => {\r\n      this.dispatchEvent(\r\n        new CustomEvent(\"dialog-opened\", {\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n    };\r\n\r\n    this._openAnimation = animation;\r\n  }\r\n\r\n  /** @private */\r\n  private _animateClose(): void {\r\n    const dialog = this.dialogElement;\r\n    if (!dialog) return;\r\n    this._openAnimation?.cancel();\r\n    this._closeAnimation?.cancel();\r\n\r\n    const duration = this._prefersReducedMotion() ? 0 : 150;\r\n    const animation = dialog.animate(\r\n      [\r\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\r\n        {\r\n          opacity: 0,\r\n          transform: \"scale(0.95)\",\r\n          transformOrigin: \"center center\",\r\n        },\r\n      ],\r\n      {\r\n        duration,\r\n        easing: \"ease-out\",\r\n        fill: \"forwards\",\r\n      },\r\n    );\r\n\r\n    animation.onfinish = () => {\r\n      dialog.close();\r\n      this._unlockScroll();\r\n      this._isClosing = false;\r\n      this.dispatchEvent(\r\n        new CustomEvent(\"dialog-closed\", {\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n    };\r\n\r\n    this._closeAnimation = animation;\r\n  }\r\n\r\n  /** @private */\r\n  private _handleCancel(event: Event): void {\r\n    event.preventDefault();\r\n\r\n    if (this.persistent || !this.closeOnEsc) {\r\n      this._highlightDialog();\r\n      return;\r\n    }\r\n\r\n    this._requestClose(\"escape\");\r\n  }\r\n\r\n  /** @private */\r\n  private _highlightDialog(): void {\r\n    if (!this.highlightOnOutsideClick) return;\r\n    if (this._prefersReducedMotion()) return;\r\n\r\n    const dialog = this.dialogElement;\r\n    if (!dialog) return;\r\n\r\n    this._highlightAnimation?.cancel();\r\n\r\n    const animation = dialog.animate(\r\n      [\r\n        { transform: \"scale(1)\" },\r\n        { transform: \"scale(1.05)\" },\r\n        { transform: \"scale(1)\" },\r\n      ],\r\n      {\r\n        duration: 300,\r\n        easing: \"ease-in-out\",\r\n      },\r\n    );\r\n\r\n    this._highlightAnimation = animation;\r\n  }\r\n\r\n\r\n\r\n  /** @private */\r\n  private _requestClose(reason: SkyDialogRequestCloseDetail[\"reason\"]): void {\r\n    if (this._isClosing) return;\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyDialogRequestCloseDetail>(\"request-close\", {\r\n        detail: { reason },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Checks if a slot has content.\r\n   * @param slot - Slot element to check\r\n   * @returns True if slot has content\r\n   * @private\r\n   */\r\n  private _slotHasContent(slot: HTMLSlotElement): boolean {\r\n    const nodes = slot.assignedNodes({ flatten: true });\r\n    return nodes.some((n) => {\r\n      if (n.nodeType === Node.TEXT_NODE) {\r\n        return !!n.textContent?.trim();\r\n      }\r\n      return true;\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  private _onHeaderSlotChange = (e: Event): void => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    this._hasHeader = this._slotHasContent(slot);\r\n  };\r\n\r\n  /** @private */\r\n  private _onBodySlotChange = (e: Event): void => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    this._hasBody = this._slotHasContent(slot);\r\n  };\r\n\r\n  /** @private */\r\n  private _onFooterSlotChange = (e: Event): void => {\r\n    const slot = e.target as HTMLSlotElement;\r\n    this._hasFooter = this._slotHasContent(slot);\r\n  };\r\n\r\n  /** @private */\r\n  private _onKeyDown = (e: KeyboardEvent): void => {\r\n    if (e.key !== \"Escape\") return;\r\n\r\n    // Always stop native <dialog> ESC behavior\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    // If persistent OR closeOnEsc is false → do NOT close, just highlight\r\n    if (this.persistent || !this.closeOnEsc) {\r\n      this._highlightDialog();\r\n      return;\r\n    }\r\n\r\n    // Allowed to close via ESC\r\n    this._requestClose(\"escape\");\r\n  };\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const valid: Record<SkyDialogPadding, true> = {\r\n      none: true,\r\n      xs: true,\r\n      sm: true,\r\n      md: true,\r\n      lg: true,\r\n      xl: true,\r\n    };\r\n\r\n    const hp = valid[this.headerPadding] ? this.headerPadding : \"md\";\r\n    const bp = valid[this.bodyPadding] ? this.bodyPadding : \"md\";\r\n    const fp = valid[this.footerPadding] ? this.footerPadding : \"md\";\r\n\r\n    const headerClasses: Record<string, boolean> = {};\r\n    if (this._hasHeader) {\r\n      headerClasses[`header-padding-${hp}`] = true;\r\n      if (this.separator) {\r\n        headerClasses[\"header-separator\"] = true;\r\n      }\r\n    }\r\n\r\n    const footerClasses: Record<string, boolean> = {};\r\n    if (this._hasFooter) {\r\n      footerClasses[\"actions\"] = true;\r\n      footerClasses[`footer-padding-${fp}`] = true;\r\n      if (this.separator) {\r\n        footerClasses[\"footer-separator\"] = true;\r\n      }\r\n    } else {\r\n      footerClasses[\"actions\"] = true;\r\n    }\r\n\r\n    return html`\r\n      <dialog\r\n        part=\"dialog\"\r\n        aria-modal=\"true\"\r\n        style=\"max-width: ${this.width};\"\r\n        @cancel=\"${this._handleCancel}\"\r\n        ${ref(this.dialogRef)}\r\n        ${animate({\r\n          keyframeOptions: {\r\n            duration: 300,\r\n            easing: \"ease-out\",\r\n          },\r\n        })}\r\n      >\r\n        <slot></slot>\r\n\r\n        ${when(this.message, () => html`\r\n          <p class=\"message\" part=\"message\">${this.message}</p>\r\n        `)}\r\n\r\n        <div class=${classMap(headerClasses)} part=\"header\">\r\n          <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot>\r\n        </div>\r\n\r\n        <div\r\n          class=${classMap({\r\n            [`body-padding-${bp}`]: this._hasBody,\r\n          })}\r\n          part=\"content\"\r\n        >\r\n          <slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>\r\n        </div>\r\n\r\n        <div class=${classMap(footerClasses)} part=\"actions footer\">\r\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\r\n        </div>\r\n        ${when(this.closable, () => html`\r\n          <button\r\n            class=\"close-button\"\r\n            part=\"close-button\"\r\n            type=\"button\"\r\n            aria-label=\"Close dialog\"\r\n            @click=${() => this._requestClose(\"close-button\")}\r\n          >\r\n            <sky-icon icon=\"ion:close\"></sky-icon>\r\n          </button>\r\n        `)}\r\n      </dialog>\r\n    `;\r\n  }\r\n}\r\n"],"names":["_dialogOpenCount","_savedScrollY","SkyDialog","LitElement","constructor","super","this","open","closable","message","overlay","width","separator","persistent","closeOnEsc","headerPadding","bodyPadding","footerPadding","highlightOnOutsideClick","_hasHeader","_hasBody","_hasFooter","_isClosing","_openAnimation","_closeAnimation","_highlightAnimation","dialogRef","createRef","_onBackdropPointerDown","event","dialog","dialogElement","target","_highlightDialog","_requestClose","preset","_presets","PresetController","_onNativeClose","requestAnimationFrame","showModal","_onHeaderSlotChange","e","slot","_slotHasContent","_onBodySlotChange","_onFooterSlotChange","_onKeyDown","key","preventDefault","stopPropagation","_handleCancel","bind","firstUpdated","d","addEventListener","capture","disconnectedCallback","removeEventListener","_unlockScroll","close","show","hide","focusDialog","focus","getDialogElement","updated","changedProps","has","_handleOpenChange","get","previousOpen","_lockScroll","_animateOpen","_animateClose","window","document","scrollY","scrollTo","documentElement","setAttribute","Math","max","removeAttribute","_prefersReducedMotion","matchMedia","matches","cancel","duration","animation","animate","opacity","transform","transformOrigin","easing","fill","onfinish","dispatchEvent","CustomEvent","bubbles","composed","reason","detail","assignedNodes","flatten","some","n","nodeType","Node","TEXT_NODE","textContent","trim","render","valid","none","xs","sm","md","lg","xl","hp","bp","fp","headerClasses","footerClasses","html","ref","keyframeOptions","when","classMap","dependencies","SkyIcon","styles","css","__decorateClass","property","type","Boolean","reflect","prototype","String","state","query","customElement"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ export type SkyDividerDirection = "horizontal" | "vertical";
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/divider
+ * @documentation https://sky-ui.com/components/divider
  *
  * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).
  *
@@ -18,6 +18,7 @@ export type SkyDividerDirection = "horizontal" | "vertical";
  * @property {SkyDividerDirection} direction - Divider orientation.
  * @property {boolean} inset - Enables indented divider layout.
  * @property {string} height - Height used for vertical orientation.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method getComputedColor Returns the resolved runtime divider color.
  * @method getComputedThickness Returns the resolved runtime divider thickness.
  *
@@ -100,6 +101,9 @@ export declare class SkyDivider extends LitElement {
      * @public
      */
     height: string;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     /** @protected */
     updated(changedProperties: Map<string, unknown>): void;

package/dist/sky-divider/sky-divider.js

@@ -1,18 +1,18 @@
-import{css as t,LitElement as r,html as i}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{when as s}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";var a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,r,i,e)=>{for(var o,s=e>1?void 0:e?d(r,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(s=(e?o(r,i,s):o(s))||s);return e&&s&&a(r,i,s),s};let l=class extends r{constructor(){super(...arguments),this.color="muted",this.thickness="1px",this.margin="",this.direction="horizontal",this.inset=!1,this.height="100%"}updated(t){t.has("color")&&this.style.setProperty("--divider-color",h(this.color)),t.has("thickness")&&this.style.setProperty("--divider-thickness",this.thickness),t.has("margin")&&this.style.setProperty("--divider-margin",this.margin),t.has("height")&&this.style.setProperty("--divider-height",this.height)}getComputedColor(){return getComputedStyle(this).getPropertyValue("--divider-color").trim()||this.color}getComputedThickness(){return getComputedStyle(this).getPropertyValue("--divider-thickness").trim()||this.thickness}render(){const t="vertical"===this.direction,r=n({vertical:!0,inset:this.inset}),e=n({horizontal:!0,inset:this.inset});return s(t,()=>i`
+import{css as t,LitElement as r,html as e}from"lit";import{property as i,customElement as o}from"lit/decorators.js";import{when as s}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{PresetController as p}from"../helper/controllers/preset-controller.js";var a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,l=(t,r,e,i)=>{for(var o,s=i>1?void 0:i?d(r,e):r,n=t.length-1;n>=0;n--)(o=t[n])&&(s=(i?o(r,e,s):o(s))||s);return i&&s&&a(r,e,s),s};let c=class extends r{constructor(){super(...arguments),this.color="muted",this.thickness="1px",this.margin="",this.direction="horizontal",this.inset=!1,this.height="100%",this.preset="",this._presets=new p(this)}updated(t){t.has("color")&&this.style.setProperty("--divider-color",h(this.color)),t.has("thickness")&&this.style.setProperty("--divider-thickness",this.thickness),t.has("margin")&&this.style.setProperty("--divider-margin",this.margin),t.has("height")&&this.style.setProperty("--divider-height",this.height)}getComputedColor(){return getComputedStyle(this).getPropertyValue("--divider-color").trim()||this.color}getComputedThickness(){return getComputedStyle(this).getPropertyValue("--divider-thickness").trim()||this.thickness}render(){const t="vertical"===this.direction,r=n({vertical:!0,inset:this.inset}),i=n({horizontal:!0,inset:this.inset});return s(t,()=>e`
         <div
           class=${r}
           part="divider"
           role="separator"
           aria-orientation="vertical"
         ></div>
-      `,()=>i`
+      `,()=>e`
         <hr
-          class=${e}
+          class=${i}
           part="divider"
           role="separator"
           aria-orientation="horizontal"
         />
-      `)}};l.styles=t`
+      `)}};c.styles=t`
     hr {
       border: none;
       border-top: var(--divider-thickness, 2px) solid var(--divider-color);
@@ -38,5 +38,5 @@ import{css as t,LitElement as r,html as i}from"lit";import{property as e,customE
       margin-bottom: 20px;
       height: calc(100% - 20px * 2);
     }
-  `,p([e({type:String})],l.prototype,"color",2),p([e({type:String})],l.prototype,"thickness",2),p([e({type:String})],l.prototype,"margin",2),p([e({type:String})],l.prototype,"direction",2),p([e({type:Boolean})],l.prototype,"inset",2),p([e({type:String})],l.prototype,"height",2),l=p([o("sky-divider")],l);export{l as SkyDivider};
+  `,l([i({type:String})],c.prototype,"color",2),l([i({type:String})],c.prototype,"thickness",2),l([i({type:String})],c.prototype,"margin",2),l([i({type:String})],c.prototype,"direction",2),l([i({type:Boolean})],c.prototype,"inset",2),l([i({type:String})],c.prototype,"height",2),l([i({type:String,reflect:!0})],c.prototype,"preset",2),c=l([o("sky-divider")],c);export{c as SkyDivider};
 //# sourceMappingURL=sky-divider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-divider.js","sources":["../../src/sky-divider/sky-divider.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\n\r\nexport type SkyDividerDirection = \"horizontal\" | \"vertical\";\r\n\r\n/**\r\n * @element sky-divider\r\n *\r\n * @summary Visual separator component for horizontal and vertical layout separation.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/divider\r\n *\r\n * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).\r\n *\r\n * @property {string} color - Divider color token or CSS color.\r\n * @property {string} thickness - Divider thickness (for example `1px` or `2px`).\r\n * @property {string} margin - Outer margin around the divider.\r\n * @property {SkyDividerDirection} direction - Divider orientation.\r\n * @property {boolean} inset - Enables indented divider layout.\r\n * @property {string} height - Height used for vertical orientation.\r\n * @method getComputedColor Returns the resolved runtime divider color.\r\n * @method getComputedThickness Returns the resolved runtime divider thickness.\r\n *\r\n * @cssprop --divider-color - CSS custom property for divider color.\r\n * @cssprop --divider-thickness - CSS custom property for divider thickness.\r\n * @cssprop --divider-margin - CSS custom property for divider margin.\r\n * @cssprop --divider-height - CSS custom property for vertical divider height.\r\n *\r\n * @Behavior\r\n * - Simple visual divider that can be horizontal or vertical\r\n * - Supports extensive customization via properties\r\n * - Automatically resolves color values using color resolver\r\n * - Updates CSS custom properties when properties change\r\n * - **horizontal**: Renders as `<hr>` element, spans full width\r\n * - **vertical**: Renders as `<div>` element, spans configurable height\r\n * - Horizontal dividers use semantic `<hr>` element\r\n * - Vertical dividers use `<div>` with appropriate styling\r\n *\r\n * @example\r\n * ```html\r\n * <div style=\"display: flex; align-items: center;\">\r\n *   <span>Left content</span>\r\n *   <sky-divider\r\n *     direction=\"vertical\"\r\n *     height=\"50px\"\r\n *     margin=\"0 16px\"\r\n *   ></sky-divider>\r\n *   <span>Right content</span>\r\n * </div>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <div style=\"display:flex;align-items:center;\">\r\n *     <span>Left content</span>\r\n *     <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *     <span>Right content</span>\r\n *   </div>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <div style={{ display: \"flex\", alignItems: \"center\" }}>\r\n *       <span>Left content</span>\r\n *       <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *       <span>Right content</span>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-divider\")\r\nexport class SkyDivider extends LitElement {\r\n  /**\r\n   * The color of the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  color = \"muted\";\r\n\r\n  /**\r\n   * The thickness of the divider (e.g., `\"1px\"`, `\"2px\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  thickness = \"1px\";\r\n\r\n  /**\r\n   * The margin around the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  margin = \"\";\r\n\r\n  /**\r\n   * Divider orientation.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyDividerDirection = \"horizontal\";\r\n\r\n  /**\r\n   * Whether the divider should be inset (indented).\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  inset = false;\r\n\r\n  /**\r\n   * The height of a vertical divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  height = \"100%\";\r\n\r\n  static override styles = css`\r\n    hr {\r\n      border: none;\r\n      border-top: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .vertical {\r\n      border-top: none;\r\n      border-left: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      height: var(--divider-height, 100%);\r\n      width: 0 !important;\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .inset.horizontal {\r\n      margin-left: 20px;\r\n      margin-right: 20px;\r\n      width: calc(100% - 20px * 2);\r\n    }\r\n\r\n    .inset.vertical {\r\n      margin-top: 20px;\r\n      margin-bottom: 20px;\r\n      height: calc(100% - 20px * 2);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n  override updated(changedProperties: Map<string, unknown>): void {\r\n    if (changedProperties.has(\"color\")) {\r\n      this.style.setProperty(\"--divider-color\", resolveColor(this.color));\r\n    }\r\n    if (changedProperties.has(\"thickness\")) {\r\n      this.style.setProperty(\"--divider-thickness\", this.thickness);\r\n    }\r\n    if (changedProperties.has(\"margin\")) {\r\n      this.style.setProperty(\"--divider-margin\", this.margin);\r\n    }\r\n    if (changedProperties.has(\"height\")) {\r\n      this.style.setProperty(\"--divider-height\", this.height);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed color of the divider.\r\n   * @returns Resolved color value\r\n   * @public\r\n   */\r\n  public getComputedColor(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-color\").trim() ||\r\n      this.color\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed thickness of the divider.\r\n   * @returns Resolved thickness value\r\n   * @public\r\n   */\r\n  public getComputedThickness(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-thickness\").trim() ||\r\n      this.thickness\r\n    );\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isVertical = this.direction === \"vertical\";\r\n    const verticalClasses = classMap({\r\n      vertical: true,\r\n      inset: this.inset,\r\n    });\r\n    const horizontalClasses = classMap({\r\n      horizontal: true,\r\n      inset: this.inset,\r\n    });\r\n\r\n    return when(\r\n      isVertical,\r\n      () => html`\r\n        <div\r\n          class=${verticalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"vertical\"\r\n        ></div>\r\n      `,\r\n      () => html`\r\n        <hr\r\n          class=${horizontalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"horizontal\"\r\n        />\r\n      `,\r\n    );\r\n  }\r\n}\r\n"],"names":["SkyDivider","LitElement","constructor","super","arguments","this","color","thickness","margin","direction","inset","height","updated","changedProperties","has","style","setProperty","resolveColor","getComputedColor","getComputedStyle","getPropertyValue","trim","getComputedThickness","render","isVertical","verticalClasses","classMap","vertical","horizontalClasses","horizontal","when","html","styles","css","__decorateClass","property","type","String","prototype","Boolean","customElement"],"mappings":"0dA8EO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,MAAQ,QAORD,KAAAE,UAAY,MAOZF,KAAAG,OAAS,GAOTH,KAAAI,UAAiC,aAOjCJ,KAAAK,OAAQ,EAORL,KAAAM,OAAS,MAAA,CA+BA,OAAAC,CAAQC,GACXA,EAAkBC,IAAI,UACxBT,KAAKU,MAAMC,YAAY,kBAAmBC,EAAaZ,KAAKC,QAE1DO,EAAkBC,IAAI,cACxBT,KAAKU,MAAMC,YAAY,sBAAuBX,KAAKE,WAEjDM,EAAkBC,IAAI,WACxBT,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKG,QAE9CK,EAAkBC,IAAI,WACxBT,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKM,OAEpD,CAOO,gBAAAO,GACL,OACEC,iBAAiBd,MAAMe,iBAAiB,mBAAmBC,QAC3DhB,KAAKC,KAET,CAOO,oBAAAgB,GACL,OACEH,iBAAiBd,MAAMe,iBAAiB,uBAAuBC,QAC/DhB,KAAKE,SAET,CAGS,MAAAgB,GACP,MAAMC,EAAgC,aAAnBnB,KAAKI,UAClBgB,EAAkBC,EAAS,CAC/BC,UAAU,EACVjB,MAAOL,KAAKK,QAERkB,EAAoBF,EAAS,CACjCG,YAAY,EACZnB,MAAOL,KAAKK,QAGd,OAAOoB,EACLN,EACA,IAAMO,CAAA;;kBAEMN;;;;;QAMZ,IAAMM,CAAA;;kBAEMH;;;;;QAOhB,GA9IW5B,EA2CKgC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IArCzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPrC,EAMXsC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPrC,EAaXsC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPrC,EAoBXsC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPrC,EA2BXsC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAjCPvC,EAkCXsC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPrC,EAyCXsC,UAAA,SAAA,GAzCWtC,EAANkC,EAAA,CADNM,EAAc,gBACFxC"}
+{"version":3,"file":"sky-divider.js","sources":["../../src/sky-divider/sky-divider.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyDividerDirection = \"horizontal\" | \"vertical\";\r\n\r\n/**\r\n * @element sky-divider\r\n *\r\n * @summary Visual separator component for horizontal and vertical layout separation.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/divider\r\n *\r\n * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).\r\n *\r\n * @property {string} color - Divider color token or CSS color.\r\n * @property {string} thickness - Divider thickness (for example `1px` or `2px`).\r\n * @property {string} margin - Outer margin around the divider.\r\n * @property {SkyDividerDirection} direction - Divider orientation.\r\n * @property {boolean} inset - Enables indented divider layout.\r\n * @property {string} height - Height used for vertical orientation.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method getComputedColor Returns the resolved runtime divider color.\r\n * @method getComputedThickness Returns the resolved runtime divider thickness.\r\n *\r\n * @cssprop --divider-color - CSS custom property for divider color.\r\n * @cssprop --divider-thickness - CSS custom property for divider thickness.\r\n * @cssprop --divider-margin - CSS custom property for divider margin.\r\n * @cssprop --divider-height - CSS custom property for vertical divider height.\r\n *\r\n * @Behavior\r\n * - Simple visual divider that can be horizontal or vertical\r\n * - Supports extensive customization via properties\r\n * - Automatically resolves color values using color resolver\r\n * - Updates CSS custom properties when properties change\r\n * - **horizontal**: Renders as `<hr>` element, spans full width\r\n * - **vertical**: Renders as `<div>` element, spans configurable height\r\n * - Horizontal dividers use semantic `<hr>` element\r\n * - Vertical dividers use `<div>` with appropriate styling\r\n *\r\n * @example\r\n * ```html\r\n * <div style=\"display: flex; align-items: center;\">\r\n *   <span>Left content</span>\r\n *   <sky-divider\r\n *     direction=\"vertical\"\r\n *     height=\"50px\"\r\n *     margin=\"0 16px\"\r\n *   ></sky-divider>\r\n *   <span>Right content</span>\r\n * </div>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <div style=\"display:flex;align-items:center;\">\r\n *     <span>Left content</span>\r\n *     <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *     <span>Right content</span>\r\n *   </div>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <div style={{ display: \"flex\", alignItems: \"center\" }}>\r\n *       <span>Left content</span>\r\n *       <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *       <span>Right content</span>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-divider\")\r\nexport class SkyDivider extends LitElement {\r\n  /**\r\n   * The color of the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  color = \"muted\";\r\n\r\n  /**\r\n   * The thickness of the divider (e.g., `\"1px\"`, `\"2px\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  thickness = \"1px\";\r\n\r\n  /**\r\n   * The margin around the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  margin = \"\";\r\n\r\n  /**\r\n   * Divider orientation.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyDividerDirection = \"horizontal\";\r\n\r\n  /**\r\n   * Whether the divider should be inset (indented).\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  inset = false;\r\n\r\n  /**\r\n   * The height of a vertical divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  height = \"100%\";\r\n\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    hr {\r\n      border: none;\r\n      border-top: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .vertical {\r\n      border-top: none;\r\n      border-left: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      height: var(--divider-height, 100%);\r\n      width: 0 !important;\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .inset.horizontal {\r\n      margin-left: 20px;\r\n      margin-right: 20px;\r\n      width: calc(100% - 20px * 2);\r\n    }\r\n\r\n    .inset.vertical {\r\n      margin-top: 20px;\r\n      margin-bottom: 20px;\r\n      height: calc(100% - 20px * 2);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n  override updated(changedProperties: Map<string, unknown>): void {\r\n    if (changedProperties.has(\"color\")) {\r\n      this.style.setProperty(\"--divider-color\", resolveColor(this.color));\r\n    }\r\n    if (changedProperties.has(\"thickness\")) {\r\n      this.style.setProperty(\"--divider-thickness\", this.thickness);\r\n    }\r\n    if (changedProperties.has(\"margin\")) {\r\n      this.style.setProperty(\"--divider-margin\", this.margin);\r\n    }\r\n    if (changedProperties.has(\"height\")) {\r\n      this.style.setProperty(\"--divider-height\", this.height);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed color of the divider.\r\n   * @returns Resolved color value\r\n   * @public\r\n   */\r\n  public getComputedColor(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-color\").trim() ||\r\n      this.color\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed thickness of the divider.\r\n   * @returns Resolved thickness value\r\n   * @public\r\n   */\r\n  public getComputedThickness(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-thickness\").trim() ||\r\n      this.thickness\r\n    );\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isVertical = this.direction === \"vertical\";\r\n    const verticalClasses = classMap({\r\n      vertical: true,\r\n      inset: this.inset,\r\n    });\r\n    const horizontalClasses = classMap({\r\n      horizontal: true,\r\n      inset: this.inset,\r\n    });\r\n\r\n    return when(\r\n      isVertical,\r\n      () => html`\r\n        <div\r\n          class=${verticalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"vertical\"\r\n        ></div>\r\n      `,\r\n      () => html`\r\n        <hr\r\n          class=${horizontalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"horizontal\"\r\n        />\r\n      `,\r\n    );\r\n  }\r\n}\r\n"],"names":["SkyDivider","LitElement","constructor","super","arguments","this","color","thickness","margin","direction","inset","height","preset","_presets","PresetController","updated","changedProperties","has","style","setProperty","resolveColor","getComputedColor","getComputedStyle","getPropertyValue","trim","getComputedThickness","render","isVertical","verticalClasses","classMap","vertical","horizontalClasses","horizontal","when","html","styles","css","__decorateClass","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"wiBAgFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,MAAQ,QAORD,KAAAE,UAAY,MAOZF,KAAAG,OAAS,GAOTH,KAAAI,UAAiC,aAOjCJ,KAAAK,OAAQ,EAORL,KAAAM,OAAS,OAIkCN,KAAAO,OAAS,GAEpDP,KAAQQ,SAAW,IAAIC,EAAiBT,KAAI,CA+BnC,OAAAU,CAAQC,GACXA,EAAkBC,IAAI,UACxBZ,KAAKa,MAAMC,YAAY,kBAAmBC,EAAaf,KAAKC,QAE1DU,EAAkBC,IAAI,cACxBZ,KAAKa,MAAMC,YAAY,sBAAuBd,KAAKE,WAEjDS,EAAkBC,IAAI,WACxBZ,KAAKa,MAAMC,YAAY,mBAAoBd,KAAKG,QAE9CQ,EAAkBC,IAAI,WACxBZ,KAAKa,MAAMC,YAAY,mBAAoBd,KAAKM,OAEpD,CAOO,gBAAAU,GACL,OACEC,iBAAiBjB,MAAMkB,iBAAiB,mBAAmBC,QAC3DnB,KAAKC,KAET,CAOO,oBAAAmB,GACL,OACEH,iBAAiBjB,MAAMkB,iBAAiB,uBAAuBC,QAC/DnB,KAAKE,SAET,CAGS,MAAAmB,GACP,MAAMC,EAAgC,aAAnBtB,KAAKI,UAClBmB,EAAkBC,EAAS,CAC/BC,UAAU,EACVpB,MAAOL,KAAKK,QAERqB,EAAoBF,EAAS,CACjCG,YAAY,EACZtB,MAAOL,KAAKK,QAGd,OAAOuB,EACLN,EACA,IAAMO,CAAA;;kBAEMN;;;;;QAMZ,IAAMM,CAAA;;kBAEMH;;;;;QAOhB,GApJW/B,EAiDKmC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA3CzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPxC,EAMXyC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPxC,EAaXyC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPxC,EAoBXyC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPxC,EA2BXyC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAjCP1C,EAkCXyC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPxC,EAyCXyC,UAAA,SAAA,GAI2CJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KA7CxB3C,EA6CgCyC,UAAA,SAAA,GA7ChCzC,EAANqC,EAAA,CADNO,EAAc,gBACF5C"}

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

@@ -12,7 +12,7 @@ export type SkyFlexboxAlignContent = "normal" | "stretch" | "center" | "start" |
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/flexbox
+ * @documentation https://sky-ui.com/components/flexbox
  *
  * @slot - Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).
  *
@@ -25,6 +25,7 @@ export type SkyFlexboxAlignContent = "normal" | "stretch" | "center" | "start" |
  * @property {string | undefined} gapX - Horizontal gap override.
  * @property {string | undefined} gapY - Vertical gap override.
  * @property {number} col - Total column count used for span calculations.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @fires {Event} slotchange - Fired when slotted children change.
  * @method recalculateSpans Recomputes slotted child span CSS variables.
@@ -122,6 +123,9 @@ export declare class SkyFlexbox extends LitElement {
      * @public
      */
     col: number;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     /** @private */
     private _childMo?;

package/dist/sky-flexbox/sky-flexbox.js

@@ -1,11 +1,11 @@
-import{css as a,LitElement as t,html as n}from"lit";import{property as s,customElement as e}from"lit/decorators.js";var r=Object.defineProperty,p=Object.getOwnPropertyDescriptor,i=(a,t,n,s)=>{for(var e,i=s>1?void 0:s?p(t,n):t,o=a.length-1;o>=0;o--)(e=a[o])&&(i=(s?e(t,n,i):e(i))||i);return s&&i&&r(t,n,i),i};let o=class extends t{constructor(){super(...arguments),this.direction="row",this.wrap="wrap",this.justify="flex-start",this.align="stretch",this.alignContent="normal",this.gap="16px",this.col=12,this.updateSpans=()=>{const a=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[];for(const t of a){if(!(t instanceof HTMLElement))continue;this.applySpanVar(t,"--span",this.readSpanRaw(t,"span","span")),this.applySpanVar(t,"--span-lg",this.readSpanRaw(t,"span-lg","spanLg")),this.applySpanVar(t,"--span-md",this.readSpanRaw(t,"span-md","spanMd")),this.applySpanVar(t,"--span-sm",this.readSpanRaw(t,"span-sm","spanSm")),this.applySpanVar(t,"--span-xs",this.readSpanRaw(t,"span-xs","spanXs"));null!=this.readSpanRaw(t,"span","span")||null!=this.readSpanRaw(t,"span-lg","spanLg")||null!=this.readSpanRaw(t,"span-md","spanMd")||null!=this.readSpanRaw(t,"span-sm","spanSm")||null!=this.readSpanRaw(t,"span-xs","spanXs")?t.dataset.flexSpan="":delete t.dataset.flexSpan}}}connectedCallback(){super.connectedCallback(),this._childMo=new MutationObserver(()=>this.updateSpans()),this._childMo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["span","span-lg","span-md","span-sm","span-xs"]})}disconnectedCallback(){super.disconnectedCallback(),this._childMo?.disconnect()}firstUpdated(){this.syncVars(),this.updateSpans()}updated(a){(a.has("wrap")||a.has("gap")||a.has("gapX")||a.has("gapY")||a.has("col")||a.has("justify")||a.has("direction")||a.has("align")||a.has("alignContent"))&&this.syncVars(),a.has("col")&&this.updateSpans()}syncVars(){const a={"--wrap":this.wrap,"--gap":this.gap,"--gap-x":this.gapX??this.gap,"--gap-y":this.gapY??this.gap,"--columns":String(this.col),"--justify":this.justify,"--direction":this.direction,"--align":this.align,"--align-content":this.alignContent};Object.entries(a).forEach(([a,t])=>this.style.setProperty(a,t))}recalculateSpans(){this.updateSpans()}render(){const a="column"===this.direction||"column-reverse"===this.direction;return n`
+import{css as t,LitElement as a,html as s}from"lit";import{property as n,customElement as e}from"lit/decorators.js";import{PresetController as r}from"../helper/controllers/preset-controller.js";var p=Object.defineProperty,i=Object.getOwnPropertyDescriptor,o=(t,a,s,n)=>{for(var e,r=n>1?void 0:n?i(a,s):a,o=t.length-1;o>=0;o--)(e=t[o])&&(r=(n?e(a,s,r):e(r))||r);return n&&r&&p(a,s,r),r};let l=class extends a{constructor(){super(...arguments),this.direction="row",this.wrap="wrap",this.justify="flex-start",this.align="stretch",this.alignContent="normal",this.gap="16px",this.col=12,this.preset="",this._presets=new r(this),this.updateSpans=()=>{const t=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[];for(const a of t){if(!(a instanceof HTMLElement))continue;this.applySpanVar(a,"--span",this.readSpanRaw(a,"span","span")),this.applySpanVar(a,"--span-lg",this.readSpanRaw(a,"span-lg","spanLg")),this.applySpanVar(a,"--span-md",this.readSpanRaw(a,"span-md","spanMd")),this.applySpanVar(a,"--span-sm",this.readSpanRaw(a,"span-sm","spanSm")),this.applySpanVar(a,"--span-xs",this.readSpanRaw(a,"span-xs","spanXs"));null!=this.readSpanRaw(a,"span","span")||null!=this.readSpanRaw(a,"span-lg","spanLg")||null!=this.readSpanRaw(a,"span-md","spanMd")||null!=this.readSpanRaw(a,"span-sm","spanSm")||null!=this.readSpanRaw(a,"span-xs","spanXs")?a.dataset.flexSpan="":delete a.dataset.flexSpan}}}connectedCallback(){super.connectedCallback(),this._childMo=new MutationObserver(()=>this.updateSpans()),this._childMo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["span","span-lg","span-md","span-sm","span-xs"]})}disconnectedCallback(){super.disconnectedCallback(),this._childMo?.disconnect()}firstUpdated(){this.syncVars(),this.updateSpans()}updated(t){(t.has("wrap")||t.has("gap")||t.has("gapX")||t.has("gapY")||t.has("col")||t.has("justify")||t.has("direction")||t.has("align")||t.has("alignContent"))&&this.syncVars(),t.has("col")&&this.updateSpans()}syncVars(){const t={"--wrap":this.wrap,"--gap":this.gap,"--gap-x":this.gapX??this.gap,"--gap-y":this.gapY??this.gap,"--columns":String(this.col),"--justify":this.justify,"--direction":this.direction,"--align":this.align,"--align-content":this.alignContent};Object.entries(t).forEach(([t,a])=>this.style.setProperty(t,a))}recalculateSpans(){this.updateSpans()}render(){const t="column"===this.direction||"column-reverse"===this.direction;return s`
       <div
-        class="flex-container ${a?"is-column":"is-row"}"
+        class="flex-container ${t?"is-column":"is-row"}"
         part="container"
       >
         <slot @slotchange=${this.updateSpans}></slot>
       </div>
-    `}readSpanRaw(a,t,n){const s=a.getAttribute(t);if(null!=s&&""!==s)return s;const e=a[n];return null!=e&&""!==e?String(e):null}applySpanVar(a,t,n){const s=this.clampSpan(n);s?a.style.setProperty(t,String(s)):a.style.removeProperty(t)}clampSpan(a){if(!a)return null;return Math.max(1,Math.min(this.col,Number(a)||1))}};o.styles=a`
+    `}readSpanRaw(t,a,s){const n=t.getAttribute(a);if(null!=n&&""!==n)return n;const e=t[s];return null!=e&&""!==e?String(e):null}applySpanVar(t,a,s){const n=this.clampSpan(s);n?t.style.setProperty(a,String(n)):t.style.removeProperty(a)}clampSpan(t){if(!t)return null;return Math.max(1,Math.min(this.col,Number(t)||1))}};l.styles=t`
     :host {
       display: block;
     }
@@ -78,5 +78,5 @@ import{css as a,LitElement as t,html as n}from"lit";import{property as s,customE
         --span-current: var(--span-xs, var(--span-current));
       }
     }
-  `,i([s({type:String})],o.prototype,"direction",2),i([s({type:String})],o.prototype,"wrap",2),i([s({type:String})],o.prototype,"justify",2),i([s({type:String})],o.prototype,"align",2),i([s({type:String})],o.prototype,"alignContent",2),i([s({type:String})],o.prototype,"gap",2),i([s({type:String})],o.prototype,"gapX",2),i([s({type:String})],o.prototype,"gapY",2),i([s({type:Number})],o.prototype,"col",2),o=i([e("sky-flexbox")],o);export{o as SkyFlexbox};
+  `,o([n({type:String})],l.prototype,"direction",2),o([n({type:String})],l.prototype,"wrap",2),o([n({type:String})],l.prototype,"justify",2),o([n({type:String})],l.prototype,"align",2),o([n({type:String})],l.prototype,"alignContent",2),o([n({type:String})],l.prototype,"gap",2),o([n({type:String})],l.prototype,"gapX",2),o([n({type:String})],l.prototype,"gapY",2),o([n({type:Number})],l.prototype,"col",2),o([n({type:String,reflect:!0})],l.prototype,"preset",2),l=o([e("sky-flexbox")],l);export{l as SkyFlexbox};
 //# sourceMappingURL=sky-flexbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sky-flexbox.js","sources":["../../src/sky-flexbox/sky-flexbox.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\n\r\nexport type SkyFlexboxDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\r\nexport type SkyFlexboxWrap = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\r\nexport type SkyFlexboxJustify =\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\nexport type SkyFlexboxAlign = \"stretch\" | \"flex-start\" | \"center\" | \"flex-end\" | \"baseline\";\r\nexport type SkyFlexboxAlignContent =\r\n  | \"normal\"\r\n  | \"stretch\"\r\n  | \"center\"\r\n  | \"start\"\r\n  | \"end\"\r\n  | \"flex-start\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-flexbox\r\n *\r\n * @summary Flexbox container with grid-like span support for slotted children.\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 flex items (`<sky-flexcol>` or plain elements with `span` attributes).\r\n *\r\n * @property {SkyFlexboxDirection} direction - Flex direction.\r\n * @property {SkyFlexboxWrap} wrap - Flex wrap behavior.\r\n * @property {SkyFlexboxJustify} justify - Main-axis alignment.\r\n * @property {SkyFlexboxAlign} align - Cross-axis alignment.\r\n * @property {SkyFlexboxAlignContent} alignContent - Multi-line cross-axis distribution.\r\n * @property {string} gap - Shared row/column gap value.\r\n * @property {string | undefined} gapX - Horizontal gap override.\r\n * @property {string | undefined} gapY - Vertical gap override.\r\n * @property {number} col - Total column count used for span calculations.\r\n *\r\n * @fires {Event} slotchange - Fired when slotted children change.\r\n * @method recalculateSpans Recomputes slotted child span CSS variables.\r\n *\r\n * @csspart container - The flex container element.\r\n *\r\n * @Behavior\r\n * - Implements CSS Flexbox with custom property-based configuration\r\n * - Supports responsive span calculations based on column grid system\r\n * - Automatically manages CSS custom properties for child elements\r\n * - Handles responsive breakpoints through span attributes\r\n *\r\n * - Uses a configurable column count (default: 12)\r\n * - Calculates item widths based on span values (1-col through total columns)\r\n * - Supports responsive spans: `span-lg`, `span-md`, `span-sm`, `span-xs`\r\n * - Clamps span values to valid range (1 to column count)\r\n *\r\n * - Supports unified `gap` property\r\n * - Optional `gapX` and `gapY` for separate horizontal/vertical spacing\r\n * - Gap values can use any CSS unit (px, rem, em, %, etc.)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\" span-md=\"12\">\r\n *     Main content\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\" span-md=\"12\">\r\n *     Sidebar\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-flexbox\")\r\nexport class SkyFlexbox extends LitElement {\r\n  /**\r\n   * Flex direction.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyFlexboxDirection = \"row\";\r\n\r\n  /**\r\n   * Wrap behavior.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  wrap: SkyFlexboxWrap = \"wrap\";\r\n\r\n  /**\r\n   * Main axis justification.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  justify: SkyFlexboxJustify = \"flex-start\";\r\n\r\n  /**\r\n   * Cross axis alignment.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  align: SkyFlexboxAlign = \"stretch\";\r\n\r\n  /**\r\n   * Multi-line alignment (when wrapping).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignContent: SkyFlexboxAlignContent = \"normal\";\r\n\r\n  /**\r\n   * Shorthand gap; used if gapX/gapY not provided.\r\n   * @public\r\n   */\r\n  @property({ type: String }) gap: string = \"16px\";\r\n\r\n  /**\r\n   * Column gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapX?: string;\r\n\r\n  /**\r\n   * Row gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapY?: string;\r\n\r\n  /**\r\n   * Total columns used for span calculation.\r\n   * @public\r\n   */\r\n  @property({ type: Number }) col: number = 12;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n\r\n    .flex-container {\r\n      display: flex;\r\n      box-sizing: border-box;\r\n      flex-wrap: var(--wrap, wrap);\r\n      gap: var(--gap-y, var(--gap, 16px)) var(--gap-x, var(--gap, 16px));\r\n      justify-content: var(--justify, flex-start);\r\n      align-items: var(--align, stretch);\r\n      align-content: var(--align-content, normal);\r\n      flex-direction: var(--direction, row);\r\n    }\r\n\r\n    /* Default behaviour for any slotted child: */\r\n    ::slotted(*) {\r\n      box-sizing: border-box;\r\n      min-width: 0;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted(*) {\r\n      flex-grow: 0;\r\n      flex-shrink: 1;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted([data-flex-span]) {\r\n      flex-shrink: 0;\r\n      --span-current: var(--span, 1);\r\n      --span-width: calc(\r\n        100% * var(--span-current) / var(--columns, 12) -\r\n          var(--gap-x, var(--gap, 16px)) *\r\n          (var(--columns, 12) - var(--span-current)) / var(--columns, 12)\r\n      );\r\n\r\n      flex-basis: var(--span-width);\r\n      width: var(--span-width);\r\n      max-width: var(--span-width);\r\n    }\r\n\r\n    .flex-container.is-column ::slotted(*) {\r\n      width: 100%;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-lg, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-md, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-sm, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 576px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-xs, var(--span-current));\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */\r\n  private _childMo?: MutationObserver;\r\n\r\n  /** @protected */\r\n  override connectedCallback() {\r\n    super.connectedCallback();\r\n    this._childMo = new MutationObserver(() => this.updateSpans());\r\n    this._childMo.observe(this, {\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n      attributeFilter: [\"span\", \"span-lg\", \"span-md\", \"span-sm\", \"span-xs\"],\r\n    });\r\n  }\r\n\r\n  /** @protected */\r\n  override disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this._childMo?.disconnect();\r\n  }\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n    this.updateSpans(); // initial\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"wrap\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"gapX\") ||\r\n      changed.has(\"gapY\") ||\r\n      changed.has(\"col\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"direction\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"alignContent\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n    if (changed.has(\"col\")) {\r\n      this.updateSpans(); // re-validate span bounds when column count changes\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    const styles = {\r\n      \"--wrap\": this.wrap,\r\n      \"--gap\": this.gap,\r\n      \"--gap-x\": this.gapX ?? this.gap,\r\n      \"--gap-y\": this.gapY ?? this.gap,\r\n      \"--columns\": String(this.col),\r\n      \"--justify\": this.justify,\r\n      \"--direction\": this.direction,\r\n      \"--align\": this.align,\r\n      \"--align-content\": this.alignContent,\r\n    } as Record<string, string>;\r\n    Object.entries(styles).forEach(([k, v]) => this.style.setProperty(k, v));\r\n  }\r\n\r\n  /**\r\n   * Forces recalculation of spans for all child elements.\r\n   * Useful when dynamically adding/removing items.\r\n   * @public\r\n   */\r\n  public recalculateSpans() {\r\n    this.updateSpans();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isColumn =\r\n      this.direction === \"column\" || this.direction === \"column-reverse\";\r\n\r\n    return html`\r\n      <div\r\n        class=\"flex-container ${isColumn ? \"is-column\" : \"is-row\"}\"\r\n        part=\"container\"\r\n      >\r\n        <slot @slotchange=${this.updateSpans}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Reads span attributes off slotted children and maps them to CSS vars:\r\n   * span, span-lg, span-md, span-sm, span-xs\r\n   * @private\r\n   */\r\n  private updateSpans = () => {\r\n    const nodes =\r\n      this.shadowRoot\r\n        ?.querySelector(\"slot\")\r\n        ?.assignedElements({ flatten: true }) ?? [];\r\n    for (const el of nodes) {\r\n      if (!(el instanceof HTMLElement)) continue;\r\n\r\n      this.applySpanVar(el, \"--span\", this.readSpanRaw(el, \"span\", \"span\"));\r\n      this.applySpanVar(el, \"--span-lg\", this.readSpanRaw(el, \"span-lg\", \"spanLg\"));\r\n      this.applySpanVar(el, \"--span-md\", this.readSpanRaw(el, \"span-md\", \"spanMd\"));\r\n      this.applySpanVar(el, \"--span-sm\", this.readSpanRaw(el, \"span-sm\", \"spanSm\"));\r\n      this.applySpanVar(el, \"--span-xs\", this.readSpanRaw(el, \"span-xs\", \"spanXs\"));\r\n\r\n      const hasSpan =\r\n        this.readSpanRaw(el, \"span\", \"span\") != null ||\r\n        this.readSpanRaw(el, \"span-lg\", \"spanLg\") != null ||\r\n        this.readSpanRaw(el, \"span-md\", \"spanMd\") != null ||\r\n        this.readSpanRaw(el, \"span-sm\", \"spanSm\") != null ||\r\n        this.readSpanRaw(el, \"span-xs\", \"spanXs\") != null;\r\n\r\n      if (hasSpan) el.dataset.flexSpan = \"\";\r\n      else delete el.dataset.flexSpan;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Reads a span value from an HTML attribute or element property.\r\n   * @private\r\n   */\r\n  private readSpanRaw(\r\n    el: HTMLElement,\r\n    attrName: string,\r\n    propName: string,\r\n  ): string | null {\r\n    const fromAttr = el.getAttribute(attrName);\r\n    if (fromAttr != null && fromAttr !== \"\") return fromAttr;\r\n    const fromProp = (el as unknown as Record<string, unknown>)[propName];\r\n    if (fromProp != null && fromProp !== \"\") return String(fromProp);\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Sets or clears a span CSS variable on a slotted child.\r\n   * @private\r\n   */\r\n  private applySpanVar(\r\n    el: HTMLElement,\r\n    cssVar: string,\r\n    raw: string | null,\r\n  ): void {\r\n    const value = this.clampSpan(raw);\r\n    if (value) el.style.setProperty(cssVar, String(value));\r\n    else el.style.removeProperty(cssVar);\r\n  }\r\n\r\n  /**\r\n   * Clamps span value to valid range (1 to column count).\r\n   * @param raw - Raw span value from attribute\r\n   * @returns Clamped number or null if invalid\r\n   * @private\r\n   */\r\n  private clampSpan(raw: string | null): number | null {\r\n    if (!raw) return null;\r\n    const n = Math.max(1, Math.min(this.col, Number(raw) || 1));\r\n    return n;\r\n  }\r\n}\r\n"],"names":["SkyFlexbox","LitElement","constructor","super","arguments","this","direction","wrap","justify","align","alignContent","gap","col","updateSpans","nodes","shadowRoot","querySelector","assignedElements","flatten","el","HTMLElement","applySpanVar","readSpanRaw","dataset","flexSpan","connectedCallback","_childMo","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","disconnect","firstUpdated","syncVars","updated","changed","has","styles","gapX","gapY","String","Object","entries","forEach","k","v","style","setProperty","recalculateSpans","render","isColumn","html","attrName","propName","fromAttr","getAttribute","fromProp","cssVar","raw","value","clampSpan","removeProperty","Math","max","min","Number","css","__decorateClass","property","type","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-flexbox.js","sources":["../../src/sky-flexbox/sky-flexbox.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 SkyFlexboxDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\r\nexport type SkyFlexboxWrap = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\r\nexport type SkyFlexboxJustify =\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\nexport type SkyFlexboxAlign = \"stretch\" | \"flex-start\" | \"center\" | \"flex-end\" | \"baseline\";\r\nexport type SkyFlexboxAlignContent =\r\n  | \"normal\"\r\n  | \"stretch\"\r\n  | \"center\"\r\n  | \"start\"\r\n  | \"end\"\r\n  | \"flex-start\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-flexbox\r\n *\r\n * @summary Flexbox container with grid-like span support for slotted children.\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 flex items (`<sky-flexcol>` or plain elements with `span` attributes).\r\n *\r\n * @property {SkyFlexboxDirection} direction - Flex direction.\r\n * @property {SkyFlexboxWrap} wrap - Flex wrap behavior.\r\n * @property {SkyFlexboxJustify} justify - Main-axis alignment.\r\n * @property {SkyFlexboxAlign} align - Cross-axis alignment.\r\n * @property {SkyFlexboxAlignContent} alignContent - Multi-line cross-axis distribution.\r\n * @property {string} gap - Shared row/column gap value.\r\n * @property {string | undefined} gapX - Horizontal gap override.\r\n * @property {string | undefined} gapY - Vertical gap override.\r\n * @property {number} col - Total column count used for span calculations.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n *\r\n * @fires {Event} slotchange - Fired when slotted children change.\r\n * @method recalculateSpans Recomputes slotted child span CSS variables.\r\n *\r\n * @csspart container - The flex container element.\r\n *\r\n * @Behavior\r\n * - Implements CSS Flexbox with custom property-based configuration\r\n * - Supports responsive span calculations based on column grid system\r\n * - Automatically manages CSS custom properties for child elements\r\n * - Handles responsive breakpoints through span attributes\r\n *\r\n * - Uses a configurable column count (default: 12)\r\n * - Calculates item widths based on span values (1-col through total columns)\r\n * - Supports responsive spans: `span-lg`, `span-md`, `span-sm`, `span-xs`\r\n * - Clamps span values to valid range (1 to column count)\r\n *\r\n * - Supports unified `gap` property\r\n * - Optional `gapX` and `gapY` for separate horizontal/vertical spacing\r\n * - Gap values can use any CSS unit (px, rem, em, %, etc.)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\" span-md=\"12\">\r\n *     Main content\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\" span-md=\"12\">\r\n *     Sidebar\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-flexbox\")\r\nexport class SkyFlexbox extends LitElement {\r\n  /**\r\n   * Flex direction.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyFlexboxDirection = \"row\";\r\n\r\n  /**\r\n   * Wrap behavior.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  wrap: SkyFlexboxWrap = \"wrap\";\r\n\r\n  /**\r\n   * Main axis justification.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  justify: SkyFlexboxJustify = \"flex-start\";\r\n\r\n  /**\r\n   * Cross axis alignment.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  align: SkyFlexboxAlign = \"stretch\";\r\n\r\n  /**\r\n   * Multi-line alignment (when wrapping).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignContent: SkyFlexboxAlignContent = \"normal\";\r\n\r\n  /**\r\n   * Shorthand gap; used if gapX/gapY not provided.\r\n   * @public\r\n   */\r\n  @property({ type: String }) gap: string = \"16px\";\r\n\r\n  /**\r\n   * Column gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapX?: string;\r\n\r\n  /**\r\n   * Row gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapY?: string;\r\n\r\n  /**\r\n   * Total columns used for span calculation.\r\n   * @public\r\n   */\r\n  @property({ type: Number }) col: number = 12;\r\n\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    .flex-container {\r\n      display: flex;\r\n      box-sizing: border-box;\r\n      flex-wrap: var(--wrap, wrap);\r\n      gap: var(--gap-y, var(--gap, 16px)) var(--gap-x, var(--gap, 16px));\r\n      justify-content: var(--justify, flex-start);\r\n      align-items: var(--align, stretch);\r\n      align-content: var(--align-content, normal);\r\n      flex-direction: var(--direction, row);\r\n    }\r\n\r\n    /* Default behaviour for any slotted child: */\r\n    ::slotted(*) {\r\n      box-sizing: border-box;\r\n      min-width: 0;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted(*) {\r\n      flex-grow: 0;\r\n      flex-shrink: 1;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted([data-flex-span]) {\r\n      flex-shrink: 0;\r\n      --span-current: var(--span, 1);\r\n      --span-width: calc(\r\n        100% * var(--span-current) / var(--columns, 12) -\r\n          var(--gap-x, var(--gap, 16px)) *\r\n          (var(--columns, 12) - var(--span-current)) / var(--columns, 12)\r\n      );\r\n\r\n      flex-basis: var(--span-width);\r\n      width: var(--span-width);\r\n      max-width: var(--span-width);\r\n    }\r\n\r\n    .flex-container.is-column ::slotted(*) {\r\n      width: 100%;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-lg, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-md, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-sm, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 576px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-xs, var(--span-current));\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */\r\n  private _childMo?: MutationObserver;\r\n\r\n  /** @protected */\r\n  override connectedCallback() {\r\n    super.connectedCallback();\r\n    this._childMo = new MutationObserver(() => this.updateSpans());\r\n    this._childMo.observe(this, {\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n      attributeFilter: [\"span\", \"span-lg\", \"span-md\", \"span-sm\", \"span-xs\"],\r\n    });\r\n  }\r\n\r\n  /** @protected */\r\n  override disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this._childMo?.disconnect();\r\n  }\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n    this.updateSpans(); // initial\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"wrap\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"gapX\") ||\r\n      changed.has(\"gapY\") ||\r\n      changed.has(\"col\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"direction\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"alignContent\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n    if (changed.has(\"col\")) {\r\n      this.updateSpans(); // re-validate span bounds when column count changes\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    const styles = {\r\n      \"--wrap\": this.wrap,\r\n      \"--gap\": this.gap,\r\n      \"--gap-x\": this.gapX ?? this.gap,\r\n      \"--gap-y\": this.gapY ?? this.gap,\r\n      \"--columns\": String(this.col),\r\n      \"--justify\": this.justify,\r\n      \"--direction\": this.direction,\r\n      \"--align\": this.align,\r\n      \"--align-content\": this.alignContent,\r\n    } as Record<string, string>;\r\n    Object.entries(styles).forEach(([k, v]) => this.style.setProperty(k, v));\r\n  }\r\n\r\n  /**\r\n   * Forces recalculation of spans for all child elements.\r\n   * Useful when dynamically adding/removing items.\r\n   * @public\r\n   */\r\n  public recalculateSpans() {\r\n    this.updateSpans();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isColumn =\r\n      this.direction === \"column\" || this.direction === \"column-reverse\";\r\n\r\n    return html`\r\n      <div\r\n        class=\"flex-container ${isColumn ? \"is-column\" : \"is-row\"}\"\r\n        part=\"container\"\r\n      >\r\n        <slot @slotchange=${this.updateSpans}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Reads span attributes off slotted children and maps them to CSS vars:\r\n   * span, span-lg, span-md, span-sm, span-xs\r\n   * @private\r\n   */\r\n  private updateSpans = () => {\r\n    const nodes =\r\n      this.shadowRoot\r\n        ?.querySelector(\"slot\")\r\n        ?.assignedElements({ flatten: true }) ?? [];\r\n    for (const el of nodes) {\r\n      if (!(el instanceof HTMLElement)) continue;\r\n\r\n      this.applySpanVar(el, \"--span\", this.readSpanRaw(el, \"span\", \"span\"));\r\n      this.applySpanVar(el, \"--span-lg\", this.readSpanRaw(el, \"span-lg\", \"spanLg\"));\r\n      this.applySpanVar(el, \"--span-md\", this.readSpanRaw(el, \"span-md\", \"spanMd\"));\r\n      this.applySpanVar(el, \"--span-sm\", this.readSpanRaw(el, \"span-sm\", \"spanSm\"));\r\n      this.applySpanVar(el, \"--span-xs\", this.readSpanRaw(el, \"span-xs\", \"spanXs\"));\r\n\r\n      const hasSpan =\r\n        this.readSpanRaw(el, \"span\", \"span\") != null ||\r\n        this.readSpanRaw(el, \"span-lg\", \"spanLg\") != null ||\r\n        this.readSpanRaw(el, \"span-md\", \"spanMd\") != null ||\r\n        this.readSpanRaw(el, \"span-sm\", \"spanSm\") != null ||\r\n        this.readSpanRaw(el, \"span-xs\", \"spanXs\") != null;\r\n\r\n      if (hasSpan) el.dataset.flexSpan = \"\";\r\n      else delete el.dataset.flexSpan;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Reads a span value from an HTML attribute or element property.\r\n   * @private\r\n   */\r\n  private readSpanRaw(\r\n    el: HTMLElement,\r\n    attrName: string,\r\n    propName: string,\r\n  ): string | null {\r\n    const fromAttr = el.getAttribute(attrName);\r\n    if (fromAttr != null && fromAttr !== \"\") return fromAttr;\r\n    const fromProp = (el as unknown as Record<string, unknown>)[propName];\r\n    if (fromProp != null && fromProp !== \"\") return String(fromProp);\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Sets or clears a span CSS variable on a slotted child.\r\n   * @private\r\n   */\r\n  private applySpanVar(\r\n    el: HTMLElement,\r\n    cssVar: string,\r\n    raw: string | null,\r\n  ): void {\r\n    const value = this.clampSpan(raw);\r\n    if (value) el.style.setProperty(cssVar, String(value));\r\n    else el.style.removeProperty(cssVar);\r\n  }\r\n\r\n  /**\r\n   * Clamps span value to valid range (1 to column count).\r\n   * @param raw - Raw span value from attribute\r\n   * @returns Clamped number or null if invalid\r\n   * @private\r\n   */\r\n  private clampSpan(raw: string | null): number | null {\r\n    if (!raw) return null;\r\n    const n = Math.max(1, Math.min(this.col, Number(raw) || 1));\r\n    return n;\r\n  }\r\n}\r\n"],"names":["SkyFlexbox","LitElement","constructor","super","arguments","this","direction","wrap","justify","align","alignContent","gap","col","preset","_presets","PresetController","updateSpans","nodes","shadowRoot","querySelector","assignedElements","flatten","el","HTMLElement","applySpanVar","readSpanRaw","dataset","flexSpan","connectedCallback","_childMo","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","disconnect","firstUpdated","syncVars","updated","changed","has","styles","gapX","gapY","String","Object","entries","forEach","k","v","style","setProperty","recalculateSpans","render","isColumn","html","attrName","propName","fromAttr","getAttribute","fromProp","cssVar","raw","value","clampSpan","removeProperty","Math","max","min","Number","css","__decorateClass","property","type","prototype","reflect","customElement"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ export type SkyFlexcolAlignSelf = "auto" | "flex-start" | "center" | "flex-end"
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/flexbox
+ * @documentation https://sky-ui.com/components/flexbox
  *
  * @slot - Default slot for column content.
  *
@@ -22,6 +22,7 @@ export type SkyFlexcolAlignSelf = "auto" | "flex-start" | "center" | "flex-end"
  * @property {string | null} basis - Flex basis override.
  * @property {number | undefined} order - Flex order override.
  * @property {SkyFlexcolAlignSelf | undefined} alignSelf - Cross-axis alignment override.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method refreshStyles Re-applies CSS custom properties from current values.
  * @method getSpan Returns current base span value.
  * @method setSpan Updates base span value and refreshes styles.
@@ -123,6 +124,9 @@ export declare class SkyFlexcol extends LitElement {
     alignSelf?: SkyFlexcolAlignSelf;
     static styles: import("lit").CSSResult;
     /** @protected */
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     firstUpdated(): void;
     /** @protected */
     updated(changed: Map<string | number | symbol, unknown>): void;

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

@@ -1,4 +1,4 @@
-import{css as s,LitElement as t,html as r}from"lit";import{property as e,customElement as o}from"lit/decorators.js";var i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,p=(s,t,r,e)=>{for(var o,p=e>1?void 0:e?a(t,r):t,n=s.length-1;n>=0;n--)(o=s[n])&&(p=(e?o(t,r,p):o(p))||p);return e&&p&&i(t,r,p),p};let n=class extends t{constructor(){super(...arguments),this.span=1,this.grow=0,this.shrink=0,this.basis=null}firstUpdated(){this.syncVars()}updated(s){(s.has("span")||s.has("spanLg")||s.has("spanMd")||s.has("spanSm")||s.has("spanXs")||s.has("grow")||s.has("shrink")||s.has("basis")||s.has("order")||s.has("alignSelf"))&&this.syncVars()}syncVars(){this.style.setProperty("--span",String(this.span)),this.spanLg&&this.style.setProperty("--span-lg",String(this.spanLg)),this.spanMd&&this.style.setProperty("--span-md",String(this.spanMd)),this.spanSm&&this.style.setProperty("--span-sm",String(this.spanSm)),this.spanXs&&this.style.setProperty("--span-xs",String(this.spanXs)),this.style.setProperty("--col-grow",String(this.grow)),this.style.setProperty("--col-shrink",String(this.shrink)),null!=this.order?this.style.setProperty("--col-order",String(this.order)):this.style.removeProperty("--col-order"),this.alignSelf?this.style.setProperty("--col-align-self",this.alignSelf):this.style.removeProperty("--col-align-self"),this.basis?this.style.setProperty("--col-basis",this.basis):this.style.removeProperty("--col-basis")}refreshStyles(){this.syncVars()}getSpan(){return this.span}setSpan(s){this.span=s,this.syncVars()}render(){return r` <slot part="col"></slot> `}};n.styles=s`
+import{css as s,LitElement as t,html as r}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,a=Object.getOwnPropertyDescriptor,n=(s,t,r,e)=>{for(var o,i=e>1?void 0:e?a(t,r):t,n=s.length-1;n>=0;n--)(o=s[n])&&(i=(e?o(t,r,i):o(i))||i);return e&&i&&p(t,r,i),i};let l=class extends t{constructor(){super(...arguments),this.span=1,this.grow=0,this.shrink=0,this.basis=null,this.preset="",this._presets=new i(this)}firstUpdated(){this.syncVars()}updated(s){(s.has("span")||s.has("spanLg")||s.has("spanMd")||s.has("spanSm")||s.has("spanXs")||s.has("grow")||s.has("shrink")||s.has("basis")||s.has("order")||s.has("alignSelf"))&&this.syncVars()}syncVars(){this.style.setProperty("--span",String(this.span)),this.spanLg&&this.style.setProperty("--span-lg",String(this.spanLg)),this.spanMd&&this.style.setProperty("--span-md",String(this.spanMd)),this.spanSm&&this.style.setProperty("--span-sm",String(this.spanSm)),this.spanXs&&this.style.setProperty("--span-xs",String(this.spanXs)),this.style.setProperty("--col-grow",String(this.grow)),this.style.setProperty("--col-shrink",String(this.shrink)),null!=this.order?this.style.setProperty("--col-order",String(this.order)):this.style.removeProperty("--col-order"),this.alignSelf?this.style.setProperty("--col-align-self",this.alignSelf):this.style.removeProperty("--col-align-self"),this.basis?this.style.setProperty("--col-basis",this.basis):this.style.removeProperty("--col-basis")}refreshStyles(){this.syncVars()}getSpan(){return this.span}setSpan(s){this.span=s,this.syncVars()}render(){return r` <slot part="col"></slot> `}};l.styles=s`
     :host {
       display: block;
       box-sizing: border-box;
@@ -10,5 +10,5 @@ import{css as s,LitElement as t,html as r}from"lit";import{property as e,customE
       /* If you set basis, it will override the basis calc coming from container's ::slotted(*) */
       flex-basis: var(--col-basis, auto);
     }
-  `,p([e({type:Number})],n.prototype,"span",2),p([e({type:Number})],n.prototype,"spanLg",2),p([e({type:Number})],n.prototype,"spanMd",2),p([e({type:Number})],n.prototype,"spanSm",2),p([e({type:Number})],n.prototype,"spanXs",2),p([e({type:Number})],n.prototype,"grow",2),p([e({type:Number})],n.prototype,"shrink",2),p([e({type:String})],n.prototype,"basis",2),p([e({type:Number})],n.prototype,"order",2),p([e({type:String})],n.prototype,"alignSelf",2),n=p([o("sky-flexcol")],n);export{n as SkyFlexcol};
+  `,n([e({type:Number})],l.prototype,"span",2),n([e({type:Number})],l.prototype,"spanLg",2),n([e({type:Number})],l.prototype,"spanMd",2),n([e({type:Number})],l.prototype,"spanSm",2),n([e({type:Number})],l.prototype,"spanXs",2),n([e({type:Number})],l.prototype,"grow",2),n([e({type:Number})],l.prototype,"shrink",2),n([e({type:String})],l.prototype,"basis",2),n([e({type:Number})],l.prototype,"order",2),n([e({type:String})],l.prototype,"alignSelf",2),n([e({type:String,reflect:!0})],l.prototype,"preset",2),l=n([o("sky-flexcol")],l);export{l as SkyFlexcol};
 //# sourceMappingURL=sky-flexcol.js.map