@odx/foundation 0.1.0-alpha.26 → 0.1.0-alpha.28

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{--_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([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):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)}";
 
 export { styles as default };

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

@@ -53,7 +53,7 @@ let OdxAccordionHeaderComponent = class extends WithAriaControls(CustomElement)
         <odx-text ?emphasized=${this.expanded}>
           <slot></slot>
         </odx-text>
-        <slot name="end"></slot>
+        <slot name="suffix"></slot>
       </div>
       <odx-icon class="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
     `;

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

@@ -16,11 +16,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 let OdxAreaHeaderComponent = class extends CustomElement {
   render() {
     return html`
-      <slot name="start"></slot>
+      <slot name="prefix"></slot>
       <div class="content">
         <slot></slot>
       </div>
-      <slot name="end"></slot>
+      <slot name="suffix"></slot>
     `;
   }
 };

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-context(odx-avatar-group),:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-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-context(odx-avatar-group[size=\"lg\"]),:host([size=\"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-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:host-context(odx-button){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}:host-context(odx-button[size=\"sm\"]){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}:host-context(odx-button[size=\"lg\"]){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
 
 export { styles as default };

package/dist/components/button/base-button.d.ts

@@ -14,10 +14,6 @@ declare const BaseButtonComponent_base: import('@odx/foundation').Constructor<im
  * @slot - Contains button text
  */
 export declare class BaseButtonComponent extends BaseButtonComponent_base {
-    /**
-     * The type of the button.
-     */
-    type: 'button' | 'submit' | 'reset';
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
     protected renderButton(): TemplateResult<1>;

package/dist/components/button/base-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,wBAA0B;IACjE;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;cAE5B,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;IAWlD,SAAS,CAAC,YAAY;CAgBvB"}
+{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,wBAA0B;cAC9C,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;IAWlD,SAAS,CAAC,YAAY;CAkBvB"}

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

@@ -1,24 +1,17 @@
 import { WithLoadingState, optionalAttr, requestUpdateOnAriaChange } from '@odx/foundation';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(result)) || result;
   return result;
 };
 let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
-  constructor() {
-    super(...arguments);
-    this.type = "button";
-  }
   render() {
     return html`${when(
       this.href,
@@ -28,23 +21,25 @@ let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
   }
   renderContent() {
     return html`
-      <slot name="start"></slot>
-      <odx-line-clamp .max=${2}>
+      <slot name="prefix"></slot>
+      <odx-line-clamp class="content" .max=${2}>
         <slot></slot>
       </odx-line-clamp>
-      <slot name="end"></slot>
+      <slot name="suffix"></slot>
       ${when(this.loading, () => html`<odx-loading-spinner class="spinner" variant="dots"></odx-loading-spinner>`)}
     `;
   }
   renderButton() {
     const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+    const type = "type" in this ? this.type : "button";
     return html`
       <button
+        class="base"
         part="anchor button"
         aria-label="${optionalAttr(ariaLabel)}"
         aria-haspopup="${optionalAttr(ariaHasPopup)}"
         aria-expanded="${optionalAttr(ariaExpanded)}"
-        type=${this.type}
+        type=${type}
         ?disabled=${this.disabled || this.loading}
       >
       ${this.renderContent()}
@@ -52,9 +47,6 @@ let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
     `;
   }
 };
