@odx/foundation 1.0.0-beta.100 → 1.0.0-beta.102

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 (5) hide show
  1. package/dist/components/main-menu/main-menu.d.ts +4 -4
  2. package/dist/components.js +57 -36
  3. package/dist/lib/control/form-control.d.ts +1 -0
  4. package/dist/main.js +4 -0
  5. package/package.json +3 -2
package/dist/components/main-menu/main-menu.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CustomElement } from '../../lib/main.js';
2
- import { TemplateResult } from 'lit';
2
+ import { PropertyValues, TemplateResult } from 'lit';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
5
  'odx-main-menu': OdxMainMenu;
@@ -8,9 +8,9 @@ declare global {
8
8
  export declare class OdxMainMenu extends CustomElement {
9
9
  #private;
10
10
  private links;
11
+ open: boolean;
12
+ constructor();
11
13
  connectedCallback(): void;
12
- toggle(): void;
13
- open(): void;
14
- close(): void;
15
14
  protected render(): TemplateResult;
15
+ protected willUpdate(props: PropertyValues<this>): void;
16
16
  }
package/dist/components.js CHANGED
@@ -713,7 +713,7 @@ __decorateClass([
713
713
  ], _OdxCard.prototype, "interactive", 2);
714
714
  let OdxCard = _OdxCard;
715
715
 
716
- const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_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-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);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;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}: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-color:var(--odx-color-stroke-focus-outer)}: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])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}: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]){--_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)}";
716
+ const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_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-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);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;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}: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-color:var(--odx-color-stroke-focus-outer)}: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([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)}: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)}";
717
717
 
718
718
  const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
719
719
  constructor() {
@@ -1950,7 +1950,7 @@ __decorateClass([
1950
1950
  ], _OdxInlineMessage.prototype, "variant", 2);
1951
1951
  let OdxInlineMessage = _OdxInlineMessage;
1952
1952
 
1953
- const styles$M = ":host{--_stroke-color: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_stroke-color);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-5);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;width:100%;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]:not([readonly])){--_stroke-color: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_stroke-color: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part=input]{cursor:default}}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
1953
+ const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-size-50);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color;outline:var(--odx-focus-ring-outline);outline-offset:-2px;border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--_icon-size: var(--odx-typography-font-size-5);--_icon-margin: 0;--odx-color-background-disabled-rest: transparent}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;width:100%;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-typography-font-size-5)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-within){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
1954
1954
 
1955
1955
  const _OdxInput = class _OdxInput extends FormControl {
1956
1956
  constructor() {
@@ -2403,9 +2403,31 @@ __decorateClass([
2403
2403
  ], _OdxLogo.prototype, "compact", 2);
2404
2404
  let OdxLogo = _OdxLogo;
2405
2405
 
2406
- const styles$E = ":host{--_transition-duration: var(--odx-motion-duration-default);display:grid;grid-template-rows:auto 1fr auto;transform:translate(-100%);transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);padding:0;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}.header,.link-navigation{padding:var(--odx-size-75) var(--odx-size-150)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){display:grid;transform:translate(0);visibility:visible;@starting-style{transform:translate(-100%);visibility:hidden}}:host::backdrop{transition:all var(--odx-motion-duration-default) linear;opacity:0;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
2406
+ const styles$E = ":host{transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto 1fr auto;transform:translate(-100%);transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default);border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}.header,.link-navigation{padding:var(--odx-size-75) var(--odx-size-150)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100)}.backdrop{position:fixed;inset:0;transition:all var(--odx-motion-duration-default) linear;opacity:0;z-index:-1;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){visibility:visible;@starting-style{visibility:hidden}.base{transform:translate(0);@starting-style{transform:translate(-100%)}}}:host(:popover-open) .backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
2407
2407
 
2408
2408
  const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
2409
+ constructor() {
2410
+ super();
2411
+ this.open = false;
2412
+ this.#handleSlotChange = () => {
2413
+ for (const link of this.links) {
2414
+ link.slot ||= "link-navigation";
2415
+ link.subtle = true;
2416
+ }
2417
+ };
2418
+ this.#handleToggle = (event) => {
2419
+ const shouldOpen = event.newState === "open";
2420
+ if (this.open === shouldOpen) return;
2421
+ this.open = shouldOpen;
2422
+ if (!this.open) return;
2423
+ waitForAnimations(this).then(() => {
2424
+ this.shadowRoot?.querySelector("[autofocus]")?.focus();
2425
+ });
2426
+ };
2427
+ if (!isServer) {
2428
+ this.addEventListener("toggle", this.#handleToggle);
2429
+ }
2430
+ }
2409
2431
  static {
2410
2432
  customElement("odx-main-menu", styles$E)(_OdxMainMenu);
2411
2433
  }
@@ -2413,45 +2435,44 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
2413
2435
  super.connectedCallback();
2414
2436
  this.popover = "auto";
2415
2437
  }
2416
- toggle() {
2417
- this.togglePopover();
2418
- }
2419
- open() {
2420
- this.showPopover();
2421
- }
2422
- close() {
2423
- this.hidePopover();
2424
- }
2425
2438
  render() {
2426
2439
  return html`
2427
- <odx-stack class="header">
2428
- <odx-stack horizontal justify="space-between">
2429
- <odx-logo size="sm"></odx-logo>
2430
- <odx-icon-button icon="core::close" variant="primary" @click=${this.close}></odx-icon-button>
2440
+ <div class="base">
2441
+ <odx-stack class="header">
2442
+ <odx-stack horizontal justify="space-between">
2443
+ <odx-logo size="sm"></odx-logo>
2444
+ <odx-icon-button icon="core::close" variant="primary" @click=${this.hidePopover} autofocus></odx-icon-button>
2445
+ </odx-stack>
2446
+ <odx-stack gap="xs">
2447
+ <slot name="title"></slot>
2448
+ <slot name="subtitle"></slot>
2449
+ </odx-stack>
2431
2450
  </odx-stack>
2432
- <odx-stack gap="xs">
2433
- <slot name="title"></slot>
2434
- <slot name="subtitle"></slot>
2451
+ <odx-stack role="navigation" class="navigation">
2452
+ <slot @slotchange=${this.#handleSlotChange}></slot>
2435
2453
  </odx-stack>
2436
- </odx-stack>
2437
- <odx-stack role="navigation" class="navigation">
2438
- <slot @slotchange=${this.#handleSlotChange}></slot>
2439
- </odx-stack>
2440
- <odx-stack class="link-navigation" gap="xs" horizontal wrap>
2441
- <slot name="link-navigation"></slot>
2442
- </odx-stack>
2454
+ <odx-stack class="link-navigation" gap="xs" horizontal wrap>
2455
+ <slot name="link-navigation"></slot>
2456
+ </odx-stack>
2457
+ </div>
2458
+ <div class="backdrop" @click=${this.hidePopover}></div>
2443
2459
  `;
2444
2460
  }
2445
- #handleSlotChange = () => {
2446
- for (const link of this.links) {
2447
- link.slot ||= "link-navigation";
2448
- link.subtle = true;
2461
+ willUpdate(props) {
2462
+ super.willUpdate(props);
2463
+ if (props.has("open")) {
2464
+ this.togglePopover(this.open);
2449
2465
  }
2450
- };
2466
+ }
2467
+ #handleSlotChange;
2468
+ #handleToggle;
2451
2469
  };
