@ttoss/fsl-ui 0.2.6 → 0.2.8

package/dist/components/AppShell/AppShell.cjs

@@ -71,7 +71,8 @@ var AppShell = ({
       "data-scope": "app-shell",
       "data-part": "header",
       style: {
-        borderBlockEnd: HAIRLINE
+        borderBlockEnd: HAIRLINE,
+        containerType: "inline-size"
       },
       children: header
     }) : null, /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
@@ -93,7 +94,8 @@ var AppShell = ({
         "aria-label": sidebarLabel,
         style: {
           overflowY: "auto",
-          borderInlineEnd: HAIRLINE
+          borderInlineEnd: HAIRLINE,
+          containerType: "inline-size"
         },
         children: sidebar
       }) : null, /* @__PURE__ */(0, react_jsx_runtime.jsx)("main", {
@@ -101,7 +103,8 @@ var AppShell = ({
         "data-part": "main",
         style: {
           overflow: "auto",
-          minInlineSize: 0
+          minInlineSize: 0,
+          containerType: "inline-size"
         },
         children
       }), hasAside ? /* @__PURE__ */(0, react_jsx_runtime.jsx)("aside", {
@@ -110,7 +113,8 @@ var AppShell = ({
         "aria-label": asideLabel,
         style: {
           overflowY: "auto",
-          borderInlineStart: HAIRLINE
+          borderInlineStart: HAIRLINE,
+          containerType: "inline-size"
         },
         children: aside
       }) : null]

package/dist/components/AppShell/AppShell.mjs

@@ -71,7 +71,8 @@ var AppShell = ({
       "data-scope": "app-shell",
       "data-part": "header",
       style: {
-        borderBlockEnd: HAIRLINE
+        borderBlockEnd: HAIRLINE,
+        containerType: "inline-size"
       },
       children: header
     }) : null, /* @__PURE__ */jsxs("div", {
@@ -93,7 +94,8 @@ var AppShell = ({
         "aria-label": sidebarLabel,
         style: {
           overflowY: "auto",
-          borderInlineEnd: HAIRLINE
+          borderInlineEnd: HAIRLINE,
+          containerType: "inline-size"
         },
         children: sidebar
       }) : null, /* @__PURE__ */jsx("main", {
@@ -101,7 +103,8 @@ var AppShell = ({
         "data-part": "main",
         style: {
           overflow: "auto",
-          minInlineSize: 0
+          minInlineSize: 0,
+          containerType: "inline-size"
         },
         children
       }), hasAside ? /* @__PURE__ */jsx("aside", {
@@ -110,7 +113,8 @@ var AppShell = ({
         "aria-label": asideLabel,
         style: {
           overflowY: "auto",
-          borderInlineStart: HAIRLINE
+          borderInlineStart: HAIRLINE,
+          containerType: "inline-size"
         },
         children: aside
       }) : null]

package/dist/components/ComboBox/ComboBox.cjs

@@ -0,0 +1,317 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+const require_Icon = require('../Icon/Icon.cjs');
+const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+
+//#region src/components/ComboBox/ComboBox.tsx
+/** Formal semantic identity — ComboBox root (Input entity). */
+var comboBoxMeta = {
+  displayName: "ComboBox",
+  entity: "Input",
+  structure: "root"
+};
+/** Formal semantic identity — a single filtered option (Selection entity). */
+var comboBoxItemMeta = {
+  displayName: "ComboBoxItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/**
+* Scroll cap for the options popover. A ComboBox exists because the option set
+* is too long to scan (friction F-008: 30+ timezones), so the list must scroll
+* inside a bounded viewport instead of running off-screen. `20rem` keeps ~8
+* options visible at the standard hit size; the `60vh` term keeps it inside
+* short viewports. Host-overridable per CONTRACT.md §7.
+*/
+var LIST_MAX_HEIGHT = "min(20rem, 60vh)";
+/** Control box (the `Group`) chrome — the framed field around input + trigger. */
+var buildControlBoxStyle = ({
+  c,
+  isDisabled,
+  isInvalid,
+  isFocusVisible
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: _ttoss_fsl_theme_vars.vars.sizing.hit,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+    transitionProperty: "background-color, border-color",
+    transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+    transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing,
+    backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid
+    }),
+    borderColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isFocusVisible
+    }),
+    outline: require_focusRing.focusRingOutline(isFocusVisible)
+  };
+};
+/** The `<input>` itself — borderless; the surrounding `Group` owns the frame. */
+var buildInputStyle = c => {
+  return {
+    boxSizing: "border-box",
+    flex: 1,
+    minWidth: 0,
+    border: 0,
+    background: "transparent",
+    outline: "none",
+    paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+    color: c?.text?.default,
+    ..._ttoss_fsl_theme_vars.vars.text.label.md
+  };
+};
+/** Chevron button chrome — borderless Action-pattern control in Input chrome. */
+var buildTriggerStyle = ({
+  c,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    border: 0,
+    background: "transparent",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+    paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.sm,
+    color: c?.text?.default
+  };
+};
+/** Options popover surface — Input-entity chrome, matching the control frame. */
+var buildPopoverStyle = c => {
+  return {
+    boxSizing: "border-box",
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.control.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.control.style,
+    borderColor: c?.border?.default,
+    backgroundColor: c?.background?.default,
+    overflow: "hidden"
+  };
+};
+/**
+* Resolve the field's text colors once (default for label/description/input,
+* invalid for the validation message). Hoisted out of the render so the
+* optional-chain reads keep the component's cyclomatic complexity low.
+*/
+var resolveFieldTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/**
+* A semantic text input with a filtered option list, built on React Aria.
+*
+* The answer to a `Select` that has grown past scanning range: typing filters
+* the options (typeahead), while the chevron still opens the full list. Entity
+* = Input — the user's primary act is typing, and the list narrows what they
+* type (see the Entity rationale in this file's header). Options are
+* `ComboBoxItem`.
+*
+* Unlike `Select`, this composite ships a `validationMessage` part, so an
+* invalid choice can state why inside the system. Validation is the `invalid`
+* State (via `isInvalid`/`validate`), never an `evaluation` variant.
+*
+* Host geometry knob: `--fsl-combo-box-max-height` caps the scrolling list.
+*
+* @example
+* ```tsx
+* <ComboBox label="Timezone" defaultSelectedKey="America/Sao_Paulo">
+*   <ComboBoxItem id="America/Sao_Paulo">São Paulo</ComboBoxItem>
+*   <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+* </ComboBox>
+* ```
+*/
+var ComboBox = ({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Search…",
+  triggerLabel = "Show suggestions",
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  const {
+    base,
+    invalid
+  } = resolveFieldTextColors(c);
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.ComboBox, {
+    ...props,
+    "data-scope": "combo-box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs
+    },
+    children: [label != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+      "data-scope": "combo-box",
+      "data-part": "label",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
+      "data-scope": "combo-box",
+      "data-part": "control",
+      style: ({
+        isDisabled,
+        isInvalid,
+        isFocusVisible
+      }) => {
+        return buildControlBoxStyle({
+          c,
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        });
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Input, {
+        "data-scope": "combo-box",
+        "data-part": "control",
+        placeholder,
+        style: buildInputStyle(c)
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+        "aria-label": triggerLabel,
+        "data-scope": "combo-box",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildTriggerStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+          intent: "disclosure.expand",
+          size: "sm"
+        })
+      })]
+    }), description != null && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+      slot: "description",
+      "data-scope": "combo-box",
+      "data-part": "description",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+      "data-scope": "combo-box",
+      "data-part": "validationMessage",
+      style: {
+        ..._ttoss_fsl_theme_vars.vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
+      "data-scope": "combo-box",
+      "data-part": "positioner",
+      style: buildPopoverStyle(c),
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ListBox, {
+        "data-scope": "combo-box",
+        "data-part": "surface",
+        style: {
+          outline: "none",
+          display: "flex",
+          flexDirection: "column",
+          padding: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+          gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs,
+          maxHeight: require_escapeHatch.fslVar("--fsl-combo-box-max-height", LIST_MAX_HEIGHT),
+          overflowY: "auto"
+        },
+        children
+      })
+    })]
+  });
+};
+ComboBox.displayName = comboBoxMeta.displayName;
+/**
+* A single option inside a `ComboBox` list.
+*
+* Renders interactive hover/focus/selected states via
+* `vars.colors.input.primary.*` — the same selection chrome `SelectItem` and
+* `ListBoxItem` carry (ADR-007).
+*
+* @example
+* ```tsx
+* <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+* ```
+*/
+var ComboBoxItem = ({
+  children,
+  ...props
+}) => {
+  const c = _ttoss_fsl_theme_vars.vars.colors.input.primary;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
+    ...props,
+    "data-scope": "combo-box",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        paddingBlock: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        paddingInline: _ttoss_fsl_theme_vars.vars.spacing.inset.control.md,
+        borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+        ..._ttoss_fsl_theme_vars.vars.text.label.md,
+        backgroundColor: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered,
+          isPressed
+        }),
+        color: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected,
+          isHovered
+        }) ?? c?.text?.default,
+        outline: require_focusRing.focusRingOutline(isFocusVisible),
+        outlineOffset: "2px",
+        transitionProperty: "background-color, color",
+        transitionDuration: _ttoss_fsl_theme_vars.vars.motion.feedback.duration,
+        transitionTimingFunction: _ttoss_fsl_theme_vars.vars.motion.feedback.easing
+      };
+    },
+    children
+  });
+};
+ComboBoxItem.displayName = comboBoxItemMeta.displayName;
+
+//#endregion
+exports.ComboBox = ComboBox;
+exports.ComboBoxItem = ComboBoxItem;
+exports.comboBoxItemMeta = comboBoxItemMeta;
+exports.comboBoxMeta = comboBoxMeta;

package/dist/components/ComboBox/ComboBox.d.cts

@@ -0,0 +1,106 @@
+
+import * as React from "react";
+import { ComboBoxProps, ListBoxItemProps } from "react-aria-components";
+
+//#region src/components/ComboBox/ComboBox.d.ts
+/** Formal semantic identity — ComboBox root (Input entity). */
+declare const comboBoxMeta: {
+  readonly displayName: "ComboBox";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — a single filtered option (Selection entity). */
+declare const comboBoxItemMeta: {
+  readonly displayName: "ComboBoxItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the ComboBox component. */
+interface ComboBoxProps$1<T extends object = object> extends Omit<ComboBoxProps<T>, 'style' | 'children' | 'className'> {
+  /** Visible label displayed above the field. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the field via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the field is invalid. Supply
+   * caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /**
+   * Placeholder shown in the text input while it is empty.
+   *
+   * Ships a documented English fallback — the placeholder is supplementary
+   * hint text, not a flow-critical label (CONTRIBUTING §6.2 / ADR-001).
+   * Localized hosts should still supply their own copy.
+   * @default 'Search…'
+   */
+  placeholder?: string;
+  /**
+   * Accessible name for the chevron button that opens the full list (the icon
+   * is the sole carrier of meaning). Documented English fallback, overridable
+   * (i18n rule §6.2).
+   * @default 'Show suggestions'
+   */
+  triggerLabel?: string;
+  /** `ComboBoxItem` children rendered inside the filtered options list. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic text input with a filtered option list, built on React Aria.
+ *
+ * The answer to a `Select` that has grown past scanning range: typing filters
+ * the options (typeahead), while the chevron still opens the full list. Entity
+ * = Input — the user's primary act is typing, and the list narrows what they
+ * type (see the Entity rationale in this file's header). Options are
+ * `ComboBoxItem`.
+ *
+ * Unlike `Select`, this composite ships a `validationMessage` part, so an
+ * invalid choice can state why inside the system. Validation is the `invalid`
+ * State (via `isInvalid`/`validate`), never an `evaluation` variant.
+ *
+ * Host geometry knob: `--fsl-combo-box-max-height` caps the scrolling list.
+ *
+ * @example
+ * ```tsx
+ * <ComboBox label="Timezone" defaultSelectedKey="America/Sao_Paulo">
+ *   <ComboBoxItem id="America/Sao_Paulo">São Paulo</ComboBoxItem>
+ *   <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+ * </ComboBox>
+ * ```
+ */
+declare const ComboBox: {
+  <T extends object = object>({
+    label,
+    description,
+    errorMessage,
+    placeholder,
+    triggerLabel,
+    children,
+    ...props
+  }: ComboBoxProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "ComboBox";
+};
+/** Props for the ComboBoxItem component. */
+type ComboBoxItemProps = Omit<ListBoxItemProps, 'style'>;
+/**
+ * A single option inside a `ComboBox` list.
+ *
+ * Renders interactive hover/focus/selected states via
+ * `vars.colors.input.primary.*` — the same selection chrome `SelectItem` and
+ * `ListBoxItem` carry (ADR-007).
+ *
+ * @example
+ * ```tsx
+ * <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+ * ```
+ */
+declare const ComboBoxItem: {
+  ({
+    children,
+    ...props
+  }: ComboBoxItemProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "ComboBoxItem";
+};
+//#endregion
+export { ComboBox, ComboBoxItem, ComboBoxItemProps, ComboBoxProps$1 as ComboBoxProps, comboBoxItemMeta, comboBoxMeta };

package/dist/components/ComboBox/ComboBox.d.mts

@@ -0,0 +1,106 @@
+
+import { ComboBoxProps, ListBoxItemProps } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/ComboBox/ComboBox.d.ts
+/** Formal semantic identity — ComboBox root (Input entity). */
+declare const comboBoxMeta: {
+  readonly displayName: "ComboBox";
+  readonly entity: "Input";
+  readonly structure: "root";
+};
+/** Formal semantic identity — a single filtered option (Selection entity). */
+declare const comboBoxItemMeta: {
+  readonly displayName: "ComboBoxItem";
+  readonly entity: "Selection";
+  readonly structure: "item";
+  readonly composition: "selection";
+};
+/** Props for the ComboBox component. */
+interface ComboBoxProps$1<T extends object = object> extends Omit<ComboBoxProps<T>, 'style' | 'children' | 'className'> {
+  /** Visible label displayed above the field. */
+  label?: React.ReactNode;
+  /** Supplementary helper text linked to the field via `aria-describedby`. */
+  description?: React.ReactNode;
+  /**
+   * Validation message shown when the field is invalid. Supply
+   * caller-localized copy (i18n rule / §6).
+   */
+  errorMessage?: React.ReactNode;
+  /**
+   * Placeholder shown in the text input while it is empty.
+   *
+   * Ships a documented English fallback — the placeholder is supplementary
+   * hint text, not a flow-critical label (CONTRIBUTING §6.2 / ADR-001).
+   * Localized hosts should still supply their own copy.
+   * @default 'Search…'
+   */
+  placeholder?: string;
+  /**
+   * Accessible name for the chevron button that opens the full list (the icon
+   * is the sole carrier of meaning). Documented English fallback, overridable
+   * (i18n rule §6.2).
+   * @default 'Show suggestions'
+   */
+  triggerLabel?: string;
+  /** `ComboBoxItem` children rendered inside the filtered options list. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic text input with a filtered option list, built on React Aria.
+ *
+ * The answer to a `Select` that has grown past scanning range: typing filters
+ * the options (typeahead), while the chevron still opens the full list. Entity
+ * = Input — the user's primary act is typing, and the list narrows what they
+ * type (see the Entity rationale in this file's header). Options are
+ * `ComboBoxItem`.
+ *
+ * Unlike `Select`, this composite ships a `validationMessage` part, so an
+ * invalid choice can state why inside the system. Validation is the `invalid`
+ * State (via `isInvalid`/`validate`), never an `evaluation` variant.
+ *
+ * Host geometry knob: `--fsl-combo-box-max-height` caps the scrolling list.
+ *
+ * @example
+ * ```tsx
+ * <ComboBox label="Timezone" defaultSelectedKey="America/Sao_Paulo">
+ *   <ComboBoxItem id="America/Sao_Paulo">São Paulo</ComboBoxItem>
+ *   <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+ * </ComboBox>
+ * ```
+ */
+declare const ComboBox$1: {
+  <T extends object = object>({
+    label,
+    description,
+    errorMessage,
+    placeholder,
+    triggerLabel,
+    children,
+    ...props
+  }: ComboBoxProps$1<T>): import("react/jsx-runtime").JSX.Element;
+  displayName: "ComboBox";
+};
+/** Props for the ComboBoxItem component. */
+type ComboBoxItemProps = Omit<ListBoxItemProps, 'style'>;
+/**
+ * A single option inside a `ComboBox` list.
+ *
+ * Renders interactive hover/focus/selected states via
+ * `vars.colors.input.primary.*` — the same selection chrome `SelectItem` and
+ * `ListBoxItem` carry (ADR-007).
+ *
+ * @example
+ * ```tsx
+ * <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+ * ```
+ */
+declare const ComboBoxItem: {
+  ({
+    children,
+    ...props
+  }: ComboBoxItemProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "ComboBoxItem";
+};
+//#endregion
+export { ComboBox$1 as ComboBox, ComboBoxItem, ComboBoxItemProps, ComboBoxProps$1 as ComboBoxProps, comboBoxItemMeta, comboBoxMeta };

package/dist/components/ComboBox/ComboBox.mjs

@@ -0,0 +1,314 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ComboBox, FieldError, Group, Input, Label, ListBox, ListBoxItem, Popover, Text } from "react-aria-components";
+
+//#region src/components/ComboBox/ComboBox.tsx
+/** Formal semantic identity — ComboBox root (Input entity). */
+var comboBoxMeta = {
+  displayName: "ComboBox",
+  entity: "Input",
+  structure: "root"
+};
+/** Formal semantic identity — a single filtered option (Selection entity). */
+var comboBoxItemMeta = {
+  displayName: "ComboBoxItem",
+  entity: "Selection",
+  structure: "item",
+  composition: "selection"
+};
+/**
+* Scroll cap for the options popover. A ComboBox exists because the option set
+* is too long to scan (friction F-008: 30+ timezones), so the list must scroll
+* inside a bounded viewport instead of running off-screen. `20rem` keeps ~8
+* options visible at the standard hit size; the `60vh` term keeps it inside
+* short viewports. Host-overridable per CONTRACT.md §7.
+*/
+var LIST_MAX_HEIGHT = "min(20rem, 60vh)";
+/** Control box (the `Group`) chrome — the framed field around input + trigger. */
+var buildControlBoxStyle = ({
+  c,
+  isDisabled,
+  isInvalid,
+  isFocusVisible
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: vars.sizing.hit,
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    transitionProperty: "background-color, border-color",
+    transitionDuration: vars.motion.feedback.duration,
+    transitionTimingFunction: vars.motion.feedback.easing,
+    backgroundColor: resolveInteractiveStyle(c?.background, {
+      isDisabled,
+      isInvalid
+    }),
+    borderColor: resolveInteractiveStyle(c?.border, {
+      isDisabled,
+      isInvalid,
+      isFocusVisible
+    }),
+    outline: focusRingOutline(isFocusVisible)
+  };
+};
+/** The `<input>` itself — borderless; the surrounding `Group` owns the frame. */
+var buildInputStyle = c => {
+  return {
+    boxSizing: "border-box",
+    flex: 1,
+    minWidth: 0,
+    border: 0,
+    background: "transparent",
+    outline: "none",
+    paddingBlock: vars.spacing.inset.control.sm,
+    paddingInline: vars.spacing.inset.control.md,
+    color: c?.text?.default,
+    ...vars.text.label.md
+  };
+};
+/** Chevron button chrome — borderless Action-pattern control in Input chrome. */
+var buildTriggerStyle = ({
+  c,
+  isDisabled
+}) => {
+  return {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    border: 0,
+    background: "transparent",
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? vars.opacity.disabled : void 0,
+    paddingBlock: vars.spacing.inset.control.sm,
+    paddingInline: vars.spacing.inset.control.sm,
+    color: c?.text?.default
+  };
+};
+/** Options popover surface — Input-entity chrome, matching the control frame. */
+var buildPopoverStyle = c => {
+  return {
+    boxSizing: "border-box",
+    borderRadius: vars.radii.control,
+    borderWidth: vars.border.outline.control.width,
+    borderStyle: vars.border.outline.control.style,
+    borderColor: c?.border?.default,
+    backgroundColor: c?.background?.default,
+    overflow: "hidden"
+  };
+};
+/**
+* Resolve the field's text colors once (default for label/description/input,
+* invalid for the validation message). Hoisted out of the render so the
+* optional-chain reads keep the component's cyclomatic complexity low.
+*/
+var resolveFieldTextColors = c => {
+  const text = c?.text;
+  return {
+    base: text?.default,
+    invalid: text?.invalid ?? text?.default
+  };
+};
+/**
+* A semantic text input with a filtered option list, built on React Aria.
+*
+* The answer to a `Select` that has grown past scanning range: typing filters
+* the options (typeahead), while the chevron still opens the full list. Entity
+* = Input — the user's primary act is typing, and the list narrows what they
+* type (see the Entity rationale in this file's header). Options are
+* `ComboBoxItem`.
+*
+* Unlike `Select`, this composite ships a `validationMessage` part, so an
+* invalid choice can state why inside the system. Validation is the `invalid`
+* State (via `isInvalid`/`validate`), never an `evaluation` variant.
+*
+* Host geometry knob: `--fsl-combo-box-max-height` caps the scrolling list.
+*
+* @example
+* ```tsx
+* <ComboBox label="Timezone" defaultSelectedKey="America/Sao_Paulo">
+*   <ComboBoxItem id="America/Sao_Paulo">São Paulo</ComboBoxItem>
+*   <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+* </ComboBox>
+* ```
+*/
+var ComboBox$1 = ({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Search…",
+  triggerLabel = "Show suggestions",
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  const {
+    base,
+    invalid
+  } = resolveFieldTextColors(c);
+  return /* @__PURE__ */jsxs(ComboBox, {
+    ...props,
+    "data-scope": "combo-box",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.xs
+    },
+    children: [label != null && /* @__PURE__ */jsx(Label, {
+      "data-scope": "combo-box",
+      "data-part": "label",
+      style: {
+        ...vars.text.label.md,
+        color: base
+      },
+      children: label
+    }), /* @__PURE__ */jsxs(Group, {
+      "data-scope": "combo-box",
+      "data-part": "control",
+      style: ({
+        isDisabled,
+        isInvalid,
+        isFocusVisible
+      }) => {
+        return buildControlBoxStyle({
+          c,
+          isDisabled,
+          isInvalid,
+          isFocusVisible
+        });
+      },
+      children: [/* @__PURE__ */jsx(Input, {
+        "data-scope": "combo-box",
+        "data-part": "control",
+        placeholder,
+        style: buildInputStyle(c)
+      }), /* @__PURE__ */jsx(Button, {
+        "aria-label": triggerLabel,
+        "data-scope": "combo-box",
+        "data-part": "trigger",
+        style: ({
+          isDisabled
+        }) => {
+          return buildTriggerStyle({
+            c,
+            isDisabled
+          });
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          intent: "disclosure.expand",
+          size: "sm"
+        })
+      })]
+    }), description != null && /* @__PURE__ */jsx(Text, {
+      slot: "description",
+      "data-scope": "combo-box",
+      "data-part": "description",
+      style: {
+        ...vars.text.label.sm,
+        color: base
+      },
+      children: description
+    }), /* @__PURE__ */jsx(FieldError, {
+      "data-scope": "combo-box",
+      "data-part": "validationMessage",
+      style: {
+        ...vars.text.label.sm,
+        color: invalid
+      },
+      children: errorMessage
+    }), /* @__PURE__ */jsx(Popover, {
+      "data-scope": "combo-box",
+      "data-part": "positioner",
+      style: buildPopoverStyle(c),
+      children: /* @__PURE__ */jsx(ListBox, {
+        "data-scope": "combo-box",
+        "data-part": "surface",
+        style: {
+          outline: "none",
+          display: "flex",
+          flexDirection: "column",
+          padding: vars.spacing.inset.control.md,
+          gap: vars.spacing.gap.stack.xs,
+          maxHeight: fslVar("--fsl-combo-box-max-height", LIST_MAX_HEIGHT),
+          overflowY: "auto"
+        },
+        children
+      })
+    })]
+  });
+};
+ComboBox$1.displayName = comboBoxMeta.displayName;
+/**
+* A single option inside a `ComboBox` list.
+*
+* Renders interactive hover/focus/selected states via
+* `vars.colors.input.primary.*` — the same selection chrome `SelectItem` and
+* `ListBoxItem` carry (ADR-007).
+*
+* @example
+* ```tsx
+* <ComboBoxItem id="Europe/Lisbon">Lisbon</ComboBoxItem>
+* ```
+*/
+var ComboBoxItem = ({
+  children,
+  ...props
+}) => {
+  const c = vars.colors.input.primary;
+  return /* @__PURE__ */jsx(ListBoxItem, {
+    ...props,
+    "data-scope": "combo-box",
+    "data-part": "item",
+    style: ({
+      isHovered,
+      isPressed,
+      isDisabled,
+      isFocusVisible,
+      isSelected
+    }) => {
+      return {
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        paddingBlock: vars.spacing.inset.control.md,
+        paddingInline: vars.spacing.inset.control.md,
+        borderRadius: vars.radii.control,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? vars.opacity.disabled : void 0,
+        ...vars.text.label.md,
+        backgroundColor: resolveInteractiveStyle(c?.background, {
+          isDisabled,
+          isSelected,
+          isHovered,
+          isPressed
+        }),
+        color: resolveInteractiveStyle(c?.text, {
+          isDisabled,
+          isSelected,
+          isHovered
+        }) ?? c?.text?.default,
+        outline: focusRingOutline(isFocusVisible),
+        outlineOffset: "2px",
+        transitionProperty: "background-color, color",
+        transitionDuration: vars.motion.feedback.duration,
+        transitionTimingFunction: vars.motion.feedback.easing
+      };
+    },
+    children
+  });
+};
+ComboBoxItem.displayName = comboBoxItemMeta.displayName;
+
+//#endregion
+export { ComboBox$1 as ComboBox, ComboBoxItem, comboBoxItemMeta, comboBoxMeta };

package/dist/components/Container/Container.cjs

@@ -53,7 +53,8 @@ var Container = ({
       marginInline: "auto",
       width: "100%",
       maxWidth: MAX_WIDTH[size],
-      paddingInline: GUTTER[gutter]
+      paddingInline: GUTTER[gutter],
+      containerType: "inline-size"
     },
     children
   });

package/dist/components/Container/Container.mjs

@@ -53,7 +53,8 @@ var Container = ({
       marginInline: "auto",
       width: "100%",
       maxWidth: MAX_WIDTH[size],
-      paddingInline: GUTTER[gutter]
+      paddingInline: GUTTER[gutter],
+      containerType: "inline-size"
     },
     children
   });

package/dist/components/Grid/Grid.cjs

@@ -1,6 +1,9 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react);
 
 //#region src/components/Grid/Grid.tsx
 /** Formal semantic identity — Grid root (Structure entity, 2D layout). */
@@ -45,6 +48,11 @@ var autoTracks = min => {
 * named scale, so grid rhythm stays consistent across a product. For a single
 * axis of flow, reach for `Stack` instead.
 *
+* Each child is hosted in a `data-part="item"` wrapper that establishes
+* `container-type: inline-size` (ADR-011): the theme's container-fluid
+* scales (`cqi` clamps) resolve against the item's track width, so type and
+* spacing inside a narrow tile scale down instead of overflowing.
+*
 * @example
 * ```tsx
 * // Fixed columns
@@ -78,7 +86,18 @@ var Grid = ({
       alignItems: ALIGN[align],
       justifyItems: ALIGN[justify]
     },
-    children
+    children: react.Children.map(children, child => {
+      if (child === null || child === void 0) return child;
+      return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+        "data-scope": "grid",
+        "data-part": "item",
+        style: {
+          display: "grid",
+          containerType: "inline-size"
+        },
+        children: child
+      });
+    })
   });
 };
 Grid.displayName = gridMeta.displayName;

package/dist/components/Grid/Grid.d.cts

@@ -62,6 +62,11 @@ interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' |
  * named scale, so grid rhythm stays consistent across a product. For a single
  * axis of flow, reach for `Stack` instead.
  *
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
+ * spacing inside a narrow tile scale down instead of overflowing.
+ *
  * @example
  * ```tsx
  * // Fixed columns

package/dist/components/Grid/Grid.d.mts

@@ -62,6 +62,11 @@ interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' |
  * named scale, so grid rhythm stays consistent across a product. For a single
  * axis of flow, reach for `Stack` instead.
  *
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
+ * spacing inside a narrow tile scale down instead of overflowing.
+ *
  * @example
  * ```tsx
  * // Fixed columns

package/dist/components/Grid/Grid.mjs

@@ -1,6 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { vars } from "@ttoss/fsl-theme/vars";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/Grid/Grid.tsx
 /** Formal semantic identity — Grid root (Structure entity, 2D layout). */
@@ -45,6 +46,11 @@ var autoTracks = min => {
 * named scale, so grid rhythm stays consistent across a product. For a single
 * axis of flow, reach for `Stack` instead.
 *
+* Each child is hosted in a `data-part="item"` wrapper that establishes
+* `container-type: inline-size` (ADR-011): the theme's container-fluid
+* scales (`cqi` clamps) resolve against the item's track width, so type and
+* spacing inside a narrow tile scale down instead of overflowing.
+*
 * @example
 * ```tsx
 * // Fixed columns
@@ -78,7 +84,18 @@ var Grid = ({
       alignItems: ALIGN[align],
       justifyItems: ALIGN[justify]
     },
-    children
+    children: React.Children.map(children, child => {
+      if (child === null || child === void 0) return child;
+      return /* @__PURE__ */jsx("div", {
+        "data-scope": "grid",
+        "data-part": "item",
+        style: {
+          display: "grid",
+          containerType: "inline-size"
+        },
+        children: child
+      });
+    })
   });
 };
 Grid.displayName = gridMeta.displayName;

package/dist/composites/Dialog/Dialog.cjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
-const require_scope = require('../scope.cjs');
 const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
+const require_scope = require('../scope.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_components = require("react-aria-components");

package/dist/composites/Dialog/Dialog.mjs

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { createPresenceScope } from "../scope.mjs";
 import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { createPresenceScope } from "../scope.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
 import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";

package/dist/composites/Menu/Menu.cjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 const require_focusRing = require('../../tokens/focusRing.cjs');
 const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
-const require_scope = require('../scope.cjs');
 const require_escapeHatch = require('../../tokens/escapeHatch.cjs');
+const require_scope = require('../scope.cjs');
 let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_aria_components = require("react-aria-components");

package/dist/composites/Menu/Menu.mjs

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import { focusRingOutline } from "../../tokens/focusRing.mjs";
 import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
-import { createPresenceScope } from "../scope.mjs";
 import { fslVar } from "../../tokens/escapeHatch.mjs";
+import { createPresenceScope } from "../scope.mjs";
 import { vars } from "@ttoss/fsl-theme/vars";
 import { jsx } from "react/jsx-runtime";
 import { Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components";

package/dist/index.cjs

@@ -14,6 +14,7 @@ const require_intents = require('./components/Icon/intents.cjs');
 const require_Checkbox = require('./components/Checkbox/Checkbox.cjs');
 const require_CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.cjs');
 const require_Code = require('./components/Code/Code.cjs');
+const require_ComboBox = require('./components/ComboBox/ComboBox.cjs');
 const require_Container = require('./components/Container/Container.cjs');
 const require_FileTrigger = require('./components/FileTrigger/FileTrigger.cjs');
 const require_Grid = require('./components/Grid/Grid.cjs');
@@ -65,6 +66,8 @@ exports.Button = require_Button.Button;
 exports.Checkbox = require_Checkbox.Checkbox;
 exports.CheckboxGroup = require_CheckboxGroup.CheckboxGroup;
 exports.Code = require_Code.Code;
+exports.ComboBox = require_ComboBox.ComboBox;
+exports.ComboBoxItem = require_ComboBox.ComboBoxItem;
 exports.ConfirmationDialog = require_ConfirmationDialog.ConfirmationDialog;
 exports.Container = require_Container.Container;
 exports.Dialog = require_Dialog.Dialog;
@@ -157,6 +160,8 @@ exports.buttonMeta = require_Button.buttonMeta;
 exports.checkboxGroupMeta = require_CheckboxGroup.checkboxGroupMeta;
 exports.checkboxMeta = require_Checkbox.checkboxMeta;
 exports.codeMeta = require_Code.codeMeta;
+exports.comboBoxItemMeta = require_ComboBox.comboBoxItemMeta;
+exports.comboBoxMeta = require_ComboBox.comboBoxMeta;
 exports.confirmationDialogMeta = require_ConfirmationDialog.confirmationDialogMeta;
 exports.containerMeta = require_Container.containerMeta;
 exports.createToastQueue = require_Toast.createToastQueue;

package/dist/index.d.cts

@@ -7,6 +7,7 @@ import { Button, ButtonProps, buttonMeta } from "./components/Button/Button.cjs"
 import { Checkbox, CheckboxProps, checkboxMeta } from "./components/Checkbox/Checkbox.cjs";
 import { CheckboxGroup, CheckboxGroupProps, checkboxGroupMeta } from "./components/CheckboxGroup/CheckboxGroup.cjs";
 import { Code, CodeProps, CodeSize, codeMeta } from "./components/Code/Code.cjs";
+import { ComboBox, ComboBoxItem, ComboBoxItemProps, ComboBoxProps, comboBoxItemMeta, comboBoxMeta } from "./components/ComboBox/ComboBox.cjs";
 import { Container, ContainerGutter, ContainerProps, ContainerSize, containerMeta } from "./components/Container/Container.cjs";
 import { FileTrigger, FileTriggerProps, fileTriggerMeta } from "./components/FileTrigger/FileTrigger.cjs";
 import { Grid, GridAlign, GridGap, GridMinColumnWidth, GridProps, gridMeta } from "./components/Grid/Grid.cjs";
@@ -47,4 +48,4 @@ import { TextArea, TextAreaControl, TextAreaControlProps, TextAreaDescription, T
 import { TextField, TextFieldControl, TextFieldControlProps, TextFieldDescription, TextFieldDescriptionProps, TextFieldError, TextFieldErrorProps, TextFieldLabel, TextFieldLabelProps, TextFieldProps, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta } from "./composites/TextField/TextField.cjs";
 import { Tooltip, TooltipProps, TooltipTrigger, tooltipMeta } from "./composites/Tooltip/Tooltip.cjs";
 import { Wizard, WizardNavigation, WizardNavigationProps, WizardProps, WizardStep, WizardStepProps, WizardSummary, WizardSummaryProps, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta } from "./composites/Wizard/Wizard.cjs";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, AppShell, type AppShellProps, type AppShellSidebarWidth, Badge, type BadgeNumeric, type BadgeProps, Box, type BoxBackground, type BoxBorder, type BoxMaxWidth, type BoxPadding, type BoxProps, type BoxRadius, type BoxWidth, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Code, type CodeProps, type CodeSize, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerGutter, type ContainerProps, type ContainerSize, Dialog, DialogActions, type DialogActionsPlatform, type DialogActionsProps, DialogBody, type DialogBodyProps, DialogHeading, type DialogHeadingProps, DialogModal, type DialogModalProps, type DialogProps, DialogTrigger, Disclosure, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DisclosureTrigger, type DisclosureTriggerProps, FileTrigger, type FileTriggerProps, Form, FormActions, type FormActionsProps, type FormProps, FormSubmit, type FormSubmitProps, Grid, type GridAlign, type GridGap, GridList, GridListItem, type GridListItemProps, type GridListProps, type GridMinColumnWidth, type GridProps, Group, type GroupProps, Heading, type HeadingAlign, type HeadingLevel, type HeadingProps, type HeadingSize, ICON_INTENTS, Icon, type IconIntent, type IconProps, type IconSize, Link, type LinkProps, ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, SearchFieldControl, type SearchFieldControlProps, SearchFieldLabel, type SearchFieldLabelProps, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type SortDescriptor, type SortDirection, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Surface, type SurfaceLevel, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextAlign, TextArea, TextAreaControl, type TextAreaControlProps, TextAreaDescription, type TextAreaDescriptionProps, TextAreaError, type TextAreaErrorProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, type TextAs, TextField, TextFieldControl, type TextFieldControlProps, TextFieldDescription, type TextFieldDescriptionProps, TextFieldError, type TextFieldErrorProps, TextFieldLabel, type TextFieldLabelProps, type TextFieldProps, type TextNumeric, type TextProps, type TextTone, type TextVariant, Toast, type ToastContent, type ToastProps, type ToastQueue, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, TooltipTrigger, Wizard, WizardNavigation, type WizardNavigationProps, type WizardProps, WizardStep, type WizardStepProps, WizardSummary, type WizardSummaryProps, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, AppShell, type AppShellProps, type AppShellSidebarWidth, Badge, type BadgeNumeric, type BadgeProps, Box, type BoxBackground, type BoxBorder, type BoxMaxWidth, type BoxPadding, type BoxProps, type BoxRadius, type BoxWidth, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Code, type CodeProps, type CodeSize, ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerGutter, type ContainerProps, type ContainerSize, Dialog, DialogActions, type DialogActionsPlatform, type DialogActionsProps, DialogBody, type DialogBodyProps, DialogHeading, type DialogHeadingProps, DialogModal, type DialogModalProps, type DialogProps, DialogTrigger, Disclosure, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DisclosureTrigger, type DisclosureTriggerProps, FileTrigger, type FileTriggerProps, Form, FormActions, type FormActionsProps, type FormProps, FormSubmit, type FormSubmitProps, Grid, type GridAlign, type GridGap, GridList, GridListItem, type GridListItemProps, type GridListProps, type GridMinColumnWidth, type GridProps, Group, type GroupProps, Heading, type HeadingAlign, type HeadingLevel, type HeadingProps, type HeadingSize, ICON_INTENTS, Icon, type IconIntent, type IconProps, type IconSize, Link, type LinkProps, ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, SearchFieldControl, type SearchFieldControlProps, SearchFieldLabel, type SearchFieldLabelProps, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type SortDescriptor, type SortDirection, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Surface, type SurfaceLevel, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextAlign, TextArea, TextAreaControl, type TextAreaControlProps, TextAreaDescription, type TextAreaDescriptionProps, TextAreaError, type TextAreaErrorProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, type TextAs, TextField, TextFieldControl, type TextFieldControlProps, TextFieldDescription, type TextFieldDescriptionProps, TextFieldError, type TextFieldErrorProps, TextFieldLabel, type TextFieldLabelProps, type TextFieldProps, type TextNumeric, type TextProps, type TextTone, type TextVariant, Toast, type ToastContent, type ToastProps, type ToastQueue, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, TooltipTrigger, Wizard, WizardNavigation, type WizardNavigationProps, type WizardProps, WizardStep, type WizardStepProps, WizardSummary, type WizardSummaryProps, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, comboBoxItemMeta, comboBoxMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import { Button, ButtonProps, buttonMeta } from "./components/Button/Button.mjs"
 import { Checkbox, CheckboxProps, checkboxMeta } from "./components/Checkbox/Checkbox.mjs";
 import { CheckboxGroup, CheckboxGroupProps, checkboxGroupMeta } from "./components/CheckboxGroup/CheckboxGroup.mjs";
 import { Code, CodeProps, CodeSize, codeMeta } from "./components/Code/Code.mjs";
+import { ComboBox, ComboBoxItem, ComboBoxItemProps, ComboBoxProps, comboBoxItemMeta, comboBoxMeta } from "./components/ComboBox/ComboBox.mjs";
 import { Container, ContainerGutter, ContainerProps, ContainerSize, containerMeta } from "./components/Container/Container.mjs";
 import { FileTrigger, FileTriggerProps, fileTriggerMeta } from "./components/FileTrigger/FileTrigger.mjs";
 import { Grid, GridAlign, GridGap, GridMinColumnWidth, GridProps, gridMeta } from "./components/Grid/Grid.mjs";
@@ -47,4 +48,4 @@ import { TextArea, TextAreaControl, TextAreaControlProps, TextAreaDescription, T
 import { TextField, TextFieldControl, TextFieldControlProps, TextFieldDescription, TextFieldDescriptionProps, TextFieldError, TextFieldErrorProps, TextFieldLabel, TextFieldLabelProps, TextFieldProps, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta } from "./composites/TextField/TextField.mjs";
 import { Tooltip, TooltipProps, TooltipTrigger, tooltipMeta } from "./composites/Tooltip/Tooltip.mjs";
 import { Wizard, WizardNavigation, WizardNavigationProps, WizardProps, WizardStep, WizardStepProps, WizardSummary, WizardSummaryProps, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta } from "./composites/Wizard/Wizard.mjs";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, AppShell, type AppShellProps, type AppShellSidebarWidth, Badge, type BadgeNumeric, type BadgeProps, Box, type BoxBackground, type BoxBorder, type BoxMaxWidth, type BoxPadding, type BoxProps, type BoxRadius, type BoxWidth, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Code, type CodeProps, type CodeSize, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerGutter, type ContainerProps, type ContainerSize, Dialog, DialogActions, type DialogActionsPlatform, type DialogActionsProps, DialogBody, type DialogBodyProps, DialogHeading, type DialogHeadingProps, DialogModal, type DialogModalProps, type DialogProps, DialogTrigger, Disclosure, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DisclosureTrigger, type DisclosureTriggerProps, FileTrigger, type FileTriggerProps, Form, FormActions, type FormActionsProps, type FormProps, FormSubmit, type FormSubmitProps, Grid, type GridAlign, type GridGap, GridList, GridListItem, type GridListItemProps, type GridListProps, type GridMinColumnWidth, type GridProps, Group, type GroupProps, Heading, type HeadingAlign, type HeadingLevel, type HeadingProps, type HeadingSize, ICON_INTENTS, Icon, type IconIntent, type IconProps, type IconSize, Link, type LinkProps, ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, SearchFieldControl, type SearchFieldControlProps, SearchFieldLabel, type SearchFieldLabelProps, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type SortDescriptor, type SortDirection, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Surface, type SurfaceLevel, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextAlign, TextArea, TextAreaControl, type TextAreaControlProps, TextAreaDescription, type TextAreaDescriptionProps, TextAreaError, type TextAreaErrorProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, type TextAs, TextField, TextFieldControl, type TextFieldControlProps, TextFieldDescription, type TextFieldDescriptionProps, TextFieldError, type TextFieldErrorProps, TextFieldLabel, type TextFieldLabelProps, type TextFieldProps, type TextNumeric, type TextProps, type TextTone, type TextVariant, Toast, type ToastContent, type ToastProps, type ToastQueue, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, TooltipTrigger, Wizard, WizardNavigation, type WizardNavigationProps, type WizardProps, WizardStep, type WizardStepProps, WizardSummary, type WizardSummaryProps, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, AppShell, type AppShellProps, type AppShellSidebarWidth, Badge, type BadgeNumeric, type BadgeProps, Box, type BoxBackground, type BoxBorder, type BoxMaxWidth, type BoxPadding, type BoxProps, type BoxRadius, type BoxWidth, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Code, type CodeProps, type CodeSize, ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerGutter, type ContainerProps, type ContainerSize, Dialog, DialogActions, type DialogActionsPlatform, type DialogActionsProps, DialogBody, type DialogBodyProps, DialogHeading, type DialogHeadingProps, DialogModal, type DialogModalProps, type DialogProps, DialogTrigger, Disclosure, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DisclosureTrigger, type DisclosureTriggerProps, FileTrigger, type FileTriggerProps, Form, FormActions, type FormActionsProps, type FormProps, FormSubmit, type FormSubmitProps, Grid, type GridAlign, type GridGap, GridList, GridListItem, type GridListItemProps, type GridListProps, type GridMinColumnWidth, type GridProps, Group, type GroupProps, Heading, type HeadingAlign, type HeadingLevel, type HeadingProps, type HeadingSize, ICON_INTENTS, Icon, type IconIntent, type IconProps, type IconSize, Link, type LinkProps, ListBox, ListBoxItem, type ListBoxItemProps, type ListBoxProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, Meter, type MeterProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SearchField, SearchFieldControl, type SearchFieldControlProps, SearchFieldLabel, type SearchFieldLabelProps, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Slider, type SliderProps, type SortDescriptor, type SortDirection, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Surface, type SurfaceLevel, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextAlign, TextArea, TextAreaControl, type TextAreaControlProps, TextAreaDescription, type TextAreaDescriptionProps, TextAreaError, type TextAreaErrorProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, type TextAs, TextField, TextFieldControl, type TextFieldControlProps, TextFieldDescription, type TextFieldDescriptionProps, TextFieldError, type TextFieldErrorProps, TextFieldLabel, type TextFieldLabelProps, type TextFieldProps, type TextNumeric, type TextProps, type TextTone, type TextVariant, Toast, type ToastContent, type ToastProps, type ToastQueue, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, TooltipTrigger, Wizard, WizardNavigation, type WizardNavigationProps, type WizardProps, WizardStep, type WizardStepProps, WizardSummary, type WizardSummaryProps, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, comboBoxItemMeta, comboBoxMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };

package/dist/index.mjs

@@ -11,6 +11,7 @@ import { ICON_INTENTS } from "./components/Icon/intents.mjs";
 import { Checkbox, checkboxMeta } from "./components/Checkbox/Checkbox.mjs";
 import { CheckboxGroup, checkboxGroupMeta } from "./components/CheckboxGroup/CheckboxGroup.mjs";
 import { Code, codeMeta } from "./components/Code/Code.mjs";
+import { ComboBox, ComboBoxItem, comboBoxItemMeta, comboBoxMeta } from "./components/ComboBox/ComboBox.mjs";
 import { Container, containerMeta } from "./components/Container/Container.mjs";
 import { FileTrigger, fileTriggerMeta } from "./components/FileTrigger/FileTrigger.mjs";
 import { Grid, gridMeta } from "./components/Grid/Grid.mjs";
@@ -49,4 +50,4 @@ import { TextArea, TextAreaControl, TextAreaDescription, TextAreaError, TextArea
 import { TextField, TextFieldControl, TextFieldDescription, TextFieldError, TextFieldLabel, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta } from "./composites/TextField/TextField.mjs";
 import { Tooltip, TooltipTrigger, tooltipMeta } from "./composites/Tooltip/Tooltip.mjs";
 import { Wizard, WizardNavigation, WizardStep, WizardSummary, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta } from "./composites/Wizard/Wizard.mjs";
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AppShell, Badge, Box, Breadcrumb, Breadcrumbs, Button, Checkbox, CheckboxGroup, Code, ConfirmationDialog, Container, Dialog, DialogActions, DialogBody, DialogHeading, DialogModal, DialogTrigger, Disclosure, DisclosurePanel, DisclosureTrigger, FileTrigger, Form, FormActions, FormSubmit, Grid, GridList, GridListItem, Group, Heading, ICON_INTENTS, Icon, Link, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Meter, NumberField, Popover, PopoverTrigger, ProgressBar, Radio, RadioGroup, SearchField, SearchFieldControl, SearchFieldLabel, Select, SelectItem, Separator, Slider, Stack, Surface, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Tag, TagGroup, Text, TextArea, TextAreaControl, TextAreaDescription, TextAreaError, TextAreaLabel, TextField, TextFieldControl, TextFieldDescription, TextFieldError, TextFieldLabel, Toast, ToastRegion, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, TooltipTrigger, Wizard, WizardNavigation, WizardStep, WizardSummary, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AppShell, Badge, Box, Breadcrumb, Breadcrumbs, Button, Checkbox, CheckboxGroup, Code, ComboBox, ComboBoxItem, ConfirmationDialog, Container, Dialog, DialogActions, DialogBody, DialogHeading, DialogModal, DialogTrigger, Disclosure, DisclosurePanel, DisclosureTrigger, FileTrigger, Form, FormActions, FormSubmit, Grid, GridList, GridListItem, Group, Heading, ICON_INTENTS, Icon, Link, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Meter, NumberField, Popover, PopoverTrigger, ProgressBar, Radio, RadioGroup, SearchField, SearchFieldControl, SearchFieldLabel, Select, SelectItem, Separator, Slider, Stack, Surface, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Tag, TagGroup, Text, TextArea, TextAreaControl, TextAreaDescription, TextAreaError, TextAreaLabel, TextField, TextFieldControl, TextFieldDescription, TextFieldError, TextFieldLabel, Toast, ToastRegion, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, TooltipTrigger, Wizard, WizardNavigation, WizardStep, WizardSummary, accordionItemMeta, accordionMeta, accordionPanelMeta, accordionTriggerMeta, appShellMeta, badgeMeta, boxMeta, breadcrumbMeta, breadcrumbsMeta, buttonMeta, checkboxGroupMeta, checkboxMeta, codeMeta, comboBoxItemMeta, comboBoxMeta, confirmationDialogMeta, containerMeta, createToastQueue, dialogActionsMeta, dialogBodyMeta, dialogHeadingMeta, dialogMeta, dialogModalMeta, disclosureMeta, disclosurePanelMeta, disclosureTriggerMeta, fileTriggerMeta, formActionsMeta, formMeta, formSubmitMeta, gridListItemMeta, gridListMeta, gridMeta, groupMeta, headingMeta, iconMeta, linkMeta, listBoxItemMeta, listBoxMeta, menuItemMeta, menuMeta, meterMeta, numberFieldMeta, popoverMeta, progressBarMeta, radioGroupMeta, radioMeta, searchFieldControlMeta, searchFieldLabelMeta, searchFieldMeta, selectItemMeta, selectMeta, separatorMeta, sliderMeta, stackMeta, surfaceMeta, switchMeta, tabListMeta, tabMeta, tabPanelMeta, tableCellMeta, tableColumnMeta, tableMeta, tableRowMeta, tabsMeta, tagGroupMeta, tagMeta, textAreaControlMeta, textAreaDescriptionMeta, textAreaErrorMeta, textAreaLabelMeta, textAreaMeta, textFieldControlMeta, textFieldDescriptionMeta, textFieldErrorMeta, textFieldLabelMeta, textFieldMeta, textMeta, toastMeta, toastRegionMeta, toggleButtonGroupMeta, toggleButtonMeta, toolbarMeta, tooltipMeta, wizardMeta, wizardNavigationMeta, wizardStepMeta, wizardSummaryMeta };

package/llms.txt

@@ -80,7 +80,16 @@ Collection:  ListBox/ListBoxItem, GridList/GridListItem (+ Menu/MenuItem,
 Input:       TextField, TextArea (each + Label/Control/Description/Error),
              SearchField (+ Label/Control; leading search + clear glyphs),
              NumberField (label/description/errorMessage props + −/+ steppers),
-             Slider (label + value output; single value or [min,max] range)
+             Slider (label + value output; single value or [min,max] range),
+             ComboBox/ComboBoxItem (text input + typeahead-filtered list;
+             label/description/errorMessage/placeholder/triggerLabel props).
+             Pick ComboBox over Select when the option set is too long to scan
+             (~10+) or the user may type a value that is not in it
+             (allowsCustomValue). ComboBox is Input — the user TYPES and the
+             list narrows; Select is Selection — picking from a closed set is
+             the only act. Filtering matches the option's visible TEXT, not its
+             id. Items are Selection/item (ADR-007 split, same as SelectItem).
+             Unlike Select it ships a validationMessage part.
 Overlay:     Dialog, DialogModal, DialogTrigger, DialogHeading, DialogBody,
              DialogActions, Menu, MenuTrigger, ConfirmationDialog,
              Popover, PopoverTrigger, Tooltip, TooltipTrigger
@@ -111,13 +120,17 @@ Structure:   Form, FormActions, Wizard, WizardStep, WizardSummary,
              never a free style/className),
              Grid (2D layout: columns=N or minColumnWidth=xs|sm|md|lg for
              responsive auto-fit, rows, gap=xs..xl, align, justify — never a
-             raw track template),
+             raw track template; each child gets a data-part="item" wrapper
+             that is a size container, so theme cqi scales resolve to the
+             track width),
              Container (centered page column: size=surface|reading,
-             gutter=page|section|none — instead of max-width + margin auto),
+             gutter=page|section|none — instead of max-width + margin auto;
+             the column is a size container for theme cqi scales),
              AppShell (full-viewport app frame: header?, sidebar?, aside?,
              sidebarWidth/asideWidth=sm|md|lg, sidebarLabel/asideLabel for the
              landmark names; main content as children — instead of a
-             hand-rolled viewport grid),
+             hand-rolled viewport grid; every region is a size container for
+             theme cqi scales),
              Code (code text: block=true scrollable <pre> surface, block=false
              inline <code> run)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/fsl-ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Semantic, token-native component library for the ttoss ecosystem. Built on React Aria Components with @ttoss/fsl-theme tokens.",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "@iconify-icon/react": "^2.2.0",
     "@iconify/icons-lucide": "^1.2.135",
     "react-aria-components": "~1.19.0",
-    "@ttoss/fsl-theme": "^2.1.3"
+    "@ttoss/fsl-theme": "^2.1.5"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -51,8 +51,8 @@
     "tsdown": "^0.22.2",
     "zod": "^4.4.3",
     "@ttoss/config": "^1.37.17",
-    "@ttoss/forms": "^0.44.4",
-    "@ttoss/test-utils": "^4.2.18"
+    "@ttoss/test-utils": "^4.2.18",
+    "@ttoss/forms": "^0.44.4"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/tokens/CONTRACT.md

@@ -412,14 +412,15 @@ Rules (enforced by the contract tests):
 
 Registered knobs:
 
-| Knob                      | Component     | Fallback           |
-| ------------------------- | ------------- | ------------------ |
-| `--fsl-dialog-max-width`  | `DialogModal` | `min(500px, 90vw)` |
-| `--fsl-dialog-max-height` | `DialogModal` | `90vh`             |
-| `--fsl-menu-min-width`    | `Menu`        | `12rem`            |
-| `--fsl-menu-max-width`    | `Menu`        | `min(320px, 90vw)` |
-| `--fsl-popover-max-width` | `Popover`     | `min(320px, 90vw)` |
-| `--fsl-tooltip-max-width` | `Tooltip`     | `min(280px, 90vw)` |
+| Knob                         | Component     | Fallback           |
+| ---------------------------- | ------------- | ------------------ |
+| `--fsl-combo-box-max-height` | `ComboBox`    | `min(20rem, 60vh)` |
+| `--fsl-dialog-max-width`     | `DialogModal` | `min(500px, 90vw)` |
+| `--fsl-dialog-max-height`    | `DialogModal` | `90vh`             |
+| `--fsl-menu-min-width`       | `Menu`        | `12rem`            |
+| `--fsl-menu-max-width`       | `Menu`        | `min(320px, 90vw)` |
+| `--fsl-popover-max-width`    | `Popover`     | `min(320px, 90vw)` |
+| `--fsl-tooltip-max-width`    | `Tooltip`     | `min(280px, 90vw)` |
 
 ---