@jirawatpyk/aura-tokens 4.8.0 → 4.9.0

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.8.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.9.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -1,4 +1,4 @@
-/* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"ColorSchemeScript"},{"name":"ColorSchemeToggle"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"}]} */
+/* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"ColorSchemeScript"},{"name":"ColorSchemeToggle"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"},{"name":"NumberField"},{"name":"Stepper"},{"name":"SegmentedControl"}]} */
 window.Aura = (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -79,17 +79,20 @@ window.Aura = (() => {
     Icon: () => Icon,
     IconButton: () => IconButton,
     Menu: () => Menu,
+    NumberField: () => NumberField,
     Pagination: () => Pagination,
     Popover: () => Popover,
     Progress: () => Progress,
     RadioGroup: () => RadioGroup,
     STRINGS: () => STRINGS,
+    SegmentedControl: () => SegmentedControl,
     Select: () => Select,
     SideNav: () => SideNav,
     Skeleton: () => Skeleton,
     Stack: () => Stack,
     Stat: () => Stat,
     StatusPill: () => StatusPill,
+    Stepper: () => Stepper,
     Surface: () => Surface,
     Switch: () => Switch,
     Tabs: () => Tabs,
@@ -624,6 +627,12 @@ window.Aura = (() => {
         return "Up to " + n2 + " files";
       },
       colorScheme: "Colour scheme",
+      increase: "Increase",
+      decrease: "Decrease",
+      stepDone: "completed",
+      stepOf: function(i, total) {
+        return "Step " + i + " of " + total;
+      },
       schemeLight: "Light",
       schemeDark: "Dark",
       schemeSystem: "System",
@@ -716,6 +725,12 @@ window.Aura = (() => {
         return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
       },
       colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
+      increase: "\u0E40\u0E1E\u0E34\u0E48\u0E21",
+      decrease: "\u0E25\u0E14",
+      stepDone: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
+      stepOf: function(i, total) {
+        return "\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 " + i + " \u0E08\u0E32\u0E01 " + total;
+      },
       schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
       schemeDark: "\u0E21\u0E37\u0E14",
       schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",
@@ -985,257 +1000,332 @@ window.Aura = (() => {
       return norm(k).indexOf(q) >= 0;
     });
   }
-  var Combobox = React16.forwardRef(function Combobox2(props, ref) {
-    const t = useStrings();
-    const auto = uid(), id = props.id || auto, listId = id + "-list";
-    const options = (props.options || []).map(toOpt);
-    const st = useMaybeControlled(
-      props.value,
-      props.defaultValue == null ? null : props.defaultValue,
-      props.onChange
-    );
-    const value = st[0], setValue = st[1];
-    const selected = options.filter(function(o) {
-      return o.value === value;
-    })[0] || null;
-    const openState = React16.useState(false), open = openState[0], setOpen = openState[1];
-    const qState = React16.useState(null), query = qState[0], setQuery = qState[1];
-    const aState = React16.useState(0), active = aState[0], setActive = aState[1];
-    const posState = React16.useState(null);
-    const inputRef = React16.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React16.useRef(null), listRef = React16.useRef(null);
-    const mounted = useMounted();
-    const limit = props.limit || 200;
-    const filter = props.filter || defaultFilter;
-    let shown = props.onSearch || query == null ? options : options.filter(function(o) {
-      return filter(o, query);
-    });
-    const more = shown.length > limit;
-    shown = shown.slice(0, limit);
-    const activeIdx = Math.min(active, shown.length - 1);
-    function place() {
-      if (!boxRef.current) return;
-      const r = boxRef.current.getBoundingClientRect();
-      const maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
-      posState[1]({
-        left: r.left,
-        width: r.width,
-        top: up ? void 0 : r.bottom + 4,
-        bottom: up ? window.innerHeight - r.top + 4 : void 0,
-        maxHeight: Math.min(maxH, (up ? r.top : below) - 8)
+  var Combobox = React16.forwardRef(
+    function Combobox2(all, ref) {
+      const props = all;
+      const multi = all.multiple === true;
+      const mp = all;
+      const t = useStrings();
+      const auto = uid(), id = props.id || auto, listId = id + "-list";
+      const options = (props.options || []).map(toOpt);
+      const st = useMaybeControlled(
+        multi ? mp.value : props.value === void 0 ? void 0 : props.value == null ? [] : [props.value],
+        multi ? mp.defaultValue || [] : props.defaultValue == null ? [] : [props.defaultValue],
+        function(next) {
+          if (multi) {
+            if (mp.onChange) mp.onChange(next);
+          } else if (props.onChange) props.onChange(next.length ? next[0] : null);
+        }
+      );
+      const values = st[0], setValues = st[1];
+      const value = values.length ? values[0] : null;
+      function setValue(v) {
+        setValues(v == null ? [] : [v]);
+      }
+      const isPicked = function(v) {
+        return values.indexOf(v) >= 0;
+      };
+      const full = multi && mp.max != null && values.length >= mp.max;
+      const selected = multi ? null : options.filter(function(o) {
+        return o.value === value;
+      })[0] || null;
+      const picked = multi ? values.map(function(v) {
+        return options.filter(function(o) {
+          return o.value === v;
+        })[0];
+      }).filter(Boolean) : [];
+      const openState = React16.useState(false), open = openState[0], setOpen = openState[1];
+      const qState = React16.useState(null), query = qState[0], setQuery = qState[1];
+      const aState = React16.useState(0), active = aState[0], setActive = aState[1];
+      const posState = React16.useState(null);
+      const inputRef = React16.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React16.useRef(null), listRef = React16.useRef(null);
+      const mounted = useMounted();
+      const limit = props.limit || 200;
+      const filter = props.filter || defaultFilter;
+      let shown = props.onSearch || query == null ? options : options.filter(function(o) {
+        return filter(o, query);
       });
-    }
-    useIsoLayoutEffect(
-      function() {
-        if (open) place();
-      },
-      [open, shown.length]
-    );
-    React16.useEffect(
-      function() {
-        if (!open) return;
-        function outside(e) {
-          if (boxRef.current && boxRef.current.contains(e.target)) return;
-          if (listRef.current && listRef.current.contains(e.target)) return;
-          close(false);
+      const more = shown.length > limit;
+      shown = shown.slice(0, limit);
+      const activeIdx = Math.min(active, shown.length - 1);
+      function place() {
+        if (!boxRef.current) return;
+        const r = boxRef.current.getBoundingClientRect();
+        const maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
+        posState[1]({
+          left: r.left,
+          width: r.width,
+          top: up ? void 0 : r.bottom + 4,
+          bottom: up ? window.innerHeight - r.top + 4 : void 0,
+          maxHeight: Math.min(maxH, (up ? r.top : below) - 8)
+        });
+      }
+      useIsoLayoutEffect(
+        function() {
+          if (open) place();
+        },
+        [open, shown.length]
+      );
+      React16.useEffect(
+        function() {
+          if (!open) return;
+          function outside(e) {
+            if (boxRef.current && boxRef.current.contains(e.target)) return;
+            if (listRef.current && listRef.current.contains(e.target)) return;
+            close(false);
+          }
+          function onScroll(e) {
+            if (!listRef.current || !listRef.current.contains(e.target)) place();
+          }
+          document.addEventListener("pointerdown", outside, true);
+          window.addEventListener("scroll", onScroll, true);
+          window.addEventListener("resize", place);
+          return function() {
+            document.removeEventListener("pointerdown", outside, true);
+            window.removeEventListener("scroll", onScroll, true);
+            window.removeEventListener("resize", place);
+          };
+        },
+        [open]
+      );
+      React16.useEffect(
+        function() {
+          if (!open || !listRef.current) return;
+          const el = listRef.current.querySelector('[data-idx="' + activeIdx + '"]');
+          if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+        },
+        [activeIdx, open]
+      );
+      function openList() {
+        if (!open && !props.disabled && !props.readOnly) {
+          setOpen(true);
+          const i = selected ? shown.indexOf(selected) : 0;
+          setActive(i < 0 ? 0 : i);
         }
-        function onScroll(e) {
-          if (!listRef.current || !listRef.current.contains(e.target)) place();
+      }
+      function close(restoreLabel) {
+        setOpen(false);
+        setQuery(null);
+      }
+      function choose(o) {
+        if (!o || o.disabled) return;
+        if (multi) {
+          if (isPicked(o.value))
+            setValues(
+              values.filter(function(v) {
+                return v !== o.value;
+              })
+            );
+          else if (!full) setValues(values.concat([o.value]));
+          setQuery(null);
+          if (inputRef.current) inputRef.current.focus();
+          return;
         }
-        document.addEventListener("pointerdown", outside, true);
-        window.addEventListener("scroll", onScroll, true);
-        window.addEventListener("resize", place);
-        return function() {
-          document.removeEventListener("pointerdown", outside, true);
-          window.removeEventListener("scroll", onScroll, true);
-          window.removeEventListener("resize", place);
-        };
-      },
-      [open]
-    );
-    React16.useEffect(
-      function() {
-        if (!open || !listRef.current) return;
-        const el = listRef.current.querySelector('[data-idx="' + activeIdx + '"]');
-        if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
-      },
-      [activeIdx, open]
-    );
-    function openList() {
-      if (!open && !props.disabled && !props.readOnly) {
-        setOpen(true);
-        const i = selected ? shown.indexOf(selected) : 0;
-        setActive(i < 0 ? 0 : i);
+        setValue(o.value);
+        setQuery(null);
+        setOpen(false);
+        if (inputRef.current) inputRef.current.focus();
       }
-    }
-    function close(restoreLabel) {
-      setOpen(false);
-      setQuery(null);
-    }
-    function choose(o) {
-      if (!o || o.disabled) return;
-      setValue(o.value);
-      setQuery(null);
-      setOpen(false);
-      if (inputRef.current) inputRef.current.focus();
-    }
-    function onKeyDown(e) {
-      const k = e.key;
-      if (k === "ArrowDown") {
-        e.preventDefault();
-        if (!open) openList();
-        else setActive(Math.min(activeIdx + 1, shown.length - 1));
-      } else if (k === "ArrowUp") {
-        e.preventDefault();
-        if (!open) openList();
-        else setActive(Math.max(activeIdx - 1, 0));
-      } else if (k === "Home" && open) {
-        e.preventDefault();
-        setActive(0);
-      } else if (k === "End" && open) {
-        e.preventDefault();
-        setActive(shown.length - 1);
-      } else if (k === "Enter") {
-        if (open && shown[activeIdx]) {
+      function onKeyDown(e) {
+        const k = e.key;
+        if (k === "ArrowDown") {
           e.preventDefault();
-          choose(shown[activeIdx]);
-        }
-      } else if (k === "Escape") {
-        if (open) {
+          if (!open) openList();
+          else setActive(Math.min(activeIdx + 1, shown.length - 1));
+        } else if (k === "ArrowUp") {
           e.preventDefault();
-          e.stopPropagation();
-          close();
-        } else if (props.clearable !== false && value != null && query == null) {
-          setValue(null);
+          if (!open) openList();
+          else setActive(Math.max(activeIdx - 1, 0));
+        } else if (k === "Home" && open) {
+          e.preventDefault();
+          setActive(0);
+        } else if (k === "End" && open) {
+          e.preventDefault();
+          setActive(shown.length - 1);
+        } else if (k === "Enter") {
+          if (open && shown[activeIdx]) {
+            e.preventDefault();
+            choose(shown[activeIdx]);
+          }
+        } else if (k === "Escape") {
+          if (open) {
+            e.preventDefault();
+            e.stopPropagation();
+            close();
+          } else if (!multi && props.clearable !== false && value != null && query == null) {
+            setValue(null);
+          }
+        } else if (k === "Backspace" && multi && !text && values.length) {
+          setValues(values.slice(0, -1));
+        } else if (k === "Tab") {
+          if (open) close();
         }
-      } else if (k === "Tab") {
-        if (open) close();
       }
-    }
-    const text = query != null ? query : selected ? selected.label : "";
-    const optId = function(i) {
-      return id + "-opt-" + i;
-    };
-    const list = open && mounted && posState[0] ? (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ React16.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React16.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React16.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
-        const isSel = selected && o.value === selected.value;
-        return /* @__PURE__ */ React16.createElement(
-          "li",
+      const text = query != null ? query : selected ? selected.label : "";
+      const summaryId = id + "-picked";
+      const optId = function(i) {
+        return id + "-opt-" + i;
+      };
+      const list = open && mounted && posState[0] ? (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ React16.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React16.createElement(
+          "ul",
           {
-            key: o.value,
-            id: optId(i),
-            role: "option",
-            "data-idx": i,
-            "aria-selected": isSel,
-            "aria-disabled": o.disabled || void 0,
-            className: cx(
-              "aura-combo__option",
-              i === activeIdx && "is-active",
-              isSel && "is-selected",
-              o.disabled && "is-disabled"
-            ),
-            onPointerDown: function(e) {
-              e.preventDefault();
-            },
-            onClick: function() {
-              choose(o);
-            },
-            onPointerMove: function() {
-              if (activeIdx !== i) setActive(i);
-            }
+            id: listId,
+            role: "listbox",
+            "aria-label": props.label,
+            "aria-multiselectable": multi || void 0,
+            className: "aura-combo__list"
           },
-          o.icon ? /* @__PURE__ */ React16.createElement(Icon, { name: o.icon }) : null,
-          /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
-          isSel ? /* @__PURE__ */ React16.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
-        );
-      }), more && !props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null)),
-      document.body
-    ) : null;
-    return /* @__PURE__ */ React16.createElement(
-      Field,
-      {
-        id,
-        label: props.label,
-        hint: props.hint,
-        error: props.error,
-        required: props.required,
-        optional: props.optional,
-        disabled: props.disabled,
-        className: props.className
-      },
-      /* @__PURE__ */ React16.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open") }, /* @__PURE__ */ React16.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), /* @__PURE__ */ React16.createElement(
-        "input",
+          props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React16.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
+            const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
+            const blocked = o.disabled || multi && full && !isSel;
+            return /* @__PURE__ */ React16.createElement(
+              "li",
+              {
+                key: o.value,
+                id: optId(i),
+                role: "option",
+                "data-idx": i,
+                "aria-selected": isSel,
+                "aria-disabled": blocked || void 0,
+                className: cx(
+                  "aura-combo__option",
+                  i === activeIdx && "is-active",
+                  isSel && "is-selected",
+                  blocked && "is-disabled"
+                ),
+                onPointerDown: function(e) {
+                  e.preventDefault();
+                },
+                onClick: function() {
+                  if (!blocked || isSel) choose(o);
+                },
+                onPointerMove: function() {
+                  if (activeIdx !== i) setActive(i);
+                }
+              },
+              o.icon ? /* @__PURE__ */ React16.createElement(Icon, { name: o.icon }) : null,
+              /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+              isSel ? /* @__PURE__ */ React16.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+            );
+          }),
+          more && !props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null
+        )),
+        document.body
+      ) : null;
+      return /* @__PURE__ */ React16.createElement(
+        Field,
         {
-          ref: inputMerged,
           id,
-          type: "text",
-          role: "combobox",
-          className: "aura-input__control",
-          autoComplete: "off",
-          "aria-expanded": open,
-          "aria-controls": listId,
-          "aria-autocomplete": "list",
-          "aria-activedescendant": open && shown[activeIdx] ? optId(activeIdx) : void 0,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": props.error ? id + "-error" : props.hint ? id + "-hint" : void 0,
-          placeholder: props.placeholder,
-          disabled: props.disabled,
-          readOnly: props.readOnly,
+          label: props.label,
+          hint: props.hint,
+          error: props.error,
           required: props.required,
-          name: props.name,
-          value: text,
-          onChange: function(e) {
-            setQuery(e.target.value);
-            setActive(0);
-            if (!open) setOpen(true);
-            if (props.onSearch) props.onSearch(e.target.value);
-          },
-          onClick: openList,
-          onKeyDown,
-          onBlur: function() {
-            setTimeout(function() {
-              if (listRef.current && listRef.current.contains(document.activeElement)) return;
-              setOpen(false);
-              setQuery(null);
-            }, 0);
-          }
-        }
-      ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React16.createElement(
-        "button",
-        {
-          type: "button",
-          className: "aura-combo__clear",
-          "aria-label": t.clear(props.label),
-          tabIndex: -1,
-          onClick: function() {
-            setValue(null);
-            setQuery(null);
-            if (inputRef.current) inputRef.current.focus();
-          }
+          optional: props.optional,
+          disabled: props.disabled,
+          className: props.className
         },
-        /* @__PURE__ */ React16.createElement(Icon, { name: "x" })
-      ) : null, /* @__PURE__ */ React16.createElement(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          "aria-hidden": true,
-          className: "aura-combo__toggle",
-          onPointerDown: function(e) {
-            e.preventDefault();
-          },
-          onClick: function() {
-            if (open) close();
-            else {
-              openList();
-              inputRef.current && inputRef.current.focus();
+        /* @__PURE__ */ React16.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React16.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
+          return /* @__PURE__ */ React16.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React16.createElement(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              className: "aura-combo__chip-remove",
+              "aria-label": t.remove(o.label),
+              onPointerDown: function(e) {
+                e.preventDefault();
+              },
+              onClick: function() {
+                setValues(
+                  values.filter(function(v) {
+                    return v !== o.value;
+                  })
+                );
+                if (inputRef.current) inputRef.current.focus();
+              }
+            },
+            /* @__PURE__ */ React16.createElement(Icon, { name: "x" })
+          ));
+        })) : null, multi ? /* @__PURE__ */ React16.createElement("span", { id: summaryId, className: "aura-sr-only" }, picked.length ? t.selectedCount(picked.length) + ": " + picked.map(function(o) {
+          return o.label;
+        }).join(", ") : "") : null, multi && props.name ? values.map(function(v) {
+          return /* @__PURE__ */ React16.createElement("input", { key: v, type: "hidden", name: props.name, value: v });
+        }) : null, /* @__PURE__ */ React16.createElement(
+          "input",
+          {
+            ref: inputMerged,
+            id,
+            type: "text",
+            role: "combobox",
+            className: "aura-input__control",
+            autoComplete: "off",
+            "aria-expanded": open,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": open && shown[activeIdx] ? optId(activeIdx) : void 0,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
+            placeholder: multi && values.length ? void 0 : props.placeholder,
+            disabled: props.disabled,
+            readOnly: props.readOnly,
+            required: props.required && (!multi || !values.length),
+            name: multi ? void 0 : props.name,
+            value: text,
+            onChange: function(e) {
+              setQuery(e.target.value);
+              setActive(0);
+              if (!open) setOpen(true);
+              if (props.onSearch) props.onSearch(e.target.value);
+            },
+            onClick: openList,
+            onKeyDown,
+            onBlur: function() {
+              setTimeout(function() {
+                if (listRef.current && listRef.current.contains(document.activeElement)) return;
+                setOpen(false);
+                setQuery(null);
+              }, 0);
             }
           }
-        },
-        /* @__PURE__ */ React16.createElement(Icon, { name: "chevron-down" })
-      )),
-      list
-    );
-  });
+        ), props.clearable !== false && values.length && !props.disabled ? /* @__PURE__ */ React16.createElement(
+          "button",
+          {
+            type: "button",
+            className: "aura-combo__clear",
+            "aria-label": t.clear(props.label),
+            tabIndex: -1,
+            onClick: function() {
+              setValues([]);
+              setQuery(null);
+              if (inputRef.current) inputRef.current.focus();
+            }
+          },
+          /* @__PURE__ */ React16.createElement(Icon, { name: "x" })
+        ) : null, /* @__PURE__ */ React16.createElement(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "aura-combo__toggle",
+            onPointerDown: function(e) {
+              e.preventDefault();
+            },
+            onClick: function() {
+              if (open) close();
+              else {
+                openList();
+                inputRef.current && inputRef.current.focus();
+              }
+            }
+          },
+          /* @__PURE__ */ React16.createElement(Icon, { name: "chevron-down" })
+        )),
+        list
+      );
+    }
+  );
 
   // src/DatePicker.tsx
   var React17 = __toESM(require_react(), 1);
@@ -4802,5 +4892,323 @@ window.Aura = (() => {
       "aria-controls": open ? id : void 0
     }), panel);
   });
+
+  // src/NumberField.tsx
+  var React48 = __toESM(require_react(), 1);
+  function decimalsOf(n2) {
+    const s = String(n2);
+    const i = s.indexOf(".");
+    return i < 0 ? 0 : s.length - i - 1;
+  }
+  function parse(text) {
+    const s = text.replace(/[,\s ]/g, "");
+    if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+    return Number(s);
+  }
+  var NumberField = React48.forwardRef(function NumberField2(props, ref) {
+    const t = useStrings();
+    const auto = uid(), id = props.id || auto;
+    const step = props.step || 1;
+    const decimals = props.decimals != null ? props.decimals : decimalsOf(step);
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue == null ? null : props.defaultValue,
+      props.onChange
+    );
+    const value = st[0], setValue = st[1];
+    const draftState = React48.useState(null), draft = draftState[0], setDraft = draftState[1];
+    function fmt2(n2) {
+      if (n2 == null || isNaN(n2)) return "";
+      return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+    }
+    function fit2(n2) {
+      let v = n2;
+      if (props.min != null && v < props.min) v = props.min;
+      if (props.max != null && v > props.max) v = props.max;
+      const f = Math.pow(10, decimals);
+      return Math.round(v * f) / f;
+    }
+    function nudge(by) {
+      if (props.disabled || props.readOnly) return;
+      const base = value == null ? props.min != null && props.min > 0 ? props.min - by : 0 : value;
+      const next = fit2(base + by);
+      setValue(next);
+      setDraft(null);
+    }
+    function onKeyDown(e) {
+      const k = e.key;
+      let by = 0;
+      if (k === "ArrowUp") by = step;
+      else if (k === "ArrowDown") by = -step;
+      else if (k === "PageUp") by = step * 10;
+      else if (k === "PageDown") by = -step * 10;
+      else if (k === "Home" && props.min != null) {
+        e.preventDefault();
+        setValue(props.min);
+        setDraft(null);
+        return;
+      } else if (k === "End" && props.max != null) {
+        e.preventDefault();
+        setValue(props.max);
+        setDraft(null);
+        return;
+      }
+      if (by) {
+        e.preventDefault();
+        nudge(by);
+      }
+    }
+    const atMin = value != null && props.min != null && value <= props.min;
+    const atMax = value != null && props.max != null && value >= props.max;
+    const affixText = function(x) {
+      return typeof x === "string" || typeof x === "number" ? String(x) : "";
+    };
+    const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
+    const stepper = props.stepper !== false && !props.readOnly;
+    return /* @__PURE__ */ React48.createElement(
+      Field,
+      {
+        id,
+        label: props.label,
+        hint: props.hint,
+        error: props.error,
+        required: props.required,
+        optional: props.optional,
+        disabled: props.disabled,
+        className: props.className
+      },
+      /* @__PURE__ */ React48.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React48.createElement(
+        "input",
+        {
+          ref,
+          id,
+          type: "text",
+          role: "spinbutton",
+          inputMode: decimals > 0 || props.min != null && props.min < 0 ? "decimal" : "numeric",
+          autoComplete: "off",
+          className: "aura-input__control",
+          name: props.name,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readOnly: props.readOnly,
+          required: props.required,
+          "aria-valuenow": value == null ? void 0 : value,
+          "aria-valuemin": props.min,
+          "aria-valuemax": props.max,
+          "aria-valuetext": valueText,
+          "aria-invalid": props.error ? true : void 0,
+          "aria-describedby": describedBy(id, props),
+          value: draft != null ? draft : fmt2(value),
+          onFocus: function() {
+            setDraft(fmt2(value));
+          },
+          onChange: function(e) {
+            const text = e.target.value;
+            setDraft(text);
+            if (!text.trim()) setValue(null);
+            else {
+              const n2 = parse(text);
+              if (!isNaN(n2)) setValue(n2);
+            }
+          },
+          onBlur: function(e) {
+            const n2 = draft == null ? value : !draft.trim() ? null : parse(draft);
+            if (n2 == null) {
+              if (value != null) setValue(null);
+            } else if (!isNaN(n2)) {
+              const f = fit2(n2);
+              if (f !== value) setValue(f);
+            }
+            setDraft(null);
+            if (props.onBlur) props.onBlur(e);
+          },
+          onKeyDown
+        }
+      ), props.suffix != null ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React48.createElement(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: "aura-number__step",
+          "aria-label": t.decrease,
+          "aria-controls": id,
+          disabled: props.disabled || atMin,
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            nudge(-step);
+          }
+        },
+        /* @__PURE__ */ React48.createElement(Icon, { name: "minus" })
+      ), /* @__PURE__ */ React48.createElement(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: "aura-number__step",
+          "aria-label": t.increase,
+          "aria-controls": id,
+          disabled: props.disabled || atMax,
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            nudge(step);
+          }
+        },
+        /* @__PURE__ */ React48.createElement(Icon, { name: "plus" })
+      )) : null)
+    );
+  });
+
+  // src/Stepper.tsx
+  var React49 = __toESM(require_react(), 1);
+  var Stepper = React49.forwardRef(function Stepper2(props, ref) {
+    const t = useStrings();
+    const steps = props.steps || [];
+    let at = -1;
+    steps.forEach(function(s, i) {
+      if (s.id === props.current) at = i;
+    });
+    if (at < 0) at = 0;
+    const vertical = props.orientation === "vertical";
+    const cur = steps[at];
+    return /* @__PURE__ */ React49.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": props.label,
+        className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
+      },
+      /* @__PURE__ */ React49.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
+        const state = i < at ? "done" : i === at ? "current" : "upcoming";
+        const marker = /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React49.createElement(Icon, { name: "check" }) : i + 1);
+        const text = /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React49.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+        const clickable = state === "done" && !!props.onStepClick;
+        return /* @__PURE__ */ React49.createElement(
+          "li",
+          {
+            key: s.id,
+            className: cx("aura-stepper__item", "is-" + state),
+            "aria-current": state === "current" ? "step" : void 0
+          },
+          clickable ? /* @__PURE__ */ React49.createElement(
+            "button",
+            {
+              type: "button",
+              className: "aura-stepper__step aura-focusable",
+              onClick: function() {
+                props.onStepClick(s.id);
+              }
+            },
+            marker,
+            text
+          ) : /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__step" }, marker, text)
+        );
+      })),
+      !vertical && cur ? /* @__PURE__ */ React49.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+    );
+  });
+
+  // src/SegmentedControl.tsx
+  var React50 = __toESM(require_react(), 1);
+  function toOpt2(o) {
+    return typeof o === "object" ? o : { value: o, label: o };
+  }
+  var SegmentedControl = React50.forwardRef(
+    function SegmentedControl2(props, ref) {
+      const options = (props.options || []).map(toOpt2);
+      const firstEnabled = options.filter(function(o) {
+        return !o.disabled;
+      })[0];
+      const st = useMaybeControlled(
+        props.value,
+        props.defaultValue != null ? props.defaultValue : firstEnabled ? firstEnabled.value : void 0,
+        props.onChange
+      );
+      const value = st[0], setValue = st[1];
+      const auto = uid(), id = props.id || auto;
+      const refs = React50.useRef([]);
+      const selIdx = options.findIndex(function(o) {
+        return o.value === value;
+      });
+      const tabIdx = selIdx >= 0 && !options[selIdx].disabled ? selIdx : options.indexOf(firstEnabled);
+      function move(from, dir) {
+        const n2 = options.length;
+        for (let k = 1; k <= n2; k++) {
+          const i = ((from + dir * k) % n2 + n2) % n2;
+          if (!options[i].disabled) {
+            setValue(options[i].value);
+            const el = refs.current[i];
+            if (el) el.focus();
+            return;
+          }
+        }
+      }
+      function onKeyDown(e, i) {
+        const k = e.key;
+        if (k === "ArrowRight" || k === "ArrowDown") {
+          e.preventDefault();
+          move(i, 1);
+        } else if (k === "ArrowLeft" || k === "ArrowUp") {
+          e.preventDefault();
+          move(i, -1);
+        } else if (k === "Home") {
+          e.preventDefault();
+          move(-1, 1);
+        } else if (k === "End") {
+          e.preventDefault();
+          move(options.length, -1);
+        }
+      }
+      return /* @__PURE__ */ React50.createElement(
+        "div",
+        {
+          ref,
+          id,
+          role: "radiogroup",
+          "aria-label": props.label,
+          "aria-disabled": props.disabled || void 0,
+          className: cx(
+            "aura-segmented",
+            props.size === "sm" && "aura-segmented--sm",
+            props.fullWidth && "is-full",
+            props.disabled && "is-disabled",
+            props.className
+          )
+        },
+        options.map(function(o, i) {
+          const on = o.value === value;
+          const off = props.disabled || o.disabled;
+          return /* @__PURE__ */ React50.createElement(
+            "button",
+            {
+              key: o.value,
+              ref: function(el) {
+                refs.current[i] = el;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": on,
+              "aria-label": o.iconOnly ? o.label : void 0,
+              title: o.iconOnly ? o.label : void 0,
+              tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
+              disabled: off,
+              className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),
+              onClick: function() {
+                setValue(o.value);
+              },
+              onKeyDown: function(e) {
+                onKeyDown(e, i);
+              }
+            },
+            o.icon ? /* @__PURE__ */ React50.createElement(Icon, { name: o.icon }) : null,
+            o.iconOnly ? null : /* @__PURE__ */ React50.createElement("span", null, o.label)
+          );
+        })
+      );
+    }
+  );
   return __toCommonJS(index_exports);
 })();

