@limetech/lime-elements 38.23.1 → 38.23.2

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

@@ -63,6 +63,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -3786,6 +3796,16 @@ img {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4084,6 +4104,16 @@ limel-dynamic-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4329,6 +4359,16 @@ label.boolean-input-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4451,6 +4491,16 @@ label.boolean-input-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/markdown/markdown.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

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

@@ -69,6 +69,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -3792,6 +3802,16 @@ img {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4090,6 +4110,16 @@ limel-dynamic-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4335,6 +4365,16 @@ label.boolean-input-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -4457,6 +4497,16 @@ label.boolean-input-label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/notched-outline/notched-outline.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/popover-surface/popover-surface.css

@@ -63,6 +63,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

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

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

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

@@ -63,6 +63,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1800,6 +1810,16 @@ select.limel-select__native-control {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/shortcut/shortcut.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/slider/slider.css

@@ -772,6 +772,16 @@ div[slot=content] {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/split-button/split-button.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/switch/switch.css

@@ -840,6 +840,16 @@ label {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/tab-bar/tab-bar.css

@@ -522,6 +522,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/table/table.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1325,6 +1335,16 @@ limel-chip {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1551,6 +1571,16 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1735,6 +1765,16 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css

@@ -287,6 +287,16 @@ li {
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -411,7 +421,7 @@ img {
   transition: opacity 0.2s ease, scale 0.6s ease;
 }
 .image-wrapper.state-failed, .image-wrapper.state-loading {
-  background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");
   background-size: 0.5rem;
 }
 .image-wrapper.state-failed img, .image-wrapper.state-loading img {

package/dist/collection/components/text-editor/text-editor.css

@@ -63,6 +63,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/style/mixins.scss

@@ -451,6 +451,60 @@ $clickable-normal-state-transitions: (
     -webkit-line-clamp: $max-lines;
 }
 
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+@mixin add-chessboard-background {
+    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E');
+    background-size: 0.5rem;
+}
+
+/**
+* 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.
+*/
+@mixin is-resizable(
+    $direction: both,
+    // can be `horizontal`, `vertical`, or `both`
+    $width: 100%,
+    $min-width: 10rem,
+    $max-width: 100%,
+    $height: 100%,
+    $min-height: 5rem,
+    $max-height: 50rem
+) {
+    box-sizing: border-box;
+    position: relative;
+
+    border: 1px dashed rgb(var(--contrast-700));
+    padding: 0.75rem;
+    padding-bottom: 2rem;
+
+    resize: $direction;
+    overflow: auto;
+
+    min-width: $min-width;
+    width: $width;
+    max-width: $max-width;
+
+    min-height: $min-height;
+    height: $height;
+    max-height: $max-height;
+
+    border-radius: 0.5rem;
+
+    &::after {
+        content: 'Resize me ⤵';
+        font-size: 0.75rem;
+        position: absolute;
+        right: 0.25rem;
+        bottom: 0.25rem;
+    }
+}
+
 // Hide element visually while keeping it accessible to assistive technologies
 // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

package/dist/esm/limel-chip_2.entry.js

@@ -22,7 +22,7 @@ import './_baseIsEqual-bbfd3091.js';
 import './eq-8014c26f.js';
 import './_isIndex-6de44c7b.js';
 
-const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:min(var(--chip-max-width, 100%), 25rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}.trailing-button{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover,.trailing-button:focus,.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}.trailing-button:hover,.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}.trailing-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.trailing-button:hover,.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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)}}";
+const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:min(var(--chip-max-width, 100%), 25rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover,.chip:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.chip:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{background-image:url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E\");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem;font-size:var(--limel-theme-default-font-size)}.trailing-button{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover,.trailing-button:focus,.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}.trailing-button:hover,.trailing-button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.trailing-button:hover{box-shadow:var(--button-shadow-hovered)}.trailing-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.trailing-button:hover,.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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)}}";
 
 const Chip = class {
   constructor(hostRef) {