@stll/ui 0.47.1 → 0.48.0

package/dist/components/button.d.ts

@@ -13,7 +13,7 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "icon-sm" | "icon" | "default" | "chip" | "icon-lg" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "default" | "icon" | "row" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/sidebar.d.ts

@@ -33,7 +33,7 @@ declare function useSidebarLayout(): SidebarLayout;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;

package/dist/review/text-mark.d.ts

@@ -62,14 +62,18 @@ export declare const SEARCH_HIT_DESCENDANT_MARK_CLASS = "[&_mark]:box-decoration
 type TextMarkHighlightRuleOptions = {
   /** The registered `CSS.highlights` name. */
   name: string;
+  /** Defaults to a fill, the find mark. */
+  variant?: TextMarkVariant | undefined;
   tone: TextMarkTone;
-  state: Exclude<TextMarkState, "matched">;
+  state: TextMarkState;
 };
 /**
- * A fill mark for the CSS Custom Highlight API. `::highlight()` takes colours
- * but no classes, custom properties or rings, so a find that marks ranges
- * rather than elements gets the fill's wash as a rule; the active range is
- * told apart by its stronger wash alone.
+ * A mark for the CSS Custom Highlight API, for text a surface marks as ranges
+ * rather than elements (a find over a reader, verdicts over painted document
+ * pages). `::highlight()` takes colours and text decorations but no classes,
+ * custom properties, offsets or rings, so the rule restates the variant's
+ * line and the state's wash; the active range is told apart by its stronger
+ * wash alone.
  */
-export declare const textMarkHighlightRule: ({ name, tone, state }: TextMarkHighlightRuleOptions) => string;
+export declare const textMarkHighlightRule: ({ name, variant, tone, state }: TextMarkHighlightRuleOptions) => string;
 //#endregion

package/dist/review/text-mark.js

@@ -58,15 +58,20 @@ const textMarkClass = ({ variant, tone, state = "rest", weight = "inherit" }) =>
 */
 const SEARCH_HIT_DESCENDANT_MARK_CLASS = "[&_mark]:box-decoration-clone [&_mark]:text-foreground [&_mark]:[--text-mark:var(--warning)] [&_mark]:bg-(--text-mark)/30 [&_mark]:dark:bg-(--text-mark)/20 [&_mark]:font-medium";
 /**
-* A fill mark for the CSS Custom Highlight API. `::highlight()` takes colours
-* but no classes, custom properties or rings, so a find that marks ranges
-* rather than elements gets the fill's wash as a rule; the active range is
-* told apart by its stronger wash alone.
+* A mark for the CSS Custom Highlight API, for text a surface marks as ranges
+* rather than elements (a find over a reader, verdicts over painted document
+* pages). `::highlight()` takes colours and text decorations but no classes,
+* custom properties, offsets or rings, so the rule restates the variant's
+* line and the state's wash; the active range is told apart by its stronger
+* wash alone.
 */
-const textMarkHighlightRule = ({ name, tone, state }) => {
+const textMarkHighlightRule = ({ name, variant = "fill", tone, state }) => {
 	const color = TEXT_MARK_TONE_COLOR[tone];
-	const { light, dark } = FILL_PERCENT[state];
-	return [`::highlight(${name}) { background-color: color-mix(in oklab, ${color} ${light}%, transparent); color: inherit; }`, `.dark ::highlight(${name}) { background-color: color-mix(in oklab, ${color} ${dark}%, transparent); }`].join("\n");
+	const { light, dark } = HIGHLIGHT_WASH_PERCENT[variant === "fill" ? "fill" : "line"][state];
+	const wash = (percent) => percent === 0 ? "transparent" : `color-mix(in oklab, ${color} ${String(percent)}%, transparent)`;
+	const line = HIGHLIGHT_LINE[variant];
+	const decoration = line === null ? "" : ` text-decoration-line: ${line.line}; text-decoration-style: ${line.style}; text-decoration-color: ${color}; text-decoration-thickness: 2px;`;
+	return [`::highlight(${name}) { background-color: ${wash(light)}; color: inherit;${decoration} }`, `.dark ::highlight(${name}) { background-color: ${wash(dark)}; }`].join("\n");
 };
 const TEXT_MARK_BASE_CLASS = "box-decoration-clone";
 const LINE_CLASS = "text-inherit underline decoration-2 underline-offset-3 decoration-[color:var(--text-mark)]";
@@ -89,17 +94,6 @@ const TONE_CLASS = {
 	"option-red": "[--text-mark:var(--option-red)]",
 	"option-purple": "[--text-mark:var(--option-purple)]"
 };
-/** The fill's wash, in percent of the hue, for the highlight rule. */
-const FILL_PERCENT = {
-	rest: {
-		light: 30,
-		dark: 20
-	},
-	active: {
-		light: 45,
-		dark: 35
-	}
-};
 const WASH_CLASS = {
 	fill: {
 		rest: "bg-(--text-mark)/30 dark:bg-(--text-mark)/20",
@@ -112,6 +106,58 @@ const WASH_CLASS = {
 		active: "bg-(--text-mark)/30 dark:bg-(--text-mark)/20 ring-1 ring-(--text-mark)"
 	}
 };
+/** Each layer's wash in percent of the hue, as `WASH_CLASS` spells it, for
+*  the highlight rule. */
+const HIGHLIGHT_WASH_PERCENT = {
+	fill: {
+		rest: {
+			light: 30,
+			dark: 20
+		},
+		matched: {
+			light: 30,
+			dark: 20
+		},
+		active: {
+			light: 45,
+			dark: 35
+		}
+	},
+	line: {
+		rest: {
+			light: 0,
+			dark: 0
+		},
+		matched: {
+			light: 15,
+			dark: 15
+		},
+		active: {
+			light: 30,
+			dark: 20
+		}
+	}
+};
+/** Each variant's line, as `VARIANT_CLASS` draws it; a fill has none. */
+const HIGHLIGHT_LINE = {
+	fill: null,
+	underline: {
+		line: "underline",
+		style: "solid"
+	},
+	dotted: {
+		line: "underline",
+		style: "dotted"
+	},
+	wavy: {
+		line: "underline",
+		style: "wavy"
+	},
+	strike: {
+		line: "line-through",
+		style: "solid"
+	}
+};
 const WEIGHT_CLASS = {
 	inherit: "",
 	medium: "font-medium"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.47.1",
+  "version": "0.48.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",