@scania/tegel-lite 0.0.1-beta.0 → 0.0.1-beta.10

package/dist/tl-textarea.css

@@ -61,13 +61,13 @@
 .tl-textarea--no-min-width {
   min-width: auto;
 }
-.tl-textarea--disabled {
-  pointer-events: none;
+.tl-textarea:has(.tl-textarea__input:disabled) {
+  cursor: not-allowed;
 }
-.tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
+.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
   content: "";
   position: absolute;
-  top: 19px;
+  top: 18px;
   right: 18px;
   width: 16px;
   height: 16px;
@@ -78,14 +78,27 @@
   mask-position: center;
   z-index: 1;
 }
-.tl-textarea:not(.tl-textarea--label-inside).tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
+.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 20px;
+  right: 16px;
+}
+.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 42px;
+}
+.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
   top: 44px;
 }
+.tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 17px;
+}
+.traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  top: 19px;
+}
 .tl-textarea::after {
   content: "";
   position: absolute;
-  bottom: 5px;
-  right: 2px;
+  bottom: 3px;
+  right: 3px;
   width: 12px;
   height: 12px;
   background-color: var(--textarea-resize-icon);
@@ -97,14 +110,14 @@
   z-index: 1;
 }
 .traton .tl-textarea::after {
-  bottom: 7px;
+  bottom: 5px;
   right: 4px;
 }
 .tl-textarea:not(.tl-textarea--label-inside)::after {
-  bottom: 7px;
+  bottom: 5px;
 }
 .traton .tl-textarea:not(.tl-textarea--label-inside)::after {
-  bottom: 9px;
+  bottom: 5px;
 }
 .tl-textarea:has(.tl-textarea__bottom)::after {
   bottom: 25px;
@@ -112,7 +125,7 @@
 .traton .tl-textarea:has(.tl-textarea__bottom)::after {
   bottom: 27px;
 }
-.tl-textarea--disabled::after {
+.tl-textarea :has(.tl-textarea__input:disabled)::after {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -165,7 +178,7 @@
 .tl-textarea__input::-webkit-resizer {
   display: none;
 }
-.tl-textarea:hover .tl-textarea__input:not(:focus) {
+.tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--textarea-box-shadow-hover);
 }
 .tl-textarea--error .tl-textarea__input {
@@ -174,25 +187,27 @@
 .tl-textarea--error .tl-textarea__input:focus {
   box-shadow: inset var(--textarea-box-shadow-error-focus);
 }
-.tl-textarea--error:hover .tl-textarea__input:not(:focus) {
+.tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
   box-shadow: inset var(--textarea-box-shadow-error-hover);
 }
-.tl-textarea--success:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__input:not(:focus) {
+.tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
   box-shadow: inset var(--textarea-box-shadow-success);
 }
-.tl-textarea--readonly .tl-textarea__input {
+.tl-textarea__input:disabled {
+  box-shadow: none;
+  color: var(--textarea-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   box-shadow: inset var(--textarea-box-shadow);
 }
-.tl-textarea--readonly .tl-textarea__input:focus {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
   box-shadow: inset var(--textarea-box-shadow-focus);
 }
-.tl-textarea--readonly:hover .tl-textarea__input:not(:focus) {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
   box-shadow: inset var(--textarea-box-shadow-hover);
 }
-.tl-textarea--disabled .tl-textarea__input {
-  box-shadow: none;
-  color: var(--textarea-text-disabled);
-}
 .tl-textarea--label-inside .tl-textarea__input {
   padding-top: 26px;
   padding-bottom: 15px;
@@ -201,16 +216,16 @@
   color: transparent;
   transform: translateY(1px);
 }
-.tl-textarea--disabled.tl-textarea--label-inside .tl-textarea__input::placeholder {
-  color: var(--textarea-placeholder) !important;
+.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
+  color: var(--textarea-placeholder-disabled) !important;
 }
-.tl-textarea--readonly .tl-textarea__input {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   user-select: auto;
   caret-color: transparent;
   cursor: default;
   pointer-events: none;
 }
-.tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon) .tl-textarea__input {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
   padding-right: 50px;
 }
 
@@ -242,7 +257,7 @@
   transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
   z-index: 1;
 }
-.tl-textarea--label-inside.tl-textarea--disabled .tl-textarea__label {
+.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
   font-family: var(--detail-07-font-family);
   font-size: var(--detail-07-font-size);
   line-height: var(--detail-07-line-height);
@@ -253,7 +268,7 @@
   color: var(--textarea-label-disabled);
   transform: translateY(0);
 }
-.tl-textarea:not(.tl-textarea--label-inside).tl-textarea--disabled .tl-textarea__label {
+.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
   color: var(--textarea-label-disabled);
 }
 
@@ -273,7 +288,7 @@
   color: var(--textarea-helper);
   position: relative;
 }
-.tl-textarea--disabled .tl-textarea__helper {
+:has(.tl-textarea__input:disabled) .tl-textarea__helper {
   color: var(--color-foreground-text-disabled);
 }
 .tl-textarea--error .tl-textarea__helper {
@@ -292,16 +307,16 @@
   mask-repeat: no-repeat;
   mask-position: center;
 }
-.tl-textarea--error.tl-textarea--readonly .tl-textarea__helper {
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
   padding-left: 0;
 }
-.tl-textarea--error.tl-textarea--readonly .tl-textarea__helper::before {
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
   display: none;
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__helper {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
   color: var(--textarea-error);
 }
-.tl-textarea--error.tl-textarea--disabled .tl-textarea__helper::before {
+.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
   background-color: var(--color-foreground-text-disabled);
 }
 
@@ -315,13 +330,13 @@
   margin-left: auto;
   color: var(--textarea-textcounter);
 }
-.tl-textarea--disabled .tl-textarea__charcounter {
+:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
   color: var(--color-foreground-text-disabled);
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
   color: var(--textarea-error);
 }
-.tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
   color: var(--textarea-error);
 }
 

package/dist/tl-toggle.css

@@ -8,6 +8,10 @@
   --toggle-border-focus: var(--color-foreground-border-accent-focus);
 }
 
+.tl-toggle:has(input[type=checkbox]:disabled) {
+  cursor: not-allowed;
+}
+
 .tl-toggle__input {
   appearance: initial;
   margin: 0;
@@ -65,6 +69,7 @@
 }
 .tl-toggle__input:disabled {
   pointer-events: none;
+  cursor: not-allowed;
 }
 .tl-toggle__input:disabled::before {
   background-color: var(--toggle-disabled);
@@ -113,9 +118,10 @@
   color: var(--toggle-text);
   margin-bottom: 12px;
 }
-.tl-toggle__headline--disabled {
+:has(input[type=checkbox]:disabled) .tl-toggle__headline {
   color: var(--toggle-disabled);
   user-select: none;
+  cursor: not-allowed;
 }
 
 .tl-toggle__label {
@@ -132,7 +138,8 @@
   vertical-align: middle;
   padding-left: 8px;
 }
-.tl-toggle__label--disabled {
+input[type=checkbox]:disabled ~ .tl-toggle__label {
   color: var(--toggle-disabled);
   pointer-events: none;
+  cursor: not-allowed;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.10",
   "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,14 @@
     "./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",
+    "./tl-folder-tab.css": "./dist/tl-folder-tab.css",
+    "./tl-inline-tab.css": "./dist/tl-inline-tab.css",
+    "./tl-navigation-tab.css": "./dist/tl-navigation-tab.css",
+    "./tl-textarea-mixins.css": "./dist/tl-textarea-mixins.css"
   },
   "repository": {
     "type": "git",
@@ -69,8 +76,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist/"
+  ],
   "scripts": {
-    "prepublishOnly": "echo 'Warning: Run npm run build:lte from root before publishing'",
+    "prepublishOnly": "echo 'Warning: Run npm run build:tegel-lite from root before publishing'",
     "test": "npx playwright test"
   },
   "devDependencies": {

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);
-  }
-}