@scania/tegel-lite 1.1.2 → 1.2.1

package/dist/components.css

@@ -27,7 +27,7 @@
   --component-accordion-background-primary-hover: var(--color-background-layer-01);
   --component-accordion-background-primary-active: var(--scania-color-grey-100);
   --component-accordion-background-secondary-default: var(--color-background-none);
-  --component-accordion-background-secondary-hover: var(--scania-color-grey-100);
+  --component-accordion-background-secondary-hover: var(--scania-color-grey-50);
   --component-accordion-background-secondary-active: var(--scania-color-grey-150);
   --component-accordion-text-default: var(--color-text-strong);
   --component-accordion-icon-default: var(--color-icon-strong);
@@ -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 {
@@ -4979,6 +4960,306 @@ body {
   display: block;
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
+  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
+  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tl-popover-canvas {
+  --popover-canvas-text: var(--component-popover-text-link-primary-default);
+  --popover-canvas-background: var(--component-popover-background-primary);
+  --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
+}
+
+.tl-popover-canvas--primary,
+.tl-popover-canvas .tl-popover-canvas--primary {
+  --popover-canvas-background: var(--component-popover-background-primary);
+}
+
+.tl-popover-canvas--secondary,
+.tl-popover-canvas .tl-popover-canvas--secondary {
+  --popover-canvas-background: var(--component-popover-background-secondary);
+}
+
+.traton .tl-popover-canvas {
+  --popover-canvas-box-shadow: none;
+}
+
+.tl-popover-canvas {
+  display: inline-block;
+  color: var(--popover-canvas-text);
+  background-color: var(--popover-canvas-background);
+  box-shadow: var(--popover-canvas-box-shadow);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 1000;
+  visibility: hidden;
+}
+.tl-popover-canvas--visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+.tl-popover-canvas--animation-fade {
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 120ms ease-out, transform 120ms ease-out;
+}
+.tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.tl-popover-canvas__content {
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+  padding: 16px;
+}
+
+.tl-popover-canvas__header {
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
+  margin: 0 0 8px;
+}
+
+.tl-popover-canvas__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tl-popover-menu {
+  --popover-menu-text: var(--component-popover-text-link-primary-default);
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
+  --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
+  --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
+  --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
+}
+
+.tl-popover-menu--primary,
+.tl-popover-menu .tl-popover-menu--primary {
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
+}
+
+.tl-popover-menu--secondary,
+.tl-popover-menu .tl-popover-menu--secondary {
+  --popover-menu-background: var(--component-popover-background-secondary);
+  --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
+}
+
+.traton .tl-popover-menu {
+  --popover-menu-box-shadow: none;
+}
+
+.tl-popover-menu__item-wrapper {
+  box-sizing: border-box;
+}
+.tl-popover-menu__item-wrapper * {
+  box-sizing: border-box;
+}
+.tl-popover-menu__item-wrapper {
+  display: block;
+  padding: 16px 0;
+}
+
+.tl-popover-menu__item {
+  all: unset;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  color: var(--popover-menu-text);
+  position: relative;
+  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+}
+.tl-popover-menu__item:hover {
+  cursor: pointer;
+  background-color: var(--popover-menu-background-hover);
+}
+.tl-popover-menu__item:focus-visible {
+  outline: 2px solid var(--popover-menu-item-outline-focus);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tl-popover-menu__item--disabled {
+  all: unset;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  cursor: not-allowed;
+  opacity: var(--popover-menu-item-opacity-disabled);
+  pointer-events: none;
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+}
+.tl-popover-menu__item--disabled:hover {
+  background-color: inherit;
+}
+.tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
+  outline: none;
+  box-shadow: none;
+}
+
+.tl-popover-menu {
+  box-sizing: border-box;
+}
+.tl-popover-menu * {
+  box-sizing: border-box;
+}
+.tl-popover-menu {
+  overflow: hidden;
+  width: 160px;
+  background-color: var(--popover-menu-background);
+  box-shadow: var(--popover-menu-box-shadow);
+  border-radius: 4px;
+  z-index: 900;
+  pointer-events: none;
+  visibility: hidden;
+}
+.tl-popover-menu--visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+.tl-popover-menu--fluid {
+  width: max-content;
+  display: inline-block;
+}
+.tl-popover-menu--animation-fade {
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 120ms ease-out, transform 120ms ease-out;
+}
+.tl-popover-menu--visible.tl-popover-menu--animation-fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+.tl-popover-menu .tl-divider {
+  width: calc(100% - 12px);
+  margin: 6px;
+}
+
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/dist/tl-accordion.css

@@ -11,7 +11,7 @@
   --component-accordion-background-primary-hover: var(--color-background-layer-01);
   --component-accordion-background-primary-active: var(--scania-color-grey-100);
   --component-accordion-background-secondary-default: var(--color-background-none);
-  --component-accordion-background-secondary-hover: var(--scania-color-grey-100);
+  --component-accordion-background-secondary-hover: var(--scania-color-grey-50);
   --component-accordion-background-secondary-active: var(--scania-color-grey-150);
   --component-accordion-text-default: var(--color-text-strong);
   --component-accordion-icon-default: var(--color-icon-strong);

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/dist/tl-popover-canvas.css

@@ -0,0 +1,173 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
+  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
+  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tl-popover-canvas {
+  --popover-canvas-text: var(--component-popover-text-link-primary-default);
+  --popover-canvas-background: var(--component-popover-background-primary);
+  --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
+}
+
+.tl-popover-canvas--primary,
+.tl-popover-canvas .tl-popover-canvas--primary {
+  --popover-canvas-background: var(--component-popover-background-primary);
+}
+
+.tl-popover-canvas--secondary,
+.tl-popover-canvas .tl-popover-canvas--secondary {
+  --popover-canvas-background: var(--component-popover-background-secondary);
+}
+
+.traton .tl-popover-canvas {
+  --popover-canvas-box-shadow: none;
+}
+
+/* Typography Usage mixins */
+.tl-popover-canvas {
+  display: inline-block;
+  color: var(--popover-canvas-text);
+  background-color: var(--popover-canvas-background);
+  box-shadow: var(--popover-canvas-box-shadow);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 1000;
+  visibility: hidden;
+}
+.tl-popover-canvas--visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+.tl-popover-canvas--animation-fade {
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 120ms ease-out, transform 120ms ease-out;
+}
+.tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.tl-popover-canvas__content {
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+  padding: 16px;
+}
+
+.tl-popover-canvas__header {
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
+  margin: 0 0 8px;
+}
+
+.tl-popover-canvas__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+}

package/dist/tl-popover-menu.css

@@ -0,0 +1,229 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-primary-active: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
+  --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
+  --component-popover-background-link-primary-active: var(
+    --component-popover-background-link-primary-hover
+  );
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
+  --component-popover-background-link-secondary-active: var(
+    --component-popover-background-link-secondary-hover
+  );
+  --component-popover-border-radius-default: var(--scania-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--scania-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-popover-background-primary: var(--color-background-layer-01);
+  --component-popover-background-secondary: var(--color-background-layer-02);
+  --component-popover-background-link-primary-default: var(--color-background-none);
+  --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
+  --component-popover-background-link-primary-active: var(--traton-color-blue-900);
+  --component-popover-background-link-secondary-default: var(--color-background-none);
+  --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
+  --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
+  --component-popover-border-radius-default: var(--traton-unit-4);
+  --component-popover-icon-link-primary-default: var(--color-icon-strong);
+  --component-popover-icon-link-secondary-default: var(--color-icon-strong);
+  --component-popover-opacity-disabled: var(--traton-opacity-25);
+  --component-popover-text-link-primary-default: var(--color-text-strong);
+  --component-popover-text-link-primary-hover: var(--color-text-strong);
+  --component-popover-text-link-secondary-default: var(--color-text-strong);
+  --component-popover-text-link-secondary-hover: var(--color-text-strong);
+}
+
+.tl-popover-menu {
+  --popover-menu-text: var(--component-popover-text-link-primary-default);
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
+  --popover-menu-item-outline-focus: var(--component--focus-ring-color-strong);
+  --popover-menu-item-opacity-disabled: calc(var(--component-popover-opacity-disabled) / 100);
+  --popover-menu-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
+}
+
+.tl-popover-menu--primary,
+.tl-popover-menu .tl-popover-menu--primary {
+  --popover-menu-background: var(--component-popover-background-primary);
+  --popover-menu-background-hover: var(--component-popover-background-link-primary-hover);
+}
+
+.tl-popover-menu--secondary,
+.tl-popover-menu .tl-popover-menu--secondary {
+  --popover-menu-background: var(--component-popover-background-secondary);
+  --popover-menu-background-hover: var(--component-popover-background-link-secondary-hover);
+}
+
+.traton .tl-popover-menu {
+  --popover-menu-box-shadow: none;
+}
+
+/* Typography Usage mixins */
+.tl-popover-menu__item-wrapper {
+  box-sizing: border-box;
+}
+.tl-popover-menu__item-wrapper * {
+  box-sizing: border-box;
+}
+.tl-popover-menu__item-wrapper {
+  display: block;
+  padding: 16px 0;
+}
+
+.tl-popover-menu__item {
+  all: unset;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  color: var(--popover-menu-text);
+  position: relative;
+  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+}
+.tl-popover-menu__item:hover {
+  cursor: pointer;
+  background-color: var(--popover-menu-background-hover);
+}
+.tl-popover-menu__item:focus-visible {
+  outline: 2px solid var(--popover-menu-item-outline-focus);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tl-popover-menu__item--disabled {
+  all: unset;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  cursor: not-allowed;
+  opacity: var(--popover-menu-item-opacity-disabled);
+  pointer-events: none;
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+}
+.tl-popover-menu__item--disabled:hover {
+  background-color: inherit;
+}
+.tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
+  outline: none;
+  box-shadow: none;
+}
+
+.tl-popover-menu {
+  box-sizing: border-box;
+}
+.tl-popover-menu * {
+  box-sizing: border-box;
+}
+.tl-popover-menu {
+  overflow: hidden;
+  width: 160px;
+  background-color: var(--popover-menu-background);
+  box-shadow: var(--popover-menu-box-shadow);
+  border-radius: 4px;
+  z-index: 900;
+  pointer-events: none;
+  visibility: hidden;
+}
+.tl-popover-menu--visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+.tl-popover-menu--fluid {
+  width: max-content;
+  display: inline-block;
+}
+.tl-popover-menu--animation-fade {
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 120ms ease-out, transform 120ms ease-out;
+}
+.tl-popover-menu--visible.tl-popover-menu--animation-fade {
+  opacity: 1;
+  transform: translateY(0);
+}
+.tl-popover-menu .tl-divider {
+  width: calc(100% - 12px);
+  margin: 6px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [
@@ -41,6 +41,8 @@
     "./tl-link.css": "./dist/tl-link.css",
     "./tl-message.css": "./dist/tl-message.css",
     "./tl-modal.css": "./dist/tl-modal.css",
+    "./tl-popover-canvas.css": "./dist/tl-popover-canvas.css",
+    "./tl-popover-menu.css": "./dist/tl-popover-menu.css",
     "./tl-radio-button.css": "./dist/tl-radio-button.css",
     "./tl-text-field.css": "./dist/tl-text-field.css",
     "./tl-textarea.css": "./dist/tl-textarea.css",