@sky.ui/core 0.0.1

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

@@ -0,0 +1,265 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as o,css as i,html as s}from"lit";import{property as a,state as n,query as r,customElement as d}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{createRef as p,ref as g}from"lit/directives/ref.js";import{classMap as h}from"lit/directives/class-map.js";import{animate as c}from"@lit-labs/motion";import{SkyIcon as y}from"../sky-icon/sky-icon.js";let m=0,v=0,b=class extends o{static{this.dependencies={"sky-icon":y}}static{this.styles=i`
+    :host {
+      display: contents;
+      font-family: var(--sky-font);
+    }
+
+    dialog {
+      border: var(--sky-border-primary);
+      background: transparent;
+      padding: 0;
+      margin: auto;
+      color: var(--sky-text-primary);
+      position: fixed;
+      border-radius: var(--sky-radius-secondary);
+      box-shadow: var(--sky-box-shadow-secondary);
+      border: var(--sky-border-primary);
+      box-sizing: border-box;
+      width: 100%;
+      text-align: center;
+      overflow: hidden;
+      z-index: 1000;
+     
+    }
+
+    dialog::backdrop {
+      background-color: transparent;
+      backdrop-filter: none;
+      transition: all 0.3s ease-in-out;
+    }
+
+    :host([overlay]) dialog::backdrop {
+      background-color: var(--sky-overlay-primary);
+      backdrop-filter: var(--sky-blur-primary);
+    }
+
+    /* Variant backgrounds */
+    :host([variant="primary"]) dialog,
+    :host([variant="secondary"]) dialog,
+    :host([variant="tertiary"]) dialog {
+      backdrop-filter: var(--sky-blur-primary) var(--sky-saturation-primary)
+        var(--sky-brightness-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-saturation-primary) var(--sky-brightness-primary);
+    }
+
+    :host([variant="primary"]) dialog {
+      background: var(--sky-glass-primary);
+    }
+
+    :host([variant="secondary"]) dialog {
+      background: var(--sky-glass-secondary);
+    }
+
+    :host([variant="tertiary"]) dialog {
+      background: var(--sky-glass-tertiary);
+    }
+
+    :host([variant="solid"]) dialog {
+      background: var(--sky-glass-solid);
+    }
+
+    /* Padding CSS variables */
+    :host {
+      --sky-padding-none: 0;
+      --sky-padding-xs: 4px;
+      --sky-padding-sm: 8px;
+      --sky-padding-md: 16px;
+      --sky-padding-lg: 24px;
+      --sky-padding-xl: 32px;
+      --sky-close-size: 22px;
+      --sky-close-gap: 6px;
+    }
+
+    .header-padding-none {
+      padding: var(--sky-padding-none);
+    }
+
+    .header-padding-xs {
+      padding: var(--sky-padding-xs);
+    }
+
+    .header-padding-sm {
+      padding: var(--sky-padding-sm);
+    }
+
+    .header-padding-md {
+      padding: var(--sky-padding-md);
+    }
+
+    .header-padding-lg {
+      padding: var(--sky-padding-lg);
+    }
+
+    .header-padding-xl {
+      padding: var(--sky-padding-xl);
+    }
+
+    .body-padding-none {
+      padding: var(--sky-padding-none);
+    }
+
+    .body-padding-xs {
+      padding: var(--sky-padding-xs);
+    }
+
+    .body-padding-sm {
+      padding: var(--sky-padding-sm);
+    }
+
+    .body-padding-md {
+      padding: var(--sky-padding-md);
+    }
+
+    .body-padding-lg {
+      padding: var(--sky-padding-lg);
+    }
+
+    .body-padding-xl {
+      padding: var(--sky-padding-xl);
+    }
+
+    .footer-padding-none {
+      padding: var(--sky-padding-none);
+    }
+
+    .footer-padding-xs {
+      padding: var(--sky-padding-xs);
+    }
+
+    .footer-padding-sm {
+      padding: var(--sky-padding-sm);
+    }
+
+    .footer-padding-md {
+      padding: var(--sky-padding-md);
+    }
+
+    .footer-padding-lg {
+      padding: var(--sky-padding-lg);
+    }
+
+    .footer-padding-xl {
+      padding: var(--sky-padding-xl);
+    }
+
+    /* Close button */
+    .close-button {
+      position: absolute;
+      top: var(--sky-close-gap);
+      right: var(--sky-close-gap);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--sky-close-size);
+      height: var(--sky-close-size);
+      box-sizing: border-box;
+      border-radius: 50%;
+      box-shadow: var(--sky-box-shadow-primary);
+      font-size: calc(var(--sky-close-size) * 0.8);
+      cursor: pointer;
+      color: var(--sky-text-primary);
+      border: var(--sky-border-primary);
+      transition: all 0.3s ease;
+      background: var(--sky-hover-primary);
+      backdrop-filter: var(--sky-blur-tertiary) var(--sky-brightness-tertiary)
+        var(--sky-saturation-tertiary);
+      -webkit-backdrop-filter: var(--sky-blur-tertiary)
+        var(--sky-brightness-tertiary) var(--sky-saturation-tertiary);
+      z-index: 1;
+     
+    }
+
+    .close-button:hover {
+      color: var(--sky-danger-primary) !important;
+    }
+
+    /* Message */
+    .message {
+      padding: 16px 0;
+      margin: 0;
+    }
+
+    ::slotted([slot="header"]) {
+      font-size: 16px;
+      font-weight: bold;
+      color: var(--sky-text-primary);
+      box-sizing: border-box;
+    }
+
+    dialog:focus,
+    dialog:focus-visible {
+      outline: none;
+    }
+
+    .header-separator {
+      border-bottom: var(--sky-border-primary);
+    }
+
+    .footer-separator {
+      border-top: var(--sky-border-primary);
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    /* RTL support */
+    :host([dir="rtl"]) .close-button {
+      right: auto;
+      left: var(--sky-close-gap);
+    }
+
+    /* Animation classes */
+    dialog.opening {
+      opacity: 0;
+    }
+
+    dialog.closing {
+      opacity: 1;
+    }
+  `}constructor(){super(),this.open=!1,this.closable=!1,this.message="",this.overlay=!1,this.width="auto",this.variant="primary",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=p(),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===m&&(v=window.scrollY,window.scrollTo(0,0)),m++,document.documentElement.setAttribute("data-sky-dialog-open","true"))}_unlockScroll(){"undefined"!=typeof window&&"undefined"!=typeof document&&(m=Math.max(0,m-1),0===m&&(document.documentElement.removeAttribute("data-sky-dialog-open"),window.scrollTo(0,v)))}_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",o=e[this.bodyPadding]?this.bodyPadding:"md",i=e[this.footerPadding]?this.footerPadding:"md",a={};this._hasHeader&&(a[`header-padding-${t}`]=!0,this.separator&&(a["header-separator"]=!0));const n={};return this._hasFooter?(n.actions=!0,n[`footer-padding-${i}`]=!0,this.separator&&(n["footer-separator"]=!0)):n.actions=!0,s`
+      <dialog
+        part="dialog"
+        aria-modal="true"
+        style="max-width: ${this.width};"
+        @cancel="${this._handleCancel}"
+        ${g(this.dialogRef)}
+        ${c({keyframeOptions:{duration:300,easing:"ease-out"}})}
+      >
+        <slot></slot>
+
+        ${l(this.message,()=>s`
+          <p class="message" part="message">${this.message}</p>
+        `)}
+
+        <div class=${h(a)} part="header">
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+        </div>
+
+        <div
+          class=${h({[`body-padding-${o}`]:this._hasBody})}
+          part="content"
+        >
+          <slot name="body" @slotchange=${this._onBodySlotChange}></slot>
+        </div>
+
+        <div class=${h(n)} part="actions footer">
+          <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+        </div>
+        ${l(this.closable,()=>s`
+          <button
+            class="close-button"
+            part="close-button"
+            type="button"
+            aria-label="Close dialog"
+            @click=${()=>this._requestClose("close-button")}
+          >
+            <sky-icon icon="ion:close"></sky-icon>
+          </button>
+        `)}
+      </dialog>
+    `}};e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"open",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"closable",void 0),e([a({type:String}),t("design:type",Object)],b.prototype,"message",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"overlay",void 0),e([a({type:String}),t("design:type",Object)],b.prototype,"width",void 0),e([a({type:String,reflect:!0}),t("design:type",String)],b.prototype,"variant",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"separator",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"persistent",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"closeOnEsc",void 0),e([a({type:String,reflect:!0}),t("design:type",String)],b.prototype,"headerPadding",void 0),e([a({type:String,reflect:!0}),t("design:type",String)],b.prototype,"bodyPadding",void 0),e([a({type:String,reflect:!0}),t("design:type",String)],b.prototype,"footerPadding",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],b.prototype,"highlightOnOutsideClick",void 0),e([n(),t("design:type",Object)],b.prototype,"_hasHeader",void 0),e([n(),t("design:type",Object)],b.prototype,"_hasBody",void 0),e([n(),t("design:type",Object)],b.prototype,"_hasFooter",void 0),e([n(),t("design:type",Object)],b.prototype,"_isClosing",void 0),e([r("dialog"),t("design:type",HTMLDialogElement)],b.prototype,"dialogElement",void 0),b=e([d("sky-dialog"),t("design:paramtypes",[])],b);export{b as SkyDialog};
+//# sourceMappingURL=sky-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-dialog.js","sources":["../../src/sky-dialog/sky-dialog.ts"],"sourcesContent":[null],"names":["_dialogOpenCount","_savedScrollY","SkyDialog","LitElement","this","dependencies","SkyIcon","styles","css","constructor","super","open","closable","message","overlay","width","variant","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","__decorate","property","type","Boolean","reflect","prototype","String","state","query","HTMLDialogElement","customElement"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export * from "./sky-divider";

package/dist/sky-divider/index.js

@@ -0,0 +1 @@
+export * from './sky-divider.js';

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

@@ -0,0 +1,120 @@
+import { LitElement } from "lit";
+export type SkyDividerDirection = "horizontal" | "vertical";
+/**
+ * @element sky-divider
+ *
+ * @summary Visual separator component for horizontal and vertical layout separation.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/divider
+ *
+ * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).
+ *
+ * @property {string} color - Divider color token or CSS color.
+ * @property {string} thickness - Divider thickness (for example `1px` or `2px`).
+ * @property {string} margin - Outer margin around the divider.
+ * @property {SkyDividerDirection} direction - Divider orientation.
+ * @property {boolean} inset - Enables indented divider layout.
+ * @property {string} height - Height used for vertical orientation.
+ * @method getComputedColor Returns the resolved runtime divider color.
+ * @method getComputedThickness Returns the resolved runtime divider thickness.
+ *
+ * @cssprop --divider-color - CSS custom property for divider color.
+ * @cssprop --divider-thickness - CSS custom property for divider thickness.
+ * @cssprop --divider-margin - CSS custom property for divider margin.
+ * @cssprop --divider-height - CSS custom property for vertical divider height.
+ *
+ * @Behavior
+ * - Simple visual divider that can be horizontal or vertical
+ * - Supports extensive customization via properties
+ * - Automatically resolves color values using color resolver
+ * - Updates CSS custom properties when properties change
+ * - **horizontal**: Renders as `<hr>` element, spans full width
+ * - **vertical**: Renders as `<div>` element, spans configurable height
+ * - Horizontal dividers use semantic `<hr>` element
+ * - Vertical dividers use `<div>` with appropriate styling
+ *
+ * @example
+ * ```html
+ * <div style="display: flex; align-items: center;">
+ *   <span>Left content</span>
+ *   <sky-divider
+ *     direction="vertical"
+ *     height="50px"
+ *     margin="0 16px"
+ *   ></sky-divider>
+ *   <span>Right content</span>
+ * </div>
+ * ```
+ * ```vue
+ * <template>
+ *   <div style="display:flex;align-items:center;">
+ *     <span>Left content</span>
+ *     <sky-divider direction="vertical" height="50px" margin="0 16px"></sky-divider>
+ *     <span>Right content</span>
+ *   </div>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <div style={{ display: "flex", alignItems: "center" }}>
+ *       <span>Left content</span>
+ *       <sky-divider direction="vertical" height="50px" margin="0 16px"></sky-divider>
+ *       <span>Right content</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyDivider extends LitElement {
+    /**
+     * The color of the divider.
+     * @public
+     */
+    color: string;
+    /**
+     * The thickness of the divider (e.g., `"1px"`, `"2px"`).
+     * @public
+     */
+    thickness: string;
+    /**
+     * The margin around the divider.
+     * @public
+     */
+    margin: string;
+    /**
+     * Divider orientation.
+     * @public
+     */
+    direction: SkyDividerDirection;
+    /**
+     * Whether the divider should be inset (indented).
+     * @public
+     */
+    inset: boolean;
+    /**
+     * The height of a vertical divider.
+     * @public
+     */
+    height: string;
+    static styles: import("lit").CSSResult;
+    /** @protected */
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Gets the current computed color of the divider.
+     * @returns Resolved color value
+     * @public
+     */
+    getComputedColor(): string;
+    /**
+     * Gets the current computed thickness of the divider.
+     * @returns Resolved thickness value
+     * @public
+     */
+    getComputedThickness(): string;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,42 @@
+import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as r,html as o}from"lit";import{property as s,customElement as d}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{resolveColor as p}from"../helper/utils/color-resolver.js";let a=class extends e{constructor(){super(...arguments),this.color="muted",this.thickness="1px",this.margin="",this.direction="horizontal",this.inset=!1,this.height="100%"}static{this.styles=r`
+    hr {
+      border: none;
+      border-top: var(--divider-thickness, 2px) solid var(--divider-color);
+      margin: var(--divider-margin);
+    }
+
+    .vertical {
+      border-top: none;
+      border-left: var(--divider-thickness, 2px) solid var(--divider-color);
+      height: var(--divider-height, 100%);
+      width: 0 !important;
+      margin: var(--divider-margin);
+    }
+
+    .inset.horizontal {
+      margin-left: 20px;
+      margin-right: 20px;
+      width: calc(100% - 20px * 2);
+    }
+
+    .inset.vertical {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      height: calc(100% - 20px * 2);
+    }
+  `}updated(t){t.has("color")&&this.style.setProperty("--divider-color",p(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,i=h({vertical:!0,inset:this.inset}),e=h({horizontal:!0,inset:this.inset});return n(t,()=>o`
+        <div
+          class=${i}
+          part="divider"
+          role="separator"
+          aria-orientation="vertical"
+        ></div>
+      `,()=>o`
+        <hr
+          class=${e}
+          part="divider"
+          role="separator"
+          aria-orientation="horizontal"
+        />
+      `)}};t([s({type:String}),i("design:type",Object)],a.prototype,"color",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"thickness",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"margin",void 0),t([s({type:String}),i("design:type",String)],a.prototype,"direction",void 0),t([s({type:Boolean}),i("design:type",Object)],a.prototype,"inset",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"height",void 0),a=t([d("sky-divider")],a);export{a as SkyDivider};
+//# sourceMappingURL=sky-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-divider.js","sources":["../../src/sky-divider/sky-divider.ts"],"sourcesContent":[null],"names":["SkyDivider","LitElement","constructor","this","color","thickness","margin","direction","inset","height","styles","css","updated","changedProperties","has","style","setProperty","resolveColor","getComputedColor","getComputedStyle","getPropertyValue","trim","getComputedThickness","render","isVertical","verticalClasses","classMap","vertical","horizontalClasses","horizontal","when","html","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"6UA8EO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,MAAQ,QAORD,KAAAE,UAAY,MAOZF,KAAAG,OAAS,GAOTH,KAAAI,UAAiC,aAOjCJ,KAAAK,OAAQ,EAORL,KAAAM,OAAS,MAsGX,QApGkBN,KAAAO,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GA0B1B,CAGO,OAAAC,CAAQC,GACXA,EAAkBC,IAAI,UACxBX,KAAKY,MAAMC,YAAY,kBAAmBC,EAAad,KAAKC,QAE1DS,EAAkBC,IAAI,cACxBX,KAAKY,MAAMC,YAAY,sBAAuBb,KAAKE,WAEjDQ,EAAkBC,IAAI,WACxBX,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKG,QAE9CO,EAAkBC,IAAI,WACxBX,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKM,OAEpD,CAOO,gBAAAS,GACL,OACEC,iBAAiBhB,MAAMiB,iBAAiB,mBAAmBC,QAC3DlB,KAAKC,KAET,CAOO,oBAAAkB,GACL,OACEH,iBAAiBhB,MAAMiB,iBAAiB,uBAAuBC,QAC/DlB,KAAKE,SAET,CAGS,MAAAkB,GACP,MAAMC,EAAgC,aAAnBrB,KAAKI,UAClBkB,EAAkBC,EAAS,CAC/BC,UAAU,EACVnB,MAAOL,KAAKK,QAERoB,EAAoBF,EAAS,CACjCG,YAAY,EACZrB,MAAOL,KAAKK,QAGd,OAAOsB,EACLN,EACA,IAAMO,CAAI;;kBAEEN;;;;;QAMZ,IAAMM,CAAI;;kBAEEH;;;;;QAOhB,GAxIAI,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFnC,EAAAoC,UAAA,gBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACAnC,EAAAoC,UAAA,oBAOlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACNnC,EAAAoC,UAAA,iBAOZJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCAC4BnC,EAAAoC,UAAA,oBAO9CJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,mCACJrC,EAAAoC,UAAA,gBAOdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFnC,EAAAoC,UAAA,iBAzCLpC,EAAUgC,EAAA,CADtBM,EAAc,gBACFtC"}

package/dist/sky-drawer/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-drawer";

package/dist/sky-drawer/index.js

@@ -0,0 +1 @@
+export * from './sky-drawer.js';

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

@@ -0,0 +1,161 @@
+import { LitElement } from "lit";
+export type SkyDrawerSide = "left" | "right";
+export type SkyDrawerScope = "viewport" | "parent";
+export type SkyDrawerToggleDetail = {
+    open: boolean;
+};
+export type SkyDrawerOverlayClickDetail = {
+    side: SkyDrawerSide;
+    scope: SkyDrawerScope;
+};
+/**
+ * @element sky-drawer
+ *
+ * @summary Slide-in drawer panel with optional overlay, keyboard dismissal, and viewport/parent scope modes.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/sidebar
+ *
+ * @uiVModel open drawer-change
+ *
+ * @slot - Main content area inside the drawer body.
+ * @slot header - Drawer header content (top area).
+ * @slot footer - Drawer footer content (bottom area).
+ *
+ * @csspart overlay - The backdrop overlay element.
+ * @csspart panel - The main drawer panel container.
+ * @csspart header - Header wrapper inside the drawer.
+ * @csspart footer - Footer wrapper inside the drawer.
+ * @csspart content - Content/body area inside the drawer.
+ *
+ * @fires {CustomEvent<SkyDrawerToggleDetail>} drawer-change - Fired whenever drawer open state changes.
+ * @fires {CustomEvent<SkyDrawerOverlayClickDetail>} drawer-overlay-click - Fired when user clicks overlay and drawer is dismissable.
+ *
+ * @property {boolean} open - Whether the drawer is open.
+ * @property {SkyDrawerSide} side - Side the drawer slides in from.
+ * @property {string} width - Drawer width CSS length.
+ * @property {string} height - Drawer height CSS length.
+ * @property {string} radius - Drawer panel border radius: token (`none`, `sm`, `md`, `lg`, `full`) or CSS length.
+ * @property {boolean} overlay - Shows overlay behind drawer when true.
+ * @property {boolean} persistent - Prevents overlay/Escape auto-dismiss.
+ * @property {boolean} closeOnEsc - Enables Escape-key dismiss.
+ * @property {SkyDrawerScope} scope - Drawer scope: viewport or parent.
+ * @property {boolean} separator - Enables separators in slotted header/footer content.
+ * @method openDrawer Opens the drawer.
+ * @method close Closes the drawer.
+ * @method toggle Toggles drawer open state.
+ *
+ * @Behavior
+ * - Slides in from specified side with smooth animation
+ * - Supports both viewport-covering and parent-contained modes
+ * - Provides overlay with click-to-close (when not persistent)
+ * - Handles Escape key dismissal (when not persistent)
+ * - Maintains proper stacking context and focus management
+ * - **viewport**: Covers entire viewport, fixed positioning, overlay covers entire screen
+ * - **parent**: Contained within parent element, absolute positioning, overlay limited to parent bounds
+ *
+ * @example
+ * ```html
+ * <sky-drawer open side="right" width="360px" overlay closeonesc>
+ *   <div slot="header">Settings</div>
+ *   <p>Drawer content here.</p>
+ *   <div slot="footer">
+ *     <button>Close</button>
+ *   </div>
+ * </sky-drawer>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-drawer open side="right" width="360px" overlay closeonesc>
+ *     <div slot="header">Settings</div>
+ *     <p>Drawer content here.</p>
+ *     <div slot="footer">
+ *       <button>Close</button>
+ *     </div>
+ *   </sky-drawer>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-drawer open side="right" width="360px" overlay closeonesc>
+ *       <div slot="header">Settings</div>
+ *       <p>Drawer content here.</p>
+ *       <div slot="footer">
+ *         <button>Close</button>
+ *       </div>
+ *     </sky-drawer>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyDrawer extends LitElement {
+    /** @public Whether the drawer is open. */
+    open: boolean;
+    /** @public Which side the drawer slides in from. */
+    side: SkyDrawerSide;
+    /** @public Drawer width (CSS length). */
+    width: string;
+    /** @public Drawer height (CSS length). */
+    height: string;
+    /** @public Drawer border-radius (token or CSS length). */
+    radius: string;
+    /** @public Whether to show an overlay behind the drawer. */
+    overlay: boolean;
+    /** @public Whether the drawer is non-dismissable (requires programmatic closing). */
+    persistent: boolean;
+    /** @public Close on Escape key press. */
+    closeOnEsc: boolean;
+    /** @public Whether drawer covers viewport or is contained within parent. */
+    scope: SkyDrawerScope;
+    /** @public Whether to show separators in header/footer slots. */
+    separator: boolean;
+    static styles: import("lit").CSSResult;
+    /**
+     * Opens the drawer.
+     * @public
+     */
+    openDrawer(): void;
+    /**
+     * Closes the drawer.
+     * @public
+     */
+    close(): void;
+    /**
+     * Toggles the drawer open/closed.
+     * @public
+     */
+    toggle(): void;
+    /** @protected */
+    connectedCallback(): void;
+    /** @protected */
+    disconnectedCallback(): void;
+    /** @protected */
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Applies dimension properties to CSS custom properties.
+     * @private
+     */
+    private _applyDims;
+    /**
+     * Handles keydown events for Escape key closing.
+     * @param e - Keyboard event
+     * @private
+     */
+    private _onKeydown;
+    /**
+     * Handles click events on the drawer overlay.
+     * @private
+     */
+    private _onOverlayClick;
+    /**
+     * Stops event propagation.
+     * @param e - Event to stop
+     * @private
+     */
+    private _stop;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+}