@sky.ui/core 0.0.1

package/dist/sky-radio-group/sky-radio-group.js

@@ -0,0 +1,239 @@
+import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as r,html as o}from"lit";import{property as s,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{FormControlBase as n}from"../helper/internals/form-control-base.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";let p=class extends n{setValue(t){this.value=t??"",this.updateCheckedState(this.value),this.syncFormValue()}constructor(){super(),this.value="",this.label="",this.layout="row",this.shadow=!0,this.force=!1,this.validationErrors=[],this.required=!1,this.validationActive=!1,this.requiredMessage="The Radio selection is required.",this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.disabled=!1,this.color="primary",this.readonly=!1,this.invalid=!1,this.variant="default",this._radioSelectHandler=t=>this.handleChange(t),this.captureDefaultValue("")}static{this.styles=i`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--sky-font);
+    }
+
+    :host([variant="highlight"]) {
+      .group-label {
+        color: var(--radio-checked-color);
+      }
+    }
+
+    /* readonly: subtle visual, but still focusable/tabbable */
+    :host([readonly]) .radio-wrapper {
+      cursor: default;
+    }
+
+    .radio-wrapper {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      width: inherit;
+      align-items: center;
+      background: transparent;
+      justify-content: space-between;
+      border-radius: var(--sky-radius-secondary);
+      min-height: 38px;
+      height: 100%;
+      pointer-events: auto;
+      transition: all 0.2s ease-in-out;
+      box-sizing: border-box;
+    }
+
+    :host([validationActive]:invalid) .radio-wrapper {
+      border-bottom: 1px solid var(--sky-danger-primary);
+    }
+    :host([validationActive]:invalid) .group-label {
+      color: var(--sky-danger-primary);
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    .error-message {
+      font-size: var(--sky-font-size-xs);
+      color: var(--sky-danger-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+      margin-top: 2px;
+      margin-left: 5px;
+      width: 100%;
+      text-align: start;
+      visibility: hidden;
+      font-family: var(--sky-font);
+    }
+    .error-message.show {
+      visibility: visible;
+    }
+
+    :dir(rtl) .error-message {
+      margin-right: 5px;
+      margin-left: unset;
+      text-align: end;
+    }
+
+    .radio-wrapper[force] {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .radio-wrapper[shadow] {
+      border: var(--sky-border-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      background: var(--sky-glass-primary);
+    }
+
+    .radio-wrapper.column {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .radio-wrapper.slot-only {
+      min-height: unset;
+      align-items: stretch;
+      justify-content: flex-start;
+    }
+
+    .radio-container.slot-only {
+      display: block;
+      width: 100%;
+      padding: 0;
+      gap: 0;
+      box-sizing: border-box;
+    }
+
+    .radio-container.slot-only.row,
+    .radio-container.slot-only.column {
+      flex-direction: unset;
+      align-items: unset;
+    }
+
+    .radio-wrapper[shadow]::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      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);
+      z-index: -1;
+      border-radius: inherit;
+    }
+
+    .group-label {
+      color: var(--sky-text-primary);
+      display: block;
+      padding: 5px;
+      font-size: var(--sky-font-size-sm);
+      font-family: var(--sky-font);
+    }
+
+    .radio-container {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+    }
+    .radio-container.row {
+      flex-direction: row;
+      padding: 5px;
+    }
+    .radio-container.column {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 5px;
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    .icon-slot {
+      display: none;
+      justify-content: center;
+      font-size: var(--sky-font-size-xl);
+      align-items: center;
+      border-radius: var(--sky-radius-secondary);
+      height: 38px;
+      color: var(--sky-text-primary);
+      min-width: 36px;
+      background: var(--sky-glass-primary);
+      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);
+      box-shadow: var(--sky-box-shadow-primary);
+      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
+        color 0.3s ease-in-out;
+    }
+
+    .icon-slot[filled] {
+      display: flex;
+      position: relative;
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-right: var(--sky-border-primary);
+    }
+    .icon-slot[filled]:hover {
+      transform: translate(-5px, -5px);
+      color: var(--radio-checked-color);
+      border: var(--sky-border-primary) !important;
+    }
+    :dir(rtl).icon-slot[filled]:hover {
+      transform: translate(5px, -5px);
+    }
+
+    .radio-wrapper[disabled] {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+    :host([validationActive]:invalid) .icon-slot {
+      color: var(--sky-danger-primary);
+    }
+  `}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}firstUpdated(){this.captureDefaultValue(this.value??""),this.syncChildRadios(),this.syncFormValue(),this.syncValidity()}updated(t){t.has("color")&&this.style.setProperty("--radio-checked-color",d(this.color)),t.has("value")&&(this.updateCheckedState(this.value),this.syncFormValue(),this.syncValidity()),(t.has("name")||t.has("disabled")||t.has("readonly"))&&this.syncChildRadios()}handleChange(t){if(this.disabled||this.readonly)return;const e=t.target;if(e?.matches("sky-radio")&&e.disabled)return;const i=t.detail.value;this.value=i,this.updateCheckedState(i),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.syncFormValue(),this.syncValidity(),this.validationActive&&this.validateInput()}validateInput(t=null){if(!this.validationActive)return!0;this.validationErrors=[];const e=null!==t?t:this.value;this.required&&!e&&this.validationErrors.push(this.requiredMessage),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=this.shadowRoot?.querySelector(".radio-wrapper");this.validationErrors.length>0?i?.classList.add("invalid"):i?.classList.remove("invalid");const r=this.shadowRoot?.querySelector(".icon-slot");r&&(this.validationErrors.length>0?r.classList.add("invalid"):r.classList.remove("invalid"));const o=0===this.validationErrors.length;return this.invalid=!o,o}focus(){const t=this.querySelector("sky-radio"),e=this.shadowRoot?.querySelector(".radio-wrapper");if(t){const e=t.shadowRoot?.querySelector("input[type='radio']");e&&e.focus()}e&&(e.classList.remove("shake"),e.offsetWidth,e.classList.add("shake"))}reset(){this.value="",this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.querySelectorAll("sky-radio").forEach(t=>t.checked=!1);const t=this.shadowRoot?.querySelector(".radio-wrapper");t?.classList.remove("invalid"),t?.classList.remove("shake");const e=this.shadowRoot?.querySelector(".icon-slot");e?.classList.remove("invalid"),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:""},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity()}updateCheckedState(t){this.querySelectorAll("sky-radio").forEach(e=>{e.checked=e.value===t})}syncChildRadios(){this.querySelectorAll("sky-radio").forEach(t=>{const e=t;this.name&&(e.name=this.name),e.hasAttribute("disabled")&&!e.hasAttribute("data-sky-radio-option-disabled")&&e.setAttribute("data-sky-radio-option-disabled",""),e.hasAttribute("readonly")&&!e.hasAttribute("data-sky-radio-option-readonly")&&e.setAttribute("data-sky-radio-option-readonly","");const i=e.hasAttribute("data-sky-radio-option-disabled")||e.hasAttribute("disabled"),r=e.hasAttribute("data-sky-radio-option-readonly")||e.hasAttribute("readonly");e.disabled=this.disabled||i,e.readonly=this.readonly||r,this.value&&e.value===this.value&&(e.checked=!0)})}connectedCallback(){super.connectedCallback(),this.addEventListener("radio-select",this._radioSelectHandler),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("radio-select",this._radioSelectHandler),super.disconnectedCallback()}handleIconClick(t,e=null){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}getFormValue(){return this.value||null}setValueFromFormState(t){"string"==typeof t?(this.value=t,this.updateCheckedState(t)):(this.value="",this.updateCheckedState(""))}getValidityAnchor(){return this.shadowRoot?.querySelector(".radio-container")?.querySelector("sky-radio")?.shadowRoot?.querySelector("input[type='radio']")}isEmpty(){return!this.value}getNativeControl(){return null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){this.validationErrors=[],this.validationActive=!1,this.invalid=!1}get _usesBuiltinGroupLabel(){return Boolean(this.label?.trim())}render(){const t=!!this.querySelector('[slot="icon-left"]'),e=!!this.querySelector('[slot="icon-right"]'),i=!this._usesBuiltinGroupLabel,r=t&&e?"space-between":t?"flex-start":"flex-end";return o`
+      <div
+        class="radio-wrapper ${this.layout} ${i?"slot-only":""}"
+        part="wrapper"
+        ?shadow=${this.shadow}
+        ?force=${this.force}
+        ?disabled=${this.disabled}
+        aria-readonly=${this.readonly?"true":"false"}
+        aria-disabled=${this.disabled?"true":"false"}
+      >
+        ${l(t||e||this._usesBuiltinGroupLabel,()=>o`
+            <div
+              style="display:flex;flex-direction:row;justify-content:${r};align-items:center;width:${this.force?"100%":""};"
+            >
+              ${l(t,()=>o`<div
+                  class="icon-slot left"
+                  part="icon-left"
+                  ?filled=${t}
+                  @click=${t=>this.handleIconClick("left",t)}
+                >
+                  <slot name="icon-left"></slot>
+                </div>`)}
+              ${l(this._usesBuiltinGroupLabel,()=>o`<span class="group-label" part="group-label">
+                  <span style="color:${this.prefixColor}">${this.prefix}</span>${this.label}<span style="color:${this.suffixColor}">${this.suffix}</span>
+                </span>`)}
+              ${l(e,()=>o`<div
+                  class="icon-slot right"
+                  part="icon-right"
+                  ?filled=${e}
+                  @click=${t=>this.handleIconClick("right",t)}
+                >
+                  <slot name="icon-right"></slot>
+                </div>`)}
+            </div>
+          `)}
+        <div
+          class="radio-container ${this.layout} ${i?"slot-only":""}"
+          part="container"
+          tabindex="-1"
+          ?force=${this.force}
+        >
+          <slot></slot>
+        </div>
+      </div>
+      <div
+        class="error-message ${this.showErrors&&this.validationErrors.length>0&&this.validationActive?"show":""}"
+        part="error"
+      >
+        ${this.validationErrors[0]}
+      </div>
+    `}};t([s({type:String}),e("design:type",Object)],p.prototype,"value",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"label",void 0),t([s({type:String}),e("design:type",String)],p.prototype,"layout",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"shadow",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"force",void 0),t([s({type:Array}),e("design:type",Array)],p.prototype,"validationErrors",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"required",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"validationActive",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"requiredMessage",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"showErrors",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefixColor",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffixColor",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"disabled",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"color",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"readonly",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Boolean)],p.prototype,"invalid",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],p.prototype,"variant",void 0),p=t([a("sky-radio-group"),e("design:paramtypes",[])],p);export{p as SkyRadioGroup};
+//# sourceMappingURL=sky-radio-group.js.map

