@otto-de/b2b-core-components 1.30.0 → 1.31.1

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,14 @@
 'use strict';
 
-var index = require('./index-CIrNIFXs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-668808fd.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  await index.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"b2b-date-picker.cjs\",[[1,\"b2b-date-picker\",{\"disablePastDates\":[4,\"disable-past-dates\"],\"disableFutureDates\":[4,\"disable-future-dates\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disableDates\":[1,\"disable-dates\"],\"label\":[1],\"required\":[516],\"preSelectedDate\":[1,\"pre-selected-date\"],\"showHint\":[4,\"show-hint\"],\"width\":[2],\"disableDays\":[1,\"disable-days\"],\"disableDatesUntil\":[1,\"disable-dates-until\"],\"disableDatesFrom\":[1,\"disable-dates-from\"],\"hint\":[1],\"placeholder\":[513],\"language\":[1],\"showDatePicker\":[32],\"focused\":[32],\"datePickerView\":[32],\"selectedMonth\":[32],\"selectedYear\":[32],\"selectedDay\":[32],\"selectedDate\":[32],\"userInputDate\":[32],\"invalid\":[32],\"errorMessage\":[32],\"datesToBeDisabled\":[32],\"normalizedDisableEvery\":[32],\"normalizedDisableDatesUntil\":[32],\"normalizedDisableDatesFrom\":[32]},[[0,\"b2b-date-picker-escape\",\"handleEscapePress\"],[0,\"b2b-date-selected\",\"handleDateSelection\"],[0,\"b2b-date-picker-previous-month\",\"getPreviousMonth\"],[0,\"b2b-date-picker-next-month\",\"getNextMonth\"],[0,\"b2b-date-picker-view-changed\",\"handleDatePickerViewChanged\"],[0,\"b2b-date-picker-month-selected\",\"handleMonthSelected\"],[0,\"b2b-date-picker-year-selected\",\"handleYearSelected\"]],{\"disableDates\":[\"handleDisableDatesChanged\"],\"disableDays\":[\"handleDisableDaysChanged\"],\"disableDatesUntil\":[\"handleDisableDatesUntilChanged\"],\"disableDatesFrom\":[\"handleDisableDatesFromChanged\"],\"disablePastDates\":[\"handleDisablePastDatesChanged\"],\"disableFutureDates\":[\"handleDisableFutureDatesChanged\"],\"disableWeekends\":[\"handleDisableWeekendsChanged\"]}]]],[\"b2b-search.cjs\",[[1,\"b2b-search\",{\"placeholder\":[1],\"optionsList\":[16,\"options-list\"],\"value\":[1537],\"disabled\":[516],\"closed\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-multiselect-dropdown.cjs\",[[1,\"b2b-multiselect-dropdown\",{\"label\":[1],\"placeholder\":[513],\"selectedValues\":[1,\"selected-values\"],\"optionsList\":[1,\"options-list\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"selectAllLabel\":[1,\"select-all-label\"],\"maxOptionsVisible\":[2,\"max-options-visible\"],\"required\":[516],\"invalid\":[516],\"errorMessage\":[1,\"error-message\"],\"hint\":[1],\"disabled\":[516],\"currentSelectedValues\":[32],\"currentList\":[32],\"value\":[32],\"isElementFocused\":[32],\"isOpen\":[32],\"hasOptionList\":[32]},null,{\"optionsList\":[\"watchPropHandler\"],\"selectedValues\":[\"handleSelectedValuesChangeFromOutside\"],\"currentSelectedValues\":[\"handleSelectedValuesChange\"]}]]],[\"b2b-table-row.cjs\",[[1,\"b2b-table-row\",{\"highlight\":[4],\"color\":[1],\"selectable\":[4],\"size\":[1],\"value\":[1],\"indeterminate\":[4],\"checked\":[1028],\"isAccordionValue\":[32],\"isOpen\":[32],\"toggleAccordion\":[64]},[[0,\"b2b-change\",\"toggleSelected\"]]]]],[\"b2b-wizard-step.cjs\",[[1,\"b2b-wizard-step\",{\"state\":[1],\"step\":[1],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-modal.cjs\",[[1,\"b2b-modal\",{\"heading\":[1],\"opened\":[1540],\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"escDismiss\":[4,\"esc-dismiss\"],\"variant\":[1],\"iconHover\":[32],\"isOpen\":[32]},[[0,\"keydown\",\"handleKeypress\"]],{\"opened\":[\"openedChanged\"]}]]],[\"b2b-pagination.cjs\",[[1,\"b2b-pagination\",{\"totalPages\":[2,\"total-pages\"],\"activePage\":[1538,\"active-page\"],\"ariaLabelNextPage\":[1,\"aria-label-next-page\"],\"ariaLabelPreviousPage\":[1,\"aria-label-previous-page\"]},null,{\"totalPages\":[\"onTotalPagesChange\"],\"activePage\":[\"onActivePageChange\"]}]]],[\"b2b-alert.cjs\",[[1,\"b2b-alert\",{\"type\":[1],\"size\":[1],\"opened\":[1028],\"hasCloseButton\":[4,\"has-close-button\"],\"customIcon\":[4,\"custom-icon\"]},null,{\"opened\":[\"openedChanged\"]}]]],[\"b2b-checkbox-group.cjs\",[[1,\"b2b-checkbox-group\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"alignment\":[1],\"hint\":[1],\"error\":[1]},[[0,\"b2b-change\",\"handleCheckboxChange\"]],{\"disabled\":[\"disabledChanged\"],\"invalid\":[\"invalidChanged\"]}]]],[\"b2b-dropdown.cjs\",[[1,\"b2b-dropdown\",{\"label\":[1],\"required\":[516],\"name\":[513],\"placeholder\":[1],\"placeholderValue\":[1,\"placeholder-value\"],\"disabled\":[516],\"invalid\":[516],\"hint\":[1],\"error\":[1],\"isOpen\":[32],\"focused\":[32],\"selectedValue\":[32],\"selectedText\":[32],\"options\":[32],\"clearSelection\":[64]},null,{\"isOpen\":[\"watchDropdownState\"]}]]],[\"b2b-radio-button.cjs\",[[1,\"b2b-radio-button\",{\"label\":[1],\"required\":[516],\"name\":[513],\"checked\":[1540],\"disabled\":[516],\"invalid\":[4],\"value\":[513],\"hint\":[1],\"error\":[1]}]]],[\"b2b-radio-group.cjs\",[[1,\"b2b-radio-group\",{\"name\":[1],\"label\":[1],\"required\":[4],\"alignment\":[1],\"disabled\":[516],\"invalid\":[516],\"hint\":[1],\"error\":[1],\"currentValue\":[32]},[[0,\"b2b-change\",\"handleRadioButtonChange\"]],{\"invalid\":[\"invalidChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-required-separator.cjs\",[[1,\"b2b-required-separator\",{\"label\":[1]}]]],[\"b2b-snackbar.cjs\",[[1,\"b2b-snackbar\",{\"description\":[1],\"type\":[1],\"opened\":[1540],\"timed\":[4],\"duration\":[2],\"hasAction\":[4,\"has-action\"],\"actionLabel\":[1,\"action-label\"],\"width\":[1]},null,{\"opened\":[\"onVisibleChange\"]}]]],[\"b2b-tab-group.cjs\",[[1,\"b2b-tab-group\",{\"useRouter\":[4,\"use-router\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]]]]],[\"b2b-textarea.cjs\",[[1,\"b2b-textarea\",{\"label\":[1],\"required\":[516],\"placeholder\":[513],\"disabled\":[516],\"invalid\":[516],\"focusOnLoad\":[516,\"focus-on-load\"],\"resize\":[513],\"hint\":[1],\"error\":[1],\"value\":[1537],\"name\":[513],\"maxLength\":[514,\"max-length\"],\"height\":[1]}]]],[\"b2b-anchor.cjs\",[[1,\"b2b-anchor\",{\"href\":[1],\"download\":[1],\"target\":[1],\"size\":[1],\"hoverColor\":[1,\"hover-color\"],\"underlineText\":[4,\"underline-text\"]}]]],[\"b2b-background-box.cjs\",[[1,\"b2b-background-box\",{\"maxWidth\":[4,\"max-width\"],\"noPadding\":[4,\"no-padding\"],\"borderTop\":[1,\"border-top\"],\"borderRight\":[1,\"border-right\"],\"borderBottom\":[1,\"border-bottom\"],\"borderLeft\":[1,\"border-left\"]}]]],[\"b2b-breadcrumb.cjs\",[[1,\"b2b-breadcrumb\",{\"paddingTop\":[2,\"padding-top\"],\"paddingBottom\":[2,\"padding-bottom\"]},[[0,\"b2b-change\",\"onSelectedChange\"]]]]],[\"b2b-breadcrumb-item.cjs\",[[1,\"b2b-breadcrumb-item\",{\"href\":[1],\"value\":[8],\"active\":[1028]}]]],[\"b2b-card.cjs\",[[1,\"b2b-card\",{\"disabled\":[4],\"href\":[1],\"target\":[1]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"b2b-flyout-menu.cjs\",[[1,\"b2b-flyout-menu\",{\"opened\":[1028]},[[0,\"keydown\",\"handleKeyDown\"],[0,\"b2b-option-selected\",\"handleSelected\"],[4,\"click\",\"handleClickOutside\"]]]]],[\"b2b-flyout-menu-option.cjs\",[[1,\"b2b-flyout-menu-option\",{\"option\":[1],\"disabled\":[516],\"separator\":[4]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-grid.cjs\",[[1,\"b2b-grid\",{\"margin\":[2]}]]],[\"b2b-grid-col.cjs\",[[1,\"b2b-grid-col\",{\"span\":[514],\"textAlign\":[1,\"text-align\"]}]]],[\"b2b-grid-row.cjs\",[[1,\"b2b-grid-row\",{\"columnGap\":[2,\"column-gap\"],\"rowGap\":[2,\"row-gap\"],\"alignItems\":[1,\"align-items\"],\"justify\":[1]}]]],[\"b2b-icon.cjs\",[[1,\"b2b-icon\",{\"icon\":[1],\"color\":[1],\"size\":[1],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-icon-50.cjs\",[[1,\"b2b-icon-50\",{\"icon\":[1],\"color\":[1],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-label.cjs\",[[1,\"b2b-label\",{\"type\":[1]}]]],[\"b2b-paragraph.cjs\",[[1,\"b2b-paragraph\",{\"weight\":[1],\"size\":[1],\"align\":[1],\"margin\":[4],\"variant\":[1],\"display\":[1]}]]],[\"b2b-progress-bar.cjs\",[[1,\"b2b-progress-bar\",{\"progress\":[2],\"label\":[1],\"labelType\":[1,\"label-type\"],\"labelPosition\":[1,\"label-position\"]}]]],[\"b2b-scrollable-container.cjs\",[[1,\"b2b-scrollable-container\"]]],[\"b2b-shimmer.cjs\",[[1,\"b2b-shimmer\",{\"loading\":[4],\"width\":[2],\"height\":[2]}]]],[\"b2b-tab.cjs\",[[1,\"b2b-tab\",{\"selected\":[516],\"disabled\":[4],\"invalid\":[4]},null,{\"selected\":[\"propagateChange\"]}]]],[\"b2b-tab-panel.cjs\",[[1,\"b2b-tab-panel\"]]],[\"b2b-table.cjs\",[[1,\"b2b-table\",{\"size\":[1]},[[0,\"b2b-change\",\"onColumnSelected\"]]]]],[\"b2b-table-rowgroup.cjs\",[[1,\"b2b-table-rowgroup\",{\"type\":[1],\"size\":[1],\"accordion\":[516],\"selectable\":[4],\"fixed\":[4],\"opened\":[516],\"selectedValues\":[32]},[[0,\"b2b-open\",\"handleOpenChange\"],[0,\"b2b-row-selected\",\"handleSelectedChange\"]]]]],[\"b2b-toggle-button.cjs\",[[1,\"b2b-toggle-button\",{\"label\":[1],\"name\":[513],\"checked\":[1540],\"disabled\":[516],\"value\":[513]}]]],[\"b2b-toggle-chip.cjs\",[[1,\"b2b-toggle-chip\",{\"label\":[1],\"value\":[520],\"name\":[513],\"active\":[1028],\"disabled\":[516]}]]],[\"b2b-toggle-group.cjs\",[[1,\"b2b-toggle-group\",{\"name\":[1],\"disabled\":[516],\"currentValue\":[32]},[[0,\"b2b-change\",\"handleToggleButtonChange\"]],{\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-toggle-switch.cjs\",[[1,\"b2b-toggle-switch\",{\"label\":[1],\"name\":[1],\"labelPosition\":[1,\"label-position\"],\"disabled\":[4],\"state\":[1028]}]]],[\"b2b-tooltip.cjs\",[[1,\"b2b-tooltip\",{\"position\":[1],\"content\":[1],\"trigger\":[1],\"opened\":[1540]},null,{\"opened\":[\"handleOpenedChange\"]}]]],[\"b2b-wizard.cjs\",[[1,\"b2b-wizard\",{\"activeStep\":[1,\"active-step\"],\"custom\":[4],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-table-cell_2.cjs\",[[1,\"b2b-table-cell\",{\"textWrap\":[516,\"text-wrap\"],\"size\":[1],\"align\":[1],\"divider\":[4],\"color\":[1],\"colspan\":[2],\"totalCols\":[2,\"total-cols\"],\"useTextEllipsis\":[32]}],[1,\"b2b-table-header\",{\"divider\":[4],\"size\":[1],\"fixed\":[4],\"sortDirection\":[1537,\"sort-direction\"],\"sortId\":[1,\"sort-id\"],\"colspan\":[2],\"contentAlign\":[1,\"content-align\"],\"totalCols\":[2,\"total-cols\"],\"active\":[32],\"iconAlign\":[32]}]]],[\"b2b-rounded-icon.cjs\",[[1,\"b2b-rounded-icon\",{\"color\":[1],\"borderColor\":[1,\"border-color\"],\"contentColor\":[1,\"content-color\"]}]]],[\"b2b-wizard-icon.cjs\",[[1,\"b2b-wizard-icon\",{\"step\":[1],\"state\":[1],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-input-group_2.cjs\",[[1,\"b2b-input-list\",{\"label\":[1],\"required\":[516],\"placeholder\":[513],\"optionsList\":[16,\"options-list\"],\"value\":[1537],\"disabled\":[516],\"groupDisabled\":[4,\"group-disabled\"],\"hasOptionList\":[32],\"isElementFocused\":[32]},[[0,\"keydown\",\"handleKeyDown\"]],{\"optionsList\":[\"watchPropHandler\"]}],[1,\"b2b-input-group\",{\"invalid\":[4],\"disabled\":[4],\"error\":[1],\"hint\":[1]},null,{\"invalid\":[\"invalidChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-separator.cjs\",[[1,\"b2b-separator\",{\"alignment\":[1]}]]],[\"b2b-input_2.cjs\",[[1,\"b2b-input\",{\"label\":[1],\"required\":[516],\"type\":[513],\"disabled\":[516],\"invalid\":[516],\"placeholder\":[513],\"value\":[1537],\"name\":[513],\"hint\":[1],\"error\":[1],\"focusOnLoad\":[4,\"focus-on-load\"],\"groupDisabled\":[4,\"group-disabled\"],\"inputTextAlign\":[1,\"input-text-align\"],\"hasFocus\":[32],\"hasTextPrefix\":[32],\"hasTextSuffix\":[32],\"setFocus\":[64],\"clearInput\":[64]}],[0,\"b2b-input-list-option\",{\"option\":[1]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-icon-100.cjs\",[[1,\"b2b-icon-100\",{\"icon\":[1],\"color\":[1],\"size\":[2],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-input-label.cjs\",[[1,\"b2b-input-label\",{\"required\":[4],\"disabled\":[4]}]]],[\"b2b-checkbox.cjs\",[[1,\"b2b-checkbox\",{\"label\":[1],\"required\":[516],\"checked\":[1540],\"disabled\":[516],\"indeterminate\":[1028],\"error\":[1],\"hint\":[1],\"name\":[513],\"value\":[520],\"invalid\":[4],\"standalone\":[4],\"groupDisabled\":[4,\"group-disabled\"]}]]],[\"b2b-chip-component_2.cjs\",[[0,\"b2b-multiselect-option\",{\"option\":[1],\"selected\":[1028],\"indeterminate\":[4]}],[1,\"b2b-chip-component\",{\"label\":[1],\"type\":[1],\"labelStyle\":[1,\"label-style\"],\"disabled\":[4],\"hasCloseButton\":[4,\"has-close-button\"],\"value\":[520],\"customMargin\":[1,\"custom-margin\"]}]]],[\"b2b-headline.cjs\",[[1,\"b2b-headline\",{\"size\":[1],\"align\":[1],\"noMargin\":[4,\"no-margin\"]}]]],[\"b2b-date-picker-days_5.cjs\",[[1,\"b2b-date-picker-header\",{\"selectedMonth\":[2,\"selected-month\"],\"selectedYear\":[2,\"selected-year\"],\"language\":[1]}],[1,\"b2b-date-picker-days\",{\"selectedMonth\":[2,\"selected-month\"],\"selectedYear\":[2,\"selected-year\"],\"selectedDay\":[2,\"selected-day\"],\"disablePastDates\":[4,\"disable-past-dates\"],\"disableFutureDates\":[4,\"disable-future-dates\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disableDates\":[16,\"disable-dates\"],\"disableEvery\":[16,\"disable-every\"],\"disableDatesUntil\":[16,\"disable-dates-until\"],\"disableDatesFrom\":[16,\"disable-dates-from\"],\"disabled\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"b2b-date-picker-days-header\",{\"language\":[1]}],[1,\"b2b-date-picker-months\",{\"selectedMonth\":[2,\"selected-month\"],\"language\":[1]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"b2b-date-picker-years\",{\"selectedYear\":[2,\"selected-year\"],\"yearsRange\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-button_2.cjs\",[[1,\"b2b-button\",{\"variant\":[1],\"type\":[1],\"size\":[1],\"width\":[1],\"disabled\":[516],\"loading\":[4],\"active\":[516],\"href\":[1],\"target\":[1],\"download\":[1],\"groupDisabled\":[4,\"group-disabled\"],\"setFocus\":[64]},[[2,\"click\",\"handleHostClick\"]]],[1,\"b2b-spinner\",{\"size\":[1],\"color\":[1]}]]]]"), options);
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy(JSON.parse("[[\"b2b-date-picker.cjs\",[[1,\"b2b-date-picker\",{\"disablePastDates\":[4,\"disable-past-dates\"],\"disableFutureDates\":[4,\"disable-future-dates\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disableDates\":[1,\"disable-dates\"],\"label\":[1],\"required\":[516],\"preSelectedDate\":[1,\"pre-selected-date\"],\"showHint\":[4,\"show-hint\"],\"width\":[2],\"disableDays\":[1,\"disable-days\"],\"disableDatesUntil\":[1,\"disable-dates-until\"],\"disableDatesFrom\":[1,\"disable-dates-from\"],\"hint\":[1],\"placeholder\":[513],\"language\":[1],\"showDatePicker\":[32],\"focused\":[32],\"datePickerView\":[32],\"selectedMonth\":[32],\"selectedYear\":[32],\"selectedDay\":[32],\"selectedDate\":[32],\"userInputDate\":[32],\"invalid\":[32],\"errorMessage\":[32],\"datesToBeDisabled\":[32],\"normalizedDisableEvery\":[32],\"normalizedDisableDatesUntil\":[32],\"normalizedDisableDatesFrom\":[32]},[[0,\"b2b-date-picker-escape\",\"handleEscapePress\"],[0,\"b2b-date-selected\",\"handleDateSelection\"],[0,\"b2b-date-picker-previous-month\",\"getPreviousMonth\"],[0,\"b2b-date-picker-next-month\",\"getNextMonth\"],[0,\"b2b-date-picker-view-changed\",\"handleDatePickerViewChanged\"],[0,\"b2b-date-picker-month-selected\",\"handleMonthSelected\"],[0,\"b2b-date-picker-year-selected\",\"handleYearSelected\"]],{\"disableDates\":[\"handleDisableDatesChanged\"],\"disableDays\":[\"handleDisableDaysChanged\"],\"disableDatesUntil\":[\"handleDisableDatesUntilChanged\"],\"disableDatesFrom\":[\"handleDisableDatesFromChanged\"],\"disablePastDates\":[\"handleDisablePastDatesChanged\"],\"disableFutureDates\":[\"handleDisableFutureDatesChanged\"],\"disableWeekends\":[\"handleDisableWeekendsChanged\"]}]]],[\"b2b-search.cjs\",[[1,\"b2b-search\",{\"placeholder\":[1],\"optionsList\":[16],\"value\":[1537],\"disabled\":[516],\"closed\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-multiselect-dropdown.cjs\",[[1,\"b2b-multiselect-dropdown\",{\"label\":[1],\"placeholder\":[513],\"selectedValues\":[1,\"selected-values\"],\"optionsList\":[1,\"options-list\"],\"searchPlaceholder\":[1,\"search-placeholder\"],\"selectAllLabel\":[1,\"select-all-label\"],\"maxOptionsVisible\":[2,\"max-options-visible\"],\"required\":[516],\"invalid\":[516],\"errorMessage\":[1,\"error-message\"],\"hint\":[1],\"disabled\":[516],\"currentSelectedValues\":[32],\"currentList\":[32],\"value\":[32],\"isElementFocused\":[32],\"isOpen\":[32],\"hasOptionList\":[32]},null,{\"optionsList\":[\"watchPropHandler\"],\"selectedValues\":[\"handleSelectedValuesChangeFromOutside\"],\"currentSelectedValues\":[\"handleSelectedValuesChange\"]}]]],[\"b2b-table-row.cjs\",[[1,\"b2b-table-row\",{\"highlight\":[4],\"color\":[1],\"selectable\":[4],\"size\":[1],\"value\":[1],\"indeterminate\":[4],\"checked\":[1028],\"isAccordionValue\":[32],\"isOpen\":[32],\"toggleAccordion\":[64]},[[0,\"b2b-change\",\"toggleSelected\"]]]]],[\"b2b-wizard-step.cjs\",[[1,\"b2b-wizard-step\",{\"state\":[1],\"step\":[1],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-modal.cjs\",[[1,\"b2b-modal\",{\"heading\":[1],\"opened\":[1540],\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"escDismiss\":[4,\"esc-dismiss\"],\"variant\":[1],\"iconHover\":[32],\"isOpen\":[32]},[[0,\"keydown\",\"handleKeypress\"]],{\"opened\":[\"openedChanged\"]}]]],[\"b2b-pagination.cjs\",[[1,\"b2b-pagination\",{\"totalPages\":[2,\"total-pages\"],\"activePage\":[1538,\"active-page\"],\"ariaLabelNextPage\":[1,\"aria-label-next-page\"],\"ariaLabelPreviousPage\":[1,\"aria-label-previous-page\"]},null,{\"totalPages\":[\"onTotalPagesChange\"],\"activePage\":[\"onActivePageChange\"]}]]],[\"b2b-alert.cjs\",[[1,\"b2b-alert\",{\"type\":[1],\"size\":[1],\"opened\":[1028],\"hasCloseButton\":[4,\"has-close-button\"],\"customIcon\":[4,\"custom-icon\"]},null,{\"opened\":[\"openedChanged\"]}]]],[\"b2b-checkbox-group.cjs\",[[1,\"b2b-checkbox-group\",{\"label\":[1],\"required\":[4],\"disabled\":[4],\"invalid\":[4],\"alignment\":[1],\"hint\":[1],\"error\":[1]},[[0,\"b2b-change\",\"handleCheckboxChange\"]],{\"disabled\":[\"disabledChanged\"],\"invalid\":[\"invalidChanged\"]}]]],[\"b2b-dropdown.cjs\",[[1,\"b2b-dropdown\",{\"label\":[1],\"required\":[516],\"name\":[513],\"placeholder\":[1],\"placeholderValue\":[1,\"placeholder-value\"],\"disabled\":[516],\"invalid\":[516],\"hint\":[1],\"error\":[1],\"isOpen\":[32],\"focused\":[32],\"selectedValue\":[32],\"selectedText\":[32],\"options\":[32],\"clearSelection\":[64]},null,{\"isOpen\":[\"watchDropdownState\"]}]]],[\"b2b-radio-button.cjs\",[[1,\"b2b-radio-button\",{\"label\":[1],\"required\":[516],\"name\":[513],\"checked\":[1540],\"disabled\":[516],\"invalid\":[4],\"value\":[513],\"hint\":[1],\"error\":[1]}]]],[\"b2b-radio-group.cjs\",[[1,\"b2b-radio-group\",{\"name\":[1],\"label\":[1],\"required\":[4],\"alignment\":[1],\"disabled\":[516],\"invalid\":[516],\"hint\":[1],\"error\":[1],\"currentValue\":[32]},[[0,\"b2b-change\",\"handleRadioButtonChange\"]],{\"invalid\":[\"invalidChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-required-separator.cjs\",[[1,\"b2b-required-separator\",{\"label\":[1]}]]],[\"b2b-snackbar.cjs\",[[1,\"b2b-snackbar\",{\"description\":[1],\"type\":[1],\"opened\":[1540],\"timed\":[4],\"duration\":[2],\"hasAction\":[4,\"has-action\"],\"actionLabel\":[1,\"action-label\"],\"width\":[1]},null,{\"opened\":[\"onVisibleChange\"]}]]],[\"b2b-tab-group.cjs\",[[1,\"b2b-tab-group\",{\"useRouter\":[4,\"use-router\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]]]]],[\"b2b-textarea.cjs\",[[1,\"b2b-textarea\",{\"label\":[1],\"required\":[516],\"placeholder\":[513],\"disabled\":[516],\"invalid\":[516],\"focusOnLoad\":[516,\"focus-on-load\"],\"resize\":[513],\"hint\":[1],\"error\":[1],\"value\":[1537],\"name\":[513],\"maxLength\":[514,\"max-length\"],\"height\":[1]}]]],[\"b2b-anchor.cjs\",[[1,\"b2b-anchor\",{\"href\":[1],\"download\":[1],\"target\":[1],\"size\":[1],\"hoverColor\":[1,\"hover-color\"],\"underlineText\":[4,\"underline-text\"]}]]],[\"b2b-background-box.cjs\",[[1,\"b2b-background-box\",{\"maxWidth\":[4,\"max-width\"],\"noPadding\":[4,\"no-padding\"],\"borderTop\":[1,\"border-top\"],\"borderRight\":[1,\"border-right\"],\"borderBottom\":[1,\"border-bottom\"],\"borderLeft\":[1,\"border-left\"]}]]],[\"b2b-breadcrumb.cjs\",[[1,\"b2b-breadcrumb\",{\"paddingTop\":[2,\"padding-top\"],\"paddingBottom\":[2,\"padding-bottom\"]},[[0,\"b2b-change\",\"onSelectedChange\"]]]]],[\"b2b-breadcrumb-item.cjs\",[[1,\"b2b-breadcrumb-item\",{\"href\":[1],\"value\":[8],\"active\":[1028]}]]],[\"b2b-card.cjs\",[[1,\"b2b-card\",{\"disabled\":[4],\"href\":[1],\"target\":[1]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"b2b-flyout-menu.cjs\",[[1,\"b2b-flyout-menu\",{\"opened\":[1028]},[[0,\"keydown\",\"handleKeyDown\"],[0,\"b2b-option-selected\",\"handleSelected\"],[4,\"click\",\"handleClickOutside\"]]]]],[\"b2b-flyout-menu-option.cjs\",[[1,\"b2b-flyout-menu-option\",{\"option\":[1],\"disabled\":[516],\"separator\":[4]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-grid.cjs\",[[1,\"b2b-grid\",{\"margin\":[2]}]]],[\"b2b-grid-col.cjs\",[[1,\"b2b-grid-col\",{\"span\":[514],\"textAlign\":[1,\"text-align\"]}]]],[\"b2b-grid-row.cjs\",[[1,\"b2b-grid-row\",{\"columnGap\":[2,\"column-gap\"],\"rowGap\":[2,\"row-gap\"],\"alignItems\":[1,\"align-items\"],\"justify\":[1]}]]],[\"b2b-icon.cjs\",[[1,\"b2b-icon\",{\"icon\":[1],\"color\":[1],\"size\":[1],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-icon-50.cjs\",[[1,\"b2b-icon-50\",{\"icon\":[1],\"color\":[1],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-label.cjs\",[[1,\"b2b-label\",{\"type\":[1]}]]],[\"b2b-paragraph.cjs\",[[1,\"b2b-paragraph\",{\"weight\":[1],\"size\":[1],\"align\":[1],\"margin\":[4],\"variant\":[1],\"display\":[1]}]]],[\"b2b-progress-bar.cjs\",[[1,\"b2b-progress-bar\",{\"progress\":[2],\"label\":[1],\"labelType\":[1,\"label-type\"],\"labelPosition\":[1,\"label-position\"]}]]],[\"b2b-scrollable-container.cjs\",[[1,\"b2b-scrollable-container\"]]],[\"b2b-shimmer.cjs\",[[1,\"b2b-shimmer\",{\"loading\":[4],\"width\":[2],\"height\":[2]}]]],[\"b2b-tab.cjs\",[[1,\"b2b-tab\",{\"selected\":[516],\"disabled\":[4],\"invalid\":[4]},null,{\"selected\":[\"propagateChange\"]}]]],[\"b2b-tab-panel.cjs\",[[1,\"b2b-tab-panel\"]]],[\"b2b-table.cjs\",[[1,\"b2b-table\",{\"size\":[1]},[[0,\"b2b-change\",\"onColumnSelected\"]]]]],[\"b2b-table-rowgroup.cjs\",[[1,\"b2b-table-rowgroup\",{\"type\":[1],\"size\":[1],\"accordion\":[516],\"selectable\":[4],\"fixed\":[4],\"opened\":[516],\"selectedValues\":[32]},[[0,\"b2b-open\",\"handleOpenChange\"],[0,\"b2b-row-selected\",\"handleSelectedChange\"]]]]],[\"b2b-toggle-button.cjs\",[[1,\"b2b-toggle-button\",{\"label\":[1],\"name\":[513],\"checked\":[1540],\"disabled\":[516],\"value\":[513]}]]],[\"b2b-toggle-chip.cjs\",[[1,\"b2b-toggle-chip\",{\"label\":[1],\"value\":[520],\"name\":[513],\"active\":[1028],\"disabled\":[516]}]]],[\"b2b-toggle-group.cjs\",[[1,\"b2b-toggle-group\",{\"name\":[1],\"disabled\":[516],\"currentValue\":[32]},[[0,\"b2b-change\",\"handleToggleButtonChange\"]],{\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-toggle-switch.cjs\",[[1,\"b2b-toggle-switch\",{\"label\":[1],\"name\":[1],\"labelPosition\":[1,\"label-position\"],\"disabled\":[4],\"state\":[1028]}]]],[\"b2b-tooltip.cjs\",[[1,\"b2b-tooltip\",{\"position\":[1],\"content\":[1],\"trigger\":[1],\"opened\":[1540]},null,{\"opened\":[\"handleOpenedChange\"]}]]],[\"b2b-wizard.cjs\",[[1,\"b2b-wizard\",{\"activeStep\":[1,\"active-step\"],\"custom\":[4],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-wizard-icon.cjs\",[[1,\"b2b-wizard-icon\",{\"step\":[1],\"state\":[1],\"checkIcon\":[4,\"check-icon\"]}]]],[\"b2b-input-group_2.cjs\",[[1,\"b2b-input-list\",{\"label\":[1],\"required\":[516],\"placeholder\":[513],\"optionsList\":[16],\"value\":[1537],\"disabled\":[516],\"groupDisabled\":[4,\"group-disabled\"],\"hasOptionList\":[32],\"isElementFocused\":[32]},[[0,\"keydown\",\"handleKeyDown\"]],{\"optionsList\":[\"watchPropHandler\"]}],[1,\"b2b-input-group\",{\"invalid\":[4],\"disabled\":[4],\"error\":[1],\"hint\":[1]},null,{\"invalid\":[\"invalidChanged\"],\"disabled\":[\"disabledChanged\"]}]]],[\"b2b-chip-component_2.cjs\",[[0,\"b2b-multiselect-option\",{\"option\":[1],\"selected\":[1028],\"indeterminate\":[4]}],[1,\"b2b-chip-component\",{\"label\":[1],\"type\":[1],\"labelStyle\":[1,\"label-style\"],\"disabled\":[4],\"hasCloseButton\":[4,\"has-close-button\"],\"value\":[520],\"customMargin\":[1,\"custom-margin\"]}]]],[\"b2b-table-cell_2.cjs\",[[1,\"b2b-table-cell\",{\"textWrap\":[516,\"text-wrap\"],\"size\":[1],\"align\":[1],\"divider\":[4],\"color\":[1],\"colspan\":[2],\"totalCols\":[2,\"total-cols\"],\"useTextEllipsis\":[32]}],[1,\"b2b-table-header\",{\"divider\":[4],\"size\":[1],\"fixed\":[4],\"sortDirection\":[1537,\"sort-direction\"],\"sortId\":[1,\"sort-id\"],\"colspan\":[2],\"contentAlign\":[1,\"content-align\"],\"totalCols\":[2,\"total-cols\"],\"active\":[32],\"iconAlign\":[32]}]]],[\"b2b-rounded-icon.cjs\",[[1,\"b2b-rounded-icon\",{\"color\":[1],\"borderColor\":[1,\"border-color\"],\"contentColor\":[1,\"content-color\"]}]]],[\"b2b-separator.cjs\",[[1,\"b2b-separator\",{\"alignment\":[1]}]]],[\"b2b-checkbox.cjs\",[[1,\"b2b-checkbox\",{\"label\":[1],\"required\":[516],\"checked\":[1540],\"disabled\":[516],\"indeterminate\":[1028],\"error\":[1],\"hint\":[1],\"name\":[513],\"value\":[520],\"invalid\":[4],\"standalone\":[4],\"groupDisabled\":[4,\"group-disabled\"]}]]],[\"b2b-headline.cjs\",[[1,\"b2b-headline\",{\"size\":[1],\"align\":[1],\"noMargin\":[4,\"no-margin\"]}]]],[\"b2b-input_2.cjs\",[[1,\"b2b-input\",{\"label\":[1],\"required\":[516],\"type\":[513],\"disabled\":[516],\"invalid\":[516],\"placeholder\":[513],\"value\":[1537],\"name\":[513],\"hint\":[1],\"error\":[1],\"focusOnLoad\":[4,\"focus-on-load\"],\"groupDisabled\":[4,\"group-disabled\"],\"inputTextAlign\":[1,\"input-text-align\"],\"hasFocus\":[32],\"hasTextPrefix\":[32],\"hasTextSuffix\":[32],\"setFocus\":[64],\"clearInput\":[64]}],[0,\"b2b-input-list-option\",{\"option\":[1]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-date-picker-days_5.cjs\",[[1,\"b2b-date-picker-header\",{\"selectedMonth\":[2,\"selected-month\"],\"selectedYear\":[2,\"selected-year\"],\"language\":[1]}],[1,\"b2b-date-picker-days\",{\"selectedMonth\":[2,\"selected-month\"],\"selectedYear\":[2,\"selected-year\"],\"selectedDay\":[2,\"selected-day\"],\"disablePastDates\":[4,\"disable-past-dates\"],\"disableFutureDates\":[4,\"disable-future-dates\"],\"disableWeekends\":[4,\"disable-weekends\"],\"disableDates\":[16],\"disableEvery\":[16],\"disableDatesUntil\":[16],\"disableDatesFrom\":[16],\"disabled\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"b2b-date-picker-days-header\",{\"language\":[1]}],[1,\"b2b-date-picker-months\",{\"selectedMonth\":[2,\"selected-month\"],\"language\":[1]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"b2b-date-picker-years\",{\"selectedYear\":[2,\"selected-year\"],\"yearsRange\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]]]],[\"b2b-button_2.cjs\",[[1,\"b2b-button\",{\"variant\":[1],\"type\":[1],\"size\":[1],\"width\":[1],\"disabled\":[516],\"loading\":[4],\"active\":[516],\"href\":[1],\"target\":[1],\"download\":[1],\"groupDisabled\":[4,\"group-disabled\"],\"setFocus\":[64]},[[2,\"click\",\"handleHostClick\"]]],[1,\"b2b-spinner\",{\"size\":[1],\"color\":[1]}]]],[\"b2b-icon-100.cjs\",[[1,\"b2b-icon-100\",{\"icon\":[1],\"color\":[1],\"size\":[2],\"clickable\":[4],\"focusable\":[4],\"pathData\":[32]},null,{\"icon\":[\"loadIconPathData\"]}]]],[\"b2b-input-label.cjs\",[[1,\"b2b-input-label\",{\"required\":[4],\"disabled\":[4]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{request-Dwsj-gbA.js → request-801c6ba1.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-require('./index-CIrNIFXs.js');
-
 const ICON_PATH = 'https://b2b-design-system.otto.market/dist/b2b-core-components';
 
 const iconContent = new Map();

package/dist/cjs/{utils--ZrBSHVe.js → utils-499e9db5.js}

@@ -6,7 +6,10 @@ const TableSizes = {
     COLSPAN: 'colspan',
 };
 const TableRowgroupTypes = {
-    HEADER: 'header'};
+    HEADER: 'header',
+    BODY: 'body',
+    FOOTER: 'footer',
+};
 const ContentAlignment = {
     LEFT: 'left',
     RIGHT: 'right',
@@ -14,13 +17,17 @@ const ContentAlignment = {
 };
 const SortIconAlignment = {
     LEFT: 'left',
-    RIGHT: 'right'};
+    RIGHT: 'right',
+    CENTER: 'center',
+};
 const TableSortDirections = {
     NOT: 'not-sorted',
     ASC: 'ascending',
     DESC: 'descending',
 };
 const TableColourOptions = {
+    DEFAULT: 'default',
+    SELECTED: 'selected',
     GROUP: 'group',
 };
 

package/dist/collection/collection-manifest.json

@@ -68,8 +68,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.33.1",
-    "typescriptVersion": "5.5.4"
+    "version": "4.13.0",
+    "typescriptVersion": "5.4.2"
   },
   "collections": [],
   "bundles": []

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 size="small">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 size="small">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-100 icon="b2b_icon-menu"></b2b-icon-100></b2b-alert>`);
+        const element = await page.find('b2b-icon-100');
+        expect(element).not.toBeNull();
+    });
+});

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

@@ -1,16 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class AlertComponent {
     constructor() {
-        /** The type of alert. Per default it is info. */
-        this.type = 'info';
-        /** The size of the alert. Per default it is large. If set to small, the alert will only have an icon. */
-        this.size = 'large';
-        /** Whether the alert is currently open. Set to true to display the alert. */
-        this.opened = false;
-        /** Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. */
-        this.hasCloseButton = true;
-        /** Whether or not you want to use a custom icon. Per default, it is false. */
-        this.customIcon = false;
         this.chooseIcon = () => {
             const iconName = `b2b_icon-${this.type}`;
             return h("b2b-icon-100", { icon: iconName });
@@ -25,6 +15,11 @@ export class AlertComponent {
         this.canCustomizeIcon = () => {
             return this.size === 'small' && this.customIcon;
         };
+        this.type = 'info';
+        this.size = 'large';
+        this.opened = false;
+        this.hasCloseButton = true;
+        this.customIcon = false;
     }
     openedChanged(newValue) {
         this.opened = newValue;
@@ -35,9 +30,9 @@ export class AlertComponent {
                 [`b2b-alert--${this.type}`]: true,
                 [`b2b-alert--${this.size}`]: true,
                 'b2b-alert--open': this.opened,
-            } }, h("div", { key: '4ea003fcc0fa7e3d88f15709c4919496a6ba20c9', class: "b2b-alert__content" }, h("span", { key: 'f5ef1818b868f8f3c14ebac0102559350d1d412d', class: { [`b2b-alert--${this.type}__icon`]: true } }, this.canCustomizeIcon() ? h("slot", null) : this.chooseIcon()), this.size === 'large' && (h("p", { key: '9b5163fe819b8430cdd2f06351ee6f0df5ff0010' }, h("slot", { key: '28c6f571094bbef5529a3ec451d225e8fa16a75c' })))), this.canClose() && (
+            } }, h("div", { key: '4ea003fcc0fa7e3d88f15709c4919496a6ba20c9', class: "b2b-alert__content" }, h("span", { key: 'f5ef1818b868f8f3c14ebac0102559350d1d412d', 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", { key: '4d6f0c16eb4df02710f112e7376d68d65b518791', class: "b2b-alert__close-icon", onClick: this.close }, h("svg", { key: '04c99e672d9c31aaadc061f21dedf0bbf1bf88ed', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3a4d580ad15a8f71d18a9b28ff527594eceb1b3f', 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"; }
@@ -55,7 +50,6 @@ export class AlertComponent {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'info' | 'success' | 'warning' | 'error'",
@@ -68,14 +62,12 @@ export class AlertComponent {
                     "tags": [],
                     "text": "The type of alert. Per default it is info."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'info'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'large' | 'small'",
@@ -88,14 +80,12 @@ export class AlertComponent {
                     "tags": [],
                     "text": "The size of the alert. Per default it is large. If set to small, the alert will only have an icon."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'large'"
             },
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -108,14 +98,12 @@ export class AlertComponent {
                     "tags": [],
                     "text": "Whether the alert is currently open. Set to true to display the alert."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hasCloseButton": {
                 "type": "boolean",
-                "attribute": "has-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,14 +116,12 @@ export class AlertComponent {
                     "tags": [],
                     "text": "Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "has-close-button",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "customIcon": {
                 "type": "boolean",
-                "attribute": "custom-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -148,8 +134,7 @@ export class AlertComponent {
                     "tags": [],
                     "text": "Whether or not you want to use a custom icon. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "custom-icon",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -1,25 +1,20 @@
 import { Host, h } from "@stencil/core";
 export class AnchorComponent {
     constructor() {
-        /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
-         * defaults to the URL string, but can be changed by the user. */
+        this.href = undefined;
         this.download = null;
-        /** The target the URL will be opened into. The default is self. */
         this.target = 'self';
-        /** The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. */
         this.size = 'inherit';
-        /** The hoverColor of the link. Per default, it is set to b2b-color-red-100. If specified as inherit, it is inherited from the parent element. */
         this.hoverColor = 'default';
-        /** The underlineText of the link. If set to false, the link text will not be underlined. */
         this.underlineText = true;
     }
     render() {
-        return (h(Host, { key: '320c77ac408cb061aac1b496ba757e5699897b13' }, h("a", { key: '908b401fff1cf316dc00a626196d0642d0cc59e4', href: this.href, download: this.download, target: `_${this.target}`, class: {
+        return (h(Host, { key: '60d94771fa6bf9cf9d8e688ecd7eba179a8e28a3' }, h("a", { key: 'f18239735b64a33cf80167e98a8cec01c0b42fb3', href: this.href, download: this.download, target: `_${this.target}`, class: {
                 'b2b-anchor': true,
                 [`b2b-anchor--${this.size}`]: true,
                 [`b2b-anchor-hover--${this.hoverColor}`]: true,
                 'b2b-anchor--underline-text': this.underlineText,
-            } }, h("slot", { key: '078c83018904ea2e2946ce15512e31890f2f2d91' }))));
+            } }, h("slot", { key: '9bc35228a2265b620e8e32adf9ea8040cf259192' }))));
     }
     static get is() { return "b2b-anchor"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +32,6 @@ export class AnchorComponent {
         return {
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -50,13 +44,11 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "The URL or URL fragment the anchor points to. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "href",
                 "reflect": false
             },
             "download": {
                 "type": "string",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -69,14 +61,12 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "download",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'self' | 'blank' | 'parent' | 'top'",
@@ -89,14 +79,12 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "The target the URL will be opened into. The default is self."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'self'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'inherit' | '100'",
@@ -109,14 +97,12 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'inherit'"
             },
             "hoverColor": {
                 "type": "string",
-                "attribute": "hover-color",
                 "mutable": false,
                 "complexType": {
                     "original": "'inherit' | 'default'",
@@ -129,14 +115,12 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "The hoverColor of the link. Per default, it is set to b2b-color-red-100. If specified as inherit, it is inherited from the parent element."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hover-color",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "underlineText": {
                 "type": "boolean",
-                "attribute": "underline-text",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -149,8 +133,7 @@ export class AnchorComponent {
                     "tags": [],
                     "text": "The underlineText of the link. If set to false, the link text will not be underlined."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "underline-text",
                 "reflect": false,
                 "defaultValue": "true"
             }

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 b2b-anchor-hover--default b2b-anchor--underline-text" 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 b2b-anchor-hover--default b2b-anchor--underline-text" 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 b2b-anchor-hover--default b2b-anchor--underline-text" 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 b2b-anchor-hover--default b2b-anchor--underline-text" target="_parent">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});

package/dist/collection/components/background-box/background-box.e2e.js

@@ -0,0 +1,63 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Background-Box', () => {
+    let page;
+    it('should render background box component', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box><b2b-paragraph>Background box component</b2b-paragraph></b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        expect(element).not.toBeNull();
+        const style = await element.getComputedStyle();
+        expect(style.backgroundColor).toBe('rgb(255, 255, 255)');
+        expect(style.border).toBe('1px solid rgb(196, 196, 196)');
+    });
+    it('should display content with padding', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box>Background box component</b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        expect(element).toEqualText('Background box component');
+        const style = await element.getComputedStyle();
+        expect(style.padding).toBe('24px');
+    });
+    it('should display content without padding', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box no-padding='true'>Background box component</b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        expect(element).toEqualText('Background box component');
+        const style = await element.getComputedStyle();
+        expect(style.padding).toBe('0px');
+    });
+    it('should set max width', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box max-width='true' no-padding='true'>Background box component</b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        expect(element).toEqualText('Background box component');
+        const style = await element.getComputedStyle();
+        expect(style.maxWidth).toBe('1212px');
+    });
+    it('should remove specific borders when set to none', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box border-top="none" border-right="none">Background box component</b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        const style = await element.getComputedStyle();
+        expect(style.borderTop).toBe('0px none rgb(0, 0, 0)');
+        expect(style.borderRight).toBe('0px none rgb(0, 0, 0)');
+        expect(style.borderBottom).toBe('1px solid rgb(196, 196, 196)');
+        expect(style.borderLeft).toBe('1px solid rgb(196, 196, 196)');
+    });
+    it('should remove all borders when all set to none', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-background-box
+        border-top="none"
+        border-right="none"
+        border-bottom="none"
+        border-left="none">
+        Background box component
+      </b2b-background-box>`);
+        const element = await page.find('b2b-background-box');
+        const style = await element.getComputedStyle();
+        expect(style.borderTop).toBe('0px none rgb(0, 0, 0)');
+        expect(style.borderRight).toBe('0px none rgb(0, 0, 0)');
+        expect(style.borderBottom).toBe('0px none rgb(0, 0, 0)');
+        expect(style.borderLeft).toBe('0px none rgb(0, 0, 0)');
+    });
+});