@odx/foundation 0.1.0-alpha.21 → 0.1.0-alpha.22

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
+const styles = ":host {\n  display: block;\n  font-family: var(--odx-typography-font-family-brand);\n  font-size: var(--_font-size);\n  font-weight: var(--odx-typography-font-weight-semibold);\n  line-height: var(--_line-height);\n}\n\n:host([size=\"sm\"]) {\n  --_font-size: var(--odx-breakpoint-font-size-display-sm);\n  --_line-height: var(--odx-breakpoint-line-height-display-sm);\n}\n\n:host,\n:host([size=\"md\"]) {\n  --_font-size: var(--odx-breakpoint-font-size-display-md);\n  --_line-height: var(--odx-breakpoint-line-height-display-md);\n}\n\n:host([size=\"lg\"]) {\n  --_font-size: var(--odx-breakpoint-font-size-display-lg);\n  --_line-height: var(--odx-breakpoint-line-height-display-lg);\n}\n\n:host([size=\"xl\"]) {\n  --_font-size: var(--odx-breakpoint-font-size-display-xl);\n  --_line-height: var(--odx-breakpoint-line-height-display-xl);\n}\n";
 
 export { styles as default };

package/dist/components/headline/index.js

@@ -0,0 +1,2 @@
+export { OdxHeadlineComponent } from './headline.component.js';
+export { HeadlineSize } from './headline.models.js';

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

@@ -2,6 +2,7 @@ import { optionalAttr, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import '../button/index.js';
 import { OdxButtonComponent } from '../button/button.component.js';
 
 var __defProp = Object.defineProperty;

package/dist/components/icon-button/index.js

@@ -0,0 +1 @@
+export { OdxIconButtonComponent } from './icon-button.component.js';

package/dist/components/inline-message/index.js

@@ -0,0 +1,2 @@
+export { OdxInlineMessageComponent } from './inline-message.component.js';
+export { InlineMessageVariant } from './inline-message.models.js';

package/dist/components/inline-message/inline-message.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
+const styles = ":host {\n  --_color-background: var(--odx-color-background-main);\n  --_color-foreground: var(--odx-color-foreground);\n  --_color-stroke: var(--odx-color-separator);\n\n  display: block;\n  padding: var(--odx-size-75);\n  background-color: var(--_color-background);\n  color: var(--_color-foreground);\n  border: var(--odx-border-width-thin) solid var(--_color-stroke);\n  transition: var(--odx-transition-reduced);\n  transition-property: background-color, color, border-color;\n}\n\n:host([variant=\"info\"]) {\n  --_color-background: var(--odx-palette-blue-10);\n  --_color-stroke: var(--odx-palette-blue-30);\n}\n\n:host([variant=\"danger\"]) {\n  --_color-background: var(--odx-palette-red-10);\n  --_color-foreground: var(--odx-palette-red-100);\n  --_color-stroke: var(--odx-palette-red-30);\n}\n\n:host([variant=\"warning\"]) {\n  --_color-background: var(--odx-palette-yellow-00);\n  --_color-stroke: var(--odx-palette-yellow-60);\n}\n\n:host([variant=\"success\"]) {\n  --_color-background: var(--odx-palette-green-00);\n  --_color-stroke: var(--odx-palette-green-60);\n}\n\n:host(:not([emphasized])) {\n  --_color-stroke: var(--odx-palette-transparent);\n}\n";
 
 export { styles as default };

package/dist/components/link/base-link.js

@@ -4,12 +4,13 @@ import { query, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  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(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 class BaseLink extends CanBeDisabled(CustomElement) {
@@ -52,18 +53,18 @@ class BaseLink extends CanBeDisabled(CustomElement) {
 }
 __decorateClass([
   query('[part~="anchor"]', true)
-], BaseLink.prototype, "interactiveElement");
+], BaseLink.prototype, "interactiveElement", 2);
 __decorateClass([
   property()
-], BaseLink.prototype, "href");
+], BaseLink.prototype, "href", 2);
 __decorateClass([
   property()
-], BaseLink.prototype, "target");
+], BaseLink.prototype, "target", 2);
 __decorateClass([
   property()
-], BaseLink.prototype, "rel");
+], BaseLink.prototype, "rel", 2);
 __decorateClass([
   property()
-], BaseLink.prototype, "download");
+], BaseLink.prototype, "download", 2);
 
 export { BaseLink };

package/dist/components/link/index.js

@@ -0,0 +1,2 @@
+export { BaseLink } from './base-link.js';
+export { OdxLinkComponent } from './link.component.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-foreground: var(--odx-palette-blue-50);display:inline;text-decoration:underline}:host(:focus-visible){outline:none}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls)}:host::part(anchor):hover{--_color-foreground: var(--odx-palette-blue-80)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"])::part(anchor){--_color-foreground: var(--odx-palette-coolgray-40);cursor:default}";
+const styles = ":host {\n  --_color-foreground: var(--odx-palette-blue-50);\n\n  display: inline;\n  text-decoration: underline;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n:host::part(anchor) {\n  padding-inline: calc(1 / 24 * 1rem);\n  transition: var(--odx-transition-reduced);\n  color: var(--_color-foreground);\n  text-decoration: inherit;\n  outline: var(--odx-focus-ring-outline);\n  outline-offset: var(--odx-focus-ring-offset);\n  border-radius: var(--odx-border-radius-controls);\n}\n\n:host::part(anchor):hover {\n  --_color-foreground: var(--odx-palette-blue-80);\n}\n\n:host::part(anchor):focus-visible {\n  outline-color: var(--odx-focus-ring-color);\n}\n\n:host([emphasized]) {\n  --_color-foreground: var(--odx-color-foreground);\n\n  font-weight: var(--odx-typography-font-weight-medium);\n}\n\n:host([aria-disabled=\"true\"]),\n:host([subtle]:not(:hover)) {\n  text-decoration: none;\n}\n\n:host([aria-disabled=\"true\"])::part(anchor) {\n  --_color-foreground: var(--odx-palette-coolgray-40);\n  cursor: default;\n}\n";
 
 export { styles as default };

package/dist/components/list/index.js

@@ -0,0 +1,2 @@
+export { OdxListItemComponent } from './list-item.component.js';
+export { OdxListComponent } from './list.component.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;flex-direction:column;padding:var(--odx-size-75);border-block-end:var(--odx-border-sm)}";
+const styles = ":host {\n  display: flex;\n  flex-direction: column;\n  padding: var(--odx-size-75);\n  border-block-end: var(--odx-border-sm);\n}\n";
 
 export { styles as default };

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

@@ -1,15 +1,18 @@
 import { customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
+import '../link/index.js';
 import styles from './list-item.component.css.js';
 import { BaseLink } from '../link/base-link.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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxListItemComponent = class extends BaseLink {

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

@@ -1,3 +1,3 @@
-const styles = "";
+const styles = ":host {\n  \n}";
 
 export { styles as default };

package/dist/components/list/list.component.js

@@ -1,13 +1,16 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
+import './list-item.component.js';
 import styles from './list.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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxListComponent = class extends CustomElement {

package/dist/components/loading-indicator/index.js

@@ -0,0 +1 @@
+export { OdxLoadingIndicatorComponent } from './loading-indicator.component.js';

package/dist/components/loading-indicator/loading-indicator.component.css.js

@@ -1,3 +1,3 @@
-const styles = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}.dot{background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}";
+const styles = "@keyframes loading-indicator-entry-animation {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes loading-indicator-animation {\n  0%,\n  75%,\n  100% {\n    transform: scale(0.667);\n    opacity: 0.5;\n  }\n\n  50% {\n    transform: scale(1);\n    opacity: 1;\n    background-color: currentColor;\n  }\n}\n\n:host {\n  --_animation-timing-function: cubic-bezier(0.96, 0.21, 0.41, 0.76);\n  --_animation-duration: 1.25s;\n  --_animation-delay: 0s;\n  --_size: var(--odx-size-75);\n  --_space: var(--odx-size-37);\n\n  display: flex;\n  place-content: center;\n  place-items: center;\n  color: currentColor;\n  gap: calc(var(--_space) / 2);\n  padding: var(--_space);\n  animation: loading-indicator-entry-animation 250ms linear both;\n}\n\n.dot {\n  background-color: currentColor;\n  border-radius: 50%;\n  block-size: var(--_size);\n  flex: 0 0 var(--_size);\n  z-index: 3;\n  animation: loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards;\n\n  &:nth-child(1) {\n    --_animation-delay: calc(-1 * var(--_animation-duration) / 6);\n  }\n\n  &:nth-child(2) {\n    --_animation-delay: calc(-1 * var(--_animation-duration) / 12);\n  }\n\n  &:nth-child(3) {\n    --_animation-delay: 0s;\n  }\n}\n";
 
 export { styles as default };

