@limetech/lime-elements 39.27.0 → 39.28.1

package/dist/collection/components/ai-avatar/ai-avatar.js

@@ -1,10 +1,69 @@
 import { h, Host } from "@stencil/core";
 import translate from "./../../global/translations";
+const SUPPORTED_VARIANTS = new Set([
+    'detailed',
+    'minimal',
+    'solid',
+    'outlined',
+]);
+/**
+ * All colors used in the avatar SVG, grouped by purpose.
+ */
+const colors = {
+    // ----- Brand colors (each used across many gradients, exposed as CSS
+    //       custom properties so consumers can retheme the avatar with their
+    //       own palette). These are the high-impact knobs — changing any one
+    //       of them ripples through every gradient that references it.
+    // Brand props chain: explicit override → Lime brand color → hardcoded
+    // RGB triplet. The triplet is the final safety net so an exported
+    // standalone SVG (or a consumer page without Lime's `--lime-brand-color-*`
+    // defined) still renders correctly instead of falling through to `fill:
+    // black`.
+    primary: 'var(--ai-avatar-primary-color, rgb(var(--lime-brand-color-ocean-teal, 111, 205, 182)))',
+    accent: 'var(--ai-avatar-accent-color, rgb(var(--lime-brand-color-aqua, 166, 239, 255)))',
+    orbEdge: 'var(--ai-avatar-orb-edge-color, rgb(var(--lime-brand-color-sunny-orange, 254, 176, 0)))',
+    ringAccent: 'var(--ai-avatar-hover-ring-accent-color, rgb(var(--lime-brand-color-lime-green, 190, 224, 52)))',
+    // ----- Hover halo color (exposed; visible only on hover) -----
+    glowFill: 'var(--ai-avatar-hover-glow-color, rgb(var(--lime-brand-color-bubble-gum, 255, 166, 234)))',
+    // ----- The light-ball's brightest stop — the rotating bright spot
+    //       inside the orb during `thinking` mode. Exposed because the
+    //       motion of the light-ball draws the eye, and changing this tint
+    //       has clear visible impact during the thinking animation.
+    lightBall0: 'var(--ai-avatar-orb-inner-highlight-color, rgb(var(--lime-brand-color-aqua, 166, 239, 255)))',
+    // ----- Face -----
+    starsEyesMouth: 'var(--ai-avatar-stars-eyes-mouth-color, var(--limel-ai-avatar-stars-eyes-mouth-color, #FFFFFF))',
+    // ----- Internal gradient stops (not exposed; would only nudge subtle
+    //       shading, low visual return on consumer customization).
+    innerHighlight: '#00CFFF',
+    lightBall1: '#60D4EF',
+    innerDark0: '#48359C',
+    innerDark1: '#49B1C9',
+    innerLight0: '#8D80EF',
+    innerLight1: '#887CEA',
+    innerLight2: '#7A70DC',
+    innerLight3: '#635DC5',
+    innerLight4: '#4443A5',
+    innerLight5: '#2E318F',
+    shine1: '#010000',
+    shine2: '#080104',
+    shine3: '#14030A',
+    shine4: '#250613',
+    shine5: '#3B0A1F',
+    shine6: '#560F2D',
+    shine7: '#543EB4',
+    shine8: '#5E45CE',
+    shine9: '#6D53DF',
+    greyMid: '#8D8D8D',
+    greyDark: '#272727',
+    // ----- Neutrals -----
+    white: 'white',
+    black: 'black',
+};
 /**
  * This component displays an avatar, representing Lime AI assistants.
  *
  * :::warning
- * This is a private component used internally in the Lime's various applications,
+ * This is a private component used internally in Lime's various applications,
  * which is the reason for having it in Lime Elements —to ease the distribution
  * of the component across all our apps.
  *
@@ -13,17 +72,36 @@ import translate from "./../../global/translations";
  *
  * @private
  * @exampleComponent limel-example-ai-avatar-basic
- * @exampleComponent limel-example-ai-avatar-colors
- * @exampleComponent limel-example-ai-avatar-white-background
- * @exampleComponent limel-example-ai-avatar-color-props
+ * @exampleComponent limel-example-ai-avatar-variant
+ * @exampleComponent limel-example-ai-avatar-mode
+ * @exampleComponent limel-example-ai-avatar-branded
+ * @exampleComponent limel-example-ai-avatar-export
  */
 export class AiAvatar {
     constructor() {
         /**
-         * Set to `true` to trigger animations that indicate that the AI is
-         * "thinking" or processing something.
+         * @deprecated Use the `mode` property with the value `thinking` instead.
+         * This property will be removed in a future major version.
+         *
+         * Until removal, setting this to `true` is bridged to `mode="thinking"`
+         * when `mode` is at its default (`idle`); an explicit `mode` value
+         * always wins, so consumers can migrate by replacing `isThinking={true}`
+         * with `mode="thinking"` without coordination.
          */
         this.isThinking = false;
+        /**
+         * Represents the current activity of the AI agent. The avatar uses this
+         * to drive its visual state and animations. Defaults to `idle`.
+         */
+        this.mode = 'idle';
+        /**
+         * Selects the avatar's visual style. The `detailed` variant is the fully
+         * detailed orb; the `minimal` variant is a simplified design with a
+         * single gradient orb, a stroked outline, and a soft halo. Eye and
+         * mouth shapes (and all animations driving them) are shared across
+         * variants.
+         */
+        this.variant = 'minimal';
         /**
          * Defines the language for translations.
          */
@@ -32,18 +110,60 @@ export class AiAvatar {
             return translate.get(key, this.language);
         };
     }
+    componentWillLoad() {
+        if (this.isThinking) {
+            this.warnIsThinkingDeprecation();
+        }
+    }
+    onIsThinkingChange(value) {
+        if (value) {
+            this.warnIsThinkingDeprecation();
+        }
+    }
+    warnIsThinkingDeprecation() {
+        console.warn('limel-ai-avatar: the `isThinking` prop is deprecated and will be removed in a future major version. Use `mode="thinking"` instead.');
+    }
     render() {
-        return (h(Host, { key: '8b04584ecdd86d9768666efb7299c0985bf9948f', role: "img", "aria-label": this.getHostAriaLabel() }, this.renderCircle('red'), this.renderCircle('green'), this.renderCircle('blue'), this.renderCircle('orange'), h("div", { key: 'a4434ecc24403ee1bb04b82acd9a41c85da139d0', class: "core" }), h("div", { key: '788fec45e563e226d27fbf30b828dd5bc2d42db6', class: "orbitals" })));
+        // Bridge the deprecated `isThinking` prop to `mode="thinking"` during
+        // the deprecation window. Only applies when the consumer hasn't moved
+        // to setting `mode` explicitly, so it doesn't override deliberate
+        // mode values.
+        const effectiveMode = this.isThinking && this.mode === 'idle' ? 'thinking' : this.mode;
+        // `variant` is interpolated straight into the SVG class. Without a
+        // runtime check, a typo (`variant="minmal"`) produces a class that
+        // matches none of the variant-specific SCSS blocks, leaving all body
+        // groups visible at once. Validate and fall back to `'minimal'` so
+        // unsupported values can't render as a broken composite.
+        const effectiveVariant = SUPPORTED_VARIANTS.has(this.variant)
+            ? this.variant
+            : 'minimal';
+        if (effectiveVariant !== this.variant) {
+            console.warn(`limel-ai-avatar: unsupported variant "${this.variant}"; falling back to "minimal".`);
+        }
+        return (h(Host, { key: '4f295ac1477d48e2de9667e13f4323b3ffd3c572', role: "img", "aria-label": this.getHostAriaLabel(effectiveMode) }, this.renderAvatar(effectiveMode, effectiveVariant)));
     }
-    getHostAriaLabel() {
-        let thinkingText = '';
-        if (this.isThinking) {
-            thinkingText = ` (${this.getTranslation('ai-avatar.thinking')})`;
+    getHostAriaLabel(mode) {
+        const baseLabel = this.getTranslation('ai-avatar.label');
+        if (mode === 'idle') {
+            return baseLabel;
+        }
+        // `translate.get` returns the raw key when no translation exists.
+        // Catch that so screen readers never announce a literal key — and
+        // warn so a JS consumer passing an unknown mode at runtime can
+        // diagnose it.
+        const modeKey = `ai-avatar.mode.${mode}`;
+        const modeLabel = this.getTranslation(modeKey);
+        if (modeLabel === modeKey) {
+            console.warn(`limel-ai-avatar: no translation for mode "${mode}"; falling back to base label.`);
+            return baseLabel;
         }
-        return `${this.getTranslation('ai-avatar.label')}${thinkingText}`;
+        return `${baseLabel} (${modeLabel})`;
     }
-    renderCircle(className) {
-        return (h("svg", { class: className, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", role: "presentation" }, h("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "currentColor", "stroke-width": "6" })));
+    renderAvatar(mode, variant = this.variant) {
+        return (h("svg", { class: `avatar mode-${mode} variant-${variant}`, viewBox: "0 0 740 740", xmlns: "http://www.w3.org/2000/svg", role: "presentation", "aria-hidden": "true" }, h("g", { class: "ring-group", filter: "url(#aiAvatar-blurHoverOuter)" }, h("g", { class: "ring", filter: "url(#aiAvatar-blurHoverRing)", style: { mixBlendMode: 'color-dodge' } }, h("path", { d: "M369.892 67.6453C536.826 67.6453 672.139 202.948 672.139 369.892C672.139 536.837 536.816 672.139 369.892 672.139C202.969 672.139 67.6452 536.816 67.6451 369.892C67.6451 202.969 202.968 67.6453 369.892 67.6453ZM369.893 97.5906C219.507 97.5906 97.5904 219.508 97.5904 369.893C97.5905 520.279 219.507 642.195 369.893 642.195C520.279 642.195 642.195 520.298 642.195 369.893C642.195 219.489 520.288 97.5907 369.893 97.5906Z", fill: "url(#aiAvatar-hoverRing)" })), h("g", { class: "glow", transform: "scale(0.9)", filter: "url(#aiAvatar-blurHoverGlow)", style: { mixBlendMode: 'plus-lighter' } }, h("path", { d: "M521.016 108.139C665.585 191.606 715.119 376.438 631.646 521.016C548.174 665.595 363.329 715.108 218.769 631.646C74.2092 548.185 24.6774 363.329 108.139 218.769C191.601 74.2093 376.456 24.6774 521.016 108.139ZM506.937 133.894C374.486 57.4233 206.016 101.246 130.657 231.772C55.2971 362.298 101.581 530.11 234.032 606.581C366.483 683.051 534.944 639.245 610.313 508.702C685.682 378.159 639.397 210.369 506.937 133.894Z", fill: colors.glowFill }))), h("g", { class: "body variant-detailed-body" }, h("path", { class: "outer-ring", d: "M369.841 80.23C529.796 80.2302 659.452 209.876 659.452 369.841C659.452 529.806 529.786 659.452 369.841 659.453C209.896 659.453 80.2301 529.786 80.23 369.841C80.23 209.896 209.896 80.23 369.841 80.23ZM369.84 104.577C223.416 104.577 104.283 223.643 104.283 369.996C104.283 516.348 223.426 635.406 369.84 635.406L369.85 635.396C516.285 635.396 635.409 516.338 635.409 369.986C635.409 302.069 609.751 240.032 567.619 193.043C566.899 192.227 566.179 191.429 565.45 190.642C565.09 190.253 564.73 189.875 564.371 189.486C550.073 174.118 533.977 160.421 516.412 148.756C474.376 120.849 423.975 104.577 369.84 104.577Z", fill: "url(#aiAvatar-bigOutline)" }), h("g", { class: "body-background" }, h("path", { class: "dark-ball", d: "M370.114 585.766C489.215 585.766 585.766 489.215 585.766 370.114C585.766 251.012 489.215 154.462 370.114 154.462C251.013 154.462 154.462 251.012 154.462 370.114C154.462 489.215 251.013 585.766 370.114 585.766Z", fill: "url(#aiAvatar-darkBall)" }), h("mask", { id: "aiAvatar-bgMask", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "182", y: "182", width: "376", height: "376" }, h("path", { d: "M370.114 557.432C473.567 557.432 557.432 473.567 557.432 370.114C557.432 266.661 473.567 182.795 370.114 182.795C266.661 182.795 182.796 266.661 182.796 370.114C182.796 473.567 266.661 557.432 370.114 557.432Z", fill: colors.black })), h("g", { mask: "url(#aiAvatar-bgMask)" }, h("path", { class: "light-ball", d: "M409.467 585.766C528.568 585.766 625.119 489.215 625.119 370.114C625.119 251.012 528.568 154.462 409.467 154.462C290.365 154.462 193.814 251.012 193.814 370.114C193.814 489.215 290.365 585.766 409.467 585.766Z", fill: "url(#aiAvatar-lightBall)" }))), h("g", { class: "inside" }, h("path", { opacity: "0.8", d: "M552.097 451.055C552.097 531.302 470.7 596.36 370.295 596.36C269.891 596.36 188.486 531.302 188.486 451.055C188.486 370.807 262.461 287.679 362.866 287.679C463.27 287.679 552.089 370.799 552.089 451.055H552.097Z", fill: "url(#aiAvatar-innerDark)", style: { mixBlendMode: 'overlay' } }), h("path", { opacity: "0.3", d: "M585.191 370.295C585.191 488.794 488.793 585.192 370.295 585.192C251.796 585.192 155.39 488.786 155.39 370.295C155.39 251.805 251.804 155.391 370.295 155.391C414.102 155.391 454.887 168.566 488.904 191.162C503.118 200.607 516.143 211.697 527.713 224.14C528.004 224.455 528.295 224.762 528.587 225.076C529.177 225.714 529.759 226.359 530.342 227.02C564.437 265.066 585.199 315.296 585.199 370.287L585.191 370.295Z", fill: "url(#aiAvatar-innerLight)", style: { mixBlendMode: 'screen' } })), h("g", { class: "shape" }, h("path", { opacity: "0.5", d: "M370.295 144.23C245.445 144.23 144.23 245.445 144.23 370.295C144.23 495.145 245.445 596.359 370.295 596.359C495.145 596.359 596.36 495.16 596.36 370.295C596.36 245.429 495.153 144.23 370.295 144.23ZM370.295 585.191C251.812 585.191 155.398 488.793 155.398 370.295C155.398 251.796 251.804 155.39 370.295 155.39C414.102 155.39 454.887 168.566 488.904 191.162C503.118 200.606 516.144 211.696 527.713 224.139C528.005 224.454 528.296 224.761 528.587 225.076C529.177 225.713 529.76 226.359 530.342 227.02C564.437 265.066 585.2 315.296 585.2 370.287C585.2 488.785 488.801 585.183 370.303 585.183L370.295 585.191Z", fill: "url(#aiAvatar-outline)" }), h("g", { opacity: "0.6", style: { mixBlendMode: 'color-burn' } }, h("path", { d: "M370.295 585.192C251.813 585.192 155.399 488.794 155.399 370.295C155.399 251.797 251.805 155.391 370.295 155.391C414.103 155.391 454.888 168.566 488.904 191.162C503.118 200.607 516.144 211.697 527.714 224.14C528.005 224.455 528.296 224.762 528.587 225.076C529.178 225.714 529.76 226.359 530.342 227.02C564.438 265.066 585.2 315.296 585.2 370.287C585.2 488.786 488.802 585.184 370.303 585.184L370.295 585.192Z", fill: "url(#aiAvatar-darkerFace)" })), h("path", { opacity: "0.8", d: "M585.192 370.295C585.192 488.794 488.793 585.192 370.295 585.192C251.796 585.192 155.39 488.786 155.39 370.295C155.39 251.805 251.804 155.391 370.295 155.391C414.102 155.391 454.887 168.566 488.904 191.162H488.88C488.88 191.162 354.664 144.774 308.37 185.858C283.538 207.895 314.831 225.848 338.805 251.797C362.873 277.848 338.805 287.678 280.909 310.684C233.788 329.408 219.968 424.468 275.793 476.571C331.611 528.666 508.753 502.614 525.124 457.957C541.502 413.3 412.937 465.646 422.413 435.628C435.809 393.206 525.871 365.659 537.779 322.505C550.821 275.212 542.667 241.715 530.334 227.02C564.429 265.066 585.192 315.296 585.192 370.287V370.295Z", fill: "url(#aiAvatar-shine)", style: { mixBlendMode: 'screen' } }), h("g", { opacity: "0.5", style: { mixBlendMode: 'color-dodge' } }, h("path", { d: "M585.192 370.295C585.192 488.794 488.793 585.192 370.295 585.192C251.796 585.192 155.39 488.786 155.39 370.295C155.39 251.805 251.804 155.391 370.295 155.391C414.102 155.391 454.887 168.566 488.904 191.162H488.88C488.88 191.162 354.664 144.774 308.37 185.858C283.538 207.895 314.831 225.848 338.805 251.797C362.873 277.848 338.805 287.678 280.909 310.684C233.788 329.408 219.968 424.468 275.793 476.571C331.611 528.666 508.753 502.614 525.124 457.957C541.502 413.3 412.937 465.646 422.413 435.628C435.809 393.206 525.871 365.659 537.779 322.505C550.821 275.212 542.667 241.715 530.334 227.02C564.429 265.066 585.192 315.296 585.192 370.287V370.295Z", fill: "url(#aiAvatar-shine)", style: { mixBlendMode: 'screen' } }))), h("g", { class: "reflections" }, h("path", { opacity: "0.3", d: "M565.106 485.07C525.777 551.679 453.25 596.352 370.295 596.352C245.445 596.352 144.23 495.153 144.23 370.295C144.23 311.038 167.039 257.078 204.361 216.765C184.503 250.411 173.099 289.654 173.099 331.556C173.099 456.406 274.298 557.621 399.164 557.621C464.749 557.621 523.81 529.688 565.106 485.078V485.07Z", fill: "url(#aiAvatar-reflectLighten)" }), h("path", { opacity: "0.3", d: "M524.935 519.394C485.882 560.069 430.93 585.396 370.067 585.396C251.506 585.396 155.399 489.29 155.399 370.72C155.399 309.858 180.726 254.921 221.417 215.86C184.228 254.457 161.349 306.961 161.349 364.778C161.349 483.339 257.464 579.446 376.017 579.446C433.85 579.446 486.338 556.582 524.935 519.379V519.394Z", fill: "url(#aiAvatar-reflectScreen)", style: { mixBlendMode: 'screen' } }), h("g", { opacity: "0.4", filter: "url(#aiAvatar-blurInner)", style: { mixBlendMode: 'plus-lighter' } }, h("path", { d: "M525.163 502.101C488.232 540.565 436.267 564.515 378.713 564.515C266.595 564.515 175.712 473.632 175.712 361.508C175.712 303.953 199.663 252.003 238.142 215.065C202.975 251.564 181.339 301.214 181.339 355.888C181.339 468.006 272.229 558.889 384.339 558.889C439.029 558.889 488.664 537.268 525.163 502.086V502.101Z", fill: colors.innerHighlight, style: { mixBlendMode: 'screen' } })), h("path", { opacity: "0.8", d: "M493.579 194.247C426.262 150.078 320.53 137.312 251.316 208.202C183.472 277.691 254.11 331.005 349.564 324.678C429.859 319.357 464.922 355.192 490.974 387.941C517.025 420.69 572.284 424.224 578.053 363.377C583.295 308.047 547.736 229.775 493.579 194.24V194.247Z", fill: "url(#aiAvatar-glowBig)", style: { mixBlendMode: 'screen' } }), h("path", { opacity: "0.5", d: "M526.51 332.514C560.621 298.403 560.621 243.098 526.51 208.987C492.399 174.876 437.094 174.876 402.983 208.987C368.872 243.098 368.872 298.403 402.983 332.514C437.094 366.625 492.399 366.626 526.51 332.514Z", fill: "url(#aiAvatar-glowSphere)", style: { mixBlendMode: 'screen' } }), h("g", { opacity: "0.5", filter: "url(#aiAvatar-blurHighlight)", style: { mixBlendMode: 'plus-lighter' } }, h("path", { d: "M530.18 271.735C543.907 254.294 532.912 222.745 505.623 201.269C478.335 179.793 445.086 176.522 431.359 193.963C417.633 211.404 428.628 242.953 455.916 264.429C483.205 285.905 516.454 289.176 530.18 271.735Z", fill: "url(#aiAvatar-glowHighlight)", style: { mixBlendMode: 'screen' } })))), h("g", { class: "body variant-minimal-body", transform: "translate(46 46) scale(0.92)" }, h("path", { class: "glow-minimal", d: "M352.301 645.893C514.444 645.893 645.891 514.446 645.891 352.303C645.891 190.16 514.444 58.7127 352.301 58.7127C190.158 58.7127 58.7111 190.16 58.7111 352.303C58.7111 514.446 190.158 645.893 352.301 645.893Z", fill: "url(#aiAvatar-minimal)" }), h("path", { class: "dark-ball", d: "M352.301 587.182C482.01 587.182 587.18 482.013 587.18 352.304C587.18 222.595 482.01 117.426 352.301 117.426C222.593 117.426 117.424 222.595 117.424 352.304C117.424 482.013 222.593 587.182 352.301 587.182Z", fill: "url(#aiAvatar-minimal)" }), h("path", { class: "light-ball", d: "M421.952 396.298C484.908 396.298 535.953 345.253 535.953 282.298C535.953 219.343 484.908 168.298 421.952 168.298C358.997 168.298 307.953 219.343 307.953 282.298C307.953 345.253 358.997 396.298 421.952 396.298Z", fill: colors.white }), h("path", { class: "outer-ring", d: "M351.971 76.01C504.558 76.0101 628.278 199.73 628.278 352.317C628.278 504.903 504.558 628.623 351.971 628.623C199.384 628.623 75.6645 504.903 75.6644 352.317C75.6644 199.73 199.384 76.01 351.971 76.01Z", stroke: "url(#aiAvatar-minimal)", "stroke-width": "31", fill: "none" })), h("g", { class: "body variant-solid-body", transform: "translate(46 46) scale(0.92)" }, h("path", { class: "dark-ball", d: "M352.301 587.182C482.01 587.182 587.18 482.013 587.18 352.304C587.18 222.595 482.01 117.426 352.301 117.426C222.593 117.426 117.424 222.595 117.424 352.304C117.424 482.013 222.593 587.182 352.301 587.182Z" }), h("path", { class: "outer-ring", d: "M351.971 76.01C504.558 76.0101 628.278 199.73 628.278 352.317C628.278 504.903 504.558 628.623 351.971 628.623C199.384 628.623 75.6645 504.903 75.6644 352.317C75.6644 199.73 199.384 76.01 351.971 76.01Z" })), h("g", { class: "face" }, h("path", { class: "mouth", d: "M379.952 470.07C358.436 470.07 340.993 457.87 340.993 449.467C340.993 446.501 343.413 444.097 346.399 444.097C346.399 444.097 359.095 444.097 379.952 444.097C400.809 444.097 413.506 444.097 413.506 444.097C416.491 444.097 418.911 446.501 418.911 449.467C418.911 456.69 401.469 470.07 379.952 470.07Z", fill: colors.starsEyesMouth }), h("path", { class: "eye eye-left", d: "M302.23 426.8C301.442 429.87 295.735 429.945 294.881 426.894C290.963 412.947 283.999 393.474 273.633 383.121C263.751 373.251 245.844 366.751 232.31 362.992C229.208 362.13 229.274 355.991 232.395 355.189C245.919 351.721 263.765 345.568 273.628 335.717C283.985 325.373 290.944 305.558 294.862 291.311C295.707 288.242 301.46 288.316 302.235 291.4C305.81 305.638 312.328 325.392 322.666 335.712C332.516 345.549 350.718 351.698 364.576 355.171C367.715 355.958 367.781 362.158 364.66 363.007C350.794 366.765 332.539 373.261 322.666 383.121C312.324 393.451 305.801 412.862 302.225 426.8H302.23Z", fill: colors.starsEyesMouth }), h("path", { class: "eye eye-right", d: "M302.23 426.8C301.442 429.87 295.735 429.945 294.881 426.894C290.963 412.947 283.999 393.474 273.633 383.121C263.751 373.251 245.844 366.751 232.31 362.992C229.208 362.13 229.274 355.991 232.395 355.189C245.919 351.721 263.765 345.568 273.628 335.717C283.985 325.373 290.944 305.558 294.862 291.311C295.707 288.242 301.46 288.316 302.235 291.4C305.81 305.638 312.328 325.392 322.666 335.712C332.516 345.549 350.718 351.698 364.576 355.171C367.715 355.958 367.781 362.158 364.66 363.007C350.794 366.765 332.539 373.261 322.666 383.121C312.324 393.451 305.801 412.862 302.225 426.8H302.23Z", fill: colors.starsEyesMouth })), h("g", { class: "typing-ellipsis" }, h("circle", { class: "circle", cx: "340", cy: "620", r: "10" }), h("circle", { class: "circle", cx: "370", cy: "620", r: "10" }), h("circle", { class: "circle", cx: "400", cy: "620", r: "10" })), this.renderDefs()));
+    }
+    renderDefs() {
+        return (h("defs", null, h("filter", { id: "aiAvatar-blurHoverOuter", x: "17.7349", y: "17.7349", width: "704.322", height: "704.32", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feGaussianBlur", { stdDeviation: "24.9308", result: "effect1_foregroundBlur" })), h("filter", { id: "aiAvatar-blurHoverRing", x: "33.6395", y: "33.6397", width: "672.505", height: "672.505", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feGaussianBlur", { stdDeviation: "17.0028", result: "effect1_foregroundBlur" })), h("filter", { id: "aiAvatar-blurHoverGlow", x: "-33.2236", y: "-33.2236", width: "806.239", height: "806.237", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feGaussianBlur", { stdDeviation: "50.41", result: "effect1_foregroundBlur" })), h("filter", { id: "aiAvatar-blurInner", x: "152.712", y: "192.065", width: "395.451", height: "395.451", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feGaussianBlur", { stdDeviation: "11.5", result: "effect1_foregroundBlur" })), h("filter", { id: "aiAvatar-blurHighlight", x: "361.049", y: "118.353", width: "239.442", height: "228.991", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feGaussianBlur", { stdDeviation: "32.2", result: "effect1_foregroundBlur" })), h("linearGradient", { id: "aiAvatar-hoverRing", x1: "216.322", y1: "643.37", x2: "512.34", y2: "116.198", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "0.22", "stop-color": colors.primary }), h("stop", { offset: "0.71", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.accent })), h("linearGradient", { id: "aiAvatar-bigOutline", x1: "222.691", y1: "631.886", x2: "506.334", y2: "126.753", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "0.403846", "stop-color": colors.primary }), h("stop", { offset: "0.774038", "stop-color": colors.ringAccent }), h("stop", { offset: "1", "stop-color": colors.accent })), h("radialGradient", { id: "aiAvatar-darkBall", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(370.114 370.114) scale(215.652 215.652)" }, h("stop", { offset: "0.841346", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.orbEdge })), h("radialGradient", { id: "aiAvatar-lightBall", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(409.467 370.114) scale(215.652 215.652)" }, h("stop", { "stop-color": colors.lightBall0 }), h("stop", { offset: "0.46", "stop-color": colors.lightBall1 }), h("stop", { offset: "0.841346", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.orbEdge, "stop-opacity": "0" })), h("linearGradient", { id: "aiAvatar-innerDark", x1: "374.569", y1: "426.113", x2: "359.749", y2: "510.076", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.innerDark0 }), h("stop", { offset: "1", "stop-color": colors.innerDark1 })), h("radialGradient", { id: "aiAvatar-innerLight", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(370.295 370.295) scale(214.897 214.896)" }, h("stop", { "stop-color": colors.innerLight0 }), h("stop", { offset: "0.19", "stop-color": colors.innerLight1 }), h("stop", { offset: "0.4", "stop-color": colors.innerLight2 }), h("stop", { offset: "0.63", "stop-color": colors.innerLight3 }), h("stop", { offset: "0.86", "stop-color": colors.innerLight4 }), h("stop", { offset: "1", "stop-color": colors.innerLight5 })), h("linearGradient", { id: "aiAvatar-outline", x1: "255.433", y1: "574.841", x2: "476.838", y2: "180.544", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "0.22", "stop-color": colors.primary }), h("stop", { offset: "0.71", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.accent })), h("linearGradient", { id: "aiAvatar-darkerFace", x1: "255.433", y1: "574.842", x2: "476.838", y2: "180.545", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "0.22", "stop-color": colors.primary }), h("stop", { offset: "0.71", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.accent })), h("radialGradient", { id: "aiAvatar-shine", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(370.295 366.942) scale(214.897 214.896)" }, h("stop", { "stop-color": colors.black }), h("stop", { offset: "0.38", "stop-color": colors.shine1 }), h("stop", { offset: "0.52", "stop-color": colors.shine2 }), h("stop", { offset: "0.61", "stop-color": colors.shine3 }), h("stop", { offset: "0.69", "stop-color": colors.shine4 }), h("stop", { offset: "0.76", "stop-color": colors.shine5 }), h("stop", { offset: "0.82", "stop-color": colors.shine6 }), h("stop", { offset: "0.87", "stop-color": colors.shine7 }), h("stop", { offset: "0.92", "stop-color": colors.shine8 }), h("stop", { offset: "0.97", "stop-color": colors.shine9 }), h("stop", { offset: "1", "stop-color": colors.primary })), h("linearGradient", { id: "aiAvatar-reflectLighten", x1: "217.788", y1: "524.037", x2: "367.383", y2: "373.325", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "1", "stop-color": colors.primary })), h("linearGradient", { id: "aiAvatar-reflectScreen", x1: "155.391", y1: "400.636", x2: "524.935", y2: "400.636", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "0.42", "stop-color": colors.accent }), h("stop", { offset: "1", "stop-color": colors.white })), h("linearGradient", { id: "aiAvatar-glowBig", x1: "447.206", y1: "194.885", x2: "364.841", y2: "404.54", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": colors.accent }), h("stop", { offset: "1", "stop-color": colors.black })), h("radialGradient", { id: "aiAvatar-glowSphere", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(464.749 270.756) scale(87.347 87.3469)" }, h("stop", { "stop-color": colors.white }), h("stop", { offset: "0.42", "stop-color": colors.greyMid }), h("stop", { offset: "0.82", "stop-color": colors.greyDark }), h("stop", { offset: "1", "stop-color": colors.black })), h("radialGradient", { id: "aiAvatar-glowHighlight", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "matrix(52.5126 5.16603 17.3645 49.827 480.772 232.852)" }, h("stop", { "stop-color": colors.white }), h("stop", { offset: "0.42", "stop-color": colors.greyMid }), h("stop", { offset: "0.82", "stop-color": colors.greyDark }), h("stop", { offset: "1", "stop-color": colors.black })), h("linearGradient", { id: "aiAvatar-minimal", x1: "206.205", y1: "172.039", x2: "514.924", y2: "520.821", gradientUnits: "userSpaceOnUse" }, h("stop", { offset: "0", "stop-color": colors.accent }), h("stop", { offset: "0.45", "stop-color": colors.primary }), h("stop", { offset: "0.55", "stop-color": colors.primary }), h("stop", { offset: "1", "stop-color": colors.orbEdge }))));
     }
     static get is() { return "limel-ai-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -70,8 +190,11 @@ export class AiAvatar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set to `true` to trigger animations that indicate that the AI is\n\"thinking\" or processing something."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the `mode` property with the value `thinking` instead.\nThis property will be removed in a future major version.\n\nUntil removal, setting this to `true` is bridged to `mode=\"thinking\"`\nwhen `mode` is at its default (`idle`); an explicit `mode` value\nalways wins, so consumers can migrate by replacing `isThinking={true}`\nwith `mode=\"thinking\"` without coordination."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -79,6 +202,60 @@ export class AiAvatar {
                 "attribute": "is-thinking",
                 "defaultValue": "false"
             },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AiAvatarMode",
+                    "resolved": "\"active\" | \"idle\" | \"thinking\" | \"typing\" | \"waiting\" | \"working\"",
+                    "references": {
+                        "AiAvatarMode": {
+                            "location": "import",
+                            "path": "./ai-avatar.types",
+                            "id": "src/components/ai-avatar/ai-avatar.types.ts::AiAvatarMode",
+                            "referenceLocation": "AiAvatarMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents the current activity of the AI agent. The avatar uses this\nto drive its visual state and animations. Defaults to `idle`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'idle'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AiAvatarVariant",
+                    "resolved": "\"detailed\" | \"minimal\" | \"outlined\" | \"solid\"",
+                    "references": {
+                        "AiAvatarVariant": {
+                            "location": "import",
+                            "path": "./ai-avatar.types",
+                            "id": "src/components/ai-avatar/ai-avatar.types.ts::AiAvatarVariant",
+                            "referenceLocation": "AiAvatarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selects the avatar's visual style. The `detailed` variant is the fully\ndetailed orb; the `minimal` variant is a simplified design with a\nsingle gradient orb, a stroked outline, and a soft halo. Eye and\nmouth shapes (and all animations driving them) are shared across\nvariants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'minimal'"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -108,4 +285,10 @@ export class AiAvatar {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "isThinking",
+                "methodName": "onIsThinkingChange"
+            }];
+    }
 }

package/dist/collection/components/ai-avatar/ai-avatar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/badge/badge.js

@@ -10,9 +10,9 @@ import { abbreviate } from "./format";
  */
 export class Badge {
     render() {
-        return (h(Host, { key: '995d46502d8ea017877e6308ea9dde691706cf9a', title: this.labelIsLarge() ? this.label : '', class: {
+        return (h(Host, { key: '7f1adcb2e0c107b5051edf494440bb6f9de386ed', title: this.labelIsLarge() ? this.label : '', class: {
                 'has-large-label': this.labelIsLarge(),
-            } }, h("span", { key: 'dc6f429f03e8768b2af2fb254bef0715e9fce839' }, this.renderLabel())));
+            } }, h("span", { key: 'df4660640af1bbb733017b4ba1b55f83554ced38' }, this.renderLabel())));
     }
     renderLabel() {
         if (typeof this.label === 'number') {

package/dist/collection/components/banner/banner.js

@@ -20,7 +20,7 @@ export class Banner {
         this.isOpen = false;
     }
     render() {
-        return (h("div", { key: '7aa9f02c71a64eebf5afcbff9ef819addcd44217', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: 'c381d72fd3cec7bb82a244a2a38ba410870cfd9e', class: "lime-banner__surface" }, h("div", { key: '307b2422ac6391bb1a2afc4764c65211567ad935', class: "lime-banner__content" }, h("div", { key: '5f072a6979f5065d11472ae14cf1ad3171b0375e', class: "icon-message" }, this.renderIcon(), h("div", { key: '204b58d8a3d3a201aee68e8e5395bd8fa583a42e' }, this.message)), h("div", { key: '2637122052a4b16ed79b0cd3ac53841fea95ee64', class: "lime-banner__actions" }, h("slot", { key: '5950d12303938141671578dff146caf2434b3614', name: "buttons" }))))));
+        return (h("div", { key: '12c3f872fb9236446d170c5ce126e691c2b485a9', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: '663cbe2e434376a36e3f39f8e5e7e22c03d3ab9f', class: "lime-banner__surface" }, h("div", { key: 'b9906b471bae7fa75ba3c4fd5756684a47957b59', class: "lime-banner__content" }, h("div", { key: '314b880eded739707ef7ce7f4a5cfff6dee51b17', class: "icon-message" }, this.renderIcon(), h("div", { key: 'ae51d13af3768d9347c5bcfa41a9cc05651f2eae' }, this.message)), h("div", { key: '268e5b1c02a83db8d7721b21c3eaaf399b68598b', class: "lime-banner__actions" }, h("slot", { key: 'a56bc343e0ddb83d1bfb238e9ca9d431de7c5da0', name: "buttons" }))))));
     }
     renderIcon() {
         if (!this.icon) {

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -90,7 +90,7 @@ export class Breadcrumbs {
         };
     }
     render() {
-        return (h("ol", { key: 'f50410ba0661038c303f8fbadb9147f858e70647', role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
+        return (h("ol", { key: '8d25beefb4884a5ca5f20685d93f26926811ddc3', role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
     }
     componentWillLoad() {
         makeEnterClickable(this.host);

package/dist/collection/components/button/button.js

@@ -66,12 +66,12 @@ export class Button {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '0c409d801aa06800490755411975a2c47fe81331', onClick: this.filterClickWhenDisabled }, h("button", { key: 'd6f001cc42e8ffcf0986896e546a4f9349415160', class: {
+        return (h(Host, { key: 'be6719c7163fb832a762238007508a6eafc6a07d', onClick: this.filterClickWhenDisabled }, h("button", { key: '063a30533b1c01800aba6c39273d928d148180fe', class: {
                 loading: this.loading,
                 'just-loaded': this.justLoaded && !this.loadingFailed,
                 'just-failed': this.justLoaded && this.loadingFailed,
                 outlined: this.outlined,
-            }, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: '1a43254ec41997b2218ae39050605402685a66ed', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
+            }, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: '57a6cba8077070a441eac95ce92c1d5101747485', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
     }
     loadingWatcher(newValue, oldValue) {
         const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);

package/dist/collection/components/button-group/button-group.js

@@ -61,7 +61,7 @@ export class ButtonGroup {
         this.setSelectedButton();
     }
     render() {
-        return (h(Host, { key: '2295d3bf146ae9d3aa44c4a4c3281ce1b72d8a63', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (h(Host, { key: 'f9056c2bca25ea9fb9ab4654de5877e6f01265b0', role: "radiogroup" }, this.value.map(this.renderButton)));
     }
     renderButton(button) {
         // Prefix with 'b' because html IDs cannot start with a digit,

package/dist/collection/components/callout/callout.js

@@ -42,7 +42,7 @@ export class Callout {
         this.language = 'en';
     }
     render() {
-        return (h(Host, { key: '9af3d9dc95f93714f7f334695d64f7f02b8b52e2' }, h("div", { key: '014e90ead94b3c88f33dcb40de1a56d6b85c4c9b', class: "side", role: "presentation" }, h("limel-icon", { key: '042773fb922877be2b6ef77c276a4b24c48517e2', name: getIcon(this.icon, this.type) })), h("div", { key: 'b211a6f7eb0d2680ef96adbbb5b4646c44e8d147', class: "main" }, h("h1", { key: '7e4f4d05a54cc719b51144a21b28cfc1b1024a52', class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", { key: 'd1f333b26662b75cd403e3048229e6926e4279ed' }))));
+        return (h(Host, { key: '5c8de23bc6a5feb2ec1ef2b49efb3989ccf3e589' }, h("div", { key: '358c89688ae542c3ae2c921ae5ad2cd186c8edb3', class: "side", role: "presentation" }, h("limel-icon", { key: 'a826f770da20612ecf4a339c010b7e47b388e15e', name: getIcon(this.icon, this.type) })), h("div", { key: 'c4856980a6e5ba4a5eadd995edf295e16032cb6c', class: "main" }, h("h1", { key: '87c1ff3a6910f6e0cc5790a739804ecb053853d7', class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", { key: '1e86c6de27bc14aecab7bd6ba2e7ba7fadceddc0' }))));
     }
     static get is() { return "limel-callout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card.js

@@ -115,7 +115,7 @@ export class Card {
         this.setMarkdownElement(this.markdownElement);
     }
     render() {
-        return (h(Host, { key: 'a60b363b72cba953f51716c4f7d31d9e40b0e442', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, h("section", { key: '88b34aaf325184ee1fd89e0b940652a8036f0b46', tabindex: this.clickable ? 0 : undefined, role: this.clickable ? 'button' : undefined, "aria-pressed": this.clickable ? String(this.selected) : undefined, onKeyDown: this.clickable ? this.handleKeyDown : undefined }, this.renderImage(), h("div", { key: '229fe4c0a4ed0f93ff4687c787655b4b96d3a424', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && h("limel-3d-hover-effect-glow", { key: 'd9ca3097a18c0c7af6cb6bee0afb1b23df23332a' }))));
+        return (h(Host, { key: 'bf776f0aa74e1269afe83c28c4ccfc534fed94a6', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, h("section", { key: '7bf9a7167fc42992c0395c3e5b200240c868510e', tabindex: this.clickable ? 0 : undefined, role: this.clickable ? 'button' : undefined, "aria-pressed": this.clickable ? String(this.selected) : undefined, onKeyDown: this.clickable ? this.handleKeyDown : undefined }, this.renderImage(), h("div", { key: 'dca5962ab2bc05f27aecf411a5ced7c844bfd73d', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && h("limel-3d-hover-effect-glow", { key: '8d5541186963b436fac10d29d099ea2315300cac' }))));
     }
     renderImage() {
         var _a;

package/dist/collection/components/checkbox/checkbox.js

@@ -131,7 +131,7 @@ export class Checkbox {
         this.destroyMDCInstances();
     }
     render() {
-        return (h(CheckboxTemplate, { key: '2a6a0bbfb8b740dccf629adda516b83fbfcfc23c', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
+        return (h(CheckboxTemplate, { key: 'fe1809d29d34d1bcd3442a6b6633116488d0d3b0', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
     }
     static get is() { return "limel-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js

@@ -175,7 +175,7 @@ export class Chip {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '32f0df7f6665bd8b7ae90c423e1052b60a6f3823', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
+        return (h(Host, { key: '33322062803d37bd242ceb4e1f8ea99e66aee76e', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
     }
     renderPicture() {
         var _a, _b;

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

@@ -291,7 +291,7 @@ export class ChipSet {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: '84351ccfcc8c77de633f3b340315a4bc308edeab' }, h("limel-notched-outline", { key: 'de552ae8030ecb7774cdeb55bbb908fa2b1aa4f4', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'd4f30ae13ece7ae8e7d5b3249dbbc42585e4de34', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: '12f201f6cc74321894a330a48a9c59c35e286ccd' }, h("limel-notched-outline", { key: 'e0ebae33c750184dfb14c6c5bfe68d32a521c4b0', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: '7c26f8e664cb1018b88aa8289a9979d405e78e42', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {

package/dist/collection/components/circular-progress/circular-progress.js

@@ -60,7 +60,7 @@ export class CircularProgress {
         };
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
-        return (h("div", { key: 'b2de8450baa7722c2a362a41ea97de6b694bf6ba', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'e3fdb555dd58a1a18227659761e9ee9171050b79', class: "value" }, abbreviate(value), h("span", { key: 'a0d25b4e71beaf4993bb78e96eb2094020b5de52', class: "suffix" }, this.suffix))));
+        return (h("div", { key: '9a3aa40f5e932abcdf6b16ff2f443435ad707f57', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'd910dc9e68ded861880805b19a688be43fed8387', class: "value" }, abbreviate(value), h("span", { key: '502c1dc1a2b84576433fd9ac5f25428a1682ea54', class: "suffix" }, this.suffix))));
     }
     static get is() { return "limel-circular-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/code-diff/code-diff.js

@@ -115,7 +115,7 @@ export class CodeDiff {
         // Capture total matches after rendering completes
         this.totalSearchMatches = this.searchMatchCounter;
         const lineNumberWidth = this.computeLineNumberWidth();
-        return (h(Host, { key: '8122ede0d323b9021dae44cd5f65703d03083617', style: { '--limel-line-number-min-width': lineNumberWidth } }, this.renderHeader(), this.renderScreenReaderSummary(), this.searchVisible && this.renderSearchBar(), h("div", { key: 'fefe6e4898cbc82b6eb87f7dff7af71a14c7c91e', class: "diff-body", role: "table", "aria-label": this.getTranslation('code-diff.table-label'), tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event) }, diffContent), h("div", { key: '2af1c7b29f2060a58af13d67fb174cb4de085efb', class: "screen-reader-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveAnnouncement)));
+        return (h(Host, { key: 'e8702728849ac6f988d7d366244b51c141a733a9', style: { '--limel-line-number-min-width': lineNumberWidth } }, this.renderHeader(), this.renderScreenReaderSummary(), this.searchVisible && this.renderSearchBar(), h("div", { key: '4c8c95c8d48f43bc21ba6d2ea1808aefc4ed4c57', class: "diff-body", role: "table", "aria-label": this.getTranslation('code-diff.table-label'), tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event) }, diffContent), h("div", { key: '613bb6194ffa692175ccc105a9c404025ed32851', class: "screen-reader-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveAnnouncement)));
     }
     watchInputs() {
         this.recomputeDiff();

package/dist/collection/components/code-editor/code-editor.js

@@ -250,7 +250,7 @@ export class CodeEditor {
             'is-dark-mode': this.isDarkMode(),
             'is-light-mode': !this.isDarkMode(),
         };
-        return (h(Host, { key: '648df79d8ea88a3f87028743197214b45f3708af' }, this.renderCopyButton(), h("limel-notched-outline", { key: '8ec590da7d7cfb0c313ae61ecf517f36e978a756', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: '3fd86155267f590d9578ed673d56e1e2fe6ee7ce', slot: "content", class: classList })), this.renderHelperLine()));
+        return (h(Host, { key: '2df7ccaf43abecad22620a92768eed005ced5741' }, this.renderCopyButton(), h("limel-notched-outline", { key: '6a2617ca0e1425e8f0db059644f8598ecc046fc0', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: 'b5b37607831941a45e25d21cda2e3494e6529eac', slot: "content", class: classList })), this.renderHelperLine()));
     }
     forceRedraw() {
         // eslint-disable-next-line sonarjs/pseudo-random

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -111,7 +111,7 @@ export class CollapsibleSection {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: '0ecf7d54f66065288472a96f4d3da5949219188a', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'b9ece52c89f5969a25a858d9bdf163a9e6de75d7' }, h("button", { key: '2a295e3b926627a8657362d4a2928752e758fd96', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '3b9d78c189b062264b26d8ca11ae2f0b599cb708', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: '0fff2003ad63654e117a567d350f6909062a88d4', class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: 'd00ac66e669c70f5b877fc1ed657d35f7f828107' }))));
+        return (h("section", { key: '658655acbb6ed39081dbb43c0fb3f20f0b7b1847', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'b149315553c5137fbd806be21f85c40f17ea2bf2' }, h("button", { key: '56df786af25a14ebd33e9dd94178f92915ed58a0', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '0f1bef19ffd7ef5b541afaa9dbab340e4124e5d3', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'cd7c3a87a8e4c20ad9d7288608e32877fb509b98', class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '878daf56be6afbefb1c5f8c54ba4815e6ae9b012' }))));
     }
     renderHeaderSlot() {
         return h("slot", { name: "header" });

package/dist/collection/components/color-picker/color-picker-palette.js

@@ -39,10 +39,10 @@ export class Palette {
     render() {
         const background = this.value ? { '--background': this.value } : {};
         return [
-            h("div", { key: '184f8b9b74ebeb5611aa28ff3b14dbb225118af2', class: "color-picker-palette", style: {
+            h("div", { key: '33c07aa0306951f8151e167bc43f7dc4e3f5a1f1', class: "color-picker-palette", style: {
                     '--color-picker-column-count': `${this.getColumnCount()}`,
                 } }, this.renderSwatches()),
-            h("div", { key: '27b19d8906e5f28c86c27476ebe0287b6043eb66', class: "chosen-color-name" }, h("limel-input-field", { key: 'd055b72d5570bcb085b728eb0cf4698b80a44643', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '051cc6a16e9659aabb01f4b6b9f0b30036d440b4', class: "chosen-color-preview", style: background })),
+            h("div", { key: 'e2a40e39cc00a8e2c06f74827f7a117444288dc3', class: "chosen-color-name" }, h("limel-input-field", { key: 'e5aff06c03c289531de96d89269d6fe209ab2d98', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: 'bfef89d250d75a84ed136e0f8c9a7aa38fd3bbb0', class: "chosen-color-preview", style: background })),
         ];
     }
     getPalette() {

package/dist/collection/components/color-picker/color-picker.js

@@ -86,7 +86,7 @@ export class ColorPicker {
         }
     }
     render() {
-        return (h(Host, { key: '33ce47843041f982dc448a4f954a434418d376ba' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '74e6e705f7633d4a0ebba49352c24592209421d5', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
+        return (h(Host, { key: '76b9357ed363f32ecb23d73382ed12ed4895221d' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '625f7767c43aa45c066b398e89d142b43b279beb', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
     }
     static get is() { return "limel-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -96,7 +96,7 @@ export class DatePickerCalendar {
         });
     }
     render() {
-        return (h("div", { key: '29b3541d525a21143cec1c2d296bb7ae12e10043', class: "container", ref: (el) => (this.container = el), style: {
+        return (h("div", { key: '41bbb26bc5120bde237df9ae3a17d633e597b918', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translate.get('date-picker.today')}"`,
             } }));
     }

package/dist/collection/components/dialog/dialog.js

@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: '748566bd65db98ee75a743a7deedc7d0c9f80a90', class: {
+        return (h("div", { key: '36dc82a451b2fa8ea194abbf18c8807c8e5374b6', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '15d2c40108a2348f54066eab22d507c6a9b3eda9', hidden: true, id: "initialFocusEl" }), h("div", { key: 'f46ee440d02b257bde93273936ce1dfe8dc324ea', class: "mdc-dialog__container" }, h("div", { key: '9ba9919b2b880039ede217c0608d9f780d6ca770', class: "mdc-dialog__surface" }, h("input", { key: '07bb68ae4c7b8d91cb7f0fd02105738160bd9e8f', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '1729cb0f7f442b3ee56272387de42b462926275c', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: 'a5554b316a4e57700a2902ae4499f594045f267d' })), this.renderFooter())), h("div", { key: '85ecb0922ece938a5de20b804b6a2590f98032df', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '94f2916fc46faa085968f971492a18e18da4ea43', hidden: true, id: "initialFocusEl" }), h("div", { key: '3d60080d453f2970f375327ff99a98af66c85ce4', class: "mdc-dialog__container" }, h("div", { key: 'b9f86ba3f93e6ebd97063723a319b319a6d0ad52', class: "mdc-dialog__surface" }, h("input", { key: '35b0f87461025a34d1ce182d36251197f615c948', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '0d09ea298790f4d7f50dfabc68461320d4ea551f', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '56cf87544caee93d453304a976af625314ba6164' })), this.renderFooter())), h("div", { key: '3a3824e1d8b8cd048d0ccf0715a59fa1bdbca8f2', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue) {

package/dist/collection/components/dock/dock.js

@@ -79,11 +79,11 @@ export class Dock {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '3a859df9c1fb4b56bb1ba18b846a2da353075b0f', class: {
+        return (h(Host, { key: '206ac399202f8fddff9466c329d4de7b595d3f78', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, h("nav", { key: '75303da2b5c8f86a4a6e1be7e76811e3dce8a303', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, h("nav", { key: '6bb724bf6d07c82ff9a36484562d4551e24b1eb7', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
     }
     renderExpandShrinkToggle() {
         if (this.useMobileLayout || !this.allowResize) {

package/dist/collection/components/drag-handle/drag-handle.js

@@ -51,7 +51,7 @@ export class DragHandleComponent {
     render() {
         const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
-        return (h(Host, { key: 'e83ce402fe42d2b8f457e381ace449847333ddc2' }, h("button", { key: '56956b7efc28c4c72a5d2538026495055ed810ff', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: 'e51e6c69aeef13b6edd48f46e12e830cfdd3016c', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: 'ca44d8fe5178e099976c41a517f95ebfff780bcf', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+        return (h(Host, { key: '73d94aff2fe3748634cf2e81ed9f064e52368da4' }, h("button", { key: '43277535b5759d921a5e02c75c304d12d89d5420', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: 'a1f003fd07b139ebd966097ecfd0c8bfad96b3ed', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: 'd7c11c5bb0a294a9dde74df8aea095efc6ef6f1a', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
     }
     static get is() { return "limel-drag-handle"; }
     static get originalStyleUrls() {

package/dist/collection/components/email-viewer/email-viewer.js

@@ -75,7 +75,7 @@ export class EmailViewer {
         }
     }
     render() {
-        return (h(Host, { key: '675006a3bc305063d7205aef84da1652f0c082f4' }, h("div", { key: '10661de173c5fbac42362c903f1a1a5658e6c9e3', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: 'c8102541316aaf4749cbf298adb5c3c41d9dda47' }, this.renderAttachments(), this.renderBody()))));
+        return (h(Host, { key: 'a2beb0e4d0dadd8e745aff449e07466b6becf725' }, h("div", { key: '1592e35fe27e50b8e81346e9bc02473e8cb495cc', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: 'e9f848430487075e272e25672eb9e032e85d4a59' }, this.renderAttachments(), this.renderBody()))));
     }
     renderHeaders() {
         const headerFields = [

package/dist/collection/components/file/file.js

@@ -89,7 +89,7 @@ export class File {
         };
     }
     render() {
-        return (h(Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, h("limel-file-dropzone", { key: 'c3636964ee41bd5396fe667cc983a74256845af5', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
+        return (h(Host, { key: '401aab598ccb204e781169a80e6e2d0585c76d8a' }, h("limel-file-dropzone", { key: '1979ee6425b29c7f20e353226c074ff9ed13b233', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
     }
     renderDragAndDropTip() {
         if (this.value || this.disabled || this.readonly) {