@odx/foundation 1.0.0-beta.164 → 1.0.0-beta.166

package/dist/components.js

@@ -115,7 +115,7 @@ __decorateClass([
 ], _OdxAccordionItem.prototype, "size", 2);
 let OdxAccordionItem = _OdxAccordionItem;
 
-const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));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: calc(-1 * var(--odx-spacing-12) + var(--odx-size-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([variant=\"neutral\"],[variant=\"primary\"],[variant=\"accent\"],[variant=\"danger\"])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-shadow)}: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)}}";
+const styles$1h = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));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: calc(-1 * var(--odx-spacing-12) + var(--odx-size-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-shadow)}: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)}}";
 
 const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
 const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
@@ -2845,18 +2845,19 @@ __decorateClass([
 ], _OdxNavigationItemGroup.prototype, "size", 2);
 let OdxNavigationItemGroup = _OdxNavigationItemGroup;
 
-const styles$A = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-spacing-50);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-spacing-37) var(--odx-spacing-50);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{flex:1 1 auto}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
+const styles$A = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-spacing-50);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--_color-background);cursor:pointer;padding:var(--odx-spacing-37) var(--odx-spacing-50);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{flex:1 1 auto}odx-icon,::slotted(odx-icon){margin:var(--odx-spacing-12);font-size:var(--odx-typography-font-size-5)}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected);.label{font-weight:var(--odx-typography-font-weight-medium)}}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
 
 class OdxOption extends OptionControl {
   static {
     customElement("odx-option", styles$A)(OdxOption);
   }
   render() {
+    const isCheckbox = this.type === "checkbox";
     return html`${when(
-      this.type === "checkbox",
-      () => html`<odx-checkbox .checked="${this.selected}" ?disabled="${this.disabled}" inert></odx-checkbox>`,
+      isCheckbox,
+      () => html`<odx-checkbox .checked="${this.selected}" ?disabled="${this.disabled}" .inert="${true}"></odx-checkbox>`,
       () => html`<slot name="prefix"></slot>`
-    )}<div class="label"><slot></slot></div><slot name="suffix"></slot>`;
+    )}<div class="label"><slot></slot></div><slot name="suffix"></slot>${when(!isCheckbox && this.selected, () => html`<odx-icon name="core::check"></odx-icon>`)}`;
   }
 }
 
@@ -3379,7 +3380,7 @@ __decorateClass([
 ], _OdxSearchBar.prototype, "readonly", 2);
 let OdxSearchBar = _OdxSearchBar;
 
-const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;color:var(--_color-foreground)}.base{display:flex;position:relative;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border-radius:inherit;background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:after{position:absolute;inset:auto 0 0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}&:focus-visible{outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);&:after{display:none}}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host([block]){max-inline-size:100%}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}::slotted(odx-option:not(:is(:first-child,:last-child))){border-radius:0}::slotted(odx-option:first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-option:last-child){border-start-start-radius:0;border-start-end-radius:0}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}: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-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-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)}}";
+const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-spacing-37);--_padding-inline: var(--odx-spacing-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;max-inline-size:320px;color:var(--_color-foreground)}.base{display:flex;position:relative;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border-radius:inherit;background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:after{position:absolute;inset:auto 0 0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}&:focus-visible{outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);&:after{display:none}}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px;--_popover-padding: 0;--_popover-offset: 0}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host([block]){max-inline-size:100%}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}: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-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-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)}}";
 
 const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   constructor() {

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.164";
+const version = "1.0.0-beta.166";
 const pkg = {
   name,
   displayName,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.164",
+  "version": "1.0.0-beta.166",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",