@limetech/lime-elements 39.0.0 → 39.0.2

package/dist/collection/components/menu-list/menu-list.css

@@ -1,148 +1,4 @@
 @charset "UTF-8";
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/**
- * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
- * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
- * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.
- * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.
- * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
- * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
- * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
- * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
- * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
- */
-:host(limel-list) {
-  display: block;
-  isolation: isolate;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-ul {
-  --mdc-theme-text-icon-on-background: var(
-      --icon-color,
-      rgb(var(--contrast-900))
-  );
-  margin: var(--list-margin, 0.25rem);
-  border-radius: 0.5rem;
-  padding: 0;
-  list-style: none;
-}
-
-.mdc-deprecated-list-divider {
-  border-bottom-color: transparent;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  height: auto;
-  padding: 0 0.5rem;
-}
-
-.limel-list-divider-line {
-  background-color: rgb(var(--contrast-400));
-  height: 0.125rem;
-  border-radius: 1rem;
-  min-width: 1rem;
-  flex-grow: 1;
-}
-
-.limel-list-divider-title {
-  all: unset;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: rgb(var(--contrast-900));
-  font-size: var(--limel-theme-default-small-font-size);
-}
-
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -293,18 +149,12 @@ ul {
   max-width: var(--list-grid-max-width, 100%);
 }
 :host(.has-grid-layout) .mdc-deprecated-list limel-list-item {
-  border-radius: 0.5rem !important;
+  border-radius: var(--limel-list-border-radius) !important;
 }
 :host(.has-grid-layout) .mdc-deprecated-list-divider {
   grid-column: 1/-1;
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 :host(.static-actions-list) {
   z-index: 1;
   background-color: var(--limel-theme-surface-background-color);
@@ -335,6 +185,64 @@ ul {
   padding-top: 0.25rem;
 }
 
+/**
+* @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
+* @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
+* @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.
+* @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.
+* @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
+* @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
+* @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
+* @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
+* @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
+*/
+:host(limel-list) {
+  --limel-list-border-radius: 0.5rem;
+  display: block;
+  isolation: isolate;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+ul {
+  --mdc-theme-text-icon-on-background: var(
+      --icon-color,
+      rgb(var(--contrast-900))
+  );
+  margin: var(--list-margin, 0.25rem);
+  border-radius: var(--limel-list-border-radius);
+  padding: 0;
+  list-style: none;
+}
+
+.mdc-deprecated-list-divider {
+  border-bottom-color: transparent;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: auto;
+  padding: 0 0.5rem;
+}
+
+.limel-list-divider-line {
+  background-color: rgb(var(--contrast-400));
+  height: 0.125rem;
+  border-radius: 1rem;
+  min-width: 1rem;
+  flex-grow: 1;
+}
+
+.limel-list-divider-title {
+  all: unset;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(var(--contrast-900));
+  font-size: var(--limel-theme-default-small-font-size);
+}
+
 :host(limel-menu-list) {
   display: block;
   --badge-background-color: var(

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -1,4 +1,75 @@
 @charset "UTF-8";
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
+.step:before,
+.step .lock-icon {
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: var(--limel-progress-flow-step-content);
+}
+.step::before {
+  position: absolute;
+  right: var(--selected-indicator-right);
+  border-radius: 50%;
+}
+.last .step:before,
+.last .step .lock-icon {
+  right: 0.5rem;
+}
+
+.flow-item:not(.off-progress-item) .step.selected:before {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: rgb(var(--contrast-700));
+  opacity: 0.7;
+}
+
+.lock-icon {
+  margin-left: 0.25rem;
+  margin-right: -0.5rem;
+  width: 0.75rem;
+  color: currentColor;
+  scale: 0.8;
+}
+
+.step {
+  color: var(--step-text);
+  background-color: var(--step-background);
+}
+.step .icon {
+  color: var(--progress-flow-icon-color--inactive, var(--step-text));
+}
+.flow-item.selected .step {
+  color: var(--step-text--selected);
+  background-color: var(--step-background--selected);
+}
+.flow-item.selected .step .divider:after {
+  background-color: var(--step-background--selected);
+}
+.flow-item.selected .step .icon {
+  color: var(--step-text--selected);
+}
+.flow-item.passed .step {
+  color: var(--step-text--passed);
+  background-color: var(--step-background--passed);
+}
+.flow-item.passed .step .divider:after {
+  background-color: var(--step-background--passed);
+}
+.flow-item.passed .step .icon {
+  color: var(--step-text--passed);
+}
+
+.divider:after {
+  border-color: var(--step-divider-color);
+  background-color: var(--step-background);
+}
+
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -86,12 +157,6 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 .flow-item {
   --step-background: var(
       --progress-flow-step-background-color,
@@ -198,7 +263,7 @@
   width: var(--step-height);
   height: var(--step-height);
   position: absolute;
-  z-index: 1;
+  z-index: var(--limel-progress-flow-divider);
   right: calc(var(--step-height) / 2 * -1);
   overflow: hidden;
 }
@@ -226,7 +291,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: var(--max-text-width);
-  z-index: 2;
+  z-index: var(--limel-progress-flow-step-content);
 }
 
 .secondary-text {
@@ -237,76 +302,5 @@
 
 .icon {
   margin: 0 0.5rem 0 0.25rem;
-  z-index: 2;
-}
-
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-.step:before,
-.step .lock-icon {
-  pointer-events: none;
-  box-sizing: border-box;
-  z-index: 2;
-}
-.step::before {
-  position: absolute;
-  right: var(--selected-indicator-right);
-  border-radius: 50%;
-}
-.last .step:before,
-.last .step .lock-icon {
-  right: 0.5rem;
-}
-
-.flow-item:not(.off-progress-item) .step.selected:before {
-  content: "";
-  width: 0.375rem;
-  height: 0.375rem;
-  background-color: rgb(var(--contrast-700));
-  opacity: 0.7;
-}
-
-.lock-icon {
-  margin-left: 0.25rem;
-  margin-right: -0.5rem;
-  width: 0.75rem;
-  color: currentColor;
-  scale: 0.8;
-}
-
-.step {
-  color: var(--step-text);
-  background-color: var(--step-background);
-}
-.step .icon {
-  color: var(--progress-flow-icon-color--inactive, var(--step-text));
-}
-.flow-item.selected .step {
-  color: var(--step-text--selected);
-  background-color: var(--step-background--selected);
-}
-.flow-item.selected .step .divider:after {
-  background-color: var(--step-background--selected);
-}
-.flow-item.selected .step .icon {
-  color: var(--step-text--selected);
-}
-.flow-item.passed .step {
-  color: var(--step-text--passed);
-  background-color: var(--step-background--passed);
-}
-.flow-item.passed .step .divider:after {
-  background-color: var(--step-background--passed);
-}
-.flow-item.passed .step .icon {
-  color: var(--step-text--passed);
-}
-
-.divider:after {
-  border-color: var(--step-divider-color);
-  background-color: var(--step-background);
+  z-index: var(--limel-progress-flow-step-content);
 }

package/dist/collection/components/progress-flow/progress-flow.css

@@ -15,6 +15,8 @@
 * @prop --progress-flow-icon-color--inactive: Color of the optional icons used in each step. Only affects inactive steps, defaults to text colors for inactive, active, or passed step.
 */
 :host {
+  --limel-progress-flow-step-content: 2;
+  --limel-progress-flow-divider: 1;
   --step-height: 2rem;
   --selected-indicator-right: -0.5rem;
   --max-text-width: 10rem;

package/dist/collection/components/radio-button-group/radio-button.css

@@ -295,12 +295,12 @@ label.boolean-input-label {
       --limel-boolean-input-box-size
   );
 }
-
-.box:after {
+.radio-button .box:after {
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }
+
 .boolean-input:has(input[type=radio]:checked) .box:after {
   opacity: 1;
   transform: scale(0.6);

package/dist/collection/components/select/select.css

@@ -5,6 +5,20 @@
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
+.limel-select.mdc-select.limel-select--readonly .limel-select-trigger {
+  cursor: default;
+  opacity: 1;
+}
+.limel-select.mdc-select.limel-select--readonly .mdc-floating-label {
+  color: rgba(var(--contrast-1200), 1);
+}
+.limel-select.mdc-select.limel-select--readonly .limel-select__selected-option__text {
+  color: rgba(var(--contrast-1400), 1);
+}
+.limel-select.mdc-select.limel-select--readonly .mdc-select__dropdown-icon {
+  display: none;
+}
+
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -92,6 +106,31 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+:host(limel-select:focus),
+:host(limel-select:focus-visible),
+:host(limel-select:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limel-select) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limel-select:focus) limel-helper-line,
+:host(limel-select:focus-visible) limel-helper-line,
+:host(limel-select:focus-within) limel-helper-line,
+:host(limel-select:hover) limel-helper-line {
+  will-change: grid-template-rows;
+}
+
+.limel-select--focused + limel-helper-line,
+.limel-select--invalid limel-helper-line {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
 .mdc-floating-label {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -1780,136 +1819,4 @@ select.limel-select__native-control {
   height: 100%;
   opacity: 0;
   border: 0;
-}
-
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-.limel-select.mdc-select.limel-select--readonly .limel-select-trigger {
-  cursor: default;
-  opacity: 1;
-}
-.limel-select.mdc-select.limel-select--readonly .mdc-floating-label {
-  color: rgba(var(--contrast-1200), 1);
-}
-.limel-select.mdc-select.limel-select--readonly .limel-select__selected-option__text {
-  color: rgba(var(--contrast-1400), 1);
-}
-.limel-select.mdc-select.limel-select--readonly .mdc-select__dropdown-icon {
-  display: none;
-}
-
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-:host(limel-select:focus),
-:host(limel-select:focus-visible),
-:host(limel-select:focus-within) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
-}
-
-:host(limel-select) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
-  --limel-h-l-grid-template-rows: 0fr;
-}
-
-:host(limel-select:focus) limel-helper-line,
-:host(limel-select:focus-visible) limel-helper-line,
-:host(limel-select:focus-within) limel-helper-line,
-:host(limel-select:hover) limel-helper-line {
-  will-change: grid-template-rows;
-}
-
-.limel-select--focused + limel-helper-line,
-.limel-select--invalid limel-helper-line {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
 }