@godxjp/ui 25.4.0 → 26.1.0

package/dist/app/theme-axes.js

@@ -60,14 +60,16 @@ function applyPrimaryColor(root, color, foreground) {
     const hue = delta === 0 ? 0 : 60 * (max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4);
     return `${hue} ${saturation * 100}% ${lightness * 100}%`;
   };
-  const away = luminance(text) > 0.5 ? 0 : 1;
-  const shade = (amount) => hsl(rgb.map((channel) => channel * (1 - amount) + away * amount));
+  const polarity = luminance(text) > 0.5 ? "darken" : "lighten";
   const palette = {
     "--primary": hsl(rgb),
     "--primary-foreground": hsl(text),
-    "--primary-hover": shade(0.12),
-    "--primary-active": shade(0.24),
-    "--primary-border": hsl(rgb),
+    "--primary-hover": "initial",
+    "--primary-active": "initial",
+    "--primary-border": "initial",
+    "--control-outline": "initial",
+    "--primary-hover-channels": `var(--primary-hover-${polarity}-channels)`,
+    "--primary-active-channels": `var(--primary-active-${polarity}-channels)`,
     "--ring": hsl(rgb)
   };
   const previous = Object.keys(palette).map((key) => [

package/dist/components/data-entry/select.d.ts

@@ -26,7 +26,10 @@ export type SelectCompoundProp = FieldA11yProps & {
     form?: string;
     children?: React.ReactNode;
 };
-export type SelectProp = SelectDataProp | SelectCompoundProp;
+export type SelectProp = SelectDataProp | (SelectCompoundProp & {
+    mode?: undefined;
+    labelInValue?: undefined;
+});
 /**
  * Select — one component for every single-select. Use the compound API for full control
  * (`<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>`), OR the

package/dist/components/layout/page-container.js

@@ -33,6 +33,12 @@ function useFooterReveal(enabled) {
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });
 }
+function footerPadStyle(footerPad) {
+  const style = padStyle(footerPad, void 0);
+  const end = style?.paddingInlineEnd ?? style?.padding;
+  if (end === void 0) return style;
+  return { ...style, paddingInlineEnd: `calc(${end} + var(--page-footer-content-slack))` };
+}
 function PageContainerRoot({
   title,
   subtitle,
@@ -150,7 +156,7 @@ function PageContainerRoot({
         ),
         toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", style: padStyle(toolbarPad, void 0), children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: padStyle(footerPad, void 0), children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: footerPadStyle(footerPad), children: footer })
       ]
     }
   );

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "25.4.0",
+  "version": "26.1.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/base.css

@@ -100,8 +100,12 @@
   --color-link: hsl(var(--text-link));
   --color-brand: hsl(var(--text-brand));
 
-  --color-primary-hover: hsl(var(--primary-hover));
-  --color-primary-active: hsl(var(--primary-active));
+  --color-primary-hover: hsl(
+    var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))
+  );
+  --color-primary-active: hsl(
+    var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
+  );
   --color-secondary-hover: hsl(var(--secondary-hover));
   --color-secondary-active: hsl(var(--secondary-active));
   --color-destructive-hover: hsl(var(--destructive-hover));

package/dist/styles/control.css

@@ -111,7 +111,7 @@
   }
 
   .ui-button--default:hover {
-    background: hsl(var(--primary-hover));
+    background: hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)));
   }
 
   .ui-button--destructive {

package/dist/styles/focus-ring.css

@@ -114,8 +114,29 @@
   :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
   :root[data-focus-outline="on"]
     .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    --tw-ring-shadow: var(--focus-field-shadow);
-    box-shadow: var(--focus-field-shadow);
+
+    --tw-ring-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
+    box-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
   }
 
   :root[data-focus-outline="on"]

package/dist/styles/layout.css

@@ -1,5 +1,11 @@
 
 
+@property --page-footer-content-slack {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 @layer components {
 
   .ui-separator {
@@ -616,6 +622,14 @@
     max-inline-size: var(--page-measure-medium);
   }
 
+  .ui-page-container[data-measure="narrow"] .ui-page-footer {
+    --page-footer-content-slack: max(0px, 100% - var(--page-measure-narrow));
+  }
+
+  .ui-page-container[data-measure="medium"] .ui-page-footer {
+    --page-footer-content-slack: max(0px, 100% - var(--page-measure-medium));
+  }
+
   .ui-page-container--flush .ui-page-toolbar,
   .ui-page-container--flush .ui-page-body {
     padding-inline-start: 0;
@@ -867,6 +881,7 @@
     align-items: stretch;
     gap: var(--space-inline-sm);
     padding-top: var(--space-stack-md);
+    padding-inline-end: calc(var(--space-page-active-x) + var(--page-footer-content-slack));
     border-top: var(--page-footer-divider, 1px solid hsl(var(--border)));
   }
 

package/dist/styles/shell-layout.css

@@ -291,6 +291,10 @@
     max-inline-size: var(--app-shell-page-max-width);
   }
 
+  .app-main :where(.ui-page-footer) {
+    --page-footer-content-slack: max(0px, 100% - var(--app-shell-page-max-width));
+  }
+
   .ui-auth-shell {
     --control-height: var(--auth-shell-control-height);
     --heading-h1: var(--auth-shell-heading-size);
@@ -1651,7 +1655,7 @@
         transparent
       )
     );
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 
@@ -1768,7 +1772,7 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 

package/dist/styles/text-layout.css

@@ -231,7 +231,7 @@
     border: 0;
     background: none;
     padding: 0;
-    color: var(--text-action-color);
+    color: var(--text-action-color, hsl(var(--primary)));
     font: inherit;
     cursor: pointer;
     vertical-align: baseline;
@@ -242,7 +242,10 @@
   }
   .ui-typography-action:hover,
   .ui-typography-action:focus-visible {
-    color: var(--text-action-color-hover);
+    color: var(
+      --text-action-color-hover,
+      hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))
+    );
   }
 
   .ui-typography-action[data-copied] {

package/dist/tokens/axes.css

@@ -63,8 +63,8 @@
 
 :root[data-focus-outline="on"] {
   --focus-outline: 1;
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+
+  --focus-field-shadow: initial;
 }
 
 :root[data-focus-outline="off"] {

package/dist/tokens/components/text.css

@@ -12,8 +12,9 @@
 
   --text-action-gap: var(--space-1);
 
-  --text-action-color: hsl(var(--primary));
-  --text-action-color-hover: hsl(var(--primary-hover));
+  --text-action-color: initial;
+
+  --text-action-color-hover: initial;
 
   --text-action-size: 1em;
 

package/dist/tokens/derived.css

@@ -2,17 +2,27 @@
 
 :root {
 
-  --primary-hover: 268.7 100% 41.6%;
+  --primary-hover: initial;
+  --primary-active: initial;
+  --primary-border: initial;
+  --control-outline: initial;
 
-  --primary-active: 268.7 100% 34.5%;
+  --primary-hover-darken-channels: h s calc(l - 8.4);
+  --primary-active-darken-channels: h s calc(l - 15.5);
+  --primary-hover-lighten-channels: h s calc(l + 5.8);
+  --primary-active-lighten-channels: h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1));
 
-  --primary-border: 268.7 68% 66%;
-  --destructive-hover: 359 50.6% 53.1%;
-  --destructive-active: 355 70.6% 33.3%;
+  --primary-hover-channels: var(--primary-hover-darken-channels);
+  --primary-active-channels: var(--primary-active-darken-channels);
+
+  --primary-border-channels: h calc(s * 0.68) calc(l + 16);
 
-  --control-outline: 268.7 100% 44.7%;
+  --control-outline-channels: h s calc(l - 5.3);
   --control-outline-alpha: 0.11;
 
+  --destructive-hover: 359 50.6% 53.1%;
+  --destructive-active: 355 70.6% 33.3%;
+
   --control-outline-error: 4.3 87.6% 34.7%;
   --control-outline-error-alpha: 0.09;
 
@@ -21,20 +31,36 @@
 
 .dark,
 :root[data-theme="dark"] {
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
 
-  --primary-hover: 268.7 100% 92.7%;
+  --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);
 
-  --primary-active: 268.7 100% 81.1%;
+  --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
+  --control-outline-alpha: 0.29;
 
-  --primary-border: 268.7 46.7% 23.5%;
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline: 268.7 99% 61.8%;
-  --control-outline-alpha: 0.29;
-
   --control-outline-error: 351.5 98.3% 53.5%;
   --control-outline-error-alpha: 0.06;
 
   --ring: var(--primary);
 }
+
+@supports not (color: hsl(from red h s l)) {
+  :root {
+    --primary-hover: 268.7 100% 41.6%;
+    --primary-active: 268.7 100% 34.5%;
+    --primary-border: 268.7 68% 66%;
+    --control-outline: 268.7 100% 44.7%;
+  }
+
+  .dark,
+  :root[data-theme="dark"] {
+    --primary-hover: 268.7 100% 92.7%;
+    --primary-active: 268.7 100% 81.1%;
+    --primary-border: 268.7 46.7% 23.5%;
+    --control-outline: 268.7 99% 61.8%;
+  }
+}

package/dist/tokens/foundation.css

@@ -125,11 +125,11 @@
   --focus-ring-opacity: 1;
 
   --focus-ring-glow-width: var(--control-outline-width);
-  --focus-ring-glow-color: var(--control-outline);
+
+  --focus-ring-glow-color: initial;
   --focus-ring-glow-alpha: var(--control-outline-alpha);
 
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+  --focus-field-shadow: initial;
 
   --focus-ring-offset: var(--focus-outline-offset);
 

package/docs/CUSTOMER-THEMING.md

@@ -230,7 +230,43 @@ Scope the overrides under a tenant attribute instead of `:root`. The colour util
 }
 ```
 
-Set `data-tenant` on the app root. Two CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
+Set `data-tenant` on the app root.
+
+#### What follows `--primary`, and what you still set (gh#678)
+
+The interaction states are **derived from the `--primary` in scope, at the element that paints them** — on `<html>` or on any nested `[data-tenant]` / `[data-program]` element, in both themes. You do not declare them:
+
+| Token | Follows `--primary`? | Default (evaluated at the painting element) |
+| --- | --- | --- |
+| `--primary-hover` | **yes** — Button hover, `bg-primary-hover`, Typography action hover | `hsl(from hsl(var(--primary)) var(--primary-hover-channels))` — light `h s calc(l - 8.4)`, dark `h s calc(l + 5.8)` |
+| `--primary-active` | **yes** — `bg-primary-active`, the open sidebar row's label | light `h s calc(l - 15.5)`; dark one step further up, reflected to one step down past 83.4% L |
+| `--control-outline` | **yes** — the focused field's halo (`--control-outline-alpha` stays per theme) | light `h s calc(l - 5.3)`, dark `h calc(s * 0.99) calc(l - 25.1)` |
+| `--primary-border` | **yes** (painted by no package surface; kept for the measurement in DESIGN-AUTHORITY) | light `h calc(s * 0.68) calc(l + 16)`, dark `h calc(s * 0.467) calc(l * 0.27043)` |
+| `--sidebar-item-active-foreground` | **yes** — defaults to the live `--primary-active` | — |
+| `--primary-foreground` | **no — set it** | the label on a filled primary; you choose it for your seed |
+| `--ring` | **only on the element that declares `--primary`** — set it in a nested scope | `var(--primary)` on `:root` / `.dark`. `--ring` is a public role read as `hsl(var(--ring))` in consumer CSS, so it cannot become a live default; a scope below `<html>` inherits the root's |
+| `--destructive-*`, `--control-outline-error` | no — not brand | literals |
+
+On the package seed these produce exactly the identity kit values the tier used to hard-code (`#6500d4` / `#5400b0` light, `#ecdaff` / `#cd9fff` dark). Engines without CSS relative colour (Chrome/Edge 111–118) get those literals and do **not** follow a consumer seed.
+
+**Rules that come with it:**
+
+- **Override a state only by setting its knob** (`--primary-hover: 221 90% 72%`). A set knob wins over the derived default, in its own scope and below.
+- **Read a state through its fallback, not bare.** The four knobs are `initial` so that the default can resolve at the painting element (docs/TOKENS.md, the freeze rule). `hsl(var(--primary-hover))` on its own therefore paints nothing — use the utility (`bg-primary-hover`) or `hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))`.
+- **Label polarity.** The theme's pair steps AWAY from that theme's default label: `darken` under a light label, `lighten` under a dark one, which keeps a label that clears 4.5:1 at rest at 4.5:1 in hover and pressed for every seed (measured, `derived-seed-sweep.test.ts`). If your seed needs the OTHER polarity of label (a pale yellow with dark text in the light theme), point the pair at it too — `applyPrimaryColor()` does this automatically from the label it picks:
+
+```css
+[data-tenant="sunny"] {
+  --primary: 48 100% 60%;
+  --primary-foreground: 48 9% 9%;
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
+}
+```
+
+- **The open sidebar row** is legible (≥ 4.5:1 on the 12% tint) for any seed that is itself legible as text on the page. A seed that is not (a pale seed on the light page, a very dark one on the dark page) needs `--sidebar-item-active-foreground` set.
+
+Two more CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
 
 - **Radius & shadow-tint don't cascade from a scoped anchor.** `--radius-{xs…2xl}`, `--card-radius`, `--control-radius` and the `--shadow-{xs…2xl}` ramp are computed at their declaring element, so a scoped `--radius` / `--shadow-color` override won't reach them. For a scoped re-theme, re-declare the derived tokens you need (e.g. `--card-radius: var(--radius)`, or set `--card-shadow` to a literal value).
 ````

package/docs/DESIGN-AUTHORITY.md

@@ -437,11 +437,15 @@ anywhere in `src/`, or leaves a trace in `dist/`. Deleting that gate re-opens th
 spacer. This library takes a different, two-form convention instead — widely used in enterprise
 component libraries, and surveyed across several before it was adopted here:
 
-- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus
-  `box-shadow: 0 0 0 var(--control-outline-width) var(--control-outline)`. A Select emits the same
+- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus a
+  `--control-outline-width` halo in the `--control-outline` colour. A Select emits the same
   declarations as an Input, which is why the two focus identically.
-- **Non-field** — an outline outside the box model:
-  `outline: var(--focus-outline-weight) solid var(--primary-border); outline-offset: 1px`.
+- **Non-field** — an outline outside the box model, `--focus-outline-weight` thick in the
+  `--primary-border` colour, `outline-offset: 1px`.
+
+Since 26.0.0 (gh#678) `--control-outline` and `--primary-border` are `initial` knobs whose default
+derives from `--primary` at the painting element, so a bare `var(--control-outline)` paints
+**nothing**. Read them through their fallback — see `docs/CUSTOMER-THEMING.md` §Multi-tenant.
 
 **Why this shape wins.** The library previously shipped an opaque brand ring drawn immediately
 outside an untouched grey border — two outlines of different colours claiming the same edge — and a

package/docs/layout/app-shell-states.tsx

@@ -3,6 +3,7 @@ import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layou
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { Input } from "@godxjp/ui/data-entry";
 import {
   Bell,
   Building2,
@@ -24,11 +25,13 @@ import {
  * single page:
  *
  *   ?topbarSpan=content|full   ?navRail=start|end|top|bottom   ?collapsed=1   ?sidebar=none
- *   ?responsive=docked   ?measure=narrow|medium   ?footer=1
+ *   ?responsive=docked   ?measure=narrow|medium   ?footer=1|row
  *
  * `measure` and `footer` feed `scripts/check-app-shell-page-width.mjs` (gh#672): the page is fluid
  * in the main column at every sidebar state, and a sticky footer band always spans `.app-main`,
  * even when a service caps content with `--app-shell-page-max-width` or the page sets `measure`.
+ * The footer's CONTENT sits in the same column as the body (gh#682), so the two shapes a footer
+ * takes are both rendered: `footer=1` an end-aligned action group, `footer=row` a full-row composer.
  *
  * With no query it is `topbarSpan="full"` without a rail — the state gh#474 found collapsing
  * `main` into a 170px implicit track below 900px, with the page actions laid out past the edge.
@@ -66,12 +69,12 @@ function readState() {
     responsiveNavigation:
       params.get("responsive") === "docked" ? ("docked" as const) : ("drawer" as const),
     measure: (["narrow", "medium"] as const).find((m) => m === params.get("measure")),
-    hasFooter: params.get("footer") === "1",
+    footer: (["1", "row"] as const).find((f) => f === params.get("footer")),
   };
 }
 
 export default function Demo() {
-  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation, measure, hasFooter }] =
+  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation, measure, footer }] =
     useState(readState);
   const [activeId, setActiveId] = useState("dashboard");
   const strip = navRail === "top" || navRail === "bottom";
@@ -121,16 +124,23 @@ export default function Demo() {
         subtitle="株式会社アクメ · 2026年5月"
         measure={measure}
         footer={
-          hasFooter ? (
+          footer === "1" ? (
             <Flex gap="sm" align="center" justify="end">
               <Button size="sm" variant="outline">
                 下書き保存
               </Button>
               <Button size="sm">コメントを送信する</Button>
             </Flex>
+          ) : footer === "row" ? (
+            <Flex grow gap="sm" align="center">
+              <Flex grow>
+                <Input aria-label="コメント" placeholder="コメントを入力" />
+              </Flex>
+              <Button size="sm">送信</Button>
+            </Flex>
           ) : undefined
         }
-        stickyFooter={hasFooter}
+        stickyFooter={footer !== undefined}
         extra={
           <Flex gap="sm" wrap>
             <Button size="sm" variant="outline">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "25.4.0",
-  "godxUiMcp": "25.4.0",
+  "version": "26.1.0",
+  "godxUiMcp": "26.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",