@sbb-esta/lyne-elements 3.7.0 → 3.8.0

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-CUppr5FI.js";
+import { r as p } from "./radio-button-common-Nm9ULjVb.js";
 export {
   i as SbbRadioButtonCommonElementMixin,
   e as SbbRadioButtonElement,