@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/partials/lib/partials.d.ts

@@ -1,5 +1,4 @@
 import { Format } from '../shared';
-
 type GetMetaIconLinksOptions = {
     format?: Format;
 };

package/radio.DEILy_lV.js

@@ -0,0 +1,114 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as h } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as $, useRef as C, useState as E, useEffect as L, useCallback as O } from "react";
+import { u as P } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import './assets/radio.X-RTl_jo.css';const v = (o) => o.replace(/\s+/g, ""), U = "ds-radio_root_tdhm5_1", q = "ds-radio_root--disabled_tdhm5_21", z = "ds-radio_root--with-custom-area_tdhm5_24", F = "ds-radio_radio_tdhm5_28", G = "ds-radio_dot_tdhm5_45", J = "ds-radio_radio--invalid_tdhm5_69", K = "ds-radio_label_tdhm5_74", M = "ds-radio_label--bold_tdhm5_88", Q = "ds-radio_label--hidden_tdhm5_99", T = "ds-radio_label--with-custom-area_tdhm5_111", X = "ds-radio_custom-area_tdhm5_115", Y = "ds-radio_hint_tdhm5_123", Z = "ds-radio_hint--visible_tdhm5_146", tt = "ds-radio_hint--unchecked-hidden_tdhm5_150", dt = "ds-radio_hint--hidden_tdhm5_155", et = "ds-radio_input_tdhm5_168", t = {
+  root: U,
+  "root--disabled": "ds-radio_root--disabled_tdhm5_21",
+  rootDisabled: q,
+  "root--with-custom-area": "ds-radio_root--with-custom-area_tdhm5_24",
+  rootWithCustomArea: z,
+  radio: F,
+  dot: G,
+  "radio--invalid": "ds-radio_radio--invalid_tdhm5_69",
+  radioInvalid: J,
+  label: K,
+  "label--bold": "ds-radio_label--bold_tdhm5_88",
+  labelBold: M,
+  "label--hidden": "ds-radio_label--hidden_tdhm5_99",
+  labelHidden: Q,
+  "label--with-custom-area": "ds-radio_label--with-custom-area_tdhm5_111",
+  labelWithCustomArea: T,
+  "custom-area": "ds-radio_custom-area_tdhm5_115",
+  customArea: X,
+  hint: Y,
+  "hint--visible": "ds-radio_hint--visible_tdhm5_146",
+  hintVisible: Z,
+  "hint--unchecked-hidden": "ds-radio_hint--unchecked-hidden_tdhm5_150",
+  hintUncheckedHidden: tt,
+  "hint--hidden": "ds-radio_hint--hidden_tdhm5_155",
+  hintHidden: dt,
+  input: et
+}, it = $(
+  ({
+    label: o,
+    name: u,
+    value: b,
+    checked: f,
+    className: x,
+    customArea: s,
+    defaultChecked: k = !1,
+    disabled: a = !1,
+    hideLabel: j = !1,
+    hint: r,
+    invalid: N = !1,
+    isBold: g = !1,
+    hideUncheckedHint: l = !1,
+    onChange: _,
+    ...H
+  }, n) => {
+    const w = C(null), d = C(null), [D, A] = E(k), m = f !== void 0, c = m ? f : D;
+    L(() => {
+      d.current && l && ((d.current.style.height === "0px" || d.current.style.height === "") && c ? (d.current.style.height = `${d.current.scrollHeight}px`, d.current.style.opacity = "1") : (d.current.style.opacity = "0", d.current.style.height = "0px"));
+    }, [d, c]);
+    const p = P(j), W = h(
+      t.root,
+      {
+        [t.rootDisabled]: a,
+        [t.rootWithCustomArea]: !!s
+      },
+      x
+    ), B = h(t.label, {
+      [t.labelBold]: g,
+      // hide label only visually to keep them available for assistive technologies
+      [t.labelHidden]: p,
+      [t.labelWithCustomArea]: !!s
+    }), V = () => !l && r ? !0 : !!(l && r && c), I = h(t.hint, {
+      [t.hintHidden]: p,
+      [t.hintUncheckedHidden]: l,
+      [t.hintVisible]: V()
+    }), R = h(t.radio, {
+      [t.radioInvalid]: N
+    }), S = O(
+      (e) => {
+        if (a) {
+          e.preventDefault();
+          return;
+        }
+        m || A(e.target.checked), _ && _(e);
+      },
+      [a, m, _]
+    ), y = r ? `${v(u)}-${v(b)}-description` : void 0;
+    return /* @__PURE__ */ i.jsxs("label", { className: W, children: [
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: "radio",
+          value: b,
+          name: u,
+          className: t.input,
+          ref: (e) => {
+            typeof n == "function" ? n(e) : n !== null && (n.current = e), w.current = e;
+          },
+          onChange: S,
+          ...H,
+          disabled: a,
+          checked: c,
+          "aria-label": typeof o == "string" ? o : void 0,
+          "aria-describedby": y
+        }
+      ),
+      /* @__PURE__ */ i.jsx("span", { className: R, children: /* @__PURE__ */ i.jsx("div", { className: t.dot }) }),
+      /* @__PURE__ */ i.jsxs("span", { className: B, children: [
+        o,
+        s && /* @__PURE__ */ i.jsx("div", { className: t.customArea, children: s }),
+        /* @__PURE__ */ i.jsx("span", { id: y, className: I, ref: d, children: r })
+      ] })
+    ] });
+  }
+);
+it.displayName = "DSRadio";
+export {
+  it as DSRadio
+};

