@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/message/sdds-message.js

@@ -0,0 +1,135 @@
+import { Host, h } from '@stencil/core';
+export class SddsMessage {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `
+        message-wrapper ${this.type}
+        ${this.minimal ? 'message-minimal' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+  }
+  static get is() { return "sdds-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of message."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "noIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the icon in the message."
+        },
+        "attribute": "no-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "minimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimal message styling."
+        },
+        "attribute": "minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/message/sdds-message.stories.js

@@ -0,0 +1,106 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Message',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    messageType: {
+      name: 'Message Type',
+      description: 'The type of the message.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'information' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Header for the message',
+      control: {
+        type: 'text',
+      },
+    },
+    extendedMessage: {
+      name: 'Extended message content',
+      control: {
+        type: 'text',
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hide the icon',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    minimal: {
+      name: 'Minimal',
+      description: 'Minimal message styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    messageType: 'Information',
+    modeVariant: 'Inherit from parent',
+    header: 'Message header',
+    noIcon: false,
+    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
+    minimal: false,
+  },
+};
+const Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, minimal }) => formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
+    <div class="demo-wrapper">
+      <sdds-message
+          type="${messageType.toLowerCase()}"
+          header="${header}"
+          ${noIcon ? 'no-icon' : ''}
+          ${minimal ? 'minimal' : ''}
+          mode-variant="${modeVariant.toLowerCase()}"
+          ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+      ${extendedMessage}
+      </sdds-message>
+    </div>
+    `);
+export const WebComponent = Template.bind({});

package/dist/collection/components/modal/modal-native.stories.js

@@ -0,0 +1,129 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Modal',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    showModal: {
+      name: 'Show modal',
+      description: 'Toggle if the modal is displayed',
+      control: {
+        type: 'boolean',
+      },
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
+    actions: 'Static',
+    size: 'Large',
+    showModal: true,
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
+const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtmlPreview(`    <style>
+  /* demo-wrapper and demo-styles is for demonstration purposes only*/
+  .demo-wrapper {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 100vh;
+  }
+  .demo-styles {
+    position: absolute;
+    margin-bottom: 20px;
+  }
+  </style>
+
+  <div class="demo-wrapper">
+    <button id="modal-button" class="sdds-btn sdds-btn-primary sdds-btn-lg">
+      <span class="sdds-btn-text">Open modal</span>
+    </button>
+    <div id="my-modal" class="sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles">
+      <div class="sdds-modal sdds-modal-${sizeLookUp[size]} sdds-modal__actions-${actions.toLowerCase()}">
+        <div class="sdds-modal-header">
+          <h5 class="sdds-modal-headline">${headline}</h5>
+          <button class="sdds-modal-close" aria-label="close">
+            <sdds-icon name="cross" size="20px"></sdds-icon>
+          </button>
+        </div>
+          <div class="sdds-modal-body">
+            <p class="sdds-u-mb0 sdds-u-mt0">${bodyText}</p>
+          </div>
+          <div class="sdds-modal-actions">
+              <button class="sdds-btn sdds-btn-primary sdds-btn-md">Save</button>
+              <button class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+          </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+  modal = document.getElementById('my-modal');
+  buttons = modal.getElementsByTagName('button');
+  for (const button of buttons) {
+    button.addEventListener('click', () => {
+      modal.classList.replace('show', 'hide')
+    })
+  }
+
+  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {
+    modal.classList.replace('show', 'hide');
+  })
+
+  document.getElementById('modal-button').addEventListener('click', () => {
+    modal.classList.replace('hide', 'show')
+  })
+  </script>
+  `);
+export const Native = Template.bind({});
+Native.args = {};

package/dist/collection/components/modal/modal-webcomponent.stories.js

@@ -0,0 +1,86 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Modal',
+  parameters: {
+    layout: 'fullscreen',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
+    actions: 'Static',
+    size: 'Large',
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
+const ModalTemplate = ({ size, headline, bodyText, actions }) => formatHtmlPreview(`
+  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
+
+  <sdds-modal open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
+      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
+      <span slot="sdds-modal-body">
+          ${bodyText}
+      </span>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('delete')" class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('cancel')" class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+  </sdds-modal>
+  <script>
+
+    document.getElementById('my-modal-button').addEventListener('click', () => {
+      document.getElementById('my-modal').open = true;
+    })
+  </script>
+
+  `);
+export const WebComponent = ModalTemplate.bind({});
+WebComponent.args = {};

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

@@ -1,31 +1,21 @@
 :root,
-html {
+.sdds-mode-light {
   --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-bg: var(--sdds-white);
+  --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);
 }
 
-:root .sdds-theme-light,
-html .sdds-theme-light {
+.sdds-mode-dark {
   --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-bg: var(--sdds-white);
-  --sdds-modal-text: var(--sdds-grey-958);
-  --sdds-modal-icon: var(--sdds-black);
-  --sdds-modal-scrollbar: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
-}
-
-:root .sdds-theme-dark,
-html .sdds-theme-dark {
-  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-bg: var(--sdds-grey-900);
-  --sdds-modal-text: var(--sdds-white);
+  --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);
@@ -35,8 +25,7 @@ html .sdds-theme-dark {
 /* MODAL STYLING */
 .sdds-modal {
   box-sizing: border-box;
-  background-color: var(--sdds-modal-bg);
-  z-index: 4;
+  background-color: var(--sdds-modal-background);
   margin: auto;
   position: relative;
   border-radius: 4px;
@@ -70,23 +59,23 @@ html .sdds-theme-dark {
 .sdds-modal__actions-sticky .sdds-modal-body {
   font: var(--sdds-body-01);
   letter-spacing: var(--sdds-body-01-ls);
-  padding-bottom: 40px;
+  padding-bottom: 96px;
   margin: 0 -16px 0 0;
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
 .sdds-modal__actions-sticky .sdds-modal-actions {
   position: absolute;
-  bottom: 0;
+  bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--sdds-modal-bg);
+  background-color: var(--sdds-modal-background);
   padding: var(--sdds-spacing-element-16);
   display: flex;
   gap: 16px;
 }
 .sdds-modal__actions-static .sdds-modal-actions {
-  background-color: var(--sdds-modal-bg);
+  background-color: var(--sdds-modal-background);
   display: flex;
   gap: 16px;
 }
@@ -194,7 +183,7 @@ html .sdds-theme-dark {
   padding-bottom: var(--sdds-spacing-element-8);
   position: sticky;
   top: 0;
-  background-color: var(--sdds-modal-bg);
+  background-color: var(--sdds-modal-background);
   z-index: 1;
 }
 .sdds-modal-header::before {
@@ -203,22 +192,25 @@ html .sdds-theme-dark {
   height: 16px;
   top: -16px;
   width: 100%;
-  background-color: var(--sdds-modal-bg);
+  background-color: var(--sdds-modal-background);
 }
 
 .sdds-modal-headline {
+  color: var(--sdds-modal-text);
   font: var(--sdds-headline-05);
   letter-spacing: var(--sdds-headline-05-ls);
   margin: 0;
   flex: 1;
+  color: var(--sdds-modal-text);
 }
 
 .sdds-modal-body {
+  color: var(--sdds-modal-text);
   font: var(--sdds-body-01);
   letter-spacing: var(--sdds-body-01-ls);
   padding-bottom: 40px;
-  margin: 0 -16px 0 0;
   overflow-y: visible;
+  padding-right: 16px;
   /* SCROLL STUFF */
   /* width */
   /* Track */
@@ -241,15 +233,19 @@ html .sdds-theme-dark {
 }
 
 .sdds-modal-backdrop {
+  box-sizing: border-box;
   left: 0;
   top: 0;
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 40000;
+  z-index: 600;
   background-color: var(--sdds-modal-backdrop);
   padding: 0 16px;
 }
+.sdds-modal-backdrop * {
+  box-sizing: border-box;
+}
 @media (max-width: 320px) {
   .sdds-modal-backdrop {
     padding: 0;
@@ -262,24 +258,53 @@ html .sdds-theme-dark {
   display: none;
 }
 
-.sdds-modal-btn {
+button.sdds-modal-close {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  appearance: unset;
+}
+
+.sdds-modal-close {
+  display: inline-block;
+  height: auto;
+  color: var(--sdds-modal-icon);
+  cursor: pointer;
+}
+.sdds-modal-close:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+@media (min-width: 320px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-16);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+
+.sdds-modal-close-btn {
   display: inline-block;
-  width: 16px;
   height: auto;
-  background-image: 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='%23171719'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   cursor: pointer;
 }
 @media (min-width: 320px) {
-  .sdds-modal-btn {
+  .sdds-modal-close-btn {
     margin-left: var(--sdds-spacing-element-16);
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-btn {
+  .sdds-modal-close-btn {
     margin-left: var(--sdds-spacing-element-48);
   }
 }
+.sdds-modal-close-btn svg {
+  fill: var(--sdds-modal-icon);
+}
 
 .sdds-modal-overflow {
   overflow: hidden;
@@ -292,7 +317,7 @@ html .sdds-theme-dark {
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 40000;
+  z-index: 600;
   background-color: var(--sdds-modal-backdrop);
   padding: 0 16px;
 }
@@ -307,12 +332,13 @@ html .sdds-theme-dark {
 :host.hide {
   display: none;
 }
-:host .sdds-modal-btn {
+:host .sdds-modal-close {
+  border: none;
+  background-color: transparent;
+}
+:host .sdds-modal-close-btn {
   border: none;
   background-color: transparent;
-  /* &:focus {
-    //@include sdds-focus-state; FIXME: THIS INCLUDE IS NOT WORKING
-  } */
 }
 
 :host(.show) {