@ukic/web-components 2.1.0-beta.9 → 2.3.0

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js

@@ -0,0 +1,181 @@
+import { BreadcrumbGroup } from "../../ic-breadcrumb-group";
+import { newSpecPage } from "@stencil/core/testing";
+import { Breadcrumb } from "../../../ic-breadcrumb/ic-breadcrumb";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+import * as helpers from "../../../../utils/helpers";
+import { waitForTimeout } from "../../../../testspec.setup";
+describe("ic-breadcrumb-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render");
+  });
+  it("should render styling from props", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group collapsed="true" back-breadcrumb-only="true"></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render styling from props");
+  });
+  it("should render with ic-breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with ic-breadcrumb");
+  });
+  it("should render with collapse button", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with collapse button");
+  });
+  it("should set hasShadowDom", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    const element = page.root.shadowRoot.querySelector("nav");
+    expect(helpers.hasShadowDom(element)).toBe(false);
+  });
+  it("should handle the hidden collapsed breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    const collapsedEllipsis = page.doc.getElementById("collapsed-ellipsis");
+    collapsedEllipsis.click();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should handle the hidden collapsed breadcrumbs");
+  });
+  it("should test collapsed behaviour on resize to small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.root).toMatchSnapshot("should test collapsed behaviour on resize to small devices");
+  });
+  it("should test behaviour on small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test behaviour on change to medium devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer after expanding breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    const button = page.root.querySelector("#collapsed-ellipsis");
+    button.click();
+    await page.waitForChanges();
+    //delay to test setTimeout in code
+    await waitForTimeout(100);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer with collapsed false", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    // expect(true).toBeTruthy;
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should return null for last parent breadcrumb when there is only 1 breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();
+  });
+  //this test has to go last as it changes the device size
+  it("should render collapse on already small devices", async () => {
+    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+    Object.defineProperty(helpers, "getCurrentDeviceSize", {
+      value: myfunc,
+    });
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should render collapse on already small devices");
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.spec.js.map

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"../../ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render styling from props\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render styling from props\");\n  });\n\n  it(\"should render with ic-breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n  });\n\n  it(\"should render with collapse button\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n  });\n\n  it(\"should set hasShadowDom\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    const element = page.root.shadowRoot.querySelector(\"nav\");\n    expect(helpers.hasShadowDom(element)).toBe(false);\n  });\n\n  it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    const collapsedEllipsis: HTMLElement =\n      page.doc.getElementById(\"collapsed-ellipsis\");\n    collapsedEllipsis.click();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should handle the hidden collapsed breadcrumbs\"\n    );\n  });\n\n  it(\"should test collapsed behaviour on resize to small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.root).toMatchSnapshot(\n      \"should test collapsed behaviour on resize to small devices\"\n    );\n  });\n\n  it(\"should test behaviour on small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n      <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test behaviour on change to medium devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer after expanding breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n    const button = page.root.querySelector(\n      \"#collapsed-ellipsis\"\n    ) as HTMLButtonElement;\n    button.click();\n    await page.waitForChanges();\n    //delay to test setTimeout in code\n    await waitForTimeout(100);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer with collapsed false\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    await page.waitForChanges();\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    // expect(true).toBeTruthy;\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n  });\n\n  //this test has to go last as it changes the device size\n  it(\"should render collapse on already small devices\", async () => {\n    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n    Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n      value: myfunc,\n    });\n\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should render collapse on already small devices\"\n    );\n  });\n});\n"]}

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

@@ -441,6 +441,11 @@ video {
 }
 
 
+/**
+* @prop --min-width: Minimum width of the button.
+* @prop --height: The height of the button.
+*/
+
 :host {
   display: inline-block;
 
@@ -460,9 +465,9 @@ video {
   font-size: 0.875rem;
   transition: var(--ic-easing-transition-fast);
   border-radius: var(--ic-border-radius);
-  min-width: 6.25rem;
+  min-width: var(--min-width, 6.25rem);
   display: inline-flex;
-  gap: var(--ic-space-xs);
+  gap: var(--ic-space-xxs);
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -473,6 +478,10 @@ video {
   vertical-align: middle;
 }
 
+:host(.with-badge) .button {
+  border-radius: 0.2188rem;
+}
+
 .button:hover {
   cursor: pointer;
 }
@@ -525,6 +534,10 @@ video {
   pointer-events: none;
 }
 
+:host(.loading-with-icon) .button {
+  min-width: var(--min-width, 8.25rem);
+}
+
 /* Variants */
 
 /* Primary */
@@ -556,7 +569,7 @@ video {
 /* Secondary */
 
 :host(.button-variant-secondary) .button {
-  border: 0.063rem solid var(--button-default);
+  border: var(--ic-space-1px) solid var(--button-default);
   color: var(--button-default);
 }
 
@@ -632,6 +645,12 @@ video {
 :host(.button-variant-icon) .button {
   color: var(--button-default);
   min-width: 0;
+  gap: var(--ic-space-xs);
+}
+
+:host(.button-variant-icon) .icon-container {
+  width: var(--ic-space-lg) !important;
+  height: var(--ic-space-lg) !important;
 }
 
 :host(.button-variant-icon) .button:hover:not(:focus) {
@@ -677,34 +696,35 @@ video {
 /* Sizing */
 
 :host(.button-size-default) .button {
-  height: 2.5rem;
+  height: var(--height, 2.5rem);
   padding: var(--ic-space-xs) var(--ic-space-md);
 }
 
 :host(.button-size-small) .button {
-  height: var(--ic-space-xl);
+  height: var(--height, var(--ic-space-xl));
   padding: var(--ic-space-xxs) var(--ic-space-md);
 }
 
 :host(.button-size-large) .button {
-  height: var(--ic-space-xxl);
+  height: var(--height, var(--ic-space-xxl));
+  gap: var(--ic-space-xs);
   padding: var(--ic-space-sm) var(--ic-space-md);
 }
 
 :host(.button-size-default.button-variant-icon) .button {
-  height: var(--ic-space-xl);
+  height: var(--height, var(--ic-space-xl));
   width: var(--ic-space-xl);
   padding: 0.375rem;
 }
 
 :host(.button-size-small.button-variant-icon) .button {
-  height: var(--ic-space-lg);
+  height: var(--height, var(--ic-space-lg));
   width: var(--ic-space-lg);
   padding: var(--ic-space-xxs);
 }
 
 :host(.button-size-large.button-variant-icon) .button {
-  height: 2.5rem;
+  height: var(--height, 2.5rem);
   width: 2.5rem;
   padding: var(--ic-space-xs);
 }
@@ -761,13 +781,18 @@ ic-loading-indicator {
 
 div.icon-container {
   box-sizing: border-box;
-  width: var(--ic-space-lg);
-  height: var(--ic-space-lg);
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+:host(.button-size-large) div.icon-container {
+  width: calc(var(--ic-space-md) + var(--ic-space-xxs));
+  height: calc(var(--ic-space-md) + var(--ic-space-xxs));
+}
+
 ::slotted(*) {
   width: var(--icon-width) !important;
   height: var(--icon-height) !important;
@@ -850,3 +875,9 @@ div.icon-container {
     border: 0.125rem solid transparent;
   }
 }
+
+/** Pagination **/
+
+:host(.flip) ::slotted(svg) {
+  transform: scaleX(-1);
+}