@limetech/lime-elements 38.7.1 → 38.8.0

package/dist/lime-elements/{p-ece3a0f5.entry.js → p-fc078f90.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as n,H as i,g as o}from"./p-443111b3.js";import{g as r}from"./p-e1e25236.js";const t="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n  * Media query mixins for responsive design based on screen width.\n  * Note that these mixins do not detect the device type!\n  */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\nlimel-3d-hover-effect-glow {\n  border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n  --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover limel-3d-hover-effect-glow {\n    --limel-3d-hover-effect-glow-opacity: 0.2;\n  }\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";const s=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:n}=r(this.host);this.handleMouseEnter=e;this.handleMouseLeave=n}render(){var e,o,r,t,s,a,l,c,d,h;const f=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.value)+this.checkProps((r=this===null||this===void 0?void 0:this.progress)===null||r===void 0?void 0:r.suffix)+this.checkProps((t=this===null||this===void 0?void 0:this.link)===null||t===void 0?void 0:t.title);const u=!this.disabled?(s=this.link)===null||s===void 0?void 0:s.href:"#";return n(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},n("a",{title:(a=this.link)===null||a===void 0?void 0:a.title,href:u,target:(l=this.link)===null||l===void 0?void 0:l.target,tabindex:"0","aria-label":f,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((c=this.link)===null||c===void 0?void 0:c.href)&&!this.disabled,"has-circular-progress":!!((d=this.progress)===null||d===void 0?void 0:d.value)||((h=this.progress)===null||h===void 0?void 0:h.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel(),n("limel-3d-hover-effect-glow",null)),this.renderNotification())}checkProps(e){return!e?"":e+" "}get host(){return o(this)}};s.style=t;export{s as limel_info_tile};
-//# sourceMappingURL=p-ece3a0f5.entry.js.map
+import{r as e,h as n,H as i,g as o}from"./p-288f0842.js";import{g as r}from"./p-e1e25236.js";const t="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n  * Media query mixins for responsive design based on screen width.\n  * Note that these mixins do not detect the device type!\n  */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\nlimel-3d-hover-effect-glow {\n  border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n  --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover limel-3d-hover-effect-glow {\n    --limel-3d-hover-effect-glow-opacity: 0.2;\n  }\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";const s=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:n}=r(this.host);this.handleMouseEnter=e;this.handleMouseLeave=n}render(){var e,o,r,t,s,a,l,c,d,h;const f=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.value)+this.checkProps((r=this===null||this===void 0?void 0:this.progress)===null||r===void 0?void 0:r.suffix)+this.checkProps((t=this===null||this===void 0?void 0:this.link)===null||t===void 0?void 0:t.title);const u=!this.disabled?(s=this.link)===null||s===void 0?void 0:s.href:"#";return n(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},n("a",{title:(a=this.link)===null||a===void 0?void 0:a.title,href:u,target:(l=this.link)===null||l===void 0?void 0:l.target,tabindex:"0","aria-label":f,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((c=this.link)===null||c===void 0?void 0:c.href)&&!this.disabled,"has-circular-progress":!!((d=this.progress)===null||d===void 0?void 0:d.value)||((h=this.progress)===null||h===void 0?void 0:h.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel(),n("limel-3d-hover-effect-glow",null)),this.renderNotification())}checkProps(e){return!e?"":e+" "}get host(){return o(this)}};s.style=t;export{s as limel_info_tile};
+//# sourceMappingURL=p-fc078f90.entry.js.map

