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

package/dist/cdk/drag-drop/drag-events.js

@@ -0,0 +1 @@
+

package/dist/cdk/drag-drop/is-draggable.js

@@ -2,12 +2,13 @@ import { dedupeMixin } from '@odx/foundation';
 import { property } from 'lit/decorators.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;
 };
 const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
@@ -35,7 +36,7 @@ const IsDraggable = dedupeMixin((superClass) => {
   }
   __decorateClass([
     property({ type: Boolean })
-  ], IsDraggableElement.prototype, "dragDisabled");
+  ], IsDraggableElement.prototype, "dragDisabled", 2);
   return IsDraggableElement;
 });
 

package/dist/cdk/main.js

@@ -1,3 +1,4 @@
+import './drag-drop/drag-events.js';
 export { DragController } from './drag-drop/drag.controller.js';
 export { IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, isDraggableElement } from './drag-drop/is-draggable.js';
 export { PopoverHost } from './popover/popover-host.mixin.js';

package/dist/cdk/popover/popover-host.mixin.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
+const styles = ":host {\n  --_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));\n  --_popover-offset: var(--odx-size-50);\n\n  background-color: transparent;\n  opacity: 0;\n  padding: var(--_popover-offset);\n  position-try: flip-block, flip-inline, flip-inline flip-block;\n  transform: translate(var(--_popover-transition-offset-x), var(--_popover-transition-offset-y));\n  transition: opacity var(--_popover-transition), transform var(--_popover-transition) allow-discrete, overlay var(--_popover-transition) allow-discrete,\n    display var(--_popover-transition) allow-discrete;\n  max-block-size: var(--_popover-max-block-size, 100%);\n  max-inline-size: var(--_popover-max-inline-size, 100%);\n  margin: 0;\n  top: var(--_popover-position-y);\n  left: var(--_popover-position-x);\n}\n\n:host(:popover-open) {\n  display: flex;\n  opacity: 1;\n  transform: translate(0);\n\n  @starting-style {\n    opacity: 0;\n    transform: translate(var(--_popover-transition-offset-x), var(--_popover-transition-offset-y));\n  }\n}\n\n:host,\n:host([placement^=\"top\"]) {\n  --_popover-transition-offset-x: 0;\n  --_popover-transition-offset-y: calc(-1 * var(--_popover-offset));\n}\n\n:host([placement^=\"right\"]) {\n  --_popover-transition-offset-x: var(--_popover-offset);\n  --_popover-transition-offset-y: 0;\n}\n\n:host([placement^=\"bottom\"]) {\n  --_popover-transition-offset-x: 0;\n  --_popover-transition-offset-y: var(--_popover-offset);\n}\n\n:host([placement^=\"left\"]) {\n  --_popover-transition-offset-x: calc(-1 * var(--_popover-offset));\n  --_popover-transition-offset-y: 0;\n}\n";
 
 export { styles as default };

package/dist/cdk/popover/popover-host.mixin.js

@@ -7,12 +7,13 @@ import { PopoverPlacementOptions } from './popover.models.js';
 import { computePopoverPlacement } from './popover.utils.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;
 };
 const PopoverHost = dedupeMixin((superClass) => {
@@ -99,16 +100,16 @@ const PopoverHost = dedupeMixin((superClass) => {
   }
   __decorateClass([
     state()
-  ], PopoverHostClass.prototype, "isOpen");
+  ], PopoverHostClass.prototype, "isOpen", 2);
   __decorateClass([
     state()
-  ], PopoverHostClass.prototype, "referenceElement");
+  ], PopoverHostClass.prototype, "referenceElement", 2);
   __decorateClass([
     property({ reflect: true })
-  ], PopoverHostClass.prototype, "anchor");
+  ], PopoverHostClass.prototype, "anchor", 2);
   __decorateClass([
     property({ reflect: true })
-  ], PopoverHostClass.prototype, "placement");
+  ], PopoverHostClass.prototype, "placement", 2);
   return PopoverHostClass;
 });
 

