@godxjp/ui 31.3.0 → 31.5.0

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

@@ -22,6 +22,13 @@ export type CodeBlockProp = {
     size?: Extract<SizeProp, "xs" | "sm">;
     /** Lands on `data-language`; no highlighter is bundled — see `children` for colouring its output. */
     language?: string;
+    /**
+     * A copy button in the block's inline-end corner — antd `Typography`'s `copyable`, same name and
+     * semantics. `true` copies the block's text content; the object form sets `text`, `onCopy`,
+     * `tooltips` (`[copy, copied]`, or `false`), `icon` (`[copy, copied]`), `format` and `tabIndex`.
+     * The copy is announced politely to assistive technology.
+     */
+    copyable?: boolean | TypographyCopyConfigProp;
     className?: ClassNameProp;
 };
 /**
@@ -36,7 +43,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ExtraProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp, TypographyCopyConfigProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -1126,3 +1133,46 @@ export type MarqueeProp = Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" |
     label?: LabelProp;
     className?: ClassNameProp;
 };
+/**
+ * @see OrgChart — who a box stands for. `agent` draws the box with a DASHED border so an AI agent
+ * is told apart from a person at a glance, and adds a localized visually hidden "AI agent" to the
+ * node's accessible name, so the difference is never carried by the stroke alone (WCAG 1.4.1).
+ */
+export type OrgChartNodeVariantProp = "person" | "agent";
+/** @see OrgChart — one box of the chart. */
+export type OrgChartNodeProp = {
+    /** Identity of the node. Unique across the whole chart. */
+    key: string;
+    /** The person's or agent's name — the box's first line and the start of its accessible name. */
+    name: React.ReactNode;
+    /** Role / job title, the line under the name. */
+    title?: TitleProp;
+    /** The mark at the box's inline start — usually an `<Avatar>`. Decorative; the name carries identity. */
+    avatar?: React.ReactNode;
+    /** Free slot under the text — a Badge, a status, a count. */
+    extra?: ExtraProp;
+    /** `person` (default) or `agent` (dashed box). */
+    variant?: OrgChartNodeVariantProp;
+    children?: readonly OrgChartNodeProp[];
+};
+/**
+ * @see OrgChart — an organization chart: boxes joined by lines, top-down, with a horizontal scroll
+ * region of its own when the chart is wider than its container, and an indented `Tree` of the same
+ * data when the CONTAINER is narrow. It is the WAI-ARIA APG tree view in both forms.
+ */
+export type OrgChartProp = {
+    /** The hierarchy. Usually one root; several roots render side by side. */
+    data: readonly OrgChartNodeProp[];
+    /**
+     * Replace the box's content (avatar · name · title · extra) with your own. The box, its border,
+     * the connectors and the keyboard stay the library's. Used by the narrow `Tree` form too.
+     */
+    renderNode?: (node: OrgChartNodeProp) => React.ReactNode;
+    /**
+     * Accessible name of the chart (the `role="tree"`) — a plain string. A localized default
+     * ("Organization chart") applies when omitted.
+     */
+    label?: Extract<LabelProp, string>;
+    className?: ClassNameProp;
+    id?: IdProp;
+};

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

@@ -255,7 +255,11 @@ export type StepsSeparatorProp = "chevron" | "arrow";
 export type TabItemProp = {
     value: string;
     label: React.ReactNode;
-    content: React.ReactNode;
+    /**
+     * The panel body. Optional because a strip-only `Tabs` (`controls`, gh#1021) renders no panel
+     * at all — its content lives in the consumer's own region.
+     */
+    content?: React.ReactNode;
     disabled?: boolean;
     /** Leading glyph inside the trigger (Ant Design `Tab.icon`). */
     icon?: React.ReactNode;
@@ -514,6 +518,20 @@ export type TabsProp = {
     moreIcon?: React.ReactNode;
     /** Ant Design `onTabScroll`, on the logical axis. @see TabsOnScrollProp */
     onTabScroll?: TabsOnScrollProp;
+    /**
+     * STRIP-ONLY MODE (gh#1021) — the `id` of the element OUTSIDE this `Tabs` that the strip
+     * drives: a status strip (未対応 / 対応中 / 完了) over a MasterDetail, a saved-view ribbon over a
+     * grid. With it set the `items` API renders the tablist ONLY — no `tabpanel`, empty or
+     * otherwise — and the selected tab's `aria-controls` points at this id, so the WAI-ARIA APG
+     * tab → controlled-region relationship stays real. The consumer's region is never mounted by
+     * the strip, so switching tabs cannot remount it (an unsent reply draft survives).
+     *
+     * Give the region an accessible name (`aria-label`/`aria-labelledby`, e.g. a `<section>`). In
+     * the compound form it applies to every trigger with no `TabsContent` declared for its value; a
+     * declared panel always wins. A pure FILTER with no region to point at is a `Segmented`
+     * (`radiogroup`), not a strip-only `Tabs`.
+     */
+    controls?: IdProp;
     className?: ClassNameProp;
     listClassName?: ClassNameProp;
     contentClassName?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -2626,7 +2626,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TabsProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", {
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "ClassNameProp", "SizeProp", "ExtraProp", "IdProp", {
             readonly field: "bodied";
             readonly local: true;
             readonly reason: "A positive boolean for the card strip's PANEL BODY (gh#762) — an axis on Tabs rather than a `CardTabs` export, because the thing missing was a surface the existing card face already repaints its edge into, not a second component. No vocabulary type: no other component draws a body for its own panel.";
@@ -3929,6 +3929,45 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "DescriptionProp", "IconProp", "StatusProp", "ControlVariantProp", "DisabledProp", "OnClickProp", "IdProp", "ClassNameProp"];
     };
+    readonly OrgChartNodeVariantProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ControlVariantProp"];
+    };
+    readonly OrgChartNodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["TitleProp", "ExtraProp", "ControlVariantProp", {
+            readonly field: "key";
+            readonly local: true;
+            readonly reason: "The node's identity, unique across the chart.";
+        }, {
+            readonly field: "name";
+            readonly local: true;
+            readonly reason: "The person's or agent's display name (a ReactNode), not a form field `name` — NameProp is the submitted-field key.";
+        }, {
+            readonly field: "avatar";
+            readonly local: true;
+            readonly reason: "The mark at the box's inline start, usually an <Avatar>. Decorative.";
+        }, {
+            readonly field: "children";
+            readonly local: true;
+            readonly reason: "The node's own reports — the hierarchy itself, not a slot.";
+        }];
+    };
+    readonly OrgChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "The hierarchy of OrgChartNodeProp — the same shape feeds the boxes and the narrow Tree.";
+        }, {
+            readonly field: "renderNode";
+            readonly local: true;
+            readonly reason: "Escape hatch replacing a box's content; the box, connectors and keyboard stay the library's.";
+        }];
+    };
 };
 export type ComponentPropName = keyof typeof COMPONENT_PROP_REGISTRY;
 /** Forbidden duplicate concepts — use the canonical name on the left. */

package/dist/props/registry.js

@@ -3063,6 +3063,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ClassNameProp",
       "SizeProp",
       "ExtraProp",
+      "IdProp",
       {
         field: "bodied",
         local: true,
@@ -4763,6 +4764,55 @@ const COMPONENT_PROP_REGISTRY = {
       "IdProp",
       "ClassNameProp"
     ]
+  },
+  OrgChartNodeVariantProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ControlVariantProp"]
+  },
+  OrgChartNodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "ExtraProp",
+      "ControlVariantProp",
+      { field: "key", local: true, reason: "The node's identity, unique across the chart." },
+      {
+        field: "name",
+        local: true,
+        reason: "The person's or agent's display name (a ReactNode), not a form field `name` \u2014 NameProp is the submitted-field key."
+      },
+      {
+        field: "avatar",
+        local: true,
+        reason: "The mark at the box's inline start, usually an <Avatar>. Decorative."
+      },
+      {
+        field: "children",
+        local: true,
+        reason: "The node's own reports \u2014 the hierarchy itself, not a slot."
+      }
+    ]
+  },
+  OrgChartProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "data",
+        local: true,
+        reason: "The hierarchy of OrgChartNodeProp \u2014 the same shape feeds the boxes and the narrow Tree."
+      },
+      {
+        field: "renderNode",
+        local: true,
+        reason: "Escape hatch replacing a box's content; the box, connectors and keyboard stay the library's."
+      }
+    ]
   }
 };
 const PROP_ALIASES_FORBIDDEN = {

package/dist/styles/alert-layout.css

@@ -289,6 +289,18 @@
     background: var(--skeleton-background, hsl(var(--muted)));
   }
 
+  .ui-skeleton-line {
+    block-size: var(--skeleton-block-height);
+  }
+
+  .ui-skeleton-caption {
+    block-size: var(--skeleton-caption-height);
+  }
+
+  .ui-skeleton-title {
+    block-size: var(--skeleton-title-height);
+  }
+
   .ui-skeleton-table {
     overflow: hidden;
     border: var(--stroke-hairline) solid hsl(var(--border));
@@ -327,18 +339,6 @@
     border-radius: var(--skeleton-radius, var(--radius));
     padding: var(--skeleton-card-inset);
 
-    .ui-skeleton-line {
-      block-size: var(--skeleton-block-height);
-    }
-
-    .ui-skeleton-caption {
-      block-size: var(--skeleton-caption-height);
-    }
-
-    .ui-skeleton-title {
-      block-size: var(--skeleton-title-height);
-    }
-
     .ui-skeleton-detail-label {
       block-size: var(--skeleton-caption-height);
       inline-size: var(--skeleton-label-width);

package/dist/styles/control.css

@@ -1282,13 +1282,29 @@
     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)));
+
+    background: var(--segmented-count-background, hsl(var(--background)));
+    color: var(--segmented-count-color, hsl(var(--muted-foreground)));
     font-size: var(--segmented-count-font-size);
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
 
+  .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+    background: var(
+      --segmented-count-selected-background,
+      hsl(var(--primary) / var(--segmented-count-selected-background-alpha, 100%))
+    );
+    color: var(--segmented-count-selected-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+      outline: var(--segmented-count-forced-outline-width, var(--stroke-hairline)) solid
+        currentColor;
+    }
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/data-display-layout.css

@@ -1120,6 +1120,27 @@
     max-block-size: var(--code-block-max-height-lg);
   }
 
+  .ui-code-block-frame {
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  .ui-code-block[data-copyable] {
+    padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-xs));
+  }
+
+  .ui-code-block-copy {
+    position: absolute;
+    inset-block-start: var(--space-1);
+    inset-inline-end: var(--space-1);
+  }
+
+  @media (pointer: coarse) {
+    .ui-code-block[data-copyable] {
+      padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-default));
+    }
+  }
+
   .ui-code-block [data-code-token="comment"],
   .ui-prose pre [data-code-token="comment"] {
     color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
@@ -2430,3 +2451,155 @@
     flex-direction: column;
   }
 }
+
+@layer components {
+
+  .ui-org-chart {
+    min-inline-size: 0;
+    container: org-chart / inline-size;
+  }
+
+  .ui-org-chart-scroll {
+    overflow-x: auto;
+    padding: var(--org-chart-padding);
+  }
+
+  .ui-org-chart-tree,
+  .ui-org-chart-children {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-org-chart-tree {
+    inline-size: max-content;
+    min-inline-size: 100%;
+  }
+
+  .ui-org-chart-branch {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-inline: calc(var(--org-chart-sibling-gap) / 2);
+  }
+
+  .ui-org-chart-children {
+    position: relative;
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children::before,
+  .ui-org-chart-children > .ui-org-chart-branch::before,
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    position: absolute;
+    box-sizing: border-box;
+    inset-block-start: 0;
+    block-size: calc(var(--org-chart-level-gap) / 2);
+    border: 0 solid var(--org-chart-line-color, hsl(var(--border)));
+    content: "";
+  }
+
+  .ui-org-chart-children::before {
+    inset-inline-start: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2);
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch {
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::before {
+    inset-inline: 0 50%;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    inset-inline: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2) 0;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch:first-child::before,
+  .ui-org-chart-children > .ui-org-chart-branch:last-child::after {
+    border-block-start-width: 0;
+  }
+
+  .ui-org-chart-node {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    inline-size: var(--org-chart-node-inline-size);
+    align-items: flex-start;
+    gap: var(--org-chart-node-gap);
+    padding-block: var(--org-chart-node-padding-block);
+    padding-inline: var(--org-chart-node-padding-inline);
+    border: var(--org-chart-node-border-width, var(--stroke-hairline)) solid
+      var(--org-chart-node-border-color, hsl(var(--border)));
+    border-radius: var(--org-chart-node-radius, var(--radius));
+    background: var(--org-chart-node-background, hsl(var(--card)));
+    color: var(--org-chart-node-foreground, hsl(var(--card-foreground)));
+    font-size: var(--org-chart-node-font-size);
+    text-align: start;
+  }
+
+  .ui-org-chart-node[data-variant="agent"] {
+    border-style: var(--org-chart-agent-border-style);
+  }
+
+  .ui-org-chart-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .ui-org-chart-text {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-name {
+    font-weight: var(--font-weight-medium);
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-title {
+    color: var(--org-chart-node-title-color, hsl(var(--muted-foreground)));
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-extra {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-list {
+    display: none;
+  }
+
+  .ui-org-chart-list-row {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--org-chart-node-gap);
+  }
+
+  .ui-org-chart-list-row .ui-org-chart-extra {
+    display: inline-flex;
+  }
+
+  @container org-chart (width < 40rem) {
+    .ui-org-chart-scroll {
+      display: none;
+    }
+
+    .ui-org-chart-list {
+      display: block;
+    }
+  }
+}

package/dist/styles/data-entry-layout.css

@@ -361,6 +361,10 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-upload-trigger {
+    align-self: start;
+  }
+
   .ui-upload-grid {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/form-layout.css

@@ -60,6 +60,9 @@
     inline-size: 100%;
 
     align-self: start;
+
+    --form-field-control-band: initial;
+    --form-field-first-line: initial;
   }
 
   .ui-form-field[data-layout="inline"] {
@@ -84,6 +87,40 @@
 
     min-height: var(--control-height);
     align-content: center;
+
+    grid-template-rows: minmax(var(--form-field-control-band, auto), auto);
+    align-items: center;
+  }
+
+  .ui-form-field-control:has(> .ui-form-field-note:first-child) {
+    grid-template-rows: none;
+  }
+
+  .ui-form-field-control
+    > fieldset
+    > :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field) {
+    align-self: start;
+    margin-block-start: max(
+      0px,
+      calc(
+        (
+            var(--form-field-control-band, 0px) - var(--font-size-base) *
+              var(--control-label-line-height)
+          ) /
+          2
+      )
+    );
+  }
+
+  .ui-form-field:has(
+    > .ui-form-field-control
+      > fieldset
+      > :is(.ui-control-multiline, [data-slot="textarea-affix-wrapper"])
+  ) {
+    --form-field-first-line: calc(
+      var(--control-border-width, var(--stroke-hairline)) + var(--control-multiline-padding-block) +
+        0.5lh
+    );
   }
 
   .ui-form-field-control > * {
@@ -96,13 +133,14 @@
     ) {
     grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
     align-items: start;
+    --form-field-control-band: var(--control-height);
     column-gap: var(--form-label-gap);
     row-gap: var(--space-stack-xs);
   }
 
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
     > .ui-form-field-label {
-    min-block-size: var(--control-height);
+    min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
     flex-wrap: wrap;
   }
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -131,12 +169,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -165,12 +204,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -199,12 +239,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -233,12 +274,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.3.0",
+  "version": "31.5.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -349,6 +349,9 @@
     },
     "CodeBlock": {
       "layers": [
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "data-display-layout.css"
       ]
     },
@@ -673,6 +676,16 @@
         "control.css"
       ]
     },
+    "OrgChart": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "table-layout.css",
+        "alert-layout.css",
+        "data-display-layout.css",
+        "form-layout.css"
+      ]
+    },
     "OrgSwitcher": {
       "layers": [
         "shell-layout.css",

package/dist/styles/layout.css

@@ -918,7 +918,8 @@
 
     .ui-page-header-extra {
       width: auto;
-      flex-shrink: 1;
+      flex-shrink: 0;
+      max-inline-size: var(--page-header-extra-max-measure, 60%);
       min-inline-size: auto;
       justify-content: flex-end;
     }

package/dist/tokens/base.css

@@ -38,6 +38,7 @@
 @import "./components/text.css";
 @import "./components/tree.css";
 @import "./components/thought-chain.css";
+@import "./components/org-chart.css";
 @import "./components/welcome.css";
 @import "./components/actions.css";
 @import "./components/attachments.css";