@odx/foundation 1.0.0-beta.223 → 1.0.0-beta.225

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.
Files changed (3) hide show
  1. package/dist/components.js +13 -13
  2. package/dist/styles.css +1 -1
  3. package/package.json +11 -8
package/dist/components.js CHANGED
@@ -41,7 +41,7 @@ __decorateClass([
41
41
  ], _OdxAccordionPanel.prototype, "expanded", 2);
42
42
  let OdxAccordionPanel = _OdxAccordionPanel;
43
43
 
44
- const styles$1k = ":host{--indent-level:1;margin-block:var(--_spacing);display:flex}.base{padding-inline-start:calc(var(--indent-level)*var(--_spacing-inline))}.label{flex-direction:column;display:flex}:host([disabled]){--_color-background:transparent;--_color-background-hover:transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([indicator-position=start]) .indicator{--rotate:-90deg;order:-1}:host([expanded]){font-weight:var(--odx-typography-font-weight-medium);.indicator{--rotate:180deg}}:host([indicator-position=start][expanded]) .indicator{--rotate:0deg}:host([size=lg]){--_spacing:0;border-radius:0}";
44
+ const styles$1k = ":host{--indent-level:1;margin-block:var(--_spacing);display:flex}.base{padding-inline-start:calc(var(--indent-level)*var(--_spacing-inline))}.label{flex-direction:column;display:flex}:host([disabled]){--_color-background:transparent;--_color-background-hover:transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([indicator-position=start]) .indicator{--rotate:-90deg;order:-1}:host([expanded]){font-weight:var(--odx-typography-font-weight-medium);.indicator{--rotate:180deg}}:host([indicator-position=start][expanded]) .indicator{--rotate:0deg}:host([size=lg]){--_spacing:0px;border-radius:0}";
45
45
 
46
46
  const AccordionItemIndicatorPosition = pick(Alignment, ["START", "END"]);
