@scania/tegel 0.0.33 → 0.0.51

package/dist/collection/components/spinner/spinner.js

@@ -1,62 +1,62 @@
-import { h } from '@stencil/core';
-export class Spinner {
-  constructor() {
-    this.size = 'lg';
-    this.variant = 'standard';
-  }
-  render() {
-    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
-  }
-  static get is() { return "sdds-spinner"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["spinner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["spinner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of spinner"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'standard' | 'inverted'",
-          "resolved": "\"inverted\" | \"standard\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of spinner"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'standard'"
-      }
-    };
-  }
-}
-//# sourceMappingURL=spinner.js.map
+import { h } from '@stencil/core';
+export class Spinner {
+  constructor() {
+    this.size = 'lg';
+    this.variant = 'standard';
+  }
+  render() {
+    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
+  }
+  static get is() { return "sdds-spinner"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of spinner"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'inverted'",
+          "resolved": "\"inverted\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of spinner"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=spinner.js.map

package/dist/collection/components/spinner/spinner.stories.js

@@ -1,60 +1,66 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Spinner',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    variant: {
-      name: 'Variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Standard', 'Inverted'],
-      description: 'Variant of the spinner',
-    },
-    size: {
-      name: 'Size',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      description: 'Size of the spinner',
-    },
-  },
-  args: {
-    variant: 'Standard',
-    size: 'Large',
-  },
-};
-const Template = ({ size, variant }) => {
-  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
-  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Spinner',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    variant: {
+      name: 'Variant',
+      description: 'Switches the variant of the spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Standard', 'Inverted'],
+      table: {
+        defaultValue: { summary: 'standard' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    variant: 'Standard',
+    size: 'Large',
+  },
+};
+const Template = ({ size, variant }) => {
+  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
+  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
   return formatHtmlPreview(`
   <sdds-spinner 
     size="${sizeLookup[size]}"  
     variant="${variantLookup[variant]}">
   </sdds-spinner>
-  `);
-};
-export const Default = Template.bind({});
-Default.args = {};
-export const Inverted = Template.bind({});
-Inverted.args = {
-  variant: 'Inverted',
-};
-//# sourceMappingURL=spinner.stories.js.map
+  `);
+};
+export const Default = Template.bind({});
+Default.args = {};
+export const Inverted = Template.bind({});
+Inverted.args = {
+  variant: 'Inverted',
+};
+//# sourceMappingURL=spinner.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,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,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,WAAW,EAAE,wBAAwB;KACtC;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,WAAW,EAAE,qBAAqB;KACnC;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;EACrC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;EACzF,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;EAErE,OAAO,iBAAiB,CACtB;;YAEQ,UAAU,CAAC,IAAI,CAAC;eACb,aAAa,CAAC,OAAO,CAAC;;GAElC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,UAAU;CACpB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Spinner',\n  parameters: {\n    layout: 'centered', // Center the component horizontally and vertically in the Canvas\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=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    variant: {\n      name: 'Variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Standard', 'Inverted'],\n      description: 'Variant of the spinner',\n    },\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      description: 'Size of the spinner',\n    },\n  },\n  args: {\n    variant: 'Standard',\n    size: 'Large',\n  },\n};\n\nconst Template = ({ size, variant }) => {\n  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };\n  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };\n\n  return formatHtmlPreview(\n    `\n  <sdds-spinner \n    size=\"${sizeLookup[size]}\"  \n    variant=\"${variantLookup[variant]}\">\n  </sdds-spinner>\n  `,\n  );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n\nexport const Inverted = Template.bind({});\nInverted.args = {\n  variant: 'Inverted',\n};\n"]}
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,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,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;MACjC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;OACtC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,UAAU;IACnB,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;EACrC,MAAM,UAAU,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;EACzF,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;EAErE,OAAO,iBAAiB,CACtB;;YAEQ,UAAU,CAAC,IAAI,CAAC;eACb,aAAa,CAAC,OAAO,CAAC;;GAElC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;EACd,OAAO,EAAE,UAAU;CACpB,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Spinner',\n  parameters: {\n    layout: 'centered', // Center the component horizontally and vertically in the Canvas\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=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    variant: {\n      name: 'Variant',\n      description: 'Switches the variant of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Standard', 'Inverted'],\n      table: {\n        defaultValue: { summary: 'standard' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the spinner.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n  },\n  args: {\n    variant: 'Standard',\n    size: 'Large',\n  },\n};\n\nconst Template = ({ size, variant }) => {\n  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };\n  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };\n\n  return formatHtmlPreview(\n    `\n  <sdds-spinner \n    size=\"${sizeLookup[size]}\"  \n    variant=\"${variantLookup[variant]}\">\n  </sdds-spinner>\n  `,\n  );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n\nexport const Inverted = Template.bind({});\nInverted.args = {\n  variant: 'Inverted',\n};\n"]}

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

@@ -0,0 +1,13 @@
+:host [role=list] {
+  display: flex;
+  justify-content: space-evenly;
+}
+:host [role=list].vertical {
+  height: 100%;
+  flex-direction: column;
+  justify-content: unset;
+  gap: 48px;
+}
+:host [role=list].vertical.sm {
+  gap: 36px;
+}

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