package/radio.d.ts

@@ -1 +1,2 @@
 export * from './components/Radio/Radio'
+export {}

package/radiogroup.DeU-HdlP.js

@@ -0,0 +1,10 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/Fieldset.Cjmkgxxk.js";
+import "./radio.DEILy_lV.js";
+import { D as a } from "./chunks/RadioGroup.Crj7NoOs.js";
+export {
+  a as DSRadioGroup
+};

package/radiogroup.d.ts

@@ -1 +1,2 @@
 export * from './components/RadioGroup/RadioGroup'
+export {}

package/{select.C4OZMB-V.js → select.BYraFJzz.js}

@@ -3,10 +3,10 @@ import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.DDn-yX4P.js";
-import "./chunks/Icon.C2o2seDb.js";
-import "./systemfeedback.ZzRUAVYX.js";
-import { D as s } from "./chunks/Select.fXeQJXtz.js";
+import "./asterisk.DpzETKdT.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import "./systemfeedback.C3Pfxxpp.js";
+import { D as s } from "./chunks/Select.E6gLFYLk.js";
 export {
   s as DSSelect
 };

package/select.d.ts

@@ -1 +1,2 @@
 export * from './components/Select/Select'
+export {}

package/skiptocontent.BxvpIB7H.js

@@ -0,0 +1,45 @@
+"use client";
+import { j as k } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as p } from "./chunks/index.CvOaL64Y.js";
+import { g as s } from "./chunks/helpers.B1JT5ShS.js";
+import "react";
+import { DSLink as c } from "./link.DREJAoPG.js";
+import './assets/skiptocontent.PTL3256m.css';const h = "ds-skip-to-content_root_uqkjt_1", m = "ds-skip-to-content_root--dark_uqkjt_8", r = {
+  root: h,
+  "root--dark": "ds-skip-to-content_root--dark_uqkjt_8",
+  rootDark: m
+}, _ = ({
+  children: e = "Skip to main content",
+  className: n,
+  targetElementId: t = "main",
+  theme: o = "light",
+  ...a
+}) => {
+  t.startsWith("#") && console.warn(
+    s(
+      "DSSkipToContent",
+      'The targetElementId should not start with a "#" character. Please provide the id of the element you want to skip to.'
+    )
+  ), (t.startsWith("http") || t.startsWith(".")) && console.warn(
+    s(
+      "DSSkipToContent",
+      'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
+    )
+  );
+  const i = p(r.root, n, {
+    [r.rootDark]: o === "dark"
+  });
+  return /* @__PURE__ */ k.jsx(
+    c,
+    {
+      ...a,
+      className: i,
+      href: `#${t}`,
+      theme: o,
+      children: e
+    }
+  );
+};
+export {
+  _ as DSSkipToContent
+};

package/skiptocontent.d.ts

@@ -1 +1,2 @@
 export * from './components/SkipToContent/SkipToContent'
+export {}

package/spinner.Bq97Og-6.js

@@ -0,0 +1,58 @@
+"use client";
+import { j as s } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as l } from "./chunks/index.CvOaL64Y.js";
+import { D as m } from "./chunks/Icon.BCmt_XBG.js";
+import './assets/spinner.2iWJWKyA.css';const _ = "ds-spinner_root_15hmy_1", d = "ds-spinner_root-size-small_15hmy_7", z = "ds-spinner_root-size-medium_15hmy_11", c = "ds-spinner_root-size-large_15hmy_15", h = "ds-spinner_root-size-x-large_15hmy_19", p = "ds-spinner_root-size-inherit_15hmy_23", S = "ds-spinner_rotate_15hmy_1", y = "ds-spinner_screenReaderOnly_15hmy_48", e = {
+  root: _,
+  "root-size-small": "ds-spinner_root-size-small_15hmy_7",
+  rootSizeSmall: d,
+  "root-size-medium": "ds-spinner_root-size-medium_15hmy_11",
+  rootSizeMedium: z,
+  "root-size-large": "ds-spinner_root-size-large_15hmy_15",
+  rootSizeLarge: c,
+  "root-size-x-large": "ds-spinner_root-size-x-large_15hmy_19",
+  rootSizeXLarge: h,
+  "root-size-inherit": "ds-spinner_root-size-inherit_15hmy_23",
+  rootSizeInherit: p,
+  rotate: S,
+  screenReaderOnly: y
+}, L = ({
+  aria: o,
+  className: i,
+  size: r = "small",
+  theme: t = "light",
+  ...n
+}) => {
+  const a = l(e.root, i, {
+    [e.rootSizeSmall]: r === "small",
+    [e.rootSizeMedium]: r === "medium",
+    [e.rootSizeLarge]: r === "large",
+    [e.rootSizeXLarge]: r === "x-large",
+    [e.rootSizeInherit]: r === "inherit"
+  });
+  return /* @__PURE__ */ s.jsxs(
+    "span",
+    {
+      className: a,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": (o == null ? void 0 : o["aria-label"]) || void 0,
+      ...n,
+      children: [
+        /* @__PURE__ */ s.jsx("span", { className: e.screenReaderOnly, children: " " }),
+        /* @__PURE__ */ s.jsx(
+          m,
+          {
+            name: "loading-spinner",
+            theme: t,
+            focusable: "false",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  L as DSSpinner
+};

package/spinner.d.ts

@@ -1 +1,2 @@
 export * from './components/Spinner/Spinner'
+export {}

package/styles/fonts/font-face.min.css

@@ -1 +1 @@
-@font-face{font-family:STIHL Contraface Digital Display Title;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalDisplayTitling.woff2) format("woff2"),url(./STIHLContrafaceDigitalDisplayTitling.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Bold;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText-Bold.woff2) format("woff2"),url(./STIHLContrafaceDigitalText-Bold.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Regular;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText.woff2) format("woff2"),url(./STIHLContrafaceDigitalText.woff) format("woff")}
+@font-face{font-family:STIHL Contraface Digital Display Title;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalDisplayTitling.woff2) format("woff2"),url(./STIHLContrafaceDigitalDisplayTitling.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Bold;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText-Bold.woff2) format("woff2"),url(./STIHLContrafaceDigitalText-Bold.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Regular;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText.woff2) format("woff2"),url(./STIHLContrafaceDigitalText.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Demi;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalTextDemi.woff2) format("woff2"),url(./STIHLContrafaceDigitalTextDemi.woff) format("woff")}

package/styles/scss/ds/index.scss

@@ -0,0 +1,19 @@
+@forward 'lib/animation';
+@forward 'lib/breakpoints';
+@forward 'lib/container-query';
+@forward 'lib/grid';
+@forward 'lib/grid-extended';
+@forward 'lib/grid-full';
+@forward 'lib/grid-main';
+@forward 'lib/grid-narrow';
+@forward 'lib/grid-sidebar';
+@forward 'lib/grid-sidebar-sidebar';
+@forward 'lib/heading';
+@forward 'lib/link';
+@forward 'lib/media-query';
+@forward 'lib/shadow';
+@forward 'lib/spacing';
+@forward 'lib/spacing-dynamic';
+@forward 'lib/text';
+@forward 'lib/theme';
+@forward 'lib/transition';

package/styles/scss/ds/lib/animation.scss

@@ -0,0 +1,21 @@
+$animation-duration-100: var(--ds-animation-duration, 100ms);
+$animation-duration-250: var(--ds-animation-duration, 250ms);
+$animation-duration-400: var(--ds-animation-duration, 400ms);
+
+$animation-durations: (
+  '100': $animation-duration-100,
+  '250': $animation-duration-250,
+  '400': $animation-duration-400,
+);
+
+$motion-functional-linear: linear;
+$motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
+$motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
+$motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
+
+$animation-easing-functions: (
+  'linear': $motion-functional-linear,
+  'ease-in': $motion-functional-ease-in,
+  'ease-out': $motion-functional-ease-out,
+  'ease-in-out': $motion-functional-ease-in-out,
+);

package/styles/scss/ds/lib/breakpoints.scss

@@ -0,0 +1,15 @@
+$breakpoint-base: 0;
+$breakpoint-s: 320;
+$breakpoint-m: 768;
+$breakpoint-l: 1024;
+$breakpoint-xl: 1536;
+$breakpoint-xxl: 1668;
+
+$breakpoints: (
+  'base': $breakpoint-base,
+  's': $breakpoint-s,
+  'm': $breakpoint-m,
+  'l': $breakpoint-l,
+  'xl': $breakpoint-xl,
+  'xxl': $breakpoint-xxl,
+);

package/styles/scss/ds/lib/container-query.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'breakpoints' as *;
+
+@mixin container-query-min($min: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) {
+    $value: #{map.get($breakpoints, $min)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min()]: Passed '#{$min}' breakpoint is not available in ds.container-query-min() mixin.";
+  }
+}
+
+@mixin container-query-max($max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $max) {
+    $value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (width < #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (width < #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-max()]: Passed '#{$max}' breakpoint is not available in ds.container-query-max() mixin.";
+  }
+}
+
+@mixin container-query-min-max($min: null, $max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+    $min-value: #{map.get($breakpoints, $min)}px;
+    $max-value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds.container-query-min-max() mixin.";
+  }
+}

package/styles/scss/ds/lib/ds-internal/_a11y.scss

@@ -0,0 +1,15 @@
+
+
+
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-indent: -999999px;
+  white-space: nowrap;
+}

