@godxjp/ui 18.1.0 → 18.2.0

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

@@ -484,4 +484,54 @@
     gap: var(--space-2);
     margin-inline-start: auto;
   }
+
+  /* CredentialReveal — one-time secret surface: caution banner, masked/revealed value row with
+   * copy/reveal/download actions, and an optional acknowledge footer. Density-aware via the
+   * --control-height tier; colours/spacing read semantic role tokens only. */
+  .ui-credential-reveal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-sm);
+  }
+  .ui-credential-reveal-warning {
+    margin-block-end: var(--space-1);
+  }
+  .ui-credential-reveal-surface {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .ui-credential-reveal-label {
+    display: inline-block;
+  }
+  .ui-credential-reveal-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-sm);
+    min-height: var(--control-height);
+    padding-block: var(--space-1);
+    padding-inline: var(--space-3);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--control-radius);
+    background: hsl(var(--muted) / 0.4);
+  }
+  .ui-credential-reveal-secret {
+    flex: 1 1 auto;
+    min-width: 0;
+    letter-spacing: 0.02em;
+    word-break: break-all;
+  }
+  .ui-credential-reveal-secret[data-state="masked"] {
+    color: hsl(var(--muted-foreground));
+  }
+  .ui-credential-reveal-actions {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--space-inline-xs);
+  }
+  .ui-credential-reveal-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
 }

package/dist/styles/layout.css

@@ -717,6 +717,16 @@
     }
   }
 
+  /* Toolbar `sticky` (#197): pin the filter strip while the list scrolls beneath it.
+   * `inset-block-start` (not `top`) keeps it RTL/vertical-writing-mode safe; the fill only
+   * paints in this pinned variant so a non-sticky toolbar stays transparent chrome. */
+  .ui-toolbar-sticky {
+    position: sticky;
+    inset-block-start: var(--filter-bar-sticky-offset);
+    z-index: 20;
+    background: hsl(var(--filter-bar-sticky-background, var(--background)));
+  }
+
   .ui-toolbar-clear {
     width: 100%;
   }

package/dist/styles/shell-layout.css

@@ -235,7 +235,7 @@
     font-size: var(--font-size-base);
   }
 
-  @media (max-width: 1023px) {
+  @media (width < 64rem) {
     .app-root,
     .app-root[data-collapsed="true"] {
       grid-template-areas:
@@ -602,26 +602,34 @@
     color: hsl(var(--muted-foreground));
   }
 
-  [data-collapsed="true"] .sb-user-meta,
-  [data-collapsed="true"] .sb-user-menu {
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-user-meta,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-user-menu {
     display: none;
   }
 
-  [data-collapsed="true"] .sb-product-name,
-  [data-collapsed="true"] .sb-product-tenant,
-  [data-collapsed="true"] .sb-product-caret,
-  [data-collapsed="true"] .sb-section-label,
-  [data-collapsed="true"] .sb-label,
-  [data-collapsed="true"] .sb-badge {
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-product-name,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-product-tenant,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-product-caret,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-section-label,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-label,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-badge {
     display: none;
   }
 
-  [data-collapsed="true"] .sb-product {
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-product {
     justify-content: center;
     padding: 0;
   }
 
-  [data-collapsed="true"] .sb-nav-item {
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-nav-item {
     width: var(--control-height);
     justify-content: center;
     margin-inline: auto;

package/dist/tokens/components/navigation.css

@@ -20,4 +20,11 @@
    * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */
   --menubar-item-hover-background: initial;
   --menubar-item-hover-foreground: initial;
+
+  /* Sticky offset for the pinned filter strip (Toolbar `sticky`, #197). Default 0 (chrome,
+   * rule #44); raise it so the strip parks below a fixed topbar. */
+  --filter-bar-sticky-offset: 0px;
+  /* Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial`
+   * so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme. */
+  --filter-bar-sticky-background: initial;
 }

package/dist/tokens/foundation.css

@@ -359,8 +359,12 @@
   --muted-foreground: 44 6% 64%;
   --accent: 45 7% 22%;
   --accent-foreground: 60 20% 96%;
-  --destructive: 357 55% 52%;
-  --destructive-foreground: 60 20% 96%;
+  /* Filled destructive surfaces (button/badge/step) must clear WCAG AA (4.5:1) with comfortable
+   * margin, not sit on the floor (gh#199 — dark default was 4.54:1). Base darkened 52%→48% and the
+   * on-fill text lifted to pure white → ~5.5:1; states go DARKER (never lighter, which cut contrast
+   * against the light label). Error TEXT on dark surfaces uses --text-error, not this fill token. */
+  --destructive: 357 55% 48%;
+  --destructive-foreground: 0 0% 100%;
   --border: 45 6% 22%;
   --input: 45 6% 22%;
   --ring: 204 90% 60%;
@@ -388,6 +392,6 @@
   --primary-active: 204 90% 72%;
   --secondary-hover: 45 6% 22%;
   --secondary-active: 45 6% 26%;
-  --destructive-hover: 357 55% 58%;
-  --destructive-active: 357 55% 64%;
+  --destructive-hover: 357 55% 43%;
+  --destructive-active: 357 55% 38%;
 }

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.1.0",
-  "godxUiMcp": "18.0.3",
+  "version": "18.2.0",
+  "godxUiMcp": "18.2.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
+  "pnpm": {
+    "overrides": {
+      "esbuild": ">=0.28.1"
+    }
+  },
   "sideEffects": false,
   "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
@@ -108,6 +113,10 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
+    "./lib/permission-grid": {
+      "types": "./dist/lib/permission-grid.d.ts",
+      "import": "./dist/lib/permission-grid.js"
+    },
     "./hooks": {
       "types": "./dist/lib/hooks.d.ts",
       "import": "./dist/lib/hooks.js"
@@ -367,32 +376,32 @@
     "@date-fns/tz": "^1.5.0",
     "@fontsource/montserrat": "^5.2.8",
     "@fontsource/noto-sans-jp": "^5.2.9",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-accordion": "^1.2.16",
+    "@radix-ui/react-alert-dialog": "^1.1.19",
+    "@radix-ui/react-aspect-ratio": "^1.1.11",
+    "@radix-ui/react-avatar": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.3.7",
+    "@radix-ui/react-collapsible": "^1.1.16",
+    "@radix-ui/react-context": "^1.2.0",
+    "@radix-ui/react-context-menu": "^2.3.3",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-hover-card": "^1.1.19",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-menubar": "^1.1.20",
+    "@radix-ui/react-navigation-menu": "^1.2.18",
+    "@radix-ui/react-popover": "^1.1.19",
+    "@radix-ui/react-radio-group": "^1.4.3",
+    "@radix-ui/react-scroll-area": "^1.2.14",
+    "@radix-ui/react-select": "^2.3.3",
+    "@radix-ui/react-separator": "^1.1.11",
+    "@radix-ui/react-slider": "^1.4.3",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-toggle": "^1.1.14",
+    "@radix-ui/react-toggle-group": "^1.1.15",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -400,9 +409,9 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.14.0",
+    "lucide-react": "^1.25.0",
     "react-day-picker": "^10.0.1",
-    "react-resizable-panels": "^4.11.2",
+    "react-resizable-panels": "^4.12.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
@@ -411,17 +420,17 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
     "@eslint/js": "^9.39.4",
-    "@hookform/resolvers": "^5.2.2",
-    "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-query": "^5.100.9",
+    "@hookform/resolvers": "^5.4.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "^5.101.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.19.19",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
     "axe-core": "^4.12.1",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
@@ -429,19 +438,19 @@
     "globals": "^15.15.0",
     "jsdom": "^29.1.1",
     "playwright": "^1.61.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.9.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-hook-form": "^7.76.0",
-    "react-router-dom": "^7.15.0",
-    "recharts": "^3.8.1",
-    "tailwindcss": "^4.2.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.81.0",
+    "react-router-dom": "^7.18.1",
+    "recharts": "^3.9.2",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10",
     "vitest-axe": "1.0.0-pre.5",
     "zod": "^4.4.3"
   },