package/dist/sky-radio-group/sky-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-radio-group.js","sources":["../../src/sky-radio-group/sky-radio-group.ts"],"sourcesContent":[null],"names":["SkyRadioGroup","FormControlBase","setValue","value","this","updateCheckedState","syncFormValue","constructor","super","label","layout","shadow","force","validationErrors","required","validationActive","requiredMessage","showErrors","prefix","suffix","prefixColor","suffixColor","disabled","color","readonly","invalid","variant","_radioSelectHandler","e","handleChange","captureDefaultValue","styles","css","shadowRootOptions","LitElement","delegatesFocus","firstUpdated","syncChildRadios","syncValidity","updated","changedProperties","has","style","setProperty","resolveColor","source","target","matches","newValue","detail","dispatchEvent","CustomEvent","bubbles","composed","reemitNativeEvent","validateInput","currentValue","push","errors","radioElement","shadowRoot","querySelector","length","classList","add","remove","iconSlots","isValid","focus","firstRadio","radioContainer","radioInput","offsetWidth","reset","querySelectorAll","forEach","radio","checked","iconSlot","selectedValue","r","name","hasAttribute","setAttribute","optionDisabled","optionReadonly","connectedCallback","addEventListener","tabIndex","disconnectedCallback","removeEventListener","handleIconClick","position","event","eventType","type","eventData","getFormValue","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","getCustomErrorMessage","onFormReset","_usesBuiltinGroupLabel","Boolean","trim","render","hasLeftIcon","hasRightIcon","slotOnly","justifyContent","html","when","__decorate","property","String","prototype","reflect","Array","customElement"],"mappings":"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"}

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

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

package/dist/sky-range/index.js

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

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

@@ -0,0 +1,110 @@
+import { LitElement } from "lit";
+export type SkyRangeChangedDetail = {
+    from: number;
+    to: number;
+};
+/**
+ * @element sky-range
+ *
+ * @summary Dual-thumb range selector for choosing minimum and maximum values.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/slider
+ *
+ * @uiVModel from range-changed detail=from
+ * @uiVModel to range-changed detail=to
+ *
+ * @slot - (No slots) — Content is internally rendered.
+ *
+ * @csspart container - The outer card-like wrapper.
+ * @csspart label - The top-left label.
+ * @csspart value - The formatted value summary at the top-right.
+ * @csspart slider-container - Wrapper around the track and sliders.
+ * @csspart track - The full, unselected track element.
+ * @csspart highlight - The selected range highlight.
+ * @csspart slider-from - The native `<input type="range">` controlling `from`.
+ * @csspart slider-to - The native `<input type="range">` controlling `to`.
+ *
+ * @property {number} from - Lower bound of the selected range.
+ * @property {number} to - Upper bound of the selected range.
+ * @property {number} min - Minimum selectable value.
+ * @property {number} max - Maximum selectable value.
+ * @property {number} step - Step interval used for snapping values.
+ * @property {string} label - Optional label shown above sliders.
+ * @property {boolean} disabled - Disables interaction and dims the control.
+ * @property {string} prefix - Text rendered before numeric values.
+ * @property {string} suffix - Text rendered after numeric values.
+ * @property {boolean} shadow - Adds glass border/shadow styling to the container.
+ * @property {boolean} commitOnly - Emits updates only on committed change events.
+ * @property {boolean} showValue - Toggles formatted value summary visibility.
+ *
+ * @fires {CustomEvent<SkyRangeChangedDetail>} range-changed - Fired when the selected range is committed.
+ * @method setRange Sets and normalizes the selected range.
+ *
+ * @Behavior
+ * - Maintains a valid `from < to` range while dragging both thumbs.
+ * - Supports live updates or commit-only updates through `commitOnly`.
+ * - Uses native range inputs for built-in keyboard and screen-reader support.
+ *
+ * @example
+ * ```html
+ * <sky-range label="Price Range" prefix="$" min="0" max="1000" step="50" from="200" to="700" show-value shadow commit-only></sky-range>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-range label="Price Range" prefix="$" :min="0" :max="1000" :step="50" :from="200" :to="700" show-value shadow commit-only></sky-range>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-range label="Price Range" prefix="$" min={0} max={1000} step={50} from={200} to={700} show-value shadow commit-only></sky-range>;
+ * }
+ * ```
+ */
+export declare class SkyRange extends LitElement {
+    /** Lower bound of the selection. */
+    from: number;
+    /** Upper bound of the selection. */
+    to: number;
+    /** Minimum possible value. */
+    min: number;
+    /** Maximum possible value. */
+    max: number;
+    /** Step interval for snapping. */
+    step: number;
+    /** Optional label text. */
+    label: string;
+    /** Disables the range when true. */
+    disabled: boolean;
+    /** Prefix shown before numbers. */
+    prefix: string;
+    /** Suffix shown after numbers. */
+    suffix: string;
+    /** Whether to show shadow/glass border on the container. */
+    shadow: boolean;
+    /** Whether to only emit on commit (not live). */
+    commitOnly: boolean;
+    /** If true, shows the value label; otherwise hides it. */
+    showValue: boolean;
+    private _lastCommittedFrom;
+    private _lastCommittedTo;
+    static styles: import("lit").CSSResult;
+    /** Round a value to the nearest `step` (guarding against non-positive step). */
+    private roundToStep;
+    /** Clamp a value into `[min, max]`. */
+    private clamp;
+    /** Live update for the `from` thumb. Emits live when `commitOnly = false`. */
+    private onFromInput;
+    /** Commit change for the `from` thumb. Emits only when `commitOnly = true`. */
+    private onFromChange;
+    /** Live update for the `to` thumb. Emits live when `commitOnly = false`. */
+    private onToInput;
+    /** Commit change for the `to` thumb. Emits only when `commitOnly = true`. */
+    private onToChange;
+    /** Dispatches `range-changed` with the current range values. */
+    private dispatchRangeChange;
+    setRange(from: number, to: number): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-range/sky-range.js

@@ -0,0 +1,196 @@
+import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as s,html as r}from"lit";import{property as a,customElement as o}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{styleMap as h}from"lit/directives/style-map.js";let p=class extends e{constructor(){super(...arguments),this.from=20,this.to=80,this.min=0,this.max=100,this.step=10,this.label="",this.disabled=!1,this.prefix="",this.suffix="",this.shadow=!1,this.commitOnly=!1,this.showValue=!0,this._lastCommittedFrom=this.from,this._lastCommittedTo=this.to}static{this.styles=s`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      font-family: var(--sky-font);
+      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);
+    }
+
+    /* Only apply glass/shadow if shadow prop is set */
+    .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;
+      font-weight: inherit;
+      color: var(--sky-text-primary);
+      text-align: center;
+    }
+
+    .slider-container {
+      position: relative;
+      width: 100%;
+      height: 14px;
+    }
+
+    .track {
+      position: absolute;
+      width: 100%;
+      height: 3px;
+      background: var(--sky-hover-primary);
+      top: 50%;
+      transform: translateY(-50%);
+      border-radius: 6px;
+    }
+
+    .range-highlight {
+      position: absolute;
+      height: 3px;
+      background: var(--sky-active-primary);
+      border-radius: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .range-value {
+      font-size: 14px;
+      color: var(--sky-text-primary);
+      font-weight: inherit;
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    input[type="range"] {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      height: 14px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      pointer-events: none; /* thumbs capture events */
+      margin: 0;
+    }
+
+    .prefix,
+    .suffix {
+      color: var(--sky-text-secondary);
+      font-size: 14px;
+      font-weight: inherit;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      pointer-events: auto;
+      -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"]::-moz-range-thumb {
+      pointer-events: auto;
+      width: 14px;
+      height: 14px;
+      background: var(--sky-active-primary-dark);
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    .range-container[disabled] {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+  `}roundToStep(t){const i=this.step>0?this.step:1;return Math.round(t/i)*i}clamp(t){return Math.min(this.max,Math.max(this.min,t))}onFromInput(t){const i=t.target,e=Number(i.value),s=this.clamp(e);if(s>=this.to)return;if(this.commitOnly)return void(this.from=s);const r=this.roundToStep(s);r>=this.to||r!==this.from&&(this.from=r,this._lastCommittedFrom=r,this.dispatchRangeChange())}onFromChange(t){const i=t.target,e=Number(i.value),s=this.clamp(e),r=this.roundToStep(s);r>=this.to?i.value=String(this.from):(this.from=r,i.value=String(this.from),this.commitOnly&&r!==this._lastCommittedFrom&&(this._lastCommittedFrom=r,this.dispatchRangeChange()))}onToInput(t){const i=t.target,e=Number(i.value),s=this.clamp(e);if(s<=this.from)return;if(this.commitOnly)return void(this.to=s);const r=this.roundToStep(s);r<=this.from||r!==this.to&&(this.to=r,this._lastCommittedTo=r,this.dispatchRangeChange())}onToChange(t){const i=t.target,e=Number(i.value),s=this.clamp(e),r=this.roundToStep(s);r<=this.from?i.value=String(this.to):(this.to=r,i.value=String(this.to),this.commitOnly&&r!==this._lastCommittedTo&&(this._lastCommittedTo=r,this.dispatchRangeChange()))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("range-changed",{detail:{from:this.from,to:this.to},bubbles:!0,composed:!0}))}setRange(t,i){const e=this.roundToStep(this.clamp(t)),s=this.roundToStep(this.clamp(i));e>=s||(this.from=e,this.to=s,this._lastCommittedFrom=e,this._lastCommittedTo=s,this.dispatchRangeChange())}render(){const t=this.closest('[dir="rtl"]')||"rtl"===document.dir,i=Math.max(1,this.max-this.min),e=(this.from-this.min)/i*100,s=(this.to-this.min)/i*100,a=Math.max(0,s-e);return r`
+      <div
+        class="range-container"
+        part="container"
+        ?disabled="${this.disabled}"
+        ?shadow="${this.shadow}"
+        aria-disabled="${this.disabled?"true":"false"}"
+      >
+        ${n(this.showValue||""!==this.label,()=>r`
+            <div
+              style="display:flex;align-items:center;gap:5px;justify-content:space-between;width:100%;"
+            >
+              ${n(this.label,()=>r`<div class="range-label" part="label">${this.label}</div>`)}
+              ${n(this.showValue,()=>r`
+                  <div class="range-value" part="value">
+                    <span class="prefix">${this.prefix}</span>
+                    ${this.from.toFixed(2)}<span class="suffix">${this.suffix}</span>
+                    -
+                    <span class="prefix">${this.prefix}</span>
+                    ${this.to.toFixed(2)}<span class="suffix">${this.suffix}</span>
+                  </div>
+                `)}
+            </div>
+          `)}
+
+        <div class="slider-container" part="slider-container">
+          <div class="track" part="track"></div>
+          <div
+            class="range-highlight"
+            part="highlight"
+            style=${h(t?{right:`${e}%`,width:`${a}%`}:{left:`${e}%`,width:`${a}%`})}
+          ></div>
+
+          <input
+            part="slider-from"
+            type="range"
+            ?disabled="${this.disabled}"
+            min="${this.min}"
+            max="${this.max}"
+            step="${this.step}"
+            .value="${String(this.from)}"
+            @input="${this.onFromInput}"
+            @change="${this.onFromChange}"
+            aria-label="${this.label?`${this.label} from`:"From"}"
+          />
+
+          <input
+            part="slider-to"
+            type="range"
+            ?disabled="${this.disabled}"
+            min="${this.min}"
+            max="${this.max}"
+            step="${this.step}"
+            .value="${String(this.to)}"
+            @input="${this.onToInput}"
+            @change="${this.onToChange}"
+            aria-label="${this.label?`${this.label} to`:"To"}"
+          />
+        </div>
+      </div>
+    `}};t([a({type:Number}),i("design:type",Object)],p.prototype,"from",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"to",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"min",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"max",void 0),t([a({type:Number}),i("design:type",Object)],p.prototype,"step",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"label",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"disabled",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"prefix",void 0),t([a({type:String}),i("design:type",Object)],p.prototype,"suffix",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"shadow",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"commitOnly",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Object)],p.prototype,"showValue",void 0),p=t([o("sky-range")],p);export{p as SkyRange};
+//# sourceMappingURL=sky-range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-range.js","sources":["../../src/sky-range/sky-range.ts"],"sourcesContent":[null],"names":["SkyRange","LitElement","constructor","this","from","to","min","max","step","label","disabled","prefix","suffix","shadow","commitOnly","showValue","_lastCommittedFrom","_lastCommittedTo","styles","css","roundToStep","value","Math","round","clamp","onFromInput","event","input","target","raw","Number","clamped","snapped","dispatchRangeChange","onFromChange","String","onToInput","onToChange","dispatchEvent","CustomEvent","detail","bubbles","composed","setRange","nextFrom","nextTo","render","isRTL","closest","document","dir","range","fromOffset","toOffset","width","html","when","toFixed","styleMap","right","left","__decorate","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}

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

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

