@scania/tegel 1.1.0 → 1.3.0

package/dist/cjs/tds-slider.cjs.entry.js

@@ -16,9 +16,6 @@ const TdsSlider = class {
     this.thumbInnerElement = null;
     this.trackElement = null;
     this.trackFillElement = null;
-    this.minusElement = null;
-    this.plusElement = null;
-    this.inputElement = null;
     this.thumbGrabbed = false;
     this.thumbLeft = 0;
     this.tickValues = [];
@@ -27,7 +24,6 @@ const TdsSlider = class {
     this.useSmall = false;
     this.useSnapping = false;
     this.supposedValueSlot = -1;
-    this.eventListenersAdded = false;
     this.resizeObserverAdded = false;
     this.label = '';
     this.value = '0';
@@ -48,7 +44,6 @@ const TdsSlider = class {
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
   async reset() {
-    // @TODO: maybe refactor to use watch-decorators instead
     this.componentWillLoad();
     this.componentDidLoad();
   }
@@ -97,10 +92,8 @@ const TdsSlider = class {
     }
     this.thumbCore(event);
   }
-  handleValueUpdate(newVal) {
-    this.calculateThumbLeftFromValue(newVal);
-    this.updateValueForced(newVal);
-    this.updateTrack();
+  handleValueUpdate(newValue) {
+    this.forceValueUpdate(newValue);
   }
   updateSupposedValueSlot(localLeft) {
     const numTicks = parseInt(this.ticks);
@@ -145,9 +138,6 @@ const TdsSlider = class {
     const percentageFilled = (this.thumbLeft / trackWidth) * 100;
     this.trackFillElement.style.width = `${percentageFilled}%`;
   }
-  dispatchChangeEvent() {
-    this.tdsChange.emit({ value: this.value });
-  }
   updateValue() {
     const trackWidth = this.getTrackWidth();
     const numTicks = parseInt(this.ticks);
@@ -159,20 +149,16 @@ const TdsSlider = class {
     }
     else {
       const percentage = this.thumbLeft / trackWidth;
-      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
+      this.value = `${Math.trunc(parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)))}`;
     }
     this.updateTrack();
-    this.dispatchChangeEvent();
-  }
-  updateValueForced(value) {
-    this.value = value;
-    this.dispatchChangeEvent();
-  }
-  getMin() {
-    return parseFloat(this.min);
+    this.tdsChange.emit({ value: this.value });
   }
-  getMax() {
-    return parseFloat(this.max);
+  forceValueUpdate(newValue) {
+    this.calculateThumbLeftFromValue(newValue);
+    this.value = newValue;
+    this.tdsChange.emit({ value: this.value });
+    this.updateTrack();
   }
   constrainThumb(x) {
     const width = this.getTrackWidth();
@@ -191,61 +177,33 @@ const TdsSlider = class {
   calculateThumbLeftFromValue(value) {
     const initValue = value;
     const trackWidth = this.getTrackWidth();
-    const normalizedValue = initValue - this.getMin();
-    const normalizedMax = this.getMax() - this.getMin();
+    const normalizedValue = initValue - parseFloat(this.min);
+    const normalizedMax = parseFloat(this.max) - parseFloat(this.min);
     const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
     this.thumbLeft = calculatedLeft;
     this.updateSupposedValueSlot(this.thumbLeft);
     this.thumbElement.style.left = `${this.thumbLeft}px`;
   }
-  componentDidLoad() {
-    if (!this.resizeObserverAdded) {
-      this.resizeObserverAdded = true;
-      const resizeObserver = new ResizeObserver(( /* entries */) => {
-        this.calculateThumbLeftFromValue(this.value);
-        this.updateTrack();
-      });
-      resizeObserver.observe(this.wrapperElement);
+  /** Updates the slider value based on the current input value */
+  updateSliderValueOnInputChange(event) {
+    const inputElement = event.target;
+    let newValue = parseInt(inputElement.value);
+    if (newValue < parseFloat(this.min)) {
+      newValue = parseFloat(this.min);
     }
-    if (!this.eventListenersAdded) {
-      this.eventListenersAdded = true;
-      this.thumbElement.addEventListener('mousedown', (event) => {
-        event.preventDefault();
-        this.grabThumb();
-      });
-      this.thumbElement.addEventListener('touchstart', () => {
-        this.grabThumb();
-      });
-      if (this.useControls) {
-        this.minusElement.addEventListener('click', () => {
-          this.stepLeft();
-        });
-        this.plusElement.addEventListener('click', () => {
-          this.stepRight();
-        });
-      }
-      if (this.inputElement) {
-        this.inputElement.addEventListener('keydown', (event) => {
-          event.stopPropagation();
-          if (event.key === 'Enter') {
-            let newValue = parseInt(this.inputElement.value);
-            if (newValue < this.getMin()) {
-              newValue = this.getMin();
-            }
-            else if (newValue > this.getMax()) {
-              newValue = this.getMax();
-            }
-            this.calculateThumbLeftFromValue(newValue);
-            this.updateValueForced(newValue);
-            this.updateTrack();
-            this.inputElement.blur();
-            this.wrapperElement.focus();
-          }
-        });
-      }
+    else if (newValue > parseFloat(this.max)) {
+      newValue = parseFloat(this.max);
+    }
+    this.forceValueUpdate(String(newValue));
+  }
+  /** Updates the slider value based on the current input value when enter is pressed */
+  handleInputFieldEnterPress(event) {
+    event.stopPropagation();
+    if (event.key === 'Enter') {
+      this.updateSliderValueOnInputChange(event);
+      const inputElement = event.target;
+      inputElement.blur();
     }
-    this.calculateThumbLeftFromValue(this.value);
-    this.updateTrack();
   }
   grabThumb() {
     if (this.readOnly) {
@@ -277,19 +235,17 @@ const TdsSlider = class {
     else {
       const trackWidth = this.getTrackWidth();
       const percentage = this.thumbLeft / trackWidth;
-      let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+      let currentValue = parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min));
       currentValue += delta;
       currentValue = Math.round(currentValue);
-      if (currentValue < this.getMin()) {
-        currentValue = this.getMin();
+      if (currentValue < parseFloat(this.min)) {
+        currentValue = parseFloat(this.min);
       }
-      else if (currentValue > this.getMax()) {
-        currentValue = this.getMax();
+      else if (currentValue > parseFloat(this.max)) {
+        currentValue = parseFloat(this.max);
       }
       this.value = `${currentValue}`;
-      this.calculateThumbLeftFromValue(this.value);
-      this.updateValueForced(currentValue);
-      this.updateTrack();
+      this.forceValueUpdate(this.value);
     }
   }
   stepLeft() {
@@ -301,12 +257,12 @@ const TdsSlider = class {
   componentWillLoad() {
     const numTicks = parseInt(this.ticks);
     if (numTicks > 0) {
-      this.tickValues = [this.getMin()];
-      const step = (this.getMax() - this.getMin()) / (numTicks + 1);
+      this.tickValues = [parseFloat(this.min)];
+      const step = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
       for (let i = 1; i < numTicks + 1; i++) {
-        this.tickValues.push(this.getMin() + Math.round(step * i));
+        this.tickValues.push(parseFloat(this.min) + Math.round(step * i));
       }
-      this.tickValues.push(this.getMax());
+      this.tickValues.push(parseFloat(this.max));
     }
     this.useInput = false;
     this.useControls = false;
@@ -318,44 +274,44 @@ const TdsSlider = class {
     }
     this.useSmall = this.thumbSize === 'sm';
     this.useSnapping = this.snap;
-    const min = this.getMin();
-    const max = this.getMax();
+    const min = parseFloat(this.min);
+    const max = parseFloat(this.max);
     if (min > max) {
       console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
       this.disabled = true;
     }
   }
+  componentDidLoad() {
+    if (!this.resizeObserverAdded) {
+      this.resizeObserverAdded = true;
+      const resizeObserver = new ResizeObserver(() => {
+        this.calculateThumbLeftFromValue(this.value);
+        this.updateTrack();
+      });
+      resizeObserver.observe(this.wrapperElement);
+    }
+    this.calculateThumbLeftFromValue(this.value);
+    this.updateTrack();
+  }
   render() {
-    return (index.h("div", { class: `tds-slider-wrapper ${this.readOnly ? 'read-only' : ''}` }, index.h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), index.h("div", { class: {
+    return (index.h("div", { class: {
+        'tds-slider-wrapper': true,
+        'read-only': this.readOnly,
+      } }, index.h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), index.h("div", { class: {
         'tds-slider': true,
         'disabled': this.disabled,
         'tds-slider-small': this.useSmall,
       }, ref: (el) => {
         this.wrapperElement = el;
-      } }, index.h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { ref: (el) => {
-        this.minusElement = el;
-      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { ref: (el) => {
-        this.minusElement = el;
-      }, class: "tds-slider__control tds-slider__control-minus" }, index.h("tds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { class: "tds-slider__value-dividers-wrapper" }, index.h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "tds-slider__track", ref: (el) => {
+      } }, index.h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, index.h("tds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { class: "tds-slider__value-dividers-wrapper" }, index.h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "tds-slider__track", ref: (el) => {
         this.trackElement = el;
       }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { class: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
       } }), index.h("div", { class: "tds-slider__thumb", ref: (el) => {
         this.thumbElement = el;
-      } }, this.tooltip && (index.h("div", { class: "tds-slider__value" }, this.value, index.h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), index.h("div", { class: "tds-slider__thumb-inner", ref: (el) => {
+      }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (index.h("div", { class: "tds-slider__value" }, this.value, index.h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), index.h("div", { class: "tds-slider__thumb-inner", ref: (el) => {
         this.thumbInnerElement = el;
-      } })))), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { ref: (el) => {
-        this.minusElement = el;
-      }, class: "tds-slider__input-value" }, this.max), index.h("div", { class: "tds-slider__input-field-wrapper" }, index.h("input", { onFocus: (e) => {
-        if (this.readOnly) {
-          e.preventDefault();
-          this.inputElement.blur();
-        }
-      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
-        this.inputElement = el;
-      } })))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { ref: (el) => {
-        this.plusElement = el;
-      }, class: "tds-slider__control tds-slider__control-plus" }, index.h("tds-icon", { name: "plus", size: "16px" })))))));
+      } })))), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), index.h("div", { class: "tds-slider__input-field-wrapper" }, index.h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, index.h("tds-icon", { name: "plus", size: "16px" })))))));
   }
   static get watchers() { return {
     "value": ["handleValueUpdate"]

package/dist/cjs/tds-step.cjs.entry.js

@@ -6,12 +6,18 @@ const index = require('./index-f21bdb5d.js');
 
 const stepCss = ":host{position:relative;display:table-cell}:host tds-icon{line-height:1}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listitem].sm::after,:host(.last) [role=listitem].lg::after{display:none}:host(.last) [role=listitem].sm.vertical::before{display:none}:host(.first) [role=listitem].sm::before,:host(.first) [role=listitem].lg::before{display:none}";
 
+const propToStateMap = {
+  orientation: 'orientation',
+  labelPosition: 'labelPosition',
+  size: 'size',
+  hideLabels: 'hideLabels',
+};
 const TdsStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.index = undefined;
     this.state = 'upcoming';
-    this.hideLabel = undefined;
+    this.hideLabels = undefined;
     this.size = undefined;
     this.orientation = undefined;
     this.labelPosition = undefined;
@@ -22,24 +28,23 @@ const TdsStep = class {
     this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
-    this.hideLabel = this.stepperEl.hideLabels;
+    this.hideLabels = this.stepperEl.hideLabels;
     this.stepperId = this.stepperEl.stepperId;
   }
   handlePropsChange(event) {
     if (this.stepperId === event.detail.stepperId) {
       event.detail.changed.forEach((changedProp) => {
         if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
+          throw new Error(`Stepper prop is not supported: ${changedProp}`);
         }
-        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
-          this.labelPosition = 'aside';
+        else if (changedProp in propToStateMap) {
+          this[propToStateMap[changedProp]] = event.detail[changedProp];
         }
-        this[changedProp] = event.detail[changedProp];
       });
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, index.h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (index.h("div", { class: `label ${this.size} ${this.state}` }, index.h("slot", { name: "label" }))))));
+    return (index.h(index.Host, null, index.h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (index.h("div", { class: `label ${this.size} ${this.state}` }, index.h("slot", { name: "label" }))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-header.cjs.entry.js

@@ -18,6 +18,8 @@ const TdsTableHeaderRow = class {
     index.registerInstance(this, hostRef);
     this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
     this.allSelected = false;
+    this.selected = undefined;
+    this.indeterminate = false;
     this.multiselect = false;
     this.expandableRows = false;
     this.mainCheckboxSelected = false;
@@ -89,7 +91,7 @@ const TdsTableHeaderRow = class {
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--toolbar-available': this.enableToolbarDesign,
-      } }, index.h("tr", null, this.multiselect && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { checked: this.allSelected, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", null))));
+      } }, index.h("tr", null, this.multiselect && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", null))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-toast.cjs.entry.js

@@ -61,7 +61,10 @@ const TdsToast = class {
     const usesHeaderSlot = hasSlot.hasSlot('header', this.host);
     const usesSubheaderSlot = hasSlot.hasSlot('subheader', this.host);
     const usesActionsSlot = hasSlot.hasSlot('actions', this.host);
-    return (index.h(index.Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, index.h("div", { class: `
+    return (index.h(index.Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        hide: this.hidden,
+        show: !this.hidden,
+      } }, index.h("div", { class: `
             wrapper
             ${this.variant}` }, index.h("tds-icon", { name: this.getIconName(), size: "20px" }), index.h("div", { class: `content` }, index.h("div", { class: "header-subheader" }, this.header && index.h("div", { class: "header" }, this.header), usesHeaderSlot && index.h("slot", { name: "header" }), this.subheader && index.h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && index.h("slot", { name: "subheader" })), usesActionsSlot && (index.h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, index.h("slot", { name: "actions" })))), index.h("button", { onClick: () => {
         this.handleClose();

package/dist/cjs/tegel.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"tds-header-launcher.cjs\",[[1,\"tds-header-launcher\",{\"open\":[32],\"buttonEl\":[32],\"hasListTypeMenu\":[32]},[[8,\"click\",\"onAnyClick\"]]]]],[\"tds-header-dropdown.cjs\",[[1,\"tds-header-dropdown\",{\"label\":[1],\"noDropdownIcon\":[4,\"no-dropdown-icon\"],\"selected\":[4],\"open\":[32],\"buttonEl\":[32]},[[4,\"click\",\"onAnyClick\"]]]]],[\"tds-header-hamburger.cjs\",[[1,\"tds-header-hamburger\"]]],[\"tds-dropdown-option.cjs\",[[17,\"tds-dropdown-option\",{\"value\":[1],\"disabled\":[4],\"selected\":[32],\"multiselect\":[32],\"size\":[32],\"setSelected\":[64]}]]],[\"tds-header-brand-symbol.cjs\",[[1,\"tds-header-brand-symbol\"]]],[\"tds-side-menu-dropdown.cjs\",[[1,\"tds-side-menu-dropdown\",{\"defaultOpen\":[4,\"default-open\"],\"buttonLabel\":[1,\"button-label\"],\"selected\":[4],\"open\":[32],\"hoverState\":[32],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapsedSideMenuEventHandler\"],[1,\"pointerenter\",\"onEventPointerEnter\"],[0,\"focusin\",\"onEventFocus\"],[1,\"pointerleave\",\"onEventPointerLeave\"],[0,\"focusout\",\"onEventBlur\"]]]]],[\"tds-side-menu-user.cjs\",[[1,\"tds-side-menu-user\",{\"heading\":[1],\"subheading\":[1],\"imgSrc\":[1,\"img-src\"],\"imgAlt\":[1,\"img-alt\"]}]]],[\"tds-accordion-item.cjs\",[[1,\"tds-accordion-item\",{\"header\":[1],\"expandIconPosition\":[1,\"expand-icon-position\"],\"disabled\":[4],\"expanded\":[4],\"paddingReset\":[4,\"padding-reset\"],\"toggleAccordionItem\":[64]}]]],[\"tds-banner.cjs\",[[1,\"tds-banner\",{\"icon\":[1],\"header\":[1],\"subheader\":[1],\"variant\":[1],\"bannerId\":[1,\"banner-id\"],\"hidden\":[516],\"hideBanner\":[64],\"showBanner\":[64]}]]],[\"tds-card.cjs\",[[1,\"tds-card\",{\"modeVariant\":[1,\"mode-variant\"],\"imagePlacement\":[1,\"image-placement\"],\"header\":[1],\"subheader\":[1],\"bodyImg\":[1,\"body-img\"],\"bodyImgAlt\":[1,\"body-img-alt\"],\"bodyDivider\":[4,\"body-divider\"],\"clickable\":[4],\"cardId\":[1,\"card-id\"]}]]],[\"tds-datetime.cjs\",[[2,\"tds-datetime\",{\"type\":[513],\"value\":[513],\"min\":[1],\"max\":[1],\"defaultValue\":[1,\"default-value\"],\"disabled\":[4],\"size\":[1],\"noMinWidth\":[4,\"no-min-width\"],\"modeVariant\":[1,\"mode-variant\"],\"name\":[1],\"state\":[1],\"autofocus\":[4],\"label\":[1],\"helper\":[1],\"focusInput\":[32]},[[0,\"focus\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"]]]]],[\"tds-dropdown.cjs\",[[1,\"tds-dropdown\",{\"name\":[1],\"disabled\":[4],\"helper\":[1],\"label\":[1],\"labelPosition\":[1,\"label-position\"],\"modeVariant\":[1,\"mode-variant\"],\"openDirection\":[1,\"open-direction\"],\"placeholder\":[1],\"size\":[1],\"error\":[4],\"multiselect\":[4],\"filter\":[4],\"noResultText\":[1,\"no-result-text\"],\"defaultValue\":[1,\"default-value\"],\"open\":[32],\"value\":[32],\"filterResult\":[32],\"filterFocus\":[32],\"reset\":[64],\"setValue\":[64],\"appendValue\":[64],\"removeValue\":[64],\"close\":[64]},[[9,\"mousedown\",\"onAnyClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"open\":[\"handleOpenState\"]}]]],[\"tds-folder-tabs.cjs\",[[1,\"tds-folder-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"buttonWidth\":[32],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-footer-group.cjs\",[[1,\"tds-footer-group\",{\"titleText\":[1,\"title-text\"],\"open\":[32]}]]],[\"tds-header-launcher-list.cjs\",[[4,\"tds-header-launcher-list\"]]],[\"tds-header-launcher-list-item.cjs\",[[1,\"tds-header-launcher-list-item\"]]],[\"tds-inline-tabs.cjs\",[[1,\"tds-inline-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"buttonWidth\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-message.cjs\",[[1,\"tds-message\",{\"header\":[1],\"modeVariant\":[1,\"mode-variant\"],\"variant\":[1],\"noIcon\":[4,\"no-icon\"],\"minimal\":[4]}]]],[\"tds-modal.cjs\",[[1,\"tds-modal\",{\"header\":[1],\"prevent\":[4],\"size\":[1],\"actionsPosition\":[1,\"actions-position\"],\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"isShown\":[32],\"showModal\":[64],\"closeModal\":[64]}]]],[\"tds-navigation-tabs.cjs\",[[1,\"tds-navigation-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-popover-menu.cjs\",[[6,\"tds-popover-menu\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"fluidWidth\":[4,\"fluid-width\"]}]]],[\"tds-side-menu-close-button.cjs\",[[1,\"tds-side-menu-close-button\"]]],[\"tds-side-menu-collapse-button.cjs\",[[1,\"tds-side-menu-collapse-button\",{\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-slider.cjs\",[[0,\"tds-slider\",{\"label\":[1],\"value\":[1],\"min\":[1],\"max\":[1],\"ticks\":[1],\"showTickNumbers\":[4,\"show-tick-numbers\"],\"tooltip\":[4],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"controls\":[4],\"input\":[4],\"step\":[1],\"name\":[1],\"thumbSize\":[1,\"thumb-size\"],\"snap\":[4],\"sliderId\":[1,\"slider-id\"],\"reset\":[64]},[[0,\"keydown\",\"handleKeydown\"],[9,\"mouseup\",\"handleMouseUp\"],[9,\"touchend\",\"handleTouchEnd\"],[9,\"mousemove\",\"handleMouseMove\"],[9,\"touchmove\",\"handleTouchMove\"]],{\"value\":[\"handleValueUpdate\"]}]]],[\"tds-step.cjs\",[[1,\"tds-step\",{\"index\":[1],\"state\":[1],\"hideLabel\":[32],\"size\":[32],\"orientation\":[32],\"labelPosition\":[32]},[[16,\"internalTdsPropsChange\",\"handlePropsChange\"]]]]],[\"tds-table-body-row.cjs\",[[1,\"tds-table-body-row\",{\"selected\":[516],\"multiselect\":[32],\"mainCheckBoxStatus\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-table-footer.cjs\",[[1,\"tds-table-footer\",{\"pagination\":[516],\"paginationValue\":[1538,\"pagination-value\"],\"pages\":[514],\"cols\":[2],\"columnsNumber\":[32],\"compactDesign\":[32],\"lastCorrectValue\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-table-header.cjs\",[[1,\"tds-table-header\",{\"allSelected\":[1540,\"all-selected\"],\"multiselect\":[32],\"expandableRows\":[32],\"mainCheckboxSelected\":[32],\"mainExpendSelected\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"enableToolbarDesign\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsRowExpanded\",\"internalTdsRowExpandedListener\"]]]]],[\"tds-table-toolbar.cjs\",[[1,\"tds-table-toolbar\",{\"tableTitle\":[513,\"table-title\"],\"filter\":[516],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-text-field.cjs\",[[6,\"tds-text-field\",{\"type\":[513],\"labelPosition\":[1,\"label-position\"],\"label\":[1],\"helper\":[1],\"placeholder\":[1],\"value\":[513],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"size\":[1],\"modeVariant\":[1,\"mode-variant\"],\"noMinWidth\":[4,\"no-min-width\"],\"name\":[1],\"state\":[1],\"maxLength\":[2,\"max-length\"],\"autofocus\":[4],\"focusInput\":[32]}]]],[\"tds-textarea.cjs\",[[2,\"tds-textarea\",{\"label\":[1],\"name\":[1],\"helper\":[1],\"cols\":[2],\"rows\":[2],\"labelPosition\":[1,\"label-position\"],\"placeholder\":[1],\"value\":[1],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"state\":[1],\"maxLength\":[2,\"max-length\"],\"modeVariant\":[1,\"mode-variant\"],\"autofocus\":[4],\"noMinWidth\":[4,\"no-min-width\"],\"focusInput\":[32]}]]],[\"tds-toast.cjs\",[[1,\"tds-toast\",{\"toastId\":[1,\"toast-id\"],\"header\":[1],\"subheader\":[1],\"variant\":[1],\"hidden\":[516],\"toastRole\":[1,\"toast-role\"],\"hideToast\":[64],\"showToast\":[64]}]]],[\"tds-tooltip.cjs\",[[6,\"tds-tooltip\",{\"text\":[1],\"selector\":[1],\"referenceEl\":[16],\"mouseOverTooltip\":[4,\"mouse-over-tooltip\"],\"show\":[1028],\"placement\":[1]}]]],[\"tds-accordion.cjs\",[[1,\"tds-accordion\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-badge.cjs\",[[1,\"tds-badge\",{\"value\":[1],\"hidden\":[516],\"size\":[1],\"shape\":[32],\"text\":[32]},null,{\"value\":[\"watchProps\"],\"size\":[\"watchProps\"]}]]],[\"tds-block.cjs\",[[1,\"tds-block\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-body-cell.cjs\",[[1,\"tds-body-cell\",{\"cellValue\":[520,\"cell-value\"],\"cellKey\":[520,\"cell-key\"],\"disablePadding\":[516,\"disable-padding\"],\"textAlignState\":[32],\"activeSorting\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"tableId\":[32]},[[16,\"internalTdsPropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsHover\",\"internalTdsHoverListener\"],[16,\"internalTdsTextAlign\",\"internalTdsTextAlignListener\"]]]]],[\"tds-breadcrumb.cjs\",[[1,\"tds-breadcrumb\",{\"current\":[4]}]]],[\"tds-breadcrumbs.cjs\",[[1,\"tds-breadcrumbs\"]]],[\"tds-button.cjs\",[[6,\"tds-button\",{\"text\":[1],\"type\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"fullbleed\":[4],\"modeVariant\":[1,\"mode-variant\"],\"onlyIcon\":[32]}]]],[\"tds-chip.cjs\",[[6,\"tds-chip\",{\"type\":[1],\"size\":[1],\"chipId\":[1,\"chip-id\"],\"checked\":[516],\"name\":[1],\"value\":[1]}]]],[\"tds-folder-tab.cjs\",[[1,\"tds-folder-tab\",{\"disabled\":[4],\"selected\":[32],\"tabWidth\":[32],\"setTabWidth\":[64],\"setSelected\":[64]}]]],[\"tds-footer.cjs\",[[1,\"tds-footer\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-footer-item.cjs\",[[1,\"tds-footer-item\"]]],[\"tds-header.cjs\",[[4,\"tds-header\"]]],[\"tds-header-cell.cjs\",[[1,\"tds-header-cell\",{\"cellKey\":[513,\"cell-key\"],\"cellValue\":[513,\"cell-value\"],\"customWidth\":[513,\"custom-width\"],\"sortable\":[4],\"textAlign\":[513,\"text-align\"],\"textAlignState\":[32],\"sortingDirection\":[32],\"sortedByMyKey\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"multiselect\":[32],\"enableToolbarDesign\":[32],\"tableId\":[32],\"expandableRows\":[32]},[[16,\"internalTdsPropChange\",\"internalTdsPropChangeListener\"],[16,\"internalSortButtonClicked\",\"updateOptionsContent\"]]]]],[\"tds-header-dropdown-list-user.cjs\",[[1,\"tds-header-dropdown-list-user\",{\"imgUrl\":[1,\"img-url\"],\"imgAlt\":[1,\"img-alt\"],\"header\":[1],\"subheader\":[1]}]]],[\"tds-header-launcher-grid.cjs\",[[4,\"tds-header-launcher-grid\",{\"headingElement\":[32]}]]],[\"tds-header-launcher-grid-item.cjs\",[[1,\"tds-header-launcher-grid-item\"]]],[\"tds-header-launcher-grid-title.cjs\",[[4,\"tds-header-launcher-grid-title\"]]],[\"tds-header-launcher-list-title.cjs\",[[4,\"tds-header-launcher-list-title\"]]],[\"tds-header-title.cjs\",[[1,\"tds-header-title\"]]],[\"tds-inline-tab.cjs\",[[1,\"tds-inline-tab\",{\"disabled\":[4],\"selected\":[32],\"setSelected\":[64]}]]],[\"tds-link.cjs\",[[1,\"tds-link\",{\"disabled\":[4],\"underline\":[4]}]]],[\"tds-navigation-tab.cjs\",[[1,\"tds-navigation-tab\",{\"disabled\":[4],\"selected\":[32],\"setSelected\":[64]}]]],[\"tds-popover-menu-item.cjs\",[[1,\"tds-popover-menu-item\",{\"disabled\":[4]}]]],[\"tds-radio-button.cjs\",[[6,\"tds-radio-button\",{\"name\":[1],\"value\":[1],\"radioId\":[1,\"radio-id\"],\"checked\":[516],\"required\":[4],\"disabled\":[4]}]]],[\"tds-side-menu.cjs\",[[1,\"tds-side-menu\",{\"open\":[4],\"persistent\":[4],\"collapsed\":[4],\"isUpperSlotEmpty\":[32],\"isCollapsed\":[32]},[[16,\"internalTdsCollapse\",\"collapsedSideMenuEventHandler\"]],{\"collapsed\":[\"onCollapsedChange\"]}]]],[\"tds-side-menu-dropdown-list.cjs\",[[1,\"tds-side-menu-dropdown-list\",{\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapsedSideMenuEventHandler\"]]]]],[\"tds-side-menu-dropdown-list-item.cjs\",[[1,\"tds-side-menu-dropdown-list-item\",{\"selected\":[4],\"dropdownHasIcon\":[32],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-side-menu-overlay.cjs\",[[1,\"tds-side-menu-overlay\"]]],[\"tds-spinner.cjs\",[[0,\"tds-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"tds-stepper.cjs\",[[1,\"tds-stepper\",{\"orientation\":[1],\"labelPosition\":[1,\"label-position\"],\"size\":[1],\"hideLabels\":[4,\"hide-labels\"],\"stepperId\":[1,\"stepper-id\"]},null,{\"orientation\":[\"handleDirectionChange\"],\"labelPosition\":[\"handleLabelPositionChange\"],\"size\":[\"handleSizeChange\"],\"hideLabels\":[\"handleHideLabelsChange\"]}]]],[\"tds-table.cjs\",[[1,\"tds-table\",{\"verticalDividers\":[516,\"vertical-dividers\"],\"compactDesign\":[516,\"compact-design\"],\"noMinWidth\":[516,\"no-min-width\"],\"multiselect\":[516],\"expandableRows\":[516,\"expandable-rows\"],\"responsive\":[516],\"modeVariant\":[513,\"mode-variant\"],\"tableId\":[1,\"table-id\"],\"getSelectedRows\":[64]},null,{\"multiselect\":[\"multiselectChanged\"],\"expandableRows\":[\"enableExpandableRowsChanged\"],\"compactDesign\":[\"compactDesignChanged\"],\"verticalDividers\":[\"verticalDividersChanged\"],\"noMinWidth\":[\"noMinWidthChanged\"],\"modeVariant\":[\"modeVariantChanged\"]}]]],[\"tds-table-body.cjs\",[[4,\"tds-table-body\",{\"multiselect\":[32],\"enablePaginationTableBody\":[32],\"expandableRows\":[32],\"multiselectArray\":[32],\"multiselectArrayJSON\":[32],\"mainCheckboxStatus\":[32],\"columnsNumber\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsRowChange\",\"bodyCheckboxListener\"]]]]],[\"tds-table-body-row-expandable.cjs\",[[1,\"tds-table-body-row-expandable\",{\"colSpan\":[2,\"col-span\"],\"isExpanded\":[32],\"tableId\":[32],\"columnsNumber\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"modeVariant\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-toggle.cjs\",[[6,\"tds-toggle\",{\"checked\":[516],\"required\":[4],\"size\":[1],\"name\":[1],\"headline\":[1],\"disabled\":[4],\"toggleId\":[1,\"toggle-id\"],\"toggle\":[64]}]]],[\"tds-header-launcher-button.cjs\",[[1,\"tds-header-launcher-button\",{\"active\":[4]}]]],[\"tds-divider.cjs\",[[1,\"tds-divider\",{\"orientation\":[1]}]]],[\"tds-header-dropdown-list.cjs\",[[1,\"tds-header-dropdown-list\",{\"size\":[513],\"headingElement\":[32]}]]],[\"tds-header-dropdown-list-item.cjs\",[[1,\"tds-header-dropdown-list-item\",{\"selected\":[4],\"size\":[513]}]]],[\"tds-popover-canvas.cjs\",[[6,\"tds-popover-canvas\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"modifiers\":[16]}]]],[\"tds-side-menu-user-image_2.cjs\",[[1,\"tds-side-menu-user-image\",{\"src\":[1],\"alt\":[1]}],[1,\"tds-side-menu-user-label\",{\"heading\":[1],\"subheading\":[1]}]]],[\"tds-side-menu-item.cjs\",[[1,\"tds-side-menu-item\",{\"selected\":[4],\"active\":[4],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-checkbox.cjs\",[[6,\"tds-checkbox\",{\"name\":[1],\"checkboxId\":[1,\"checkbox-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"value\":[1],\"toggleCheckbox\":[64]}]]],[\"tds-popover-core.cjs\",[[6,\"tds-popover-core\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"modifiers\":[16],\"trigger\":[1],\"autoHide\":[4,\"auto-hide\"],\"renderedShowValue\":[32],\"popperInstance\":[32],\"target\":[32],\"isShown\":[32]},[[8,\"click\",\"onAnyClick\"]],{\"show\":[\"onShowChange\"],\"referenceEl\":[\"onReferenceElChanged\"],\"trigger\":[\"onTriggerChanged\"]}]]],[\"tds-core-header-item_2.cjs\",[[1,\"tds-header-item\",{\"active\":[4],\"selected\":[4]}],[1,\"tds-core-header-item\"]]],[\"tds-icon.cjs\",[[1,\"tds-icon\",{\"name\":[513],\"size\":[513],\"svgTitle\":[1,\"svg-title\"],\"icons_object\":[32],\"arrayOfIcons\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"tds-header-launcher.cjs\",[[1,\"tds-header-launcher\",{\"open\":[32],\"buttonEl\":[32],\"hasListTypeMenu\":[32]},[[8,\"click\",\"onAnyClick\"]]]]],[\"tds-header-dropdown.cjs\",[[1,\"tds-header-dropdown\",{\"label\":[1],\"noDropdownIcon\":[4,\"no-dropdown-icon\"],\"selected\":[4],\"open\":[32],\"buttonEl\":[32]},[[4,\"click\",\"onAnyClick\"]]]]],[\"tds-header-hamburger.cjs\",[[1,\"tds-header-hamburger\"]]],[\"tds-dropdown-option.cjs\",[[17,\"tds-dropdown-option\",{\"value\":[1],\"disabled\":[4],\"selected\":[32],\"multiselect\":[32],\"size\":[32],\"setSelected\":[64]}]]],[\"tds-header-brand-symbol.cjs\",[[1,\"tds-header-brand-symbol\"]]],[\"tds-side-menu-dropdown.cjs\",[[1,\"tds-side-menu-dropdown\",{\"defaultOpen\":[4,\"default-open\"],\"buttonLabel\":[1,\"button-label\"],\"selected\":[4],\"open\":[32],\"hoverState\":[32],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapsedSideMenuEventHandler\"],[1,\"pointerenter\",\"onEventPointerEnter\"],[0,\"focusin\",\"onEventFocus\"],[1,\"pointerleave\",\"onEventPointerLeave\"],[0,\"focusout\",\"onEventBlur\"]]]]],[\"tds-side-menu-user.cjs\",[[1,\"tds-side-menu-user\",{\"heading\":[1],\"subheading\":[1],\"imgSrc\":[1,\"img-src\"],\"imgAlt\":[1,\"img-alt\"]}]]],[\"tds-accordion-item.cjs\",[[1,\"tds-accordion-item\",{\"header\":[1],\"expandIconPosition\":[1,\"expand-icon-position\"],\"disabled\":[4],\"expanded\":[4],\"paddingReset\":[4,\"padding-reset\"],\"toggleAccordionItem\":[64]}]]],[\"tds-banner.cjs\",[[1,\"tds-banner\",{\"icon\":[1],\"header\":[1],\"subheader\":[1],\"variant\":[1],\"bannerId\":[1,\"banner-id\"],\"hidden\":[516],\"hideBanner\":[64],\"showBanner\":[64]}]]],[\"tds-card.cjs\",[[1,\"tds-card\",{\"modeVariant\":[1,\"mode-variant\"],\"imagePlacement\":[1,\"image-placement\"],\"header\":[1],\"subheader\":[1],\"bodyImg\":[1,\"body-img\"],\"bodyImgAlt\":[1,\"body-img-alt\"],\"bodyDivider\":[4,\"body-divider\"],\"clickable\":[4],\"cardId\":[1,\"card-id\"]}]]],[\"tds-datetime.cjs\",[[2,\"tds-datetime\",{\"type\":[513],\"value\":[513],\"min\":[1],\"max\":[1],\"defaultValue\":[1,\"default-value\"],\"disabled\":[4],\"size\":[1],\"noMinWidth\":[4,\"no-min-width\"],\"modeVariant\":[1,\"mode-variant\"],\"name\":[1],\"state\":[1],\"autofocus\":[4],\"label\":[1],\"helper\":[1],\"focusInput\":[32]},[[0,\"focus\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"]]]]],[\"tds-dropdown.cjs\",[[1,\"tds-dropdown\",{\"name\":[1],\"disabled\":[4],\"helper\":[1],\"label\":[1],\"labelPosition\":[1,\"label-position\"],\"modeVariant\":[1,\"mode-variant\"],\"openDirection\":[1,\"open-direction\"],\"placeholder\":[1],\"size\":[1],\"error\":[4],\"multiselect\":[4],\"filter\":[4],\"noResultText\":[1,\"no-result-text\"],\"defaultValue\":[1,\"default-value\"],\"open\":[32],\"value\":[32],\"filterResult\":[32],\"filterFocus\":[32],\"reset\":[64],\"setValue\":[64],\"appendValue\":[64],\"removeValue\":[64],\"close\":[64]},[[9,\"mousedown\",\"onAnyClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"open\":[\"handleOpenState\"]}]]],[\"tds-folder-tabs.cjs\",[[1,\"tds-folder-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"buttonWidth\":[32],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-footer-group.cjs\",[[1,\"tds-footer-group\",{\"titleText\":[1,\"title-text\"],\"open\":[32]}]]],[\"tds-header-launcher-list.cjs\",[[4,\"tds-header-launcher-list\"]]],[\"tds-header-launcher-list-item.cjs\",[[1,\"tds-header-launcher-list-item\"]]],[\"tds-inline-tabs.cjs\",[[1,\"tds-inline-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"buttonWidth\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-message.cjs\",[[1,\"tds-message\",{\"header\":[1],\"modeVariant\":[1,\"mode-variant\"],\"variant\":[1],\"noIcon\":[4,\"no-icon\"],\"minimal\":[4]}]]],[\"tds-modal.cjs\",[[1,\"tds-modal\",{\"header\":[1],\"prevent\":[4],\"size\":[1],\"actionsPosition\":[1,\"actions-position\"],\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"isShown\":[32],\"showModal\":[64],\"closeModal\":[64]}]]],[\"tds-navigation-tabs.cjs\",[[1,\"tds-navigation-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"defaultSelectedIndex\":[2,\"default-selected-index\"],\"selectedIndex\":[514,\"selected-index\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectTab\":[64]},null,{\"selectedIndex\":[\"handleSelectedIndexUpdate\"]}]]],[\"tds-popover-menu.cjs\",[[6,\"tds-popover-menu\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"fluidWidth\":[4,\"fluid-width\"]}]]],[\"tds-side-menu-close-button.cjs\",[[1,\"tds-side-menu-close-button\"]]],[\"tds-side-menu-collapse-button.cjs\",[[1,\"tds-side-menu-collapse-button\",{\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-slider.cjs\",[[0,\"tds-slider\",{\"label\":[1],\"value\":[1025],\"min\":[1],\"max\":[1],\"ticks\":[1],\"showTickNumbers\":[4,\"show-tick-numbers\"],\"tooltip\":[4],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"controls\":[4],\"input\":[4],\"step\":[1],\"name\":[1],\"thumbSize\":[1,\"thumb-size\"],\"snap\":[4],\"sliderId\":[1,\"slider-id\"],\"reset\":[64]},[[0,\"keydown\",\"handleKeydown\"],[9,\"mouseup\",\"handleMouseUp\"],[9,\"touchend\",\"handleTouchEnd\"],[9,\"mousemove\",\"handleMouseMove\"],[9,\"touchmove\",\"handleTouchMove\"]],{\"value\":[\"handleValueUpdate\"]}]]],[\"tds-step.cjs\",[[1,\"tds-step\",{\"index\":[1],\"state\":[1],\"hideLabels\":[32],\"size\":[32],\"orientation\":[32],\"labelPosition\":[32]},[[16,\"internalTdsPropsChange\",\"handlePropsChange\"]]]]],[\"tds-table-body-row.cjs\",[[1,\"tds-table-body-row\",{\"selected\":[516],\"multiselect\":[32],\"mainCheckBoxStatus\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-table-footer.cjs\",[[1,\"tds-table-footer\",{\"pagination\":[516],\"paginationValue\":[1538,\"pagination-value\"],\"pages\":[514],\"cols\":[2],\"columnsNumber\":[32],\"compactDesign\":[32],\"lastCorrectValue\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-table-header.cjs\",[[1,\"tds-table-header\",{\"allSelected\":[1540,\"all-selected\"],\"selected\":[1540],\"indeterminate\":[4],\"multiselect\":[32],\"expandableRows\":[32],\"mainCheckboxSelected\":[32],\"mainExpendSelected\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"enableToolbarDesign\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsRowExpanded\",\"internalTdsRowExpandedListener\"]]]]],[\"tds-table-toolbar.cjs\",[[1,\"tds-table-toolbar\",{\"tableTitle\":[513,\"table-title\"],\"filter\":[516],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-text-field.cjs\",[[6,\"tds-text-field\",{\"type\":[513],\"labelPosition\":[1,\"label-position\"],\"label\":[1],\"helper\":[1],\"placeholder\":[1],\"value\":[513],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"size\":[1],\"modeVariant\":[1,\"mode-variant\"],\"noMinWidth\":[4,\"no-min-width\"],\"name\":[1],\"state\":[1],\"maxLength\":[2,\"max-length\"],\"autofocus\":[4],\"focusInput\":[32]}]]],[\"tds-textarea.cjs\",[[2,\"tds-textarea\",{\"label\":[1],\"name\":[1],\"helper\":[1],\"cols\":[2],\"rows\":[2],\"labelPosition\":[1,\"label-position\"],\"placeholder\":[1],\"value\":[1],\"disabled\":[4],\"readOnly\":[4,\"read-only\"],\"state\":[1],\"maxLength\":[2,\"max-length\"],\"modeVariant\":[1,\"mode-variant\"],\"autofocus\":[4],\"noMinWidth\":[4,\"no-min-width\"],\"focusInput\":[32]}]]],[\"tds-toast.cjs\",[[1,\"tds-toast\",{\"toastId\":[1,\"toast-id\"],\"header\":[1],\"subheader\":[1],\"variant\":[1],\"hidden\":[516],\"toastRole\":[1,\"toast-role\"],\"hideToast\":[64],\"showToast\":[64]}]]],[\"tds-tooltip.cjs\",[[6,\"tds-tooltip\",{\"text\":[1],\"selector\":[1],\"referenceEl\":[16],\"mouseOverTooltip\":[4,\"mouse-over-tooltip\"],\"show\":[1028],\"placement\":[1]}]]],[\"tds-accordion.cjs\",[[1,\"tds-accordion\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-badge.cjs\",[[1,\"tds-badge\",{\"value\":[1],\"hidden\":[516],\"size\":[1],\"shape\":[32],\"text\":[32]},null,{\"value\":[\"watchProps\"],\"size\":[\"watchProps\"]}]]],[\"tds-block.cjs\",[[1,\"tds-block\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-body-cell.cjs\",[[1,\"tds-body-cell\",{\"cellValue\":[520,\"cell-value\"],\"cellKey\":[520,\"cell-key\"],\"disablePadding\":[516,\"disable-padding\"],\"textAlignState\":[32],\"activeSorting\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"tableId\":[32]},[[16,\"internalTdsPropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsHover\",\"internalTdsHoverListener\"],[16,\"internalTdsTextAlign\",\"internalTdsTextAlignListener\"]]]]],[\"tds-breadcrumb.cjs\",[[1,\"tds-breadcrumb\",{\"current\":[4]}]]],[\"tds-breadcrumbs.cjs\",[[1,\"tds-breadcrumbs\"]]],[\"tds-button.cjs\",[[6,\"tds-button\",{\"text\":[1],\"type\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"fullbleed\":[4],\"modeVariant\":[1,\"mode-variant\"],\"onlyIcon\":[32]}]]],[\"tds-chip.cjs\",[[6,\"tds-chip\",{\"type\":[1],\"size\":[1],\"chipId\":[1,\"chip-id\"],\"checked\":[516],\"name\":[1],\"value\":[1]}]]],[\"tds-folder-tab.cjs\",[[1,\"tds-folder-tab\",{\"disabled\":[4],\"selected\":[32],\"tabWidth\":[32],\"setTabWidth\":[64],\"setSelected\":[64]}]]],[\"tds-footer.cjs\",[[1,\"tds-footer\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"tds-footer-item.cjs\",[[1,\"tds-footer-item\"]]],[\"tds-header.cjs\",[[4,\"tds-header\"]]],[\"tds-header-cell.cjs\",[[1,\"tds-header-cell\",{\"cellKey\":[513,\"cell-key\"],\"cellValue\":[513,\"cell-value\"],\"customWidth\":[513,\"custom-width\"],\"sortable\":[4],\"textAlign\":[513,\"text-align\"],\"textAlignState\":[32],\"sortingDirection\":[32],\"sortedByMyKey\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"multiselect\":[32],\"enableToolbarDesign\":[32],\"tableId\":[32],\"expandableRows\":[32]},[[16,\"internalTdsPropChange\",\"internalTdsPropChangeListener\"],[16,\"internalSortButtonClicked\",\"updateOptionsContent\"]]]]],[\"tds-header-dropdown-list-user.cjs\",[[1,\"tds-header-dropdown-list-user\",{\"imgUrl\":[1,\"img-url\"],\"imgAlt\":[1,\"img-alt\"],\"header\":[1],\"subheader\":[1]}]]],[\"tds-header-launcher-grid.cjs\",[[4,\"tds-header-launcher-grid\",{\"headingElement\":[32]}]]],[\"tds-header-launcher-grid-item.cjs\",[[1,\"tds-header-launcher-grid-item\"]]],[\"tds-header-launcher-grid-title.cjs\",[[4,\"tds-header-launcher-grid-title\"]]],[\"tds-header-launcher-list-title.cjs\",[[4,\"tds-header-launcher-list-title\"]]],[\"tds-header-title.cjs\",[[1,\"tds-header-title\"]]],[\"tds-inline-tab.cjs\",[[1,\"tds-inline-tab\",{\"disabled\":[4],\"selected\":[32],\"setSelected\":[64]}]]],[\"tds-link.cjs\",[[1,\"tds-link\",{\"disabled\":[4],\"underline\":[4]}]]],[\"tds-navigation-tab.cjs\",[[1,\"tds-navigation-tab\",{\"disabled\":[4],\"selected\":[32],\"setSelected\":[64]}]]],[\"tds-popover-menu-item.cjs\",[[1,\"tds-popover-menu-item\",{\"disabled\":[4]}]]],[\"tds-radio-button.cjs\",[[6,\"tds-radio-button\",{\"name\":[1],\"value\":[1],\"radioId\":[1,\"radio-id\"],\"checked\":[516],\"required\":[4],\"disabled\":[4]}]]],[\"tds-side-menu.cjs\",[[1,\"tds-side-menu\",{\"open\":[4],\"persistent\":[4],\"collapsed\":[4],\"isUpperSlotEmpty\":[32],\"isCollapsed\":[32]},[[16,\"internalTdsCollapse\",\"collapsedSideMenuEventHandler\"]],{\"collapsed\":[\"onCollapsedChange\"]}]]],[\"tds-side-menu-dropdown-list.cjs\",[[1,\"tds-side-menu-dropdown-list\",{\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapsedSideMenuEventHandler\"]]]]],[\"tds-side-menu-dropdown-list-item.cjs\",[[1,\"tds-side-menu-dropdown-list-item\",{\"selected\":[4],\"dropdownHasIcon\":[32],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-side-menu-overlay.cjs\",[[1,\"tds-side-menu-overlay\"]]],[\"tds-spinner.cjs\",[[0,\"tds-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"tds-stepper.cjs\",[[1,\"tds-stepper\",{\"orientation\":[1],\"labelPosition\":[1,\"label-position\"],\"size\":[1],\"hideLabels\":[4,\"hide-labels\"],\"stepperId\":[1,\"stepper-id\"]},null,{\"orientation\":[\"handleDirectionChange\"],\"labelPosition\":[\"handleLabelPositionChange\"],\"size\":[\"handleSizeChange\"],\"hideLabels\":[\"handleHideLabelsChange\"]}]]],[\"tds-table.cjs\",[[1,\"tds-table\",{\"verticalDividers\":[516,\"vertical-dividers\"],\"compactDesign\":[516,\"compact-design\"],\"noMinWidth\":[516,\"no-min-width\"],\"multiselect\":[516],\"expandableRows\":[516,\"expandable-rows\"],\"responsive\":[516],\"modeVariant\":[513,\"mode-variant\"],\"tableId\":[1,\"table-id\"],\"getSelectedRows\":[64]},null,{\"multiselect\":[\"multiselectChanged\"],\"expandableRows\":[\"enableExpandableRowsChanged\"],\"compactDesign\":[\"compactDesignChanged\"],\"verticalDividers\":[\"verticalDividersChanged\"],\"noMinWidth\":[\"noMinWidthChanged\"],\"modeVariant\":[\"modeVariantChanged\"]}]]],[\"tds-table-body.cjs\",[[4,\"tds-table-body\",{\"multiselect\":[32],\"enablePaginationTableBody\":[32],\"expandableRows\":[32],\"multiselectArray\":[32],\"multiselectArrayJSON\":[32],\"mainCheckboxStatus\":[32],\"columnsNumber\":[32],\"tableId\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"],[16,\"internalTdsRowChange\",\"bodyCheckboxListener\"]]]]],[\"tds-table-body-row-expandable.cjs\",[[1,\"tds-table-body-row-expandable\",{\"colSpan\":[2,\"col-span\"],\"isExpanded\":[32],\"tableId\":[32],\"columnsNumber\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"modeVariant\":[32]},[[16,\"internalTdsTablePropChange\",\"internalTdsPropChangeListener\"]]]]],[\"tds-toggle.cjs\",[[6,\"tds-toggle\",{\"checked\":[516],\"required\":[4],\"size\":[1],\"name\":[1],\"headline\":[1],\"disabled\":[4],\"toggleId\":[1,\"toggle-id\"],\"toggle\":[64]}]]],[\"tds-header-launcher-button.cjs\",[[1,\"tds-header-launcher-button\",{\"active\":[4]}]]],[\"tds-divider.cjs\",[[1,\"tds-divider\",{\"orientation\":[1]}]]],[\"tds-header-dropdown-list.cjs\",[[1,\"tds-header-dropdown-list\",{\"size\":[513],\"headingElement\":[32]}]]],[\"tds-header-dropdown-list-item.cjs\",[[1,\"tds-header-dropdown-list-item\",{\"selected\":[4],\"size\":[513]}]]],[\"tds-popover-canvas.cjs\",[[6,\"tds-popover-canvas\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"modifiers\":[16]}]]],[\"tds-side-menu-user-image_2.cjs\",[[1,\"tds-side-menu-user-image\",{\"src\":[1],\"alt\":[1]}],[1,\"tds-side-menu-user-label\",{\"heading\":[1],\"subheading\":[1]}]]],[\"tds-side-menu-item.cjs\",[[1,\"tds-side-menu-item\",{\"selected\":[4],\"active\":[4],\"collapsed\":[32]},[[16,\"internalTdsSideMenuPropChange\",\"collapseSideMenuEventHandler\"]]]]],[\"tds-checkbox.cjs\",[[6,\"tds-checkbox\",{\"name\":[1],\"checkboxId\":[1,\"checkbox-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[1540],\"indeterminate\":[1028],\"value\":[1],\"toggleCheckbox\":[64]},null,{\"indeterminate\":[\"handleIndeterminateState\"]}]]],[\"tds-popover-core.cjs\",[[6,\"tds-popover-core\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"modifiers\":[16],\"trigger\":[1],\"autoHide\":[4,\"auto-hide\"],\"renderedShowValue\":[32],\"popperInstance\":[32],\"target\":[32],\"isShown\":[32]},[[8,\"click\",\"onAnyClick\"]],{\"show\":[\"onShowChange\"],\"referenceEl\":[\"onReferenceElChanged\"],\"trigger\":[\"onTriggerChanged\"]}]]],[\"tds-core-header-item_2.cjs\",[[1,\"tds-header-item\",{\"active\":[4],\"selected\":[4]}],[1,\"tds-core-header-item\"]]],[\"tds-icon.cjs\",[[1,\"tds-icon\",{\"name\":[513],\"size\":[513],\"svgTitle\":[1,\"svg-title\"],\"icons_object\":[32],\"arrayOfIcons\":[32]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -62,13 +62,13 @@
     "components/spinner/spinner.js",
     "components/stepper/step/step.js",
     "components/table/table-body/table-body.js",
-    "components/table/table-header/table-header.js",
-    "components/table/table-header-cell/table-header-cell.js",
-    "components/table/table-toolbar/table-toolbar.js",
     "components/table/table-body-cell/table-body-cell.js",
     "components/table/table-body-row/table-body-row.js",
     "components/table/table-body-row-expandable/table-body-row-expandable.js",
     "components/table/table-footer/table-footer.js",
+    "components/table/table-header/table-header.js",
+    "components/table/table-header-cell/table-header-cell.js",
+    "components/table/table-toolbar/table-toolbar.js",
     "components/tabs/folder-tabs/folder-tabs.js",
     "components/tabs/folder-tabs/folder-tab/folder-tab.js",
     "components/tabs/inline-tabs/inline-tabs.js",

package/dist/collection/components/accordion/test/basic/accordion.e2e.js

@@ -0,0 +1,19 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-accordion', () => {
+  test('renders basic accordion correctly', async ({ page }) => {
+    await page.goto('src/components/accordion/test/basic/index.html');
+    const accordion = page.locator('tds-accordion');
+    await expect(accordion).toHaveClass(/hydrated/);
+    await expect(accordion).toContainText('First item');
+    await expect(accordion).toContainText('Second item');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('fires tdsToggle event on click', async ({ page }) => {
+    await page.goto('src/components/accordion/test/basic/index.html');
+    const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
+    const myEventSpy = await page.spyOnEvent('tdsToggle');
+    await accordionFirstItem.click();
+    expect(myEventSpy).toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/accordion/test/disabled/accordion.e2e.js

@@ -0,0 +1,19 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-accordion', () => {
+  test('renders disabled accordion correctly', async ({ page }) => {
+    await page.goto('src/components/accordion/test/disabled/index.html');
+    const accordion = page.locator('tds-accordion');
+    await expect(accordion).toHaveClass(/hydrated/);
+    await expect(accordion).toContainText('First item');
+    await expect(accordion).toContainText('Second item');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('does not fire tdsToggle event on click on disabled accordion', async ({ page }) => {
+    await page.goto('src/components/accordion/test/disabled/index.html');
+    const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
+    const myEventSpy = await page.spyOnEvent('tdsToggle');
+    await accordionFirstItem.click();
+    expect(myEventSpy).not.toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/accordion/test/expanded/accordion.e2e.js

@@ -0,0 +1,24 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-accordion', () => {
+  test('renders expanded accordion correctly', async ({ page }) => {
+    await page.goto('src/components/accordion/test/expanded/index.html');
+    const accordion = page.locator('tds-accordion');
+    await expect(accordion).toHaveClass(/hydrated/);
+    await expect(accordion).toContainText('First item');
+    await expect(accordion).toContainText('Second item');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('does fire tdsToggle event on click on accordion', async ({ page }) => {
+    await page.goto('src/components/accordion/test/expanded/index.html');
+    const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
+    const myEventSpy = await page.spyOnEvent('tdsToggle');
+    await accordionFirstItem.click({
+      position: {
+        x: 1,
+        y: 1,
+      },
+    });
+    expect(myEventSpy).toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/accordion/test/padding-reset/accordion.e2e.js

@@ -0,0 +1,24 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-accordion', () => {
+  test('renders padding-reset accordion correctly', async ({ page }) => {
+    await page.goto('src/components/accordion/test/padding-reset/index.html');
+    const accordion = page.locator('tds-accordion');
+    await expect(accordion).toHaveClass(/hydrated/);
+    await expect(accordion).toContainText('First item');
+    await expect(accordion).toContainText('Second item');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+  test('does fire tdsToggle event on click on accordion', async ({ page }) => {
+    await page.goto('src/components/accordion/test/padding-reset/index.html');
+    const accordionFirstItem = page.locator('tds-accordion-item[header="First item"]');
+    const myEventSpy = await page.spyOnEvent('tdsToggle');
+    await accordionFirstItem.click({
+      position: {
+        x: 1,
+        y: 1,
+      },
+    });
+    expect(myEventSpy).toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/badge/test/basic/badge.e2e.js

@@ -0,0 +1,10 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-badge', () => {
+  test('renders basic badge correctly', async ({ page }) => {
+    await page.goto('src/components/badge/test/basic/index.html');
+    const accordion = page.locator('tds-badge');
+    await expect(accordion).toHaveClass('hydrated');
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/badge/test/value/badge.e2e.js

@@ -0,0 +1,11 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-badge', () => {
+  test('renders value badge correctly', async ({ page }) => {
+    await page.goto('src/components/badge/test/value/index.html');
+    (await page.locator('tds-badge').all()).forEach(async (element) => {
+      await expect(element).toHaveClass(/hydrated/);
+    });
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

package/dist/collection/components/banner/test/basic/banner.e2e.js

@@ -0,0 +1,10 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+test.describe('tds-banner', () => {
+  test('renders basic banner correctly', async ({ page }) => {
+    await page.goto('src/components/banner/test/basic/index.html');
+    const accordion = page.locator('tds-banner');
+    await expect(accordion).toHaveClass(/hydrated/);
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});