@odx/foundation 0.1.0-alpha.2 → 0.1.0-alpha.21

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

@@ -0,0 +1,123 @@
+import { CustomElement, SharedResizeObserver, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './circular-progress-bar.element.css.js';
+import { CircularProgressBarSize } from './models/circular-progress-bar-size.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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _value, _OdxCircularProgressBarElement_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
+let OdxCircularProgressBarElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxCircularProgressBarElement_instances);
+    __privateAdd(this, _value, 0);
+    this.viewPortSize = 100;
+    this.stroke = 1;
+    this.indeterminate = false;
+    this.size = CircularProgressBarSize.MEDIUM;
+  }
+  set value(val) {
+    if (val >= -1 && val <= 100) {
+      __privateSet(this, _value, val);
+      this.indeterminate = val === -1;
+      this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : val}`);
+    } else {
+      console.warn(`Invalid value (${val}). Value must be between -1 and 100.`);
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  firstUpdated(changes) {
+    super.firstUpdated?.(changes);
+    SharedResizeObserver.observe(this, () => {
+      this.requestUpdate();
+    });
+    this.setAttributes();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    SharedResizeObserver.unobserve(this);
+  }
+  render() {
+    return html`
+      <svg part="inner" viewBox="0 0 ${this.viewPortSize} ${this.viewPortSize}">
+        <circle
+          part="track"
+          stroke-width="${__privateGet(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet(this, _OdxCircularProgressBarElement_instances, radius_get)}"
+          cx="50%"
+          cy="50%"
+        />
+        <circle
+          part="indicator"
+          stroke-dasharray="${__privateGet(this, _OdxCircularProgressBarElement_instances, circumference_get)}"
+          stroke-dashoffset="${__privateGet(this, _OdxCircularProgressBarElement_instances, progressValue_get)}"
+          stroke-width="${__privateGet(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet(this, _OdxCircularProgressBarElement_instances, radius_get)}"
+          cx="50%"
+          cy="50%"
+        />
+      </svg>
+    `;
+  }
+  setAttributes() {
+    this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : this.value}`);
+    this.setAttribute("aria-valuemax", "100");
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("role", "meter");
+  }
+};
+_value = new WeakMap();
+_OdxCircularProgressBarElement_instances = new WeakSet();
+circumference_get = function() {
+  return Math.floor(2 * __privateGet(this, _OdxCircularProgressBarElement_instances, radius_get) * Math.PI);
+};
+radius_get = function() {
+  return Math.max(0, this.viewPortSize / 2 - __privateGet(this, _OdxCircularProgressBarElement_instances, normalizedStrokeWidth_get) / 2);
+};
+progressValue_get = function() {
+  return this.indeterminate ? __privateGet(this, _OdxCircularProgressBarElement_instances, circumference_get) : Math.floor((1 - __privateGet(this, _value) / 100) * __privateGet(this, _OdxCircularProgressBarElement_instances, circumference_get));
+};
+normalizedStrokeWidth_get = function() {
+  if (this.stroke < 0) return 0;
+  const normalizeFactor = this.viewPortSize / (this.offsetWidth || 1);
+  let stroke = normalizeFactor * this.stroke;
+  if (normalizeFactor >= 3) {
+    stroke = Math.max(0, stroke - normalizeFactor);
+  }
+  return stroke;
+};
+__decorateClass([
+  property({ type: Number })
+], OdxCircularProgressBarElement.prototype, "value", 1);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], OdxCircularProgressBarElement.prototype, "stroke", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxCircularProgressBarElement.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxCircularProgressBarElement.prototype, "size", 2);
+OdxCircularProgressBarElement = __decorateClass([
+  customElement("odx-circular-progress-bar", [styles])
+], OdxCircularProgressBarElement);
+
+export { OdxCircularProgressBarElement };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"circular-progress-bar-size.d.ts","sourceRoot":"","sources":["../../../../src/elements/circular-progress-bar/models/circular-progress-bar-size.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAC;AAE7G,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}
+{"version":3,"file":"circular-progress-bar-size.d.ts","sourceRoot":"","sources":["../../../../elements/circular-progress-bar/models/circular-progress-bar-size.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,OAAO,uBAAuB,CAAC,CAAC;AAE7G,eAAO,MAAM,uBAAuB;;;;CAI1B,CAAC"}

package/dist/elements/circular-progress-bar/models/circular-progress-bar-size.js

@@ -0,0 +1,7 @@
+const CircularProgressBarSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+
+export { CircularProgressBarSize };

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

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

package/dist/elements/form-field/form-field.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:block}";
+
+export { styles as default };

package/dist/elements/form-field/form-field.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.element.d.ts","sourceRoot":"","sources":["../../../src/elements/form-field/form-field.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAID,qBACa,mBAAoB,SAAQ,aAAa;;IAEpD,OAAO,CAAC,QAAQ,CAAiB;IAEjC,IAAI,OAAO,IAAI,gBAAgB,GAAG,SAAS,CAE1C;IAEQ,iBAAiB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAU3C,SAAS,CAAC,kBAAkB,IAAI,cAAc;CAW/C"}
+{"version":3,"file":"form-field.element.d.ts","sourceRoot":"","sources":["../../../elements/form-field/form-field.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAID,qBACa,mBAAoB,SAAQ,aAAa;;IAEpD,OAAO,CAAC,QAAQ,CAAiB;IAEjC,IAAI,OAAO,IAAI,gBAAgB,GAAG,SAAS,CAE1C;IAEQ,iBAAiB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAU3C,SAAS,CAAC,kBAAkB,IAAI,cAAc;CAW/C"}

package/dist/elements/form-field/form-field.element.js

@@ -0,0 +1,62 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './form-field.element.css.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 _handleSlotChange;
+const FORM_FIELD_CONTROL_SELECTOR = "odx-form-field-control";
+let OdxFormFieldElement = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange, () => {
+      this.control?.addEventListener("change", () => this.requestUpdate());
+    });
+  }
+  get control() {
+    return this.elements.find((element) => element.hasAttribute(FORM_FIELD_CONTROL_SELECTOR));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+  }
+  render() {
+    const isValid = this.control?.checkValidity();
+    return html`
+      <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
+      ${when(isValid === false, () => this.renderErrorMessage())} 
+      
+    `;
+  }
+  renderErrorMessage() {
+    return html`
+      <odx-inline-message variant="danger">
+        ${this.control?.validationMessage}
+      </odx-inline-message>
+    `;
+  }
+};
+_handleSlotChange = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], OdxFormFieldElement.prototype, "elements", 2);
+OdxFormFieldElement = __decorateClass([
+  customElement("odx-form-field", [styles])
+], OdxFormFieldElement);
+
+export { OdxFormFieldElement };

package/dist/elements/form-field/index.d.ts.map

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--columns: 1;--column-min-size: 300px;--column-max-size: auto;--_gutter: var(--odx-grid-gutter, var(--odx-size-75))}:host{display:grid;container:odx-grid inline-size;gap:var(--_gutter);grid-template-columns:repeat(auto-fit,minmax(min(var(--column-min-size),100%),1fr))}:host ::slotted(*){max-inline-size:var(--column-max-size);justify-self:center}:host([columns]){--column-min-size: calc(100% / (var(--columns) + 1))}:host([columns=\"2\"]){--columns: 2}:host([columns=\"3\"]){--columns: 3}:host([columns=\"4\"]){--columns: 4}:host([columns=\"6\"]){--columns: 6}:host([gap=\"none\"]){gap:0}:host([gap=\"block\"]){column-gap:0}:host([gap=\"inline\"]){row-gap:0}";
+
+export { styles as default };

package/dist/elements/{content-layout → grid}/grid.element.d.ts

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { GridGap } from './models';
+import { GridGap } from './grid.models';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-grid': OdxGrid;

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.element.d.ts","sourceRoot":"","sources":["../../../elements/grid/grid.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF;AAED,qBACa,OAAQ,SAAQ,aAAa;IAExC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAG5B,GAAG,CAAC,EAAE,OAAO,CAAC;cAEK,MAAM,IAAI,cAAc;CAG5C"}

package/dist/elements/grid/grid.element.js

@@ -0,0 +1,31 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './grid.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 OdxGrid = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], OdxGrid.prototype, "columns", 2);
+__decorateClass([
+  property()
+], OdxGrid.prototype, "gap", 2);
+OdxGrid = __decorateClass([
+  customElement("odx-grid", [styles])
+], OdxGrid);
+
+export { OdxGrid };

package/dist/elements/{content-layout/models/grid-gap.d.ts → grid/grid.models.d.ts}

@@ -5,4 +5,4 @@ export declare const GridGap: {
     readonly LG: "lg";
     readonly XL: "xl";
 };
-//# sourceMappingURL=grid-gap.d.ts.map
+//# sourceMappingURL=grid.models.d.ts.map

package/dist/elements/grid/grid.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.models.d.ts","sourceRoot":"","sources":["../../../elements/grid/grid.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAC7D,eAAO,MAAM,OAAO;;;;;CAKV,CAAC"}

package/dist/elements/grid/grid.models.js

@@ -0,0 +1,8 @@
+const GridGap = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+export { GridGap };

package/dist/elements/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './grid.element';
+export * from './grid.models';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/elements/main.d.ts

@@ -1,30 +1,11 @@
-export * from './accordion';
-export * from './avatar';
-export * from './avatar-group';
-export * from './badge';
-export * from './card';
-export * from './checkbox';
-export * from './checkbox-group';
-export * from './chip';
 export * from './circular-progress-bar';
-export * from './content-layout';
-export * from './dropdown';
 export * from './form-field';
-export * from './inline-message';
-export * from './list';
-export * from './loading-overlay';
-export * from './main-menu';
+export * from './grid';
 export * from './menu';
 export * from './progress-bar';
-export * from './radio-button';
-export * from './radio-group';
-export * from './select';
 export * from './skeleton';
 export * from './slider';
-export * from './spinbox';
-export * from './switch';
 export * from './table';
 export * from './toast';
-export * from './toggle-button';
 export * from './tooltip';
 //# sourceMappingURL=main.d.ts.map

package/dist/elements/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/elements/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../elements/main.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/elements/menu/elements/menu-item/index.d.ts.map

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

package/dist/elements/menu/elements/menu-item/menu-item.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-fill: Var(--odx-color-surface)}.menu-item{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);background-color:var(--_color-fill);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);transition:var(--odx-motion-duration);transition-property:background-color,outline-color;cursor:pointer;border-radius:var(--odx-border-radius-sm)}:host(:hover){--_color-fill: var(--odx-color-surface-hover)}.menu-item:focus-visible{--_color-fill: var(--odx-color-fill-focus);outline-color:var(--odx-color-outline-focus)}::slotted(odx-icon){margin-inline-end:var(--odx-size-37);margin-inline-start:calc(-1 * var(--odx-size-25))}";
+
+export { styles as default };

package/dist/elements/menu/elements/menu-item/menu-item.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.element.d.ts","sourceRoot":"","sources":["../../../../../src/elements/menu/elements/menu-item/menu-item.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF;AAED,qBACa,kBAAmB,SAAQ,aAAa;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEO,iBAAiB,IAAI,IAAI;cAKf,MAAM,IAAI,cAAc;CAO5C"}
+{"version":3,"file":"menu-item.element.d.ts","sourceRoot":"","sources":["../../../../../elements/menu/elements/menu-item/menu-item.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF;AAED,qBACa,kBAAmB,SAAQ,aAAa;IACnD,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEO,iBAAiB,IAAI,IAAI;cAKf,MAAM,IAAI,cAAc;CAO5C"}

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

@@ -0,0 +1,34 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './menu-item.element.css.js';
+
+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 = (decorator(result)) || result;
+  return result;
+};
+let OdxMenuItemElement = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "menuitem";
+  }
+  render() {
+    return html`
+      <odx-text part="base" class="menu-item" tabindex="0">
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+OdxMenuItemElement.shadowRootOptions = {
+  ...CustomElement.shadowRootOptions,
+  delegatesFocus: true
+};
+OdxMenuItemElement = __decorateClass([
+  customElement("odx-menu-item", [styles])
+], OdxMenuItemElement);
+
+export { OdxMenuItemElement };

package/dist/elements/menu/elements/menu-label/index.d.ts.map

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

package/dist/elements/menu/elements/menu-label/menu-label.element.css.js

@@ -0,0 +1,3 @@
+const styles = ".menu-label{display:flex;place-items:center;block-size:var(--odx-size-225);padding-inline:var(--odx-size-100);user-select:none;border-radius:var(--odx-border-radius-sm);padding-block-start:var(--odx-size-50);padding-block-end:var(--odx-size-25)}:host(:first-child) .menu-label{padding-block-start:calc(var(--odx-size-37) - var(--odx-size-25))}";
+
+export { styles as default };

package/dist/elements/menu/elements/menu-label/menu-label.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-label.element.d.ts","sourceRoot":"","sources":["../../../../../src/elements/menu/elements/menu-label/menu-label.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAED,qBACa,mBAAoB,SAAQ,aAAa;cACjC,MAAM,IAAI,cAAc;CAO5C"}
+{"version":3,"file":"menu-label.element.d.ts","sourceRoot":"","sources":["../../../../../elements/menu/elements/menu-label/menu-label.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF;AAED,qBACa,mBAAoB,SAAQ,aAAa;cACjC,MAAM,IAAI,cAAc;CAO5C"}

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

@@ -0,0 +1,26 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './menu-label.element.css.js';
+
+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 = (decorator(result)) || result;
+  return result;
+};
+let OdxMenuLabelElement = class extends CustomElement {
+  render() {
+    return html`
+      <odx-title part="base" class="menu-label" size="xs">
+        <slot></slot>
+      </odx-title>
+    `;
+  }
+};
+OdxMenuLabelElement = __decorateClass([
+  customElement("odx-menu-label", [styles])
+], OdxMenuLabelElement);
+
+export { OdxMenuLabelElement };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = "odx-popover{--color-fill: var(--odx-color-surface)}:host{--min-inline-size: 160px;--max-inline-size: 280px}odx-popover{--_outer-padding: var(--odx-size-37)}::slotted(odx-separator){--block-space: var(--odx-size-50)}::slotted(odx-button){width:100%}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"menu.element.d.ts","sourceRoot":"","sources":["../../../src/elements/menu/menu.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,aAAa,EAAiE,MAAM,iBAAiB,CAAC;AAC9H,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;;AAKD,qBACa,cAAe,SAAQ,mBAA0B;;IAM5D,QAAQ,IAAI,kBAAkB,EAAE;IAIvB,iBAAiB,IAAI,IAAI;IAKzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI;IAMlD,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;IAMnD,mBAAmB,IAAI,IAAI;IAK3B,aAAa,IAAI,IAAI;IAIrB,mBAAmB,IAAI,IAAI;IAIpC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,kBAAkB;cAIlD,MAAM,IAAI,cAAc;CAyC5C"}
+{"version":3,"file":"menu.element.d.ts","sourceRoot":"","sources":["../../../elements/menu/menu.element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,aAAa,EAAiE,MAAM,iBAAiB,CAAC;AAC9H,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF;;AAKD,qBACa,cAAe,SAAQ,mBAA0B;;IAM5D,QAAQ,IAAI,kBAAkB,EAAE;IAIvB,iBAAiB,IAAI,IAAI;IAKzB,YAAY,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI;IAMlD,cAAc,CAAC,gBAAgB,EAAE,WAAW,GAAG,IAAI;IAMnD,mBAAmB,IAAI,IAAI;IAK3B,aAAa,IAAI,IAAI;IAIrB,mBAAmB,IAAI,IAAI;IAIpC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,kBAAkB;cAIlD,MAAM,IAAI,cAAc;CAyC5C"}

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"}