@otto-de/b2b-core-components 1.37.0 → 1.37.1

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

@@ -2,21 +2,21 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label, required, name, disabled, invalid, alignment, hint, error, }) => {
     return html ` <b2b-radio-group
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    alignment="${alignment}"
-    hint="${hint}"
-    error="${error}">
+    label=${label}
+    required=${required}
+    name=${name}
+    disabled=${disabled}
+    invalid=${invalid}
+    alignment=${alignment}
+    hint=${hint}
+    error=${error}>
     <b2b-radio-button
       label="Option 1"
-      name="${name}"
+      name=${name}
       value="one"></b2b-radio-button>
     <b2b-radio-button
       label="Option 2"
-      name="${name}"
+      name=${name}
       value="two"></b2b-radio-button>
   </b2b-radio-group>`;
 };

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

@@ -3,7 +3,7 @@ import { html } from "lit-html";
 const Template = ({ label }) => {
     return html `<div style="width: 400px">
     <b2b-input required="true" label="Name"></b2b-input
-    ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
+    ><br /><b2b-required-separator label=${label}></b2b-required-separator>
   </div>`;
 };
 const defaultArgs = {

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

@@ -2,8 +2,8 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ color, contentColor, iconName }) => {
     return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <b2b-icon-100 slot="icon" icon="${iconName}"></b2b-icon-100>
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
+      <b2b-icon-100 slot="icon" icon=${iconName}></b2b-icon-100>
     </b2b-rounded-icon>
   </div>`;
 };
@@ -16,7 +16,7 @@ story010Icon.args = {
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
     return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+    <b2b-rounded-icon color=${color} content-color=${contentColor}>
       <span slot="text">${textContent}</span>
     </b2b-rounded-icon>
   </div>`;

package/dist/collection/components/search/search.stories.js

@@ -26,7 +26,7 @@ const Template = ({ placeholder, optionsList, disabled }) => {
       contenteditable
       data-testid="search-element"
       disabled=${disabled}
-      placeholder="${placeholder}"
+      placeholder=${placeholder}
       .optionsList=${optionsList}
       @b2b-input=${onInput}></b2b-search>
   </div>`;
@@ -64,7 +64,7 @@ const CustomSearchTemplate = ({ placeholder, optionsList }) => {
     <b2b-input-group>
       <b2b-input-list
         slot="start"
-        placeholder="${placeholder}"
+        placeholder=${placeholder}
         .optionsList=${optionsList}></b2b-input-list>
       <b2b-dropdown style="width: 50%" invalid error="an error">
         <option value="one">Option 1</option>

package/dist/collection/components/separator/separator.stories.js

@@ -13,9 +13,9 @@ const Template = ({ alignment }) => {
             margin: `margin: 10px 0;`,
             width: null,
         };
-    return html `<div style="${styles.display}">
+    return html `<div style=${styles.display}>
     <p style="${styles.margin} ${styles.width}">${content}</p>
-    <b2b-separator alignment="${alignment}"></b2b-separator>
+    <b2b-separator alignment=${alignment}></b2b-separator>
     <p style="${styles.margin} ${styles.width}">${content}</p>
   </div>`;
 };

package/dist/collection/components/shimmer/shimmer.js

@@ -55,7 +55,7 @@ export class ShimmerComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the shimmer effect im px."
+                    "text": "The width of the shimmer effect in px."
                 },
                 "attribute": "width",
                 "reflect": false

package/dist/collection/components/shimmer/shimmer.stories.js

@@ -24,10 +24,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-shimmer
-      loading="${args.loading}"
-      width="${args.width}"
-      height="${args.height}">
-      This is the mean content which takes a while to load.
+      loading=${args.loading}
+      width=${args.width}
+      height=${args.height}>
+      This is the main content, which takes a while to load.
     </b2b-shimmer>`;
     },
 };

package/dist/collection/components/snackbar/snackbar.stories.js

@@ -45,14 +45,14 @@ const meta = {
       <hr />
       <b2b-snackbar
         @b2b-close=${hideSnackbar}
-        description="${args.description}"
-        type="${args.type}"
-        opened="${args.opened}"
-        timed="${args.timed}"
-        duration="${args.duration}"
-        has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"
-        width="${args.width}"></b2b-snackbar>`;
+        description=${args.description}
+        type=${args.type}
+        opened=${args.opened}
+        timed=${args.timed}
+        duration=${args.duration}
+        has-action=${args.hasAction}
+        action-label=${args.actionLabel}
+        width=${args.width}></b2b-snackbar>`;
     },
 };
 export default meta;

package/dist/collection/components/spinner/spinner.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ size, color }) => {
-    return html ` <b2b-spinner size="${size}" color="${color}"></b2b-spinner>`;
+    return html ` <b2b-spinner size=${size} color=${color}></b2b-spinner>`;
 };
 const defaultArgs = {
     size: '100',

package/dist/collection/components/tab-group/tab-group.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ useRouter }) => {
-    return html ` <b2b-tab-group use-router="${useRouter}">
+    return html ` <b2b-tab-group use-router=${useRouter}>
     <b2b-tab slot="tab">First Tab</b2b-tab>
     <b2b-tab-panel slot="panel"
       ><div>

package/dist/collection/components/table/table.stories.js

@@ -59,14 +59,14 @@ const meta = {
     <b2b-table-rowgroup type="body">
       ${repeat(args.data.rows, (row, index) => html `
           <b2b-table-row
-            highlight="${args.highlight}"
+            highlight=${args.highlight}
             color=${index === 0 ? args.color : 'default'}>
             ${repeat(
         // @ts-ignore
         row, (cell, index) => html `<b2b-table-cell
                   ?divider=${args.withDividers && index === 0}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${cell}</b2b-table-cell
                 >`)}<b2b-table-cell
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
@@ -111,7 +111,7 @@ export const ScrollableTable = {
         var args = __rest(_a, []);
         return html `<b2b-scrollable-container
       style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header">
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -127,12 +127,12 @@ export const ScrollableTable = {
         <b2b-table-rowgroup type="body">
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map((data, index) => html `<b2b-table-cell
                     ?divider=${args.withDividers && index === 0}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
             </b2b-table-row>`;
@@ -148,12 +148,12 @@ const RenderSortableTable = (_a) => {
       <b2b-table-rowgroup type="body">
         ${args.data.rows.map((row, index) => {
         return html `<b2b-table-row
-            highlight="${args.highlight}"
+            highlight=${args.highlight}
             color=${index === 0 ? args.color : 'default'}>
             ${row.map(data => html `<b2b-table-cell
                   ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
+                  align=${args.align}
+                  text-wrap=${args.textWrap}
                   >${data}</b2b-table-cell
                 >`)}
           </b2b-table-row>`;
@@ -233,7 +233,7 @@ export const AccordionTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -249,12 +249,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -266,12 +266,12 @@ export const AccordionTable = {
         <b2b-table-rowgroup type="body" accordion opened>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -289,7 +289,7 @@ export const SelectableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-      <b2b-table size="${args.size}">
+      <b2b-table size=${args.size}>
         <b2b-table-rowgroup type="header" accordion selectable>
           <b2b-table-row>
             ${args.data.columns.map((columnName, index) => {
@@ -305,12 +305,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -322,12 +322,12 @@ export const SelectableTable = {
         <b2b-table-rowgroup type="body" accordion opened selectable>
           ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-              highlight="${args.highlight}"
+              highlight=${args.highlight}
               color=${index === 0 ? args.color : 'default'}>
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${args.withDividers}
-                    align="${args.align}"
-                    text-wrap="${args.textWrap}"
+                    align=${args.align}
+                    text-wrap=${args.textWrap}
                     >${data}</b2b-table-cell
                   >`)}
               <b2b-table-cell
@@ -345,42 +345,42 @@ export const ColspanTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 500px">
-      <b2b-table size="${args.size}">
-        <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+      <b2b-table size=${args.size}>
+        <b2b-table-rowgroup type="header" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-header divider="${args.withDividers}" colspan="2"
+            <b2b-table-header divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-header
             >
-            <b2b-table-header divider="${args.withDividers}"
+            <b2b-table-header divider=${args.withDividers}
               >1 Column</b2b-table-header
             >
             <b2b-table-header>1 Column</b2b-table-header>
           </b2b-table-row>
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+        <b2b-table-rowgroup type="body" selectable=${args.selectable}>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>
           </b2b-table-row>
           <b2b-table-row>
-            <b2b-table-cell divider="${args.withDividers}" colspan="2"
+            <b2b-table-cell divider=${args.withDividers} colspan="2"
               >2 Columns</b2b-table-cell
             >
-            <b2b-table-cell divider="${args.withDividers}"
+            <b2b-table-cell divider=${args.withDividers}
               >1 Column</b2b-table-cell
             >
             <b2b-table-cell>1 Column</b2b-table-cell>

package/dist/collection/components/textarea/textarea.stories.js

@@ -2,18 +2,18 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, placeholder, disabled, value, invalid, hint, error, autofocus, name, resize, height, }) => {
     return html `<b2b-textarea
-    label="${label}"
-    required="${required}"
-    placeholder="${placeholder}"
-    disabled="${disabled}"
-    value="${value}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    autofocus="${autofocus}"
-    name="${name}"
-    height="${height}"
-    resize="${resize}"></b2b-textarea>`;
+    label=${label}
+    required=${required}
+    placeholder=${placeholder}
+    disabled=${disabled}
+    value=${value}
+    invalid=${invalid}
+    hint=${hint}
+    error=${error}
+    autofocus=${autofocus}
+    name=${name}
+    height=${height}
+    resize=${resize}></b2b-textarea>`;
 };
 const defaultArgs = {
     label: 'Textarea',

package/dist/collection/components/toggle-group/toggle-group.stories.js

@@ -2,23 +2,23 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ name, disabled, singleDisabled }) => {
     return html `
-    <b2b-toggle-group name="${name}" disabled="${disabled}">
+    <b2b-toggle-group name=${name} disabled=${disabled}>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="abcd"
         label="ABCD"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="efgh"
         label="EFGH"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="ijkl"
         label="IJKL"></b2b-toggle-button>
       <b2b-toggle-button
-        name="${name}"
+        name=${name}
         value="mnop"
-        disabled="${singleDisabled}"
+        disabled=${singleDisabled}
         label="MNOP"></b2b-toggle-button>
     </b2b-toggle-group>
   `;

package/dist/collection/components/toggle-switch/toggle-switch.stories.js

@@ -25,10 +25,10 @@ export default {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-toggle-switch
-      label="${args.label}"
-      disabled="${args.disabled}"
-      label-position="${args.labelPosition}"
-      state="${args.state}" />`;
+      label=${args.label}
+      disabled=${args.disabled}
+      label-position=${args.labelPosition}
+      state=${args.state} />`;
     },
 };
 export const SwitchOn = {};

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -47,10 +47,10 @@ const meta = {
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger"
           >${markup}
         </b2b-tooltip>
@@ -67,10 +67,10 @@ export const FocusTooltip = Object.assign(Object.assign({}, meta), { render: arg
       <b2b-paragraph>
         I am some text with a tooltip
         <b2b-tooltip
-          position="${args.position}"
-          trigger="${args.trigger}"
-          content="${args.content}"
-          opened="${args.opened}"
+          position=${args.position}
+          trigger=${args.trigger}
+          content=${args.content}
+          opened=${args.opened}
           data-testid="trigger">
           ${focusTriggerMarkup}
         </b2b-tooltip>

package/dist/collection/components/wizard/wizard.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ activeStep, checkIcon }) => {
-    return html `<b2b-wizard active-step="${activeStep}" check-icon="${checkIcon}">
+    return html `<b2b-wizard active-step=${activeStep} check-icon=${checkIcon}>
     <b2b-wizard-step>Step 1</b2b-wizard-step>
     <b2b-wizard-step>Step 2</b2b-wizard-step>
     <b2b-wizard-step>Step 3</b2b-wizard-step>
@@ -13,15 +13,15 @@ story010Wizard.args = { activeStep: '2', checkIcon: true };
 story010Wizard.storyName = 'Default';
 const StatesTemplate = ({ step }) => {
     return html `
-    <b2b-wizard-step step="${step}" state="default">Default</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="completed"
+    <b2b-wizard-step step=${step} state="default">Default</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="completed"
       >Completed with icon</b2b-wizard-step
     >
-    <b2b-wizard-step step="${step}" state="completed" check-icon="false"
+    <b2b-wizard-step step=${step} state="completed" check-icon="false"
       >Completed with number</b2b-wizard-step
     >
-    <b2b-wizard-step step="${step}" state="pending">Pending</b2b-wizard-step>
-    <b2b-wizard-step step="${step}" state="disabled">Disabled</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="pending">Pending</b2b-wizard-step>
+    <b2b-wizard-step step=${step} state="disabled">Disabled</b2b-wizard-step>
   `;
 };
 export const story020WizardStates = StatesTemplate.bind({});

package/dist/collection/components/wizard-icon/wizard-icon.stories.js

@@ -2,7 +2,7 @@ import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ state, step, checkIcon }) => {
     return html `<div>
-    <b2b-wizard-icon state="${state}" step="${step}" check-icon="${checkIcon}">
+    <b2b-wizard-icon state=${state} step=${step} check-icon=${checkIcon}>
     </b2b-wizard-icon>
   </div>`;
 };

package/dist/custom-elements.json

@@ -4327,7 +4327,7 @@
         },
         {
           "name": "width",
-          "description": "The width of the shimmer effect im px."
+          "description": "The width of the shimmer effect in px."
         }
       ]
     },

package/dist/types/components/shimmer/shimmer.d.ts

@@ -1,7 +1,7 @@
 export declare class ShimmerComponent {
     /** Whether the shimmer effect is shown or not. */
     loading: boolean;
-    /** The width of the shimmer effect im px. */
+    /** The width of the shimmer effect in px. */
     width: number;
     /** The height of the shimmer effect in px. */
     height: number;

package/dist/types/components.d.ts

@@ -1206,7 +1206,7 @@ export namespace Components {
          */
         "loading": boolean;
         /**
-          * The width of the shimmer effect im px.
+          * The width of the shimmer effect in px.
          */
         "width": number;
     }
@@ -4102,7 +4102,7 @@ declare namespace LocalJSX {
          */
         "loading"?: boolean;
         /**
-          * The width of the shimmer effect im px.
+          * The width of the shimmer effect in px.
          */
         "width"?: number;
     }

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@otto-de/b2b-core-components",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -3510,7 +3510,7 @@
             },
             {
               "name": "width",
-              "description": "The width of the shimmer effect im px.\r\nValues: number",
+              "description": "The width of the shimmer effect in px.\r\nValues: number",
               "required": false,
               "value": {
                 "kind": "expression",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.37.0",
+  "version": "1.37.1",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@otto-de/b2b-tokens": "1.37.0",
+    "@otto-de/b2b-tokens": "1.37.1",
     "@stencil/core": "4.13.0",
     "globals": "^16.0.0"
   },