@odx/foundation 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/components/main.d.ts

@@ -1,52 +1,56 @@
-export * from './accordion';
-export * from './area-header';
-export * from './avatar';
-export * from './avatar-group';
-export * from './badge';
-export * from './breadcrumb';
-export * from './button';
-export * from './button-group';
-export * from './card';
-export * from './checkbox';
-export * from './checkbox-group';
-export * from './chip';
-export * from './circular-progress-bar';
-export * from './content-box';
-export * from './dropdown';
-export * from './format';
-export * from './header';
-export * from './headline';
-export * from './icon-button';
-export * from './inline-message';
-export * from './input';
-export * from './line-clamp';
-export * from './link';
-export * from './list';
-export * from './loading-overlay';
-export * from './loading-spinner';
-export * from './logo';
-export * from './main-menu';
-export * from './menu';
-export * from './navigation-item';
-export * from './option';
-export * from './page';
-export * from './page-layout';
-export * from './progress-bar';
-export * from './radio-button';
-export * from './radio-group';
-export * from './rail-navigation';
-export * from './search-bar';
-export * from './select';
-export * from './separator';
-export * from './skeleton';
-export * from './slider';
-export * from './spacer';
-export * from './spinbox';
-export * from './stack';
-export * from './switch';
-export * from './text';
-export * from './title';
-export * from './toggle-button';
-export * from './visually-hidden';
-export * from '../elements/main';
+export * from './accordion/index.js';
+export * from './area-header/index.js';
+export * from './avatar-group/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './breadcrumbs/index.js';
+export * from './button-group/index.js';
+export * from './button/index.js';
+export * from './card/index.js';
+export * from './checkbox-group/index.js';
+export * from './checkbox/index.js';
+export * from './chip/index.js';
+export * from './circular-progress-bar/index.js';
+export * from './content-box/index.js';
+export * from './dropdown/index.js';
+export * from './format/index.js';
+export * from './header/index.js';
+export * from './headline/index.js';
+export * from './icon-button/index.js';
+export * from './inline-message/index.js';
+export * from './input/index.js';
+export * from './line-clamp/index.js';
+export * from './link/index.js';
+export * from './list/index.js';
+export * from './loading-overlay/index.js';
+export * from './loading-spinner/index.js';
+export * from './logo/index.js';
+export * from './main-menu/index.js';
+export * from './menu-item/index.js';
+export * from './menu/index.js';
+export * from './navigation-item/index.js';
+export * from './option/index.js';
+export * from './page-layout/index.js';
+export * from './page/index.js';
+export * from './progress-bar/index.js';
+export * from './radio-button/index.js';
+export * from './radio-group/index.js';
+export * from './rail-navigation/index.js';
+export * from './search-bar/index.js';
+export * from './select/index.js';
+export * from './separator/index.js';
+export * from './skeleton/index.js';
+export * from './slider/index.js';
+export * from './spacer/index.js';
+export * from './spinbox/index.js';
+export * from './stack/index.js';
+export * from './switch/index.js';
+export * from './text/index.js';
+export * from './title/index.js';
+export * from './toggle-button/index.js';
+export * from './visually-hidden/index.js';
+export * from './form-field/index.js';
+export * from './table/index.js';
+export * from './toast/index.js';
+export * from './tooltip/index.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/components/main.js

@@ -3,21 +3,21 @@ export { OdxAccordionPanelComponent } from './accordion/accordion-panel.componen
 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 { OdxAvatarGroupComponent } from './avatar-group/avatar-group.component.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 { OdxBreadcrumbsItemComponent } from './breadcrumbs/breadcrumbs-item.component.js';
+export { OdxBreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component.js';
+export { OdxButtonGroupComponent } from './button-group/button-group.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 { OdxCheckboxComponent } from './checkbox/checkbox.component.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';
@@ -52,15 +52,15 @@ export { OdxMainMenuLinkComponent } from './main-menu/main-menu-link.component.j
 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 { OdxMenuItemComponent } from './menu-item/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 { OdxPageLayoutComponent } from './page-layout/page-layout.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';
@@ -88,15 +88,15 @@ 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';
+export { OdxFormFieldElement } from './form-field/form-field.element.js';
+export { OdxTableBodyElement } from './table/table-body.element.js';
+export { OdxTableCellElement } from './table/table-cell.element.js';
+export { OdxTableCheckboxCellElement } from './table/table-checkbox-cell.element.js';
+export { OdxTableHeaderCellElement } from './table/table-header-cell.element.js';
+export { OdxTableHeaderElement } from './table/table-header.element.js';
+export { OdxTableRowElement } from './table/table-row.element.js';
+export { OdxTableElement } from './table/table.element.js';
+export { OdxToastElement } from './toast/toast.element.js';
+export { ToastVariant } from './toast/toast.models.js';
+export { OdxTooltipElement } from './tooltip/tooltip.element.js';
+export { TooltipPlacement } from './tooltip/tooltip.models.js';

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

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

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

@@ -1,3 +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))}";
+const styles = ":host{display:flex;place-items:center;padding-inline:var(--odx-size-50);user-select:none;font-weight:var(--odx-typography-font-weight-medium);gap:var(--odx-size-50)}@layer baes{odx-icon,::slotted(odx-icon){--size: var(--odx-typography-font-size-5);margin-inline:}}";
 
 export { styles as default };

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

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

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

@@ -1,5 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
-import { html } from 'lit';
+import { customElement, CustomElement } from '@odx/foundation';
 import styles from './menu-label.component.css.js';
 
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -11,13 +10,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   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])

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

@@ -1,13 +1,13 @@
 import { CustomElement } from '@odx/foundation';
 import { PopoverHost } from '@odx/foundation/cdk';
 import { TemplateResult } from 'lit';
-import { OdxMenuItemComponent } from './menu-item.component';
+import { OdxMenuItemComponent } from '../menu-item/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-menu': OdxMenuComponent;
     }
 }
-declare const OdxMenuComponent_base: import('@odx/foundation').Constructor<PopoverHost> & typeof CustomElement;
+declare const OdxMenuComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<PopoverHost> & typeof CustomElement;
 export declare class OdxMenuComponent extends OdxMenuComponent_base {
     #private;
     getItems(): OdxMenuItemComponent[];

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

@@ -1,4 +1,4 @@
-import { CustomElement, RovingTabindexController, getKeyboardEventInfo, customElement } from '@odx/foundation';
+import { CustomElement, RovingTabindexController, customElement, getKeyboardEventInfo } from '@odx/foundation';
 import { PopoverHost } from '@odx/foundation/cdk';
 import { html } from 'lit';
 import styles from './menu.component.css.js';
@@ -64,6 +64,7 @@ let OdxMenuComponent = class extends PopoverHost(CustomElement) {
   connectedCallback() {
     super.connectedCallback?.();
     this.role ||= "menu";
+    this.togglePopover(true);
   }
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);

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

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

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

@@ -0,0 +1,3 @@
+const styles = "@layer base{.base{place-content:flex-start}}";
+
+export { styles as default };

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

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

package/dist/components/{menu → menu-item}/menu-item.component.js

@@ -1,9 +1,10 @@
 import { customElement } from '@odx/foundation';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { BaseButtonComponent } from '../button/base-button.js';
+import '../button/button.component.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;
@@ -15,17 +16,24 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let OdxMenuItemComponent = class extends OdxNavigationItemComponent {
+let OdxMenuItemComponent = class extends BaseButtonComponent {
   renderContent() {
     return html`
-      ${when(this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
-      ${super.renderContent()}
+      ${when(!this.loading && this.icon, (icon) => html`<odx-icon name="${icon}"></odx-icon>`)}
+      ${when(this.loading, () => this.renderSpinner())}
+      <odx-line-clamp class="content" .max=${2}>
+        <slot></slot>
+      </odx-line-clamp>
+      <slot name="suffix"></slot>
     `;
   }
   connectedCallback() {
     super.connectedCallback?.();
     this.role ||= "menuitem";
   }
+  renderOverlay() {
+    return nothing;
+  }
 };
 __decorateClass([
   property()

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

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

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

@@ -1,7 +1,7 @@
 import { ARIAMixinStrict } from '@odx/foundation';
 import { PropertyValues } from 'lit';
-import { BaseButtonComponent } from '../button';
-import { NavigationItemSize } from './navigation-item.models';
+import { BaseButtonComponent } from '../button/index.js';
+import { NavigationItemSize } from './navigation-item.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-navigation-item': OdxNavigationItemComponent;

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

@@ -1,7 +1,8 @@
 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';
+import '../button/button.component.js';
+import styles from './navigation-item.component.css.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

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

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

@@ -1,4 +1,4 @@
-import { OptionControl, customElement } from '@odx/foundation';
+import { customElement, OptionControl } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { PageAlignment, PageLayout } from './page.models';
+import { PageAlignment, PageLayout } from './page.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-page': OdxPageComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, SharedResizeObserver, toPx, customElement } from '@odx/foundation';
+import { customElement, CustomElement, SharedResizeObserver, toPx } from '@odx/foundation';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import styles from './page.component.css.js';

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

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

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

@@ -1,4 +1,4 @@
-import { CustomElement, optionalSlot, customElement } from '@odx/foundation';
+import { customElement, CustomElement, optionalSlot } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './page-layout.component.css.js';
 

package/dist/components/progress-bar/index.d.ts

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

package/dist/components/progress-bar/progress-bar.component.d.ts

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { ProgressState } from './progress-bar.models';
+import { ProgressState } from './progress-bar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-progress-bar': OdxProgressBarComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, optionalAttr, customElement } from '@odx/foundation';
+import { customElement, CustomElement, optionalAttr } from '@odx/foundation';
 import { clamp, round } from 'es-toolkit';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';

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

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

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

@@ -1,4 +1,4 @@
-import { CheckboxFormControl, customElement } from '@odx/foundation';
+import { customElement, CheckboxFormControl } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './radio-button.component.css.js';
 

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

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

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

@@ -1,5 +1,5 @@
 import { RadioGroupFormControl } from '@odx/foundation';
-import { RadioGroupVariant } from './radio-group.models';
+import { RadioGroupVariant } from './radio-group.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-radio-group': OdxRadioGroupComponent;

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

@@ -1,4 +1,4 @@
-import { RadioGroupFormControl, customElement } from '@odx/foundation';
+import { customElement, RadioGroupFormControl } from '@odx/foundation';
 import { property } from 'lit/decorators.js';
 import styles from './radio-group.component.css.js';
 

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

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

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

@@ -1,3 +1,3 @@
-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)}}";
+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);transition-property:transform}: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 +1,16 @@
-import { CustomElement, IsTranslatable } from '@odx/foundation';
+import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { OdxNavigationItemComponent } from '../navigation-item';
+import { OdxNavigationItemComponent } from '../navigation-item/index.js';
 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 {
+export declare class OdxRailNavigationComponent extends CustomElement {
     #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

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

@@ -1,8 +1,9 @@
-import { IsTranslatable, CustomElement, getAssignedElements, customElement } from '@odx/foundation';
+import { customElement, CustomElement, getAssignedElements } from '@odx/foundation';
+import { setTranslation, translate } from '@odx/foundation/i18n';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
-import styles from './rail-navigation.component.css.js';
 import { OdxNavigationItemComponent } from '../navigation-item/navigation-item.component.js';
+import styles from './rail-navigation.component.css.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,7 +22,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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, _handleControlClick;
-let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
+setTranslation("en", { "railNavigation.control.labelExpanded": "Collapse navigation", "railNavigation.control.labelCollapsed": "Expand navigation" });
+let OdxRailNavigationComponent = class extends CustomElement {
   constructor() {
     super(...arguments);
     this.collapsed = false;
@@ -35,26 +37,18 @@ let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
     });
   }
   render() {
-    const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
+    const controlLabel = translate(`railNavigation.control.${this.collapsed ? "labelCollapsed" : "labelExpanded"}`).get();
     return html`
       <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
       <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet(this, _handleControlClick)}>
         <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
-        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
+        <odx-visually-hidden>${controlLabel}</odx-visually-hidden>${controlLabel}
       </odx-navigation-item>
     `;
   }
   getItems() {
     return this.navigationItems;
   }
-  _getTranslations() {
-    return {
-      en: {
-        controlLabelExpanded: "Collapse navigation",
-        controlLabelCollapsed: "Expand navigation"
-      }
-    };
-  }
 };
 _handleSlotChange = new WeakMap();
 _handleControlClick = new WeakMap();

package/dist/components/search-bar/index.d.ts

@@ -1,4 +1,4 @@
-export * from './search-bar.component';
-export * from './search-bar.events';
-export * from './search-bar.models';
+export * from './search-bar.component.js';
+export * from './search-bar.events.js';
+export * from './search-bar.models.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/search-bar/search-bar.component.d.ts

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
-import { SearchBarBehavior } from './search-bar.models';
+import { SearchBarBehavior } from './search-bar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-search-bar': OdxSearchBarComponent;

package/dist/components/search-bar/search-bar.component.js

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { debounce } from 'es-toolkit';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';

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

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

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

@@ -1,7 +1,7 @@
 import { SelectFormControl } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxDropdownComponent } from '../dropdown';
-import { OdxOptionComponent } from '../option';
+import { OdxDropdownComponent } from '../dropdown/index.js';
+import { OdxOptionComponent } from '../option/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-select': OdxSelectComponent;