@scania/tegel 1.56.0 → 1.58.0-side-menu-beta.0

package/dist/collection/components/toggle/toggle.css

@@ -1,14 +1,19 @@
+/* Typography Usage mixins */
 .tds-toggle .disabled {
   cursor: not-allowed;
 }
 .tds-toggle .toggle-headline {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-toggle-headline);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--tds-toggle-text);
   margin-bottom: 12px;
 }
 .tds-toggle .toggle-headline.disabled {
-  color: var(--tds-toggle-headline-disabled);
+  opacity: var(--tds-toggle-opacity-disabled);
 }
 .tds-toggle input[type=checkbox] {
   appearance: initial;
@@ -19,7 +24,8 @@
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
-  /* Switch */
+  /* Track */
+  /* Knob */
 }
 .tds-toggle input[type=checkbox]::after, .tds-toggle input[type=checkbox]::before {
   content: "";
@@ -28,74 +34,62 @@
   transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
 }
 .tds-toggle input[type=checkbox]::before {
-  /* Slider */
   width: 44px;
   height: 24px;
-  border-radius: 16px;
-  background-color: var(--tds-toggle-off-slider);
+  border-radius: var(--tds-toggle-border-radius);
+  background-color: var(--tds-toggle-off);
   left: 0;
   border: 1px solid transparent;
 }
 .tds-toggle input[type=checkbox]::after {
   width: 16px;
   height: 16px;
-  background-color: var(--tds-toggle-switch);
+  background-color: var(--tds-toggle-knob);
   border-radius: 50%;
   left: 4px;
   top: 4px;
 }
-.tds-toggle input[type=checkbox]:focus-visible {
-  outline: none;
-  outline: 2px solid var(--tds-toggle-border-outline);
-  border-radius: 16px;
-  outline-offset: -2px;
-}
-.tds-toggle input[type=checkbox]:focus-visible::before {
-  width: 40px;
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  background-color: var(--tds-toggle-off-slider-focus);
-  border: 1px solid var(--tds-toggle-off-border-focus);
-}
 .tds-toggle input[type=checkbox]:hover::before {
-  background-color: var(--tds-toggle-off-slider-hover);
+  background-color: var(--tds-toggle-off-hover);
 }