package/components/aura.components.css

@@ -944,6 +944,107 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-popover__head + .aura-popover__body { padding-top: var(--aura-space-2); }
 @media (prefers-reduced-motion: reduce) { .aura-popover { animation: none; } }
 
+/* ---------- Combobox, multiple: picks as chips in the field ---------- */
+.aura-combo.is-multi { flex-wrap: wrap; align-items: center; gap: var(--aura-space-1); padding: 5px calc(var(--aura-space-2) + 2 * var(--aura-control-sm)) 5px calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); }
+.aura-combo.is-multi .aura-input__icon { top: calc(var(--aura-input-height) / 2 - var(--aura-icon-sm) / 2 - 1px); }
+.aura-combo.is-multi .aura-input__control { flex: 1 0 4ch; height: 32px; padding: 0 var(--aura-space-1); }
+/* Wrapped chips grow the field: keep the icon and buttons on the first line. */
+.aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - var(--aura-control-sm)) / 2); }
+.aura-combo__chips { display: contents; }
+.aura-combo__chip {
+  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; box-sizing: border-box;
+  padding: 0 2px 0 var(--aura-space-2); border-radius: var(--aura-radius-full);
+  background: var(--aura-bg-selected); color: var(--aura-fg-primary); font-size: 13px; font-weight: 500;
+}
+.aura-combo__chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
+.aura-combo__chip-remove {
+  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
+  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
+}
+.aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
+
+/* ---------- NumberField ---------- */
+.aura-number .aura-input__control { font-variant-numeric: tabular-nums; }
+.aura-number__affix { padding-left: var(--aura-space-3); color: var(--aura-fg-secondary); font-size: 14px; white-space: nowrap; }
+.aura-number__affix + .aura-input__control { padding-left: var(--aura-space-2); }
+.aura-input__control + .aura-number__affix { padding: 0 var(--aura-space-2) 0 0; }
+.aura-number__steps { display: flex; align-self: stretch; border-left: 1px solid var(--aura-border-default); }
+.aura-number__step {
+  display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0;
+  border: 0; background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
+  transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
+.aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
+.aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+
+/* ---------- Stepper ---------- */
+.aura-stepper { font-family: var(--font-sans); }
+.aura-stepper__list { display: flex; list-style: none; margin: 0; padding: 0; }
+.aura-stepper--vertical .aura-stepper__list { flex-direction: column; }
+.aura-stepper__item { position: relative; flex: 1 1 0; min-width: 0; }
+.aura-stepper__step {
+  display: flex; align-items: flex-start; gap: var(--aura-space-3); width: 100%; box-sizing: border-box; padding: 0 var(--aura-space-3) 0 0;
+  border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: var(--aura-radius-md);
+}
+button.aura-stepper__step { cursor: pointer; }
+button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underline; }
+.aura-stepper__marker {
+  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box;
+  border-radius: var(--aura-radius-full); border: 1px solid var(--aura-border-control); background: var(--aura-bg-surface);
+  color: var(--aura-fg-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.aura-stepper__marker .aura-icon { width: 16px; height: 16px; }
+.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-stepper__item.is-current .aura-stepper__marker { border: 2px solid var(--aura-fg-accent); color: var(--aura-fg-accent); }
+.aura-stepper__text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
+.aura-stepper__label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--aura-fg-secondary); }
+.aura-stepper__item.is-current .aura-stepper__label, .aura-stepper__item.is-done .aura-stepper__label { color: var(--aura-fg-primary); }
+.aura-stepper__item.is-current .aura-stepper__label { font-weight: 600; }
+.aura-stepper__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
+/* Connector: a line from each marker to the next (labels sit under the markers), or down the left when vertical. */
+.aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after {
+  content: ""; position: absolute; top: 14px; left: 36px; right: var(--aura-space-2); height: 1px; background: var(--aura-border-control); pointer-events: none;
+}
+.aura-stepper--horizontal .aura-stepper__step { flex-direction: column; gap: var(--aura-space-2); }
+.aura-stepper--horizontal .aura-stepper__text { padding-top: 0; }
+.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--vertical .aura-stepper__item { flex: none; padding-bottom: var(--aura-space-5); }
+.aura-stepper--vertical .aura-stepper__item:not(:last-child)::after {
+  content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--aura-border-control);
+}
+.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
+.aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
+.aura-stepper__compact-label { font-weight: 600; }
+
+/* ---------- SegmentedControl ---------- */
+.aura-segmented {
+  display: inline-flex; gap: 2px; padding: 2px; box-sizing: border-box; max-width: 100%;
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-full); background: var(--aura-bg-surface-hover);
+  font-family: var(--font-sans);
+}
+.aura-segmented:not(.is-full) { width: fit-content; justify-self: start; align-self: flex-start; }
+.aura-segmented.is-full { display: flex; width: 100%; }
+.aura-segmented__option {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 var(--aura-space-4); box-sizing: border-box;
+  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary);
+  font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
+  transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease), box-shadow var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+.aura-segmented__option.is-icon { padding: 0; width: 36px; }
+.aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
+.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: var(--aura-shadow-enterprise); }
+.aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
+.aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+.aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
+.aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
+.aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+
 /* A field inside a row Stack takes the remaining width (a search box beside its button). */
 .aura-stack > .aura-field { flex: 1 1 auto; min-width: 0; }
 
