@pathscale/ui 1.2.5 → 1.2.7

package/dist/components/label/Label.js

@@ -1,11 +1,11 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { insert, mergeProps, spread, template } from "solid-js/web";
 import "./Label.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Label_classes_js_09cdb60c__ from "./Label.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label>");
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES } from "./Label.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<label>");
 const LabelRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -19,12 +19,12 @@ const LabelRoot = (props)=>{
     ]);
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$, mergeProps(others, {
             get ["for"] () {
                 return local.for ?? local.htmlFor;
             },
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Label_classes_js_09cdb60c__.CLASSES.base, local.isRequired && __WEBPACK_EXTERNAL_MODULE__Label_classes_js_09cdb60c__.CLASSES.flag.required, local.isDisabled && __WEBPACK_EXTERNAL_MODULE__Label_classes_js_09cdb60c__.CLASSES.flag.disabled, local.isInvalid && __WEBPACK_EXTERNAL_MODULE__Label_classes_js_09cdb60c__.CLASSES.flag.invalid, local.class, local.className);
+                return twMerge(CLASSES.base, local.isRequired && CLASSES.flag.required, local.isDisabled && CLASSES.flag.disabled, local.isInvalid && CLASSES.flag.invalid, local.class, local.className);
             },
             "data-slot": "label",
             get ["data-required"] () {
@@ -49,7 +49,7 @@ const LabelRoot = (props)=>{
                 return local.isInvalid ? "true" : void 0;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        insert(_el$, ()=>local.children);
         return _el$;
     })();
 };

package/dist/components/label/index.js

@@ -1,5 +1,2 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
-var __webpack_exports__Label = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__.Label;
-var __webpack_exports__LabelRoot = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__.LabelRoot;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__["default"];
-export { __webpack_exports__Label as Label, __webpack_exports__LabelRoot as LabelRoot, __webpack_exports__default as default };
+import external_Label_js_default, { Label, LabelRoot } from "./Label.js";
+export { Label, LabelRoot, external_Label_js_default as default };

package/dist/components/language-switcher/LanguageSwitcher.css

@@ -1,56 +1,56 @@
-@layer components {
-  .language-switcher {
-    display: inline-flex;
-  }
-
-  .language-switcher__trigger {
-    display: inline-flex;
-    min-height: 2rem;
-    min-width: 2.25rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-field);
-    border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
-    background: var(--color-base-100);
-    color: var(--color-base-content);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    transition:
-      background-color 150ms ease,
-      border-color 150ms ease,
-      color 150ms ease;
-  }
-
-  .language-switcher__trigger:hover {
-    background: var(--color-base-200);
-  }
-
-  .language-switcher__trigger:focus-visible {
-    outline: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
-    outline-offset: 2px;
-  }
-
-  .language-switcher__loading-icon {
-    animation: language-switcher-spin 0.9s linear infinite;
-  }
-
-  .language-switcher__locale {
-    letter-spacing: 0.04em;
-  }
-
-  .language-switcher__menu {
-    min-width: 8rem;
-  }
-
-  .language-switcher__item--selected {
-    background: var(--color-base-200);
-  }
-
-  @keyframes language-switcher-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
+@layer components {
+  .language-switcher {
+    display: inline-flex;
+  }
+
+  .language-switcher__trigger {
+    display: inline-flex;
+    min-height: 2rem;
+    min-width: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-field);
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+
+  .language-switcher__trigger:hover {
+    background: var(--color-base-200);
+  }
+
+  .language-switcher__trigger:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
+    outline-offset: 2px;
+  }
+
+  .language-switcher__loading-icon {
+    animation: language-switcher-spin 0.9s linear infinite;
+  }
+
+  .language-switcher__locale {
+    letter-spacing: 0.04em;
+  }
+
+  .language-switcher__menu {
+    min-width: 8rem;
+  }
+
+  .language-switcher__item--selected {
+    background: var(--color-base-200);
+  }
+
+  @keyframes language-switcher-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/components/language-switcher/LanguageSwitcher.js