package/dist/lime-elements/{p-2793f6d0.entry.js → p-fe5fd06b.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,g as o}from"./p-443111b3.js";import{c as r}from"./p-96460db3.js";import{m as n,r as a}from"./p-869d6d77.js";import{d as s,g as l,a as c}from"./p-bd547592.js";const h='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button: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-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button: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(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const d=class{constructor(i){t(this,i);this.select=e(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=r()}componentWillLoad(){n(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){a(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return i("hr",null)}return i("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=l(this.item.icon);const e=c(this.item.icon,this.item.iconColor);const o=s(this.item.icon);return i("limel-icon",{name:t,"aria-label":o,"aria-hidden":o?null:"true",style:{"--action-bar-item-icon-color":`${e}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return i("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}return i("limel-tooltip",{elementId:this.tooltipId,label:this.getTooltipLabel(this.item),helperLabel:this.item.commandText})}getTooltipLabel(t){const e=s(t.icon);const i=t.text;if(e&&i){return`${e} ${i}`}return i}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};d.style=h;const b=class{constructor(o){t(this,o);this.select=e(this,"select",7);this.getOverflowTriggerContent=()=>{if(this.overFlowIcon){const{color:t,name:e,title:o}=this.overFlowIcon;return i("limel-icon",{style:{color:t},name:e,"aria-label":o})}return`+${this.numberOfMenuItems}`};this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end";this.overFlowIcon=undefined}render(){return[i("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},i("button",{slot:"trigger"},this.getOverflowTriggerContent()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{d as limel_action_bar_item,b as limel_action_bar_overflow_menu};
-//# sourceMappingURL=p-2793f6d0.entry.js.map
+import{r as t,c as e,h as i,g as o}from"./p-288f0842.js";import{c as r}from"./p-96460db3.js";import{m as n,r as a}from"./p-f221011c.js";import{d as s,g as l,a as c}from"./p-bd547592.js";const h='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button: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-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button: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(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const d=class{constructor(i){t(this,i);this.select=e(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=r()}componentWillLoad(){n(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){a(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return i("hr",null)}return i("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=l(this.item.icon);const e=c(this.item.icon,this.item.iconColor);const o=s(this.item.icon);return i("limel-icon",{name:t,"aria-label":o,"aria-hidden":o?null:"true",style:{"--action-bar-item-icon-color":`${e}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return i("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}return i("limel-tooltip",{elementId:this.tooltipId,label:this.getTooltipLabel(this.item),helperLabel:this.item.commandText})}getTooltipLabel(t){const e=s(t.icon);const i=t.text;if(e&&i){return`${e} ${i}`}return i}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};d.style=h;const m=class{constructor(o){t(this,o);this.select=e(this,"select",7);this.getOverflowTriggerContent=()=>{if(this.overFlowIcon){const{color:t,name:e,title:o}=this.overFlowIcon;return i("limel-icon",{style:{color:t},name:e,"aria-label":o})}return`+${this.numberOfMenuItems}`};this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end";this.overFlowIcon=undefined}render(){return[i("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},i("button",{slot:"trigger"},this.getOverflowTriggerContent()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{d as limel_action_bar_item,m as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-fe5fd06b.entry.js.map

package/dist/lime-elements/style/internal/shared_input-select-picker.scss

@@ -214,9 +214,15 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 
 @mixin leading-icon {
     .mdc-text-field__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         color: $input-text-leading-icon-color;
-        width: functions.pxToRem(24);
-        height: functions.pxToRem(24);
+
+        limel-icon {
+            width: functions.pxToRem(24);
+            height: functions.pxToRem(24);
+        }
     }
 }
 

package/dist/types/components/chip-set/chip-set.d.ts

