@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/modal/modal.css

@@ -1,31 +1,31 @@
 :root,
-.sdds-mode-light {
-  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-background: var(--sdds-white);
-  --sdds-modal-text: var(--sdds-grey-958);
-  --sdds-modal-icon: var(--sdds-black);
-  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
-  --sdds-modal-scrollbar: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+.tds-mode-light {
+  --tds-modal-backdrop: rgba(0 0 0 / 40%);
+  --tds-modal-background: var(--tds-white);
+  --tds-modal-text: var(--tds-grey-958);
+  --tds-modal-icon: var(--tds-black);
+  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
+  --tds-modal-scrollbar: var(--tds-grey-300);
+  --tds-modal-scrollbar-track: var(--tds-grey-300);
+  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
 }
 
-.sdds-mode-dark {
-  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-background: var(--sdds-grey-900);
-  --sdds-modal-text: var(--sdds-grey-50);
-  --sdds-modal-icon: var(--sdds-white);
-  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
-  --sdds-modal-scrollbar: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+.tds-mode-dark {
+  --tds-modal-backdrop: rgba(0 0 0 / 40%);
+  --tds-modal-background: var(--tds-grey-900);
+  --tds-modal-text: var(--tds-grey-50);
+  --tds-modal-icon: var(--tds-white);
+  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
+  --tds-modal-scrollbar: var(--tds-grey-300);
+  --tds-modal-scrollbar-track: var(--tds-grey-300);
+  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
 }
 
 /* MIXINS */
 /* MODAL STYLING */
-.sdds-modal {
+.tds-modal {
   box-sizing: border-box;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
   margin: auto;
   position: relative;
   border-radius: 4px;
@@ -37,177 +37,177 @@
   /* Track */
   /* Handle */
 }
-.sdds-modal * {
+.tds-modal * {
   box-sizing: border-box;
 }
-.sdds-modal::-webkit-scrollbar {
+.tds-modal::-webkit-scrollbar {
   width: 5px;
-  background-color: var(--sdds-grey-300);
+  background-color: var(--tds-grey-300);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal::-webkit-scrollbar-track {
-  background-color: var(--sdds-grey-300);
+.tds-modal::-webkit-scrollbar-track {
+  background-color: var(--tds-grey-300);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-500);
+.tds-modal::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-500);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal__actions-sticky {
+.tds-modal__actions-sticky {
   overflow: hidden;
 }
-.sdds-modal__actions-sticky .sdds-modal-body {
-  font: var(--sdds-body-01);
-  letter-spacing: var(--sdds-body-01-ls);
+.tds-modal__actions-sticky .tds-modal-body {
+  font: var(--tds-body-01);
+  letter-spacing: var(--tds-body-01-ls);
   padding-bottom: 96px;
   margin: 0 -16px 0 0;
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
-.sdds-modal__actions-sticky .sdds-modal-actions {
+.tds-modal__actions-sticky .tds-modal-actions {
   position: absolute;
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--sdds-modal-background);
-  padding: var(--sdds-spacing-element-16);
+  background-color: var(--tds-modal-background);
+  padding: var(--tds-spacing-element-16);
   display: flex;
   gap: 16px;
 }
-.sdds-modal__actions-static .sdds-modal-actions {
-  background-color: var(--sdds-modal-background);
+.tds-modal__actions-static .tds-modal-actions {
+  background-color: var(--tds-modal-background);
   display: flex;
   gap: 16px;
 }
 
 @media (min-width: 320px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 100%;
   }
 
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 100%;
   }
 
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 100%;
   }
 
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 100%;
   }
 }
 @media (min-width: 672px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 75%;
   }
 
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 62.5%;
   }
 
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 75%;
   }
 
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 100%;
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 31.25%;
   }
 
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 43.75%;
   }
 
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 62.5%;
   }
 
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (min-width: 1312px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 31.25%;
   }
 
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 37.5%;
   }
 
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 62.5%;
   }
 
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (min-width: 1584px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 25%;
   }
 
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 37.5%;
   }
 
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 50%;
   }
 
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (max-width: 320px) {
-  .sdds-modal-md,
-.sdds-modal-lg,
-.sdds-modal-sm {
+  .tds-modal-md,
+.tds-modal-lg,
+.tds-modal-sm {
     height: 100%;
   }
-  .sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),
-.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),
-.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*) {
+  .tds-modal-md slot[name=tds-modal-actions]::slotted(*),
+.tds-modal-lg slot[name=tds-modal-actions]::slotted(*),
+.tds-modal-sm slot[name=tds-modal-actions]::slotted(*) {
     display: flex;
   }
 }
 /* MODAL SUBELEMENTS */
-.sdds-modal-header {
+.tds-modal-header {
   display: flex;
-  padding-bottom: var(--sdds-spacing-element-8);
+  padding-bottom: var(--tds-spacing-element-8);
   position: sticky;
   top: 0;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
   z-index: 1;
 }
-.sdds-modal-header::before {
+.tds-modal-header::before {
   content: " ";
   position: absolute;
   height: 16px;
   top: -16px;
   width: 100%;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
 }
 
-.sdds-modal-headline {
-  color: var(--sdds-modal-text);
-  font: var(--sdds-headline-05);
-  letter-spacing: var(--sdds-headline-05-ls);
+.tds-modal-headline {
+  color: var(--tds-modal-text);
+  font: var(--tds-headline-05);
+  letter-spacing: var(--tds-headline-05-ls);
   margin: 0;
   flex: 1;
-  color: var(--sdds-modal-text);
+  color: var(--tds-modal-text);
 }
 
-.sdds-modal-body {
-  color: var(--sdds-modal-text);
-  font: var(--sdds-body-01);
-  letter-spacing: var(--sdds-body-01-ls);
+.tds-modal-body {
+  color: var(--tds-modal-text);
+  font: var(--tds-body-01);
+  letter-spacing: var(--tds-body-01-ls);
   padding-bottom: 40px;
   overflow-y: visible;
   padding-right: 16px;
@@ -216,23 +216,23 @@
   /* Track */
   /* Handle */
 }
-.sdds-modal-body::-webkit-scrollbar {
+.tds-modal-body::-webkit-scrollbar {
   width: 5px;
-  background-color: var(--sdds-grey-300);
+  background-color: var(--tds-grey-300);
 }
-.sdds-modal-body::-webkit-scrollbar-track {
-  background-color: var(--sdds-grey-300);
+.tds-modal-body::-webkit-scrollbar-track {
+  background-color: var(--tds-grey-300);
 }
-.sdds-modal-body::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-500);
+.tds-modal-body::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-500);
 }
 @media (min-width: 1056px) {
-  .sdds-modal-body {
+  .tds-modal-body {
     padding-right: 64px;
   }
 }
 
-.sdds-modal-backdrop {
+.tds-modal-backdrop {
   box-sizing: border-box;
   left: 0;
   top: 0;
@@ -240,73 +240,73 @@
   height: 100%;
   width: 100%;
   z-index: 600;
-  background-color: var(--sdds-modal-backdrop);
+  background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
-.sdds-modal-backdrop * {
+.tds-modal-backdrop * {
   box-sizing: border-box;
 }
 @media (max-width: 320px) {
-  .sdds-modal-backdrop {
+  .tds-modal-backdrop {
     padding: 0;
   }
 }
-.sdds-modal-backdrop.show {
+.tds-modal-backdrop.show {
   display: flex;
 }
-.sdds-modal-backdrop.hide {
+.tds-modal-backdrop.hide {
   display: none;
 }
 
-button.sdds-modal-close {
+button.tds-modal-close {
   background-color: transparent;
   border: 0;
   padding: 0;
   appearance: unset;
 }
 
-.sdds-modal-close {
+.tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--sdds-modal-icon);
+  color: var(--tds-modal-icon);
   cursor: pointer;
 }
-.sdds-modal-close:focus {
-  outline: 2px solid var(--sdds-blue-400);
+.tds-modal-close:focus {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 @media (min-width: 320px) {
-  .sdds-modal-close {
-    margin-left: var(--sdds-spacing-element-16);
+  .tds-modal-close {
+    margin-left: var(--tds-spacing-element-16);
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-close {
-    margin-left: var(--sdds-spacing-element-48);
+  .tds-modal-close {
+    margin-left: var(--tds-spacing-element-48);
   }
 }
 
-.sdds-modal-close-btn {
+.tds-modal-close-btn {
   display: inline-block;
   height: auto;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 @media (min-width: 320px) {
-  .sdds-modal-close-btn {
-    margin-left: var(--sdds-spacing-element-16);
+  .tds-modal-close-btn {
+    margin-left: var(--tds-spacing-element-16);
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-close-btn {
-    margin-left: var(--sdds-spacing-element-48);
+  .tds-modal-close-btn {
+    margin-left: var(--tds-spacing-element-48);
   }
 }
-.sdds-modal-close-btn svg {
-  fill: var(--sdds-modal-icon);
+.tds-modal-close-btn svg {
+  fill: var(--tds-modal-icon);
 }
 
-.sdds-modal-overflow {
+.tds-modal-overflow {
   overflow: hidden;
 }
 
@@ -318,7 +318,7 @@ button.sdds-modal-close {
   height: 100%;
   width: 100%;
   z-index: 600;
-  background-color: var(--sdds-modal-backdrop);
+  background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
 @media (max-width: 320px) {
@@ -332,11 +332,11 @@ button.sdds-modal-close {
 :host.hide {
   display: none;
 }
-:host .sdds-modal-close {
+:host .tds-modal-close {
   border: none;
   background-color: transparent;
 }
-:host .sdds-modal-close-btn {
+:host .tds-modal-close-btn {
   border: none;
   background-color: transparent;
 }

package/dist/collection/components/modal/modal.js

@@ -1,9 +1,9 @@
 import { h, Host, } from '@stencil/core';
-export class Modal {
+export class TdsModal {
   constructor() {
-    /** Emits a close event and then close the modal if it is not prevented. */
+    /** Emits a close event and then close the Modal if it is not prevented. */
     this.handleClose = (event) => {
-      const closeEvent = this.sddsClose.emit(event);
+      const closeEvent = this.tdsClose.emit(event);
       if (!closeEvent.defaultPrevented) {
         this.isShown = false;
       }
@@ -11,7 +11,7 @@ export class Modal {
     this.handleShow = () => {
       this.isShown = true;
     };
-    /** Adds an event listener to the reference element that shows/closes the modal. */
+    /** Adds an event listener to the reference element that shows/closes the Modal. */
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
         referenceEl.addEventListener('click', (event) => {
@@ -42,11 +42,11 @@ export class Modal {
     this.show = undefined;
     this.isShown = false;
   }
-  /** Shows the modal.  */
+  /** Shows the Modal.  */
   async showModal() {
     this.handleShow();
   }
-  /** Closes the modal. */
+  /** Closes the Modal. */
   async closeModal() {
     this.handleClose();
   }
@@ -54,20 +54,20 @@ export class Modal {
     if (this.show !== null) {
       this.isShown = this.show;
     }
-    this.setDissmissButtons();
+    this.setDismissButtons();
     this.setShowButton();
   }
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
   handleOverlayClick(event) {
     const targetList = event.composedPath();
     const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-close' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+    if (target.classList[0] === 'tds-modal-close' ||
+      (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
       this.handleClose(event);
     }
   }
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons() {
+  /** Adds an event listener to the dismiss buttons that closes the Modal. */
+  setDismissButtons() {
     this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
       dismissButton.addEventListener('click', (event) => {
         this.handleClose(event);
@@ -77,9 +77,9 @@ export class Modal {
   render() {
     return (h(Host, { onClick: (event) => {
         this.handleOverlayClick(event);
-      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+      }, class: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal ${this.actions ? `tds-modal__actions-${this.actions}` : ''} ${this.size ? `tds-modal-${this.size}` : ''} ` }, h("div", { class: "tds-modal-header" }, h("slot", { name: "tds-modal-headline" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "tds-modal-body" }, h("slot", { name: "tds-modal-body" })), h("div", { class: "tds-modal-actions" }, h("slot", { name: "tds-modal-actions" })))));
   }
-  static get is() { return "sdds-modal"; }
+  static get is() { return "tds-modal"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -105,7 +105,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables closing modal on clicking on overlay area."
+          "text": "Disables closing Modal on clicking on overlay area."
         },
         "attribute": "prevent",
         "reflect": false,
@@ -123,7 +123,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of modal"
+          "text": "Size of Modal"
         },
         "attribute": "size",
         "reflect": false,
@@ -159,7 +159,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "CSS selector for the element that will show the modal."
+          "text": "CSS selector for the element that will show the Modal."
         },
         "attribute": "selector",
         "reflect": false
@@ -180,7 +180,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Element that will show the modal (takes priority over selector)"
+          "text": "Element that will show the Modal (takes priority over selector)"
         }
       },
       "show": {
@@ -195,7 +195,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls whether the modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
+          "text": "Controls whether the Modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
         },
         "attribute": "show",
         "reflect": false
@@ -209,14 +209,14 @@ export class Modal {
   }
   static get events() {
     return [{
-        "method": "sddsClose",
-        "name": "sddsClose",
+        "method": "tdsClose",
+        "name": "tdsClose",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitts when the modal is closed."
+          "text": "Emits when the Modal is closed."
         },
         "complexType": {
           "original": "any",
@@ -239,7 +239,7 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the modal.",
+          "text": "Shows the Modal.",
           "tags": []
         }
       },
@@ -255,7 +255,7 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Closes the modal.",
+          "text": "Closes the Modal.",
           "tags": []
         }
       }

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
-  color: var(--sdds-popover-canvas-color);
-  background-color: var(--sdds-popover-canvas-background);
+  color: var(--tds-popover-canvas-color);
+  background-color: var(--tds-popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 800;
@@ -11,6 +11,6 @@
   box-sizing: border-box;
 }
 
-:host(.sdds-popover-canvas-show) {
+:host(.tds-popover-canvas-show) {
   display: block;
 }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class PopoverCanvas {
+export class TdsPopoverCanvas {
   constructor() {
     this.initialize = (referenceEl) => {
       this.popperInstance = createPopper(referenceEl, this.host, {
@@ -85,9 +85,9 @@ export class PopoverCanvas {
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-popover-canvas"; }
+  static get is() { return "tds-popover-canvas"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/popover-menu/popover-menu.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
-  background-color: var(--sdds-popover-menu-background);
+  background-color: var(--tds-popover-menu-background);
   padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
@@ -13,7 +13,7 @@
   box-sizing: border-box;
 }
 
-:host(.sdds-popover-menu-show) {
+:host(.tds-popover-menu-show) {
   opacity: 1;
   display: block;
 }

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class PopoverMenu {
+export class TdsPopoverMenu {
   constructor() {
     this.selector = '';
     this.referenceEl = undefined;
@@ -68,9 +68,9 @@ export class PopoverMenu {
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-popover-menu"; }
+  static get is() { return "tds-popover-menu"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {