@sbb-esta/lyne-elements 3.6.0 → 3.8.0

package/popover/popover-trigger/popover-trigger.component.js

@@ -3,12 +3,12 @@ import { css as c, html as d } from "lit";
 import { customElement as u } from "lit/decorators.js";
 import { SbbButtonBaseElement as v } from "../../core/base-elements.js";
 import { hostContext as i } from "../../core/dom.js";
-import { SbbDisabledTabIndexActionMixin as m, SbbNegativeMixin as p } from "../../core/mixins.js";
-import { SbbIconNameMixin as h } from "../../icon.js";
-const g = c`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-popover-color: inherit}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host(:is(:disabled,[disabled-interactive])){pointer-events:none;--sbb-popover-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host(:is(:disabled,[disabled-interactive])){--sbb-popover-color: GrayText !important}}:host(:is(:disabled,[disabled-interactive])[negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host([data-icon-small]:focus-visible) .sbb-popover-trigger:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-hover-background)}}:host([data-icon-small]:is(active)) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-active-background)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
+import { SbbDisabledTabIndexActionMixin as g, SbbNegativeMixin as p } from "../../core/mixins.js";
+import { SbbIconNameMixin as m } from "../../icon.js";
+const h = c`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-popover-color: inherit}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-4)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-4-negative)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite);--sbb-popover-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cement))}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host(:is(:disabled,[disabled-interactive])){pointer-events:none;--sbb-popover-color: var(--sbb-color-graphite);--sbb-popover-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke))}@media (forced-colors: active){:host(:is(:disabled,[disabled-interactive])){--sbb-popover-color: GrayText !important}}:host(:is(:disabled,[disabled-interactive])[negative]){--sbb-popover-color: var(--sbb-color-5)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-3);--sbb-button-color-default-background: transparent;--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-active-background: var(--sbb-background-color-4);--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-smoke));--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-text: var(--sbb-color-3-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-5)}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small]:is(:disabled,[disabled-interactive])) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host([data-icon-small]:focus-visible) .sbb-popover-trigger:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host([data-icon-small]:not(:disabled,[disabled-interactive],active):hover) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-hover-background)}}:host([data-icon-small]:is(active)) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-active-background)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
 let T = (() => {
   var t;
-  let s = [u("sbb-popover-trigger")], b, e = [], o, a = m(p(h(v)));
+  let s = [u("sbb-popover-trigger")], b, e = [], o, a = g(p(m(v)));
   return t = class extends a {
     connectedCallback() {
       super.connectedCallback();
@@ -25,7 +25,7 @@ let T = (() => {
   }, o = t, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
     n(null, b = { value: o }, s, { kind: "class", name: o.name, metadata: r }, null, e), o = b.value, r && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = g, l(o, e), o;
+  })(), t.styles = h, l(o, e), o;
 })();
 export {
   T as SbbPopoverTriggerElement

package/radio-button/common.js

@@ -1,5 +1,5 @@
 import { SbbRadioButtonCommonElementMixin as m } from "./common/radio-button-common.js";
-import { r } from "../radio-button-common-DzALx3X7.js";
+import { r } from "../radio-button-common-Nm9ULjVb.js";
 export {
   m as SbbRadioButtonCommonElementMixin,
   r as radioButtonCommonStyle

package/radio-button/radio-button/radio-button.component.js

@@ -11,12 +11,12 @@ import { isLean as w } from "../../core/dom.js";
 import { SbbRadioButtonCommonElementMixin as C, radioButtonCommonStyle as L } from "../common.js";
 const R = E`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
 let J = (() => {
-  var r, n, o;
+  var l, n, o;
   let t = [D("sbb-radio-button"), O()], e, s = [], i, _ = C(B), v, h = [], p = [], z, g = [], y = [];
   return o = class extends _ {
     constructor() {
       super(...arguments);
-      m(this, r, c(this, h, w() ? "xs" : "m"));
+      m(this, l, c(this, h, w() ? "xs" : "m"));
       m(this, n, (c(this, p), c(this, g, null)));
       c(this, y);
     }
@@ -25,10 +25,10 @@ let J = (() => {
      * @default 'm' / 'xs' (lean)
      */
     get size() {
-      return b(this, r);
+      return b(this, l);
     }
-    set size(l) {
-      d(this, r, l);
+    set size(r) {
+      d(this, l, r);
     }
     /**
      * The value of the form element
@@ -36,25 +36,25 @@ let J = (() => {
     get value() {
       return b(this, n);
     }
-    set value(l) {
-      d(this, n, l);
+    set value(r) {
+      d(this, n, r);
     }
     render() {
       return I`
-      <label class="sbb-radio-button">
+      <div class="sbb-radio-button">
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
         </span>
-      </label>
+      </div>
     `;
     }
-  }, r = new WeakMap(), n = new WeakMap(), i = o, (() => {
-    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+  }, l = new WeakMap(), n = new WeakMap(), i = o, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
     v = [k({ reflect: !0 }), j((a, u) => a.group?.size ?? u)], z = [k()], f(o, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, u) => {
       a.size = u;
-    } }, metadata: l }, h, p), f(o, null, z, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, u) => {
+    } }, metadata: r }, h, p), f(o, null, z, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, u) => {
       a.value = u;
-    } }, metadata: l }, g, y), f(null, e = { value: i }, t, { kind: "class", name: i.name, metadata: l }, null, s), i = e.value, l && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+    } }, metadata: r }, g, y), f(null, e = { value: i }, t, { kind: "class", name: i.name, metadata: r }, null, s), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), o.styles = [L, R], o.events = {
     statechange: "statechange",
     change: "change",

package/radio-button/radio-button-panel/radio-button-panel.component.js

@@ -63,7 +63,7 @@ let N = (() => {
     }
     render() {
       return x`
-      <label class="sbb-selection-panel">
+      <div class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
         </div>
@@ -75,7 +75,7 @@ let N = (() => {
           <slot name="subtext"></slot>
           ${this.expansionState ? x`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : B}
         </span>
-      </label>
+      </div>
     `;
     }
   }, o = new WeakMap(), r = new WeakMap(), l = n, (() => {

package/radio-button-common-Nm9ULjVb.js

@@ -0,0 +1,5 @@
+import { css as o } from "lit";
+const t = o`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-3);--sbb-radio-button-background-color: var(--sbb-background-color-1);--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-border-color-5);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-radio-button-background-color: var(--sbb-background-color-3);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host(:disabled[data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--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)}:host([size=s]) .sbb-radio-button{--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)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);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-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+export {
+  t as r
+};

package/radio-button.js

@@ -2,7 +2,7 @@ import { SbbRadioButtonElement as e } from "./radio-button/radio-button/radio-bu
 import { SbbRadioButtonGroupElement as n } from "./radio-button/radio-button-group/radio-button-group.component.js";
 import { SbbRadioButtonPanelElement as b } from "./radio-button/radio-button-panel/radio-button-panel.component.js";
 import { SbbRadioButtonCommonElementMixin as i } from "./radio-button/common/radio-button-common.js";
-import { r as p } from "./radio-button-common-DzALx3X7.js";
+import { r as p } from "./radio-button-common-Nm9ULjVb.js";
 export {
   i as SbbRadioButtonCommonElementMixin,
   e as SbbRadioButtonElement,