@sbb-esta/lyne-elements-dev 5.10.0-dev.1791443470 → 5.10.0-dev.1791460555

package/chip/_chip.global.scss

@@ -12,7 +12,7 @@ $theme: 'standard' !default;
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: #{sbb.px-to-rem-build(24)};
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: #{sbb.px-to-rem-build(150)};
   --_sbb-chip-group-margin-block-start-default: #{sbb.px-to-rem-build(2)};

package/chip-label.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";var o=`:host{height:var(--sbb-chip-label-fixed-height,calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-letter-spacing-text);justify-content:center;align-items:center;display:inline-flex}@media (forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}:host([color=charcoal]){--sbb-chip-label-color:var(--sbb-color-2-inverted);--sbb-chip-label-background-color:var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-cloud));--sbb-chip-label-background-color:var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color:var(--sbb-color-2-inverted);--sbb-chip-label-background-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host([size=xxxs]){--sbb-chip-label-fixed-height:1rem}:host([size=xs]){--sbb-chip-label-padding-block:var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline:var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block:var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline:var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size:var(--sbb-text-font-size-s)}.sbb-chip__text-wrapper{white-space:nowrap;text-overflow:ellipsis;line-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size));line-height:round(down, var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size), 2px);display:inline-block;overflow:hidden}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";var o=`:host{height:var(--sbb-chip-label-fixed-height,calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-letter-spacing-text);justify-content:center;align-items:center;display:inline-flex}@media (forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}:host([color=charcoal]){--sbb-chip-label-color:var(--sbb-color-2-inverted);--sbb-chip-label-background-color:var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-cloud));--sbb-chip-label-background-color:var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color:var(--sbb-color-2-inverted);--sbb-chip-label-background-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host([size=xxxs]){--sbb-chip-label-fixed-height:1rem;--sbb-chip-label-padding-inline:var(--sbb-spacing-fixed-1x)}:host([size=xs]){--sbb-chip-label-padding-block:var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline:var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block:var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline:var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size:var(--sbb-text-font-size-s)}.sbb-chip__text-wrapper{white-space:nowrap;text-overflow:ellipsis;line-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size));line-height:round(down, var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size), 2px);display:inline-block;overflow:hidden}
 `;let s=(()=>{let s=a,c,l=[],u=[],d,f=[],p=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[i({reflect:!0})],d=[i({reflect:!0})],e(this,null,c,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},l,u),e(this,null,d,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},f,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-label`}static{this.styles=[r(o)]}#e=t(this,l,`xxs`);get size(){return this.#e}set size(e){this.#e=e}#t=(t(this,u),t(this,f,`milk`));get color(){return this.#t}set color(e){this.#t=e}render(){return n`
       <span class="sbb-chip__text-wrapper">
         <slot></slot>

package/chip.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbElement as s,SbbFormAssociatedMixin as c,SbbLanguageController as l,SbbNegativeMixin as u,SbbPropertyWatcherController as d,SbbReadonlyMixin as f,SbbRequiredMixin as p,forceType as m,getNextElementIndex as h,i18nChipDelete as g,i18nChipGroupInputDescription as _,i18nSelectionRequired as v,isArrowKeyPressed as y,screenReaderOnlyStyles as b}from"./core.js";import{SbbMiniButtonElement as x}from"./button.pure.js";var S=`:host{--sbb-chip-border:var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height);align-items:stretch;display:inline-flex}:host(:focus){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset:-.0625rem;--sbb-focus-outline-style:initial}:host([negative]){--sbb-chip-border-color:var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color:var(--sbb-background-color-3-negative);--sbb-chip-color:var(--sbb-color-4-negative);--sbb-chip-color-hover:var(--sbb-color-2-negative);--sbb-chip-background-color-active:var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover:var(--sbb-background-color-1-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);padding-inline:var(--sbb-chip-label-padding-inline);border-inline-end:none;outline:none;align-items:center;display:flex;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-chip-font-size);letter-spacing:var(--sbb-letter-spacing-text);transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing);display:inline-block;overflow:hidden}.sbb-chip__delete{--sbb-mini-button-border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text:var(--sbb-chip-color);--sbb-mini-button-color-active-background:var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background:var(--sbb-chip-background-color-hover);--sbb-icon-svg-width:calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height:calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text:var(--sbb-chip-color-hover)}}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbElement as s,SbbFormAssociatedMixin as c,SbbLanguageController as l,SbbNegativeMixin as u,SbbPropertyWatcherController as d,SbbReadonlyMixin as f,SbbRequiredMixin as p,forceType as m,getNextElementIndex as h,i18nChipDelete as g,i18nChipGroupInputDescription as _,i18nSelectionRequired as v,isArrowKeyPressed as y,screenReaderOnlyStyles as b}from"./core.js";import{SbbMiniButtonElement as x}from"./button.pure.js";var S=`:host{--sbb-chip-border:var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height);align-items:stretch;display:inline-flex}:host(:focus){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset:-.0625rem;--sbb-focus-outline-style:initial}:host([negative]){--sbb-chip-border-color:var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color:var(--sbb-background-color-3-negative);--sbb-chip-color:var(--sbb-color-4-negative);--sbb-chip-color-hover:var(--sbb-color-2-negative);--sbb-chip-background-color-active:var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover:var(--sbb-background-color-1-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);padding-inline:var(--sbb-chip-padding-inline);border-inline-end:none;outline:none;align-items:center;display:flex;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-chip-font-size);letter-spacing:var(--sbb-letter-spacing-text);transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing);display:inline-block;overflow:hidden}.sbb-chip__delete{--sbb-mini-button-border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text:var(--sbb-chip-color);--sbb-mini-button-color-active-background:var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background:var(--sbb-chip-background-color-hover);--sbb-icon-svg-width:calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height:calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text:var(--sbb-chip-color-hover)}}
 `;let C=(()=>{let r=u(o(f(s))),c,d=[],p=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,d,null),this._language=(t(this,p),new l(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[a()],e(this,null,c,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},d,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip`}static{this.elementDependencies=[x]}static{this.role=`option`}static{this.styles=[b,i(S)]}static{this.events={requestdelete:`requestdelete`,delete:`delete`}}#e;get value(){return this.#e}set value(e){this.#e=e}willUpdate(e){super.willUpdate(e),e.has(`disabled`)&&(this.disabled?this.removeAttribute(`tabindex`):this.setAttribute(`tabindex`,`-1`))}firstUpdated(e){super.firstUpdated(e),setTimeout(()=>this._deleteButton().removeAttribute(`tabindex`))}_deleteButton(){return this.shadowRoot.querySelector(`sbb-mini-button`)}_handleDeleteButtonClick(){this.dispatchEvent(new Event(`requestdelete`,{bubbles:!0,composed:!0}))}dispatchDeleteEvent(){this.dispatchEvent(new Event(`delete`,{bubbles:!0,composed:!0}))}render(){return n`
       <div class="sbb-chip__label-wrapper">
         <span class="sbb-chip__label">

package/development/chip-label.pure.js

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
 import { SbbElement } from "./core.js";
 
 //#region src/elements/chip-label/chip-label.scss?inline
-var chip_label_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--sbb-chip-label-fixed-height, calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));\n  background-color: var(--sbb-chip-label-background-color);\n  padding-inline: var(--sbb-chip-label-padding-inline);\n  border-radius: var(--sbb-border-radius-infinity);\n  color: var(--sbb-chip-label-color);\n  font-size: var(--sbb-chip-label-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n@media (forced-colors: active) {\n  :host {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n    outline-offset: calc(-1 * var(--sbb-border-width-1x));\n  }\n}\n\n:host([color=charcoal]) {\n  --sbb-chip-label-color: var(--sbb-color-2-inverted);\n  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([color=white]) {\n  --sbb-chip-label-color: var(--sbb-color-granite);\n  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));\n  --sbb-chip-label-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=granite]) {\n  --sbb-chip-label-color: var(--sbb-color-2-inverted);\n  --sbb-chip-label-background-color: var(--sbb-color-granite);\n  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host([size=xxxs]) {\n  --sbb-chip-label-fixed-height: 1rem;\n}\n\n:host([size=xs]) {\n  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);\n  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);\n  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);\n}\n\n.sbb-chip__text-wrapper {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  line-height: calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size));\n  line-height: round(down, var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size), 2px);\n}\n";
+var chip_label_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--sbb-chip-label-fixed-height, calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2));\n  background-color: var(--sbb-chip-label-background-color);\n  padding-inline: var(--sbb-chip-label-padding-inline);\n  border-radius: var(--sbb-border-radius-infinity);\n  color: var(--sbb-chip-label-color);\n  font-size: var(--sbb-chip-label-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n@media (forced-colors: active) {\n  :host {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n    outline-offset: calc(-1 * var(--sbb-border-width-1x));\n  }\n}\n\n:host([color=charcoal]) {\n  --sbb-chip-label-color: var(--sbb-color-2-inverted);\n  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);\n}\n\n:host([color=white]) {\n  --sbb-chip-label-color: var(--sbb-color-granite);\n  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));\n  --sbb-chip-label-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=granite]) {\n  --sbb-chip-label-color: var(--sbb-color-2-inverted);\n  --sbb-chip-label-background-color: var(--sbb-color-granite);\n  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host([size=xxxs]) {\n  --sbb-chip-label-fixed-height: 1rem;\n  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-1x);\n}\n\n:host([size=xs]) {\n  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);\n  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);\n}\n\n:host([size=s]) {\n  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);\n  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);\n  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);\n}\n\n.sbb-chip__text-wrapper {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  line-height: calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size));\n  line-height: round(down, var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size), 2px);\n}\n";
 
 //#endregion
 //#region src/elements/chip-label/chip-label.component.ts

package/development/chip.pure.js

