@odx/foundation 1.0.0-beta.167 → 1.0.0-beta.169

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,7 +22,7 @@ export declare const AreaHeaderSize: Pick<{
22
22
  }, "SM" | "MD" | "LG" | "XL">;
23
23
  export declare class OdxAreaHeader extends CustomElement {
24
24
  #private;
25
- alignment: "start";
25
+ alignment: AreaHeaderAlignment;
26
26
  size: AreaHeaderSize;
27
27
  protected render(): TemplateResult;
28
28
  }
@@ -49,7 +49,7 @@ __decorateClass([
49
49
  ], _OdxAccordion.prototype, "size", 2);
50
50
  let OdxAccordion = _OdxAccordion;
51
51
 
52
- const styles$1j = ":host{display:block;border-block-end:var(--odx-border-width-thin) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
52
+ const styles$1j = ":host{display:block;border-block-end:var(--odx-border-width-thin) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-50)}";
53
53
 
54
54
  const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
55
55
  constructor() {
@@ -499,7 +499,7 @@ __decorateClass([
499
499
  ], _OdxTitle.prototype, "level", 2);
500
500
  let OdxTitle = _OdxTitle;
501
501
 
502
- const styles$1b = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;min-height:var(--odx-size-400)}.base{flex:1 1 auto}.header{display:flex;align-items:center;min-height:var(--odx-size-200);line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}::slotted(odx-title){display:flex;align-items:center}:host([alignment=\"center\"]){align-items:center}:host(:is(:not([size]),[size=\"md\"])){.header{margin-block-start:var(--odx-spacing-12)}}:host([size=\"sm\"]){min-height:var(--odx-size-300);.header{min-height:var(--odx-size-150);line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}.content{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){min-height:var(--odx-size-450);.header{min-height:var(--odx-size-225);line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}}:host([size=\"xl\"]){min-height:var(--odx-size-600);.header{min-height:var(--odx-size-300);line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}.content{line-height:var(--odx-breakpoint-line-height-p-lg);font-size:var(--odx-breakpoint-font-size-p-lg)}slot:is([name=prefix],[name=suffix])::slotted(*){margin-block:var(--odx-spacing-37)}}";
502
+ const styles$1b = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;min-height:var(--odx-size-400)}.base{flex:1 1 auto}.header{display:flex;flex-wrap:wrap;column-gap:var(--odx-spacing-50);align-items:center;min-height:var(--odx-size-200);line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}::slotted(odx-title){display:flex;align-items:center}:host([alignment=\"center\"]){align-items:center}:host(:is(:not([size]),[size=\"md\"])){.header{margin-block-start:var(--odx-spacing-12)}}:host([size=\"sm\"]){min-height:var(--odx-size-300);.header{min-height:var(--odx-size-150);line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}.content{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){min-height:var(--odx-size-450);.header{min-height:var(--odx-size-225);line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}}:host([size=\"xl\"]){min-height:var(--odx-size-600);.header{min-height:var(--odx-size-300);line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}.content{line-height:var(--odx-breakpoint-line-height-p-lg);font-size:var(--odx-breakpoint-font-size-p-lg)}slot:is([name=prefix],[name=suffix])::slotted(*){margin-block:var(--odx-spacing-37)}}";
503
503
 
504
504
  const AreaHeaderAlignment = pick(Alignment, ["START", "CENTER"]);
505
505
  const AreaHeaderSize = pick(Size, ["SM", "MD", "LG", "XL"]);
@@ -734,7 +734,7 @@ __decorateClass([
734
734
  ], _OdxButtonGroup.prototype, "vertical", 2);
735
735
  let OdxButtonGroup = _OdxButtonGroup;
736
736
 
737
- const styles$14 = ":host{display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-150);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-block-end:var(--odx-spacing-50)}.header{grid-area:header;max-inline-size:100%;overflow:hidden}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-spacing-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--odx-spacing-150) - var(--odx-border-width-thin))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-spacing-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-spacing-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-spacing-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}";
737
+ const styles$14 = ":host{display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-spacing-150) - var(--odx-border-width-thin));max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-spacing-50);place-items:center;margin-block-end:var(--odx-spacing-50)}.header{grid-area:header;max-inline-size:100%;overflow:hidden}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:var(--odx-spacing-negative-50)}.image{position:relative;grid-area:image;margin:var(--odx-spacing-negative-150)}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-spacing-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-spacing-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
738
738
 
739
739
  const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
740
740
  constructor() {
@@ -1376,18 +1376,18 @@ __decorateClass([
1376
1376
  ], _OdxAutocomplete.prototype, "minQueryLength", 2);
1377
1377
  let OdxAutocomplete = _OdxAutocomplete;
1378
1378
 
1379
- const styles$Y = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-spacing-75))}";
1379
+ const styles$Y = ":host{display:block;background-color:var(--odx-color-background-level-1);padding:var(--odx-breakpoint-spacing-150)}";
1380
1380
 
1381
1381
  class OdxContentBox extends CustomElement {
1382
1382
  static {
1383
1383
  customElement("odx-content-box", styles$Y)(OdxContentBox);
1384
1384
  }
1385
1385
  render() {
1386
- return html`<slot name="header"></slot><slot></slot><slot name="footer"></slot>`;
1386
+ return html`<slot></slot>`;
1387
1387
  }
1388
1388
  }
1389
1389
 
1390
- const styles$X = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
1390
+ const styles$X = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-spacing-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-spacing-12);gap:var(--odx-spacing-50);padding:var(--odx-spacing-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-spacing-37);gap:var(--odx-spacing-100);padding:var(--odx-spacing-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
1391
1391
 
1392
1392
  const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
1393
1393
  const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
@@ -2004,7 +2004,7 @@ __decorateClass([
2004
2004
  ], _OdxImage.prototype, "width", 2);
2005
2005
  let OdxImage = _OdxImage;
2006
2006
 
2007
- const styles$P = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
2007
+ const styles$P = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
2008
2008
 
2009
2009
  const iconMap = {
2010
2010
  neutral: "core::info",
@@ -2270,7 +2270,7 @@ __decorateClass([
2270
2270
  ], _OdxLink.prototype, "subtle", 2);
2271
2271
  let OdxLink = _OdxLink;
2272
2272
 
2273
- const styles$J = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}::slotted(odx-avatar){--_size: var(--odx-size-200);font-size:var(--odx-typography-font-size-2)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:is([size=\"lg\"],:not([size]))) ::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}:host([size=\"md\"]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}::slotted(odx-avatar){--_size: var(--odx-size-175);font-size:var(--odx-typography-font-size-1)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
2273
+ const styles$J = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-default)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:is([size=\"lg\"],:not([size]))){slot[name]::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}::slotted(odx-avatar){--_size: var(--odx-size-200);margin-inline:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-2)}}:host([size=\"md\"]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}slot[name]::slotted(odx-icon){margin-inline:var(--odx-spacing-25)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
2274
2274
 
2275
2275
  const ListItemSize = pick(Size, ["MD", "LG"]);
2276
2276
  const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
@@ -2683,7 +2683,7 @@ __decorateClass([
2683
2683
  ], _OdxMenuItem.prototype, "icon", 2);
2684
2684
  let OdxMenuItem = _OdxMenuItem;
2685
2685
 
2686
- const styles$C = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0;overflow:auto}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;margin-block-start:var(--odx-size-400);border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{margin-inline:calc(-1 * var(--odx-spacing-100));padding:var(--odx-spacing-100);max-inline-size:none;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
2686
+ const styles$C = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0;overflow:auto}.base{transform:translateY(var(--odx-spacing-100));transition-property:opacity,display,overlay,transform,box-shadow;margin-block-start:var(--odx-size-400);border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop-inverse);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{margin-inline:var(--odx-spacing-negative-100);padding:var(--odx-spacing-100);max-inline-size:none;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-spacing-100))}}}";
2687
2687
 
