@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/radio/Radio.css

@@ -31,8 +31,8 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
-    border: 1px solid var(--color-base-300);
+    border-radius: var(--radius-pill, 9999px);
+    border: var(--border, 1px) solid var(--color-base-300);
     background-color: var(--color-base-100);
     box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
     transition:
@@ -54,7 +54,7 @@
     content: "";
     width: 100%;
     height: 100%;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--color-base-100);
     transform: scale(1);
     transition:

package/dist/components/radio/Radio.generated.d.ts

@@ -1,13 +1,13 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Radio.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & IComponentBaseProps & {
+import type { UIBaseProps, State, Issue } from "../vocabulary";
+export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
     children?: JSX.Element;
     description?: JSX.Element;
     indicator?: JSX.Element;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
+    state?: State;
+    issues?: Issue[];
 };
 declare const Radio: __LayoutComponent<RadioProps>;
 export default Radio;

package/dist/components/radio/Radio.generated.js

@@ -5,6 +5,7 @@ import { Show, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { RadioGroupContext } from "../radio-group/context.js";
 import { CLASSES, componentRecipe } from "./Radio.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -14,12 +15,11 @@ const __solidLayoutRadio = (_stable, p)=>{
     const group = useContext(RadioGroupContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "description",
         "indicator",
-        "isDisabled",
-        "isInvalid",
+        "state",
+        "issues",
         "disabled",
         "checked",
         "value",
@@ -31,8 +31,8 @@ const __solidLayoutRadio = (_stable, p)=>{
     const value = ()=>null != local.value ? String(local.value) : void 0;
     const isGrouped = ()=>Boolean(group && void 0 !== value());
     const isSelected = ()=>isGrouped() ? group?.value() === value() : Boolean(local.checked);
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(group?.isDisabled());
-    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(group?.isInvalid());
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled) || Boolean(group?.isDisabled());
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues)) || Boolean(local["aria-invalid"]) || Boolean(group?.isInvalid());
     const name = ()=>local.name ?? group?.name();
     const ariaInvalid = ()=>local["aria-invalid"] ?? (isInvalid() ? true : void 0);
     const hasContent = ()=>null != local.children || null != local.description;
@@ -44,7 +44,7 @@ const __solidLayoutRadio = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.base, isDisabled() && CLASSES.flag.disabled, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/radio-group/RadioGroup.generated.d.ts

@@ -1,18 +1,18 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./RadioGroup.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type RadioGroupOrientation = "vertical" | "horizontal";
 export type RadioGroupVariant = "primary" | "secondary";
-export type RadioGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type RadioGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     children: JSX.Element;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
     name?: string;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
+    issues?: Issue[];
     orientation?: RadioGroupOrientation;
     variant?: RadioGroupVariant;
     label?: JSX.Element;

package/dist/components/radio-group/RadioGroup.generated.js

@@ -5,19 +5,19 @@ import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { RadioGroupContext } from "./context.js";
 import { CLASSES, componentRecipe } from "./RadioGroup.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>");
 const __solidLayoutRadioGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "value",
         "defaultValue",
         "onChange",
         "name",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
+        "issues",
         "orientation",
         "variant",
         "label",
@@ -37,8 +37,8 @@ const __solidLayoutRadioGroup = (_stable, p)=>{
     const variant = ()=>local.variant ?? "primary";
     const isControlled = ()=>void 0 !== local.value;
     const selectedValue = ()=>isControlled() ? local.value : internalValue();
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
     const name = ()=>local.name ?? generatedName;
     const handleChange = (nextValue)=>{
         if (nextValue === selectedValue()) return;
@@ -96,7 +96,7 @@ const __solidLayoutRadioGroup = (_stable, p)=>{
                     return isInvalid() ? "true" : "false";
                 }
             }, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className)
+                    class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class)
                 })), false, true);
             insert(_el$, createComponent(Show, {
                 get when () {

package/dist/components/range-calendar/RangeCalendar.css

@@ -45,7 +45,7 @@
   }
 
   .range-calendar__calendar .calendar__cell--range-start.calendar__cell--range-end {
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
   }
 }
 

package/dist/components/range-calendar/RangeCalendar.generated.d.ts

@@ -3,7 +3,7 @@ import "./RangeCalendar.css";
 import { type JSX } from "solid-js";
 import { type ControlledDateRangeValue } from "../../hooks/date";
 import { type CalendarWeekdayFormat } from "../calendar";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type RangeCalendarValue = ControlledDateRangeValue;
 type RangeCalendarBaseProps = {
     value?: RangeCalendarValue;
@@ -15,11 +15,11 @@ type RangeCalendarBaseProps = {
     maxValue?: Date;
     isDateUnavailable?: (date: Date) => boolean;
     showOutsideDays?: boolean;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
     onDaySelect?: (date: Date) => void;
     onDayHover?: (date?: Date) => void;
 };
-export type RangeCalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & RangeCalendarBaseProps;
+export type RangeCalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & UIBaseProps & RangeCalendarBaseProps;
 declare const RangeCalendar: __LayoutComponent<RangeCalendarProps>;
 export default RangeCalendar;

package/dist/components/range-calendar/RangeCalendar.generated.js

@@ -10,7 +10,6 @@ var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutRangeCalendar = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
@@ -23,12 +22,12 @@ const __solidLayoutRangeCalendar = (_stable, p)=>{
         "maxValue",
         "isDateUnavailable",
         "showOutsideDays",
-        "isDisabled",
+        "state",
         "disabled",
         "onDaySelect",
         "onDayHover"
     ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>local.value,
         defaultValue: ()=>local.defaultValue,
@@ -62,7 +61,7 @@ const __solidLayoutRangeCalendar = (_stable, p)=>{
                 return isDisabled() ? "true" : void 0;
             }
         }, ()=>({
-                class: twMerge(CLASSES.Root.base, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.Root.base, isDisabled() && CLASSES.Root.flag.disabled, local.class)
             })), false, true);
         insert(_el$, createComponent(calendar, mergeProps(()=>({
                 class: CLASSES.Calendar.base
@@ -98,8 +97,8 @@ const __solidLayoutRangeCalendar = (_stable, p)=>{
             get showOutsideDays () {
                 return local.showOutsideDays;
             },
-            get isDisabled () {
-                return isDisabled();
+            get state () {
+                return isDisabled() ? "disabled" : void 0;
             },
             onDaySelect: handleDaySelect,
             onDayHover: handleDayHover

package/dist/components/{scroll-shadow/ScrollShadow.css → scroll-area/ScrollArea.css}

@@ -1,90 +1,90 @@
 @layer components {
-  .scroll-shadow {
+  .scroll-area {
     position: relative;
-    --scroll-shadow-size: 40px;
+    --scroll-area-size: 40px;
   }
 
-  .scroll-shadow--vertical {
+  .scroll-area--vertical {
     overflow-y: auto;
   }
 
-  .scroll-shadow--horizontal {
+  .scroll-area--horizontal {
     overflow-x: auto;
   }
 
-  .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] {
+  .scroll-area--fade.scroll-area--vertical[data-top-scroll="true"] {
     --scroll-linear-gradient:
       0deg,
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] {
+  .scroll-area--fade.scroll-area--vertical[data-bottom-scroll="true"] {
     --scroll-linear-gradient:
       180deg,
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] {
+  .scroll-area--fade.scroll-area--vertical[data-top-bottom-scroll="true"] {
     --scroll-linear-gradient:
       #000,
       #000,
       transparent 0,
-      #000 var(--scroll-shadow-size),
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 var(--scroll-area-size),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] {
+  .scroll-area--fade.scroll-area--horizontal[data-left-scroll="true"] {
     --scroll-linear-gradient:
       270deg,
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] {
+  .scroll-area--fade.scroll-area--horizontal[data-right-scroll="true"] {
     --scroll-linear-gradient:
       90deg,
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] {
+  .scroll-area--fade.scroll-area--horizontal[data-left-right-scroll="true"] {
     --scroll-linear-gradient:
       to right,
       #000,
       #000,
       transparent 0,
-      #000 var(--scroll-shadow-size),
-      #000 calc(100% - var(--scroll-shadow-size)),
+      #000 var(--scroll-area-size),
+      #000 calc(100% - var(--scroll-area-size)),
       transparent;
 
     mask-image: linear-gradient(var(--scroll-linear-gradient));
     -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
   }
 
-  .scroll-shadow--hide-scrollbar {
+  .scroll-area--hide-scrollbar {
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .scroll-shadow--hide-scrollbar::-webkit-scrollbar {
+  .scroll-area--hide-scrollbar::-webkit-scrollbar {
     display: none;
     width: 0;
     height: 0;

package/dist/components/scroll-area/ScrollArea.generated.d.ts

@@ -0,0 +1,19 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ScrollArea.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type ScrollAreaVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export type ScrollAreaOrientation = "vertical" | "horizontal";
+export type ScrollAreaVariant = "fade";
+export type ScrollAreaProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> & {
+    size?: number;
+    offset?: number;
+    visibility?: ScrollAreaVisibility;
+    isEnabled?: boolean;
+    orientation?: ScrollAreaOrientation;
+    variant?: ScrollAreaVariant;
+    hideScrollBar?: boolean;
+    onVisibilityChange?: (visibility: ScrollAreaVisibility) => void;
+};
+declare const ScrollArea: __LayoutComponent<ScrollAreaProps>;
+export default ScrollArea;

package/dist/components/{scroll-shadow/ScrollShadow.generated.js → scroll-area/ScrollArea.generated.js}

@@ -1,16 +1,15 @@
 import { insert, mergeProps, spread, template, use } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./ScrollShadow.css";
+import "./ScrollArea.css";
 import { createEffect, createMemo, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./ScrollShadow.recipe.js";
-import { applyControlledScrollShadowVisibility, clearScrollShadowDataAttributes, useScrollShadow } from "./useScrollShadow.js";
+import { CLASSES, componentRecipe } from "./ScrollArea.recipe.js";
+import { applyControlledScrollAreaVisibility, clearScrollAreaDataAttributes, useScrollArea } from "./useScrollArea.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
-const __solidLayoutScrollShadow = (_stable, p)=>{
+const __solidLayoutScrollArea = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "size",
@@ -30,7 +29,7 @@ const __solidLayoutScrollShadow = (_stable, p)=>{
     const visibility = ()=>local.visibility ?? "auto";
     const orientation = ()=>local.orientation ?? "vertical";
     const isEnabled = ()=>local.isEnabled ?? true;
-    useScrollShadow({
+    useScrollArea({
         containerRef: ()=>containerRef,
         orientation,
         offset,
@@ -41,21 +40,21 @@ const __solidLayoutScrollShadow = (_stable, p)=>{
     createEffect(()=>{
         const el = containerRef;
         if (!el) return;
-        if (!isEnabled()) return void clearScrollShadowDataAttributes(el);
+        if (!isEnabled()) return void clearScrollAreaDataAttributes(el);
         const currentVisibility = visibility();
         if ("auto" === currentVisibility) return;
-        applyControlledScrollShadowVisibility(el, currentVisibility, orientation());
+        applyControlledScrollAreaVisibility(el, currentVisibility, orientation());
     });
-    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.hideScrollBar && CLASSES.flag.hideScrollBar, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.hideScrollBar && CLASSES.flag.hideScrollBar, local.class));
     const style = createMemo(()=>{
         if ("string" == typeof local.style) {
             const trimmed = local.style.trim();
             const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
-            return `${trimmed}${suffix} --scroll-shadow-size: ${size()}px;`;
+            return `${trimmed}${suffix} --scroll-area-size: ${size()}px;`;
         }
         return {
             ...local.style ?? {},
-            "--scroll-shadow-size": `${size()}px`
+            "--scroll-area-size": `${size()}px`
         };
     });
     return (()=>{
@@ -73,7 +72,7 @@ const __solidLayoutScrollShadow = (_stable, p)=>{
             get ["data-orientation"] () {
                 return orientation();
             },
-            get ["data-scroll-shadow-size"] () {
+            get ["data-scroll-area-size"] () {
                 return size();
             },
             get style () {
@@ -84,10 +83,10 @@ const __solidLayoutScrollShadow = (_stable, p)=>{
         return _el$;
     })();
 };
-const ScrollShadow = defineComponent({
+const ScrollArea = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutScrollShadow,
+    layout: __solidLayoutScrollArea,
     embedded: true
 });
-const ScrollShadow_generated = ScrollShadow;
-export default ScrollShadow_generated;
+const ScrollArea_generated = ScrollArea;
+export default ScrollArea_generated;

package/dist/components/scroll-area/ScrollArea.recipe.d.ts

@@ -0,0 +1,19 @@
+export declare const CLASSES: {
+    readonly base: "scroll-area";
+    readonly orientation: {
+        readonly vertical: "scroll-area--vertical";
+        readonly horizontal: "scroll-area--horizontal";
+    };
+    readonly variant: {
+        readonly fade: "scroll-area--fade";
+    };
+    readonly flag: {
+        readonly hideScrollBar: "scroll-area--hide-scrollbar";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "scroll-area";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/{scroll-shadow/ScrollShadow.recipe.js → scroll-area/ScrollArea.recipe.js}

@@ -1,19 +1,19 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: "scroll-shadow",
+    base: "scroll-area",
     orientation: {
-        vertical: "scroll-shadow--vertical",
-        horizontal: "scroll-shadow--horizontal"
+        vertical: "scroll-area--vertical",
+        horizontal: "scroll-area--horizontal"
     },
     variant: {
-        fade: "scroll-shadow--fade"
+        fade: "scroll-area--fade"
     },
     flag: {
-        hideScrollBar: "scroll-shadow--hide-scrollbar"
+        hideScrollBar: "scroll-area--hide-scrollbar"
     }
 };
 const componentRecipe = recipe({
-    component: "scroll-shadow",
+    component: "scroll-area",
     slots: {
         root: {}
     },

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ScrollArea.generated";
+export type { ScrollAreaProps, ScrollAreaVisibility, ScrollAreaOrientation, ScrollAreaVariant, } from "./ScrollArea.generated";

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { default } from "./ScrollArea.generated.js";

package/dist/components/scroll-area/useScrollArea.d.ts

@@ -0,0 +1,13 @@
+import { type Accessor } from "solid-js";
+import type { ScrollAreaOrientation, ScrollAreaVisibility } from "./ScrollArea.generated";
+export interface UseScrollAreaProps {
+    containerRef: Accessor<HTMLElement | undefined>;
+    orientation: Accessor<ScrollAreaOrientation>;
+    offset: Accessor<number>;
+    visibility: Accessor<ScrollAreaVisibility>;
+    isEnabled: Accessor<boolean>;
+    onVisibilityChange?: Accessor<((visibility: ScrollAreaVisibility) => void) | undefined>;
+}
+export declare const clearScrollAreaDataAttributes: (el: HTMLElement) => void;
+export declare const applyControlledScrollAreaVisibility: (el: HTMLElement, visibility: ScrollAreaVisibility, orientation: ScrollAreaOrientation) => void;
+export declare const useScrollArea: (props: UseScrollAreaProps) => void;

package/dist/components/{scroll-shadow/useScrollShadow.js → scroll-area/useScrollArea.js}

@@ -1,5 +1,5 @@
 import { createEffect, onCleanup } from "solid-js";
-const clearScrollShadowDataAttributes = (el)=>{
+const clearScrollAreaDataAttributes = (el)=>{
     delete el.dataset.topScroll;
     delete el.dataset.bottomScroll;
     delete el.dataset.topBottomScroll;
@@ -7,8 +7,8 @@ const clearScrollShadowDataAttributes = (el)=>{
     delete el.dataset.rightScroll;
     delete el.dataset.leftRightScroll;
 };
-const applyControlledScrollShadowVisibility = (el, visibility, orientation)=>{
-    clearScrollShadowDataAttributes(el);
+const applyControlledScrollAreaVisibility = (el, visibility, orientation)=>{
+    clearScrollAreaDataAttributes(el);
     if ("both" === visibility) {
         if ("vertical" === orientation) el.dataset.topBottomScroll = "true";
         else el.dataset.leftRightScroll = "true";
@@ -49,7 +49,7 @@ const applyAutoVisibilityDataAttributes = (el, orientation, hasScrollBefore, has
     el.dataset.rightScroll = String(hasScrollAfter);
     delete el.dataset.leftRightScroll;
 };
-const useScrollShadow = (props)=>{
+const useScrollArea = (props)=>{
     createEffect(()=>{
         const el = props.containerRef();
         const isEnabled = props.isEnabled();
@@ -58,7 +58,7 @@ const useScrollShadow = (props)=>{
         const offset = props.offset();
         const onVisibilityChange = props.onVisibilityChange?.();
         if (!el) return;
-        if (!isEnabled) return void clearScrollShadowDataAttributes(el);
+        if (!isEnabled) return void clearScrollAreaDataAttributes(el);
         if ("auto" !== visibility) return;
         let prevState = null;
         let rafId = null;
@@ -94,4 +94,4 @@ const useScrollShadow = (props)=>{
         });
     });
 };
-export { applyControlledScrollShadowVisibility, clearScrollShadowDataAttributes, useScrollShadow };
+export { applyControlledScrollAreaVisibility, clearScrollAreaDataAttributes, useScrollArea };

package/dist/components/select/Select.css

@@ -20,7 +20,7 @@
     justify-content: space-between;
     gap: 0.5rem;
     border-radius: 1rem;
-    border: 1px solid var(--color-field-border, var(--color-base-300));
+    border: var(--border, 1px) solid var(--color-field-border, var(--color-base-300));
     background-color: var(--color-field, var(--color-base-100));
     padding: 0.5rem 0.75rem;
     text-align: left;
@@ -31,7 +31,7 @@
     user-select: none;
     outline: none;
     box-shadow:
-      0 1px 2px oklch(0% 0 0 / 0.06),
+      0 1px 2px rgb(var(--shadow-color, 0 0 0) / 6%),
       0 1px 0 oklch(100% 0 0 / 0.04) inset;
     transition:
       background-color 150ms ease,
@@ -54,8 +54,8 @@
 
   .ui-select__trigger:focus-visible,
   .ui-select__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
     border-color: var(--color-accent);
     background-color: color-mix(in oklch, var(--color-accent) 8%, var(--color-base-100));
   }
@@ -140,11 +140,11 @@
     overflow-y: auto;
     overscroll-behavior: contain;
     border-radius: 1.5rem;
-    border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+    border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
     background-color: var(--color-base-100);
     box-shadow:
-      0 20px 32px oklch(0% 0 0 / 0.16),
-      0 8px 18px oklch(0% 0 0 / 0.1);
+      0 20px 32px rgb(var(--shadow-color, 0 0 0) / 16%),
+      0 8px 18px rgb(var(--shadow-color, 0 0 0) / 10%);
     visibility: hidden;
     opacity: 0;
     transform: translateY(-4px) scale(0.98);

package/dist/components/select/Select.generated.d.ts

@@ -1,13 +1,13 @@
 import "./Select.css";
 import { type Component, type JSX } from "solid-js";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 type SelectKey = string | number;
 export type SelectValueType = SelectKey | SelectKey[] | null;
 export type SelectVariant = "primary" | "secondary";
 export type SelectSelectionMode = "single" | "multiple";
 export type SelectPlacement = OverlayPlacement;
-export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
+export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & UIBaseProps & {
     children: JSX.Element;
     placeholder?: string;
     value?: SelectValueType;
@@ -16,32 +16,32 @@ export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange
     defaultSelectedKeys?: Iterable<SelectKey>;
     onChange?: (value: string | string[] | null) => void;
     onSelectionChange?: (keys: Set<string>) => void;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
     fullWidth?: boolean;
     variant?: SelectVariant;
     selectionMode?: SelectSelectionMode;
     placement?: SelectPlacement;
     autoFlip?: boolean;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps & {
+export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & UIBaseProps & {
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
 };
-export type SelectValueProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
-export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+export type SelectValueProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps;
+export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps & {
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
 };
-export type SelectPopoverProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type SelectListboxProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type SelectOptionProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & IComponentBaseProps & {
+export type SelectPopoverProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
+export type SelectListboxProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
+export type SelectOptionProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & UIBaseProps & {
     value: SelectKey;
     textValue?: string;
-    isDisabled?: boolean;
+    state?: State;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
 };