@@ -951,10 +1052,16 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 @media (pointer: coarse) {
   .aura-cal { --aura-cal-cell: 40px; }
   .aura-combo__option { min-height: 44px; }
+  .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: 40px; }
+  .aura-number__step { width: 44px; }
 }
 
 /* ---------- Small screens (< 640px) ---------- */
 @media (max-width: 639.98px) {
+  /* Horizontal stepper on phones: markers only (names kept for screen readers), the current step named underneath. */
+  .aura-stepper--horizontal .aura-stepper__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
+  .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
+  .aura-stepper--horizontal .aura-stepper__compact { display: block; }
   .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
   .aura-dialog { max-width: none !important; max-height: 92vh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }

package/components/index.d.ts

@@ -437,6 +437,18 @@ export interface ComboboxOption {
 	/** Leading icon in the list. */
 	icon?: IconName;
 }
+/** Combobox with `multiple`: pick any number; the picks show as removable chips in the field. */
+export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable"> {
+	multiple: true;
+	/** Selected option values, in the order they were picked (controlled). */
+	value?: string[];
+	defaultValue?: string[];
+	onChange?: (value: string[]) => void;
+	/** Clear-all button while anything is selected. Default true. */
+	clearable?: boolean;
+	/** Most picks allowed; further options are disabled. */
+	max?: number;
+}
 export interface ComboboxProps extends FieldProps {
 	options: Array<ComboboxOption | string>;
 	/** Selected option value (controlled). */
@@ -463,6 +475,77 @@ export interface ComboboxProps extends FieldProps {
 	filter?: (option: ComboboxOption, query: string) => boolean;
 	className?: string;
 }
+/** Number input: thousands separators, +/− buttons, arrow keys, min/max/step, prefix/suffix (฿, %). */
+export interface NumberFieldProps extends FieldProps {
+	/** The number (controlled). `null` = empty. */
+	value?: number | null;
+	defaultValue?: number | null;
+	/** Called with the parsed number (or null when emptied) as the person types, and with the clamped value on blur. */
+	onChange?: (value: number | null) => void;
+	min?: number;
+	max?: number;
+	/** Arrow keys and buttons move by this. Default 1. PageUp/PageDown move 10×. */
+	step?: number;
+	/** Decimal places shown and kept. Default: 0 when step is whole, else step's decimals. */
+	decimals?: number;
+	/** Text before the number, e.g. `฿`. */
+	prefix?: React$1.ReactNode;
+	/** Text after the number, e.g. `%` or `ชิ้น`. */
+	suffix?: React$1.ReactNode;
+	/** +/− buttons beside the number. Default true. */
+	stepper?: boolean;
+	id?: string;
+	name?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+	className?: string;
+	onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
+}
+/** One step of a Stepper. */
+export interface StepItem {
+	id: string;
+	label: React$1.ReactNode;
+	/** Short line under the label, e.g. what the step asks for. */
+	description?: React$1.ReactNode;
+}
+/** Progress through a multi-step flow (wizard, checkout, booking). */
+export interface StepperProps {
+	steps: StepItem[];
+	/** id of the step the person is on. Steps before it are completed. */
+	current: string;
+	/** Accessible name of the list. Default: none (give one when the page has several). */
+	label?: string;
+	/** Makes completed steps buttons that go back to them. Upcoming steps never are. */
+	onStepClick?: (id: string) => void;
+	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"). */
+	orientation?: "horizontal" | "vertical";
+	className?: string;
+}
+export interface SegmentedOption {
+	value: string;
+	label: string;
+	icon?: IconName;
+	/** Show only the icon; `label` becomes its accessible name and tooltip. */
+	iconOnly?: boolean;
+	disabled?: boolean;
+}
+/** A row of 2–5 mutually exclusive choices that apply at once (view, period, unit). A radio group underneath. */
+export interface SegmentedControlProps {
+	/** Accessible name of the group, e.g. "View". Required. */
+	label: string;
+	options: Array<SegmentedOption | string>;
+	value?: string;
+	defaultValue?: string;
+	onChange?: (value: string) => void;
+	/** `md` (default, 36px) or `sm` (28px) for toolbars. */
+	size?: "sm" | "md";
+	/** Stretch across the container, segments equal width. */
+	fullWidth?: boolean;
+	disabled?: boolean;
+	id?: string;
+	className?: string;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -832,10 +915,16 @@ export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps &
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
+/** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
+export interface ComboboxComponent {
+	(props: ComboboxMultipleProps & React$1.RefAttributes<HTMLInputElement>): React$1.ReactElement | null;
+	(props: ComboboxProps & React$1.RefAttributes<HTMLInputElement>): React$1.ReactElement | null;
+	displayName?: string;
+}
 /** The Thai-aware default filter: label, description and keywords contain the query. */
 declare function defaultFilter(option: ComboboxOption, query: string): boolean;
-/** Text field that filters a list as you type (ARIA 1.2 combobox). One value. */
-export declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxProps & React$1.RefAttributes<HTMLInputElement>>;
+/** Text field that filters a list as you type (ARIA 1.2 combobox). One value, or any number with `multiple`. */
+export declare const Combobox: ComboboxComponent;
 /** Options for formatDate: locale/calendar plus a preset or any Intl.DateTimeFormat options. */
 export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions;
@@ -953,6 +1042,10 @@ export interface AuraStrings {
 	fileWrongType: string;
 	tooManyFiles: (n: number | string) => string;
 	colorScheme: string;
+	increase: string;
+	decrease: string;
+	stepDone: string;
+	stepOf: (i: number, total: number) => string;
 	schemeLight: string;
 	schemeDark: string;
 	schemeSystem: string;
@@ -1031,6 +1124,12 @@ export declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStatePro
 export declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Number input with thousands separators, +/− buttons and arrow keys (ARIA spinbutton). */
+export declare const NumberField: React$1.ForwardRefExoticComponent<NumberFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+/** Progress through a multi-step flow. Completed steps can link back; the current one has aria-current="step". */
+export declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLElement>>;
+/** A row of mutually exclusive choices that apply at once. A radio group: one Tab stop, arrow keys move and select. */
+export declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	defaultFilter as comboboxFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.0",
+  "version": "4.9.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",