-.tds-toggle input[type=checkbox]:active::before {
-  background-color: var(--tds-toggle-off-slider-pressed);
+.tds-toggle input[type=checkbox]:hover::after {
+  background-color: var(--tds-toggle-knob-hover);
 }
-.tds-toggle input[type=checkbox]:checked::before {
-  background-color: var(--tds-toggle-on-slider);
+.tds-toggle input[type=checkbox]:active::before {
+  background-color: var(--tds-toggle-off-active);
 }
-.tds-toggle input[type=checkbox]:checked:focus-visible::before {
-  background-color: var(--tds-toggle-on-slider-focus);
-  border: 1px solid var(--tds-toggle-on-border-focus);
+.tds-toggle input[type=checkbox]:active::after {
+  background-color: var(--tds-toggle-knob-active);
 }
-.tds-toggle input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-toggle-on-slider-hover);
+.tds-toggle input[type=checkbox]:focus-visible {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
+  border-radius: var(--tds-toggle-focus-ring-radius);
 }
-.tds-toggle input[type=checkbox]:checked:active::before {
-  background-color: var(--tds-toggle-on-slider-pressed);
+.tds-toggle input[type=checkbox]:checked::before {
+  background-color: var(--tds-toggle-on);
 }
 .tds-toggle input[type=checkbox]:checked::after {
+  background-color: var(--tds-toggle-knob-on);
   left: 24px;
 }
-.tds-toggle input[type=checkbox]:disabled {
-  cursor: not-allowed;
+.tds-toggle input[type=checkbox]:checked:hover::before {
+  background-color: var(--tds-toggle-on-hover);
 }
-.tds-toggle input[type=checkbox]:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
+.tds-toggle input[type=checkbox]:checked:hover::after {
+  background-color: var(--tds-toggle-knob-on-hover);
 }
-.tds-toggle input[type=checkbox]:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
+.tds-toggle input[type=checkbox]:checked:active::before {
+  background-color: var(--tds-toggle-on-active);
 }
-.tds-toggle input[type=checkbox]:disabled:checked::before {
-  background-color: var(--tds-toggle-on-slider-disabled);
-  border: 1px solid var(--tds-toggle-on-slider-disabled);
+.tds-toggle input[type=checkbox]:checked:active::after {
+  background-color: var(--tds-toggle-knob-on-active);
 }
-.tds-toggle input[type=checkbox]:disabled:checked::after {
-  background-color: var(--tds-toggle-switch-disabled);
+.tds-toggle input[type=checkbox]:disabled {
+  cursor: not-allowed;
+  opacity: var(--tds-toggle-opacity-disabled);
 }
 .tds-toggle input[type=checkbox].sm {
   width: 28px;
@@ -109,52 +103,22 @@
   width: 8px;
   height: 8px;
 }
-.tds-toggle input[type=checkbox].sm:focus-visible::before {
-  width: 24px;
-  height: 12px;
-  left: 2px;
-  top: 2px;
-  background-color: var(--tds-toggle-off-slider-focus);
-  border: 1px solid var(--tds-toggle-off-border-focus);
-}
-.tds-toggle input[type=checkbox].sm:focus-visible:active::before {
-  background-color: var(--tds-toggle-off-slider-pressed);
-}
-.tds-toggle input[type=checkbox].sm:active::before {
-  background-color: var(--tds-toggle-off-slider-pressed);
-}
-.tds-toggle input[type=checkbox].sm:checked::before {
-  background-color: var(--tds-toggle-on-slider);
-}
-.tds-toggle input[type=checkbox].sm:checked:focus-visible::before {
-  background-color: var(--tds-toggle-on-slider-focus);
-  border: 1px solid var(--tds-toggle-on-border-focus);
-}
-.tds-toggle input[type=checkbox].sm:checked:hover::before {
-  background-color: var(--tds-toggle-on-slider-hover);
-}
-.tds-toggle input[type=checkbox].sm:checked:active::before {
-  background-color: var(--tds-toggle-on-slider-pressed);
-}
 .tds-toggle input[type=checkbox].sm:checked::after {
   left: 16px;
 }
-.tds-toggle input[type=checkbox].sm:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
-}
-.tds-toggle input[type=checkbox].sm:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
-}
 .tds-toggle label {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
   display: inline-block;
   vertical-align: middle;
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
-  color: var(--tds-toggle-label-color);
+  color: var(--tds-toggle-text);
   padding-left: 8px;
   cursor: pointer;
 }
 .tds-toggle label.disabled {
-  color: var(--tds-toggle-label-color-disabled);
+  opacity: var(--tds-toggle-opacity-disabled);
 }

package/dist/collection/tegel-lite/shipped-components.js

@@ -0,0 +1,43 @@
+/**
+ * Single source of truth for the tegel-lite components that ship in the
+ * @scania/tegel-lite npm package and appear in production Storybook.
+ *
+ * Only components migrated to the new variable structure
+ * (per .claude/skills/tegel-variable-migration/SKILL.md) are listed here,
+ * plus tl-icon, which provides icon assets required by the migrated set.
+ *
+ * Consumed by:
+ *  - packages/core/scripts/compile-tegel-lite-components.js (per-component CSS emit)
+ *  - packages/core/scripts/update-tegel-lite-exports.js (package.json exports map)
+ *  - packages/core/.storybook/main.ts (prod-Storybook story-file allowlist)
+ *  - packages/core/src/tegel-lite/components.scss (manual sync — npm components.css bundle)
+ *
+ * The Storybook bundle (src/global/tegel-lite-components.scss) intentionally
+ * still imports every tl-* component so dev-mode Storybook can render
+ * un-shipped components in flight; the prod story-file filter in main.ts
+ * controls which stories the published Storybook actually surfaces.
+ */
+export const SHIPPED_COMPONENTS = [
+  'tl-accordion',
+  'tl-banner',
+  'tl-block',
+  'tl-breadcrumbs',
+  'tl-datetime',
+  'tl-button',
+  'tl-card',
+  'tl-checkbox',
+  'tl-divider',
+  'tl-footer',
+  'tl-icon',
+  'tl-link',
+  'tl-message',
+  'tl-modal',
+  'tl-popover-canvas',
+  'tl-popover-menu',
+  'tl-radio-button',
+  'tl-text-field',
+  'tl-textarea',
+  'tl-toast',
+  'tl-toggle',
+  'tl-tooltip',
+];