@scania/tegel 0.0.52 → 0.0.61

package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;OAYG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-link/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-link href=\"#\">\n          <div slot=\"label\">Page 1</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">\n          <div slot=\"label\">Page 2</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>\n          <div slot=\"label\">Page 3</div>\n        </sdds-breadcrumb-link>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;OAYG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-item/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 1</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 2</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item current>\n          <a href=\"#\">Page 3</a>\n        </sdds-breadcrumb-item>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/button/button.css

@@ -243,7 +243,7 @@
   box-sizing: border-box;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   border-radius: 4px;
   border: none;
@@ -582,7 +582,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button) ::slotted([slot=icon]) {
@@ -610,7 +610,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button:not([only-icon])) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {

package/dist/collection/components/card/sdds-card.css

@@ -63,6 +63,7 @@
 .card slot[name=card-bottom]::slotted(*) {
   display: flex;
   padding: 16px;
+  color: var(--sdds-card-icon-color);
 }
 
 button {

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

@@ -259,7 +259,7 @@ export class SddsCard {
         "method": "sddsClick",
         "name": "sddsClick",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],

package/dist/collection/components/card/sdds-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** ID for the card, must be unique.\n   *\n   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** ID for the card, must be unique.\n   *\n   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/{chips/chips.stories.js → chip/chip.stories.js}

@@ -124,4 +124,4 @@ const Template = ({ active, size, placeholderText, icon, iconPosition, iconType
     `);
 };
 export const Native = Template.bind({});
-//# sourceMappingURL=chips.stories.js.map
+//# sourceMappingURL=chip.stories.js.map

package/dist/collection/components/chip/chip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Chips',\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=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    active: {\n      name: 'Active',\n      description: 'Toggles if the chip is active or not.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    placeholderText: {\n      name: 'Placeholder',\n      description: 'Sets custom chip text.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the chip.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon position',\n      description: 'Sets the placement of the icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Icon left', 'Icon right'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Icon right' },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n  },\n  args: {\n    active: false,\n    size: 'Large',\n    placeholderText: 'Chip text',\n    icon: false,\n    iconPosition: 'Icon right',\n    iconType: 'Native',\n  },\n};\n\nconst Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {\n  const activeValue = active === true ? 'sdds-chip-active' : '';\n  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';\n  const iconPositionLookup = {\n    'Icon left': 'sdds-chip-icon-left',\n    'Icon right': 'sdds-chip-icon-right',\n  };\n\n  // TODO - Add dark theme to story\n  const iconSvg = `\n    ${\n      iconType === 'Native'\n        ? '<i class=\" sdds-icon notification\"></i>'\n        : '<sdds-icon name=\"notification\" size=\"16px\"></sdds-icon>'\n    }\n    `;\n\n  return formatHtmlPreview(`\n  ${\n    iconType === 'Native'\n      ? `<style>\n/* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n\n          </style>`\n      : ''\n  }\n    <!-- Below is a chip button implementation. Please use the proper html element \n    depending on usage (button, checkbox, radio, etc) -->\n    <button class=\"sdds-chip ${\n      icon ? iconPositionLookup[iconPosition] : ''\n    } ${activeValue} ${sizeValue}\">\n      ${\n        icon\n          ? `\n      <div class=\"sdds-chip-icon\">\n        ${iconSvg}\n      </div>\n      `\n          : ''\n      }<span class=\"sdds-chip-text\">${placeholderText}</span>\n    </button>\n    `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/chip/sdds-chip.css

@@ -0,0 +1,58 @@
+/* Styling for slotted content */
+::slotted(*) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:host([size=sm]) ::slotted(*) {
+  gap: 6px;
+}
+
+:host([size=lg]) ::slotted(*) {
+  gap: 8px;
+}
+
+/* Component styling */
+.component .sdds-chip-component {
+  display: inline-flex;
+}
+.component .sdds-chip-component label {
+  background-color: var(--sdds-chips-background);
+  color: var(--sdds-chips-color);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.component .sdds-chip-component label:hover {
+  background-color: var(--sdds-chips-background-hover);
+}
+.component .sdds-chip-component.lg label {
+  height: 32px;
+  padding: 1px 16px 0;
+  gap: 8px;
+}
+.component .sdds-chip-component.sm label {
+  height: 24px;
+  padding: 1px 12px 0;
+  gap: 6px;
+}
+.component .sdds-chip-component input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.component .sdds-chip-component input:focus-visible + label {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.component .sdds-chip-component input:checked + label {
+  background-color: var(--sdds-chips-background-active);
+  color: var(--sdds-chips-color-active);
+}
+.component .sdds-chip-component input:checked + label:hover {
+  background-color: var(--sdds-chips-background-active-hover);
+}

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

@@ -0,0 +1,195 @@
+import { Host, h } from '@stencil/core';
+export class SddsChip {
+  constructor() {
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        chipId: this.chipId,
+        value: this.value,
+      });
+    };
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        chipId: this.chipId,
+      });
+    };
+    this.type = 'button';
+    this.size = 'lg';
+    this.chipId = crypto.randomUUID();
+    this.checked = false;
+    this.name = undefined;
+    this.value = undefined;
+  }
+  renderInputAttributes() {
+    if (this.type !== 'button') {
+      return {
+        value: this.value,
+        checked: this.checked,
+        name: this.name,
+        onChange: () => this.handleChange(),
+      };
+    }
+    return {
+      onClick: () => this.handleClick(),
+    };
+  }
+  render() {
+    const inputAttributes = this.renderInputAttributes();
+    return (h(Host, null, h("div", { class: "component" }, h("div", { class: `sdds-chip-component ${this.size}` }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, h("slot", { name: "label" }))))));
+  }
+  static get is() { return "sdds-chip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'radio' | 'checkbox'",
+          "resolved": "\"button\" | \"checkbox\" | \"radio\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of chip, depends on usage"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the chip component"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "chipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time."
+        },
+        "attribute": "chip-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Setting it to true set component state to checked. Valid only for type checkbox and radio."
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of input. Valid only for type checkbox and radio."
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. 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."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n    value: string;\n  }",
+          "resolved": "{ chipId: string; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsClick",
+        "name": "sddsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique chip identifier when chip is clicked. Valid only for type button. 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."
+        },
+        "complexType": {
+          "original": "{\n    chipId: string;\n  }",
+          "resolved": "{ chipId: string; }",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=sdds-chip.js.map

package/dist/collection/components/chip/sdds-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-chip.js","sourceRoot":"","sources":["../../../src/components/chip/sdds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,QAAQ;;IAkCX,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAaM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;IACL,CAAC,CAAC;gBAtD8C,QAAQ;gBAG5B,IAAI;kBAMP,MAAM,CAAC,UAAU,EAAE;mBAGjB,KAAK;;;;EA4CxB,qBAAqB;IAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;OACpC,CAAC;KACH;IACD,OAAO;MACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;KAClC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAErD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,WAAW;QACpB,WAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,EAAE;UAC5C,2BAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAM,eAAe,EAAU;UACtE,aAAO,OAAO,EAAE,IAAI,CAAC,MAAM;YACzB,YAAM,IAAI,EAAC,OAAO,GAAG,CACf,CACJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-chip',\n  styleUrl: 'sdds-chip.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsChip {\n  /** Type of chip, depends on usage */\n  @Prop() type: 'button' | 'radio' | 'checkbox' = 'button';\n\n  /** Size of the chip component */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** ID used for internal chip functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time.\n   */\n  @Prop() chipId: string = crypto.randomUUID();\n\n  /** Setting it to true set component state to checked. Valid only for type checkbox and radio. */\n  @Prop() checked: boolean = false;\n\n  /** Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio. */\n  @Prop() name: string;\n\n  /** Value of input. Valid only for type checkbox and radio. */\n  @Prop() value: string;\n\n  /** Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. 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    chipId: string;\n    value: string;\n  }>;\n\n  private handleChange = () => {\n    this.sddsChange.emit({\n      chipId: this.chipId,\n      value: this.value,\n    });\n  };\n\n  /** Sends unique chip identifier when chip is clicked. Valid only for type button. 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: 'sddsClick',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    chipId: string;\n  }>;\n\n  private handleClick = () => {\n    this.sddsClick.emit({\n      chipId: this.chipId,\n    });\n  };\n\n  private renderInputAttributes() {\n    if (this.type !== 'button') {\n      return {\n        value: this.value,\n        checked: this.checked,\n        name: this.name,\n        onChange: () => this.handleChange(),\n      };\n    }\n    return {\n      onClick: () => this.handleClick(),\n    };\n  }\n\n  render() {\n    const inputAttributes = this.renderInputAttributes();\n\n    return (\n      <Host>\n        <div class=\"component\">\n          <div class={`sdds-chip-component ${this.size}`}>\n            <input type={this.type} id={this.chipId} {...inputAttributes}></input>\n            <label htmlFor={this.chipId}>\n              <slot name=\"label\" />\n            </label>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,230 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    inputType: {
+      name: 'Type',
+      description: 'Sets the chip type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Radio', 'Checkbox'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the chip size.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Adds an icon to the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconPosition: {
+      name: 'Icon Position',
+      description: 'Sets the icon position.',
+      if: { arg: 'icon', eq: true },
+      control: {
+        type: 'radio',
+      },
+      options: ['Prefix', 'Suffix'],
+      table: {
+        defaultValue: { summary: 'Prefix' },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        // TODO: Remove line below after we make design for disabled state, it hides control
+        disable: true,
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    inputType: 'Button',
+    size: 'Large',
+    label: 'Label',
+    icon: false,
+    iconPosition: 'Prefix',
+    disabled: false,
+  },
+};
+const Template = ({ inputType, size, label, icon, iconPosition }) => {
+  const sizeLookUp = {
+    Large: 'lg',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+  ${inputType === 'Button'
+    ? `<sdds-chip type="button" size="${sizeLookUp[size]}">
+            <span slot="label">
+                ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+                ${label}
+                ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+            </span>
+        </sdds-chip>
+
+        <!-- Script tag for demo purposes -->
+        <script>
+          document.addEventListener('sddsClick', (event)=>{
+          console.log(event)
+          })
+        </script>`
+    : ''}
+  ${inputType === 'Checkbox'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+  ${inputType === 'Radio'
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 1
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 2
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+      <sdds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
+        <span slot="label">
+          ${icon && iconPosition === 'Prefix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+          ${label} 3
+          ${icon && iconPosition === 'Suffix'
+      ? '<sdds-icon name="cross" size="16px"></sdds-icon>'
+      : ''}
+        </span>
+      </sdds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('sddsChange', (event)=>{
+          console.log(event)
+      })
+    </script>`
+    : ''}
+
+
+  `);
+};
+export const Chip = Template.bind({});
+//# sourceMappingURL=sdds-chip.stories.js.map

package/dist/collection/components/chip/sdds-chip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/sdds-chip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components',\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%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    inputType: {\n      name: 'Type',\n      description: 'Sets the chip type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Radio', 'Checkbox'],\n      table: {\n        defaultValue: { summary: 'button' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the component.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon Position',\n      description: 'Sets the icon position.',\n      if: { arg: 'icon', eq: true },\n      control: {\n        type: 'radio',\n      },\n      options: ['Prefix', 'Suffix'],\n      table: {\n        defaultValue: { summary: 'Prefix' },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        // TODO: Remove line below after we make design for disabled state, it hides control\n        disable: true,\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    inputType: 'Button',\n    size: 'Large',\n    label: 'Label',\n    icon: false,\n    iconPosition: 'Prefix',\n    disabled: false,\n  },\n};\n\nconst Template = ({ inputType, size, label, icon, iconPosition }) => {\n  const sizeLookUp = {\n    Large: 'lg',\n    Small: 'sm',\n  };\n\n  return formatHtmlPreview(`\n  ${\n    inputType === 'Button'\n      ? `<sdds-chip type=\"button\" size=\"${sizeLookUp[size]}\">\n            <span slot=\"label\">\n                ${\n                  icon && iconPosition === 'Prefix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n                ${label}\n                ${\n                  icon && iconPosition === 'Suffix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n            </span>\n        </sdds-chip>\n\n        <!-- Script tag for demo purposes -->\n        <script>\n          document.addEventListener('sddsClick', (event)=>{\n          console.log(event)\n          })\n        </script>`\n      : ''\n  }\n  ${\n    inputType === 'Checkbox'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" checked value=\"checkbox-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n  ${\n    inputType === 'Radio'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" checked value=\"radio-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n\n\n  `);\n};\n\nexport const Chip = Template.bind({});\n"]}