@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {

package/scss/component/card.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl card component.
+
+@forward "../../src/scss/component/card";

package/scss/component/menu.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl menu component.
+
+@forward "../../src/scss/component/menu";

package/scss/component/navigation.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl navigation component.
+
+@forward "../../src/scss/component/navigation";

package/scss/layout/flex-columns.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl flex columns layout.
+
+@forward "../../src/scss/layout/flex-columns";

package/scss/utilities/order.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl order utilities.
+
+@forward "../../src/scss/utilities/order";

package/src/js/navigation.js

@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const navs = document.querySelectorAll(".navigation");
+  const menus = [];
+
+  navs.forEach((nav) => {
+    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
+
+    if (window[MenuConstructor] === undefined) {
+      console.warn(
+        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+      );
+
+      return;
+    }
+
+    const menuOptions =
+      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
+    const menuElement = nav.querySelector(".menu");
+    const controllerElement = nav.querySelector(".navigation-toggle");
+    const containerElement = nav;
+    const menu = new window[MenuConstructor]({
+      menuElement,
+      menuItemSelector: ".menu-item",
+      menuLinkSelector: ".menu-link",
+      submenuItemSelector: ".submenu-item",
+      submenuToggleSelector: ".submenu-toggle",
+      controllerElement,
+      containerElement,
+      ...menuOptions,
+    });
+
+    menus.push(menu);
+  });
+});

package/src/scss/_defaults.scss

@@ -19,10 +19,24 @@ $content-max-width: 96ch !default;
 
 // Screen sizes.
 $base-screen-sizes: (
-  xs: "(0 <= width <= 48ch)",
+  xs: "(width <= 48ch)",
+  sm: "(48ch < width)",
+  md: "(72ch < width)",
+  lg: "(108ch < width)",
+  xl: "(156ch < width)",
 );
 $custom-screen-sizes: () !default;
 $screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
+$base-screen-size-triggers: (
+  navigation-collapse: "(width <= 72ch)",
+  navigation-expand: "(72ch < width)",
+  force-vertical-card: "(width <= 72ch)",
+);
+$custom-screen-size-triggers: () !default;
+$screen-size-triggers: map.merge(
+  $base-screen-size-triggers,
+  $custom-screen-size-triggers
+);
 
 // Spacing properties.
 $spacer: 1rem !default;

package/src/scss/base/button/_defaults.scss

@@ -15,10 +15,11 @@ $button-theme-selector-prefix: "." !default;
 
 // Button properties.
 $button-transform: none !default;
-$button-hover-transform: none !default;
-$button-hover-transform-reduced-motion: none !default;
+$button-visited-transform: $button-transform !default;
+$button-focus-transform: $button-transform !default;
+$button-hover-transform: $button-transform !default;
 $button-active-transform: scale(0.95) !default;
-$button-active-transform-reduced-motion: scale(0.98) !default;
+$button-disabled-transform: $button-transform !default;
 
 // Button state theme defaults.
 // This map is used to define the default colour shades for the
@@ -32,6 +33,10 @@ $button-active-transform-reduced-motion: scale(0.98) !default;
 $base-button-state-theme-map: (
   color: 900,
   border-color: 700,
+  visited-color: 900,
+  visited-border-color: 700,
+  focus-color: 900,
+  focus-border-color: 700,
   hover-color: 100,
   hover-background: 700,
   hover-border-color: 700,

package/src/scss/base/button/_index.scss

@@ -2,11 +2,13 @@
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
+@use "../link/defaults" as link-defaults;
 @use "../../theme/color/variables" as color;
 @use "../../base/link/variables" as link;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 @use "../../mixins/media-queries" as *;
+@use "../../functions/theme";
 @use "sass:map";
 
 @include layer(base) {
@@ -19,12 +21,19 @@
     padding: $button-padding;
     transform: $button-transform;
     transition: $button-transition;
-    border-width: $button-border-width;
-    border-style: $button-border-style;
+    border: $button-border;
     border-radius: $button-border-radius;
     font-size: $button-font-size;
     cursor: pointer;
 
+    &:visited {
+      --#{root-defaults.$prefix}-button-transform: #{$button-visited-transform};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-button-transform: #{$button-focus-transform};
+    }
+
     &:hover {
       --#{root-defaults.$prefix}-button-transform: #{$button-hover-transform};
     }
@@ -33,23 +42,16 @@
       --#{root-defaults.$prefix}-button-transform: #{$button-active-transform};
     }
 
-    &:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}-link-text-decoration: none;
-      --#{root-defaults.$prefix}-link-padding: #{$button-padding};
-      --#{root-defaults.$prefix}-link-transition: #{$button-transition};
-      --#{root-defaults.$prefix}-link-transition-reduced-motion: #{$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}-link-transform: #{$button-transform};
-      --#{root-defaults.$prefix}-link-hover-transform: #{$button-hover-transform};
-      --#{root-defaults.$prefix}-link-active-transform: #{$button-active-transform};
-    }
-
     &:disabled,
     &[disabled] {
       cursor: not-allowed;
 
+      &,
+      &:visited,
+      &:focus-visible,
       &:hover,
       &:active {
-        transform: none;
+        --#{root-defaults.$prefix}-button-transform: #{$button-disabled-transform};
       }
     }
 
@@ -58,23 +60,51 @@
       --#{root-defaults.$prefix}-button-transition: #{link.$link-transition};
       --#{root-defaults.$prefix}-button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
       --#{root-defaults.$prefix}-button-transform: #{link.$link-transform};
+      --#{root-defaults.$prefix}-button-visited-transform: #{link.$link-visited-transform};
+      --#{root-defaults.$prefix}-button-focus-transform: #{link.$link-transform};
       --#{root-defaults.$prefix}-button-hover-transform: #{link.$link-hover-transform};
       --#{root-defaults.$prefix}-button-active-transform: #{link.$link-active-transform};
+      --#{root-defaults.$prefix}-button-border-width: #{link.$link-border-width};
+      --#{root-defaults.$prefix}-button-border-style: #{link.$link-border-style};
+      --#{root-defaults.$prefix}-button-border-radius: #{link.$link-border-radius};
+      --#{root-defaults.$prefix}-button-min-width: #{link.$link-min-width};
+      --#{root-defaults.$prefix}-button-min-height: #{link.$link-min-height};
+      --#{root-defaults.$prefix}-button-font-size: inherit;
 
-      min-width: auto;
-      min-height: auto;
-      border: 0;
-      font-size: inherit;
       text-decoration: link.$link-text-decoration;
       text-decoration-thickness: link.$link-text-decoration-thickness;
+      text-decoration-style: link.$link-text-decoration-style;
+    }
+  }
+
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
+      --#{root-defaults.$prefix}-link-padding: #{$button-padding};
+      --#{root-defaults.$prefix}-link-transition: #{$button-transition};
+      --#{root-defaults.$prefix}-link-transition-reduced-motion: #{$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}-link-transform: #{$button-transform};
+      --#{root-defaults.$prefix}-link-visited-transform: #{$button-visited-transform};
+      --#{root-defaults.$prefix}-link-focus-transform: #{$button-focus-transform};
+      --#{root-defaults.$prefix}-link-hover-transform: #{$button-hover-transform};
+      --#{root-defaults.$prefix}-link-active-transform: #{$button-active-transform};
+      --#{root-defaults.$prefix}-link-disabled-transform: #{$button-disabled-transform};
+      --#{root-defaults.$prefix}-link-border-width: #{$button-border-width};
+      --#{root-defaults.$prefix}-link-border-style: #{$button-border-style};
+      --#{root-defaults.$prefix}-link-border-radius: #{$button-border-radius};
+      --#{root-defaults.$prefix}-link-min-width: #{$button-min-width};
+      --#{root-defaults.$prefix}-link-min-height: #{$button-min-height};
+      --#{root-defaults.$prefix}-link-text-decoration: none;
+      --#{root-defaults.$prefix}-link-visited-text-decoration: none;
+      --#{root-defaults.$prefix}-link-focus-text-decoration: none;
+      --#{root-defaults.$prefix}-link-hover-text-decoration: none;
+      --#{root-defaults.$prefix}-link-active-text-decoration: none;
+      --#{root-defaults.$prefix}-link-disabled-text-decoration: none;
     }
   }
 
   @include animation-off {
     #{defaults.$button-selector} {
       --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}-button-hover-transform: #{$button-hover-transform-reduced-motion};
-      --#{root-defaults.$prefix}-button-active-transform: #{$button-active-transform-reduced-motion};
     }
   }
 }
@@ -88,34 +118,45 @@
     @each $color, $map in color.$theme-active {
       &#{defaults.$button-theme-selector-prefix}#{$color} {
         @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
+          --#{root-defaults.$prefix}-button-#{$prop}: #{theme.get(
+              $color,
+              $shade
+            )};
         }
       }
     }
 
     &#{defaults.$button-link-selector} {
       --#{root-defaults.$prefix}-button-color: #{link.$link-color};
+      --#{root-defaults.$prefix}-button-visited-color: #{link.$link-visited-color};
+      --#{root-defaults.$prefix}-button-focus-color: #{link.$link-focus-color};
       --#{root-defaults.$prefix}-button-hover-color: #{link.$link-hover-color};
       --#{root-defaults.$prefix}-button-active-color: #{link.$link-active-color};
       --#{root-defaults.$prefix}-button-disabled-color: #{link.$link-disabled-color};
       --#{root-defaults.$prefix}-button-background: #{link.$link-background};
+      --#{root-defaults.$prefix}-button-visited-background: #{link.$link-visited-background};
+      --#{root-defaults.$prefix}-button-focus-background: #{link.$link-focus-background};
       --#{root-defaults.$prefix}-button-hover-background: #{link.$link-hover-background};
       --#{root-defaults.$prefix}-button-active-background: #{link.$link-active-background};
       --#{root-defaults.$prefix}-button-disabled-background: #{link.$link-disabled-background};
-      --#{root-defaults.$prefix}-button-border-color: none;
-      --#{root-defaults.$prefix}-button-hover-border-color: none;
-      --#{root-defaults.$prefix}-button-active-border-color: none;
-      --#{root-defaults.$prefix}-button-disabled-border-color: none;
-      --#{root-defaults.$prefix}-button-hover-transform: none;
-      --#{root-defaults.$prefix}-button-active-transform: none;
+      --#{root-defaults.$prefix}-button-border-color: #{link.$link-border-color};
+      --#{root-defaults.$prefix}-button-visited-border-color: #{link.$link-visited-border-color};
+      --#{root-defaults.$prefix}-button-focus-border-color: #{link.$link-focus-border-color};
+      --#{root-defaults.$prefix}-button-hover-border-color: #{link.$link-hover-border-color};
+      --#{root-defaults.$prefix}-button-active-border-color: #{link.$link-active-border-color};
+      --#{root-defaults.$prefix}-button-disabled-border-color: #{link.$link-disabled-border-color};
     }
 
-    &:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}-link-color: #{$button-color};
-      --#{root-defaults.$prefix}-link-hover-color: #{$button-hover-color};
-      --#{root-defaults.$prefix}-link-active-color: #{$button-active-color};
-      --#{root-defaults.$prefix}-link-visited-color: #{$button-hover-color};
-      --#{root-defaults.$prefix}-link-disabled-color: #{$button-disabled-color};
+    &:visited {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-visited-color};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-focus-color};
     }
 
     &:hover {
@@ -132,10 +173,9 @@
 
     &:disabled,
     &[disabled] {
-      --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$button-disabled-background};
-      --#{root-defaults.$prefix}-button-color: #{$button-disabled-color};
-
+      &,
+      &:visited,
+      &:focus-visible,
       &:hover,
       &:active {
         --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
@@ -144,4 +184,27 @@
       }
     }
   }
+
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
+      --#{root-defaults.$prefix}-link-color: #{$button-color};
+      --#{root-defaults.$prefix}-link-visited-color: #{$button-visited-color};
+      --#{root-defaults.$prefix}-link-focus-color: #{$button-focus-color};
+      --#{root-defaults.$prefix}-link-hover-color: #{$button-hover-color};
+      --#{root-defaults.$prefix}-link-active-color: #{$button-active-color};
+      --#{root-defaults.$prefix}-link-disabled-color: #{$button-disabled-color};
+      --#{root-defaults.$prefix}-link-background: #{$button-background};
+      --#{root-defaults.$prefix}-link-visited-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}-link-focus-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}-link-hover-background: #{$button-hover-background};
+      --#{root-defaults.$prefix}-link-active-background: #{$button-active-background};
+      --#{root-defaults.$prefix}-link-disabled-background: #{$button-disabled-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$button-border-color};
+      --#{root-defaults.$prefix}-link-visited-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}-link-focus-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}-link-hover-border-color: #{$button-hover-border-color};
+      --#{root-defaults.$prefix}-link-active-border-color: #{$button-active-border-color};
+      --#{root-defaults.$prefix}-link-disabled-border-color: #{$button-disabled-border-color};
+    }
+  }
 }

package/src/scss/base/button/_variables.scss

@@ -53,6 +53,14 @@ $button-transform: var(
   --#{root-defaults.$prefix}-button-transform,
   #{defaults.$button-transform}
 );
+$button-visited-transform: var(
+  --#{root-defaults.$prefix}-button-visited-transform,
+  #{defaults.$button-visited-transform}
+);
+$button-focus-transform: var(
+  --#{root-defaults.$prefix}-button-focus-transform,
+  #{defaults.$button-focus-transform}
+);
 $button-hover-transform: var(
   --#{root-defaults.$prefix}-button-hover-transform,
   #{defaults.$button-hover-transform}
@@ -61,13 +69,9 @@ $button-active-transform: var(
   --#{root-defaults.$prefix}-button-active-transform,
   #{defaults.$button-active-transform}
 );
-$button-hover-transform-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-hover-transform-reduced-motion,
-  #{defaults.$button-hover-transform-reduced-motion}
-);
-$button-active-transform-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-active-transform-reduced-motion,
-  #{defaults.$button-active-transform-reduced-motion}
+$button-disabled-transform: var(
+  --#{root-defaults.$prefix}-button-disabled-transform,
+  #{defaults.$button-disabled-transform}
 );
 
 // Background properties.
@@ -75,6 +79,14 @@ $button-background: var(
   --#{root-defaults.$prefix}-button-background,
   #{color.$root-background}
 );
