@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/chatbubble/ChatBubbleMessage.generated.js

@@ -6,19 +6,19 @@ import { CLASSES, componentRecipe } from "./ChatBubble.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutChatBubbleMessage = (_stable, p)=>{
     const [local, others] = splitProps(p, [
-        "color",
-        "class",
-        "className"
+        "flavor",
+        "class"
     ]);
     const colorClass = ()=>{
-        if (!local.color) return;
-        return CLASSES.color[local.color];
+        if (!local.flavor) return;
+        const f = local.flavor;
+        return CLASSES.flavor[f] ?? `chatbubble__message--flavor-${f}`;
     };
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, {
             get ["class"] () {
-                return twMerge(CLASSES.slot.message, colorClass(), local.class, local.className);
+                return twMerge(CLASSES.slot.message, colorClass(), local.class);
             }
         }), false, false);
         return _el$;

package/dist/components/chatbubble/ChatBubbleTime.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ChatBubbleTimeProps = JSX.HTMLAttributes<HTMLTimeElement> & IComponentBaseProps;
+import type { UIBaseProps } from "../vocabulary";
+export type ChatBubbleTimeProps = JSX.HTMLAttributes<HTMLTimeElement> & UIBaseProps;
 declare const ChatBubbleTime: __LayoutComponent<ChatBubbleTimeProps>;
 export default ChatBubbleTime;

package/dist/components/chatbubble/ChatBubbleTime.generated.js

@@ -6,13 +6,12 @@ import { CLASSES, componentRecipe } from "./ChatBubble.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<time>");
 const __solidLayoutChatBubbleTime = (_stable, p)=>{
     const [local, others] = splitProps(p, [
-        "class",
-        "className"
+        "class"
     ]);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.time, local.class, local.className)
+                class: twMerge(CLASSES.slot.time, local.class)
             })), false, false);
         return _el$;
     })();

package/dist/components/checkbox/Checkbox.css

@@ -36,7 +36,7 @@
     justify-content: center;
     overflow: hidden;
     border-radius: 0.375rem;
-    border: 1px solid var(--color-base-300);
+    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;
     color: var(--color-accent-content);
@@ -126,7 +126,7 @@
 
     .checkbox:hover .checkbox__control::before,
     .checkbox[data-hovered="true"] .checkbox__control::before {
-      background-color: color-mix(in oklab, var(--color-accent), #000 8%);
+      background-color: color-mix(in oklab, var(--color-accent), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
     }
   }
 

package/dist/components/checkbox/Checkbox.generated.d.ts

@@ -1,14 +1,14 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Checkbox.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type CheckboxVariant = "primary" | "secondary";
-export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & IComponentBaseProps & {
+export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
+    state?: State;
+    issues?: Issue[];
     isIndeterminate?: boolean;
     indeterminate?: boolean;
     variant?: CheckboxVariant;

package/dist/components/checkbox/Checkbox.generated.js

@@ -5,6 +5,7 @@ import { Show, createEffect, createSignal, splitProps, useContext } from "solid-
 import { twMerge } from "tailwind-merge";
 import { CheckboxGroupContext } from "../checkbox-group/context.js";
 import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--indeterminate fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-width=3 viewBox="0 0 24 24"><line x1=21 x2=3 y1=12 y2=12>'), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<label><input><span><span>"), _tmpl$5 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--checkmark fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox="0 0 17 18"><polyline points="1 9 7 14 15 4">');
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -15,11 +16,10 @@ const __solidLayoutCheckbox = (_stable, p)=>{
     const group = useContext(CheckboxGroupContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "description",
-        "isDisabled",
-        "isInvalid",
+        "state",
+        "issues",
         "isIndeterminate",
         "indeterminate",
         "variant",
@@ -37,8 +37,8 @@ const __solidLayoutCheckbox = (_stable, p)=>{
     const optionValue = ()=>null != local.value ? String(local.value) : void 0;
     const isGrouped = ()=>Boolean(group && void 0 !== optionValue());
     const isSelected = ()=>isGrouped() ? Boolean(group?.value().includes(optionValue())) : isControlled() ? Boolean(local.checked) : internalSelected();
-    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 isIndeterminate = ()=>Boolean(local.isIndeterminate) || Boolean(local.indeterminate);
     const variant = ()=>local.variant ?? group?.variant() ?? "primary";
     const name = ()=>local.name ?? group?.name();
@@ -57,7 +57,7 @@ const __solidLayoutCheckbox = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/checkbox-group/CheckboxGroup.generated.d.ts

@@ -2,17 +2,17 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./CheckboxGroup.css";
 import { type JSX } from "solid-js";
 import type { CheckboxVariant } from "../checkbox";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type CheckboxGroupVariant = CheckboxVariant;
-export type CheckboxGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type CheckboxGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element | ((values: string[]) => JSX.Element);
     value?: string[];
     defaultValue?: string[];
     onChange?: (value: string[]) => void;
     name?: string;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
+    issues?: Issue[];
     variant?: CheckboxGroupVariant;
 };
 declare const CheckboxGroup: __LayoutComponent<CheckboxGroupProps>;

package/dist/components/checkbox-group/CheckboxGroup.generated.js

@@ -5,21 +5,21 @@ import { createSignal, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./CheckboxGroup.recipe.js";
 import { CheckboxGroupContext } from "./context.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutCheckboxGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "value",
         "defaultValue",
         "onChange",
         "name",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
+        "issues",
         "variant",
         "role"
     ]);
@@ -27,8 +27,8 @@ const __solidLayoutCheckboxGroup = (_stable, p)=>{
     const isControlled = ()=>void 0 !== local.value;
     const selectedValues = ()=>isControlled() ? local.value ?? [] : internalValue();
     const variant = ()=>local.variant ?? "primary";
-    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 handleToggle = (optionValue, checked)=>{
         const currentValues = selectedValues();
         const nextValues = checked ? currentValues.includes(optionValue) ? currentValues : [
@@ -74,7 +74,7 @@ const __solidLayoutCheckboxGroup = (_stable, p)=>{
                     return isInvalid() ? "true" : "false";
                 },
                 get ["class"] () {
-                    return twMerge(CLASSES.base, CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className);
+                    return twMerge(CLASSES.base, CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class);
                 },
                 get ["data-theme"] () {
                     return local.dataTheme;

package/dist/components/chip/Chip.css

@@ -4,8 +4,8 @@
     flex-shrink: 0;
     align-items: center;
     gap: 0.125rem;
-    border-radius: 9999px;
-    border: 1px solid var(--chip-border);
+    border-radius: var(--radius-pill, 9999px);
+    border: var(--border, 1px) solid var(--chip-border);
     font-weight: 500;
     line-height: 1.25;
     white-space: nowrap;
@@ -72,59 +72,11 @@
     --chip-border: var(--chip-bordered-border);
   }
 
-  .chip--default {
-    --chip-solid-bg: var(--color-default);
-    --chip-solid-fg: var(--color-default-foreground);
-    --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
-    --chip-flat-fg: var(--color-default-foreground);
-    --chip-bordered-fg: var(--color-default-foreground);
-    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
-  }
 
-  .chip--primary {
-    --chip-solid-bg: var(--color-primary);
-    --chip-solid-fg: var(--color-primary-content);
-    --chip-flat-bg: color-mix(in oklab, var(--color-primary) 18%, transparent);
-    --chip-flat-fg: var(--color-primary);
-    --chip-bordered-fg: var(--color-primary);
-    --chip-bordered-border: color-mix(in oklab, var(--color-primary) 50%, transparent);
-  }
 
-  .chip--accent {
-    --chip-solid-bg: var(--color-accent);
-    --chip-solid-fg: var(--color-accent-content);
-    --chip-flat-bg: var(--color-accent-soft);
-    --chip-flat-fg: var(--color-accent-soft-foreground);
-    --chip-bordered-fg: var(--color-accent);
-    --chip-bordered-border: color-mix(in oklab, var(--color-accent) 52%, transparent);
-  }
 
-  .chip--success {
-    --chip-solid-bg: var(--color-success);
-    --chip-solid-fg: var(--color-success-content);
-    --chip-flat-bg: var(--color-success-soft);
-    --chip-flat-fg: var(--color-success-soft-foreground);
-    --chip-bordered-fg: var(--color-success);
-    --chip-bordered-border: color-mix(in oklab, var(--color-success) 52%, transparent);
-  }
 
-  .chip--warning {
-    --chip-solid-bg: var(--color-warning);
-    --chip-solid-fg: var(--color-warning-content);
-    --chip-flat-bg: var(--color-warning-soft);
-    --chip-flat-fg: var(--color-warning-soft-foreground);
-    --chip-bordered-fg: var(--color-warning);
-    --chip-bordered-border: color-mix(in oklab, var(--color-warning) 52%, transparent);
-  }
 
-  .chip--danger {
-    --chip-solid-bg: var(--color-danger);
-    --chip-solid-fg: var(--color-danger-foreground);
-    --chip-flat-bg: var(--color-danger-soft);
-    --chip-flat-fg: var(--color-danger-soft-foreground);
-    --chip-bordered-fg: var(--color-danger);
-    --chip-bordered-border: color-mix(in oklab, var(--color-danger) 52%, transparent);
-  }
 
   .chip__label {
     padding-inline: 0.125rem;
@@ -162,7 +114,7 @@
     height: var(--chip-remove-size);
     padding: 0;
     border: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     color: inherit;
     background: transparent;
     cursor: pointer;
@@ -180,7 +132,7 @@
   }
 
   .chip__remove:focus-visible {
-    outline: 2px solid currentColor;
+    outline: var(--focus-ring-width, 2px) solid currentColor;
     outline-offset: 1px;
   }
 
@@ -194,4 +146,76 @@
     cursor: not-allowed;
     opacity: 0.55;
   }
+
+  .chip--flavor-neutral {
+    --chip-solid-bg: var(--color-default);
+    --chip-solid-fg: var(--color-default-foreground);
+    --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
+    --chip-flat-fg: var(--color-default-foreground);
+    --chip-bordered-fg: var(--color-default-foreground);
+    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
+  }
+
+  .chip--flavor-primary {
+    --chip-solid-bg: var(--color-primary);
+    --chip-solid-fg: var(--color-primary-content);
+    --chip-flat-bg: color-mix(in oklab, var(--color-primary) 18%, transparent);
+    --chip-flat-fg: var(--color-primary);
+    --chip-bordered-fg: var(--color-primary);
+    --chip-bordered-border: color-mix(in oklab, var(--color-primary) 50%, transparent);
+  }
+
+  .chip--flavor-secondary {
+    --chip-solid-bg: var(--color-secondary);
+    --chip-solid-fg: var(--color-secondary-content, var(--color-secondary-foreground));
+    --chip-flat-bg: var(--color-secondary-soft, color-mix(in oklab, var(--color-secondary) 18%, transparent));
+    --chip-flat-fg: var(--color-secondary-soft-foreground, var(--color-secondary));
+    --chip-bordered-fg: var(--color-secondary);
+    --chip-bordered-border: color-mix(in oklab, var(--color-secondary) 52%, transparent);
+  }
+
+  .chip--flavor-accent {
+    --chip-solid-bg: var(--color-accent);
+    --chip-solid-fg: var(--color-accent-content);
+    --chip-flat-bg: var(--color-accent-soft);
+    --chip-flat-fg: var(--color-accent-soft-foreground);
+    --chip-bordered-fg: var(--color-accent);
+    --chip-bordered-border: color-mix(in oklab, var(--color-accent) 52%, transparent);
+  }
+
+  .chip--flavor-destructive {
+    --chip-solid-bg: var(--color-danger);
+    --chip-solid-fg: var(--color-danger-foreground);
+    --chip-flat-bg: var(--color-danger-soft);
+    --chip-flat-fg: var(--color-danger-soft-foreground);
+    --chip-bordered-fg: var(--color-danger);
+    --chip-bordered-border: color-mix(in oklab, var(--color-danger) 52%, transparent);
+  }
+
+  .chip--flavor-success {
+    --chip-solid-bg: var(--color-success);
+    --chip-solid-fg: var(--color-success-content);
+    --chip-flat-bg: var(--color-success-soft);
+    --chip-flat-fg: var(--color-success-soft-foreground);
+    --chip-bordered-fg: var(--color-success);
+    --chip-bordered-border: color-mix(in oklab, var(--color-success) 52%, transparent);
+  }
+
+  .chip--flavor-warning {
+    --chip-solid-bg: var(--color-warning);
+    --chip-solid-fg: var(--color-warning-content);
+    --chip-flat-bg: var(--color-warning-soft);
+    --chip-flat-fg: var(--color-warning-soft-foreground);
+    --chip-bordered-fg: var(--color-warning);
+    --chip-bordered-border: color-mix(in oklab, var(--color-warning) 52%, transparent);
+  }
+
+  .chip--flavor-info {
+    --chip-solid-bg: var(--color-info);
+    --chip-solid-fg: var(--color-info-content, var(--color-info-foreground));
+    --chip-flat-bg: var(--color-info-soft, color-mix(in oklab, var(--color-info) 18%, transparent));
+    --chip-flat-fg: var(--color-info-soft-foreground, var(--color-info));
+    --chip-bordered-fg: var(--color-info);
+    --chip-bordered-border: color-mix(in oklab, var(--color-info) 52%, transparent);
+  }
 }

package/dist/components/chip/Chip.generated.d.ts

@@ -1,21 +1,21 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
 import "./Chip.css";
+import type { Flavor, State } from "../vocabulary";
 type ChipVariant = "solid" | "flat" | "bordered";
 type ChipColor = "default" | "primary" | "accent" | "success" | "warning" | "danger";
 type ChipSize = "sm" | "md" | "lg";
 interface ChipRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color" | "onRemove"> {
     class?: string;
-    className?: string;
     children?: JSX.Element;
     variant?: ChipVariant;
-    color?: ChipColor;
+    flavor?: Flavor;
     size?: ChipSize;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
     onRemove?: () => void;
     removeButtonLabel?: string;
-    isDisabled?: boolean;
+    state?: State;
 }
 declare const ChipRoot: __LayoutComponent<ChipRootProps>;
 interface ChipLabelProps extends JSX.HTMLAttributes<HTMLSpanElement> {

package/dist/components/chip/Chip.generated.js

@@ -10,21 +10,20 @@ const __solidLayoutChipRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "variant",
-        "color",
+        "flavor",
         "size",
         "startIcon",
         "endIcon",
         "onRemove",
         "removeButtonLabel",
-        "isDisabled"
+        "state"
     ]);
     const classes = ()=>{
         const variant = local.variant ?? "solid";
-        const color = local.color ?? "default";
+        const color = local.flavor ?? "default";
         const size = local.size ?? "md";
-        return twMerge(clsx(CLASSES.base, CLASSES.variant[variant], CLASSES.color[color], CLASSES.size[size], local.class, local.className));
+        return twMerge(clsx(CLASSES.base, CLASSES.variant[variant], CLASSES.flavor[color] ?? `chip--flavor-${color}`, CLASSES.size[size], local.class));
     };
     const chipChildren = ()=>{
         const c = local.children;
@@ -44,7 +43,7 @@ const __solidLayoutChipRoot = (_stable, p)=>{
             }), {
             "data-slot": "chip",
             get ["data-disabled"] () {
-                return local.isDisabled ? "true" : "false";
+                return "disabled" === local.state ? "true" : "false";
             },
             get ["data-removable"] () {
                 return local.onRemove ? "true" : "false";
@@ -81,7 +80,7 @@ const __solidLayoutChipRoot = (_stable, p)=>{
                     },
                     onClick: handleRemove,
                     get disabled () {
-                        return Boolean(local.isDisabled);
+                        return Boolean("disabled" === local.state);
                     }
                 }), false, true);
                 insert(_el$3, createComponent(Show, {

package/dist/components/chip/Chip.recipe.d.ts

@@ -13,13 +13,15 @@ export declare const CLASSES: {
         readonly flat: "chip--flat";
         readonly bordered: "chip--bordered";
     };
-    readonly color: {
-        readonly default: "chip--default";
-        readonly primary: "chip--primary";
-        readonly accent: "chip--accent";
-        readonly success: "chip--success";
-        readonly warning: "chip--warning";
-        readonly danger: "chip--danger";
+    readonly flavor: {
+        readonly neutral: "chip--flavor-neutral";
+        readonly primary: "chip--flavor-primary";
+        readonly secondary: "chip--flavor-secondary";
+        readonly accent: "chip--flavor-accent";
+        readonly destructive: "chip--flavor-destructive";
+        readonly success: "chip--flavor-success";
+        readonly warning: "chip--flavor-warning";
+        readonly info: "chip--flavor-info";
     };
     readonly size: {
         readonly sm: "chip--sm";

package/dist/components/chip/Chip.recipe.js

@@ -14,13 +14,15 @@ const CLASSES = {
         flat: "chip--flat",
         bordered: "chip--bordered"
     },
-    color: {
-        default: "chip--default",
-        primary: "chip--primary",
-        accent: "chip--accent",
-        success: "chip--success",
-        warning: "chip--warning",
-        danger: "chip--danger"
+    flavor: {
+        neutral: "chip--flavor-neutral",
+        primary: "chip--flavor-primary",
+        secondary: "chip--flavor-secondary",
+        accent: "chip--flavor-accent",
+        destructive: "chip--flavor-destructive",
+        success: "chip--flavor-success",
+        warning: "chip--flavor-warning",
+        info: "chip--flavor-info"
     },
     size: {
         sm: "chip--sm",

package/dist/components/close-button/CloseButton.css

@@ -34,8 +34,8 @@
 
   .close-button:focus-visible,
   .close-button[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);
   }
 
   .close-button:disabled,

package/dist/components/close-button/CloseButton.generated.d.ts

@@ -1,15 +1,14 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./CloseButton.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type CloseButtonVariant = "default";
-export type CloseButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & IComponentBaseProps & {
+export type CloseButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & UIBaseProps & {
     variant?: CloseButtonVariant;
-    isDisabled?: boolean;
+    state?: State;
     isPending?: boolean;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
-    className?: string;
 };
 declare const CloseButton: __LayoutComponent<CloseButtonProps>;
 export default CloseButton;

package/dist/components/close-button/CloseButton.generated.js

@@ -9,9 +9,8 @@ const __solidLayoutCloseButton = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "variant",
-        "isDisabled",
+        "state",
         "isPending",
         "startIcon",
         "endIcon",
@@ -21,7 +20,7 @@ const __solidLayoutCloseButton = (_stable, p)=>{
         "aria-label"
     ]);
     const variant = ()=>local.variant ?? "default";
-    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.isPending);
+    const disabled = ()=>Boolean("disabled" === local.state) || Boolean(local.isPending);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, {
@@ -32,7 +31,7 @@ const __solidLayoutCloseButton = (_stable, p)=>{
                 return local["aria-label"] ?? "Close";
             }
         }, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class)
             }), {
             "data-slot": "close-button",
             get ["data-pending"] () {

package/dist/components/{disclosure/Disclosure.css → collapsible/Collapsible.css}

@@ -1,18 +1,18 @@
 @layer components {
-  .disclosure {
+  .collapsible {
     position: relative;
   }
 
-  .disclosure--disabled {
+  .collapsible--disabled {
     opacity: 0.65;
   }
 
-  .disclosure__heading {
+  .collapsible__heading {
     display: flex;
     width: 100%;
   }
 
-  .disclosure__trigger {
+  .collapsible__trigger {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -25,19 +25,19 @@
     user-select: none;
   }
 
-  .disclosure__trigger:focus-visible,
-  .disclosure__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-base-content);
-    outline-offset: 2px;
+  .collapsible__trigger:focus-visible,
+  .collapsible__trigger[data-focus-visible="true"] {
+    outline: var(--focus-ring-width, 2px) solid var(--color-base-content);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  .disclosure__trigger:disabled,
-  .disclosure__trigger[aria-disabled="true"] {
+  .collapsible__trigger:disabled,
+  .collapsible__trigger[aria-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  .disclosure__indicator {
+  .collapsible__indicator {
     margin-inline-start: auto;
     height: 1rem;
     width: 1rem;
@@ -46,11 +46,11 @@
     transition: transform 250ms ease;
   }
 
-  .disclosure__indicator[data-expanded="true"] {
+  .collapsible__indicator[data-expanded="true"] {
     transform: rotate(-180deg);
   }
 
-  .disclosure__content {
+  .collapsible__content {
     display: grid;
     grid-template-rows: 0fr;
     opacity: 0;
@@ -60,24 +60,24 @@
       opacity 200ms ease;
   }
 
-  .disclosure__content[data-expanded="true"] {
+  .collapsible__content[data-expanded="true"] {
     grid-template-rows: 1fr;
     opacity: 1;
   }
 
-  .disclosure__body {
+  .collapsible__body {
     min-height: 0;
     overflow: hidden;
   }
 
-  .disclosure__body-inner {
+  .collapsible__body-inner {
     padding: 0.5rem 0;
     color: color-mix(in oklab, var(--color-base-content), transparent 25%);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .disclosure__indicator,
-    .disclosure__content {
+    .collapsible__indicator,
+    .collapsible__content {
       transition: none;
     }
   }