package/dist/cdk/popover/popover.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--color-background: transparent;--color-foreground: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+const styles = ":host {\n  --color-background: transparent;\n  --color-foreground: inherit;\n  --min-block-size: inherit;\n  --max-block-size: 100%;\n  --min-inline-size: inherit;\n  --max-inline-size: inherit;\n\n  --_arrow-size: var(--odx-size-50);\n  --_outer-padding: var(--odx-size-75);\n  --_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));\n  --_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));\n\n  display: flex;\n  background-color: transparent;\n}\n\n:host::part(arrow),\n:host::part(content) {\n  background-color: var(--color-background);\n}\n\n:host::part(content) {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  inset-block-start: 0 !important;\n  inset-inline-start: 0 !important;\n  block-size: fit-content;\n  min-block-size: var(--min-block-size);\n  max-block-size: var(--max-block-size);\n  min-inline-size: var(--min-inline-size);\n  max-inline-size: var(--max-inline-size);\n  box-shadow: var(--_shadow);\n  color: var(--color-foreground);\n  padding: var(--_outer-padding);\n  border-radius: var(--_border-radius);\n  z-index: 2;\n  overflow: auto;\n}\n\n:host::part(arrow) {\n  border-radius: var(--odx-border-radius-sm);\n  position: absolute;\n  inline-size: var(--_arrow-size);\n  block-size: var(--_arrow-size);\n  z-index: 3;\n  inset: 0;\n  transform: translate3d(var(--_popover-arrow-position-x), var(--_popover-arrow-position-y), 0) rotate(45deg);\n}\n";
 
 export { styles as default };

package/dist/components/accordion/accordion-header.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([disabled]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([disabled]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+const styles = ":host {\n  --_color-background: var(--odx-palette-transparent);\n  --_color-foreground: var(--odx-color-foreground);\n\n  display: flex;\n  user-select: none;\n  place-items: center;\n  cursor: pointer;\n  gap: var(--odx-size-50);\n  min-block-size: var(--odx-size-225);\n  border-radius: var(--odx-border-radius-controls);\n  background-color: var(--_color-background);\n  margin-block: var(--odx-size-37);\n  padding-block: var(--odx-size-25);\n  padding-inline: var(--odx-size-50);\n  color: var(--_color-foreground);\n  transition: var(--odx-transition-default);\n  transition-property: background-color, color, outline-color;\n  outline: var(--odx-focus-ring-outline);\n}\n\n.indicator {\n  --size: var(--odx-size-150);\n\n  display: block;\n  margin-inline-start: auto;\n  aspect-ratio: 1;\n  transition: var(--odx-transition-slow);\n  transition-property: transform;\n}\n\n:host(:not([disabled]):hover) {\n  --_color-background: var(--odx-color-transparent-hover);\n}\n\n:host(:not([disabled]):active) {\n  --_color-background: var(--odx-color-transparent-pressed);\n}\n\n:host([aria-disabled=\"true\"]) {\n  --_color-foreground: var(--odx-color-disabled-foreground);\n\n  cursor: default;\n}\n\n:host([aria-expanded=\"true\"]) {\n  .indicator {\n    transform: rotateX(180deg);\n  }\n}\n\n:host(:focus-visible) {\n  outline-color: var(--odx-focus-ring-color);\n}\n";
 
 export { styles as default };

package/dist/components/accordion/accordion-panel.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}odx-separator{margin:0}.container{overflow:hidden}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12);transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+const styles = ":host {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: var(--odx-transition-slow);\n}\n\nodx-separator {\n  margin: 0;\n}\n\n.container {\n  overflow: hidden;\n}\n\n.content {\n  padding: var(--odx-size-50);\n  padding-block-start: var(--odx-size-12);\n  transition: var(--odx-transition-slow);\n  transition-property: opacity, transform, visibility;\n}\n\n:host(:last-of-type) odx-separator {\n  display: none;\n}\n\n:host([aria-hidden=\"true\"]) {\n  grid-template-rows: 0fr;\n\n  .content {\n    opacity: 0;\n    transform: translateY(var(--odx-size-25));\n    visibility: hidden;\n  }\n}\n\n:host ::slotted(*) {\n  display: block;\n  background-color: transparent;\n}\n";
 
 export { styles as default };

package/dist/components/accordion/accordion-panel.component.js

@@ -2,12 +2,14 @@ import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './accordion-panel.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 OdxAccordionPanelComponent = class extends CustomElement {

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:block}:host-context(odx-accordion-panel){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+const styles = ":host {\n  display: block;\n}\n\n:host-context(odx-accordion-panel) {\n  margin-block: calc(-1 * var(--odx-size-37));\n  margin-inline-end: calc(-1 * var(--odx-size-50));\n}\n";
 
 export { styles as default };

package/dist/components/accordion/index.js

@@ -0,0 +1,3 @@
+export { OdxAccordionHeaderComponent } from './accordion-header.component.js';
+export { OdxAccordionPanelComponent } from './accordion-panel.component.js';
+export { OdxAccordionComponent } from './accordion.component.js';

package/dist/components/area-header/area-header.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;justify-content:space-between;align-items:center;gap:var(--odx-size-150);padding:var(--odx-size-75)}.content{margin-inline-end:auto}::slotted(odx-avatar){flex:0 0 auto}";
+const styles = ":host {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--odx-size-150);\n  padding: var(--odx-size-75);\n}\n\n.content {\n  margin-inline-end: auto;\n}\n\n::slotted(odx-avatar) {\n  flex: 0 0 auto;\n}\n";
 
 export { styles as default };

