@ukic/web-components 3.0.0 → 3.1.0

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

@@ -0,0 +1,164 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  adjacentPageCount: 1,
+  boundaryPageCount: 1,
+  currentPage: 1,
+  defaultPage: 1,
+  disabled: false,
+  hideCurrentPage: false,
+  hideFirstAndLastPageButton: false,
+  label: "Page",
+  monochrome: false,
+  pages: 15,
+  theme: "inherit",
+  type: "simple",
+};
+
+export default {
+  title: "Web Components/Pagination",
+  component: "Pagination",
+};
+
+export const Simple = {
+  render: (args) => html`
+    <p>Default appearance</p>
+    <ic-pagination pages="15"></ic-pagination>
+    <br />
+    <p>Hidden current page</p>
+    <ic-pagination pages="15" hide-current-page></ic-pagination>
+    <br />
+    <p>Hidden first and last page buttons</p>
+    <ic-pagination pages="15" hide-first-and-last-page-button></ic-pagination>
+    <br />
+    <p>Default page</p>
+    <ic-pagination pages="15" default-page="3"></ic-pagination>
+    <br />
+    <p>Disabled</p>
+    <ic-pagination pages="15" disabled></ic-pagination>
+    <br />
+    <p>Label set</p>
+    <ic-pagination pages="15" label="Label"></ic-pagination>
+  `,
+
+  name: "Simple",
+};
+
+export const Complex = {
+  render: (args) => html`
+    <p>Default appearance</p>
+    <ic-pagination pages="15" type="complex"></ic-pagination>
+    <br />
+    <p>Hidden first and last buttons</p>
+    <ic-pagination
+      pages="15"
+      type="complex"
+      hide-first-and-last-page-button
+    ></ic-pagination>
+    <br />
+    <p>Default page</p>
+    <ic-pagination pages="15" type="complex" default-page="7"></ic-pagination>
+    <br />
+    <p>Disabled</p>
+    <ic-pagination pages="15" type="complex" disabled></ic-pagination>
+  `,
+
+  name: "Complex",
+};
+
+export const ComplexAdjacentBoundaryItemsSet = {
+  render: (args) => html`
+  <p style={{ padding: 10 }}>Adjacent: 0, Boundary: 0</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="0"
+        boundary-page-count="0"
+      ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 0, Boundary: 1</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="0"
+        boundary-page-count="1"
+      ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 0, Boundary: 2</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="0"
+        boundary-page-count="2"
+      ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 1, Boundary: 0</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="1"
+        boundary-page-count="0"
+      ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 2, Boundary: 0</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="2"
+        boundary-page-count="0"
+      ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 1, Boundary: 1</p>
+      <ic-pagination pages="15" type="complex" ></ic-pagination>
+      <br/>
+      <p style={{ padding: 10 }}>Adjacent: 2, Boundary: 2</p>
+      <ic-pagination
+        pages="15"
+        type="complex"
+        adjacent-page-count="2"
+        boundary-page-count="2"
+      ></ic-pagination>
+     `,
+
+  name: "Complex - Adjacent & Boundary Items Set",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-pagination
+      adjacent-page-count=${args.adjacentPageCount}
+      boundary-page-count=${args.boundaryPageCount}
+      current-page=${args.currentPage}
+      default-page=${args.defaultPage}
+      disabled=${args.disabled}
+      hide-current-page=${args.hideCurrentPage}
+      hide-first-and-last-page-button=${args.hideFirstAndLastPageButton}
+      label=${args.label}
+      monochrome=${args.monochrome}
+      pages=${args.pages}
+      theme=${args.theme}
+      type=${args.type}
+    ></ic-pagination>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    type: {
+      options: ["simple", "complex"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-pagination-item/ic-pagination-item.css

@@ -465,7 +465,12 @@ button {
 
 .ellipsis {
   pointer-events: none;
-  color: var(--ic-color-secondary-text);
+
+  --ic-typography-color: var(--ic-pagination-ellipsis);
+}
+
+.monochrome .ellipsis {
+  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome);
 }
 
 .item-container:focus {
@@ -476,7 +481,11 @@ button {
 }
 
 .page {
-  color: var(--ic-action-default);
+  --ic-typography-color: var(--ic-pagination-page-number);
+}
+
+.monochrome .page {
+  --ic-typography-color: var(--ic-pagination-page-number-monochrome);
 }
 
 .simple-current {
@@ -488,11 +497,19 @@ button {
 /** DEFAULT STATES **/
 .item-container.page:hover:not(.selected):not(:focus) {
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-action-default-bg-hover);
+  background-color: var(--ic-pagination-hover);
 }
 
 .item-container.page:active:not(.selected):not(:focus) {
-  background-color: var(--ic-action-default-bg-active);
+  background-color: var(--ic-pagination-pressed);
+}
+
+.monochrome .item-container.page:hover:not(.selected):not(:focus) {
+  background-color: var(--ic-pagination-hover-monochrome);
+}
+
+.monochrome .item-container.page:active:not(.selected):not(:focus) {
+  background-color: var(--ic-pagination-pressed-monochrome);
 }
 
 .selected {
@@ -506,11 +523,15 @@ button {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-action-default);
+  background-color: var(--ic-pagination-selected-banner);
+}
+
+.monochrome .selected::after {
+  background-color: var(--ic-pagination-selected-banner-monochrome);
 }
 
 .page-selected {
-  color: var(--ic-color-primary-text);
+  --ic-typography-color: var(--ic-pagination-text);
 }
 
 /** LIGHT STATES **/
@@ -519,11 +540,12 @@ button {
 }
 
 .item-container.page.light:active:not(.selected):not(:focus) {
-  background-color: var(--ic-action-light-bg-active);
+  background-color: var(--ic-action-light-bg-pressed);
 }
 
-ic-typography.light {
-  color: var(--ic-color-white-text);
+ic-typography.light,
+ic-typography.page-selected.light {
+  --ic-typography-color: var(--ic-architectural-white);
 }
 
 .selected.light::after {
@@ -532,7 +554,7 @@ ic-typography.light {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-action-light);
+  background-color: var(--ic-action-monochrome);
 }
 
 /** DARK STATES **/
@@ -541,11 +563,11 @@ ic-typography.light {
 }
 
 .item-container.page.dark:active:not(.selected):not(:focus) {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-action-dark-bg-pressed);
 }
 
 ic-typography.dark {
-  color: var(--ic-color-primary-text);
+  --ic-typography-color: var(--ic-color-text-primary);
 }
 
 .selected.dark::after {
@@ -554,11 +576,12 @@ ic-typography.dark {
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: var(--ic-action-dark);
+  background-color: var(--ic-action-monochrome-dark);
 }
 
 .disabled {
-  color: var(--ic-architectural-200);
+  --ic-typography-color: var(--ic-pagination-text-disabled);
+
   pointer-events: none;
   cursor: none;
   -webkit-user-select: none;
@@ -566,6 +589,22 @@ ic-typography.dark {
           user-select: none;
 }
 
+.disabled.page ic-typography {
+  --ic-typography-color: var(--ic-pagination-page-number-disabled);
+}
+
+.disabled.ellipsis {
+  --ic-typography-color: var(--ic-pagination-ellipsis-disabled);
+}
+
+.monochrome .disabled.page {
+  --ic-typography-color: var(--ic-pagination-page-number-monochrome-disabled);
+}
+
+.monochrome .disabled.ellipsis {
+  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome-disabled);
+}
+
 @media (forced-colors: active) {
   .selected::after {
     background-color: Highlight;
@@ -580,6 +619,6 @@ ic-typography.dark {
   }
 
   .disabled {
-    color: GrayText;
+    --ic-typography-color: GrayText;
   }
 }

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js

@@ -2,16 +2,32 @@ import { h, } from "@stencil/core";
 import { removeDisabledFalse, capitalize } from "../../utils/helpers";
 export class PaginationItem {
     constructor() {
-        this.handleClick = () => {
-            this.paginationItemClick.emit({ page: this.page });
-        };
-        this.capitalizedLabel = undefined;
-        this.appearance = "default";
+        /**
+         * If `true`, the pagination item will be disabled.
+         */
         this.disabled = false;
+        /**
+         * The label for the pagination item (applicable when simple pagination is being used).
+         */
         this.label = "Page";
-        this.page = undefined;
+        /**
+         * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * If `true`, the pagination item will be selected.
+         */
         this.selected = false;
-        this.type = undefined;
+        /**
+         * 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";
+        this.handleClick = () => {
+            this.paginationItemClick.emit({ page: this.page || null });
+        };
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
     }
     watchLabelHandler() {
         this.capitalizedLabel = capitalize(this.label);
@@ -21,26 +37,22 @@ export class PaginationItem {
         removeDisabledFalse(this.disabled, this.el);
     }
     render() {
-        const { page, selected, type, disabled, appearance, label, capitalizedLabel, } = this;
-        return (h("a", null, type === "ellipsis" ? (h("div", { class: {
+        const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
+        return (h("a", { key: '96b78185d8162b10bbd8d728f87ff50df44f9b79', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
-                ["disabled"]: disabled,
-            } }, h("ic-typography", { class: {
-                [`${appearance}`]: true,
-            }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "page", "aria-label": selected ? `${label}: ${page}` : `Go to ${label} ${page}`, class: {
+                ["disabled"]: !!disabled,
+            } }, h("ic-typography", { variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "page", "aria-label": selected ? `${label}: ${page}` : `Go to ${label} ${page}`, class: {
                 ["selected"]: !disabled && selected,
-                ["disabled"]: disabled,
+                ["disabled"]: !!disabled,
                 ["item-container"]: true,
-                [`${appearance}`]: true,
                 ["page"]: type === "page",
             } }, h("ic-typography", { variant: "label", class: {
                 ["page-selected"]: selected,
-                ["disabled"]: disabled,
-                [`${appearance}`]: true,
+                ["disabled"]: !!disabled,
             } }, page))) : (h("ic-typography", { "aria-live": "polite", class: {
-                [`simple-current ${appearance}`]: true,
-                ["disabled"]: disabled,
+                [`simple-current`]: true,
+                ["disabled"]: !!disabled,
             }, variant: "label" }, capitalizedLabel, " ", page))));
     }
     static get is() { return "ic-pagination-item"; }
@@ -57,44 +69,22 @@ export class PaginationItem {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The appearance of the pagination, e.g. dark, light or the default."
-                },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the pagination item will be disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -104,33 +94,57 @@ export class PaginationItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label for the pagination item (applicable when simple pagination is being used)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Page\""
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the pagination item will display as black in the light theme, and white in dark theme."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "page": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number | null",
-                    "resolved": "number",
+                    "original": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The current page number."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "page",
                 "reflect": false
             },
@@ -148,10 +162,38 @@ export class PaginationItem {
                     "tags": [],
                     "text": "If `true`, the pagination item will be selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "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\""
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -172,6 +214,8 @@ export class PaginationItem {
                     "tags": [],
                     "text": "The type of pagination item - 'page' or 'ellipsis'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             }
@@ -197,8 +241,8 @@ export class PaginationItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ page: number }",
-                    "resolved": "{ page: number; }",
+                    "original": "{ page: number | null }",
+                    "resolved": "{ page: number | null; }",
                     "references": {}
                 }
             }];
@@ -206,6 +250,9 @@ export class PaginationItem {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "label",
                 "methodName": "watchLabelHandler"
             }];

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-pagination-item.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  @State() capitalizedLabel: string;\n\n  /**\n   * The appearance of the pagination, e.g. dark, light or the default.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label: string = \"Page\";\n\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    this.capitalizedLabel = capitalize(this.label);\n  }\n\n  /**\n   * The current page number.\n   */\n  @Prop() page: number | null;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n  componentWillLoad(): void {\n    this.watchLabelHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      appearance,\n      label,\n      capitalizedLabel,\n    } = this;\n\n    return (\n      <a>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: disabled,\n            }}\n          >\n            <ic-typography\n              class={{\n                [`${appearance}`]: true,\n              }}\n              variant=\"label\"\n            >\n              ...\n            </ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"page\"}\n            aria-label={\n              selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n            }\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: disabled,\n              [\"item-container\"]: true,\n              [`${appearance}`]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: disabled,\n                [`${appearance}`]: true,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            class={{\n              [`simple-current ${appearance}`]: true,\n              [\"disabled\"]: disabled,\n            }}\n            variant=\"label\"\n          >\n            {capitalizedLabel} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-pagination-item.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-item/ic-pagination-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  @State() capitalizedLabel: string;\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label?: string = \"Page\";\n\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    this.capitalizedLabel = capitalize(this.label!);\n  }\n\n  /**\n   * If `true`, the pagination item will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The current page number.\n   */\n  @Prop() page?: number;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\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 type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number | null }>;\n\n  componentWillLoad(): void {\n    this.watchLabelHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page || null });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      label,\n      capitalizedLabel,\n      monochrome,\n    } = this;\n\n    return (\n      <a class={{ [\"monochrome\"]: !!monochrome }}>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n          >\n            <ic-typography variant=\"label\">...</ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"page\"}\n            aria-label={\n              selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n            }\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: !!disabled,\n              [\"item-container\"]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: !!disabled,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            class={{\n              [`simple-current`]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n            variant=\"label\"\n          >\n            {capitalizedLabel} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-popover-menu/ic-popover-menu.css

@@ -459,8 +459,10 @@ video {
 
 :host {
   border-radius: var(--ic-border-radius);
-  color: var(--ic-color-primary-text);
-  background-color: var(--ic-architectural-white);
+  color: var(--ic-popover-nav-text);
+
+  --ic-typography-color: var(--ic-popover-nav-text);
+
   position: relative;
   z-index: var(--ic-z-index-popover);
   box-sizing: border-box;
@@ -482,8 +484,9 @@ video {
 
 .menu {
   border: var(--ic-border-default);
+  border-color: var(--ic-popover-border);
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-architectural-white);
+  background-color: var(--ic-popover-background);
   visibility: hidden;
   height: 0;
 }
@@ -519,7 +522,8 @@ video {
 }
 
 .parent-label {
-  color: var(--ic-color-tertiary-text);
+  --ic-typography-color: var(--ic-popover-parent-label);
+
   margin: var(--ic-space-xs) var(--ic-space-xs) 0;
 }