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

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

@@ -1,12 +1,11 @@
-import { TemplateResult } from 'lit';
-import { BaseLink } from '../link';
+import { BaseButtonComponent } from './base-button';
 import { ButtonSize, ButtonVariant } from './button.models';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButtonComponent;
     }
 }
-declare const OdxButtonComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof BaseLink;
+declare const OdxButtonComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof BaseButtonComponent;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -22,6 +21,10 @@ declare const OdxButtonComponent_base: import('@odx/foundation').Constructor<imp
 export declare class OdxButtonComponent extends OdxButtonComponent_base {
     #private;
     static readonly formAssociated = true;
+    /**
+     * The type of the button.
+     */
+    type: 'button' | 'submit' | 'reset';
     /**
      * The size of the button.
      */
@@ -30,12 +33,7 @@ export declare class OdxButtonComponent extends OdxButtonComponent_base {
      * The variant of the button.
      */
     variant?: ButtonVariant;
-    /**
-     * The type of the button.
-     */
-    type: 'button' | 'submit' | 'reset';
-    protected render(): TemplateResult;
-    protected renderContent(): TemplateResult;
+    constructor();
 }
 export {};
 //# sourceMappingURL=button.component.d.ts.map

package/dist/components/button/button.component.js

@@ -0,0 +1,62 @@
+import { WithLoadingState, customElement } from '@odx/foundation';
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseButtonComponent } from './base-button.js';
+import styles from './button.component.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"), 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _internals, _OdxButtonComponent_instances, handleClick_fn;
+let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
+  constructor() {
+    super();
+    __privateAdd(this, _OdxButtonComponent_instances);
+    __privateAdd(this, _internals, this.attachInternals());
+    this.type = "button";
+    if (!isServer) {
+      this.addEventListener("click", __privateMethod(this, _OdxButtonComponent_instances, handleClick_fn));
+    }
+  }
+};
+_internals = new WeakMap();
+_OdxButtonComponent_instances = new WeakSet();
+handleClick_fn = function(_event) {
+  if (this.type === "submit") {
+    __privateGet(this, _internals).form?.requestSubmit();
+    return;
+  }
+  if (this.type === "reset") {
+    __privateGet(this, _internals).form?.reset();
+    return;
+  }
+};
+OdxButtonComponent.formAssociated = true;
+__decorateClass([
+  property()
+], OdxButtonComponent.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonComponent.prototype, "variant", 2);
+OdxButtonComponent = __decorateClass([
+  customElement("odx-button", [styles])
+], OdxButtonComponent);
+
+export { OdxButtonComponent };

package/dist/components/button/button.models.js

@@ -0,0 +1,16 @@
+const ButtonSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+const ButtonVariant = {
+  PRIMARY: "primary",
+  HIGHLIGHT: "highlight",
+  SECONDARY: "secondary",
+  GHOST: "ghost",
+  DANGER: "danger",
+  SUCCESS: "success",
+  CONFIRMATION: "confirmation"
+};
+
+export { ButtonSize, ButtonVariant };

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

@@ -1,3 +1,4 @@
+export * from './base-button';
 export * from './button.component';
 export * from './button.models';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button-group/button-group.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
+
+export { styles as default };

package/dist/components/button-group/button-group.component.d.ts

@@ -1,12 +1,18 @@
-import { CustomElement } from '@odx/foundation';
+import { CanBeDisabled, CustomElement } from '@odx/foundation';
+import { ButtonSize, ButtonVariant } from '../button';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroupComponent;
     }
 }
-export declare class OdxButtonGroupComponent extends CustomElement {
+declare const OdxButtonGroupComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxButtonGroupComponent extends OdxButtonGroupComponent_base {
     block: boolean;
     connected: boolean;
     vertical: boolean;
+    size?: ButtonSize | null;
+    variant?: ButtonVariant | null;
+    onDisabledChanged(disabled: boolean): void;
 }
+export {};
 //# sourceMappingURL=button-group.component.d.ts.map

package/dist/components/button-group/button-group.component.js

@@ -0,0 +1,47 @@
+import { CanBeDisabled, CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './button-group.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 OdxButtonGroupComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.block = false;
+    this.connected = false;
+    this.vertical = false;
+  }
+  onDisabledChanged(disabled) {
+    for (const button of Array.from(this.querySelectorAll("odx-button"))) {
+      button._contextDisabled = disabled;
+    }
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "block", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "connected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "vertical", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "variant", 2);
+OdxButtonGroupComponent = __decorateClass([
+  customElement("odx-button-group", [styles])
+], OdxButtonGroupComponent);
+
+export { OdxButtonGroupComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+
+export { styles as default };

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

@@ -0,0 +1,13 @@
+import { CanBeDisabled, CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-card': OdxCardComponent;
+    }
+}
+declare const OdxCardComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxCardComponent extends OdxCardComponent_base {
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=card.component.d.ts.map

package/dist/components/card/card.component.js

@@ -0,0 +1,30 @@
+import { CanBeDisabled, CustomElement, optionalSlot, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './card.component.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 OdxCardComponent = class extends CanBeDisabled(CustomElement) {
+  render() {
+    return html`
+      ${optionalSlot(this, "header")}
+      ${optionalSlot(this, "image")}
+      ${optionalSlot(this, "avatar")}
+      ${optionalSlot(this, "title")}
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+OdxCardComponent = __decorateClass([
+  customElement("odx-card", [styles])
+], OdxCardComponent);
+
+export { OdxCardComponent };

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
+
+export { styles as default };

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

@@ -1,15 +1,14 @@
+import { CheckboxFormControl } from '@odx/foundation';
 import { PropertyValueMap, TemplateResult } from 'lit';
-import { CheckboxControl } from './checkbox-control';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-checkbox': OdxCheckboxElement;
+        'odx-checkbox': OdxCheckboxComponent;
     }
 }
-export declare class OdxCheckboxElement extends CheckboxControl {
-    #private;
+export declare class OdxCheckboxComponent extends CheckboxFormControl {
     indeterminate: boolean;
     protected render(): TemplateResult;
     protected willUpdate(changes: PropertyValueMap<this>): void;
     toggle(state?: boolean, dispatchEvent?: boolean): void;
 }
-//# sourceMappingURL=checkbox.element.d.ts.map
+//# sourceMappingURL=checkbox.component.d.ts.map

package/dist/components/checkbox/checkbox.component.js

@@ -0,0 +1,57 @@
+import { CheckboxFormControl, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './checkbox.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 OdxCheckboxComponent = class extends CheckboxFormControl {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+  }
+  render() {
+    return html`
+      <div class="indicator">
+        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
+      </div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("indeterminate")) {
+      if (this.indeterminate) {
+        this.ariaChecked = "mixed";
+      }
+    }
+  }
+  toggle(state, dispatchEvent = false) {
+    super.toggle(state, dispatchEvent);
+    if (this.disabled || this.readonly) return;
+    this.indeterminate = false;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxCheckboxComponent.prototype, "indeterminate", 2);
+OdxCheckboxComponent = __decorateClass([
+  customElement("odx-checkbox", [styles])
+], OdxCheckboxComponent);
+
+export { OdxCheckboxComponent };

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

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

package/dist/components/checkbox-group/checkbox-group.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);margin:0;width:auto}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
+
+export { styles as default };

package/dist/components/checkbox-group/checkbox-group.component.d.ts

@@ -0,0 +1,14 @@
+import { CheckboxGroupFormControl } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { CheckboxGroupVariant } from './checkbox-group.models';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-checkbox-group': OdxCheckboxGroupComponent;
+    }
+}
+export declare class OdxCheckboxGroupComponent extends CheckboxGroupFormControl {
+    #private;
+    variant?: CheckboxGroupVariant;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=checkbox-group.component.d.ts.map

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -0,0 +1,54 @@
+import { CheckboxGroupFormControl, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './checkbox-group.component.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, _handleGroupControlChange;
+let OdxCheckboxGroupComponent = class extends CheckboxGroupFormControl {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange, () => {
+      for (const control of this.groupControls) {
+        control.addEventListener("change", __privateGet(this, _handleGroupControlChange));
+      }
+    });
+    __privateAdd(this, _handleGroupControlChange, (event) => {
+      const { target } = event;
+      if (!this.isControl(target)) return;
+      event.stopImmediatePropagation();
+      this.updateValue(target.checked ? this.controls.map((control) => control.value) : [], true);
+      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
+        groupControl.checked = target.checked;
+      }
+    });
+  }
+  render() {
+    return html`<slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>`;
+  }
+};
+_handleSlotChange = new WeakMap();
+_handleGroupControlChange = new WeakMap();
+__decorateClass([
+  property({ reflect: true })
+], OdxCheckboxGroupComponent.prototype, "variant", 2);
+OdxCheckboxGroupComponent = __decorateClass([
+  customElement("odx-checkbox-group", [styles])
+], OdxCheckboxGroupComponent);
+
+export { OdxCheckboxGroupComponent };

package/dist/{elements/checkbox-group/models/checkbox-group-variant.d.ts → components/checkbox-group/checkbox-group.models.d.ts}

@@ -2,4 +2,4 @@ export type CheckboxGroupVariant = (typeof CheckboxGroupVariant)[keyof typeof Ch
 export declare const CheckboxGroupVariant: {
     readonly LIST: "list";
 };
-//# sourceMappingURL=checkbox-group-variant.d.ts.map
+//# sourceMappingURL=checkbox-group.models.d.ts.map

package/dist/components/checkbox-group/checkbox-group.models.js

@@ -0,0 +1,5 @@
+const CheckboxGroupVariant = {
+  LIST: "list"
+};
+
+export { CheckboxGroupVariant };

package/dist/components/checkbox-group/index.d.ts

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
+
+export { styles as default };

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

@@ -1,13 +1,13 @@
 import { CanBeDisabled, CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
-import { ChipVariant } from './models';
+import { ChipVariant } from './chip.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-chip': OdxChipElement;
+        'odx-chip': OdxChipComponent;
     }
 }
-declare const OdxChipElement_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxChipElement extends OdxChipElement_base {
+declare const OdxChipComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxChipComponent extends OdxChipComponent_base {
     #private;
     protected actionElement?: HTMLElement;
     removable: boolean;
@@ -19,4 +19,4 @@ export declare class OdxChipElement extends OdxChipElement_base {
     protected updated(changes: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=chip.element.d.ts.map
+//# sourceMappingURL=chip.component.d.ts.map

package/dist/components/chip/chip.component.js

@@ -0,0 +1,94 @@
+import { CanBeDisabled, CustomElement, toggleAttribute, getElementFromEvent, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './chip.component.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 _handleActionClick, _handleClick;
+let OdxChipComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.interactive = false;
+    __privateAdd(this, _handleActionClick, (event) => {
+      const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
+      if (!actionElement) return;
+      event.stopPropagation();
+      this.emit("remove");
+    });
+    __privateAdd(this, _handleClick, (event) => {
+      if (this.removable) {
+        const actionElement = getElementFromEvent(event, (node) => !!this.actionElement && node === this.actionElement);
+        if (actionElement) return;
+      }
+    });
+  }
+  render() {
+    return html`
+      <odx-text class="content" size="sm" highlight odxPreventTextOverflow>
+        <slot></slot>
+      </odx-text>
+      ${when(this.removable, () => this.renderAction())}
+    `;
+  }
+  renderAction() {
+    return html`
+      <button class="action" ?disabled=${this.disabled} @click=${__privateGet(this, _handleActionClick)}>
+        <odx-icon class="action-icon" name="core::close"></odx-icon>
+      </button>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("interactive") || changes.has("disabled")) {
+      if (!this.disabled) {
+        toggleAttribute(this, "tabindex", this.interactive ? 0 : null);
+        toggleAttribute(this.actionElement, "tabindex", this.interactive ? -1 : null);
+      }
+    }
+  }
+  updated(changes) {
+    if (changes.has("removable") || changes.has("interactive") || changes.has("disabled")) {
+      if (this.removable || this.interactive) {
+        this.addEventListener("click", __privateGet(this, _handleClick), { capture: true });
+      } else {
+        this.removeEventListener("click", __privateGet(this, _handleClick));
+      }
+    }
+  }
+};
+_handleActionClick = new WeakMap();
+_handleClick = new WeakMap();
+__decorateClass([
+  query(".action")
+], OdxChipComponent.prototype, "actionElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxChipComponent.prototype, "removable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxChipComponent.prototype, "interactive", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxChipComponent.prototype, "variant", 2);
+OdxChipComponent = __decorateClass([
+  customElement("odx-chip", [styles])
+], OdxChipComponent);
+
+export { OdxChipComponent };

package/dist/{elements/chip/models/chip-variant.d.ts → components/chip/chip.models.d.ts}

@@ -2,9 +2,9 @@ export type ChipVariant = (typeof ChipVariant)[keyof typeof ChipVariant];
 export declare const ChipVariant: {
     NEUTRAL: string;
     PRIMARY: string;
-    ACCENT: string;
+    HIGHLIGHT: string;
     SUCCESS: string;
     WARNING: string;
     DANGER: string;
 };
-//# sourceMappingURL=chip-variant.d.ts.map
+//# sourceMappingURL=chip.models.d.ts.map

package/dist/components/chip/chip.models.js

@@ -0,0 +1,10 @@
+const ChipVariant = {
+  NEUTRAL: "neutral",
+  PRIMARY: "primary",
+  HIGHLIGHT: "highlight",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+
+export { ChipVariant };

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

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

package/dist/components/circular-progress-bar/circular-progress-bar.component.css.js

@@ -0,0 +1,3 @@
+const styles = "@keyframes odx-circular-progress-indicator-animation{0%{stroke-dashoffset:100}25%{stroke-dashoffset:250;transform:rotate(180deg)}to{stroke-dashoffset:100;transform:rotate(270deg)}}@keyframes odx-circular-progress-inner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--_indicator-color: var(--odx-color-primary-rest);--_track-color: var(--odx-palette-coolgray-10);aspect-ratio:1;display:flex;place-content:center;place-items:center;color:currentColor;block-size:100%;inline-size:100%;position:relative}:host([size=\"small\"]){--_size: var(--odx-size-300)}:host([size=\"medium\"]){--_size: var(--odx-size-400)}:host([size=\"large\"]){--_size: var(--odx-size-600)}:host([size]){max-block-size:var(--_size);max-inline-size:var(--_size)}:host::part(track),:host::part(indicator){fill:transparent}:host::part(indicator){stroke:var(--_indicator-color);transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced)}:host::part(track){stroke:var(--_track-color)}:host([indeterminate]:not([indeterminate=\"false\"]))::part(inner){animation:1.75s linear infinite odx-circular-progress-inner-animation}:host([indeterminate]:not([indeterminate=\"false\"]))::part(indicator){animation:1.75s ease infinite odx-circular-progress-indicator-animation both}";
+
+export { styles as default };

package/dist/{elements/circular-progress-bar/circular-progress-bar.element.d.ts → components/circular-progress-bar/circular-progress-bar.component.d.ts}

@@ -1,9 +1,9 @@
 import { CustomElement } from '@odx/foundation';
 import { PropertyValueMap, TemplateResult } from 'lit';
-import { CircularProgressBarSize } from './models';
+import { CircularProgressBarSize } from './circular-progress-bar.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-circular-progress-bar': OdxCircularProgressBarElement;
+        'odx-circular-progress-bar': OdxCircularProgressBarComponent;
     }
 }
 /**
@@ -13,7 +13,7 @@ declare global {
  * @csspart track - The track circle element
  * @csspart indicator - The indicator circle element
  */
-export declare class OdxCircularProgressBarElement extends CustomElement {
+export declare class OdxCircularProgressBarComponent extends CustomElement {
     #private;
     protected readonly viewPortSize = 100;
     /**
@@ -39,4 +39,4 @@ export declare class OdxCircularProgressBarElement extends CustomElement {
     protected render(): TemplateResult;
     private setAttributes;
 }
-//# sourceMappingURL=circular-progress-bar.element.d.ts.map
+//# sourceMappingURL=circular-progress-bar.component.d.ts.map