@signal9/era-ui 4.7.2 → 4.8.0

package/dist/apps/notes/notes.svelte

@@ -151,22 +151,30 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- Default lg bar holding md controls, which is the pairing Bar documents:
-		     (32-24)/2 lands on the bar's own xs-inset-sm padding, so the field sits
-		     concentric. This was md with a chromeless field — compact, but it made
-		     the filter the ONLY input in the library without a field fill. At md a
-		     real field is the same height as the bar and overflows it by the
-		     border. -->
-		<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+		<!-- An md bar holding xxs controls: 24/30/36/48 of chrome around an 18/20/22/26
+		     field and button. Two tiers apart rather than Bar's usual one, so the
+		     even gap is --era-xxs-inset-md (3/5/7/11) and the bar's own
+		     xs-inset-sm padding has to be restated — which is the whole change,
+		     and why it is spelled here rather than left to the default.
+		     A notes sidebar is chrome around a list; at the lg/md pairing it was a
+		     32px bar over 24px rows, and the chrome outweighed the content. This is
+		     the tier pair term's notes app uses, and its hardcoded 3px IS
+		     --era-xxs-inset-md at dense. The field keeps its fill: `xxs` is the
+		     smallest tier a real field fits on. -->
+		<Bar
+			size="md"
+			class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
+		>
 			<Input
 				icon={Search}
+				size="xxs"
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -312,9 +320,12 @@
 		{#if selected}
 			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
 			     side across the top of the app, so they must be the same tier. -->
-			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+			<Bar
+				size="md"
+				class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
+			>
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -359,6 +370,7 @@
 
 				<Input
 					reveal
+					size="xxs"
 					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"

package/dist/generated-docs/input.md

@@ -10,12 +10,14 @@ import { Input } from "$lib/ui/input";
 
 ## Props
 
-Inherits all props from `HTMLInputAttributes`.
+Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `xxs` is badge height — for compact chrome where the field
+sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |
 | `value?` | `(forwarded)` | `''` | bindable |

package/dist/generated-docs/llms-full.txt

@@ -2848,12 +2848,14 @@ import { Input } from "$lib/ui/input";
 
 ## Props
 
-Inherits all props from `HTMLInputAttributes`.
+Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `xxs` is badge height — for compact chrome where the field
+sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |
 | `value?` | `(forwarded)` | `''` | bindable |

package/dist/generated-docs/manifest.json

@@ -634,7 +634,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 176,
+      "tokenEstimate": 219,
       "sections": [
         "Import",
         "Props"

package/dist/ui/input/input.svelte

@@ -9,14 +9,25 @@
 		ref = $bindable(null),
 		value = $bindable(''),
 		icon = null,
+		size = 'md',
 		bare = false,
 		reveal = false,
 		class: className,
 		...restProps
-	}: HTMLInputAttributes & {
+		// The native `size` attribute (visible width in characters) is shadowed on
+		// purpose: era fields size by tier and by flex, never by character count,
+		// and `size` is the name every other component in the library uses for its
+		// tier. Consumers who genuinely want the HTML attribute can set it via
+		// {...restProps} spread from an object.
+	}: Omit<HTMLInputAttributes, 'size'> & {
 		ref?: HTMLInputElement | null;
 		/** Lucide glyph rendered inside the field, left of the text. */
 		icon?: Component<IconProps> | null;
+		/**
+		 * Field tier. `xxs` is badge height — for compact chrome where the field
+		 * sits level with xxs buttons. See inputVariants.
+		 */
+		size?: 'md' | 'xxs';
 		/** Drop the field chrome — for an input inside a container that is already the field. */
 		bare?: boolean;
 		/** Hold the field chrome back until hover — for a title or label that IS the content. */
@@ -34,6 +45,13 @@
 	// chrome" cannot tell a sanctioned exception from a regression — which is the
 	// hole the Notes fields sat in. Naming the kind closes it.
 	const kind = $derived(reveal ? 'reveal' : bare ? 'bare' : '');
+
+	// The field's glyph is the icon tier OF ITS OWN TIER, which is what puts it on
+	// the same optical footing as the icon button beside it: an md field pairs
+	// with a default button (h-xs glyph), an xxs field with an xxs button
+	// (icon-xxs). One size for both would leave the two glyphs in one bar drawn at
+	// different weights.
+	const glyphClass = $derived(size === 'xxs' ? 'size-(--era-icon-xxs)' : 'size-(--era-h-xs)');
 </script>
 
 {#if icon}
@@ -48,9 +66,10 @@
 	     arbitrary container that may carry its own fill. -->
 	<div
 		data-input-field={kind}
-		class={cn(inputVariants({ bare, reveal }), 'items-center gap-(--era-gap)', className)}
+		data-input-size={size}
+		class={cn(inputVariants({ bare, reveal, size }), 'items-center gap-(--era-gap)', className)}
 	>
-		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+		<Icon class={cn('shrink-0 text-muted', glyphClass)} />
 		<input
 			bind:this={ref}
 			bind:value
@@ -63,7 +82,8 @@
 		bind:this={ref}
 		bind:value
 		data-input-field={kind}
-		class={cn(inputVariants({ bare, reveal }), textClass, className)}
+		data-input-size={size}
+		class={cn(inputVariants({ bare, reveal, size }), textClass, className)}
 		{...restProps}
 	/>
 {/if}

package/dist/ui/input/input.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Component } from 'svelte';
 import type { IconProps } from '@lucide/svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLInputAttributes & {
+type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
     ref?: HTMLInputElement | null;
     /** Lucide glyph rendered inside the field, left of the text. */
     icon?: Component<IconProps> | null;
+    /**
+     * Field tier. `xxs` is badge height — for compact chrome where the field
+     * sits level with xxs buttons. See inputVariants.
+     */
+    size?: 'md' | 'xxs';
     /** Drop the field chrome — for an input inside a container that is already the field. */
     bare?: boolean;
     /** Hold the field chrome back until hover — for a title or label that IS the content. */

package/dist/ui/input/variants.d.ts

@@ -24,7 +24,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -42,21 +42,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };
@@ -69,7 +92,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -87,21 +110,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };
@@ -114,7 +160,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -132,21 +178,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };

package/dist/ui/input/variants.js

@@ -27,7 +27,7 @@ export const inputVariants = tv({
          * edge to edge so the two have no gap between them.
          */
         bare: {
-            false: 'rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)',
+            false: 'bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)',
             true: 'bg-transparent shadow-none'
         },
         /**
@@ -45,34 +45,60 @@ export const inputVariants = tv({
             true: 'bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)',
             false: ''
         },
-        /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+        /**
+         * The field's TIER — height, radius and side padding travel together,
+         * because they are one decision. Split them and a field ends up md-tall
+         * with xxs corners, which is how the ladder stops being a ladder.
+         *
+         * - `md` (default) — THE field, and the pairing an md bar's md content
+         *   expects. Its --era-field-px is glyph-advance derived: the padding a
+         *   STRING of text wants, not a single centred glyph.
+         * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+         *   SMALLEST tier that can hold body text at all: its inset is
+         *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+         *   below (h-xs) IS the text size and has none left. For compact chrome —
+         *   a filter that sits level with an xxs icon button, a title bar that
+         *   shouldn't outweigh the document under it. Side padding is
+         *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+         *   on this tier read as one family.
+         */
+        size: {
+            md: 'h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)',
+            xxs: 'h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)'
+        },
+        /**
+         * Height OVERRIDES, for the fields that are not their tier's height. No
+         * default: the tier sets the height, and these take it back.
+         */
         height: {
-            md: 'h-(--era-h-md)',
-            // h-full, NOT the md tier: a bare input's container IS the field, so it
-            // takes that container's height. Keeping h-md here made a bare input
-            // inside an h-md Bar overflow it by the bar's border — a −0.5px gap,
-            // which is the even-gap law failing by a hair rather than obviously.
+            // h-full, NOT a tier height: a bare input's container IS the field, so it
+            // takes that container's height. Keeping a tier height here made a bare
+            // input inside an h-md Bar overflow it by the bar's border — a −0.5px
+            // gap, which is the even-gap law failing by a hair rather than obviously.
             full: 'h-full',
-            auto: 'min-h-(--era-h-md)'
+            // h-auto is load-bearing — it is what outranks the tier's own height so
+            // the field can grow with its content (Textarea).
+            auto: 'h-auto min-h-(--era-h-md)'
         },
         /**
-         * Side padding. `trailing` is for a field that holds a control at its end
-         * (the date picker's calendar trigger): the leading edge keeps the shared
-         * text inset so the text still lines up with every other field, and the
-         * trailing edge becomes the concentric inset for that sm-tier control, so
-         * its gap to the field edge equals its gap above and below.
+         * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+         * control at its end (the date picker's calendar trigger): the leading edge
+         * keeps the shared text inset so the text still lines up with every other
+         * field, and the trailing edge becomes the concentric inset for that
+         * sm-tier control, so its gap to the field edge equals its gap above and
+         * below.
          */
         pad: {
-            even: 'px-(--era-field-px)',
             trailing: 'ps-(--era-field-px) pe-(--era-sm-inset-md)',
             none: 'px-0'
         }
     },
     compoundVariants: [
-        // Chrome and padding travel together: a field with no chrome has no box to
-        // pad. Spelling this as a compound rather than leaving it to the caller is
-        // what stops `bare` from becoming a second, differently-padded field.
-        { bare: true, class: 'h-full px-0' }
+        // Chrome, padding and corners travel together: a field with no chrome has
+        // no box to pad and no corners to round. Spelling this as a compound rather
+        // than leaving it to the caller is what stops `bare` from becoming a
+        // second, differently-padded field.
+        { bare: true, class: 'h-full rounded-none px-0' }
     ],
-    defaultVariants: { bare: false, reveal: false, height: 'md', pad: 'even' }
+    defaultVariants: { bare: false, reveal: false, size: 'md' }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.7.2",
+	"version": "4.8.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",