@sbb-esta/lyne-elements 1.3.0 → 1.4.0

package/checkbox/checkbox.js

@@ -1,23 +1,23 @@
-import { css as i, LitElement as r, html as h } from "lit";
-import { property as p, customElement as m } from "lit/decorators.js";
-import { slotState as u } from "../core/decorators.js";
-import { SbbIconNameMixin as f } from "../icon.js";
-import { SbbCheckboxCommonElementMixin as d, checkboxCommonStyle as x } from "./common.js";
+import { css as l, LitElement as r, html as p } from "lit";
+import { property as h, customElement as m } from "lit/decorators.js";
+import { slotState as d } from "../core/decorators.js";
+import { SbbIconNameMixin as x } from "../icon.js";
+import { SbbCheckboxCommonElementMixin as f, checkboxCommonStyle as u } from "./common.js";
 import "../visual-checkbox.js";
-const _ = i`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
-var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (a, s, t, c) => {
-  for (var e = c > 1 ? void 0 : c ? v(s, t) : s, n = a.length - 1, b; n >= 0; n--)
-    (b = a[n]) && (e = (c ? b(s, t, e) : b(e)) || e);
-  return c && e && k(s, t, e), e;
+const _ = l`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (a, s, c, n) => {
+  for (var e = n > 1 ? void 0 : n ? v(s, c) : s, t = a.length - 1, b; t >= 0; t--)
+    (b = a[t]) && (e = (n ? b(s, c, e) : b(e)) || e);
+  return n && e && k(s, c, e), e;
 };
-let o = class extends d(
-  f(r)
+let o = class extends f(
+  x(r)
 ) {
   constructor() {
     super(...arguments), this.iconPlacement = "end";
   }
   render() {
-    return h`
+    return p`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -40,16 +40,16 @@ let o = class extends d(
     `;
   }
 };
-o.styles = [x, _];
+o.styles = [u, _];
 o.events = {
   didChange: "didChange"
 };
-l([
-  p({ attribute: "icon-placement", reflect: !0 })
+i([
+  h({ attribute: "icon-placement", reflect: !0 })
 ], o.prototype, "iconPlacement", 2);
-o = l([
+o = i([
   m("sbb-checkbox"),
-  u()
+  d()
 ], o);
 export {
   o as SbbCheckboxElement

package/checkbox/common.js

@@ -1,13 +1,13 @@
-import { property as a } from "lit/decorators.js";
-import { SbbFormAssociatedCheckboxMixin as n } from "../core/mixins.js";
+import { property as c } from "lit/decorators.js";
+import { SbbFormAssociatedCheckboxMixin as a } from "../core/mixins.js";
 import { css as l } from "lit";
-var h = Object.defineProperty, p = Object.getOwnPropertyDescriptor, c = (o, t, b, e) => {
-  for (var s = e > 1 ? void 0 : e ? p(t, b) : t, i = o.length - 1, r; i >= 0; i--)
-    (r = o[i]) && (s = (e ? r(t, b, s) : r(s)) || s);
-  return e && s && h(t, b, s), s;
+var h = Object.defineProperty, p = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
+  for (var s = e > 1 ? void 0 : e ? p(t, i) : t, r = o.length - 1, b; r >= 0; r--)
+    (b = o[r]) && (s = (e ? b(t, i, s) : b(s)) || s);
+  return e && s && h(t, i, s), s;
 };
 const m = (o) => {
-  class t extends n(o) {
+  class t extends a(o) {
     constructor() {
       super(...arguments), this.indeterminate = !1, this._size = "m", this._group = null;
     }
@@ -40,13 +40,13 @@ const m = (o) => {
       this.indeterminate && (this.indeterminate = !1);
     }
   }
-  return c([
-    a({ type: Boolean })
-  ], t.prototype, "indeterminate", 2), c([
-    a({ reflect: !0 })
+  return n([
+    c({ type: Boolean })
+  ], t.prototype, "indeterminate", 2), n([
+    c({ reflect: !0 })
   ], t.prototype, "size", 1), t;
-}, g = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer;--sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x)}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;gap:var(--sbb-checkbox-label-gap);flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
+}, u = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
 export {
   m as SbbCheckboxCommonElementMixin,
-  g as checkboxCommonStyle
+  u as checkboxCommonStyle
 };

package/container/container.js

@@ -1,8 +1,8 @@
 import { css as l, LitElement as d, html as p } from "lit";
 import { property as c, customElement as u } from "lit/decorators.js";
-const h = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host(:not([expanded])[background-expanded]){background-color:var(--sbb-container-background-color)}.sbb-container{background-color:var(--sbb-container-background-color)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}`;
-var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (n, e, t, a) => {
-  for (var o = a > 1 ? void 0 : a ? x(e, t) : e, b = n.length - 1, i; b >= 0; b--)
+const h = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host(:not([expanded])[background-expanded]){background-color:var(--sbb-container-background-color)}.sbb-container{background-color:var(--sbb-container-background-color)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}`;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (n, e, t, a) => {
+  for (var o = a > 1 ? void 0 : a ? v(e, t) : e, b = n.length - 1, i; b >= 0; b--)
     (i = n[b]) && (o = (a ? i(e, t, o) : i(o)) || o);
   return a && o && f(e, t, o), o;
 };

package/core/mixins/form-associated-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B;IACtD,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;IAC/B,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;IAClC,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE;IAEvC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAExC,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IAEzB,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAC1D,CAAC,KACZ,WAAW,CAAC,0BAA0B,CAAC,GAAG,CA2J5C,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,EAAE,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}
+{"version":3,"file":"form-associated-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,0BAA0B;IACtD,IAAW,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IAC1C,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;IAC/B,IAAW,IAAI,IAAI,MAAM,CAAC;IAC1B,IAAW,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;IAClC,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE;IAEvC,IAAW,QAAQ,IAAI,aAAa,CAAC;IACrC,IAAW,iBAAiB,IAAI,MAAM,CAAC;IACvC,IAAW,YAAY,IAAI,OAAO,CAAC;IAEnC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAExC,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IAEzB,sBAAsB,CAAC,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC3D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;aACpC,iBAAiB,IAAI,IAAI;aACzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,MAAM,EAAE,iBAAiB,GACxB,IAAI;IAEP,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAC1D,CAAC,KACZ,WAAW,CAAC,0BAA0B,CAAC,GAAG,CAgK5C,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,EAAE,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,cAAc,CAAC"}

package/core/mixins.js

@@ -126,7 +126,9 @@ const A = (n) => {
      * @internal
      */
     formDisabledCallback(e) {
-      this.formDisabled = e;
+      Promise.resolve().then(() => {
+        this.formDisabled = e;
+      });
     }
     /** Should be called when form value is changed. */
     updateFormValue() {

package/core/overlay/overlay-trigger-attributes.d.ts

@@ -10,7 +10,7 @@ export declare function removeAriaOverlayTriggerAttributes(trigger: HTMLElement
 /**
  * Add meaningful aria attributes to trigger element of role='combobox'
  */
-export declare function setAriaComboBoxAttributes(trigger: HTMLElement, overlayId: string, expanded: boolean): void;
+export declare function setAriaComboBoxAttributes(trigger: HTMLElement, overlayId: string, expanded: boolean, hasPopup?: 'listbox' | 'grid'): void;
 /**
  * Remove aria attributes from trigger elements.
  */

package/core/overlay/overlay-trigger-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-trigger-attributes.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-trigger-attributes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,GAAG,QAAQ,EAC5B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,IAAI,CAQN;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAQhG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,GAChB,IAAI,CAYN;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAYxE"}
+{"version":3,"file":"overlay-trigger-attributes.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-trigger-attributes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,GAAG,QAAQ,EAC5B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,IAAI,CAQN;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAQhG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,GAAE,SAAS,GAAG,MAAkB,GACvC,IAAI,CAYN;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAYxE"}

package/core/overlay.js

@@ -105,8 +105,8 @@ function Y(t, e, n, i) {
 function M(t) {
   t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
 }
-function X(t, e, n) {
-  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
+function X(t, e, n, i = "listbox") {
+  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", i), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
 }
 function q(t) {
   t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));

package/core/styles/core.scss

@@ -85,6 +85,7 @@ sbb-form-field {
 // Hiding components until they are instantiated
 :is(
     sbb-autocomplete,
+    sbb-autocomplete-grid,
     sbb-dialog,
     sbb-menu,
     sbb-navigation,

package/core/styles/mixins/buttons.scss

@@ -1,7 +1,7 @@
-@use './a11y.scss';
-@use '../core/mediaqueries.scss';
-@use '../core/functions.scss';
-@use './typo.scss';
+@use './a11y';
+@use '../core/mediaqueries';
+@use '../core/functions';
+@use './typo';
 
 // ----------------------------------------------------------------------------------------------------
 // Buttons Mixins
@@ -29,19 +29,24 @@
     @include icon-button-variables-negative;
   }
 
-  :host(:is([disabled], [data-disabled])) {
+  :host(:is([disabled], [data-disabled], [data-group-disabled])) {
     @include icon-button-disabled(#{$button-selector});
   }
 
-  :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
+  :host(
+      :is(
+          [data-focus-visible],
+          :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
+        )
+    ) {
     @include icon-button-focus-visible(#{$button-selector});
   }
 
-  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) {
+  :host(:not([disabled], [data-disabled], [data-group-disabled], :active, [data-active]):hover) {
     @include icon-button-hover(#{$button-selector});
   }
 
-  :host(:not([disabled], [data-disabled]):is(:active, [data-active])) {
+  :host(:not([disabled], [data-disabled], [data-group-disabled]):is(:active, [data-active])) {
     @include icon-button-active(#{$button-selector});
   }
 }

package/core/styles/mixins/helpers.scss

@@ -41,6 +41,7 @@
     display: block;
     visibility: hidden;
     height: 0;
+    overflow: hidden;
   }
 }
 

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -1,5 +1,5 @@
 @use './a11y';
-@use '../core/functions.scss';
+@use '../core/functions';
 
 // ----------------------------------------------------------------------------------------------------
 // Bullet Mixins: Achieve the styling of a bullet

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -86,6 +86,7 @@ $sbb-color-platinum-alpha-20: rgba(205, 205, 205, 0.2);
 $sbb-color-aluminium: #d2d2d2;
 $sbb-color-silver: #dcdcdc;
 $sbb-color-cloud: #e5e5e5;
+$sbb-color-cloud-alpha-80: rgba(229, 229, 229, 0.8);
 $sbb-color-milk: #f6f6f6;
 $sbb-color-red: #eb0000;
 $sbb-color-red-alpha-0: rgba(235, 0, 0, 0);

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jun 2024 15:20:35 GMT
+ * Generated on Mon, 15 Jul 2024 09:40:16 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -138,6 +138,7 @@
   --sbb-color-aluminium: #d2d2d2;
   --sbb-color-silver: #dcdcdc;
   --sbb-color-cloud: #e5e5e5;
+  --sbb-color-cloud-alpha-80: rgba(229, 229, 229, 0.8);
   --sbb-color-milk: #f6f6f6;
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);

package/core.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jun 2024 15:20:35 GMT
+ * Generated on Mon, 15 Jul 2024 09:40:16 GMT
  */
 /**
  * Better font rendering (on OS X)
@@ -157,6 +157,7 @@
   --sbb-color-aluminium: #d2d2d2;
   --sbb-color-silver: #dcdcdc;
   --sbb-color-cloud: #e5e5e5;
+  --sbb-color-cloud-alpha-80: rgba(229, 229, 229, 0.8);
   --sbb-color-milk: #f6f6f6;
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
@@ -1249,6 +1250,7 @@ sbb-form-field[negative] textarea::-webkit-scrollbar-button, sbb-form-field[nega
 }
 
 :is(sbb-autocomplete,
+sbb-autocomplete-grid,
 sbb-dialog,
 sbb-menu,
 sbb-navigation,