package/dist/sky-row/index.js

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

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

@@ -0,0 +1,57 @@
+import { LitElement } from "lit";
+/**
+ * @element sky-row
+ *
+ * @summary Lightweight semantic row wrapper for use inside `sky-grid`.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/grid
+ * @dependency sky-grid
+ *
+ * @slot - Default slot for child content.
+ *
+ * @Behavior
+ * - Renders as `display: contents` so it does not add layout wrappers.
+ * - Preserves semantic grouping for rows while children participate directly in parent layout.
+ *
+ * @example
+ * ```html
+ * <sky-grid columns="3" gap="12px">
+ *   <sky-row>
+ *     <div>Account</div>
+ *     <div>Status</div>
+ *     <div>Actions</div>
+ *   </sky-row>
+ * </sky-grid>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-grid columns="3" gap="12px">
+ *     <sky-row>
+ *       <div>Account</div>
+ *       <div>Status</div>
+ *       <div>Actions</div>
+ *     </sky-row>
+ *   </sky-grid>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-grid columns="3" gap="12px">
+ *       <sky-row>
+ *         <div>Account</div>
+ *         <div>Status</div>
+ *         <div>Actions</div>
+ *       </sky-row>
+ *     </sky-grid>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-row/sky-row.js

@@ -0,0 +1,6 @@
+import{__decorate as t}from"tslib";import{customElement as s}from"lit/decorators.js";import{LitElement as o,css as r,html as e}from"lit";let i=class extends o{static{this.styles=r`
+    :host {
+      display: contents;
+    }
+  `}render(){return e`<slot></slot>`}};i=t([s("sky-row")],i);export{i as SkyRow};
+//# sourceMappingURL=sky-row.js.map