+$button-visited-background: var(
+  --#{root-defaults.$prefix}-button-visited-background,
+  #{color.$root-background}
+);
+$button-focus-background: var(
+  --#{root-defaults.$prefix}-button-focus-background,
+  #{color.$root-background}
+);
 $button-hover-background: var(
   --#{root-defaults.$prefix}-button-hover-background,
   #{theme.get(primary, 900)}
@@ -91,7 +103,15 @@ $button-disabled-background: var(
 // Text properties.
 $button-color: var(
   --#{root-defaults.$prefix}-button-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
+);
+$button-visited-color: var(
+  --#{root-defaults.$prefix}-button-visited-color,
+  #{color.$root-color}
+);
+$button-focus-color: var(
+  --#{root-defaults.$prefix}-button-focus-color,
+  #{color.$root-color}
 );
 $button-hover-color: var(
   --#{root-defaults.$prefix}-button-hover-color,
@@ -115,6 +135,10 @@ $button-border-style: var(
   --#{root-defaults.$prefix}-botton-border-style,
   #{root-variables.$border-style}
 );
+$button-border: var(
+  --#{root-defaults.$prefix}-button-border,
+  #{$button-border-width} #{$button-border-style}
+);
 $button-border-radius: var(
   --#{root-defaults.$prefix}-button-border-radius,
   #{root-variables.$border-radius}
@@ -123,15 +147,23 @@ $button-border-radius: var(
 // Border colour properties.
 $button-border-color: var(
   --#{root-defaults.$prefix}-button-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
+);
+$button-visited-border-color: var(
+  --#{root-defaults.$prefix}-button-visited-border-color,
+  #{color.$root-color}
+);
+$button-focus-border-color: var(
+  --#{root-defaults.$prefix}-button-focus-border-color,
+  #{color.$root-color}
 );
 $button-hover-border-color: var(
   --#{root-defaults.$prefix}-button-hover-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
 );
 $button-active-border-color: var(
   --#{root-defaults.$prefix}-button-active-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
 );
 $button-disabled-border-color: var(
   --#{root-defaults.$prefix}-button-disabled-border-color,

package/src/scss/base/form/_index.scss

@@ -9,8 +9,7 @@
   #{defaults.$textarea-selector},
   #{defaults.$select-selector} {
     padding: $input-padding;
-    border-width: $input-border-width;
-    border-style: $input-border-style;
+    border: $input-border;
     border-radius: $input-border-radius;
     font-size: $input-font-size;
 
@@ -28,8 +27,7 @@
     flex-flow: $fieldset-direction wrap;
     gap: $fieldset-gap;
     padding: $fieldset-padding;
-    border-width: $fieldset-border-width;
-    border-style: $fieldset-border-style;
+    border: $fieldset-border;
     border-radius: $fieldset-border-radius;
     font-size: $fieldset-font-size;
 

package/src/scss/base/form/_variables.scss

@@ -106,6 +106,10 @@ $input-border-style: var(
   --#{root-defaults.$prefix}-botton-border-style,
   #{root-variables.$border-style}
 );
+$input-border: var(
+  --#{root-defaults.$prefix}-input-border,
+  #{$input-border-width} #{$input-border-style}
+);
 $input-border-radius: var(
   --#{root-defaults.$prefix}-input-border-radius,
   #{root-variables.$border-radius}
@@ -118,6 +122,10 @@ $fieldset-border-style: var(
   --#{root-defaults.$prefix}-fieldset-border-style,
   #{$input-border-style}
 );
+$fieldset-border: var(
+  --#{root-defaults.$prefix}-fieldset-border,
+  #{$fieldset-border-width} #{$fieldset-border-style}
+);
 $fieldset-border-radius: var(
   --#{root-defaults.$prefix}-fieldset-border-radius,
   #{$input-border-radius}

package/src/scss/base/link/_defaults.scss

@@ -8,12 +8,43 @@
 
 // Link selectors.
 $link-selector: "a" !default;
+$stretched-link-selector: ".stretched" !default;
+$stretched-link-pseudo-selector: "before" !default;
 
 // Link properties.
-$link-text-decoration: underline;
-$link-hover-text-decoration: underline;
+$link-text-decoration: underline !default;
+$link-visited-text-decoration: $link-text-decoration !default;
+$link-active-text-decoration: $link-text-decoration !default;
+$link-hover-text-decoration: $link-text-decoration !default;
+$link-focus-text-decoration: $link-text-decoration !default;
+$link-disabled-text-decoration: $link-text-decoration !default;
+$link-text-decoration-style: solid !default;
+$link-visited-text-decoration-style: $link-text-decoration-style !default;
+$link-active-text-decoration-style: $link-text-decoration-style !default;
+$link-hover-text-decoration-style: $link-text-decoration-style !default;
+$link-focus-text-decoration-style: $link-text-decoration-style !default;
+$link-disabled-text-decoration-style: $link-text-decoration-style !default;
 $link-transform: none !default;
-$link-hover-transform: none !default;
-$link-hover-transform-reduced-motion: none !default;
-$link-active-transform: none !default;
-$link-active-transform-reduced-motion: none !default;
+$link-visited-transform: $link-transform !default;
+$link-focus-transform: $link-transform !default;
+$link-hover-transform: $link-transform !default;
+$link-active-transform: $link-transform !default;
+$link-disabled-transform: $link-transform !default;
+$link-border-width: 0 !default;
+$link-border-color: transparent !default;
+$link-visited-border-color: $link-border-color !default;
+$link-focus-border-color: $link-border-color !default;
+$link-hover-border-color: $link-border-color !default;
+$link-active-border-color: $link-border-color !default;
+$link-disabled-border-color: $link-border-color !default;
+$link-background: transparent !default;
+$link-visited-background: $link-background !default;
+$link-focus-background: $link-background !default;
+$link-hover-background: $link-background !default;
+$link-active-background: $link-background !default;
+$link-disabled-background: $link-background !default;
+$link-min-width: auto;
+$link-min-height: auto;
+
+// Stretched link properties.
+$stretched-link-z-index: 5 !default;

package/src/scss/base/link/_index.scss

@@ -8,24 +8,70 @@
 
 @include layer(base) {
   #{defaults.$link-selector} {
+    min-width: $link-min-width;
+    min-height: $link-min-height;
     padding: $link-padding;
     transform: $link-transform;
     transition: $link-transition;
+    border: $link-border;
+    border-radius: $link-border-radius;
     text-decoration: $link-text-decoration;
+    text-decoration-style: $link-text-decoration-style;
     text-decoration-thickness: $link-text-decoration-thickness;
 
+    &:visited {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-visited-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-visited-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-visited-transform};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-focus-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-focus-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-focus-transform};
+    }
+
     &:hover {
       --#{root-defaults.$prefix}-link-text-decoration: #{$link-hover-text-decoration};
       --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-hover-text-decoration-style};
       --#{root-defaults.$prefix}-link-transform: #{$link-hover-transform};
     }
 
     &:active {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-active-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-active-text-decoration-style};
       --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
     }
 
+    &:disabled,
     &[disabled] {
       cursor: not-allowed;
+
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-link-text-decoration: #{$link-disabled-text-decoration};
+        --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}-link-transform: #{$link-disabled-transform};
+      }
+    }
+
+    &#{defaults.$stretched-link-selector} {
+      isolation: isolate;
+
+      &::#{defaults.$stretched-link-pseudo-selector} {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: $stretched-link-z-index;
+      }
     }
   }
 
@@ -38,37 +84,51 @@
 
 @include layer(theme) {
   #{defaults.$link-selector} {
+    border-color: $link-border-color;
     background: $link-background;
     color: $link-color;
+    text-decoration-color: $link-text-decoration-color;
+
+    &:visited {
+      --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-visited-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-visited-text-decoration-color};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-link-color: #{$link-focus-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-focus-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-focus-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-focus-text-decoration-color};
+    }
 
     &:hover {
       --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
       --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-hover-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-hover-text-decoration-color};
     }
 
     &:active {
       --#{root-defaults.$prefix}-link-color: #{$link-active-color};
       --#{root-defaults.$prefix}-link-background: #{$link-active-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-active-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-active-text-decoration-color};
     }
 
-    // stylelint-disable no-descending-specificity
-    &:visited {
-      &,
-      &:hover {
-        --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
-        --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
-      }
-    }
-
+    &:disabled,
     &[disabled] {
       &,
+      &:visited,
+      &:focus-visible,
       &:hover,
-      &:active,
-      &:visited {
+      &:active {
         --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
         --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
+        --#{root-defaults.$prefix}-link-border-color: #{$link-disabled-border-color};
+        --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-disabled-text-decoration-color};
       }
     }
-    // stylelint-enable no-descending-specificity
   }
 }