@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/{ic-data-entity/test/basic/ic-data-entity.spec.js → ic-data-list/test/basic/ic-data-list.spec.js}

@@ -1,11 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { DataEntity } from "../../ic-data-entity";
-describe("ic-data-entity", () => {
+import { DataList } from "../../ic-data-list";
+describe("ic-data-list", () => {
     it("should render with data-row children", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -14,12 +14,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -27,7 +27,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -39,23 +39,23 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
-    it("should render with small prop", async () => {
+    it("should render with size small", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading" small>
+      <ic-data-list heading="Heading" size="small">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading" class="small" small>
+    <ic-data-list heading="Heading" class="ic-data-list-small" size="small">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -63,21 +63,21 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
     it("should render with a slotted heading", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity>
+      <ic-data-list>
         <ic-typography variant="h3" slot="heading">Heading</ic-typography>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -87,18 +87,18 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity>
+    <ic-data-list>
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3"></ic-typography>
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -113,14 +113,14 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
     it("should render data-row children with slotted content", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
@@ -129,12 +129,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -142,7 +142,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -154,8 +154,8 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
 });
-//# sourceMappingURL=ic-data-entity.spec.js.map
+//# sourceMappingURL=ic-data-list.spec.js.map

package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-list/test/basic/ic-data-list.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;sBAKU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;;sBAWU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataList } from \"../../ic-data-list\";\n\ndescribe(\"ic-data-list\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render with size small\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\" size=\"small\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\" class=\"ic-data-list-small\" size=\"small\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n});\n"]}

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

@@ -455,13 +455,16 @@ video {
   display: flex;
   flex-grow: 1;
   min-width: 0;
+
+  --ic-typography-color: var(--ic-data-list-text-cell);
 }
 
 .label {
   width: 12.5rem;
   min-width: 12.5rem;
   margin-right: var(--ic-space-md);
-  color: var(--ic-color-tertiary-text);
+
+  --ic-typography-color: var(--ic-data-list-text-label);
 }
 
 .value {
@@ -489,10 +492,10 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 .divider {
   margin-top: var(--ic-space-md);
   height: var(--ic-border-width);
-  background-color: var(--ic-architectural-300);
+  background-color: var(--ic-data-list-keyline-cell);
 }
 
-:host(.small) .divider {
+:host(.ic-data-row-small) .divider {
   margin-top: var(--ic-space-xs);
 }
 

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

@@ -19,15 +19,15 @@ export class DataRow {
             const isValue = cell === "value";
             return (h("div", { class: cell }, isSlotUsed(this.el, cell) ? (h("slot", { name: cell })) : (h("ic-typography", { variant: isValue
                     ? "body"
-                    : this.entitySize === "xs"
+                    : this.listSize === "xs"
                         ? "label"
                         : "subtitle-large" }, isValue ? this.value : this.label))));
         };
         this.deviceSize = DEVICE_SIZES.XL;
-        this.entitySize = undefined;
+        this.listSize = undefined;
         this.label = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
+        this.theme = "inherit";
         this.value = undefined;
     }
     disconnectedCallback() {
@@ -48,7 +48,7 @@ export class DataRow {
         var _a;
         const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
         if (rowSize) {
-            this.entitySize =
+            this.listSize =
                 rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
         }
     }
@@ -58,11 +58,12 @@ export class DataRow {
             .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
     render() {
-        const { el, entitySize, hasEndComponent, label, renderCellContent, size, small, value, } = this;
+        const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
         return (h(Host, { class: {
-                ["small"]: small || size === "small",
-                ["breakpoint-medium"]: entitySize === "m",
-                ["breakpoint-xs"]: entitySize === "xs",
+                ["ic-data-row-small"]: size === "small",
+                ["breakpoint-medium"]: listSize === "m",
+                ["breakpoint-xs"]: listSize === "xs",
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { class: "end-component" }, h("slot", { name: "end-component" })))), h("div", { class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
@@ -101,7 +102,7 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -118,28 +119,31 @@ export class DataRow {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "small",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"inherit\""
             },
             "value": {
                 "type": "string",
@@ -163,7 +167,7 @@ export class DataRow {
     static get states() {
         return {
             "deviceSize": {},
-            "entitySize": {}
+            "listSize": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) this.labelEndComponent();\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth + 46;\n    if (rowSize) {\n      this.entitySize =\n        rowSize < DEVICE_SIZES.S ? \"xs\" : rowSize < DEVICE_SIZES.M ? \"m\" : \"xl\";\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.entitySize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      .querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      entitySize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      small,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [\"breakpoint-medium\"]: entitySize === \"m\",\n          [\"breakpoint-xs\"]: entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) this.labelEndComponent();\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth + 46;\n    if (rowSize) {\n      this.listSize =\n        rowSize < DEVICE_SIZES.S ? \"xs\" : rowSize < DEVICE_SIZES.M ? \"m\" : \"xl\";\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.listSize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      .querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      listSize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      theme,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-data-row-small\"]: size === \"small\",\n          [\"breakpoint-medium\"]: listSize === \"m\",\n          [\"breakpoint-xs\"]: listSize === \"xs\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js

@@ -36,12 +36,12 @@ describe("ic-data-row", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should render the label variant of typography when entity size is xs", async () => {
+    it("should render the label variant of typography when list size is xs", async () => {
         const page = await newSpecPage({
             components: [DataRow],
             html: `<ic-data-row label="label"><ic-status-tag variant="success" label="success" slot="value"></ic-status-tag></ic-data-row>`,
         });
-        page.rootInstance.entitySize = "xs";
+        page.rootInstance.listSize = "xs";
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
@@ -58,7 +58,7 @@ describe("ic-data-row", () => {
         expect(page.rootInstance.resizeObserver).toBe(resize);
         page.setContent("");
     });
-    it("should change entity size depending on screen size", async () => {
+    it("should change list size depending on screen size", async () => {
         const page = await newSpecPage({
             components: [DataRow],
             html: `<ic-data-row label="label" value="value"></ic-data-row>`,
@@ -68,7 +68,7 @@ describe("ic-data-row", () => {
         });
         page.waitForChanges();
         page.rootInstance.checkLabelAbove();
-        expect(page.rootInstance.entitySize).toBe("xs");
+        expect(page.rootInstance.listSize).toBe("xs");
     });
 });
 //# sourceMappingURL=ic-data-row.spec.js.map

package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/basic/ic-data-row.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataRow } from \"../../ic-data-row\";\n\ndescribe(\"ic-data-row\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the label slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"><ic-typography slot=\"label\">Label</ic-typography></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render label element if no label provided\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the value slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the end-component slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"test value\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the label variant of typography when entity size is xs\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    page.rootInstance.entitySize = \"xs\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call runResizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    await page.rootInstance.runResizeObserver();\n    page.waitForChanges();\n\n    const resize = new ResizeObserver(() => {\n      page.rootInstance.checkLabelAbove();\n    });\n\n    expect(page.rootInstance.resizeObserver).toBe(resize);\n\n    page.setContent(\"\");\n  });\n\n  it(\"should change entity size depending on screen size\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    Object.defineProperty(\n      page.root.shadowRoot.querySelector(\".data\"),\n      \"clientWidth\",\n      {\n        value: 200,\n      }\n    );\n\n    page.waitForChanges();\n\n    page.rootInstance.checkLabelAbove();\n\n    expect(page.rootInstance.entitySize).toBe(\"xs\");\n  });\n});\n"]}
+{"version":3,"file":"ic-data-row.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/basic/ic-data-row.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataRow } from \"../../ic-data-row\";\n\ndescribe(\"ic-data-row\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the label slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"><ic-typography slot=\"label\">Label</ic-typography></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render label element if no label provided\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row value=\"value\"></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the value slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted content in the end-component slot\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"test value\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"end-component\"></ic-status-tag></ic-data-row>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the label variant of typography when list size is xs\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\"><ic-status-tag variant=\"success\" label=\"success\" slot=\"value\"></ic-status-tag></ic-data-row>`,\n    });\n\n    page.rootInstance.listSize = \"xs\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call runResizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    await page.rootInstance.runResizeObserver();\n    page.waitForChanges();\n\n    const resize = new ResizeObserver(() => {\n      page.rootInstance.checkLabelAbove();\n    });\n\n    expect(page.rootInstance.resizeObserver).toBe(resize);\n\n    page.setContent(\"\");\n  });\n\n  it(\"should change list size depending on screen size\", async () => {\n    const page = await newSpecPage({\n      components: [DataRow],\n      html: `<ic-data-row label=\"label\" value=\"value\"></ic-data-row>`,\n    });\n\n    Object.defineProperty(\n      page.root.shadowRoot.querySelector(\".data\"),\n      \"clientWidth\",\n      {\n        value: 200,\n      }\n    );\n\n    page.waitForChanges();\n\n    page.rootInstance.checkLabelAbove();\n\n    expect(page.rootInstance.listSize).toBe(\"xs\");\n  });\n});\n"]}

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

@@ -457,7 +457,7 @@ video {
   opacity: 0;
 }
 
-:host(.fade-in) {
+:host(.ic-dialog-fade-in) {
   opacity: 1;
 }
 
@@ -486,20 +486,21 @@ video {
     transition: transform 1000s;
   }
 
-  :host(.fade-in) .dialog {
+  :host(.ic-dialog-fade-in) .dialog {
     transform: translateY(0);
     transition: transform var(--ic-easing-transition-slow);
   }
 }
 
-:host(.hidden) {
+:host(.ic-dialog-hidden) {
   display: none;
 }
 
 .dialog {
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-architectural-black);
-  border: var(--ic-border-default);
+  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);
   display: flex;
@@ -543,6 +544,10 @@ video {
   margin-left: auto;
 }
 
+.close-icon > svg {
+  color: var(--ic-dialog-clear-button);
+}
+
 .content-area {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -567,10 +572,6 @@ video {
   position: relative;
 }
 
-.status-alert {
-  margin-bottom: var(--ic-space-xs);
-}
-
 .dialog-controls {
   margin-top: auto;
   padding: var(--ic-space-xs) var(--ic-space-md) 0;
@@ -597,6 +598,14 @@ video {
   padding-bottom: 16px;
 }
 
+.heading ic-typography {
+  --ic-typography-color: var(--ic-dialog-text-primary);
+}
+
+.label ic-typography {
+  --ic-typography-color: var(--ic-dialog-label);
+}
+
 @media (min-width: 800px) {
   :host([size="large"]) .dialog:not(.disable-width-constraint) > .content-area {
     width: 75%;
@@ -624,11 +633,6 @@ video {
 }
 
 @media (max-width: 364px) {
-  .triple-button {
-    flex-direction: column;
-    gap: var(--ic-space-xs);
-  }
-
   .dialog-control-button {
     width: unset;
   }