@odx/foundation 0.1.0-alpha.9 → 1.0.0-alpha.2

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

@@ -2,20 +2,19 @@ import { CanBeDisabled, CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-spinbox': OdxSpinboxElement;
+        'odx-spinbox': OdxSpinboxComponent;
     }
 }
-declare const OdxSpinboxElement_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxSpinboxElement extends OdxSpinboxElement_base {
+declare const OdxSpinboxComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxSpinboxComponent extends OdxSpinboxComponent_base {
     #private;
     static shadowRootOptions: ShadowRootInit;
     private inputElements;
     compact: boolean;
     get inputElement(): HTMLInputElement | null;
-    connectedCallback(): void;
     protected render(): TemplateResult;
     stepUp(): void;
     stepDown(): void;
 }
 export {};
-//# sourceMappingURL=spinbox.element.d.ts.map
+//# sourceMappingURL=spinbox.component.d.ts.map

package/dist/components/spinbox/spinbox.component.js

@@ -0,0 +1,94 @@
+import { CanBeDisabled, CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import styles from './spinbox.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, _handleInputFocus;
+let OdxSpinboxComponent = class extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.compact = false;
+    __privateAdd(this, _handleSlotChange, () => {
+      this.inputElement?.removeEventListener("focus", __privateGet(this, _handleInputFocus));
+      if (!this.inputElement) return;
+      this.inputElement.type = "number";
+      this.inputElement.value = this.inputElement.value || this.inputElement.min;
+      this.inputElement.addEventListener("focus", __privateGet(this, _handleInputFocus));
+      this.requestUpdate();
+    });
+    __privateAdd(this, _handleInputFocus, () => {
+      this.inputElement?.select();
+    });
+  }
+  get inputElement() {
+    return this.inputElements[0] ?? null;
+  }
+  render() {
+    const min = this.inputElement?.min ? Number(this.inputElement.min) : null;
+    const max = this.inputElement?.max ? Number(this.inputElement.max) : null;
+    const value = this.inputElement?.value ? Number(this.inputElement.value) : null;
+    const canStepDown = min === null || value === null || value > min;
+    const canStepUp = max === null || value === null || value < max;
+    if (this.inputElement) {
+      this.inputElement.disabled = this.disabled;
+    }
+    const decrementAction = html`
+      <button part="action action-decrement" @click=${this.stepDown} ?disabled=${this.disabled || !canStepDown}>
+        <odx-icon name="minus"></odx-icon>
+      </button>
+    `;
+    const incrementAction = html`
+      <button part="action action-increment" @click=${this.stepUp} ?disabled=${this.disabled || !canStepUp}>
+        <odx-icon name="plus"></odx-icon>
+      </button>
+    `;
+    const slot = html`<slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>`;
+    if (this.compact) {
+      return html`${slot}${incrementAction}${decrementAction}`;
+    }
+    return html`${decrementAction}${slot}${incrementAction}`;
+  }
+  stepUp() {
+    if (!this.inputElement) return;
+    this.inputElement.stepUp();
+    this.requestUpdate();
+  }
+  stepDown() {
+    if (!this.inputElement) return;
+    this.inputElement.stepDown();
+    this.requestUpdate();
+  }
+};
+_handleSlotChange = new WeakMap();
+_handleInputFocus = new WeakMap();
+OdxSpinboxComponent.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  queryAssignedElements({ selector: "input", flatten: true })
+], OdxSpinboxComponent.prototype, "inputElements", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxSpinboxComponent.prototype, "compact", 2);
+OdxSpinboxComponent = __decorateClass([
+  customElement("odx-spinbox", [styles])
+], OdxSpinboxComponent);
+
+export { OdxSpinboxComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--gap: 0;display:flex;flex-direction:row;max-inline-size:100%;inline-size:100%;gap:var(--gap)}:host([vertical]){flex-direction:column}:host([wrap]){flex-wrap:wrap}:host([gap=\"none\"]){--gap: 0}:host([gap=\"xs\"]){--gap: var(--odx-size-25)}:host([gap=\"sm\"]){--gap: var(--odx-size-50)}:host,:host([gap=\"md\"]){--gap: var(--odx-size-75)}:host([gap=\"lg\"]){--gap: var(--odx-size-150)}:host([gap=\"xl\"]){--gap: var(--odx-size-225)}:host,:host([align=\"start\"]){align-items:flex-start}:host([align=\"end\"]){align-items:end}:host([align=\"center\"]){align-items:center}:host([align=\"stretch\"]){align-items:stretch}:host([justify=\"center\"]){justify-content:center}:host,:host([justify=\"start\"]){justify-content:flex-start}:host([justify=\"end\"]){justify-content:flex-end}:host([justify=\"stretch\"]){justify-content:stretch}:host([justify=\"space-between\"]){justify-content:space-between}:host([justify=\"space-around\"]){justify-content:space-around}:host([justify=\"space-evenly\"]){justify-content:space-evenly}";
+
+export { styles as default };

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

@@ -1,16 +1,16 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { StackAlignItems, StackGap, StackJustifyContent } from './stack.models';
+import { StackAlign, StackGap, StackJustify } from './stack.models';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-stack': OdxStackComponent;
     }
 }
 export declare class OdxStackComponent extends CustomElement {
-    alignItems?: StackAlignItems;
-    justifyContent?: StackJustifyContent;
+    align?: StackAlign;
+    justify?: StackJustify;
     gap?: StackGap | null;
-    horizontal: boolean;
+    vertical: boolean;
     wrap: boolean;
     protected render(): TemplateResult;
 }

package/dist/components/stack/stack.component.js

@@ -0,0 +1,45 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './stack.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 OdxStackComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+    this.wrap = false;
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ attribute: "align-items", reflect: true })
+], OdxStackComponent.prototype, "align", 2);
+__decorateClass([
+  property({ attribute: "justify-content", reflect: true })
+], OdxStackComponent.prototype, "justify", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxStackComponent.prototype, "gap", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxStackComponent.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxStackComponent.prototype, "wrap", 2);
+OdxStackComponent = __decorateClass([
+  customElement("odx-stack", [styles])
+], OdxStackComponent);
+
+export { OdxStackComponent };

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

@@ -1,9 +1,8 @@
-export type StackAlignItems = (typeof StackAlignItems)[keyof typeof StackAlignItems];
-export declare const StackAlignItems: {
+export type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
+export declare const StackAlign: {
     readonly START: "start";
     readonly END: "end";
     readonly CENTER: "center";
-    readonly STRETCH: "stretch";
 };
 export type StackGap = (typeof StackGap)[keyof typeof StackGap];
 export declare const StackGap: {
@@ -14,8 +13,8 @@ export declare const StackGap: {
     readonly LG: "lg";
     readonly XL: "xl";
 };
-export type StackJustifyContent = (typeof StackJustifyContent)[keyof typeof StackJustifyContent];
-export declare const StackJustifyContent: {
+export type StackJustify = (typeof StackJustify)[keyof typeof StackJustify];
+export declare const StackJustify: {
     readonly START: "start";
     readonly END: "end";
     readonly CENTER: "center";

package/dist/components/stack/stack.models.js

@@ -0,0 +1,23 @@
+const StackAlign = {
+  START: "start",
+  END: "end",
+  CENTER: "center"
+};
+const StackGap = {
+  NONE: "none",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const StackJustify = {
+  START: "start",
+  END: "end",
+  CENTER: "center",
+  SPACE_BETWEEN: "space-between",
+  SPACE_AROUND: "space-around",
+  SPACE_EVENLY: "space-evenly"
+};
+
+export { StackAlign, StackGap, StackJustify };

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

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

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

@@ -0,0 +1,3 @@
+const styles = "*{box-sizing:border-box}: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-track-color-background: var(--odx-color-selection-control-fill);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);transition-property:background-color border-color outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}.indicator:before,.indicator:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit;border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke)}.indicator:before{background-color:var(--_indicator-track-color-background);block-size:var(--odx-size-37);inline-size:var(--odx-size-225)}.indicator:after{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;background-color:var(--_indicator-color-background);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,transform;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}.label{display:inline-block;cursor:inherit}.content{margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}: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){outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);--_indicator-track-color-background: var(--odx-color-selection-control-fill-selected);.indicator:after{transform:translate(var(--odx-size-225)) translate(-100%)}}:host([aria-checked=\"true\"]:not([aria-disabled]):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-stroke: var(--odx-color-disabled-stroke);--_indicator-track-color-background: var(--odx-color-disabled-fill);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-stroke: var(--_indicator-color-background);--_indicator-track-color-background: var(--odx-color-disabled-fill-selected)}";
+
+export { styles as default };

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

@@ -0,0 +1,12 @@
+import { CheckboxFormControl } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-switch': OdxSwitchComponent;
+    }
+}
+export declare class OdxSwitchComponent extends CheckboxFormControl {
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=switch.component.d.ts.map

package/dist/components/switch/switch.component.js

@@ -0,0 +1,36 @@
+import { CheckboxFormControl, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './switch.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 OdxSwitchComponent = class extends CheckboxFormControl {
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "switch";
+  }
+  render() {
+    return html`
+      <div class="indicator"></div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+OdxSwitchComponent = __decorateClass([
+  customElement("odx-switch", [styles])
+], OdxSwitchComponent);
+
+export { OdxSwitchComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;text-decoration:inherit;color:var(--_color, inherit);font-size:var(--_font-size, inherit);line-height:var(--_line-height, inherit);font-weight:var(--_font-weight, inherit)}:host([inline]){display:inline-block}:host([emphasized]:not([emphasized=\"false\"])){--_font-weight: var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){--_font-size: var(--odx-typography-font-size-1);--_line-height: var(--odx-typography-line-height-1)}:host([size=\"sm\"]){--_font-size: var(--odx-typography-font-size-2);--_line-height: var(--odx-typography-line-height-2)}:host([size=\"md\"]){--_font-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-3)}";
+
+export { styles as default };

package/dist/components/text/text.component.js

@@ -0,0 +1,34 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './text.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 OdxTextComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxTextComponent.prototype, "emphasized", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxTextComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxTextComponent.prototype, "variant", 2);
+OdxTextComponent = __decorateClass([
+  customElement("odx-text", [styles])
+], OdxTextComponent);
+
+export { OdxTextComponent };

package/dist/components/text/text.models.js

@@ -0,0 +1,12 @@
+const TextSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md"
+};
+const TextVariant = {
+  HINT: "hint",
+  ACCENT: "info",
+  DANGER: "danger"
+};
+
+export { TextSize, TextVariant };

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
+
+export { styles as default };

package/dist/components/title/title.component.js

@@ -0,0 +1,31 @@
+import { CustomElement, requestUpdateOnAriaChange, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './title.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 OdxTitleComponent = class extends CustomElement {
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("ariaLevel")) {
+      this.role = this.ariaLevel !== null ? "heading" : null;
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxTitleComponent.prototype, "size", 2);
+OdxTitleComponent = __decorateClass([
+  requestUpdateOnAriaChange(["ariaLevel"]),
+  customElement("odx-title", [styles])
+], OdxTitleComponent);
+
+export { OdxTitleComponent };

package/dist/components/title/title.models.js

@@ -0,0 +1,10 @@
+const TitleSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "xxl"
+};
+
+export { TitleSize };

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
+
+export { styles as default };

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

@@ -0,0 +1,16 @@
+import { CheckboxFormControl } from '@odx/foundation';
+import { PropertyValues, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-toggle-button': OdxToggleButtonComponent;
+    }
+}
+export declare class OdxToggleButtonComponent extends CheckboxFormControl {
+    checked: boolean;
+    pressed: boolean;
+    connectedCallback(): void;
+    updateAriaAttributes(): void;
+    protected willUpdate(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=toggle-button.component.d.ts.map

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

@@ -0,0 +1,52 @@
+import { CheckboxFormControl, toAriaBooleanAttribute, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './toggle-button.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 OdxToggleButtonComponent = class extends CheckboxFormControl {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.pressed = false;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "button";
+  }
+  updateAriaAttributes() {
+    this.ariaPressed = toAriaBooleanAttribute(this.pressed, false);
+  }
+  willUpdate(props) {
+    if (props.has("checked")) {
+      this.pressed = this.checked;
+    }
+    super.willUpdate(props);
+  }
+  render() {
+    return html`
+      <div part="indicator"></div>
+      <div part="label"><slot></slot></div>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], OdxToggleButtonComponent.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean })
+], OdxToggleButtonComponent.prototype, "pressed", 2);
+OdxToggleButtonComponent = __decorateClass([
+  customElement("odx-toggle-button", [styles])
+], OdxToggleButtonComponent);
+
+export { OdxToggleButtonComponent };

package/dist/components/visually-hidden/visually-hidden.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}";
+
+export { styles as default };

package/dist/components/visually-hidden/visually-hidden.component.js

@@ -0,0 +1,22 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './visually-hidden.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 OdxVisuallyHiddenComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+OdxVisuallyHiddenComponent = __decorateClass([
+  customElement("odx-visually-hidden", [styles])
+], OdxVisuallyHiddenComponent);
+
+export { OdxVisuallyHiddenComponent };

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.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/main.d.ts

@@ -1,22 +1,5 @@
-export * from './accordion';
-export * from './card';
-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 './menu';
-export * from './progress-bar';
-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/table/elements/table-body/table-body.element.css.js

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

package/dist/elements/table/elements/table-body/table-body.element.js

@@ -0,0 +1,26 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './table-body.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 OdxTableBodyElement = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "rowgroup";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+OdxTableBodyElement = __decorateClass([
+  customElement("odx-table-body", [styles])
+], OdxTableBodyElement);
+
+export { OdxTableBodyElement };

package/dist/elements/table/elements/table-cell/table-cell.element.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;block-size:auto;flex:1 1 0%;padding-inline:var(--odx-size-75);line-height:var(--odx-size-300)}";
+
+export { styles as default };