@ukic/web-components 3.7.0 → 3.9.0

package/dist/components/ic-input-component-container2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, f as renderDynamicChildSlots, E as slotHasContent, z as IcInformationStatus, C as successIcon } from './helpers.js';
+import { r as removeDisabledFalse, f as renderDynamicChildSlots, F as slotHasContent, A as IcInformationStatus, E as successIcon } from './helpers.js';
 
 const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;min-height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-color-background-primary));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-color-border-neutral-disabled))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly{height:auto;background:transparent}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-space-xxxs) solid\n    var(--border-color-error, var(--ic-color-border-error));padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-hover, var(--ic-color-border-error-hover))}ic-input-component-container.ic-input-component-container-error:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-error-pressed, var(--ic-color-border-error-pressed))}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning, var(--ic-color-border-warning));padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-hover, var(--ic-color-border-warning-hover))}ic-input-component-container.ic-input-component-container-warning:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed))}ic-input-component-container.ic-input-component-container-success{border:var(--ic-space-xxxs) solid\n    var(--border-color-success, var(--ic-color-border-success));padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-hover, var(--ic-color-border-success-hover))}ic-input-component-container.ic-input-component-container-success:focus-within{border:var(--ic-space-xxxs) solid\n    var(--border-color-success-pressed, var(--ic-color-border-success-pressed))}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl);min-height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl);min-height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container .inline-success>svg{fill:var(--ic-input-component-container-success-icon-inline-color);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-input-component-container-hover-border);border-color:var(--border-color-hover, var(--ic-color-border-neutral-hover));color:var(--ic-action-monochrome-hover-dark)}ic-input-component-container:focus{border:var(--ic-border-pressed);border-color:var(\n    --border-color-pressed,\n    var(--ic-color-border-neutral-pressed)\n  )}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed GrayText}}";
 const IcInputComponentContainerStyle0 = icInputComponentContainerCss;
@@ -49,15 +49,15 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: 'fc70461ae7d3922f07aa5a85209e376d42bfc451', class: {
+        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '20934b81740e6c907bff86cc706d3aafe3a790df', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '3577416fc719a575372188c43a78ac945b1b1526', class: "icon-container" }, h("slot", { key: '36ee3e5c85ec77c69f88c2b74d272bdb6ee42ca1', name: "left-icon" }))), h("slot", { key: 'e0a79f50c8ba34c0d989e2402df8b00587c5878f' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: 'b156fb5bb6fcfec8c6dec6febdeea6d2adc7e009', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-input-container2.js

@@ -17,11 +17,11 @@ const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer ext
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: '49cd31d8dca09cc4b2f49e0b2e7829bb1771a5d6' }, h("div", { key: 'bb0e3a80161a86b40e0dc424264e71cf6c95c88a', class: {
+        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '4916ff0aebd6632d6e6f5daaa3c318e1e696ff2f' }))));
+            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
     }
     static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {

package/dist/components/ic-input-label2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, x as getInputHelperTextID } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, y as getInputHelperTextID } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
 const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:0}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
@@ -70,11 +70,11 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: 'f03d8032ac769d4ecea37fe7a60e9d5acea54cd9', class: {
+        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: '7af61c1f2a1b9068fb9a9b649f60da1784207aa3', variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
             } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));

package/dist/components/ic-input-validation2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, y as getInputValidationTextID, z as IcInformationStatus, A as warningIcon, B as errorIcon, C as successIcon } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, z as getInputValidationTextID, A as IcInformationStatus, B as warningIcon, C as errorIcon, E as successIcon } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
 const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}";
