@odx/foundation 1.0.0-beta.172 → 1.0.0-beta.173

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 (4) hide show
  1. package/dist/components.js +4 -4
  2. package/dist/main.js +1 -1
  3. package/dist/styles.css +1 -1
  4. package/package.json +2 -2
package/dist/components.js CHANGED
@@ -115,7 +115,7 @@ __decorateClass([
115
115
  ], _OdxAccordionItem.prototype, "size", 2);
116
116
  let OdxAccordionItem = _OdxAccordionItem;
117
117
 
118
- const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: var(--odx-spacing-negative-px);--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6)}:host(:is(:not([variant]),[variant=\"neutral\"],[variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_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)}:host([variant=\"danger-subtle\"]){--_color-background: var(--odx-color-background-danger-subtle);--_color-background-hover: var(--odx-color-foreground-danger-rest);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-foreground-hover: var(--odx-color-foreground-inverse-static)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"][loading]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
118
+ const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: var(--odx-spacing-negative-px);--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6)}:host(:is(:not([variant]),[variant=\"neutral\"],[variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=\"neutral\"],:not([variant]))){--_color-background: var(--odx-color-background-neutral-rest);--_color-background-hover: var(--odx-color-background-neutral-hover);--_color-background-pressed: var(--odx-color-background-neutral-pressed)}:host(:is([variant=\"neutral\"],:not([variant]))[loading]){--_color-stroke: var(--odx-color-stroke-neutral-subtle)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_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)}:host([variant=\"danger-subtle\"]){--_color-background: var(--odx-color-background-danger-subtle);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-foreground-hover: var(--odx-color-foreground-inverse-static)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle)}:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle)}:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"][loading]){--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([variant=\"danger-subtle\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
119
119
 
120
120
  const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
121
121
  const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
@@ -762,7 +762,7 @@ __decorateClass([
762
762
  ], _OdxCard.prototype, "interactive", 2);
763
763
  let OdxCard = _OdxCard;
764
764
 
765
- const styles$13 = ":host{--_indicator-size: calc(var(--odx-size-125));--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;margin:var(--odx-spacing-12);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible) .indicator{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
765
+ const styles$13 = ":host{--_indicator-size: calc(var(--odx-size-125));--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-spacing-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;margin:var(--odx-spacing-12);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:focus-visible) .indicator{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host(:is([checked],[indeterminate]):focus-visible) .indicator{box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-inner) inset}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
766
766
 
767
767
  const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
768
768
  constructor() {
@@ -3987,7 +3987,7 @@ __decorateClass([
3987
3987
  ], _OdxStatus.prototype, "variant", 2);
3988
3988
  let OdxStatus = _OdxStatus;
3989
3989
 
3990
- const styles$f = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin-block:var(--odx-spacing-37);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0;font-size:var(--odx-size-100)}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-spacing-25);color:var(--_label-color-foreground)}}@layer state{:host([indicator-position=\"end\"]){flex-direction:row-reverse;justify-content:space-between}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([checked]:focus-visible) .thumb{outline:var(--odx-border-width-thin) solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-outer)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
3990
+ const styles$f = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin-block:var(--odx-spacing-37);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0;font-size:var(--odx-size-100)}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-spacing-25);color:var(--_label-color-foreground)}}@layer state{:host([indicator-position=\"end\"]){flex-direction:row-reverse;justify-content:space-between}:host(:not(:empty)) .indicator{margin-inline:var(--odx-spacing-50)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse-static);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([checked]:focus-visible) .thumb{outline:var(--odx-border-width-thin) solid var(--odx-color-stroke-focus-inner);outline-offset:var(--odx-focus-ring-offset);box-shadow:0 0 0 var(--odx-border-width-thin) var(--odx-color-stroke-focus-outer)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
3991
3991
 
3992
3992
  const SwitchIndicatorPosition = pick(Alignment, ["START", "END"]);
3993
3993
  const _OdxSwitch = class _OdxSwitch extends CheckboxFormControl {
@@ -4487,7 +4487,7 @@ __decorateClass([
4487
4487
  ], _OdxToast.prototype, "variant", 2);
4488
4488
  let OdxToast = _OdxToast;
4489
4489
 
4490
- const styles$3 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);min-inline-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}: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){margin-inline:calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));font-size:var(--_icon-size)}[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-color-background-control-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-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected-hover);--_color-foreground: var(--odx-color-foreground-inverse);--_color-stroke: var(--_color-background)}: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=\"neutral\"]):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\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
4490
+ const styles$3 = "@layer base{:host{--_border-radius: var(--odx-border-radius-sm);--_color-background: var(--odx-color-background-control-rest);--_color-background-hover: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_size: var(--odx-size-225);--_icon-size: var(--odx-size-150);--_padding-inline: var(--odx-spacing-75);display:inline-flex;position:relative;gap:var(--_padding-inline);align-items:center;justify-content:center;transition:var(--odx-transition-default);transition-property:color,background-color,border-color;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_size);min-inline-size:var(--_size);overflow:hidden;white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);user-select:none}: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){margin-inline:calc(-.5 * (var(--_icon-size) - var(--_padding-inline) + var(--odx-spacing-12)));font-size:var(--_icon-size)}[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-color-background-control-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-color-background-control-selected);--_color-background-hover: var(--odx-color-background-control-selected-hover);--_color-foreground: var(--odx-color-foreground-inverse-static);--_color-stroke: var(--_color-background)}: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=\"neutral\"]):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\"]){--_size: var(--odx-size-200);--_icon-size: var(--odx-size-125)}}";
4491
4491
 
4492
4492
  const ToggleButtonSize = pick(Size, ["SM", "MD"]);
4493
4493
  const ToggleButtonVariant = pick(Variant, ["NEUTRAL", "GHOST"]);
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.172";
9
+ const version = "1.0.0-beta.173";
10
10
  const pkg = {
11
11
  name,
12
12
  displayName,
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-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)}}
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}.odx-dark-mode{color-scheme:dark}.odx-light-mode{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/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.172",
5
+ "version": "1.0.0-beta.173",
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.4",
19
+ "@odx/design-tokens": "1.1.0-rc.5",
20
20
  "@preact/signals-core": "1.11.0",
21
21
  "lit": "3.3.1"
22
22
  },