@godxjp/ui 23.4.1 → 23.4.3

package/README.md

@@ -110,11 +110,26 @@ The framework ships colors, the type scale, the wa-iro palette, and (opt-in) bun
 @import "@godxjp/ui/styles/core"; /* every component layer, no @font-face */
 ```
 
+Supplying Noto Sans JP yourself and want the cold-visit swap not to reflow the page? Take the
+third entry instead — the same layers plus the six metric-matched fallback faces, whose `src` is
+`local()`-only, so it costs **zero network bytes** over `core`:
+
+```css
+@import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 local()-only faces */
+```
+
+Then name the family directly after your own face:
+`--font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;`
+
+`core` stays at **zero** `@font-face` on purpose — `grep -c '@font-face'
+node_modules/@godxjp/ui/dist/styles/core.css` → `0` is the promise, so the fallbacks got their own
+entry rather than being folded in.
+
 > **Do not cherry-pick `*-layout.css` files.** Layers depend on each other (a
 > Select's rows, a menu's surface, a form's rhythm live in shared rules) and a
 > missing layer fails silently: menus render with no background, rows with no
-> height. `styles` and `styles/core` are the two supported entries; the runtime
-> `visual-audit` flags a page whose layers are incomplete (`css-layers-missing`).
+> height. `styles`, `styles/core` and `styles/core-with-fallbacks` are the three supported entries;
+> the runtime `visual-audit` flags a page whose layers are incomplete (`css-layers-missing`).
 
 ## Golden ratio (φ ≈ 1.618)
 

package/dist/components/data-display/badge.d.ts

@@ -73,8 +73,21 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      */
     tabular?: boolean;
     children?: React.ReactNode;
+    /**
+     * antd `Tag` `closable` + `onClose` — one callback when the user activates the × the chip draws.
+     * Named `onRemove` (not `onClose`) because this DS already uses `onClose` on overlays and
+     * `onValueChange` on fields; the chip remover is not a dismiss surface. Omitting it is antd
+     * `closable={false}`: no × is rendered.
+     *
+     * The × accessible name is built from the visible label (`children`, or the resolved `status`
+     * label) via `navigation.filterBar.removeFilter` — pass a string `children` (or plain text
+     * label) so the name quotes the chip, e.g. `getByRole('button', { name: /期限: 今週/ })`.
+     */
+    onRemove?: () => void;
+    /** Disables only the × when `onRemove` is set (FilterBar bar/chip disabled). Label stays visible. */
+    removeDisabled?: boolean;
 }
-export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ as: Element, className, variant, shape, tone, color, icon, status, tabular, style, children, onRemove, removeDisabled, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

package/dist/components/data-display/badge.js

@@ -9,6 +9,7 @@ import {
   Pause,
   Play,
   Trash2,
+  X,
   XCircle
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -100,6 +101,8 @@ function Badge({
   tabular,
   style,
   children,
+  onRemove,
+  removeDisabled,
   ...props
 }) {
   const { t } = useTranslation();
@@ -108,6 +111,7 @@ function Badge({
   const ResolvedIcon = icon === void 0 ? statusDef?.icon : icon;
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
   const tinted = color != null && color !== "";
+  const removeLabel = typeof children === "string" ? children : typeof resolvedChildren === "string" ? resolvedChildren : void 0;
   return /* @__PURE__ */ jsxs(
     Element,
     {
@@ -116,6 +120,7 @@ function Badge({
       "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",
       "data-tabular": tabular ? "" : void 0,
+      "data-removable": onRemove ? "" : void 0,
       className: cn(
         badgeVariants({
           variant: tinted ? "tinted" : variant ?? "default",
@@ -128,7 +133,22 @@ function Badge({
       ...props,
       children: [
         ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,
-        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: resolvedChildren }) : null
+        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "badge-label", children: resolvedChildren }) : null,
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "badge-remove",
+            className: "ui-control-inline-affix-action ui-badge-remove",
+            "aria-label": removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete"),
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove();
+            },
+            disabled: removeDisabled,
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+          }
+        ) : null
       ]
     }
   );

package/dist/components/data-display/data-table.d.ts

@@ -4,10 +4,12 @@ import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangePr
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
- * opts the column into the sort cycle; `align` / `width` / `pin` / `hiddenOnMobile` / `priority`
- * tune layout; `enableHiding` (default true) lists the column in DataTable.ViewOptions.
+ * opts the column into the sort cycle; `align` / `width` / `pin` / `hideBelow` / `hiddenOnMobile` /
+ * `priority` tune layout; `enableHiding` (default true) lists the column in DataTable.ViewOptions.
  */
 export type ColumnDef<T> = ColumnDefProp<T>;
+/** Same resolution DataTable stamps as `data-hide-below` — `hiddenOnMobile: true` → `md`. */
+export declare function resolveColumnHideBelow(col: Pick<ColumnDef<unknown>, "hideBelow" | "hiddenOnMobile">): BreakpointProp | undefined;
 interface DataTableProps<T> {
     data: T[];
     columns: ColumnDef<T>[];

package/dist/components/data-display/data-table.js

@@ -73,6 +73,15 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles.js";
+function resolveColumnHideBelow(col) {
+  if (col.hideBelow) return col.hideBelow;
+  if (col.hiddenOnMobile) return "md";
+  return void 0;
+}
+function columnHideBelowProps(col) {
+  const step = resolveColumnHideBelow(col);
+  return step ? { "data-hide-below": step } : {};
+}
 function dataTableFeatures() {
   return tableFeatures({
     rowSortingFeature,
@@ -861,7 +870,6 @@ DataTable.Content = function DataTableContent() {
       columnWidth(col.width).className,
       col.align === "right" && "text-end",
       col.align === "center" && "text-center",
-      col.hiddenOnMobile && "hidden md:table-cell",
       col.ellipsis && "ui-data-table-ellipsis",
       edge === "end" && "ui-data-table-pin-end",
       edge === "start" && "ui-data-table-pin-start"
@@ -991,6 +999,7 @@ DataTable.Content = function DataTableContent() {
                             "data-align": col.headerAlign ?? col.align,
                             "aria-sort": isSortable ? activeDirection ? activeDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
                             ...fixedCellProps(col.key, fixedEdge(col)),
+                            ...columnHideBelowProps(col),
                             style: columnCellStyle(col),
                             className: cn(
                               columnCellClass(col),
@@ -1029,6 +1038,7 @@ DataTable.Content = function DataTableContent() {
                       {
                         priority: col.priority,
                         "data-align": col.align,
+                        ...columnHideBelowProps(col),
                         style: columnCellStyle(col),
                         className: cn(cellPadding, columnCellClass(col)),
                         children: /* @__PURE__ */ jsx(
@@ -1252,6 +1262,7 @@ DataTable.Content = function DataTableContent() {
                                 "data-align": col.align,
                                 title,
                                 ...fixedCellProps(col.key, fixedEdge(col)),
+                                ...columnHideBelowProps(col),
                                 style: columnCellStyle(col),
                                 className: cn(cellPadding, columnCellClass(col)),
                                 children: rendered
@@ -1410,5 +1421,6 @@ DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
 DataTable.RowActions.displayName = "DataTable.RowActions";
 export {
   DataTable,
-  flexRender
+  flexRender,
+  resolveColumnHideBelow
 };

package/dist/components/data-entry/date-picker.js

@@ -441,14 +441,8 @@ function DatePicker(props) {
         event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
         clear();
       },
-      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
-      children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(
-        X,
-        {
-          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
-          "aria-hidden": "true"
-        }
-      )
+      className: "ui-control-inline-affix-action",
+      children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
     }
   ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
     "button",
@@ -457,14 +451,8 @@ function DatePicker(props) {
       disabled: allDisabled,
       tabIndex: -1,
       "aria-label": triggerLabel ?? (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
-      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
-      children: /* @__PURE__ */ jsx(
-        CalendarIcon,
-        {
-          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
-          "aria-hidden": "true"
-        }
-      )
+      className: "ui-control-inline-affix-action",
+      children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
     }
   ) });
   const panel = /* @__PURE__ */ jsxs(

package/dist/components/layout/draggable-panel.d.ts

@@ -1,18 +1,19 @@
 import * as React from "react";
 import type { DragAxisProp, DraggablePanelPositionProp } from "../../props/components/layout.prop.js";
-export type { DraggablePanelProp, DraggablePanelProp as DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "../../props/components/layout.prop.js";
+export type { DraggablePanelProp, DraggablePanelProp as DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelLabels, DragAxisProp, DragBoundsProp, } from "../../props/components/layout.prop.js";
 export declare const DraggablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children" | "onDrag" | "title"> & {
     title: import("../../props/index.js").TitleProp;
     children?: import("../../props/index.js").ChildrenProp;
     extra?: import("../../props/index.js").ExtraProp;
     placement?: import("./draggable-panel.js").DraggablePanelPlacementProp;
-    width?: Extract<import("../../props/index.js").SizeProp, "sm" | "md" | "lg">;
+    width?: Extract<import("../../props/index.js").SizeProp, "sm" | "md" | "lg"> | "xl";
     axis?: DragAxisProp;
     bounds?: import("./draggable-panel.js").DragBoundsProp;
     position?: DraggablePanelPositionProp;
     defaultPosition?: DraggablePanelPositionProp;
     onPositionChange?: (position: DraggablePanelPositionProp) => void;
     onClose?: () => void;
+    labels?: import("./draggable-panel.js").DraggablePanelLabels;
     disabled?: import("../../props/index.js").DisabledProp;
     className?: import("../../props/index.js").ClassNameProp;
 } & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/draggable-panel.js

@@ -51,6 +51,7 @@ const DraggablePanel = React.forwardRef(
     defaultPosition,
     onPositionChange,
     onClose,
+    labels,
     disabled = false,
     className,
     ...props
@@ -73,6 +74,14 @@ const DraggablePanel = React.forwardRef(
       [bounds, onPositionChange, position]
     );
     React.useEffect(() => () => stopDrag.current?.(), []);
+    React.useEffect(() => {
+      if (bounds !== "viewport" || typeof window === "undefined") return;
+      const onResize = () => {
+        commit(currentRef.current);
+      };
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, [bounds, commit]);
     const setPanel = React.useCallback(
       (node) => {
         panelRef.current = node;
@@ -156,7 +165,7 @@ const DraggablePanel = React.forwardRef(
                 type: "button",
                 "data-slot": "draggable-panel-handle",
                 className: "ui-draggable-panel-handle ui-focus-ring",
-                "aria-label": t("layout.draggablePanel.moveLabel"),
+                "aria-label": labels?.move ?? t("layout.draggablePanel.moveLabel"),
                 "aria-disabled": movable ? void 0 : "true",
                 onPointerDown: handlePointerDown,
                 onKeyDown: handleKeyDown,
@@ -171,7 +180,7 @@ const DraggablePanel = React.forwardRef(
                 type: "button",
                 "data-slot": "draggable-panel-close",
                 className: "ui-draggable-panel-close ui-focus-ring",
-                "aria-label": t("feedback.alert.dismiss"),
+                "aria-label": labels?.close ?? t("feedback.alert.dismiss"),
                 onClick: onClose,
                 children: /* @__PURE__ */ jsx(X, { className: "ui-draggable-panel-close-icon", "aria-hidden": "true" })
               }

package/dist/components/layout/index.d.ts

@@ -50,7 +50,7 @@ export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { DraggablePanel } from "./draggable-panel.js";
-export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
+export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelLabels, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
 export { Separator } from "./separator.js";
 export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";

package/dist/components/navigation/filter-bar.js

@@ -131,22 +131,17 @@ function Toolbar({
             role: "group",
             "aria-label": t("navigation.filterBar.appliedFilters"),
             className: "ui-filter-bar-chips",
-            children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
-              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: chip.label }),
-              onChipRemove && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  disabled: disabled || chip.disabled,
-                  "aria-label": t("navigation.filterBar.removeFilter", {
-                    label: typeof chip.label === "string" ? chip.label : chip.value
-                  }),
-                  onClick: () => onChipRemove(chip.value),
-                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                }
-              )
-            ] }, chip.value))
+            children: chips.map((chip) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "ui-filter-bar-chip",
+                onRemove: onChipRemove ? () => onChipRemove(chip.value) : void 0,
+                removeDisabled: Boolean(disabled || chip.disabled),
+                children: typeof chip.label === "string" ? chip.label : chip.value
+              },
+              chip.value
+            ))
           }
         ),
         showMeta && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-meta", children: error != null ? /* @__PURE__ */ jsx("p", { role: "alert", className: "ui-filter-bar-error", children: error }) : /* @__PURE__ */ jsx("p", { role: "status", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }) })

package/dist/components/ui/segmented.d.ts

@@ -1,6 +1,23 @@
 import * as React from "react";
+/** Counter pill fields on {@link SegmentedOption} — same vocabulary as `Button` / `Toggle`. */
+type SegmentedCountFields = {
+    /**
+     * Optional count rendered as a borderless pill after the label — do not nest `Badge` in `label`
+     * for this (gh#602): `Badge` `secondary` is `--muted`, which matches the Segmented track.
+     */
+    count?: number | string;
+    /** Cap for numeric `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
+    overflowCount?: number;
+    /** Render the pill when numeric `count` is 0. Default `true`. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count means, folded into the accessible name
+     * (`全件, 54 件` when supplied).
+     */
+    countLabel?: string;
+};
 /** One choice in a {@link Segmented}. */