@@ -0,0 +1,126 @@
+import { Host, h } from '@stencil/core';
+export class SddsStepper {
+  constructor() {
+    this.direction = 'horizontal';
+    this.labelPosition = 'below';
+    this.size = 'lg';
+    this.hideLabels = false;
+    this.width = 0;
+  }
+  componentWillLoad() {
+    this.host.children[0].classList.add('first');
+    this.host.children[this.host.children.length - 1].classList.add('last');
+    if (this.direction === 'vertical') {
+      this.labelPosition = 'aside';
+    }
+  }
+  componentDidLoad() {
+    if (this.labelPosition === 'below') {
+      this.children = Array.from(this.host.children);
+      this.children.forEach((item) => {
+        if (item.offsetWidth > this.width) {
+          this.width = item.offsetWidth;
+        }
+      });
+      this.children.forEach((item) => item.setWidth(this.width));
+    }
+  }
+  render() {
+    return (h(Host, null, h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-stepper.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-stepper.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The direction the children are layed out."
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'horizontal'"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'aside' | 'below'",
+          "resolved": "\"aside\" | \"below\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text position, only available on direction:horizontal"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'below'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the component and it's children."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "hideLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the label for the child components if true."
+        },
+        "attribute": "hide-labels",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "width": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/sdds-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO5D,MAAM,OAAO,WAAW;;qBAEyB,YAAY;yBAGhB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;iBAEV,CAAC;;EAM1B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;MAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAsC,CAAC;MACpF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC7B,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;UACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/B;MACH,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC5D;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,+BAA+B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;QAExF,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** The direction the children are layed out. */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  @State() width: number = 0;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsStepperItemElement>;\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.direction === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  componentDidLoad() {\n    if (this.labelPosition === 'below') {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n      this.children.forEach((item) => {\n        if (item.offsetWidth > this.width) {\n          this.width = item.offsetWidth;\n        }\n      });\n      this.children.forEach((item) => item.setWidth(this.width));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ol\n          role=\"list\"\n          class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.css

@@ -0,0 +1,197 @@
+:host {
+  position: relative;
+}
+:host sdds-icon {
+  line-height: 1;
+}
+:host [role=listItem] {
+  display: flex;
+  justify-content: start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+:host [role=listItem].text-below {
+  flex-direction: column;
+}
+:host [role=listItem].lg {
+  padding: 0 20px;
+  font: var(--sdds-detail-01);
+  letter-spacing: var(--sdds-detail-01-ls);
+}
+:host [role=listItem].lg .content-container {
+  height: 30px;
+  width: 30px;
+}
+:host [role=listItem].lg.vertical::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 36px;
+  width: 1px;
+  top: 40px;
+  left: 36px;
+}
+:host [role=listItem].lg.horizontal::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: calc(50% + 24px);
+  right: 0;
+  top: 16px;
+}
+:host [role=listItem].lg.horizontal::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  right: calc(50% + 24px);
+  left: 0;
+  top: 16px;
+}
+:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: -10px;
+  right: auto;
+}
+:host [role=listItem].sm {
+  padding: 0 20px;
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+}
+:host [role=listItem].sm .content-container {
+  height: 24px;
+  width: 24px;
+}
+:host [role=listItem].sm.vertical::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
+}
+:host [role=listItem].sm.vertical::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
+}
+:host [role=listItem].sm.horizontal::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: calc(50% + 16px + 8px);
+  right: 0;
+  top: 13px;
+}
+:host [role=listItem].sm.horizontal::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: 0;
+  right: calc(50% + 24px);
+  top: 13px;
+}
+:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--sdds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: -10px;
+  right: auto;
+}
+:host [role=listItem] .content-container {
+  border-radius: 100px;
+  border: 1px solid var(--sdds-stepper-icon-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+:host [role=listItem] .content-container.error {
+  border-color: var(--sdds-negative);
+  color: var(--sdds-negative);
+}
+:host [role=listItem] .content-container.success {
+  background-color: var(--sdds-positive);
+  border-color: var(--sdds-positive);
+  color: var(--sdds-white);
+}
+:host [role=listItem] .content-container.upcoming {
+  background-color: transparent;
+  border-color: var(--sdds-stepper-label-border-color-upcoming);
+  color: var(--sdds-stepper-label-text-color-upcoming);
+  opacity: var(--sdds-stepper-label-text-opacity-upcoming);
+}
+:host [role=listItem] .label {
+  text-align: center;
+}
+:host [role=listItem] .label.lg {
+  font: var(--sdds-detail-01);
+  letter-spacing: var(--sdds-detail-01-ls);
+}
+:host [role=listItem] .label.sm {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+}
+:host [role=listItem] .label.upcoming {
+  color: var(--sdds-stepper-label-text-color-upcoming);
+  opacity: var(--sdds-stepper-label-text-opacity-upcoming);
+}
+
+:host(.last) [role=listItem].sm::after, :host(.last) [role=listItem].lg::after {
+  display: none;
+}
+:host(.last) [role=listItem].sm.vertical::before {
+  display: none;
+}
+
+:host(.first) [role=listItem].sm::before, :host(.first) [role=listItem].lg::before {
+  display: none;
+}