package/styles/scss/{lib → ds/lib/ds-internal}/_focus.scss

@@ -1,12 +1,12 @@
-@import '_theme';
-@import '_high-contrast';
+@use '../theme' as *;
+@use '_high-contrast' as *;
 
 @mixin outline($theme, $offset, $thickness: 2px) {
   outline: $thickness solid;
   outline-color: if(
     $theme == 'light',
-    $ds-theme-light-border-color-focus,
-    $ds-theme-dark-border-color-focus
+    $theme-light-border-color-focus,
+    $theme-dark-border-color-focus
   );
   outline-offset: $offset;
 
@@ -16,29 +16,27 @@
   }
 }
 
-// Read more here: https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-@mixin ds-focus($theme: 'light', $offset: 2px, $thickness: 2px) {
+
+@mixin focus($theme: 'light', $offset: 2px, $thickness: 2px) {
   &:focus {
     @include outline($theme, $offset, $thickness);
   }
   @supports selector(:focus-visible) {
     &:focus {
-      /* revert all the above focus styles */
+      
       outline: revert;
       outline-offset: revert;
     }
     &:focus-visible {
-      /* and then reapply the styles here instead */
+      
       @include outline($theme, $offset, $thickness);
     }
   }
 }
 
-/**
-* Adds focus to the before pseudo element, removing the original focus behavior on the parent element
-*/
-@mixin ds-focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
-  // remove focus from actual element
+
+@mixin focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
+  
   &:focus,
   &:focus-visible {
     outline: none;
@@ -50,12 +48,12 @@
 
   @supports selector(:focus-visible) {
     &:focus::before {
-      /* revert all the above focus styles */
+      
       outline: revert;
       outline-offset: revert;
     }
     &:focus-visible::before {
-      /* and then reapply the styles here instead */
+      
       @include outline($theme, $offset, $thickness);
     }
   }

package/styles/scss/ds/lib/ds-internal/_heading.scss

@@ -0,0 +1,37 @@
+@use 'sass:string';
+@use '../media-query' as *;
+
+
+@mixin base-heading($fontFamily, $fontSize, $lineHeight) {
+  font-family: #{string.unquote(
+      $fontFamily +
+        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
+    )};
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+
+@mixin base-heading-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+
+  
+  font-size-adjust: 0.426;
+}
+
+
+@mixin base-heading-display-title($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+  
+  font-size-adjust: cap-height 0.68;
+}
+
+@mixin responsive-heading($min, $fontSize, $lineHeight) {
+  @include media-query-min($min: $min) {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+  }
+}

package/styles/scss/ds/lib/ds-internal/_helpers.scss

@@ -0,0 +1,32 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../spacing' as *;
+
+@function px-to-rem($pixels, $base-font-size: 16px) {
+  @return #{calc($pixels / $base-font-size)}rem;
+}
+
+
+@function urlEncodeHexColor($string) {
+  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
+    $hex: string.slice(color.ie-hex-str($string), 4);
+    $string: string.unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}
+
+
+
+
+
+@function adjust-spacing-for-border-1($spacing) {
+  @return #{calc($spacing - $spacing-1)};
+}
+
+@function adjust-spacing-for-border-2($spacing) {
+  @return #{calc($spacing - $spacing-2)};
+}

package/styles/scss/ds/lib/ds-internal/_high-contrast.scss

@@ -0,0 +1,6 @@
+
+@mixin high-contrast-media-query {
+  @media screen and (forced-colors: active) {
+    @content;
+  }
+}

package/styles/scss/ds/lib/ds-internal/_hover.scss

@@ -0,0 +1,6 @@
+
+@mixin hover-media-query {
+  @media (hover: hover) {
+    @content;
+  }
+}

package/styles/scss/ds/lib/ds-internal/_index.scss

@@ -0,0 +1,9 @@
+@forward '_a11y';
+@forward '_focus';
+@forward '_hover';
+@forward '_heading';
+@forward '_helpers';
+@forward '_high-contrast';
+@forward '_link';
+@forward '_spacing-dynamic';
+@forward '_text';

package/styles/scss/ds/lib/ds-internal/_link.scss

@@ -0,0 +1,62 @@
+@use '_focus' as *;
+@use '_helpers' as *;
+@use '_high-contrast' as *;
+@use '_hover' as *;
+
+
+
+
+
+@mixin link-variant(
+  $content-color,
+  $background-color-hover,
+  $content-color-hover,
+  $theme: 'light'
+) {
+  & {
+    color: $content-color;
+  }
+
+  &:link,
+  &:visited {
+    color: $content-color;
+  }
+
+  &:active {
+    background-color: $background-color-hover;
+    color: $content-color-hover;
+  }
+
+  @include hover-media-query {
+    &:hover {
+      background-color: $background-color-hover;
+      color: $content-color-hover;
+      @include high-contrast-media-query {
+        background-color: Canvas;
+      }
+    }
+  }
+
+  &[href^="http://"]::after,
+  &[href^="https://"]::after
+  {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  }
+
+  &[href^='#']::after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
+  }
+
+  
+  
+  @include focus($theme, $offset: 0);
+}
+
+
+@mixin link-underline {
+  text-decoration-skip-ink: auto;
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: currentColor;
+}