-export type SegmentedOption = {
+export type SegmentedOption = SegmentedCountFields & {
     /** Wire value — what `onValueChange` reports and what a form submits. */
     value: string;
     /** Visible label. It is also the item's accessible name, so it is required. */
@@ -69,3 +86,4 @@ export type SegmentedProps = SegmentedProp;
  * row each of them means.
  */
 export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ui/segmented.js

@@ -1,9 +1,32 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
 import { withOwnHitTarget } from "../data-entry/choice-hit-target.js";
 import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { numberFormat } from "../../lib/intl-cache.js";
+function SegmentedCountPill({
+  count,
+  overflowCount = 99,
+  showZero = true,
+  countLabel
+}) {
+  const { locale } = useTranslation();
+  const visible = count != null && count !== "" && (typeof count !== "number" || count !== 0 || showZero);
+  const formatted = React.useMemo(() => {
+    if (count == null || count === "") return "";
+    if (typeof count === "string") return count;
+    const format = numberFormat(locale);
+    return count > overflowCount ? `${format.format(overflowCount)}+` : format.format(count);
+  }, [count, locale, overflowCount]);
+  if (!visible) return null;
+  const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "data-slot": "segmented-count", className: "ui-segmented-count", "aria-hidden": "true", children: formatted }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
+  ] });
+}
 const Segmented = React.forwardRef(function Segmented2({
   options,
   value,
@@ -59,7 +82,16 @@ const Segmented = React.forwardRef(function Segmented2({
                 children: option.icon
               }
             ),
-            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label })
+            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label }),
+            /* @__PURE__ */ jsx(
+              SegmentedCountPill,
+              {
+                count: option.count,
+                overflowCount: option.overflowCount,
+                showZero: option.showZero,
+                countLabel: option.countLabel
+              }
+            )
           ]
         },
         option.value

package/dist/props/components/data-display.prop.d.ts

@@ -289,6 +289,11 @@ export type BadgeProp = {
     tabular?: boolean;
     className?: ClassNameProp;
     children?: ChildrenProp;
+    /**
+     * antd `Tag` `closable` + `onClose` — omit for a plain chip; set to draw a × that calls this once.
+     * Port name `onRemove` (not `onClose`) — see {@link Badge} JSDoc and `docs/DESIGN-AUTHORITY.md`.
+     */
+    onRemove?: () => void;
 };
 /** @see CredentialReveal */
 /**

package/dist/props/components/index.d.ts

@@ -1,4 +1,4 @@
-export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";

package/dist/props/components/layout.prop.d.ts

@@ -1442,6 +1442,11 @@ export type DraggablePanelPositionProp = {
     x: number;
     y: number;
 };
+/** Optional overrides for title-bar control labels when `AppProvider` is not in scope (gh#606). */
+export type DraggablePanelLabels = {
+    close?: string;
+    move?: string;
+};
 /**
  * @see DraggablePanel — a floating surface the person using it can MOVE, so a docked assistant
  * stops covering the thing they are asking about.
@@ -1458,8 +1463,8 @@ export type DraggablePanelProp = Omit<React.HTMLAttributes<HTMLElement>, "title"
     extra?: ExtraProp;
     /** Resting corner before any movement. Default `bottom-end`. */
     placement?: DraggablePanelPlacementProp;
-    /** Panel width, from the token scale. Default `md`. */
-    width?: Extract<SizeProp, "sm" | "md" | "lg">;
+    /** Panel width, from the token scale (`sm`–`xl`). Default `md`. */
+    width?: Extract<SizeProp, "sm" | "md" | "lg"> | "xl";
     /** react-draggable `axis`. Default `both`. */
     axis?: DragAxisProp;
     /** react-draggable `bounds`. Default `viewport`. */
@@ -1476,6 +1481,12 @@ export type DraggablePanelProp = Omit<React.HTMLAttributes<HTMLElement>, "title"
     onPositionChange?: (position: DraggablePanelPositionProp) => void;
     /** Presence renders the close control in the title bar (antd Modal's `onCancel`). */
     onClose?: () => void;
+    /**
+     * Localized strings for the close and move controls. Each key wins over `t()` when set; omit to
+     * keep the framework default. For script-injected embeds that cannot mount `AppProvider` without
+     * restyling the host page — a scoped provider subtree is the long-term fix (gh#606).
+     */
+    labels?: DraggablePanelLabels;
     /** react-draggable `disabled` — the panel stays, the handle stops moving it. */
     disabled?: DisabledProp;
     className?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -627,7 +627,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly ColumnDefProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
-        readonly description: 'DataTable column definition — key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"';
+        readonly description: 'DataTable column definition — key/header/render/sortable/align/width/pin/hideBelow/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"';
     };
     readonly SelectedIdsProp: {
         readonly file: "vocabulary/data.prop.ts";
@@ -2536,6 +2536,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onClose";
             readonly local: true;
             readonly reason: "Presence renders the title-bar close control — antd Modal's onCancel.";
+        }, {
+            readonly field: "labels";
+            readonly local: true;
+            readonly reason: "Optional close/move strings for embeds that cannot mount AppProvider without restyling the host page (gh#606).";
         }];
     };
     readonly ThumbnailSizeProp: {

package/dist/props/registry.js

@@ -628,7 +628,7 @@ const VOCABULARY_REGISTRY = {
   ColumnDefProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: 'DataTable column definition \u2014 key/header/render/sortable/align/width/pin/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"'
+    description: 'DataTable column definition \u2014 key/header/render/sortable/align/width/pin/hideBelow/hiddenOnMobile/enableHiding/ariaLabel plus `priority` (TableColumnPriorityProp), read by DataTable preset="action-collection"'
   },
   SelectedIdsProp: {
     file: "vocabulary/data.prop.ts",
@@ -2953,6 +2953,11 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onClose",
         local: true,
         reason: "Presence renders the title-bar close control \u2014 antd Modal's onCancel."
+      },
+      {
+        field: "labels",
+        local: true,
+        reason: "Optional close/move strings for embeds that cannot mount AppProvider without restyling the host page (gh#606)."
       }
     ]
   },

