@scania/tegel-lite 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/tl-text-field.css

@@ -1246,23 +1246,12 @@
   position: relative;
   width: 100%;
   min-width: 208px;
-  height: 56px;
-  padding-bottom: 1px;
   border-radius: var(--text-field-border-radius);
   box-sizing: border-box;
 }
 .tl-text-field--no-min-width {
   min-width: auto;
 }
-.tl-text-field--lg {
-  height: 56px;
-}
-.tl-text-field--md {
-  height: 48px;
-}
-.tl-text-field--sm {
-  height: 40px;
-}
 .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
   content: "";
   position: absolute;
@@ -1371,12 +1360,15 @@
 }
 .tl-text-field--lg .tl-text-field__input {
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  height: 56px;
 }
 .tl-text-field--md .tl-text-field__input {
   padding: var(--tds-spacing-element-16);
+  height: 48px;
 }
 .tl-text-field--sm .tl-text-field__input {
   padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
+  height: 40px;
 }
 .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
   padding-top: var(--tds-spacing-element-24);

package/dist/traton-variables.css

@@ -376,7 +376,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 .traton,
-.traton .tds-mode-light {
+.traton.tds-mode-light {
   --color-background-base: var(--traton-color-grey-50);
   --color-background-accent-primary-default: var(--traton-color-blue-800);
   --color-background-accent-primary-disabled: var(--traton-color-blue-100);
@@ -507,7 +507,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.traton .tds-mode-dark {
+.traton.tds-mode-dark {
   --color-background-base: var(--traton-color-blue-1000);
   --color-background-accent-primary-default: var(--traton-color-grey-300);
   --color-background-accent-primary-disabled: var(--traton-color-grey-900);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.4",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [
@@ -26,6 +26,7 @@
     "./global.css": "./dist/global.css",
     "./scania-variables.css": "./dist/scania-variables.css",
     "./traton-variables.css": "./dist/traton-variables.css",
+    "./components.css": "./dist/components.css",
     "./tl-accordion.css": "./dist/tl-accordion.css",
     "./tl-badge.css": "./dist/tl-badge.css",
     "./tl-banner.css": "./dist/tl-banner.css",
@@ -47,7 +48,6 @@
     "./tl-step.css": "./dist/tl-step.css",
     "./tl-stepper.css": "./dist/tl-stepper.css",
     "./tl-text-field.css": "./dist/tl-text-field.css",
-    "./tl-textarea-mixins.css": "./dist/tl-textarea-mixins.css",
     "./tl-textarea.css": "./dist/tl-textarea.css",
     "./tl-toast.css": "./dist/tl-toast.css",
     "./tl-toggle.css": "./dist/tl-toggle.css",
@@ -60,7 +60,10 @@
     "./tl-side-menu.css": "./dist/tl-side-menu.css",
     "./tl-footer.css": "./dist/tl-footer.css",
     "./tl-slider.css": "./dist/tl-slider.css",
-    "./tl-radiobutton.css": "./dist/tl-radiobutton.css"
+    "./tl-radiobutton.css": "./dist/tl-radiobutton.css",
+    "./tl-folder-tabs.css": "./dist/tl-folder-tabs.css",
+    "./tl-inline-tabs.css": "./dist/tl-inline-tabs.css",
+    "./tl-navigation-tabs.css": "./dist/tl-navigation-tabs.css"
   },
   "repository": {
     "type": "git",

package/dist/tl-radiobutton.css

@@ -1,165 +0,0 @@
-@charset "UTF-8";
-.tl-radiobutton {
-  --radio-button-background-hover: var(--color-foreground-border-discrete);
-  --radio-button-background-inverse: var(--color-foreground-icon-inverse-strong);
-  --radio-button-background-disabled: var(--color-background-accent-primary-disabled);
-  --radio-button-border: var(--color-foreground-border-strong);
-  --radio-button-label: var(--color-foreground-text-strong);
-  --radio-button-label-disabled: var(--color-foreground-text-disabled);
-  --radio-button-focus: var(--color-foreground-border-accent-focus);
-  --radio-button-checked-disabled: var(--color-foreground-icon-disabled);
-  --radio-button-spacing-4: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4)
-    var(--tds-spacing-element-4);
-}
-
-/* Typography Usage mixins */
-/* Block */
-.tl-radiobutton {
-  box-sizing: border-box;
-}
-.tl-radiobutton * {
-  box-sizing: border-box;
-}
-.tl-radiobutton {
-  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(--radio-button-label);
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-}
-
-/* Elements */
-/* INPUT — semantic control (hidden visually) */
-.tl-radiobutton__input {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  inline-size: 24px;
-  block-size: 24px;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  border-radius: 50%;
-  /* Focus: pulse + thin outline on visual control */
-}
-.tl-radiobutton__input:focus + .tl-radiobutton__control::before {
-  background-color: var(--radio-button-focus);
-  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
-}
-.tl-radiobutton__input:focus + .tl-radiobutton__control::after {
-  outline: 1px solid var(--tds-radio-button-interaction-outline);
-}
-.tl-radiobutton__input {
-  /* Checked: thicker border to create dot effect */
-}
-.tl-radiobutton__input:checked + .tl-radiobutton__control::after {
-  border: 4px solid var(--radio-button-border);
-}
-.tl-radiobutton__input {
-  /* Checked + focus: thicker outline on inner circle */
-}
-.tl-radiobutton__input:checked:focus + .tl-radiobutton__control::after {
-  outline: 4px solid var(--radio-button-focus);
-}
-.tl-radiobutton--disabled .tl-radiobutton__input:checked + .tl-radiobutton__control::before {
-  border: 1px solid var(--radio-button-border-disabled);
-  display: block;
-  inline-size: 16px;
-  block-size: 16px;
-  left: 3px;
-  top: 3px;
-  box-sizing: content-box;
-}
-.tl-radiobutton--disabled .tl-radiobutton__input:checked + .tl-radiobutton__control::after {
-  border: 4px solid var(--radio-button-background-disabled);
-  background-color: var(--radio-button-checked-disabled);
-  left: 4px;
-  top: 4px;
-}
-
-/* CONTROL — visual ring + inner circle */
-.tl-radiobutton__control {
-  inline-size: 24px;
-  block-size: 24px;
-  border-radius: 50%;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-  align-self: flex-start;
-  box-sizing: border-box;
-}
-.tl-radiobutton__control::before, .tl-radiobutton__control::after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  box-sizing: border-box;
-}
-.tl-radiobutton__control {
-  /* focus "pulse" background holder */
-}
-.tl-radiobutton__control::before {
-  inline-size: 22px;
-  block-size: 22px;
-  left: 1px;
-  top: 1px;
-}
-.tl-radiobutton__control {
-  /* base inner circle + ring */
-}
-.tl-radiobutton__control::after {
-  background-color: var(--radio-button-background-inverse);
-  border: 1px solid var(--radio-button-border);
-  inline-size: 16px;
-  block-size: 16px;
-  left: 4px;
-  top: 4px;
-}
-.tl-radiobutton__control {
-  /* Hover outline (only when not disabled) */
-}
-.tl-radiobutton:not(.tl-radiobutton--disabled):hover .tl-radiobutton__control::after {
-  outline: 2px solid var(--radio-button-background-hover);
-}
-.tl-radiobutton__control {
-  /* Disabled visuals */
-}
-.tl-radiobutton--disabled .tl-radiobutton__control {
-  cursor: not-allowed;
-}
-.tl-radiobutton--disabled .tl-radiobutton__control::before {
-  outline: 1px solid var(--radio-button-border-disabled);
-  outline-offset: -4px;
-}
-.tl-radiobutton--disabled .tl-radiobutton__control::after {
-  background-color: var(--radio-button-background-disabled);
-  border-color: var(--radio-button-background-disabled);
-  /* prevent hover outline when disabled */
-  outline: none;
-}
-
-/* LABEL — spacing & disabled color */
-.tl-radiobutton__label {
-  padding: var(--radio-button-spacing-4);
-  cursor: pointer;
-}
-.tl-radiobutton--disabled .tl-radiobutton__label {
-  color: var(--radio-button-label-disabled);
-  cursor: not-allowed;
-}
-
-/* Focus animation */
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-  }
-}