-__decorateClass([
-  property()
-], BaseButtonComponent.prototype, "type", 2);
 BaseButtonComponent = __decorateClass([
   requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"])
 ], BaseButtonComponent);

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);--_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);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);margin-block:var(--_margin-block);max-inline-size:100%;-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);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em)}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);position:absolute;margin:auto}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}: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-context(odx-input),: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(:hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){--_color-background: var(--_color-background-hover);cursor:default;[part~=anchor]{color:transparent}}:host([aria-disabled=\"true\"]){--_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-context(odx-input),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_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-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}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{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-5);--_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);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{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(--_font-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);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);position:absolute;margin:auto}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),: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-context(odx-button-group[variant=\"highlight\"]),: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-context(odx-button-group[variant=\"secondary\"]),: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-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),: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-context(odx-button-group[variant=\"danger\"]),: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-context(odx-button-group[variant=\"success\"]),: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-context(odx-button-group[variant=\"confirmation\"]),: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(:hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){--_color-background: var(--_color-background-hover);cursor:default;[part~=anchor]{color:transparent}}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding:inherit}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}";
 
 export { styles as default };

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

@@ -21,6 +21,10 @@ declare const OdxButtonComponent_base: import('@odx/foundation').Constructor<imp
 export declare class OdxButtonComponent extends OdxButtonComponent_base {
     #private;
     static readonly formAssociated = true;
+    /**
+     * The type of the button.
+     */
+    type: 'button' | 'submit' | 'reset';
     /**
      * The size of the button.
      */

package/dist/components/button/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../components/button/button.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;CAmBzB"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../components/button/button.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;CAmBzB"}

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

@@ -27,6 +27,7 @@ let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
     super();
     __privateAdd(this, _OdxButtonComponent_instances);
     __privateAdd(this, _internals, this.attachInternals());
+    this.type = "button";
     if (!isServer) {
       this.addEventListener("click", __privateMethod(this, _OdxButtonComponent_instances, handleClick_fn));
     }
@@ -45,6 +46,9 @@ handleClick_fn = function(_event) {
   }
 };
 OdxButtonComponent.formAssociated = true;
+__decorateClass([
+  property()
+], OdxButtonComponent.prototype, "type", 2);
 __decorateClass([
   property({ reflect: true })
 ], OdxButtonComponent.prototype, "size", 2);

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

@@ -1,12 +1,18 @@
-import { CustomElement } from '@odx/foundation';
+import { CanBeDisabled, CustomElement } from '@odx/foundation';
+import { ButtonSize, ButtonVariant } from '../button';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroupComponent;
     }
 }
-export declare class OdxButtonGroupComponent extends CustomElement {
+declare const OdxButtonGroupComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxButtonGroupComponent extends OdxButtonGroupComponent_base {
     block: boolean;
     connected: boolean;
     vertical: boolean;
+    size?: ButtonSize | null;
+    variant?: ButtonVariant | null;
+    onDisabledChanged(disabled: boolean): void;
 }
+export {};
 //# sourceMappingURL=button-group.component.d.ts.map

package/dist/components/button-group/button-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;AAED,qBACa,uBAAwB,SAAQ,aAAa;IAExD,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;CAClB"}
+{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG3D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;;AAED,qBACa,uBAAwB,SAAQ,4BAA4B;IAEvE,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAGzB,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAEtB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;CAKpD"}

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { CanBeDisabled, CustomElement, customElement } from '@odx/foundation';
 import { property } from 'lit/decorators.js';
 import styles from './button-group.component.css.js';
 
@@ -12,13 +12,18 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let OdxButtonGroupComponent = class extends CustomElement {
+let OdxButtonGroupComponent = class extends CanBeDisabled(CustomElement) {
   constructor() {
     super(...arguments);
     this.block = false;
     this.connected = false;
     this.vertical = false;
   }
+  onDisabledChanged(disabled) {
+    for (const button of Array.from(this.querySelectorAll("odx-button"))) {
+      button._contextDisabled = disabled;
+    }
+  }
 };
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -29,6 +34,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], OdxButtonGroupComponent.prototype, "vertical", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxButtonGroupComponent.prototype, "variant", 2);
 OdxButtonGroupComponent = __decorateClass([
   customElement("odx-button-group", [styles])
 ], OdxButtonGroupComponent);

package/dist/components/line-clamp/line-clamp.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{display:-webkit-box;min-inline-size:min-content;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
+const styles = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
 
 export { styles as default };

package/dist/components/link/base-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-link.d.ts","sourceRoot":"","sources":["../../../components/link/base-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,QAAQ,EAAE,aAAa,EAAE,aAAa,EAA2C,MAAM,iBAAiB,CAAC;AAC7I,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;;AAIhD,qBAAa,QAAS,SAAQ,aAA4B;IAKxD,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAGF,QAAQ,CAAC,kBAAkB,EAAG,iBAAiB,GAAG,iBAAiB,CAAC;IAGpE,IAAI,SAAM;IAGV,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,EAAE,CAAM;IAG1D,GAAG,SAAyB;IAG5B,QAAQ,CAAC,EAAE,MAAM,CAAC;cAEC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc;IAoB1D,SAAS,CAAC,aAAa,IAAI,cAAc;CAG1C"}
+{"version":3,"file":"base-link.d.ts","sourceRoot":"","sources":["../../../components/link/base-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,QAAQ,EAAE,aAAa,EAAE,aAAa,EAA2C,MAAM,iBAAiB,CAAC;AAC7I,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;;AAIhD,qBAAa,QAAS,SAAQ,aAA4B;IAKxD,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAGF,QAAQ,CAAC,kBAAkB,EAAG,iBAAiB,GAAG,iBAAiB,CAAC;IAGpE,IAAI,SAAM;IAGV,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,EAAE,CAAM;IAG1D,GAAG,SAAyB;IAG5B,QAAQ,CAAC,EAAE,MAAM,CAAC;cAEC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc;IAqB1D,SAAS,CAAC,aAAa,IAAI,cAAc;CAG1C"}

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

@@ -31,6 +31,7 @@ class BaseLink extends CanBeDisabled(CustomElement) {
   render(role) {
     const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
     return html`<a
+      class="base"
       part="anchor"
       aria-label="${optionalAttr(ariaLabel)}"
       aria-haspopup="${optionalAttr(ariaHasPopup)}"

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{--_color-foreground: var(--odx-palette-blue-50);display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{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);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}: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\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
 
 export { styles as default };

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

@@ -15,13 +15,13 @@ var __decorateClass = (decorators, target, key, kind) => {
 let OdxListItemComponent = class extends BaseLink {
   render() {
     return html`
-      <slot name="start"></slot>
+      <slot name="prefix"></slot>
       ${when(
       this.href,
       () => super.render(),
       () => html`<slot></slot>`
     )}
-      <slot name="end"></slot>
+      <slot name="suffix"></slot>
     `;
   }
 };

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{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}.base{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;&:focus-visible{--_color-outline: var(--odx-focus-ring-color)}}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
 
 export { styles as default };

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{--_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,.base{display:inline-flex;place-items:center}.base{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)}.base::-moz-focus-inner{padding:0;border:0}:host(:hover){--_color-background: var(--odx-color-transparent-hover)}:host:host-context(odx-rail-navigation),: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([aria-current]){--_color-background: var(--odx-color-selected)}:host([aria-current]:hover){--_color-background: var(--odx-color-selected-hover)}:host([aria-current]:active),:host(:active){--_color-background: var(--odx-color-transparent-pressed)}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-current]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([loading]) .base{color:transparent}::slotted(*){flex:0 0 auto}::slotted(odx-icon){--size: var(--_icon-size)}::slotted(odx-avatar){--_size: var(--_icon-size)}::slotted([slot=\"suffix\"]){margin-inline-start:auto}";
 
 export { styles as default };

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

@@ -1,3 +1,4 @@
+import { ARIAMixinStrict } from '@odx/foundation';
 import { PropertyValues } from 'lit';
 import { BaseButtonComponent } from '../button';
 import { NavigationItemSize } from './navigation-item.models';
@@ -9,6 +10,7 @@ declare global {
 export declare class OdxNavigationItemComponent extends BaseButtonComponent {
     size?: NavigationItemSize | null;
     selected: boolean;
+    ariaSelectedValue: ARIAMixinStrict['ariaCurrent'];
     connectedCallback(): void;
     protected willUpdate(props: PropertyValues<this>): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.component.d.ts","sourceRoot":"","sources":["../../../components/navigation-item/navigation-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,mBAAmB;IAEjE,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAGjC,QAAQ,UAAS;IAER,iBAAiB,IAAI,IAAI;cAIf,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAMjE"}
+{"version":3,"file":"navigation-item.component.d.ts","sourceRoot":"","sources":["../../../components/navigation-item/navigation-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,mBAAmB;IAEjE,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAGjC,QAAQ,UAAS;IAGjB,iBAAiB,EAAE,eAAe,CAAC,aAAa,CAAC,CAAU;IAElD,iBAAiB,IAAI,IAAI;cAIf,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAMjE"}

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

@@ -17,14 +17,15 @@ let OdxNavigationItemComponent = class extends BaseButtonComponent {
   constructor() {
     super(...arguments);
     this.selected = false;
+    this.ariaSelectedValue = "page";
   }
   connectedCallback() {
     super.connectedCallback?.();
   }
   willUpdate(props) {
     super.willUpdate(props);
-    if (props.has("selected")) {
-      this.ariaCurrent = this.selected ? "page" : null;
+    if (props.has("selected") || props.has("ariaSelectedValue")) {
+      this.ariaCurrent = this.selected ? this.ariaSelectedValue : null;
     }
   }
 };
@@ -34,6 +35,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], OdxNavigationItemComponent.prototype, "selected", 2);
+__decorateClass([
+  property()
+], OdxNavigationItemComponent.prototype, "ariaSelectedValue", 2);
 OdxNavigationItemComponent = __decorateClass([
   customElement("odx-navigation-item", [styles])
 ], OdxNavigationItemComponent);

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

@@ -20,10 +20,10 @@ let OdxOptionComponent = class extends OptionControl {
       ${when(
       this.type === "checkbox",
       () => html`<odx-checkbox .checked=${this.selected} ?disabled=${this.disabled} inert></odx-checkbox>`,
-      () => html`<slot name="start"></slot>`
+      () => html`<slot name="prefix"></slot>`
     )}
       <slot></slot>
-      <slot name="end"></slot>
+      <slot name="suffix"></slot>
     `;
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"rail-navigation.component.d.ts","sourceRoot":"","sources":["../../../components/rail-navigation/rail-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAsB,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAGpF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;;AAED,qBACa,0BAA2B,SAAQ,+BAA6B;;IAE3E,SAAS,CAAC,eAAe,EAAG,0BAA0B,EAAE,CAAC;IAGzD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;IAY3C,QAAQ,IAAI,0BAA0B,EAAE;IAI/B,gBAAgB;;;;;;CAoB1B"}
+{"version":3,"file":"rail-navigation.component.d.ts","sourceRoot":"","sources":["../../../components/rail-navigation/rail-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAGhE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;;AAED,qBACa,0BAA2B,SAAQ,+BAA6B;;IAE3E,SAAS,CAAC,eAAe,EAAG,0BAA0B,EAAE,CAAC;IAGzD,SAAS,UAAS;cAEC,MAAM,IAAI,cAAc;IAY3C,QAAQ,IAAI,0BAA0B,EAAE;IAI/B,gBAAgB;;;;;;CAY1B"}

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

@@ -2,7 +2,6 @@ import { IsTranslatable, CustomElement, customElement } from '@odx/foundation';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.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';
 
 var __defProp = Object.defineProperty;
@@ -21,28 +20,21 @@ var __decorateClass = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var _handleControlClick, _handleSlotChange;
+var _handleControlClick;
 let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
   constructor() {
     super(...arguments);
     this.collapsed = false;
-    __privateAdd(this, _handleControlClick, (event) => {
-      event.preventDefault();
-      event.stopPropagation();
+    __privateAdd(this, _handleControlClick, () => {
       this.collapsed = !this.collapsed;
     });
-    __privateAdd(this, _handleSlotChange, () => {
-      for (const item of this.navigationItems) {
-        item.size = NavigationItemSize.LG;
-      }
-    });
   }
   render() {
     const controlLabel = this._translate(this.collapsed ? "controlLabelCollapsed" : "controlLabelExpanded") || null;
     return html`
-      <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
-      <odx-navigation-item class="toggle-control" size="lg" @click=${__privateGet(this, _handleControlClick)}>
-        <odx-icon class="toggle-icon" name="core::chevron-left" slot="start"></odx-icon>
+      <slot></slot>
+      <odx-navigation-item class="toggle-control" @click=${__privateGet(this, _handleControlClick)}>
+        <odx-icon class="toggle-icon" name="core::chevron-left" slot="prefix"></odx-icon>
         <odx-visually-hidden>${controlLabel}</odx-visually-hidden>
       </odx-navigation-item>
     `;
@@ -60,7 +52,6 @@ let OdxRailNavigationComponent = class extends IsTranslatable(CustomElement) {
   }
 };
 _handleControlClick = new WeakMap();
-_handleSlotChange = new WeakMap();
 __decorateClass([
   queryAssignedElements({ selector: OdxNavigationItemComponent.selector, flatten: true })
 ], OdxRailNavigationComponent.prototype, "navigationItems", 2);

package/dist/src/lib/mixins/can-be-disabled.d.ts

@@ -2,6 +2,8 @@ import { CustomElement } from '../models';
 import { Constructor } from './dedupe-mixin';
 export interface CanBeDisabled {
     disabled: boolean;
+    _contextDisabled: boolean;
+    onDisabledChanged?(disabled: boolean): void;
 }
 export declare const CanBeDisabled: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeDisabled> & T;
 //# sourceMappingURL=can-be-disabled.d.ts.map

package/dist/src/lib/mixins/can-be-disabled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA+BjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}
+{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA4CjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-disabled.js

@@ -16,6 +16,7 @@ const CanBeDisabled = dedupeMixin((superClass) => {
     constructor() {
       super(...arguments);
       this.#initialTabIndex = null;
+      this._contextDisabled = false;
       this.disabled = false;
     }
     #initialTabIndex;
@@ -25,13 +26,20 @@ const CanBeDisabled = dedupeMixin((superClass) => {
     }
     willUpdate(props) {
       super.willUpdate?.(props);
-      if (props.has("disabled")) {
+      if (props.has("_contextDisabled") || props.has("disabled")) {
         this.#handleDisableChange();
       }
     }
+    updated(props) {
+      super.updated?.(props);
+      if (props.has("_contextDisabled") || props.has("disabled")) {
+        this.onDisabledChanged?.(this._contextDisabled || this.disabled);
+      }
+    }
     #handleDisableChange() {
-      this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
-      if (this.disabled) {
+      const disabled = this._contextDisabled || this.disabled;
+      this.ariaDisabled = toAriaBooleanAttribute(disabled);
+      if (disabled) {
         this.tabIndex = -1;
       } else if (this.#initialTabIndex !== null) {
         this.tabIndex = this.#initialTabIndex;
@@ -41,7 +49,10 @@ const CanBeDisabled = dedupeMixin((superClass) => {
     }
   }
   __decorateClass([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean })
+  ], CanBeDisabledElement.prototype, "_contextDisabled");
+  __decorateClass([
+    property({ type: Boolean })
   ], CanBeDisabledElement.prototype, "disabled");
   return CanBeDisabledElement;
 });

package/dist/src/lib/models/custom-element.css.js

@@ -1,3 +1,3 @@
-const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",\"Kanit\",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}h1,h2,h3,h4,h5,h6{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);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit}#root,#__next{isolation:isolate}[hidden]{display:none}}";
+const customElementStyles = "@layer odx-reset,odx-base,odx-component,odx-component-overrides,odx-theme;@layer odx-reset{*,*:before,*:after{box-sizing:border-box}:root{font-size:150%}:where(img,picture,video,canvas,svg){display:block;max-width:100%;margin:0;padding:0}:where(input,button,textarea,select){font:inherit;margin:0;padding:0}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;margin:0;padding:0}::selection{background-color:var(--odx-color-foreground-highlight);color:var(--odx-color-foreground-inverse)}#root,#__next{isolation:isolate}input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}odx-spinbox>input::-webkit-inner-spin-button{appearance:none}}@layer odx-base{html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",\"Kanit\",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0}*{scrollbar-color:var(--odx-color-neutral-rest) var(--odx-palette-transparent)}*:not(body){scrollbar-width:thin}h1,h2,h3,h4,h5,h6{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);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer odx-base{[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer odx-reset{:where(*,*:before,*:after){box-sizing:border-box}:where(:host){box-sizing:border-box;border:none;color:inherit}#root,#__next{isolation:isolate}[hidden]{display:none}}";
 
 export { customElementStyles as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",