@ukic/web-components 3.0.0 → 3.2.0

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

@@ -452,6 +452,8 @@ video {
   width: 100%;
   height: var(--ic-space-lg);
   z-index: var(--ic-z-index-classification-banner);
+
+  --ic-typography-color: currentcolor;
 }
 
 :host(.ic-classification-banner-inline) {
@@ -469,24 +471,28 @@ video {
 }
 
 .default {
-  background-color: var(--ic-classification-not-set);
-  color: var(--ic-classification-not-set-foreground);
+  background-color: var(--ic-classification-banner-not-set);
+  color: var(--ic-classification-banner-text-inverted);
+}
+
+.official {
+  background-color: var(--ic-classification-banner-official);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
-.official,
 .official-sensitive {
-  background-color: var(--ic-classification-official);
-  color: var(--ic-classification-official-foreground);
+  background-color: var(--ic-classification-banner-official-sensitive);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .secret {
-  background-color: var(--ic-classification-secret);
-  color: var(--ic-classification-secret-foreground);
+  background-color: var(--ic-classification-banner-secret);
+  color: var(--ic-classification-banner-text);
 }
 
 .top-secret {
-  background-color: var(--ic-classification-top-secret);
-  color: var(--ic-classification-top-secret-foreground);
+  background-color: var(--ic-classification-banner-top-secret);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .offscreen {
@@ -497,8 +503,12 @@ video {
   text-transform: none;
 }
 
+.offscreen:dir(rtl) {
+  right: -9999px;
+}
+
 @media (forced-colors: active) {
   .classification-banner {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 }

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

@@ -2,16 +2,31 @@ import { h, Host } from "@stencil/core";
 const classificationText = {
     default: "protective marking not set",
     official: "official",
-    "official-sensitive": "official sensitive",
+    "official-sensitive": "official-sensitive",
     secret: "secret",
     "top-secret": "top secret",
 };
 export class ClassificationBanner {
     constructor() {
+        /**
+         * The additional information that will be displayed after the classification.
+         */
         this.additionalSelectors = "";
+        /**
+         * The classification level to be displayed - also determines the banner and text colour.
+         */
         this.classification = "default";
+        /**
+         * The optional text that will be displayed before classification to specify relevant country/countries.
+         */
         this.country = "uk";
+        /**
+         * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
+         */
         this.inline = false;
+        /**
+         * If `true`, "Up to" will be displayed before the classification and country.
+         */
         this.upTo = false;
     }
     render() {
@@ -25,10 +40,10 @@ export class ClassificationBanner {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { class: { ["ic-classification-banner-inline"]: inline } }, h("banner", { "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", { 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} 
@@ -54,7 +69,7 @@ export class ClassificationBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -63,6 +78,8 @@ export class ClassificationBanner {
                     "tags": [],
                     "text": "The additional information that will be displayed after the classification."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "additional-selectors",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -72,7 +89,7 @@ export class ClassificationBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "IcProtectiveMarkings",
-                    "resolved": "\"default\" | \"official\" | \"official-sensitive\" | \"secret\" | \"top-secret\"",
+                    "resolved": "\"default\" | \"official\" | \"official-sensitive\" | \"secret\" | \"top-secret\" | undefined",
                     "references": {
                         "IcProtectiveMarkings": {
                             "location": "import",
@@ -87,6 +104,8 @@ export class ClassificationBanner {
                     "tags": [],
                     "text": "The classification level to be displayed - also determines the banner and text colour."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "classification",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -96,7 +115,7 @@ export class ClassificationBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -105,6 +124,8 @@ export class ClassificationBanner {
                     "tags": [],
                     "text": "The optional text that will be displayed before classification to specify relevant country/countries."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "country",
                 "reflect": false,
                 "defaultValue": "\"uk\""
@@ -114,7 +135,7 @@ export class ClassificationBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -123,6 +144,8 @@ export class ClassificationBanner {
                     "tags": [],
                     "text": "If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -132,7 +155,7 @@ export class ClassificationBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -141,6 +164,8 @@ export class ClassificationBanner {
                     "tags": [],
                     "text": "If `true`, \"Up to\" will be displayed before the classification and country."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "up-to",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;mCAIQ,EAAE;8BAIO,SAAS;uBAI9B,IAAI;sBAIJ,KAAK;oBAIP,KAAK;;IAE9B,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,MAAM,EAAE;YAC1D,4BACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"ic-classification-banner-inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;IALjC;QAME;;WAEG;QACK,wBAAmB,GAAY,EAAE,CAAC;QAC1C;;WAEG;QACK,mBAAc,GAA0B,SAAS,CAAC;QAC1D;;WAEG;QACK,YAAO,GAAY,IAAI,CAAC;QAChC;;WAEG;QACK,WAAM,GAAa,KAAK,CAAC;QACjC;;WAEG;QACK,SAAI,GAAa,KAAK,CAAC;KAyChC;IAvCC,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;YAC5D,6EACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,sEAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official-sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"ic-classification-banner-inline\"]: !!inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,131 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  additionalSelectors: "",
+  classification: "official",
+  country: "uk",
+  inline: true,
+  upTo: false,
+};
+
+export default {
+  title: "Web Components/Classification banner",
+  component: "ic-classification-banner",
+};
+
+export const Classifications = {
+  render: () =>
+    html`<ic-classification-banner inline="true"></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official-sensitive"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="secret"
+        inline="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="top-secret"
+        inline="true"
+      ></ic-classification-banner>`,
+
+  name: "Classifications",
+};
+
+export const UpTo = {
+  render: () =>
+    html`<ic-classification-banner inline="true"></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official-sensitive"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="secret"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="top-secret"
+        inline="true"
+        up-to="true"
+      ></ic-classification-banner>`,
+
+  name: "Up to",
+};
+
+export const BottomOfPage = {
+  render: () =>
+    html`<ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>`,
+
+  name: "Bottom of page",
+};
+
+export const Country = {
+  render: () =>
+    html`<ic-classification-banner
+        classification="official"
+        inline="true"
+        country="us"
+      ></ic-classification-banner>
+      <ic-classification-banner
+        classification="official"
+        inline="true"
+        country=""
+      ></ic-classification-banner>`,
+
+  name: "Country",
+};
+
+export const AdditionalSelectors = {
+  render: () =>
+    html`<ic-classification-banner
+      classification="official"
+      inline="true"
+      additional-selectors="ukic"
+    />`,
+
+  name: "Additional selectors",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-classification-banner
+      classification=${args.classification}
+      inline=${args.inline}
+      up-to=${args.upTo}
+      country=${args.country}
+      additional-selectors=${args.additionalSelectors}
+    ></ic-classification-banner>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    classification: {
+      options: [
+        "default",
+        "official",
+        "secret",
+        "official-sensitive",
+        "top-secret",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -445,6 +445,10 @@ video {
   display: block;
 }
 
+.heading {
+  --ic-typography-color: var(--ic-data-list-text-heading);
+}
+
 .rows {
   display: flex;
   flex-direction: column;
@@ -459,7 +463,7 @@ video {
   margin-top: var(--ic-space-lg);
   margin-bottom: var(--ic-space-md);
   height: var(--ic-border-width);
-  background-color: var(--ic-architectural-300);
+  background-color: var(--ic-data-list-keyline-heading);
 }
 
 :host(.ic-data-list-small) .divider {

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

@@ -4,15 +4,24 @@ import { Host, h } from "@stencil/core";
  */
 export class DataList {
     constructor() {
-        this.heading = undefined;
-        this.size = "default";
+        /**
+         * The size of the data list component.
+         */
+        this.size = "medium";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
     }
     render() {
-        const { el, heading, size } = this;
+        const { el, heading, size, theme } = this;
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { class: { "ic-data-list-small": size === "small" } }, h("div", { class: "heading", id: "data-list-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", null))));
+        return (h(Host, { key: 'c66609f65612dca067e70b5762d7eeb797dd2121', class: {
+                "ic-data-list-small": size === "small",
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, 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"; }
@@ -33,15 +42,17 @@ export class DataList {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The title for the data list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
@@ -50,7 +61,7 @@ export class DataList {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -65,9 +76,37 @@ export class DataList {
                     "tags": [],
                     "text": "The size of the data list component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-data-list.js","sourceRoot":"","sources":["../../../src/components/ic-data-list/ic-data-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;oBAWa,SAAS;;IAEzC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAEnC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,KAAK,OAAO,EAAE;YACrD,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB;gBACzC,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;YACN,WAAK,KAAK,EAAC,SAAS,GAAG;YACvB,6BAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM;gBAClD,eAAa,CACV,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The size of the data list component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  render() {\n    const { el, heading, size } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    return (\n      <Host class={{ \"ic-data-list-small\": size === \"small\" }}>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-list.js","sourceRoot":"","sources":["../../../src/components/ic-data-list/ic-data-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAaE;;WAEG;QACK,SAAI,GAAoB,QAAQ,CAAC;QAEzC;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;KA8BzC;IA5BC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,KAAK,OAAO;gBACtC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAED,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB;gBACzC,6DAAM,IAAI,EAAC,SAAS;oBAClB,sEAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;YACN,4DAAK,KAAK,EAAC,SAAS,GAAG;YACvB,8EAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM;gBAClD,8DAAa,CACV,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the data list 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  render() {\n    const { el, heading, size, theme } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          \"ic-data-list-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}