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

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.
@@ -2845,18 +2845,19 @@ __decorateClass([
2845
2845
  ], _OdxNavigationItemGroup.prototype, "size", 2);
2846
2846
  let OdxNavigationItemGroup = _OdxNavigationItemGroup;
2847
2847
 
2848
- 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)}";
2848
+ 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)}";
2849
2849
 
2850
2850
  class OdxOption extends OptionControl {
2851
2851
  static {
2852
2852
  customElement("odx-option", styles$A)(OdxOption);
2853
2853
  }
2854
2854
  render() {
2855
+ const isCheckbox = this.type === "checkbox";
2855
2856
  return html`${when(
2856
- this.type === "checkbox",
2857
- () => html`<odx-checkbox .checked="${this.selected}" ?disabled="${this.disabled}" inert></odx-checkbox>`,
2857
+ isCheckbox,
2858
+ () => html`<odx-checkbox .checked="${this.selected}" ?disabled="${this.disabled}" .inert="${true}"></odx-checkbox>`,
2858
2859
  () => html`<slot name="prefix"></slot>`
2859
- )}<div class="label"><slot></slot></div><slot name="suffix"></slot>`;
2860
+ )}<div class="label"><slot></slot></div><slot name="suffix"></slot>${when(!isCheckbox && this.selected, () => html`<odx-icon name="core::check"></odx-icon>`)}`;
2860
2861
  }
2861
2862
  }
2862
2863
 
@@ -3379,7 +3380,7 @@ __decorateClass([
3379
3380
  ], _OdxSearchBar.prototype, "readonly", 2);
3380
3381
  let OdxSearchBar = _OdxSearchBar;
3381
3382
 
3382
- 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)}}";
3383
+ 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)}}";
3383
3384
 
3384
3385
  const _OdxSelect = class _OdxSelect extends ListboxFormControl {
3385
3386
  constructor() {
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.165";
9
+ const version = "1.0.0-beta.166";
10
10
  const pkg = {
11
11
  name,
12
12
  displayName,
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.165",
5
+ "version": "1.0.0-beta.166",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",