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

package/dist/components/main.js

@@ -0,0 +1,102 @@
+export { OdxAccordionHeaderComponent } from './accordion/accordion-header.component.js';
+export { OdxAccordionPanelComponent } from './accordion/accordion-panel.component.js';
+export { OdxAccordionComponent } from './accordion/accordion.component.js';
+export { OdxAreaHeaderComponent } from './area-header/area-header.component.js';
+export { AreaHeaderSize, AreaHeaderVariant } from './area-header/area-header.models.js';
+export { OdxAvatarComponent } from './avatar/avatar.component.js';
+export { AvatarSize, AvatarVariant } from './avatar/avatar.models.js';
+export { OdxAvatarGroupComponent } from './avatar-group/avatar-group.component.js';
+export { OdxBadgeComponent } from './badge/badge.component.js';
+export { BadgeVariant } from './badge/badge.models.js';
+export { OdxBreadcrumbItemComponent } from './breadcrumb/breadcrumb-item.component.js';
+export { OdxBreadcrumbComponent } from './breadcrumb/breadcrumb.component.js';
+export { BaseButtonComponent } from './button/base-button.js';
+export { OdxButtonComponent } from './button/button.component.js';
+export { ButtonSize, ButtonVariant } from './button/button.models.js';
+export { OdxButtonGroupComponent } from './button-group/button-group.component.js';
+export { OdxCardComponent } from './card/card.component.js';
+export { OdxCheckboxComponent } from './checkbox/checkbox.component.js';
+export { OdxCheckboxGroupComponent } from './checkbox-group/checkbox-group.component.js';
+export { CheckboxGroupVariant } from './checkbox-group/checkbox-group.models.js';
+export { OdxChipComponent } from './chip/chip.component.js';
+export { ChipVariant } from './chip/chip.models.js';
+export { OdxCircularProgressBarComponent } from './circular-progress-bar/circular-progress-bar.component.js';
+export { CircularProgressBarSize } from './circular-progress-bar/circular-progress-bar.models.js';
+export { OdxContentBoxComponent } from './content-box/content-box.component.js';
+export { OdxDropdownComponent } from './dropdown/dropdown.component.js';
+export { DropdownPlacement } from './dropdown/dropdown.models.js';
+export { OdxFormatBytesComponent } from './format/format-bytes.component.js';
+export { OdxFormatDateComponent } from './format/format-date.component.js';
+export { OdxFormatNumberComponent } from './format/format-number.component.js';
+export { OdxRelativeTimeComponent } from './format/relative-time.component.js';
+export { OdxHeaderActionsComponent } from './header/header-actions.component.js';
+export { OdxHeaderComponent } from './header/header.component.js';
+export { OdxHeadlineComponent } from './headline/headline.component.js';
+export { HeadlineSize } from './headline/headline.models.js';
+export { OdxIconButtonComponent } from './icon-button/icon-button.component.js';
+export { OdxInlineMessageComponent } from './inline-message/inline-message.component.js';
+export { InlineMessageVariant } from './inline-message/inline-message.models.js';
+export { OdxInputComponent } from './input/input.component.js';
+export { InputVariant } from './input/input.models.js';
+export { OdxLineClampComponent } from './line-clamp/line-clamp.component.js';
+export { BaseLink } from './link/base-link.js';
+export { OdxLinkComponent } from './link/link.component.js';
+export { OdxListItemComponent } from './list/list-item.component.js';
+export { OdxListComponent } from './list/list.component.js';
+export { LOADING_OVERLAY_HOST_DIRECTIVE, OdxLoadingOverlayComponent } from './loading-overlay/loading-overlay.component.js';
+export { OdxLoadingSpinnerComponent } from './loading-spinner/loading-spinner.component.js';
+export { OdxLogoComponent } from './logo/logo.component.js';
+export { LogoSize } from './logo/logo.models.js';
+export { OdxMainMenuButtonComponent } from './main-menu/main-menu-button.component.js';
+export { OdxMainMenuLinkComponent } from './main-menu/main-menu-link.component.js';
+export { OdxMainMenuSubtitleComponent } from './main-menu/main-menu-subtitle.component.js';
+export { OdxMainMenuTitleComponent } from './main-menu/main-menu-title.component.js';
+export { OdxMainMenuComponent } from './main-menu/main-menu.component.js';
+export { OdxMenuItemComponent } from './menu/menu-item.component.js';
+export { OdxMenuLabelComponent } from './menu/menu-label.component.js';
+export { OdxMenuComponent } from './menu/menu.component.js';
+export { OdxNavigationItemComponent } from './navigation-item/navigation-item.component.js';
+export { NavigationItemSize } from './navigation-item/navigation-item.models.js';
+export { OdxOptionComponent } from './option/option.component.js';
+export { OdxPageComponent } from './page/page.component.js';
+export { PageAlignment, PageLayout } from './page/page.models.js';
+export { OdxPageLayoutComponent } from './page-layout/page-layout.component.js';
+export { OdxProgressBarComponent } from './progress-bar/progress-bar.component.js';
+export { ProgressState } from './progress-bar/progress-bar.models.js';
+export { OdxRadioButtonComponent } from './radio-button/radio-button.component.js';
+export { OdxRadioGroupComponent } from './radio-group/radio-group.component.js';
+export { RadioGroupVariant } from './radio-group/radio-group.models.js';
+export { OdxRailNavigationComponent } from './rail-navigation/rail-navigation.component.js';
+export { OdxSearchBarComponent } from './search-bar/search-bar.component.js';
+export { SearchEvent } from './search-bar/search-bar.events.js';
+export { SearchBarBehavior } from './search-bar/search-bar.models.js';
+export { OdxSelectComponent } from './select/select.component.js';
+export { OdxSeparatorComponent } from './separator/separator.component.js';
+export { OdxSkeletonComponent } from './skeleton/skeleton.component.js';
+export { OdxSliderHandleComponent } from './slider/slider-handle.component.js';
+export { OdxSliderMarksComponent } from './slider/slider-marks.component.js';
+export { OdxSliderComponent } from './slider/slider.component.js';
+export { SliderLabelVisibility, SliderTrackVisibility, sliderContext } from './slider/slider.models.js';
+export { OdxSpacerComponent } from './spacer/spacer.component.js';
+export { OdxSpinboxComponent } from './spinbox/spinbox.component.js';
+export { OdxStackComponent } from './stack/stack.component.js';
+export { StackAlign, StackGap, StackJustify } from './stack/stack.models.js';
+export { OdxSwitchComponent } from './switch/switch.component.js';
+export { OdxTextComponent } from './text/text.component.js';
+export { TextSize, TextVariant } from './text/text.models.js';
+export { OdxTitleComponent } from './title/title.component.js';
+export { TitleSize } from './title/title.models.js';
+export { OdxToggleButtonComponent } from './toggle-button/toggle-button.component.js';
+export { OdxVisuallyHiddenComponent } from './visually-hidden/visually-hidden.component.js';
+export { OdxFormFieldElement } from '../elements/form-field/form-field.element.js';
+export { OdxTableBodyElement } from '../elements/table/elements/table-body/table-body.element.js';
+export { OdxTableCellElement } from '../elements/table/elements/table-cell/table-cell.element.js';
+export { OdxTableCheckboxCellElement } from '../elements/table/elements/table-checkbox-cell/table-checkbox-cell.element.js';
+export { OdxTableHeaderElement } from '../elements/table/elements/table-header/table-header.element.js';
+export { OdxTableHeaderCellElement } from '../elements/table/elements/table-header-cell/table-header-cell.element.js';
+export { OdxTableRowElement } from '../elements/table/elements/table-row/table-row.element.js';
+export { OdxTableElement } from '../elements/table/table.element.js';
+export { ToastVariant } from '../elements/toast/models/toast-variant.js';
+export { OdxToastElement } from '../elements/toast/toast.element.js';
+export { TooltipPlacement } from '../elements/tooltip/models/tooltip-placement.js';
+export { OdxTooltipElement } from '../elements/tooltip/tooltip.element.js';

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

