@sbb-esta/lyne-elements 4.4.0 → 4.5.0

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 (58) hide show
  1. package/autocomplete/autocomplete-base-element.js +69 -56
  2. package/button/common.js +1 -1
  3. package/button/mini-button-group/mini-button-group.component.js +14 -14
  4. package/button.js +1 -1
  5. package/core/a11y/focus-trap-controller.js +10 -10
  6. package/core/datetime.js +15 -12
  7. package/core/styles/core.scss +14 -0
  8. package/core.css +54 -0
  9. package/custom-elements.json +75 -17
  10. package/datepicker/common.js +5 -3
  11. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +13 -11
  12. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +12 -10
  13. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +21 -19
  14. package/datepicker-button-Debzp_As.js +5 -0
  15. package/datepicker.js +6 -4
  16. package/development/autocomplete/autocomplete-base-element.d.ts +6 -1
  17. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  18. package/development/autocomplete/autocomplete-base-element.js +28 -5
  19. package/development/button/common.js +1 -1
  20. package/development/button/mini-button-group/mini-button-group.component.js +10 -14
  21. package/development/button.js +1 -1
  22. package/development/core/a11y/focus-trap-controller.d.ts.map +1 -1
  23. package/development/core/a11y/focus-trap-controller.js +4 -3
  24. package/development/core/controllers/overlay-position-controller.d.ts.map +1 -1
  25. package/development/core/controllers/overlay-position-controller.js +1 -1
  26. package/development/core/datetime.d.ts +1 -0
  27. package/development/core/datetime.d.ts.map +1 -1
  28. package/development/core/datetime.js +5 -2
  29. package/development/datepicker/common.d.ts.map +1 -1
  30. package/development/datepicker/common.js +4 -2
  31. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.d.ts.map +1 -1
  32. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +7 -8
  33. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.d.ts.map +1 -1
  34. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +7 -8
  35. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.d.ts.map +1 -1
  36. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -8
  37. package/development/datepicker-button-BDlxIp9r.js +9 -0
  38. package/development/datepicker.js +4 -2
  39. package/development/{mini-button-label-common-0DeEC1qs.js → mini-button-label-common-BaMSfSTe.js} +13 -63
  40. package/development/radio-button/radio-button-group/radio-button-group.component.d.ts.map +1 -1
  41. package/development/radio-button/radio-button-group/radio-button-group.component.js +1 -1
  42. package/development/select/select.component.d.ts +1 -1
  43. package/development/select/select.component.d.ts.map +1 -1
  44. package/development/select/select.component.js +17 -8
  45. package/development/tabs/tab/tab.component.d.ts.map +1 -1
  46. package/development/tabs/tab/tab.component.js +2 -1
  47. package/development/tabs/tab-group/tab-group.component.d.ts +6 -7
  48. package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  49. package/development/tabs/tab-group/tab-group.component.js +23 -66
  50. package/mini-button-label-common-Dx9JhmQ6.js +11 -0
  51. package/off-brand-theme.css +54 -0
  52. package/package.json +1 -1
  53. package/safety-theme.css +54 -0
  54. package/select/select.component.js +20 -20
  55. package/standard-theme.css +54 -0
  56. package/tabs/tab/tab.component.js +4 -4
  57. package/tabs/tab-group/tab-group.component.js +55 -56
  58. package/mini-button-label-common-BOB7JQKi.js +0 -11
package/autocomplete/autocomplete-base-element.js CHANGED
@@ -1,25 +1,25 @@
1
- var Q = (o) => {
2
- throw TypeError(o);
1
+ var it = (n) => {
2
+ throw TypeError(n);
3
3
  };
4
- var X = (o, a, l) => a.has(o) || Q("Cannot " + l);
5
- var p = (o, a, l) => (X(o, a, "read from private field"), l ? l.call(o) : a.get(o)), b = (o, a, l) => a.has(o) ? Q("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, l), s = (o, a, l, x) => (X(o, a, "write to private field"), x ? x.call(o, l) : a.set(o, l), l);
6
- import { __esDecorate as c, __runInitializers as n } from "tslib";
7
- import { ResizeController as st } from "@lit-labs/observers/resize-controller.js";
8
- import { css as ot, isServer as k, nothing as tt, html as nt } from "lit";
4
+ var st = (n, r, l) => r.has(n) || it("Cannot " + l);
5
+ var p = (n, r, l) => (st(n, r, "read from private field"), l ? l.call(n) : r.get(n)), b = (n, r, l) => r.has(n) ? it("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, l), s = (n, r, l, w) => (st(n, r, "write to private field"), w ? w.call(n, l) : r.set(n, l), l);
6
+ import { __esDecorate as c, __runInitializers as o } from "tslib";
7
+ import { ResizeController as rt } from "@lit-labs/observers/resize-controller.js";
8
+ import { css as lt, isServer as k, nothing as ot, html as pt } from "lit";
9
9
  import { property as h } from "lit/decorators.js";
10
- import { ref as et } from "lit/directives/ref.js";
11
- import { SbbOpenCloseBaseElement as rt } from "../core/base-elements.js";
12
- import { SbbEscapableOverlayController as at, SbbPropertyWatcherController as lt } from "../core/controllers.js";
13
- import { idReference as it, forceType as E } from "../core/decorators.js";
14
- import { isLean as pt, isZeroAnimationDuration as bt, isSafari as ct } from "../core/dom.js";
15
- import { SbbNegativeMixin as ht, SbbHydrationMixin as dt } from "../core/mixins.js";
16
- import { isEventOnElement as A, removeAriaComboBoxAttributes as gt, setOverlayPosition as ut, overlayGapFixCorners as vt } from "../core/overlay.js";
17
- import { boxSizingStyles as _t } from "../core/styles.js";
18
- const mt = ot`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel:before,.sbb-autocomplete__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, S = ct;
19
- let qt = (() => {
20
- var d, g, u, v, _, m, f, y, w, r;
21
- let o = ht(dt(rt)), a, l = [], x = [], C, z = [], I = [], P, F = [], q = [], D, L = [], U = [], N, W = [], V = [], R, M = [], T = [], $, j = [], H = [], Y, Z = [], K = [], B, G = [], J = [];
22
- return r = class extends o {
10
+ import { ref as nt } from "lit/directives/ref.js";
11
+ import { SbbOpenCloseBaseElement as bt } from "../core/base-elements.js";
12
+ import { SbbEscapableOverlayController as ct, SbbPropertyWatcherController as ht } from "../core/controllers.js";
13
+ import { idReference as at, forceType as E } from "../core/decorators.js";
14
+ import { isLean as dt, isZeroAnimationDuration as gt, isSafari as ut } from "../core/dom.js";
15
+ import { SbbNegativeMixin as vt, SbbHydrationMixin as _t } from "../core/mixins.js";
16
+ import { isEventOnElement as S, removeAriaComboBoxAttributes as mt, setOverlayPosition as ft, overlayGapFixCorners as Ot } from "../core/overlay.js";
17
+ import { boxSizingStyles as yt } from "../core/styles.js";
18
+ const xt = lt`.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host(:dir(rtl)) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--_sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel:before,.sbb-autocomplete__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`, C = ut;
19
+ let Bt = (() => {
20
+ var d, g, u, v, _, m, f, O, y, x, a;
21
+ let n = vt(_t(bt)), r, l = [], w = [], z, I = [], P = [], F, D = [], q = [], L, U = [], B = [], N, W = [], V = [], R, M = [], T = [], $, j = [], H = [], Y, Z = [], K = [], G, J = [], Q = [], X, tt = [], et = [];
22
+ return a = class extends n {
23
23
  constructor() {
24
24
  super();
25
25
  b(this, d);
@@ -29,9 +29,10 @@ let qt = (() => {
29
29
  b(this, _);
30
30
  b(this, m);
31
31
  b(this, f);
32
+ b(this, O);
32
33
  b(this, y);
33
- b(this, w);
34
- s(this, d, n(this, l, null)), s(this, g, (n(this, x), n(this, z, null))), s(this, u, (n(this, I), n(this, F, !1))), s(this, v, (n(this, q), n(this, L, !1))), s(this, _, (n(this, U), n(this, W, null))), s(this, m, (n(this, V), n(this, M, pt() ? "s" : "m"))), s(this, f, (n(this, T), n(this, j, !1))), s(this, y, (n(this, H), n(this, Z, !1))), s(this, w, (n(this, K), n(this, G, "auto"))), this._triggerElement = n(this, J), this.activeOption = null, this.pendingAutoSelectedOption = null, this._originResizeObserver = new st(this, {
34
+ b(this, x);
35
+ s(this, d, o(this, l, null)), s(this, g, (o(this, w), o(this, I, null))), s(this, u, (o(this, P), o(this, D, !1))), s(this, v, (o(this, q), o(this, U, !1))), s(this, _, (o(this, B), o(this, W, null))), s(this, m, (o(this, V), o(this, M, dt() ? "s" : "m"))), s(this, f, (o(this, T), o(this, j, !1))), s(this, O, (o(this, H), o(this, Z, !1))), s(this, y, (o(this, K), o(this, J, !1))), s(this, x, (o(this, Q), o(this, tt, "auto"))), this._triggerElement = o(this, et), this.activeOption = null, this.pendingAutoSelectedOption = null, this._originResizeObserver = new rt(this, {
35
36
  target: null,
36
37
  skipInitial: !0,
37
38
  callback: () => {
@@ -40,11 +41,11 @@ let qt = (() => {
40
41
  }), this._triggerAttributeObserver = k ? null : new MutationObserver((t) => {
41
42
  const e = t[0].target;
42
43
  (e.hasAttribute("disabled") || e.hasAttribute("readonly")) && this.close();
43
- }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new at(this), this._optionsCount = 0, this._lastUserInput = null, this._pointerDownListener = (t) => {
44
- this._isPointerDownEventOnMenu = A(this._overlay, t);
44
+ }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new ct(this), this._optionsCount = 0, this._lastUserInput = null, this._pointerDownListener = (t) => {
45
+ this._isPointerDownEventOnMenu = S(this._overlay, t);
45
46
  }, this._closeOnBackdropClick = (t) => {
46
- !this._isPointerDownEventOnMenu && !A(this._overlay, t) && !A(this.originElement, t) && this.close();
47
- }, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new lt(this, () => this.closest("sbb-form-field"), {
47
+ !this._isPointerDownEventOnMenu && !S(this._overlay, t) && !S(this.originElement, t) && this.close();
48
+ }, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new ht(this, () => this.closest("sbb-form-field"), {
48
49
  negative: (t) => {
49
50
  this.negative = t.negative, this.syncNegative();
50
51
  },
@@ -116,6 +117,16 @@ let qt = (() => {
116
117
  set autoSelectActiveOption(t) {
117
118
  s(this, f, t);
118
119
  }
120
+ /**
121
+ * When enabled, the active option is automatically selected on blur.
122
+ * This is an experimental feature. It might be subject to changes.
123
+ */
124
+ get autoSelectActiveOptionOnBlur() {
125
+ return p(this, O);
126
+ }
127
+ set autoSelectActiveOptionOnBlur(t) {
128
+ s(this, O, t);
129
+ }
119
130
  /**
120
131
  * Whether the user is required to make a selection when they're interacting with the
121
132
  * autocomplete. If the user moves away from the autocomplete without selecting an option from
@@ -133,12 +144,12 @@ let qt = (() => {
133
144
  * @default 'auto'
134
145
  */
135
146
  get position() {
136
- return p(this, w);
147
+ return p(this, x);
137
148
  }
138
149
  set position(t) {
139
- s(this, w, t);
150
+ s(this, x, t);
140
151
  }
141
- /** Returns the element where autocomplete overlay is attached to. */
152
+ /** Returns the element where the autocomplete overlay is attached to. */
142
153
  get originElement() {
143
154
  return this.origin ?? this.closest?.("sbb-form-field")?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.trigger ?? null;
144
155
  }
@@ -161,10 +172,10 @@ let qt = (() => {
161
172
  this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
162
173
  }
163
174
  _isZeroAnimationDuration() {
164
- return bt(this, "--sbb-options-panel-animation-duration");
175
+ return gt(this, "--sbb-options-panel-animation-duration");
165
176
  }
166
177
  connectedCallback() {
167
- this.popover = "manual", super.connectedCallback(), S && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
178
+ this.popover = "manual", super.connectedCallback(), C && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
168
179
  }
169
180
  willUpdate(t) {
170
181
  super.willUpdate(t), t.has("negative") && this.syncNegative(), t.has("autoActiveFirstOption") && this.isOpen && this._setNextActiveOptionIfAutoActiveFirstOption();
@@ -225,7 +236,7 @@ let qt = (() => {
225
236
  }
226
237
  _configureTrigger() {
227
238
  const t = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
228
- if (t === this.triggerElement || (this._triggerAbortController?.abort(), gt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
239
+ if (t === this.triggerElement || (this._triggerAbortController?.abort(), mt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
229
240
  return;
230
241
  const e = this.originElement;
231
242
  this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this.triggerElement, {
@@ -236,8 +247,8 @@ let qt = (() => {
236
247
  }), this.triggerElement.addEventListener("click", () => this.open(), {
237
248
  signal: this._triggerAbortController.signal
238
249
  }), this.triggerElement.addEventListener("input", (i) => {
239
- const O = i.target.value;
240
- O && this.open(), this._highlightOptions(O), this._lastUserInput = O, this.pendingAutoSelectedOption = null;
250
+ const A = i.target.value;
251
+ A && this.open(), this._highlightOptions(A), this._lastUserInput = A, this.pendingAutoSelectedOption = null;
241
252
  }, { signal: this._triggerAbortController.signal }), this.triggerElement.addEventListener("keydown", (i) => this._closedPanelKeyboardInteraction(i), {
242
253
  signal: this._triggerAbortController.signal,
243
254
  // We need key event to run before any other subscription to guarantee a correct
@@ -247,7 +258,7 @@ let qt = (() => {
247
258
  }
248
259
  // Set overlay position, width and max height
249
260
  _setOverlayPosition(t = this.originElement) {
250
- t && ut(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this, this.position);
261
+ t && ft(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this, this.position);
251
262
  }
252
263
  /**
253
264
  * On open/close animation end.
@@ -287,7 +298,7 @@ let qt = (() => {
287
298
  // interaction with other components (necessary for the 'sbb-chip-group' use case).
288
299
  capture: !0
289
300
  }), this.triggerElement?.addEventListener("blur", (t) => {
290
- this.contains(t.relatedTarget) || this.close();
301
+ this.contains(t.relatedTarget) || (this.autoSelectActiveOptionOnBlur && this.activeOption && this.triggerElement?.value && (this.activeOption.selected = !0, this._setValueAndDispatchEvents(this.activeOption)), this.close());
291
302
  }, {
292
303
  signal: this._openPanelEventsController.signal
293
304
  });
@@ -306,22 +317,22 @@ let qt = (() => {
306
317
  t != null && this.options.forEach((e) => e.highlight(t));
307
318
  }
308
319
  render() {
309
- return nt`
320
+ return pt`
310
321
  <div class="sbb-autocomplete__gap-fix"></div>
311
322
  <div class="sbb-autocomplete__container">
312
- <div class="sbb-autocomplete__gap-fix">${vt()}</div>
323
+ <div class="sbb-autocomplete__gap-fix">${Ot()}</div>
313
324
  <div
314
325
  @animationend=${this._onAnimationEnd}
315
326
  class="sbb-autocomplete__panel"
316
- ${et((t) => this._overlay = t)}
327
+ ${nt((t) => this._overlay = t)}
317
328
  >
318
329
  <div class="sbb-autocomplete__wrapper">
319
330
  <div
320
331
  class="sbb-autocomplete__options"
321
- role=${S ? tt : this.panelRole}
322
- id=${S ? tt : this.overlayId}
332
+ role=${C ? ot : this.panelRole}
333
+ id=${C ? ot : this.overlayId}
323
334
  tabindex="-1"
324
- ${et((t) => this._optionContainer = t)}
335
+ ${nt((t) => this._optionContainer = t)}
325
336
  >
326
337
  <slot @slotchange=${this._handleSlotchange}></slot>
327
338
  </div>
@@ -330,29 +341,31 @@ let qt = (() => {
330
341
  </div>
331
342
  `;
332
343
  }
333
- }, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), y = new WeakMap(), w = new WeakMap(), (() => {
334
- const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
335
- a = [it(), h()], C = [it(), h()], P = [E(), h({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], D = [E(), h({ attribute: "auto-active-first-option", type: Boolean })], N = [h({ attribute: !1 })], R = [h({ reflect: !0 })], $ = [E(), h({ attribute: "auto-select-active-option", type: Boolean })], Y = [E(), h({ attribute: "require-selection", type: Boolean })], B = [h()], c(r, null, a, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, i) => {
344
+ }, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), O = new WeakMap(), y = new WeakMap(), x = new WeakMap(), (() => {
345
+ const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
346
+ r = [at(), h()], z = [at(), h()], F = [E(), h({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], L = [E(), h({ attribute: "auto-active-first-option", type: Boolean })], N = [h({ attribute: !1 })], R = [h({ reflect: !0 })], $ = [E(), h({ attribute: "auto-select-active-option", type: Boolean })], Y = [E(), h({ attribute: "auto-select-active-option-on-blur", type: Boolean })], G = [E(), h({ attribute: "require-selection", type: Boolean })], X = [h()], c(a, null, r, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, i) => {
336
347
  e.origin = i;
337
- } }, metadata: t }, l, x), c(r, null, C, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
348
+ } }, metadata: t }, l, w), c(a, null, z, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
338
349
  e.trigger = i;
339
- } }, metadata: t }, z, I), c(r, null, P, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, i) => {
350
+ } }, metadata: t }, I, P), c(a, null, F, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, i) => {
340
351
  e.preserveIconSpace = i;
341
- } }, metadata: t }, F, q), c(r, null, D, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, i) => {
352
+ } }, metadata: t }, D, q), c(a, null, L, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, i) => {
342
353
  e.autoActiveFirstOption = i;
343
- } }, metadata: t }, L, U), c(r, null, N, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
354
+ } }, metadata: t }, U, B), c(a, null, N, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
344
355
  e.displayWith = i;
345
- } }, metadata: t }, W, V), c(r, null, R, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
356
+ } }, metadata: t }, W, V), c(a, null, R, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
346
357
  e.size = i;
347
- } }, metadata: t }, M, T), c(r, null, $, { kind: "accessor", name: "autoSelectActiveOption", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOption" in e, get: (e) => e.autoSelectActiveOption, set: (e, i) => {
358
+ } }, metadata: t }, M, T), c(a, null, $, { kind: "accessor", name: "autoSelectActiveOption", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOption" in e, get: (e) => e.autoSelectActiveOption, set: (e, i) => {
348
359
  e.autoSelectActiveOption = i;
349
- } }, metadata: t }, j, H), c(r, null, Y, { kind: "accessor", name: "requireSelection", static: !1, private: !1, access: { has: (e) => "requireSelection" in e, get: (e) => e.requireSelection, set: (e, i) => {
360
+ } }, metadata: t }, j, H), c(a, null, Y, { kind: "accessor", name: "autoSelectActiveOptionOnBlur", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOptionOnBlur" in e, get: (e) => e.autoSelectActiveOptionOnBlur, set: (e, i) => {
361
+ e.autoSelectActiveOptionOnBlur = i;
362
+ } }, metadata: t }, Z, K), c(a, null, G, { kind: "accessor", name: "requireSelection", static: !1, private: !1, access: { has: (e) => "requireSelection" in e, get: (e) => e.requireSelection, set: (e, i) => {
350
363
  e.requireSelection = i;
351
- } }, metadata: t }, Z, K), c(r, null, B, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, i) => {
364
+ } }, metadata: t }, J, Q), c(a, null, X, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, i) => {
352
365
  e.position = i;
353
- } }, metadata: t }, G, J), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
354
- })(), r.styles = [_t, mt], r;
366
+ } }, metadata: t }, tt, et), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
367
+ })(), a.styles = [yt, xt], a;
355
368
  })();
356
369
  export {
357
- qt as SbbAutocompleteBaseElement
370
+ Bt as SbbAutocompleteBaseElement
358
371
  };
package/button/common.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
2
- import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-BOB7JQKi.js";
2
+ import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-Dx9JhmQ6.js";
3
3
  export {
4
4
  o as SbbButtonCommonElementMixin,
5
5
  a as buttonAccentStyle,
package/button/mini-button-group/mini-button-group.component.js CHANGED
@@ -1,20 +1,20 @@
1
- var z = (i) => {
1
+ var x = (i) => {
2
2
  throw TypeError(i);
3
3
  };
4
- var L = (i, t, s) => t.has(i) || z("Cannot " + s);
5
- var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? z("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, r) => (L(i, t, "write to private field"), r ? r.call(i, s) : t.set(i, s), s);
4
+ var L = (i, t, s) => t.has(i) || x("Cannot " + s);
5
+ var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, a) => (L(i, t, "write to private field"), a ? a.call(i, s) : t.set(i, s), s);
6
6
  import { __esDecorate as g, __runInitializers as c } from "tslib";
7
- import { css as w, LitElement as S, html as N } from "lit";
7
+ import { css as S, LitElement as w, html as N } from "lit";
8
8
  import { customElement as E, property as k } from "lit/decorators.js";
9
9
  import { forceType as I } from "../../core/decorators.js";
10
10
  import { isLean as D } from "../../core/dom.js";
11
11
  import { SbbNegativeMixin as M, SbbNamedSlotListMixin as O } from "../../core/mixins.js";
12
12
  import { boxSizingStyles as j } from "../../core/styles.js";
13
- const T = w`:host{display:block;--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: var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);--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)}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding-block:var(--sbb-spacing-fixed-1x);padding-inline:var(--sbb-spacing-fixed-1x);height:var(--sbb-size-icon-ui-small)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border);border-radius:var(--sbb-border-radius-infinity);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
13
+ const T = S`:host{display:block}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=m]){--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding:var(--sbb-mini-button-group-divider-padding);height:var(--sbb-mini-button-group-divider-height)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);border-radius:var(--sbb-mini-button-group-border-radius);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
14
14
  let H = (() => {
15
- var n, o, a;
16
- let i = [E("sbb-mini-button-group")], t, s = [], r, p = M(O(S)), h, v = [], f = [], y, x = [], _ = [];
17
- return a = class extends p {
15
+ var n, o, r;
16
+ let i = [E("sbb-mini-button-group")], t, s = [], a, p = M(O(w)), h, v = [], y = [], f, _ = [], z = [];
17
+ return r = class extends p {
18
18
  constructor() {
19
19
  super(...arguments);
20
20
  m(this, n);
@@ -23,7 +23,7 @@ let H = (() => {
23
23
  "sbb-mini-button",
24
24
  "sbb-mini-button-link",
25
25
  "sbb-divider"
26
- ], l(this, n, c(this, v, "")), l(this, o, (c(this, f), c(this, x, D() ? "s" : "m"))), c(this, _);
26
+ ], l(this, n, c(this, v, "")), l(this, o, (c(this, y), c(this, _, D() ? "s" : "m"))), c(this, z);
27
27
  }
28
28
  /** This will be forwarded as aria-label to the list that contains the buttons. */
29
29
  get accessibilityLabel() {
@@ -53,14 +53,14 @@ let H = (() => {
53
53
  ${this.renderList({ ariaLabel: this.accessibilityLabel }, { localNameVisualOnly: ["sbb-divider"] })}
54
54
  `;
55
55
  }
56
- }, n = new WeakMap(), o = new WeakMap(), r = a, (() => {
56
+ }, n = new WeakMap(), o = new WeakMap(), a = r, (() => {
57
57
  const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
58
- h = [I(), k({ attribute: "accessibility-label" })], y = [k({ reflect: !0 })], g(a, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
58
+ h = [I(), k({ attribute: "accessibility-label" })], f = [k({ reflect: !0 })], g(r, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
59
59
  b.accessibilityLabel = u;
60
- } }, metadata: e }, v, f), g(a, null, y, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
60
+ } }, metadata: e }, v, y), g(r, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
61
61
  b.size = u;
62
- } }, metadata: e }, x, _), g(null, t = { value: r }, i, { kind: "class", name: r.name, metadata: e }, null, s), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
63
- })(), a.styles = [j, T], c(r, s), r;
62
+ } }, metadata: e }, _, z), g(null, t = { value: a }, i, { kind: "class", name: a.name, metadata: e }, null, s), a = t.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
63
+ })(), r.styles = [j, T], c(a, s), a;
64
64
  })();
65
65
  export {
66
66
  H as SbbMiniButtonGroupElement
package/button.js CHANGED
@@ -14,7 +14,7 @@ import { SbbSecondaryButtonStaticElement as C } from "./button/secondary-button-
14
14
  import { SbbAccentButtonStaticElement as P } from "./button/accent-button-static/accent-button-static.component.js";
15
15
  import { SbbTransparentButtonStaticElement as h } from "./button/transparent-button-static/transparent-button-static.component.js";
16
16
  import { SbbButtonCommonElementMixin as q } from "./button/common/button-common.js";
17
- import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-BOB7JQKi.js";
17
+ import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-Dx9JhmQ6.js";
18
18
  export {
19
19
  b as SbbAccentButtonElement,
20
20
  L as SbbAccentButtonLinkElement,
package/core/a11y/focus-trap-controller.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { interactivityChecker as i } from "./interactivity-checker.js";
2
- class r {
2
+ class b {
3
3
  /**
4
4
  * Whether the focus is trap is enabled.
5
5
  * @param enabled
@@ -73,20 +73,20 @@ class r {
73
73
  }
74
74
  /** Get the last tabbable element from a DOM subtree (inclusive). */
75
75
  _getLastTabbableElement(t) {
76
- if (t !== this._host && i.isFocusable(t) && i.isTabbable(t))
77
- return t;
78
- const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
79
- for (let s = e.length - 1; s >= 0; s--) {
80
- const l = e[s].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(e[s]) : null;
81
- if (l)
82
- return l;
76
+ let e = null;
77
+ t !== this._host && i.isFocusable(t) && i.isTabbable(t) && (e = t);
78
+ const s = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
79
+ for (let l = s.length - 1; l >= 0; l--) {
80
+ const a = s[l].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(s[l]) : null;
81
+ if (a)
82
+ return a;
83
83
  }
84
- return null;
84
+ return e;
85
85
  }
86
86
  _untrap() {
87
87
  this._abortController?.abort(), this._abortController = null;
88
88
  }
89
89
  }
90
90
  export {
91
- r as SbbFocusTrapController
91
+ b as SbbFocusTrapController
92
92
  };
package/core/datetime.js CHANGED
@@ -1,14 +1,17 @@
1
- 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";
2
- import { NativeDateAdapter as S, defaultDateAdapter as T } from "./datetime/native-date-adapter.js";
1
+ import { DAYS_PER_ROW as a, DateAdapter as A, FORMAT_DATE as r, ISO8601_FORMAT_DATE as _, 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";
2
+ import { NativeDateAdapter as O, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
3
+ import { TemporalDateAdapter as d, temporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
3
4
  export {
4
- R as DAYS_PER_ROW,
5
- E as DateAdapter,
6
- e as FORMAT_DATE,
7
- t as ISO8601_FORMAT_DATE,
8
- a as MONTHS_PER_PAGE,
9
- O as MONTHS_PER_ROW,
10
- S as NativeDateAdapter,
11
- r as YEARS_PER_PAGE,
12
- P as YEARS_PER_ROW,
13
- T as defaultDateAdapter
5
+ a as DAYS_PER_ROW,
6
+ A as DateAdapter,
7
+ r as FORMAT_DATE,
8
+ _ as ISO8601_FORMAT_DATE,
9
+ R as MONTHS_PER_PAGE,
10
+ E as MONTHS_PER_ROW,
11
+ O as NativeDateAdapter,
12
+ d as TemporalDateAdapter,
13
+ p as YEARS_PER_PAGE,
14
+ o as YEARS_PER_ROW,
15
+ P as defaultDateAdapter,
16
+ S as temporalDateAdapter
14
17
  };
package/core/styles/core.scss CHANGED
@@ -20,6 +20,15 @@ $theme: 'standard' !default;
20
20
  @use '../../breadcrumb/breadcrumb-group/breadcrumb-group.global' as breadcrumb-group with (
21
21
  $theme: $theme
22
22
  );
23
+ @use '../../button/common/button-common.global' as button with (
24
+ $theme: $theme
25
+ );
26
+ @use '../../button/common/mini-button-common.global' as mini-button with (
27
+ $theme: $theme
28
+ );
29
+ @use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
30
+ $theme: $theme
31
+ );
23
32
  @use '../../card/card/card.global' as card with (
24
33
  $theme: $theme
25
34
  );
@@ -99,6 +108,9 @@ $theme: 'standard' !default;
99
108
 
100
109
  @include breadcrumb.base;
101
110
  @include breadcrumb-group.base;
111
+ @include button.base;
112
+ @include mini-button.base;
113
+ @include mini-button-group.base;
102
114
  @include card.base;
103
115
  @include card-badge.base;
104
116
  @include carousel.base;
@@ -198,6 +210,8 @@ $theme: 'standard' !default;
198
210
  @include mediaqueries.mq($from: large) {
199
211
  @include sbb-css-tokens.breakpoint-large;
200
212
 
213
+ @include button.base-breakpoint-large;
214
+
201
215
  @include chip-group.base-breakpoint-large;
202
216
 
203
217
  // TODO: Remove complete block when new lean theme is complete
package/core.css CHANGED
@@ -1263,6 +1263,57 @@
1263
1263
  var(--sbb-color-silver),
1264
1264
  var(--sbb-color-anthracite)
1265
1265
  );
1266
+ --sbb-button-box-shadow: transparent 0 0;
1267
+ --sbb-button-border-radius: var(--sbb-border-radius-infinity);
1268
+ --sbb-button-border-width: var(--sbb-border-width-2x);
1269
+ --sbb-button-border-disabled-style: dashed;
1270
+ --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
1271
+ --sbb-button-color-disabled-background: var(--sbb-background-color-3);
1272
+ --sbb-button-color-disabled-border: var(--sbb-border-color-5);
1273
+ --sbb-button-color-disabled-text: var(--sbb-color-granite);
1274
+ --sbb-button-color-disabled-text: light-dark(
1275
+ var(--sbb-color-granite),
1276
+ var(--sbb-color-aluminium)
1277
+ );
1278
+ --sbb-button-gap: var(--sbb-spacing-fixed-2x);
1279
+ --sbb-button-loading-border-width: var(--sbb-border-width-3x);
1280
+ --sbb-button-loading-delay: 300ms;
1281
+ --sbb-button-min-height-size-l: var(--sbb-size-element-m);
1282
+ --sbb-button-min-height-size-m: var(--sbb-size-element-s);
1283
+ --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
1284
+ --sbb-button-min-height: var(--sbb-button-min-height-size-l);
1285
+ --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
1286
+ --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
1287
+ --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
1288
+ --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
1289
+ --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
1290
+ --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
1291
+ --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
1292
+ --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
1293
+ --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
1294
+ --sbb-button-transition-easing-function: var(--sbb-animation-easing);
1295
+ --sbb-mini-button-color-text: var(--sbb-color-3);
1296
+ --sbb-mini-button-color-default-background: transparent;
1297
+ --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
1298
+ --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
1299
+ --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
1300
+ --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
1301
+ --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
1302
+ --sbb-mini-button-color-disabled-text: light-dark(
1303
+ var(--sbb-color-granite),
1304
+ var(--sbb-color-smoke)
1305
+ );
1306
+ --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
1307
+ --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
1308
+ --sbb-mini-button-group-background: var(--sbb-background-color-1);
1309
+ --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
1310
+ --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
1311
+ --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
1312
+ --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
1313
+ --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
1314
+ --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
1315
+ --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
1316
+ --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
1266
1317
  --sbb-card-background-color: var(--sbb-background-color-1);
1267
1318
  --sbb-card-border-color: transparent;
1268
1319
  --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1555,6 +1606,9 @@
1555
1606
  --sbb-size-element-s: var(--sbb-size-element-s-large);
1556
1607
  --sbb-size-element-m: var(--sbb-size-element-m-large);
1557
1608
  --sbb-size-element-l: var(--sbb-size-element-l-large);
1609
+ --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
1610
+ --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
1611
+ --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
1558
1612
  --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
1559
1613
  --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
1560
1614
  --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);