@scania/tegel-lite 1.10.0 → 1.11.0

package/dist/components.css

@@ -8625,7 +8625,7 @@ body {
 .tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
   pointer-events: none;
 }
-.tl-slider:has(input[type=range]:disabled) {
+.tl-slider.tl-slider--disabled {
   pointer-events: none;
   cursor: not-allowed;
   opacity: var(--slider-opacity-disabled);
@@ -8677,6 +8677,10 @@ body {
   height: 24px;
   border-radius: 4px;
 }
+.tl-slider__control-minus.tl-button:disabled,
+.tl-slider__control-plus.tl-button:disabled {
+  opacity: 1;
+}
 .tl-slider__control-minus .tl-icon,
 .tl-slider__control-plus .tl-icon {
   color: var(--slider-controls-color);
@@ -8710,12 +8714,6 @@ body {
   display: block;
   background-color: var(--slider-thumb-active);
 }
-.tl-slider__track:focus-within .tl-slider__thumb-inner {
-  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;
-}
 .tl-slider__track:disabled {
   cursor: not-allowed;
 }
@@ -8738,34 +8736,37 @@ body {
 
 .tl-slider__input-wrapper.tl-text-field {
   flex-shrink: 0;
-  width: auto;
+  width: fit-content;
   height: auto;
   min-width: auto;
   margin-left: 0;
   align-self: center;
 }
 .tl-slider__input-wrapper.tl-text-field.tl-text-field:not(:has(.tl-text-field__input[readonly])), .tl-slider__input-wrapper.tl-text-field.tl-text-field.tl-text-field--hide-readonly-icon {
-  width: 50px;
+  width: fit-content;
 }
 .tl-slider__track-wrapper:not(:has(.tl-slider__value)) .tl-slider__input-wrapper.tl-text-field {
   top: -10px;
 }
+.tl-slider__input-wrapper.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper {
+  opacity: 1;
+}
 
-.tl-slider__input-wrapper .tl-slider__input-field {
-  width: 50px;
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field {
+  width: fit-content;
   padding: 12px;
   text-align: center;
   appearance: textfield;
   color: var(--slider-input-value);
   background-color: var(--slider-input-background);
 }
-.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 .tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
-  width: 74px;
+  width: fit-content;
   padding-right: 39px;
 }
 
@@ -8840,6 +8841,12 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.tl-slider__thumb-inner:focus {
+  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;
+}
 .tl-slider__thumb-inner:hover::before {
   display: block;
 }
@@ -8927,6 +8934,13 @@ body {
   top: -1px;
   z-index: 1;
 }
+.tl-slider--reverse .tl-slider__track-fill {
+  right: 0;
+  left: unset;
+}
+.tl-slider--range .tl-slider__track-fill {
+  left: unset;
+}
 
 .tl-slider__native-input {
   display: none;
@@ -11191,12 +11205,6 @@ body {
   border-style: solid;
   border-color: var(--component--input-border-hover);
 }
-:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
-  user-select: auto;
-  caret-color: transparent;
-  cursor: default;
-  pointer-events: none;
-}
 .tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
 .tl-text-field--hide-readonly-icon) .tl-text-field__input {
   padding-right: 54px;
@@ -11241,6 +11249,13 @@ body {
   color: transparent !important;
 }
 
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input[readonly] {
+  user-select: auto;
+  caret-color: transparent;
+  cursor: default;
+  pointer-events: none;
+}
+
 .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
   font-family: var(--detail-05-font-family);
   font-size: var(--detail-05-font-size);

package/dist/tl-slider.css

@@ -2259,7 +2259,7 @@
 .tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
   pointer-events: none;
 }
-.tl-slider:has(input[type=range]:disabled) {
+.tl-slider.tl-slider--disabled {
   pointer-events: none;
   cursor: not-allowed;
   opacity: var(--slider-opacity-disabled);
@@ -2311,6 +2311,10 @@
   height: 24px;
   border-radius: 4px;
 }
+.tl-slider__control-minus.tl-button:disabled,
+.tl-slider__control-plus.tl-button:disabled {
+  opacity: 1;
+}
 .tl-slider__control-minus .tl-icon,
 .tl-slider__control-plus .tl-icon {
   color: var(--slider-controls-color);
@@ -2344,12 +2348,6 @@
   display: block;
   background-color: var(--slider-thumb-active);
 }
-.tl-slider__track:focus-within .tl-slider__thumb-inner {
-  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;
-}
 .tl-slider__track:disabled {
   cursor: not-allowed;
 }
@@ -2372,34 +2370,37 @@
 
 .tl-slider__input-wrapper.tl-text-field {
   flex-shrink: 0;
-  width: auto;
+  width: fit-content;
   height: auto;
   min-width: auto;
   margin-left: 0;
   align-self: center;
 }
 .tl-slider__input-wrapper.tl-text-field.tl-text-field:not(:has(.tl-text-field__input[readonly])), .tl-slider__input-wrapper.tl-text-field.tl-text-field.tl-text-field--hide-readonly-icon {
-  width: 50px;
+  width: fit-content;
 }
 .tl-slider__track-wrapper:not(:has(.tl-slider__value)) .tl-slider__input-wrapper.tl-text-field {
   top: -10px;
 }
+.tl-slider__input-wrapper.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper {
+  opacity: 1;
+}
 
-.tl-slider__input-wrapper .tl-slider__input-field {
-  width: 50px;
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field {
+  width: fit-content;
   padding: 12px;
   text-align: center;
   appearance: textfield;
   color: var(--slider-input-value);
   background-color: var(--slider-input-background);
 }
-.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
+.tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-text-field__input.tl-slider__input-field::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 .tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
-  width: 74px;
+  width: fit-content;
   padding-right: 39px;
 }
 
@@ -2474,6 +2475,12 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.tl-slider__thumb-inner:focus {
+  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;
+}
 .tl-slider__thumb-inner:hover::before {
   display: block;
 }
@@ -2561,6 +2568,13 @@
   top: -1px;
   z-index: 1;
 }
+.tl-slider--reverse .tl-slider__track-fill {
+  right: 0;
+  left: unset;
+}
+.tl-slider--range .tl-slider__track-fill {
+  left: unset;
+}
 
 .tl-slider__native-input {
   display: none;

package/dist/tl-text-field.css

@@ -1612,12 +1612,6 @@
   border-style: solid;
   border-color: var(--component--input-border-hover);
 }
-:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
-  user-select: auto;
-  caret-color: transparent;
-  cursor: default;
-  pointer-events: none;
-}
 .tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
 .tl-text-field--hide-readonly-icon) .tl-text-field__input {
   padding-right: 54px;
@@ -1662,6 +1656,13 @@
   color: transparent !important;
 }
 
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input[readonly] {
+  user-select: auto;
+  caret-color: transparent;
+  cursor: default;
+  pointer-events: none;
+}
+
 .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
   font-family: var(--detail-05-font-family);
   font-size: var(--detail-05-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [
@@ -73,8 +73,8 @@
     "dist/"
   ],
   "devDependencies": {
-    "@playwright/test": "1.64.0",
-    "@types/node": "26.6.5",
+    "@playwright/test": "1.64.1",
+    "@types/node": "26.6.6",
     "serve": "^14.2.5"
   },
   "license": "MIT",