@sbb-esta/lyne-elements-dev 5.9.0-dev.1790246342 → 5.9.0-dev.1790251713

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 (25) hide show
  1. package/_index.scss +1 -0
  2. package/autocomplete/_autocomplete.global.scss +8 -0
  3. package/autocomplete.js +1 -1
  4. package/autocomplete.pure.js +7 -6
  5. package/core/styles/_theme.scss +4 -0
  6. package/custom-elements.json +1280 -251
  7. package/development/autocomplete/{autocomplete-base-element.d.ts → autocomplete/autocomplete-base-element.d.ts} +5 -4
  8. package/development/autocomplete/{autocomplete.component.d.ts → autocomplete/autocomplete.component.d.ts} +16 -2
  9. package/development/autocomplete/autocomplete-button/autocomplete-button.component.d.ts +34 -0
  10. package/development/autocomplete/autocomplete-row/autocomplete-row.component.d.ts +18 -0
  11. package/development/autocomplete.js +3 -1
  12. package/development/autocomplete.pure.d.ts +4 -2
  13. package/development/autocomplete.pure.js +144 -9
  14. package/development/option.pure.js +1 -1
  15. package/index.d.ts +3 -1
  16. package/index.js +3 -1
  17. package/lean-off-brand-theme.css +4 -1
  18. package/lean-safety-theme.css +4 -1
  19. package/lean-theme.css +4 -1
  20. package/off-brand-theme.css +4 -1
  21. package/option/_option.global.scss +2 -1
  22. package/option.pure.js +1 -1
  23. package/package.json +2 -2
  24. package/safety-theme.css +4 -1
  25. package/standard-theme.css +4 -1
package/development/autocomplete/{autocomplete-base-element.d.ts → autocomplete/autocomplete-base-element.d.ts} RENAMED
@@ -1,12 +1,12 @@
1
1
  import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues, type TemplateResult } from 'lit';
2
- import { SbbOpenCloseBaseElement } from '../core.ts';
3
- import { type SbbOptionBaseElement } from '../option.pure.ts';
2
+ import { SbbOpenCloseBaseElement } from '../../core.ts';
3
+ import { type SbbOptionBaseElement } from '../../option.pure.ts';
4
4
  export declare class SbbInputAutocompleteEvent<T> extends Event {
5
5
  private readonly _option;
6
6
  get option(): SbbOptionBaseElement<T>;
7
7
  constructor(option: SbbOptionBaseElement<T>);
8
8
  }
9
- declare const SbbAutocompleteBaseElement_base: import("../core.ts").AbstractConstructor<import("../core.ts").SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
9
+ declare const SbbAutocompleteBaseElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
10
10
  /**
11
11
  * Base class for autocomplete components.
12
12
  *
@@ -67,7 +67,8 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
67
67
  /** Returns the trigger element. */
68
68
  get triggerElement(): HTMLInputElement | null;
69
69
  private _triggerElement?;
70
- protected abstract overlayId: string;
70
+ protected get overlayId(): string;
71
+ protected abstract generatedId: string;
71
72
  protected abstract panelRole: string;
72
73
  protected activeOption: SbbOptionBaseElement<T> | null;
73
74
  protected pendingAutoSelectedOption: SbbOptionBaseElement<T> | null;
package/development/autocomplete/{autocomplete.component.d.ts → autocomplete/autocomplete.component.d.ts} RENAMED
@@ -1,4 +1,4 @@
1
- import type { SbbOptionElement } from '../option.pure.ts';
1
+ import type { SbbOptionElement } from '../../option.pure.ts';
2
2
  import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
3
3
  /**
4
4
  * Combined with a native input, it displays a panel with a list of available options.
@@ -14,13 +14,27 @@ import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
14
14
  export declare class SbbAutocompleteElement<T = string> extends SbbAutocompleteBaseElement<T> {
15
15
  static readonly elementName: string;
16
16
  static readonly role: string | null;
17
- protected overlayId: string;
17
+ protected generatedId: string;
18
18
  protected panelRole: string;
19
+ /** Index of the active element within the active option's row (0 = option, >0 = a button). */
20
+ private _activeColumnIndex;
19
21
  protected get options(): SbbOptionElement<T>[];
20
22
  protected syncNegative(): void;
21
23
  protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;
24
+ /**
25
+ * Select or activate an element on 'Enter' keypress.
26
+ * If a button is currently focused, it is clicked instead.
27
+ */
22
28
  protected selectByKeyboard(event: KeyboardEvent): void;
23
29
  protected setNextActiveOption(event?: KeyboardEvent): void;
30
+ /**
31
+ * Moves the active element horizontally within the active option's `sbb-autocomplete-row`,
32
+ * between the option itself and its `sbb-autocomplete-button`s.
33
+ * Does nothing if the active option is not wrapped in a row, or the row has no buttons.
34
+ */
35
+ private _setNextHorizontalActiveElement;
36
+ private _resetActiveButton;
37
+ private _elementsInRow;
24
38
  protected resetActiveElement(): void;
25
39
  protected setTriggerAttributes(element: HTMLInputElement): void;
26
40
  }
