@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/immersive-landing/types.d.ts

@@ -1,5 +1,5 @@
 import type { JSX, Accessor } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export interface UseImmersiveLandingOptions {
     pages: readonly string[];
     initialPage?: string;
@@ -35,7 +35,7 @@ export interface ImmersiveLandingContextValue {
     pages: readonly string[];
     appVersion?: string;
 }
-export interface ImmersiveLandingProps extends IComponentBaseProps {
+export interface ImmersiveLandingProps extends UIBaseProps {
     pages: readonly string[];
     initialPage?: string;
     currentPage?: Accessor<string>;
@@ -55,17 +55,17 @@ export interface ImmersiveLandingProps extends IComponentBaseProps {
     showCookieConsent?: boolean;
     showFirefoxBanner?: boolean;
 }
-export interface ImmersiveLandingPageProps extends IComponentBaseProps {
+export interface ImmersiveLandingPageProps extends UIBaseProps {
     id: string;
     children: JSX.Element;
 }
-export interface ImmersiveLandingArrowsProps extends IComponentBaseProps {
+export interface ImmersiveLandingArrowsProps extends UIBaseProps {
     onPrev: () => void;
     onNext: () => void;
     isFirstPage: boolean;
     isLastPage: boolean;
 }
-export interface ImmersiveLandingNavigationProps extends IComponentBaseProps {
+export interface ImmersiveLandingNavigationProps extends UIBaseProps {
     pages: readonly string[];
     currentPageIndex: number;
     onPageDotClick: (pageId: string) => void;

package/dist/components/input/Input.css

@@ -35,7 +35,7 @@
     align-items: center;
     gap: 0.5rem;
     border-radius: 0.75rem;
-    border: 1px solid var(--color-base-300);
+    border: var(--border, 1px) solid var(--color-base-300);
     background-color: var(--color-base-100);
     color: var(--color-base-content);
     box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;

package/dist/components/input/Input.generated.d.ts

@@ -1,32 +1,28 @@
 import "./Input.css";
 import { type Component, type JSX } from "solid-js";
+import type { State, Issue } from "../vocabulary";
 type InputSize = "sm" | "md" | "lg";
 type InputRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
     size?: InputSize;
     fullWidth?: boolean;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
+    state?: State;
+    issues?: Issue[];
     dataTheme?: string;
-    className?: string;
 };
 type InputFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "children" | "disabled"> & {
     size?: InputSize;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
+    issues?: Issue[];
     fullWidth?: boolean;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
     dataTheme?: string;
-    className?: string;
-};
-type InputLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement> & {
-    className?: string;
 };
+type InputLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement> & {};
 type InputHelperProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
     invalid?: boolean;
-    className?: string;
 };
 type InputProps = Omit<InputFieldProps, "id" | "aria-describedby"> & {
     id?: string;

package/dist/components/input/Input.generated.js

@@ -4,23 +4,23 @@ import "./Input.css";
 import { Show, createContext, createUniqueId, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./Input.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div><input>"), _tmpl$4 = /*#__PURE__*/ template("<label>"), _tmpl$5 = /*#__PURE__*/ template("<p>");
 const InputContext = createContext();
 const __solidLayoutInputRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "size",
         "fullWidth",
-        "isDisabled",
-        "isInvalid",
+        "state",
+        "issues",
         "dataTheme"
     ]);
     const baseId = createUniqueId();
     const size = ()=>local.size ?? "md";
-    const isDisabled = ()=>Boolean(local.isDisabled);
-    const isInvalid = ()=>Boolean(local.isInvalid);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
     const fullWidth = ()=>Boolean(local.fullWidth);
     return createComponent(InputContext.Provider, {
         value: {
@@ -34,7 +34,7 @@ const __solidLayoutInputRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, fullWidth() && CLASSES.flag.fullWidthRoot, local.class, local.className)
+                    class: twMerge(CLASSES.base, fullWidth() && CLASSES.flag.fullWidthRoot, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -55,11 +55,10 @@ const __solidLayoutInputField = (_stable, p)=>{
     const ctx = useContext(InputContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "size",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
+        "issues",
         "fullWidth",
         "startIcon",
         "endIcon",
@@ -68,12 +67,12 @@ const __solidLayoutInputField = (_stable, p)=>{
         "aria-invalid"
     ]);
     const size = ()=>local.size ?? ctx?.size() ?? "md";
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(ctx?.isDisabled());
-    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(ctx?.isInvalid());
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled) || Boolean(ctx?.isDisabled());
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues)) || Boolean(local["aria-invalid"]) || Boolean(ctx?.isInvalid());
     const fullWidth = ()=>Boolean(local.fullWidth) || Boolean(ctx?.fullWidth());
     const inputId = ()=>local.id ?? ctx?.fieldId();
     const ariaInvalid = ()=>local["aria-invalid"] ?? (isInvalid() ? true : void 0);
-    const controlClasses = ()=>twMerge(CLASSES.slot.control, CLASSES.size[size()], fullWidth() && CLASSES.flag.fullWidthControl, isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className);
+    const controlClasses = ()=>twMerge(CLASSES.slot.control, CLASSES.size[size()], fullWidth() && CLASSES.flag.fullWidthControl, isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class);
     return (()=>{
         var _el$2 = _tmpl$3(), _el$4 = _el$2.firstChild;
         spread(_el$2, mergeProps(()=>({
@@ -150,7 +149,6 @@ const __solidLayoutInputLabel = (_stable, p)=>{
     const ctx = useContext(InputContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "for",
         "children"
     ]);
@@ -161,7 +159,7 @@ const __solidLayoutInputLabel = (_stable, p)=>{
                 return local.for ?? ctx?.fieldId();
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.label, local.class, local.className)
+                class: twMerge(CLASSES.slot.label, local.class)
             }), {
             "data-slot": "input-label"
         }), false, true);
@@ -178,7 +176,6 @@ const __solidLayoutInputHelper = (_stable, p)=>{
     const ctx = useContext(InputContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "invalid",
         "id",
         "children"
@@ -191,7 +188,7 @@ const __solidLayoutInputHelper = (_stable, p)=>{
                 return local.id ?? ctx?.helperId();
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.helper, invalid() && CLASSES.flag.helperInvalid, local.class, local.className)
+                class: twMerge(CLASSES.slot.helper, invalid() && CLASSES.flag.helperInvalid, local.class)
             }), {
             "data-slot": "input-helper"
         }), false, true);
@@ -210,20 +207,19 @@ const __solidLayoutInputBase = (_stable, p)=>{
         "id",
         "size",
         "fullWidth",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
+        "issues",
         "label",
         "helperText",
         "errorMessage",
         "class",
-        "className",
         "aria-invalid",
         "dataTheme"
     ]);
     const inputId = ()=>local.id ?? `${generatedId}-input`;
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || null != local.errorMessage;
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues)) || Boolean(local["aria-invalid"]) || null != local.errorMessage;
     const helperContent = ()=>local.errorMessage ?? local.helperText;
     const hasHelper = ()=>null != helperContent();
     const helperId = ()=>`${inputId()}-helper`;
@@ -234,11 +230,11 @@ const __solidLayoutInputBase = (_stable, p)=>{
         get fullWidth () {
             return local.fullWidth ?? true;
         },
-        get isDisabled () {
-            return isDisabled();
+        get state () {
+            return isDisabled() ? "disabled" : void 0;
         },
-        get isInvalid () {
-            return isInvalid();
+        get issues () {
+            return local.issues;
         },
         get dataTheme () {
             return local.dataTheme;
@@ -264,11 +260,11 @@ const __solidLayoutInputBase = (_stable, p)=>{
                     get size () {
                         return local.size;
                     },
-                    get isDisabled () {
-                        return isDisabled();
+                    get state () {
+                        return isDisabled() ? "disabled" : void 0;
                     },
-                    get isInvalid () {
-                        return isInvalid();
+                    get issues () {
+                        return local.issues;
                     },
                     get ["aria-describedby"] () {
                         return memo(()=>!!hasHelper())() ? helperId() : void 0;
@@ -276,9 +272,6 @@ const __solidLayoutInputBase = (_stable, p)=>{
                 }, ()=>({
                         class: local.class
                     }), {
-                    get className () {
-                        return local.className;
-                    },
                     get dataTheme () {
                         return local.dataTheme;
                     }

package/dist/components/input-otp/InputOTP.generated.d.ts

@@ -1,12 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./InputOTP.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type InputOTPVariant = "primary" | "secondary";
 export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
 export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
-export type InputOTPRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onInput"> & IComponentBaseProps & {
+export type InputOTPRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onInput"> & UIBaseProps & {
     children?: JSX.Element;
     value?: string;
     defaultValue?: string;
@@ -17,19 +17,19 @@ export type InputOTPRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "childr
     pattern?: string;
     name?: string;
     autoFocus?: boolean;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
+    issues?: Issue[];
     inputClassName?: string;
     inputMode?: JSX.InputHTMLAttributes<HTMLInputElement>["inputMode"];
 };
-export type InputOTPGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type InputOTPGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
-export type InputOTPSlotProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type InputOTPSlotProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     index: number;
 };
-export type InputOTPSeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type InputOTPSeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
 declare const InputOTPRoot: __LayoutComponent<InputOTPRootProps>;

package/dist/components/input-otp/InputOTP.generated.js

@@ -4,6 +4,7 @@ import "./InputOTP.css";
 import { For, Show, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./InputOTP.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><input>"), _tmpl$2 = /*#__PURE__*/ template("<div>");
 const REGEXP_ONLY_DIGITS = "^\\d+$";
 const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
@@ -18,7 +19,6 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "value",
@@ -30,9 +30,9 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         "pattern",
         "name",
         "autoFocus",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
+        "issues",
         "inputClassName",
         "inputMode",
         "onMouseDown",
@@ -81,8 +81,8 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         }, (_, index)=>current[index] ?? "");
     });
     const variant = ()=>local.variant ?? "primary";
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues)) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
     const setValue = (nextValue)=>{
         const normalized = sanitizeValue(nextValue);
         const current = value();
@@ -182,7 +182,7 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
                 if ("function" == typeof local.ref) local.ref(node);
             }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class)
                 }), {
                 "data-slot": "input-otp",
                 get ["data-disabled"] () {
@@ -267,14 +267,13 @@ const __solidLayoutInputOTPGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$3 = _tmpl$2();
         spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, local.class, local.className)
+                class: twMerge(CLASSES.Group.base, local.class)
             }), {
             "data-slot": "input-otp-group",
             get ["data-theme"] () {
@@ -298,7 +297,6 @@ const __solidLayoutInputOTPSlot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "index",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onMouseDown"
@@ -315,7 +313,7 @@ const __solidLayoutInputOTPSlot = (_stable, p)=>{
     return (()=>{
         var _el$4 = _tmpl$2();
         spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Slot.base, local.class, local.className)
+                class: twMerge(CLASSES.Slot.base, local.class)
             }), {
             "data-slot": "input-otp-slot",
             get ["data-active"] () {
@@ -379,14 +377,13 @@ const __solidLayoutInputOTPSeparator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$7 = _tmpl$2();
         spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Separator.base, local.class, local.className)
+                class: twMerge(CLASSES.Separator.base, local.class)
             }), {
             "data-slot": "input-otp-separator",
             get ["data-theme"] () {

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

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type JoinProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+import type { UIBaseProps } from "../vocabulary";
+export type JoinProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     responsive?: boolean;
     vertical?: boolean;
     horizontal?: boolean;

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

@@ -11,7 +11,6 @@ const __solidLayoutJoin = (_stable, p)=>{
         "vertical",
         "horizontal",
         "class",
-        "className",
         "dataTheme",
         "style",
         "children"
@@ -21,7 +20,7 @@ const __solidLayoutJoin = (_stable, p)=>{
             [CLASSES.flag.vertical]: !local.responsive && local.vertical,
             [CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
             [CLASSES.flag.responsive]: local.responsive
-        }), local.class, local.className));
+        }), local.class));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({

package/dist/components/kbd/Kbd.css

@@ -31,7 +31,7 @@
       --color-muted,
       color-mix(in oklab, var(--color-base-content) 72%, transparent)
     );
-    border: 1px solid
+    border: var(--border, 1px) solid
       color-mix(in oklab, var(--color-base-content) 16%, transparent);
   }
 
@@ -41,7 +41,7 @@
       --color-muted,
       color-mix(in oklab, var(--color-base-content) 72%, transparent)
     );
-    border: 1px solid transparent;
+    border: var(--border, 1px) solid transparent;
   }
 
   .kbd__abbr {

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

@@ -1,19 +1,19 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Kbd.css";
 import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 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 & {
+export type KbdRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     variant?: KbdVariant;
 };
-export type KbdAbbrProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+export type KbdAbbrProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & UIBaseProps & {
     keyValue: KbdKey;
 };
-export type KbdContentProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type KbdContentProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
 declare const KbdRoot: __LayoutComponent<KbdRootProps>;

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

@@ -56,7 +56,6 @@ const kbdKeysLabelMap = {
 const __solidLayoutKbdRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "children",
@@ -66,7 +65,7 @@ const __solidLayoutKbdRoot = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class)
             }), {
             "data-slot": "kbd",
             get ["data-variant"] () {
@@ -91,7 +90,6 @@ const KbdRoot = defineComponent({
 const __solidLayoutKbdAbbr = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "keyValue",
@@ -100,7 +98,7 @@ const __solidLayoutKbdAbbr = (_stable, p)=>{
     return (()=>{
         var _el$2 = _tmpl$2();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.abbr, local.class, local.className)
+                class: twMerge(CLASSES.slot.abbr, local.class)
             }), {
             get title () {
                 return local.title ?? kbdKeysLabelMap[local.keyValue];
@@ -128,7 +126,6 @@ const KbdAbbr = defineComponent({
 const __solidLayoutKbdContent = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "children"
@@ -136,7 +133,7 @@ const __solidLayoutKbdContent = (_stable, p)=>{
     return (()=>{
         var _el$3 = _tmpl$3();
         spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.content, local.class, local.className)
+                class: twMerge(CLASSES.slot.content, local.class)
             }), {
             "data-slot": "kbd-content",
             get ["data-theme"] () {

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

@@ -1,13 +1,13 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Label.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type LabelRootProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & IComponentBaseProps & {
+import type { UIBaseProps, State, Issue } from "../vocabulary";
+export type LabelRootProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & UIBaseProps & {
     for?: string;
     htmlFor?: string;
-    isRequired?: boolean;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
+    required?: boolean;
+    state?: State;
+    issues?: Issue[];
 };
 declare const LabelRoot: __LayoutComponent<LabelRootProps>;
 declare const Label: __LayoutComponent<LabelRootProps> & {

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

@@ -4,19 +4,19 @@ import "./Label.css";
 import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./Label.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<label>");
 const __solidLayoutLabelRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "for",
         "htmlFor",
-        "isRequired",
-        "isDisabled",
-        "isInvalid"
+        "required",
+        "state",
+        "issues"
     ]);
     return (()=>{
         var _el$ = _tmpl$();
@@ -25,17 +25,17 @@ const __solidLayoutLabelRoot = (_stable, p)=>{
                 return local.for ?? local.htmlFor;
             },
             get ["class"] () {
-                return twMerge(CLASSES.base, local.isRequired && CLASSES.flag.required, local.isDisabled && CLASSES.flag.disabled, local.isInvalid && CLASSES.flag.invalid, local.class, local.className);
+                return twMerge(CLASSES.base, local.required && CLASSES.flag.required, "disabled" === local.state && CLASSES.flag.disabled, "invalid" === resolveState(local.state, local.issues) && CLASSES.flag.invalid, local.class);
             },
             "data-slot": "label",
             get ["data-required"] () {
-                return local.isRequired ? "true" : void 0;
+                return local.required ? "true" : void 0;
             },
             get ["data-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             },
             get ["data-invalid"] () {
-                return local.isInvalid ? "true" : void 0;
+                return "invalid" === resolveState(local.state, local.issues) ? "true" : void 0;
             },
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -44,10 +44,10 @@ const __solidLayoutLabelRoot = (_stable, p)=>{
                 return local.style;
             },
             get ["aria-disabled"] () {
-                return local.isDisabled ? "true" : void 0;
+                return "disabled" === local.state ? "true" : void 0;
             },
             get ["aria-invalid"] () {
-                return local.isInvalid ? "true" : void 0;
+                return "invalid" === resolveState(local.state, local.issues) ? "true" : void 0;
             }
         }), false, true);
         insert(_el$, ()=>local.children);

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

@@ -10,7 +10,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-field);
-    border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    border: var(--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;
@@ -28,8 +28,8 @@
   }
 
   .language-switcher__trigger:focus-visible {
-    outline: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid color-mix(in oklab, var(--color-primary) 70%, transparent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .language-switcher__loading-icon {

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

@@ -1,9 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./LanguageSwitcher.css";
 import { type DropdownAlign } from "../dropdown";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import type { I18nStore } from "./createI18n";
-export interface LanguageSwitcherProps extends IComponentBaseProps {
+export interface LanguageSwitcherProps extends UIBaseProps {
     /**
      * The i18n store to use for language state
      */

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

@@ -11,7 +11,6 @@ const __solidLayoutLanguageSwitcher = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "i18n",
         "class",
-        "className",
         "style",
         "aria-label",
         "currentLanguageLabel",
@@ -26,7 +25,7 @@ const __solidLayoutLanguageSwitcher = (_stable, p)=>{
         await local.i18n.setLocale(lang);
         local.onLanguageChange?.(lang);
     };
-    const classes = ()=>twMerge(CLASSES.base, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.base, local.class);
     return createComponent(dropdown.Root, mergeProps(others, ()=>({
             class: classes()
         }), {
@@ -52,7 +51,7 @@ const __solidLayoutLanguageSwitcher = (_stable, p)=>{
                             },
                             get fallback () {
                                 return createComponent(icon, mergeProps({
-                                    name: "icon-[mdi--loading]"
+                                    src: "icon-[mdi--loading]"
                                 }, ()=>({
                                         class: CLASSES.loadingIcon
                                     }), {