@godxjp/ui 20.2.0 → 20.2.1

package/dist/components/layout/org-switcher.js

@@ -2,11 +2,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import {
   Dialog,
   DialogBody,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger
@@ -23,6 +25,7 @@ import {
 import {
   Sheet,
   SheetBody,
+  SheetFooter,
   SheetContent,
   SheetHeader,
   SheetTrigger,
@@ -158,6 +161,7 @@ function OrgSwitcher({
   className,
   ...rest
 }) {
+  const { t } = useTranslation();
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const controlled = open !== void 0;
   const resolvedOpen = controlled ? open : uncontrolledOpen;
@@ -201,6 +205,20 @@ function OrgSwitcher({
       close: () => setOpen(false)
     }
   );
+  const keyboardLegend = /* @__PURE__ */ jsxs("div", { className: "ui-org-switcher-legend", children: [
+    /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-hint", children: [
+      /* @__PURE__ */ jsx("kbd", { className: "kbd", "aria-hidden": "true", children: "\u2191\u2193" }),
+      t("layout.orgSwitcher.hintMove")
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-hint", children: [
+      /* @__PURE__ */ jsx("kbd", { className: "kbd", "aria-hidden": "true", children: "\u21B5" }),
+      t("layout.orgSwitcher.hintSelect")
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-hint", children: [
+      /* @__PURE__ */ jsx("kbd", { className: "kbd", "aria-hidden": "true", children: "esc" }),
+      t("layout.orgSwitcher.hintClose")
+    ] })
+  ] });
   if (sheet) {
     return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
@@ -214,7 +232,8 @@ function OrgSwitcher({
           },
           children: [
             /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
-            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+            /* @__PURE__ */ jsx(SheetBody, { children: panel }),
+            /* @__PURE__ */ jsx(SheetFooter, { children: keyboardLegend })
           ]
         }
       )
@@ -225,7 +244,8 @@ function OrgSwitcher({
       /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsxs(DialogContent, { className: "ui-org-switcher-dialog", children: [
         /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
-        /* @__PURE__ */ jsx(DialogBody, { children: panel })
+        /* @__PURE__ */ jsx(DialogBody, { children: panel }),
+        /* @__PURE__ */ jsx(DialogFooter, { children: keyboardLegend })
       ] })
     ] }) });
   }

package/dist/i18n/messages/en.json

@@ -242,6 +242,11 @@
       "deniedDescription": "Ask an administrator to grant you access.",
       "loading": "Loading roles…",
       "noDetail": "Select a role to see its detail"
+    },
+    "orgSwitcher": {
+      "hintMove": "Move",
+      "hintSelect": "Select",
+      "hintClose": "Close"
     }
   },
   "dataDisplay": {

package/dist/i18n/messages/ja.json

@@ -236,6 +236,11 @@
       "deniedDescription": "閲覧するには管理者に権限の付与を依頼してください。",
       "loading": "ロールを読み込み中…",
       "noDetail": "ロールを選択すると詳細が表示されます"
+    },
+    "orgSwitcher": {
+      "hintMove": "移動",
+      "hintSelect": "選択",
+      "hintClose": "閉じる"
     }
   },
   "dataDisplay": {

package/dist/i18n/messages/vi.json

@@ -236,6 +236,11 @@
       "deniedDescription": "Hãy đề nghị quản trị viên cấp quyền truy cập.",
       "loading": "Đang tải vai trò…",
       "noDetail": "Chọn một vai trò để xem chi tiết"
+    },
+    "orgSwitcher": {
+      "hintMove": "Di chuyển",
+      "hintSelect": "Chọn",
+      "hintClose": "Đóng"
     }
   },
   "dataDisplay": {

package/dist/styles/shell-layout.css

@@ -1136,6 +1136,7 @@
 
   [data-slot="dialog-content"].ui-org-switcher-dialog {
 
+    --dialog-space-x: var(--org-switcher-sheet-inset);
     --dialog-space-inset: var(--dialog-space-y) var(--org-switcher-sheet-inset);
     --org-switcher-list-offset: var(--org-switcher-sheet-inset);
     max-inline-size: var(--org-switcher-dialog-width);
@@ -1171,14 +1172,38 @@
 
   .ui-org-switcher-command .ui-command-item {
     border-radius: 0;
-    margin-inline: 0;
-    padding-inline: var(--command-input-padding-x);
+    margin-inline: calc(-1 * var(--org-switcher-list-inset));
+    padding-inline: calc(var(--org-switcher-list-inset) + var(--command-input-padding-x));
   }
 
   .ui-org-switcher-command .ui-command-item + .ui-command-item {
     border-block-start: 1px solid hsl(var(--border));
   }
 
+  [data-slot="dialog-footer"]:has(> .ui-org-switcher-legend),
+  [data-slot="sheet-footer"]:has(> .ui-org-switcher-legend) {
+    justify-content: flex-start;
+  }
+
+  .ui-org-switcher-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--org-switcher-legend-space-gap);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--org-switcher-legend-font-size);
+  }
+
+  .ui-org-switcher-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--org-switcher-hint-space-gap);
+  }
+
+  .ui-org-switcher-hint > .kbd {
+    margin-inline-start: 0;
+  }
+
   .ui-org-switcher-state {
     display: flex;
     min-height: var(--org-switcher-state-min-height);
@@ -1218,14 +1243,17 @@
       --app-launcher-launchpad-backdrop-background,
       color-mix(
         in srgb,
-        var(--overlay-background) var(--app-launcher-launchpad-backdrop-alpha),
+        hsl(var(--background)) var(--app-launcher-launchpad-backdrop-alpha),
         transparent
       )
     );
