@glasshome/ui 1.5.0 → 1.6.0

package/dist/solid/option-card.d.ts

@@ -0,0 +1,17 @@
+import { type JSX } from "solid-js";
+export declare function OptionCardGroup(props: {
+    value: string | null;
+    onChange: (value: string) => void;
+    "aria-label"?: string;
+    class?: string;
+    children: JSX.Element;
+}): JSX.Element;
+export declare function OptionCard(props: {
+    value: string;
+    title: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: JSX.Element;
+}): JSX.Element;

package/dist/solid/password-input.d.ts

@@ -0,0 +1,9 @@
+import { type Component, type ComponentProps, type JSX } from "solid-js";
+import { Input } from "./input.js";
+declare const PasswordInput: Component<Omit<ComponentProps<typeof Input>, "type"> & {
+    /** Rendered left-aligned inside the field (e.g. a lock glyph). */
+    leading?: JSX.Element;
+    showLabel?: string;
+    hideLabel?: string;
+}>;
+export { PasswordInput };

package/dist/solid/radio-group.d.ts

@@ -1,5 +1,7 @@
 import { RadioGroup as RadioGroupPrimitive } from "@kobalte/core/radio-group";
 import { type Component, type ComponentProps } from "solid-js";
 declare const RadioGroup: Component<ComponentProps<typeof RadioGroupPrimitive>>;
-declare const RadioGroupItem: Component<ComponentProps<typeof RadioGroupPrimitive.Item>>;
+declare const RadioGroupItem: Component<ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    showControl?: boolean;
+}>;
 export { RadioGroup, RadioGroupItem };

package/dist/solid/settings-row.d.ts

@@ -36,6 +36,10 @@ export declare function LabeledInput(props: {
 }): JSX.Element;
 export declare function SwitchRow(props: {
     label: string;
+    description?: string;
+    /** Iconify id shown before the label (sensitive-device rows, platform toggles). */
+    icon?: string;
     checked: boolean;
+    disabled?: boolean;
     onChange: (value: boolean) => void;
 }): JSX.Element;

package/dist/solid/step-indicator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Position inside a multi-step flow: dots for the eye, one spoken line for
+ * screen readers. The dots carry no text of their own, so the sr-only line is
+ * the only place the position is readable.
+ */
+export declare function StepIndicator(props: {
+    count: number;
+    index: number;
+    class?: string;
+}): import("solid-js").JSX.Element;

package/dist/solid/switch.d.ts

@@ -1,11 +1,8 @@
-import { type Component } from "solid-js";
-interface SwitchProps {
+import { type Component, type ComponentProps } from "solid-js";
+type SwitchProps = Omit<ComponentProps<"button">, "onChange" | "children"> & {
     checked?: boolean;
     defaultChecked?: boolean;
     onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    class?: string;
-    name?: string;
-}
+};
 declare const Switch: Component<SwitchProps>;
 export { Switch };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",

package/src/styles/globals.css

@@ -192,28 +192,29 @@
 }
 
 /**
- * Consistent, theme-aware thin scrollbar across browsers. Firefox uses
- * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos.
- * Applied by the <ScrollArea> component so every scroll surface reads the same.
+ * Consistent, theme-aware overlay scrollbar across browsers. Firefox uses
+ * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos
+ * (no stepper-button pseudo is declared, so none render). Applied by every
+ * scroll surface that isn't a bare page — <ScrollArea>, dialogs, sheets.
  */
 .gh-scroll {
 	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
+	scrollbar-color: color-mix(in srgb, var(--foreground) 22%, transparent) transparent;
 	&::-webkit-scrollbar {
-		width: 10px;
-		height: 10px;
+		width: 8px;
+		height: 8px;
 	}
 	&::-webkit-scrollbar-track {
 		background: transparent;
 	}
 	&::-webkit-scrollbar-thumb {
-		background: var(--border);
+		background: color-mix(in srgb, var(--foreground) 22%, transparent);
 		border-radius: 9999px;
 		border: 2px solid transparent;
 		background-clip: padding-box;
 	}
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--muted-foreground);
+		background: color-mix(in srgb, var(--foreground) 38%, transparent);
 	}
 }