@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/header/header-toolbar.stories.js

@@ -1,206 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
-const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
-    <nav class='sdds-nav'>
-        <div class='sdds-nav__left'>
-          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
-          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
-              <span id='sdds-nav__mob-menu-icon'>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
-                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
-              </span>
-          </button>
-          <div class='sdds-nav__app-name'>${siteName}</div>
-        </div>
-
-        <div class='sdds-nav__center'>
-          <ul class='sdds-nav__inline-menu'>
-
-              <li class='sdds-nav__item'>
-                  <a class='sdds-nav__item-core' href='#'>
-                      <span class='span'>Item 1</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__item--active'>
-                  <a class='sdds-nav__item-core ' href='#'>
-                      <span class='sdds-nav__item-core-text'>Item 2</span>
-                  </a>
-              </li>
-
-              <li class='sdds-nav__item sdds-nav__dropdown'>
-              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
-                  <span class='sdds-nav__item-core-text'>Item 3</span>
-                  <span class='sdds-nav__dropdown-icon'>
-                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
-                  </span>
-              </button>
-              <ul class='sdds-nav__dropdown-menu'>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
-                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
-              </ul>
-              </li>
-          </ul>
-
-          <ul class='sdds-nav__toolbar-menu'>
-
-              <li class='sdds-nav__item sdds-nav__avatar' >
-                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
-                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
-                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
-                          <span class='sdds-nav__avatar-title'>Employee Name</span>
-                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                      </span>
-                  </button>
-
-                  <ul class='sdds-nav__avatar-menu'>
-                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
-                          <span class='sdds-nav__avatar-info'>
-                              <span class='sdds-nav__avatar-title'>Employee Name</span>
-                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
-                          </span>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
-                      </li>
-                      <li class='sdds-nav__avatar-item'>
-                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>
-                      </li>
-                  </ul>
-              </li>
-          </ul>
-        </div>
-
-        <div class='sdds-nav__right'>
-          <div class='sdds-nav__item sdds-nav__app-launcher'>
-              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
-                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
-              </button>
-              <ul class='sdds-nav__app-launcher-menu'>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
-                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
-                  </li>
-                  <li class='sdds-nav__app-launcher-item'>
-                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
-                  </li>
-              </ul>
-          </div>
-          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
-        </div>
-    </nav>
-
-    <script>
-    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
-    toggleAvatarMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleMobileMenu = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleAppLauncher = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-    }
-    toggleInlineDropdown = () => {
-        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-    closeDropdownsFromOverlay = () => {
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
-        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
-    }
-
-    </script>
-    `);
-export const ToolbarMenu = ToolbarMenuTemplate.bind({});

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.css

@@ -1,24 +0,0 @@
-:host {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-header-nav-item-color);
-}
-:host .item {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: var(--sdds-header-height);
-  height: var(--sdds-header-height);
-  margin: 0;
-}
-:host .item * {
-  box-sizing: border-box;
-}
-:host slot {
-  white-space: nowrap;
-}
-:host ::slotted(svg) {
-  font-size: 20px;
-}

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.js

@@ -1,18 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class CoreHeaderItem {
-  render() {
-    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
-  }
-  static get is() { return "sdds-core-header-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["core-header-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["core-header-item.css"]
-    };
-  }
-}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.css

@@ -1,14 +0,0 @@
-:host sdds-header-item {
-  display: none;
-}
-:host sdds-header-item a {
-  background-image: var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);
-  background-size: 30px auto;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-@media (min-width: 521px) {
-  :host sdds-header-item {
-    display: block;
-  }
-}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js

@@ -1,46 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../../utils/utils';
-export class HeaderBrandSymbol {
-  constructor() {
-    this.linkHref = 'https://www.scania.com';
-  }
-  render() {
-    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
-  }
-  static get is() { return "sdds-header-brand-symbol"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-brand-symbol.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-brand-symbol.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "linkHref": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The href for the logo link."
-        },
-        "attribute": "link-href",
-        "reflect": false,
-        "defaultValue": "'https://www.scania.com'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/header/webcomponent/header-component.css

@@ -1,49 +0,0 @@
-/*
-  Contains spacing variables for the layout
-*/
-sdds-header {
-  display: block;
-  height: var(--sdds-header-height);
-  background-color: var(--sdds-header-background);
-  width: 100%;
-  z-index: 300;
-}
-
-nav {
-  box-sizing: border-box;
-  background-color: var(--sdds-header-background);
-  width: 100%;
-  display: block;
-}
-nav * {
-  box-sizing: border-box;
-}
-nav .sdds-header-component-list {
-  height: var(--sdds-header-height);
-  all: unset;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-nav sdds-header-dropdown,
-nav sdds-header-item {
-  display: none;
-}
-nav .sdds-header-middle-spacer {
-  all: unset;
-  display: block;
-  flex-grow: 1;
-  height: var(--sdds-header-height);
-  border-right: 1px solid var(--sdds-header--basic-element-border);
-}
-@media screen and (min-width: 992px) {
-  nav sdds-header-dropdown,
-nav sdds-header-item {
-    display: block;
-  }
-}
-nav sdds-header-item:nth-child(3),
-nav sdds-header-dropdown:nth-child(3) {
-  /* Adds a left border to the button after the title, if any */
-  border-left: 1px solid var(--sdds-header--basic-element-border);
-}

package/dist/collection/components/header/webcomponent/header-component.js

@@ -1,42 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';
-export class SddsHeader {
-  constructor() {
-    const callback = (mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          updateListChildrenRoles(mutation.target);
-        }
-      });
-    };
-    this.observer = new MutationObserver(callback);
-  }
-  componentDidLoad() {
-    const hostElement = this.host;
-    const navElement = hostElement.querySelector('.sdds-header-component-list');
-    this.observer.observe(navElement, {
-      childList: true,
-      subtree: false,
-    });
-    updateListChildrenRoles(navElement);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
-  }
-  static get is() { return "sdds-header"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-component.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/header/webcomponent/header-default.stories.js

@@ -1,78 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeHamburger from './header-hamburger/readme.md';
-import readmeTitle from './header-title/readme.md';
-import readmeItem from './header-item/readme.md';
-import readmeDropdown from './header-dropdown/readme.md';
-import readmeDropdownList from './header-dropdown-list/readme.md';
-import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
-import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
-import readmeLauncher from './header-launcher/readme.md';
-export default {
-  title: 'Components/Header/Web Component',
-  parameters: {
-    notes: {
-      'Header': readme,
-      'Header hamburger': readmeHamburger,
-      'Header title': readmeTitle,
-      'Header item': readmeItem,
-      'Header dropdown': readmeDropdown,
-      'Header dropdown list': readmeDropdownList,
-      'Header dropdown list item': readmeDropdownListItem,
-      'Header dropdown list user': readmeDropdownListUser,
-      'Header launcher': readmeLauncher,
-    },
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {},
-  args: {},
-};
-const Template = () => formatHtmlPreview(`
-  <sdds-header>
-    <sdds-header-title>
-      Example: default
-    </sdds-header-title>
-
-    <sdds-header-launcher slot="end">
-      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
-      <sdds-header-launcher-list>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Trucklyfe</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">HaulHub</a>
-        </sdds-header-launcher-list-item>
-        <sdds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">WheelWizz</a>
-        </sdds-header-launcher-list-item>
-      </sdds-header-launcher-list>
-    </sdds-header-launcher>
-
-
-    <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
-    </sdds-header-brand-symbol>
-
-  </sdds-header>
-  
-  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
-    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
-  </main>
-  `);
-export const Default = Template.bind({});

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.css

@@ -1,31 +0,0 @@
-:host {
-  height: var(--sdds-header-height);
-  position: relative;
-}
-:host .menu {
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: calc(100vh - var(--sdds-header-height));
-  box-shadow: var(--sdds-nav-dropdown-menu-box);
-  background-color: var(--sdds-header-app-launcher-menu-background);
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-:host .menu::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-:host .menu::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-:host .menu ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-:host .state-open .dropdown-icon {
-  transform: rotateZ(180deg);
-}
-:host .state-open .button {
-  position: relative;
-  z-index: 801;
-}

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.js

@@ -1,122 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class HeaderDropdown {
-  constructor() {
-    this.uuid = crypto.randomUUID();
-    this.buttonLabel = undefined;
-    this.noDropdownIcon = false;
-    this.selected = false;
-    this.open = false;
-    this.buttonEl = undefined;
-  }
-  onAnyClick(event) {
-    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-    const isClickOutside = !event.composedPath().includes(this.host);
-    if (isClickOutside) {
-      this.open = false;
-    }
-  }
-  toggleDropdown() {
-    this.open = !this.open;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'state-open': this.open,
-      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
-        this.buttonEl = el;
-      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
-        this.toggleDropdown();
-      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: [],
-          },
-        },
-      ] }, h("slot", null))))));
-  }
-  static get is() { return "sdds-header-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "buttonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
-        },
-        "attribute": "button-label",
-        "reflect": false
-      },
-      "noDropdownIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the dropdown icon (downwards chevron) should be hidden."
-        },
-        "attribute": "no-dropdown-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the button that opens the dropdown should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "buttonEl": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/header/webcomponent/header-dropdown-list/header-dropdown-list.css

@@ -1,19 +0,0 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
-:host {
-  display: block;
-  width: 190px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  border-radius: none;
-  background-color: var(--sdds-header-app-launcher-menu-bg);
-}
-@media all and (max-width: 384px) {
-  :host {
-    width: 100vw;
-  }
-}
-
-:host([type=lg]) {
-  width: 320px;
-}