-    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size));
+    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size))
+      saturate(var(--app-launcher-launchpad-backdrop-color-saturate));
 
     display: grid;
-    place-items: center;
+
+    padding: var(--app-launcher-launchpad-space-safe-area);
+    place-items: start;
   }
 
   [data-slot="dialog-content"].ui-app-launcher-launchpad {
@@ -1238,7 +1266,7 @@
       calc(100vw - 2 * var(--app-launcher-launchpad-space-inset))
     );
     max-height: calc(100dvh - 2 * var(--app-launcher-launchpad-space-inset));
-    justify-items: center;
+    justify-items: start;
     transform: none;
     border: 0;
     border-radius: 0;
@@ -1286,8 +1314,7 @@
             var(--app-launcher-launchpad-grid-gap)
         ) - var(--app-launcher-launchpad-grid-gap)
     );
-    justify-content: center;
-    justify-self: center;
+    justify-content: start;
     gap: var(--app-launcher-launchpad-grid-gap);
   }
 
@@ -1313,7 +1340,9 @@
     box-shadow: var(--app-launcher-launchpad-mark-shadow);
     color: hsl(var(--foreground));
     font-size: var(--app-launcher-launchpad-mark-font-size);
-    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size));
+
+    backdrop-filter: blur(calc(var(--app-launcher-launchpad-backdrop-blur-size) / 2))
+      saturate(var(--app-launcher-launchpad-backdrop-color-saturate));
   }
 
   .ui-app-launcher-launchpad .ui-app-launcher-group {
@@ -1329,7 +1358,7 @@
   }
 
   .ui-app-launcher-launchpad [data-slot="dialog-header"] {
-    align-items: center;
+    align-items: start;
   }
 
   .ui-app-launcher-launchpad [data-slot="dialog-close"] {

package/dist/tokens/components/shell.css

@@ -132,6 +132,10 @@
 
   --org-switcher-list-offset: 0px;
 
+  --org-switcher-legend-space-gap: var(--space-4);
+  --org-switcher-legend-font-size: var(--font-size-2xs);
+  --org-switcher-hint-space-gap: var(--space-1);
+
   --org-switcher-dialog-width: 26rem;
 
   --org-switcher-search-space-block: var(--space-3);
@@ -164,9 +168,14 @@
   --app-launcher-group-label-color: var(--muted-foreground);
   --app-launcher-state-min-height: 8rem;
 
-  --app-launcher-launchpad-backdrop-blur-size: 28px;
-  --app-launcher-launchpad-backdrop-alpha: 42%;
+  --app-launcher-launchpad-backdrop-background: initial;
+  --app-launcher-launchpad-backdrop-blur-size: 16px;
+  --app-launcher-launchpad-backdrop-alpha: 55%;
+
+  --app-launcher-launchpad-backdrop-color-saturate: 180%;
   --app-launcher-launchpad-space-inset: var(--space-8);
+
+  --app-launcher-launchpad-space-safe-area: 0;
   --app-launcher-launchpad-panel-max-width: 60rem;
   --app-launcher-launchpad-panel-gap: var(--space-8);
   --app-launcher-launchpad-grid-gap: var(--space-6);
@@ -184,7 +193,7 @@
 
   --app-launcher-launchpad-mark-background: color-mix(
     in srgb,
-    hsl(var(--card)) 62%,
+    hsl(var(--card)) 78%,
     transparent
   );
   --app-launcher-launchpad-mark-border-color: color-mix(

package/package.json

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