@@ -1,13 +1,13 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import "./LanguageSwitcher.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__ from "../dropdown/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__ from "./LanguageSwitcher.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
-const LanguageSwitcher = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+import { For, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import index_js_default from "../dropdown/index.js";
+import external_icon_index_js_default from "../icon/index.js";
+import { CLASSES } from "./LanguageSwitcher.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+const LanguageSwitcher_LanguageSwitcher = (props)=>{
+    const [local, others] = splitProps(props, [
         "i18n",
         "class",
         "className",
@@ -25,8 +25,8 @@ const LanguageSwitcher = (props)=>{
         await local.i18n.setLocale(lang);
         local.onLanguageChange?.(lang);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.base, local.class, local.className);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+    const classes = ()=>twMerge(CLASSES.base, local.class, local.className);
+    return createComponent(index_js_default.Root, mergeProps(others, ()=>({
             class: classes()
         }), {
         get style () {
@@ -38,22 +38,22 @@ const LanguageSwitcher = (props)=>{
         },
         get children () {
             return [
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.trigger
+                createComponent(index_js_default.Trigger, mergeProps(()=>({
+                        class: CLASSES.trigger
                     }), {
                     get ["aria-label"] () {
                         return `${local.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        return createComponent(Show, {
                             get when () {
                                 return !local.i18n.isLoading;
                             },
                             get fallback () {
-                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                return createComponent(external_icon_index_js_default, mergeProps({
                                     name: "icon-[mdi--loading]"
                                 }, ()=>({
-                                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.loadingIcon
+                                        class: CLASSES.loadingIcon
                                     }), {
                                     width: 16,
                                     height: 16,
@@ -64,19 +64,19 @@ const LanguageSwitcher = (props)=>{
                             },
                             get children () {
                                 var _el$ = _tmpl$();
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.locale
+                                spread(_el$, mergeProps(()=>({
+                                        class: CLASSES.locale
                                     }), {
                                     "aria-hidden": "true"
                                 }), false, true);
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.i18n.locale.toUpperCase());
+                                insert(_el$, ()=>local.i18n.locale.toUpperCase());
                                 return _el$;
                             }
                         });
                     }
                 })),
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.menu
+                createComponent(index_js_default.Menu, mergeProps(()=>({
+                        class: CLASSES.menu
                     }), {
                     get align () {
                         return local.align;
@@ -85,14 +85,14 @@ const LanguageSwitcher = (props)=>{
                         return local.optionsLabel ?? "Language options";
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                        return createComponent(For, {
                             get each () {
                                 return local.i18n.languages;
                             },
-                            children: (lang)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                            children: (lang)=>createComponent(index_js_default.Item, mergeProps({
                                     onClick: ()=>handleSelect(lang.code)
                                 }, ()=>({
-                                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.item, isSelected(lang.code) && __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.itemSelected)
+                                        class: twMerge(CLASSES.item, isSelected(lang.code) && CLASSES.itemSelected)
                                     }), {
                                     get ["aria-current"] () {
                                         return isSelected(lang.code) ? "true" : void 0;
@@ -108,5 +108,5 @@ const LanguageSwitcher = (props)=>{
         }
     }));
 };
-const language_switcher_LanguageSwitcher = LanguageSwitcher;
-export { language_switcher_LanguageSwitcher as default };
+const LanguageSwitcher = LanguageSwitcher_LanguageSwitcher;
+export { LanguageSwitcher as default };

package/dist/components/language-switcher/createI18n.js

@@ -1,5 +1,5 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import { createComponent } from "solid-js/web";
+import { createContext, createSignal, useContext } from "solid-js";
 function getNestedValue(obj, path) {
     const keys = path.split(".");
     let value = obj;
@@ -16,9 +16,9 @@ function createI18n(options) {
             ...acc,
             [lang.code]: lang.name
         }), {});
-    const [localeSignal, setLocaleSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(defaultLanguage);
-    const [translations, setTranslations] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialTranslations);
-    const [isLoadingSignal, setIsLoading] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [localeSignal, setLocaleSignal] = createSignal(defaultLanguage);
+    const [translations, setTranslations] = createSignal(initialTranslations);
+    const [isLoadingSignal, setIsLoading] = createSignal(false);
     const t = (key)=>getNestedValue(translations(), key);
     const setLocale = async (lang)=>{
         if (!supportedCodes.includes(lang)) lang = defaultLanguage;
@@ -66,13 +66,13 @@ function createI18n(options) {
         supportedCodes
     };
 }
-const I18nContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const I18nContext = createContext();
 function useI18n() {
-    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(I18nContext);
+    const context = useContext(I18nContext);
     if (!context) throw new Error("useI18n must be used within an I18nProvider");
     return context.i18n;
 }
-const I18nProvider = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(I18nContext.Provider, {
+const I18nProvider = (props)=>createComponent(I18nContext.Provider, {
         get value () {
             return {
                 i18n: props.i18n

package/dist/components/language-switcher/index.js

@@ -1,8 +1,3 @@
-import * as __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__ from "./LanguageSwitcher.js";
-import * as __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__ from "./createI18n.js";
-var __webpack_exports__I18nContext = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nContext;
-var __webpack_exports__I18nProvider = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nProvider;
-var __webpack_exports__LanguageSwitcher = __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__["default"];
-var __webpack_exports__createI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.createI18n;
-var __webpack_exports__useI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.useI18n;
-export { __webpack_exports__I18nContext as I18nContext, __webpack_exports__I18nProvider as I18nProvider, __webpack_exports__LanguageSwitcher as LanguageSwitcher, __webpack_exports__createI18n as createI18n, __webpack_exports__useI18n as useI18n };
+import external_LanguageSwitcher_js_default from "./LanguageSwitcher.js";
+import { I18nContext, I18nProvider, createI18n, useI18n } from "./createI18n.js";
+export { I18nContext, I18nProvider, external_LanguageSwitcher_js_default as LanguageSwitcher, createI18n, useI18n };

package/dist/components/link/Link.css

@@ -1,131 +1,131 @@
-@layer components {
-  .link {
-    position: relative;
-    display: inline-flex;
-    width: fit-content;
-    height: fit-content;
-    align-items: center;
-    border-radius: 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.25rem;
-    color: var(--color-link, var(--color-accent));
-    text-decoration-line: underline;
-    text-decoration-thickness: 1.5px;
-    text-decoration-color: var(
-      --color-separator-tertiary,
-      color-mix(in oklab, var(--color-base-content) 22%, transparent)
-    );
-    text-underline-offset: 0.25rem;
-    cursor: var(--cursor-interactive, pointer);
-    -webkit-tap-highlight-color: transparent;
-    transition:
-      color 100ms var(--ease-smooth, ease),
-      text-decoration-color 100ms var(--ease-out, ease),
-      background-color 150ms var(--ease-smooth, ease),
-      box-shadow 150ms var(--ease-out, ease),
-      opacity 100ms var(--ease-out, ease);
-  }
-
-  .link--default {
-    color: var(--color-link, var(--color-accent));
-  }
-
-  .link--underline-always {
-    text-decoration-line: underline;
-  }
-
-  .link--underline-hover {
-    text-decoration-line: none;
-  }
-
-  .link--underline-none {
-    text-decoration-line: none;
-  }
-
-  .link:visited {
-    color: var(
-      --color-link-visited,
-      color-mix(in oklab, var(--color-link, var(--color-accent)) 84%, black)
-    );
-  }
-
-  @media (hover: hover) {
-    .link:hover,
-    .link[data-hovered="true"] {
-      text-decoration-color: var(
-        --color-muted,
-        color-mix(in oklab, var(--color-base-content) 50%, transparent)
-      );
-    }
-
-    .link--underline-hover:hover,
-    .link--underline-hover[data-hovered="true"] {
-      text-decoration-line: underline;
-    }
-  }
-
-  .link:focus-visible,
-  .link[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-    text-decoration-color: currentColor;
-  }
-
-  .link--disabled,
-  .link[aria-disabled="true"] {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: var(--disabled-opacity, 0.6);
-    text-decoration-line: none;
-  }
-
-  .link__icon {
-    pointer-events: none;
-    display: inline-flex;
-    width: 0.5rem;
-    height: 0.5rem;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: currentColor;
-    opacity: 0.6;
-    transition: opacity 150ms var(--ease-out, ease);
-  }
-
-  .link__icon-default {
-    display: block;
-    width: 100%;
-    height: 100%;
-    transform: translateY(1px);
-  }
-
-  .link__icon[data-default-icon="true"] {
-    margin-left: 0.25rem;
-    padding-bottom: 0.125rem;
-  }
-
-  @media (hover: hover) {
-    .link:hover .link__icon,
-    .link[data-hovered="true"] .link__icon {
-      opacity: 1;
-    }
-  }
-
-  .link:focus-visible .link__icon,
-  .link[data-focus-visible="true"] .link__icon {
-    opacity: 1;
-  }
-
-  .link.button {
-    gap: 0;
-    text-decoration-line: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .link,
-    .link__icon {
-      transition: none;
-    }
-  }
-}
+@layer components {
+  .link {
+    position: relative;
+    display: inline-flex;
+    width: fit-content;
+    height: fit-content;
+    align-items: center;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--color-link, var(--color-accent));
+    text-decoration-line: underline;
+    text-decoration-thickness: 1.5px;
+    text-decoration-color: var(
+      --color-separator-tertiary,
+      color-mix(in oklab, var(--color-base-content) 22%, transparent)
+    );
+    text-underline-offset: 0.25rem;
+    cursor: var(--cursor-interactive, pointer);
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      color 100ms var(--ease-smooth, ease),
+      text-decoration-color 100ms var(--ease-out, ease),
+      background-color 150ms var(--ease-smooth, ease),
+      box-shadow 150ms var(--ease-out, ease),
+      opacity 100ms var(--ease-out, ease);
+  }
+
+  .link--default {
+    color: var(--color-link, var(--color-accent));
+  }
+
+  .link--underline-always {
+    text-decoration-line: underline;
+  }
+
+  .link--underline-hover {
+    text-decoration-line: none;
+  }
+
+  .link--underline-none {
+    text-decoration-line: none;
+  }
+
+  .link:visited {
+    color: var(
+      --color-link-visited,
+      color-mix(in oklab, var(--color-link, var(--color-accent)) 84%, black)
+    );
+  }
+
+  @media (hover: hover) {
+    .link:hover,
+    .link[data-hovered="true"] {
+      text-decoration-color: var(
+        --color-muted,
+        color-mix(in oklab, var(--color-base-content) 50%, transparent)
+      );
+    }
+
+    .link--underline-hover:hover,
+    .link--underline-hover[data-hovered="true"] {
+      text-decoration-line: underline;
+    }
+  }
+
+  .link:focus-visible,
+  .link[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    text-decoration-color: currentColor;
+  }
+
+  .link--disabled,
+  .link[aria-disabled="true"] {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity, 0.6);
+    text-decoration-line: none;
+  }
+
+  .link__icon {
+    pointer-events: none;
+    display: inline-flex;
+    width: 0.5rem;
+    height: 0.5rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+    opacity: 0.6;
+    transition: opacity 150ms var(--ease-out, ease);
+  }
+
+  .link__icon-default {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform: translateY(1px);
+  }
+
+  .link__icon[data-default-icon="true"] {
+    margin-left: 0.25rem;
+    padding-bottom: 0.125rem;
+  }
+
+  @media (hover: hover) {
+    .link:hover .link__icon,
+    .link[data-hovered="true"] .link__icon {
+      opacity: 1;
+    }
+  }
+
+  .link:focus-visible .link__icon,
+  .link[data-focus-visible="true"] .link__icon {
+    opacity: 1;
+  }
+
+  .link.button {
+    gap: 0;
+    text-decoration-line: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .link,
+    .link__icon {
+      transition: none;
+    }
+  }
+}