@scania/tegel 0.0.52 → 0.0.71-beta

package/dist/collection/foundations-stories/grid/grid.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/grid/grid.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Grid',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  args: {\n    fluidContainer: false,\n    padding: true,\n  },\n  argTypes: {\n    fluidContainer: {\n      name: 'Fluid container',\n      description: 'Set container to fluid or not',\n      control: {\n        type: 'boolean',\n      },\n    },\n    padding: {\n      name: 'Fluid container',\n      description: 'Toggle padding on columns',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n};\n\n// Styling for grid templates\nconst style = formatHtmlPreview(`\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-container,\n    .sdds-container-fluid {\n      background-color: #ff00009e;\n      color: black;\n      outline: 1px solid red;\n    }\n\n    .sdds-row > div {\n      outline: 1px solid #ef1919;\n      background: #fbc5c5;\n      min-height: 50px;\n    }\n\n    .sdds-sidebar {\n      background-color: rgba(255, 0, 0, 0.1);\n    }\n\n    .inside-demo {\n      background: #ef9191;\n      height: 100%;\n      word-break: break-word;\n    }\n\n    .container-demo {\n      margin-top: 16px;\n    }\n\n  </style>`);\n\nconst GridTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n  <h4>Grid</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">12</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-11 sdds-col-xxlg-11 sdds-col-xlg-11 sdds-col-lg-11 sdds-col-md-11 sdds-col-sm-11 sdds-col-xs-11\">\n        <div class=\"inside-demo\">11</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-10 sdds-col-xxlg-10 sdds-col-xlg-10 sdds-col-lg-10 sdds-col-md-10 sdds-col-sm-10 sdds-col-xs-10\">\n        <div class=\"inside-demo\">10</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-9 sdds-col-xxlg-9 sdds-col-xlg-9 sdds-col-lg-9 sdds-col-md-9 sdds-col-sm-9 sdds-col-xs-9\">\n        <div class=\"inside-demo\">9</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n        <div class=\"inside-demo\">8</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-7 sdds-col-xxlg-7 sdds-col-xlg-7 sdds-col-lg-7 sdds-col-md-7 sdds-col-sm-7 sdds-col-xs-7\">\n        <div class=\"inside-demo\">7</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n        <div class=\"inside-demo\">6</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-5 sdds-col-xxlg-5 sdds-col-xlg-5 sdds-col-lg-5 sdds-col-md-5 sdds-col-sm-5 sdds-col-xs-5\">\n        <div class=\"inside-demo\">5</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-4 sdds-col-xxlg-4 sdds-col-xlg-4 sdds-col-lg-4 sdds-col-md-4 sdds-col-sm-4 sdds-col-xs-4\">\n        <div class=\"inside-demo\">4</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-3 sdds-col-xxlg-3 sdds-col-xlg-3 sdds-col-lg-3 sdds-col-md-3 sdds-col-sm-3 sdds-col-xs-3\">\n        <div class=\"inside-demo\">3</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-2 sdds-col-xxlg-2 sdds-col-xlg-2 sdds-col-lg-2 sdds-col-md-2 sdds-col-sm-2 sdds-col-xs-2\">\n        <div class=\"inside-demo\">2</div>\n      </div>\n    </div>\n\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max-1 sdds-col-xxlg-1 sdds-col-xlg-1 sdds-col-lg-1 sdds-col-md-1 sdds-col-sm-1 sdds-col-xs-1\">\n        <div class=\"inside-demo\">1</div>\n      </div>\n    </div>\n  </div>\n  `);\n\n// Controls for the grid\nexport const Default = GridTemplate.bind({});\n\nconst GridAutoColTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Auto columns</h4>\n  <h5>Container 1</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 2</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n\n  <h5>Container 3</h5>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n      <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n        <div class=\"inside-demo\">.sdds-col</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Auto = GridAutoColTemplate.bind({});\n\nconst GridPushTemplate = ({ fluidContainer, collapse, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Push</h4>\n\n  <div class=\"sdds-push\">\n    <div class=\"sdds-sidebar ${collapse ? 'sdds-sidebar-collapse' : ''}\">\n    </div>\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n        <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md sdds-col-sm sdds-col-xs\">\n          <div class=\"inside-demo\">1</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const Push = GridPushTemplate.bind({});\n\nPush.args = {\n  collapse: false,\n};\n\nconst GridOffsetTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Grid Offset</h4>\n\n    <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  }\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-1 sdds-col-max-2-offset sdds-col-xxlg-1 sdds-col-xxlg-2-offset sdds-col-xlg-1 sdds-col-xlg-2-offset sdds-col-lg-1 sdds-col-lg-2-offset sdds-col-md-1 sdds-col-md-2-offset sdds-col-sm-1 sdds-col-sm-2-offset sdds-col-xs-1 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n        <div class=\"sdds-col-max-2 sdds-col-max-2-offset sdds-col-xxlg-2 sdds-col-xxlg-2-offset sdds-col-xlg-2 sdds-col-xlg-2-offset sdds-col-lg-2 sdds-col-lg-2-offset sdds-col-md-2 sdds-col-md-2-offset sdds-col-sm-2 sdds-col-sm-2-offset sdds-col-xs-2 sdds-col-xs-2-offset\">\n          <div class=\"inside-demo\">Offset</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Offset = GridOffsetTemplate.bind({});\n\nconst GridNoPaddingTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid no-padding</h4>\n\n    <div class=\"${\n      fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'\n    } demo-example-cols\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-no-padding sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"sdds-no-padding sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">no padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n        <div class=\"${\n          padding ? '' : 'sdds-no-padding'\n        } sdds-col-max-8 sdds-col-xxlg-8 sdds-col-xlg-8 sdds-col-lg-8 sdds-col-md-8 sdds-col-sm-8 sdds-col-xs-8\">\n          <div class=\"inside-demo\">padding</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const NoPadding = GridNoPaddingTemplate.bind({});\n\nNoPadding.args = {\n  padding: true,\n};\n\nconst GridFluidTemplate = ({ fluidContainer = true, padding }) =>\n  formatHtmlPreview(`\n    ${style}\n\n    <h4>Grid fluid</h4>\n\n    <div class=\"sdds-container-fluid ${padding === false ? 'sdds-no-padding' : ''}\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container fluid</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"${fluidContainer ? 'sdds-container-fluid' : 'sdds-container'} ${\n    padding === false ? 'sdds-no-padding' : ''\n  } container-demo\">\n      <div class=\"sdds-row\">\n        <div class=\"sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n          <div class=\"inside-demo\">container</div>\n        </div>\n      </div>\n    </div>\n  `);\n\nexport const Fluid = GridFluidTemplate.bind({});\n\nconst GridNestedTemplate = ({ fluidContainer, padding }) =>\n  formatHtmlPreview(`\n ${style}\n\n <h4>Nested</h4>\n\n <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n   <div class=\"sdds-row\">\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n       <div class=\"inside-demo\">12</div>\n     </div>\n   </div>\n   <div class=\"sdds-row\">\n     <div class=\"sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n      <div class=\"sdds-row\">\n        <div class=\"${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n        <div class=\" ${\n          padding === false ? 'sdds-no-padding' : ''\n        } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n          <div class=\"inside-demo\">6 nested</div>\n        </div>\n      </div>\n     </div>\n     <div class=\"${\n       padding === false ? 'sdds-no-padding' : ''\n     } sdds-col-max-6 sdds-col-xxlg-6 sdds-col-xlg-6 sdds-col-lg-6 sdds-col-md-6 sdds-col-sm-6 sdds-col-xs-6\">\n       <div class=\"inside-demo\">6</div>\n     </div>\n   </div>\n  </div>\n `);\n\nexport const Nested = GridNestedTemplate.bind({});\n\nconst GridHideShow = ({ fluidContainer }) =>\n  formatHtmlPreview(`\n  ${style}\n\n  <h4>Hide/show element</h4>\n\n  <div class=\"${fluidContainer === true ? 'sdds-container-fluid' : 'sdds-container'}\">\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xlg sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Hide on xlg and wider</div>\n      </div>\n    </div>\n    <div class=\"sdds-row\">\n      <div class=\"sdds-hide-xs sdds-show-md sdds-col-max-12 sdds-col-xxlg-12 sdds-col-xlg-12 sdds-col-lg-12 sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n        <div class=\"inside-demo\">Show on md and wider</div>\n      </div>\n    </div>\n  </div>\n  `);\n\nexport const ShowHide = GridHideShow.bind({});\n"]}

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js

@@ -1,101 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-    /* Demo code for presentation purposes */
-    .sdds-spacing-element-demo-box {
-      background-color: var(--sdds-red-500);
-      display: inline-block;
-    }
-    table th, table td {
-      padding: 8px;
-      text-align: center;
-    }
-
-    th:last-child {
-        text-align: left;
-    }
-    th:last-child,
-    td:last-child {
-      text-align: left;
-    }
-  </style>
-
-  <h4>Spacing Element</h4>
-  <table>
-    <tr>
-      <th>Px</th>
-      <th>Token</th>
-      <th>CSS</th>
-      <th>Scale</th>
-    </tr>
-    <tr>
-      <td>2px</td>
-      <td><code>$spacing-element-2</code></td>
-      <td><code>.sdds-spacing-element-2</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)"></span></td>
-    </tr>
-    <tr>
-      <td>4px</td>
-      <td><code>$spacing-element-4</code></td>
-      <td><code>.sdds-spacing-element-4</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)"></span></td>
-    </tr>
-    <tr>
-      <td>8px</td>
-      <td><code>$spacing-element-8</code></td>
-      <td><code>.sdds-spacing-element-8</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)"></span></td>
-    </tr>
-    <tr>
-      <td>12px</td>
-      <td><code>$spacing-element-12</code></td>
-      <td><code>.sdds-spacing-element-12</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);"></span></td>
-    </tr>
-    <tr>
-      <td>16px</td>
-      <td><code>$spacing-element-16</code></td>
-      <td><code>.sdds-spacing-element-16</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);"></span></td>
-    </tr>
-    <tr>
-      <td>20px</td>
-      <td><code>$spacing-element-20</code></td>
-      <td><code>.sdds-spacing-element-20</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);"></span></td>
-    </tr>
-    <tr>
-      <td>24px</td>
-      <td><code>$spacing-element-24</code></td>
-      <td><code>.sdds-spacing-element-24</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);"></span></td>
-    </tr>
-    <tr>
-      <td>32px</td>
-      <td><code>$spacing-element-32</code></td>
-      <td><code>.sdds-spacing-element-32</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);"></span></td>
-    </tr>
-    <tr>
-      <td>40px</td>
-      <td><code>$spacing-element-40</code></td>
-      <td><code>.sdds-spacing-element-40</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);"></span></td>
-    </tr>
-    <tr>
-      <td>48px</td>
-      <td><code>$spacing-element-48</code></td>
-      <td><code>.sdds-spacing-element-48</code></td>
-      <td><span class="sdds-spacing-element-demo-box" style="width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);"></span></td>
-    </tr>
-  </table>
-  `);
-export const SpacingElement = Template.bind({});
-SpacingElement.args = {};
-//# sourceMappingURL=spacing-element.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-element.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-element.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-element.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n    /* Demo code for presentation purposes */\n    .sdds-spacing-element-demo-box {\n      background-color: var(--sdds-red-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n      text-align: center;\n    }\n\n    th:last-child {\n        text-align: left;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <h4>Spacing Element</h4>\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>2px</td>\n      <td><code>$spacing-element-2</code></td>\n      <td><code>.sdds-spacing-element-2</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-2); height: var(--sdds-spacing-element-2)\"></span></td>\n    </tr>\n    <tr>\n      <td>4px</td>\n      <td><code>$spacing-element-4</code></td>\n      <td><code>.sdds-spacing-element-4</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-4); height: var(--sdds-spacing-element-4)\"></span></td>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-element-8</code></td>\n      <td><code>.sdds-spacing-element-8</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-8); height: var(--sdds-spacing-element-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>12px</td>\n      <td><code>$spacing-element-12</code></td>\n      <td><code>.sdds-spacing-element-12</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-12); height: var(--sdds-spacing-element-12);\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-element-16</code></td>\n      <td><code>.sdds-spacing-element-16</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-16); height: var(--sdds-spacing-element-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>20px</td>\n      <td><code>$spacing-element-20</code></td>\n      <td><code>.sdds-spacing-element-20</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-20); height: var(--sdds-spacing-element-20);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-element-24</code></td>\n      <td><code>.sdds-spacing-element-24</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-24); height: var(--sdds-spacing-element-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-element-32</code></td>\n      <td><code>.sdds-spacing-element-32</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-32); height: var(--sdds-spacing-element-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>40px</td>\n      <td><code>$spacing-element-40</code></td>\n      <td><code>.sdds-spacing-element-40</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-40); height: var(--sdds-spacing-element-40);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-element-48</code></td>\n      <td><code>.sdds-spacing-element-48</code></td>\n      <td><span class=\"sdds-spacing-element-demo-box\" style=\"width: var(--sdds-spacing-element-48); height: var(--sdds-spacing-element-48);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingElement = Template.bind({});\nSpacingElement.args = {};\n"]}

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js

@@ -1,95 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Spacing',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <style>
-   /* Demo code for presentation purposes */
-    .demo-wrapper {
-      background-color: var(--sdds-blue-500);
-      display: inline-block;
-    }
-    table th, table td {
-      padding: 8px;
-    }
-    th:last-child,
-    td:last-child {
-      text-align: left;
-    }
-  </style>
-
-  <table>
-    <tr>
-      <th>Px</th>
-      <th>Token</th>
-      <th>CSS</th>
-      <th>Scale</th>
-    </tr>
-    <tr>
-      <td>8px</td>
-      <td><code>$spacing-layout-8</code></td>
-      <td><code>.sdds-spacing-layout-8</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)"></span></td>
-    </tr>
-    <tr>
-      <td>16px</td>
-      <td><code>$spacing-layout-16</code></td>
-      <td><code>.sdds-spacing-layout-16</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);"></span></td>
-    </tr>
-    <tr>
-      <td>24px</td>
-      <td><code>$spacing-layout-24</code></td>
-      <td><code>.sdds-spacing-layout-24</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);"></span></td>
-    </tr>
-    <tr>
-      <td>32px</td>
-      <td><code>$spacing-layout-32</code></td>
-      <td><code>.sdds-spacing-layout-32</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);"></span></td>
-    </tr>
-    <tr>
-      <td>48px</td>
-      <td><code>$spacing-layout-48</code></td>
-      <td><code>.sdds-spacing-layout-48</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);"></span></td>
-    </tr>
-    <tr>
-      <td>64px</td>
-      <td><code>$spacing-layout-64</code></td>
-      <td><code>.sdds-spacing-layout-64</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);"></span></td>
-    </tr>
-    <tr>
-      <td>72px</td>
-      <td><code>$spacing-layout-72</code></td>
-      <td><code>.sdds-spacing-layout-72</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);"></span></td>
-    </tr>
-    <tr>
-      <td>96px</td>
-      <td><code>$spacing-layout-96</code></td>
-      <td><code>.sdds-spacing-layout-96</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);"></span></td>
-    </tr>
-    <tr>
-      <td>128px</td>
-      <td><code>$spacing-layout-128</code></td>
-      <td><code>.sdds-spacing-layout-128</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);"></span></td>
-    </tr>
-    <tr>
-      <td>160px</td>
-      <td><code>$spacing-layout-160</code></td>
-      <td><code>.sdds-spacing-layout-160</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);"></span></td>
-    </tr>
-  </table>
-  `);
-export const SpacingLayout = Template.bind({});
-SpacingLayout.args = {};
-//# sourceMappingURL=spacing-layout.stories.js.map

package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing-layout.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/spacing/spacing-layout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Spacing',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <style>\n   /* Demo code for presentation purposes */\n    .demo-wrapper {\n      background-color: var(--sdds-blue-500);\n      display: inline-block;\n    }\n    table th, table td {\n      padding: 8px;\n    }\n    th:last-child,\n    td:last-child {\n      text-align: left;\n    }\n  </style>\n\n  <table>\n    <tr>\n      <th>Px</th>\n      <th>Token</th>\n      <th>CSS</th>\n      <th>Scale</th>\n    </tr>\n    <tr>\n      <td>8px</td>\n      <td><code>$spacing-layout-8</code></td>\n      <td><code>.sdds-spacing-layout-8</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)\"></span></td>\n    </tr>\n    <tr>\n      <td>16px</td>\n      <td><code>$spacing-layout-16</code></td>\n      <td><code>.sdds-spacing-layout-16</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);\"></span></td>\n    </tr>\n    <tr>\n      <td>24px</td>\n      <td><code>$spacing-layout-24</code></td>\n      <td><code>.sdds-spacing-layout-24</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);\"></span></td>\n    </tr>\n    <tr>\n      <td>32px</td>\n      <td><code>$spacing-layout-32</code></td>\n      <td><code>.sdds-spacing-layout-32</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);\"></span></td>\n    </tr>\n    <tr>\n      <td>48px</td>\n      <td><code>$spacing-layout-48</code></td>\n      <td><code>.sdds-spacing-layout-48</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);\"></span></td>\n    </tr>\n    <tr>\n      <td>64px</td>\n      <td><code>$spacing-layout-64</code></td>\n      <td><code>.sdds-spacing-layout-64</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);\"></span></td>\n    </tr>\n    <tr>\n      <td>72px</td>\n      <td><code>$spacing-layout-72</code></td>\n      <td><code>.sdds-spacing-layout-72</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);\"></span></td>\n    </tr>\n    <tr>\n      <td>96px</td>\n      <td><code>$spacing-layout-96</code></td>\n      <td><code>.sdds-spacing-layout-96</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);\"></span></td>\n    </tr>\n    <tr>\n      <td>128px</td>\n      <td><code>$spacing-layout-128</code></td>\n      <td><code>.sdds-spacing-layout-128</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);\"></span></td>\n    </tr>\n    <tr>\n      <td>160px</td>\n      <td><code>$spacing-layout-160</code></td>\n      <td><code>.sdds-spacing-layout-160</code></td>\n      <td><span class=\"demo-wrapper\" style=\"width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);\"></span></td>\n    </tr>\n  </table>\n  `,\n  );\n\nexport const SpacingLayout = Template.bind({});\nSpacingLayout.args = {};\n"]}

package/dist/collection/foundations-stories/typography/typography-body.stories.js

@@ -1,17 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-body-01'>
-  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.
-  </p>
-  <p class='sdds-body-02'>
-  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.
-  </p>
-  `);
-export const Body = Template.bind({});
-//# sourceMappingURL=typography-body.stories.js.map

package/dist/collection/foundations-stories/typography/typography-body.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-body.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-body.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;GAOD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-body-01'>\n  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.\n  </p>\n  <p class='sdds-body-02'>\n  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.\n  </p>\n  `,\n  );\n\nexport const Body = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-detail.stories.js

@@ -1,18 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>
-  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>
-  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>
-  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>
-  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>
-  `);
-export const Detail = Template.bind({});
-//# sourceMappingURL=typography-detail.stories.js.map

package/dist/collection/foundations-stories/typography/typography-detail.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-detail.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-detail.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;GAQD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>\n  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>\n  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>\n  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>\n  <p class='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>\n  <p class='sdds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>\n  `,\n  );\n\nexport const Detail = Template.bind({});\n"]}

package/dist/collection/foundations-stories/typography/typography-headline.stories.js

@@ -1,40 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'The type of headline. Functional/Expressive.',
-      control: {
-        type: 'radio',
-      },
-      options: { Functional: 'functional', Expressive: 'expressive' },
-    },
-  },
-};
-const Template = ({ type }) => formatHtmlPreview(`
-    <style>
-    /* Demo code for presentation purposes */
-    .demo-wrapper h1 {
-        margin: 0;
-    }
-    </style>
-
-    <div class="demo-wrapper">
-        <h1 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-01">Headline</h1>
-        <h2 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-02">Headline</h2>
-        <h3 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-03">A headline for page layouts</h3>
-        <h4 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-04">A headline for page layouts</h4>
-        <h5 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-05">A sub headline, which is most commonly paired with body-01</h5>
-        <h6 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-06">A sub headline, which is most commonly paired with body-02</h6>
-        <h7 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-07">A sub headline, which is most commonly paired with detail-02 </h7>
-    </div>
-  `);
-export const Headlines = Template.bind({});
-Headlines.args = {
-  type: 'functional',
-};
-//# sourceMappingURL=typography-headline.stories.js.map

package/dist/collection/foundations-stories/typography/typography-headline.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-headline.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-headline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8CAA8C;MAC3D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE;KAChE;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAC5B,iBAAiB,CACf;;;;;;;;;0BASsB,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BACvC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;0BAEvD,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;0BAEE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EACvC;;GAEL,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,IAAI,EAAE,YAAY;CACnB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'The type of headline. Functional/Expressive.',\n      control: {\n        type: 'radio',\n      },\n      options: { Functional: 'functional', Expressive: 'expressive' },\n    },\n  },\n};\n\nconst Template = ({ type }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Demo code for presentation purposes */\n    .demo-wrapper h1 {\n        margin: 0;\n    }\n    </style>\n\n    <div class=\"demo-wrapper\">\n        <h1 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-01\">Headline</h1>\n        <h2 class=\"sdds-${type === 'expressive' ? `${type}-` : ''}headline-02\">Headline</h2>\n        <h3 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-03\">A headline for page layouts</h3>\n        <h4 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-04\">A headline for page layouts</h4>\n        <h5 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-05\">A sub headline, which is most commonly paired with body-01</h5>\n        <h6 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-06\">A sub headline, which is most commonly paired with body-02</h6>\n        <h7 class=\"sdds-${\n          type === 'expressive' ? `${type}-` : ''\n        }headline-07\">A sub headline, which is most commonly paired with detail-02 </h7>\n    </div>\n  `,\n  );\n\nexport const Headlines = Template.bind({});\nHeadlines.args = {\n  type: 'functional',\n};\n"]}

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js

@@ -1,13 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>
-        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>
-  `);
-export const Paragraph = Template.bind({});
-//# sourceMappingURL=typography-paragraph.stories.js.map

package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typography-paragraph.stories.js","sourceRoot":"","sources":["../../../src/foundations-stories/typography/typography-paragraph.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;GAGD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Foundations/Typography',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>\n        <p class='sdds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>\n  `,\n  );\n\nexport const Paragraph = Template.bind({});\n"]}

package/dist/collection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/utils/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAG9C,MAAM,eAAe,GAAY;EAC/B,eAAe,EAAE,KAAK;EACtB,yBAAyB,EAAE,QAAQ;EACnC,UAAU,EAAE,GAAG;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,EAAE,CAC3C,QAAQ,CAAC,MAAM,CAAC,OAAO,kBACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,IAC/B,eAAe,EAClB,CAAC;AAEL,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EACpE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["import prettier from 'prettier/standalone';\nimport parserBabel from 'prettier/parser-babel';\nimport parserHtml from 'prettier/parser-html';\nimport { Options } from 'prettier';\n\nconst prettierOptions: Options = {\n  bracketSameLine: false,\n  htmlWhitespaceSensitivity: 'ignore',\n  printWidth: 100,\n};\n\nexport const formatHtmlPreview = (htmlStr) =>\n  prettier.format(htmlStr, {\n    parser: 'html',\n    plugins: [parserBabel, parserHtml],\n    ...prettierOptions,\n  });\n\nexport function demoFormat(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}

package/dist/components/dropdown-option.js.map

@@ -1 +0,0 @@
-{"file":"dropdown-option.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-option&encapsulation=shadow","./src/components/dropdown/dropdown-option/dropdown-option.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  /** @internal Fires on click on one of the dropdown items */\n  @Event({\n    eventName: 'internalSddsSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSelect: EventEmitter<{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.handleClick({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  handleClick(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.internalSddsSelect.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          if (this.isMultiSelectOption) {\n            event.stopPropagation();\n          }\n          return this.handleClick({\n            value: this.value,\n            label: this.host.innerText,\n            parent: event.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/dropdown.js.map

@@ -1 +0,0 @@
-{"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Host,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  textInput?: HTMLInputElement;\n\n  /** Set the variant of the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placeholder text for dropdown with no selectedLabel item */\n  @Prop() placeholder: string;\n\n  /** Add the value of the option as string to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Set to true for disabled states */\n  @Prop() disabled: boolean = false;\n\n  /** `Controls type of dropdown. */\n  @Prop() type: 'default' | 'multiselect' | 'filter' = 'default';\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Controls position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Label text for label inside & outside */\n  @Prop() label: string;\n\n  /** Support `error` state */\n  @Prop() state: boolean = false;\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Direction that the dropdown will open. Default is auto. */\n  @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  @State() optionValues: Array<any> = [];\n\n  @State() optionLabels: Array<any> = [];\n\n  @State() open: boolean = false;\n\n  @State() node: HTMLElement;\n\n  @State() selectedLabel: string = '';\n\n  @State() selectedValue: string = '';\n\n  @State() selectedValuesArray: Array<any> = [];\n\n  @State() selectedLabelsArray: Array<any> = [];\n\n  @State() dropdownUniqueClass: string = '';\n\n  @State() openUpwards: boolean = false;\n\n  @State() dropdownMenuHeight: number = 0;\n\n  @State() dropdownMenuSelector: HTMLElement;\n\n  @State() listItemIndex: any = -1;\n\n  @State() listItemArray: any;\n\n  @State() listItemObject: any;\n\n  @Element() host: HTMLElement;\n\n  componentWillLoad() {\n    // If default option is set, update the default selectedLabel value\n    // this.host.children is a HTMLCollection type, cannot use forEach\n    this.listItemObject = this.host.children;\n    this.listItemArray = Array.from(this.listItemObject);\n    this.listItemArray.map((listItem) => {\n      this.optionValues.push(listItem.value);\n      this.optionLabels.push(listItem.innerText.trim());\n    });\n    this.setOptionFromOutside(this.defaultOption);\n\n    if (this.size === 'small') {\n      this.size = 'sm';\n      console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n    }\n    if (this.size === 'medium') {\n      this.size = 'md';\n      console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n    }\n    if (this.size === 'large') {\n      this.size = 'lg';\n      console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n    }\n  }\n\n  setOptionFromOutside(optionValue) {\n    if (optionValue) {\n      this.deselectAll();\n      // TODO\n      // eslint-disable-next-line no-param-reassign\n      optionValue = optionValue.split(',');\n      for (let i = 0; i < this.host.children.length; i++) {\n        // Todo - specify type\n        const el: any = this.host.children[i];\n        if (optionValue.includes(el.value.trim())) {\n          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n          this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n          this.selectedLabel = el.textContent;\n          this.selectedValue = el.value;\n          el.setAttribute('selectedLabel', 'true');\n          el.setAttribute('selected', 'true');\n        } else {\n          el.setAttribute('selectedLabel', 'false');\n          el.setAttribute('selected', 'false');\n        }\n      }\n    }\n  }\n\n  @Watch('selectedOption')\n  changeSelectedOption() {\n    if (this.selectedValuesArray.includes(this.selectedOption)) {\n      this.resetOption();\n    }\n    this.setOptionFromOutside(this.selectedOption);\n    this.host.setAttribute('selected-option', '');\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(ev) {\n    // To stop bubble click\n    ev.stopPropagation();\n    const target = ev ? ev.composedPath()[0] : window.event.target[0];\n    if (this.node !== undefined && this.node.contains(target)) {\n      if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n        this.textInput.focus();\n      }\n    } else {\n      this.tabbingLabelReset();\n      this.open = false;\n    }\n  }\n\n  @Listen('keydown')\n  keyListener(ev: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (ev.key) {\n        case 'ArrowDown':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex < this.listItemArray.length - 1) {\n              this.listItemIndex++;\n            } else {\n              this.listItemIndex = 0;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n        case 'ArrowUp':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex > 0) {\n              this.listItemIndex--;\n            } else {\n              this.listItemIndex = this.listItemArray.length - 1;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n\n        case 'Tab':\n          this.open = false;\n          break;\n\n        case 'Escape':\n          this.open = false;\n          this.node.focus();\n          break;\n\n        default:\n          break;\n      }\n    }\n  }\n\n  handleClick() {\n    this.open = this.open === false;\n    if (this.openDirection === 'auto') {\n      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n      const distanceToBottom = this.host.getBoundingClientRect().top;\n      const viewportHeight = window.innerHeight;\n      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n      // Additional 57px is added as compensation for dropdown element own input/button height\n      // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n    } else {\n      this.openUpwards = this.openDirection === 'up';\n    }\n  }\n\n  tabbingLabelReset() {\n    if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n      if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n        this.textInput.value = '';\n        this.inputSearch.emit('');\n      }\n      if (this.selectedLabel !== this.textInput.value) {\n        this.textInput.value = this.selectedLabel;\n      }\n    }\n  }\n\n  @Listen('internalSddsSelect')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.open = this.type === 'multiselect';\n    if (this.type !== 'multiselect') {\n      this.selectedLabel = event.detail.label;\n      this.selectedValue = event.detail.value;\n      this.tabbingLabelReset();\n    } else {\n      if (this.selectedValuesArray.includes(event.detail.value)) {\n        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n        this.selectedValuesArray = this.selectedValuesArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n        this.selectedLabelsArray = this.selectedLabelsArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n      } else {\n        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n      }\n    }\n  }\n\n  @Event({\n    eventName: 'inputSearch',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  inputSearch: EventEmitter<any>;\n\n  handleSearch(ev) {\n    const searchTerm = ev.target.value;\n    this.inputSearch.emit(searchTerm);\n    this.open = true;\n  }\n\n  deselectAll() {\n    this.selectedLabel = '';\n    this.selectedValue = '';\n    this.selectedLabelsArray = [];\n    this.selectedValuesArray = [];\n    this.listItemArray = this.listItemArray.map((optionItem) => ({\n      ...optionItem,\n      selected: false,\n    }));\n  }\n\n  @Method() async resetOption() {\n    this.deselectAll();\n    this.open = false;\n\n    if (this.defaultOption) {\n      this.setOptionFromOutside(this.defaultOption);\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`\n        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n        ${this.inline ? 'sdds-dropdown-inline' : ''}\n        ${\n          this.selectedLabel.length > 0 || this.selectedLabel === ''\n            ? 'sdds-dropdown--selected'\n            : ''\n        }\n        ${this.state ? 'sdds-dropdown--error' : ''}\n        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n        ${\n          this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n            ? 'sdds-dropdown--label-inside-position'\n            : ''\n        }\n       `}\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n        multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n      >\n        <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n          {this.labelPosition === 'outside' && this.label.length > 0 ? (\n            <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n          ) : (\n            ''\n          )}\n          <button\n            part={this.disabled ? 'dropdown-filter-disabled' : ''}\n            disabled={this.disabled}\n            tabindex={this.disabled ? '-1' : null}\n            class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n              this.selectedValue !== '' || this.selectedLabelsArray.length > 0\n                ? 'sdds-dropdown-toggle--selected'\n                : ''\n            }\n                ${\n                  this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n                    ? `sdds-dropdown-toggle-label-inside-${this.size}`\n                    : `sdds-dropdown-toggle-${this.size}`\n                }`}\n            type=\"button\"\n            onClick={() => this.handleClick()}\n            ref={(node) => (this.node = node)}\n          >\n            <span class=\"sdds-dropdown-label\">\n              {this.type === 'filter' ? (\n                <input\n                  part={this.disabled ? 'dropdown-filter-disabled' : ''}\n                  disabled={this.disabled}\n                  tabindex=\"-1\"\n                  ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n                  class=\"sdds-dropdown-filter\"\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                  value={this.selectedLabel}\n                  onInput={(event) => this.handleSearch(event)}\n                  autoComplete=\"off\"\n                />\n              ) : (\n                <span\n                  class={{\n                    'sdds-dropdown-label-container': true,\n                    'sdds-dropdown-label-container--label-inside':\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),\n                  }}\n                >\n                  {this.size !== 'sm' &&\n                    (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&\n                    this.labelPosition === 'inside' &&\n                    this.label.length > 0 && (\n                      <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n                    )}\n                  <span\n                    class={`sdds-dropdown-label-main ${\n                      (this.selectedLabel.length === 0 ||\n                        (this.labelPosition === 'inside' && this.label.length < 0)) &&\n                      'sdds-dropdown-placeholder'\n                    }`}\n                  >\n                    {this.selectedLabel.length > 0 &&\n                      this.type !== 'multiselect' &&\n                      this.selectedLabel}\n\n                    {this.type === 'multiselect' && (\n                      <span class=\"sdds-dropdown-multiselect-result\">\n                        {this.labelPosition !== 'inside' &&\n                          this.selectedLabelsArray.toString().length < 1 &&\n                          this.placeholder}\n                        {this.selectedLabelsArray.toString().length > 0 &&\n                          this.selectedLabelsArray.toString().split(',').join(', ')}\n                      </span>\n                    )}\n                    {!this.selectedLabel &&\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      this.label}\n\n                    {!this.selectedLabel &&\n                      this.type !== 'multiselect' &&\n                      this.labelPosition !== 'inside' &&\n                      this.placeholder}\n\n                    {!this.selectedLabel &&\n                      this.size === 'sm' &&\n                      this.labelPosition === 'inside' &&\n                      this.placeholder}\n                  </span>\n                </span>\n              )}\n            </span>\n            <svg\n              class=\"sdds-dropdown-arrow\"\n              width=\"12\"\n              height=\"7\"\n              viewBox=\"0 0 12 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1L6 6L11 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n          <span\n            class=\"sdds-dropdown-menu\"\n            // Need to have reference in order to calc height and distance from bottom\n            ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n          >\n            <slot />\n          </span>\n        </span>\n        <p class=\"sdds-dropdown-helper\">\n          <svg\n            class=\"sdds-dropdown-error-icon\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <span>{this.helper}</span>\n        </p>\n      </Host>\n    );\n  }\n}\n"],"version":3}