47
47
  const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveControlElement) {
@@ -294,7 +294,7 @@ __decorateClass([
294
294
  ], _OdxActionButton.prototype, "replaceContent", 2);
295
295
  let OdxActionButton = _OdxActionButton;
296
296
 
297
- const styles$1g = "@layer variant{:host([variant=danger]){--_color-background-hover:var(--odx-color-background-danger-subtle);--_color-background-pressed:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}}";
297
+ const styles$1g = "@layer state{:host([disabled]){--_color-background:var(--odx-color-background-transparent-rest)}}@layer variant{:host([variant=danger]){--_color-background-hover:var(--odx-color-background-danger-subtle);--_color-background-pressed:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}}";
298
298
 
299
299
  const MenuItemSize = pick(ControlSize, ["SM", "MD"]);
300
300
  const MenuItemVariant = pick(Variant, ["NEUTRAL", "DANGER"]);
@@ -424,7 +424,7 @@ __decorateClass([
424
424
  ], _OdxNavigationItem.prototype, "compact", 2);
425
425
  let OdxNavigationItem = _OdxNavigationItem;
426
426
 
427
- const styles$1d = ":host{--_indicator-position:var(--odx-layout-spacing-sm);--_indicator-width:0px;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}.container{--item-min-width:var(--odx-control-width-sm);flex:1;position:relative}.indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:not([size])){--_height:var(--odx-control-height-sm);--_spacing:var(--odx-control-spacing-sm)}::slotted(odx-navigation-item[active]){--_color-background:transparent;--_color-background-hover:transparent}:host(:is([alignment],:not([alignment]))) .indicator{inset-inline:var(--_indicator-position)auto}:host(:not([vertical])){align-items:center;& odx-scroll-container::part(stage){padding-block:var(--odx-control-spacing-lg)}::slotted(odx-navigation-item){text-align:center}}:host([vertical]){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;width:max-content;.container{--_spacing:var(--odx-control-spacing-sm);padding-inline:var(--odx-control-spacing-sm)}.indicator{inset-block:var(--_indicator-position)auto;width:var(--_indicator-height);height:var(--_indicator-width)}::slotted(:not(odx-navigation-item)){margin-inline:var(--odx-layout-spacing-md)}}:host(:is([alignment=start],:not([alignment])):not([vertical])){box-shadow:0 calc(-1*var(--odx-border-width-thin)) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:auto 0}}:host([alignment=end]:not([vertical])){box-shadow:0 var(--odx-border-width-thin) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:0 auto}}:host([vertical]:is([alignment=start],:not([alignment]))){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:auto 0}::slotted(odx-navigation-item){text-align:right}}:host([vertical][alignment=end]){box-shadow:var(--odx-border-width-thin) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:0 auto}}:host([indicator-disabled]){box-shadow:none!important}";
427
+ const styles$1d = ":host{--_indicator-position:var(--odx-layout-spacing-sm);--_indicator-width:0px;--_indicator-height:calc(var(--odx-size-12) + var(--odx-border-width-thin));display:flex;overflow:hidden}odx-scroll-container{--gradient-size:var(--odx-size-350)}.container{--item-min-width:var(--odx-control-width-sm);flex:1;position:relative}.indicator{transition:var(--odx-transition-reduced);background:var(--odx-color-background-accent-rest);width:var(--_indicator-width);height:var(--_indicator-height);position:absolute}::slotted(odx-navigation-item:not([size])){--_height:var(--odx-control-height-sm);--_spacing:var(--odx-control-spacing-sm)}:host(:is([alignment],:not([alignment]))) .indicator{inset-inline:var(--_indicator-position)auto}:host(:not([vertical])){align-items:center;& odx-scroll-container::part(stage){padding-block:var(--odx-control-spacing-lg)}::slotted(odx-navigation-item){text-align:center}}:host([vertical]){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;width:max-content;.container{--_spacing:var(--odx-control-spacing-sm);padding-inline:var(--odx-control-spacing-sm)}.indicator{inset-block:var(--_indicator-position)auto;width:var(--_indicator-height);height:var(--_indicator-width)}::slotted(:not(odx-navigation-item)){margin-inline:var(--odx-layout-spacing-md)}}:host(:is([alignment=start],:not([alignment])):not([vertical])){box-shadow:0 calc(-1*var(--odx-border-width-thin)) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:auto 0}}:host([alignment=end]:not([vertical])){box-shadow:0 var(--odx-border-width-thin) 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-block:0 auto}}:host([vertical]:is([alignment=start],:not([alignment]))){box-shadow:calc(-1*var(--odx-border-width-thin)) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:auto 0}::slotted(odx-navigation-item){text-align:right}}:host([vertical][alignment=end]){box-shadow:var(--odx-border-width-thin) 0 0 var(--odx-color-stroke-neutral-subtle) inset;.indicator{inset-inline:0 auto}}:host([indicator-disabled]){box-shadow:none!important}";
428
428
 
429
429
  const TabBarAlignment = pick(Alignment, ["START", "END"]);
430
430
  const _OdxTabBar = class _OdxTabBar extends CustomElement {
@@ -814,7 +814,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
814
814
  placement,
815
815
  middleware: [
816
816
  offset(offset$1 + arrowSize / 2),
817
- shift({ padding: 6 }),
817
+ shift(),
818
818
  flipMiddleWare,
819
819
  size({
820
820
  apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {
@@ -835,7 +835,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
835
835
  Object.assign(floatingElement.style, { left: toPx(result.x), top: toPx(result.y) });
836
836
  }
837
837
 
838
- const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-transition:var(--odx-popover-transition,var(--odx-motion-duration-default));--_popover-offset:var(--odx-spacing-37);--_popover-shadow:var(--odx-popover-shadow,var(--odx-elevation-shadow-level-2));--_popover-spacing-inner:var(--odx-layout-spacing-lg);--_popover-spacing-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--_popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition)allow-discrete,overlay var(--_popover-transition)allow-discrete,display var(--_popover-transition)allow-discrete;opacity:0;padding:var(--odx-spacing-37);max-width:calc(var(--_popover-width) + 2*var(--_popover-spacing-inner));max-height:var(--_popover-height);background-color:#0000;margin:0}:host(:not(:popover-open)){display:none}:host(:popover-open){opacity:1;display:flex;transform:translate(0);@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([data-popover-placement^=top]),:host([data-popover-placement^=bottom]){--_popover-transition-offset-x:0;max-height:calc(var(--_popover-height) - var(--_popover-spacing-outer))}:host([data-popover-placement^=right]),:host([data-popover-placement^=left]){--_popover-transition-offset-y:0;max-width:calc(var(--_popover-width) - var(--_popover-spacing-outer))}:host([data-popover-placement^=top]){--_popover-transition-offset-y:calc(.5*var(--_popover-offset));padding-block:var(--_popover-spacing-outer)var(--_popover-offset);& odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=right]){--_popover-transition-offset-x:calc(-.5*var(--_popover-offset));padding-inline:var(--_popover-offset)var(--_popover-spacing-outer);& odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=bottom]){--_popover-transition-offset-y:calc(-.5*var(--_popover-offset));--_popover-arrow-offset-y:calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset)var(--_popover-spacing-outer);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([data-popover-placement^=left]){--_popover-transition-offset-x:calc(.5*var(--_popover-offset));--_popover-arrow-offset-x:calc(var(--_popover-offset) - var(--_arrow-size)/2);--_popover-arrow-offset-y:0;padding-inline:var(--_popover-spacing-outer)var(--_popover-offset);& odx-popover::part(arrow){right:var(--_popover-offset)}}}";
838
+ const styles$19 = "@layer base{:host{--popover-max-height:100%;--popover-max-width:100%;--popover-spacing:var(--odx-control-spacing-md);--popover-spacing-inline:var(--odx-control-spacing-inline-md);--popover-offset:var(--odx-spacing-37);--_popover-color-background:var(--odx-color-background-level-2);--_popover-color-foreground:var(--odx-color-foreground-rest);--_popover-min-height:inherit;--_popover-max-height:100%;--_popover-min-width:inherit;--_popover-max-width:100%;--_popover-offset-outer:var(--odx-layout-spacing-sm);--_popover-arrow-size:var(--odx-size-50);--_popover-arrow-offset:calc(var(--popover-offset) - var(--_popover-arrow-size)/2);--_popover-height:min(var(--_popover-max-height),var(--popover-max-height));--_popover-width:min(var(--_popover-max-width),var(--popover-max-width));transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:var(--odx-transition-default)allow-discrete;opacity:0;padding:var(--_popover-offset-outer);max-width:calc(var(--_popover-width) + 2*var(--_popover-offset-outer));max-height:calc(var(--_popover-height));overflow-clip-margin:var(--odx-spacing-75);background-color:#0000;margin:0;transition-property:opacity,transform,overlay,display;overflow:clip}:host(:not(:popover-open)){display:none}:host(:popover-open){opacity:1;display:flex;transform:translate(0);@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([data-popover-placement^=top]),:host([data-popover-placement^=bottom]){--_popover-transition-offset-x:0;max-height:var(--_popover-height)}:host([data-popover-placement^=right]),:host([data-popover-placement^=left]){--_popover-transition-offset-y:0;max-width:calc(var(--_popover-width) - var(--_popover-offset-outer))}:host([data-popover-placement^=top]){--_popover-transition-offset-y:calc(.5*var(--popover-offset));padding-block:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([data-popover-placement^=right]){--_popover-transition-offset-x:calc(-.5*var(--popover-offset));padding-inline:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([data-popover-placement^=bottom]){--_popover-transition-offset-y:calc(-.5*var(--popover-offset));--_popover-arrow-offset-y:calc(var(--popover-offset) - 6px);padding-block:var(--popover-offset)var(--_popover-offset-outer);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([data-popover-placement^=left]){--_popover-transition-offset-x:calc(.5*var(--popover-offset));--_popover-arrow-offset-x:calc(var(--popover-offset) - var(--_arrow-size)/2);--_popover-arrow-offset-y:0;padding-inline:var(--_popover-offset-outer)var(--popover-offset);& odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}}";
839
839
 
840
840
  class PopoverObserver {
841
841
  #referenceElements = /* @__PURE__ */ new WeakSet();
@@ -1024,7 +1024,7 @@ __decorateClass([
1024
1024
  ], _PopoverHost.prototype, "fpsLimit", 2);
1025
1025
  let PopoverHost = _PopoverHost;
1026
1026
 
1027
- const styles$18 = ":host{--_popover-offset:var(--odx-layout-spacing-sm)}:host([fill]) odx-popover::part(content){height:calc(var(--max-content-size,var(--_popover-max-height)) - var(--odx-spacing-200))}";
1027
+ const styles$18 = ":host{--popover-spacing-inline:var(--odx-layout-spacing-md)}";
1028
1028
 
1029
1029
  const DropdownPlacement = pick(Placement, ["TOP", "BOTTOM", "TOP_START", "TOP_END", "BOTTOM_START", "BOTTOM_END"]);
1030
1030
  const _OdxDropdown = class _OdxDropdown extends PopoverHost {
@@ -2039,7 +2039,7 @@ __decorateClass([
2039
2039
  ], _OdxGradientOverlay.prototype, "size", 2);
2040
2040
  let OdxGradientOverlay = _OdxGradientOverlay;
2041
2041
 
2042
- const styles$T = ":host{background-color:var(--odx-color-background-level-1);height:var(--odx-size-300);justify-content:flex-start;display:flex;position:relative}.base{gap:var(--odx-layout-spacing-md);padding-inline:var(--odx-layout-spacing-lg);max-width:var(--_page-width,100%);flex:1;place-items:center;height:100%;display:flex}odx-logo{flex:none}::slotted(odx-action-group){gap:var(--odx-layout-spacing-sm)}::slotted(odx-search-bar){max-width:var(--odx-layout-width-sm);flex:auto}::slotted(odx-separator){--size:var(--odx-size-125);--inner-spacing:0px;--spacing:var(--odx-layout-spacing-sm)}.actions{gap:var(--odx-layout-spacing-sm);flex-wrap:nowrap;align-items:center;max-width:60%;height:100%;margin-inline-start:auto;display:flex}odx-logo.compact{display:none}:host([size=lg]){height:var(--odx-size-500);.base{gap:var(--odx-layout-spacing-lg)}::slotted(odx-action-group),.actions{gap:var(--odx-layout-spacing-md)}}@media screen and (width<=600px){odx-logo{display:none}odx-logo.compact{display:block}}";
2042
+ const styles$T = ":host{background-color:var(--odx-color-background-level-1);height:var(--odx-size-300);justify-content:flex-start;display:flex;position:relative}.base{gap:var(--odx-layout-spacing-md);padding-inline:calc(var(--odx-layout-spacing-lg) + var(--odx-layout-spacing-md))var(--odx-layout-spacing-lg);max-width:var(--_page-width,100%);flex:1;place-items:center;height:100%;display:flex}odx-logo{flex:none}::slotted(odx-action-group){gap:var(--odx-layout-spacing-sm)}::slotted(odx-search-bar){max-width:var(--odx-layout-width-sm);flex:auto}::slotted(odx-separator){--size:var(--odx-size-125);--inner-spacing:0px;--spacing:var(--odx-layout-spacing-sm)}.actions{gap:var(--odx-layout-spacing-sm);flex-wrap:nowrap;align-items:center;max-width:60%;height:100%;margin-inline-start:auto;display:flex}odx-logo.compact{display:none}:host(:not([size=lg])){::slotted(odx-avatar[slot=actions]:last-child){align-self:flex-start;margin-block-start:var(--odx-layout-spacing-sm)}}:host([size=lg]){height:var(--odx-size-500);.base{gap:var(--odx-layout-spacing-lg)}::slotted(odx-action-group),.actions{gap:var(--odx-layout-spacing-md)}}@media screen and (width<=600px){odx-logo{display:none}odx-logo.compact{display:block}}";
2043
2043
 
2044
2044
  const HeaderSize = pick(Size, ["SM", "MD", "LG"]);
2045
2045
  const _OdxHeader = class _OdxHeader extends CustomElement {
@@ -2063,7 +2063,7 @@ const _OdxHeader = class _OdxHeader extends CustomElement {
2063
2063
  this.role = "banner";
2064
2064
  }
2065
2065
  render() {
2066
- return html`<div class="base"><slot name="prefix"></slot><odx-logo size="sm" ?compact="${this.size === HeaderSize.SM}"></odx-logo><odx-logo class="compact" size="sm" compact="compact"></odx-logo><slot @slotchange="${this.#handleSlotChange}"></slot>${optionalSlot(this, "actions")}</div>`;
2066
+ return html`<div class="base"><slot name="prefix"></slot><slot name="logo"><odx-logo size="sm" ?compact="${this.size === HeaderSize.SM}"></odx-logo></slot><odx-logo class="compact" size="sm" compact="compact"></odx-logo><slot @slotchange="${this.#handleSlotChange}"></slot>${optionalSlot(this, "actions")}</div>`;
2067
2067
  }
2068
2068
  #handleSlotChange;
2069
2069
  };
@@ -2072,7 +2072,7 @@ __decorateClass([
2072
2072
  ], _OdxHeader.prototype, "size", 2);
2073
2073
  let OdxHeader = _OdxHeader;
2074
2074
 
2075
- const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse-static);--_popover-spacing-inner:var(--odx-control-spacing-inline-sm)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-control-spacing-sm)}}:host(:not([interactive])){pointer-events:none;-webkit-user-select:none;user-select:none}:host([size=sm]){--popover-max-width:var(--odx-layout-width-xs)}:host([size=lg]){--popover-max-width:var(--odx-layout-width-md)}:host([variant=accent]){--_popover-color-background:var(--odx-color-background-accent-hover)}:host([variant=danger]){--_popover-color-background:var(--odx-color-background-danger-hover)}";
2075
+ const styles$S = ":host{--popover-max-width:var(--odx-layout-width-sm);--popover-spacing:var(--odx-control-spacing-sm);--popover-spacing-inline:var(--odx-control-spacing-inline-sm);--_popover-color-background:var(--odx-color-background-level-3);--_popover-color-foreground:var(--odx-color-foreground-inverse-static)}odx-popover{border-radius:var(--odx-border-radius-md);&::part(content){padding-block:var(--odx-control-spacing-sm)}}:host(:not([interactive])){pointer-events:none;-webkit-user-select:none;user-select:none}:host([size=sm]){--popover-max-width:var(--odx-layout-width-xs)}:host([size=lg]){--popover-max-width:var(--odx-layout-width-md)}:host([variant=accent]){--_popover-color-background:var(--odx-color-background-accent-hover)}:host([variant=danger]){--_popover-color-background:var(--odx-color-background-danger-hover)}";
2076
2076
 
2077
2077
  const TooltipPlacement = pick(Placement, ["TOP", "RIGHT", "BOTTOM", "LEFT"]);
2078
2078
  const TooltipSize = pick(Size, ["SM", "MD", "LG"]);
@@ -2932,7 +2932,7 @@ __decorateClass([
2932
2932
  ], _OdxMainMenuButton.prototype, "label", 2);
2933
2933
  let OdxMainMenuButton = _OdxMainMenuButton;
2934
2934
 
2935
- const styles$D = ":host{--_popover-spacing-inner:var(--odx-layout-spacing-sm)}.base{gap:var(--odx-spacing-37);min-width:var(--odx-control-width-lg);flex-direction:column;max-width:100%;height:100%;display:flex}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-separator){--spacing:0px}";
2935
+ const styles$D = ":host{--popover-spacing-inline:var(--odx-layout-spacing-sm)}.base{min-width:var(--odx-control-width-lg);flex-direction:column;max-width:100%;height:100%;display:flex}::slotted(odx-label){font-weight:var(--odx-typography-font-weight-medium)}::slotted(odx-separator){--spacing:0px}";
2936
2936
 
2937
2937
  const _OdxMenu = class _OdxMenu extends PopoverHost {
2938
2938
  constructor() {
@@ -3253,7 +3253,7 @@ __decorateClass([
3253
3253
  ], _OdxPagination.prototype, "totalItems", 2);
3254
3254
  let OdxPagination = _OdxPagination;
3255
3255
 
3256
- const styles$w = ":host{border-radius:var(--odx-control-border-radius);box-shadow:var(--_popover-shadow);background-color:var(--_popover-color-background);width:100%;display:flex}[part~=base]{z-index:var(--odx-z-level-foreground);border-radius:inherit;min-width:var(--_popover-min-width);max-width:100%;height:fit-content;min-height:var(--_popover-min-height);scroll-behavior:smooth;max-height:100%;scroll-padding-block:calc(var(--odx-spacing-150) + var(--_popover-spacing-outer));flex-direction:column;display:flex;position:relative;overflow:auto;inset-block-start:0!important;inset-inline-start:0!important}[part~=content]{padding:var(--_popover-spacing-inner);color:var(--_popover-color-foreground);flex-direction:column;display:flex}[part~=arrow]{z-index:var(--odx-z-level-foreground);background-color:inherit;width:var(--_popover-arrow-size);height:var(--_popover-arrow-size);border-radius:1px;position:absolute}";
3256
+ const styles$w = ":host{border-radius:var(--odx-control-border-radius);box-shadow:var(--odx-elevation-shadow-level-2);background-color:var(--_popover-color-background);width:100%;display:flex}[part~=base]{z-index:var(--odx-z-level-foreground);border-radius:inherit;min-width:var(--_popover-min-width);max-width:100%;height:fit-content;min-height:var(--_popover-min-height);scroll-behavior:smooth;max-height:100%;scroll-padding-block:calc(var(--odx-spacing-150) + var(--_popover-offset-outer));flex-direction:column;display:flex;position:relative;overflow:auto;inset-block-start:0!important;inset-inline-start:0!important}[part~=content]{padding:var(--popover-spacing)var(--popover-spacing-inline);color:var(--_popover-color-foreground);flex-direction:column;display:flex}[part~=arrow]{z-index:var(--odx-z-level-foreground);background-color:inherit;width:var(--_popover-arrow-size);height:var(--_popover-arrow-size);border-radius:1px;position:absolute}";
3257
3257
 
3258
3258
  const _OdxPopover = class _OdxPopover extends CustomElement {
3259
3259
  constructor() {
@@ -3632,7 +3632,7 @@ __decorateClass([
3632
3632
  ], _OdxSearchBar.prototype, "value", 2);
3633
3633
  let OdxSearchBar = _OdxSearchBar;
3634
3634
 
3635
- const styles$o = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-control-border-radius);cursor:pointer;min-width:var(--odx-control-width-lg);max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-border-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--_popover-spacing-inner:0;--_popover-offset:0}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}::slotted(:is(odx-link,a)){margin:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}::slotted(odx-option){border-radius:0}:host(:hover){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default;& odx-chip{--_color-background:var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
3635
+ const styles$o = "@layer base{:host{--_color-background:var(--odx-control-color-background-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-control-border-radius);cursor:pointer;min-width:var(--odx-control-width-lg);max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-border-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--popover-max-height:320px;--popover-offset:0px;--popover-spacing:0px;--popover-spacing-inline:0px}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}::slotted(:is(odx-link,a)){margin:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}::slotted(odx-option){border-radius:0}:host(:hover){--_color-background:var(--odx-control-color-background-hover);--_color-stroke:var(--odx-control-color-stroke-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-stroke:var(--odx-control-color-stroke-readonly);cursor:default;& odx-chip{--_color-background:var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
3636
3636
 
3637
3637
  const _OdxSelect = class _OdxSelect extends ListboxControl {
3638
3638
  constructor() {
@@ -4687,7 +4687,7 @@ __decorateClass([
4687
4687
  ], _OdxToast.prototype, "variant", 2);
4688
4688
  let OdxToast = _OdxToast;
4689
4689
 
4690
- const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);column-gap:calc(2*var(--_spacing-inline));transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:calc(2*var(--_spacing-inline));min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){--size:var(--_addon-size);margin-inline:calc(-1*var(--_spacing-inline))}[part~=label]{display:inline-block}}@layer state{:host([disabled]:not([readonly])){--_color-background: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}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-foreground:var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background:var(--odx-control-color-background-selected);--_color-background-hover:var(--odx-control-color-background-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-control-color-stroke-selected);--_color-stroke-hover:var(--odx-control-color-stroke-selected)}:host([checked][required]){cursor:default}:host([variant=ghost][checked]),:host([variant=ghost][readonly]){--_color-stroke:transparent}:host([variant=ghost][checked]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground:var(--odx-color-foreground-rest)}}@layer variant{:host(:is(:not([variant]),[variant=accent]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([variant=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent}:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg)}}";
4690
+ const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-control-color-background-rest);--_color-background-hover:var(--odx-control-color-background-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-control-color-stroke-rest);--_color-stroke-hover:var(--odx-control-color-stroke-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);column-gap:calc(2*var(--_spacing-inline));transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-control-border-radius);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:calc(2*var(--_spacing-inline));min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:not([disabled]):hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){--size:var(--_addon-size);margin-inline:calc(-1*var(--_spacing-inline))}[part~=label]{display:inline-block}}@layer state{:host([disabled]:not([readonly])){--_color-background: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}:host([readonly]){--_color-background:var(--odx-control-color-background-readonly);--_color-foreground:var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background:var(--odx-control-color-background-selected);--_color-background-hover:var(--odx-control-color-background-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-control-color-stroke-selected);--_color-stroke-hover:var(--odx-control-color-stroke-selected)}:host([checked][required]){cursor:default}:host([variant=ghost][checked]),:host([variant=ghost][readonly]){--_color-stroke:transparent}:host([variant=ghost][checked]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground:var(--odx-color-foreground-rest)}}@layer variant{:host(:is(:not([variant]),[variant=accent]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([variant=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent}:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg)}}";
4691
4691
 
4692
4692
  const ToggleButtonVariant = pick(Variant, ["ACCENT", "GHOST"]);
4693
4693
  const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}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)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}: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-border-width-thick)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-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
1
+ @layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}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)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)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-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}
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.223",
5
+ "version": "1.0.0-beta.225",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -20,24 +20,23 @@
20
20
  "lit": "3.3.1"
21
21
  },
22
22
  "peerDependencies": {
23
- "@odx/icons": "^4.0.0-rc.45",
24
- "@odx/design-tokens": "^2.0.0"
23
+ "@odx/icons": "^4.0.0-rc.47",
24
+ "@odx/design-tokens": "^2.1.0"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@floating-ui/dom": "1.7.4",
28
28
  "@lit-labs/preact-signals": "1.0.3",
29
29
  "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
30
- "@odx/icons": "4.0.0-rc.45",
30
+ "@odx/icons": "4.0.0-rc.47",
31
31
  "@spectrum-web-components/reactive-controllers": "1.8.0",
32
32
  "es-toolkit": "1.39.10",
33
33
  "sass-embedded": "1.93.2",
34
34
  "stylelint": "16.24.0",
35
- "stylelint-config-concentric-order": "5.2.1",
36
- "stylelint-config-standard": "39.0.0",
35
+ "@odx-internal/config-stylelint": "0.0.0",
37
36
  "@odx-internal/config-typescript": "0.0.0",
38
- "@odx-internal/utils-storybook": "0.0.0",
39
37
  "@odx-internal/config-vite": "0.0.0",
40
- "@odx/design-tokens": "2.0.0"
38
+ "@odx/design-tokens": "2.1.0",
39
+ "@odx-internal/utils-storybook": "0.0.0"
41
40
  },
42
41
  "sideEffects": [
43
42
  "dist/components-loader.js",
@@ -76,11 +75,15 @@
76
75
  "access": "public",
77
76
  "tag": "latest"
78
77
  },
78
+ "stylelint": {
79
+ "extends": "@odx-internal/config-stylelint"
80
+ },
79
81
  "scripts": {
80
82
  "build": "vite build",
81
83
  "dev": "vite build --watch --mode=development",
82
84
  "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
83
85
  "lint": "biome lint src",
86
+ "lint:styles": "stylelint '**/*.css'",
84
87
  "generate:manifest": "cem analyze"
85
88
  }
86
89
  }