@scania/tegel-lite 0.0.1-9

package/dist/tl-textarea.css

@@ -0,0 +1,357 @@
+.tl-textarea {
+  --textarea-background-primary: var(--color-background-layer-01);
+  --textarea-background-secondary: var(--color-background-layer-02);
+  --textarea-background: var(--textarea-background-primary);
+  --textarea-text: var(--color-foreground-text-strong);
+  --textarea-background-disabled: var(--textarea-background-primary);
+  --textarea-text-disabled: var(--color-foreground-text-disabled);
+  --textarea-placeholder-disabled: var(--color-foreground-text-disabled);
+  --textarea-label-disabled: var(--color-foreground-text-disabled);
+  --textarea-label: var(--color-foreground-text-strong);
+  --textarea-label-inside: var(--color-foreground-text-strong);
+  --textarea-label-inside-left: 16px;
+  --textarea-placeholder: var(--color-foreground-text-subtle);
+  --textarea-helper: var(--color-foreground-text-defined);
+  --textarea-error: var(--color-system-danger-default);
+  --textarea-textcounter: var(--color-foreground-text-defined);
+  --textarea-resize-icon: var(--color-foreground-text-subtle);
+}
+.tl-textarea--primary {
+  --textarea-background: var(--textarea-background-primary);
+  --textarea-background-disabled: var(--textarea-background-primary);
+}
+.tl-textarea--secondary {
+  --textarea-background: var(--textarea-background-secondary);
+  --textarea-background-disabled: var(--textarea-background-secondary);
+}
+
+.tl-textarea,
+.scania .tl-textarea {
+  --textarea-border-radius: 4px 4px 0 0;
+  --textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
+  --textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
+  --textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
+  --textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
+  --textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
+  --textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
+}
+
+.traton .tl-textarea {
+  --textarea-border-radius: 4px;
+  --textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
+  --textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
+  --textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
+  --textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
+  --textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
+  --textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
+  --textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
+}
+
+/* Typography Usage mixins */
+.tl-textarea {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 208px;
+  padding-bottom: 1px;
+  border-radius: var(--textarea-border-radius);
+  box-sizing: border-box;
+}
+.tl-textarea--no-min-width {
+  min-width: auto;
+}
+.tl-textarea:has(.tl-textarea__input:disabled) {
+  cursor: not-allowed;
+}
+.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+  content: "";
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--textarea-text);
+  mask-image: var(--icon-edit_inactive-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  z-index: 1;
+}
+.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: 3px;
+  right: 3px;
+  width: 12px;
+  height: 12px;
+  background-color: var(--textarea-resize-icon);
+  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  pointer-events: none;
+  z-index: 1;
+}
+.traton .tl-textarea::after {
+  bottom: 5px;
+  right: 4px;
+}
+.tl-textarea:not(.tl-textarea--label-inside)::after {
+  bottom: 5px;
+}
+.traton .tl-textarea:not(.tl-textarea--label-inside)::after {
+  bottom: 5px;
+}
+.tl-textarea:has(.tl-textarea__bottom)::after {
+  bottom: 25px;
+}
+.traton .tl-textarea:has(.tl-textarea__bottom)::after {
+  bottom: 27px;
+}
+.tl-textarea :has(.tl-textarea__input:disabled)::after {
+  background-color: var(--color-foreground-text-disabled);
+}
+
+.tl-textarea__input {
+  all: unset;
+  border-radius: var(--textarea-border-radius);
+  background-color: var(--textarea-background);
+  color: var(--textarea-text);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+}
+.tl-textarea__input::placeholder {
+  color: var(--textarea-placeholder);
+}
+.tl-textarea__input:disabled {
+  background-color: var(--textarea-background-disabled);
+  color: var(--textarea-text-disabled);
+  user-select: none;
+  pointer-events: none;
+}
+.tl-textarea__input:disabled::placeholder {
+  color: var(--textarea-placeholder-disabled);
+}
+.tl-textarea__input {
+  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);
+  display: block;
+  position: relative;
+  width: 100%;
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  color: var(--textarea-text);
+  resize: vertical;
+  box-shadow: inset var(--textarea-box-shadow);
+  transition: box-shadow 0.2s;
+  z-index: 0;
+}
+.tl-textarea__input::placeholder {
+  transform: translateY(1px);
+}
+.tl-textarea__input:focus {
+  box-shadow: inset var(--textarea-box-shadow-focus);
+}
+.tl-textarea__input::-webkit-resizer {
+  display: none;
+}
+.tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
+  box-shadow: inset var(--textarea-box-shadow-hover);
+}
+.tl-textarea--error .tl-textarea__input {
+  box-shadow: inset var(--textarea-box-shadow-error);
+}
+.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):not(:disabled) {
+  box-shadow: inset var(--textarea-box-shadow-error-hover);
+}
+.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__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);
+}
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
+  box-shadow: inset var(--textarea-box-shadow-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--label-inside .tl-textarea__input {
+  padding-top: 26px;
+  padding-bottom: 15px;
+}
+.tl-textarea--label-inside .tl-textarea__input::placeholder {
+  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;
+  cursor: default;
+  pointer-events: none;
+}
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
+  padding-right: 50px;
+}
+
+.tl-textarea:not(.tl-textarea--label-inside) .tl-textarea__label {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  display: block;
+  margin-bottom: 8px;
+  color: var(--textarea-label);
+}
+.tl-textarea--label-inside .tl-textarea__label {
+  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);
+  position: absolute;
+  top: 21px;
+  left: var(--textarea-label-inside-left, 16px);
+  color: var(--textarea-label-inside);
+  pointer-events: none;
+  transform: none;
+  transform-origin: top left;
+  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
+  z-index: 1;
+}
+.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);
+  font-weight: var(--detail-07-font-weight);
+  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;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.tl-textarea__helper {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--textarea-helper);
+  position: relative;
+}
+:has(.tl-textarea__input:disabled) .tl-textarea__helper {
+  color: var(--color-foreground-text-disabled);
+}
+.tl-textarea--error .tl-textarea__helper {
+  padding-left: 24px;
+}
+.tl-textarea--error .tl-textarea__helper::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  background-color: var(--textarea-error);
+  mask-image: var(--icon-error-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
+  padding-left: 0;
+}
+.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
+  display: none;
+}
+.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:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
+  background-color: var(--color-foreground-text-disabled);
+}
+
+.tl-textarea__charcounter {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  margin-left: auto;
+  color: var(--textarea-textcounter);
+}
+:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
+  color: var(--color-foreground-text-disabled);
+}
+.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(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
+  color: var(--textarea-error);
+}
+
+.tl-textarea__charcounter-divider {
+  color: var(--color-foreground-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);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
+  top: 12.5px;
+  transform: none;
+}