package/dist/components/area-header/index.js

@@ -0,0 +1,2 @@
+export { OdxAreaHeaderComponent } from './area-header.component.js';
+export { AreaHeaderSize, AreaHeaderVariant } from './area-header.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
+const styles = ":host {\n  --_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));\n  --_color-foreground: inherit;\n  --_border-radius: 50%;\n\n  display: flex;\n  flex-direction: column;\n  place-content: center;\n  place-items: center;\n  position: relative;\n  user-select: none;\n  vertical-align: middle;\n  overflow: clip;\n  block-size: var(--_size);\n  inline-size: var(--_size);\n  margin-block: var(--_spacing);\n  font-size: var(--_font-size);\n  border-radius: var(--_border-radius);\n  background-color: var(--_color-background);\n  color: var(--_color-foreground);\n  transition: var(--odx-transition-default);\n  transition-property: background-color, outline-color, box-shadow;\n}\n\n:host-context(odx-avatar-group[variant=\"rectangle\"]),\n:host([variant=\"rectangle\"]) {\n  --_border-radius: var(--odx-border-radius-sm);\n}\n\n:host-context(odx-avatar-group[size=\"sm\"]),\n:host([size=\"sm\"]) {\n  --_size: var(--odx-size-150);\n  --_spacing: 0;\n  --_font-size: var(--odx-typography-font-size-1);\n}\n\n:host,\n:host-context(odx-avatar-group[size=\"md\"]),\n:host([size=\"md\"]) {\n  --_size: var(--odx-size-225);\n  --_spacing: var(--odx-size-25);\n  --_font-size: var(--odx-typography-font-size-3);\n}\n\n:host-context(odx-avatar-group[size=\"lg\"]),\n:host([size=\"lg\"]) {\n  --_size: var(--odx-avatar-lg-size, var(--odx-size-300));\n  --_spacing: var(--odx-size-37);\n  --_font-size: var(--odx-typography-font-size-5);\n}\n\n:host-context(odx-avatar-group[size=\"xl\"]),\n:host([size=\"xl\"]) {\n  --_size: var(--odx-avatar-lg-size, var(--odx-size-600));\n  --_spacing: 0;\n  --_font-size: var(--odx-typography-font-size-7);\n}\n\n:has(img) {\n  --odx-avatar-background: red;\n}\n\n::slotted(img) {\n  object-fit: cover;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n::slotted(odx-icon) {\n  font-size: inherit;\n}\n";
 
 export { styles as default };

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+export { OdxAvatarComponent } from './avatar.component.js';
+export { AvatarSize, AvatarVariant } from './avatar.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
+const styles = ":host {\n  display: flex;\n  padding-inline: var(--odx-size-25);\n  width: min-content;\n}\n\n::slotted(odx-avatar) {\n  flex: 0 0 auto;\n  z-index: 1;\n  border: var(--odx-border-width-thin) solid var(--odx-color-separator);\n}\n\n::slotted(odx-avatar:not(:first-of-type)) {\n  margin-inline-start: calc(-0.33 * var(--_size));\n}\n\n:host(:is([size=\"lg\"], [size=\"xl\"])) {\n  gap: var(--odx-size-50);\n}\n";
 
 export { styles as default };

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

@@ -0,0 +1 @@
+export { OdxAvatarGroupComponent } from './avatar-group.component.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-color-surface);--_color-foreground: var(--odx-color-text);display:inline-block;line-height:0}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}";
+const styles = ":host {\n  --_color-background: var(--odx-color-surface);\n  --_color-foreground: var(--odx-color-text);\n\n  display: inline-block;\n  line-height: 0;\n}\n\n.content {\n  --_font-size: var(--odx-typography-font-size-1);\n\n  block-size: var(--odx-size-100);\n  line-height: var(--odx-size-100);\n  min-inline-size: var(--odx-size-100);\n  border-radius: var(--odx-border-radius-circle);\n  background-color: var(--_color-background);\n  color: var(--_color-foreground);\n  cursor: default;\n  user-select: none;\n  font-weight: var(--odx-typography-font-weight-medium);\n  padding-inline: var(--odx-size-37);\n  text-align: center;\n}\n\n:host([variant=\"primary\"]) {\n  --_color-background: var(--odx-color-primary-rest);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n\n:host,\n:host([variant=\"neutral\"]) {\n  --_color-background: var(--odx-experience-color-secondary-rest);\n  --_color-foreground: var(--odx-experience-color-secondary-foreground);\n}\n\n:host([variant=\"accent\"]) {\n  --_color-background: var(--odx-color-highlight-rest);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n\n:host([variant=\"success\"]) {\n  --_color-background: var(--odx-color-success-rest);\n  --_color-foreground: var(--odx-color-foreground-dark);\n}\n\n:host([variant=\"warning\"]) {\n  --_color-background: var(--odx-color-warning-rest);\n  --_color-foreground: var(--odx-color-foreground-dark);\n}\n\n:host([variant=\"danger\"]) {\n  --_color-background: var(--odx-color-danger-rest);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n";
 
 export { styles as default };

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export { OdxBadgeComponent } from './badge.component.js';
+export { BadgeVariant } from './badge.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:contents}.separator{--size: var(--odx-size-75);color:var(--odx-color-foreground-muted);margin:var(--odx-size-37)}:host([aria-hidden=\"true\"]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-muted)!important}::slotted(*){margin:0}";
+const styles = ":host {\n  display: contents;\n}\n\n.separator {\n  --size: var(--odx-size-75);\n\n  color: var(--odx-color-foreground-muted);\n  margin: var(--odx-size-37);\n}\n\n:host([aria-hidden=\"true\"]) {\n  display: none;\n}\n\n:host([aria-current=\"page\"]) ::slotted(odx-link) {\n  color: var(--odx-color-foreground-muted) !important;\n}\n\n::slotted(*) {\n  margin: 0;\n}\n";
 
 export { styles as default };

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

@@ -1,9 +1,11 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
+import '../link/index.js';
 import styles from './breadcrumb-item.component.css.js';
 import { OdxLinkComponent } from '../link/link.component.js';
 
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -12,7 +14,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/breadcrumb/breadcrumb.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
+const styles = ":host {\n  --_gap: var(--odx-size-37);\n\n  display: flex;\n  column-gap: var(--_gap);\n  flex-wrap: wrap;\n  cursor: default;\n  place-items: center;\n  padding-block: var(--odx-size-37);\n  padding-inline: var(--odx-size-75);\n  min-block-size: var(--odx-size-225);\n}\n\n::slotted(odx-breadcrumb-item) {\n  gap: var(--_gap);\n}\n";
 
 export { styles as default };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,2 @@
+export { OdxBreadcrumbItemComponent } from './breadcrumb-item.component.js';
+export { OdxBreadcrumbComponent } from './breadcrumb.component.js';

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

@@ -2,6 +2,7 @@ import { optionalAttr, requestUpdateOnAriaChange } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import '../link/index.js';
 import { BaseLink } from '../link/base-link.js';
 
 var __defProp = Object.defineProperty;

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);inline-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-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);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
+const styles = ":host {\n  --_color-stroke: transparent;\n  --_color-stroke-hover: transparent;\n  --_color-stroke-pressed: transparent;\n\n  --_block-size: var(--odx-size-225);\n  --_icon-size: var(--odx-typography-font-size-5);\n  --_text-size: var(--odx-typography-font-size-3);\n  --_spinner-size: var(--odx-size-50);\n  --_padding-block: var(--odx-size-37);\n  --_padding-inline: var(--odx-size-75);\n  --_margin-block: var(--odx-size-37);\n  --_margin-icon: calc(-0.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));\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  margin-block: var(--_margin-block);\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  place-content: 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  text-decoration: none;\n  font: inherit;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: 0;\n  gap: inherit;\n  text-transform: inherit;\n  padding-block: calc(var(--_padding-block));\n  padding-inline: var(--_padding-inline);\n  border: var(--odx-border-width-thin) solid var(--_color-stroke);\n  transition: var(--odx-transition-reduced);\n  transition-property: background-color, border-color, color, opacity, outline-color, transform;\n  background-color: var(--_color-background, transparent);\n  color: var(--_color-foreground);\n  font-size: var(--_text-size);\n  gap: var(--_padding-inline);\n  font-weight: var(--odx-typography-font-weight-medium);\n  outline: var(--odx-focus-ring-outline);\n  outline-offset: var(--odx-focus-ring-offset);\n}\n\n.spinner {\n  --_size: var(--_spinner-size);\n\n  color: var(--_color-foreground);\n  position: absolute;\n  inset: var(--odx-border-width-thin);\n}\n\n:host::part(anchor)::-moz-focus-inner {\n  padding: 0;\n  border: 0;\n}\n\n:host(:hover)::part(anchor) {\n  --_color-background: var(--_color-background-hover);\n  --_color-stroke: var(--_color-stroke-hover);\n}\n\n:host(:active)::part(anchor) {\n  --_color-background: var(--_color-background-pressed);\n  --_color-stroke: var(--_color-stroke-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  --_color-stroke: var(--odx-color-disabled-stroke);\n\n  cursor: not-allowed;\n}\n\n:host([variant=\"primary\"]) {\n  --_color-background: var(--odx-color-primary-rest);\n  --_color-background-hover: var(--odx-color-primary-hover);\n  --_color-background-pressed: var(--odx-color-primary-pressed);\n  --_color-foreground: var(--odx-color-foreground-inverse);\n}\n\n:host([variant=\"highlight\"]) {\n  --_color-background: var(--odx-color-highlight-rest);\n  --_color-background-hover: var(--odx-color-highlight-hover);\n  --_color-background-pressed: var(--odx-color-highlight-pressed);\n  --_color-foreground: var(--odx-color-foreground-inverse);\n}\n\n:host,\n:host([variant=\"secondary\"]) {\n  --_color-background: var(--odx-experience-color-secondary-rest);\n  --_color-background-hover: var(--odx-experience-color-secondary-hover);\n  --_color-background-pressed: var(--odx-experience-color-secondary-pressed);\n  --_color-foreground: var(--odx-experience-color-secondary-foreground);\n}\n\n:host([variant=\"ghost\"]) {\n  --_color-background: var(--odx-color-transparent);\n  --_color-foreground: var(--odx-color-foreground);\n  --_color-background-hover: var(--odx-color-transparent-hover);\n  --_color-background-pressed: var(--odx-color-transparent-pressed);\n}\n\n:host([variant=\"danger\"]) {\n  --_color-background: var(--odx-color-danger-rest);\n  --_color-background-hover: var(--odx-color-danger-hover);\n  --_color-background-pressed: var(--odx-color-danger-pressed);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n\n:host([variant=\"success\"]) {\n  --_color-background: var(--odx-color-success-rest);\n  --_color-background-hover: var(--odx-color-success-hover);\n  --_color-background-pressed: var(--odx-color-success-pressed);\n  --_color-foreground: var(--odx-color-foreground-dark);\n}\n\n:host([variant=\"confirmation\"]) {\n  --_color-background: var(--odx-color-confirmation-rest);\n  --_color-background-hover: var(--odx-color-confirmation-hover);\n  --_color-background-pressed: var(--odx-color-confirmation-pressed);\n  --_color-foreground: var(--odx-color-foreground-dark);\n}\n\n:host([size=\"sm\"]) {\n  --_block-size: var(--odx-size-150);\n  --_padding-inline: var(--odx-size-50);\n  --_text-size: var(--odx-typography-font-size-2);\n  --_icon-size: var(--odx-size-100);\n  --_margin-block: 0;\n  --_spinner-size: var(--odx-size-37);\n}\n\n:host([size=\"lg\"]) {\n  --_block-size: var(--odx-size-300);\n  --_padding-inline: var(--odx-size-100);\n  --_text-size: var(--odx-typography-font-size-4);\n  --_icon-size: var(--odx-typography-font-size-6);\n  --_margin-block: 0;\n}\n\n:host([loading]:not([loading=\"false\"]))::part(anchor) {\n  color: transparent;\n}\n\nodx-icon,\n::slotted(odx-icon) {\n  --size: var(--_icon-size);\n  margin-inline: var(--_margin-icon);\n}\n\n:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor) {\n  border-inline-end-width: 0;\n}\n\n:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor) {\n  border-block-end-width: 0;\n}\n";
 
 export { styles as default };

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

@@ -19,7 +19,7 @@ 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _internals, _OdxButtonComponent_instances, handleClick_fn;

package/dist/components/button/index.js

@@ -0,0 +1,3 @@
+export { BaseButtonComponent } from './base-button.js';
+export { OdxButtonComponent } from './button.component.js';
+export { ButtonSize, ButtonVariant } from './button.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
+const styles = ":host {\n  --_gap: var(--odx-size-75);\n  --_direction: row;\n\n  display: inline-flex;\n  align-items: center;\n  flex-direction: var(--_direction);\n  gap: var(--_gap);\n}\n\n::slotted(:is(odx-button, odx-icon-button, odx-toggle-button)) {\n  margin: 0;\n}\n\n:host([block]) {\n  display: flex;\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button)) {\n    width: 100%;\n  }\n}\n\n:host([connected]) {\n  --_gap: var(--odx-size-px);\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):not(:first-child):not(:last-child)) {\n    border-radius: 0;\n  }\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):is(:hover, :focus-within)) {\n    z-index: 1;\n  }\n}\n\n:host([vertical]) {\n  --_direction: column;\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button)) {\n    margin-block: 0;\n  }\n}\n\n:host([connected]:not([vertical])) {\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):first-child:not(:last-child)) {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):last-child:not(:first-child)) {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n}\n\n:host([connected][vertical]) {\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):first-child) {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  ::slotted(:is(odx-button, odx-icon-button, odx-toggle-button):last-child) {\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n";
 
 export { styles as default };

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

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

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+const styles = ":host {\n  --_card-padding: var(--odx-size-150);\n\n  display: grid;\n  place-content: flex-start;\n  background-color: var(--odx-color-background-main);\n  grid-template-columns: 1fr auto;\n  border-radius: var(--odx-border-radius-md);\n  padding: var(--_card-padding);\n  overflow: clip;\n  max-width: 100%;\n  grid-template-areas:\n    \"image image\"\n    \"avatar avatar\"\n    \"title header-actions\"\n    \"content content\"\n    \"footer footer\";\n}\n\n.header,\n.title {\n  display: flex;\n  place-items: center;\n  overflow: hidden;\n  min-block-size: var(--odx-size-225);\n  margin-block-end: var(--odx-size-50);\n}\n\n.title {\n  grid-area: title;\n}\n\n.header {\n  grid-area: header-actions;\n}\n\n.avatar {\n  display: flex;\n  place-items: flex-end;\n  grid-area: avatar;\n  margin-block-start: calc(-1 * var(--odx-size-50));\n}\n\n.image {\n  grid-area: image;\n  margin: calc(-1 * var(--_card-padding));\n  margin-block-end: var(--odx-size-150);\n  position: relative;\n}\n\n.image::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--odx-color-transparent-hover);\n  opacity: 0;\n  pointer-events: none;\n  transition: var(--odx-transition-default);\n  backdrop-filter: blur(var(--odx-elevation-blur));\n}\n\n:host::part(content) {\n  grid-area: content;\n}\n\n:host::part(footer) {\n  grid-area: footer;\n}\n\n[part=\"image-container\"] + [part=\"avatar-container\"] {\n  block-size: 0;\n}\n\nslot[name=\"image\"]::slotted(*) {\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  object-fit: cover;\n  aspect-ratio: 16 / 9;\n  user-select: none;\n  pointer-events: none;\n}\n\nslot[name=\"avatar\"]::slotted(*) {\n  margin: 0;\n}\n\n:host(:hover) {\n  cursor: pointer;\n}\n\n:host(:hover) .image::after {\n  opacity: 1;\n}\n";
 
 export { styles as default };

package/dist/components/card/card.component.js

@@ -2,12 +2,14 @@ import { CanBeDisabled, CustomElement, optionalSlot, customElement } from '@odx/
 import { html } from 'lit';
 import styles from './card.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 OdxCardComponent = class extends CanBeDisabled(CustomElement) {

package/dist/components/card/index.js

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

package/dist/components/checkbox/checkbox.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-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);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-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
+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-color-foreground: var(--odx-palette-transparent);\n  --_label-color-foreground: var(--odx-color-text);\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-controls);\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  color: var(--_indicator-color-foreground);\n  transition-property: background-color, border-color;\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(:not(:empty)) .indicator {\n  margin-inline-end: var(--odx-size-75);\n}\n\n:host(:empty) .content {\n  display: none;\n}\n\n:host(:hover) {\n  --_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);\n  --_indicator-color-background: var(--odx-color-selection-control-fill-hover);\n}\n\n:host(:focus-visible) {\n  outline-color: var(--odx-focus-ring-color);\n}\n\n:host(:is([aria-checked=\"true\"], [aria-checked=\"mixed\"])) {\n  --_indicator-color-background: var(--odx-color-selection-control-fill-selected);\n  --_indicator-color-foreground: var(--odx-color-foreground-light);\n  --_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);\n}\n\n:host(:is([aria-checked=\"true\"], [aria-checked=\"mixed\"]):not(:is([aria-disabled], [aria-readonly])):hover) {\n  --_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover);\n}\n\n:host([aria-disabled=\"true\"]) {\n  --_indicator-color-background: var(--odx-color-disabled-fill);\n  --_indicator-color-foreground: var(--odx-palette-transparent);\n  --_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);\n  --_label-color-foreground: var(--odx-color-disabled-foreground);\n\n  cursor: not-allowed;\n}\n\n:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"], [aria-checked=\"mixed\"])) {\n  --_indicator-color-background: var(--odx-color-disabled-fill-selected);\n  --_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);\n  --_indicator-color-stroke: var(--_indicator-color-background);\n}\n\n:host([aria-readonly=\"true\"]) {\n  --_indicator-color-background: var(--odx-color-selection-control-fill-readonly);\n  --_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);\n\n  cursor: default;\n}\n\n:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"], [aria-checked=\"mixed\"])) {\n  --_indicator-color-foreground: var(--odx-color-foreground);\n}\n";
 
 export { styles as default };

package/dist/components/checkbox/index.js

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

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;flex-direction:column}::slotted(:is(odx-checkbox,odx-switch)){width:max-content}:host([variant=\"list\"]) ::slotted(:is(odx-checkbox,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-checkbox,odx-switch):last-of-type){border-block-end:none}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}";
+const styles = ":host {\n  display: flex;\n  flex-direction: column;\n}\n\n::slotted(:is(odx-checkbox, odx-switch)) {\n  width: max-content;\n}\n\n:host([variant=\"list\"]) ::slotted(:is(odx-checkbox, 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-checkbox, odx-switch):last-of-type) {\n  border-block-end: none;\n}\n\n::slotted(odx-checkbox-group) {\n  margin-inline-start: var(--odx-size-75);\n}\n";
 
 export { styles as default };

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

@@ -0,0 +1,2 @@
+export { OdxCheckboxGroupComponent } from './checkbox-group.component.js';
+export { CheckboxGroupVariant } from './checkbox-group.models.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
+const styles = ":host {\n  --_color-background: var(--odx-color-neutral-rest);\n  --_color-background-hover: var(--odx-color-neutral-hover);\n  --_color-foreground: var(--odx-color-neutral-text);\n  --_font-size: var(--odx-font-size-text-sm);\n  --_block-size: var(--odx-size-150);\n  --_border-radius: var(--_block-size);\n  --_padding-inline: var(--odx-size-50);\n\n  display: inline-flex;\n  place-items: center;\n  background-color: var(--_color-background);\n  cursor: inherit;\n  padding-inline: var(--_padding-inline);\n  gap: var(--odx-size-25);\n  block-size: var(--_block-size);\n  border-radius: var(--_border-radius);\n  color: var(--_color-foreground);\n  outline-offset: var(--odx-focus-ring-offset);\n}\n\n:host,\n.content,\n.action {\n  transition: var(--odx-transition-reduced);\n  transition-property: color background-color outline-color;\n}\n\n:host,\n.action {\n  outline: var(--odx-focus-ring-outline);\n}\n\n:host(:focus-visible),\n.action:focus-visible {\n  outline-color: var(--odx-focus-ring-color);\n}\n\n.content {\n  min-inline-size: var(--odx-size-150);\n  user-select: none;\n  text-align: center;\n}\n\n.action,\n::slotted(odx-icon) {\n  font-size: var(--odx-font-size-text-md);\n  block-size: var(--_block-size);\n  inline-size: var(--_block-size);\n  color: inherit;\n  outline-offset: calc(-1 * var(--odx-focus-ring-offset));\n}\n\n.action {\n  background-color: var(--_color-background);\n  border: none;\n  border-radius: var(--_border-radius);\n  cursor: pointer;\n  margin-inline-end: calc(-1 * var(--_padding-inline));\n  padding: 0;\n}\n\n.action:hover {\n  background-color: var(--_color-background-hover);\n}\n\n:host([variant=\"neutral\"]) {\n  --_color-background: var(--odx-color-neutral-rest);\n  --_color-background-hover: var(--odx-color-neutral-hover);\n  --_color-foreground: var(--odx-color-foreground);\n}\n\n:host([variant=\"primary\"]) {\n  --_color-background: var(--odx-color-primary-rest);\n  --_color-background-hover: var(--odx-color-primary-hover);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n\n:host([variant=\"highlight\"]) {\n  --_color-background: var(--odx-color-highlight-rest);\n  --_color-background-hover: var(--odx-color-highlight-hover);\n  --_color-foreground: var(--odx-color-foreground-light);\n}\n\n:host([variant=\"success\"]) {\n  --_color-background: var(--odx-color-success-rest);\n  --_color-background-hover: var(--odx-color-success-hover);\n  --_color-foreground: var(--odx-color-success-text);\n}\n\n:host([variant=\"warning\"]) {\n  --_color-background: var(--odx-color-warning-rest);\n  --_color-background-hover: var(--odx-color-warning-hover);\n  --_color-foreground: var(--odx-color-warning-text);\n}\n\n:host([variant=\"danger\"]) {\n  --_color-background: var(--odx-color-danger-rest);\n  --_color-background-hover: var(--odx-color-danger-hover);\n  --_color-foreground: var(--odx-color-foreground-light);\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  .action {\n    pointer-events: none;\n  }\n}\n\n:host([interactive]:not([interactive=\"false\"])) {\n  cursor: pointer;\n}\n\n:host([interactive]:not([interactive=\"false\"]):hover) {\n  --_color-background: var(--_color-background-hover);\n}\n\n:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])) {\n  --_color-background: var(--odx-color-disabled-fill);\n  cursor: not-allowed;\n}\n";
 
 export { styles as default };

package/dist/components/chip/chip.component.js

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

package/dist/components/chip/index.js

@@ -0,0 +1,2 @@
+export { OdxChipComponent } from './chip.component.js';
+export { ChipVariant } from './chip.models.js';

package/dist/components/content-box/content-box.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
+const styles = ":host {\n  display: block;\n  padding: var(--odx-size-75);\n  background-color: var(--odx-color-background-main);\n}\n\n::slotted(:is([slot=\"header\"], [slot=\"footer\"])) {\n  margin-inline: calc(-1 * var(--odx-size-75));\n}\n";
 
 export { styles as default };

package/dist/components/content-box/content-box.component.js

@@ -2,12 +2,14 @@ import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './content-box.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 OdxContentBoxComponent = class extends CustomElement {

package/dist/components/content-box/index.js

@@ -0,0 +1 @@
+export { OdxContentBoxComponent } from './content-box.component.js';

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

@@ -1,3 +1,3 @@
-const styles = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
+const styles = ":host {\n  --_popover-offset: var(--odx-size-37);\n}\n\nodx-popover {\n  --color-background: var(--odx-color-background-main);\n}\n\n:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])) {\n  odx-popover {\n    --min-inline-size: var(--_reference-inline-size, 0);\n  }\n}\n";
 
 export { styles as default };

package/dist/components/dropdown/index.js

@@ -0,0 +1,2 @@
+export { OdxDropdownComponent } from './dropdown.component.js';
+export { DropdownPlacement } from './dropdown.models.js';

package/dist/components/format/format.component.js

@@ -3,12 +3,13 @@ import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.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 FormatComponent extends IsLocalized(CustomElement) {
@@ -28,6 +29,6 @@ class FormatComponent extends IsLocalized(CustomElement) {
 }
 __decorateClass([
   property()
-], FormatComponent.prototype, "fallbackValue");
+], FormatComponent.prototype, "fallbackValue", 2);
 
 export { FormatComponent };

package/dist/components/format/index.js

@@ -0,0 +1,4 @@
+export { OdxFormatBytesComponent } from './format-bytes.component.js';
+export { OdxFormatDateComponent } from './format-date.component.js';
+export { OdxFormatNumberComponent } from './format-number.component.js';
+export { OdxRelativeTimeComponent } from './relative-time.component.js';

package/dist/components/format/relative-time.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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
 let OdxRelativeTimeComponent = class extends FormatComponent {

package/dist/components/header/header-actions.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}";
+const styles = ":host {\n  display: flex;\n  block-size: 100%;\n  gap: var(--odx-size-75);\n}\n\n::slotted(odx-separator) {\n  --block-space: var(--odx-size-50);\n  --inline-space: 0;\n}\n";
 
 export { styles as default };

package/dist/components/header/header-actions.component.js

@@ -1,12 +1,14 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import styles from './header-actions.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 OdxHeaderActionsComponent = class extends CustomElement {

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

@@ -1,3 +1,3 @@
-const styles = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
+const styles = ":host {\n  display: flex;\n  block-size: var(--odx-size-300);\n  background-color: var(--odx-color-foreground-light);\n  column-gap: var(--odx-size-150);\n  padding-inline: var(--odx-size-150);\n  place-items: center;\n  box-shadow: 0 0 0 100vmax var(--odx-color-foreground-light);\n  clip-path: inset(0 -100vmax);\n}\n\nodx-logo {\n  flex: 0 0 auto;\n}\n\n::slotted(odx-title) {\n  width: max-content;\n}\n\n::slotted(odx-main-menu-button) {\n  margin-inline-end: calc(-1 * var(--odx-size-75));\n}\n\n::slotted(odx-header-actions) {\n  margin-inline-start: auto;\n}\n\n@media screen and (max-width: 600px) {\n  odx-logo {\n    display: none;\n  }\n}\n";
 
 export { styles as default };

package/dist/components/header/header.component.js

@@ -1,6 +1,7 @@
 import { CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
+import '../title/index.js';
 import styles from './header.component.css.js';
 import { TitleSize } from '../title/title.models.js';
 import { OdxTitleComponent } from '../title/title.component.js';

package/dist/components/header/index.js

@@ -0,0 +1,2 @@
+export { OdxHeaderActionsComponent } from './header-actions.component.js';
+export { OdxHeaderComponent } from './header.component.js';