@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/elements/menu/menu.element.js

@@ -0,0 +1,108 @@
+import { CustomElement, RovingTabindexController, getKeyboardEventInfo, customElement } from '@odx/foundation';
+import { PopoverHost } from '@odx/foundation/cdk';
+import { html } from 'lit';
+import styles from './menu.element.css.js';
+
+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 = (decorator(result)) || 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 _tabindexController, _handleReferenceInteraction, _handleClick, _handleKeyDown, _handleReferenceKeyDown;
+const MENU_ITEM_ROLES = ["menuitem", "menuitemcheckbox", "menuitemradio"];
+const MENU_ITEMS_SELECTOR = MENU_ITEM_ROLES.map((role) => `[role="${role}"]`).join(",");
+let OdxMenuElement = class extends PopoverHost(CustomElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _tabindexController, new RovingTabindexController(this, {
+      elements: () => this.getItems(),
+      direction: "vertical"
+    }));
+    __privateAdd(this, _handleReferenceInteraction, () => {
+      this.togglePopover();
+    });
+    __privateAdd(this, _handleClick, (event) => {
+      const eventPath = event.composedPath();
+      const closestMenu = eventPath.find((element) => element.localName === this.localName);
+      if (this !== closestMenu) return;
+      const item = eventPath.find((element) => this.isMenuItem(element));
+      if (!item) return;
+      this.emit("select", { detail: { item } });
+      this.hidePopover();
+    });
+    __privateAdd(this, _handleKeyDown, (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if ((actions.tab || actions.backTab) && this.isPopoverOpen()) {
+        event?.preventDefault();
+        event.stopPropagation();
+        this.hidePopover();
+        return;
+      }
+      if (!actions.enter && !actions.space) return;
+      const [activeItem] = this.getItems().filter((item) => item.tabIndex === 0);
+      if (!activeItem) return;
+      activeItem.click();
+    });
+    __privateAdd(this, _handleReferenceKeyDown, (event) => {
+      const { direction } = getKeyboardEventInfo(event);
+      if (!direction.down) return;
+      this.showPopover();
+    });
+  }
+  getItems() {
+    return Array.from(this.querySelectorAll(MENU_ITEMS_SELECTOR));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "menu";
+  }
+  mountPopover(referenceElement) {
+    super.mountPopover(referenceElement);
+    referenceElement?.addEventListener("click", __privateGet(this, _handleReferenceInteraction));
+    referenceElement?.addEventListener("keydown", __privateGet(this, _handleReferenceKeyDown));
+  }
+  unmountPopover(referenceElement) {
+    referenceElement.removeEventListener("keydown", __privateGet(this, _handleReferenceKeyDown));
+    referenceElement.removeEventListener("click", __privateGet(this, _handleReferenceInteraction));
+    super.unmountPopover(referenceElement);
+  }
+  onBeforePopoverShow() {
+    __privateGet(this, _tabindexController).currentIndex = 0;
+    __privateGet(this, _tabindexController).focus();
+  }
+  onPopoverShow() {
+    this.addEventListener("keydown", __privateGet(this, _handleKeyDown));
+  }
+  onBeforePopoverHide() {
+    this.removeEventListener("keydown", __privateGet(this, _handleKeyDown));
+  }
+  isMenuItem(element) {
+    return MENU_ITEM_ROLES.includes(element.getAttribute?.("role") ?? "");
+  }
+  render() {
+    return html`
+      <odx-popover>
+        <slot @click=${__privateGet(this, _handleClick)}></slot>
+      </odx-popover>
+    `;
+  }
+};
+_tabindexController = new WeakMap();
+_handleReferenceInteraction = new WeakMap();
+_handleClick = new WeakMap();
+_handleKeyDown = new WeakMap();
+_handleReferenceKeyDown = new WeakMap();
+OdxMenuElement = __decorateClass([
+  customElement("odx-menu", [styles])
+], OdxMenuElement);
+
+export { OdxMenuElement };

package/dist/elements/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/progress-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/progress-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC"}

package/dist/elements/progress-bar/models/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/progress-bar/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../elements/progress-bar/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/elements/progress-bar/models/progress-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-state.d.ts","sourceRoot":"","sources":["../../../../src/elements/progress-bar/models/progress-state.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC/E,eAAO,MAAM,aAAa;;;;CAIhB,CAAC"}
+{"version":3,"file":"progress-state.d.ts","sourceRoot":"","sources":["../../../../elements/progress-bar/models/progress-state.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC/E,eAAO,MAAM,aAAa;;;;CAIhB,CAAC"}

package/dist/elements/progress-bar/models/progress-state.js

@@ -0,0 +1,7 @@
+const ProgressState = {
+  CONFIRM: "confirm",
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+export { ProgressState };

package/dist/elements/progress-bar/progress-bar.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_indicator-color: var(--odx-color-primary);--_track-color: var(--odx-palette-coolgray-10);--_track-size: var(--odx-size-50);--_value-percentage: 0;--_label-width: var(--odx-progress-label-width, 33.3%);--_value-color: var(--odx-color-text-hint);--_value-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_indicator-color);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}:host::part(base),:host::part(indicator){inline-size:100%}:host::part(base){block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);outline:var(--odx-outline-default);outline-offset:var(--odx-outline-offset-default);overflow:hidden;position:relative;inline-size:100%}:host::part(indicator){block-size:100%;background-color:var(--_indicator-color);transform:scaleX(calc(var(--_value-percentage) / 100));transform-origin:0 center;transition:var(--odx-transition-reduced);transition-property:background-color,transform;transform-origin:0% 50%}:host::part(label){text-align:start;overflow-x:clip;text-overflow:ellipsis;white-space:nowrap;max-inline-size:calc(100% - var(--_value-width) - var(--odx-size-75))}:host::part(value){text-align:end;margin-inline-start:auto}:host([condensed]:not([condensed=\"false\"])){padding-block:0;flex-wrap:nowrap}:host([condensed]:not([condensed=\"false\"]))::part(label){inline-size:var(--_label-width)}:host([condensed]:not([condensed=\"false\"]))::part(value){width:var(--_value-width);order:99}:host([state=\"confirm\"]){--_indicator-color: orange;--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: red;--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: green;--_value-color: var(--_indicator-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:indeterminate 1.5s linear infinite}@keyframes indeterminate{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}";
+
+export { styles as default };

package/dist/elements/progress-bar/progress-bar.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.element.d.ts","sourceRoot":"","sources":["../../../src/elements/progress-bar/progress-bar.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAC;IAGjC,aAAa,UAAS;IAGtB,GAAG,SAAK;IAGR,GAAG,SAAO;IAGV,KAAK,SAAK;IAGV,SAAS,UAAS;IAGlB,KAAK,CAAC,EAAE,aAAa,CAAC;IAGtB,SAAS,UAAS;IAGlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;cAEkB,MAAM,IAAI,cAAc;CAmB5C"}
+{"version":3,"file":"progress-bar.element.d.ts","sourceRoot":"","sources":["../../../elements/progress-bar/progress-bar.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA+B,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAC;IAGjC,aAAa,UAAS;IAGtB,GAAG,SAAK;IAGR,GAAG,SAAO;IAGV,KAAK,SAAK;IAGV,SAAS,UAAS;IAGlB,KAAK,CAAC,EAAE,aAAa,CAAC;IAGtB,SAAS,UAAS;IAGlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;cAEkB,MAAM,IAAI,cAAc;CAmB5C"}

package/dist/elements/progress-bar/progress-bar.element.js

@@ -0,0 +1,89 @@
+import { CustomElement, optionalAttr, customElement } from '@odx/foundation';
+import { clamp, round } from 'es-toolkit';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import styles from './progress-bar.element.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 OdxProgressBarElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.condensed = false;
+    this.hideValue = false;
+  }
+  get valuePercentage() {
+    return clamp(round(this.value - this.min / this.max - this.min, 2), this.min, this.max);
+  }
+  get valueHidden() {
+    return this.hideValue || !this.valueText && this.indeterminate;
+  }
+  render() {
+    return html`
+      ${when(this.label, (label) => html`<div part="label" aria-hidden="true">${label}</div>`)}
+      ${when(!this.valueHidden, () => html`<odx-text part="value" aria-hidden="true">${this.valuePercentage}%</odx-text>`)}
+      <div
+        part="base"
+        role="progressbar"
+        title=${optionalAttr(this.title)}
+        aria-label=${optionalAttr(this.label)}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? 0 : this.value}
+        style=${styleMap({ "--_value-percentage": this.valuePercentage })}
+        >
+
+        <div part="indicator"></div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  queryAssignedElements()
+], OdxProgressBarElement.prototype, "content", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarElement.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxProgressBarElement.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxProgressBarElement.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxProgressBarElement.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarElement.prototype, "condensed", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxProgressBarElement.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxProgressBarElement.prototype, "hideValue", 2);
+__decorateClass([
+  property()
+], OdxProgressBarElement.prototype, "label", 2);
+__decorateClass([
+  property()
+], OdxProgressBarElement.prototype, "valueText", 2);
+OdxProgressBarElement = __decorateClass([
+  customElement("odx-progress-bar", [styles])
+], OdxProgressBarElement);
+
+export { OdxProgressBarElement };

package/dist/elements/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/elements/select/select.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:block}[part=trigger]{display:flex;cursor:pointer;text-align:left;padding:var(--odx-size-37) var(--odx-size-75);min-width:200px;outline:var(--odx-outline-input);outline-offset:var(--odx-outline-offset-input);outline-color:var(--odx-color-outline-control);border-radius:var(--odx-border-radius-sm);min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,outline-color;gap:var(--odx-size-37)}[part=trigger]:focus-visible{background-color:var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}[part=indicator]{font-size:var(--odx-size-150);margin-left:auto}[part=trigger] odx-chip{--_border-radius: var(--odx-border-radius-sm)}";
+
+export { styles as default };

package/dist/elements/select/select.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.element.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAsC,MAAM,iBAAiB,CAAC;AAC5G,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF;AAED,qBACa,gBAAiB,SAAQ,iBAAiB;;IACrD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,kBAAkB,CAAC;cAE5B,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;CAyBlD"}
+{"version":3,"file":"select.element.d.ts","sourceRoot":"","sources":["../../../elements/select/select.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,iBAAiB,EAAsC,MAAM,iBAAiB,CAAC;AAC5G,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF;AAED,qBACa,gBAAiB,SAAQ,iBAAiB;;IACrD,UACmB,OAAO,EAAG,kBAAkB,EAAE,CAAC;IAGlD,SAAS,CAAC,eAAe,EAAG,kBAAkB,CAAC;cAE5B,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,qBAAqB,IAAI,cAAc;CAyBlD"}

package/dist/elements/select/select.element.js

@@ -0,0 +1,82 @@
+import { SelectFormControl, getElementFromEvent, customElement } from '@odx/foundation';
+import { OdxOptionComponent } from '@odx/foundation/components';
+import { html } from 'lit';
+import { queryAssignedElements, query } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { when } from 'lit/directives/when.js';
+import styles from './select.element.css.js';
+import { OdxDropdownElement } from '../dropdown/dropdown.element.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 _removeChip, _handleOptionChange;
+let OdxSelectElement = class extends SelectFormControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _removeChip, async (option) => {
+      option.selected = false;
+      this.toggle(option);
+    });
+    __privateAdd(this, _handleOptionChange, (event) => {
+      const option = getElementFromEvent(event, (node) => !!this.options?.some((option2) => option2 === node));
+      if (!option) return;
+      event.stopPropagation();
+      if (option.disabled) return;
+      this.toggle(option);
+      if (this.multiple) return;
+      this.dropdownElement.hidePopover();
+    });
+  }
+  render() {
+    return html`
+        <div part="trigger" id="select-trigger" tabindex="0">
+            ${when(
+      Array.from(this.selectedOptions).length,
+      () => this.renderSelectedOptions(),
+      () => html`<slot name="placeholder">Select options</slot>`
+    )}
+          <odx-icon part="indicator" name="chevron-down" set="core"></odx-icon>
+        </div>
+        <odx-dropdown part="dropdown" anchor="select-trigger" ?disabled=${this.disabled} matchReferenceWidth @change=${__privateGet(this, _handleOptionChange)}>
+          <slot></slot>
+        </odx-dropdown>
+    `;
+  }
+  renderSelectedOptions() {
+    const selectedOptions = Array.from(this.selectedOptions);
+    if (this.multiple) {
+      return html`${repeat(
+        selectedOptions,
+        (option) => html`<odx-chip @remove=${() => __privateGet(this, _removeChip).call(this, option)} removable tabindex="-1">${option.getTextLabel()}</odx-chip>`
+      )}`;
+    }
+    return html`${selectedOptions[0]?.getTextLabel()}`;
+  }
+};
+_removeChip = new WeakMap();
+_handleOptionChange = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ selector: OdxOptionComponent.selector, flatten: true })
+], OdxSelectElement.prototype, "options", 2);
+__decorateClass([
+  query(OdxDropdownElement.selector, true)
+], OdxSelectElement.prototype, "dropdownElement", 2);
+OdxSelectElement = __decorateClass([
+  customElement("odx-select", [styles])
+], OdxSelectElement);
+
+export { OdxSelectElement };

package/dist/elements/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/elements/skeleton/skeleton.element.css.js

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

package/dist/elements/skeleton/skeleton.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.element.d.ts","sourceRoot":"","sources":["../../../src/elements/skeleton/skeleton.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF;AAED,qBACa,kBAAmB,SAAQ,aAAa;IAEnD,OAAO,UAAS;cAEG,MAAM,IAAI,cAAc;CAG5C"}
+{"version":3,"file":"skeleton.element.d.ts","sourceRoot":"","sources":["../../../elements/skeleton/skeleton.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF;AAED,qBACa,kBAAmB,SAAQ,aAAa;IAEnD,OAAO,UAAS;cAEG,MAAM,IAAI,cAAc;CAG5C"}

package/dist/elements/skeleton/skeleton.element.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.element.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 OdxSkeletonElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.rounded = false;
+  }
+  render() {
+    return html``;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSkeletonElement.prototype, "rounded", 2);
+OdxSkeletonElement = __decorateClass([
+  customElement("odx-skeleton", [styles])
+], OdxSkeletonElement);
+
+export { OdxSkeletonElement };

package/dist/elements/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC"}

package/dist/elements/slider/models/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/slider/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../elements/slider/models/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/dist/elements/slider/models/slider-label-visibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-label-visibility.d.ts","sourceRoot":"","sources":["../../../../src/elements/slider/models/slider-label-visibility.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AACvG,eAAO,MAAM,qBAAqB;;;CAGxB,CAAC"}
+{"version":3,"file":"slider-label-visibility.d.ts","sourceRoot":"","sources":["../../../../elements/slider/models/slider-label-visibility.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AACvG,eAAO,MAAM,qBAAqB;;;CAGxB,CAAC"}

package/dist/elements/slider/models/slider-label-visibility.js

@@ -0,0 +1,6 @@
+const SliderLabelVisibility = {
+  AUTO: "auto",
+  HIDDEN: "hidden"
+};
+
+export { SliderLabelVisibility };

package/dist/elements/slider/models/slider-track-visibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-track-visibility.d.ts","sourceRoot":"","sources":["../../../../src/elements/slider/models/slider-track-visibility.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AACvG,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAC"}
+{"version":3,"file":"slider-track-visibility.d.ts","sourceRoot":"","sources":["../../../../elements/slider/models/slider-track-visibility.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AACvG,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAC"}

package/dist/elements/slider/models/slider-track-visibility.js

@@ -0,0 +1,7 @@
+const SliderTrackVisibility = {
+  AUTO: "auto",
+  HIDDEN: "hidden",
+  VISIBLE: "visible"
+};
+
+export { SliderTrackVisibility };

package/dist/elements/slider/slider-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-context.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider-context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,qBAAqB,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa;;;;kBAEoH,aAAa;CAC1J,CAAC"}
+{"version":3,"file":"slider-context.d.ts","sourceRoot":"","sources":["../../../elements/slider/slider-context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,qBAAqB,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa;;;;kBAEoH,aAAa;CAC1J,CAAC"}

package/dist/elements/slider/slider-context.js

@@ -0,0 +1,9 @@
+import { createContext } from '@lit/context';
+import { SliderLabelVisibility } from './models/slider-label-visibility.js';
+
+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 { sliderContext };

package/dist/elements/slider/slider-handle.element.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-primary-text);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-palette-cyan-50)}: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-primary-disabled);z-index:var(--_layer-interactive-disabled)}";
+
+export { styles as default };

package/dist/elements/slider/slider-handle.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-handle.element.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider-handle.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAgC,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,KAAK,SAAS,EAAwD,MAAM,qBAAqB,CAAC;AAE3G,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvE,OAAO,EAAyB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAIxE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF;;AAED,qBACa,sBAAuB,SAAQ,2BAAyC;;IAEnF,OAAO,CAAC,OAAO,CAA8B;IAKpC,IAAI,EAAG,KAAK,CAAC;IAGtB,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAOvC,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAKjC,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAUhC,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAMpC,WAAW,CAAC,gBAAgB,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,GAAG,MAAM;IAOvE,YAAY,IAAI,MAAM;cAIZ,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAW/C,OAAO,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ5C,MAAM,IAAI,cAAc;CAsE5C"}
+{"version":3,"file":"slider-handle.element.d.ts","sourceRoot":"","sources":["../../../elements/slider/slider-handle.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAgC,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,KAAK,SAAS,EAAwD,MAAM,qBAAqB,CAAC;AAE3G,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvE,OAAO,EAAyB,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAIxE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF;;AAED,qBACa,sBAAuB,SAAQ,2BAAyC;;IAEnF,OAAO,CAAC,OAAO,CAA8B;IAKpC,IAAI,EAAG,KAAK,CAAC;IAGtB,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAOvC,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAKjC,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAUhC,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAMpC,WAAW,CAAC,gBAAgB,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,GAAG,MAAM;IAOvE,YAAY,IAAI,MAAM;cAIZ,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAW/C,OAAO,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAQ5C,MAAM,IAAI,cAAc;CAsE5C"}

package/dist/elements/slider/slider-handle.element.js

@@ -0,0 +1,170 @@
+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 { sliderContext } from './slider-context.js';
+import styles from './slider-handle.element.css.js';
+import { SliderTrackVisibility } from './models/slider-track-visibility.js';
+import { SliderLabelVisibility } from './models/slider-label-visibility.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, _OdxSliderHandleElement_instances, isLabelVisible_fn, isTrackVisible_fn, findClosestValue_fn, updatePosition_fn, getValueFromPosition_fn, calculateValue_fn, limitValue_fn, findPreviousHandle_fn, findNextHandle_fn;
+let OdxSliderHandleElement = class extends IsDraggable(NumberControl(CustomElement)) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxSliderHandleElement_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, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, __privateMethod(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position));
+    this.focus();
+  }
+  dragStart(event) {
+    super.dragStart?.(event);
+    __privateMethod(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position));
+  }
+  dragMove(event) {
+    super.dragMove?.(event);
+    const value = __privateMethod(this, _OdxSliderHandleElement_instances, getValueFromPosition_fn).call(this, event.position);
+    const closestValue = __privateMethod(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, value);
+    if (this.value !== closestValue) {
+      this.value = closestValue;
+    }
+    __privateMethod(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, value);
+  }
+  afterDragEnd(event) {
+    super.afterDragEnd?.(event);
+    __privateGet(this, _nextHandle)?.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
+    __privateMethod(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleElement_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, _OdxSliderHandleElement_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, _OdxSliderHandleElement_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, _OdxSliderHandleElement_instances, findPreviousHandle_fn).call(this));
+    __privateSet(this, _nextHandle, __privateMethod(this, _OdxSliderHandleElement_instances, findNextHandle_fn).call(this));
+    __privateMethod(this, _OdxSliderHandleElement_instances, updatePosition_fn).call(this, __privateMethod(this, _OdxSliderHandleElement_instances, findClosestValue_fn).call(this, this.value));
+  }
+  render() {
+    const label = this.getValueText() || this.value;
+    return html`
+      ${when(__privateMethod(this, _OdxSliderHandleElement_instances, isTrackVisible_fn).call(this), () => html`<div part="track with-motion"></div>`)}
+      <div part="thumb with-motion" tabindex="0"></div>
+      ${when(__privateMethod(this, _OdxSliderHandleElement_instances, isLabelVisible_fn).call(this), () => html`<odx-text part="label with-motion" size="sm">${label}</odx-text>`)}
+    `;
+  }
+};
+_previousHandle = new WeakMap();
+_nextHandle = new WeakMap();
+_OdxSliderHandleElement_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, _OdxSliderHandleElement_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, _OdxSliderHandleElement_instances, limitValue_fn).call(this, __privateMethod(this, _OdxSliderHandleElement_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 OdxSliderHandleElement) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+  return null;
+};
+findNextHandle_fn = function() {
+  let sibling = this.nextElementSibling;
+  while (sibling) {
+    if (sibling instanceof OdxSliderHandleElement) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+  return null;
+};
+__decorateClass([
+  consume({ context: sliderContext.context, subscribe: true })
+], OdxSliderHandleElement.prototype, "context", 2);
+__decorateClass([
+  property()
+], OdxSliderHandleElement.prototype, "trackVisibility", 2);
+OdxSliderHandleElement = __decorateClass([
+  customElement("odx-slider-handle", [styles])
+], OdxSliderHandleElement);
+
+export { OdxSliderHandleElement };

package/dist/elements/slider/slider-marks.element.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]:hover{color:var(--odx-color-text-hint)}[part~=mark][active]:not([active=false]){border-inline-end-color:red}";
+
+export { styles as default };

package/dist/elements/slider/slider-marks.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-marks.element.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider-marks.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,SAAS,CAAC,OAAO,2CAA8B;IAG/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,UAAU,UAAS;IAEJ,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;cAK9B,MAAM,IAAI,cAAc;IAW3C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,UAAQ,GAAG,cAAc;CASlE"}
+{"version":3,"file":"slider-marks.element.d.ts","sourceRoot":"","sources":["../../../elements/slider/slider-marks.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;IAEtD,SAAS,CAAC,OAAO,2CAA8B;IAG/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,UAAU,UAAS;IAEJ,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;cAK9B,MAAM,IAAI,cAAc;IAW3C,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,UAAQ,GAAG,cAAc;CASlE"}