@otto-de/b2b-core-components 1.4.0 → 1.6.0

package/dist/cjs/{types-ef85a0bf.js → table.types-00c8228a.js}

@@ -19,20 +19,20 @@ const TableSortDirections = {
   ASC: 'ascending',
   DESC: 'descending',
 };
-const TableRowTypes = {
+const TableAccordionRowTypes = {
   PARENT: 'parent',
   CHILD: 'child',
-  HEADER: 'header'
+  HEADER: 'header',
 };
 const TableColourOptions = {
   DEFAULT: 'default',
   SELECTED: 'selected',
-  GROUP: 'group'
+  GROUP: 'group',
 };
 
 exports.ContentAlignment = ContentAlignment;
+exports.TableAccordionRowTypes = TableAccordionRowTypes;
 exports.TableColourOptions = TableColourOptions;
-exports.TableRowTypes = TableRowTypes;
 exports.TableRowgroupTypes = TableRowgroupTypes;
 exports.TableSizes = TableSizes;
 exports.TableSortDirections = TableSortDirections;

package/dist/cjs/wizard.types-690c64bb.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const WizardStatus = {
+  DEFAULT: 'default',
+  COMPLETED: 'completed',
+  PENDING: 'pending',
+  DISABLED: 'disabled',
+};
+
+exports.WizardStatus = WizardStatus;

package/dist/collection/collection-manifest.json

@@ -41,12 +41,14 @@
     "./components/toggle-button/toggle-button.js",
     "./components/toggle-group/toggle-group.js",
     "./components/tooltip/tooltip.js",
+    "./components/wizard/wizard-step.js",
+    "./components/wizard/wizard.js",
     "./components/wizard-icon/wizard-icon.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.0.1",
-    "typescriptVersion": "4.9.5"
+    "version": "3.4.2",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/alert/alert.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -227,7 +226,7 @@
 .b2b-alert--info {
   background-color: var(--b2b-color-info-50);
 }
-.b2b-alert--info-icon {
+.b2b-alert--info__icon {
   color: var(--b2b-color-info-100);
 }
 .b2b-alert--warning {
@@ -240,10 +239,10 @@
 .b2b-alert--success {
   background-color: var(--b2b-color-success-50);
 }
-.b2b-alert--success-icon {
+.b2b-alert--success__icon {
   color: var(--b2b-color-success-100);
 }
-.b2b-alert-close-icon {
+.b2b-alert__close-icon {
   padding-top: var(--b2b-size-7);
   width: var(--b2b-size-30);
   height: var(--b2b-size-35);
@@ -251,13 +250,13 @@
   fill: var(--b2b-color-grey-400);
   flex-shrink: 0;
 }
-.b2b-alert-content {
+.b2b-alert__content {
   display: flex;
   align-items: center;
   flex: 2;
   gap: var(--b2b-size-30);
 }
-.b2b-alert-content p {
+.b2b-alert__content p {
   width: 100%;
   margin: 0;
   padding: var(--b2b-size-5) 0 var(--b2b-size-1) 0;

package/dist/collection/components/alert/alert.e2e.js

@@ -0,0 +1,67 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Alert', () => {
+  it('should render the alert component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert></alert>`);
+    const element = await page.find('b2b-alert');
+    expect(element).not.toBeNull();
+  });
+  it('should not be visible by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert></alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert');
+    expect(element).not.toHaveClass('b2b-alert--open');
+    const alert = await page.find('b2b-alert');
+    expect(await alert.getProperty('opened')).toBe(false);
+  });
+  it('should open the alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened></b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div');
+    expect(await element.isVisible()).toBe(true);
+  });
+  it('should not render text in a small alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened>test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> p');
+    expect(element).toBeNull();
+  });
+  it('should render a large alert with text', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size={large}>test</b2b-alert>`);
+    const element = await page.find({ text: 'test' });
+    expect(element).not.toBeNull();
+  });
+  it('should render a close button by default in a large alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size="large">test</b2b-alert>`);
+    const alert = await page.find('b2b-alert >>> div');
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).not.toBeNull();
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-alert')
+        .shadowRoot.querySelector('.b2b-alert__close-icon').click();
+    });
+    await page.waitForChanges();
+    expect(await alert.isVisible()).toBeFalsy();
+  });
+  it('should not render a close button on an error alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size="large" type="error">test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).toBeNull();
+  });
+  it('should not render a close button in a small alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened>test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).toBeNull();
+  });
+  it('should render with a custom icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened custom-icon><b2b-icon icon="b2b_icon-menu"></b2b-icon></b2b-alert>`);
+    const element = await page.find('b2b-icon');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/alert/alert.js

@@ -30,9 +30,9 @@ export class AlertComponent {
         [`b2b-alert--${this.type}`]: true,
         [`b2b-alert--${this.size}`]: true,
         'b2b-alert--open': this.opened,
-      } }, h("div", { class: "b2b-alert-content" }, h("span", { class: { [`b2b-alert--${this.type}-icon`]: true } }, this.canCustomizeIcon() ? h("slot", null) : this.chooseIcon()), this.size === 'large' && (h("p", null, h("slot", null)))), this.canClose() && (
+      } }, h("div", { class: "b2b-alert__content" }, h("span", { class: { [`b2b-alert--${this.type}__icon`]: true } }, this.canCustomizeIcon() ? h("slot", null) : this.chooseIcon()), this.size === 'large' && (h("p", null, h("slot", null)))), this.canClose() && (
     //using a custom icon as this component needs an icon size that is not supported in the icon component
-    h("div", { class: "b2b-alert-close-icon", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17.886 16l8.057-8.057a1.333 1.333 0 1 0-1.885-1.886l-8.057 8.057-8.057-8.057a1.333 1.333 0 1 0-1.886 1.886L14.115 16l-8.057 8.057a1.332 1.332 0 1 0 1.886 1.885l8.057-8.057 8.057 8.057a1.331 1.331 0 0 0 1.886 0 1.332 1.332 0 0 0 0-1.885L17.887 16z" })))))));
+    h("div", { class: "b2b-alert__close-icon", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17.886 16l8.057-8.057a1.333 1.333 0 1 0-1.885-1.886l-8.057 8.057-8.057-8.057a1.333 1.333 0 1 0-1.886 1.886L14.115 16l-8.057 8.057a1.332 1.332 0 1 0 1.886 1.885l8.057-8.057 8.057 8.057a1.331 1.331 0 0 0 1.886 0 1.332 1.332 0 0 0 0-1.885L17.887 16z" })))))));
   }
   static get is() { return "b2b-alert"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/anchor/anchor.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/anchor/anchor.spec.js

@@ -0,0 +1,68 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { AnchorComponent } from './anchor';
+const testRef = 'https://www.otto.de';
+it('should render the anchor component with default values', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the font size of the anchor component if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, size: "100" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the download string if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, download: "This is a test download" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the target property if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, target: "parent" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -254,40 +253,39 @@
   display: flex;
   align-items: center;
 }
-:host button.primary,
-:host a.primary {
+:host button.b2b-button--primary,
+:host a.b2b-button--primary {
   color: var(--b2b-color-white-100);
   background-color: var(--b2b-color-red-100);
   border: 1px solid var(--b2b-color-red-100);
 }
-:host button.primary:hover,
-:host a.primary:hover {
+:host button.b2b-button--primary:hover,
+:host a.b2b-button--primary:hover {
   background-color: var(--b2b-color-red-200);
 }
-:host button.primary.loading::after,
-:host a.primary.loading::after {
+:host button.b2b-button--primary.loading::after,
+:host a.b2b-button--primary.loading::after {
   border: 0.125rem solid rgba(255, 255, 255, 0.5);
   border-top: 0.125rem solid var(--b2b-color-red-100);
 }
-:host button.secondary,
-:host a.secondary {
+:host button.b2b-button--secondary,
+:host a.b2b-button--secondary {
   color: var(--b2b-color-copy-default);
   background-color: var(--b2b-button-secondary-background-color);
   border: 1px solid var(--b2b-button-secondary-border-color);
   border-right: var(--b2b-border-right);
 }
-:host button.secondary:hover,
-:host a.secondary:hover {
+:host button.b2b-button--secondary:hover,
+:host a.b2b-button--secondary:hover {
   background-color: var(--b2b-button-secondary-hover-background-color);
 }
-:host button.secondary.loading::after,
-:host a.secondary.loading::after {
+:host button.b2b-button--secondary.loading::after,
+:host a.b2b-button--secondary.loading::after {
   border: 0.125rem solid rgba(51, 51, 51, 0.2);
   border-top: 0.125rem solid var(--b2b-color-copy-default);
 }
-:host button:disabled, :host button.disabled,
-:host a:disabled,
-:host a.disabled {
+:host button:disabled,
+:host a:disabled {
   cursor: default;
   pointer-events: none;
   background-color: var(--b2b-color-grey-50);
@@ -296,32 +294,29 @@
   color: var(--b2b-color-grey-250);
 }
 :host button:disabled [slot=start],
-:host button:disabled [slot=end], :host button.disabled [slot=start],
-:host button.disabled [slot=end],
+:host button:disabled [slot=end],
 :host a:disabled [slot=start],
-:host a:disabled [slot=end],
-:host a.disabled [slot=start],
-:host a.disabled [slot=end] {
+:host a:disabled [slot=end] {
   fill: var(--b2b-color-grey-250);
 }
 :host button:focus,
 :host a:focus {
   z-index: 10;
 }
-:host(.loading) button,
-:host(.loading) a {
+:host(.b2b-button--loading) button,
+:host(.b2b-button--loading) a {
   color: transparent;
   position: relative;
   cursor: default;
   pointer-events: none;
 }
-:host(.loading).primary::after, :host(.loading).primary:hover {
+:host(.b2b-button--loading).b2b-button--primary::after, :host(.b2b-button--loading).b2b-button--primary:hover {
   color: var(--b2b-color-white-100);
 }
-:host(.loading).secondary::after, :host(.loading).secondary:hover {
+:host(.b2b-button--loading).b2b-button--secondary::after, :host(.b2b-button--loading).b2b-button--secondary:hover {
   color: var(--b2b-color-copy-default);
 }
-:host(.loading) .button-spinner {
+:host(.b2b-button--loading) .b2b-button__spinner {
   box-sizing: border-box;
   display: inline;
   position: absolute !important;
@@ -330,32 +325,32 @@
   margin-top: -0.625rem;
   margin-left: -0.625rem;
 }
-:host(.loading) [slot=start],
-:host(.loading) [slot=end] {
+:host(.b2b-button--loading) [slot=start],
+:host(.b2b-button--loading) [slot=end] {
   visibility: hidden;
 }
-:host(.button-50) button,
-:host(.button-50) a {
+:host(.b2b-button--50) button,
+:host(.b2b-button--50) a {
   height: 1.875rem;
   max-width: 100%;
 }
-:host(.button-100) button,
-:host(.button-100) a {
+:host(.b2b-button--100) button,
+:host(.b2b-button--100) a {
   height: 2.25rem;
 }
-:host(.button-active) button,
-:host(.button-active) a {
+:host(.b2b-button--active) button,
+:host(.b2b-button--active) a {
   background-color: var(--b2b-color-black-100);
   color: var(--b2b-color-white-100);
   border: 1px solid var(--b2b-button-secondary-border-color);
   border-right: var(--b2b-border-right);
 }
-:host(.button-active) button:hover,
-:host(.button-active) a:hover {
+:host(.b2b-button--active) button:hover,
+:host(.b2b-button--active) a:hover {
   background-color: var(--b2b-color-black-100);
 }
-:host(.icon-only) button,
-:host(.icon-only) a {
+:host(.b2b-button--icon-only) button,
+:host(.b2b-button--icon-only) a {
   padding: 0 var(--b2b-size-20);
 }
 ::slotted(*[slot=start]) {

package/dist/collection/components/button/button.e2e.js

@@ -0,0 +1,80 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Button', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-button>Hello World</b2b-button>`);
+  });
+  it('should render the button component', async () => {
+    const element = await page.find('b2b-button');
+    expect(element).not.toBeNull();
+  });
+  it('should display text', async () => {
+    const element = await page.find('b2b-button');
+    expect(element).toEqualText('Hello World');
+  });
+  it('should emit click event when clicked', async () => {
+    const eventSpy = await page.spyOnEvent('click');
+    await page.click('b2b-button');
+    expect(eventSpy).toHaveReceivedEvent();
+  });
+  it('should not be able to click when disabled', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-button disabled={true}>Hello World</b2b-button>`);
+    const eventSpy = await page.spyOnEvent('click');
+    await page.click('b2b-button');
+    expect(eventSpy).not.toHaveReceivedEvent();
+  });
+  it('should not be able to click when loading', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-button loading={true}>Hello World</b2b-button>`);
+    const eventSpy = await page.spyOnEvent('click');
+    await page.click('b2b-button');
+    expect(eventSpy).not.toHaveReceivedEvent();
+  });
+  it('should support form submission from shadow dom', async () => {
+    const form = `
+      <form>
+        <b2b-button type='submit'>Hello World</b2b-button>
+      </form>
+    `;
+    page = await newE2EPage();
+    await page.setContent(form);
+    const submitEventSpy = await page.spyOnEvent('submit');
+    const formdataEventSpy = await page.spyOnEvent('formdata');
+    await page.click('b2b-button');
+    expect(submitEventSpy).toHaveReceivedEvent();
+    expect(formdataEventSpy).toHaveReceivedEvent();
+  });
+  it('should reduce padding on the button if there is only an icon', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-button variant="primary" size="100">
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+  </b2b-button>`);
+    const button = await page.find('b2b-button');
+    expect(button).toHaveClass('b2b-button--icon-only');
+  });
+  it('should not reduce padding on the button if there is text', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-button variant="primary" size="100">
+    <span>Hello World</span>
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+  </b2b-button>`);
+    const button = await page.find('b2b-button');
+    expect(button).not.toHaveClass('b2b-button--icon-only');
+  });
+  it('should not submit a form when the button is not of type submit', async () => {
+    const form = `
+      <form>
+        <b2b-button>Hello World</b2b-button>
+      </form>
+    `;
+    page = await newE2EPage();
+    await page.setContent(form);
+    const submitEventSpy = await page.spyOnEvent('submit');
+    const button = await page.find({ text: 'Hello World' });
+    await button.click();
+    page.waitForChanges();
+    expect(submitEventSpy).not.toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/button/button.js

@@ -28,6 +28,7 @@ export class ButtonComponent {
     this.href = undefined;
     this.target = 'self';
     this.download = undefined;
+    this.groupDisabled = false;
   }
   /** Manually set focus to button element */
   async setFocus() {
@@ -54,15 +55,18 @@ export class ButtonComponent {
   }
   spinner() {
     const spinnerColor = this.variant === 'primary' ? 'inverse' : 'secondary';
-    return (h("div", { class: "button-spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
+    return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
   }
   render() {
     return (h(Host, { class: {
-        loading: this.canLoad(),
-        [`button-${this.size}`]: true,
-        [`button-active`]: this.active,
-        [`icon-only`]: this.checkIcon(),
-      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: { disabled: this.disabled, [this.variant]: true }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { class: { [this.variant]: true }, disabled: this.disabled, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
+        [`b2b-button--loading`]: this.canLoad(),
+        [`b2b-button--${this.size}`]: true,
+        [`b2b-button--active`]: this.active,
+        [`b2b-button--icon-only`]: this.checkIcon(),
+      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: {
+        disabled: this.disabled || this.groupDisabled,
+        [`b2b-button--${this.variant}`]: true,
+      }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { disabled: this.disabled || this.groupDisabled, class: { [`b2b-button--${this.variant}`]: true }, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
   }
   static get is() { return "b2b-button"; }
   static get encapsulation() { return "shadow"; }
@@ -237,6 +241,27 @@ export class ButtonComponent {
         },
         "attribute": "download",
         "reflect": false
+      },
+      "groupDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether the parent input group is disabled. Per default, it is false."
+            }],
+          "text": ""
+        },
+        "attribute": "group-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */