@uh-design-system/component-library 0.3.1 → 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%;
+}
 
 .ds-button {
+  width: 100%;
   align-items: center;
   border-radius: 0;
   border-style: solid;
@@ -10,19 +14,6 @@
   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);
-}
-.ds-button:focus {
-  outline-offset: 2px;
-  outline-width: 2px;
-}
-.ds-button.icon-only {
-  padding-left: 0;
-  padding-right: 0;
-  aspect-ratio: 1;
   justify-content: center;
 }
 .ds-button .button-value {
@@ -38,21 +29,60 @@
 .ds-button.icon-end:not(.small) ds-icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
+.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);
 }
+.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);
 }
 .ds-button.primary.blue:active, .ds-button.primary.blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-button.primary.blue:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
 .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;
@@ -63,16 +93,19 @@
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
+.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);
 }
 .ds-button.primary.black:active, .ds-button.primary.black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-button.primary.black:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
 .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;
@@ -83,16 +116,19 @@
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
+.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);
 }
 .ds-button.primary.white:active, .ds-button.primary.white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-button.primary.white:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-}
 .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;
@@ -103,16 +139,19 @@
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
+.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);
 }
 .ds-button.secondary.blue:active, .ds-button.secondary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button.secondary.blue:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
 .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);
@@ -123,16 +162,19 @@
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
+.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);
 }
 .ds-button.secondary.black:active, .ds-button.secondary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button.secondary.black:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-}
 .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);
@@ -143,16 +185,19 @@
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
+.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);
 }
 .ds-button.secondary.white:active, .ds-button.secondary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button.secondary.white:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-}
 .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);
@@ -162,8 +207,13 @@
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-primary);
-  padding-right: 0;
-  padding-left: 0;
+}
+.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);
@@ -171,9 +221,13 @@
 .ds-button.supplementary.blue:active, .ds-button.supplementary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-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);
+}
+.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;
@@ -184,8 +238,13 @@
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-default);
-  padding-right: 0;
-  padding-left: 0;
+}
+.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);
@@ -193,9 +252,13 @@
 .ds-button.supplementary.black:active, .ds-button.supplementary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-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);
 }
 .ds-button.supplementary.black[aria-disabled=true], .ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
   background-color: transparent;
@@ -206,8 +269,13 @@
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-white);
-  padding-right: 0;
-  padding-left: 0;
+}
+.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);
@@ -215,24 +283,20 @@
 .ds-button.supplementary.white:active, .ds-button.supplementary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-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);
+}
+.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);
 }
