@limetech/lime-elements 39.17.2 → 39.18.0

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

@@ -1,111 +1,10 @@
-@charset "UTF-8";
 /**
 * @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.
 * @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.
 * @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.
 * @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.
 * @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.
-* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.
-
-*/
-/**
-* Note! This file is forwarded via `src/style/exports.scss`
-* and exposed to consumers through the root `index.scss`.
-*
-* Consumers import it using:
-* `@use '@limetech/lime-elements' as lime-elements;`
-*
-* Legacy import paths (`dist/scss/mixins`) are maintained
-* for backward compatibility via copy rules in the Stencil config.
-*/
-/**
-* Neutralizes the user-agent styles that browsers apply to `<button>` elements
-* (their default background, border, padding, font, etc.), without stripping
-* the useful defaults that `all: unset;` would also remove
-* (such as `display`, `cursor`, and focus behavior).
-*
-* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
-* the styling you want on top — often one of the `is-*-clickable` mixins.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
 */
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
 :host(limel-action-bar) {
   --action-bar-item-height: 2rem;
   --limel-action-bar-item-text-color: var(
@@ -119,7 +18,6 @@
   max-width: 100%;
   border-radius: var(--action-bar-border-radius);
   background-color: var(--action-bar-background-color, rgb(var(--contrast-100)));
-  transition: max-width 0.3s ease;
 }
 
 :host(limel-action-bar),
@@ -139,14 +37,6 @@
   min-width: 0;
 }
 
-:host(limel-action-bar.is-shrunk) .items {
-  opacity: 0;
-}
-
-:host(limel-action-bar:not(.is-shrunk)) .items {
-  opacity: 1;
-}
-
 :host(limel-action-bar.is-full-width) {
   width: 100%;
 }
@@ -158,87 +48,4 @@
   padding-left: 0.125rem;
   max-width: calc(100% - 2rem);
   box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);
-}
-
-:host(limel-action-bar.is-shrunk) {
-  max-width: 5rem;
-  transition: max-width 0.3s ease-in-out;
-}
-:host(limel-action-bar.is-shrunk) .expand-shrink {
-  transition: transform 0.3s ease;
-  transform: rotateY(180deg);
-}
-
-:host(limel-action-bar:not(.is-shrunk)) {
-  max-width: 100%;
-  transition: max-width 0.3s ease-in-out;
-}
-:host(limel-action-bar:not(.is-shrunk)) .expand-shrink {
-  transition: transform 0.3s ease;
-  transform: rotateY(0deg);
-}
-
-:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink {
-  margin-left: auto;
-}
-
-button.expand-shrink {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-  width: auto;
-  box-sizing: border-box;
-  border-radius: 50%;
-  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
-  cursor: pointer;
-  color: var(--limel-theme-on-surface-color);
-  background-color: transparent;
-}
-button.expand-shrink:hover, button.expand-shrink:focus, button.expand-shrink:focus-visible {
-  will-change: color, background-color, box-shadow, transform;
-}
-button.expand-shrink:hover, button.expand-shrink:focus-visible {
-  transform: translate3d(0, 0.01rem, 0);
-  color: var(--limel-theme-on-surface-color);
-  background-color: var(--lime-elevated-surface-background-color);
-}
-button.expand-shrink:hover {
-  box-shadow: var(--button-shadow-hovered);
-}
-button.expand-shrink:active {
-  --limel-clickable-transform-timing-function: cubic-bezier(
-      0.83,
-      -0.15,
-      0.49,
-      1.16
-  );
-  transform: translate3d(0, 0.05rem, 0);
-  box-shadow: var(--button-shadow-pressed);
-}
-button.expand-shrink:hover, button.expand-shrink:active {
-  --limel-clickable-transition-speed: 0.2s;
-  --limel-clickable-transform-speed: 0.16s;
-}
-button.expand-shrink:focus {
-  outline: none;
-}
-button.expand-shrink:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
-button.expand-shrink {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-button.expand-shrink limel-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0.125rem;
-  color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));
 }

package/dist/collection/components/action-bar/action-bar.js

@@ -24,7 +24,6 @@ import { isItem } from "./is-item";
  * @exampleComponent limel-example-action-bar-selected-item
  * @exampleComponent limel-example-action-bar-colors
  * @exampleComponent limel-example-action-bar-floating
- * @exampleComponent limel-example-action-bar-floating-expand
  * @exampleComponent limel-example-action-bar-styling
  * @exampleComponent limel-example-action-bar-as-primary-component
  * @exampleComponent limel-example-action-bar-icon-title
@@ -39,16 +38,15 @@ export class ActionBar {
         /**
          * Defines the language for translations.
          */
-        this.language = document.documentElement.lang;
+        this.language = 'en';
         /**
-         * When set to `true`, the action bar will be collapsible.
+         * @deprecated The prop has no effect any longer.
+         * It will be removed in a future major version.
+         * If you need this behavior, implement the expand/shrink (or resize) in
+         * the consuming UI instead.
          */
         this.collapsible = false;
         this.overflowCutoff = this.actions.length;
-        /**
-         * Indicates whether the action bar is currently in a collapsed state.
-         */
-        this.actionBarIsShrunk = false;
         this.hasRendered = false;
         this.isFirstIntersectionCheck = true;
         this.actionBarItems = [];
@@ -59,15 +57,7 @@ export class ActionBar {
             if (!(this.actions.length - this.overflowCutoff)) {
                 return;
             }
-            const shrunkOverFlowIcon = {
-                name: 'more',
-                color: 'rgb(var(--contrast-1000))',
-                title: this.getTranslation('action-bar.actions'),
-            };
-            return (h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect, role: "gridcell", overFlowIcon: this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined }));
-        };
-        this.handleCollapseExpandClick = () => {
-            this.actionBarIsShrunk = !this.actionBarIsShrunk;
+            return (h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect, role: "gridcell" }));
         };
         this.handleSelect = (event) => {
             event.stopPropagation();
@@ -75,9 +65,6 @@ export class ActionBar {
                 this.itemSelected.emit(event.detail);
             }
         };
-        this.getTranslation = (key) => {
-            return translate.get(key, this.language);
-        };
         this.handleIntersection = (entries) => {
             const intersectingItems = entries.filter((entry) => entry.isIntersecting);
             const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
@@ -93,6 +80,11 @@ export class ActionBar {
             this.isFirstIntersectionCheck = false;
         };
     }
+    componentWillLoad() {
+        if (this.collapsible) {
+            console.warn('The `collapsible` prop on `limel-action-bar` is deprecated and no longer has any effect. It will be removed in a future major version. If you need expand/shrink behavior, implement it in the consuming UI instead of relying on the action bar itself.');
+        }
+    }
     connectedCallback() {
         if (this.hasRendered) {
             this.createIntersectionObserver();
@@ -112,36 +104,20 @@ export class ActionBar {
         this.actionBarItems = [];
     }
     render() {
+        var _a;
         this.hasRendered = true;
         let overflowActions = [];
         if (this.actions.length > 0) {
             overflowActions = this.actions.slice(this.overflowCutoff);
         }
-        return (h(Host, { key: 'f81d3acb912e7191889f7b8e4462c6e1a1db692b', "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '770a02d08ba8a05d243c8fc56f3eb370eb01001d', "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : translate.get('action-bar', this.language), class: {
                 'is-full-width': this.layout === 'fullWidth',
                 'is-floating': this.layout === 'floating',
-                'is-shrunk': this.actionBarIsShrunk && this.collapsible,
-                'can-be-shrunk': !!this.collapsible,
-            }, role: "grid" }, h("div", { key: 'd6d96d43a7dd278f1f65033b070213cd1c6b963e', class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
-    }
-    renderCollapseExpandButton() {
-        if (!this.collapsible || this.actions.length <= 1) {
-            return;
-        }
-        return (h("button", { class: {
-                'expand-shrink': true,
-            }, "aria-label": this.tooltipLabel, type: "button", onClick: this.handleCollapseExpandClick }, h("limel-icon", { name: "double_left", id: "tooltip-expand-shrink-button" }), h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-expand-shrink-button" })));
+            }, role: "grid" }, h("div", { key: '364647ea01493a1a3cbd9aa8eaa8c4b86db3dd20', class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions)));
     }
     isVisible(index) {
         return index < this.overflowCutoff;
     }
-    get tooltipLabel() {
-        let key = 'action-bar.collapse';
-        if (this.actionBarIsShrunk) {
-            key = 'action-bar.expand';
-        }
-        return this.getTranslation(key);
-    }
     createIntersectionObserver() {
         const options = {
             root: this.host.shadowRoot.querySelector('.items'),
@@ -216,6 +192,25 @@ export class ActionBar {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nIf not set, a localized default (\"Action bar\" in English, translated\nvia the `language` prop) is used, so the element is never announced\nwithout a name. Override this when a more specific label would help\nusers tell multiple action bars apart \u2014 for example \"Bulk actions\"\nor \"Contextual actions\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "accessible-label"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,
@@ -239,28 +234,9 @@ export class ActionBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "language",
-                "defaultValue": "document.documentElement.lang as Languages"
-            },
-            "accessibleLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nExample value: \"toolbar\""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "accessible-label"
+                "defaultValue": "'en'"
             },
             "layout": {
                 "type": "string",
@@ -292,8 +268,11 @@ export class ActionBar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When set to `true`, the action bar will be collapsible."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "The prop has no effect any longer.\nIt will be removed in a future major version.\nIf you need this behavior, implement the expand/shrink (or resize) in\nthe consuming UI instead."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -331,8 +310,7 @@ export class ActionBar {
     }
     static get states() {
         return {
-            "overflowCutoff": {},
-            "actionBarIsShrunk": {}
+            "overflowCutoff": {}
         };
     }
     static get events() {

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

@@ -20,7 +20,7 @@ export class Banner {
         this.isOpen = false;
     }
     render() {
-        return (h("div", { key: '4c52de06b1d1710e79d2fbe729c76b49c7a4dae9', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: '2085a6a5d07c036642646f6cb9cab56e7f86f48a', class: "lime-banner__surface" }, h("div", { key: '0b021548bdee32661d458a88e0472a6a1ef0f195', class: "lime-banner__content" }, h("div", { key: '65db98d6d60fdf856871e68c6c3bdaa55fb87526', class: "icon-message" }, this.renderIcon(), h("div", { key: '94eb50955800bc6a18c49bed8d6fd949909cf5bd' }, this.message)), h("div", { key: '8331420f88b294bb1a21682ca1446704e9dc0ffb', class: "lime-banner__actions" }, h("slot", { key: 'b784df0968fa19c093c3c0db6de980d6472154d4', name: "buttons" }))))));
+        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" }))))));
     }
     renderIcon() {
         if (!this.icon) {
@@ -65,9 +65,16 @@ export class Banner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "IconName",
                     "resolved": "string",
-                    "references": {}
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -66,12 +66,12 @@ export class Button {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '4d575a67e902fe7e6af291ea9b6df5aa9d83ba29', onClick: this.filterClickWhenDisabled }, h("button", { key: '887b9453b5a707db5239f499118d2bb27cc65c1a', class: {
+        return (h(Host, { key: '0c409d801aa06800490755411975a2c47fe81331', onClick: this.filterClickWhenDisabled }, h("button", { key: 'd6f001cc42e8ffcf0986896e546a4f9349415160', 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: 'd2b52f207f0d6c6af0c55ee7585f3b12a0ee4832', 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: '1a43254ec41997b2218ae39050605402685a66ed', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
     }
     loadingWatcher(newValue, oldValue) {
         const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);
@@ -227,9 +227,15 @@ export class Button {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",

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

@@ -115,7 +115,7 @@ export class Card {
         this.setMarkdownElement(this.markdownElement);
     }
     render() {
-        return (h(Host, { key: 'fbb3c4a47fe819511f56bf250b52a5effdf64f15', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, h("section", { key: '735df6ada728adabd822698395a280742a49cee2', 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: '2382833712ee8e01bbd702b30b10ea6d3a0f7dcb', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && h("limel-3d-hover-effect-glow", { key: 'd13545dc6829b59bce0d870dfdeed409f2608529' }))));
+        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' }))));
     }
     renderImage() {
         var _a;
@@ -252,9 +252,15 @@ export class Card {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",

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

@@ -175,7 +175,7 @@ export class Chip {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: 'ff0578a9545aa295b7a5c58dd7c17605e4a8acc2', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
+        return (h(Host, { key: '32f0df7f6665bd8b7ae90c423e1052b60a6f3823', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
     }
     renderPicture() {
         var _a, _b;
@@ -315,9 +315,15 @@ export class Chip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",

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

@@ -269,7 +269,7 @@ export class ChipSet {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: 'cc38b12787a887fa3cf6d54412d460fffdc10d37' }, h("limel-notched-outline", { key: '363ee1953a0880a987acbaeb75ad7682c03c26ec', 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: 'c05be9685e36d5283791bf30aceb937f8da0c0a0', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: '61cf1dbed2cf2009e119636c738ac14e825a7a9d' }, h("limel-notched-outline", { key: '0443dd8d4a39fbc53e879027633bc06eb99dab6f', 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: '7c48b63a8b06b5a8d405fb3966deba769e100169', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {
@@ -752,9 +752,16 @@ export class ChipSet {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "IconName",
                     "resolved": "string",
-                    "references": {}
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -111,7 +111,7 @@ export class CollapsibleSection {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: 'a40f48753cc7e5ae281b0e2a169e19510e54cc55', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: '55784166942971de68e351914a6d96dc77ea75c4' }, h("button", { key: '0432b0b5a4af99b94fea4073de496785c8f87d36', 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: '11efcd91907a79ed0945749b4672809e466c1e00', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: '4b74f9d5fc9533eb14180a23e20c402a436b53f7', class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '42c969ae7787768247a41952f9cf6d528ca7d4fd' }))));
+        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' }))));
     }
     renderHeaderSlot() {
         return h("slot", { name: "header" });
@@ -173,9 +173,15 @@ export class CollapsibleSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",

package/dist/collection/components/header/header.js

@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '4a94e7808e3b295669faa4711d37f8d9ed50b006' }, h("div", { key: '7c02e31819ddac504b5c58b6200c00a621079990', class: "information" }, this.renderIcon(), h("div", { key: 'b38172e5332ee39476bd19f7ad4f0ce127cc30d6', class: "headings" }, h("h1", { key: '9ee1f899ba0f403a588e0dbca52d82c1c12e355e', class: "heading", title: this.heading }, this.heading), h("h2", { key: '49b81ef3a96a9c2f7fa27ec2d13a15907131624e', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '29984270ca745ce430deef27704b9c63065c2964', name: "actions" }, h("slot", { key: '1c3b766dc1444a0255ea605359b25d148d25ba57' }))));
+        return (h(Host, { key: '9187592e41befbd12fbef3bb4c8b5cb6bc6bed25' }, h("div", { key: '2a667a272a2e9fc4de7be1708abf34806174c33f', class: "information" }, this.renderIcon(), h("div", { key: '4dac266d2bfd7435f8b31cb1f1f85cf7ea4f66bd', class: "headings" }, h("h1", { key: 'f60ebe3ca473586291c806ce025df8e05a9468c4', class: "heading", title: this.heading }, this.heading), h("h2", { key: '37db047610cf146c8c738dc87911678144e90466', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '3bb8cc3adb53bc3ed9216cd568af490ec93a2c96', name: "actions" }, h("slot", { key: '5f3caca6968905f52717c3ffb5c18a097ba7808e' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;
@@ -105,9 +105,15 @@ export class Header {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",

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

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '0df3febef19dcdb72c7c7f3740090414b313be51', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '119641239ebd336ca5af28ce3452c940a552eccb', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: 'ffea4e0d48339c908b3ae9afc4d3b46922189ad6', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'e4689ca52a6c0c81ddb6e9637584fe140846025b', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;
@@ -87,9 +87,15 @@ export class IconButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Icon",
+                    "original": "IconName | Icon",
                     "resolved": "Icon | string",
                     "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../global/shared-types/icon.types",
+                            "id": "src/global/shared-types/icon.types.ts::IconName",
+                            "referenceLocation": "IconName"
+                        },
                         "Icon": {
                             "location": "import",
                             "path": "../../global/shared-types/icon.types",