@scania/tegel-lite 0.0.1-9

package/dist/tl-inline-tab.css

@@ -0,0 +1,80 @@
+/* Typography Usage mixins */
+.tl-inline-tabs__tab {
+  all: unset;
+  margin-right: 32px;
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab * {
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab {
+  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(--inline-tabs-tab);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 20px 4px;
+}
+.tl-inline-tabs__tab:focus-visible {
+  outline: none;
+}
+.tl-inline-tabs__tab:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 18px 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
+  z-index: 2;
+  pointer-events: none;
+}
+.tl-inline-tabs__tab::after {
+  background-color: var(--inline-tabs-tab-indicator-hover);
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  z-index: 1;
+  transition: width 0.15s ease-in-out 0s;
+}
+.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
+  width: 0%;
+}
+.tl-inline-tabs__tab:hover {
+  cursor: pointer;
+  color: var(--inline-tabs-tab-hover);
+}
+.tl-inline-tabs__tab:hover::after {
+  width: 100%;
+}
+.tl-inline-tabs__tab--selected {
+  color: var(--inline-tabs-tab-selected);
+}
+.tl-inline-tabs__tab--selected::after {
+  background-color: var(--inline-tabs-tab-indicator-active);
+  width: 100%;
+}
+.tl-inline-tabs__tab--disabled {
+  color: var(--inline-tabs-tab-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-inline-tabs__tab--disabled::after {
+  content: none;
+}
+.tl-inline-tabs__tab--disabled:focus-visible::before {
+  box-shadow: none;
+}

package/dist/tl-inline-tabs.css

@@ -0,0 +1,92 @@
+.tl-inline-tabs {
+  /* Horizontal divider */
+  --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
+  /* Mode variant backgrounds */
+  --inline-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
+  --inline-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
+  /* Scroll button */
+  --inline-tabs-scroll-button-text: var(--color-foreground-icon-strong);
+  --inline-tabs-scroll-button-background: var(--inline-tabs-tab-background);
+  --inline-tabs-scroll-button-background-hover: var(--inline-tabs-tab-background);
+  --inline-tabs-scroll-button-background-active: var(--inline-tabs-tab-background);
+}
+.tl-inline-tabs--primary {
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
+}
+.tl-inline-tabs--secondary {
+  --inline-tabs-tab-background: var(--inline-tabs-tab-background-secondary);
+}
+
+.traton .tl-inline-tabs {
+  --inline-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
+  --inline-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
+}
+
+.tl-inline-tabs__tab {
+  /* Tab */
+  --inline-tabs-tab: var(--color-foreground-text-soft);
+  --inline-tabs-tab-selected: var(--color-foreground-text-strong);
+  --inline-tabs-tab-disabled: var(--color-foreground-text-disabled);
+  --inline-tabs-tab-hover: var(--color-foreground-text-strong);
+  --inline-tabs-tab-focus: var(--color-foreground-border-accent-focus);
+  --inline-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
+  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
+}
+
+.tl-inline-tabs {
+  box-sizing: border-box;
+}
+.tl-inline-tabs * {
+  box-sizing: border-box;
+}
+.tl-inline-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  gap: 16px;
+  position: relative;
+  background-color: var(--inline-tabs-tab-background);
+}
+.tl-inline-tabs::-webkit-scrollbar {
+  display: none;
+}
+.tl-inline-tabs::after {
+  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
+  content: " ";
+  display: block;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.tl-inline-tabs__scroll-button {
+  background-color: transparent;
+  color: var(--inline-tabs-scroll-button-text);
+  cursor: pointer;
+  min-width: 48px;
+  border: 0;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  position: sticky;
+}
+
+.tl-inline-tabs__scroll-button--right {
+  right: 0;
+  z-index: 1;
+}
+
+.tl-inline-tabs__scroll-button--left {
+  left: 0;
+  z-index: 1;
+}
+
+.tl-inline-tabs__scroll-button svg {
+  fill: var(--inline-tabs-scroll-button-text);
+}

package/dist/tl-link.css

@@ -0,0 +1,101 @@
+/* Typography Usage mixins */
+/* Component variables */
+.tl-link {
+  --link: var(--color-foreground-text-accent-default);
+  --link-hover: var(--color-foreground-text-accent-default);
+  --link-focus-outline-width: 2px;
+  --link-visited: var(--color-foreground-text-accent-visited);
+  --link-disabled: var(--color-foreground-text-disabled);
+  --link-focus-outline-color: var(--color-foreground-border-accent-focus);
+}
+
+.tl-banner .tl-link {
+  --link: var(--color-system-info-default);
+}
+
+.tl-toast .tl-link {
+  --link: var(--color-system-info-default);
+  --link-hover: var(--color-foreground-text-accent-default);
+}
+
+.traton .tl-link {
+  --link-focus-outline-width: 4px;
+}
+
+.tl-link-text {
+  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);
+}
+
+.tl-link {
+  display: inline-flex;
+  color: var(--link);
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+}
+.tl-link:focus-visible {
+  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
+  outline-offset: 1px;
+  text-decoration: none;
+}
+.tl-link:active {
+  text-decoration-color: var(--link);
+}
+.tl-link:hover {
+  color: var(--link-hover);
+  text-decoration-color: var(--link-hover);
+}
+.tl-link:visited {
+  color: var(--link-visited);
+  text-decoration-color: var(--link-visited);
+}
+.tl-link--disabled {
+  color: var(--link-disabled);
+  text-decoration-color: var(--link-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-link--disabled:visited {
+  color: var(--link-disabled);
+  text-decoration-color: var(--link-disabled);
+}
+.tl-link--underline {
+  text-decoration: underline;
+}
+.tl-link--underline:hover {
+  text-decoration: underline;
+}
+.tl-link--standalone {
+  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);
+}
+
+.tl-link__icon {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  color: inherit;
+}
+.tl-link:hover .tl-link__icon .tl-icon {
+  color: var(--link-hover);
+}
+.tl-link:visited .tl-link__icon .tl-icon {
+  color: var(--link-visited);
+}
+.tl-link:active .tl-link__icon .tl-icon {
+  color: var(--link);
+}

package/dist/tl-message.css

@@ -0,0 +1,130 @@
+/* Typography Usage mixins */
+.tl-message {
+  --message-main-background: var(--color-background-layer-01);
+  --message-mode-primary-background: var(--color-background-layer-01);
+  --message-mode-secondary-background: var(--color-background-layer-02);
+  --message-main-text-color: var(--color-foreground-text-strong);
+  /* Info */
+  --message-info-border-color: var(--color-system-info-subtle);
+  --message-info-icon-color: var(--color-system-info-default);
+  /* Success */
+  --message-success-border-color: var(--color-system-success-subtle);
+  --message-success-icon-color: var(--color-system-success-default);
+  /* Error */
+  --message-error-background: var(--color-system-danger-discrete);
+  --message-error-border-color: var(--color-system-danger-subtle);
+  --message-error-icon-color: var(--color-system-danger-default);
+  --message-error-header-text-color: var(--color-system-danger-default);
+  /* Warning */
+  --message-warning-border-color: var(--color-system-warning-subtle);
+  --message-warning-icon-color: var(--color-system-warning-default);
+}
+
+.tl-message--primary {
+  --message-main-background: var(--message-mode-primary-background);
+}
+.tl-message--secondary {
+  --message-main-background: var(--message-mode-secondary-background);
+}
+
+.tl-message__wrapper {
+  display: flex;
+  padding: 16px;
+  background-color: var(--message-main-background);
+  border-radius: 4px;
+  position: relative;
+}
+.tl-message--information .tl-message__wrapper {
+  border-left: 4px solid var(--message-info-border-color);
+}
+.tl-message--success .tl-message__wrapper {
+  border-left: 4px solid var(--message-success-border-color);
+}
+.tl-message--warning .tl-message__wrapper {
+  border-left: 4px solid var(--message-warning-border-color);
+}
+.tl-message--error .tl-message__wrapper {
+  background-color: var(--message-error-background);
+  border-left: 4px solid var(--message-error-border-color);
+}
+.tl-message--minimal .tl-message__wrapper {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+}
+
+.tl-message__wrapper::before {
+  content: "";
+  display: inline-block;
+  margin-right: 16px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  background-color: currentcolor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+.tl-message--information .tl-message__wrapper::before {
+  mask-image: var(--icon-info-svg);
+  color: var(--message-info-icon-color);
+}
+.tl-message--success .tl-message__wrapper::before {
+  mask-image: var(--icon-tick-svg);
+  color: var(--message-success-icon-color);
+}
+.tl-message--warning .tl-message__wrapper::before {
+  mask-image: var(--icon-warning-svg);
+  color: var(--message-warning-icon-color);
+}
+.tl-message--error .tl-message__wrapper::before {
+  mask-image: var(--icon-error-svg);
+  color: var(--message-error-icon-color);
+}
+.tl-message--minimal .tl-message__wrapper::before {
+  margin-right: 8px;
+}
+.tl-message--no-icon .tl-message__wrapper::before {
+  display: none;
+}
+
+.tl-message__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--message-main-text-color);
+  padding: 2px 0;
+}
+
+.tl-message__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);
+}
+.tl-message--minimal .tl-message__header {
+  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);
+}
+.tl-message--error.tl-message--minimal .tl-message__header {
+  color: var(--message-error-header-text-color);
+}
+
+.tl-message__extended-message {
+  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(--message-main-text-color);
+}
+.tl-message--minimal .tl-message__extended-message {
+  display: none;
+}