@@ -161,6 +161,7 @@ export declare class ChipSet {
   private selectedChipIds;
   private mdcTextField;
   private readonly handleKeyDown;
+  private labelId;
   constructor();
   connectedCallback(): void;
   private initialize;
@@ -187,13 +188,12 @@ export declare class ChipSet {
   componentDidLoad(): void;
   componentDidUpdate(): void;
   disconnectedCallback(): void;
-  render(): any;
+  render(): any[];
+  private getContentProps;
+  private renderContent;
   private readonly getValue;
   protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;
-  private renderChipSetLabel;
   private renderInputChips;
-  private readonly renderEmptyValueForReadonly;
-  private renderLabel;
   private readonly floatLabelAbove;
   private isFull;
   private isInvalid;

package/dist/types/components/collapsible-section/collapsible-section.d.ts

@@ -1,12 +1,23 @@
 import { Action } from './action';
 /**
+ * A collapsible section can be used to group related content together
+ * and hide the group when not needed.
+ * Using this component can help to:
+ * - Save vertical space by hiding non-essential content
+ * - Improve content organization and scannability of the user interface
+ * - Reduce cognitive load by displaying only a set of relevant information at a time
+ * - Or disclose complex information, progressively to the user
+ *
  * @slot - Content to put inside the collapsible section
- * @exampleComponent limel-example-collapsible-section
+ * @slot header - Optional slot for custom header content
+ *
+ * @exampleComponent limel-example-collapsible-section-basic
  * @exampleComponent limel-example-collapsible-section-actions
  * @exampleComponent limel-example-collapsible-section-with-custom-header-component
- * @exampleComponent limel-example-collapsible-section-css-props
  * @exampleComponent limel-example-collapsible-section-external-control
  * @exampleComponent limel-example-collapsible-section-with-slider
+ * @exampleComponent limel-example-collapsible-section-invalid
+ * @exampleComponent limel-example-collapsible-section-css-props
  */
 export declare class CollapsibleSection {
   /**
@@ -17,6 +28,11 @@ export declare class CollapsibleSection {
    * Text to display in the header of the section
    */
   header: string;
+  /**
+   * `true` if the section is invalid, `false` if valid.
+   * This can be used to indicate that the content inside the section is invalid.
+   */
+  invalid: boolean;
   /**
    * Actions to place to the far right inside the header
    */

package/dist/types/components/input-field/input-field.d.ts

@@ -181,7 +181,6 @@ export declare class InputField {
   private hasHelperText;
   private hasHelperLine;
   private renderHelperLine;
-  private renderEmptyValueForReadonly;
   private renderSuffix;
   private hasSuffix;
   private renderPrefix;
@@ -189,7 +188,6 @@ export declare class InputField {
   private isInvalid;
   private validate;
   private setInputElement;
-  private renderLabel;
   private renderLeadingIcon;
   private renderTrailingLinkOrButton;
   private hasLink;

package/dist/types/components/notched-outline/notched-outline.d.ts

@@ -0,0 +1,75 @@
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+export declare class NotchedOutline {
+  /**
+   * Set to `true` when the input element is required.
+   * This applies proper visual styles, such as inclusion of an asterisk
+   * beside the label.
+   */
+  required: boolean;
+  /**
+   * Set to `true` when the input element is readonly.
+   * This applies proper visual styles, such as making the outline transparent.
+   */
+  readonly: boolean;
+  /**
+   * Set to `true` to indicate that the current value of the input element is
+   * invalid. This applies proper visual styles, such as making the outlines red.
+   */
+  invalid: boolean;
+  /**
+   * Set to `true` to indicate that the input element is
+   * disabled. This applies proper visual styles, such as making the outlines
+   * and the label transparent.
+   */
+  disabled: boolean;
+  /**
+   * Label to display for the input element.
+   * :::important
+   * Note that the input element of the consumer component will be
+   * labeled by this label, using the `labelId` prop.
+   * :::
+   */
+  label?: string;
+  /**
+   * The `id` of the input element which should be
+   * labeled by the provided label.
+   */
+  labelId?: string;
+  /**
+   * Set to `true` when the user has entered a value for the input element,
+   * shrinking the label in size, and visually rendering it above the entered value.
+   */
+  hasValue: boolean;
+  /**
+   * Set to `true` when the consumer element displays a leading icon.
+   * This applies proper visual styles, such as rendering the label
+   * correctly placed beside the leading icon.
+   */
+  hasLeadingIcon: boolean;
+  /**
+   * Set to `true` when the consumer element needs to render the
+   * label above the input element, despite existence of a `value`.
+   * For example in the `text-editor` or `limel-select`,
+   * where the default layout requires a floating label.
+   */
+  hasFloatingLabel: boolean;
+  render(): any;
+  private renderLabel;
+  private renderEmptyReadonlyValue;
+}
+//# sourceMappingURL=notched-outline.d.ts.map

package/dist/types/components/text-editor/text-editor.d.ts

@@ -166,9 +166,8 @@ export declare class TextEditor implements FormComponent<string> {
   private helperTextId;
   private editorId;
   constructor();
-  render(): any;
+  render(): any[];
   private renderEditor;
-  private renderLabel;
   private renderPlaceholder;
   private renderHelperLine;
   private isInvalid;

package/dist/types/components.d.ts

@@ -868,12 +868,20 @@ export namespace Components {
         "value": string;
     }
     /**
-     * @exampleComponent limel-example-collapsible-section
+     * A collapsible section can be used to group related content together
+     * and hide the group when not needed.
+     * Using this component can help to:
+     * - Save vertical space by hiding non-essential content
+     * - Improve content organization and scannability of the user interface
+     * - Reduce cognitive load by displaying only a set of relevant information at a time
+     * - Or disclose complex information, progressively to the user
+     * @exampleComponent limel-example-collapsible-section-basic
      * @exampleComponent limel-example-collapsible-section-actions
      * @exampleComponent limel-example-collapsible-section-with-custom-header-component
-     * @exampleComponent limel-example-collapsible-section-css-props
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
+     * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface LimelCollapsibleSection {
         /**
@@ -884,6 +892,10 @@ export namespace Components {
           * Text to display in the header of the section
          */
         "header": string;
+        /**
+          * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
+         */
+        "invalid": boolean;
         /**
           * `true` if the section is expanded, `false` if collapsed.
          */
@@ -2013,6 +2025,59 @@ export namespace Components {
          */
         "open": boolean;
     }
+    /**
+     * This is a private component, used to render a notched outline
+     * around all input elements that can have a floating label.
+     * Inspired by Material Design's styles for input fields.
+     * We use it in various components to unify styles and avoid
+     * repeating code.
+     * :::note
+     * The component has `shadow: false`. This is to improve performance,
+     * and ensure that its internal elements are considered as internal parts
+     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+     * would be correctly associated with the input element's `id`, in the consumer component.
+     * :::
+     * @exampleComponent limel-example-notched-outline-basic
+     * @private 
+     */
+    interface LimelNotchedOutline {
+        /**
+          * Set to `true` to indicate that the input element is disabled. This applies proper visual styles, such as making the outlines and the label transparent.
+         */
+        "disabled": boolean;
+        /**
+          * Set to `true` when the consumer element needs to render the label above the input element, despite existence of a `value`. For example in the `text-editor` or `limel-select`, where the default layout requires a floating label.
+         */
+        "hasFloatingLabel": boolean;
+        /**
+          * Set to `true` when the consumer element displays a leading icon. This applies proper visual styles, such as rendering the label correctly placed beside the leading icon.
+         */
+        "hasLeadingIcon": boolean;
+        /**
+          * Set to `true` when the user has entered a value for the input element, shrinking the label in size, and visually rendering it above the entered value.
+         */
+        "hasValue": boolean;
+        /**
+          * Set to `true` to indicate that the current value of the input element is invalid. This applies proper visual styles, such as making the outlines red.
+         */
+        "invalid": boolean;
+        /**
+          * Label to display for the input element. :::important Note that the input element of the consumer component will be labeled by this label, using the `labelId` prop. :::
+         */
+        "label"?: string;
+        /**
+          * The `id` of the input element which should be labeled by the provided label.
+         */
+        "labelId"?: string;
+        /**
+          * Set to `true` when the input element is readonly. This applies proper visual styles, such as making the outline transparent.
+         */
+        "readonly": boolean;
+        /**
+          * Set to `true` when the input element is required. This applies proper visual styles, such as inclusion of an asterisk beside the label.
+         */
+        "required": boolean;
+    }
     /**
      * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
@@ -3483,12 +3548,20 @@ declare global {
         new (): HTMLLimelCodeEditorElement;
     };
     /**
-     * @exampleComponent limel-example-collapsible-section
+     * A collapsible section can be used to group related content together
+     * and hide the group when not needed.
+     * Using this component can help to:
+     * - Save vertical space by hiding non-essential content
+     * - Improve content organization and scannability of the user interface
+     * - Reduce cognitive load by displaying only a set of relevant information at a time
+     * - Or disclose complex information, progressively to the user
+     * @exampleComponent limel-example-collapsible-section-basic
      * @exampleComponent limel-example-collapsible-section-actions
      * @exampleComponent limel-example-collapsible-section-with-custom-header-component
-     * @exampleComponent limel-example-collapsible-section-css-props
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
+     * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface HTMLLimelCollapsibleSectionElement extends Components.LimelCollapsibleSection, HTMLStencilElement {
     }
@@ -4086,6 +4159,27 @@ declare global {
         prototype: HTMLLimelMenuSurfaceElement;
         new (): HTMLLimelMenuSurfaceElement;
     };
+    /**
+     * This is a private component, used to render a notched outline
+     * around all input elements that can have a floating label.
+     * Inspired by Material Design's styles for input fields.
+     * We use it in various components to unify styles and avoid
+     * repeating code.
+     * :::note
+     * The component has `shadow: false`. This is to improve performance,
+     * and ensure that its internal elements are considered as internal parts
+     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+     * would be correctly associated with the input element's `id`, in the consumer component.
+     * :::
+     * @exampleComponent limel-example-notched-outline-basic
+     * @private 
+     */
+    interface HTMLLimelNotchedOutlineElement extends Components.LimelNotchedOutline, HTMLStencilElement {
+    }
+    var HTMLLimelNotchedOutlineElement: {
+        prototype: HTMLLimelNotchedOutlineElement;
+        new (): HTMLLimelNotchedOutlineElement;
+    };
     /**
      * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
@@ -4572,6 +4666,7 @@ declare global {
         "limel-menu": HTMLLimelMenuElement;
         "limel-menu-list": HTMLLimelMenuListElement;
         "limel-menu-surface": HTMLLimelMenuSurfaceElement;
+        "limel-notched-outline": HTMLLimelNotchedOutlineElement;
         "limel-picker": HTMLLimelPickerElement;
         "limel-popover": HTMLLimelPopoverElement;
         "limel-popover-surface": HTMLLimelPopoverSurfaceElement;
@@ -5417,12 +5512,20 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * @exampleComponent limel-example-collapsible-section
+     * A collapsible section can be used to group related content together
+     * and hide the group when not needed.
+     * Using this component can help to:
+     * - Save vertical space by hiding non-essential content
+     * - Improve content organization and scannability of the user interface
+     * - Reduce cognitive load by displaying only a set of relevant information at a time
+     * - Or disclose complex information, progressively to the user
+     * @exampleComponent limel-example-collapsible-section-basic
      * @exampleComponent limel-example-collapsible-section-actions
      * @exampleComponent limel-example-collapsible-section-with-custom-header-component
-     * @exampleComponent limel-example-collapsible-section-css-props
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
+     * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface LimelCollapsibleSection {
         /**
@@ -5433,6 +5536,10 @@ declare namespace LocalJSX {
           * Text to display in the header of the section
          */
         "header"?: string;
+        /**
+          * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
+         */
+        "invalid"?: boolean;
         /**
           * `true` if the section is expanded, `false` if collapsed.
          */
@@ -6695,6 +6802,59 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    /**
+     * This is a private component, used to render a notched outline
+     * around all input elements that can have a floating label.
+     * Inspired by Material Design's styles for input fields.
+     * We use it in various components to unify styles and avoid
+     * repeating code.
+     * :::note
+     * The component has `shadow: false`. This is to improve performance,
+     * and ensure that its internal elements are considered as internal parts
+     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+     * would be correctly associated with the input element's `id`, in the consumer component.
+     * :::
+     * @exampleComponent limel-example-notched-outline-basic
+     * @private 
+     */
+    interface LimelNotchedOutline {
+        /**
+          * Set to `true` to indicate that the input element is disabled. This applies proper visual styles, such as making the outlines and the label transparent.
+         */
+        "disabled"?: boolean;
+        /**
+          * Set to `true` when the consumer element needs to render the label above the input element, despite existence of a `value`. For example in the `text-editor` or `limel-select`, where the default layout requires a floating label.
+         */
+        "hasFloatingLabel"?: boolean;
+        /**
+          * Set to `true` when the consumer element displays a leading icon. This applies proper visual styles, such as rendering the label correctly placed beside the leading icon.
+         */
+        "hasLeadingIcon"?: boolean;
+        /**
+          * Set to `true` when the user has entered a value for the input element, shrinking the label in size, and visually rendering it above the entered value.
+         */
+        "hasValue"?: boolean;
+        /**
+          * Set to `true` to indicate that the current value of the input element is invalid. This applies proper visual styles, such as making the outlines red.
+         */
+        "invalid"?: boolean;
+        /**
+          * Label to display for the input element. :::important Note that the input element of the consumer component will be labeled by this label, using the `labelId` prop. :::
+         */
+        "label"?: string;
+        /**
+          * The `id` of the input element which should be labeled by the provided label.
+         */
+        "labelId"?: string;
+        /**
+          * Set to `true` when the input element is readonly. This applies proper visual styles, such as making the outline transparent.
+         */
+        "readonly"?: boolean;
+        /**
+          * Set to `true` when the input element is required. This applies proper visual styles, such as inclusion of an asterisk beside the label.
+         */
+        "required"?: boolean;
+    }
     /**
      * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
@@ -7773,6 +7933,7 @@ declare namespace LocalJSX {
         "limel-menu": LimelMenu;
         "limel-menu-list": LimelMenuList;
         "limel-menu-surface": LimelMenuSurface;
+        "limel-notched-outline": LimelNotchedOutline;
         "limel-picker": LimelPicker;
         "limel-popover": LimelPopover;
         "limel-popover-surface": LimelPopoverSurface;
@@ -8119,12 +8280,20 @@ declare module "@stencil/core" {
              */
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             /**
-             * @exampleComponent limel-example-collapsible-section
+             * A collapsible section can be used to group related content together
+             * and hide the group when not needed.
+             * Using this component can help to:
+             * - Save vertical space by hiding non-essential content
+             * - Improve content organization and scannability of the user interface
+             * - Reduce cognitive load by displaying only a set of relevant information at a time
+             * - Or disclose complex information, progressively to the user
+             * @exampleComponent limel-example-collapsible-section-basic
              * @exampleComponent limel-example-collapsible-section-actions
              * @exampleComponent limel-example-collapsible-section-with-custom-header-component
-             * @exampleComponent limel-example-collapsible-section-css-props
              * @exampleComponent limel-example-collapsible-section-external-control
              * @exampleComponent limel-example-collapsible-section-with-slider
+             * @exampleComponent limel-example-collapsible-section-invalid
+             * @exampleComponent limel-example-collapsible-section-css-props
              */
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
             /**
@@ -8567,6 +8736,22 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-menu-surface": LocalJSX.LimelMenuSurface & JSXBase.HTMLAttributes<HTMLLimelMenuSurfaceElement>;
+            /**
+             * This is a private component, used to render a notched outline
+             * around all input elements that can have a floating label.
+             * Inspired by Material Design's styles for input fields.
+             * We use it in various components to unify styles and avoid
+             * repeating code.
+             * :::note
+             * The component has `shadow: false`. This is to improve performance,
+             * and ensure that its internal elements are considered as internal parts
+             * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+             * would be correctly associated with the input element's `id`, in the consumer component.
+             * :::
+             * @exampleComponent limel-example-notched-outline-basic
+             * @private 
+             */
+            "limel-notched-outline": LocalJSX.LimelNotchedOutline & JSXBase.HTMLAttributes<HTMLLimelNotchedOutlineElement>;
             /**
              * @exampleComponent limel-example-picker-basic
              * @exampleComponent limel-example-picker-multiple

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.7.1",
+  "version": "38.8.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",