@odx/foundation 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/separator/separator.component.js

@@ -0,0 +1,35 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './separator.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let OdxSeparatorComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.highlight = false;
+    this.vertical = false;
+  }
+  render() {
+    return "";
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "highlight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSeparatorComponent.prototype, "vertical", 2);
+OdxSeparatorComponent = __decorateClass([
+  customElement("odx-separator", [styles])
+], OdxSeparatorComponent);
+
+export { OdxSeparatorComponent };

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './skeleton.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/skeleton.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-fill: var(--odx-color-disabled-fill);display:block;block-size:var(--odx-size-150);inline-size:100%;background:linear-gradient(90deg,var(--_color-fill) 33%,var(--odx-color-disabled-foreground) 50%,var(--_color-fill) 66%);background-size:200% 100%;animation:odx-skeleton-loading 2s infinite linear}:host([rounded]:not([rounded=\"false\"])){border-radius:var(--odx-border-radius-md)}@keyframes odx-skeleton-loading{0%{background-position:100% 100%}to{background-position:-100% 100%}}";
+
+export { styles as default };

package/dist/{elements/skeleton/skeleton.element.d.ts → components/skeleton/skeleton.component.d.ts}

@@ -2,11 +2,11 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-skeleton': OdxSkeletonElement;
+        'odx-skeleton': OdxSkeletonComponent;
     }
 }
-export declare class OdxSkeletonElement extends CustomElement {
+export declare class OdxSkeletonComponent extends CustomElement {
     rounded: boolean;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=skeleton.element.d.ts.map
+//# sourceMappingURL=skeleton.component.d.ts.map

package/dist/components/skeleton/skeleton.component.js

@@ -0,0 +1,32 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './skeleton.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let OdxSkeletonComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.rounded = false;
+  }
+  render() {
+    return html``;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSkeletonComponent.prototype, "rounded", 2);
+OdxSkeletonComponent = __decorateClass([
+  customElement("odx-skeleton", [styles])
+], OdxSkeletonComponent);
+
+export { OdxSkeletonComponent };

package/dist/components/slider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './slider-handle.component';
+export * from './slider-marks.component';
+export * from './slider.component';
+export * from './slider.models';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/slider/slider-handle.component.css.js

@@ -0,0 +1,3 @@
+const styles = "*{margin:0;padding:0;box-sizing:border-box}:host{--_thumb-color: var(--_track-color);--_thumb-size: var(--odx-size-150);--_previous-position: 0%;--_position: 0%;--_next-position: 0%;display:contents}:host::part(track),:host::part(thumb),:host::part(label){position:absolute}:host::part(track),:host::part(label){pointer-events:none}:host::part(thumb),:host::part(label){background-color:var(--_thumb-color);inset-inline-start:var(--_position)}:host::part(track){background-color:var(--_track-color);border-radius:var(--_track-size);inset:0 calc(100% - var(--_position)) 0 var(--_previous-position);z-index:var(--_layer-background)}:host::part(thumb){display:flex;place-content:center;place-items:center;border-radius:50%;block-size:var(--_thumb-size);inline-size:var(--_thumb-size);inset-block-start:50%;cursor:grab;transform:translate(-50%,-50%);z-index:var(--_layer-interactive);box-shadow:var(--odx-shadow-level-0);outline:0 solid var(--odx-palette-cyan-50-15)}:host::part(label){inset-block-end:100%;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(0);opacity:0;border-radius:var(--odx-border-radius-sm);color:var(--odx-color-foreground-light);padding-inline:var(--odx-size-50);line-height:var(--odx-size-150);z-index:var(--_layer-foreground)}:host::part(with-motion){transition:var(--odx-transition-reduced)}:host([odx-drag-active])::part(with-motion){transition-property:outline}:host::part(thumb):active,:host(:active)::part(thumb){outline-width:var(--odx-size-75)}:host(:hover),:host(:focus-within){--_thumb-color: var(--odx-color-highlight-rest)}:host(:focus-within)::part(label),:host(:hover)::part(label){opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--odx-size-75))) scale(1)}:host([aria-disabled=\"true\"]){pointer-events:none}:host([aria-disabled=\"true\"])::part(thumb){--_thumb-color: var(--odx-color-disabled-fill);z-index:var(--_layer-interactive-disabled)}";
+
+export { styles as default };

package/dist/{elements/slider/slider-handle.element.d.ts → components/slider/slider-handle.component.d.ts}

@@ -1,14 +1,14 @@
 import { CustomElement } from '@odx/foundation';
 import { DragEvent } from '@odx/foundation/cdk';
 import { PropertyValueMap, TemplateResult } from 'lit';
-import { SliderTrackVisibility } from './models';
+import { SliderTrackVisibility } from './slider.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-slider-handle': OdxSliderHandleElement;
+        'odx-slider-handle': OdxSliderHandleComponent;
     }
 }
