@scania/tegel-lite 1.6.0 → 1.7.0-datetime-vars-beta.0

package/dist/tl-table.css

@@ -0,0 +1,878 @@
+:host,
+:root {
+  --tl-scrollbar-width-standard: thin;
+  --tl-scrollbar-width: 10px;
+  --tl-scrollbar-height: 10px;
+  --tl-scrollbar-thumb-border-width: 3px;
+  --tl-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
+/**
+ * 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-table-background-footer-default: var(--scania-color-grey-150);
+  --component-table-background-header-default: var(--scania-color-grey-150);
+  --component-table-background-header-hover: var(--scania-color-grey-200);
+  --component-table-background-toolbar-default: var(--scania-color-grey-200);
+  --component-table-background-cell-primary-default: var(--scania-color-grey-50);
+  --component-table-background-cell-primary-hover: var(--scania-color-grey-100);
+  --component-table-background-cell-secondary-default: var(--scania-color-base-white);
+  --component-table-background-cell-secondary-hover: var(--scania-color-grey-100);
+  --component-table-background-cell-selected-default: var(--scania-color-grey-150);
+  --component-table-background-cell-selected-hover: var(--scania-color-grey-200);
+  --component-table-background-cell-expanded-default: var(
+    --component-table-background-cell-selected-default
+  );
+  --component-table-border-divider-default: var(--color-border-discrete);
+  --component-table-border-divider-hover: var(--scania-color-transparent-250);
+  --component-table-border-radius-default: var(--scania-unit-4);
+  --component-table-text-cell-default: var(--color-text-strong);
+  --component-table-text-footer-default: var(--color-text-strong);
+  --component-table-text-header-default: var(--color-text-strong);
+  --component-table-text-placeholder-default: var(--color-text-subtle);
+  --component-table-text-toolbar-default: var(--color-text-strong);
+  --component-table-text-value-default: var(--color-text-strong);
+  --component-table-icon-edit-default: var(--color-icon-strong);
+  --component-table-icon-expand-default: var(--color-icon-strong);
+  --component-table-icon-filter-default: var(--color-icon-strong);
+  --component-table-icon-prefix-default: var(--color-icon-strong);
+  --component-table-icon-sort-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-table-background-footer-default: var(--traton-color-grey-200);
+  --component-table-background-header-default: var(--traton-color-grey-300);
+  --component-table-background-header-hover: var(--traton-color-grey-400);
+  --component-table-background-toolbar-default: var(--traton-color-grey-400);
+  --component-table-background-cell-primary-default: var(--color-background-layer-01);
+  --component-table-background-cell-primary-hover: var(--traton-color-grey-200);
+  --component-table-background-cell-secondary-default: var(--color-background-layer-02);
+  --component-table-background-cell-secondary-hover: var(--traton-color-grey-200);
+  --component-table-background-cell-selected-default: var(--traton-color-grey-300);
+  --component-table-background-cell-selected-hover: var(--traton-color-grey-400);
+  --component-table-background-cell-expanded-default: var(
+    --component-table-background-cell-selected-default
+  );
+  --component-table-border-divider-default: var(--color-border-discrete);
+  --component-table-border-divider-hover: var(--traton-color-transparent-400);
+  --component-table-border-radius-default: var(--traton-unit-4);
+  --component-table-text-cell-default: var(--color-text-strong);
+  --component-table-text-footer-default: var(--color-text-strong);
+  --component-table-text-header-default: var(--color-text-strong);
+  --component-table-text-placeholder-default: var(--color-text-subtle);
+  --component-table-text-toolbar-default: var(--color-text-strong);
+  --component-table-text-value-default: var(--color-text-strong);
+  --component-table-icon-edit-default: var(--color-icon-strong);
+  --component-table-icon-expand-default: var(--color-icon-strong);
+  --component-table-icon-filter-default: var(--color-icon-strong);
+  --component-table-icon-prefix-default: var(--color-icon-strong);
+  --component-table-icon-sort-default: var(--color-icon-strong);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-table-background-footer-default: var(--scania-color-grey-700);
+  --component-table-background-header-default: var(--scania-color-grey-700);
+  --component-table-background-header-hover: var(--scania-color-grey-650);
+  --component-table-background-toolbar-default: var(--scania-color-grey-650);
+  --component-table-background-cell-primary-default: var(--scania-color-grey-850);
+  --component-table-background-cell-primary-hover: var(--scania-color-grey-750);
+  --component-table-background-cell-secondary-default: var(--scania-color-grey-800);
+  --component-table-background-cell-secondary-hover: var(--scania-color-grey-750);
+  --component-table-background-cell-selected-default: var(--scania-color-grey-700);
+  --component-table-background-cell-selected-hover: var(--scania-color-grey-650);
+  --component-table-background-cell-expanded-default: var(
+    --component-table-background-cell-selected-default
+  );
+  --component-table-border-divider-default: var(--color-border-discrete);
+  --component-table-border-divider-hover: var(--scania-color-transparent-inverse-500);
+  --component-table-border-radius-default: var(--scania-unit-4);
+  --component-table-text-cell-default: var(--color-text-strong);
+  --component-table-text-footer-default: var(--color-text-strong);
+  --component-table-text-header-default: var(--color-text-strong);
+  --component-table-text-placeholder-default: var(--color-text-subtle);
+  --component-table-text-toolbar-default: var(--color-text-strong);
+  --component-table-text-value-default: var(--color-text-strong);
+  --component-table-icon-edit-default: var(--color-icon-strong);
+  --component-table-icon-expand-default: var(--color-icon-strong);
+  --component-table-icon-filter-default: var(--color-icon-strong);
+  --component-table-icon-prefix-default: var(--color-icon-strong);
+  --component-table-icon-sort-default: var(--color-icon-strong);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-table-background-footer-default: var(--traton-color-blue-800);
+  --component-table-background-header-default: var(--traton-color-blue-800);
+  --component-table-background-header-hover: var(--traton-color-blue-700);
+  --component-table-background-toolbar-default: var(--traton-color-blue-700);
+  --component-table-background-cell-primary-default: var(--color-background-layer-01);
+  --component-table-background-cell-primary-hover: var(--traton-color-blue-850);
+  --component-table-background-cell-secondary-default: var(--color-background-layer-02);
+  --component-table-background-cell-secondary-hover: var(--traton-color-blue-800);
+  --component-table-background-cell-selected-default: var(--traton-color-blue-800);
+  --component-table-background-cell-selected-hover: var(--traton-color-blue-700);
+  --component-table-background-cell-expanded-default: var(
+    --component-table-background-cell-selected-default
+  );
+  --component-table-border-divider-default: var(--color-border-discrete);
+  --component-table-border-divider-hover: var(--traton-color-transparent-inverse-400);
+  --component-table-border-radius-default: var(--traton-unit-4);
+  --component-table-text-cell-default: var(--color-text-strong);
+  --component-table-text-footer-default: var(--color-text-strong);
+  --component-table-text-header-default: var(--color-text-strong);
+  --component-table-text-placeholder-default: var(--color-text-subtle);
+  --component-table-text-toolbar-default: var(--color-text-strong);
+  --component-table-text-value-default: var(--color-text-strong);
+  --component-table-icon-edit-default: var(--color-icon-strong);
+  --component-table-icon-expand-default: var(--color-icon-strong);
+  --component-table-icon-filter-default: var(--color-icon-strong);
+  --component-table-icon-prefix-default: var(--color-icon-strong);
+  --component-table-icon-sort-default: var(--color-icon-strong);
+}
+
+.tl-table {
+  --table-background: var(--table-body-row);
+  --table-cell-background: var(--table-body-row);
+  /* Table-header */
+  --table-header: var(--component-table-background-header-default);
+  --table-header-hover: var(--component-table-background-header-hover);
+  --table-header-text-color: var(--component-table-text-header-default);
+  /* Table-toolbar */
+  --table-toolbar: var(--component-table-background-toolbar-default);
+  --table-toolbar-text-color: var(--component-table-text-toolbar-default);
+  /* Table-footer */
+  --table-footer: var(--component-table-background-footer-default);
+  --table-footer-text-color: var(--component-table-text-footer-default);
+  --table-footer-page-selector-input-background: var(--component--input-background-secondary);
+  /* Divider */
+  --table-divider: var(--component-table-border-divider-default);
+  --table-divider-hover: var(--component-table-border-divider-hover);
+  --table-border-radius: calc(var(--component-table-border-radius-default) * 1px);
+  /* Table-body-cell */
+  --table-body-cell-hover: var(--component-table-background-cell-primary-hover);
+  --table-body-cell-text-color: var(--component-table-text-cell-default);
+  /* Table-body-row */
+  --table-body-row: var(--component-table-background-cell-primary-default);
+  --table-body-row-hover: var(--component-table-background-cell-primary-hover);
+  --table-zebra-mode: var(--component-table-background-cell-secondary-default);
+  --table-body-row-selected: var(--component-table-background-cell-selected-default);
+  --table-body-row-expanded: var(--component-table-background-cell-expanded-default);
+  --table-body-row-selected-hover: var(--component-table-background-cell-selected-hover);
+  /* Table input body */
+  --table-input-placeholder-text-color: var(--component-table-text-placeholder-default);
+  --table-input-value-text-color: var(--component-table-text-value-default);
+  --table-input-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
+  /* Table-icons */
+  --table-edit-icon-color: var(--component-table-icon-edit-default);
+  --table-expand-icon-color: var(--component-table-icon-expand-default);
+  --table-filter-icon-color: var(--component-table-icon-filter-default);
+  --table-prefix-icon-color: var(--component-table-icon-prefix-default);
+  --table-sort-icon-color: var(--component-table-icon-sort-default);
+}
+.tl-table.tl-table--primary {
+  --table-body-row: var(--component-table-background-cell-primary-default);
+  --table-body-row-hover: var(--component-table-background-cell-primary-hover);
+  --table-body-cell-hover: var(--component-table-background-cell-primary-hover);
+  --table-zebra-mode: var(--component-table-background-cell-secondary-default);
+}
+.tl-table.tl-table--secondary {
+  --table-body-row: var(--component-table-background-cell-secondary-default);
+  --table-body-row-hover: var(--component-table-background-cell-secondary-hover);
+  --table-body-cell-hover: var(--component-table-background-cell-secondary-hover);
+  --table-zebra-mode: var(--component-table-background-cell-primary-default);
+}
+
+/* Typography Usage mixins */
+.tl-table__footer {
+  display: table-footer-group;
+  height: var(--unit-48);
+}
+.tl-table--compact .tl-table__footer {
+  height: var(--unit-32);
+}
+
+.tl-table__footer .tl-dropdown__text {
+  max-width: calc(100% - 20px);
+}
+
+.tl-table__footer-row {
+  display: table-row;
+  border-bottom: 1px solid var(--table-divider);
+  background-color: var(--table-footer);
+  color: var(--table-footer-text-color);
+  transition: background-color 200ms ease;
+}
+
+.tl-table__footer-cell {
+  padding: 0 var(--unit-16);
+}
+
+.tl-table__pagination {
+  height: var(--unit-48);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tl-table__pagination .tl-dropdown__button,
+.tl-table__pagination .tl-dropdown__select,
+.tl-table__pagination .tl-dropdown__input {
+  background-color: var(--table-footer-page-selector-input-background);
+}
+
+.tl-table__row-selector,
+.tl-table__page-selector {
+  display: flex;
+  align-items: center;
+}
+
+.tl-table__rows-per-page {
+  margin-right: var(--unit-16);
+  display: flex;
+  align-items: center;
+}
+.tl-table__rows-per-page .tl-dropdown {
+  width: 77px;
+}
+
+.tl-table__rows-per-page-label {
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+  margin-right: var(--unit-8);
+}
+
+.tl-table__page-selector .tl-text-field {
+  min-width: unset;
+  width: 87px;
+}
+.tl-table__page-selector .tl-text-field .tl-text-field__input {
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+  background-color: var(--table-footer-page-selector-input-background);
+  color: var(--table-footer-text-color);
+  margin-right: var(--unit-10);
+  width: 77px;
+  height: 40px;
+  padding-left: 16px;
+}
+.tl-table__page-selector .tl-text-field .tl-text-field__input:hover {
+  background-color: var(--table-footer-page-selector-input-background);
+}
+.tl-table__page-selector .tl-text-field .tl-text-field__input:disabled {
+  opacity: var(--table-input-opacity-disabled);
+}
+
+.tl-table__footer-text {
+  padding: 1px 10px 0 0;
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+}
+
+.tl-table {
+  box-sizing: border-box;
+}
+.tl-table * {
+  box-sizing: border-box;
+}
+.tl-table {
+  border-collapse: collapse;
+  display: table;
+  color: var(--table-body-cell-text-color);
+  background-color: var(--table-header);
+  border-top-left-radius: var(--table-border-radius);
+  border-top-right-radius: var(--table-border-radius);
+}
+.tl-table--responsive {
+  width: 100%;
+}
+.tl-table--horizontal-scroll {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
+}
+.tl-table--horizontal-scroll::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table--horizontal-scroll {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+
+.tl-table__header {
+  display: table-header-group;
+}
+
+.tl-table__body {
+  display: table-row-group;
+}
+
+.tl-table__row {
+  display: table-row;
+  background-color: var(--table-background);
+  transition: background-color 200ms ease;
+  color: var(--table-body-cell-text-color);
+}
+.tl-table__row:not(.tl-table__row--expanded) {
+  border-bottom: 1px solid var(--table-divider);
+}
+.tl-table__row:hover:not(.tl-table__row--expanded, .tl-table__row--selected) {
+  --table-background: var(--table-body-row-hover);
+  --table-cell-background: var(--table-body-row-hover);
+}
+.tl-table__row--expanded {
+  --table-cell-background: var(--table-body-row-expanded);
+}
+.tl-table--zebra-columns-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(odd) {
+  --table-background: var(--table-zebra-mode);
+  --table-cell-background: var(--table-zebra-mode);
+}
+.tl-table--zebra-columns-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(even) {
+  --table-background: var(--table-zebra-mode);
+  --table-cell-background: var(--table-zebra-mode);
+}
+.tl-table--zebra-rows-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(odd of .tl-table__row) {
+  --table-background: var(--table-zebra-mode);
+  --table-cell-background: var(--table-zebra-mode);
+}
+.tl-table--zebra-rows-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(even of .tl-table__row) {
+  --table-background: var(--table-zebra-mode);
+  --table-cell-background: var(--table-zebra-mode);
+}
+.tl-table__row--selected {
+  --table-background: var(--table-body-row-selected);
+  --table-cell-background: var(--table-body-row-selected);
+}
+.tl-table__row--selected:hover {
+  --table-background: var(--table-body-row-selected-hover);
+  --table-cell-background: var(--table-body-row-selected-hover);
+}
+.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
+  cursor: pointer;
+}
+.tl-table__row--clickable:focus-visible {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.tl-table__header .tl-table__row {
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+}
+
+.tl-table__header-cell {
+  display: table-cell;
+  padding: 16px;
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  color: var(--table-header-text-color);
+  text-align: left;
+  transition: background-color 200ms ease;
+  min-width: 192px;
+}
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
+  background-color: var(--table-header-hover);
+}
+.tl-table__header-cell:first-of-type {
+  border-top-left-radius: var(--table-border-radius);
+}
+.tl-table__header-cell:last-of-type {
+  border-top-right-radius: var(--table-border-radius);
+}
+.tl-table--vertical-dividers .tl-table__header-cell:not(:last-child) {
+  border-right: 1px solid var(--table-divider);
+}
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
+  border-top-left-radius: 0;
+}
+.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
+  border-top-right-radius: 0;
+}
+.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
+  padding: 0;
+}
+.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+}
+.tl-table--compact .tl-table__header-cell {
+  height: 32px;
+  padding: 8px 16px;
+}
+.tl-table--compact .tl-table__header-cell--sortable {
+  padding: 0;
+}
+.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
+  width: 32px;
+  min-width: 32px;
+  padding: 0;
+}
+.tl-table--no-min-width .tl-table__header-cell {
+  min-width: unset;
+}
+.tl-table--header-text-align-left .tl-table__header-cell {
+  text-align: left;
+}
+.tl-table--header-text-align-start .tl-table__header-cell {
+  text-align: start;
+}
+.tl-table--header-text-align-center .tl-table__header-cell {
+  text-align: center;
+}
+.tl-table--header-text-align-right .tl-table__header-cell {
+  text-align: right;
+}
+.tl-table--header-text-align-end .tl-table__header-cell {
+  text-align: end;
+}
+
+.tl-table__header-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: start;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 200ms ease;
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  color: var(--table-header-text-color);
+  text-align: left;
+}
+.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.tl-table--compact .tl-table__header-button {
+  height: 32px;
+}
+
+.tl-table__header-button-text {
+  color: var(--table-header-text-color);
+  text-align: left;
+}
+
+.tl-table__header-button-icon {
+  flex: 0 0 16px;
+  height: 16px;
+  width: 16px;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 200ms ease-in, transform 200ms ease;
+  color: var(--table-sort-icon-color);
+}
+
+.tl-table__header-button:focus-visible .tl-table__header-button-icon,
+.tl-table__header-button:focus .tl-table__header-button-icon,
+.tl-table__header-button:active .tl-table__header-button-icon,
+.tl-table__header-button:hover .tl-table__header-button-icon {
+  opacity: 1;
+}
+
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
+  opacity: 1;
+}
+
+.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
+  transform: rotate(180deg);
+}
+
+.tl-table__body-cell {
+  display: table-cell;
+  padding: 16px;
+  background-color: var(--table-cell-background);
+  color: var(--table-body-cell-text-color);
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+  transition: background-color 200ms ease;
+  min-width: 192px;
+}
+.tl-table__body-cell:has(.tl-table__expand-control) {
+  min-width: unset;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+.tl-table__body-cell:has(.tl-checkbox) {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+  text-align: center;
+  padding: 8px 16px;
+}
+.tl-table__body-cell:focus {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.tl-table__body-cell--column-highlight {
+  --table-cell-background: var(--table-body-cell-hover);
+}
+.tl-table__row--selected .tl-table__body-cell--column-highlight {
+  --table-cell-background: var(--table-body-row-selected-hover);
+}
+.tl-table__row--expanded .tl-table__body-cell--column-highlight {
+  --table-cell-background: var(--table-body-row-selected-hover);
+}
+.tl-table--compact .tl-table__body-cell {
+  height: 32px;
+  padding: 8px 16px;
+}
+.tl-table--compact .tl-table__body-cell:has(.tl-checkbox) {
+  height: 32px;
+  width: 32px;
+  padding: 4px;
+  min-width: unset;
+}
+.tl-table--compact .tl-table__body-cell:has(.tl-table__expand-control) {
+  min-width: unset;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.tl-table--no-min-width .tl-table__body-cell {
+  min-width: unset;
+}
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child) {
+  border-right: 1px solid var(--table-divider);
+}
+.tl-table--vertical-dividers .tl-table__row--expanded .tl-table__body-cell:not(:has(.tl-table__expand-control)) {
+  border-bottom: 1px solid var(--table-divider);
+}
+.tl-table--cell-text-align-left .tl-table__body-cell {
+  text-align: left;
+}
+.tl-table--cell-text-align-start .tl-table__body-cell {
+  text-align: start;
+}
+.tl-table--cell-text-align-center .tl-table__body-cell {
+  text-align: center;
+}
+.tl-table--cell-text-align-right .tl-table__body-cell {
+  text-align: right;
+}
+.tl-table--cell-text-align-end .tl-table__body-cell {
+  text-align: end;
+}
+.tl-table--no-padding .tl-table__body-cell {
+  padding: 0;
+}
+
+.tl-table__toolbar {
+  box-sizing: border-box;
+}
+.tl-table__toolbar * {
+  box-sizing: border-box;
+}
+.tl-table__toolbar {
+  display: table-caption;
+  position: relative;
+  background-color: var(--table-toolbar);
+  color: var(--table-toolbar-text-color);
+  padding: 0 var(--unit-16);
+  height: 64px;
+  border-top-left-radius: var(--table-border-radius);
+  border-top-right-radius: var(--table-border-radius);
+}
+.tl-table--compact .tl-table__toolbar {
+  height: 56px;
+}
+
+.tl-table__upper-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tl-table__actionbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.tl-table__title {
+  font-family: var(--type-system-title-01-font-family);
+  font-size: calc(var(--type-system-title-01-font-size) * 1px);
+  line-height: calc(var(--type-system-title-01-line-height) * 1px);
+  font-weight: var(--type-system-title-01-font-weight);
+  letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
+  display: flex;
+  align-self: baseline;
+  text-align: left;
+  padding-top: var(--unit-16);
+  margin-right: var(--unit-8);
+}
+
+.tl-table__actionbar-right {
+  display: flex;
+  align-self: center;
+  column-gap: 8px;
+  position: relative;
+}
+
+.tl-table__header-input-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.tl-table__header-input-wrapper .tl-icon {
+  color: var(--table-filter-icon-color);
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.tl-table__header-input {
+  box-sizing: border-box;
+  font-family: var(--type-system-body-01-font-family);
+  font-size: calc(var(--type-system-body-01-font-size) * 1px);
+  line-height: calc(var(--type-system-body-01-line-height) * 1px);
+  font-weight: var(--type-system-body-01-font-weight);
+  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
+  text-transform: var(--type-system-body-01-text-transform);
+  color: var(--table-input-value-text-color);
+  padding: 0 var(--unit-16);
+  width: 100%;
+  border-radius: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+.tl-table--compact .tl-table__header-input {
+  height: 32px;
+}
+.tl-table__header-input {
+  padding-left: 35px;
+  height: 48px;
+}
+.tl-table__header-input::placeholder {
+  color: var(--table-input-placeholder-text-color);
+}
+.tl-table__header-input:focus {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tl-table__body-cell .tl-text-field {
+  height: 48px;
+  min-width: auto;
+  padding-bottom: 0;
+  cursor: pointer;
+}
+
+.tl-table--compact .tl-table__body-cell .tl-text-field {
+  height: 32px;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
+  height: 32px;
+}
+
+.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
+  display: none;
+}
+
+.tl-table__body-cell .tl-text-field:hover:not(.tl-text-field:has(.tl-text-field__input:disabled)) .tl-text-field__suffix--icon,
+.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:not(:disabled):focus) .tl-text-field__suffix--icon {
+  display: inline-block;
+}
+
+.tl-table__expand-control {
+  background-color: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+  color: var(--table-expand-icon-color);
+}
+.tl-table--compact .tl-table__expand-control {
+  padding: 0;
+  height: 32px;
+  width: 32px;
+}
+.tl-table__expand-control:focus, .tl-table__expand-control:focus-visible, .tl-table__expand-control:active {
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tl-table__expand-icon {
+  transition: transform 200ms ease;
+  transform: rotate(0);
+  color: var(--table-expand-icon-color);
+}
+
+.tl-table__row--expanded .tl-table__expand-icon {
+  transform: rotate(180deg);
+}
+
+.tl-table__expand-row {
+  display: none;
+  transition: background-color 200ms ease;
+}
+.tl-table__expand-row--expanded {
+  background-color: var(--table-body-row-expanded);
+  border-bottom: 1px solid var(--table-divider);
+  display: table-row;
+}
+
+.tl-table__expand-row-cell {
+  max-width: 1px;
+  overflow: auto;
+  padding: 16px 16px 16px 66px;
+  color: var(--table-body-cell-text-color);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar {
+  height: var(--tl-scrollbar-height);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
+  border-radius: var(--tl-scrollbar-thumb-border-radius);
+  background: var(--tl-scrollbar-thumb-color);
+  border-width: var(--tl-scrollbar-thumb-border-width);
+  border-style: solid;
+  border-color: transparent;
+  background-clip: padding-box;
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+  border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
+}
+.tl-table__expand-row-cell::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-table__expand-row-cell {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+.tl-table--compact .tl-table__expand-row-cell {
+  padding: 8px 16px 8px 66px;
+}
+.tl-table__expand-row-cell--overflow-visible {
+  overflow: visible;
+}
+.tl-table__expand-row-cell--overflow-hidden {
+  overflow: hidden;
+}
+
+.tl-table__body .tl-text-field__input {
+  border: none;
+  border-radius: 0;
+  background-color: var(--table-cell-background);
+}
+.tl-table__body .tl-text-field__input:disabled {
+  background-color: var(--table-cell-background);
+}
+.tl-table__body .tl-text-field__input:hover {
+  border: none;
+  border-radius: 0;
+}
+
+.tl-table__body .tl-text-field:hover .tl-text-field__input {
+  border: none !important;
+  border-radius: 0;
+}
+
+.tl-table--compact .tl-table__header-cell--checkbox {
+  padding: 4px;
+}
+
+.tl-table__header-cell--checkbox {
+  padding: 8px 16px;
+}