@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/menu/MenuSection.generated.js

@@ -8,7 +8,6 @@ const __solidLayoutMenuSectionRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "title",
@@ -25,7 +24,7 @@ const __solidLayoutMenuSectionRoot = (_stable, p)=>{
                 return local.dataTheme;
             }
         }, ()=>({
-                class: twMerge(CLASSES.Section.base, local.class, local.className)
+                class: twMerge(CLASSES.Section.base, local.class)
             }), {
             get style () {
                 return local.style;

package/dist/components/metal-border/MetalBorder.generated.d.ts

@@ -1,13 +1,13 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./MetalBorder.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import { type PresetName, type PresetTheme } from "./engine";
 export type MetalBorderPreset = PresetName;
 export type MetalBorderKind = "pill" | "circle";
 export type MetalBorderTheme = PresetTheme | "auto";
 export type MetalBorderResolvedTheme = PresetTheme;
-export type MetalBorderProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type MetalBorderProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children?: JSX.Element;
     preset?: MetalBorderPreset;
     strength?: number;

package/dist/components/metal-border/MetalBorder.generated.js

@@ -67,7 +67,6 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "contentClass",
         "dataTheme",
         "style",
@@ -273,7 +272,7 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
         }, _el$);
         spread(_el$, mergeProps(others, {
             get ["class"] () {
-                return twMerge(CLASSES.Root.base, CLASSES.Root.kind[kind()], effectEnabled() && CLASSES.Root.flag.enabled, isWebGlUnavailable() && CLASSES.Root.flag.unavailable, effectivePaused() && CLASSES.Root.flag.paused, local.class, local.className);
+                return twMerge(CLASSES.Root.base, CLASSES.Root.kind[kind()], effectEnabled() && CLASSES.Root.flag.enabled, isWebGlUnavailable() && CLASSES.Root.flag.unavailable, effectivePaused() && CLASSES.Root.flag.paused, local.class);
             },
             get ["data-kind"] () {
                 return kind();

package/dist/components/meter/Meter.css

@@ -31,7 +31,7 @@
     grid-area: track;
     position: relative;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background: var(--color-base-200);
     height: 0.5rem;
   }
@@ -41,7 +41,7 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--meter-fill);
     transition: width 300ms var(--ease-out);
   }
@@ -54,25 +54,10 @@
     height: 0.75rem;
   }
 
-  .meter--default {
-    --meter-fill: var(--color-base-content);
-  }
 
-  .meter--accent {
-    --meter-fill: var(--color-accent);
-  }
 
-  .meter--success {
-    --meter-fill: var(--color-success);
-  }
 
-  .meter--warning {
-    --meter-fill: var(--color-warning);
-  }
 
-  .meter--danger {
-    --meter-fill: var(--color-danger);
-  }
 
   .meter--disabled,
   .meter[aria-disabled="true"],
@@ -85,5 +70,36 @@
       transition: none;
     }
   }
-}
 
+  .meter--flavor-neutral {
+    --meter-fill: var(--color-base-content);
+  }
+
+  .meter--flavor-primary {
+    --meter-fill: var(--color-primary);
+  }
+
+  .meter--flavor-secondary {
+    --meter-fill: var(--color-secondary);
+  }
+
+  .meter--flavor-accent {
+    --meter-fill: var(--color-accent);
+  }
+
+  .meter--flavor-destructive {
+    --meter-fill: var(--color-danger);
+  }
+
+  .meter--flavor-success {
+    --meter-fill: var(--color-success);
+  }
+
+  .meter--flavor-warning {
+    --meter-fill: var(--color-warning);
+  }
+
+  .meter--flavor-info {
+    --meter-fill: var(--color-info);
+  }
+}

package/dist/components/meter/Meter.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Meter.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, Flavor, State } from "../vocabulary";
 export type MeterSize = "sm" | "md" | "lg";
 export type MeterColor = "default" | "accent" | "success" | "warning" | "danger";
 export type MeterRenderState = {
@@ -12,7 +12,7 @@ export type MeterRenderState = {
     valueText: string;
     isDisabled: boolean;
 };
-export type MeterRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type MeterRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children?: JSX.Element | ((state: MeterRenderState) => JSX.Element);
     value?: number;
     minValue?: number;
@@ -20,15 +20,15 @@ export type MeterRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLD
     lowValue?: number;
     highValue?: number;
     optimumValue?: number;
-    isDisabled?: boolean;
+    state?: State;
     size?: MeterSize;
-    color?: MeterColor;
+    flavor?: Flavor;
     formatOptions?: Intl.NumberFormatOptions;
     formatValue?: (value: number, state: Omit<MeterRenderState, "valueText">) => string;
 };
-export type MeterOutputProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLSpanElement>;
-export type MeterTrackProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
-export type MeterFillProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
+export type MeterOutputProps = UIBaseProps & JSX.HTMLAttributes<HTMLSpanElement>;
+export type MeterTrackProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
+export type MeterFillProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
 declare const MeterRoot: __LayoutComponent<MeterRootProps>;
 declare const MeterOutput: __LayoutComponent<MeterOutputProps>;
 declare const MeterTrack: __LayoutComponent<MeterTrackProps>;

package/dist/components/meter/Meter.generated.js

@@ -16,7 +16,6 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "value",
@@ -25,9 +24,9 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
         "lowValue",
         "highValue",
         "optimumValue",
-        "isDisabled",
+        "state",
         "size",
-        "color",
+        "flavor",
         "formatOptions",
         "formatValue"
     ]);
@@ -53,7 +52,7 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
             minValue: minValue(),
             maxValue: maxValue(),
             percentage: percentage(),
-            isDisabled: Boolean(local.isDisabled)
+            isDisabled: Boolean("disabled" === local.state)
         };
         const valueText = local.formatValue ? local.formatValue(base.value, base) : formatter()?.format(base.value) ?? `${Math.round(base.percentage)}%`;
         return {
@@ -61,7 +60,7 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
             valueText
         };
     });
-    const rootClasses = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], local.isDisabled && CLASSES.state.disabled, local.class, local.className));
+    const rootClasses = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.flavor[local.flavor ?? "accent"] ?? `meter--flavor-${local.flavor ?? "accent"}`, "disabled" === local.state && CLASSES.state.disabled, local.class));
     return createComponent(MeterContext.Provider, {
         value: {
             state
@@ -85,10 +84,10 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
                     return state().valueText;
                 },
                 get ["aria-disabled"] () {
-                    return local.isDisabled ? "true" : void 0;
+                    return "disabled" === local.state ? "true" : void 0;
                 },
                 get ["data-disabled"] () {
-                    return local.isDisabled ? "true" : void 0;
+                    return "disabled" === local.state ? "true" : void 0;
                 },
                 "data-slot": "meter",
                 get ["data-theme"] () {
@@ -126,7 +125,6 @@ const __solidLayoutMeterOutput = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -142,7 +140,7 @@ const __solidLayoutMeterOutput = (_stable, p)=>{
                 return local.style;
             }
         }, ()=>({
-                class: twMerge(CLASSES.output, local.class, local.className)
+                class: twMerge(CLASSES.output, local.class)
             })), false, true);
         insert(_el$2, ()=>local.children ?? state().valueText);
         return _el$2;
@@ -157,7 +155,6 @@ const __solidLayoutMeterTrack = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -172,7 +169,7 @@ const __solidLayoutMeterTrack = (_stable, p)=>{
                 return local.style;
             }
         }, ()=>({
-                class: twMerge(CLASSES.track, local.class, local.className)
+                class: twMerge(CLASSES.track, local.class)
             })), false, true);
         insert(_el$3, ()=>local.children);
         return _el$3;
@@ -186,7 +183,6 @@ const MeterTrack = defineComponent({
 const __solidLayoutMeterFill = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -213,7 +209,7 @@ const __solidLayoutMeterFill = (_stable, p)=>{
                 return style();
             }
         }, ()=>({
-                class: twMerge(CLASSES.fill, local.class, local.className)
+                class: twMerge(CLASSES.fill, local.class)
             })), false, false);
         return _el$4;
     })();

package/dist/components/meter/Meter.recipe.d.ts

@@ -8,12 +8,15 @@ export declare const CLASSES: {
         readonly md: "meter--md";
         readonly lg: "meter--lg";
     };
-    readonly color: {
-        readonly default: "meter--default";
-        readonly accent: "meter--accent";
-        readonly success: "meter--success";
-        readonly warning: "meter--warning";
-        readonly danger: "meter--danger";
+    readonly flavor: {
+        readonly neutral: "meter--flavor-neutral";
+        readonly primary: "meter--flavor-primary";
+        readonly secondary: "meter--flavor-secondary";
+        readonly accent: "meter--flavor-accent";
+        readonly destructive: "meter--flavor-destructive";
+        readonly success: "meter--flavor-success";
+        readonly warning: "meter--flavor-warning";
+        readonly info: "meter--flavor-info";
     };
     readonly state: {
         readonly disabled: "meter--disabled";

package/dist/components/meter/Meter.recipe.js

@@ -9,12 +9,15 @@ const CLASSES = {
         md: "meter--md",
         lg: "meter--lg"
     },
-    color: {
-        default: "meter--default",
-        accent: "meter--accent",
-        success: "meter--success",
-        warning: "meter--warning",
-        danger: "meter--danger"
+    flavor: {
+        neutral: "meter--flavor-neutral",
+        primary: "meter--flavor-primary",
+        secondary: "meter--flavor-secondary",
+        accent: "meter--flavor-accent",
+        destructive: "meter--flavor-destructive",
+        success: "meter--flavor-success",
+        warning: "meter--flavor-warning",
+        info: "meter--flavor-info"
     },
     state: {
         disabled: "meter--disabled"

package/dist/components/navbar/Navbar.css

@@ -56,7 +56,7 @@
   }
 
   .navbar__row--bordered {
-    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
+    border-bottom: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
   }
 
   .navbar__row--padded {
@@ -68,43 +68,43 @@
     color: var(--color-base-content);
   }
 
-  .navbar__row--neutral {
+  .navbar__row--flavor-neutral {
     background-color: var(--color-neutral);
     color: var(--color-neutral-content);
   }
 
-  .navbar__row--primary {
+  .navbar__row--flavor-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }
 
-  .navbar__row--secondary {
+  .navbar__row--flavor-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
   }
 
-  .navbar__row--accent {
+  .navbar__row--flavor-accent {
     background-color: var(--color-accent);
     color: var(--color-accent-content);
   }
 
-  .navbar__row--info {
-    background-color: var(--color-info);
-    color: var(--color-info-content);
+  .navbar__row--flavor-destructive {
+    background-color: var(--color-error);
+    color: var(--color-error-foreground);
   }
 
-  .navbar__row--success {
+  .navbar__row--flavor-success {
     background-color: var(--color-success);
     color: var(--color-success-foreground);
   }
 
-  .navbar__row--warning {
+  .navbar__row--flavor-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-foreground);
   }
 
-  .navbar__row--error {
-    background-color: var(--color-error);
-    color: var(--color-error-foreground);
+  .navbar__row--flavor-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
   }
 }

package/dist/components/navbar/Navbar.generated.d.ts

@@ -1,11 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Navbar.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & UIBaseProps & {
     as?: keyof JSX.IntrinsicElements;
     dataTheme?: string;
-    className?: string;
 };
 declare const _default: __LayoutComponent<NavbarProps> & {
     Start: __LayoutComponent<JSX.HTMLAttributes<HTMLDivElement>>;

package/dist/components/navbar/Navbar.generated.js

@@ -11,13 +11,12 @@ const __solidLayoutNavbar = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "as",
         "class",
-        "className",
         "style",
         "children",
         "dataTheme"
     ]);
     const Tag = local.as || "div";
-    const classes = ()=>twMerge(CLASSES.navbar.base, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.navbar.base, local.class);
     return createComponent(Dynamic, mergeProps({
         component: Tag,
         role: "navigation",

package/dist/components/navbar/Navbar.recipe.d.ts

@@ -32,16 +32,19 @@ export declare const CLASSES: {
             readonly bordered: "navbar__row--bordered";
             readonly padded: "navbar__row--padded";
         };
-        readonly color: {
+        readonly flavor: {
+            readonly neutral: "navbar__row--flavor-neutral";
+            readonly primary: "navbar__row--flavor-primary";
+            readonly secondary: "navbar__row--flavor-secondary";
+            readonly accent: "navbar__row--flavor-accent";
+            readonly destructive: "navbar__row--flavor-destructive";
+            readonly success: "navbar__row--flavor-success";
+            readonly warning: "navbar__row--flavor-warning";
+            readonly info: "navbar__row--flavor-info";
+        };
+        readonly variant: {
+            readonly solid: "";
             readonly ghost: "navbar__row--ghost";
-            readonly neutral: "navbar__row--neutral";
-            readonly primary: "navbar__row--primary";
-            readonly secondary: "navbar__row--secondary";
-            readonly accent: "navbar__row--accent";
-            readonly info: "navbar__row--info";
-            readonly success: "navbar__row--success";
-            readonly warning: "navbar__row--warning";
-            readonly error: "navbar__row--error";
         };
     };
 };

package/dist/components/navbar/Navbar.recipe.js

@@ -33,16 +33,19 @@ const CLASSES = {
             bordered: "navbar__row--bordered",
             padded: "navbar__row--padded"
         },
-        color: {
-            ghost: "navbar__row--ghost",
-            neutral: "navbar__row--neutral",
-            primary: "navbar__row--primary",
-            secondary: "navbar__row--secondary",
-            accent: "navbar__row--accent",
-            info: "navbar__row--info",
-            success: "navbar__row--success",
-            warning: "navbar__row--warning",
-            error: "navbar__row--error"
+        flavor: {
+            neutral: "navbar__row--flavor-neutral",
+            primary: "navbar__row--flavor-primary",
+            secondary: "navbar__row--flavor-secondary",
+            accent: "navbar__row--flavor-accent",
+            destructive: "navbar__row--flavor-destructive",
+            success: "navbar__row--flavor-success",
+            warning: "navbar__row--flavor-warning",
+            info: "navbar__row--flavor-info"
+        },
+        variant: {
+            solid: "",
+            ghost: "navbar__row--ghost"
         }
     }
 };

package/dist/components/navbar/NavbarRow.generated.d.ts

@@ -1,10 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentColor } from "../types";
-export type NavbarRowProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+import type { UIBaseProps, Flavor, Variant } from "../vocabulary";
+export type NavbarRowProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps & {
     bordered?: boolean;
     padded?: boolean;
-    color?: ComponentColor;
+    flavor?: Flavor;
+    /** Ghost is transparent chrome. It used to be a colour named `ghost`. */
+    variant?: Extract<Variant, "solid" | "ghost">;
 };
 declare const NavbarRow: __LayoutComponent<NavbarRowProps>;
 export default NavbarRow;

package/dist/components/navbar/NavbarRow.generated.js

@@ -6,18 +6,18 @@ import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutNavbarRow = (_stable, p)=>{
     const [local, others] = splitProps(p, [
+        "variant",
         "children",
         "bordered",
         "padded",
-        "color",
+        "flavor",
         "class",
-        "className",
         "style",
         "dataTheme"
     ]);
     const resolvedChildren = children(()=>local.children);
-    const colorKey = ()=>local.color && "ghost" !== local.color ? local.color : "ghost";
-    const classes = createMemo(()=>twMerge(CLASSES.row.base, true === local.bordered && CLASSES.row.flag.bordered, false !== local.padded && CLASSES.row.flag.padded, CLASSES.row.color[colorKey()], local.class, local.className));
+    const flavorClass = ()=>CLASSES.row.flavor[local.flavor ?? "neutral"] ?? `navbar__row--flavor-${local.flavor}`;
+    const classes = createMemo(()=>twMerge(CLASSES.row.base, true === local.bordered && CLASSES.row.flag.bordered, false !== local.padded && CLASSES.row.flag.padded, flavorClass(), "ghost" === local.variant && CLASSES.row.variant.ghost, local.class));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(()=>({

package/dist/components/navbar/NavbarSection.generated.d.ts

@@ -3,7 +3,6 @@ import { type JSX } from "solid-js";
 export type NavbarSectionProps = JSX.HTMLAttributes<HTMLDivElement> & {
     section: "start" | "center" | "end";
     dataTheme?: string;
-    className?: string;
 };
 declare const NavbarSection: __LayoutComponent<NavbarSectionProps>;
 export default NavbarSection;

package/dist/components/navbar/NavbarSection.generated.js

@@ -10,10 +10,9 @@ const __solidLayoutNavbarSection = (_stable, p)=>{
         "section",
         "dataTheme",
         "class",
-        "className",
         "style"
     ]);
-    const classes = ()=>twMerge(CLASSES.section.base, CLASSES.section.variant[local.section], local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.section.base, CLASSES.section.variant[local.section], local.class);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, {

package/dist/components/navbar/NavbarStack.generated.d.ts

@@ -1,10 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type NavbarStackProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type NavbarStackProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps & {
     sticky?: boolean;
     container?: boolean;
-    className?: string;
     dataTheme?: string;
 };
 declare const NavbarStack: __LayoutComponent<NavbarStackProps>;

package/dist/components/navbar/NavbarStack.generated.js

@@ -10,12 +10,11 @@ const __solidLayoutNavbarStack = (_stable, p)=>{
         "sticky",
         "container",
         "class",
-        "className",
         "style",
         "dataTheme"
     ]);
     const resolvedChildren = children(()=>local.children);
-    const classes = createMemo(()=>twMerge(CLASSES.stack.base, local.sticky && CLASSES.stack.flag.sticky, local.container && CLASSES.stack.flag.container, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.stack.base, local.sticky && CLASSES.stack.flag.sticky, local.container && CLASSES.stack.flag.container, local.class));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(()=>({

package/dist/components/noise-background/NoiseBackground.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./NoiseBackground.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type NoiseBackgroundProps = {
     children?: JSX.Element;
     /** Additional CSS classes for the outer container. */
@@ -22,6 +22,6 @@ export type NoiseBackgroundProps = {
     noiseSrc?: string;
     /** Show the static noise texture overlay. @default false */
     showNoise?: boolean;
-} & IComponentBaseProps;
+} & UIBaseProps;
 declare const NoiseBackground: __LayoutComponent<NoiseBackgroundProps>;
 export default NoiseBackground;

package/dist/components/noise-background/NoiseBackground.generated.js

@@ -26,7 +26,6 @@ const __solidLayoutNoiseBackground = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "containerClass",
         "gradientColors",
         "noiseIntensity",
@@ -142,7 +141,7 @@ const __solidLayoutNoiseBackground = (_stable, p)=>{
         if (void 0 !== rafId) cancelAnimationFrame(rafId);
     });
     const containerClasses = ()=>twMerge(CLASSES.base, (local.backdropBlur ?? false) && CLASSES.flag.backdropBlur, local.containerClass);
-    const contentClasses = ()=>twMerge(CLASSES.slot.content, local.class, local.className);
+    const contentClasses = ()=>twMerge(CLASSES.slot.content, local.class);
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
         var _ref$ = containerRef;

package/dist/components/pagination/Pagination.css

@@ -55,7 +55,7 @@
     transform-origin: center;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 0;
     background-color: transparent;
     color: var(--color-base-content);

package/dist/components/pagination/Pagination.generated.d.ts

@@ -1,12 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Pagination.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type PaginationProps = Omit<JSX.HTMLAttributes<HTMLElement>, "onChange"> & IComponentBaseProps & {
+import type { UIBaseProps, State } from "../vocabulary";
+export type PaginationProps = Omit<JSX.HTMLAttributes<HTMLElement>, "onChange"> & UIBaseProps & {
     page: number;
     total: number;
     onChange: (page: number) => void;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const Pagination: __LayoutComponent<PaginationProps>;
 export default Pagination;