-declare const OdxSliderHandleElement_base: import('@odx/foundation').Constructor<import('@odx/foundation/cdk').DraggableElement> & import('@odx/foundation').Constructor<import('@odx/foundation').IsNumberControl> & typeof CustomElement;
-export declare class OdxSliderHandleElement extends OdxSliderHandleElement_base {
+declare const OdxSliderHandleComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation/cdk').DraggableElement> & import('@odx/foundation').Constructor<import('@odx/foundation').IsNumberControl> & typeof CustomElement;
+export declare class OdxSliderHandleComponent extends OdxSliderHandleComponent_base {
     #private;
     private context;
     step: never;
@@ -26,4 +26,4 @@ export declare class OdxSliderHandleElement extends OdxSliderHandleElement_base
     protected render(): TemplateResult;
 }
 export {};
-//# sourceMappingURL=slider-handle.element.d.ts.map
+//# sourceMappingURL=slider-handle.component.d.ts.map

package/dist/components/slider/slider-handle.component.js

@@ -0,0 +1,168 @@
+import { consume } from '@lit/context';
+import { NumberControl, CustomElement, customElement } from '@odx/foundation';
+import { IsDraggable, IS_DRAG_ACTIVE_ATTRIBUTE } from '@odx/foundation/cdk';
+import { round, clamp } from 'es-toolkit';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './slider-handle.component.css.js';
+import { sliderContext, SliderLabelVisibility, SliderTrackVisibility } from './slider.models.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _previousHandle, _nextHandle, _OdxSliderHandleComponent_instances, isLabelVisible_fn, isTrackVisible_fn, findClosestValue_fn, updatePosition_fn, getValueFromPosition_fn, calculateValue_fn, limitValue_fn, findPreviousHandle_fn, findNextHandle_fn;
+let OdxSliderHandleComponent = class extends IsDraggable(NumberControl(CustomElement)) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxSliderHandleComponent_instances);
+    this.context = sliderContext.defaultValue;
+    __privateAdd(this, _previousHandle, null);
+    __privateAdd(this, _nextHandle, null);
+  }
+  get minRange() {
+    return Math.ceil(this.context.minRange / this.context.step) * this.context.step;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "slider";
+    this.slot = "thumbs";
+    this.tabIndex = 0;
+  }
+  beforeDragStart(event) {
+    super.beforeDragStart?.(event);
+    __privateGet(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
+    this.value = __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
+    this.focus();
+  }
+  dragStart(event) {
+    super.dragStart?.(event);
+    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position));
+  }
+  dragMove(event) {
+    super.dragMove?.(event);
+    const value = __privateMethod(this, _OdxSliderHandleComponent_instances, getValueFromPosition_fn).call(this, event.position);
+    const closestValue = __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, value);
+    if (this.value !== closestValue) {
+      this.value = closestValue;
+    }
+    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, value);
+  }
+  afterDragEnd(event) {
+    super.afterDragEnd?.(event);
+    __privateGet(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
+    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, this.value));
+  }
+  getDistance(containerElement, event) {
+    const rect = containerElement.getBoundingClientRect();
+    const relativePosition = round((event.x - rect.x) / rect.width) * 100;
+    return Math.abs(this.value - __privateMethod(this, _OdxSliderHandleComponent_instances, calculateValue_fn).call(this, relativePosition));
+  }
+  getValueText() {
+    return this.context.unit ? `${this.value}${this.context.unit}` : super.getValueText();
+  }
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("value")) {
+      this.value = __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, this.value);
+      this.ariaValueNow = String(this.value);
+    }
+    if (props.has("disabled")) {
+      this.dragDisabled = this.disabled;
+    }
+  }
+  updated(props) {
+    super.updated(props);
+    if (this.isDragActive) return;
+    __privateSet(this, _previousHandle, __privateMethod(this, _OdxSliderHandleComponent_instances, findPreviousHandle_fn).call(this));
+    __privateSet(this, _nextHandle, __privateMethod(this, _OdxSliderHandleComponent_instances, findNextHandle_fn).call(this));
+    __privateMethod(this, _OdxSliderHandleComponent_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, findClosestValue_fn).call(this, this.value));
+  }
+  render() {
+    const label = this.getValueText() || this.value;
+    return html`
+      ${when(__privateMethod(this, _OdxSliderHandleComponent_instances, isTrackVisible_fn).call(this), () => html`<div part="track with-motion"></div>`)}
+      <div part="thumb with-motion" tabindex="0"></div>
+      ${when(__privateMethod(this, _OdxSliderHandleComponent_instances, isLabelVisible_fn).call(this), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
+    `;
+  }
+};
+_previousHandle = new WeakMap();
+_nextHandle = new WeakMap();
+_OdxSliderHandleComponent_instances = new WeakSet();
+isLabelVisible_fn = function() {
+  return this.context.labelVisibility !== SliderLabelVisibility.HIDDEN;
+};
+isTrackVisible_fn = function() {
+  if (this.trackVisibility === SliderTrackVisibility.VISIBLE) {
+    return true;
+  }
+  if (this.trackVisibility === SliderTrackVisibility.HIDDEN) {
+    return false;
+  }
+  return !!__privateGet(this, _previousHandle) || !__privateGet(this, _previousHandle) && !__privateGet(this, _nextHandle);
+};
+findClosestValue_fn = function(value) {
+  const closestValue = value - value % this.context.step;
+  const isNextValue = value - closestValue > this.context.step / 2;
+  return __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, closestValue + (isNextValue ? this.context.step : 0));
+};
+updatePosition_fn = function(value) {
+  const valuePercentage = `${round(clamp((value - this.context.min) / this.context.range, 0, 1) * 100, 3)}%`;
+  this.style.setProperty("--_position", valuePercentage);
+  __privateGet(this, _nextHandle)?.style.setProperty("--_previous-position", valuePercentage);
+  __privateGet(this, _previousHandle)?.style.setProperty("--_next-position", valuePercentage);
+};
+getValueFromPosition_fn = function(position) {
+  return __privateMethod(this, _OdxSliderHandleComponent_instances, limitValue_fn).call(this, __privateMethod(this, _OdxSliderHandleComponent_instances, calculateValue_fn).call(this, position.x));
+};
+calculateValue_fn = function(relativePosition) {
+  return clamp(relativePosition / 100, 0, 1) * this.context.range + this.context.min;
+};
+limitValue_fn = function(value) {
+  const startLimit = __privateGet(this, _previousHandle) ? Math.max(__privateGet(this, _previousHandle).value, this.min - this.minRange) + this.minRange : this.min;
+  const endLimit = __privateGet(this, _nextHandle) ? Math.min(__privateGet(this, _nextHandle).value, this.max + this.minRange) - this.minRange : this.max;
+  return clamp(value, startLimit, endLimit);
+};
+findPreviousHandle_fn = function() {
+  let sibling = this.previousElementSibling;
+  while (sibling) {
+    if (sibling instanceof OdxSliderHandleComponent) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+  return null;
+};
+findNextHandle_fn = function() {
+  let sibling = this.nextElementSibling;
+  while (sibling) {
+    if (sibling instanceof OdxSliderHandleComponent) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+  return null;
+};
+__decorateClass([
+  consume({ context: sliderContext.context, subscribe: true })
+], OdxSliderHandleComponent.prototype, "context", 2);
+__decorateClass([
+  property()
+], OdxSliderHandleComponent.prototype, "trackVisibility", 2);
+OdxSliderHandleComponent = __decorateClass([
+  customElement("odx-slider-handle", [styles])
+], OdxSliderHandleComponent);
+
+export { OdxSliderHandleComponent };

package/dist/components/slider/slider-marks.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_mark-color: var(--odx-slider-mark-color, var(--odx-palette-coolgray-40));--_mark-tick-block-size: var(--odx-size-75);--_mark-tick-inline-size: var(--odx-size-12);display:flex;align-items:center;flex-direction:row;position:absolute;inset:0;z-index:-1;pointer-events:none}[part~=mark]{flex:1 0 auto;position:relative}[part~=mark][last]{flex:0 0 0}[part~=mark-tick]{display:block;width:2px;inset-inline-end:0;transform:translate(calc(-.5 * var(--_mark-tick-inline-size)));height:var(--_mark-tick-block-size);background-color:var(--_mark-color)}[part~=mark][last] [part~=mark-tick]{transform:none}[part~=mark-label]{text-align:center;transform:translate(-50%) translateY(var(--odx-size-100));position:absolute;inset-block-start:0;line-height:inherit}[part~=mark]:not(:last-of-type){border-inline-end-color:var(--_mark-color)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
+
+export { styles as default };

package/dist/{elements/slider/slider-marks.element.d.ts → components/slider/slider-marks.component.d.ts}

@@ -2,15 +2,15 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-slider-marks': OdxSliderMarksElement;
+        'odx-slider-marks': OdxSliderMarksComponent;
     }
 }
-export declare class OdxSliderMarksElement extends CustomElement {
-    protected context: import('./slider-context').SliderContext;
+export declare class OdxSliderMarksComponent extends CustomElement {
+    protected context: import('./slider.models').SliderContext;
     step?: number;
     showLabels: boolean;
     connectedCallback(): Promise<void>;
     protected render(): TemplateResult;
     protected renderMark(value: number, last?: boolean): TemplateResult;
 }
-//# sourceMappingURL=slider-marks.element.d.ts.map
+//# sourceMappingURL=slider-marks.component.d.ts.map

package/dist/components/slider/slider-marks.component.js

@@ -0,0 +1,61 @@
+import { consume } from '@lit/context';
+import { CustomElement, customElement } from '@odx/foundation';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import styles from './slider-marks.component.css.js';
+import { sliderContext } from './slider.models.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let OdxSliderMarksComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.context = sliderContext.defaultValue;
+    this.showLabels = false;
+  }
+  async connectedCallback() {
+    super.connectedCallback?.();
+    this.slot = "marks";
+  }
+  render() {
+    const step = this.step ?? this.context.step;
+    const markCount = Math.floor(this.context.range / step);
+    const marks = new Array(markCount).fill(null).map((_, index) => step * index + this.context.min);
+    return html`
+      ${repeat(marks, (value) => this.renderMark(value))}
+      ${this.renderMark(this.context.max, true)}
+    `;
+  }
+  renderMark(value, last = false) {
+    const label = this.showLabels ? html`<odx-text part="mark-label" size="xs" highlight>${value}</odx-text>` : nothing;
+    return html`
+      <div part="mark" ?last=${last}>
+        <span part="mark-tick"></span>
+        ${label}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume({ context: sliderContext.context, subscribe: true })
+], OdxSliderMarksComponent.prototype, "context", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxSliderMarksComponent.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSliderMarksComponent.prototype, "showLabels", 2);
+OdxSliderMarksComponent = __decorateClass([
+  customElement("odx-slider-marks", [styles])
+], OdxSliderMarksComponent);
+
+export { OdxSliderMarksComponent };

package/dist/components/slider/slider.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_track-size: var(--odx-size-25);--_track-color: var(--odx-slider-track-color, var(--odx-color-primary-rest));--_layer-background: 0;--_layer-interactive-disabled: 1;--_layer-interactive: 2;--_layer-foreground: 3;display:flex;flex-direction:column;place-content:center;min-height:var(--odx-size-300);padding-block-start:var(--odx-size-75);padding-block-end:var(--odx-size-50);padding-inline:var(--odx-size-75);cursor:pointer}:host(:active){cursor:grabbing}:host::part(container){block-size:var(--_track-size);position:relative;background-color:var(--odx-palette-coolgray-40);border-radius:var(--odx-border-radius-sm)}";
+
+export { styles as default };

package/dist/{elements/slider/slider.element.d.ts → components/slider/slider.component.d.ts}

@@ -1,17 +1,17 @@
 import { CustomElement } from '@odx/foundation';
 import { DragController } from '@odx/foundation/cdk';
 import { TemplateResult } from 'lit';
-import { SliderLabelVisibility } from './models';
-import { OdxSliderHandleElement } from './slider-handle.element';
+import { OdxSliderHandleComponent } from './slider-handle.component';
+import { SliderLabelVisibility } from './slider.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-slider': OdxSliderElement;
+        'odx-slider': OdxSliderComponent;
     }
 }
-export declare class OdxSliderElement extends CustomElement {
+export declare class OdxSliderComponent extends CustomElement {
     #private;
-    protected dragController: DragController<OdxSliderHandleElement>;
-    protected context: import('./slider-context').SliderContext;
+    protected dragController: DragController<OdxSliderHandleComponent>;
+    protected context: import('./slider.models').SliderContext;
     protected container: HTMLElement;
     set step(value: number);
     get step(): number;
@@ -24,4 +24,4 @@ export declare class OdxSliderElement extends CustomElement {
     constructor();
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=slider.element.d.ts.map
+//# sourceMappingURL=slider.component.d.ts.map

package/dist/components/slider/slider.component.js

@@ -0,0 +1,119 @@
+import { provide } from '@lit/context';
+import { CustomElement, getKeyboardEventInfo, customElement } from '@odx/foundation';
+import { DragController } from '@odx/foundation/cdk';
+import { minBy, maxBy } from 'es-toolkit';
+import { isServer, html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { OdxSliderHandleComponent } from './slider-handle.component.js';
+import styles from './slider.component.css.js';
+import { sliderContext } from './slider.models.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _handleKeyboardEvent, _handleSlotChange;
+let OdxSliderComponent = class extends CustomElement {
+  constructor() {
+    super();
+    this.dragController = new DragController(this, {
+      getDraggableElements: () => Array.from(this.querySelectorAll(OdxSliderHandleComponent.selector)),
+      getContainer: () => this.container
+    });
+    this.context = sliderContext.defaultValue;
+    __privateAdd(this, _handleKeyboardEvent, (event) => {
+      const { actions, direction } = getKeyboardEventInfo(event);
+      const target = event.target;
+      if (target.localName !== OdxSliderHandleComponent.selector || actions.tab || actions.backTab || target.disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (direction.left || direction.down) {
+        target.value -= this.step;
+      } else if (direction.right || direction.up) {
+        target.value += this.step;
+      } else if (actions.start) {
+        target.value = this.context.min;
+      } else if (actions.end) {
+        target.value = this.context.max;
+      }
+    });
+    __privateAdd(this, _handleSlotChange, async () => {
+      const elements = this.dragController.draggableElements;
+      const min = minBy(elements, (elment) => elment.min)?.min ?? 0;
+      const max = maxBy(elements, (element) => element.max)?.max ?? 1;
+      this.context = { ...this.context, min, max, range: Math.abs(max - min) };
+    });
+    if (!isServer) {
+      this.addEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
+    }
+  }
+  set step(value) {
+    this.context = { ...this.context, step: Math.max(1, value) };
+  }
+  get step() {
+    return this.context.step;
+  }
+  set minRange(value) {
+    this.context = { ...this.context, minRange: Math.max(0, value) };
+  }
+  get minRange() {
+    return this.context.minRange;
+  }
+  set labelVisibility(value) {
+    this.context = { ...this.context, labelVisibility: value };
+  }
+  get labelVisibility() {
+    return this.context.labelVisibility;
+  }
+  set unit(value) {
+    this.context = { ...this.context, unit: value.trim() };
+  }
+  get unit() {
+    return this.context.unit;
+  }
+  render() {
+    return html`
+      <div part="container" role="presentation">
+        <slot name="thumbs" @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
+        <slot name="marks"></slot>
+      </div>
+    `;
+  }
+};
+_handleKeyboardEvent = new WeakMap();
+_handleSlotChange = new WeakMap();
+__decorateClass([
+  provide({ context: sliderContext.context })
+], OdxSliderComponent.prototype, "context", 2);
+__decorateClass([
+  query('[part="container"]', true)
+], OdxSliderComponent.prototype, "container", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxSliderComponent.prototype, "step", 1);
+__decorateClass([
+  property({ type: Number })
+], OdxSliderComponent.prototype, "minRange", 1);
+__decorateClass([
+  property()
+], OdxSliderComponent.prototype, "labelVisibility", 1);
+__decorateClass([
+  property()
+], OdxSliderComponent.prototype, "unit", 1);
+OdxSliderComponent = __decorateClass([
+  customElement("odx-slider", [styles])
+], OdxSliderComponent);
+
+export { OdxSliderComponent };

package/dist/components/slider/slider.models.d.ts

@@ -0,0 +1,28 @@
+export type SliderLabelVisibility = (typeof SliderLabelVisibility)[keyof typeof SliderLabelVisibility];
+export declare const SliderLabelVisibility: {
+    readonly AUTO: "auto";
+    readonly HIDDEN: "hidden";
+};
+export type SliderTrackVisibility = (typeof SliderTrackVisibility)[keyof typeof SliderTrackVisibility];
+export declare const SliderTrackVisibility: {
+    readonly AUTO: "auto";
+    readonly HIDDEN: "hidden";
+    readonly VISIBLE: "visible";
+};
+export interface SliderContext {
+    step: number;
+    min: number;
+    max: number;
+    minRange: number;
+    range: number;
+    maxRange: number;
+    labelVisibility: SliderLabelVisibility;
+    unit: string;
+}
+export declare const sliderContext: {
+    context: {
+        __context__: SliderContext;
+    };
+    defaultValue: SliderContext;
+};
+//# sourceMappingURL=slider.models.d.ts.map

package/dist/components/slider/slider.models.js

@@ -0,0 +1,17 @@
+import { createContext } from '@lit/context';
+
+const SliderLabelVisibility = {
+  AUTO: "auto",
+  HIDDEN: "hidden"
+};
+const SliderTrackVisibility = {
+  AUTO: "auto",
+  HIDDEN: "hidden",
+  VISIBLE: "visible"
+};
+const sliderContext = {
+  context: createContext("odx-slider::context"),
+  defaultValue: { step: 1, min: 0, max: 100, minRange: 0, maxRange: 0, range: 100, labelVisibility: SliderLabelVisibility.AUTO, unit: "" }
+};
+
+export { SliderLabelVisibility, SliderTrackVisibility, sliderContext };

package/dist/components/spacer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './spacer.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/spacer/spacer.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--gap-offset: 0;--size: 0;display:block;inline-size:100%;block-size:var(--size);margin:calc(-1 * var(--gap-offset)) 0}:host([dynamic]){block-size:100%;flex:1 1 auto;max-block-size:var(--size)}:host([horizontal]){block-size:100%;inline-size:var(--size);margin:0 calc(-1 * var(--gap-offset))}:host([dynamic][horizontal]){inline-size:100%;max-inline-size:var(--size)}:host([fill]){min-block-size:var(--size);flex:1 1 var(--size)}:host([fill][horizontal]){min-inline-size:var(--size);flex:1 1 var(--size)}:host([fill][dynamic]){min-block-size:auto;min-inline-size:auto;max-block-size:100%;flex:1 1 auto}:host-context(odx-rail-navigation){--size: var(--odx-size-300);--gap-offset: var(--odx-size-75)}";
+
+export { styles as default };

package/dist/components/spacer/spacer.component.d.ts

@@ -0,0 +1,13 @@
+import { CustomElement } from '@odx/foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-spacer': OdxSpacerComponent;
+    }
+}
+export declare class OdxSpacerComponent extends CustomElement {
+    horizontal: boolean;
+    dynamic: boolean;
+    fill: boolean;
+    protected render(): string;
+}
+//# sourceMappingURL=spacer.component.d.ts.map

package/dist/components/spacer/spacer.component.js

@@ -0,0 +1,39 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './spacer.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let OdxSpacerComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.horizontal = false;
+    this.dynamic = false;
+    this.fill = false;
+  }
+  render() {
+    return "";
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "horizontal", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "dynamic", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpacerComponent.prototype, "fill", 2);
+OdxSpacerComponent = __decorateClass([
+  customElement("odx-spacer", [styles])
+], OdxSpacerComponent);
+
+export { OdxSpacerComponent };