package/dist/tl-toast.css

@@ -0,0 +1,111 @@
+.tl-toast {
+  --toast-background: var(--color-background-inverse-base);
+  --toast-headline: var(--color-foreground-text-inverse-strong);
+  --toast-subheadline: var(--color-foreground-text-inverse-soft);
+  --toast-dismiss: var(--color-foreground-text-inverse-strong);
+  --toast-icon-error: var(--color-system-danger-default);
+  --toast-icon-success: var(--color-system-success-default);
+  --toast-icon-warning: var(--color-system-warning-default);
+  --toast-icon-info: var(--color-system-info-default);
+}
+
+/* Typography Usage mixins */
+.tl-toast {
+  z-index: 800;
+  display: flex;
+  width: 348px;
+  background-color: var(--toast-background);
+  border-radius: 4px;
+}
+.tl-toast--information {
+  border-left: 4px solid var(--toast-icon-info);
+}
+.tl-toast--success {
+  border-left: 4px solid var(--toast-icon-success);
+}
+.tl-toast--error {
+  border-left: 4px solid var(--toast-icon-error);
+}
+.tl-toast--warning {
+  border-left: 4px solid var(--toast-icon-warning);
+}
+.tl-toast--hide {
+  display: none;
+  visibility: hidden;
+}
+
+.tl-toast__icon {
+  padding: 14px 0 0 12px;
+  color: var(--toast-icon-info);
+  flex-shrink: 0;
+}
+
+.tl-toast__content {
+  padding: 16px 0 16px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 250px;
+  word-break: break-word;
+}
+
+.tl-toast__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tl-toast__header {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--toast-headline);
+  margin: 0;
+}
+
+.tl-toast__subheader {
+  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(--toast-subheadline);
+  margin: 0;
+}
+
+.tl-toast__actions {
+  padding-top: 12px;
+}
+
+.tl-toast__close {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 14px 14px 0 22px;
+  border: none;
+  background: transparent;
+  color: var(--toast-dismiss);
+  cursor: pointer;
+}
+.tl-toast__close:focus-visible {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}
+
+.tl-toast--error .tl-toast__icon {
+  color: var(--toast-icon-error);
+}
+.tl-toast--success .tl-toast__icon {
+  color: var(--toast-icon-success);
+}
+.tl-toast--warning .tl-toast__icon {
+  color: var(--toast-icon-warning);
+}

package/dist/tl-toggle.css

@@ -0,0 +1,145 @@
+/* Typography Usage mixins */
+.tl-toggle {
+  --toggle-switch: var(--color-brand-neutral-white);
+  --toggle-text: var(--color-foreground-text-strong);
+  --toggle-disabled: var(--color-foreground-icon-disabled);
+  --toggle-background-on: var(--color-system-success-default);
+  --toggle-background-off: var(--color-foreground-icon-subtle);
+  --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;
+  width: 44px;
+  height: 24px;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.tl-toggle__input::after, .tl-toggle__input::before {
+  transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+}
+.tl-toggle__input::before {
+  /* Slider */
+  background-color: var(--toggle-background-off);
+  border: 2px solid transparent;
+  border-radius: 16px;
+  left: 0;
+  height: 24px;
+  width: 44px;
+}
+.tl-toggle__input {
+  /* Switch */
+}
+.tl-toggle__input::after {
+  background-color: var(--toggle-switch);
+  border-radius: 50%;
+  left: 4px;
+  top: 4px;
+  width: 16px;
+  height: 16px;
+}
+.tl-toggle__input:focus-visible {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+  border-radius: 16px;
+}
+.tl-toggle__input:focus-visible::before {
+  background-color: var(--toggle-disabled);
+}
+.tl-toggle__input:hover::before {
+  background-color: var(--toggle-background-off);
+}
+.tl-toggle__input:checked::before {
+  background-color: var(--toggle-background-on);
+}
+.tl-toggle__input:checked::after {
+  left: 24px;
+}
+.tl-toggle__input:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-toggle__input:disabled::before {
+  background-color: var(--toggle-disabled);
+}
+.tl-toggle__input:disabled::after {
+  background-color: var(--toggle-switch);
+}
+.tl-toggle__input:disabled:checked::before {
+  background-color: var(--toggle-disabled);
+}
+.tl-toggle__input:disabled:checked::after {
+  background-color: var(--toggle-switch);
+}
+.tl-toggle__input--sm {
+  width: 28px;
+  height: 16px;
+}
+.tl-toggle__input--sm::before {
+  width: 28px;
+  height: 16px;
+}
+.tl-toggle__input--sm::after {
+  width: 8px;
+  height: 8px;
+}
+.tl-toggle__input--sm:checked::before {
+  background-color: var(--toggle-background-on);
+}
+.tl-toggle__input--sm:checked::after {
+  left: 16px;
+}
+.tl-toggle__input--sm:disabled::before {
+  background-color: var(--toggle-disabled);
+}
+.tl-toggle__input--sm:disabled::after {
+  background-color: var(--toggle-switch);
+}
+
+.tl-toggle__headline {
+  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(--toggle-text);
+  margin-bottom: 12px;
+}
+:has(input[type=checkbox]:disabled) .tl-toggle__headline {
+  color: var(--toggle-disabled);
+  user-select: none;
+  cursor: not-allowed;
+}
+
+.tl-toggle__label {
+  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(--toggle-text);
+  cursor: pointer;
+  user-select: none;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 8px;
+}
+input[type=checkbox]:disabled ~ .tl-toggle__label {
+  color: var(--toggle-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/dist/tl-tooltip.css

@@ -0,0 +1,67 @@
+.tl-tooltip {
+  --tooltip-text: var(--color-foreground-text-inverse-strong);
+  --tooltip-background: var(--color-background-inverse-layer-03);
+}
+
+.scania {
+  --tl-tooltip-line-height: 17px;
+}
+
+.traton {
+  --tl-tooltip-line-height: 16px;
+}
+
+/* Typography Usage mixins */
+.tl-tooltip {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  position: fixed;
+  z-index: var(--tds-z-index-tooltip, 1000);
+  padding: 8px;
+  max-width: 204px;
+  width: max-content;
+  white-space: normal;
+  word-wrap: break-word;
+  background-color: var(--tooltip-background, #333);
+  color: var(--tooltip-text, #fff);
+  box-sizing: border-box;
+  line-height: var(--tl-tooltip-line-height);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  border-radius: 4px;
+}
+.tl-tooltip--visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.tl-tooltip--top-start {
+  border-radius: 4px 4px 4px 0;
+}
+.tl-tooltip--top-end {
+  border-radius: 4px 4px 0;
+}
+.tl-tooltip--bottom-start {
+  border-radius: 0 4px 4px;
+}
+.tl-tooltip--bottom-end {
+  border-radius: 4px 0 4px 4px;
+}
+.tl-tooltip--left-start {
+  border-radius: 4px 0 4px 4px;
+}
+.tl-tooltip--left-end {
+  border-radius: 4px 4px 0;
+}
+.tl-tooltip--right-start {
+  border-radius: 0 4px 4px;
+}
+.tl-tooltip--right-end {
+  border-radius: 4px 4px 4px 0;
+}