@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/join/Join.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "join";
+    readonly flag: {
+        readonly vertical: "join-vertical";
+        readonly horizontal: "join-horizontal";
+        readonly responsive: "join-vertical lg:join-horizontal";
+    };
+};

package/dist/components/join/Join.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "join",
+    flag: {
+        vertical: "join-vertical",
+        horizontal: "join-horizontal",
+        responsive: "join-vertical lg:join-horizontal"
+    }
+};
+export { CLASSES };

package/dist/components/join/Join.js

@@ -2,6 +2,7 @@ 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 * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__ from "./Join.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Join = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,17 +16,16 @@ const Join = (props)=>{
         "children"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("join", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "join-vertical": !local.responsive && local.vertical,
-            "join-horizontal": !local.responsive && local.horizontal,
-            "join-vertical lg:join-horizontal": local.responsive
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.vertical]: !local.responsive && local.vertical,
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
+            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.responsive]: local.responsive
         }), local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: classes()
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },

package/dist/components/kbd/Kbd.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "kbd";
+    readonly variant: {
+        readonly default: "kbd--default";
+        readonly light: "kbd--light";
+    };
+    readonly slot: {
+        readonly abbr: "kbd__abbr";
+        readonly content: "kbd__content";
+    };
+};

package/dist/components/kbd/Kbd.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "kbd",
+    variant: {
+        default: "kbd--default",
+        light: "kbd--light"
+    },
+    slot: {
+        abbr: "kbd__abbr",
+        content: "kbd__content"
+    }
+};
+export { CLASSES };

package/dist/components/kbd/Kbd.css

@@ -0,0 +1,60 @@
+@layer components {
+  .kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.125rem;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    padding-inline: 0.5rem;
+    border-radius: 0.5rem;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    font-family: var(
+      --font-sans,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif
+    );
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    word-spacing: -0.25rem;
+  }
+
+  .kbd--default {
+    background-color: var(--color-default, var(--color-base-200));
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 72%, transparent)
+    );
+    border: 1px solid
+      color-mix(in oklab, var(--color-base-content) 16%, transparent);
+  }
+
+  .kbd--light {
+    background-color: transparent;
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 72%, transparent)
+    );
+    border: 1px solid transparent;
+  }
+
+  .kbd__abbr {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    font-style: normal;
+  }
+
+  .kbd__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/components/kbd/Kbd.d.ts

@@ -1,5 +1,29 @@
-import "./kbd.css";
-import { type ComponentProps } from "solid-js";
-export type KbdProps = ComponentProps<"kbd">;
-declare const Kbd: (props: KbdProps) => import("solid-js").JSX.Element;
+import "./Kbd.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type KbdVariant = "default" | "light";
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export declare const kbdKeysMap: Record<KbdKey, string>;
+export declare const kbdKeysLabelMap: Record<KbdKey, string>;
+export type KbdRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    variant?: KbdVariant;
+};
+export type KbdAbbrProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    keyValue: KbdKey;
+};
+export type KbdContentProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const KbdRoot: Component<KbdRootProps>;
+declare const KbdAbbr: Component<KbdAbbrProps>;
+declare const KbdContent: Component<KbdContentProps>;
+type KbdComponent = Component<KbdRootProps> & {
+    Root: Component<KbdRootProps>;
+    Abbr: Component<KbdAbbrProps>;
+    Content: Component<KbdContentProps>;
+};
+declare const Kbd: KbdComponent;
+export type KbdProps = KbdRootProps;
+export { KbdRoot, KbdAbbr, KbdContent };
 export default Kbd;

package/dist/components/kbd/Kbd.js

@@ -1,22 +1,148 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./kbd.css";
+import "./Kbd.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_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<kbd>");
-const Kbd = (props)=>{
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class"
+import * as __WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__ from "./Kbd.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<kbd>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<abbr>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const kbdKeysMap = {
+    command: "\u2318",
+    shift: "\u21E7",
+    ctrl: "\u2303",
+    option: "\u2325",
+    enter: "\u21B5",
+    delete: "\u232B",
+    escape: "\u238B",
+    tab: "\u21E5",
+    capslock: "\u21EA",
+    up: "\u2191",
+    right: "\u2192",
+    down: "\u2193",
+    left: "\u2190",
+    pageup: "\u21DE",
+    pagedown: "\u21DF",
+    home: "\u2196",
+    end: "\u2198",
+    help: "?",
+    space: "\u2423",
+    fn: "Fn",
+    win: "\u2318",
+    alt: "\u2325"
+};
+const kbdKeysLabelMap = {
+    command: "Command",
+    shift: "Shift",
+    ctrl: "Control",
+    option: "Option",
+    enter: "Enter",
+    delete: "Delete",
+    escape: "Escape",
+    tab: "Tab",
+    capslock: "Caps Lock",
+    up: "Up",
+    right: "Right",
+    down: "Down",
+    left: "Left",
+    pageup: "Page Up",
+    pagedown: "Page Down",
+    home: "Home",
+    end: "End",
+    help: "Help",
+    space: "Space",
+    fn: "Fn",
+    win: "Win",
+    alt: "Alt"
+};
+const KbdRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "children",
+        "variant"
     ]);
+    const variant = ()=>local.variant ?? "default";
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("kbd", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.variant[variant()], local.class, local.className)
+            }), {
+            "data-slot": "kbd",
+            get ["data-variant"] () {
+                return variant();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
             }
-        }), false, false);
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
     })();
 };
+const KbdAbbr = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "keyValue",
+        "title"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.slot.abbr, local.class, local.className)
+            }), {
+            get title () {
+                return local.title ?? kbdKeysLabelMap[local.keyValue];
+            },
+            "data-slot": "kbd-abbr",
+            get ["data-key"] () {
+                return local.keyValue;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>kbdKeysMap[local.keyValue]);
+        return _el$2;
+    })();
+};
+const KbdContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "children"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.slot.content, local.class, local.className)
+            }), {
+            "data-slot": "kbd-content",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const Kbd = Object.assign(KbdRoot, {
+    Root: KbdRoot,
+    Abbr: KbdAbbr,
+    Content: KbdContent
+});
 const kbd_Kbd = Kbd;
-export { kbd_Kbd as default };
+export { KbdAbbr, KbdContent, KbdRoot, kbd_Kbd as default, kbdKeysLabelMap, kbdKeysMap };

package/dist/components/kbd/index.d.ts

@@ -1 +1 @@
-export { default, type KbdProps } from "./Kbd";
+export { default, KbdRoot, KbdAbbr, KbdContent, kbdKeysMap, kbdKeysLabelMap, type KbdProps, type KbdRootProps, type KbdAbbrProps, type KbdContentProps, type KbdVariant, type KbdKey, } from "./Kbd";

package/dist/components/kbd/index.js

@@ -1,3 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__ from "./Kbd.js";
+var __webpack_exports__KbdAbbr = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdAbbr;
+var __webpack_exports__KbdContent = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdContent;
+var __webpack_exports__KbdRoot = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdRoot;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__["default"];
-export { __webpack_exports__default as default };
+var __webpack_exports__kbdKeysLabelMap = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.kbdKeysLabelMap;
+var __webpack_exports__kbdKeysMap = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.kbdKeysMap;
+export { __webpack_exports__KbdAbbr as KbdAbbr, __webpack_exports__KbdContent as KbdContent, __webpack_exports__KbdRoot as KbdRoot, __webpack_exports__default as default, __webpack_exports__kbdKeysLabelMap as kbdKeysLabelMap, __webpack_exports__kbdKeysMap as kbdKeysMap };

package/dist/components/label/Label.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "label";
+    readonly flag: {
+        readonly required: "label--required";
+        readonly disabled: "label--disabled";
+        readonly invalid: "label--invalid";
+    };
+};

package/dist/components/label/Label.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "label",
+    flag: {
+        required: "label--required",
+        disabled: "label--disabled",
+        invalid: "label--invalid"
+    }
+};
+export { CLASSES };

package/dist/components/label/Label.css

@@ -0,0 +1,30 @@
+@layer components {
+  .label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-foreground);
+  }
+
+  .label--required::after,
+  [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"])
+    > .label::after,
+  [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label::after {
+    margin-inline-start: 0.125rem;
+    color: var(--color-danger);
+    content: "*";
+  }
+
+  .label--disabled,
+  [data-disabled="true"] .label {
+    opacity: var(--disabled-opacity, 0.5);
+    cursor: var(--cursor-disabled, not-allowed);
+    pointer-events: none;
+  }
+
+  .label--invalid,
+  [data-invalid="true"] .label,
+  [aria-invalid="true"] .label {
+    color: var(--color-danger);
+  }
+}

package/dist/components/label/Label.d.ts

@@ -0,0 +1,17 @@
+import "./Label.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type LabelRootProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & IComponentBaseProps & {
+    for?: string;
+    htmlFor?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+declare const LabelRoot: Component<LabelRootProps>;
+declare const Label: Component<LabelRootProps> & {
+    Root: Component<LabelRootProps>;
+};
+export default Label;
+export { Label, LabelRoot };
+export type { LabelRootProps as LabelProps };

package/dist/components/label/Label.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ 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>");
+const LabelRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "for",
+        "htmlFor",
+        "isRequired",
+        "isDisabled",
+        "isInvalid"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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);
+            },
+            "data-slot": "label",
+            get ["data-required"] () {
+                return local.isRequired ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["data-invalid"] () {
+                return local.isInvalid ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return local.isInvalid ? "true" : void 0;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Label = Object.assign(LabelRoot, {
+    Root: LabelRoot
+});
+const label_Label = Label;
+export { Label, LabelRoot, label_Label as default };

package/dist/components/label/index.d.ts

@@ -0,0 +1 @@
+export { default, Label, LabelRoot, type LabelProps, type LabelRootProps, } from "./Label";

package/dist/components/label/index.js

@@ -0,0 +1,5 @@
+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 };

package/dist/components/language-switcher/LanguageSwitcher.classes.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    readonly base: "language-switcher";
+    readonly trigger: "language-switcher__trigger";
+    readonly loadingIcon: "language-switcher__loading-icon";
+    readonly locale: "language-switcher__locale";
+    readonly menu: "language-switcher__menu";
+    readonly item: "language-switcher__item";
+    readonly itemSelected: "language-switcher__item--selected";
+};

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

@@ -0,0 +1,10 @@
+const CLASSES = {
+    base: "language-switcher",
+    trigger: "language-switcher__trigger",
+    loadingIcon: "language-switcher__loading-icon",
+    locale: "language-switcher__locale",
+    menu: "language-switcher__menu",
+    item: "language-switcher__item",
+    itemSelected: "language-switcher__item--selected"
+};
+export { CLASSES };

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

@@ -0,0 +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);
+    }
+  }
+}

package/dist/components/language-switcher/LanguageSwitcher.d.ts

@@ -1,3 +1,4 @@
+import "./LanguageSwitcher.css";
 import { type Component } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { I18nStore } from "./createI18n";