@@ -5,7 +5,7 @@ import { SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, SbbLanguageContro
 import { SbbMiniButtonElement } from "./button.pure.js";
 
 //#region src/elements/chip/chip/chip.scss?inline
-var chip_default = ":host {\n  --sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);\n  --sbb-chip-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: inline-flex;\n  align-items: stretch;\n  background-color: var(--sbb-chip-background-color);\n  border-radius: var(--sbb-chip-border-radius);\n  color: var(--sbb-chip-color);\n  height: var(--sbb-chip-height);\n}\n\n:host(:focus) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  --sbb-focus-outline-offset: -0.0625rem;\n  --sbb-focus-outline-style: initial;\n}\n\n:host([negative]) {\n  --sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);\n  --sbb-chip-background-color: var(--sbb-background-color-3-negative);\n  --sbb-chip-color: var(--sbb-color-4-negative);\n  --sbb-chip-color-hover: var(--sbb-color-2-negative);\n  --sbb-chip-background-color-active: var(--sbb-background-color-1-negative);\n  --sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-chip__label-wrapper {\n  border: var(--sbb-chip-border);\n  border-inline-end: none;\n  border-radius: var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);\n  display: flex;\n  align-items: center;\n  padding-inline: var(--sbb-chip-label-padding-inline);\n  outline: none;\n  overflow: hidden;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__label-wrapper {\n  border: var(--sbb-chip-border);\n  border-radius: var(--sbb-chip-border-radius);\n}\n\n.sbb-chip__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  font-size: var(--sbb-chip-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  transition: transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing);\n}\n\n.sbb-chip__delete {\n  --sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n  --sbb-mini-button-color-text: var(--sbb-chip-color);\n  --sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);\n  --sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);\n  --sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n  --sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n  --_sbb-mini-button-image-size: ;\n  border: var(--sbb-chip-border);\n  border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__delete {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:not([disabled])) .sbb-chip__delete:hover {\n    --sbb-mini-button-color-text: var(--sbb-chip-color-hover);\n  }\n}\n";
+var chip_default = ":host {\n  --sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);\n  --sbb-chip-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: inline-flex;\n  align-items: stretch;\n  background-color: var(--sbb-chip-background-color);\n  border-radius: var(--sbb-chip-border-radius);\n  color: var(--sbb-chip-color);\n  height: var(--sbb-chip-height);\n}\n\n:host(:focus) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  --sbb-focus-outline-offset: -0.0625rem;\n  --sbb-focus-outline-style: initial;\n}\n\n:host([negative]) {\n  --sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);\n  --sbb-chip-background-color: var(--sbb-background-color-3-negative);\n  --sbb-chip-color: var(--sbb-color-4-negative);\n  --sbb-chip-color-hover: var(--sbb-color-2-negative);\n  --sbb-chip-background-color-active: var(--sbb-background-color-1-negative);\n  --sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n.sbb-chip__label-wrapper {\n  border: var(--sbb-chip-border);\n  border-inline-end: none;\n  border-radius: var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);\n  display: flex;\n  align-items: center;\n  padding-inline: var(--sbb-chip-padding-inline);\n  outline: none;\n  overflow: hidden;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__label-wrapper {\n  border: var(--sbb-chip-border);\n  border-radius: var(--sbb-chip-border-radius);\n}\n\n.sbb-chip__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: inline-block;\n  font-size: var(--sbb-chip-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  transition: transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing);\n}\n\n.sbb-chip__delete {\n  --sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n  --sbb-mini-button-color-text: var(--sbb-chip-color);\n  --sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);\n  --sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);\n  --sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n  --sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);\n  --_sbb-mini-button-image-size: ;\n  border: var(--sbb-chip-border);\n  border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;\n}\n:host(:is([disabled], [readonly])) .sbb-chip__delete {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:not([disabled])) .sbb-chip__delete:hover {\n    --sbb-mini-button-color-text: var(--sbb-chip-color-hover);\n  }\n}\n";
 
 //#endregion
 //#region src/elements/chip/chip/chip.component.ts

package/lean-off-brand-theme.css

@@ -1245,7 +1245,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;

package/lean-safety-theme.css

@@ -1265,7 +1265,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;

package/lean-theme.css

@@ -1265,7 +1265,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;

package/off-brand-theme.css

@@ -1245,7 +1245,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.10.0-dev.1791443470",
+  "version": "5.10.0-dev.1791460555",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/22322304912f85f92d2447b6456134d2fcd5b1c7"
+    "https://github.com/sbb-design-systems/lyne-components/commit/e387b71113802cee2db04c095de8e30a9d7b3f1b"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1265,7 +1265,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;

package/standard-theme.css

@@ -1265,7 +1265,7 @@ summary {
   --sbb-chip-color-hover: var(--sbb-color-2);
   --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-height: 1.5rem;
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
   --sbb-chip-group-input-min-width: 9.375rem;
   --_sbb-chip-group-margin-block-start-default: 0.125rem;