@limetech/lime-elements 39.0.0 → 39.0.2

package/dist/collection/components/chip/chip.css

@@ -1,4 +1,72 @@
 @charset "UTF-8";
+.text {
+  transition: padding-left 0.4s ease;
+}
+
+limel-linear-progress {
+  position: absolute;
+  z-index: 1;
+  margin: auto;
+  left: 0.25rem;
+  width: 1.25rem;
+}
+
+:host(limel-chip[loading]) .chip:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: var(--limel-chip-height);
+  height: var(--limel-chip-height);
+  border-radius: 50%;
+  scale: 0.9;
+  background-color: rgba(var(--contrast-600), 0.8);
+}
+:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text {
+  padding-left: calc(var(--limel-chip-height) + 0.25rem);
+}
+
+div[role=progressbar] {
+  --limel-chip-progressbar-offset: 0.1875rem;
+  --limel-chip-progressbar-stripe-color: rgb(var(--contrast-100), 0.3);
+  --limel-chip-progressbar-stripe-size: 1.5rem;
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  inset: var(--limel-chip-progressbar-offset);
+  max-width: calc(100% - var(--limel-chip-progressbar-offset) * 2);
+  border-radius: inherit;
+  background-color: var(--chip-progress-color, rgb(var(--contrast-700)));
+  width: var(--limel-chip-progress-percentage);
+  opacity: 0.8;
+  mix-blend-mode: var(--limel-chip-progress-mix-blend-mode);
+}
+div[role=progressbar]:after {
+  content: "";
+  transform: translate3d(0, 0, 0);
+  position: absolute;
+  inset: 1px;
+  background-image: linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);
+  z-index: 1;
+  background-size: var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);
+  animation: move 2.5s linear infinite;
+  border-radius: inherit;
+}
+@media (prefers-reduced-motion) {
+  div[role=progressbar]:after {
+    animation: none;
+  }
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1);
+  }
+}
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -98,6 +166,7 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
+  max-width: min(var(--chip-max-width, 100%), 25rem);
 }
 
 :host(limel-chip[size=small]) {
@@ -117,7 +186,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
-  max-width: min(var(--chip-max-width, 100%), 25rem);
+  max-width: 100%;
   height: var(--limel-chip-height);
   border-radius: var(--limel-chip-height);
   font-size: clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);
@@ -335,73 +404,4 @@ limel-menu button[slot=trigger]:focus-visible {
 }
 limel-menu[open] button[slot=trigger] {
   box-shadow: var(--button-shadow-inset);
-}
-
-.text {
-  transition: padding-left 0.4s ease;
-}
-
-limel-linear-progress {
-  position: absolute;
-  z-index: 1;
-  margin: auto;
-  left: 0.25rem;
-  width: 1.25rem;
-}
-
-:host(limel-chip[loading]) .chip:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: var(--limel-chip-height);
-  height: var(--limel-chip-height);
-  border-radius: 50%;
-  scale: 0.9;
-  background-color: rgba(var(--contrast-600), 0.8);
-}
-:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text {
-  padding-left: calc(var(--limel-chip-height) + 0.25rem);
-}
-
-div[role=progressbar] {
-  --limel-chip-progressbar-offset: 0.1875rem;
-  --limel-chip-progressbar-stripe-color: rgb(var(--contrast-100), 0.3);
-  --limel-chip-progressbar-stripe-size: 1.5rem;
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  inset: var(--limel-chip-progressbar-offset);
-  max-width: calc(100% - var(--limel-chip-progressbar-offset) * 2);
-  border-radius: inherit;
-  background-color: var(--chip-progress-color, rgb(var(--contrast-700)));
-  width: var(--limel-chip-progress-percentage);
-  opacity: 0.8;
-  mix-blend-mode: var(--limel-chip-progress-mix-blend-mode);
-}
-div[role=progressbar]:after {
-  content: "";
-  transform: translate3d(0, 0, 0);
-  position: absolute;
-  inset: 1px;
-  background-image: linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);
-  z-index: 1;
-  background-size: var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);
-  animation: move 2.5s linear infinite;
-  border-radius: inherit;
-}
-@media (prefers-reduced-motion) {
-  div[role=progressbar]:after {
-    animation: none;
-  }
-}
-
-@keyframes move {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1);
-  }
 }

package/dist/collection/components/chip-set/chip-set.css

@@ -1,10 +1,8 @@
 @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.
-*/
+:host(limel-chip-set[readonly]) .mdc-text-field.disabled {
+  pointer-events: auto;
+}
+
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -92,6 +90,31 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+:host(limel-chip-set:focus),
+:host(limel-chip-set:focus-visible),
+:host(limel-chip-set:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limel-chip-set) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limel-chip-set:focus) limel-helper-line,
+:host(limel-chip-set:focus-visible) limel-helper-line,
+:host(limel-chip-set:focus-within) limel-helper-line,
+:host(limel-chip-set:hover) limel-helper-line {
+  will-change: grid-template-rows;
+}
+
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to transparent.
  * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.
@@ -1603,6 +1626,9 @@
 :host(limel-chip-set[type=input]) limel-notched-outline [slot=content] {
   min-height: 2.5rem;
 }
+:host(limel-chip-set[type=input]) limel-chip:only-of-type {
+  --chip-max-width: auto;
+}
 
 :host(limel-chip-set:not([type=input])) .limel-notched-outline {
   --limel-notched-outline-border-color: transparent;
@@ -1754,114 +1780,4 @@ limel-chip {
 }
 limel-chip.can-be-removed {
   box-shadow: var(--shadow-depth-8-error);
-}
-
-:host(limel-chip-set[readonly]) .mdc-text-field.disabled {
-  pointer-events: auto;
-}
-
-/**
-* 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-chip-set:focus),
-:host(limel-chip-set:focus-visible),
-:host(limel-chip-set:focus-within) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
-}
-
-:host(limel-chip-set) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
-  --limel-h-l-grid-template-rows: 0fr;
-}
-
-:host(limel-chip-set:focus) limel-helper-line,
-:host(limel-chip-set:focus-visible) limel-helper-line,
-:host(limel-chip-set:focus-within) limel-helper-line,
-:host(limel-chip-set:hover) limel-helper-line {
-  will-change: grid-template-rows;
 }