-.ds-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);
-}
-.ds-button.small.icon-only {
-  width: 32px;
-}
-.ds-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 = {
@@ -64,7 +65,7 @@ export class DsButton {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: '46e6657656748f136011c38efecbd65ccfd68f71', 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: '564dbf073e00ffb607ad590ec733feec0d48561a', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '9a52ef760ad5e040d5c6a80522271c13c67b76ab', name: this.icon, size: iconSize })), this.value && h("span", { key: '68d704a53e9afe7d27c022f58be47df3d0fe4de6', class: "button-value" }, this.value), h("slot", { key: 'd529e83212c31f7502afc748e9666b30a276c99c', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '08969d9219026744a7eec5a3d5928b4b4ceb6298', 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

@@ -1,3 +1,4 @@
+import { html } from "lit";
 const meta = {
     title: 'Base Components/Button/Features',
     component: 'ds-button',
@@ -71,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.js

@@ -48,7 +48,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '237ef9992d67c967fe88d108c8bc2e38ce5c32bf' }, h("span", { key: '995f53c4fe20d616270f2d70e927065f794c5860', class: 'ds-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"; }
@@ -138,7 +138,7 @@ export class DsIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ds-title",
+                "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Icon'"
             },

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

@@ -15,6 +15,14 @@
   --ds-borderRadius-none: 0px;
 }
 
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
 :root {
   --ds-fontFamily-heading: "Open Sans", sans-serif;
   --ds-fontFamily-body: "Open Sans", sans-serif;
@@ -57,26 +65,83 @@
     --ds-fontFamily-body: "Open Sans Variable", sans-serif;
   }
 }
-.bodyText {
-  line-height: 1.5;
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
 }
-.bodyText--2xLarge {
-  font-size: 1.375rem;
+
+/* Body text styles */
+.ds-bodyText--2xLarge {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
 }
-.bodyText--xLarge {
-  font-size: 1.25rem;
+@media (min-width: 30rem) {
+  .ds-bodyText--2xLarge {
+    font-size: var(--ds-fontSize-22);
+  }
 }
-.bodyText--large {
-  font-size: 1.125rem;
+
+.ds-bodyText--xLarge {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
 }
-.bodyText--medium {
-  font-size: 1rem;
+@media (min-width: 30rem) {
+  .ds-bodyText--xLarge {
+    font-size: var(--ds-fontSize-20);
+  }
 }
-.bodyText--small {
-  font-size: 0.875rem;
+
+.ds-bodyText--large {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
 }
-.bodyText--xSmall {
-  font-size: 0.75rem;
+@media (min-width: 30rem) {
+  .ds-bodyText--large {
+    font-size: var(--ds-fontSize-18);
+  }
+}
+
+.ds-bodyText--medium {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}
+@media (min-width: 30rem) {
+  .ds-bodyText--medium {
+    font-size: var(--ds-fontSize-16);
+  }
+}
+
+.ds-bodyText--small {
+  color: var(--ds-textColor-default);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-12);
+  font-weight: var(--ds-fontWeight-regular);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}
+@media (min-width: 30rem) {
+  .ds-bodyText--small {
+    font-size: var(--ds-fontSize-14);
+  }
 }
 
 :host {
@@ -96,6 +161,13 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
+.ds-link:focus-visible, .ds-link: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-link--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
@@ -128,31 +200,25 @@
 .ds-link:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link:focus-visible {
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-color: var(--ds-palette-black);
-}
 .ds-link:visited {
   color: var(--ds-textColor-link-visited);
 }
 .ds-link--standalone {
-  color: var(--ds-textColor-link--standalone);
+  color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
 .ds-link--standalone:hover, .ds-link--standalone:active {
   text-decoration-line: underline;
 }
 .ds-link--standalone:hover {
-  color: var(--ds-textColor-link--standalone-hover);
+  color: var(--ds-textColor-link-hover);
 }
 .ds-link--standalone:active {
-  color: var(--ds-textColor-link--standalone-active);
+  color: var(--ds-textColor-link-active);
 }
 .ds-link--standalone:focus-visible {
-  color: var(--ds-textColor-link--standalone-focus);
+  color: var(--ds-textColor-link);
 }
 .ds-link--standalone:visited {
-  color: var(--ds-textColor-link--standalone);
+  color: var(--ds-textColor-link);
 }

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

@@ -18,7 +18,7 @@ export class DsLink {
     href;
     target;
     download;
-    lang;
+    language;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         if (opensInNewTab(this.target)) {
@@ -35,7 +35,7 @@ export class DsLink {
             [`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
             [`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
         });
-        return (h("a", { key: '58a12ff2e845e9acf84c3917b5826b014ffb0919', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: '88f6f827f0d37bb358a596c61a27778d3e7e9032', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '82ae7997d3e03e89260f3aabd9fe953d4f252f79', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: 'ad1dc790a43c467d40a40882a55b5f7ad26d52fa', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'fbecfd82f1cf0994bde85d554a07e6210370f457', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: 'f3de3a15b89e77f2838173a541a83c938f19b10d', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.lang ?? document.documentElement.lang)))));
+        return (h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get is() { return "ds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -251,7 +251,7 @@ export class DsLink {
                 "attribute": "download",
                 "reflect": false
             },
-            "lang": {
+            "language": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

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

@@ -63,7 +63,7 @@ export const Playground = {
         download: {
             control: 'boolean'
         },
-        lang: {
+        language: {
             control: 'text',
             description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
         },