@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/collection-manifest.json

@@ -1,27 +1,19 @@
 {
   "entries": [
-    "./components/side-menu/webcomponent/side-menu.js",
-    "./components/stepper/sdds-stepper.js",
-    "./components/data-table/table/table.js",
+    "./components/side-menu/side-menu.js",
+    "./components/stepper/stepper.js",
+    "./components/table/table/table.js",
     "./components/accordion/accordion.js",
     "./components/accordion/accordion-item/accordion-item.js",
     "./components/badge/badge.js",
-    "./components/banner/sdds-banner.js",
-    "./components/block/sdds-block.js",
-    "./components/breadcrumb/sdds-breadcrumb.js",
-    "./components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js",
+    "./components/banner/banner.js",
+    "./components/block/block.js",
+    "./components/breadcrumbs/breadcrumbs.js",
+    "./components/breadcrumbs/breadcrumb/breadcrumb.js",
     "./components/button/button.js",
-    "./components/card/sdds-card.js",
-    "./components/checkbox/sdds-checkbox.js",
-    "./components/chip/sdds-chip.js",
-    "./components/data-table/table-body/table-body.js",
-    "./components/data-table/table-body-cell/table-body-cell.js",
-    "./components/data-table/table-body-row/table-body-row.js",
-    "./components/data-table/table-body-row-expandable/table-body-row-expandable.js",
-    "./components/data-table/table-footer/table-footer.js",
-    "./components/data-table/table-header/table-header.js",
-    "./components/data-table/table-header-cell/table-header-cell.js",
-    "./components/data-table/table-toolbar/table-toolbar.js",
+    "./components/card/card.js",
+    "./components/checkbox/checkbox.js",
+    "./components/chip/chip.js",
     "./components/datetime/datetime.js",
     "./components/divider/divider.js",
     "./components/dropdown/dropdown.js",
@@ -29,63 +21,71 @@
     "./components/dropdown/dropdown-option/dropdown-option.js",
     "./components/dropdown-v2/dropdown-v2.js",
     "./components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.js",
-    "./components/footer/webcomponent/sdds-footer.js",
-    "./components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js",
-    "./components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js",
-    "./components/header/webcomponent/header-component.js",
-    "./components/header/webcomponent/core-header-item/core-header-item.js",
-    "./components/header/webcomponent/header-brand-symbol/header-brand-symbol.js",
-    "./components/header/webcomponent/header-dropdown/header-dropdown.js",
-    "./components/header/webcomponent/header-dropdown-list/header-dropdown-list.js",
-    "./components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.js",
-    "./components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.js",
-    "./components/header/webcomponent/header-hamburger/header-hamburger.js",
-    "./components/header/webcomponent/header-item/header-item.js",
-    "./components/header/webcomponent/header-launcher/header-launcher.js",
-    "./components/header/webcomponent/header-launcher-button/header-launcher-button.js",
-    "./components/header/webcomponent/header-launcher-grid/header-launcher-grid.js",
-    "./components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.js",
-    "./components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.js",
-    "./components/header/webcomponent/header-launcher-list/header-launcher-list.js",
-    "./components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.js",
-    "./components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.js",
-    "./components/header/webcomponent/header-title/header-title.js",
+    "./components/footer/footer.js",
+    "./components/footer/footer-group/footer-group.js",
+    "./components/footer/footer-item/footer-item.js",
+    "./components/header/header.js",
+    "./components/header/core-header-item/core-header-item.js",
+    "./components/header/header-brand-symbol/header-brand-symbol.js",
+    "./components/header/header-dropdown/header-dropdown.js",
+    "./components/header/header-dropdown-list/header-dropdown-list.js",
+    "./components/header/header-dropdown-list-item/header-dropdown-list-item.js",
+    "./components/header/header-dropdown-list-user/header-dropdown-list-user.js",
+    "./components/header/header-hamburger/header-hamburger.js",
+    "./components/header/header-item/header-item.js",
+    "./components/header/header-launcher/header-launcher.js",
+    "./components/header/header-launcher-button/header-launcher-button.js",
+    "./components/header/header-launcher-grid/header-launcher-grid.js",
+    "./components/header/header-launcher-grid-item/header-launcher-grid-item.js",
+    "./components/header/header-launcher-grid-title/header-launcher-grid-title.js",
+    "./components/header/header-launcher-list/header-launcher-list.js",
+    "./components/header/header-launcher-list-item/header-launcher-list-item.js",
+    "./components/header/header-launcher-list-title/header-launcher-list-title.js",
+    "./components/header/header-title/header-title.js",
     "./components/icon/icon.js",
-    "./components/link/sdds-link.js",
-    "./components/message/sdds-message.js",
+    "./components/link/link.js",
+    "./components/message/message.js",
     "./components/modal/modal.js",
     "./components/popover-canvas/popover-canvas.js",
     "./components/popover-menu/popover-menu.js",
     "./components/radio-button/radio-button.js",
-    "./components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.js",
-    "./components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.js",
-    "./components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.js",
-    "./components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.js",
-    "./components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js",
-    "./components/side-menu/webcomponent/side-menu-item/side-menu-item.js",
-    "./components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.js",
-    "./components/side-menu/webcomponent/side-menu-user/side-menu-user.js",
-    "./components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.js",
-    "./components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.js",
+    "./components/side-menu/side-menu-close-button/side-menu-close-button.js",
+    "./components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js",
+    "./components/side-menu/side-menu-dropdown/side-menu-dropdown.js",
+    "./components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js",
+    "./components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js",
+    "./components/side-menu/side-menu-item/side-menu-item.js",
+    "./components/side-menu/side-menu-overlay/side-menu-overlay.js",
+    "./components/side-menu/side-menu-user/side-menu-user.js",
+    "./components/side-menu/side-menu-user-image/side-menu-user-image.js",
+    "./components/side-menu/side-menu-user-label/side-menu-user-label.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
-    "./components/stepper/stepper-item/sdds-stepper-item.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/tabs/folder-tabs/folder-tabs.js",
-    "./components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js",
+    "./components/tabs/folder-tabs/folder-tab/folder-tab.js",
     "./components/tabs/inline-tabs/inline-tabs.js",
-    "./components/tabs/inline-tabs/inline-tab/sdds-inline-tab.js",
+    "./components/tabs/inline-tabs/inline-tab/inline-tab.js",
     "./components/tabs/navigation-tabs/navigation-tabs.js",
-    "./components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.js",
+    "./components/tabs/navigation-tabs/navigation-tab/navigation-tab.js",
+    "./components/text-field/text-field.js",
     "./components/textarea/textarea.js",
-    "./components/textfield/textfield.js",
-    "./components/toast/sdds-toast.js",
-    "./components/toggle/sdds-toggle.js",
+    "./components/toast/toast.js",
+    "./components/toggle/toggle.js",
     "./components/tooltip/tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.2.2",
-    "typescriptVersion": "4.9.5"
+    "version": "3.3.0",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -1,153 +1,153 @@
-.sdds-accordion-item {
+.tds-accordion-item {
   box-sizing: border-box;
   list-style: none;
-  color: var(--sdds-accordion-color);
+  color: var(--tds-accordion-color);
   position: relative;
-  border-top: 1px solid var(--sdds-accordion-border);
+  border-top: 1px solid var(--tds-accordion-border);
 }
-.sdds-accordion-item * {
+.tds-accordion-item * {
   box-sizing: border-box;
 }
-.sdds-accordion-item button.sdds-accordion-header-icon-start,
-.sdds-accordion-item button.sdds-accordion-header-icon-end {
+.tds-accordion-item button.tds-accordion-header-icon-start,
+.tds-accordion-item button.tds-accordion-header-icon-end {
   all: unset;
 }
-.sdds-accordion-item .sdds-accordion-header-icon-start,
-.sdds-accordion-item .sdds-accordion-header-icon-end,
-.sdds-accordion-item button.sdds-accordion-header-icon-start,
-.sdds-accordion-item button.sdds-accordion-header-icon-end {
+.tds-accordion-item .tds-accordion-header-icon-start,
+.tds-accordion-item .tds-accordion-header-icon-end,
+.tds-accordion-item button.tds-accordion-header-icon-start,
+.tds-accordion-item button.tds-accordion-header-icon-end {
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
   align-items: center;
   width: 100%;
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  padding: var(--sdds-spacing-element-16);
-  background-color: var(--sdds-accordion-background);
-}
-.sdds-accordion-item .sdds-accordion-header-icon-start *,
-.sdds-accordion-item .sdds-accordion-header-icon-end *,
-.sdds-accordion-item button.sdds-accordion-header-icon-start *,
-.sdds-accordion-item button.sdds-accordion-header-icon-end * {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  padding: var(--tds-spacing-element-16);
+  background-color: var(--tds-accordion-background);
+}
+.tds-accordion-item .tds-accordion-header-icon-start *,
+.tds-accordion-item .tds-accordion-header-icon-end *,
+.tds-accordion-item button.tds-accordion-header-icon-start *,
+.tds-accordion-item button.tds-accordion-header-icon-end * {
   box-sizing: border-box;
 }
-.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,
-.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,
-.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,
-.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon {
+.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,
+.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,
+.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,
+.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon {
   transform-origin: center;
   transition: transform 0.15s ease-in-out;
-  color: var(--sdds-accordion-icon-color);
+  color: var(--tds-accordion-icon-color);
 }
-.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
-.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon,
-.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
-.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon {
+.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon > tds-icon,
+.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon > tds-icon,
+.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon > tds-icon,
+.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon > tds-icon {
   display: block;
 }
-.sdds-accordion-item .sdds-accordion-title {
+.tds-accordion-item .tds-accordion-title {
   flex-grow: 2;
 }
-.sdds-accordion-item .sdds-accordion-panel {
+.tds-accordion-item .tds-accordion-panel {
   cursor: default;
-  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);
+  padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);
   display: none;
-  font: var(--sdds-detail-03);
-  letter-spacing: var(--sdds-detail-03-ls);
+  font: var(--tds-detail-03);
+  letter-spacing: var(--tds-detail-03-ls);
 }
-.sdds-accordion-item .sdds-accordion-panel p {
+.tds-accordion-item .tds-accordion-panel p {
   margin: 0;
   padding: 0;
 }
-.sdds-accordion-item .sdds-accordion-panel--padding-reset {
-  padding-right: var(--sdds-spacing-element-16);
+.tds-accordion-item .tds-accordion-panel--padding-reset {
+  padding-right: var(--tds-spacing-element-16);
 }
-.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon {
-  margin: 0 0 0 var(--sdds-spacing-element-32);
+.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon {
+  margin: 0 0 0 var(--tds-spacing-element-32);
 }
-.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title {
+.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title {
   order: 1;
 }
-.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon {
+.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon {
   order: 0;
-  margin: 0 var(--sdds-spacing-element-16) 0 0;
+  margin: 0 var(--tds-spacing-element-16) 0 0;
 }
-.sdds-accordion-item.disabled,
-.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,
-.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,
-.sdds-accordion-item.disabled .sdds-accordion-panel {
-  color: var(--sdds-accordion-color-disabled);
+.tds-accordion-item.disabled,
+.tds-accordion-item.disabled .tds-accordion-header-icon-end,
+.tds-accordion-item.disabled .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled .tds-accordion-panel {
+  color: var(--tds-accordion-color-disabled);
   cursor: not-allowed;
 }
-.sdds-accordion-item.disabled .sdds-accordion-icon,
-.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,
-.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,
-.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon {
-  color: var(--sdds-accordion-color-disabled);
-}
-.sdds-accordion-item.disabled:hover,
-.sdds-accordion-item.disabled:hover *, .sdds-accordion-item.disabled:focus,
-.sdds-accordion-item.disabled:focus *, .sdds-accordion-item.disabled:active,
-.sdds-accordion-item.disabled:active *, .sdds-accordion-item.disabled.active,
-.sdds-accordion-item.disabled.active * {
+.tds-accordion-item.disabled .tds-accordion-icon,
+.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,
+.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,
+.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon {
+  color: var(--tds-accordion-color-disabled);
+}
+.tds-accordion-item.disabled:hover,
+.tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus,
+.tds-accordion-item.disabled:focus *, .tds-accordion-item.disabled:active,
+.tds-accordion-item.disabled:active *, .tds-accordion-item.disabled.active,
+.tds-accordion-item.disabled.active * {
   cursor: not-allowed;
 }
-.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,
-.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,
-.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,
-.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,
-.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg);
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:active .tds-accordion-header-icon-end, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled.active .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-bg);
   outline: none;
   pointer-events: none;
 }
-.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,
-.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,
-.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,
-.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,
-.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after {
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after {
   border-color: transparent;
 }
-.sdds-accordion-item.expanded .sdds-accordion-panel {
+.tds-accordion-item.expanded .tds-accordion-panel {
   display: block;
   padding-bottom: 31px;
 }
-.sdds-accordion-item.expanded .sdds-accordion-icon {
+.tds-accordion-item.expanded .tds-accordion-icon {
   transform: rotate(180deg);
 }
-.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon {
+.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon {
   margin-right: 0;
-  margin-left: var(--sdds-spacing-element-32);
+  margin-left: var(--tds-spacing-element-32);
 }
-.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon {
+.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon {
   margin-left: 0;
-  margin-right: var(--sdds-spacing-element-16);
+  margin-right: var(--tds-spacing-element-16);
 }
-.sdds-accordion-item:focus {
-  border-top: 1px solid var(--sdds-accordion-border-focus);
+.tds-accordion-item:focus {
+  border-top: 1px solid var(--tds-accordion-border-focus);
 }
-.sdds-accordion-item[disabled=true]:focus {
-  border-color: var(--sdds-accordion-border);
+.tds-accordion-item[disabled=true]:focus {
+  border-color: var(--tds-accordion-border);
 }
 
-:host(:focus) .sdds-accordion-item {
-  outline: 2px solid var(--sdds-blue-400);
+:host(:focus) .tds-accordion-item {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-background-focus);
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-focus);
   outline: none;
 }
 
-:host(:hover) .sdds-accordion-header-icon-start,
-:host(:hover) .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-background-hover);
+:host(:hover) .tds-accordion-header-icon-start,
+:host(:hover) .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-hover);
 }
 
-:host(:active) .sdds-accordion-header-icon-start,
-:host(:active) .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-background-active);
+:host(:active) .tds-accordion-header-icon-start,
+:host(:active) .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-active);
   outline: none;
 }

package/dist/collection/components/accordion/accordion-item/accordion-item.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-export class AccordionItem {
+export class TdsAccordionItem {
   constructor() {
     this.header = '';
     this.expandIconPosition = 'end';
@@ -7,10 +7,10 @@ export class AccordionItem {
     this.expanded = false;
     this.paddingReset = false;
   }
-  /** Method for toggeling the expanded state of the Accordion Item. */
+  /** Method for toggling the expanded state of the Accordion Item. */
   async toggleAccordionItem() {
     // This is negated in order to emit the value the Accordion Item will have after it has expanded/redacted.
-    const event = this.sddsToggle.emit({
+    const event = this.tdsToggle.emit({
       expanded: !this.expanded,
     });
     if (!event.defaultPrevented) {
@@ -18,14 +18,14 @@ export class AccordionItem {
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: `sdds-accordion-item
+    return (h(Host, null, h("div", { class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header, h("slot", { name: "accordion-item-header" })), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
-            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "accordion-item-header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
+            ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
             ` }, h("slot", null)))));
   }
-  static get is() { return "sdds-accordion-item"; }
+  static get is() { return "tds-accordion-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -69,7 +69,7 @@ export class AccordionItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Changes where the expand icon is placed."
+          "text": "Changes position of the expand icon."
         },
         "attribute": "expand-icon-position",
         "reflect": false,
@@ -123,7 +123,7 @@ export class AccordionItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true 16px on right padding instead of 64px"
+          "text": "When true, 16px on right padding instead of 64px"
         },
         "attribute": "padding-reset",
         "reflect": false,
@@ -133,14 +133,14 @@ export class AccordionItem {
   }
   static get events() {
     return [{
-        "method": "sddsToggle",
-        "name": "sddsToggle",
+        "method": "tdsToggle",
+        "name": "tdsToggle",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when the Accordion Item is clicked but before the it is closed or opened."
+          "text": "Fires when the Accordion Item is clicked, but before it is closed or opened."
         },
         "complexType": {
           "original": "{\n    expanded: boolean;\n  }",
@@ -163,7 +163,7 @@ export class AccordionItem {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Method for toggeling the expanded state of the Accordion Item.",
+          "text": "Method for toggling the expanded state of the Accordion Item.",
           "tags": []
         }
       }

package/dist/collection/components/accordion/accordion.css

@@ -5,59 +5,59 @@
 :host * {
   box-sizing: border-box;
 }
-:host .sdds-accordion-header-icon-start,
-:host .sdds-accordion-header-icon-end {
+:host .tds-accordion-header-icon-start,
+:host .tds-accordion-header-icon-end {
   position: relative;
 }
 
 :host(:focus) {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-background-focus);
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-focus);
   outline: none;
 }
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after {
-  border-color: var(--sdds-accordion-border-focus);
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start::after,
+:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end::after {
+  border-color: var(--tds-accordion-border-focus);
 }
 :host(:focus) .disabled,
 :host(:focus) .disabled * {
   cursor: not-allowed;
 }
-:host(:focus) .disabled .sdds-accordion-header-icon-start,
-:host(:focus) .disabled .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg);
+:host(:focus) .disabled .tds-accordion-header-icon-start,
+:host(:focus) .disabled .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-bg);
   outline: none;
   pointer-events: none;
 }
-:host(:focus) .disabled .sdds-accordion-header-icon-start::after,
-:host(:focus) .disabled .sdds-accordion-header-icon-end::after {
+:host(:focus) .disabled .tds-accordion-header-icon-start::after,
+:host(:focus) .disabled .tds-accordion-header-icon-end::after {
   border-color: transparent;
 }
 
-:host(:active) .sdds-accordion-header-icon-start,
-:host(:active) .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-background-active);
+:host(:active) .tds-accordion-header-icon-start,
+:host(:active) .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-active);
   outline: none;
 }
 :host(:active) .disabled,
 :host(:active) .disabled * {
   cursor: not-allowed;
 }
-:host(:active) .disabled .sdds-accordion-header-icon-start,
-:host(:active) .disabled .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg);
+:host(:active) .disabled .tds-accordion-header-icon-start,
+:host(:active) .disabled .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-bg);
   outline: none;
   pointer-events: none;
 }
-:host(:active) .disabled .sdds-accordion-header-icon-start::after,
-:host(:active) .disabled .sdds-accordion-header-icon-end::after {
+:host(:active) .disabled .tds-accordion-header-icon-start::after,
+:host(:active) .disabled .tds-accordion-header-icon-end::after {
   border-color: transparent;
 }
 
 :host(:last-child) {
-  border-bottom: 1px solid var(--sdds-accordion-border);
+  border-bottom: 1px solid var(--tds-accordion-border);
 }

package/dist/collection/components/accordion/accordion.js

@@ -1,12 +1,12 @@
 import { h, Host } from '@stencil/core';
-export class Accordion {
+export class TdsAccordion {
   constructor() {
     this.modeVariant = null;
   }
   render() {
-    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-accordion"; }
+  static get is() { return "tds-accordion"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -32,7 +32,7 @@ export class Accordion {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the the accordion."
+          "text": "Set the variant of the Accordion."
         },
         "attribute": "mode-variant",
         "reflect": false,

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

@@ -0,0 +1,6 @@
+import { TdsAccordion } from './accordion';
+describe('tds-accordion', () => {
+  it('builds', () => {
+    expect(new TdsAccordion()).toBeTruthy();
+  });
+});