@godxjp/ui 26.0.0 → 26.1.0

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": "26.0.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/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);

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": "26.0.0",
-  "godxUiMcp": "26.0.0",
+  "version": "26.1.0",
+  "godxUiMcp": "26.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",