@jonmilner/ui 0.8.0 → 0.8.1

package/dist/MultiSelect/MultiSelect.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}
+@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:calc(-1 * var(--space-2))}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[data-highlighted]:focus-visible{color:canvastext;background-color:canvas}._1seauxl6[aria-disabled=true]{color:graytext}}}

package/dist/MultiSelect/client.d.mts

@@ -1,3 +1,4 @@
+import "./index.mjs";
 import { ReactNode } from "react";
 import "@base-ui/react/select";
 //#region src/MultiSelect/client.d.ts

package/dist/MultiSelect/client.mjs

@@ -10,13 +10,14 @@ import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { createContext as _, use as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
 import { Select as w } from "@base-ui/react/select";
 //#region src/MultiSelect/client.tsx
-function T({ options: e, placeholder: t, countLabel: n, disabled: r }) {
-	let { ref: a } = o(), s = x(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+function T({ options: e, placeholder: t, countLabel: n, disabled: r, size: a }) {
+	let { ref: s } = o(), c = x(() => new Map(e.map((e) => [e.value, e.label])), [e]);
 	return /* @__PURE__ */ h(w.Trigger, {
 		disabled: r,
-		ref: a,
+		ref: s,
 		render: i({
 			variant: "secondary",
+			size: a,
 			iconEnd: l,
 			className: p,
 			children: /* @__PURE__ */ h(w.Value, {
@@ -24,7 +25,7 @@ function T({ options: e, placeholder: t, countLabel: n, disabled: r }) {
 				placeholder: t,
 				children: (e) => e.length > 0 ? /* @__PURE__ */ h(E, {
 					count: n.replaceAll("{count}", String(e.length)),
-					labels: e.map((e) => s.get(e) ?? e)
+					labels: e.map((e) => c.get(e) ?? e)
 				}) : t
 			})
 		})

package/dist/MultiSelect/index.d.mts

@@ -16,8 +16,9 @@ export type MultiSelectProps = StyleProps & {
   options: readonly MultiSelectOption[];
   placeholder?: string;
   required?: boolean;
+  size?: "sm" | "med" | "lg";
   style?: CSSProperties;
   value?: readonly string[];
 };
-export declare function MultiSelect({ options, value, defaultValue, onValueChange, label, description, error, placeholder, countLabel, disabled, required, name, className, style, ...atoms }: MultiSelectProps): import("react").JSX.Element;
+export declare function MultiSelect({ options, value, defaultValue, onValueChange, label, description, error, placeholder, countLabel, disabled, required, size, name, className, style, ...atoms }: MultiSelectProps): import("react").JSX.Element;
 //#endregion

package/dist/MultiSelect/index.mjs

@@ -7,18 +7,18 @@ import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, M
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Select as h } from "@base-ui/react/select";
 //#region src/MultiSelect/index.tsx
-function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b, description: x, error: S, placeholder: C = "Select", countLabel: w = "{count} selected", disabled: T = !1, required: E = !1, name: D, className: O, style: k, ...A }) {
+function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b, description: x, error: S, placeholder: C = "Select", countLabel: w = "{count} selected", disabled: T = !1, required: E = !1, size: D = "med", name: O, className: k, style: A, ...j }) {
 	return /* @__PURE__ */ m(r, {
-		...A,
-		className: O,
+		...j,
+		className: k,
 		disabled: T,
 		invalid: S != null && S !== !1 && S !== "",
-		style: k,
+		style: A,
 		children: [
 			/* @__PURE__ */ p(d, { children: /* @__PURE__ */ m(u, {
 				defaultValue: v,
 				disabled: T,
-				name: D,
+				name: O,
 				onValueChange: y,
 				required: E,
 				value: _,
@@ -28,7 +28,8 @@ function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b,
 						countLabel: w,
 						disabled: T,
 						options: g,
-						placeholder: C
+						placeholder: C,
+						size: D
 					}),
 					/* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(l, { children: /* @__PURE__ */ p(s, { children: g.map((r) => /* @__PURE__ */ m(h.Item, {
 						disabled: r.disabled,
@@ -39,20 +40,21 @@ function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b,
 							className: a,
 							display: "flex",
 							gap: "8",
+							justifyContent: "space-between",
 							minBlockSize: "sm",
 							paddingInline: "12"
 						}),
 						value: r.value,
-						children: [/* @__PURE__ */ p(n, {
-							className: i,
-							size: "sm"
-						}), /* @__PURE__ */ p(h.ItemText, {
+						children: [/* @__PURE__ */ p(h.ItemText, {
 							render: /* @__PURE__ */ p(t, {
 								as: "span",
 								font: "label",
 								size: "sm"
 							}),
 							children: r.label
+						}), /* @__PURE__ */ p(n, {
+							className: i,
+							size: "sm"
 						})]
 					}, r.value)) }) }) })
 				]

package/dist/docs/MultiSelect.md

@@ -25,6 +25,7 @@ A form field for picking any number of values from a list too long to show at on
 - `value` with `onValueChange` controls it; `defaultValue` leaves it uncontrolled. Both are arrays of option values, and `onValueChange` gets the new array.
 - `name` makes each selected value submit as its own `name=value` pair, as a `<select multiple>` does; read them with `formData.getAll(name)`. Nothing selected submits nothing.
 - `placeholder` (`"Select"`) shows while nothing is selected. `countLabel` (`"{count} selected"`) is the summary once the joined labels do not fit; `{count}` is replaced with the number selected. Translate both. One selected label that does not fit is truncated, not replaced by a count.
+- `size` (`sm`, `med`, `lg`; default `med`) is the trigger's, as Button's: it matches a SearchField, TextField or Button of the same size in height. The list's options do not change size.
 - `disabled` takes the trigger out of the tab order and mutes the label. `required` sets `aria-required` on the trigger; report a missing value through `error`.
 - The trigger and the open listbox are both named by `label`.
 - Style props, `className` and `style` go to the `Field` around the label, trigger and messages, not to the trigger or the popup.
@@ -91,9 +92,9 @@ A form field for picking any number of values from a list too long to show at on
 - The trigger is a button with `aria-haspopup="listbox"` and `aria-expanded`, labelled by the `Field` label and described by the description and error. The popup is `role="listbox"` with `aria-multiselectable="true"`, options are `role="option"` with `aria-selected`.
 - Opening from the keyboard focuses an option; focus stays in the list until it closes. Choosing an option toggles it and leaves the list open, so several can be picked in one visit. Closed by Esc or the trigger, focus returns at once to the trigger, so a Tab pressed while the list fades goes on to the next control. A press outside or a Tab out leaves focus to Base UI.
 - A closed list stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, so a list opened during the fade (the next filter's) is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
-- Selection is a check mark on the option as well as its highlight, so it is not color alone. The check's space is always in the row, so the text never shifts.
+- Selection is a check mark on the option as well as its highlight, so it is not color alone. The check sits at the end of the row; its space is always kept, so the labels start at the option's padding and never shift.
 - The trigger summary is text: the joined labels, or the count. When the count replaces the labels, the labels are hidden from assistive technology so the count is read once.
-- The shared focus ring shows on the trigger and, from the keyboard, on the highlighted option. Under forced colors the highlighted option is `Highlight` with `HighlightText`, and the popup keeps its border.
+- The shared focus ring shows on the trigger and, from the keyboard, on the highlighted option, drawn inset so the popup's edge does not crowd or clip it (ADR 0122). Under forced colors the pointer's highlighted option is `Highlight` with `HighlightText`; a keyboard-focused one keeps `Canvas` so the `Highlight` ring shows, and the popup keeps its border.
 
 ## Props
 
@@ -115,6 +116,7 @@ Generated from the TypeScript types.
 | `options` | `readonly Option[]` | yes |  |
 | `placeholder` | `string` | no |  |
 | `required` | `boolean` | no |  |
+| `size` | `"lg" \| "med" \| "sm"` | no |  |
 | `style` | `CSSProperties` | no |  |
 | `value` | `readonly string[]` | no |  |
 

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "components": [
     {
       "name": "AlertDialog",
@@ -1615,6 +1615,16 @@
           "type": "boolean",
           "required": false
         },
+        {
+          "name": "size",
+          "type": "\"lg\" | \"med\" | \"sm\"",
+          "required": false,
+          "values": [
+            "lg",
+            "med",
+            "sm"
+          ]
+        },
         {
           "name": "style",
           "type": "CSSProperties",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"