@scania/tegel-lite 1.2.0 → 1.2.1

package/dist/components.css

@@ -2222,45 +2222,26 @@
 .tl-datetime:has(input:disabled) .tl-datetime__wrapper {
   cursor: not-allowed;
 }
-.tl-datetime__wrapper {
-  /* CSS-generated icon */
-}
-.tl-datetime__wrapper::after {
-  content: "";
+
+.tl-datetime__icon {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   right: 18px;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 20px 20px;
-  background-color: var(--datetime-icon);
+  transform: translateY(-50%);
+  color: var(--datetime-icon);
   pointer-events: none;
-  /* Default: calendar icon for date/datetime inputs */
-  mask-image: var(--icon-calendar-svg);
-  /* Firefox - hide our custom icon since Firefox shows its own */
+  /* Firefox shows its own native picker icon — hide ours to avoid a duplicate */
 }
 @supports (-moz-appearance: none) {
-  .tl-datetime__wrapper::after {
+  .tl-datetime__icon {
     display: none;
   }
 }
-.tl-datetime__wrapper {
-  /* Change to clock icon for time input */
-}
-.tl-datetime__wrapper:has(input[type=time])::after {
-  mask-image: var(--icon-clock-svg);
-}
-.tl-datetime--error .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-error);
-}
-.tl-datetime__wrapper {
-  /* Disabled state */
+.tl-datetime--error .tl-datetime__icon {
+  color: var(--datetime-icon-error);
 }
-.tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-disabled);
+.tl-datetime:has(input:disabled) .tl-datetime__icon {
+  color: var(--datetime-icon-disabled);
 }
 
 .tl-datetime__input {
@@ -2292,7 +2273,7 @@
 .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-focus);
 }
-.tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-hover);
 }
 .tl-datetime--error .tl-datetime__input {
@@ -2301,7 +2282,7 @@
 .tl-datetime--error .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-error-focus);
 }
-.tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-error-hover);
 }
 .tl-datetime--error .tl-datetime__input:disabled {

package/dist/tl-datetime.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .tl-datetime {
   --datetime-background-primary: var(--color-background-layer-01);
   --datetime-background-secondary: var(--color-background-layer-02);
@@ -178,45 +179,26 @@
 .tl-datetime:has(input:disabled) .tl-datetime__wrapper {
   cursor: not-allowed;
 }
-.tl-datetime__wrapper {
-  /* CSS-generated icon */
-}
-.tl-datetime__wrapper::after {
-  content: "";
+
+.tl-datetime__icon {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   right: 18px;
-  width: 20px;
-  height: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 20px 20px;
-  background-color: var(--datetime-icon);
+  transform: translateY(-50%);
+  color: var(--datetime-icon);
   pointer-events: none;
-  /* Default: calendar icon for date/datetime inputs */
-  mask-image: var(--icon-calendar-svg);
-  /* Firefox - hide our custom icon since Firefox shows its own */
+  /* Firefox shows its own native picker icon — hide ours to avoid a duplicate */
 }
 @supports (-moz-appearance: none) {
-  .tl-datetime__wrapper::after {
+  .tl-datetime__icon {
     display: none;
   }
 }
-.tl-datetime__wrapper {
-  /* Change to clock icon for time input */
-}
-.tl-datetime__wrapper:has(input[type=time])::after {
-  mask-image: var(--icon-clock-svg);
-}
-.tl-datetime--error .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-error);
-}
-.tl-datetime__wrapper {
-  /* Disabled state */
+.tl-datetime--error .tl-datetime__icon {
+  color: var(--datetime-icon-error);
 }
-.tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
-  background-color: var(--datetime-icon-disabled);
+.tl-datetime:has(input:disabled) .tl-datetime__icon {
+  color: var(--datetime-icon-disabled);
 }
 
 .tl-datetime__input {
@@ -248,7 +230,7 @@
 .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-focus);
 }
-.tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-hover);
 }
 .tl-datetime--error .tl-datetime__input {
@@ -257,7 +239,7 @@
 .tl-datetime--error .tl-datetime__input:focus {
   box-shadow: inset var(--datetime-box-shadow-error-focus);
 }
-.tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
+.tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
   box-shadow: inset var(--datetime-box-shadow-error-hover);
 }
 .tl-datetime--error .tl-datetime__input:disabled {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [