@sbb-esta/lyne-elements 4.4.0 → 4.5.1

package/core/a11y/focus-trap-controller.js

@@ -1,5 +1,5 @@
 import { interactivityChecker as i } from "./interactivity-checker.js";
-class r {
+class b {
   /**
    * Whether the focus is trap is enabled.
    * @param enabled
@@ -73,20 +73,20 @@ class r {
   }
   /** Get the last tabbable element from a DOM subtree (inclusive). */
   _getLastTabbableElement(t) {
-    if (t !== this._host && i.isFocusable(t) && i.isTabbable(t))
-      return t;
-    const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
-    for (let s = e.length - 1; s >= 0; s--) {
-      const l = e[s].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(e[s]) : null;
-      if (l)
-        return l;
+    let e = null;
+    t !== this._host && i.isFocusable(t) && i.isTabbable(t) && (e = t);
+    const s = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
+    for (let l = s.length - 1; l >= 0; l--) {
+      const a = s[l].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(s[l]) : null;
+      if (a)
+        return a;
     }
-    return null;
+    return e;
   }
   _untrap() {
     this._abortController?.abort(), this._abortController = null;
   }
 }
 export {
-  r as SbbFocusTrapController
+  b as SbbFocusTrapController
 };

package/core/datetime/temporal-date-adapter.js

@@ -1,9 +1,17 @@
 import { SbbLanguageController as a } from "../controllers.js";
 import { DateAdapter as o } from "./date-adapter.js";
 const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
-if (typeof Temporal != "object")
-  throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
-class l extends o {
+class d extends o {
+  /**
+   * @param cutoffYearOffset The threshold on whether a two-digit year
+   * should be treated as belonging to 2000 or 1900. e.g. with 15 (default)
+   * the current year plus 15 will be treated as belonging to 2000, and the rest to 1900.
+   * So e.g. with the current year 2025, 40 will be treated as 2040, while 41 will be treated as 1941.
+   */
+  constructor(e) {
+    if (super(e), typeof Temporal != "object")
+      throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
+  }
   /** Gets the year of the input date. */
   getYear(e) {
     return e.year;
@@ -132,8 +140,6 @@ class l extends o {
     return Array.from({ length: e }).map((t, n) => r(n));
   }
 }
-const u = new l();
 export {
-  l as TemporalDateAdapter,
-  u as temporalDateAdapter
+  d as TemporalDateAdapter
 };

package/core/datetime.js

@@ -1,14 +1,16 @@
-import { DAYS_PER_ROW as R, DateAdapter as E, FORMAT_DATE as e, ISO8601_FORMAT_DATE as t, MONTHS_PER_PAGE as a, MONTHS_PER_ROW as O, YEARS_PER_PAGE as r, YEARS_PER_ROW as P } from "./datetime/date-adapter.js";
-import { NativeDateAdapter as S, defaultDateAdapter as T } from "./datetime/native-date-adapter.js";
+import { DAYS_PER_ROW as A, DateAdapter as _, FORMAT_DATE as R, ISO8601_FORMAT_DATE as a, MONTHS_PER_PAGE as r, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as O } from "./datetime/date-adapter.js";
+import { NativeDateAdapter as D, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
+import { TemporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
 export {
-  R as DAYS_PER_ROW,
-  E as DateAdapter,
-  e as FORMAT_DATE,
-  t as ISO8601_FORMAT_DATE,
-  a as MONTHS_PER_PAGE,
-  O as MONTHS_PER_ROW,
-  S as NativeDateAdapter,
-  r as YEARS_PER_PAGE,
-  P as YEARS_PER_ROW,
-  T as defaultDateAdapter
+  A as DAYS_PER_ROW,
+  _ as DateAdapter,
+  R as FORMAT_DATE,
+  a as ISO8601_FORMAT_DATE,
+  r as MONTHS_PER_PAGE,
+  E as MONTHS_PER_ROW,
+  D as NativeDateAdapter,
+  S as TemporalDateAdapter,
+  p as YEARS_PER_PAGE,
+  O as YEARS_PER_ROW,
+  P as defaultDateAdapter
 };

package/core/styles/core.scss

@@ -20,9 +20,21 @@ $theme: 'standard' !default;
 @use '../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
   $theme: $theme
 );
+@use '../../button/common/button-common.global' as button with (
+  $theme: $theme
+);
+@use '../../button/common/mini-button-common.global' as mini-button with (
+  $theme: $theme
+);
+@use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
+  $theme: $theme
+);
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../chip-label/chip-label.global' as chip-label with (
+  $theme: $theme
+);
 @use '../../chip/chip/chip.global' as chip with (
   $theme: $theme
 );
@@ -50,6 +62,12 @@ $theme: 'standard' !default;
 @use '../../clock/clock.global' as clock with (
   $theme: $theme
 );
+@use '../../container/container/container.global' as container with (
+  $theme: $theme
+);
+@use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -99,15 +117,21 @@ $theme: 'standard' !default;
 
   @include breadcrumb.base;
   @include breadcrumb-group.base;
+  @include button.base;
+  @include mini-button.base;
+  @include mini-button-group.base;
   @include card.base;
   @include card-badge.base;
   @include carousel.base;
+  @include chip-label.base;
   @include chip.base;
   @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
   @include checkbox-group.base;
   @include checkbox-common.base;
+  @include container.base;
+  @include sticky-bar.base;
   @include clock.base;
   @include divider.base;
   @include expansion-panel.base;
@@ -198,6 +222,8 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    @include button.base-breakpoint-large;
+
     @include chip-group.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
@@ -227,6 +253,7 @@ $theme: 'standard' !default;
 @include font-face.font-declarations;
 
 // Components global styles
+@include container.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -446,18 +473,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global CSS refactoring happens
-sbb-container {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-container-background-border-radius);
-    height: 100%;
-    position: absolute;
-  }
-}
-
 // TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   > [slot='image']:is(sbb-image, img),

package/core/styles/mixins/chip.scss

@@ -25,37 +25,37 @@
 @mixin chip-label-variables--size-xxs {
   --sbb-chip-label-padding-block: 0em;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
 }
 
 @mixin chip-label-variables--size-xs {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);
 }
 
 @mixin chip-label-variables--size-s {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
-  --sbb-text-font-size: var(--sbb-text-font-size-s);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);
 }
 
 @mixin chip-label-rules {
-  @include typo.text;
-
   // We need an even value to make it work smoothly in Safari
   line-height: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: calc(
-    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) +
+    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-typo-letter-spacing-text);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;

package/core.css

@@ -1263,6 +1263,57 @@
     var(--sbb-color-silver),
     var(--sbb-color-anthracite)
   );
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1290,6 +1341,12 @@
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1345,6 +1402,13 @@
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
@@ -1555,6 +1619,9 @@
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+    --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+    --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
@@ -1604,6 +1671,14 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-container > [slot=image]:is(sbb-image, img),
+sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-container-background-border-radius);
+  height: 100%;
+  position: absolute;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1887,14 +1962,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-container > [slot=image]:is(sbb-image, img),
-sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-container-background-border-radius);
-  height: 100%;
-  position: absolute;
-}
-
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
 sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;

package/custom-elements.json

@@ -2435,6 +2435,17 @@
               "description": "Whether the active option should be selected as the user is navigating.",
               "attribute": "auto-select-active-option"
             },
+            {
+              "kind": "field",
+              "name": "autoSelectActiveOptionOnBlur",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When enabled, the active option is automatically selected on blur.\nThis is an experimental feature. It might be subject to changes.",
+              "attribute": "auto-select-active-option-on-blur"
+            },
             {
               "kind": "field",
               "name": "requireSelection",
@@ -2464,7 +2475,7 @@
                 "text": "HTMLElement | null"
               },
               "privacy": "public",
-              "description": "Returns the element where autocomplete overlay is attached to.",
+              "description": "Returns the element where the autocomplete overlay is attached to.",
               "readonly": true
             },
             {
@@ -2811,6 +2822,10 @@
                   "type": {
                     "text": "SbbOptionBaseElement<T>"
                   }
+                },
+                {
+                  "name": "preventFocus",
+                  "default": "false"
                 }
               ]
             },
@@ -3274,6 +3289,15 @@
               "description": "Whether the active option should be selected as the user is navigating.",
               "fieldName": "autoSelectActiveOption"
             },
+            {
+              "name": "auto-select-active-option-on-blur",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When enabled, the active option is automatically selected on blur.\nThis is an experimental feature. It might be subject to changes.",
+              "fieldName": "autoSelectActiveOptionOnBlur"
+            },
             {
               "name": "require-selection",
               "type": {
@@ -3741,6 +3765,21 @@
                 "module": "autocomplete/autocomplete-base-element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "autoSelectActiveOptionOnBlur",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When enabled, the active option is automatically selected on blur.\nThis is an experimental feature. It might be subject to changes.",
+              "attribute": "auto-select-active-option-on-blur",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "requireSelection",
@@ -3778,7 +3817,7 @@
                 "text": "HTMLElement | null"
               },
               "privacy": "public",
-              "description": "Returns the element where autocomplete overlay is attached to.",
+              "description": "Returns the element where the autocomplete overlay is attached to.",
               "readonly": true,
               "inheritedFrom": {
                 "name": "SbbAutocompleteBaseElement",
@@ -4083,6 +4122,10 @@
                   "type": {
                     "text": "SbbOptionBaseElement<T>"
                   }
+                },
+                {
+                  "name": "preventFocus",
+                  "default": "false"
                 }
               ],
               "inheritedFrom": {
@@ -4588,6 +4631,19 @@
                 "module": "autocomplete/autocomplete-base-element.js"
               }
             },
+            {
+              "name": "auto-select-active-option-on-blur",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When enabled, the active option is automatically selected on blur.\nThis is an experimental feature. It might be subject to changes.",
+              "fieldName": "autoSelectActiveOptionOnBlur",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "name": "require-selection",
               "type": {
@@ -7946,6 +8002,14 @@
             "name": "*",
             "module": "core/datetime/native-date-adapter.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "core/datetime/temporal-date-adapter.js"
+          }
         }
       ]
     },
@@ -9588,6 +9652,14 @@
             "name": "*",
             "module": "datepicker/common/datepicker-button.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "datepickerButtonStyle",
+          "declaration": {
+            "name": "default",
+            "module": "./common/datepicker-button.scss?lit&inline"
+          }
         }
       ]
     },
@@ -16945,17 +17017,19 @@
               "kind": "field",
               "name": "_originElement",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLElement | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
               "name": "_triggerElement",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLElement | null"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
@@ -51212,11 +51286,6 @@
             "name": "DateAdapter",
             "module": "core/datetime/date-adapter.js"
           }
-        },
-        {
-          "kind": "variable",
-          "name": "temporalDateAdapter",
-          "default": "new TemporalDateAdapter()"
         }
       ],
       "exports": [
@@ -51227,14 +51296,6 @@
             "name": "TemporalDateAdapter",
             "module": "core/datetime/temporal-date-adapter.js"
           }
-        },
-        {
-          "kind": "js",
-          "name": "temporalDateAdapter",
-          "declaration": {
-            "name": "temporalDateAdapter",
-            "module": "core/datetime/temporal-date-adapter.js"
-          }
         }
       ]
     },
@@ -104653,14 +104714,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "_tabContentElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "_tabGroupResizeObserver",
@@ -104732,7 +104785,7 @@
               },
               "parameters": [
                 {
-                  "name": "tabIndex",
+                  "name": "index",
                   "type": {
                     "text": "number"
                   },
@@ -104752,7 +104805,7 @@
               },
               "parameters": [
                 {
-                  "name": "tabIndex",
+                  "name": "index",
                   "type": {
                     "text": "number"
                   },
@@ -104772,7 +104825,7 @@
               },
               "parameters": [
                 {
-                  "name": "tabIndex",
+                  "name": "index",
                   "type": {
                     "text": "number"
                   },
@@ -104801,6 +104854,16 @@
               "name": "_onLabelSlotChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_ensureActiveTab",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_initSelection",

package/datepicker/common.js

@@ -1,5 +1,7 @@
-import { SbbDatepickerButton as b, SbbDatepickerButtonBase as o } from "./common/datepicker-button.js";
+import { SbbDatepickerButton as o, SbbDatepickerButtonBase as r } from "./common/datepicker-button.js";
+import { d as p } from "../datepicker-button-Debzp_As.js";
 export {
-  b as SbbDatepickerButton,
-  o as SbbDatepickerButtonBase
+  o as SbbDatepickerButton,
+  r as SbbDatepickerButtonBase,
+  p as datepickerButtonStyle
 };

package/datepicker/datepicker-next-day/datepicker-next-day.component.js

@@ -2,14 +2,12 @@ import { __esDecorate as m, __runInitializers as c } from "tslib";
 import { customElement as u } from "lit/decorators.js";
 import { miniButtonStyle as d } from "../../button/common.js";
 import { i18nNextDay as p, i18nSelectNextDay as f } from "../../core/i18n.js";
-import { boxSizingStyles as b } from "../../core/styles.js";
-import { SbbDatepickerButton as y } from "../common.js";
-import { css as h } from "lit";
-const D = h`.sbb-datepicker-next-day{margin:auto;-webkit-tap-highlight-color:transparent}`;
-let B = (() => {
+import { boxSizingStyles as y } from "../../core/styles.js";
+import { SbbDatepickerButton as b, datepickerButtonStyle as D } from "../common.js";
+let k = (() => {
   var e;
-  let o = [u("sbb-datepicker-next-day")], r, s = [], t, l = y;
-  return e = class extends l {
+  let o = [u("sbb-datepicker-next-day")], r, l = [], t, s = b;
+  return e = class extends s {
     constructor() {
       super(...arguments), this.iconName = "chevron-small-right-small", this.i18nOffBoundaryDay = p, this.i18nSelectOffBoundaryDay = f;
     }
@@ -29,10 +27,14 @@ let B = (() => {
       return !!this.input.max && this.dateAdapter.compareDate(a, this.input.max) > 0;
     }
   }, t = e, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    m(null, r = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, s), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), e.styles = [b, d, D], c(t, s), t;
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    m(null, r = { value: t }, o, { kind: "class", name: t.name, metadata: a }, null, l), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e.styles = [
+    y,
+    d,
+    D
+  ], c(t, l), t;
 })();
 export {
-  B as SbbDatepickerNextDayElement
+  k as SbbDatepickerNextDayElement
 };