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

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

@@ -0,0 +1,104 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { PaginationComponent } from './pagination';
+import { PaginationConstants } from './pagination.constants';
+describe('B2B-Pagination', () => {
+  const backAndForwardItems = 2;
+  const getItem = (page, itemText) => {
+    const allItemElements = page.root.shadowRoot.querySelectorAll('li.b2b-pagination__item b2b-button');
+    const allItems = Array.from(allItemElements);
+    return allItems.find(item => item.textContent === itemText);
+  };
+  it('active page should be 1 by default', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination></b2b-pagination>`,
+    });
+    expect(page.rootInstance.activePage).toBe(1);
+  });
+  it('total pages should be 1 by default', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination></b2b-pagination>`,
+    });
+    expect(page.rootInstance.totalPages).toBe(1);
+  });
+  it('selected element must render button as active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const firstItem = getItem(page, '1');
+    const isSelectedButtonActive = firstItem.getAttribute('active');
+    expect(isSelectedButtonActive).not.toBeNull();
+    const secondItem = getItem(page, '2');
+    const isSecondButtonActive = secondItem.getAttribute('active');
+    expect(isSecondButtonActive).toBeNull();
+  });
+  it('should show at most 5 items', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='2'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const listElements = page.root.shadowRoot.querySelectorAll('li');
+    expect(listElements.length).toBe(5 + backAndForwardItems);
+  });
+  it('should show total number of pages in the last item', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const lastItemNPosition = 2;
+    const lastItemSelector = `li.b2b-pagination__item:nth-last-of-type(${lastItemNPosition})`;
+    const lastItem = page.root.shadowRoot.querySelector(lastItemSelector);
+    expect(lastItem.textContent).toBe('10');
+  });
+  it('should show dots on the second to last item when initial items active and total pages greater than 5', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='1'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should show dots on the second item when any of last items are active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='8'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should show dots on the second and second to last items when middle item is active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='5'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe(PaginationConstants.DOTS);
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should not show dots when 5 items or less', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe('2');
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe('4');
+  });
+});

package/dist/collection/components/paragraph/paragraph.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 */
@@ -219,26 +218,26 @@
   color: var(--b2b-color-copy-default);
   margin: 0 0 var(--b2b-size-30);
 }
