@odx/foundation 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist/components/menu/menu.component.js

@@ -1,110 +0,0 @@
-import { CustomElement, RovingTabindexController, getKeyboardEventInfo, customElement } from '@odx/foundation';
-import { PopoverHost } from '@odx/foundation/cdk';
-import { html } from 'lit';
-import styles from './menu.component.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 OdxMenuComponent = 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>
-        <div class="base">
-          <slot @click=${__privateGet(this, _handleClick)}></slot>
-        </div>
-      </odx-popover>
-    `;
-  }
-};
-_tabindexController = new WeakMap();
-_handleReferenceInteraction = new WeakMap();
-_handleClick = new WeakMap();
-_handleKeyDown = new WeakMap();
-_handleReferenceKeyDown = new WeakMap();
-OdxMenuComponent = __decorateClass([
-  customElement("odx-menu", [styles])
-], OdxMenuComponent);
-
-export { OdxMenuComponent };

package/dist/components/navigation-item/navigation-item.component.css.js

@@ -1,3 +0,0 @@
-const styles = "@layer base{:host{--_margin-block: 0}.base{place-content:flex-start}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}::slotted(*){flex:0 0 auto}::slotted([slot=\"suffix\"]){margin-inline-start:auto}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0}}";
-
-export { styles as default };

package/dist/components/navigation-item/navigation-item.component.d.ts

@@ -1,16 +0,0 @@
-import { ARIAMixinStrict } from '@odx/foundation';
-import { PropertyValues } from 'lit';
-import { BaseButtonComponent } from '../button';
-import { NavigationItemSize } from './navigation-item.models';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-navigation-item': OdxNavigationItemComponent;
-    }
-}
-export declare class OdxNavigationItemComponent extends BaseButtonComponent {
-    size?: NavigationItemSize | null;
-    selected: boolean;
-    ariaSelectedValue: ARIAMixinStrict['ariaCurrent'];
-    protected willUpdate(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=navigation-item.component.d.ts.map

package/dist/components/navigation-item/navigation-item.component.js

@@ -1,42 +0,0 @@
-import { customElement } from '@odx/foundation';
-import { property } from 'lit/decorators.js';
-import styles from './navigation-item.component.css.js';
-import { BaseButtonComponent } from '../button/base-button.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 OdxNavigationItemComponent = class extends BaseButtonComponent {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-    this.ariaSelectedValue = "page";
-  }
-  willUpdate(props) {
-    super.willUpdate(props);
-    if (props.has("selected") || props.has("ariaSelectedValue")) {
-      this.ariaCurrent = this.selected ? this.ariaSelectedValue : null;
-    }
-  }
-};
-__decorateClass([
-  property({ reflect: true })
-], OdxNavigationItemComponent.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean })
-], OdxNavigationItemComponent.prototype, "selected", 2);
-__decorateClass([
-  property()
-], OdxNavigationItemComponent.prototype, "ariaSelectedValue", 2);
-OdxNavigationItemComponent = __decorateClass([
-  customElement("odx-navigation-item", [styles])
-], OdxNavigationItemComponent);
-
-export { OdxNavigationItemComponent };

package/dist/components/navigation-item/navigation-item.models.js

@@ -1,6 +0,0 @@
-const NavigationItemSize = {
-  MD: "md",
-  LG: "lg"
-};
-
-export { NavigationItemSize };

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

@@ -1,3 +0,0 @@
-const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;display:inline-flex;place-items:center;padding:var(--odx-size-37) var(--odx-size-75);cursor:pointer;gap:var(--odx-size-75);border-radius:var(--odx-border-radius-controls);transition:var(--odx-transition-reduced);outline:var(--odx-outline-focus);outline-offset:var(--odx-outline-offset-focus);background-color:var(--_color-background);transition-property:background-color,color,outline-color;user-select:none;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);color:var(--_color-foreground)}odx-checkbox{margin:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-selected=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-selected=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed;pointer-events:none}:host([aria-selected=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
-
-export { styles as default };

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

@@ -1,12 +0,0 @@
-import { OptionControl } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-option': OdxOptionComponent;
-    }
-}
-export declare class OdxOptionComponent extends OptionControl {
-    type?: 'checkbox' | null;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=option.component.d.ts.map

package/dist/components/option/option.component.js

@@ -1,37 +0,0 @@
-import { OptionControl, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import styles from './option.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 OdxOptionComponent = class extends OptionControl {
-  render() {
-    return html`
-      ${when(
-      this.type === "checkbox",
-      () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
-      () => html`<slot name="prefix"></slot>`
-    )}
-      <slot></slot>
-      <slot name="suffix"></slot>
-    `;
-  }
-};
-__decorateClass([
-  property({ reflect: true })
-], OdxOptionComponent.prototype, "type", 2);
-OdxOptionComponent = __decorateClass([
-  customElement("odx-option", [styles])
-], OdxOptionComponent);
-
-export { OdxOptionComponent };

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

@@ -1,3 +0,0 @@
-const styles = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;min-block-size:100%;grid-template-columns:100%;grid-template-rows:repeat(minmax(0,auto),2) minmax(0px,1fr);grid-template-areas:\"header\" \"subheader\" \"content\"}.header,.subheader{position:sticky;z-index:99}.subheader,.content{inline-size:100%;background-color:var(--odx-color-background-cool);padding-inline:var(--odx-size-75);max-inline-size:var(--max-inline-size)}.header{grid-area:header;inset-block-start:0}.subheader{grid-area:subheader;inset-block-start:var(--header-size, 0px)}.content{block-size:100%;grid-area:content}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
-
-export { styles as default };

package/dist/components/page/page.component.js

@@ -1,53 +0,0 @@
-import { CustomElement, SharedResizeObserver, toPx, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import styles from './page.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 OdxPageComponent = class extends CustomElement {
-  firstUpdated() {
-    SharedResizeObserver.observe(this, () => {
-      this.style.setProperty("--header-size", toPx(this.headerElement.offsetHeight));
-      this.style.setProperty("--subheader-size", toPx(this.subheaderElement.offsetHeight));
-    });
-  }
-  render() {
-    return html`
-      <div class="header" part="header">
-        <slot name="header"></slot>
-      </div>
-      <div class="subheader" part="subheader">
-        <slot name="subheader"></slot>
-      </div>
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-__decorateClass([
-  query(".header", true)
-], OdxPageComponent.prototype, "headerElement", 2);
-__decorateClass([
-  query(".subheader", true)
-], OdxPageComponent.prototype, "subheaderElement", 2);
-__decorateClass([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "alignment", 2);
-__decorateClass([
-  property({ reflect: true })
-], OdxPageComponent.prototype, "layout", 2);
-OdxPageComponent = __decorateClass([
-  customElement("odx-page", [styles])
-], OdxPageComponent);
-
-export { OdxPageComponent };

package/dist/components/page/page.models.js

@@ -1,9 +0,0 @@
-const PageAlignment = {
-  CENTER: "center"
-};
-const PageLayout = {
-  NARROW: "narrow",
-  WIDE: "wide"
-};
-
-export { PageAlignment, PageLayout };

package/dist/components/page-layout/page-layout.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{display:grid;inline-size:100%;grid-template-columns:minmax(0,auto) minmax(0px,100%);grid-template-rows:minmax(0px,auto) minmax(0px,1fr);grid-template-areas:\"navigation header\" \"navigation content\";justify-content:start;max-inline-size:var(--max-inline-size)}.header,.navigation{background-color:var(--odx-color-background-cool);position:sticky;inset-block-start:var(--scroll-margin-block-start);z-index:98}.content{grid-area:content;margin-block-end:var(--odx-size-150)}.header{grid-area:header}.navigation{--_size: calc(100dvh - var(--scroll-margin-block-start));grid-area:navigation;inset-block-start:var(--scroll-margin-block-start);inset-block-end:0;max-block-size:var(--_size);max-inline-size:10rem;overflow:auto;padding-inline-end:var(--odx-size-75)}";
-
-export { styles as default };

package/dist/components/page-layout/page-layout.component.d.ts

@@ -1,11 +0,0 @@
-import { CustomElement } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-page-layout': OdxPageLayoutComponent;
-    }
-}
-export declare class OdxPageLayoutComponent extends CustomElement {
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=page-layout.component.d.ts.map

package/dist/components/page-layout/page-layout.component.js

@@ -1,28 +0,0 @@
-import { CustomElement, optionalSlot, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import styles from './page-layout.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 OdxPageLayoutComponent = class extends CustomElement {
-  render() {
-    return html`
-      ${optionalSlot(this, "navigation")}
-      ${optionalSlot(this, "header")}
-      <div class="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-OdxPageLayoutComponent = __decorateClass([
-  customElement("odx-page-layout", [styles])
-], OdxPageLayoutComponent);
-
-export { OdxPageLayoutComponent };

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

@@ -1,3 +0,0 @@
-const styles = ":host{--_color-foreground: inherit;--_indicator-color: var(--odx-color-primary-rest);--_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-width: 1.5rem}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--odx-size-50);color:var(--_color-foreground);line-height:1rem;padding-inline:var(--odx-size-75);padding-block:var(--odx-size-25)}.base,.indicator{inline-size:100%}.base{block-size:var(--_track-size);background:var(--_track-color);border-radius:var(--odx-border-radius-md);overflow:hidden;position:relative;inline-size:100%}.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%}.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))}.value{text-align:end;margin-inline-start:auto}:host([condensed]){padding-block:0;flex-wrap:nowrap;.label{inline-size:var(--_label-width)}.value{width:var(--_value-width);order:99}}:host([state=\"confirm\"]){--_indicator-color: var(--odx-color-confirmation-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color)}:host([state=\"error\"]){--_indicator-color: var(--odx-color-danger-rest);--_color-foreground: var(--_indicator-color);--_value-color: var(--_indicator-color);font-weight:var(--odx-font-weight-medium)}:host([state=\"success\"]){--_indicator-color: var(--odx-color-success-rest)}:host([indeterminate]) .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/components/progress-bar/progress-bar.component.js

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

package/dist/components/progress-bar/progress-bar.models.js

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

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

@@ -1,3 +0,0 @@
-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-stroke-width: var(--odx-border-width-thin);--_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);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-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);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(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-background-main);--_indicator-stroke-width: var(--odx-size-50);.indicator{outline-color:var(--odx-color-selection-control-fill-selected)}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected)}";
-
-export { styles as default };

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

@@ -1,13 +0,0 @@
-import { CheckboxFormControl } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-radio-button': OdxRadioButtonComponent;
-    }
-}
-export declare class OdxRadioButtonComponent extends CheckboxFormControl {
-    connectedCallback(): void;
-    protected render(): TemplateResult;
-    toggle(state?: boolean, emitEvent?: boolean): void;
-}
-//# sourceMappingURL=radio-button.component.d.ts.map

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

@@ -1,39 +0,0 @@
-import { CheckboxFormControl, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import styles from './radio-button.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 OdxRadioButtonComponent = class extends CheckboxFormControl {
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.role = "radio";
-  }
-  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>
-    `;
-  }
-  toggle(state, emitEvent = false) {
-    super.toggle(state ?? true, emitEvent);
-  }
-};
-OdxRadioButtonComponent = __decorateClass([
-  customElement("odx-radio-button", [styles])
-], OdxRadioButtonComponent);
-
-export { OdxRadioButtonComponent };

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

@@ -1,3 +0,0 @@
-const styles = ":host{display:flex;flex-direction:column}::slotted(:is(odx-radio-button,odx-switch)){border-block-end:0;border-color:transparent;width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-radio-button,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-radio-button,odx-switch):last-of-type){border-block-end:none}";
-
-export { styles as default };

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

@@ -1,11 +0,0 @@
-import { RadioGroupFormControl } from '@odx/foundation';
-import { RadioGroupVariant } from './radio-group.models';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-radio-group': OdxRadioGroupComponent;
-    }
-}
-export declare class OdxRadioGroupComponent extends RadioGroupFormControl {
-    variant?: RadioGroupVariant;
-}
-//# sourceMappingURL=radio-group.component.d.ts.map

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

