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

package/option.pure.js

@@ -31,7 +31,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
         </span>
         ${this.renderTick()}
       </div>
-    `}}})();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)}
+    `}}})();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)}
 `,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`
       <!-- Icon -->
       ${this._isMultiple()?r:n` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.9.0-dev.1790241336",
+  "version": "5.9.0-dev.1790251713",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/23591ac477562f639fc46ff3e07c80511fbacd7e"
+    "https://github.com/sbb-design-systems/lyne-components/commit/67ed5fdbeb77d50d91f77ba1154321c1ae3bb54a"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1104,6 +1104,8 @@ summary {
   --sbb-alert-font-size: var(--sbb-text-font-size-s);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
   --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
+  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
   --sbb-breadcrumb-color: var(--sbb-color-granite);
   --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1589,6 +1591,8 @@ summary {
   --sbb-option-disabled-border-color: var(--sbb-color-graphite);
   --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
   --sbb-option-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-option-disabled-inset: 0.375rem;
+  --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
   --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-min-height: var(--sbb-size-element-s);
   --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1598,7 +1602,6 @@ summary {
   --sbb-option-icon-color: var(--sbb-color-metal);
   --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-option-focus-outline-offset: inherit;
-  --sbb-option-focus-outline-color: transparent;
   --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
   --sbb-option-font-size: var(--sbb-text-font-size-s);
   --sbb-option-hint-color: var(--sbb-color-metal);

package/standard-theme.css

@@ -1104,6 +1104,8 @@ summary {
   --sbb-alert-font-size: var(--sbb-text-font-size-s);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
   --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
+  --sbb-autocomplete-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-row-gap: var(--sbb-spacing-fixed-6x);
   --sbb-breadcrumb-color: var(--sbb-color-granite);
   --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1589,6 +1591,8 @@ summary {
   --sbb-option-disabled-border-color: var(--sbb-color-graphite);
   --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
   --sbb-option-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-option-disabled-inset: 0.375rem;
+  --sbb-option-disabled-border-radius: var(--sbb-border-radius-2x);
   --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-min-height: var(--sbb-size-element-s);
   --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
@@ -1598,7 +1602,6 @@ summary {
   --sbb-option-icon-color: var(--sbb-color-metal);
   --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-option-focus-outline-offset: inherit;
-  --sbb-option-focus-outline-color: transparent;
   --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
   --sbb-option-font-size: var(--sbb-text-font-size-s);
   --sbb-option-hint-color: var(--sbb-color-metal);