package/dist/tl-modal.css

@@ -0,0 +1,274 @@
+: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;
+}
+
+/* Typography Usage mixins */
+/* Component variables */
+.tl-modal,
+:root {
+  --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
+  --modal-background: var(--color-background-layer-02);
+  --modal-backdrop: var(--color-background-overlay);
+  --modal-text: var(--color-foreground-text-strong);
+  --modal-cross-svg: var(--color-foreground-text-strong);
+  --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
+  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
+}
+
+/* MIXINS */
+.tl-modal {
+  box-sizing: border-box;
+}
+.tl-modal * {
+  box-sizing: border-box;
+}
+.tl-modal {
+  background-color: var(--modal-background);
+  box-shadow: var(--modal-shadow);
+  margin: auto;
+  position: relative;
+  border-radius: 4px;
+  max-height: 85vh;
+  overflow-y: auto;
+  pointer-events: auto;
+  z-index: 1001;
+}
+.tl-modal::-webkit-scrollbar {
+  width: var(--tl-scrollbar-width);
+}
+.tl-modal::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-modal::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  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-modal::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+}
+.tl-modal::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-modal {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+.tl-modal {
+  display: none;
+}
+.tl-modal--visible {
+  display: block;
+}
+.tl-modal--visible.tl-modal--sticky {
+  display: flex;
+  flex-direction: column;
+}
+.tl-modal--sticky {
+  overflow: hidden;
+}
+
+@media (min-width: 320px) {
+  .tl-modal--xs {
+    width: 100%;
+  }
+  .tl-modal--sm {
+    width: 100%;
+  }
+  .tl-modal--md {
+    width: 100%;
+  }
+  .tl-modal--lg {
+    width: 100%;
+  }
+}
+@media (min-width: 672px) {
+  .tl-modal--xs {
+    width: 50%;
+  }
+  .tl-modal--sm {
+    width: 62.5%;
+  }
+  .tl-modal--md {
+    width: 75%;
+  }
+  .tl-modal--lg {
+    width: 100%;
+  }
+}
+@media (min-width: 1056px) {
+  .tl-modal--xs {
+    width: 31.25%;
+  }
+  .tl-modal--sm {
+    width: 43.75%;
+  }
+  .tl-modal--md {
+    width: 62.5%;
+  }
+  .tl-modal--lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1312px) {
+  .tl-modal--xs {
+    width: 31.25%;
+  }
+  .tl-modal--sm {
+    width: 37.5%;
+  }
+  .tl-modal--md {
+    width: 62.5%;
+  }
+  .tl-modal--lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1584px) {
+  .tl-modal--xs {
+    width: 25%;
+  }
+  .tl-modal--sm {
+    width: 37.5%;
+  }
+  .tl-modal--md {
+    width: 50%;
+  }
+  .tl-modal--lg {
+    width: 75%;
+  }
+}
+@media (max-width: 320px) {
+  .tl-modal--md,
+  .tl-modal--lg,
+  .tl-modal--sm {
+    height: 100%;
+  }
+}
+.tl-modal__header {
+  display: flex;
+  padding: 16px;
+  position: sticky;
+  top: 0;
+  background-color: var(--modal-background);
+  z-index: 1;
+}
+
+.tl-modal__title {
+  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);
+  color: var(--modal-text);
+  margin: 0;
+  flex: 1;
+}
+
+.tl-modal__body {
+  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);
+  color: var(--modal-text);
+  padding: 0 16px 16px;
+}
+.tl-modal__body::-webkit-scrollbar {
+  width: var(--tl-scrollbar-width);
+}
+.tl-modal__body::-webkit-scrollbar-track {
+  background: var(--tl-scrollbar-track-color);
+}
+.tl-modal__body::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  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-modal__body::-webkit-scrollbar-thumb:hover {
+  border-width: var(--tl-scrollbar-thumb-border-hover-width);
+}
+.tl-modal__body::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tl-modal__body {
+    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
+    scrollbar-width: var(--tl-scrollbar-width-standard);
+  }
+}
+.tl-modal--sticky .tl-modal__body {
+  max-height: calc(85vh - 36px);
+  overflow-y: auto;
+}
+
+.tl-modal__actions {
+  background-color: var(--modal-background);
+  padding: 24px 16px 16px;
+  display: flex;
+  gap: 16px;
+}
+.tl-modal--sticky .tl-modal__actions {
+  position: sticky;
+  bottom: 0;
+}
+
+.tl-modal__close {
+  margin: 0 0 auto auto;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  appearance: unset;
+  display: inline-block;
+  height: auto;
+  color: var(--modal-text);
+  cursor: pointer;
+}
+.tl-modal__close:focus {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}
+
+.tl-modal__overlay {
+  box-sizing: border-box;
+}
+.tl-modal__overlay * {
+  box-sizing: border-box;
+}
+.tl-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--modal-backdrop);
+  pointer-events: auto;
+  z-index: 1000;
+  display: none;
+}
+.tl-modal__overlay.tl-modal--visible {
+  display: block;
+}