package/development/autocomplete/autocomplete-button/autocomplete-button.component.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
2
+ import { SbbActionBaseElement } from '../../core.ts';
3
+ import type { SbbOptGroupElement, SbbOptionElement } from '../../option.pure.ts';
4
+ declare const SbbAutocompleteButtonElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbDisabledMixinType> & import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbActionBaseElement;
5
+ /**
6
+ * It displays an icon-only button that can be used in a `sbb-autocomplete-row`.
7
+ *
8
+ * @slot icon - Slot used to display the icon, if one is set
9
+ */
10
+ export declare class SbbAutocompleteButtonElement extends SbbAutocompleteButtonElement_base {
11
+ static readonly elementName: string;
12
+ static readonly role = "button";
13
+ static styles: CSSResultGroup;
14
+ /** Gets the SbbOptionElement on the same row of the button. */
15
+ get option(): SbbOptionElement | null;
16
+ /** Gets the parent SbbOptGroupElement, if present. */
17
+ get optgroup(): SbbOptGroupElement | null;
18
+ constructor();
19
+ /**
20
+ * Whether the button is currently active.
21
+ * @internal
22
+ */
23
+ setActive(value: boolean): void;
24
+ protected willUpdate(changedProperties: PropertyValues<this>): void;
25
+ protected isDisabledExternally(): boolean;
26
+ private _updateInternals;
27
+ protected renderTemplate(): TemplateResult;
28
+ }
29
+ declare global {
30
+ interface HTMLElementTagNameMap {
31
+ 'sbb-autocomplete-button': SbbAutocompleteButtonElement;
32
+ }
33
+ }
34
+ export {};
package/development/autocomplete/autocomplete-row/autocomplete-row.component.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { type CSSResultGroup, type TemplateResult } from 'lit';
2
+ import { SbbElement } from '../../core.ts';
3
+ /**
4
+ * The component is used as a wrapper for an option and one or more action buttons.
5
+ *
6
+ * @slot - Use the unnamed slot to add a `sbb-option` followed by one or more `sbb-autocomplete-button` elements.
7
+ */
8
+ export declare class SbbAutocompleteRowElement extends SbbElement {
9
+ static readonly elementName: string;
10
+ static styles: CSSResultGroup;
11
+ constructor();
12
+ protected render(): TemplateResult;
13
+ }
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'sbb-autocomplete-row': SbbAutocompleteRowElement;
17
+ }
18
+ }
package/development/autocomplete.js CHANGED
@@ -1,9 +1,11 @@
1
- import { SbbAutocompleteElement } from "./autocomplete.pure.js";
1
+ import { SbbAutocompleteButtonElement, SbbAutocompleteElement, SbbAutocompleteRowElement } from "./autocomplete.pure.js";
2
2
 
3
3
  export * from "./autocomplete.pure.js"
4
4
 
5
5
  //#region src/elements/autocomplete.ts
6
6
  /** @entrypoint */
7
7
  SbbAutocompleteElement.define();
8
+ SbbAutocompleteButtonElement.define();
9
+ SbbAutocompleteRowElement.define();
8
10
 
9
11
  //#endregion
package/development/autocomplete.pure.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  /** @entrypoint */
2
- export * from './autocomplete/autocomplete-base-element.ts';
3
- export * from './autocomplete/autocomplete.component.ts';
2
+ export * from './autocomplete/autocomplete/autocomplete-base-element.ts';
3
+ export * from './autocomplete/autocomplete-button/autocomplete-button.component.ts';
4
+ export * from './autocomplete/autocomplete-row/autocomplete-row.component.ts';
5
+ export * from './autocomplete/autocomplete/autocomplete.component.ts';
package/development/autocomplete.pure.js CHANGED
@@ -3,14 +3,16 @@ import { ResizeController } from "@lit-labs/observers/resize-controller.js";
3
3
  import { html, isServer, nothing, unsafeCSS } from "lit";
4
4
  import { property } from "lit/decorators.js";
5
5
  import { ref } from "lit/directives/ref.js";
6
- import { SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
6
+ import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
7
7
  import { optionPanelStyles } from "./option.pure.js";
8
+ import { miniButtonStyle } from "./button.pure.js";
9
+ import { SbbIconNameMixin } from "./icon.pure.js";
8
10
 
9
- //#region src/elements/autocomplete/autocomplete-base-element.scss?inline
11
+ //#region src/elements/autocomplete/autocomplete/autocomplete-base-element.scss?inline
10
12
  var autocomplete_base_element_default = ":host {\n display: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n display: block;\n}\n";
11
13
 
12
14
  //#endregion
13
- //#region src/elements/autocomplete/autocomplete-base-element.ts
15
+ //#region src/elements/autocomplete/autocomplete/autocomplete-base-element.ts
14
16
  /**
15
17
  * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
16
18
  * On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
@@ -365,6 +367,9 @@ let SbbAutocompleteBaseElement = (() => {
365
367
  get triggerElement() {
366
368
  return this._triggerElement ?? null;
367
369
  }
370
+ get overlayId() {
371
+ return `${this.id}-overlay`;
372
+ }
368
373
  constructor() {
369
374
  super();
370
375
  this.#origin_accessor_storage = __runInitializers(this, _origin_initializers, null);
@@ -454,7 +459,7 @@ let SbbAutocompleteBaseElement = (() => {
454
459
  connectedCallback() {
455
460
  this.popover = "manual";
456
461
  super.connectedCallback();
457
- if (ariaRoleOnHost$1) this.id ||= this.overlayId;
462
+ this.id ||= this.generatedId;
458
463
  if (this.hasUpdated) this._componentSetup();
459
464
  this.syncNegative();
460
465
  }
@@ -691,7 +696,97 @@ let SbbAutocompleteBaseElement = (() => {
691
696
  })();
692
697
 
693
698
  //#endregion
694
- //#region src/elements/autocomplete/autocomplete.component.ts
699
+ //#region src/elements/autocomplete/autocomplete-button/autocomplete-button.component.ts
700
+ /**
701
+ * It displays an icon-only button that can be used in a `sbb-autocomplete-row`.
702
+ *
703
+ * @slot icon - Slot used to display the icon, if one is set
704
+ */
705
+ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMixin(SbbIconNameMixin(SbbActionBaseElement))) {
706
+ static {
707
+ this.elementName = "sbb-autocomplete-button";
708
+ }
709
+ static {
710
+ this.role = "button";
711
+ }
712
+ static {
713
+ this.styles = [miniButtonStyle];
714
+ }
715
+ /** Gets the SbbOptionElement on the same row of the button. */
716
+ get option() {
717
+ return this.closest("sbb-autocomplete-row")?.querySelector("sbb-option");
718
+ }
719
+ /** Gets the parent SbbOptGroupElement, if present. */
720
+ get optgroup() {
721
+ return this.closest("sbb-optgroup");
722
+ }
723
+ constructor() {
724
+ super();
725
+ this.internals.states.add("button");
726
+ if (!isServer) {
727
+ this.setupBaseEventHandlers();
728
+ this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), { disabled: () => this._updateInternals() }));
729
+ this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this.negative = e.negative }));
730
+ }
731
+ }
732
+ /**
733
+ * Whether the button is currently active.
734
+ * @internal
735
+ */
736
+ setActive(value) {
737
+ this.toggleState("focus-visible", value);
738
+ }
739
+ willUpdate(changedProperties) {
740
+ super.willUpdate(changedProperties);
741
+ if (changedProperties.has("disabled")) this._updateInternals();
742
+ }
743
+ isDisabledExternally() {
744
+ return this.optgroup?.disabled ?? false;
745
+ }
746
+ _updateInternals() {
747
+ if (this.disabled || this.optgroup?.disabled) {
748
+ this.internals.states.add("disabled");
749
+ this.internals.ariaDisabled = "true";
750
+ } else {
751
+ this.internals.states.delete("disabled");
752
+ this.internals.ariaDisabled = null;
753
+ }
754
+ }
755
+ renderTemplate() {
756
+ return super.renderIconSlot();
757
+ }
758
+ };
759
+
760
+ //#endregion
761
+ //#region src/elements/autocomplete/autocomplete-row/autocomplete-row.scss?inline
762
+ var autocomplete_row_default = ":host {\n display: flex;\n align-items: center;\n padding-inline-end: var(--sbb-autocomplete-row-padding-inline-end);\n gap: var(--sbb-autocomplete-row-gap);\n color: var(--sbb-option-color);\n background-color: var(--sbb-option-background-color);\n cursor: var(--sbb-option-cursor);\n -webkit-tap-highlight-color: transparent;\n -webkit-text-fill-color: var(--sbb-option-color);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-option-color: var(--sbb-color-3-negative);\n --sbb-option-background-color-hover: var(--sbb-background-color-3-negative);\n --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-hover);\n }\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-cursor: var(--sbb-cursor-default);\n position: relative;\n}\n:host(:is(:state(disabled),[state--disabled]))::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: var(--sbb-option-disabled-inset);\n border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n border-radius: var(--sbb-option-disabled-border-radius);\n background-color: var(--sbb-option-disabled-background-color);\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled]))::before {\n --sbb-option-disabled-border-color: GrayText;\n }\n}\n\n::slotted(sbb-option) {\n --sbb-option-background-color-active: var(--sbb-option-background-color-hover);\n --sbb-option-disabled-display: none;\n flex: 1 1 auto;\n margin-right: calc(-1 * var(--sbb-spacing-fixed-2x));\n overflow-x: hidden;\n}\n";
763
+
764
+ //#endregion
765
+ //#region src/elements/autocomplete/autocomplete-row/autocomplete-row.component.ts
766
+ /**
767
+ * The component is used as a wrapper for an option and one or more action buttons.
768
+ *
769
+ * @slot - Use the unnamed slot to add a `sbb-option` followed by one or more `sbb-autocomplete-button` elements.
770
+ */
771
+ var SbbAutocompleteRowElement = class extends SbbElement {
772
+ static {
773
+ this.elementName = "sbb-autocomplete-row";
774
+ }
775
+ static {
776
+ this.styles = [unsafeCSS(autocomplete_row_default)];
777
+ }
778
+ constructor() {
779
+ super();
780
+ this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this.toggleState("negative", e.negative) }));
781
+ this.addController(new SbbPropertyWatcherController(this, () => this.querySelector("sbb-option"), { disabled: (e) => this.toggleState("disabled", e.disabled) }));
782
+ }
783
+ render() {
784
+ return html`<slot></slot>`;
785
+ }
786
+ };
787
+
788
+ //#endregion
789
+ //#region src/elements/autocomplete/autocomplete/autocomplete.component.ts
695
790
  let nextId = 0;
696
791
  /**
697
792
  * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
@@ -712,8 +807,10 @@ const ariaRoleOnHost = isSafari;
712
807
  var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
713
808
  constructor() {
714
809
  super(...arguments);
715
- this.overlayId = `sbb-autocomplete-${++nextId}`;
810
+ this.generatedId = `sbb-autocomplete-${++nextId}`;
716
811
  this.panelRole = "listbox";
812
+ /** Index of the active element within the active option's row (0 = option, >0 = a button). */
813
+ this._activeColumnIndex = 0;
717
814
  }
718
815
  static {
719
816
  this.elementName = "sbb-autocomplete";
@@ -734,18 +831,28 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
734
831
  this.selectByKeyboard(event);
735
832
  break;
736
833
  case "ArrowDown":
737
- case "ArrowUp": this.setNextActiveOption(event);
834
+ case "ArrowUp":
835
+ this.setNextActiveOption(event);
836
+ break;
837
+ case "ArrowRight":
838
+ case "ArrowLeft": this._setNextHorizontalActiveElement(event);
738
839
  }
739
840
  }
841
+ /**
842
+ * Select or activate an element on 'Enter' keypress.
843
+ * If a button is currently focused, it is clicked instead.
844
+ */
740
845
  selectByKeyboard(event) {
741
846
  if (this.activeOption) {
742
847
  event.preventDefault();
743
- this.activeOption["selectViaUserInteraction"](true);
848
+ if (this._activeColumnIndex === 0) this.activeOption["selectViaUserInteraction"](true);
849
+ else this._elementsInRow()[this._activeColumnIndex]?.click();
744
850
  }
745
851
  }
746
852
  setNextActiveOption(event) {
747
853
  const enabledOptions = this.options.filter((opt) => !opt.matches(":is(:state(disabled),[state--disabled])"));
748
854
  this.activeOption?.setActive(false);
855
+ this._resetActiveButton();
749
856
  this.triggerElement.ariaActiveDescendantElement = null;
750
857
  if (!enabledOptions.length) {
751
858
  this.activeOption = null;
@@ -760,7 +867,35 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
760
867
  if (event) event.preventDefault();
761
868
  if (this.autoSelectActiveOption && event) this.setPendingSelection(this.activeOption);
762
869
  }
870
+ /**
871
+ * Moves the active element horizontally within the active option's `sbb-autocomplete-row`,
872
+ * between the option itself and its `sbb-autocomplete-button`s.
873
+ * Does nothing if the active option is not wrapped in a row, or the row has no buttons.
874
+ */
875
+ _setNextHorizontalActiveElement(event) {
876
+ if (!this.activeOption) return;
877
+ const elementsInRow = this._elementsInRow();
878
+ if (elementsInRow.length < 2) return;
879
+ event.preventDefault();
880
+ const nextIndex = getNextElementIndex(event, this._activeColumnIndex, elementsInRow.length);
881
+ const current = elementsInRow[this._activeColumnIndex];
882
+ const next = elementsInRow[nextIndex];
883
+ current.setActive(false);
884
+ next.setActive(true);
885
+ if (this.triggerElement) this.triggerElement.ariaActiveDescendantElement = next;
886
+ next.scrollIntoView({ block: "nearest" });
887
+ this._activeColumnIndex = nextIndex;
888
+ }
889
+ _resetActiveButton() {
890
+ if (this._activeColumnIndex === 0) return;
891
+ this._activeColumnIndex = 0;
892
+ this.activeOption?.closest("sbb-autocomplete-row")?.querySelectorAll("sbb-autocomplete-button").forEach((button) => button.setActive(false));
893
+ }
894
+ _elementsInRow(option = this.activeOption) {
895
+ return Array.from(option?.closest("sbb-autocomplete-row")?.querySelectorAll("sbb-option, sbb-autocomplete-button") ?? []).filter((el) => !el.matches(":is(:state(disabled),[state--disabled])"));
896
+ }
763
897
  resetActiveElement() {
898
+ this._resetActiveButton();
764
899
  this.activeOption?.setActive(false);
765
900
  this.activeOption = null;
766
901
  if (this.triggerElement) this.triggerElement.ariaActiveDescendantElement = null;
@@ -771,4 +906,4 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
771
906
  };
772
907
 
773
908
  //#endregion
774
- export { SbbAutocompleteBaseElement, SbbAutocompleteElement, SbbInputAutocompleteEvent };
909
+ export { SbbAutocompleteBaseElement, SbbAutocompleteButtonElement, SbbAutocompleteElement, SbbAutocompleteRowElement, SbbInputAutocompleteEvent };
package/development/option.pure.js CHANGED
@@ -606,7 +606,7 @@ let SbbOptionBaseElement = (() => {
606
606
 
607
607
  //#endregion
608
608
  //#region src/elements/option/option/option.scss?inline
609
- var option_default = ":host {\n --sbb-focus-outline-offset: var(--sbb-option-focus-outline-offset);\n display: block;\n background-color: var(--sbb-option-background-color);\n font-size: var(--sbb-option-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-option-color: var(--sbb-color-3-negative);\n --sbb-option-icon-color: var(--sbb-color-5);\n --sbb-option-background-color-hover: var(--sbb-color-midnight);\n --sbb-option-background-color-active: var(--sbb-background-color-4-negative);\n --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-option-min-height: var(--sbb-size-element-xxs);\n --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));\n --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-option-min-height: var(--sbb-size-element-s);\n --sbb-option-focus-outline-offset: inherit;\n --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-hover);\n }\n}\n\n:host(:active:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-active);\n}\n\n:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {\n display: none;\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-color: GrayText;\n }\n}\n\n:host(:is(:state(variant-select),[state--variant-select])) {\n --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);\n --sbb-option-justify-content: space-between;\n}\n\n:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {\n --sbb-option-justify-content: start;\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-option-focus-outline-color: var(--sbb-focus-outline-color);\n}\n\n:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n font-weight: bold;\n}\n@media (forced-colors: active) {\n :host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n color: Highlight;\n }\n}\n\n.sbb-option {\n position: relative;\n display: flex;\n min-height: var(--sbb-option-min-height);\n align-items: center;\n column-gap: var(--sbb-option-column-gap);\n padding-inline: var(--sbb-option-padding-inline);\n justify-content: var(--sbb-option-justify-content);\n color: var(--sbb-option-color);\n cursor: var(--sbb-option-cursor);\n -webkit-tap-highlight-color: transparent;\n -webkit-text-fill-color: var(--sbb-option-color);\n}\n.sbb-option::after {\n content: \"\";\n display: block;\n position: absolute;\n inset: var(--sbb-option-focus-outline-inset);\n pointer-events: none;\n border: var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);\n border-radius: var(--sbb-option-border-radius);\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {\n position: relative;\n z-index: 0;\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0.375rem;\n border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n border-radius: var(--sbb-border-radius-2x);\n background-color: var(--sbb-option-disabled-background-color);\n z-index: -1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n border-color: GrayText;\n }\n}\n\n.sbb-option__icon {\n display: flex;\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n color: var(--sbb-option-icon-color);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {\n display: var(--sbb-option-icon-container-display, none);\n}\n\n.sbb-option__label {\n text-overflow: var(--sbb-option-text-overflow);\n overflow: var(--sbb-option-overflow);\n white-space: var(--sbb-option-white-space, initial);\n}\n";
609
+ var option_default = ":host {\n --sbb-focus-outline-offset: var(--sbb-option-focus-outline-offset);\n display: block;\n background-color: var(--sbb-option-background-color);\n font-size: var(--sbb-option-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-option-color: var(--sbb-color-3-negative);\n --sbb-option-icon-color: var(--sbb-color-5);\n --sbb-option-background-color-hover: var(--sbb-color-midnight);\n --sbb-option-background-color-active: var(--sbb-background-color-4-negative);\n --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-option-min-height: var(--sbb-size-element-xxs);\n --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));\n --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n --sbb-option-min-height: var(--sbb-size-element-s);\n --sbb-option-focus-outline-offset: inherit;\n --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-hover);\n }\n}\n\n:host(:active:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-active);\n}\n\n:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {\n display: none;\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-color: GrayText;\n }\n}\n\n:host(:is(:state(variant-select),[state--variant-select])) {\n --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);\n --sbb-option-justify-content: space-between;\n}\n\n:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {\n --sbb-option-justify-content: start;\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-option-focus-outline-display: block;\n}\n\n:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n font-weight: bold;\n}\n@media (forced-colors: active) {\n :host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n color: Highlight;\n }\n}\n\n.sbb-option {\n position: relative;\n display: flex;\n min-height: var(--sbb-option-min-height);\n align-items: center;\n column-gap: var(--sbb-option-column-gap);\n padding-inline: var(--sbb-option-padding-inline);\n justify-content: var(--sbb-option-justify-content);\n color: var(--sbb-option-color);\n cursor: var(--sbb-option-cursor);\n -webkit-tap-highlight-color: transparent;\n -webkit-text-fill-color: var(--sbb-option-color);\n}\n.sbb-option::after {\n content: \"\";\n display: var(--sbb-option-focus-outline-display, none);\n position: absolute;\n inset: var(--sbb-option-focus-outline-inset);\n pointer-events: none;\n border: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);\n border-radius: var(--sbb-option-border-radius);\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {\n position: relative;\n z-index: 0;\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n content: \"\";\n display: var(--sbb-option-disabled-display, block);\n position: absolute;\n inset: var(--sbb-option-disabled-inset);\n border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n border-radius: var(--sbb-option-disabled-border-radius);\n background-color: var(--sbb-option-disabled-background-color);\n z-index: -1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n border-color: GrayText;\n }\n}\n\n.sbb-option__icon {\n display: flex;\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n color: var(--sbb-option-icon-color);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {\n display: var(--sbb-option-icon-container-display, none);\n}\n\n.sbb-option__label {\n text-overflow: var(--sbb-option-text-overflow);\n overflow: var(--sbb-option-overflow);\n white-space: var(--sbb-option-white-space, initial);\n}\n";
610
610
 
611
611
  //#endregion
612
612
  //#region src/elements/option/option/option.component.ts
package/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SbbAccordionElement } from "./accordion.js";
2
2
  import { SbbActionGroupElement } from "./action-group.js";
3
3
  import { SbbAlertElement, SbbAlertGroupElement } from "./alert.js";
4
- import { SbbAutocompleteElement } from "./autocomplete.js";
4
+ import { SbbAutocompleteButtonElement, SbbAutocompleteElement, SbbAutocompleteRowElement } from "./autocomplete.js";
5
5
  import { SbbBreadcrumbElement, SbbBreadcrumbGroupElement } from "./breadcrumb.js";
6
6
  import { SbbAccentButtonElement, SbbAccentButtonLinkElement, SbbAccentButtonStaticElement, SbbButtonElement, SbbButtonLinkElement, SbbButtonStaticElement, SbbMiniButtonElement, SbbMiniButtonGroupElement, SbbMiniButtonLinkElement, SbbSecondaryButtonElement, SbbSecondaryButtonLinkElement, SbbSecondaryButtonStaticElement, SbbTransparentButtonElement, SbbTransparentButtonLinkElement, SbbTransparentButtonStaticElement } from "./button.js";
7
7
  import { SbbCalendarDayElement, SbbCalendarElement, SbbCalendarMonthElement, SbbCalendarWeekdayElement, SbbCalendarWeeknumberElement, SbbCalendarYearElement } from "./calendar.js";
@@ -84,7 +84,9 @@ declare global {
84
84
  var SbbActionGroupElement: SbbActionGroupElement;
85
85
  var SbbAlertElement: SbbAlertElement;
86
86
  var SbbAlertGroupElement: SbbAlertGroupElement;
87
+ var SbbAutocompleteButtonElement: SbbAutocompleteButtonElement;
87
88
  var SbbAutocompleteElement: SbbAutocompleteElement;
89
+ var SbbAutocompleteRowElement: SbbAutocompleteRowElement;
88
90
  var SbbBlockLinkButtonElement: SbbBlockLinkButtonElement;
89
91
  var SbbBlockLinkElement: SbbBlockLinkElement;
90
92
  var SbbBlockLinkStaticElement: SbbBlockLinkStaticElement;
package/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SbbAccordionElement } from "./accordion.js";
2
2
  import { SbbActionGroupElement } from "./action-group.js";
3
3
  import { SbbAlertElement, SbbAlertGroupElement } from "./alert.js";
4
- import { SbbAutocompleteElement } from "./autocomplete.js";
4
+ import { SbbAutocompleteButtonElement, SbbAutocompleteElement, SbbAutocompleteRowElement } from "./autocomplete.js";
5
5
  import { SbbBreadcrumbElement, SbbBreadcrumbGroupElement } from "./breadcrumb.js";
6
6
  import { SbbAccentButtonElement, SbbAccentButtonLinkElement, SbbAccentButtonStaticElement, SbbButtonElement, SbbButtonLinkElement, SbbButtonStaticElement, SbbMiniButtonElement, SbbMiniButtonGroupElement, SbbMiniButtonLinkElement, SbbSecondaryButtonElement, SbbSecondaryButtonLinkElement, SbbSecondaryButtonStaticElement, SbbTransparentButtonElement, SbbTransparentButtonLinkElement, SbbTransparentButtonStaticElement } from "./button.js";
7
7
  import { SbbCalendarDayElement, SbbCalendarElement, SbbCalendarMonthElement, SbbCalendarWeekdayElement, SbbCalendarWeeknumberElement, SbbCalendarYearElement } from "./calendar.js";
@@ -84,7 +84,9 @@ globalThis.SbbAccordionElement = SbbAccordionElement;
84
84
  globalThis.SbbActionGroupElement = SbbActionGroupElement;
85
85
  globalThis.SbbAlertElement = SbbAlertElement;
86
86
  globalThis.SbbAlertGroupElement = SbbAlertGroupElement;
87
+ globalThis.SbbAutocompleteButtonElement = SbbAutocompleteButtonElement;
87
88
  globalThis.SbbAutocompleteElement = SbbAutocompleteElement;
89
+ globalThis.SbbAutocompleteRowElement = SbbAutocompleteRowElement;
88
90
  globalThis.SbbBlockLinkButtonElement = SbbBlockLinkButtonElement;
89
91
  globalThis.SbbBlockLinkElement = SbbBlockLinkElement;
90
92
  globalThis.SbbBlockLinkStaticElement = SbbBlockLinkStaticElement;
package/lean-off-brand-theme.css CHANGED
@@ -1084,6 +1084,8 @@ summary {
1084
1084
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1085
1085
  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1086
1086
  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1087
+ --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1088
+ --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1087
1089
  --sbb-breadcrumb-color: var(--sbb-color-granite);
1088
1090
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1089
1091
  --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1569,6 +1571,8 @@ summary {
1569
1571
  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1570
1572
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1571
1573
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1574
+ --sbb-option-disabled-inset: 0.375rem;
1575
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
1572
1576
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1573
1577
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1574
1578
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1578,7 +1582,6 @@ summary {
1578
1582
  --sbb-option-icon-color: var(--sbb-color-metal);
1579
1583
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1580
1584
  --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
1581
- --sbb-option-focus-outline-color: transparent;
1582
1585
  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
1583
1586
  --sbb-option-font-size: var(--sbb-text-font-size-s);
1584
1587
  --sbb-option-hint-color: var(--sbb-color-metal);
package/lean-safety-theme.css CHANGED
@@ -1104,6 +1104,8 @@ summary {
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
1105
  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
1106
  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1107
+ --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
+ --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1107
1109
  --sbb-breadcrumb-color: var(--sbb-color-granite);
1108
1110
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1109
1111
  --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1589,6 +1591,8 @@ summary {
1589
1591
  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1590
1592
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1591
1593
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1594
+ --sbb-option-disabled-inset: 0.375rem;
1595
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
1592
1596
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1593
1597
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1594
1598
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1598,7 +1602,6 @@ summary {
1598
1602
  --sbb-option-icon-color: var(--sbb-color-metal);
1599
1603
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1600
1604
  --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
1601
- --sbb-option-focus-outline-color: transparent;
1602
1605
  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
1603
1606
  --sbb-option-font-size: var(--sbb-text-font-size-s);
1604
1607
  --sbb-option-hint-color: var(--sbb-color-metal);
package/lean-theme.css CHANGED
@@ -1104,6 +1104,8 @@ summary {
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
1105
  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
1106
1106
  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
1107
+ --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
+ --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1107
1109
  --sbb-breadcrumb-color: var(--sbb-color-granite);
1108
1110
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1109
1111
  --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1589,6 +1591,8 @@ summary {
1589
1591
  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1590
1592
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1591
1593
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1594
+ --sbb-option-disabled-inset: 0.375rem;
1595
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
1592
1596
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1593
1597
  --sbb-option-min-height: var(--sbb-size-element-xxs);
1594
1598
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1598,7 +1602,6 @@ summary {
1598
1602
  --sbb-option-icon-color: var(--sbb-color-metal);
1599
1603
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1600
1604
  --sbb-option-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
1601
- --sbb-option-focus-outline-color: transparent;
1602
1605
  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
1603
1606
  --sbb-option-font-size: var(--sbb-text-font-size-s);
1604
1607
  --sbb-option-hint-color: var(--sbb-color-metal);
package/off-brand-theme.css CHANGED
@@ -1084,6 +1084,8 @@ summary {
1084
1084
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1085
1085
  --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1086
1086
  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1087
+ --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1088
+ --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1087
1089
  --sbb-breadcrumb-color: var(--sbb-color-granite);
1088
1090
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1089
1091
  --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1569,6 +1571,8 @@ summary {
1569
1571
  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1570
1572
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1571
1573
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1574
+ --sbb-option-disabled-inset: 0.375rem;
1575
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
1572
1576
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1573
1577
  --sbb-option-min-height: var(--sbb-size-element-s);
1574
1578
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1578,7 +1582,6 @@ summary {
1578
1582
  --sbb-option-icon-color: var(--sbb-color-metal);
1579
1583
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1580
1584
  --sbb-option-focus-outline-offset: inherit;
1581
- --sbb-option-focus-outline-color: transparent;
1582
1585
  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
1583
1586
  --sbb-option-font-size: var(--sbb-text-font-size-s);
1584
1587
  --sbb-option-hint-color: var(--sbb-color-metal);
package/option/_option.global.scss CHANGED
@@ -21,6 +21,8 @@ $theme: 'standard' !default;
21
21
  --sbb-option-background-color-active: var(--sbb-background-color-4);
22
22
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
23
23
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
24
+ --sbb-option-disabled-inset: #{sbb.px-to-rem-build(6)};
25
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
24
26
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
25
27
  --sbb-option-min-height: #{sbb.theme-pattern-select(
26
28
  (
@@ -41,7 +43,6 @@ $theme: 'standard' !default;
41
43
  ),
42
44
  $theme
43
45
  )};
44
- --sbb-option-focus-outline-color: transparent;
45
46
  --sbb-option-focus-outline-inset: #{sbb.theme-pattern-select(
46
47
  (
47
48
  'standard': var(--sbb-spacing-fixed-1x),
package/option.pure.js CHANGED
@@ -31,7 +31,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
31
31
  </span>
32
32
  ${this.renderTick()}
33
33
  </div>
34
- `}}})();var A=`:host{--sbb-focus-outline-offset:var(--sbb-option-focus-outline-offset);background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-letter-spacing-text);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-icon-color:var(--sbb-color-5);--sbb-option-background-color-hover:var(--sbb-color-midnight);--sbb-option-background-color-active:var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color:var(--sbb-border-color-5);--sbb-option-disabled-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-min-height:var(--sbb-size-element-xxs);--sbb-option-focus-outline-offset:calc(-1 * var(--sbb-spacing-fixed-1x));--sbb-option-focus-outline-inset:0 var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-min-height:var(--sbb-size-element-s);--sbb-option-focus-outline-offset:inherit;--sbb-option-focus-outline-inset:var(--sbb-spacing-fixed-1x)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color:GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap:var(--sbb-spacing-fixed-2x);--sbb-option-justify-content:space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content:start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color:var(--sbb-focus-outline-color)}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:highlight}}.sbb-option{min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);display:flex;position:relative}.sbb-option:after{content:"";inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius);display:block;position:absolute}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{z-index:0;position:relative}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:"";border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1;display:block;position:absolute;inset:.375rem}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:graytext}}.sbb-option__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color);display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display,none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space,initial)}
34
+ `}}})();var A=`:host{--sbb-focus-outline-offset:var(--sbb-option-focus-outline-offset);background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-letter-spacing-text);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color:var(--sbb-color-3-negative);--sbb-option-icon-color:var(--sbb-color-5);--sbb-option-background-color-hover:var(--sbb-color-midnight);--sbb-option-background-color-active:var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color:var(--sbb-border-color-5);--sbb-option-disabled-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:state(size-s),[state--size-s])){--sbb-option-min-height:var(--sbb-size-element-xxs);--sbb-option-focus-outline-offset:calc(-1 * var(--sbb-spacing-fixed-1x));--sbb-option-focus-outline-inset:0 var(--sbb-spacing-fixed-1x)}:host(:is(:state(size-m),[state--size-m])){--sbb-option-min-height:var(--sbb-size-element-s);--sbb-option-focus-outline-offset:inherit;--sbb-option-focus-outline-inset:var(--sbb-spacing-fixed-1x)}@media (any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color:var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color:GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap:var(--sbb-spacing-fixed-2x);--sbb-option-justify-content:space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content:start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-display:block}:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors:active){:host(:not(:is(:state(disabled),[state--disabled]))) .sbb-option__label--highlight{color:highlight}}.sbb-option{min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color);display:flex;position:relative}.sbb-option:after{content:"";display:var(--sbb-option-focus-outline-display,none);inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-option-border-radius);position:absolute}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{z-index:0;position:relative}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:"";display:var(--sbb-option-disabled-display,block);inset:var(--sbb-option-disabled-inset);border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-option-disabled-border-radius);background-color:var(--sbb-option-disabled-background-color);z-index:-1;position:absolute}@media (forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:graytext}}.sbb-option__icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color);display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display,none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space,initial)}
35
35
  `,j=class extends k{static{this.elementName=`sbb-option`}static{this.elementDependencies=[y]}static{this.role=`option`}static{this.styles=[i(A)]}static{this.events={optionselectionchange:`optionselectionchange`,optionselected:`optionselected`}}set _variant(e){this._variantInternal&&this.internals.states.delete(`variant-${this._variantInternal}`),this._variantInternal=e,this._variantInternal&&this.internals.states.add(`variant-${this._variantInternal}`)}get _variant(){return this._variantInternal??null}constructor(){super(),this.addController(new u(this,()=>this.closest(`sbb-optgroup`),{disabled:e=>this.disabledFromGroup=e.disabled,label:e=>this.groupLabel=e.label})),this.addController(new u(this,()=>this.closest(`sbb-select`),{multiple:e=>{this.toggleState(`multiple`,e.multiple),this.requestUpdate()},negative:e=>this._handleNegativeChange(e)}))}_isMultiple(){return!this.hydrationRequired&&this.matches?.(`:is(:state(multiple),[state--multiple])`)}_handleNegativeChange(e){this.toggleState(`negative`,e.negative),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.hydrationRequired?this.hydrationComplete.then(()=>this._init()):this._init()}_init(){this._setVariantByContext(),this.handleHighlightState()}selectByClick(e){if(this.disabled||this.disabledFromGroup){e.stopPropagation();return}this._isMultiple()?(e.stopPropagation(),this.selectViaUserInteraction(!this.selected)):this.selectViaUserInteraction(!0)}selectViaUserInteraction(e){super.selectViaUserInteraction(e),this.dispatchEvent(new Event(`optionselectionchange`,{bubbles:!0,composed:!0}))}_setVariantByContext(){this.closest?.(`sbb-autocomplete`)?this._variant=`autocomplete`:this.closest?.(`sbb-select`)&&(this._variant=`select`)}handleHighlightState(){if(this._variant!==`autocomplete`){this.updateDisableHighlight(!0);return}super.handleHighlightState()}renderIcon(){return n`
36
36
  <!-- Icon -->
37
37
  ${this._isMultiple()?r:n` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "5.9.0-dev.1790246342",
3
+ "version": "5.9.0-dev.1790251713",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/15a73bd35b85e9cb83dd88b549f98637c8ac736a"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/67ed5fdbeb77d50d91f77ba1154321c1ae3bb54a"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {
package/safety-theme.css CHANGED
@@ -1104,6 +1104,8 @@ summary {
1104
1104
  --sbb-alert-font-size: var(--sbb-text-font-size-s);
1105
1105
  --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1106
1106
  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1107
+ --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
1108
+ --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
1107
1109
  --sbb-breadcrumb-color: var(--sbb-color-granite);
1108
1110
  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1109
1111
  --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1589,6 +1591,8 @@ summary {
1589
1591
  --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1590
1592
  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1591
1593
  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1594
+ --sbb-option-disabled-inset: 0.375rem;
1595
+ --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
1592
1596
  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1593
1597
  --sbb-option-min-height: var(--sbb-size-element-s);
1594
1598
  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1598,7 +1602,6 @@ summary {
1598
1602
  --sbb-option-icon-color: var(--sbb-color-metal);
1599
1603
  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1600
1604
  --sbb-option-focus-outline-offset: inherit;
1601
- --sbb-option-focus-outline-color: transparent;
1602
1605
  --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
1603
1606
  --sbb-option-font-size: var(--sbb-text-font-size-s);
1604
1607
  --sbb-option-hint-color: var(--sbb-color-metal);