@scania/tegel-lite 1.7.0 → 1.8.0

package/dist/tl-text-field.css

@@ -211,7 +211,7 @@
   --text-field-label-disabled: var(--color-text-disabled);
   --text-field-affix-disabled: var(--color-text-disabled);
   --text-field-textcounter: var(--component--input-text-counter-default);
-  --text-field-opacity-disabled: var(--component--input-opacity-disabled);
+  --text-field-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
   --text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
     calc(var(--component--input-border-radius-top-right) * 1px)
     calc(var(--component--input-border-radius-bottom-right) * 1px)
@@ -1484,7 +1484,7 @@
 .tl-text-field:has(.tl-text-field__input:disabled) {
   cursor: not-allowed;
 }
-.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
+.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__bottom {
   opacity: var(--text-field-opacity-disabled);
 }
 .tl-text-field .tl-icon {
@@ -1494,7 +1494,8 @@
 .tl-text-field__input-wrapper {
   position: relative;
 }
-.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
+.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-wrapper::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1554,11 +1555,17 @@
   outline-offset: 1px;
   z-index: 1;
 }
-.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  border-color: var(--text-field-border-color-hover);
+.tl-text-field:hover .tl-text-field__input:not(:focus, :disabled) {
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-text-field--error .tl-text-field__input {
-  border-color: var(--text-field-border-color-error);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-text-field--error .tl-text-field__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1566,18 +1573,28 @@
   outline-offset: 1px;
   z-index: 1;
 }
-.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  border-color: var(--text-field-border-color-error);
+.tl-text-field--error:hover .tl-text-field__input:not(:focus, :disabled) {
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
-.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
-  border-color: var(--text-field-border-color-success);
+.tl-text-field--success:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-success-default);
 }
 .tl-text-field__input:disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
-  border-color: var(--text-field-border-color-readonly);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--color-border-defined);
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1586,7 +1603,10 @@
   z-index: 1;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
-  border-color: var(--text-field-border-color-hover);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  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;
@@ -1594,31 +1614,32 @@
   cursor: default;
   pointer-events: none;
 }
-.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
+.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;
 }
 .tl-text-field--lg .tl-text-field__input {
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  padding: var(--unit-20) var(--unit-16);
   height: 56px;
 }
 .tl-text-field--md .tl-text-field__input {
-  padding: var(--tds-spacing-element-16);
+  padding: var(--unit-16);
   height: 48px;
 }
 .tl-text-field--sm .tl-text-field__input {
-  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
+  padding: var(--unit-12) var(--unit-16);
   height: 40px;
 }
 .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-24);
+  padding-top: var(--unit-24);
   padding-bottom: 15px;
 }
 .tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-20);
+  padding-top: var(--unit-20);
   padding-bottom: 11px;
 }
 .tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
-  padding-top: var(--tds-spacing-element-16);
+  padding-top: var(--unit-16);
   padding-bottom: 7px;
 }
 .tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
@@ -1636,9 +1657,6 @@
 .tl-text-field--label-inside .tl-text-field__input::placeholder {
   color: transparent !important;
 }
-.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
-  color: var(--text-field-placeholder-disabled) !important;
-}
 
 .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
   font-family: var(--detail-05-font-family);
@@ -1695,12 +1713,6 @@
   opacity: 0;
   visibility: hidden;
 }
-.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
-  color: var(--text-field-label-disabled);
-}
-.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
-  color: var(--text-field-label-disabled);
-}
 
 .tl-text-field__bottom {
   display: flex;
@@ -1718,9 +1730,6 @@
   color: var(--text-field-helper);
   position: relative;
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__helper {
-  color: var(--color-text-disabled);
-}
 .tl-text-field--error .tl-text-field__helper {
   padding-left: 24px;
 }
@@ -1743,12 +1752,10 @@
 .tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
   display: none;
 }
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
   color: var(--text-field-error);
 }
-.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
-  background-color: var(--color-text-disabled);
-}
 
 .tl-text-field__charcounter {
   font-family: var(--detail-05-font-family);
@@ -1760,20 +1767,15 @@
   margin-left: auto;
   color: var(--text-field-textcounter);
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
-  color: var(--color-text-disabled);
-}
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
   color: var(--text-field-error);
 }
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
   color: var(--text-field-error);
 }
 
-.tl-text-field__charcounter-divider {
-  color: var(--color-text-disabled);
-}
-
 .tl-text-field__prefix {
   font-family: var(--detail-02-font-family);
   font-size: var(--detail-02-font-size);
@@ -1795,18 +1797,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field__suffix {
   font-family: var(--detail-02-font-family);
@@ -1833,20 +1823,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
-  background-color: var(--text-field-affix-disabled) !important;
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
 .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {

package/dist/tl-textarea.css

@@ -220,16 +220,7 @@
   --textarea-error-icon: var(--component--input-icon-error-default);
   --textarea-textcounter: var(--component--input-text-counter-default);
   --textarea-resize-icon: var(--component-textarea-icon-resize-default);
-  --textarea-opacity-disabled: var(--component--input-opacity-disabled);
-  --textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
-    calc(var(--component--input-border-radius-top-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-right) * 1px)
-    calc(var(--component--input-border-radius-bottom-left) * 1px);
-  --textarea-border-color: var(--component--input-border-default);
-  --textarea-border-color-hover: var(--component--input-border-hover);
-  --textarea-border-color-success: var(--component--input-border-success-default);
-  --textarea-border-color-error: var(--component--input-border-error-default);
-  --textarea-border-color-readonly: var(--color-border-strong);
+  --textarea-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
   --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
 }
 .tl-textarea--primary {
@@ -360,10 +351,14 @@
   font-weight: var(--detail-02-font-weight);
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   display: block;
   position: relative;
   width: 100%;
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  padding: var(--unit-20) var(--unit-16);
   color: var(--textarea-text);
   resize: vertical;
   z-index: 0;
@@ -381,10 +376,16 @@
   display: none;
 }
 .tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
-  border-color: var(--textarea-border-color-hover);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-textarea--error .tl-textarea__input {
-  border-color: var(--textarea-border-color-error);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-textarea--error .tl-textarea__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -393,17 +394,26 @@
   z-index: 1;
 }
 .tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
-  border-color: var(--textarea-border-color-error);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
-  border-color: var(--textarea-border-color-success);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-success-default);
 }
 .tl-textarea__input:disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
-  border-color: var(--textarea-border-color-readonly);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--color-border-defined);
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -412,7 +422,10 @@
   z-index: 1;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
-  border-color: var(--textarea-border-color-hover);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-textarea--label-inside .tl-textarea__input {
   padding-top: 26px;
@@ -422,9 +435,6 @@
   color: transparent;
   transform: translateY(1px);
 }
-.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
-  color: var(--textarea-placeholder-disabled) !important;
-}
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   user-select: auto;
   caret-color: transparent;
@@ -471,12 +481,8 @@
   letter-spacing: var(--detail-07-letter-spacing);
   text-transform: var(--detail-07-text-transform);
   top: 8px;
-  color: var(--textarea-label-disabled);
   transform: translateY(0);
 }
-.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
-  color: var(--textarea-label-disabled);
-}
 
 .tl-textarea__bottom {
   display: flex;
@@ -494,9 +500,6 @@
   color: var(--textarea-helper);
   position: relative;
 }
-:has(.tl-textarea__input:disabled) .tl-textarea__helper {
-  color: var(--color-text-disabled);
-}
 .tl-textarea--error .tl-textarea__helper {
   padding-left: 24px;
 }
@@ -522,9 +525,6 @@
 .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
   color: var(--textarea-error);
 }
-.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
-  background-color: var(--color-text-disabled);
-}
 
 .tl-textarea__charcounter {
   font-family: var(--detail-05-font-family);
@@ -536,9 +536,6 @@
   margin-left: auto;
   color: var(--textarea-textcounter);
 }
-:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
-  color: var(--color-text-disabled);
-}
 .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
   color: var(--textarea-error);
 }
@@ -546,10 +543,6 @@
   color: var(--textarea-error);
 }
 
-.tl-textarea__charcounter-divider {
-  color: var(--color-text-disabled);
-}
-
 .tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
 .tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
   font-family: var(--detail-07-font-family);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [
@@ -52,6 +52,7 @@
     "./tl-radio-button.css": "./dist/tl-radio-button.css",
     "./tl-side-menu.css": "./dist/tl-side-menu.css",
     "./tl-stepper.css": "./dist/tl-stepper.css",
+    "./tl-table.css": "./dist/tl-table.css",
     "./tl-text-field.css": "./dist/tl-text-field.css",
     "./tl-textarea.css": "./dist/tl-textarea.css",
     "./tl-toast.css": "./dist/tl-toast.css",
@@ -69,8 +70,8 @@
     "dist/"
   ],
   "devDependencies": {
-    "@playwright/test": "1.62.1",
-    "@types/node": "^24.3.1",
+    "@playwright/test": "1.63.0",
+    "@types/node": "26.6.1",
     "serve": "^14.2.5"
   },
   "license": "MIT",