@ukic/canary-web-components 3.0.0-canary.4 → 3.0.0-canary.6

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

@@ -471,7 +471,7 @@ video {
 
 a {
   text-decoration: none !important;
-  color: var(--ic-card-text) !important;
+  color: var(--ic-card-text-primary) !important;
 }
 
 button {
@@ -485,11 +485,11 @@ button {
 .card.clickable {
   display: flex;
   flex-direction: row;
-  border: var(--ic-border-default);
+  border: var(--ic-space-1px) solid var(--ic-card-border-primary);
   border-radius: var(--ic-border-radius);
   box-sizing: border-box;
   text-align: left;
-  color: var(--ic-card-text);
+  color: var(--ic-card-text-primary);
   transition: var(--ic-easing-transition-fast);
   position: relative;
   max-width: var(--card-max-width);
@@ -506,26 +506,26 @@ button {
 }
 
 .card.clickable:hover {
-  background-color: var(--ic-card-clickable-focus-hover-bg);
-  border: var(--ic-border-hover);
+  background-color: var(--ic-card-background-hover);
+  border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);
   cursor: pointer;
 }
 
 .card.clickable:focus,
 .card.clickable.focussed {
-  background-color: var(--ic-card-clickable-focus-hover-bg);
+  background-color: var(--ic-card-background-hover);
   box-shadow: var(--ic-border-focus);
   outline: var(--ic-hc-focus-outline);
-  border: var(--ic-border-pressed-default);
+  border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);
 }
 
 .card.clickable:active {
-  background-color: var(--ic-card-clickable-active-bg);
+  background-color: var(--ic-card-background-pressed);
   box-shadow: var(--ic-border-focus);
 }
 
 .card.disabled {
-  border: var(--ic-border-disabled);
+  border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);
 }
 
 .card-header {
@@ -540,7 +540,7 @@ button {
 }
 
 .card ::slotted(svg) {
-  fill: var(--ic-card-text);
+  fill: var(--ic-card-icon);
 }
 
 .card.disabled ::slotted(svg) {
@@ -588,9 +588,12 @@ button {
 
 .image {
   display: flex;
+  border-radius: var(--ic-border-radius);
+}
+
+.image ::slotted([slot="image"]) {
   height: var(--image-size);
   width: var(--image-size);
-  border-radius: var(--ic-border-radius);
 }
 
 .card-content {

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

@@ -1,6 +1,6 @@
 import { h, forceUpdate, Host, } from "@stencil/core";
-import { onComponentRequiredPropUndefined, isSlotUsed, getThemeFromContext, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { onComponentRequiredPropUndefined, isSlotUsed, getBrandFromContext, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
  * @slot message - Content will be placed in the main body of the horizontal card.
@@ -39,6 +39,9 @@ export class Card {
         this.target = undefined;
         this.theme = "inherit";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     disconnectedCallback() {
         var _a;
         if (this.parentIsAnchorTag) {
@@ -72,7 +75,7 @@ export class Card {
             event.stopImmediatePropagation();
         }
     }
-    themeChangeHandler(ev) {
+    brandChangeHandler(ev) {
         this.updateTheme(ev.detail.mode);
     }
     /**
@@ -86,10 +89,13 @@ export class Card {
             this.el.shadowRoot.querySelector("button").focus();
         }
     }
-    updateTheme(newTheme = null) {
-        const foregroundColor = getThemeFromContext(this.el, newTheme);
-        if (foregroundColor !== IcThemeForegroundEnum.Default) {
-            this.appearance = foregroundColor;
+    updateTheme(mode = null) {
+        const foregroundColor = getBrandFromContext(this.el, mode);
+        if (foregroundColor !== IcBrandForegroundEnum.Default) {
+            this.theme =
+                foregroundColor === IcBrandForegroundEnum.Light
+                    ? IcBrandForegroundEnum.Dark
+                    : IcBrandForegroundEnum.Light;
         }
     }
     render() {
@@ -111,7 +117,7 @@ export class Card {
                 clickable: clickable && !disabled,
                 disabled,
                 focussed: isFocussed,
-                dark: appearance === IcThemeForegroundEnum.Dark,
+                dark: appearance === IcBrandForegroundEnum.Dark,
                 [`${size}`]: true,
                 "with-icon": isSlotUsed(this.el, "icon"),
                 "with-image": isSlotUsed(this.el, "image"),
@@ -373,6 +379,12 @@ export class Card {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -381,8 +393,8 @@ export class Card {
                 "capture": true,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-card-horizontal.js","sourceRoot":"","sources":["../../../src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  forceUpdate,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n  removeDisabledFalse,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcCardSizes } from \"./ic-card-horizontal.types\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot image - Content will be placed to the left of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class Card {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcCardSizes = \"medium\";\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\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  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent<IcTheme>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(\n        ({ type, addedNodes, removedNodes }) =>\n          type === \"childList\" &&\n          checkSlotInChildMutations(addedNodes, removedNodes, \"image\")\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcThemeForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": isSlotUsed(this.el, \"image\"),\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n          aria-disabled={disabled ? \"true\" : null}\n          disabled={disabled ? true : null}\n          {...attrs}\n        >\n          {isSlotUsed(this.el, \"image\") && (\n            <div class=\"image\">\n              <slot name=\"image\"></slot>\n            </div>\n          )}\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div class=\"card-title\">\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n            </div>\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-card-horizontal.js","sourceRoot":"","sources":["../../../src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  forceUpdate,\n  Host,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getBrandFromContext,\n  removeDisabledFalse,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcCardSizes } from \"./ic-card-horizontal.types\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot image - Content will be placed to the left of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class Card {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcBrandForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcCardSizes = \"medium\";\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\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  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(\n        ({ type, addedNodes, removedNodes }) =>\n          type === \"childList\" &&\n          checkSlotInChildMutations(addedNodes, removedNodes, \"image\")\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode: IcBrandForeground = null): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcBrandForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": isSlotUsed(this.el, \"image\"),\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n          aria-disabled={disabled ? \"true\" : null}\n          disabled={disabled ? true : null}\n          {...attrs}\n        >\n          {isSlotUsed(this.el, \"image\") && (\n            <div class=\"image\">\n              <slot name=\"image\"></slot>\n            </div>\n          )}\n          <div class=\"card-content\">\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div class=\"card-title\">\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n            </div>\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js

@@ -51,6 +51,16 @@ describe("ic-card-horizontal", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render disabled", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" disabled clickable></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
+    });
     it("should apply 'focussed' style when parent is focussed", async () => {
         const page = await newSpecPage({
             components: [Card],

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-card-horizontal.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card-horizontal\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-card-horizontal\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"small\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render extra large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"extra large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card-horizontal>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with an image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"image\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"icon\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted heading and message\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Typography],\n      html: `<ic-card-horizontal id=\"test-card\">\n      <ic-typography slot=\"heading\">Heading</ic-typography>\n      <ic-typography slot=\"message\">Message</ic-typography>\n    </ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}
+{"version":3,"file":"ic-card-horizontal.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card-horizontal\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-card-horizontal\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"small\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render extra large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"extra large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" disabled clickable></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card-horizontal>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with an image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"image\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"icon\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted heading and message\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Typography],\n      html: `<ic-card-horizontal id=\"test-card\">\n      <ic-typography slot=\"heading\">Heading</ic-typography>\n      <ic-typography slot=\"message\">Message</ic-typography>\n    </ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -25,6 +25,8 @@ tbody {
   min-height: 1.5rem;
   overflow-y: hidden;
   height: var(--row-height);
+
+  --ic-typography-color: var(--ic-data-table-text-default-emphasis);
 }
 
 .truncation-show-hide {
@@ -45,18 +47,6 @@ ic-loading-indicator {
   top: 20px;
 }
 
-ic-loading-indicator.ic-theme-dark {
-  --inner-color: var(--ic-action-default-dark);
-  --outer-color: var(--ic-action-neutral-light);
-  --label-color: var(--ic-color-text-primary-dark);
-}
-
-ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome {
-  --inner-color: var(--ic-action-light);
-  --outer-color: var(--ic-action-neutral-dark);
-  --label-color: var(--ic-color-text-inverse-dark);
-}
-
 .table-row-container {
   position: relative;
   height: 100%;
@@ -85,7 +75,7 @@ table {
 }
 
 :host([embedded="true"]) .table-row-container {
-  border: var(--ic-border-light);
+  border: var(--ic-space-1px) solid var(--ic-data-table-border);
 }
 
 .column-header-inner-container {
@@ -130,7 +120,17 @@ table {
 }
 
 .table-row-selected {
-  background-color: var(--ic-table-row-selected) !important;
+  background-color: var(--ic-data-table-cell-background-selected) !important;
+}
+
+.table-row:hover {
+  background-color: var(--ic-data-table-cell-background-hover) !important;
+}
+
+.table-row-selected:hover {
+  background-color: var(
+    --ic-data-table-cell-background-selected-hover
+  ) !important;
 }
 
 .sort-button {
@@ -138,19 +138,19 @@ table {
 }
 
 .sort-button:hover {
-  background-color: var(--ic-action-dark-bg-hover);
+  background-color: var(--ic-data-table-icon-button-background-hover);
 }
 
 .sort-button:active {
-  background-color: var(--ic-action-dark-bg-pressed);
+  background-color: var(--ic-data-table-icon-button-background-pressed);
 }
 
 .sort-button svg {
-  color: var(--ic-architectural-black);
+  color: var(--ic-data-table-sort-toggle-icon);
 }
 
 .sort-button-unsorted svg {
-  color: var(--ic-color-text-tertiary);
+  color: var(--ic-data-table-sort-toggle-icon-default);
 }
 
 .table-density-dense .column-header-inner-container,
@@ -187,9 +187,10 @@ td.table-density-spacious {
 .column-header {
   text-align: left;
   padding: var(--ic-space-xs);
-  background-color: var(--ic-architectural-40);
-  border-right: var(--ic-border-light);
-  border-bottom: var(--ic-border-light);
+  background-color: var(--ic-data-table-header-background);
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  color: var(--ic-data-table-header-text);
 }
 
 .column-header {
@@ -204,7 +205,7 @@ td.table-density-spacious {
 }
 
 .scrollable .column-header:last-child {
-  border-right: var(--ic-border-light) !important;
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important;
 }
 
 :host([embedded="true"]) tr:last-child .table-cell,
@@ -241,13 +242,17 @@ td.table-density-spacious {
   justify-content: center !important;
 }
 
+.table-row {
+  background-color: var(--ic-data-table-cell-background);
+}
+
 .table-row:nth-child(even) {
-  background-color: var(--ic-architectural-20);
+  background-color: var(--ic-data-table-cell-background-stripe);
 }
 
 .table-cell {
   padding: var(--ic-space-xs);
-  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);
+  border-bottom: solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);
   overflow: hidden;
   box-sizing: border-box;
   max-width: var(--column-max-width);
@@ -286,17 +291,20 @@ td.table-density-spacious {
   align-items: flex-end;
 }
 
-.cell-emphasis-low {
-  --ic-typography-color: var(--ic-color-text-secondary);
+.cell-emphasis-low ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-low-emphasis);
 }
 
-.cell-emphasis-high {
+.cell-emphasis-high ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-high-emphasis);
+
   font-weight: var(--ic-font-weight-bold);
 }
 
 .pagination-container {
-  background-color: var(--ic-architectural-40);
-  border-top: var(--ic-border-light);
+  background-color: var(--ic-data-table-pagination-bar-background-color);
+  border-top: var(--ic-space-1px) solid
+    var(--ic-data-table-pagination-bar-keyline);
 }
 
 .screen-reader-sort-text,
@@ -319,7 +327,7 @@ td.table-density-spacious {
 
 .updating-state {
   padding: 0;
-  border-bottom: var(--ic-border-light);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
 }
 
 .updating-state-headers {
@@ -334,8 +342,8 @@ td.table-density-spacious {
 }
 
 .loading.show-background {
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-light);
+  background-color: var(--ic-data-table-overlay-background);
+  border: var(--ic-space-1px) solid var(--ic-data-table-overlay-border);
 }
 
 .loading.show {
@@ -349,6 +357,26 @@ td.table-density-spacious {
   margin-right: var(--ic-space-xxs);
 }
 
+.column-header .icon > svg,
+.column-header ::slotted(svg) {
+  fill: var(--ic-data-table-icon);
+}
+
+.table-cell .icon > svg,
+.table-cell ::slotted(svg) {
+  fill: var(--ic-data-table-icon-default-emphasis);
+}
+
+.cell-emphasis-high .icon > svg,
+.cell-emphasis-high ::slotted(svg) {
+  fill: var(--ic-data-table-icon-high-emphasis);
+}
+
+.cell-emphasis-low .icon > svg,
+.cell-emphasis-low ::slotted(svg) {
+  fill: var(--ic-data-table-icon-low-emphasis);
+}
+
 .column-header-alignment-right > .icon,
 .row-header-alignment-right > .icon,
 .cell-alignment-right > .icon,
@@ -387,6 +415,16 @@ td.table-density-spacious {
   width: 100%;
 }
 
+.action-element {
+  display: flex;
+  justify-content: right;
+}
+
+.cell-grid-wrapper {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
 @media screen and (min-width: 577px) {
   .column-header-inner-container {
     display: flex;