@godxjp/ui 19.5.0 → 20.0.0

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

@@ -0,0 +1,225 @@
+import { useState } from "react";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+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 {
+  Building2,
+  Hash,
+  LayoutDashboard,
+  MessagesSquare,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings,
+  Users,
+} from "lucide-react";
+
+/**
+ * AppShell · column arrangements.
+ *
+ * THE SHELL HAS TWO INDEPENDENT GEOMETRY AXES, and this page exists so they can be seen next to
+ * each other rather than rediscovered:
+ *
+ *   - `topbarSpan` — how far the BAR reaches. "content" starts it beside the sidebar (the rail
+ *     runs the full window height); "full" runs it edge to edge with the navigation beneath it.
+ *   - `navRail`    — how many navigation COLUMNS there are. Passing the slot adds a second,
+ *     narrower track before the sidebar: the workspace/organization switcher shape.
+ *
+ * They are axes, not a preset list. All four combinations are real product shapes, so there is no
+ * invalid pairing and nothing to reconcile — which is why the rail is a SLOT and not a fourth
+ * value bolted onto `topbarSpan`.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+
+const WORKSPACE_RAIL: SidebarSectionProp[] = [
+  {
+    items: [
+      { id: "home", label: "ホーム", icon: LayoutDashboard },
+      { id: "chat", label: "チャット", icon: MessagesSquare },
+      { id: "people", label: "メンバー", icon: Users },
+      { id: "admin", label: "管理", icon: Settings },
+    ],
+  },
+];
+
+const CHANNELS: SidebarSectionProp[] = [
+  {
+    label: "チャンネル",
+    items: [
+      { id: "general", label: "general", icon: Hash },
+      { id: "design", label: "design", icon: Hash },
+      { id: "incident", label: "incident-2026", icon: Hash },
+    ],
+  },
+  {
+    label: "ダイレクトメッセージ",
+    items: [
+      { id: "dm-sato", label: "佐藤 花子", icon: Users },
+      { id: "dm-tanaka", label: "田中 一郎", icon: Users },
+    ],
+  },
+];
+
+export default function Demo() {
+  const [withRail, setWithRail] = useState(true);
+  const [fullSpan, setFullSpan] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // The rail is ordinary navigation, so it is an ordinary <Sidebar> in icon-only mode — the shell
+  // owns the TRACK, never the content that goes in it.
+  const rail = (
+    <Sidebar aria-label="ワークスペース" activeId="chat" collapsed sections={WORKSPACE_RAIL} />
+  );
+
+  return (
+    <AppShell
+      topbarSpan={fullSpan ? "full" : "content"}
+      navRail={withRail ? rail : undefined}
+      navRailLabel="ワークスペース"
+      sidebarCollapsed={collapsed}
+      logo={
+        <Flex align="center" gap="sm">
+          <Building2 aria-hidden="true" />
+          <Text weight="medium">CoreChat</Text>
+        </Flex>
+      }
+      sidebar={
+        <Sidebar
+          aria-label="チャンネル"
+          activeId="general"
+          collapsed={collapsed}
+          sections={CHANNELS}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Button
+              size="sm"
+              variant="ghost"
+              aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
+              aria-expanded={!collapsed}
+              onClick={() => setCollapsed((c) => !c)}
+            >
+              {collapsed ? (
+                <PanelLeftOpen aria-hidden="true" />
+              ) : (
+                <PanelLeftClose aria-hidden="true" />
+              )}
+            </Button>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="列の構成"
+        subtitle={`${withRail ? "3 列" : "2 列"} · topbarSpan="${fullSpan ? "full" : "content"}"${
+          collapsed ? " · 折りたたみ" : ""
+        }`}
+        extra={
+          <Flex gap="sm">
+            <Button
+              size="sm"
+              variant={withRail ? "default" : "outline"}
+              aria-pressed={withRail}
+              onClick={() => setWithRail((v) => !v)}
+            >
+              navRail
+            </Button>
+            <Button
+              size="sm"
+              variant={fullSpan ? "default" : "outline"}
+              aria-pressed={fullSpan}
+              onClick={() => setFullSpan((v) => !v)}
+            >
+              topbarSpan=full
+            </Button>
+            <Button
+              size="sm"
+              variant={collapsed ? "default" : "outline"}
+              aria-pressed={collapsed}
+              onClick={() => setCollapsed((v) => !v)}
+            >
+              折りたたみ
+            </Button>
+          </Flex>
+        }
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>2 本の軸は独立している</CardTitle>
+              <CardDescription>
+                上の 3 つのボタンは互いに干渉しない。<code>navRail</code> は「ナビゲーションの列が
+                何本か」を、<code>topbarSpan</code> は「バーがどこまで伸びるか」を答える別々の軸で、
+                4 通りの組み合わせはすべて実在するプロダクトの形なので、禁止すべき組み合わせは
+                存在しない。だから rail は <code>topbarSpan</code> に足した 4 つ目の値ではなく
+                スロットとして実装されている ― プリセット名を 4 つ覚える API にはしない。
+              </CardDescription>
+              <CardDescription>
+                列幅はすべてトークン。<code>--app-shell-nav-rail-width</code>（4rem）が rail、
+                <code>--app-shell-sidebar-width</code>（16rem）がサイドバー、
+                <code>--app-shell-sidebar-collapsed-width</code>（4rem）が折りたたみ時の
+                サイドバー。3 つ目は 19.x では <code>--app-shell-rail-width</code> という名前で、
+                20.0.0 で追加された本物の rail と正面衝突した ― 同じ 4rem、同じ「rail」の綴り、
+                意味は別物。エイリアスを残さず改名したのは、どちらの読み方でも
+                もっともらしい幅に解決してしまい、静かに壊れるため。
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>折りたたみは 1 本の列だけを畳む</CardTitle>
+              <CardDescription>
+                「折りたたみ」を押すと、サイドバーの列だけが 16rem → 4rem になり、rail
+                は幅を保つ。Slack の挙動であり、折りたたみ中も rail
+                の行き先に手が届き続ける唯一の形。 rail まで一緒に畳むと、意味の分からない
+                アイコンの帯が 2 本並ぶだけになる。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm">
+                <Flex justify="between">
+                  <Text tone="muted">rail</Text>
+                  <Text mono>{withRail ? "4rem（固定）" : "—"}</Text>
+                </Flex>
+                <Flex justify="between">
+                  <Text tone="muted">sidebar</Text>
+                  <Text mono>{collapsed ? "4rem" : "16rem"}</Text>
+                </Flex>
+                <Flex justify="between">
+                  <Text tone="muted">コンテンツ左端</Text>
+                  <Text mono>
+                    {withRail ? (collapsed ? "128px" : "320px") : collapsed ? "64px" : "256px"}
+                  </Text>
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>900px 以下では両方の列が消える</CardTitle>
+              <CardDescription>
+                Frame の Dimensions を 900px 以下にすると、rail とサイドバーの両方が隠れ、
+                AppShell 所有のドロワーが navigation を引き受ける。 rail
+                を渡している場合、ドロワーの既定値は「rail のあとにサイドバー」になる ―
+                両方の列が隠れる幅で <code>sidebar</code> だけを既定にすると、rail
+                が運んでいるアプリ階層の行き先が 端末によって存在したりしなかったりする。
+                いくつかの画面幅にしか無いコントロールは、コントロールではなく罠。
+              </CardDescription>
+              <CardDescription>
+                グリッドのテンプレートから領域名が消えるだけでは要素は消えない ―
+                実測では、狭幅テンプレートを当てて <code>.app-sidebar</code> だけを隠した状態で
+                rail が暗黙の列に自動配置され、33×168px の断片としてページ本文の上に残った。
+                だから狭幅ブロックは rail を明示的に隠す。
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/aspect-ratio.tsx

@@ -4,7 +4,7 @@ import { Skeleton } from "@godxjp/ui/feedback";
 import { AspectRatio, Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * AspectRatio · Radix AspectRatio wrapper. Stabilises media/preview frames so
+ * AspectRatio · AspectRatio (thuộc tính CSS aspect-ratio, một node). Stabilises media/preview frames so
  * they do not reflow during load. ratio = width / height (number). Children fill
  * the constrained box · use object-fit: cover on images, width/height 100% on
  * iframes and SVG charts. Do not use for unconstrained text content. Composed

package/docs/navigation/app-setting-picker.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
+import { Flex, PageContainer, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
@@ -123,6 +123,31 @@ export default function Demo() {
             </CardContent>
           </Card>
 
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>バーのセル（appearance=&quot;bar&quot;）</CardTitle>
+              <CardDescription>
+                <code>icon</code> と同じ構造上の省略を保ったまま、箱だけがバーの
+                <strong>セル</strong>になる。バーの高さいっぱいに伸び、角は
+                <code>--topbar-item-radius</code>（<code>TopbarItem</code> と同じつまみ）で四角い。
+                ホバーの面はバーそのものを塗る。
+                <code>icon</code> をバーに置くと <code>--control-height</code>
+                の丸い錠剤が背の高い帯の中に浮き、バー本来のクロームとは別系統に読める。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={<TopbarItem>プロジェクト</TopbarItem>}
+                end={
+                  <>
+                    <AppSettingPicker kind="locale" appearance="bar" id="topbar-locale-bar" />
+                    <AppSettingPicker kind="theme" appearance="bar" id="topbar-theme-bar" />
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+
           <Card>
             <CardHeader>
               <CardTitle level={2}>無効化</CardTitle>

package/docs/navigation/app-setting-toggle.tsx

@@ -0,0 +1,111 @@
+import { AppProvider } from "@godxjp/ui/app";
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
+import { AppSettingToggle } from "@godxjp/ui/navigation";
+
+/**
+ * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value and
+ * shows that value as its glyph. The no-menu counterpart to AppSettingPicker: same binding
+ * contract, same option order, one tap instead of open-then-choose. `appearance="bar"` (the
+ * default) is a CELL of the bar — full bar height, the bar's own hover surface, square corners.
+ */
+export default function Demo() {
+  return (
+    <AppProvider defaultLocale="ja" defaultTimeFormat="24h" persist={false}>
+      <PageContainer
+        title="AppSettingToggle"
+        subtitle="押すたびに次の値へ送る 1 ボタン。ドロップダウンなし。"
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>トップバーのセル（既定）</CardTitle>
+              <CardDescription>
+                appearance=&quot;bar&quot; はバーの一部として全高で伸び、角は
+                --topbar-item-radius。--control-height の錠剤がバーの中に浮くことはない。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <Avatar className="rounded-md">
+                    <AvatarFallback>G</AvatarFallback>
+                  </Avatar>
+                }
+                end={
+                  <>
+                    <AppSettingToggle kind="theme" id="topbar-theme-toggle" />
+                    <AppSettingToggle kind="density" id="topbar-density-toggle" />
+                    <AppSettingToggle kind="fontSize" id="topbar-font-size-toggle" />
+                    <AppSettingToggle kind="timeFormat" id="topbar-time-format-toggle" />
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>バー以外（appearance=&quot;icon&quot;）</CardTitle>
+              <CardDescription>
+                設定行やカードヘッダーなど、バーではない場所。--control-height
+                の正方形ゴーストボタン。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="row" gap="md" align="center" wrap>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text weight="medium">テーマ</Text>
+                  <AppSettingToggle kind="theme" appearance="icon" id="icon-theme-toggle" />
+                </Flex>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text weight="medium">時刻形式</Text>
+                  <AppSettingToggle
+                    kind="timeFormat"
+                    appearance="icon"
+                    id="icon-time-format-toggle"
+                  />
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>制御モードと無効化</CardTitle>
+              <CardDescription>
+                value + onValueChange で外部状態に紐づけ、disabled で操作を止める。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="row" gap="md" align="center">
+                <AppSettingToggle
+                  kind="density"
+                  appearance="icon"
+                  value="comfortable"
+                  onValueChange={() => {}}
+                  id="controlled-density-toggle"
+                />
+                <AppSettingToggle
+                  kind="theme"
+                  appearance="icon"
+                  disabled
+                  id="disabled-theme-toggle"
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppProvider>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.5.0",
-  "godxUiMcp": "19.5.0",
+  "version": "20.0.0",
+  "godxUiMcp": "20.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -30,6 +30,9 @@
     "scripts/visual-audit-rules.mjs",
     "scripts/audit-hook.mjs",
     "scripts/init-agent-kit.mjs",
+    "scripts/init-guinea-pig.mjs",
+    "scripts/guinea-pig-skill.md",
+    "scripts/consumer-rule.md",
     "scripts/postinstall.mjs",
     "scripts/_agent-setup.mjs",
     "scripts/cli.mjs",
@@ -308,6 +311,7 @@
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "test": "vitest run",
+    "test:manual": "vitest run --config vitest.manual.config.ts",
     "test:visual:auth-login": "node scripts/auth-shell-login-visual.mjs",
     "test:visual:auth-registration": "node scripts/auth-shell-registration-visual.mjs",
     "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
@@ -335,8 +339,8 @@
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
-    "verify:ci": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
+    "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync",
     "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
@@ -365,9 +369,6 @@
     "check:rtl": "node scripts/check-rtl.mjs",
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
-    "gen:antd-tokens": "node scripts/gen-antd-tokens.mjs",
-    "check:antd-tokens": "node scripts/gen-antd-tokens.mjs --check",
-    "report:antd-tokens": "node scripts/gen-antd-tokens.mjs --report",
     "check:no-antd-runtime": "node scripts/check-no-antd-runtime.mjs",
     "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
@@ -384,6 +385,7 @@
     "dev": "node scripts/dev.mjs",
     "prepublishOnly": "pnpm run build",
     "check:audit-sync": "node scripts/check-audit-sync.mjs",
+    "check:gate-coverage": "node scripts/check-gate-coverage.mjs",
     "check:contrast": "node scripts/check-contrast.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
@@ -451,6 +453,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
+    "@react-aria/utils": "^3.34.1",
     "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -460,6 +463,7 @@
     "input-otp": "^1.5.0",
     "lucide-react": "^1.37.0",
     "qrcode.react": "4.2.0",
+    "react-aria-components": "^1.21.1",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.3",
     "sonner": "^2.0.8",
@@ -483,7 +487,6 @@
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^4.1.11",
-    "antd": "6.6.2",
     "axe-core": "^4.13.0",
     "eslint": "^10.9.1",
     "eslint-plugin-react": "^7.37.5",