@scania/tegel 0.0.61 → 0.0.72

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

@@ -1,126 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Popover Menu',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    menuPosition: {
-      name: 'Menu position',
-      description: 'Sets the position of the popover menu.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-        'Auto',
-      ],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-  },
-  args: {
-    menuPosition: 'Auto',
-  },
-};
-const Template = ({ menuPosition }) => {
-  const menuPosLookup = {
-    'Bottom': 'bottom',
-    'Bottom start': 'bottom-start',
-    'Bottom end': 'bottom-end',
-    'Top': 'top',
-    'Top start': 'top-start',
-    'Top end': 'top-end',
-    'Left': 'left',
-    'Left star': 'left-start',
-    'Left end': 'left-end',
-    'Right': 'right',
-    'Right start': 'right-start',
-    'Right end': 'right-end',
-    'Auto': 'auto',
-  };
-  return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <sdds-popover-menu
-      placement="${menuPosLookup[menuPosition]}"
-      id="my-popover-menu">
-      <ul class="sdds-popover-menu-wrapper">
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 1
-          </a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 2
-          </a>
-        </li>
-        <li class="divider"></li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            <i>
-              <sdds-icon name="save" size="16px"></sdds-icon>
-            </i>
-            Menu item 4
-          </a>
-        </li>
-      </ul>
-    </sdds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="sdds-u-mr2">Click icon for popover menu</span>
-      
-      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
-        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
-      </sdds-button>
-    </div>
-
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
-    `);
-};
-export const WithIcons = Template.bind({});
-//# sourceMappingURL=popover-menu-icons.stories.js.map

package/dist/collection/components/popover-menu/popover-menu-icons.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu-icons.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu-icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;mBAWe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Popover Menu',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    menuPosition: {\n      name: 'Menu position',\n      description: 'Sets the position of the popover menu.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n        'Auto',\n      ],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n  },\n  args: {\n    menuPosition: 'Auto',\n  },\n};\n\nconst Template = ({ menuPosition }) => {\n  const menuPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n    'Auto': 'auto',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n      /* demo-wrapper styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n      }\n    </style>\n\n    <sdds-popover-menu\n      placement=\"${menuPosLookup[menuPosition]}\"\n      id=\"my-popover-menu\">\n      <ul class=\"sdds-popover-menu-wrapper\">\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 1\n          </a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 2\n          </a>\n        </li>\n        <li class=\"divider\"></li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 4\n          </a>\n        </li>\n      </ul>\n    </sdds-popover-menu>\n\n    <!-- demo-wrapper code below is for demonstration purposes only -->\n    <div class=\"demo-wrapper\">\n      <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n      \n      <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n        <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n      </sdds-button>\n    </div>\n\n    <script>\n      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n    </script>\n    `,\n  );\n};\n\nexport const WithIcons = Template.bind({});"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,OAAO,WAAW;;oBAIK,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE;MACvE,QAAQ,EAAE,OAAO;MACjB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,QAAQ,EAAE,CAAC;OACZ;WAAM;QACL,QAAQ,EAAE,CAAC;OACZ;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACxC,iEAAiE;MACjE,yBAAyB;MACzB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;MAC3E,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-menu',\n  styleUrl: 'popover-menu.scss',\n  shadow: true,\n})\nexport class PopoverMenu {\n  @Element() popoverMenuElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Menu should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Menu */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showMenu = () => {\n      this.show = true;\n    };\n\n    const hideMenu = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideMenu();\n      } else {\n        showMenu();\n      }\n    });\n\n    this.popoverMenuElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverMenuElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,119 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Popover Menu',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    menuPosition: {
-      name: 'Menu position',
-      description: 'Sets the position of the popover menu.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'Bottom',
-        'Bottom start',
-        'Bottom end',
-        'Top',
-        'Top start',
-        'Top end',
-        'Left',
-        'Left-start',
-        'Left end',
-        'Right',
-        'Right start',
-        'Right end',
-        'Auto',
-      ],
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-    },
-  },
-  args: {
-    menuPosition: 'Auto',
-  },
-};
-const Template = ({ menuPosition }) => {
-  const menuPosLookup = {
-    'Bottom': 'bottom',
-    'Bottom start': 'bottom-start',
-    'Bottom end': 'bottom-end',
-    'Top': 'top',
-    'Top start': 'top-start',
-    'Top end': 'top-end',
-    'Left': 'left',
-    'Left star': 'left-start',
-    'Left end': 'left-end',
-    'Right': 'right',
-    'Right start': 'right-start',
-    'Right end': 'right-end',
-    'Auto': 'auto',
-  };
-  return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <sdds-popover-menu
-      id="my-popover-menu"
-      placement="${menuPosLookup[menuPosition]}">
-      <ul class="sdds-popover-menu-wrapper">
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 1</a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
-            Menu item 2
-          </a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 3</a>
-        </li>
-        <li class="divider"></li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 4</a>
-        </li>
-        <li>
-          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Menu item 5</a>
-        </li>
-      </ul>
-    </sdds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="sdds-u-mr2">Click icon for popover menu</span>
-      
-      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
-        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
-      </sdds-button>
-    </div>
-
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
-    `);
-};
-export const Default = Template.bind({});
-//# sourceMappingURL=popover-menu.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"popover-menu.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;mBAYe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Popover Menu',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    menuPosition: {\n      name: 'Menu position',\n      description: 'Sets the position of the popover menu.',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n        'Auto',\n      ],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n  },\n  args: {\n    menuPosition: 'Auto',\n  },\n};\n\nconst Template = ({ menuPosition }) => {\n  const menuPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n    'Auto': 'auto',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n      /* demo-wrapper styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n      }\n    </style>\n\n    <sdds-popover-menu\n      id=\"my-popover-menu\"\n      placement=\"${menuPosLookup[menuPosition]}\">\n      <ul class=\"sdds-popover-menu-wrapper\">\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 1</a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            Menu item 2\n          </a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 3</a>\n        </li>\n        <li class=\"divider\"></li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 4</a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 5</a>\n        </li>\n      </ul>\n    </sdds-popover-menu>\n\n    <!-- demo-wrapper code below is for demonstration purposes only -->\n    <div class=\"demo-wrapper\">\n      <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n      \n      <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n        <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n      </sdds-button>\n    </div>\n\n    <script>\n      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n    </script>\n    `,\n  );\n};\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/radio-button/radio-button-component.stories.js

@@ -1,91 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Radio Button',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label for the radio button.',
-      controls: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the radio button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-  },
-};
-const Template = ({ label, disabled }) => formatHtmlPreview(`
-  <style>
-  .demo-fieldset-reset { 
-    border: 0;
-    margin: 0;
-    min-width: 0;
-    padding: 0; 
-  }
-</style>
-
-  <fieldset class="demo-fieldset-reset">
-  <sdds-radio-button 
-    name="rb-example"
-    value="option1"
-    radio-id="option-1"
-    required=false
-    ${disabled ? 'disabled' : ''}
-    checked="true" 
-  >
-    <div slot="label">
-      ${label} 1
-    </div>
-  </sdds-radio-button>
-
-  <sdds-radio-button
-    name="rb-example"
-    value="option2"
-    radio-id="option-2"
-    required=false
-    ${disabled ? 'disabled' : ''} 
-  >
-    <div slot="label">
-      ${label} 2
-    </div>
-  </sdds-radio-button>
-    
-  </fieldset>
-
-  <!-- Script tag with eventlistener for demo purposes. -->
-  <script>
-  document.addEventListener('sddsChange', (event) => {
-    console.log(event)
-  })
-  </script>
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=radio-button-component.stories.js.map

package/dist/collection/components/radio-button/radio-button-component.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CACvC,iBAAiB,CAAC;;;;;;;;;;;;;;;;MAgBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;QAIxB,KAAK;;;;;;;;;MASP,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;QAGxB,KAAK;;;;;;;;;;;;GAYV,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label for the radio button.',\n      controls: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, disabled }) =>\n  formatHtmlPreview(`\n  <style>\n  .demo-fieldset-reset { \n    border: 0;\n    margin: 0;\n    min-width: 0;\n    padding: 0; \n  }\n</style>\n\n  <fieldset class=\"demo-fieldset-reset\">\n  <sdds-radio-button \n    name=\"rb-example\"\n    value=\"option1\"\n    radio-id=\"option-1\"\n    required=false\n    ${disabled ? 'disabled' : ''}\n    checked=\"true\" \n  >\n    <div slot=\"label\">\n      ${label} 1\n    </div>\n  </sdds-radio-button>\n\n  <sdds-radio-button\n    name=\"rb-example\"\n    value=\"option2\"\n    radio-id=\"option-2\"\n    required=false\n    ${disabled ? 'disabled' : ''} \n  >\n    <div slot=\"label\">\n      ${label} 2\n    </div>\n  </sdds-radio-button>\n    \n  </fieldset>\n\n  <!-- Script tag with eventlistener for demo purposes. -->\n  <script>\n  document.addEventListener('sddsChange', (event) => {\n    console.log(event)\n  })\n  </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/radio-button/radio-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;IAyCtB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;;mBA9BwB,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAuBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;QAC1B,8DAA8D;QAC9D,wCAAwC;QACxC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GACnC;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n\n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n\n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  handleChange = () => {\n    this.sddsChange.emit({\n      radioId: this.radioId,\n      value: this.value,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input\n          class=\"sdds-form-input\"\n          type=\"radio\"\n          name={this.name}\n          id={this.radioId}\n          value={this.value}\n          checked={this.checked}\n          aria-checked={this.checked}\n          // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n          // aria-labelledby={this.ariaLabelledBy}\n          // aria-describedby={this.host.getAttribute('aria-describedby')}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={() => this.handleChange()}\n        />\n        <label htmlFor={this.radioId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -1,72 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Radio Button',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label for the radio button.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the radio button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-  },
-};
-const Template = ({ label, disabled }) => formatHtmlPreview(`
-  <style>
-    .demo-fieldset-reset { 
-      border: 0;
-      margin: 0;
-      min-width: 0;
-      padding: 0; 
-    }
-  </style>
-  <fieldset class="demo-fieldset-reset" ${disabled ? 'disabled' : ''}>
-    <div class="sdds-radio-button-group">
-      <div class="sdds-radio-item">
-        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked>
-        <label class="sdds-form-label" for="rb-option-1">
-          ${label} 1
-        </label>
-      </div>
-    </div>
-    <div class="sdds-radio-button-group">
-      <div class="sdds-radio-item">
-        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-2">
-        <label class="sdds-form-label" for="rb-option-2">
-          ${label} 2
-        </label>
-      </div>
-    </div>
-  </fieldset>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=radio-button.stories.js.map

package/dist/collection/components/radio-button/radio-button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CACvC,iBAAiB,CAAC;;;;;;;;;0CASsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAKxD,KAAK;;;;;;;;YAQL,KAAK;;;;;GAKd,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label for the radio button.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, disabled }) =>\n  formatHtmlPreview(`\n  <style>\n    .demo-fieldset-reset { \n      border: 0;\n      margin: 0;\n      min-width: 0;\n      padding: 0; \n    }\n  </style>\n  <fieldset class=\"demo-fieldset-reset\" ${disabled ? 'disabled' : ''}>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n        <label class=\"sdds-form-label\" for=\"rb-option-1\">\n          ${label} 1\n        </label>\n      </div>\n    </div>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n        <label class=\"sdds-form-label\" for=\"rb-option-2\">\n          ${label} 2\n        </label>\n      </div>\n    </div>\n  </fieldset>\n  `);\n\nexport const Native = Template.bind({});\n"]}