@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/collection/components/01-base-components/ds-button/ds-button.css

@@ -1,8 +1,12 @@
 :host {
   display: inline-block;
 }
+:host[full-width] {
+  width: 100%;
+}
 
-button {
+.ds-button {
+  width: 100%;
   align-items: center;
   border-radius: 0;
   border-style: solid;
@@ -10,229 +14,289 @@ button {
   font-family: var(--ds-fontFamily-body);
   font-weight: var(--ds-fontWeight-bold);
   outline: 4px solid transparent;
-  border-width: var(--ds-borderWidth-thick);
-  font-size: var(--ds-fontSize-18);
-  min-height: 44px;
-  padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
-}
-button:focus {
-  outline-offset: 2px;
-  outline-width: 2px;
-}
-button.icon-only {
-  padding-left: 0;
-  padding-right: 0;
-  aspect-ratio: 1;
   justify-content: center;
 }
-button .button-value {
+.ds-button .button-value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
-button ds-icon {
+.ds-button ds-icon {
   height: 1.5rem;
 }
-button.icon-start:not(.small) ds-icon {
+.ds-button.icon-start:not(.small) ds-icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-button.icon-end:not(.small) ds-icon {
+.ds-button.icon-end:not(.small) ds-icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-button.primary.blue {
+.ds-button:not(.small):not(.secondary) {
+  border-width: 0px;
+  font-size: var(--ds-fontSize-18);
+  min-height: 44px;
+  padding: var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px);
+}
+.ds-button:not(.small).secondary {
+  border-width: var(--ds-borderWidth-thick);
+  font-size: var(--ds-fontSize-18);
+  min-height: 44px;
+  padding: var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick));
+}
+.ds-button:not(.small).icon-only {
+  padding-left: 0;
+  padding-right: 0;
+}
+.ds-button.small:not(.secondary) {
+  border-width: 0px;
+  font-size: var(--ds-fontSize-14);
+  min-height: 32px;
+  padding: var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px);
+}
+.ds-button.small.secondary {
+  border-width: var(--ds-borderWidth-thin);
+  font-size: var(--ds-fontSize-14);
+  min-height: 32px;
+  padding: var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin));
+}
+.ds-button.small.icon-only {
+  padding-left: 0;
+  padding-right: 0;
+  width: 32px;
+}
+.ds-button.small ds-icon {
+  height: 1rem;
+}
+.ds-button.primary.blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-button.primary.blue:hover {
+.ds-button.primary.blue:focus-visible, .ds-button.primary.blue:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.primary.blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-button.primary.blue:active, button.primary.blue--active {
+.ds-button.primary.blue:active, .ds-button.primary.blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-button.primary.blue:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
-button.primary.blue[aria-disabled=true], button.primary.blue.disabled, button.primary.blue:disabled {
+.ds-button.primary.blue[aria-disabled=true], .ds-button.primary.blue.disabled, .ds-button.primary.blue:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.primary.black {
+.ds-button.primary.black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-button.primary.black:hover {
+.ds-button.primary.black:focus-visible, .ds-button.primary.black:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.primary.black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-button.primary.black:active, button.primary.black--active {
+.ds-button.primary.black:active, .ds-button.primary.black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-button.primary.black:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
-button.primary.black[aria-disabled=true], button.primary.black.disabled, button.primary.black:disabled {
+.ds-button.primary.black[aria-disabled=true], .ds-button.primary.black.disabled, .ds-button.primary.black:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.primary.white {
+.ds-button.primary.white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-button.primary.white:hover {
+.ds-button.primary.white:focus-visible, .ds-button.primary.white:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline-color: var(--ds-borderColor-white);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.primary.white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-button.primary.white:active, button.primary.white--active {
+.ds-button.primary.white:active, .ds-button.primary.white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-button.primary.white:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-}
-button.primary.white[aria-disabled=true], button.primary.white.disabled, button.primary.white:disabled {
+.ds-button.primary.white[aria-disabled=true], .ds-button.primary.white.disabled, .ds-button.primary.white:disabled {
   background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-button.secondary.blue {
+.ds-button.secondary.blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-button.secondary.blue:hover {
+.ds-button.secondary.blue:focus-visible, .ds-button.secondary.blue:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.secondary.blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-button.secondary.blue:active, button.secondary.blue--active {
+.ds-button.secondary.blue:active, .ds-button.secondary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-button.secondary.blue:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
-button.secondary.blue[aria-disabled=true], button.secondary.blue.disabled, button.secondary.blue:disabled {
+.ds-button.secondary.blue[aria-disabled=true], .ds-button.secondary.blue.disabled, .ds-button.secondary.blue:disabled {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-button.secondary.black {
+.ds-button.secondary.black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-button.secondary.black:hover {
+.ds-button.secondary.black:focus-visible, .ds-button.secondary.black:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.secondary.black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-button.secondary.black:active, button.secondary.black--active {
+.ds-button.secondary.black:active, .ds-button.secondary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-button.secondary.black:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
-button.secondary.black[aria-disabled=true], button.secondary.black.disabled, button.secondary.black:disabled {
+.ds-button.secondary.black[aria-disabled=true], .ds-button.secondary.black.disabled, .ds-button.secondary.black:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-button.secondary.white {
+.ds-button.secondary.white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-button.secondary.white:hover {
+.ds-button.secondary.white:focus-visible, .ds-button.secondary.white:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline-color: var(--ds-borderColor-white);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.secondary.white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-button.secondary.white:active, button.secondary.white--active {
+.ds-button.secondary.white:active, .ds-button.secondary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-button.secondary.white:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-}
-button.secondary.white[aria-disabled=true], button.secondary.white.disabled, button.secondary.white:disabled {
+.ds-button.secondary.white[aria-disabled=true], .ds-button.secondary.white.disabled, .ds-button.secondary.white:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onDark);
   color: var(--ds-textColor-disabled-onDark);
 }
-button.supplementary.blue {
+.ds-button.supplementary.blue {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-primary);
-  padding-right: 0;
-  padding-left: 0;
 }
-button.supplementary.blue:hover {
+.ds-button.supplementary.blue:focus-visible, .ds-button.supplementary.blue:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.supplementary.blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-button.supplementary.blue:active, button.supplementary.blue--active {
+.ds-button.supplementary.blue:active, .ds-button.supplementary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-button.supplementary.blue:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
+.ds-button.supplementary.blue:not(.small) {
+  padding-right: var(--ds-borderWidth-thick);
+  padding-left: var(--ds-borderWidth-thick);
 }
-button.supplementary.blue[aria-disabled=true], button.supplementary.blue.disabled, button.supplementary.blue:disabled {
+.ds-button.supplementary.blue.small {
+  padding-right: var(--ds-borderWidth-thin);
+  padding-left: var(--ds-borderWidth-thin);
+}
+.ds-button.supplementary.blue[aria-disabled=true], .ds-button.supplementary.blue.disabled, .ds-button.supplementary.blue:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.supplementary.black {
+.ds-button.supplementary.black {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-default);
-  padding-right: 0;
-  padding-left: 0;
 }
-button.supplementary.black:hover {
+.ds-button.supplementary.black:focus-visible, .ds-button.supplementary.black:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.supplementary.black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-button.supplementary.black:active, button.supplementary.black--active {
+.ds-button.supplementary.black:active, .ds-button.supplementary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-button.supplementary.black:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
+.ds-button.supplementary.black:not(.small) {
+  padding-right: var(--ds-borderWidth-thick);
+  padding-left: var(--ds-borderWidth-thick);
+}
+.ds-button.supplementary.black.small {
+  padding-right: var(--ds-borderWidth-thin);
+  padding-left: var(--ds-borderWidth-thin);
 }
-button.supplementary.black[aria-disabled=true], button.supplementary.black.disabled, button.supplementary.black:disabled {
+.ds-button.supplementary.black[aria-disabled=true], .ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.supplementary.white {
+.ds-button.supplementary.white {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-white);
-  padding-right: 0;
-  padding-left: 0;
 }
-button.supplementary.white:hover {
+.ds-button.supplementary.white:focus-visible, .ds-button.supplementary.white:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline-color: var(--ds-borderColor-white);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-button.supplementary.white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-button.supplementary.white:active, button.supplementary.white--active {
+.ds-button.supplementary.white:active, .ds-button.supplementary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-button.supplementary.white:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
+.ds-button.supplementary.white:not(.small) {
+  padding-right: var(--ds-borderWidth-thick);
+  padding-left: var(--ds-borderWidth-thick);
 }
-button.supplementary.white[aria-disabled=true], button.supplementary.white.disabled, button.supplementary.white:disabled {
+.ds-button.supplementary.white.small {
+  padding-right: var(--ds-borderWidth-thin);
+  padding-left: var(--ds-borderWidth-thin);
+}
+.ds-button.supplementary.white[aria-disabled=true], .ds-button.supplementary.white.disabled, .ds-button.supplementary.white:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-button.small {
-  border-width: var(--ds-borderWidth-thin);
-  font-size: var(--ds-fontSize-14);
-  min-height: 32px;
-  padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
-}
-button.small.icon-only {
-  width: 32px;
-}
-button.small ds-icon {
-  height: 1rem;
+.ds-button.icon-only {
+  aspect-ratio: 1;
+  justify-content: center;
 }

package/dist/collection/components/01-base-components/ds-button/ds-button.js

@@ -15,6 +15,7 @@ export class DsButton {
     iconPosition = 'start';
     type = 'button';
     disabled = false;
+    fullWidth = false;
     ariaDisabled = 'false';
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -57,14 +58,14 @@ export class DsButton {
         }
     };
     render() {
-        const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
+        const classes = classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
             'icon-only': this.icon && !this.value,
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: 'f987b8884e1aab8959c2157039996019b42f826a', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '6b87d0e8e45f28f5a3dfb54cbb69d6c7acc3ef15', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '32dd7550a1b1203e7a6b24dd0e7ef4516ee6ed45', name: this.icon, size: iconSize })), this.value && h("span", { key: 'ba87d4898f376ff0b1d4fa43258c36fb034ee88c', class: "button-value" }, this.value), h("slot", { key: 'ba2a58d944a9e11aaade04d25dad9c544a5966ea', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'e30f0970737c93c2153e9ae68c87c47c3c4a2329', name: this.icon, size: iconSize }))));
+        return (h("button", { key: '57b49111cb6e4957d1cd69cdfd09b99fe620b614', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '56532d67c5a1df5e831025422db0c886bd731db0', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6028ee6b589400340f21411b252c7ba85732fa1c', name: this.icon, size: iconSize })), this.value && h("span", { key: '8b98003443f13f88f76b9a9a611eb1abc4daee74', class: "button-value" }, this.value), h("slot", { key: '35ad0a3aa154b8afba9bd50ffe30c1e25a37f382', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '7eebd8b5754c0dd1d3d6a435234728518a16a405', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -269,6 +270,26 @@ export class DsButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "ariaDisabled": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js

@@ -25,3 +25,9 @@ export const ResetAndSubmitButton = {
     </form>
   `,
 };
+export const FullWidthWithIconsUsingSlots = {
+    render: () => html `<ds-button style="width: 100%" value="Full width with icons using slots">
+    <ds-icon slot="prefix" name="ds_flame"></ds-icon>
+    <ds-icon slot="suffix" name="ds_flame"></ds-icon>
+  </ds-button>`,
+};

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js

@@ -56,13 +56,10 @@ Small.args = {
     value: 'Small',
     size: 'small',
 };
-export const Disabled = {
-    render: () => html `
-    <div class="button-group">
-      <ds-button disabled value="disabled"></ds-button>
-      <ds-button aria-disabled="true" value="aria-disabled"></ds-button>
-    </div>
-  `,
+export const Disabled = {};
+Disabled.args = {
+    value: 'Disabled',
+    disabled: true,
 };
 export const IconStart = {};
 IconStart.args = {
@@ -75,3 +72,12 @@ IconEnd.args = {
     icon: 'arrow_forward',
     iconPosition: 'end',
 };
+export const FullWidth = {
+    render: () => html `<ds-button full-width value="Full width"></ds-button>`
+};
+export const FullWidthWithStartIcon = {
+    render: () => html `<ds-button full-width icon="ds_flame" value="Full width"></ds-button>`
+};
+export const FullWidthWithEndIcon = {
+    render: () => html `<ds-button full-width icon="ds_flame" icon-position="end" value="Full width"></ds-button>`
+};

package/dist/collection/components/01-base-components/ds-icon/ds-icon.css

@@ -1,3 +1,7 @@
 :host {
-  display: inline;
+  display: flex;
 }
+
+.ds-icon--container {
+  display: flex;
+}

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -1,10 +1,11 @@
 import { Fragment, h } from "@stencil/core";
 import { icons } from "../../../components/00-foundations/icons/iconList";
+import { remToPx } from "../../../utils/utils";
 export class DsIcon {
     name;
     colour;
     size = '1.5rem';
-    title = 'Icon';
+    dsTitle = 'Icon';
     role = 'img';
     hidden = true;
     message = '';
@@ -33,7 +34,9 @@ export class DsIcon {
         const size = this.size || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
         const role = this.role || 'img';
-        const title = this.title || '';
+        const title = this.dsTitle || '';
+        svgElement.setAttribute('width', remToPx(size));
+        svgElement.setAttribute('height', remToPx(size));
         svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
         svgElement.setAttribute('role', role);
         const titleText = title || 'Icon';
@@ -45,13 +48,13 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '8d8a1304c6293c49ecc830ec02227dff9852b8c5' }, h("span", { key: '83f992b6b58f24398fa84e0fe62a62e60ea72e1b', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ds-icon.css"]
+            "$": ["ds-icon.scss"]
         };
     }
     static get styleUrls() {
@@ -119,7 +122,7 @@ export class DsIcon {
                 "reflect": false,
                 "defaultValue": "'1.5rem'"
             },
-            "title": {
+            "dsTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

package/dist/collection/components/01-base-components/ds-icon/ds-icon.stories.js

@@ -25,7 +25,7 @@ const meta = {
             },
             name: 'Size',
         },
-        title: {
+        dsTitle: {
             control: {
                 type: 'text',
             },
@@ -50,6 +50,6 @@ export const Default = {};
 Default.args = {
     name: 'archive',
     role: 'img',
-    title: 'Icon',
+    dsTitle: 'Icon',
     hidden: true,
 };