@@ -0,0 +1,4 @@
+export * from './menu-item.component';
+export * from './menu-label.component';
+export * from './menu.component';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+import { OdxNavigationItemComponent } from '../navigation-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-menu-item': OdxMenuItemComponent;
+    }
+}
+export declare class OdxMenuItemComponent extends OdxNavigationItemComponent {
+    icon?: string | null;
+    protected renderContent(): TemplateResult;
+    connectedCallback(): void;
+}
+//# sourceMappingURL=menu-item.component.d.ts.map

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

@@ -0,0 +1,37 @@
+import { customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './menu-item.component.css.js';
+import { OdxNavigationItemComponent } from '../navigation-item/navigation-item.component.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 OdxMenuItemComponent = class extends OdxNavigationItemComponent {
+  renderContent() {
+    return html`
+      ${when(this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
+      ${super.renderContent()}
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "menuitem";
+  }
+};
+__decorateClass([
+  property()
+], OdxMenuItemComponent.prototype, "icon", 2);
+OdxMenuItemComponent = __decorateClass([
+  customElement("odx-menu-item", [styles])
+], OdxMenuItemComponent);
+
+export { OdxMenuItemComponent };

package/dist/components/menu/menu-label.component.css.js

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

package/dist/{elements/menu/elements/menu-label/menu-label.element.d.ts → components/menu/menu-label.component.d.ts}

@@ -2,10 +2,10 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-menu-label': OdxMenuLabelElement;
+        'odx-menu-label': OdxMenuLabelComponent;
     }
 }
-export declare class OdxMenuLabelElement extends CustomElement {
+export declare class OdxMenuLabelComponent extends CustomElement {
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=menu-label.element.d.ts.map
+//# sourceMappingURL=menu-label.component.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--min-inline-size: 160px;--max-inline-size: 280px;--_gap: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main);--_outer-padding: var(--odx-size-50)}.base{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);max-inline-size:var(--max-inline-size);min-inline-size:var(--min-inline-size)}::slotted(odx-separator){--block-space: calc(-1 * var(--_gap) / 2)}::slotted(odx-button){inline-size:100%;margin:0}";
+
+export { styles as default };

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

@@ -1,24 +1,24 @@
 import { CustomElement } from '@odx/foundation';
 import { PopoverHost } from '@odx/foundation/cdk';
 import { TemplateResult } from 'lit';
-import { OdxMenuItemElement } from './elements/menu-item';
+import { OdxMenuItemComponent } from './menu-item.component';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-menu': OdxMenuElement;
+        'odx-menu': OdxMenuComponent;
     }
 }
-declare const OdxMenuElement_base: import('@odx/foundation').Constructor<PopoverHost> & typeof CustomElement;
-export declare class OdxMenuElement extends OdxMenuElement_base {
+declare const OdxMenuComponent_base: import('@odx/foundation').Constructor<PopoverHost> & typeof CustomElement;
+export declare class OdxMenuComponent extends OdxMenuComponent_base {
     #private;
-    getItems(): OdxMenuItemElement[];
+    getItems(): OdxMenuItemComponent[];
     connectedCallback(): void;
     mountPopover(referenceElement?: HTMLElement): void;
     unmountPopover(referenceElement: HTMLElement): void;
     onBeforePopoverShow(): void;
     onPopoverShow(): void;
     onBeforePopoverHide(): void;
-    protected isMenuItem(element: Element): element is OdxMenuItemElement;
+    protected isMenuItem(element: Element): element is OdxMenuItemComponent;
     protected render(): TemplateResult;
 }
 export {};
-//# sourceMappingURL=menu.element.d.ts.map
+//# sourceMappingURL=menu.component.d.ts.map

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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,3 @@
+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,3 +1,5 @@
+import { ARIAMixinStrict } from '@odx/foundation';
+import { PropertyValues } from 'lit';
 import { BaseButtonComponent } from '../button';
 import { NavigationItemSize } from './navigation-item.models';
 declare global {
@@ -8,5 +10,7 @@ declare global {
 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

@@ -0,0 +1,42 @@
+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

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

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

@@ -0,0 +1,3 @@
+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.js

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,53 @@
+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

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

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

@@ -0,0 +1,3 @@
+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.js

@@ -0,0 +1,28 @@
+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/index.d.ts

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

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

@@ -0,0 +1,3 @@
+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/{elements/progress-bar/progress-bar.element.d.ts → components/progress-bar/progress-bar.component.d.ts}

@@ -1,12 +1,12 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { ProgressState } from './models';
+import { ProgressState } from './progress-bar.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-progress-bar': OdxProgressBarElement;
+        'odx-progress-bar': OdxProgressBarComponent;
     }
 }
-export declare class OdxProgressBarElement extends CustomElement {
+export declare class OdxProgressBarComponent extends CustomElement {
     readonly content: HTMLElement[];
     indeterminate: boolean;
     min: number;
@@ -21,4 +21,4 @@ export declare class OdxProgressBarElement extends CustomElement {
     get valueHidden(): boolean;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=progress-bar.element.d.ts.map
+//# sourceMappingURL=progress-bar.component.d.ts.map