@sky.ui/core 0.0.1

package/dist/sky-skeleton/sky-skeleton.js

@@ -0,0 +1,233 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as i,css as s,html as r}from"lit";import{property as a,customElement as d}from"lit/decorators.js";import{resolveRadius as l}from"../helper/utils/size-resolver.js";import{classMap as n}from"lit/directives/class-map.js";import{repeat as m}from"lit/directives/repeat.js";let o=class extends i{constructor(){super(...arguments),this.type="default",this.loading=!1,this.width="100%",this.height="40px",this.radius="md"}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-busy",String(this.loading))}static{this.styles=s`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .container {
+      display: block;
+      height: 100%;
+    }
+
+    .skeleton-wrapper,
+    .slot-wrapper {
+      transition:
+        opacity 0.4s ease,
+        visibility 0.4s ease;
+      height: 100%;
+    }
+
+    .visible {
+      opacity: 1;
+      pointer-events: auto;
+      visibility: visible;
+    }
+
+    .hidden {
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+      display: none;
+    }
+
+    .skeleton-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+
+      box-sizing: border-box;
+      height: 100%;
+    }
+
+    .skeleton {
+      position: relative;
+      overflow: hidden;
+      background-color: var(--sky-hover-tertiary);
+      width: 100%;
+      height: 100%;
+    }
+
+    .skeleton::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0),
+        var(--sky-hover-primary),
+        rgba(255, 255, 255, 0)
+      );
+      animation: shimmer 1.5s infinite;
+    }
+
+    @keyframes shimmer {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    .circle {
+      border-radius: 50%;
+    }
+    .text {
+      height: 0.8em;
+      margin-bottom: 0.1em;
+      border-radius: 4px;
+    }
+    .text.short {
+      width: 60%;
+    }
+    .text.medium {
+      width: 80%;
+    }
+    .text.long {
+      width: 100%;
+    }
+    .chip {
+      border-radius: var(--sky-radius-secondary);
+      height: 24px;
+      width: 80px;
+    }
+    .button {
+      height: 36px;
+      width: 90px;
+      border-radius: var(--sky-radius-secondary);
+    }
+    .avatar {
+      height: 50px;
+      width: 50px;
+      border-radius: 50%;
+    }
+    .divider {
+      height: 1px;
+      width: 100%;
+      margin: 8px 0;
+      border-radius: 0px;
+    }
+    .image {
+      height: 150px;
+      width: 100%;
+      border-radius: var(--sky-radius-primary);
+    }
+  `}updated(e){super.updated(e),e.has("loading")&&this.setAttribute("aria-busy",String(this.loading))}render(){const e=this.type?this.type.split(",").map(e=>e.trim()):[],t=n({"skeleton-wrapper":!0,visible:this.loading,hidden:!this.loading}),i=n({"slot-wrapper":!0,visible:!this.loading,hidden:this.loading});return r`
+      <div class="container" part="container">
+        <div class=${t} part="skeleton-wrapper">
+          <div class="skeleton-container">
+            ${m(e,e=>e,e=>this.renderSkeleton(e))}
+          </div>
+        </div>
+        <div class=${i} part="slot-wrapper">
+          <slot></slot>
+        </div>
+      </div>
+    `}renderSkeleton(e){switch(e){case"avatar":return r`<div class="skeleton avatar" part="item shimmer"></div>`;case"button":return r`<div class="skeleton button" part="item shimmer"></div>`;case"chip":return r`<div class="skeleton chip" part="item shimmer"></div>`;case"divider":return r`<div class="skeleton divider" part="item shimmer"></div>`;case"image":return r`<div class="skeleton image" part="item shimmer"></div>`;case"heading":return r`<div
+          class="skeleton text long"
+          style="height:2.5em;"
+          part="item shimmer"
+        ></div>`;case"text":return r`<div class="skeleton text long" part="item shimmer"></div>`;case"paragraph":case"list-item-three-line":return r`<div
+          style="display:flex;flex-direction:column;gap:5px;width:100%"
+        >
+          <div class="skeleton text long" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+          <div class="skeleton text short" part="item shimmer"></div>
+        </div>`;case"list-item-avatar":return r`<div
+          style="display:flex;align-items:center;gap:5px;width:100%"
+        >
+          <div class="skeleton avatar" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+        </div>`;case"list-item-avatar-two-line":return r`<div
+          style="display:flex;align-items:center;gap:5px;width:100%"
+        >
+          <div class="skeleton avatar" part="item shimmer"></div>
+          <div style="flex:1">
+            <div class="skeleton text long" part="item shimmer"></div>
+            <div class="skeleton text medium" part="item shimmer"></div>
+          </div>
+        </div>`;case"list-item-avatar-three-line":return r`<div
+          style="display:flex;align-items:center;gap:5px;width:100%"
+        >
+          <div class="skeleton avatar" part="item shimmer"></div>
+          <div style="flex:1">
+            <div class="skeleton text long" part="item shimmer"></div>
+            <div class="skeleton text medium" part="item shimmer"></div>
+            <div class="skeleton text short" part="item shimmer"></div>
+          </div>
+        </div>`;case"list-item-two-line":return r`<div
+          style="display:flex;flex-direction:column;gap:5px;width:100%"
+        >
+          <div class="skeleton text long" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+        </div>`;case"card":return r`<div
+          style="display:flex;flex-direction:column;gap:5px;width:100%"
+        >
+          <div class="skeleton image" part="item shimmer"></div>
+          <div style="padding:10px;">
+            <div class="skeleton text long" part="item shimmer"></div>
+          </div>
+        </div>`;case"actions":return r`<div style="display:flex;gap:5px;">
+          <div class="skeleton button" part="item shimmer"></div>
+          <div class="skeleton button" part="item shimmer"></div>
+        </div>`;case"table-row":return r`<div
+          style="display:flex;gap:2px;justify-content:space-between;padding:10px;width:100%"
+        >
+          <div class="skeleton text short" part="item shimmer"></div>
+          <div class="skeleton text long" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+        </div>`;case"menu-item":return r`<div
+          style="display:flex;align-items:center;padding:10px;width:100%"
+        >
+          <div
+            class="skeleton circle"
+            style="width:0.8rem;height:0.8rem;"
+            part="item shimmer"
+          ></div>
+          <div
+            class="skeleton text long"
+            style="margin-left:10px;margin-bottom:unset"
+            part="item shimmer"
+          ></div>
+        </div>`;case"checkbox":return r`<div
+          style="display:flex;align-items:center;padding:10px;width:100%"
+        >
+          <div
+            class="skeleton"
+            style="width:0.8rem;height:0.8rem;border-radius:4px;"
+            part="item shimmer"
+          ></div>
+          <div
+            class="skeleton text medium"
+            style="margin-left:10px;margin-bottom:unset"
+            part="item shimmer"
+          ></div>
+        </div>`;case"switch":return r`<div
+          style="display:flex;align-items:center;padding:10px;width:100%"
+        >
+          <div
+            class="skeleton"
+            style="width:34px;height:14px;border-radius:8px;"
+            part="item shimmer"
+          ></div>
+          <div
+            class="skeleton text medium"
+            style="margin-left:10px;margin-bottom:unset"
+            part="item shimmer"
+          ></div>
+        </div>`;case"tabs":return r`<div style="display:flex;gap:5px;width:100%">
+          <div class="skeleton text medium" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+          <div class="skeleton text medium" part="item shimmer"></div>
+        </div>`;default:return r`<div
+          class="skeleton"
+          part="item shimmer"
+          style="width:${this.width};height:${this.height};border-radius:${l(this.radius)}"
+        ></div>`}}};e([a({type:String}),t("design:type",Object)],o.prototype,"type",void 0),e([a({type:Boolean}),t("design:type",Object)],o.prototype,"loading",void 0),e([a({type:String}),t("design:type",Object)],o.prototype,"width",void 0),e([a({type:String}),t("design:type",Object)],o.prototype,"height",void 0),e([a({type:String}),t("design:type",Object)],o.prototype,"radius",void 0),o=e([d("sky-skeleton")],o);export{o as SkySkeleton};
+//# sourceMappingURL=sky-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-skeleton.js","sources":["../../src/sky-skeleton/sky-skeleton.ts"],"sourcesContent":[null],"names":["SkySkeleton","LitElement","constructor","this","type","loading","width","height","radius","connectedCallback","super","setAttribute","String","styles","css","updated","changed","has","render","types","split","map","t","trim","skeletonClasses","classMap","visible","hidden","slotClasses","html","repeat","renderSkeleton","resolveRadius","__decorate","property","prototype","Boolean","customElement"],"mappings":"iVAoEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAEuBC,KAAAC,KAAO,UAEND,KAAAE,SAAU,EAEXF,KAAAG,MAAQ,OAERH,KAAAI,OAAS,OAETJ,KAAAK,OAAS,IA6TvC,CA3TW,iBAAAC,GACPC,MAAMD,oBACNN,KAAKQ,aAAa,YAAaC,OAAOT,KAAKE,SAC7C,QAEgBF,KAAAU,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwH1B,CAEiB,OAAAC,CAAQC,GACzBN,MAAMK,QAAQC,GACVA,EAAQC,IAAI,YACdd,KAAKQ,aAAa,YAAaC,OAAOT,KAAKE,SAE/C,CAES,MAAAa,GACP,MAAMC,EAAQhB,KAAKC,KAAOD,KAAKC,KAAKgB,MAAM,KAAKC,IAAKC,GAAMA,EAAEC,QAAU,GAChEC,EAAkBC,EAAS,CAC/B,oBAAoB,EACpBC,QAASvB,KAAKE,QACdsB,QAASxB,KAAKE,UAEVuB,EAAcH,EAAS,CAC3B,gBAAgB,EAChBC,SAAUvB,KAAKE,QACfsB,OAAQxB,KAAKE,UAEf,OAAOwB,CAAI;;qBAEML;;cAEPM,EAAOX,EAAQf,GAASA,EAAOA,GAASD,KAAK4B,eAAe3B;;;qBAGrDwB;;;;KAKnB,CAGQ,cAAAG,CAAe3B,GACrB,OAAQA,GACN,IAAK,SACH,OAAOyB,CAAI,0DACb,IAAK,SACH,OAAOA,CAAI,0DACb,IAAK,OACH,OAAOA,CAAI,wDACb,IAAK,UACH,OAAOA,CAAI,2DACb,IAAK,QACH,OAAOA,CAAI,yDACb,IAAK,UACH,OAAOA,CAAI;;;;iBAKb,IAAK,OACH,OAAOA,CAAI,6DACb,IAAK,YA2CL,IAAK,uBACH,OAAOA,CAAI;;;;;;gBApCb,IAAK,mBACH,OAAOA,CAAI;;;;;gBAMb,IAAK,4BACH,OAAOA,CAAI;;;;;;;;gBASb,IAAK,8BACH,OAAOA,CAAI;;;;;;;;;gBAUb,IAAK,qBACH,OAAOA,CAAI;;;;;gBAcb,IAAK,OACH,OAAOA,CAAI;;;;;;;gBAQb,IAAK,UACH,OAAOA,CAAI;;;gBAIb,IAAK,YACH,OAAOA,CAAI;;;;;;gBAOb,IAAK,YACH,OAAOA,CAAI;;;;;;;;;;;;;gBAcb,IAAK,WACH,OAAOA,CAAI;;;;;;;;;;;;;gBAcb,IAAK,SACH,OAAOA,CAAI;;;;;;;;;;;;;gBAcb,IAAK,OACH,OAAOA,CAAI;;;;gBAKb,QACE,OAAOA,CAAI;;;yBAGM1B,KAAKG,gBAAgBH,KAAKI,wBAAwByB,EAC/D7B,KAAKK;iBAIf,GApU4ByB,EAAA,CAA3BC,EAAS,CAAE9B,KAAMQ,kCAA2BZ,EAAAmC,UAAA,eAEhBF,EAAA,CAA5BC,EAAS,CAAE9B,KAAMgC,mCAA2BpC,EAAAmC,UAAA,kBAEjBF,EAAA,CAA3BC,EAAS,CAAE9B,KAAMQ,kCAAyBZ,EAAAmC,UAAA,gBAEfF,EAAA,CAA3BC,EAAS,CAAE9B,KAAMQ,kCAA0BZ,EAAAmC,UAAA,iBAEhBF,EAAA,CAA3BC,EAAS,CAAE9B,KAAMQ,kCAAwBZ,EAAAmC,UAAA,iBAV/BnC,EAAWiC,EAAA,CADvBI,EAAc,iBACFrC"}

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

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

package/dist/sky-slider/index.js

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

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

@@ -0,0 +1,96 @@
+import { LitElement, PropertyValues } from "lit";
+export type SkySliderValueChangedDetail = {
+    value: number;
+};
+/**
+ * @element sky-slider
+ *
+ * @summary Accessible range slider with optional commit-only behavior.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/slider
+ *
+ * @uiVModel value value-changed
+ *
+ * @slot - (No slots) — All content is internally rendered.
+ *
+ * @csspart container - The outer card-like wrapper.
+ * @csspart label - The text label shown at the top-left.
+ * @csspart value - The formatted value (prefix + number + suffix) shown at the top-right.
+ * @csspart slider-container - The wrapper around the range control.
+ * @csspart slider - The native `<input type="range">` element.
+ *
+ * @property {number} min - Minimum slider value.
+ * @property {number} max - Maximum slider value.
+ * @property {number} step - Step interval for value snapping.
+ * @property {number} value - Snapped component value.
+ * @property {number} displayValue - Live visual value while dragging.
+ * @property {string} label - Optional label shown above slider.
+ * @property {boolean} disabled - Disables slider interaction.
+ * @property {string} prefix - Text shown before formatted value.
+ * @property {string} suffix - Text shown after formatted value.
+ * @property {boolean} shadow - Adds glass border/shadow styling.
+ * @property {boolean} commitOnly - Emits changes only on commit.
+ * @property {boolean} showValue - Toggles value text visibility.
+ *
+ * @fires {CustomEvent<SkySliderValueChangedDetail>} value-changed - Fired when slider value changes.
+ * @method setValue Sets slider value programmatically.
+ *
+ * @Behavior
+ * - Uses `displayValue` for smooth dragging feedback.
+ * - Snaps emitted values to nearest step.
+ * - Supports live or commit-only updates via `commitOnly`.
+ *
+ * @example
+ * ```html
+ * <sky-slider label="CPU Limit" min="0" max="100" step="5" value="65" suffix="%" show-value shadow commit-only></sky-slider>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-slider label="CPU Limit" :min="0" :max="100" :step="5" :value="65" suffix="%" show-value shadow commit-only></sky-slider>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-slider label="CPU Limit" min={0} max={100} step={5} value={65} suffix="%" show-value shadow commit-only></sky-slider>;
+ * }
+ * ```
+ */
+export declare class SkySlider extends LitElement {
+    /** Minimum value for the range slider. */
+    min: number;
+    /** Maximum value for the range slider. */
+    max: number;
+    /** Step interval for the range slider. */
+    step: number;
+    /** Current snapped value of the range slider. */
+    value: number;
+    /**
+     * Continuous visual value for smoother interaction.
+     * Mirrors `value` until the user drags the thumb.
+     */
+    displayValue: number;
+    /** Label for the range slider. */
+    label: string;
+    /** Disables the range slider when true. */
+    disabled: boolean;
+    /** Prefix to display before the value. */
+    prefix: string;
+    /** Suffix to display after the value. */
+    suffix: string;
+    /** Whether to show shadow/glass border on the container. */
+    shadow: boolean;
+    /** If true, only updates `value` on commit (not during drag). */
+    commitOnly: boolean;
+    /** If true, shows the value label; otherwise hides it. */
+    showValue: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    willUpdate(changedProps: PropertyValues): void;
+    private handleInput;
+    private handleChange;
+    setValue(nextValue: number): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-slider/sky-slider.js

@@ -0,0 +1,139 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as i,css as s,html as a}from"lit";import{property as r,customElement as o}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";let l=class extends i{constructor(){super(),this.min=0,this.max=100,this.step=1,this.value=50,this.displayValue=this.value,this.label="",this.disabled=!1,this.prefix="",this.suffix="",this.shadow=!1,this.commitOnly=!1,this.showValue=!0,this.displayValue=this.value}static{this.styles=s`
+    :host {
+      display: block;
+      font-family: var(--sky-font);
+      width: 100%;
+      font-weight: 400;
+    }
+
+    .range-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+      padding: 8px;
+      gap: 4px;
+      box-sizing: border-box;
+      position: relative;
+      border-radius: var(--sky-radius-primary);
+    }
+
+    /* When shadow=true, apply glass styling */
+    .range-container[shadow] {
+      background: var(--sky-glass-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      border: var(--sky-border-primary);
+     
+    }
+
+    .range-container[shadow]::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+    }
+
+    .range-label {
+      font-size: 14px;
+      color: var(--sky-text-primary);
+    }
+
+    input[type="range"] {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 3px;
+      background: var(--sky-hover-primary);
+      border-radius: 6px;
+      outline: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--sky-glass-solid);
+      border: 5px solid var(--sky-active-primary-dark);
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: var(--sky-box-shadow-primary);
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    }
+
+    input[type="range"]:hover::-webkit-slider-thumb {
+      transform: scale(1.1);
+    }
+
+    .prefix,
+    .suffix {
+      color: var(--sky-text-secondary);
+      font-size: 14px;
+    }
+
+    .range-value {
+      font-size: 14px;
+      color: var(--sky-text-primary);
+    }
+
+    .range-container[disabled] {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    .slider-container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 14px;
+    }
+  `}willUpdate(e){e.has("value")&&this.displayValue!==this.value&&(this.displayValue=this.value)}handleInput(e){const t=Number(e.target.value);if(this.displayValue!==t&&(this.displayValue=t),!this.commitOnly){const e=this.step>0?this.step:1,i=Math.round(t/e)*e;this.value!==i&&(this.value=i,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})))}}handleChange(e){if(this.commitOnly){const t=Number(e.target.value),i=this.step>0?this.step:1,s=Math.round(t/i)*i;this.value!==s&&(this.value=s,this.displayValue=this.value,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})))}}setValue(e){const t=Math.min(this.max,Math.max(this.min,e)),i=this.step>0?this.step:1,s=Math.round(t/i)*i;this.value===s&&this.displayValue===s||(this.value=s,this.displayValue=s,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){const e=this.displayValue.toFixed(this.step<1?2:0);return a`
+      <div
+        class="range-container"
+        part="container"
+        ?disabled="${this.disabled}"
+        ?shadow="${this.shadow}"
+        aria-disabled="${this.disabled?"true":"false"}"
+      >
+        ${n(this.showValue||""!==this.label,()=>a`
+            <div
+              style="display:flex;align-items:center;gap:5px;justify-content:space-between;width:100%;"
+            >
+              ${n(this.label,()=>a`<div class="range-label" part="label">${this.label}</div>`)}
+              ${n(this.showValue,()=>a`
+                  <div class="range-value" part="value">
+                    <span class="prefix"> ${this.prefix} </span>
+                    ${e}
+                    <span class="suffix"> ${this.suffix} </span>
+                  </div>
+                `)}
+            </div>
+          `)}
+        <div class="slider-container" part="slider-container">
+          <input
+            part="slider"
+            type="range"
+            min="${this.min}"
+            max="${this.max}"
+            step="${this.step}"
+            .value="${String(this.displayValue)}"
+            @input="${this.handleInput}"
+            @change="${this.handleChange}"
+            ?disabled="${this.disabled}"
+            aria-label="${this.label||"Slider"}"
+          />
+        </div>
+      </div>
+    `}};e([r({type:Number}),t("design:type",Object)],l.prototype,"min",void 0),e([r({type:Number}),t("design:type",Object)],l.prototype,"max",void 0),e([r({type:Number}),t("design:type",Object)],l.prototype,"step",void 0),e([r({type:Number}),t("design:type",Object)],l.prototype,"value",void 0),e([r({type:Number}),t("design:type",Number)],l.prototype,"displayValue",void 0),e([r({type:String}),t("design:type",Object)],l.prototype,"label",void 0),e([r({type:Boolean,reflect:!0}),t("design:type",Object)],l.prototype,"disabled",void 0),e([r({type:String}),t("design:type",Object)],l.prototype,"prefix",void 0),e([r({type:String}),t("design:type",Object)],l.prototype,"suffix",void 0),e([r({type:Boolean,reflect:!0}),t("design:type",Object)],l.prototype,"shadow",void 0),e([r({type:Boolean,reflect:!0}),t("design:type",Object)],l.prototype,"commitOnly",void 0),e([r({type:Boolean,reflect:!0}),t("design:type",Object)],l.prototype,"showValue",void 0),l=e([o("sky-slider"),t("design:paramtypes",[])],l);export{l as SkySlider};
+//# sourceMappingURL=sky-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-slider.js","sources":["../../src/sky-slider/sky-slider.ts"],"sourcesContent":[null],"names":["SkySlider","LitElement","constructor","super","this","min","max","step","value","displayValue","label","disabled","prefix","suffix","shadow","commitOnly","showValue","styles","css","willUpdate","changedProps","has","handleInput","event","rawValue","Number","target","snapped","Math","round","dispatchEvent","CustomEvent","detail","bubbles","composed","handleChange","newValue","setValue","nextValue","clamped","render","formatted","toFixed","html","when","String","__decorate","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}

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

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

package/dist/sky-speeddial/index.js

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

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

@@ -0,0 +1,86 @@
+import { LitElement } from "lit";
+export type SkySpeeddialDirection = "top" | "bottom" | "left" | "right";
+export type SkySpeeddialToggleChangedDetail = {
+    open: boolean;
+    direction: SkySpeeddialDirection;
+};
+/**
+ * @element sky-speeddial
+ *
+ * @summary Floating action button that expands into contextual quick actions.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/speeddial
+ * @dependency sky-icon
+ *
+ * @uiVModel open toggle-changed
+ *
+ * @slot - Action buttons that appear when the speed dial is opened.
+ *
+ * @csspart fab - The circular FAB button that toggles the speed dial.
+ * @csspart actions - The container that holds the slotted action buttons.
+ *
+ * @property {boolean} open - Whether the action cluster is open.
+ * @property {SkySpeeddialDirection} direction - Preferred expansion direction.
+ * @property {string} fabIcon - Iconify icon used by the FAB button.
+ *
+ * @fires {CustomEvent<SkySpeeddialToggleChangedDetail>} toggle-changed - Fired when the dial open state changes.
+ * @method openMenu Opens the speed dial.
+ * @method closeMenu Closes the speed dial.
+ * @method toggleMenuState Toggles the speed dial state.
+ *
+ * @Behavior
+ * - Expands slotted actions around a central FAB.
+ * - Adjusts direction to keep action cluster in viewport.
+ * - Handles RTL-aware left/right direction transforms.
+ *
+ * @example
+ * ```html
+ * <sky-speeddial direction="top" fab-icon="material-symbols:add-rounded">
+ *   <button aria-label="Create ticket">T</button>
+ *   <button aria-label="Schedule deploy">D</button>
+ *   <button aria-label="Open runbook">R</button>
+ * </sky-speeddial>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-speeddial direction="top" fab-icon="material-symbols:add-rounded">
+ *     <button aria-label="Create ticket">T</button>
+ *     <button aria-label="Schedule deploy">D</button>
+ *     <button aria-label="Open runbook">R</button>
+ *   </sky-speeddial>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-speeddial direction="top" fab-icon="material-symbols:add-rounded">
+ *       <button aria-label="Create ticket">T</button>
+ *       <button aria-label="Schedule deploy">D</button>
+ *       <button aria-label="Open runbook">R</button>
+ *     </sky-speeddial>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkySpeeddial extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** Whether the action cluster is open. */
+    open: boolean;
+    /** Preferred expansion direction. May auto-adjust based on viewport. */
+    direction: SkySpeeddialDirection;
+    /** Iconify name for the FAB icon. */
+    fabIcon: string;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    /** Ensure the chosen direction keeps actions within the viewport. */
+    private adjustDirection;
+    /** Toggle open/closed and emit lifecycle events. */
+    private toggleMenu;
+    openMenu(): void;
+    closeMenu(): void;
+    toggleMenuState(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}