@ai-matrx/design-system 0.61.10 → 0.61.12

package/dist/controls.css

@@ -140,6 +140,30 @@
     max-width: var(--matrx-control-size) !important;
     padding: 0 !important;
   }
+  /* COLLAPSE BY CONTAINER (Button collapse="container"): the box that decides
+     is the pane the control lives in, never the viewport — beside a chat panel
+     a 1024px screen holds a 540px list. Below 48rem of the nearest
+     `matrx-controls` container the button is its leading glyph alone, the
+     icon-only circle; the label is still in the DOM (its accessible name). */
+  .matrx-controls-container {
+    container: matrx-controls / inline-size;
+  }
+  @container matrx-controls (width < 48rem) {
+    .matrx-control-button[data-collapse="container"] {
+      width: var(--matrx-control-size) !important;
+      min-width: var(--matrx-control-size) !important;
+      max-width: var(--matrx-control-size) !important;
+      padding: 0 !important;
+      gap: 0 !important;
+      font-size: 0 !important;
+    }
+    .matrx-control-button[data-collapse="container"] :not(svg, svg *) {
+      font-size: 0 !important;
+    }
+    .matrx-control-button[data-collapse="container"][data-glyph="both"] > svg:last-child {
+      display: none !important;
+    }
+  }
   .matrx-control-button:active:not(:disabled):not([aria-disabled="true"]) {
     transform: scale(0.97);
   }

package/dist/controls.d.cts

@@ -30,6 +30,17 @@ declare const ControlRow: React.ForwardRefExoticComponent<ControlRowProps & Reac
  * box. Wrap a page (or a region) that mixes tap buttons and controls.
  */
 declare const ControlScope: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * THE CONTAINER a collapsing control measures (`Button collapse="container"`).
+ * A host declares it on the box whose WIDTH decides — a list pane, a panel,
+ * never the viewport: beside a chat panel a 1024px screen holds a 540px list.
+ * `className={CONTROLS_CONTAINER_CLASS}`, or add the name to the box's own
+ * `container-name` when it already names a container (`list matrx-controls`).
+ */
+declare const CONTROLS_CONTAINER_NAME = "matrx-controls";
+declare const CONTROLS_CONTAINER_CLASS = "matrx-controls-container";
+/** Below this container width a `collapse="container"` button is its icon alone (48rem). */
+declare const CONTROLS_COLLAPSE_BELOW_REM = 48;
 type ControlVariant = "primary" | "quiet" | "outline" | "danger";
 interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Tone, never size. Default `outline`. */
@@ -43,6 +54,13 @@ interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     iconEnd?: React.ReactNode;
     /** Render the one child element (a link) with the button's skin. */
     asChild?: boolean;
+    /**
+     * `"container"`: below 48rem of the nearest `matrx-controls` container
+     * (CONTROLS_CONTAINER_NAME) the button is its leading `icon` alone — a 28px
+     * circle; the label stays its accessible name and its tooltip. Needs `icon`;
+     * without one it never collapses. Outside such a container it never does.
+     */
+    collapse?: "container";
 }
 interface LabelledButton extends ButtonBase {
     children: React.ReactNode;
@@ -241,4 +259,4 @@ interface PromoBannerProps {
  */
 declare function PromoBanner({ icon, eyebrow, title, line, chips, action, tone, className, "aria-label": ariaLabel, }: PromoBannerProps): React.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };
+export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };

package/dist/controls.d.ts

@@ -30,6 +30,17 @@ declare const ControlRow: React.ForwardRefExoticComponent<ControlRowProps & Reac
  * box. Wrap a page (or a region) that mixes tap buttons and controls.
  */
 declare const ControlScope: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * THE CONTAINER a collapsing control measures (`Button collapse="container"`).
+ * A host declares it on the box whose WIDTH decides — a list pane, a panel,
+ * never the viewport: beside a chat panel a 1024px screen holds a 540px list.
+ * `className={CONTROLS_CONTAINER_CLASS}`, or add the name to the box's own
+ * `container-name` when it already names a container (`list matrx-controls`).
+ */
+declare const CONTROLS_CONTAINER_NAME = "matrx-controls";
+declare const CONTROLS_CONTAINER_CLASS = "matrx-controls-container";
+/** Below this container width a `collapse="container"` button is its icon alone (48rem). */
+declare const CONTROLS_COLLAPSE_BELOW_REM = 48;
 type ControlVariant = "primary" | "quiet" | "outline" | "danger";
 interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Tone, never size. Default `outline`. */
@@ -43,6 +54,13 @@ interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     iconEnd?: React.ReactNode;
     /** Render the one child element (a link) with the button's skin. */
     asChild?: boolean;
+    /**
+     * `"container"`: below 48rem of the nearest `matrx-controls` container
+     * (CONTROLS_CONTAINER_NAME) the button is its leading `icon` alone — a 28px
+     * circle; the label stays its accessible name and its tooltip. Needs `icon`;
+     * without one it never collapses. Outside such a container it never does.
+     */
+    collapse?: "container";
 }
 interface LabelledButton extends ButtonBase {
     children: React.ReactNode;
@@ -241,4 +259,4 @@ interface PromoBannerProps {
  */
 declare function PromoBanner({ icon, eyebrow, title, line, chips, action, tone, className, "aria-label": ariaLabel, }: PromoBannerProps): React.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };
+export { Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, DangerZone, DeleteButton, type DeleteButtonProps, EmptyState, type EmptyStateProps, Field, type FieldProps, PromoBanner, type PromoBannerProps, type PromoTone, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, SearchField, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SettingRow, type SettingRowProps, SplitButton, Switch, type SwitchProps, Tabs, type TabsProps, Textarea };

package/dist/controls.js

@@ -719,6 +719,9 @@ var ControlScope = React7.forwardRef(
   (props, ref) => /* @__PURE__ */ jsx7("div", { ref, "data-matrx-controls": "", ...props })
 );
 ControlScope.displayName = "ControlScope";
+var CONTROLS_CONTAINER_NAME = "matrx-controls";
+var CONTROLS_CONTAINER_CLASS = "matrx-controls-container";
+var CONTROLS_COLLAPSE_BELOW_REM = 48;
 function glyphSlot(icon, iconEnd, label) {
   if (!label && (icon || iconEnd)) return "only";
   if (icon && iconEnd) return "both";
@@ -727,12 +730,13 @@ function glyphSlot(icon, iconEnd, label) {
   return void 0;
 }
 var Button2 = React7.forwardRef(
-  ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, children, onClick, type, ...props }, ref) => {
+  ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, collapse, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? Slot2 : "button";
     const ariaDisabled = props["aria-disabled"];
     const disabledChild = asChild && Boolean(props.disabled);
     const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
     const label = asChild && React7.isValidElement(children) ? children.props.children : children;
+    const collapses = collapse === "container" && Boolean(icon) && Boolean(label);
     return /* @__PURE__ */ jsxs5(
       Component,
       {
@@ -742,7 +746,9 @@ var Button2 = React7.forwardRef(
         "data-variant": variant,
         "data-tone": tone && tone !== "neutral" ? tone : void 0,
         "data-glyph": glyphSlot(icon, iconEnd, label),
+        "data-collapse": collapses ? "container" : void 0,
         className: cn("matrx-control matrx-control-button matrx-glyph-trim", className),
+        title: collapses && typeof label === "string" && props.title === void 0 ? label : void 0,
         ...props,
         "aria-disabled": disabledChild ? true : ariaDisabled,
         tabIndex: disabledChild ? -1 : props.tabIndex,
@@ -1415,6 +1421,9 @@ function PromoBanner({
 export {
   Badge,
   Button2 as Button,
+  CONTROLS_COLLAPSE_BELOW_REM,
+  CONTROLS_CONTAINER_CLASS,
+  CONTROLS_CONTAINER_NAME,
   ConfirmDelete,
   ControlRow,
   ControlScope,