@@ -1,24 +0,0 @@
-import { RadioGroupFormControl, customElement } from '@odx/foundation';
-import { property } from 'lit/decorators.js';
-import styles from './radio-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 OdxRadioGroupComponent = class extends RadioGroupFormControl {
-};
-__decorateClass([
-  property({ reflect: true })
-], OdxRadioGroupComponent.prototype, "variant", 2);
-OdxRadioGroupComponent = __decorateClass([
-  customElement("odx-radio-group", [styles])
-], OdxRadioGroupComponent);
-
-export { OdxRadioGroupComponent };

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

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

package/dist/components/rail-navigation/rail-navigation.component.css.js

@@ -1,3 +0,0 @@
-const styles = ":host{--min-inline-size: 180px;--max-inline-size: 240px;display:flex;flex-direction:column;block-size:100%;padding-inline:var(--odx-size-50);padding-block:var(--odx-size-150);gap:var(--odx-size-75);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size);transition:var(--odx-transition-default);transition-property:min-inline-size,max-inline-size}.toggle-control{margin-block-start:auto}.toggle-icon{transition:var(--odx-transition-default)}:host([collapsed]:not([collapsed=\"false\"])){--min-inline-size: var(--odx-size-400);--max-inline-size: var(--odx-size-400);.toggle-icon{transform:rotateY(-180deg)}}";
-
-export { styles as default };

package/dist/components/rail-navigation/rail-navigation.component.d.ts

@@ -1,24 +0,0 @@
-import { CustomElement, IsTranslatable } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-import { OdxNavigationItemComponent } from '../navigation-item';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-rail-navigation': OdxRailNavigationComponent;
-    }
-}
-declare const OdxRailNavigationComponent_base: import('@odx/foundation').Constructor<IsTranslatable> & typeof CustomElement;
-export declare class OdxRailNavigationComponent extends OdxRailNavigationComponent_base {
-    #private;
-    protected navigationItems: OdxNavigationItemComponent[];
-    collapsed: boolean;
-    protected render(): TemplateResult;
-    getItems(): OdxNavigationItemComponent[];
-    _getTranslations(): {
-        en: {
-            controlLabelExpanded: string;
-            controlLabelCollapsed: string;
-        };
-    };
-}
-export {};
-//# sourceMappingURL=rail-navigation.component.d.ts.map