package/dist/components/loading-indicator/loading-indicator.component.js

@@ -2,12 +2,14 @@ import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './loading-indicator.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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxLoadingIndicatorComponent = class extends CustomElement {

package/dist/components/loading-overlay/index.js

@@ -0,0 +1 @@
+export { LOADING_OVERLAY_HOST_DIRECTIVE, OdxLoadingOverlayComponent } from './loading-overlay.component.js';

package/dist/components/loading-overlay/loading-overlay.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_overlay-fill-color: var(--odx-overlay-background, rgba(255, 255, 255, .25));display:contents}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-elevation-blur)) grayscale(.75);pointer-events:all;visibility:visible}";
+const styles = ":host {\n  --_overlay-fill-color: var(--odx-overlay-background, rgba(255, 255, 255, 0.25));\n\n  display: contents;\n}\n\n:host::part(overlay) {\n  display: flex;\n  flex-direction: column;\n  place-content: center;\n  place-items: center;\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: var(--odx-transition-reduced) allow-discrete;\n  overflow: hidden;\n}\n\n:host::part(content) {\n  min-inline-size: var(--odx-size-225);\n  text-align: center;\n}\n\n:host([loading])::part(overlay) {\n  background-color: var(--_overlay-fill-color);\n  z-index: 9999;\n  opacity: 1;\n  backdrop-filter: blur(var(--odx-elevation-blur)) grayscale(0.75);\n  pointer-events: all;\n  visibility: visible;\n}\n";
 
 export { styles as default };

package/dist/components/loading-overlay/loading-overlay.component.js

@@ -17,9 +17,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _loadingContainerPosition;
 const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
 let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {

package/dist/components/logo/index.js

@@ -0,0 +1,2 @@
+export { OdxLogoComponent } from './logo.component.js';
+export { LogoSize } from './logo.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
+const styles = ":host {\n  aspect-ratio: 92 / 36;\n  background-color: currentColor;\n  block-size: var(--_logo-block-size);\n  display: inline-block;\n  mask-image: url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");\n  mask-repeat: no-repeat;\n  mask-origin: content-box;\n  mask-position: center center;\n  margin-block: var(--_logo-spacing);\n}\n\n:host([compact]) {\n  aspect-ratio: 1;\n  mask-image: url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\");\n}\n\n:host([size=\"xs\"]) {\n  --_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));\n  --_logo-spacing: var(--odx-size-25);\n}\n\n:host,\n:host([size=\"sm\"]) {\n  --_logo-block-size: var(--odx-size-150);\n  --_logo-spacing: var(--odx-size-37);\n}\n\n:host([size=\"md\"]) {\n  --_logo-block-size: var(--odx-size-225);\n  --_logo-spacing: var(--odx-size-37);\n}\n\n:host([size=\"lg\"]) {\n  --_logo-block-size: var(--odx-size-300);\n  --_logo-spacing: var(--odx-size-37);\n}\n\n:host([size=\"xl\"]) {\n  --_logo-block-size: var(--odx-size-400);\n  --_logo-spacing: var(--odx-size-37);\n}\n";
 
 export { styles as default };

package/dist/components/main-menu/index.js

@@ -0,0 +1,5 @@
+export { OdxMainMenuButtonComponent } from './main-menu-button.component.js';
+export { OdxMainMenuLinkComponent } from './main-menu-link.component.js';
+export { OdxMainMenuSubtitleComponent } from './main-menu-subtitle.component.js';
+export { OdxMainMenuTitleComponent } from './main-menu-title.component.js';
+export { OdxMainMenuComponent } from './main-menu.component.js';

package/dist/components/main-menu/main-menu-button.component.js

@@ -1,6 +1,7 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -9,7 +10,8 @@ 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;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);

package/dist/components/main-menu/main-menu-link.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}:host::part(anchor){display:flex;place-items:center;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--odx-size-50);block-size:var(--odx-size-300);padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-outline);transition:var(--odx-transition-default);text-decoration:none}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host::part(anchor):focus-visible{--_color-outline: var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
+const styles = ":host {\n  --_color-fill: var(--odx-palette-transparent);\n  --_color-text: inherit;\n  --_color-outline: var(--odx-palette-transparent);\n\n  user-select: none;\n}\n\n:host::part(anchor) {\n  display: flex;\n  place-items: center;\n  background-color: var(--_color-fill);\n  color: var(--_color-text);\n  gap: var(--odx-size-50);\n  block-size: var(--odx-size-300);\n  text-decoration: none;\n  padding-inline: var(--odx-size-100);\n  font-weight: var(--odx-font-weight-medium);\n  border-radius: var(--odx-border-radius-sm);\n  outline: var(--odx-focus-ring-outline);\n  outline-offset: var(--odx-focus-ring-offset);\n  outline-color: var(--_color-outline);\n  transition: var(--odx-transition-default);\n  text-decoration: none;\n}\n\n:host(:hover) {\n  --_color-fill: var(--odx-color-foreground-highlight);\n}\n\n:host(:is([active], :active)) {\n  --_color-fill: var(--odx-color-foreground-highlight-pressed);\n}\n\n:host::part(anchor):focus-visible {\n  --_color-outline: var(--odx-focus-ring-color);\n}\n\n:host([aria-disabled=\"true\"]) {\n  --_color-text: var(--odx-color-disabled-foreground-brand);\n\n  pointer-events: none;\n}\n";
 
 export { styles as default };

package/dist/components/main-menu/main-menu-link.component.js

@@ -1,13 +1,16 @@
 import { customElement } from '@odx/foundation';
+import '../link/index.js';
 import styles from './main-menu-link.component.css.js';
 import { BaseLink } from '../link/base-link.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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxMainMenuLinkComponent = class extends BaseLink {

package/dist/components/main-menu/main-menu-subtitle.component.js

@@ -1,12 +1,14 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 
+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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxMainMenuSubtitleComponent = class extends CustomElement {

package/dist/components/main-menu/main-menu-title.component.js

@@ -1,12 +1,14 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 
+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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxMainMenuTitleComponent = class extends CustomElement {

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

@@ -1,3 +1,3 @@
-const styles = ":host{--odx-link-color: var(--odx-color-foreground-light);--odx-link-color-hover: var(--odx-color-foreground-light);--odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));border:none;background-color:var(--odx-color-background-draeger);color:var(--odx-color-foreground-light);margin:0;padding:0;transform:translate(-100%);box-shadow:var(--odx-shadow-level-2);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete}:host(:popover-open){display:grid;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(-100%)}}:host::backdrop{background-color:var(--odx-color-backdrop);backdrop-filter:blur(0);opacity:0;transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);cursor:default}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-inline:var(--odx-size-150);padding-block-start:var(--odx-size-75);padding-block-end:clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75))}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{padding-block-end:0;padding-block-start:var(--odx-size-75);column-gap:var(--odx-size-100)}";
+const styles = ":host {\n  --odx-link-color: var(--odx-color-foreground-light);\n  --odx-link-color-hover: var(--odx-color-foreground-light);\n  --odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);\n\n  --_transition-duration: var(--odx-motion-duration-default);\n\n  grid-template-rows: auto 1fr auto auto;\n  block-size: 100%;\n  inline-size: var(--odx-main-menu-max-width, min(100dvw, 384px));\n  border: none;\n  background-color: var(--odx-color-background-draeger);\n  color: var(--odx-color-foreground-light);\n  margin: 0;\n  padding: 0;\n  transform: translateX(-100%);\n  box-shadow: var(--odx-shadow-level-2);\n  transition: transform var(--_transition-duration) allow-discrete, overlay var(--_transition-duration) allow-discrete, display var(--_transition-duration)\n    allow-discrete;\n}\n\n:host(:popover-open) {\n  display: grid;\n  opacity: 1;\n  transform: translateX(0);\n\n  @starting-style {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n}\n\n:host::backdrop {\n  background-color: var(--odx-color-backdrop);\n  backdrop-filter: blur(0);\n  opacity: 0;\n  transition: backdrop-filter var(--_transition-duration), opacity var(--_transition-duration);\n  cursor: default;\n}\n\n:host(:popover-open)::backdrop {\n  backdrop-filter: blur(var(--odx-elevation-blur));\n  opacity: 1;\n}\n\n@starting-style {\n  :host(:popover-open)::backdrop {\n    backdrop-filter: blur(0);\n    opacity: 0;\n  }\n}\n\n[part~=\"navigation\"] {\n  padding: var(--odx-size-75);\n  overflow-y: auto;\n}\n\n[part~=\"header\"] {\n  padding-inline: var(--odx-size-150);\n  padding-block-start: var(--odx-size-75);\n  padding-block-end: clamp(0px, 4dvh - calc(var(--odx-size-75)), var(--odx-size-75));\n}\n\n[part~=\"link-navigation\"],\n[part~=\"footer\"] {\n  padding: var(--odx-size-150);\n  padding-block: clamp(var(--odx-size-75), 4dvh, var(--odx-size-150));\n}\n\n[part~=\"link-navigation\"] {\n  padding-block-end: 0;\n  padding-block-start: var(--odx-size-75);\n  column-gap: var(--odx-size-100);\n}\n";
 
 export { styles as default };

package/dist/components/main.js

@@ -1,3 +1,47 @@
+import './accordion/index.js';
+import './area-header/index.js';
+import './avatar/index.js';
+import './avatar-group/index.js';
+import './badge/index.js';
+import './breadcrumb/index.js';
+import './button/index.js';
+import './button-group/index.js';
+import './card/index.js';
+import './checkbox/index.js';
+import './checkbox-group/index.js';
+import './chip/index.js';
+import './content-box/index.js';
+import './dropdown/index.js';
+import './format/index.js';
+import './header/index.js';
+import './headline/index.js';
+import './icon-button/index.js';
+import './inline-message/index.js';
+import './link/index.js';
+import './list/index.js';
+import './loading-indicator/index.js';
+import './loading-overlay/index.js';
+import './logo/index.js';
+import './main-menu/index.js';
+import './navigation-item/index.js';
+import './option/index.js';
+import './page/index.js';
+import './page-layout/index.js';
+import './radio-button/index.js';
+import './radio-group/index.js';
+import './rail-navigation/index.js';
+import './search-bar/index.js';
+import './select/index.js';
+import './separator/index.js';
+import './spacer/index.js';
+import './spinbox/index.js';
+import './stack/index.js';
+import './switch/index.js';
+import './text/index.js';
+import './title/index.js';
+import './toggle-button/index.js';
+import './visually-hidden/index.js';
+import '../elements/main.js';
 export { OdxAccordionHeaderComponent } from './accordion/accordion-header.component.js';
 export { OdxAccordionPanelComponent } from './accordion/accordion-panel.component.js';
 export { OdxAccordionComponent } from './accordion/accordion.component.js';

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

@@ -0,0 +1,2 @@
+export { OdxNavigationItemComponent } from './navigation-item.component.js';
+export { NavigationItemSize } from './navigation-item.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: inherit;--_icon-size: var(--odx-size-125);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-typography-line-height-4);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;background:transparent;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;border:none;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,color,outline-color;background-color:var(--_color-background);color:var(--_color-foreground);gap:var(--_padding-inline);font-size:var(--_text-size);line-height:var(--_line-height);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host([aria-current=\"true\"]){--_color-background: var(--odx-color-selected)}:host([aria-current=\"true\"]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-current=\"true\"]:active),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([size=\"lg\"]){--_icon-size: var(--odx-size-200);--_text-size: var(--odx-typography-font-size-3);--_line-height: var(--odx-size-100);--_padding-block: var(--odx-size-50);--_padding-inline: var(--odx-size-50)}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}::slotted(*){flex:0 0 auto}::slotted(odx-icon){--size: var(--_icon-size)}::slotted(odx-avatar){--_size: var(--_icon-size)}::slotted([slot=\"end\"]){margin-inline-start:auto}";
+const styles = ":host {\n  --_color-background: var(--odx-palette-transparent);\n  --_color-foreground: inherit;\n\n  --_icon-size: var(--odx-size-125);\n  --_text-size: var(--odx-typography-font-size-3);\n  --_line-height: var(--odx-typography-line-height-4);\n  --_padding-block: var(--odx-size-37);\n  --_padding-inline: var(--odx-size-50);\n\n  block-size: var(--_block-size);\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n  vertical-align: top;\n  border-radius: var(--odx-border-radius-sm);\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n:host,\n:host::part(anchor) {\n  display: inline-flex;\n  place-items: center;\n}\n\n:host::part(anchor) {\n  overflow: clip;\n  border-radius: inherit;\n  cursor: inherit;\n  -webkit-appearance: none;\n  vertical-align: middle;\n  background: transparent;\n  text-decoration: none;\n  font: inherit;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: 0;\n  border: none;\n  gap: inherit;\n  text-transform: inherit;\n  padding-block: calc(var(--_padding-block));\n  padding-inline: var(--_padding-inline);\n  transition: var(--odx-transition-reduced);\n  transition-property: background-color, color, outline-color;\n  background-color: var(--_color-background);\n  color: var(--_color-foreground);\n  gap: var(--_padding-inline);\n  font-size: var(--_text-size);\n  line-height: var(--_line-height);\n  outline: var(--odx-focus-ring-outline);\n  outline-offset: var(--odx-focus-ring-offset);\n}\n\n:host::part(anchor)::-moz-focus-inner {\n  padding: 0;\n  border: 0;\n}\n\n:host(:hover) {\n  --_color-background: var(--odx-color-transparent-hover);\n}\n\n:host([aria-current=\"true\"]) {\n  --_color-background: var(--odx-color-selected);\n}\n\n:host([aria-current=\"true\"]:hover) {\n  --_color-background: var(--odx-color-selected-hover);\n}\n\n:host([aria-current=\"true\"]:active),\n:host(:active) {\n  --_color-background: var(--odx-color-transparent-pressed);\n}\n\n:host::part(anchor):focus-visible {\n  outline-color: var(--odx-focus-ring-color);\n}\n\n:host([aria-disabled=\"true\"])::part(anchor) {\n  --_color-background: var(--odx-color-disabled-fill);\n  --_color-foreground: var(--odx-color-disabled-foreground);\n\n  cursor: not-allowed;\n}\n\n:host([size=\"lg\"]) {\n  --_icon-size: var(--odx-size-200);\n  --_text-size: var(--odx-typography-font-size-3);\n  --_line-height: var(--odx-size-100);\n  --_padding-block: var(--odx-size-50);\n  --_padding-inline: var(--odx-size-50);\n}\n\n:host([loading]:not([loading=\"false\"]))::part(anchor) {\n  color: transparent;\n}\n\n::slotted(*) {\n  flex: 0 0 auto;\n}\n\n::slotted(odx-icon) {\n  --size: var(--_icon-size);\n}\n\n::slotted(odx-avatar) {\n  --_size: var(--_icon-size);\n}\n\n::slotted([slot=\"end\"]) {\n  margin-inline-start: auto;\n}\n";
 
 export { styles as default };

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

@@ -1,5 +1,6 @@
 import { customElement } from '@odx/foundation';
 import { property } from 'lit/decorators.js';
+import '../button/index.js';
 import styles from './navigation-item.component.css.js';
 import { BaseButtonComponent } from '../button/base-button.js';
 

package/dist/components/option/index.js

@@ -0,0 +1 @@
+export { OdxOptionComponent } from './option.component.js';

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

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

package/dist/components/page/index.js

@@ -0,0 +1,2 @@
+export { OdxPageComponent } from './page.component.js';
+export { PageAlignment, PageLayout } from './page.models.js';

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

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

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

@@ -0,0 +1 @@
+export { OdxPageLayoutComponent } from './page-layout.component.js';

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

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

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

@@ -2,12 +2,14 @@ import { CustomElement, optionalSlot, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './page-layout.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 = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxPageLayoutComponent = class extends CustomElement {

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

@@ -0,0 +1 @@
+export { OdxRadioButtonComponent } from './radio-button.component.js';

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

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

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

@@ -2,12 +2,14 @@ import { CheckboxFormControl, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './radio-button.component.css.js';
 
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let OdxRadioButtonComponent = class extends CheckboxFormControl {

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

@@ -0,0 +1,2 @@
+export { OdxRadioGroupComponent } from './radio-group.component.js';
+export { RadioGroupVariant } from './radio-group.models.js';

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

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

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

@@ -0,0 +1 @@
+export { OdxRailNavigationComponent } from './rail-navigation.component.js';

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 {\n  --min-inline-size: 180px;\n  --max-inline-size: 240px;\n\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n  padding-inline: var(--odx-size-50);\n  padding-block: var(--odx-size-150);\n  gap: var(--odx-size-75);\n  max-inline-size: var(--max-inline-size);\n  min-inline-size: var(--min-inline-size);\n  transition: var(--odx-transition-default);\n  transition-property: min-inline-size, max-inline-size;\n}\n\n.toggle-control {\n  margin-block-start: auto;\n}\n\n.toggle-icon {\n  transition: var(--odx-transition-default);\n}\n\n:host([collapsed]:not([collapsed=\"false\"])) {\n  --min-inline-size: var(--odx-size-400);\n  --max-inline-size: var(--odx-size-400);\n\n  .toggle-icon {\n    transform: rotateY(-180deg);\n  }\n}\n";
 
 export { styles as default };

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

@@ -1,6 +1,7 @@
 import { IsTranslatable, CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
+import '../navigation-item/index.js';
 import styles from './rail-navigation.component.css.js';
 import { NavigationItemSize } from '../navigation-item/navigation-item.models.js';
 import { OdxNavigationItemComponent } from '../navigation-item/navigation-item.component.js';

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

@@ -0,0 +1,3 @@
+export { OdxSearchBarComponent } from './search-bar.component.js';
+export { SearchEvent } from './search-bar.events.js';
+export { SearchBarBehavior } from './search-bar.models.js';