@agentero/design-system 0.34.0 → 0.34.2

package/mcp/manifests/components.html

@@ -594,7 +594,7 @@
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>3.8s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.1s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2855,7 +2855,7 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Combobox.Root</h2>
       <div class="badges">
-        <label for="c-7-components-combobox-props" class="badge ok as-toggle">39 prop types</label>
+        <label for="c-7-components-combobox-props" class="badge ok as-toggle">41 prop types</label>
         
         <label for="c-7-components-combobox-stories" class="badge ok as-toggle">10 stories</label>
         
@@ -2900,7 +2900,7 @@ import { Combobox } from &#39;@agentero/design-system/combobox&#39;;
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">39 prop types</span>
+              <span class="badge ok">41 prop types</span>
             </div>
             <pre><code>Component: src/combobox/index.ts::Combobox</code></pre>
             <pre><code>Props:</code></pre>
@@ -3047,6 +3047,28 @@ itemToStringValue?: (itemValue: unknown) =&gt; string
  */
 limit?: number = -1
 
+/**
+ * Whether the options are being fetched. Once the list has been open and
+ * loading for half a second, `loadingLabel` is announced once: sooner, a
+ * screen reader would cut it off to echo the key just typed, and a faster
+ * answer has no wait to announce. `Content` is marked `aria-busy`, and
+ * `Empty` shows nothing, so &quot;no results&quot; is not read out before the results
+ * arrive. The announcement comes from a visually hidden live region the root
+ * renders next to the field, so it is in place before the list opens. On a search
+ * against an API, pass it from the first render, as `false` while idle: a root
+ * that leaves it out gets no live region. A list filtered in memory never
+ * waits and leaves it out. While loading with no rows yet, the surface shows
+ * whatever placeholder `Content` holds — `Empty` stays quiet.
+ */
+loading?: boolean
+
+/**
+ * What a screen reader hears when `loading` turns `true`. Announced only; any
+ * loading visuals — placeholder rows, a spinner — are yours to render inside
+ * `Content`, hidden from assistive technology. Defaults to `&#39;Loading…&#39;`.
+ */
+loadingLabel?: string = &#39;Loading…&#39;
+
 /**
  * The locale to use for string comparison.
  * Defaults to the user&#39;s runtime locale.
@@ -3340,9 +3362,10 @@ here as tags.</div>
               <div class="hint">Options fetched as you type, the way the apps load data: the rows are a component
 that suspends on the request, so a `Suspense` boundary inside `Content` shows
 placeholder rows until the first results land. The rows read a deferred copy of
-the query, so a new search keeps the previous rows on screen while it loads and
-`Content` is marked busy until they are replaced; the placeholders never come
-back. Nothing tracks `loading` by hand, and reading the data by query is what
+the query, so a new search keeps the previous rows on screen while it loads, and
+passing that staleness as `loading` announces the wait and marks `Content` busy
+until they are replaced; the placeholders never come back. Nothing tracks a
+request by hand, and reading the data by query is what
 makes out-of-order responses harmless. With react-query, drop a
 `useSuspenseQuery` where `use()` is, or use `placeholderData: keepPreviousData`
 with a plain `useQuery` for the same behaviour.</div>
@@ -3360,12 +3383,14 @@ with a plain `useQuery` for the same behaviour.</div>
             filter={null}
             itemToStringLabel={(agency: Agency) =&gt; agency.name}
             isItemEqualToValue={(a: Agency, b: Agency) =&gt; a.id === b.id}
+            loading={isStale}
+            loadingLabel=&quot;Searching agencies…&quot;
             onInputValueChange={(value, { reason }) =&gt; {
                 // Picking a row writes its label into the input; that is not a new search.
                 if (reason !== &#39;item-press&#39;) setQuery(value);
             }}&gt;
             &lt;Combobox.Input placeholder=&quot;Search agencies&quot; aria-label=&quot;Search agencies&quot; /&gt;
-            &lt;Combobox.Content aria-busy={isStale || undefined}&gt;
+            &lt;Combobox.Content&gt;
                 &lt;Suspense fallback={&lt;SkeletonRows /&gt;}&gt;
                     &lt;AgencyItems query={deferredQuery} /&gt;
                 &lt;/Suspense&gt;
@@ -3376,21 +3401,24 @@ with a plain `useQuery` for the same behaviour.</div>
             </div>
             <div class="note ok">
               <div class="row">
-                <span class="ex-name">Async Search With Status</span>
+                <span class="ex-name">Async Search With Loading</span>
                 <span class="badge ok">story ok</span>
               </div>
-              <div>API search that waits for two characters, with loading status</div>
+              <div>API search that waits for two characters and announces its loading state</div>
               <div class="hint">The same search without Suspense, for a consumer that gets a `loading` flag from
 its data layer instead: `filter={null}`, the rows arrive through `filteredItems`,
-`Content` is marked busy and `Status` announces the wait. Placeholder rows show
-only while there is nothing to show yet; after that, the previous rows stay
-until the new ones replace them. A request that is no longer the latest is
-dropped.
+and the flag goes to `Root` as `loading`. That is all the wiring the wait needs:
+`Content` is marked busy, `loadingLabel` is announced once when the request
+starts, and `Empty` holds back &quot;no results&quot; until the answer is in. Placeholder
+rows show only while there is nothing to show yet, hidden from assistive
+technology since the label already speaks for them; after that, the previous
+rows stay until the new ones replace them. A request that is no longer the
+latest is dropped.
 
 `minInputLength` keeps the list shut until two characters are typed — focusing
 the field opens nothing, and deleting back under the minimum closes it — and
 no request goes out for a shorter query either.</div>
-              <pre><code>const AsyncSearchWithStatus = () =&gt; {
+              <pre><code>const AsyncSearchWithLoading = () =&gt; {
     const [results, setResults] = useState&lt;Agency[]&gt;([]);
     const [isLoading, setIsLoading] = useState(false);
     // Only the latest request may land; fast typing returns responses out of order.
@@ -3420,17 +3448,15 @@ no request goes out for a shorter query either.</div>
             filteredItems={results}
             filter={null}
             minInputLength={MIN_QUERY_LENGTH}
+            loading={isLoading}
+            loadingLabel=&quot;Searching agencies…&quot;
             itemToStringLabel={(agency: Agency) =&gt; agency.name}
             isItemEqualToValue={(a: Agency, b: Agency) =&gt; a.id === b.id}
             onInputValueChange={onInputValueChange}&gt;
             &lt;Combobox.Input placeholder=&quot;Search agencies&quot; aria-label=&quot;Search agencies&quot; /&gt;
-            &lt;Combobox.Content aria-busy={isLoading || undefined}&gt;
-                {/* The rows show the wait; `Status` only announces it. */}
-                &lt;Combobox.Status className=&quot;sr-only&quot;&gt;
-                    {isLoading ? &#39;Searching…&#39; : undefined}
-                &lt;/Combobox.Status&gt;
+            &lt;Combobox.Content&gt;
                 {isLoading &amp;&amp; results.length === 0 &amp;&amp; &lt;SkeletonRows /&gt;}
-                &lt;Combobox.Empty&gt;{isLoading ? undefined : &#39;No agencies found&#39;}&lt;/Combobox.Empty&gt;
+                &lt;Combobox.Empty&gt;No agencies found&lt;/Combobox.Empty&gt;
                 &lt;Combobox.List&gt;
                     {(agency: Agency) =&gt; (
                         &lt;Combobox.Item key={agency.id} value={agency}&gt;
@@ -7972,8 +7998,12 @@ required?: boolean = false</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Optional field with a muted suffix</div>
-              <div class="hint">Appends a muted &quot; (optional)&quot; suffix for fields that can be left blank.</div>
-              <pre><code>const Optional = () =&gt; &lt;Label optional&gt;Phone number&lt;/Label&gt;;</code></pre>
+              <div class="hint">Appends a muted &quot; (optional)&quot; suffix for fields that can be left blank. The
+suffix is real text, so it is part of the control&#39;s accessible name.</div>
+              <pre><code>const Optional = () =&gt; &lt;&gt;
+    &lt;Label optional htmlFor=&quot;phone&quot;&gt;Phone number&lt;/Label&gt;
+    &lt;input id=&quot;phone&quot; type=&quot;tel&quot; className={inputRecipe()} /&gt;
+&lt;/&gt;;</code></pre>
             </div>
             <div class="note ok">
               <div class="row">

package/mcp/manifests/components.json

@@ -2007,7 +2007,7 @@
         "displayName": "Combobox.Root",
         "exportName": "Combobox",
         "filePath": "/home/runner/work/design-system/design-system/src/combobox/index.ts",
-        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. The list opens on focus, on the first keystroke\nor from the chevron of `Input`'s `select` variant.\n\nFor a search against an API, set `minInputLength` so the list stays shut until\nthe query is worth sending: a field that opens an empty list on focus reads as\nbroken. For a pick from a short fixed list with no typing at all, prefer a\nselect.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.\n\nEvery Base UI root prop is accepted and forwarded — `items`, `filter`,\n`value`, `onValueChange` and so on. `open` stays the consumer's to control;\n`minInputLength` only refuses to open below the minimum.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
+        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. The list opens on focus, on the first keystroke\nor from the chevron of `Input`'s `select` variant.\n\nFor a search against an API, set `minInputLength` so the list stays shut until\nthe query is worth sending: a field that opens an empty list on focus reads as\nbroken. For a pick from a short fixed list with no typing at all, prefer a\nselect.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, request\nthem from `onInputValueChange`, and pass the request's state as `loading`:\nthe combobox announces the wait and marks the list busy on its own.\n\nEvery Base UI root prop is accepted and forwarded — `items`, `filter`,\n`value`, `onValueChange` and so on. `open` stays the consumer's to control;\n`minInputLength` only refuses to open below the minimum.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
         "jsDocTags": {
           "summary": [
             "Root provider for an input-triggered filterable list"
@@ -2790,6 +2790,46 @@
                 "fileName": "src/combobox/combobox.tsx"
               }
             ]
+          },
+          "loading": {
+            "name": "loading",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Whether the options are being fetched. Once the list has been open and\nloading for half a second, `loadingLabel` is announced once: sooner, a\nscreen reader would cut it off to echo the key just typed, and a faster\nanswer has no wait to announce. `Content` is marked `aria-busy`, and\n`Empty` shows nothing, so \"no results\" is not read out before the results\narrive. The announcement comes from a visually hidden live region the root\nrenders next to the field, so it is in place before the list opens. On a search\nagainst an API, pass it from the first render, as `false` while idle: a root\nthat leaves it out gets no live region. A list filtered in memory never\nwaits and leaves it out. While loading with no rows yet, the surface shows\nwhatever placeholder `Content` holds — `Empty` stays quiet.",
+            "defaultValue": null,
+            "parent": {
+              "name": "ComboboxRootProps",
+              "fileName": "src/combobox/combobox.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/combobox/combobox.tsx"
+              }
+            ]
+          },
+          "loadingLabel": {
+            "name": "loadingLabel",
+            "required": false,
+            "type": {
+              "name": "string"
+            },
+            "description": "What a screen reader hears when `loading` turns `true`. Announced only; any\nloading visuals — placeholder rows, a spinner — are yours to render inside\n`Content`, hidden from assistive technology. Defaults to `'Loading…'`.",
+            "defaultValue": {
+              "value": "'Loading…'"
+            },
+            "parent": {
+              "name": "ComboboxRootProps",
+              "fileName": "src/combobox/combobox.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/combobox/combobox.tsx"
+              }
+            ]
           }
         }
       },
@@ -2837,15 +2877,15 @@
         {
           "id": "components-combobox--async-search",
           "name": "Async Search",
-          "snippet": "const AsyncSearch = () => {\n    const [query, setQuery] = useState('');\n    // The rows read the deferred query: while the new one suspends, React keeps rendering the\n    // old rows instead of falling back to the placeholders.\n    const deferredQuery = useDeferredValue(query);\n    const isStale = query !== deferredQuery;\n\n    return (\n        // No `items` and `filter={null}`: the server did the filtering, the child renders what came\n        // back, and `isItemEqualToValue` keeps a re-fetched copy counting as the selected one.\n        <Combobox.Root\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={(value, { reason }) => {\n                // Picking a row writes its label into the input; that is not a new search.\n                if (reason !== 'item-press') setQuery(value);\n            }}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isStale || undefined}>\n                <Suspense fallback={<SkeletonRows />}>\n                    <AgencyItems query={deferredQuery} />\n                </Suspense>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "Options fetched as you type, the way the apps load data: the rows are a component\nthat suspends on the request, so a `Suspense` boundary inside `Content` shows\nplaceholder rows until the first results land. The rows read a deferred copy of\nthe query, so a new search keeps the previous rows on screen while it loads and\n`Content` is marked busy until they are replaced; the placeholders never come\nback. Nothing tracks `loading` by hand, and reading the data by query is what\nmakes out-of-order responses harmless. With react-query, drop a\n`useSuspenseQuery` where `use()` is, or use `placeholderData: keepPreviousData`\nwith a plain `useQuery` for the same behaviour."
+          "snippet": "const AsyncSearch = () => {\n    const [query, setQuery] = useState('');\n    // The rows read the deferred query: while the new one suspends, React keeps rendering the\n    // old rows instead of falling back to the placeholders.\n    const deferredQuery = useDeferredValue(query);\n    const isStale = query !== deferredQuery;\n\n    return (\n        // No `items` and `filter={null}`: the server did the filtering, the child renders what came\n        // back, and `isItemEqualToValue` keeps a re-fetched copy counting as the selected one.\n        <Combobox.Root\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            loading={isStale}\n            loadingLabel=\"Searching agencies…\"\n            onInputValueChange={(value, { reason }) => {\n                // Picking a row writes its label into the input; that is not a new search.\n                if (reason !== 'item-press') setQuery(value);\n            }}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content>\n                <Suspense fallback={<SkeletonRows />}>\n                    <AgencyItems query={deferredQuery} />\n                </Suspense>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "Options fetched as you type, the way the apps load data: the rows are a component\nthat suspends on the request, so a `Suspense` boundary inside `Content` shows\nplaceholder rows until the first results land. The rows read a deferred copy of\nthe query, so a new search keeps the previous rows on screen while it loads, and\npassing that staleness as `loading` announces the wait and marks `Content` busy\nuntil they are replaced; the placeholders never come back. Nothing tracks a\nrequest by hand, and reading the data by query is what\nmakes out-of-order responses harmless. With react-query, drop a\n`useSuspenseQuery` where `use()` is, or use `placeholderData: keepPreviousData`\nwith a plain `useQuery` for the same behaviour."
         },
         {
-          "id": "components-combobox--async-search-with-status",
-          "name": "Async Search With Status",
-          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows stay through the wait, marked busy, rather than blinking out and back.\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && results.length === 0 && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. Placeholder rows show\nonly while there is nothing to show yet; after that, the previous rows stay\nuntil the new ones replace them. A request that is no longer the latest is\ndropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
-          "summary": "API search that waits for two characters, with loading status"
+          "id": "components-combobox--async-search-with-loading",
+          "name": "Async Search With Loading",
+          "snippet": "const AsyncSearchWithLoading = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows stay through the wait, marked busy, rather than blinking out and back.\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            loading={isLoading}\n            loadingLabel=\"Searching agencies…\"\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content>\n                {isLoading && results.length === 0 && <SkeletonRows />}\n                <Combobox.Empty>No agencies found</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\nand the flag goes to `Root` as `loading`. That is all the wiring the wait needs:\n`Content` is marked busy, `loadingLabel` is announced once when the request\nstarts, and `Empty` holds back \"no results\" until the answer is in. Placeholder\nrows show only while there is nothing to show yet, hidden from assistive\ntechnology since the label already speaks for them; after that, the previous\nrows stay until the new ones replace them. A request that is no longer the\nlatest is dropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
+          "summary": "API search that waits for two characters and announces its loading state"
         },
         {
           "id": "components-combobox--inside-field-text",
@@ -7133,8 +7173,8 @@
         {
           "id": "components-label--optional",
           "name": "Optional",
-          "snippet": "const Optional = () => <Label optional>Phone number</Label>;",
-          "description": "Appends a muted \" (optional)\" suffix for fields that can be left blank.",
+          "snippet": "const Optional = () => <>\n    <Label optional htmlFor=\"phone\">Phone number</Label>\n    <input id=\"phone\" type=\"tel\" className={inputRecipe()} />\n</>;",
+          "description": "Appends a muted \" (optional)\" suffix for fields that can be left blank. The\nsuffix is real text, so it is part of the control's accessible name.",
           "summary": "Optional field with a muted suffix"
         },
         {
@@ -9867,6 +9907,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3754
+    "durationMs": 3150
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.34.0",
+	"version": "0.34.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/combobox/combobox.d.ts

@@ -87,6 +87,26 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined, Item>
      * focus.
      */
     minInputLength?: number;
+    /**
+     * Whether the options are being fetched. Once the list has been open and
+     * loading for half a second, `loadingLabel` is announced once: sooner, a
+     * screen reader would cut it off to echo the key just typed, and a faster
+     * answer has no wait to announce. `Content` is marked `aria-busy`, and
+     * `Empty` shows nothing, so "no results" is not read out before the results
+     * arrive. The announcement comes from a visually hidden live region the root
+     * renders next to the field, so it is in place before the list opens. On a search
+     * against an API, pass it from the first render, as `false` while idle: a root
+     * that leaves it out gets no live region. A list filtered in memory never
+     * waits and leaves it out. While loading with no rows yet, the surface shows
+     * whatever placeholder `Content` holds — `Empty` stays quiet.
+     */
+    loading?: boolean;
+    /**
+     * What a screen reader hears when `loading` turns `true`. Announced only; any
+     * loading visuals — placeholder rows, a spinner — are yours to render inside
+     * `Content`, hidden from assistive technology. Defaults to `'Loading…'`.
+     */
+    loadingLabel?: string;
 };
 /**
  * Root of a combobox: a text input that filters a list of options and writes the
@@ -99,8 +119,9 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined, Item>
  * select.
  *
  * Pass the options as `items`. For a list that comes from the server, set
- * `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
- * them from `onInputValueChange`; `Status` then announces the wait.
+ * `filter={null}`, hand the already-filtered rows to `filteredItems`, request
+ * them from `onInputValueChange`, and pass the request's state as `loading`:
+ * the combobox announces the wait and marks the list busy on its own.
  *
  * Every Base UI root prop is accepted and forwarded — `items`, `filter`,
  * `value`, `onValueChange` and so on. `open` stays the consumer's to control;
@@ -131,7 +152,7 @@ export type ComboboxRootProps<Value, Multiple extends boolean | undefined, Item>
  * ```
  */
 export declare const Root: {
-    <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+    <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, loading, loadingLabel, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, children, ...props }: ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
@@ -223,11 +244,14 @@ type ContentProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Popup> & Pick
  * one sits under a focused input whose ring is already two near-black pixels, and
  * at 8 the two borders fight.
  *
+ * Under a root that passes `loading`, the surface is `aria-busy` while `loading`
+ * is `true`; the root announces the wait. An `aria-busy` passed here wins.
+ *
  * @summary Floating surface anchored to the input, holding the list
  * @dataAttribute {string} data-slot - Always set to "combobox-content"
  */
 export declare const Content: {
-    ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, children, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type ListProps = ComponentPropsWithRef<typeof ComboboxPrimitive.List>;
@@ -270,21 +294,26 @@ type EmptyProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Empty>;
 /**
  * Shown in place of the list when nothing matches, and announced politely. It
  * needs `items` on `Root` to know the list is empty, and it must stay mounted —
- * change its children rather than rendering it conditionally.
+ * change its children rather than rendering it conditionally. While the root is
+ * `loading` it shows nothing: the list is empty because the results have not
+ * arrived yet, not because there are none. With no rows to show either, the
+ * surface would open as an empty frame, so render placeholder rows inside
+ * `Content` for the wait.
  *
  * @summary Message shown when no item matches the query
  * @dataAttribute {string} data-slot - Always set to "combobox-empty"
  */
 export declare const Empty: {
-    ({ className, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...props }: EmptyProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type StatusProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Status>;
 /**
- * Announces the state of a list that is still loading. Use it for the wait on a
- * remote search: keep it mounted and swap its children. It does not mark the
- * surface busy on its own — pass `aria-busy` to `Content` while the request is in
- * flight, as Base UI's own examples do.
+ * A politely announced message about the list. For the wait on a remote search,
+ * pass `loading` to `Root` instead: it announces and marks the surface busy with
+ * nothing else wired. Reach for `Status` for any other message — a count of
+ * results, an error from the request — and keep it mounted, swapping its
+ * children: a live region that appears already filled in is often skipped.
  *
  * @summary Politely announced status message for an async list
  * @dataAttribute {string} data-slot - Always set to "combobox-status"

package/src/combobox/combobox.js

@@ -8,11 +8,11 @@ import { InputGroup as a } from "../input-group/index.js";
 import { InputSearch as o } from "../input-search/input-search.js";
 import { IconCancel as s, IconCheck as c, IconKeyboardArrowDown as l, IconSearch as u } from "./icons.js";
 import { tv as d } from "tailwind-variants";
-import { createContext as f, use as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Combobox as v } from "@base-ui/react/combobox";
+import { createContext as f, use as p, useEffect as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Combobox as y } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var y = d({ slots: {
+var b = d({ slots: {
 	action: [
 		"flex size-6 shrink-0 cursor-pointer items-center justify-center self-center rounded-sm",
 		"[&>svg>path]:fill-icon-input-default hover:[&>svg>path]:fill-icon-default-base-primary",
@@ -48,144 +48,170 @@ var y = d({ slots: {
 		"group-data-disabled/item:data-selected:bg-bg-checkbox-disabled"
 	],
 	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
-} }), b = y(), x = f(!1), S = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
-	let s = !!o.multiple, [c, l] = h(n), u = m(String(o.inputValue ?? o.defaultInputValue ?? ""));
-	o.inputValue !== void 0 && (u.current = String(o.inputValue));
-	let d = (t) => t.trim().length < e, f = m(!1), p = m(!1), _ = (e, t) => {
-		if (e && d(u.current)) {
+} }), x = b(), S = f(!1), C = f(void 0), w = 500, T = (e, t) => {
+	let [n, r] = g(!1);
+	return m(() => {
+		if (!e) return;
+		let t = setTimeout(() => r(!0), w);
+		return () => {
+			clearTimeout(t), r(!1);
+		};
+	}, [e]), e && n ? t : null;
+}, E = ({ minInputLength: e = 0, loading: t, loadingLabel: n = "Loading…", open: r, defaultOpen: i = !1, onOpenChange: a, onOpenChangeComplete: o, onInputValueChange: s, children: c, ...l }) => {
+	let u = !!l.multiple, [d, f] = g(i), p = h(String(l.inputValue ?? l.defaultInputValue ?? ""));
+	l.inputValue !== void 0 && (p.current = String(l.inputValue));
+	let m = (t) => t.trim().length < e, b = h(!1), x = h(!1), w = (e, t) => {
+		if (e && m(p.current)) {
 			t.cancel();
 			return;
 		}
-		f.current = !1, r?.(e, t), s && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || l(e);
-	}, y = (e) => {
-		i?.(e), !e && f.current && (f.current = !1, p.current = !0, queueMicrotask(() => p.current = !1));
-	}, b = (e, n) => {
-		if (p.current) {
-			p.current = !1, n.cancel();
+		b.current = !1, a?.(e, t), u && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || f(e);
+	}, E = (e) => {
+		o?.(e), !e && b.current && (b.current = !1, x.current = !0, queueMicrotask(() => x.current = !1));
+	}, D = (e, t) => {
+		if (x.current) {
+			x.current = !1, t.cancel();
 			return;
 		}
-		u.current = e, a?.(e, n), d(e) && t === void 0 && c && (f.current = !0, l(!1));
-	}, S = t ?? (e > 0 ? c : void 0);
-	return /* @__PURE__ */ g(x, {
-		value: s,
-		children: /* @__PURE__ */ g(v.Root, {
-			open: S,
-			defaultOpen: n,
-			onOpenChange: _,
-			onOpenChangeComplete: y,
-			onInputValueChange: b,
-			...o
+		p.current = e, s?.(e, t), m(e) && r === void 0 && d && (b.current = !0, f(!1));
+	}, O = r ?? (e > 0 ? d : void 0), k = T(!!t && (r ?? d), n);
+	return /* @__PURE__ */ _(S, {
+		value: u,
+		children: /* @__PURE__ */ _(C, {
+			value: t,
+			children: /* @__PURE__ */ v(y.Root, {
+				open: O,
+				defaultOpen: i,
+				onOpenChange: w,
+				onOpenChangeComplete: E,
+				onInputValueChange: D,
+				...l,
+				children: [c, t !== void 0 && /* @__PURE__ */ _(y.Status, {
+					"data-slot": "combobox-loading",
+					className: "sr-only",
+					children: k
+				})]
+			})
 		})
 	});
 };
-S.displayName = "Combobox.Root";
-var C = /* @__PURE__ */ new Set([
+E.displayName = "Combobox.Root";
+var D = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), w = (e) => {
-	let i = p(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !C.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
+]), O = (e) => {
+	let i = p(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !D.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, T = ({ variant: t = "search", showClear: n = t === "search", clearLabel: c = "Clear", triggerLabel: d = "Show options", ...f }) => {
-	let { className: m, size: h = "md", ...y } = w(f), S = p(x);
-	return t === "search" && n && !S ? /* @__PURE__ */ g(v.InputGroup, {
-		render: /* @__PURE__ */ g("div", {}),
+}, k = ({ variant: t = "search", showClear: n = t === "search", clearLabel: c = "Clear", triggerLabel: d = "Show options", ...f }) => {
+	let { className: m, size: h = "md", ...g } = O(f), b = p(S);
+	return t === "search" && n && !b ? /* @__PURE__ */ _(y.InputGroup, {
+		render: /* @__PURE__ */ _("div", {}),
 		"data-slot": "combobox-field",
-		children: /* @__PURE__ */ g(r, {
+		children: /* @__PURE__ */ _(r, {
 			value: null,
-			children: /* @__PURE__ */ g(v.Input, {
+			children: /* @__PURE__ */ _(y.Input, {
 				"data-slot": "combobox-input",
 				className: m,
-				...y,
-				render: (e) => /* @__PURE__ */ g(o, {
+				...g,
+				render: (e) => /* @__PURE__ */ _(o, {
 					...e,
 					size: h,
 					clearLabel: c
 				})
 			})
 		})
-	}) : /* @__PURE__ */ _(v.InputGroup, {
-		render: /* @__PURE__ */ g(a.Root, {}),
+	}) : /* @__PURE__ */ v(y.InputGroup, {
+		render: /* @__PURE__ */ _(a.Root, {}),
 		"data-slot": "combobox-field",
 		className: t === "plain" ? "px-4" : void 0,
 		children: [
-			t === "search" && /* @__PURE__ */ g(a.Addon, { children: /* @__PURE__ */ g(u, {}) }),
-			/* @__PURE__ */ g(v.Input, {
+			t === "search" && /* @__PURE__ */ _(a.Addon, { children: /* @__PURE__ */ _(u, {}) }),
+			/* @__PURE__ */ _(y.Input, {
 				"data-slot": "combobox-input",
 				"data-size": h,
 				className: e(i({ size: h }), m),
-				...y
+				...g
 			}),
-			n && !S && /* @__PURE__ */ g(v.Clear, {
+			n && !b && /* @__PURE__ */ _(y.Clear, {
 				"data-slot": "combobox-clear",
 				"aria-label": c,
-				className: b.action(),
-				children: /* @__PURE__ */ g(s, {})
+				className: x.action(),
+				children: /* @__PURE__ */ _(s, {})
 			}),
-			t === "select" && !S && /* @__PURE__ */ g(v.Trigger, {
+			t === "select" && !b && /* @__PURE__ */ _(y.Trigger, {
 				"data-slot": "combobox-trigger",
 				"aria-label": d,
-				className: e(b.action(), b.trigger(), n && b.triggerReplaced()),
-				children: /* @__PURE__ */ g(l, {})
+				className: e(x.action(), x.trigger(), n && x.triggerReplaced()),
+				children: /* @__PURE__ */ _(l, {})
 			})
 		]
 	});
 };
-T.displayName = "Combobox.Input";
-var E = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ g(v.Portal, { children: /* @__PURE__ */ g(v.Positioner, {
-	side: n,
-	align: r,
-	sideOffset: i,
-	alignOffset: a,
-	anchor: o,
-	collisionPadding: s,
-	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ g(v.Popup, {
-		"data-slot": "combobox-content",
-		className: e(b.content(), t),
-		...c
-	})
-}) });
-E.displayName = "Combobox.Content";
-var D = ({ className: t, ...n }) => {
+k.displayName = "Combobox.Input";
+var A = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, children: c, ...l }) => {
+	let u = p(C);
+	return /* @__PURE__ */ _(y.Portal, { children: /* @__PURE__ */ _(y.Positioner, {
+		side: n,
+		align: r,
+		sideOffset: i,
+		alignOffset: a,
+		anchor: o,
+		collisionPadding: s,
+		className: "isolate z-(--z-index-top-layer) pointer-events-auto",
+		children: /* @__PURE__ */ _(y.Popup, {
+			"data-slot": "combobox-content",
+			"aria-busy": u || void 0,
+			className: e(x.content(), t),
+			...l,
+			children: c
+		})
+	}) });
+};
+A.displayName = "Combobox.Content";
+var j = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ g(v.List, {
+	return /* @__PURE__ */ _(y.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(b.list(), t),
+		className: e(x.list(), t),
 		...n
 	});
 };
-D.displayName = "Combobox.List";
-var O = ({ className: t, children: n, ...r }) => {
-	let i = p(x);
-	return /* @__PURE__ */ _(v.Item, {
+j.displayName = "Combobox.List";
+var M = ({ className: t, children: n, ...r }) => {
+	let i = p(S);
+	return /* @__PURE__ */ v(y.Item, {
 		"data-slot": "combobox-item",
-		className: e(b.item(), t),
+		className: e(x.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ g(v.ItemIndicator, {
+		children: [i && /* @__PURE__ */ _(y.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: b.indicator(),
-			children: /* @__PURE__ */ g(c, { className: "size-3.5" })
+			className: x.indicator(),
+			children: /* @__PURE__ */ _(c, { className: "size-3.5" })
 		}), n]
 	});
 };
-O.displayName = "Combobox.Item";
-var k = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Empty, {
-	"data-slot": "combobox-empty",
-	className: e(b.message(), t),
-	...n
-});
-k.displayName = "Combobox.Empty";
-var A = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Status, {
+M.displayName = "Combobox.Item";
+var N = ({ className: t, children: n, ...r }) => {
+	let i = p(C);
+	return /* @__PURE__ */ _(y.Empty, {
+		"data-slot": "combobox-empty",
+		className: e(x.message(), t),
+		...r,
+		children: i ? null : n
+	});
+};
+N.displayName = "Combobox.Empty";
+var P = ({ className: t, ...n }) => /* @__PURE__ */ _(y.Status, {
 	"data-slot": "combobox-status",
-	className: e(b.message(), t),
+	className: e(x.message(), t),
 	...n
 });
-A.displayName = "Combobox.Status";
+P.displayName = "Combobox.Status";
 //#endregion
-export { E as Content, k as Empty, T as Input, O as Item, D as List, S as Root, A as Status, y as comboboxRecipe };
+export { A as Content, N as Empty, k as Input, M as Item, j as List, E as Root, P as Status, b as comboboxRecipe };

package/src/combobox/index.d.ts

@@ -2,7 +2,7 @@ export { comboboxRecipe } from './combobox';
 export type { ComboboxRootProps } from './combobox';
 export declare const Combobox: {
     Root: {
-        <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: import('./combobox').ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+        <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, loading, loadingLabel, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, children, ...props }: import('./combobox').ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
@@ -16,7 +16,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Content: {
-        ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
+        ({ className, side, align, sideOffset, alignOffset, anchor, collisionPadding, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxPopupProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & Pick<Omit<import('@base-ui/react/combobox').ComboboxPositionerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "anchor" | "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding">): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     List: {
@@ -28,7 +28,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Empty: {
-        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxEmptyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Status: {

package/src/label/label.d.ts

@@ -1,36 +1,48 @@
 import { ComponentPropsWithRef } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import * as LabelPrimitive from '@radix-ui/react-label';
-/** Style recipe for Label. Slots: `root`, `text`, `required`. */
+/** Style recipe for Label. Slots: `root`, `text`, `optional`, `required`. */
 export declare const labelRecipe: import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, {
-    optional: {
-        true: {
-            text: string;
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            text?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            required?: import('tailwind-merge').ClassNameValue;
+            optional?: import('tailwind-merge').ClassNameValue;
         };
     };
-}, {
+} | {}, {
     root: string;
     text: string;
+    optional: string;
     required: string;
-}, import('tailwind-variants').TVReturnType<{
-    optional: {
-        true: {
-            text: string;
-        };
-    };
-}, {
+}, import('tailwind-variants').TVReturnType<unknown, {
     root: string;
     text: string;
+    optional: string;
     required: string;
 }, undefined, unknown, unknown, undefined>>;
 export type LabelVariants = VariantProps<typeof labelRecipe>;

package/src/label/label.js

@@ -2,33 +2,33 @@
 import { cn as e } from "../../lib/utils.js";
 import { useLabelContext as t } from "./context.js";
 import { tv as n } from "tailwind-variants";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-label";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-label";
 //#region src/label/label.tsx
-var o = n({
-	slots: {
-		root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
-		text: "align-middle",
-		required: "align-middle text-text-input-destructive"
-	},
-	variants: { optional: { true: { text: "after:font-normal after:text-text-input-placeholder after:content-[\"_(optional)\"]" } } },
-	defaultVariants: { optional: !1 }
-}), s = (n) => {
-	let { className: s, children: c, optional: l = !1, required: u = !1, ...d } = t(n), f = o({ optional: l && !u });
-	return /* @__PURE__ */ i(a.Root, {
+var s = n({ slots: {
+	root: "flex flex-wrap gap-1 py-0.25 text-sm font-semibold text-text-input-normal",
+	text: "align-middle",
+	optional: "font-normal text-text-input-placeholder",
+	required: "align-middle text-text-input-destructive"
+} }), c = (n) => {
+	let { className: c, children: l, optional: u = !1, required: d = !1, ...f } = t(n), p = u && !d, m = s();
+	return /* @__PURE__ */ a(o.Root, {
 		"data-slot": "label",
-		className: e(f.root(), s),
-		...d,
-		children: [/* @__PURE__ */ r("span", {
-			className: f.text(),
-			children: c
-		}), u && /* @__PURE__ */ r("span", {
+		className: e(m.root(), c),
+		...f,
+		children: [/* @__PURE__ */ a("span", {
+			className: m.text(),
+			children: [l, p && /* @__PURE__ */ a(r, { children: [" ", /* @__PURE__ */ i("span", {
+				className: m.optional(),
+				children: "(optional)"
+			})] })]
+		}), d && /* @__PURE__ */ i("span", {
 			"aria-hidden": !0,
-			className: f.required(),
+			className: m.required(),
 			children: "*"
 		})]
 	});
 };
-s.displayName = "Label";
+c.displayName = "Label";
 //#endregion
-export { s as Label, o as labelRecipe };
+export { c as Label, s as labelRecipe };