2452
2470
  __decorateClass([
2453
2471
  queryAssignedElements({ selector: "odx-link", flatten: true })
2454
2472
  ], _OdxMainMenu.prototype, "links", 2);
2473
+ __decorateClass([
2474
+ property({ type: Boolean, reflect: true, useDefault: true })
2475
+ ], _OdxMainMenu.prototype, "open", 2);
2455
2476
  let OdxMainMenu = _OdxMainMenu;
2456
2477
 
2457
2478
  class OdxMainMenuButton extends CustomElement {
@@ -2465,7 +2486,7 @@ class OdxMainMenuButton extends CustomElement {
2465
2486
  `;
2466
2487
  }
2467
2488
  #handleClick = () => {
2468
- document.querySelector("odx-main-menu")?.open();
2489
+ document.querySelector("odx-main-menu")?.showPopover();
2469
2490
  };
2470
2491
  }
2471
2492
 
@@ -3065,7 +3086,7 @@ __decorateClass([
3065
3086
  ], _OdxProgressBar.prototype, "variant", 2);
3066
3087
  let OdxProgressBar = _OdxProgressBar;
3067
3088
 
3068
- const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}}";
3089
+ const styles$s = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);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,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);border-radius:var(--odx-border-radius-circle);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-background-control-hover);--_indicator-color-stroke: var(--odx-color-stroke-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_indicator-color-background: var(--odx-color-stroke-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-background-control-selected);--_indicator-stroke-width: var(--odx-size-37)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-stroke: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_label-color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([readonly][checked]){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-background-control-rest) inset}}:host([disabled][checked]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-stroke: var(--odx-color-background-disabled-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-disabled-selected) inset}}:host([readonly][checked][invalid]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}}";
3069
3090
 
3070
3091
  class OdxRadioButton extends CheckboxFormControl {
3071
3092
  static {
@@ -3263,7 +3284,7 @@ __decorateClass([
3263
3284
  ], _OdxSearchBar.prototype, "readonly", 2);
3264
3285
  let OdxSearchBar = _OdxSearchBar;
3265
3286
 
3266
- 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-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:100%;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);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;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.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: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([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)}}}";
3287
+ 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-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:100%;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);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;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.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: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);.value{color: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)}}";
3267
3288
 
3268
3289
  const _OdxSelect = class _OdxSelect extends ListboxFormControl {
3269
3290
  constructor() {
@@ -3919,7 +3940,7 @@ __decorateClass([
3919
3940
  ], _OdxStatus.prototype, "variant", 2);
3920
3941
  let OdxStatus = _OdxStatus;
3921
3942
 
3922
- const styles$e = "@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:var(--odx-size-37) var(--odx-size-75);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;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):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-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}: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])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}: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}}";
3943
+ const styles$e = "@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:var(--odx-size-37) var(--odx-size-75);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;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}: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-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}: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([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)}: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)}}";
3923
3944
 
3924
3945
  class OdxSwitch extends CheckboxFormControl {
3925
3946
  static {
@@ -4315,7 +4336,7 @@ class OdxToggleButton extends CheckboxFormControl {
4315
4336
  }
4316
4337
  }
4317
4338
 
4318
- const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}";
4339
+ const styles$3 = ":host{display:inline-flex;gap:0;align-items:center}::slotted(*){margin-block:0}::slotted(odx-toggle-button:first-child){z-index:1;border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-toggle-button:last-child){border-start-start-radius:0;border-end-start-radius:0}::slotted(odx-toggle-button:not(:first-child,:last-child)){margin-inline:calc(-1 * var(--odx-border-width-thin));border-radius:0}::slotted(odx-toggle-button:is(:hover,:focus-within)){position:relative}::slotted(odx-toggle-button:not(:first-child,:last-child):is(:hover,:focus-within)){z-index:2}:host([block]){display:flex;::slotted(odx-toggle-button){width:100%}}:host([invalid]){::slotted(odx-toggle-button:not([checked],[disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest)}::slotted(odx-toggle-button:not([checked],[disabled],[readonly])){--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-background: var(--odx-color-background-danger-subtle)}::slotted(odx-toggle-button[checked]:not([disabled])){--_color-background: var(--odx-color-background-danger-rest)}::slotted(odx-toggle-button[checked][readonly]:not([disabled])){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
4319
4340
 
4320
4341
  const _OdxToggleButtonGroup = class _OdxToggleButtonGroup extends RadioGroupFormControl {
4321
4342
  constructor() {
package/dist/lib/control/form-control.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare abstract class FormControl<V extends string | number | string[] =
13
13
  value: V;
14
14
  readonly: boolean;
15
15
  required: boolean;
16
+ invalid: boolean;
16
17
  get form(): HTMLFormElement | null;
17
18
  get validity(): ValidityState;
18
19
  get validationMessage(): string;
package/dist/main.js CHANGED
@@ -135,6 +135,7 @@ class FormControl extends CanBeDisabled(CustomElement) {
135
135
  this.value = "";
136
136
  this.readonly = false;
137
137
  this.required = false;
138
+ this.invalid = false;
138
139
  this.internals = this.attachInternals();
139
140
  }
140
141
  static {
@@ -199,6 +200,9 @@ __decorateClass([
199
200
  __decorateClass([
200
201
  property({ type: Boolean, reflect: true, useDefault: true })
201
202
  ], FormControl.prototype, "required", 2);
203
+ __decorateClass([
204
+ property({ type: Boolean, reflect: true, useDefault: true })
205
+ ], FormControl.prototype, "invalid", 2);
202
206
 
203
207
  const LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
204
208
  class CheckboxFormControl extends FormControl {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@odx/foundation",
3
3
  "description": "A library of Web Component building blocks for ODX",
4
- "version": "1.0.0-beta.100",
4
+ "version": "1.0.0-beta.102",
5
5
  "author": "Drägerwerk AG & Co.KGaA",
6
6
  "license": "SEE LICENSE IN LICENSE",
7
7
  "homepage": "https://odx.draeger.com",
@@ -16,11 +16,12 @@
16
16
  "type": "module",
17
17
  "dependencies": {
18
18
  "@preact/signals-core": "1.8.0",
19
+ "@odx/assets-utils": "^3.1.1",
19
20
  "lit": "3.3.0"
20
21
  },
21
22
  "peerDependencies": {
22
23
  "@odx/design-tokens": "^1.0.2",
23
- "@odx/icons": "^4.0.0-rc.29"
24
+ "@odx/icons": "^4.0.0-rc.32"
24
25
  },
25
26
  "devDependencies": {
26
27
  "@custom-elements-manifest/analyzer": "0.10.4",