2688
2688
  const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
2689
2689
  (async () => {
@@ -3215,7 +3215,7 @@ __decorateClass([
3215
3215
  ], _OdxRailNavigation.prototype, "size", 2);
3216
3216
  let OdxRailNavigation = _OdxRailNavigation;
3217
3217
 
3218
- const styles$q = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;visibility:hidden;opacity:0;z-index:1;&.left{inset-inline-start:0}&.right{inset-inline-end:0}&.visible{visibility:visible;opacity:1}}:not([name])::slotted(*){scroll-snap-align:center;flex:0 0 auto}";
3218
+ const styles$q = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;max-width:100%;inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;z-index:1;&:not(.visible){visibility:hidden;opacity:0;pointer-events:none}&.left{inset-inline-start:0}&.right{inset-inline-end:0}}:not([name])::slotted(*){scroll-snap-align:center;flex:0 0 auto}";
3219
3219
 
3220
3220
  const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
3221
3221
  constructor() {
@@ -3265,7 +3265,8 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
3265
3265
  }
3266
3266
  }
3267
3267
  #sync() {
3268
- this.#scrollPadding = Math.ceil(Number.parseFloat(getComputedStyle(this.stage).paddingLeft || "0"));
3268
+ const tolerance = 1;
3269
+ this.#scrollPadding = Math.ceil(Number.parseFloat(getComputedStyle(this.stage).paddingLeft || "0") + tolerance);
3269
3270
  this.leftOverflow = this.scroller.scrollLeft > this.#scrollPadding;
3270
3271
  this.rightOverflow = this.scroller.scrollLeft + this.scroller.clientWidth < this.scroller.scrollWidth - this.#scrollPadding;
3271
3272
  }
@@ -3951,7 +3952,7 @@ __decorateClass([
3951
3952
  ], _OdxSpinbox.prototype, "value", 2);
3952
3953
  let OdxSpinbox = _OdxSpinbox;
3953
3954
 
3954
- const styles$g = ":host{display:inline-flex;gap:var(--odx-spacing-75);align-items:center;transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);block-size:var(--odx-size-150);font-size:var(--odx-typography-font-size-2);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-badge{margin:0 calc(-1 * var(--odx-spacing-37))}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
3955
+ const styles$g = ":host{display:inline-flex;gap:var(--odx-spacing-75);align-items:center;transition:var(--odx-transition-reduced);border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-spacing-75);block-size:var(--odx-size-150);font-size:var(--odx-typography-font-size-2);font-weight:var(--odx-typography-font-weight-medium);user-select:none}odx-badge{margin:0 var(--odx-spacing-negative-37)}:host([strong]){border-color:var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
3955
3956
 
3956
3957
  const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
3957
3958
  const _OdxStatus = class _OdxStatus extends CustomElement {
@@ -4412,7 +4413,7 @@ __decorateClass([
4412
4413
  ], _OdxText.prototype, "variant", 2);
4413
4414
  let OdxText = _OdxText;
4414
4415
 
4415
- const styles$5 = ":host{display:flex;flex-direction:column;gap:var(--odx-size-50);transition:var(--odx-transition-reduced);transition-property:border-color,box-shadow,transform;border:var(--odx-border-width-thick) solid transparent;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-size-100) - var(--odx-border-width-thick))}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-spacing-12)));box-shadow:var(--odx-shadow-level-1)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-color-background-control-selected)}:host([alignment=\"center\"]){align-items:center}";
4416
+ const styles$5 = ":host{display:flex;flex-direction:column;gap:var(--odx-size-50);transition:var(--odx-transition-reduced);transition-property:border-color,box-shadow,transform;border:var(--odx-border-width-thick) solid transparent;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-level-1);padding:calc(var(--odx-size-100) - var(--odx-border-width-thick))}.content{display:flex;flex:1 1 auto;flex-direction:column}:host([interactive]){cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-1)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer)}:host([selected]){border-color:var(--odx-color-background-control-selected)}:host([alignment=\"center\"]){align-items:center;.content{justify-content:center}}";
4416
4417
 
4417
4418
  const TileVariant = pick(Variant, ["NEUTRAL"]);
4418
4419
  const TileAlignment = pick(Alignment, ["START", "CENTER"]);
package/dist/main.js CHANGED
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
6
6
 
7
7
  const name = "@odx/foundation";
8
8
  const displayName = "ODX Design System Foundation";
9
- const version = "1.0.0-beta.167";
9
+ const version = "1.0.0-beta.169";
10
10
  const pkg = {
11
11
  name,
12
12
  displayName,
@@ -960,13 +960,13 @@ const optionalAttr = (value) => {
960
960
  return value == null || value === "" ? nothing : value;
961
961
  };
962
962
  function optionalSlot(host, slotName, classNames) {
963
- if (host.querySelector(`[slot="${slotName}"]`)) {
963
+ if (host.querySelector(`& > [slot="${slotName}"]`)) {
964
964
  return html`<div class="${slotName}${classNames ? ` ${classNames}` : ""}"><slot name="${slotName}" @slotchange="${() => host.requestUpdate()}"></slot></div>`;
965
965
  }
966
966
  return nothing;
967
967
  }
968
968
 
969
- const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted(odx-avatar){--_size: var(--odx-size-175);margin-inline-start:calc(-.5 * var(--_padding-inline));font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
969
+ const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-spacing-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(var(--_icon-margin) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:start;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted(odx-avatar){--_size: var(--odx-size-175);font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-spacing-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-spacing-37) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-spacing-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
970
970
 
971
971
  class InteractiveLink extends CanBeDisabled(CustomElement) {
972
972
  constructor() {
package/dist/native.css CHANGED
@@ -1 +1 @@
1
- @layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-250);text-align:start;font-size:inherit}td{block-size:var(--cell-size);vertical-align:middle}th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}th{border-bottom-color:transparent;cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}th :is(odx-input,odx-select){margin-inline:calc(-1 * var(--odx-spacing-50))}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}
1
+ @layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-250);text-align:start;font-size:inherit}td{block-size:var(--cell-size);vertical-align:middle}th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}th{border-bottom-color:transparent;cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}:root{--odx-spacing-px: 1px;--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: calc(-1 * var(--odx-spacing-12));--odx-focus-ring-offset-sm: calc(-1 * var(--odx-spacing-px))}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
1
+ @layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px)}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
package/dist/vendor.js CHANGED
@@ -1895,7 +1895,6 @@ function debounce(func, debounceMs, { signal, edges } = {}) {
1895
1895
  pendingArgs = null;
1896
1896
  };
1897
1897
  const flush = () => {
1898
- cancelTimer();
1899
1898
  invoke();
1900
1899
  };
1901
1900
  const debounced = function (...args) {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@odx/foundation",
3
3
  "displayName": "ODX Design System Foundation",
4
4
  "description": "A library of Web Component building blocks for ODX",
5
- "version": "1.0.0-beta.167",
5
+ "version": "1.0.0-beta.169",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -16,7 +16,7 @@
16
16
  ],
17
17
  "type": "module",
18
18
  "dependencies": {
19
- "@odx/design-tokens": "1.1.0-rc.2",
19
+ "@odx/design-tokens": "1.1.0-rc.3",
20
20
  "@preact/signals-core": "1.11.0",
21
21
  "lit": "3.3.1"
22
22
  },
@@ -35,12 +35,12 @@
35
35
  "@wc-toolkit/cem-validator": "1.0.3",
36
36
  "@wc-toolkit/module-path-resolver": "1.0.0",
37
37
  "@wc-toolkit/type-parser": "1.1.0",
38
- "es-toolkit": "1.39.7",
38
+ "es-toolkit": "1.39.8",
39
39
  "stylelint": "16.22.0",
40
40
  "stylelint-config-concentric-order": "5.2.1",
41
41
  "stylelint-config-standard": "38.0.0",
42
42
  "ts-lit-plugin": "2.0.2",
43
- "vite": "7.0.5",
43
+ "vite": "7.0.6",
44
44
  "vite-plugin-dts": "4.5.4",
45
45
  "@odx/storybook-utils": "0.0.0",
46
46
  "@odx/typescript-config": "0.0.0"