@@ -33,13 +33,13 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? icon[status] : "";
-        return (h(Host, { key: '2ab746f75a46252bc0755dfd28220dbe555b93b3', class: {
+        return (h(Host, { key: '149fe6ed6f86bb49ff8179e617542c048da4b80f', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
-            } }, displayIcon !== "" && (h("span", { key: 'fc02067a0c0f1e9672e190f1bd30774cd2cfcfe0', class: {
+            } }, displayIcon !== "" && (h("span", { key: 'e9e0ad999d435642e02a9f9c4abb95840fe13b3f', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: 'f8d3c1d9d7f30e232ebbc827033ad318485f7c98', variant: "caption", class: "statustext" }, h("span", { key: '73b35c4a5c4dbe77fe4c71032020a0346e34fcfd', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '629f37113c9354db274019eadc9ae7140adf921a', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '7494901b17b7bb3c91167e95190c415fd06f03c9', variant: "caption", class: "statustext" }, h("span", { key: '5e7d2d4cdcef0d32d5338f25365bc9831203a9c9', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '445c0fe4b8effa3b9d98a9b240921e613ef43e24', name: "validation-message-adornment" })));
     }
     get el() { return this; }
     static get style() { return IcInputValidationStyle0; }

package/dist/components/ic-layout-grid-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcLayoutGridItem extends Components.IcLayoutGridItem, HTMLElement {}
+export const IcLayoutGridItem: {
+    prototype: IcLayoutGridItem;
+    new (): IcLayoutGridItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-layout-grid-item.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const icLayoutGridItemCss = ":host{grid-column:var(--ic-grid-item-col-start, 1) / span\n    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;grid-row:var(--ic-grid-item-row-start, 1) / span\n    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important}@media only screen and (max-width: 576px){:host(.ic-layout-grid-hide-in-mobile){display:none}}";
+const IcLayoutGridItemStyle0 = icLayoutGridItemCss;
+
+const LayoutGridItem = /*@__PURE__*/ proxyCustomElement(class LayoutGridItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The number of columns the grid item should span.
+         */
+        this.colSpan = 1;
+        /**
+         * The column the grid item should start at.
+         */
+        this.colStart = 1;
+        /**
+         * If `true`, the grid item will be hidden on smaller screens.
+         */
+        this.hideInMobileMode = false;
+        /**
+         * The number of rows the grid item should span.
+         */
+        this.rowSpan = 1;
+        /**
+         * The row the grid item should start at.
+         */
+        this.rowStart = 1;
+    }
+    watchColSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-span", `${newValue}`);
+    }
+    watchColStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${newValue}`);
+    }
+    watchRowSpan(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-span", `${newValue}`);
+    }
+    watchRowStart(newValue) {
+        this.el.style.setProperty("--ic-grid-item-row-start", `${newValue}`);
+    }
+    componentWillLoad() {
+        this.el.style.setProperty("--ic-grid-item-col-start", `${this.colStart}`);
+        this.el.style.setProperty("--ic-grid-item-col-span", `${this.colSpan}`);
+        this.el.style.setProperty("--ic-grid-item-row-start", `${this.rowStart}`);
+        this.el.style.setProperty("--ic-grid-item-row-span", `${this.rowSpan}`);
+    }
+    render() {
+        const { hideInMobileMode } = this;
+        return (h(Host, { key: '07cb3d39a4c3440a06df2f6c56ecdf3017e48f59', class: {
+                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
+            } }, h("slot", { key: '53c7d5616494ad9fc7468d023b9a9ec520938916' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "colSpan": ["watchColSpan"],
+        "colStart": ["watchColStart"],
+        "rowSpan": ["watchRowSpan"],
+        "rowStart": ["watchRowStart"]
+    }; }
+    static get style() { return IcLayoutGridItemStyle0; }
+}, [1, "ic-layout-grid-item", {
+        "colSpan": [2, "col-span"],
+        "colStart": [2, "col-start"],
+        "hideInMobileMode": [4, "hide-in-mobile-mode"],
+        "rowSpan": [2, "row-span"],
+        "rowStart": [2, "row-start"]
+    }, undefined, {
+        "colSpan": ["watchColSpan"],
+        "colStart": ["watchColStart"],
+        "rowSpan": ["watchRowSpan"],
+        "rowStart": ["watchRowStart"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-layout-grid-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-layout-grid-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayoutGridItem);
+            }
+            break;
+    } });
+}
+
+const IcLayoutGridItem = LayoutGridItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLayoutGridItem, defineCustomElement };
+
+//# sourceMappingURL=ic-layout-grid-item.js.map

package/dist/components/ic-layout-grid-item.js.map

@@ -0,0 +1 @@
+{"file":"ic-layout-grid-item.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2WAA2W,CAAC;AACxY,+BAAe,mBAAmB;;MCMrB,cAAc;IAL3B;;;;;;;QAWU,YAAO,GAAY,CAAC,CAAC;;;;QASrB,aAAQ,GAAY,CAAC,CAAC;;;;QAStB,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,YAAO,GAAY,CAAC,CAAC;;;;QASrB,aAAQ,GAAY,CAAC,CAAC;KAyB/B;IAvDC,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACrE;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACtE;IAYD,YAAY,CAAC,QAAgB;QAC3B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACrE;IAOD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,0BAA0B,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACzE;IAED,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAClC,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,+BAA+B,EAAE,CAAC,CAAC,gBAAgB;aACpD,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-layout-grid-item/ic-layout-grid-item.css?tag=ic-layout-grid-item&encapsulation=shadow","src/components/ic-layout-grid-item/ic-layout-grid-item.tsx"],"sourcesContent":[":host {\n  grid-column: var(--ic-grid-item-col-start, 1) / span\n    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;\n  grid-row: var(--ic-grid-item-row-start, 1) / span\n    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important;\n}\n\n@media only screen and (max-width: 576px) {\n  :host(.ic-layout-grid-hide-in-mobile) {\n    display: none;\n  }\n}\n","import { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-layout-grid-item\",\n  styleUrl: \"ic-layout-grid-item.css\",\n  shadow: true,\n})\nexport class LayoutGridItem {\n  @Element() el: HTMLIcLayoutGridItemElement;\n\n  /**\n   * The number of columns the grid item should span.\n   */\n  @Prop() colSpan?: number = 1;\n  @Watch(\"colSpan\")\n  watchColSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-span\", `${newValue}`);\n  }\n\n  /**\n   * The column the grid item should start at.\n   */\n  @Prop() colStart?: number = 1;\n  @Watch(\"colStart\")\n  watchColStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-col-start\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the grid item will be hidden on smaller screens.\n   */\n  @Prop() hideInMobileMode?: boolean = false;\n\n  /**\n   * The number of rows the grid item should span.\n   */\n  @Prop() rowSpan?: number = 1;\n  @Watch(\"rowSpan\")\n  watchRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-span\", `${newValue}`);\n  }\n\n  /**\n   * The row the grid item should start at.\n   */\n  @Prop() rowStart?: number = 1;\n  @Watch(\"rowStart\")\n  watchRowStart(newValue: number) {\n    this.el.style.setProperty(\"--ic-grid-item-row-start\", `${newValue}`);\n  }\n\n  componentWillLoad(): void {\n    this.el.style.setProperty(\"--ic-grid-item-col-start\", `${this.colStart}`);\n    this.el.style.setProperty(\"--ic-grid-item-col-span\", `${this.colSpan}`);\n    this.el.style.setProperty(\"--ic-grid-item-row-start\", `${this.rowStart}`);\n    this.el.style.setProperty(\"--ic-grid-item-row-span\", `${this.rowSpan}`);\n  }\n\n  render() {\n    const { hideInMobileMode } = this;\n    return (\n      <Host\n        class={{\n          \"ic-layout-grid-hide-in-mobile\": !!hideInMobileMode,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-layout-grid.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcLayoutGrid extends Components.IcLayoutGrid, HTMLElement {}
+export const IcLayoutGrid: {
+    prototype: IcLayoutGrid;
+    new (): IcLayoutGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-layout-grid.js

@@ -0,0 +1,188 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const icLayoutGridCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:grid;width:-moz-fit-content;width:fit-content;grid-template-columns:repeat(\n    var(--ic-layout-grid-columns),\n    var(--ic-layout-grid-col-width, 1fr)\n  );grid-template-rows:repeat(var(--ic-layout-grid-rows), 1fr);gap:var(--ic-layout-grid-spacing);padding-top:var(--ic-layout-grid-margin);padding-bottom:var(--ic-layout-grid-margin)}:host ::slotted(*){grid-column:span var(--ic-layout-grid-col-span, 1);grid-row:span var(--ic-layout-grid-row-span, 1)}:host(.ic-layout-grid-aligned-center){margin-left:auto;margin-right:auto;padding-left:var(--ic-layout-grid-margin);padding-right:var(--ic-layout-grid-margin)}:host(.ic-layout-grid-aligned-left){margin-left:var(--ic-layout-grid-margin);margin-right:auto;padding-right:var(--ic-layout-grid-margin)}:host(.ic-layout-grid-aligned-full-width){margin-left:var(--ic-layout-grid-margin);margin-right:var(--ic-layout-grid-margin);width:calc(100% - (var(--ic-layout-grid-margin) * 2))}:host(.ic-layout-grid-no-vertical-padding){padding-top:0;padding-bottom:0}@media only screen and (max-width: 576px){:host{--ic-layout-grid-margin:var(--ic-space-xs);--ic-layout-grid-columns:var(--ic-layout-grid-columns-xs)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-xs)}}@media only screen and (min-width: 577px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-sm)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-sm)}}@media only screen and (min-width: 769px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-md)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-md)}}@media only screen and (min-width: 993px){:host{--ic-layout-grid-margin:var(--ic-space-md);--ic-layout-grid-columns:var(--ic-layout-grid-columns-lg)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-lg)}}@media only screen and (min-width: 1201px){:host{--ic-layout-grid-margin:var(--ic-space-lg);--ic-layout-grid-columns:var(--ic-layout-grid-columns-xl)}:host ::slotted(*){--ic-layout-grid-col-span:var(--ic-layout-grid-col-span-xl)}}";
+const IcLayoutGridStyle0 = icLayoutGridCss;
+
+const LayoutGrid = /*@__PURE__*/ proxyCustomElement(class LayoutGrid extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.COL_WIDTH_CSS_PROP = "--ic-layout-grid-col-width";
+        /**
+         * The alignment of the grid.
+         */
+        this.aligned = "left";
+        /**
+         * The default column span for grid items.
+         */
+        this.defaultColSpan = 1;
+        /**
+         * The default column width for grid items.
+         * This is used when the grid type is set to "fixed".
+         */
+        this.defaultColWidth = "64px";
+        /**
+         * The default row span for grid items.
+         */
+        this.defaultRowSpan = 1;
+        /**
+         * If `true`, the standard vertical padding from the grid will be removed.
+         */
+        this.fullHeight = false;
+        /**
+         * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
+         */
+        this.gridSpacing = 2;
+        /**
+         * The number of rows in the grid.
+         */
+        this.rows = 1;
+        /**
+         * The layout type of the grid.
+         */
+        this.type = "fixed";
+        this.getColumns = () => {
+            if (typeof this.columns === "number") {
+                this.el.style.setProperty("--ic-layout-grid-columns", this.columns.toString());
+            }
+            else if (typeof this.columns === "object") {
+                Object.entries(this.columns).forEach(([breakpoint, value]) => {
+                    if (value !== undefined) {
+                        this.el.style.setProperty(`--ic-layout-grid-columns-${breakpoint}`, value.toString());
+                    }
+                });
+            }
+        };
+        this.getColSpan = () => {
+            if (this.defaultColSpan !== undefined) {
+                if (typeof this.defaultColSpan === "number") {
+                    Array.from(this.el.children).forEach((child) => {
+                        child.style.setProperty("--ic-layout-grid-col-span", `${this.defaultColSpan}`);
+                    });
+                }
+                else if (typeof this.defaultColSpan === "object") {
+                    Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {
+                        if (value !== undefined) {
+                            this.el.style.setProperty(`--ic-layout-grid-col-span-${breakpoint}`, value.toString());
+                        }
+                    });
+                }
+            }
+        };
+        this.getGridSpacing = () => {
+            this.el.style.setProperty("--ic-layout-grid-spacing", `calc(var(--ic-space-xs) * ${this.gridSpacing})`);
+        };
+    }
+    watchColumns() {
+        this.getColumns();
+    }
+    watchDefaultColSpan() {
+        this.getColSpan();
+    }
+    watchDefaultColWidth(newValue) {
+        if (this.type === "fixed") {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);
+        }
+    }
+    watchDefaultRowSpan(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-row-span", `${newValue}`);
+    }
+    watchGridSpacing() {
+        this.getGridSpacing();
+    }
+    watchRows(newValue) {
+        this.el.style.setProperty("--ic-layout-grid-rows", `${newValue}`);
+    }
+    watchType(newValue) {
+        this.getColumns();
+        if (newValue === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        else {
+            this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);
+        }
+    }
+    componentWillLoad() {
+        if (this.columns === undefined) {
+            if (this.type === "fixed") {
+                this.columns = 12;
+            }
+            else if (this.type === "fluid") {
+                this.columns = {
+                    xs: 2,
+                    sm: 4,
+                    md: 8,
+                    lg: 12,
+                    xl: 12,
+                };
+            }
+        }
+        this.getColumns();
+        this.getColSpan();
+        this.getGridSpacing();
+        if (this.type === "fixed" && this.defaultColWidth) {
+            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
+        }
+        if (this.rows) {
+            this.el.style.setProperty("--ic-layout-grid-rows", `${this.rows}`);
+            this.el.style.setProperty("--ic-layout-grid-row-span", `${this.defaultRowSpan}`);
+        }
+    }
+    render() {
+        const { aligned, fullHeight } = this;
+        return (h(Host, { key: '95699906353df84f439ec7c7ed628f4ba9c80b4e', class: {
+                [`ic-layout-grid-aligned-${aligned}`]: true,
+                ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
+            } }, h("slot", { key: '5642340495e02e53b2e7248e0f254b32b95b3b3f' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "columns": ["watchColumns"],
+        "defaultColSpan": ["watchDefaultColSpan"],
+        "defaultColWidth": ["watchDefaultColWidth"],
+        "defaultRowSpan": ["watchDefaultRowSpan"],
+        "gridSpacing": ["watchGridSpacing"],
+        "rows": ["watchRows"],
+        "type": ["watchType"]
+    }; }
+    static get style() { return IcLayoutGridStyle0; }
+}, [1, "ic-layout-grid", {
+        "aligned": [1],
+        "columns": [2],
+        "defaultColSpan": [2, "default-col-span"],
+        "defaultColWidth": [1, "default-col-width"],
+        "defaultRowSpan": [2, "default-row-span"],
+        "fullHeight": [4, "full-height"],
+        "gridSpacing": [2, "grid-spacing"],
+        "rows": [2],
+        "type": [1]
+    }, undefined, {
+        "columns": ["watchColumns"],
+        "defaultColSpan": ["watchDefaultColSpan"],
+        "defaultColWidth": ["watchDefaultColWidth"],
+        "defaultRowSpan": ["watchDefaultRowSpan"],
+        "gridSpacing": ["watchGridSpacing"],
+        "rows": ["watchRows"],
+        "type": ["watchType"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-layout-grid"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-layout-grid":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LayoutGrid);
+            }
+            break;
+    } });
+}
+
+const IcLayoutGrid = LayoutGrid;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcLayoutGrid, defineCustomElement };
+
+//# sourceMappingURL=ic-layout-grid.js.map

package/dist/components/ic-layout-grid.js.map

@@ -0,0 +1 @@
+{"file":"ic-layout-grid.js","mappings":"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","names":[],"sources":["src/components/ic-layout-grid/ic-layout-grid.css?tag=ic-layout-grid&encapsulation=shadow","src/components/ic-layout-grid/ic-layout-grid.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: grid;\n  width: fit-content;\n  grid-template-columns: repeat(\n    var(--ic-layout-grid-columns),\n    var(--ic-layout-grid-col-width, 1fr)\n  );\n  grid-template-rows: repeat(var(--ic-layout-grid-rows), 1fr);\n  gap: var(--ic-layout-grid-spacing);\n  padding-top: var(--ic-layout-grid-margin);\n  padding-bottom: var(--ic-layout-grid-margin);\n}\n\n:host ::slotted(*) {\n  grid-column: span var(--ic-layout-grid-col-span, 1);\n  grid-row: span var(--ic-layout-grid-row-span, 1);\n}\n\n:host(.ic-layout-grid-aligned-center) {\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--ic-layout-grid-margin);\n  padding-right: var(--ic-layout-grid-margin);\n}\n\n:host(.ic-layout-grid-aligned-left) {\n  margin-left: var(--ic-layout-grid-margin);\n  margin-right: auto;\n  padding-right: var(--ic-layout-grid-margin);\n}\n\n:host(.ic-layout-grid-aligned-full-width) {\n  margin-left: var(--ic-layout-grid-margin);\n  margin-right: var(--ic-layout-grid-margin);\n  width: calc(100% - (var(--ic-layout-grid-margin) * 2));\n}\n\n:host(.ic-layout-grid-no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-xs);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-xs);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-xs);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-sm);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-sm);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-md);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-md);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-md);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-lg);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-lg);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --ic-layout-grid-margin: var(--ic-space-lg);\n    --ic-layout-grid-columns: var(--ic-layout-grid-columns-xl);\n  }\n\n  :host ::slotted(*) {\n    --ic-layout-grid-col-span: var(--ic-layout-grid-col-span-xl);\n  }\n}\n","import { Component, Prop, Host, h, Element, Watch } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\nimport { IcGridBreakpoints, IcGridType } from \"./ic-layout-grid.types\";\n\n@Component({\n  tag: \"ic-layout-grid\",\n  styleUrl: \"ic-layout-grid.css\",\n  shadow: true,\n})\nexport class LayoutGrid {\n  private COL_WIDTH_CSS_PROP = \"--ic-layout-grid-col-width\";\n\n  @Element() el: HTMLIcLayoutGridElement;\n\n  /**\n   * The alignment of the grid.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The number of columns in the grid.\n   * This can be a number or an object specifying different values for each breakpoint.\n   */\n  @Prop() columns?: IcGridBreakpoints;\n  @Watch(\"columns\")\n  watchColumns() {\n    this.getColumns();\n  }\n\n  /**\n   * The default column span for grid items.\n   */\n  @Prop() defaultColSpan?: IcGridBreakpoints = 1;\n  @Watch(\"defaultColSpan\")\n  watchDefaultColSpan() {\n    this.getColSpan();\n  }\n\n  /**\n   * The default column width for grid items.\n   * This is used when the grid type is set to \"fixed\".\n   */\n  @Prop() defaultColWidth?: string = \"64px\";\n  @Watch(\"defaultColWidth\")\n  watchDefaultColWidth(newValue: string) {\n    if (this.type === \"fixed\") {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);\n    }\n  }\n\n  /**\n   * The default row span for grid items.\n   */\n  @Prop() defaultRowSpan?: number = 1;\n  @Watch(\"defaultRowSpan\")\n  watchDefaultRowSpan(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-row-span\", `${newValue}`);\n  }\n\n  /**\n   * If `true`, the standard vertical padding from the grid will be removed.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  /**\n   * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).\n   */\n  @Prop() gridSpacing?: number = 2;\n  @Watch(\"gridSpacing\")\n  watchGridSpacing() {\n    this.getGridSpacing();\n  }\n\n  /**\n   * The number of rows in the grid.\n   */\n  @Prop() rows?: number = 1;\n  @Watch(\"rows\")\n  watchRows(newValue: number) {\n    this.el.style.setProperty(\"--ic-layout-grid-rows\", `${newValue}`);\n  }\n\n  /**\n   * The layout type of the grid.\n   */\n  @Prop() type: IcGridType = \"fixed\";\n  @Watch(\"type\")\n  watchType(newValue: IcGridType) {\n    this.getColumns();\n    if (newValue === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    } else {\n      this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.columns === undefined) {\n      if (this.type === \"fixed\") {\n        this.columns = 12;\n      } else if (this.type === \"fluid\") {\n        this.columns = {\n          xs: 2,\n          sm: 4,\n          md: 8,\n          lg: 12,\n          xl: 12,\n        };\n      }\n    }\n    this.getColumns();\n    this.getColSpan();\n    this.getGridSpacing();\n    if (this.type === \"fixed\" && this.defaultColWidth) {\n      this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);\n    }\n    if (this.rows) {\n      this.el.style.setProperty(\"--ic-layout-grid-rows\", `${this.rows}`);\n      this.el.style.setProperty(\n        \"--ic-layout-grid-row-span\",\n        `${this.defaultRowSpan}`\n      );\n    }\n  }\n\n  private getColumns = () => {\n    if (typeof this.columns === \"number\") {\n      this.el.style.setProperty(\n        \"--ic-layout-grid-columns\",\n        this.columns.toString()\n      );\n    } else if (typeof this.columns === \"object\") {\n      Object.entries(this.columns).forEach(([breakpoint, value]) => {\n        if (value !== undefined) {\n          this.el.style.setProperty(\n            `--ic-layout-grid-columns-${breakpoint}`,\n            value.toString()\n          );\n        }\n      });\n    }\n  };\n\n  private getColSpan = () => {\n    if (this.defaultColSpan !== undefined) {\n      if (typeof this.defaultColSpan === \"number\") {\n        (Array.from(this.el.children) as HTMLElement[]).forEach((child) => {\n          child.style.setProperty(\n            \"--ic-layout-grid-col-span\",\n            `${this.defaultColSpan}`\n          );\n        });\n      } else if (typeof this.defaultColSpan === \"object\") {\n        Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {\n          if (value !== undefined) {\n            this.el.style.setProperty(\n              `--ic-layout-grid-col-span-${breakpoint}`,\n              value.toString()\n            );\n          }\n        });\n      }\n    }\n  };\n\n  private getGridSpacing = () => {\n    this.el.style.setProperty(\n      \"--ic-layout-grid-spacing\",\n      `calc(var(--ic-space-xs) * ${this.gridSpacing})`\n    );\n  };\n\n  render() {\n    const { aligned, fullHeight } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-layout-grid-aligned-${aligned}`]: true,\n          [\"ic-layout-grid-no-vertical-padding\"]: !!fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-link2.js

@@ -93,7 +93,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '769bea68e79e8b28fb9c0ea007c24dd11968d332', class: {
+        return (h(Host, { key: '21143018ec29344c665ecc6ffdc7ca033eb6fd18', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/components/ic-loading-indicator2.js

@@ -187,23 +187,23 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (h(Host, { key: '8ee440b25dde3874c36eb6c70f3eaac1bf7649d1', class: {
+        return (h(Host, { key: '413c553dc741429027e834c352171bc538bad4e5', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { key: '3d06914b8253b77c9df58d5c94a44442ea3f2d16', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '43a11cf45e813b5560721472c431452a761593fb', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: '988482262c2ce8269f8e10706f2455ee94fbed4c', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '93e2878a03795a8e5fd65e85cc586f8de22ec764', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'a95cd8ed7e58821c8ac4001c8926d202719e63f7', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '1d4f9ebc1ee51844d0357c5629a9dc69aac0f16c', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '04b25f8cba789f316ba2db771b4a7d30eac7fe10', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'ff98da2b3f382ad698855d7ce1b0a553dbfadae3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'b53c7477ae972370739b908141776337f277fc48', cx: x, cy: y, r: r }), h("circle", { key: 'b652351de6695c077a1f276710e0fe558ff393e4', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '85269ef476f8ee423e4a14383445cfa4b0256556', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'd3f423cd9659b735184d6657127c8626cc9cf4a3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '060c4d530c2e27309fbe6513eb2497ae91bcdb6a', cx: x, cy: y, r: r }), h("circle", { key: 'e4b17ca2492a92fe99561193250bb9fb4a8cf960', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'b070b1975f52606aa8df8f8575859a12ab4e7982', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'b654d871fff4ad30b2fa7bfff7b2756f0b7475ed' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '22f1b492ebc832a2ea60ffbefd9790c1f85b2c90', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'e513e1965e25987826a872c991faec17c17db505' }, indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-menu-group.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { l as isPropDefined } from './helpers.js';
+import { m as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const icMenuGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column}ic-typography{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
@@ -13,7 +13,7 @@ const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLE
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { key: 'ec777b0d41cd1bb5d7751e61e702a45341f3080a', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '31d4b7ba6d46a89c8c843654a2ded8ca993b1803', variant: "subtitle-small" }, this.label)), h("span", { key: '3f1472c581431ea8c80dfc79a98b34d6ad2418f2', class: "menu-items-wrapper" }, h("slot", { key: '68c43747e9948fdec7dff7c5e0d2a69d2bc73b62' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: 'b6540d15632b2d798ec6ead8d55fde5bca1e49f6' }))));
+        return (h(Host, { key: 'e80513cbfafcba84a75297272b402bfb60acdf80', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '726deba27f96a3bdb84856d851e484aab1be1301', variant: "subtitle-small" }, this.label)), h("span", { key: 'a383d9a234af9acceb9a746a891c290225dc8e37', class: "menu-items-wrapper" }, h("slot", { key: '60219f7f2cf0ee516c908a5ed3f45c0d27686293' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '85128f561dcc20d70937c690b9bfc56d34b698b8' }))));
     }
     get el() { return this; }
     static get style() { return IcMenuGroupStyle0; }

package/dist/components/ic-menu-item2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as isPropDefined, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
+import { m as isPropDefined, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
 import { c as checkIcon } from './check-icon.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';

package/dist/components/ic-menu2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
-import { J as isMacDevice, o as onComponentRequiredPropUndefined, K as getOptionsWithoutGroupTitlesCount } from './helpers.js';
+import { K as isMacDevice, o as onComponentRequiredPropUndefined, L as getOptionsWithoutGroupTitlesCount } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { c as createPopper, d as defineCustomElement$2 } from './ic-tooltip2.js';
@@ -929,7 +929,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: 'bce19ee8d7929f03d2de173ad6f2b639cd2fbf2c', class: {
+        return (h(Host, { key: '61aef706407716bbd85f087d6baeac4e393f5bb5', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -938,7 +938,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: 'edbb9d969dd8218a45c6d012abf8964fc2acd0a7', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: '5800fadeb848cfad908cdbd2bb7bfd7ecba08811', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -966,7 +966,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '317f18bd8ff88fadf840ccc5666bf7ae7a6b1e65', class: "option-bar" }, h("ic-typography", { key: '32e28e814c9c3d4ac243e2d45cb2487a99a900ba' }, h("p", { key: '6ed28e350ad356ef669b4b6b9f3d8718a7274782' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'e66e1b04732d26ebbc05751eadc49968c11ac92c', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: '3036b8e8b5727e354d45e9ae4a64a5e61b0caf59', class: "option-bar" }, h("ic-typography", { key: 'a797367880dd2a45638c65dcb353e6b4892e5db0' }, h("p", { key: 'ba309efe02198f93aa62329cf99d05e2e538434d' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '785eba9a6e82e745c7f4ccb054a1fbaf87df281e', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/ic-navigation-button.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { b as inheritAttributes, o as onComponentRequiredPropUndefined, L as getElementInheritedTheme, k as getBrandForegroundAppearance, e as IcBrandForegroundEnum, i as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
+import { b as inheritAttributes, o as onComponentRequiredPropUndefined, M as getElementInheritedTheme, l as getBrandForegroundAppearance, e as IcBrandForegroundEnum, i as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -110,11 +110,11 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
             target,
             theme,
         };
-        return (h(Host, { key: '6798f875b7e5ba35703800d95c76a8f0e532f09b', class: {
+        return (h(Host, { key: '6d5b61877075117e4e5a88b0d1edf1cf986f4bcd', class: {
                 "in-side-menu": isMenuMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 dark: parentThemeDark,
-            } }, h("ic-button", Object.assign({ key: '94bb6ce72a9f7ad8298e3244c65abefeae577891', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: '7f9fbb6283627d5eb425067939da08f53e5295b2', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: '3b0766eaf9b37e4b1953868b667c2c1d88eaaead', name: "badge" }))));
+            } }, h("ic-button", Object.assign({ key: 'd1e885683fd648f260bec94656aeb818497899e2', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: 'c3ae147f7bccd4f10f9259d442b86636c1a332ca', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: 'f5f961eb88638804430696e0e5b3424ad3b9ac6c', name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }