@pathscale/ui 3.0.0 → 3.2.0

package/dist/components/popover/Popover.generated.js

@@ -1,11 +1,13 @@
-import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Dynamic, Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Popover.css";
 import { Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import { registerOverlay } from "../../lib/overlay.js";
 import "../_shared/material.css";
 import { applyBooleanStateRequest } from "../_shared/controlledState.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
+import { asAriaName, resolvePopoverDialogName } from "./Popover.a11y.js";
 import { CLASSES, componentRecipe } from "./Popover.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<h3>");
 const PopoverContext = createContext(null);
@@ -22,6 +24,8 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const [triggerId] = createSignal(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
     const [contentId] = createSignal(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
     const [resolvedPlacement, setResolvedPlacement] = createSignal(p.placement ?? "bottom");
+    const [dialogLabel, setDialogLabel] = createSignal();
+    const [dialogLabelledBy, setDialogLabelledBy] = createSignal();
     const isControlled = createMemo(()=>void 0 !== p.open);
     const isOpen = createMemo(()=>isControlled() ? Boolean(p.open) : internalOpen());
     const setIsOpen = (next, options)=>{
@@ -52,20 +56,22 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
                 focusTrigger: false
             });
         };
-        const handleKeyDown = (event)=>{
-            if (!isOpen()) return;
-            if (false === p.closeOnEscape) return;
-            if ("Escape" !== event.key) return;
-            event.preventDefault();
-            setIsOpen(false, {
-                focusTrigger: true
-            });
-        };
         document.addEventListener("pointerdown", handlePointerDown);
-        document.addEventListener("keydown", handleKeyDown);
         return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
-            document.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+    createTrackedEffect(()=>{
+        if (!isOpen()) return;
+        const releaseOverlay = registerOverlay({
+            dismissable: ()=>false !== p.closeOnEscape,
+            dismiss: ()=>setIsOpen(false, {
+                    focusTrigger: true
+                }),
+            element: ()=>contentRef() ?? void 0
+        });
+        return ()=>{
+            releaseOverlay();
         };
     });
     const ctx = {
@@ -83,7 +89,11 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         triggerId,
         contentId,
         offset,
-        onInteractOutside: p.onInteractOutside
+        onInteractOutside: p.onInteractOutside,
+        dialogLabel,
+        setDialogLabel,
+        dialogLabelledBy,
+        setDialogLabelledBy
     };
     return createComponent(PopoverContext, {
         value: ctx,
@@ -124,7 +134,7 @@ const PopoverRoot = defineComponent({
     ]
 });
 const __solidLayoutPopoverTrigger = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "onKeyDown");
+    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "onKeyDown", "as");
     const ctx = usePopoverContext();
     const handleClick = (event)=>{
         if ("function" == typeof p.onClick) p.onClick(event);
@@ -141,44 +151,88 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
             });
         }
     };
-    var _el$2 = _tmpl$2();
-    ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
-    spread(_el$2, mergeProps(others, {
-        get type () {
-            return p.type ?? "button";
-        },
-        get id () {
-            return ctx.triggerId();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.trigger, p.class)
-        }), {
-        "data-slot": "popover-trigger",
-        get ["data-theme"] () {
-            return p.dataTheme;
-        },
-        get style () {
-            return p.style;
-        },
-        "aria-haspopup": "dialog",
-        get ["aria-expanded"] () {
-            return ctx.isOpen() ? "true" : "false";
+    return createComponent(Show, {
+        get when () {
+            return p.as;
         },
-        get ["aria-controls"] () {
-            return ctx.isOpen() ? ctx.contentId() : void 0;
+        get fallback () {
+            var _el$2 = _tmpl$2();
+            ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
+            spread(_el$2, mergeProps(others, {
+                get type () {
+                    return p.type ?? "button";
+                },
+                get id () {
+                    return ctx.triggerId();
+                }
+            }, ()=>({
+                    class: twMerge(CLASSES.slot.trigger, p.class)
+                }), {
+                "data-slot": "popover-trigger",
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                "aria-haspopup": "dialog",
+                get ["aria-expanded"] () {
+                    return ctx.isOpen() ? "true" : "false";
+                },
+                get ["aria-controls"] () {
+                    return ctx.isOpen() ? ctx.contentId() : void 0;
+                },
+                onClick: handleClick,
+                onKeyDown: handleKeyDown
+            }), true);
+            insert(_el$2, ()=>p.children);
+            return _el$2;
         },
-        onClick: handleClick,
-        onKeyDown: handleKeyDown
-    }), true);
-    insert(_el$2, ()=>p.children);
-    return _el$2;
+        get children () {
+            return createComponent(Dynamic, mergeProps({
+                get component () {
+                    return p.as;
+                }
+            }, others, {
+                ref: (el)=>ctx.setTriggerRef(el),
+                get type () {
+                    return p.type ?? "button";
+                },
+                get id () {
+                    return ctx.triggerId();
+                },
+                get ["class"] () {
+                    return p.class;
+                },
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                "aria-haspopup": "dialog",
+                get ["aria-expanded"] () {
+                    return ctx.isOpen() ? "true" : "false";
+                },
+                get ["aria-controls"] () {
+                    return memo(()=>!!ctx.isOpen())() ? ctx.contentId() : void 0;
+                },
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+                get children () {
+                    return p.children;
+                }
+            }));
+        }
+    });
 };
 const PopoverTrigger = defineComponent({
     recipe: componentRecipe,
     layout: __solidLayoutPopoverTrigger,
     embedded: true,
     behaviour: [
-        "children"
+        "children",
+        "as"
     ]
 });
 const __solidLayoutPopoverContent = (_stable, p)=>{
@@ -197,6 +251,13 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
     createTrackedEffect(()=>{
         ctx.setPlacement(overlayPosition.placement());
     });
+    const dialogName = ()=>resolvePopoverDialogName({
+            contentLabel: asAriaName(p["aria-label"]),
+            contentLabelledBy: asAriaName(p["aria-labelledby"]),
+            dialogLabel: ctx.dialogLabel(),
+            dialogLabelledBy: ctx.dialogLabelledBy(),
+            triggerId: ctx.triggerRef() ? ctx.triggerId() : void 0
+        });
     const style = ()=>{
         const overlayStyle = overlayPosition.style();
         if ("string" == typeof p.style) return [
@@ -244,8 +305,11 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                         get style () {
                             return style();
                         },
+                        get ["aria-label"] () {
+                            return dialogName()["aria-label"];
+                        },
                         get ["aria-labelledby"] () {
-                            return p["aria-labelledby"] ?? (ctx.triggerRef() ? ctx.triggerId() : void 0);
+                            return dialogName()["aria-labelledby"];
                         },
                         get ["aria-hidden"] () {
                             return ctx.isOpen() ? "false" : "true";
@@ -269,7 +333,16 @@ const PopoverContent = defineComponent({
     ]
 });
 const __solidLayoutPopoverDialog = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style");
+    const others = omit(p, "children", "class", "dataTheme", "style", "aria-label", "aria-labelledby");
+    const ctx = usePopoverContext();
+    createTrackedEffect(()=>{
+        ctx.setDialogLabel(asAriaName(p["aria-label"]));
+        return ()=>ctx.setDialogLabel(void 0);
+    });
+    createTrackedEffect(()=>{
+        ctx.setDialogLabelledBy(asAriaName(p["aria-labelledby"]));
+        return ()=>ctx.setDialogLabelledBy(void 0);
+    });
     var _el$4 = _tmpl$();
     spread(_el$4, mergeProps(others, ()=>({
             class: twMerge(CLASSES.slot.dialog, p.class)

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

@@ -1,13 +1,37 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Radio.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, State, Issue } from "../vocabulary";
-export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
+import type { Issue, State, UIBaseProps } from "../vocabulary";
+export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element;
     description?: JSX.Element;
     indicator?: JSX.Element;
     state?: State;
     issues?: Issue[];
+    /**
+     * Whether this radio is now the selected one.
+     *
+     * **Breaking in 3.1**, and the last control left out of it. Switch and
+     * Checkbox were changed to report their new value here while Radio was
+     * still handing over an `Event`, which is the inconsistency the change
+     * existed to remove -- swapping one control for another quietly changed
+     * what the handler received.
+     *
+     * A radio only ever reports `true`: deselection happens by another radio
+     * in the group being chosen, and that one reports itself. Reach for
+     * `RadioGroup`'s `onChange` when the question is which value is selected.
+     *
+     * The native handler is {@link onNativeChange}, and it is still where you
+     * call `preventDefault()`.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the selection is applied.
+     *
+     * This is the veto: `preventDefault()` here leaves the group as it was and
+     * suppresses {@link onChange}.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Radio: __LayoutComponent<RadioProps>;
 export default Radio;

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

@@ -4,8 +4,8 @@ import "./Radio.css";
 import { Show, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { RadioGroupContext } from "../radio-group/context.js";
-import { CLASSES, componentRecipe } from "./Radio.recipe.js";
 import { resolveState } from "../vocabulary.js";
+import { CLASSES, componentRecipe } from "./Radio.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$4 = /*#__PURE__*/ template("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -13,7 +13,7 @@ const invokeEventHandler = (handler, event)=>{
 };
 const __solidLayoutRadio = (_stable, p)=>{
     const group = useContext(RadioGroupContext);
-    const others = omit(p, "class", "children", "description", "indicator", "state", "issues", "disabled", "checked", "value", "name", "onChange", "dataTheme", "aria-invalid");
+    const others = omit(p, "class", "children", "description", "indicator", "state", "issues", "disabled", "checked", "value", "name", "onChange", "onNativeChange", "dataTheme", "aria-invalid");
     const value = ()=>null != p.value ? String(p.value) : void 0;
     const isGrouped = ()=>Boolean(group && void 0 !== value());
     const isSelected = ()=>isGrouped() ? group?.value() === value() : Boolean(p.checked);
@@ -23,9 +23,11 @@ const __solidLayoutRadio = (_stable, p)=>{
     const ariaInvalid = ()=>p["aria-invalid"] ?? (isInvalid() ? true : void 0);
     const hasContent = ()=>null != p.children || null != p.description;
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
-        if (event.currentTarget.checked && group && void 0 !== value()) group.selectValue(value(), event);
+        const checked = event.currentTarget.checked;
+        if (checked && group && void 0 !== value()) group.selectValue(value(), event);
+        p.onChange?.(checked);
     };
     var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     spread(_el$, mergeProps(()=>({
@@ -133,7 +135,9 @@ const Radio = defineComponent({
         "description",
         "indicator",
         "state",
-        "issues"
+        "issues",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Radio_generated = Radio;

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

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./RangeCalendar.css";
 import type { JSX } from "@solidjs/web";
 import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 export type RangeCalendarValue = ControlledDateRangeValue;
 type RangeCalendarBaseProps = {
@@ -10,6 +10,8 @@ type RangeCalendarBaseProps = {
     defaultValue?: RangeCalendarValue;
     onChange?: (value: RangeCalendarValue) => void;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

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

@@ -8,7 +8,7 @@ import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./RangeCalendar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutRangeCalendar = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "showOutsideDays", "state", "disabled", "onDaySelect", "onDayHover");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "showOutsideDays", "state", "disabled", "onDaySelect", "onDayHover");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>p.value,
@@ -63,6 +63,9 @@ const __solidLayoutRangeCalendar = (_stable, p)=>{
         get locale () {
             return p.locale;
         },
+        get dateNames () {
+            return p.dateNames;
+        },
         get weekdayFormat () {
             return p.weekdayFormat;
         },

package/dist/components/select/Select.generated.js

@@ -58,7 +58,12 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const open = ()=>void 0 !== p.open ? Boolean(p.open) : internalOpen();
     const placement = ()=>p.placement ?? "bottom";
     const autoFlip = ()=>p.autoFlip ?? true;
+    const assertOneControlSource = ()=>{
+        if (void 0 !== p.selectedKeys && void 0 !== p.value) throw new Error("Select received both `value` and `selectedKeys`. They are competing control sources; pass exactly one. Use `selectedKeys` for multiple selection, `value` for single.");
+        if (void 0 !== p.defaultSelectedKeys && void 0 !== p.defaultValue) throw new Error("Select received both `defaultValue` and `defaultSelectedKeys`. Pass exactly one.");
+    };
     const selectedKeys = createMemo(()=>{
+        assertOneControlSource();
         const controlledValue = void 0 !== p.selectedKeys ? p.selectedKeys : p.value;
         if (void 0 !== controlledValue) return normalizeSelection(selectionMode(), controlledValue);
         return normalizeSelection(selectionMode(), internalSelectedKeys());

package/dist/components/slider/Slider.generated.d.ts

@@ -18,6 +18,19 @@ type SliderBaseProps = {
     class?: string;
     style?: JSX.CSSProperties;
 };
-export type SliderProps = SliderBaseProps & UIBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
+/**
+ * Pass-through is div attributes, because that is what this renders.
+ *
+ * It declared `JSX.InputHTMLAttributes<HTMLInputElement>` and there is no
+ * `<input>` anywhere in the component: the semantic element is a `div` with
+ * `role="slider"`, and the value comes from `aria-valuenow`. So the type
+ * offered `min`, `max`, `step`, `form`, `checked` and the rest of the input
+ * surface, none of which had anywhere to go — on top of nothing being
+ * forwarded at all, which is the reason this was noticed.
+ *
+ * Narrowed to the element that exists. `min`/`max`/`step` remain as this
+ * component's own props above, where they are actually read.
+ */
+export type SliderProps = SliderBaseProps & UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, keyof SliderBaseProps>;
 declare const Slider: __LayoutComponent<SliderProps>;
 export default Slider;

package/dist/components/slider/Slider.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Slider.css";
-import { Show, createSignal, createUniqueId } from "solid-js";
+import { Show, createSignal, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createSliderInteractionHandlers } from "./Slider.interactions.js";
 import { CLASSES, componentRecipe } from "./Slider.recipe.js";
@@ -16,6 +16,7 @@ function snapToStep(val, min, max, step) {
 const __solidLayoutSlider = (_stable, p)=>{
     let trackRef;
     let thumbRef;
+    const others = omit(p, "label", "value", "onChange", "onChangeEnd", "min", "max", "step", "disabled", "formatValue", "size", "dataTheme", "class", "style", "id", "aria-label");
     const min = ()=>p.min ?? 0;
     const max = ()=>p.max ?? 100;
     const step = ()=>p.step ?? 1;
@@ -189,7 +190,7 @@ const __solidLayoutSlider = (_stable, p)=>{
     }), false);
     var _ref$2 = thumbRef;
     "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$6) : thumbRef = _el$6;
-    spread(_el$6, mergeProps({
+    spread(_el$6, mergeProps(others, {
         get id () {
             return p.id;
         }

package/dist/components/switch/Switch.css

@@ -219,13 +219,11 @@
 
   /* ── Disabled state ── */
 
-  .switch--disabled,
   .switch[data-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  .switch--disabled .switch__thumb,
   .switch[data-disabled="true"] .switch__thumb {
     background-color: color-mix(
       in oklab,
@@ -234,7 +232,6 @@
     );
   }
 
-  .switch--disabled[data-selected="true"] .switch__thumb,
   .switch[data-disabled="true"][data-selected="true"] .switch__thumb {
     opacity: 0.4;
   }

package/dist/components/switch/Switch.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Switch.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, Flavor, State } from "../vocabulary";
+import type { Flavor, State, UIBaseProps } from "../vocabulary";
 export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
 export type ToggleSize = "sm" | "md" | "lg";
-export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & UIBaseProps & {
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color" | "onChange"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
@@ -12,6 +12,27 @@ export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"
     state?: State;
     flavor?: Flavor;
     size?: ToggleSize;
+    /**
+     * The new checked state.
+     *
+     * **Breaking in 3.1.** This used to be the input's native `onChange`, so it
+     * handed you an `Event` while `Slider`, `RadioGroup` and `CheckboxGroup`
+     * handed you a value. One name meant two things depending on which control
+     * you reached for, which made swapping one field for another quietly
+     * dangerous. Every control in the library now reports its new value here.
+     *
+     * The native handler has not gone away: it is {@link onNativeChange}, and
+     * it is still where you call `preventDefault()`.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the toggle is applied.
+     *
+     * This is the veto: `preventDefault()` here leaves the switch as it was and
+     * suppresses {@link onChange}. Reach for it when you need the event itself;
+     * for the value, use `onChange`.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Switch: __LayoutComponent<ToggleProps>;
 export default Switch;

package/dist/components/switch/Switch.generated.js

@@ -2,36 +2,32 @@ import { createComponent, insert, mergeProps, spread, template } from "@solidjs/
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Switch.css";
 import { Show, createSignal, omit } from "solid-js";
-import { twMerge } from "../../lib/twMerge.js";
-import { CLASSES, componentRecipe } from "./Switch.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$4 = /*#__PURE__*/ template("<label><input><span><span>");
+import { componentRecipe } from "./Switch.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _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);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutSwitch = (_stable, p)=>{
-    const others = omit(p, "class", "children", "description", "icon", "state", "flavor", "size", "checked", "defaultChecked", "disabled", "onChange", "dataTheme");
+    const others = omit(p, "class", "onNativeChange", "children", "description", "icon", "state", "flavor", "size", "checked", "defaultChecked", "disabled", "onChange", "dataTheme");
     const [internalSelected, setInternalSelected] = createSignal(Boolean(p.defaultChecked));
     const isControlled = ()=>void 0 !== p.checked;
     const isSelected = ()=>isControlled() ? Boolean(p.checked) : internalSelected();
     const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
-    const color = ()=>p.flavor ?? "accent";
-    const size = ()=>p.size ?? "md";
     const hasContent = ()=>null != p.children || null != p.description;
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
-        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+        const checked = event.currentTarget.checked;
+        if (!isControlled()) setInternalSelected(checked);
+        p.onChange?.(checked);
     };
-    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.size[size()], CLASSES.flavor[color()] ?? `switch--flavor-${color()}`, isDisabled() && CLASSES.flag.disabled, p.class)
-        }), {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    spread(_el$, mergeProps(()=>_stable.slot.root, {
         get ["data-theme"] () {
             return p.dataTheme;
         },
-        "data-slot": "switch",
         get ["data-selected"] () {
             return isSelected() ? "true" : "false";
         },
@@ -45,10 +41,7 @@ const __solidLayoutSwitch = (_stable, p)=>{
     spread(_el$2, mergeProps(others, {
         type: "checkbox",
         role: "switch"
-    }, ()=>({
-            class: CLASSES.slot.input
-        }), {
-        "data-slot": "switch-input",
+    }, ()=>_stable.slot.input, {
         get checked () {
             return isSelected();
         },
@@ -57,28 +50,17 @@ const __solidLayoutSwitch = (_stable, p)=>{
         },
         onChange: handleChange
     }), false);
-    spread(_el$3, mergeProps(()=>({
-            class: CLASSES.slot.control
-        }), {
-        "data-slot": "switch-control",
+    spread(_el$3, mergeProps(()=>_stable.slot.control, {
         "aria-hidden": "true"
     }), true);
-    spread(_el$4, mergeProps(()=>({
-            class: CLASSES.slot.thumb
-        }), {
-        "data-slot": "switch-thumb"
-    }), true);
+    spread(_el$4, mergeProps(()=>_stable.slot.thumb), true);
     insert(_el$4, createComponent(Show, {
         get when () {
             return p.icon;
         },
         get children () {
             var _el$5 = _tmpl$();
-            spread(_el$5, mergeProps(()=>({
-                    class: CLASSES.slot.icon
-                }), {
-                "data-slot": "switch-icon"
-            }), true);
+            spread(_el$5, mergeProps(()=>_stable.slot.icon), true);
             insert(_el$5, ()=>p.icon);
             return _el$5;
         }
@@ -88,18 +70,15 @@ const __solidLayoutSwitch = (_stable, p)=>{
             return hasContent();
         },
         get children () {
-            var _el$6 = _tmpl$3(), _el$9 = _el$6.firstChild, _el$0 = _el$9.nextSibling;
-            spread(_el$6, mergeProps(()=>({
-                    class: CLASSES.slot.content
-                }), {
-                "data-slot": "switch-content"
-            }), true);
+            var _el$6 = _tmpl$2(), _el$9 = _el$6.firstChild, _el$0 = _el$9.nextSibling;
+            spread(_el$6, mergeProps(()=>_stable.slot.content), true);
             insert(_el$6, createComponent(Show, {
                 get when () {
                     return p.children;
                 },
                 get children () {
-                    var _el$7 = _tmpl$2();
+                    var _el$7 = _tmpl$();
+                    spread(_el$7, mergeProps(()=>_stable.slot.label), true);
                     insert(_el$7, ()=>p.children);
                     return _el$7;
                 }
@@ -110,11 +89,7 @@ const __solidLayoutSwitch = (_stable, p)=>{
                 },
                 get children () {
                     var _el$8 = _tmpl$();
-                    spread(_el$8, mergeProps(()=>({
-                            class: CLASSES.slot.description
-                        }), {
-                        "data-slot": "description"
-                    }), true);
+                    spread(_el$8, mergeProps(()=>_stable.slot.description), true);
                     insert(_el$8, ()=>p.description);
                     return _el$8;
                 }
@@ -135,7 +110,9 @@ const Switch = defineComponent({
         "icon",
         "state",
         "flavor",
-        "size"
+        "size",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Switch_generated = Switch;