package/dist/props/vocabulary/data.prop.d.ts

@@ -38,6 +38,17 @@ export type ColumnDefProp<T> = {
      * usual case.
      */
     headerAlign?: ColumnAlignProp;
+    /**
+     * Hide this column below a canonical viewport step — the SAME contract as `Flex hideBelow`
+     * (sm 40rem · md 48rem · lg 64rem · xl 80rem). Stamped on both `<th>` and `<td>` as
+     * `data-hide-below`; a media query cannot read a `var()`, so the step values are the tokenized
+     * scale written out in the stylesheet. Wins over `hiddenOnMobile` when both are set.
+     */
+    hideBelow?: BreakpointProp;
+    /**
+     * @deprecated Prefer `hideBelow: 'md'`. When `hideBelow` is omitted, `true` is an alias for
+     * `hideBelow: 'md'`.
+     */
     hiddenOnMobile?: boolean;
     /**
      * List this column in DataTable.ViewOptions (the column show/hide "set view"

package/dist/styles/badge-layout.css

@@ -50,4 +50,29 @@
     height: var(--badge-icon-size);
     flex-shrink: 0;
   }
+
+  [data-slot="badge"][data-removable] {
+    padding-inline-end: var(--badge-space-x-removable);
+  }
+
+  [data-slot="badge-remove"] {
+    flex-shrink: 0;
+    margin-inline-end: var(--badge-remove-offset-inline-end);
+    color: inherit;
+    opacity: var(--badge-remove-rest-alpha);
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  [data-slot="badge-remove"]:hover,
+  [data-slot="badge-remove"]:focus-visible {
+    opacity: var(--badge-remove-hover-alpha);
+  }
+
+  [data-slot="badge-remove"] svg {
+    width: var(--badge-remove-icon-size);
+    height: var(--badge-remove-icon-size);
+  }
 }

package/dist/styles/control.css

@@ -1136,6 +1136,22 @@
     vertical-align: middle;
   }
 
+  .ui-segmented-count {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--segmented-count-min-width);
+    margin-inline-start: var(--segmented-count-gap);
+    border-radius: var(--segmented-count-radius);
+    padding-inline: var(--segmented-count-space-inline);
+    background: var(--segmented-count-background, hsl(var(--primary)));
+    color: var(--segmented-count-color, hsl(var(--primary-foreground)));
+    font-size: var(--segmented-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;
@@ -1339,6 +1355,27 @@
     block-size: 0.75rem;
   }
 
+  .ui-number-input-step {
+    position: relative;
+  }
+
+  .ui-number-input-step::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    inline-size: var(--touch-target-min);
+    block-size: var(--touch-target-min);
+  }
+
+  .ui-number-input-step-up::after {
+    inset-block-end: 0;
+  }
+
+  .ui-number-input-step-down::after {
+    inset-block-start: 0;
+  }
+
   @media (pointer: coarse) {
     .ui-number-input:not([data-size="xs"]):not([data-size="sm"]) {
       --control-height: var(--number-input-touch-height);

package/dist/styles/core-with-fallbacks.css

@@ -0,0 +1,3 @@
+
+@import "./core.css";
+@import "./font-fallbacks.css";

package/dist/styles/focus-ring.css

@@ -18,6 +18,7 @@
     .ui-control-inline-affix-action,
     .ui-search-input-clear,
     .ui-tag-input-remove,
+    .ui-badge-remove,
     .ui-color-picker-input,
     .ui-upload-tile-add,
     .ui-upload-picture-empty,
@@ -78,6 +79,7 @@
       .ui-control-inline-affix-action,
       .ui-search-input-clear,
       .ui-tag-input-remove,
+    .ui-badge-remove,
       .ui-color-picker-input,
       .ui-upload-tile-add,
       .ui-upload-picture-empty,