-.b2b-paragraph.size-50 {
-  font-size: var(--b2b-size-copy-75);
+.b2b-paragraph--size-50 {
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
 }
-.b2b-paragraph.size-100 {
+.b2b-paragraph--size-100 {
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
 }
-.b2b-paragraph.weight-normal {
+.b2b-paragraph--weight-normal {
   font-weight: var(--b2b-font-weight-normal);
 }
-.b2b-paragraph.weight-bold {
+.b2b-paragraph--weight-bold {
   font-weight: var(--b2b-font-weight-bold);
 }
-.b2b-paragraph.align-left {
+.b2b-paragraph--align-left {
   text-align: left;
 }
-.b2b-paragraph.align-right {
+.b2b-paragraph--align-right {
   text-align: right;
 }
-.b2b-paragraph.align-center {
+.b2b-paragraph--align-center {
   text-align: center;
 }

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

@@ -0,0 +1,13 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Paragraph', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-paragraph>Paragraph</b2b-paragraph>`);
+  });
+  it('should render paragraph component', async () => {
+    const element = await page.find('b2b-paragraph');
+    expect(element).not.toBeNull();
+    expect(element).toEqualText('Paragraph');
+  });
+});

package/dist/collection/components/paragraph/paragraph.js

@@ -12,9 +12,9 @@ export class ParagraphComponent {
   render() {
     return (h("p", { class: {
         'b2b-paragraph': true,
-        ['size-' + this.size]: true,
-        ['weight-' + this.weight]: true,
-        ['align-' + this.align]: true,
+        ['b2b-paragraph--size-' + this.size]: true,
+        ['b2b-paragraph--weight-' + this.weight]: true,
+        ['b2b-paragraph--align-' + this.align]: true,
       } }, h("slot", null)));
   }
   static get is() { return "b2b-paragraph"; }

package/dist/collection/components/radio/radio.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 */
@@ -257,7 +256,7 @@
   user-select: none;
 }
 .b2b-radio span {
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
   color: var(--b2b-color-grey-300);
   display: block;

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

@@ -0,0 +1,36 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-radio', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent('<b2b-radio-button label="test" value="one"></b2b-radio-button>');
+  });
+  it('renders', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).toBeDefined();
+  });
+  it('emits when clicked', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+  it('should not emit when radio is already selected', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.click();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventTimes(1);
+  });
+  it('should not emit when radio is disabled', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).not.toHaveReceivedEvent();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bRadioButtonComponent } from './radio';
+it('should render the radio button', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should disable the radio button', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint message if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", hint: "this is a hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style if it is marked as invalid.', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and it is marked as invalid', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/radio-group/radio-group.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 */
@@ -232,7 +231,7 @@
 }
 .b2b-radio-group span {
   display: block;
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   color: var(--b2b-color-grey-300);
   line-height: var(--b2b-size-copy-line-height-75);
   margin-top: 1px;

package/dist/collection/components/radio-group/radio-group.e2e.js

@@ -0,0 +1,71 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Radio-Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+            <b2b-radio-group label="test label" name="test-group">
+                <b2b-radio-button label="one" value="one" name="test-group" id="one" hint="test" error="test"></b2b-radio-button>
+                <b2b-radio-button label="two" value="two" name="test-group" id="two"</b2b-radio-button>
+            </b2b-radio-group>
+        `);
+  });
+  it('should render the radio group component', async () => {
+    const element = await page.find('b2b-radio-group');
+    expect(element).not.toBeNull();
+  });
+  it('should have all radio buttons unchecked by default and check a radio button', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).not.toHaveAttribute('checked');
+    element.setAttribute('checked', true);
+    await page.waitForChanges();
+    expect(element).toHaveAttribute('checked');
+  });
+  it('should receive a custom event', async () => {
+    const element = await page.find('b2b-radio-button >>> div > input');
+    expect(element).not.toBeNull();
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should emit a custom event when a radio button is checked', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).not.toBeNull();
+    const b2bGroupChange = await page.spyOnEvent('b2b-group-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(b2bGroupChange).toHaveReceivedEvent();
+  });
+  it('should not emit an event when the checked radio is already selected', async () => {
+    const firstRadio = await page.find({ text: 'one' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstRadio.click();
+    await firstRadio.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEventTimes(1);
+  });
+  it('should disable all radio when the property is specified', async () => {
+    const parentElement = await page.find('b2b-radio-group');
+    const element = await page.find('b2b-radio-button >>> .b2b-radio');
+    expect(element).not.toHaveClass('b2b-radio--disabled');
+    parentElement.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-radio--disabled');
+  });
+  it('should set all radio buttons to invalid when the property is specified', async () => {
+    const parentElement = await page.find('b2b-radio-group');
+    const element = await page.find('b2b-radio-button >>> .b2b-radio');
+    expect(element).not.toHaveClass('b2b-radio--error');
+    parentElement.setProperty('invalid', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-radio--error');
+  });
+  it('should remove all children hint texts when the component is rendered', async () => {
+    const element = await page.find('b2b-radio-button');
+    const error = element.error;
+    const hint = element.hint;
+    expect(hint).not.toBeDefined;
+    expect(error).not.toBeDefined;
+  });
+});

package/dist/collection/components/radio-group/radio-group.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { RadioButtonGroupComponent } from './radio-group';
+it('should render the checkbox group and not show a hint or an error unless specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", hint: "this is a test hint", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group error if a hint string and an error are specified and the group is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", hint: "this is a test hint", error: "this is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should switch to horizontal alignment if specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", alignment: "horizontal" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/required-separator/required-separator.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 */
@@ -218,9 +217,9 @@
   font-size: var(--b2b-size-copy-100);
   font-family: var(--b2b-font-family-default);
 }
-:host .b2b-required-separator--label {
+:host .b2b-required-separator__label {
   margin-bottom: var(--b2b-size-20);
 }
-:host .b2b-required-separator--asterisk {
+:host .b2b-required-separator__asterisk {
   color: var(--b2b-color-red-100);
 }

package/dist/collection/components/required-separator/required-separator.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Required Separator', () => {
+  let page;
+  it('should render', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-required-separator></b2b-required-separator>`);
+    const element = await page.find('b2b-required-separator');
+    expect(element).not.toBeNull();
+  });
+  it('should change the label', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-required-separator label="Required"></b2b-required-separator>`);
+    const element = await page.find({ text: 'Required' });
+    const label = element.textContent;
+    expect(label).toEqualText('Required');
+  });
+});

package/dist/collection/components/required-separator/required-separator.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
     this.label = 'Pflichtfeld';
   }
   render() {
-    return (h(Host, null, h("div", { class: "b2b-required-separator--label" }, h("span", { class: "b2b-required-separator--asterisk" }, "* "), h("span", null, this.label)), h("b2b-separator", null)));
+    return (h(Host, null, h("div", { class: "b2b-required-separator__label" }, h("span", { class: "b2b-required-separator__asterisk" }, "* "), h("span", null, this.label)), h("b2b-separator", null)));
   }
   static get is() { return "b2b-required-separator"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/rounded-icon/rounded-icon.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 */
@@ -218,7 +217,7 @@
   width: 24px;
   height: 24px;
   display: inline-flex;
-  padding: 6px;
+  padding: 3px;
   border-radius: 100%;
 }
 ::slotted(*[slot=text]) {

package/dist/collection/components/rounded-icon/rounded-icon.js

@@ -2,11 +2,13 @@ import { h, Host } from '@stencil/core';
 export class RoundedIconComponent {
   constructor() {
     this.color = 'var(--b2b-color-info-50)';
+    this.borderColor = undefined;
     this.contentColor = 'var(--b2b-color-copy-default)';
   }
   render() {
     return (h(Host, null, h("div", { style: {
         ['background-color']: this.color,
+        ['border']: `1px solid ${this.borderColor || this.color}`,
       }, class: {
         'b2b-rounded-icon': true,
       } }, h("div", { style: {
@@ -47,6 +49,23 @@ export class RoundedIconComponent {
         "reflect": false,
         "defaultValue": "'var(--b2b-color-info-50)'"
       },
+      "borderColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
+        },
+        "attribute": "border-color",
+        "reflect": false
+      },
       "contentColor": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/scrollable-container/scrollable-container.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 */