@scania/tegel 1.56.0 → 1.57.0

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 :host {
   align-items: center;
   position: relative;
@@ -6,7 +7,12 @@
 
 .tds-checkbox {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   color: var(--tds-checkbox-text);
   display: flex;
@@ -21,7 +27,6 @@
   outline: none;
   margin: 0;
   border: 0;
-  border-radius: 2px;
   width: 24px;
   height: 24px;
   position: relative;
@@ -30,7 +35,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--tds-checkbox-color);
+  color: var(--tds-checkbox-text);
   padding-left: var(--tds-spacing-element-4);
   padding-top: var(--tds-spacing-element-4);
   padding-bottom: var(--tds-spacing-element-4);
@@ -50,84 +55,91 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-}
-.tds-checkbox input[type=checkbox]::before {
-  width: 20px;
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  border-radius: 4px;
-}
-.tds-checkbox input[type=checkbox]::after {
-  border: 1px solid var(--tds-checkbox-interaction-01);
-  background-color: var(--tds-checkbox-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
-  border-radius: 2px;
+}
+.tds-checkbox input[type=checkbox]::before {
+  border: 1px solid var(--tds-checkbox-border);
+  background-color: var(--tds-checkbox-background);
+  border-radius: var(--tds-checkbox-border-radius);
+  box-shadow: 0 0 0 2px var(--tds-checkbox-indicator);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.tds-checkbox input[type=checkbox]::after {
+  background-color: var(--tds-checkbox-icon-selected);
+  mask: var(--tds-checkbox-icon-mask) no-repeat center;
+  -webkit-mask: var(--tds-checkbox-icon-mask) no-repeat center;
+  opacity: 0;
+  z-index: 1;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
+  border-color: var(--tds-checkbox-border-hover);
   background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  box-shadow: 0 0 0 2px var(--tds-checkbox-indicator-hover);
 }
 .tds-checkbox input[type=checkbox]:focus-visible::before {
-  background-color: var(--tds-checkbox-background-focus);
-  opacity: var(--tds-checkbox-background-opacity-focus);
-  transition: opacity 0.2s ease-in-out;
+  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-checkbox-focus-ring-radius);
 }
-.tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.tds-checkbox input[type=checkbox]:disabled::after, .tds-checkbox input[type=checkbox].disabled::after {
-  border-color: var(--tds-checkbox-border-color-disabled-after);
-}
-.tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-checkbox-disabled);
-  cursor: not-allowed;
-}
-.tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
-  display: none;
+.tds-checkbox input[type=checkbox]:checked::before {
+  border-color: var(--tds-checkbox-border-selected);
+  background-color: var(--tds-checkbox-background-selected);
 }
 .tds-checkbox input[type=checkbox]:checked::after {
-  background-image: var(--tds-checkbox-background-img);
-  background-color: var(--tds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
+  background-color: var(--tds-checkbox-icon-selected);
+  opacity: 1;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  border-color: var(--tds-checkbox-border-selected-hover);
+  background-color: var(--tds-checkbox-background-selected-hover);
 }
-.tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before, .tds-checkbox input[type=checkbox]:checked.disabled:hover::before, .tds-checkbox input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
+.tds-checkbox input[type=checkbox]:checked:hover::after {
+  background-color: var(--tds-checkbox-icon-selected-hover);
 }
-.tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=checkbox]:checked.disabled::after {
-  background-image: var(--tds-checkbox-background-img-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+.tds-checkbox input[type=checkbox]:indeterminate::before {
+  border-color: var(--tds-checkbox-border-indeterminate);
+  background-color: var(--tds-checkbox-background-indeterminate);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate);
-  background-color: var(--tds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
+  background-color: var(--tds-checkbox-icon-indeterminate);
+  mask: var(--tds-checkbox-icon-mask-indeterminate) no-repeat center;
+  -webkit-mask: var(--tds-checkbox-icon-mask-indeterminate) no-repeat center;
+  opacity: 1;
 }
-.tds-checkbox input[type=checkbox]:indeterminate:disabled:hover::before, .tds-checkbox input[type=checkbox]:indeterminate:disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
+.tds-checkbox input[type=checkbox]:indeterminate:hover::before {
+  border-color: var(--tds-checkbox-border-indeterminate-hover);
+  background-color: var(--tds-checkbox-background-indeterminate-hover);
+}
+.tds-checkbox input[type=checkbox]:indeterminate:hover::after {
+  background-color: var(--tds-checkbox-icon-indeterminate-hover);
 }
-.tds-checkbox input[type=checkbox]:indeterminate:disabled::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+.tds-checkbox input[type=checkbox]:hover + label {
+  color: var(--tds-checkbox-text-hover);
+}
+.tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
+  cursor: not-allowed;
+  opacity: var(--tds-checkbox-opacity-disabled);
+}
+.tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
+  border-color: var(--tds-checkbox-border);
+  background-color: var(--tds-checkbox-background);
+  box-shadow: none;
+}
+.tds-checkbox input[type=checkbox]:disabled:checked:hover::before, .tds-checkbox input[type=checkbox].disabled:checked:hover::before {
+  border-color: var(--tds-checkbox-border-selected);
+  background-color: var(--tds-checkbox-background-selected);
+}
+.tds-checkbox input[type=checkbox]:disabled:indeterminate:hover::before, .tds-checkbox input[type=checkbox].disabled:indeterminate:hover::before {
+  border-color: var(--tds-checkbox-border-indeterminate);
+  background-color: var(--tds-checkbox-background-indeterminate);
+}
+.tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
+  color: var(--tds-checkbox-text);
+  opacity: var(--tds-checkbox-opacity-disabled);
+  cursor: not-allowed;
 }

package/dist/collection/components/radio-button/radio-button.css

@@ -1,11 +1,17 @@
+/* Typography Usage mixins */
 .tds-radio-button {
   box-sizing: border-box;
+  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);
   display: flex;
   align-items: center;
   margin-left: -4px;
-  font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-radio-button-color);
+  color: var(--tds-radio-button-text);
 }
 .tds-radio-button * {
   box-sizing: border-box;
@@ -17,7 +23,6 @@
   border: 0;
   width: 20px;
   height: 24px;
-  border-radius: 50%;
   position: relative;
   cursor: pointer;
   flex-shrink: 0;
@@ -25,77 +30,78 @@
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
   padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;
+  color: var(--tds-radio-button-text);
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
   content: "";
   position: absolute;
-  border-radius: 50%;
   box-sizing: border-box;
+  border-radius: var(--tds-radio-button-border-radius);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 20px;
-  height: 20px;
-  top: 2px;
-}
-.tds-radio-button .tds-form-input[type=radio]::after {
-  border: 1px solid var(--tds-radio-button-interaction-01);
-  background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  border: 1px solid var(--tds-radio-button-border);
+  background-color: var(--tds-radio-button-background);
+  box-shadow: 0 0 0 2px var(--tds-radio-button-indicator);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.tds-radio-button .tds-form-input[type=radio]::after {
+  width: 6px;
+  height: 6px;
+  background-color: var(--tds-radio-button-icon-selected);
+  opacity: 0;
+  z-index: 1;
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
+  border-color: var(--tds-radio-button-border-hover);
   background-color: var(--tds-radio-button-background-hover);
+  box-shadow: 0 0 0 2px var(--tds-radio-button-indicator-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::before {
-  background-color: var(--tds-radio-button-background-focus);
-  box-shadow: 0 0 0 1px var(--tds-radio-button-background-focus);
-  animation: rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards;
+  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-radio-button-focus-ring-radius);
 }
-.tds-radio-button .tds-form-input[type=radio]:focus-visible::after {
-  outline: 1px solid var(--tds-radio-button-interaction-outline);
+.tds-radio-button .tds-form-input[type=radio]:hover + label {
+  color: var(--tds-radio-button-text-hover);
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
-  cursor: not-allowed;
+.tds-radio-button .tds-form-input[type=radio]:checked::before {
+  border-color: var(--tds-radio-button-border-selected);
+  background-color: var(--tds-radio-button-background-selected);
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
-  border-color: var(--tds-radio-button-border-color-disabled-after);
-  background-color: var(--tds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]:checked::after {
+  background-color: var(--tds-radio-button-icon-selected);
+  opacity: 1;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
-  color: var(--tds-radio-button-disabled);
+.tds-radio-button .tds-form-input[type=radio]:checked:hover::before {
+  border-color: var(--tds-radio-button-border-selected-hover);
+  background-color: var(--tds-radio-button-background-selected-hover);
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:hover::after {
+  background-color: var(--tds-radio-button-icon-selected-hover);
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
+  opacity: var(--tds-radio-button-opacity-disabled);
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
-  display: none;
-  opacity: 1;
+  border-color: var(--tds-radio-button-border);
+  background-color: var(--tds-radio-button-background);
+  box-shadow: none;
 }
-.tds-radio-button .tds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--tds-radio-button-interaction-01);
+.tds-radio-button .tds-form-input[type=radio]:disabled:checked:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:checked:hover::before {
+  border-color: var(--tds-radio-button-border-selected);
+  background-color: var(--tds-radio-button-background-selected);
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
-  display: block;
-  background-color: transparent;
-  width: 16px;
-  height: 16px;
-  left: 2px;
-  top: 4px;
-  box-shadow: inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after);
-}
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--tds-radio-button-interaction-02);
-  background-color: var(--tds-radio-button-color-disabled-after);
-  clip-path: inset(1px 1px round 50%);
-}
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-  }
+.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
+  color: var(--tds-radio-button-text);
+  opacity: var(--tds-radio-button-opacity-disabled);
+  cursor: not-allowed;
 }

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,41 @@
+/**
+ * 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-radio-button',
+  'tl-text-field',
+  'tl-textarea',
+  'tl-toast',
+  'tl-toggle',
+  'tl-tooltip',
+];