@ukic/web-components 3.1.0 → 3.2.0

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

@@ -524,6 +524,7 @@ video {
 :host(.ic-button-variant-primary) ::slotted(a),
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
   --ic-typography-color: var(--ic-button-primary-text);
+
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-primary-background) !important;
 }
@@ -544,6 +545,7 @@ video {
 :host(.ic-button-variant-icon-primary) .button:active {
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-primary-background-pressed);
+
   --button-loading-inner-color: var(--ic-button-primary-text);
   --button-loading-outer-color: var(--ic-button-primary-background-pressed);
 }
@@ -562,7 +564,9 @@ video {
 :host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),
 :host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {
   background: var(--ic-button-primary-background-disabled) !important;
+
   --ic-typography-color: var(--ic-button-primary-text-disabled) !important;
+
   color: var(--ic-button-primary-text-disabled) !important;
 }
 
@@ -596,6 +600,7 @@ video {
 :host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,
 :host(.ic-button-variant-icon-primary.monochrome) .button:active {
   background-color: var(--ic-button-primary-background-pressed-monochrome);
+
   --button-loading-inner-color: var(--ic-button-primary-text-monochrome);
   --button-loading-outer-color: var(--ic-button-primary-background-monochrome);
 }
@@ -633,6 +638,7 @@ video {
 :host(.ic-button-variant-icon-secondary) ::slotted(a) {
   border: var(--ic-border-width) solid var(--ic-button-secondary-border) !important;
   color: var(--ic-button-secondary-text) !important;
+
   --ic-typography-color: var(--ic-button-secondary-text) !important;
 }
 
@@ -672,6 +678,7 @@ video {
     var(--ic-button-secondary-background-pressed-active)
   ) !important;
   color: var(--ic-button-secondary-text-pressed-active);
+
   --button-loading-inner-color: var(--ic-button-secondary-border-pressed);
   --button-loading-outer-color: var(
     --ic-button-secondary-background-pressed-active
@@ -795,6 +802,7 @@ video {
   ) !important;
   border-color: var(--ic-button-secondary-border-pressed-monochrome);
   color: var(--ic-button-secondary-text-pressed-monochrome);
+
   --button-loading-inner-color: var(
     --ic-button-secondary-text-pressed-monochrome
   );
@@ -889,6 +897,7 @@ video {
 :host(.ic-button-variant-tertiary) ::slotted(a),
 :host(.ic-button-variant-icon-tertiary) ::slotted(a) {
   color: var(--ic-button-tertiary-text-active);
+
   --ic-typography-color: var(--ic-button-tertiary-text-active);
 }
 
@@ -911,6 +920,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.ic-button-loading) .button {
   background-color: var(--ic-button-tertiary-background-pressed-active);
   color: var(--ic-button-tertiary-text-pressed-active);
+
   --button-loading-inner-color: var(--ic-button-tertiary-text-pressed-active);
   --button-loading-outer-color: var(--ic-button-tertiary-background-pressed);
 }
@@ -940,6 +950,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.monochrome) .button,
 :host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {
   color: var(--ic-button-tertiary-text-monochrome);
+
   --ic-typography-color: var(--ic-button-tertiary-text-monochrome);
 }
 
@@ -962,6 +973,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button {
   background-color: var(--ic-button-tertiary-background-pressed-monochrome);
   color: var(--ic-button-tertiary-text-pressed-monochrome);
+
   --button-loading-inner-color: var(
     --ic-button-tertiary-text-pressed-monochrome
   );
@@ -1001,7 +1013,9 @@ video {
 :host(.ic-button-variant-destructive) ::slotted(a),
 :host(.ic-button-variant-icon-destructive) ::slotted(a) {
   color: var(--ic-button-destructive-text) !important;
+
   --ic-typography-color: var(--ic-button-destructive-text) !important;
+
   background-color: var(--ic-button-destructive-background) !important;
   text-transform: uppercase !important;
 }
@@ -1021,6 +1035,7 @@ video {
 :host(.ic-button-variant-icon-destructive.ic-button-loading) .button {
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-destructive-background-pressed);
+
   --button-loading-inner-color: var(--ic-button-primary-text);
   --button-loading-outer-color: var(--ic-button-destructive-background-pressed);
 }
@@ -1376,11 +1391,6 @@ div.right-icon {
   gap: var(--ic-space-xs);
 }
 
-:host(.ic-button-variant-icon) .icon-container {
-  width: var(--ic-space-lg) !important;
-  height: var(--ic-space-lg) !important;
-}
-
 :host(.button-variant-icon) .button,
 :host(.button-variant-icon) ::slotted(a) {
   color: var(--button-default);
@@ -1452,12 +1462,14 @@ div.right-icon {
 :host(.clear-button) .button:not(:active):focus ::slotted(svg) {
   background-color: var(--ic-atoms-input-clear-button-focus-inner);
   color: var(--ic-button-primary-text);
+
   /* border: var(--ic-atoms-input-clear-button-focus-outer); */
 }
 
 :host(.menu-close-button) ::slotted(svg) {
   --icon-height: 0.875rem;
   --icon-width: 0.875rem;
+
   color: var(--ic-top-navigation-icon-active);
 }
 
@@ -1565,6 +1577,7 @@ slot[name="router-item"]::slotted(a) {
   ::slotted(a) {
     border: 0.125rem solid transparent !important;
   }
+
   .search-submit-button ::slotted(a),
   .ic-button-variant-icon ::slotted(a),
   .clear-button ::slotted(a),

package/dist/collection/components/ic-button/ic-button.stories.js

@@ -2234,58 +2234,35 @@ export const PlaygroundWithIcon = {
 
 export const Loading = {
   render: () => html`
-      <div style="padding: 6px">
-        <ic-button variant="primary" loading"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button
-          variant="primary"
-          loading
-          theme="dark"
-          >Button</ic-button
-        >
-      </div>
-      <div
-        style="background-color:#17191C; padding:6px 10px; width:fit-content"
-      >
-        <ic-button variant="primary" loading theme="light"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button variant="secondary" loading>Button</ic-button>
-      </div>
-      <div style="padding: 6px">
-        <ic-button variant="secondary" loading theme="dark"
-          >Button</ic-button
-        >
-      </div>
-      <div
-        style="background-color:#17191C; padding:6px 10px; width:fit-content"
-      >
-        <ic-button variant="secondary" loading theme="light"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button variant="tertiary" loading>Button</ic-button>
-      </div>
-      <div style="padding: 6px">
-        <ic-button variant="tertiary" loading theme="dark"
-          >Button</ic-button
-        >
-      </div>
-      <div
-        style="background-color:#17191C; padding:6px 10px; width:fit-content"
-      >
-        <ic-button variant="tertiary" loading theme="light"
-          >Button</ic-button
-        >
-      </div>
-      <ic-button variant="destructive" loading>Button</ic-button>
-    `,
+    <div style="padding: 6px">
+      <ic-button variant="primary" loading>Button</ic-button>
+    </div>
+    <div style="padding: 6px">
+      <ic-button variant="primary" loading theme="dark">Button</ic-button>
+    </div>
+    <div style="background-color:#17191C; padding:6px 10px; width:fit-content">
+      <ic-button variant="primary" loading theme="light">Button</ic-button>
+    </div>
+    <div style="padding: 6px">
+      <ic-button variant="secondary" loading>Button</ic-button>
+    </div>
+    <div style="padding: 6px">
+      <ic-button variant="secondary" loading theme="dark">Button</ic-button>
+    </div>
+    <div style="background-color:#17191C; padding:6px 10px; width:fit-content">
+      <ic-button variant="secondary" loading theme="light">Button</ic-button>
+    </div>
+    <div style="padding: 6px">
+      <ic-button variant="tertiary" loading>Button</ic-button>
+    </div>
+    <div style="padding: 6px">
+      <ic-button variant="tertiary" loading theme="dark">Button</ic-button>
+    </div>
+    <div style="background-color:#17191C; padding:6px 10px; width:fit-content">
+      <ic-button variant="tertiary" loading theme="light">Button</ic-button>
+    </div>
+    <ic-button variant="destructive" loading>Button</ic-button>
+  `,
 
   name: "Loading",
 };

package/dist/collection/components/ic-card-vertical/ic-card-vertical.css

@@ -481,18 +481,22 @@ button {
   ::slotted(svg) {
     fill: var(--ic-card-icon);
   }
+
   &.monochrome {
     border: var(--ic-border-width) solid var(--ic-card-border-monochrome);
   }
+
   &.fullwidth {
     width: 100%;
   }
+
   &.clickable {
     &:hover {
       background-color: var(--ic-card-background-hover);
       border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);
       cursor: pointer;
     }
+
     &.focussed,
     &:focus {
       background-color: var(--ic-card-background-hover);
@@ -500,22 +504,28 @@ button {
       outline: var(--ic-hc-focus-outline);
       border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);
     }
+
     &:active {
       background-color: var(--ic-card-background-pressed);
       box-shadow: var(--ic-border-focus);
-
       .card-title {
         text-decoration: none;
       }
     }
+
     .card-title {
       --ic-typography-color: var(--ic-card-clickable-text);
-
       color: var(--ic-card-clickable-text);
       text-decoration: underline;
       text-decoration-thickness: var(--ic-space-1px);
+      margin-bottom: var(--ic-space-xxs);
+    }
+    .interaction-button,
+    .icon {
+      margin-bottom: var(--ic-space-xxs);
     }
   }
+
   &.disabled {
     border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);
 
@@ -524,12 +534,14 @@ button {
     .card-title {
       --ic-typography-color: var(--ic-card-disabled-text);
     }
+
     .card-title {
       text-decoration: underline;
       text-decoration-thickness: var(--ic-space-1px);
       text-decoration-color: var(--ic-card-disabled-text);
       color: var(--ic-card-disabled-text);
     }
+
     ::slotted(svg) {
       fill: var(--ic-card-icon-disabled);
     }
@@ -552,7 +564,7 @@ button {
 .card.clickable.focussed .card-title {
   display: inline-block;
   border-bottom: 0.25rem solid !important;
-  margin-bottom: -0.25rem !important;
+  margin-bottom: 0 !important;
   text-decoration: none;
 }
 
@@ -564,7 +576,7 @@ button {
     text-decoration-thickness: 25%;
     text-underline-offset: 25%;
     border-bottom: 0 !important;
-    margin-bottom: 0 !important;
+    margin-bottom: 0.25rem !important;
   }
 }
 
@@ -634,9 +646,11 @@ button {
   &:hover {
     background-color: var(--ic-card-background-hover);
   }
+
   &:focus {
     box-shadow: var(--ic-border-focus);
   }
+
   &:active:not(:focus) {
     background-color: var(--ic-card-background-pressed);
   }
@@ -672,12 +686,14 @@ button {
     ::slotted(svg) {
       fill: currentcolor;
     }
+
     &.disabled {
       border-color: GrayText !important;
 
       ::slotted(svg) {
         fill: GrayText !important;
       }
+
       .card-message,
       .subheading,
       .card-title {

package/dist/collection/components/ic-card-vertical/ic-card-vertical.js

@@ -150,19 +150,19 @@ export class CardVertical {
             rel: rel,
             target: target,
         };
-        return (h(Host, { key: 'aeff3ef22b085acbf30dacb5d3ae0167451044b9', class: {
+        return (h(Host, { key: '77eb6d8d39531f4eb5436fd03c38b1d4a8e4e14e', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h(Component, Object.assign({ key: 'a451e5f53149283ee77878ccc3e699beae669f24', class: {
+            } }, h(Component, Object.assign({ key: 'f602be4f06734c5fdca62b0f738b02f81988a823', class: {
                 card: true,
                 clickable: !!clickable && !disabled,
                 disabled: !!disabled,
                 fullwidth: !!fullWidth,
                 focussed: isFocussed,
                 monochrome: monochrome,
-            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: '2ec35ab8d6e1224c0a393c92a72e403e4c5fc8fc', class: "image-top" }, h("slot", { key: 'c859ae1e242284b586df2ce7627c316021b8ef54', name: "image-top" }))), h("div", { key: '55f21501b3d95e1f5bf3a69542dab57d00379e63', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'f95e7224d6e8548f33a8861025a1651a3bc953a4', class: "icon" }, h("slot", { key: '1102f6f88e830613365cb0bfe3e5c4481b3a207e', name: "icon" }))), h("div", { key: '3122872ef284640debbf7182d36f9cd4c6032ae4', class: "card-title" }, h("slot", { key: 'f51213257b0ff6e195852ca006e9cba35103f210', name: "heading" }, h("ic-typography", { key: '7d82fce416b7579ac23e2154ef512bd8f3181bc3', variant: "h4" }, h("p", { key: 'ad083279b8f012f16d67c182c37bcc6383710ba5' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: 'bb47af0b373f295cb1bcd1b72df6c325e257c2ed', class: "interaction-button" }, h("slot", { key: 'fd0fc056e51febf6d9abe76d7ffb0773836e52d3', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '32851c6c59b9ee76aa490210f5888fe410067ca3', class: "subheading" }, h("slot", { key: '5757fd2fd2618f03fee208b855384c29861cadc6', name: "subheading" }, h("ic-typography", { key: '1f206ca1eaf0bcd5693abf3fc3f97303582a5deb', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'ceef939617ce12be984f15673e9ef4e71110234c', class: "adornment" }, h("slot", { key: '127e2dfa77b74a19070e90361d26fe1358539ca2', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '0cbc0b6a9638969db6fabcde40ad46044afc4b88', class: "image-mid" }, h("slot", { key: '3e8ae6e25570ed03e7fea0ae4fdd7a779d3022b1', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '9da59f1aeaa1fcf4bc2a0aa1bd50d3f86faa2af7', class: "card-message" }, message && (h("ic-typography", { key: '4620229c479b782ad5ee0c8e3a7acdf6a8a70d7b', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '959e101cc933319cf297d0f0ebbd46299a24cbd5', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: 'c4263a3d5f8e22f31cf0e55a868dbf0f52b00692', class: "interaction-area" }, h("div", { key: 'bd5e1d3ff137004ff5c696f611dae1bfefd26e1a', class: "interaction-controls" }, h("slot", { key: '5985495f8f12c825aafcab517d3add5f9741d460', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: 'e3b12f780303019b7f95ce5a98d7b7194c242c9a', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: '9857a37a37571bd21f500527149ed8bc3806c4f4', class: {
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: 'e317b5bb6cac2055d7a3d0e1954e7ac77d162525', class: "image-top" }, h("slot", { key: 'e26132f7a4c806f24dce618be1a9b442b6b5caba', name: "image-top" }))), h("div", { key: '6a0efc36b72278004600f4340569c6f8dc8d11ca', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '837470df831d655b61bc10f5b83efd02d548a017', class: "icon" }, h("slot", { key: '57a32c1e3fc6ad4739c187ebe9c8ff587c9d59f6', name: "icon" }))), h("div", { key: '06a198599be0ce2c5bda505b73fedc2d6d27f8e6', class: "card-title" }, h("slot", { key: '8e62184408b3887c340e0adb9f26b3b0a76cd287', name: "heading" }, h("ic-typography", { key: '440fe573c8ef9b176e449a10c802c1648d818337', variant: "h4" }, h("p", { key: '82ea89e26ecc579d6cdc4a153fbb25025906c018' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: '6196db67571d24d6a2e45834e00fc44745613a10', class: "interaction-button" }, h("slot", { key: 'b8a64955d174b510f59c6425fd40c10c042a8d26', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '55de98b4c457eb503ee3b6a45eaccff3dc5d9d0c', class: "subheading" }, h("slot", { key: '4560efc9da8eef089edd648f38668bb21c6ca4b6', name: "subheading" }, h("ic-typography", { key: 'b24a33d8d94f2c910a64d866f4da1664f6ff10a3', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: '6766128835ebd7944b228ef4a70b47af7aa46658', class: "adornment" }, h("slot", { key: '9aa586884ad3a69c936a9ff7c831f13afb63696e', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: 'e0b686295c0b455b1a33bb9dba1d16d973101b6c', class: "image-mid" }, h("slot", { key: '581dada577f03ff0c5c17d9e55d69124b71fbe96', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '26616626b87d6c5a36705aba4de57b8ec9b68c88', class: "card-message" }, message && (h("ic-typography", { key: 'bc14188c6005720fe4412ba375b7044f851bbcb3', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '6d5a43f06888b83703c33b41555676ccad3a8aaa', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '7896f819a4caf027eb0e883875b4a4a1ee4174da', class: "interaction-area" }, h("div", { key: '4109dcf04ac202f9e8ba1568c96e1acd7c7675fb', class: "interaction-controls" }, h("slot", { key: '42f5ba00458637177e62621852ecad1e974dd209', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: 'd4049e70edb1f6618d2f394e4f5c4f78a38b2cef', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: 'eb6363669ab6002ffe50fb8ea81fca63790781fb', class: {
                 "toggle-button": true,
                 [`toggle-button-${this.areaExpanded ? "expanded" : "closed"}`]: true,
-            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: '080d0198d37d939cfc506abc5933caac7eaa383d', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '6c9b5dd6bfa46d466034255231047b2682e19f96', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '1f68304dd15e605320258bf8d14d2df3b0caf344', name: "badge" }))));
+            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: '54cf44b01090436c67a2dfa3b1265e924a3142b8', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '5cc85bf2a225f6a6f1d7436f9086a5d43bf43ddf', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '20734165707440fc4ed806a179c0b7c249cd1dcf', name: "badge" }))));
     }
     static get is() { return "ic-card-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-checkbox/ic-checkbox.css

@@ -567,11 +567,13 @@ video {
 .checkbox-label {
   padding-left: var(--ic-space-sm);
   color: var(--ic-checkbox-text);
+
   --ic-typography-color: var(--ic-checkbox-text);
 }
 
 :host(.ic-checkbox-disabled) .checkbox-label {
   color: var(--ic-checkbox-text-disabled);
+
   --ic-typography-color: var(--ic-checkbox-text-disabled);
 }
 
@@ -708,7 +710,7 @@ video {
 }
 
 .branch-corner:dir(rtl) {
-  border-radius: 0 0 0.188rem 0;
+  border-radius: 0 0 0.188rem;
   border-right: 0.125rem solid var(--ic-action-default);
   border-left: none;
 }

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

@@ -109,17 +109,17 @@ export class Checkbox {
         checked
             ? renderHiddenInput(true, el, name, checked && value, disabled)
             : removeHiddenInput(el);
-        return (h(Host, { key: '657eacf1576a595f2a7078cf14a07e39603ddaec', class: {
+        return (h(Host, { key: '1b4f1fd6e5e8848ef63134541cbc314fe5976b2b', class: {
                 "ic-checkbox-disabled": !!disabled,
                 [`ic-checkbox-${size || parentElementSize}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '2f9ab7ae4fa7adfca5d9143821d6baae03492562', class: "container" }, displayIndeterminate && h("div", { key: 'c04e36e2ff4b15d96a6a1bf204e0ae9c57f2d3e3', class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { key: '48b5e0da871b6cec1667c022027bf8cdea1fcc15', class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", { key: 'bf871a24d38ddeeb0b23a7cae6c65982ae69fc6a' }, "checkmark icon"), h("path", { key: 'ad9b4ee3132636a9a938fabc072796f2820df63f', d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { key: '262d0be4ec5ed6e7f7ac701f8b8800f1fbd91825', role: "checkbox", class: {
+            } }, h("div", { key: '3ec8b6cc45dcf275c6340c2d7321e335c9383ac5', class: "container" }, displayIndeterminate && h("div", { key: 'd38202c75ef2f3a90a8b57efcb4030fc222e1038', class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { key: '134ea738eb2858a4a27ed8792edb7668790d59a7', class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", { key: 'e8113684e52bb9e6b66200886a8aef0e4eeeaf28' }, "checkmark icon"), h("path", { key: '342f98d89977388cfabb77fdf08cb4ecb7d7cc14', d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { key: '1b0ad31864fc8d7b7d40bc50e975162cf387ae01', role: "checkbox", class: {
                 checkbox: true,
                 checked: !!checked,
                 indeterminate: !!displayIndeterminate,
-            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { key: 'e52458082502589354a8e1b5a9b975629ddd22a8', class: "checkbox-label", variant: "body" }, h("label", { key: 'e7099f15c2055bffb2b4c79a2e579731bfb4f517', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: '87c419e79ece414a7ffe59f91442fd8ac7c5e570', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'dedde96cef590e12940cd60878d80121df0f7dd8', class: "branch-corner" })), h("div", { key: 'fec451e9f5705f32fc6c0083f9b2c924940a2c18' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '477d00ba3c2249c0cbaef7240ecdaddb59fde9fc', variant: "caption" }, h("p", { key: 'a95ddf7079b19b3f6adb5855a5ed334cc35b5dcc', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '4663bb912a77f3abb675959e37b58026aaba522d', class: {
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { key: '4e0aacf944928ed74162bb779ea2aa7f69cfd88d', class: "checkbox-label", variant: "body" }, h("label", { key: 'cd6a349ecf42e327806161ff4eb38680a4b9d91b', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: 'd658a44ea59a92e254ec4d5e097b43205c81d06a', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'ed31c233420f6f8c88951e7d208c7bcc418d382a', class: "branch-corner" })), h("div", { key: '9cffdb6170b03336348940da135cb8c686235610' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'c6b1518d6f7641afaba0befc8de0a8ccb23cc7e9', variant: "caption" }, h("p", { key: '931a9b34320375e0ff79014aa9ae4e9100a3c860', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '1d1034308c125fd0ec86a5bcfe91103742141b8c', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { key: 'fe74a16f4fd159051e7a0f73893dfc77f39c45d7', name: "additional-field" })))))));
+            } }, h("slot", { key: '6b3c352f0fb38399cfdea480687fc69d39358e7a', name: "additional-field" })))))));
     }
     static get is() { return "ic-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js

@@ -89,13 +89,13 @@ export class CheckboxGroup {
     render() {
         const { disabled, helperText, hideLabel, label, name, required, size, theme, validationStatus, validationText, } = this;
         const describedBy = getInputDescribedByText(name, helperText !== "", validationStatus !== "");
-        return (h(Host, { key: '152df45d817eabf2500dca22ab8e6da41014ffff', class: {
+        return (h(Host, { key: '9b8f671f38c8f92faee8e11760f8a0cd134b1073', class: {
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-checkbox-group-disabled`]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, (validationStatus === "error" || required || hideLabel) && (h("span", { key: '75545ad8c0f523678c4e807997b883f02886e5d8', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: 'c5b762a9785cb74b103c4d9b2cfb370402474682', id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
+            } }, (validationStatus === "error" || required || hideLabel) && (h("span", { key: '2946ec438a1086a641cd0116468cfa5d765388ac', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '9a55837be6b839d11d555a5434f1ce1bc20fb2c9', id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
                 ? "screenReaderOnlyText"
-                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: 'f8130ee3075ff8015cdfcd9707c2ca69e572861e' }, h("ic-input-label", { key: '114c01d4dcedb30e1561b24f7a42984a644eee30', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), h("div", { key: 'c9487637c6f2a8cc8e6bc585d2558602395fdcb7', class: "checkboxes-container" }, h("slot", { key: '6966041e052295547e9046f617df2446f8b02612' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '4a1c97011b1802d53478e30cfa877002cbf63df9', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '4fb8b826e1bcd293c7952ecce033758f0cd16cc3' }, h("ic-input-label", { key: 'c2e149bd304c9722fa874d489f0ed5141ce216fc', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), h("div", { key: 'af7929cc1b1aa0cb68a4c154c2847d0eb1486726', class: "checkboxes-container" }, h("slot", { key: 'da09cbc97224437899f4fd0ed9c9b79149b76963' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '2187e8455d81cfda15f962182f12c17180bba4c8', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     static get is() { return "ic-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class Chip {
     }
     render() {
         const { label, variant, size, dismissible, visible, disabled, hovered, theme, customColorClass, dismissLabel, } = this;
-        return (h(Host, { key: 'e76862f8ec45a627310e1320428233ce991b369f', class: {
+        return (h(Host, { key: '1b4360dcf0ba51576a0ee9d58d65913df020f369', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`${customColorClass}`]: variant === "filled" && customColorClass !== "",
-            } }, visible && (h("div", { key: 'bd989ab476ed0b9d2e70d3fb9bb6975d2a27269e', class: {
+            } }, visible && (h("div", { key: '8c1f8604092bf2f2339c30b3dfb4a1ea7c39dbeb', class: {
                 chip: true,
                 [`${variant}`]: true,
                 [`${size}`]: true,
@@ -105,7 +105,7 @@ export class Chip {
                 dismissible: !!dismissible,
                 hovered,
                 "non-transparent": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '8cded614ffc6bc56f3d088566b78649937db654e', class: "icon" }, h("slot", { key: '57c1b05d001b05cede1c7e303e1dd5fed3821960', name: "icon" }))), h("ic-typography", { key: 'fb029ac73db85d215daea22076556af4b8defb58', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", { key: '4a72a0de18f081bae539218685a2f5146faf6327' }, label)), dismissible && (h("ic-tooltip", { key: '80235dea1c088c1b69d17f8b70b67b656488f8c0', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": !!disabled } }, h("button", { key: '280bebf2c76b393684c52bf6df60ea460ef16e6a', id: "dismiss-icon", class: "dismiss-icon", "aria-label": `${dismissLabel} ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '10a315b184301ddca25290d5ad216744ad6a2a72', name: "badge" })))));
+            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '52ac64960f90b3b68208ec75e69e208be58f3eb4', class: "icon" }, h("slot", { key: '142815de4c40164de8ec4a851be5d686a927b4be', name: "icon" }))), h("ic-typography", { key: '1e1e9db4c315555021f139dad5569555ec9c3aee', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", { key: '62498dfec69836cb26e3ae48d309f3b83e28c480' }, label)), dismissible && (h("ic-tooltip", { key: '188618ceeae1160eaba1a4b54c82e8855b1c52e4', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": !!disabled } }, h("button", { key: '851b349f8928a4f09e0d78a743ef781209d6b0d8', id: "dismiss-icon", class: "dismiss-icon", "aria-label": `${dismissLabel} ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'b43d3e23d56d14044056537d89732d4d07eb2b30', name: "badge" })))));
     }
     static get is() { return "ic-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js

@@ -40,10 +40,10 @@ export class ClassificationBanner {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { key: 'cee7ae1c9cdc1c2bab384918876cde5572405b06', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: '18350307e272673d4d67e4f4fb22ebbf20081269', "aria-label": "Protective marking", class: {
+        return (h(Host, { key: 'f30aac02756628e8538572d0b2cab67b0ffc4b75', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: '5eda99cbdf376e20ad9ed03fc5c7fc515805c6da', "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
-            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: '82ce49bb6763c694396f92c67dfd28943280fd1e', variant: "caption-uppercase" }, classification === "default"
+            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: '3f094aa6b0ed00ec4f70858a81a030b2599829f9', variant: "caption-uppercase" }, classification === "default"
             ? classificationText[classification]
             : `${upTo ? "up to" : ""} 
                ${country} 

package/dist/collection/components/ic-data-list/ic-data-list.js

@@ -18,10 +18,10 @@ export class DataList {
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { key: 'c4a30c18b943f01381d09d12457c586fd010ee45', class: {
+        return (h(Host, { key: 'c66609f65612dca067e70b5762d7eeb797dd2121', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '1b977ecea27c3b39fc27713c36c04fe3b4a7303e', class: "heading", id: "data-list-heading" }, h("slot", { key: '85c36f6addbade62bf7b42c480c49f05881a95aa', name: "heading" }, h("ic-typography", { key: '7b558c8390953166ebfe33c4b96704d1065a7557', variant: "h3" }, heading))), h("div", { key: '26147d650228026e2650a24322ce251b09975a32', class: "divider" }), h("ul", { key: '37bff4526101ecef5d5daa012625725d713f180d', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '8065217df655c40a888748fae7382b525e0fb047' }))));
+            } }, h("div", { key: '685663251c565cb665c03e9bd39e1d5b2f7ef73b', class: "heading", id: "data-list-heading" }, h("slot", { key: 'e81970054a2053f05f6c0ef378e2509bb602da65', name: "heading" }, h("ic-typography", { key: '860b07bd25a11f7f6a938aab5cbae0c5802bea3e', variant: "h3" }, heading))), h("div", { key: 'c004429938c7c71ac70ee106486f75193cffc2ca', class: "divider" }), h("ul", { key: 'b9e010a5703ecaf75ce3b1cf396901b26618a34a', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '684b99425193c3a5e306b67e235b7d85e1802fce' }))));
     }
     static get is() { return "ic-data-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -68,12 +68,12 @@ export class DataRow {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (h(Host, { key: '9d08ae62826d35bd401020ba98068b96c81f6fa5', class: {
+        return (h(Host, { key: '3cfe27bfa3e8e0a563450e3842c31e50a78fcb28', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, h("div", { key: 'ba92ceb189252d76f4ad43dca48b7092c9172a2e', class: "data" }, h("div", { key: '29272fb6366444499d5e25864a81e64cc43c113c', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'fc83095282fc9e82d57edf8ee94b2d6fa3f48eb6', class: "end-component" }, h("slot", { key: '8e55af6d6c919f89b4b780fe254371f77700debb', name: "end-component" })))), h("div", { key: 'ab54a6f84262b3ccf9f351b37c71efaf6810344a', class: "divider" })));
+            }, role: "listitem" }, h("div", { key: '348b7ebe1cec0baab24213e9cc468a7e2274ae31', class: "data" }, h("div", { key: 'a2d9d409a312f20b259a40a85ce37b8928e8da06', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'c7f9583403acf4041eebe4b26ff417b453fe07db', class: "end-component" }, h("slot", { key: '837641d249f27635ece7e1eb6505d3e4dbf5492b', name: "end-component" })))), h("div", { key: '9f39724a36e05428a979a589bbed4a09fa2043e0', class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-dialog/ic-dialog.css

@@ -499,7 +499,9 @@ video {
 .dialog {
   background-color: var(--ic-dialog-background);
   color: var(--ic-dialog-text-primary);
+
   --ic-typography-color: var(--ic-dialog-text-primary);
+
   border: var(--ic-space-1px) solid var(--ic-dialog-border);
   border-radius: var(--ic-border-radius);
   padding: var(--ic-space-xs) 0 var(--ic-space-md);
@@ -610,7 +612,6 @@ video {
   .dialog {
     width: 100vw;
     height: 100vh;
-    transform: translateY(-5rem);
     max-width: none;
     max-height: none;
     box-sizing: border-box;

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

@@ -334,7 +334,7 @@ export class Dialog {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;
-        return (h(Host, { key: '2920aac3b3891cae0e6575c735e507c4c76752f9', class: {
+        return (h(Host, { key: '4bdf6778197f347e18d1c6d238db6e654672ea71', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,

package/dist/collection/components/ic-divider/ic-divider.css

@@ -1,23 +1,29 @@
 /**
   * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. 
   */
+
 /**
   * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.
   */
+
 /**
   * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
   */
 
 /* IC-DIVIDER COLORS */
+
 /**
   * @internal @prop --ic-divider-background
   */
+
 /**
   * @internal @prop --ic-divider-background-monochrome
   */
+
 /**
   * @internal @prop --ic-divider-label
   */
+
 /**
   * @internal @prop --ic-divider-label-monochrome
   */
@@ -250,6 +256,7 @@ hr,
 
 :host(.ic-divider-vertical) .ic-divider-label {
   text-align: center;
+  max-width: var(--ic-divider-label-width, 20rem);
 }
 
 :host() .ic-divider-label-container {
@@ -258,10 +265,6 @@ hr,
   max-width: var(--ic-divider-label-width, max(20rem, 60%));
 }
 
-:host(.ic-divider-vertical) .ic-divider-label {
-  max-width: var(--ic-divider-label-width, 20rem);
-}
-
 :host(.ic-divider-vertical) .ic-divider-label-container {
   max-width: var(--ic-divider-label-width, 20rem);
 }

package/dist/collection/components/ic-empty-state/ic-empty-state.js

@@ -37,11 +37,11 @@ export class EmptyState {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (h(Host, { key: 'd8dbd02105f4b01a468436fd73ccd4ddec2a4cf1', class: {
+        return (h(Host, { key: '4bb35d1c3476b88cc58e952b1b8785e4425d5339', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'd7bed2bb22a41377f6c9032660bc62f79294510c', name: "image" }), h("div", { key: '64df9d8fb5ffbb9724a2e87a67eed03526564527' }, h("slot", { key: '5fee4dfbeef7272bcd423c7fb2bfc49e5e557718', name: "heading" }, h("ic-typography", { key: '523cac0cce5c01cca9540396b95f0ab13d0ef9cd', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '904f2c3ceeeef991a099a4fc0521de002c6e8fc3', name: "subheading" }, h("ic-typography", { key: '6eb71c04bfae24d0ece644cea3730251ecd38e77', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '6dc1f5e4e3071b5c0277c993502f1f043b247330', name: "body" }, h("ic-typography", { key: 'f60da219bd12eda8df1229eba9ae9904458e4692', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '73247068a45635e5e64d513239ada3e97a4a4302', class: "action-area" }, h("slot", { key: '19a448208f663a595f5a81a28b89834d0c62e78b', name: "actions" })))));
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: '9e87ed9f746d37f57505a75c62b10279b31ef54e', name: "image" }), h("div", { key: '4f94dc11d843660d3fecd976fa71f9c57644c89b' }, h("slot", { key: 'be23c55a8dc832904fbae342890d2a3d2d74ae85', name: "heading" }, h("ic-typography", { key: '52bf3dca695fecff3e5d650bd81db23d09665258', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '7ed10d78475ac8b9c3f5a084a1294ad1be180f15', name: "subheading" }, h("ic-typography", { key: '5772d056578a64a951178c3c3026b36d4b316496', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '14a8815b51a06521642921f09fa8346483522e84', name: "body" }, h("ic-typography", { key: 'bca780cc2275e81d4e25bae45f5065f6fab3bcd5', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: 'd6c0f61a358c1d0c86c4da922ed0504ffdc8228f', class: "action-area" }, h("slot", { key: 'ac150a34e883376bfee43a6edbeb8992c3bc3f96', name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }