npm - @sbb-esta/lyne-elements - Versions diffs - 4.0.0-next.3 → 4.0.0-next.4 - Mend

@sbb-esta/lyne-elements 4.0.0-next.3 → 4.0.0-next.4

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 (600) hide show

package/core.css CHANGED Viewed

@@ -11,13 +11,10 @@
   --sbb-checkbox-group-checkbox-width: 100%;
 }
-:host([data-has-panel]) {
+:host(:is(:state(has-panel),[state--has-panel])) {
   --sbb-checkbox-group-width: 100%;
-  --sbb-checkbox-group-checkbox-flex: auto;
-}
-:host([data-has-panel][orientation=vertical]) {
   --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-checkbox-group-checkbox-flex: auto;
 }
 @media (min-width: calc(0rem)) {
@@ -26,7 +23,7 @@
     --sbb-checkbox-group-checkbox-width: auto;
     --sbb-checkbox-group-checkbox-width: initial;
   }
-  :host([orientation=vertical][horizontal-from=zero]:not([data-has-panel])) {
+  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
     --sbb-checkbox-group-width: max-content;
   }
 }
@@ -36,7 +33,7 @@
     --sbb-checkbox-group-checkbox-width: auto;
     --sbb-checkbox-group-checkbox-width: initial;
   }
-  :host([orientation=vertical][horizontal-from=small]:not([data-has-panel])) {
+  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
     --sbb-checkbox-group-width: max-content;
   }
 }
@@ -46,7 +43,7 @@
     --sbb-checkbox-group-checkbox-width: auto;
     --sbb-checkbox-group-checkbox-width: initial;
   }
-  :host([orientation=vertical][horizontal-from=large]:not([data-has-panel])) {
+  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
     --sbb-checkbox-group-width: max-content;
   }
 }
@@ -56,7 +53,7 @@
     --sbb-checkbox-group-checkbox-width: auto;
     --sbb-checkbox-group-checkbox-width: initial;
   }
-  :host([orientation=vertical][horizontal-from=ultra]:not([data-has-panel])) {
+  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
     --sbb-checkbox-group-width: max-content;
   }
 }
@@ -79,6 +76,78 @@
   flex: var(--sbb-checkbox-group-checkbox-flex);
 }
+:host {
+  display: block;
+}
+:host([orientation=vertical]) {
+  --sbb-radio-button-group-orientation: column;
+  --sbb-radio-button-group-width: 100%;
+  --sbb-radio-button-group-radio-button-width: 100%;
+}
+:host(:is(:state(has-panel),[state--has-panel])) {
+  --sbb-radio-button-group-width: 100%;
+  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-radio-button-group-radio-button-flex: auto;
+}
+@media (min-width: calc(0rem)) {
+  :host([orientation=vertical][horizontal-from=zero]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(37.5rem)) {
+  :host([orientation=vertical][horizontal-from=small]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(64rem)) {
+  :host([orientation=vertical][horizontal-from=large]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(90rem)) {
+  :host([orientation=vertical][horizontal-from=ultra]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+.sbb-radio-group {
+  display: flex;
+  flex-direction: var(--sbb-radio-button-group-orientation);
+  gap: var(--sbb-radio-button-group-gap);
+  align-items: flex-start;
+  width: var(--sbb-radio-button-group-width);
+}
+:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-radio-group {
+  margin-block-end: var(--sbb-spacing-fixed-1x);
+}
+::slotted(sbb-radio-button-panel) {
+  width: var(--sbb-radio-button-group-radio-button-width);
+  flex: var(--sbb-radio-button-group-radio-button-flex);
+}
 *,
 ::before,
 ::after {
@@ -1032,6 +1101,30 @@
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-card-background-color: var(--sbb-background-color-1);
+  --sbb-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-animation-easing: var(--sbb-animation-easing);
+  --sbb-card-border-color: transparent;
+  --sbb-card-border-style: solid;
+  --sbb-card-hover-shift: 0;
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
+}
+:root.sbb-lean {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
+}
+:root {
+  --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-card-badge-color: var(--sbb-color-2-inverted);
+  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
+  --sbb-card-badge-border-color: transparent;
+  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
+  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-badge-skew: skew(16deg, 0deg);
   --sbb-selection-panel-background-default: var(--sbb-background-color-1);
   --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
   --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1041,11 +1134,14 @@
   --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
   --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
   --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
-  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
-  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
   --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
   --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
+  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
   --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
   --sbb-selection-panel-suffix-color: var(--sbb-color-3);
   --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
@@ -1059,14 +1155,37 @@
   --sbb-checkbox-group-width: max-content;
   --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
   --sbb-checkbox-group-checkbox-flex: none;
+  --sbb-checkbox-dimension-xs: 1.25rem;
+  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
-  --sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-radio-button-label-color: var(--sbb-color-3);
+  --sbb-radio-button-background-color: var(--sbb-background-color-1);
+  --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-cursor: var(--sbb-cursor-pointer);
+  --sbb-radio-button-dimension-xs: 1.25rem;
+  --sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
+  --sbb-radio-button-inner-circle-dimension: 0.625rem;
+  --sbb-radio-button-font-size: var(--sbb-text-font-size-m);
+  --sbb-radio-button-group-orientation: row;
+  --sbb-radio-button-group-radio-button-width: auto;
+  --sbb-radio-button-group-width: max-content;
+  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-radio-button-group-radio-button-flex: none;
+  --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-action-panel-action-margin-inline: var(--sbb-selection-action-panel-action-margin-inline-m);
   --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
   --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
   --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
-  --sbb-selection-action-panel-action-margin-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
   --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
   --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
@@ -1076,9 +1195,7 @@
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
-  --sbb-visual-checkbox-dimension-xs: 1.25rem;
-  --sbb-visual-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
-  --sbb-visual-checkbox-dimension: var(--sbb-visual-checkbox-dimension-m);
+  --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
   --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
@@ -1100,6 +1217,10 @@
     --sbb-focus-outline-color-default: Highlight;
     --sbb-focus-outline-color-dark: Highlight;
     --sbb-focus-outline-width: var(--sbb-border-width-2x);
+    --sbb-card-border-color: CanvasText;
+    --sbb-card-border-width: var(--sbb-border-width-2x);
+    --sbb-card-badge-border-display: block;
+    --sbb-card-badge-inline-border-display: none;
     --sbb-visual-checkbox-selection-color: Canvas;
     --sbb-visual-checkbox-selection-color-negative: Canvas;
     --sbb-visual-checkbox-selection-color-disabled: Canvas;
@@ -1108,6 +1229,9 @@
     --sbb-visual-checkbox-border-color-disabled: GrayText;
     --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
     --sbb-visual-checkbox-border-style-disabled: solid;
+    --sbb-radio-button-background-color: Canvas;
+    --sbb-radio-button-border-width: var(--sbb-border-width-2x);
+    --sbb-radio-button-border-color: ButtonBorder;
   }
 }
 :root {
@@ -1261,6 +1385,7 @@ html {
   line-height: var(--sbb-typo-line-height-text);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
+  color-scheme: light dark;
   color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
@@ -1485,7 +1610,7 @@ sbb-breadcrumb-group:not(:defined) {
   overflow: hidden;
 }
-[data-card-focusable] {
+:is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
@@ -1626,28 +1751,28 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
-sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
   --sbb-sidebar-container-animation-duration: 0s;
 }
-sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is([data-state=closing],
-[data-state=closed],
+sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
 [mode=over],
-[data-mode-over-forced])),
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
 :not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
   --sbb-sidebar-content__margin-inline-start: 0;
 }
-sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is([data-state=closing],
-[data-state=closed],
+sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
 [mode=over],
-[data-mode-over-forced])),
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
 :not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
   --sbb-sidebar-content__margin-inline-end: 0;
 }
-sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], [data-mode-over-forced]):is([data-state=opening],
-[data-state=opened])) {
+sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
+:is(:state(state-opened),[state--state-opened]))) {
   --sbb-sidebar-container__backdrop-visibility: visible;
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }