@tempoxyz/ds 0.2.0 → 0.2.4

package/dist/web/components/Kbd.css

@@ -1 +1 @@
-.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-clip-path-0{clip-path:inset(50%)}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-h-1{height:var(--z-tds_2f_web-spacing-1,1px)}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-overflow-2{overflow:hidden}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-position-3{position:absolute}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-white-space-4{white-space:nowrap}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-w-5{width:var(--z-tds_2f_web-spacing-1,1px)}.z-tds_2f_web-tds_2f_web_2f_kbd-align-items-0{align-items:center}.z-tds_2f_web-tds_2f_web_2f_kbd-bg-1{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}.z-tds_2f_web-tds_2f_web_2f_kbd-border-radius-2{border-radius:var(--z-tds_2f_web-radius-6,.375rem)}.z-tds_2f_web-tds_2f_web_2f_kbd-box-shadow-3{box-shadow:var(--z-tds_2f_web-shadow-raised,0 1px 2px #0000000f, 0 1px 1px #0000000a)}.z-tds_2f_web-tds_2f_web_2f_kbd-box-sizing-4{box-sizing:border-box}.z-tds_2f_web-tds_2f_web_2f_kbd-text-5{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z-tds_2f_web-tds_2f_web_2f_kbd-column-gap-6{column-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z-tds_2f_web-tds_2f_web_2f_kbd-display-7{display:inline-flex}.z-tds_2f_web-tds_2f_web_2f_kbd-justify-content-8{justify-content:center}.z-tds_2f_web-tds_2f_web_2f_kbd-h-9{&:where([data-size=large]){height:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-10{&:where([data-size=large]){min-width:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-11{&:where([data-size=large]){padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-12{&:where([data-size=large]){font-family:var(--z-tds_2f_web-typography-label-14-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-13{&:where([data-size=large]){font-size:var(--z-tds_2f_web-typography-label-14-fontSize,14px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-14{&:where([data-size=large]){font-weight:var(--z-tds_2f_web-typography-label-14-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-15{&:where([data-size=large]){letter-spacing:var(--z-tds_2f_web-typography-label-14-letterSpacing,-.09px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-16{&:where([data-size=large]){line-height:var(--z-tds_2f_web-typography-label-14-lineHeight,20px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-h-17{&:where([data-size=medium]){height:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-18{&:where([data-size=medium]){min-width:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-19{&:where([data-size=medium]){padding-inline:6px}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-20{&:where([data-size=medium]){font-family:var(--z-tds_2f_web-typography-label-12-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-21{&:where([data-size=medium]){font-size:var(--z-tds_2f_web-typography-label-12-fontSize,12px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-22{&:where([data-size=medium]){font-weight:var(--z-tds_2f_web-typography-label-12-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-23{&:where([data-size=medium]){letter-spacing:var(--z-tds_2f_web-typography-label-12-letterSpacing,.01px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-24{&:where([data-size=medium]){line-height:var(--z-tds_2f_web-typography-label-12-lineHeight,16px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-h-25{&:where([data-size=small]){height:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-26{&:where([data-size=small]){min-width:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-27{&:where([data-size=small]){padding-inline:var(--z-tds_2f_web-spacing-4,.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-28{&:where([data-size=small]){font-family:var(--z-tds_2f_web-typography-label-12-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-29{&:where([data-size=small]){font-size:var(--z-tds_2f_web-typography-label-12-fontSize,12px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-30{&:where([data-size=small]){font-weight:var(--z-tds_2f_web-typography-label-12-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-31{&:where([data-size=small]){letter-spacing:var(--z-tds_2f_web-typography-label-12-letterSpacing,.01px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-32{&:where([data-size=small]){line-height:var(--z-tds_2f_web-typography-label-12-lineHeight,16px)}}
+.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-clip-path-0{clip-path:inset(50%)}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-h-1{height:var(--z-tds_2f_web-spacing-1,1px)}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-overflow-2{overflow:hidden}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-position-3{position:absolute}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-white-space-4{white-space:nowrap}.z-tds_2f_web-tds_2f_web_2f_kbd_2f_hidden-w-5{width:var(--z-tds_2f_web-spacing-1,1px)}.z-tds_2f_web-tds_2f_web_2f_kbd-align-items-0{align-items:center}.z-tds_2f_web-tds_2f_web_2f_kbd-bg-1{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}.z-tds_2f_web-tds_2f_web_2f_kbd-border-radius-2{border-radius:var(--z-tds_2f_web-radius-6,.375rem)}.z-tds_2f_web-tds_2f_web_2f_kbd-box-shadow-3{box-shadow:var(--z-tds_2f_web-shadow-raised,0 1px 2px #0000000f, 0 1px 1px #0000000a)}.z-tds_2f_web-tds_2f_web_2f_kbd-box-sizing-4{box-sizing:border-box}.z-tds_2f_web-tds_2f_web_2f_kbd-text-5{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z-tds_2f_web-tds_2f_web_2f_kbd-column-gap-6{column-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z-tds_2f_web-tds_2f_web_2f_kbd-display-7{display:inline-flex}.z-tds_2f_web-tds_2f_web_2f_kbd-justify-content-8{justify-content:center}.z-tds_2f_web-tds_2f_web_2f_kbd-h-9{&:where([data-size=large]){height:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-10{&:where([data-size=large]){min-width:var(--z-tds_2f_web-spacing-32,2rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-11{&:where([data-size=large]){padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-12{&:where([data-size=large]){font-family:var(--z-tds_2f_web-typography-label-14-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-13{&:where([data-size=large]){font-size:var(--z-tds_2f_web-typography-label-14-fontSize,14px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-14{&:where([data-size=large]){font-weight:var(--z-tds_2f_web-typography-label-14-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-15{&:where([data-size=large]){letter-spacing:var(--z-tds_2f_web-typography-label-14-letterSpacing,-.09px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-16{&:where([data-size=large]){line-height:var(--z-tds_2f_web-typography-label-14-lineHeight,20px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-h-17{&:where([data-size=medium]){height:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-18{&:where([data-size=medium]){min-width:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-19{&:where([data-size=medium]){padding-inline:var(--z-tds_2f_web-spacing-6,.375rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-20{&:where([data-size=medium]){font-family:var(--z-tds_2f_web-typography-label-12-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-21{&:where([data-size=medium]){font-size:var(--z-tds_2f_web-typography-label-12-fontSize,12px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-22{&:where([data-size=medium]){font-weight:var(--z-tds_2f_web-typography-label-12-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-23{&:where([data-size=medium]){letter-spacing:var(--z-tds_2f_web-typography-label-12-letterSpacing,.01px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-24{&:where([data-size=medium]){line-height:var(--z-tds_2f_web-typography-label-12-lineHeight,16px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-h-25{&:where([data-size=small]){height:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-min-width-26{&:where([data-size=small]){min-width:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-padding-inline-27{&:where([data-size=small]){padding-inline:var(--z-tds_2f_web-spacing-4,.25rem)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-family-28{&:where([data-size=small]){font-family:var(--z-tds_2f_web-typography-label-12-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-size-29{&:where([data-size=small]){font-size:var(--z-tds_2f_web-typography-label-12-fontSize,12px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-font-weight-30{&:where([data-size=small]){font-weight:var(--z-tds_2f_web-typography-label-12-fontWeight,450)}}.z-tds_2f_web-tds_2f_web_2f_kbd-letter-spacing-31{&:where([data-size=small]){letter-spacing:var(--z-tds_2f_web-typography-label-12-letterSpacing,.01px)}}.z-tds_2f_web-tds_2f_web_2f_kbd-line-height-32{&:where([data-size=small]){line-height:var(--z-tds_2f_web-typography-label-12-lineHeight,16px)}}

package/dist/web/components/Kbd.d.ts

@@ -1,15 +1,28 @@
-import type { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
+declare const modifiers: {
+    readonly apple: readonly [readonly ['ctrl', '⌃', 'Control'], readonly ['alt', '⌥', 'Option'], readonly ['shift', '⇧', 'Shift'], readonly ['meta', '⌘', 'Command']];
+    readonly linux: readonly [readonly ['meta', 'Super', 'Super'], readonly ['ctrl', 'Ctrl', 'Control'], readonly ['alt', 'Alt', 'Alt'], readonly ['shift', 'Shift', 'Shift']];
+    readonly windows: readonly [readonly ['meta', 'Win', 'Windows'], readonly ['ctrl', 'Ctrl', 'Control'], readonly ['alt', 'Alt', 'Alt'], readonly ['shift', 'Shift', 'Shift']];
+};
 /**
- * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds its glyph before the
- * children, always in the order Control, Option, Shift, Command. Glyphs are hidden from assistive
- * tech, which reads the visually hidden name instead, so `<Kbd meta>K</Kbd>` reads as `Command K`.
+ * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds a label before the
+ * children in the platform's conventional order: glyphs ordered Control, Option, Shift, Command on
+ * Apple platforms, and names ordered Win (Super on Linux), Ctrl, Alt, Shift elsewhere. Labels are
+ * hidden from assistive tech, which reads the visually hidden name instead, so `<Kbd mod>K</Kbd>`
+ * reads as `Command K` on a Mac and `Control K` on Windows.
+ *
+ * Without `platform`, the server and hydration render Apple glyphs, then the client switches to the
+ * browser's platform. If the request identifies the platform, such as in the `Sec-CH-UA-Platform`
+ * header, map it to `apple`, `linux`, or `windows` and pass it as `platform`, so the markup never
+ * changes. Any other value falls back to the browser's platform.
  *
  * - Pass the main key as children and modifiers as props, rather than typing glyphs into children.
+ * - Use `mod` for shortcuts that take Command on Apple platforms and Ctrl elsewhere.
  * - Single-character shortcuts need a way to turn them off or remap them.
  *
  * @example
- * <Kbd meta shift>
+ * <Kbd mod shift>
  *   P
  * </Kbd>
  *
@@ -20,13 +33,22 @@ import type * as zyzz from 'zyzz';
 export declare function Kbd(props: Kbd.Props): import("react").JSX.Element;
 export declare namespace Kbd {
     type Props = ComponentPropsWithRef<'kbd'> & zyzz.Props.Variants<typeof styles.kbd> & {
-        /** Adds `⌥`, read as `Option`. */
+        /** Adds `⌥` (Option) on Apple platforms and Alt elsewhere. */
         alt?: boolean | undefined;
-        /** Adds `⌃`, read as `Control`. */
+        /** Adds `⌃` (Control) on Apple platforms and Ctrl elsewhere. */
         ctrl?: boolean | undefined;
-        /** Adds `⌘`, read as `Command`. */
+        /** Adds `⌘` (Command) on Apple platforms, Win on Windows, and Super on Linux. */
         meta?: boolean | undefined;
-        /** Adds `⇧`, read as `Shift`. */
+        /** Adds the primary shortcut modifier: `⌘` (Command) on Apple platforms and Ctrl elsewhere. */
+        mod?: boolean | undefined;
+        /**
+         * Selects the modifier labels, names and order. Defaults to the browser's platform, read after
+         * hydration, and to `apple` on the server. Browsers on other platforms, such as Android or
+         * ChromeOS, use the `linux` names. Any other value, such as a raw `Sec-CH-UA-Platform` header,
+         * falls back to the default.
+         */
+        platform?: keyof typeof modifiers | undefined;
+        /** Adds `⇧` (Shift) on Apple platforms and Shift elsewhere. */
         shift?: boolean | undefined;
     };
 }
@@ -59,7 +81,7 @@ declare namespace styles {
                 readonly medium: {
                     readonly height: "24";
                     readonly minWidth: "24";
-                    readonly paddingInline: "6px !custom";
+                    readonly paddingInline: "6";
                     readonly typography: "label.12";
                 };
                 readonly small: {

package/dist/web/components/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../src/web/components/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAUjC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BAkBnC;AAED,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG;QACvC,kCAAkC;QAClC,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QACzB,mCAAmC;QACnC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,mCAAmC;QACnC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,iCAAiC;QACjC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC5B,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,MAAM,gCAUlB,CAAA;IAEM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8Bf,CAAA;CACF"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../src/web/components/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAwB,MAAM,OAAO,CAAA;AACxE,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC,QAAA,MAAM,SAAS;aACb,KAAK,sBACF,MAAM,EAAE,GAAG,EAAE,SAAS,aACtB,KAAK,EAAE,GAAG,EAAE,QAAQ,aACpB,OAAO,EAAE,GAAG,EAAE,OAAO,aACrB,MAAM,EAAE,GAAG,EAAE,SAAS;aAEzB,KAAK,sBACF,MAAM,EAAE,OAAO,EAAE,OAAO,aACxB,MAAM,EAAE,MAAM,EAAE,SAAS,aACzB,KAAK,EAAE,KAAK,EAAE,KAAK,aACnB,OAAO,EAAE,OAAO,EAAE,OAAO;aAE5B,OAAO,sBACJ,MAAM,EAAE,KAAK,EAAE,SAAS,aACxB,MAAM,EAAE,MAAM,EAAE,SAAS,aACzB,KAAK,EAAE,KAAK,EAAE,KAAK,aACnB,OAAO,EAAE,OAAO,EAAE,OAAO;CAEpB,CAAA;AAeV;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BA6BnC;AAED,yBAAiB,GAAG,CAAC;IACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG;QACvC,8DAA8D;QAC9D,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QACzB,gEAAgE;QAChE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,iFAAiF;QACjF,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QAC1B,+FAA+F;QAC/F,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;QACzB;;;;;WAKG;QACH,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,GAAG,SAAS,CAAA;QAC7C,+DAA+D;QAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC5B,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,MAAM,gCAUlB,CAAA;IAEM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8Bf,CAAA;CACF"}

package/dist/web/components/Kbd.js

@@ -1,23 +1,56 @@
 
 import { Props as __zyzzProps, Recipe as __zyzzRecipe } from 'zyzz/runtime';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
 import { style, variants } from '../zyzz.config.js';
-const modifiers = [
-    ['ctrl', '⌃', 'Control'],
-    ['alt', '⌥', 'Option'],
-    ['shift', '⇧', 'Shift'],
-    ['meta', '⌘', 'Command'],
-];
+// Each platform lists its modifiers in its own conventional order, as label and spoken name.
+const modifiers = {
+    apple: [
+        ['ctrl', '⌃', 'Control'],
+        ['alt', '⌥', 'Option'],
+        ['shift', '⇧', 'Shift'],
+        ['meta', '⌘', 'Command'],
+    ],
+    linux: [
+        ['meta', 'Super', 'Super'],
+        ['ctrl', 'Ctrl', 'Control'],
+        ['alt', 'Alt', 'Alt'],
+        ['shift', 'Shift', 'Shift'],
+    ],
+    windows: [
+        ['meta', 'Win', 'Windows'],
+        ['ctrl', 'Ctrl', 'Control'],
+        ['alt', 'Alt', 'Alt'],
+        ['shift', 'Shift', 'Shift'],
+    ],
+};
+// The server snapshot keeps server and hydration markup identical. React then re-renders with the
+// browser's platform.
+function usePlatform() {
+    return useSyncExternalStore(() => () => { }, () => {
+        if (/Macintosh|iPad|iPhone|iPod/.test(navigator.userAgent))
+            return 'apple';
+        return navigator.userAgent.includes('Windows') ? 'windows' : 'linux';
+    }, () => 'apple');
+}
 /**
- * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds its glyph before the
- * children, always in the order Control, Option, Shift, Command. Glyphs are hidden from assistive
- * tech, which reads the visually hidden name instead, so `<Kbd meta>K</Kbd>` reads as `Command K`.
+ * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds a label before the
+ * children in the platform's conventional order: glyphs ordered Control, Option, Shift, Command on
+ * Apple platforms, and names ordered Win (Super on Linux), Ctrl, Alt, Shift elsewhere. Labels are
+ * hidden from assistive tech, which reads the visually hidden name instead, so `<Kbd mod>K</Kbd>`
+ * reads as `Command K` on a Mac and `Control K` on Windows.
+ *
+ * Without `platform`, the server and hydration render Apple glyphs, then the client switches to the
+ * browser's platform. If the request identifies the platform, such as in the `Sec-CH-UA-Platform`
+ * header, map it to `apple`, `linux`, or `windows` and pass it as `platform`, so the markup never
+ * changes. Any other value falls back to the browser's platform.
  *
  * - Pass the main key as children and modifiers as props, rather than typing glyphs into children.
+ * - Use `mod` for shortcuts that take Command on Apple platforms and Ctrl elsewhere.
  * - Single-character shortcuts need a way to turn them off or remap them.
  *
  * @example
- * <Kbd meta shift>
+ * <Kbd mod shift>
  *   P
  * </Kbd>
  *
@@ -26,9 +59,18 @@ const modifiers = [
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
  */
 export function Kbd(props) {
-    const { alt, children, className, ctrl, meta, shift, size, vars, ...attributes } = props;
-    const active = { alt, ctrl, meta, shift };
-    return (_jsxs("kbd", { ...attributes, ...styles.kbd({ className, size, style: props.style, vars }), children: [modifiers.map(([key, glyph, name]) => active[key] && (_jsxs("span", { children: [_jsx("span", { "aria-hidden": "true", children: glyph }), _jsxs("span", { ...styles.hidden(), children: [name, " "] })] }, key))), children] }));
+    const detected = usePlatform();
+    const { alt, children, className, ctrl, meta, mod, platform, shift, size, vars, ...attributes } = props;
+    // Untyped data, such as a raw `Sec-CH-UA-Platform` header, can hold any value, including inherited
+    // keys such as `toString`. Every value outside `modifiers` falls back to detection.
+    const resolved = platform !== undefined && Object.hasOwn(modifiers, platform) ? platform : detected;
+    const active = {
+        alt,
+        ctrl: ctrl || (mod && resolved !== 'apple'),
+        meta: meta || (mod && resolved === 'apple'),
+        shift,
+    };
+    return (_jsxs("kbd", { ...attributes, ...styles.kbd({ className, size, style: props.style, vars }), children: [modifiers[resolved].map(([key, label, name]) => active[key] && (_jsxs("span", { children: [_jsx("span", { "aria-hidden": "true", children: label }), _jsxs("span", { ...styles.hidden(), children: [name, " "] })] }, key))), children] }));
 }
 var styles;
 (function (styles) {

package/dist/web/components/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/web/components/Kbd.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD,MAAM,SAAS,GAAG;IAChB,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC;IACxB,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC;IACtB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC;IACvB,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,GAAG,CAAC,KAAgB;IAClC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IACxF,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;IAEzC,OAAO,CACL,kBAAS,UAAU,KAAM,MAAM,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aAC/E,SAAS,CAAC,GAAG,CACZ,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CACrB,MAAM,CAAC,GAAG,CAAC,IAAI,CACb,2BACE,8BAAkB,MAAM,YAAE,KAAK,GAAQ,EACvC,mBAAU,MAAM,CAAC,MAAM,EAAE,aAAG,IAAI,SAAS,KAFhC,GAAG,CAGP,CACR,CACJ,EACA,QAAQ,IACL,CACP,CAAA;AACH,CAAC;AAgBD,IAAU,MAAM,CA4Cf;AA5CD,WAAU,MAAM;IACD,aAAM,GAAG,KAAK,CACzB;QACE,QAAQ,EAAE,oBAAoB;QAC9B,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,GAAG;KACX,EACD,EAAE,EAAE,EAAE,oBAAoB,EAAE,CAC7B,CAAA;IAEY,UAAG,GAAG,QAAQ,CACzB;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,eAAe;YAChC,YAAY,EAAE,GAAG;YACjB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE,GAAG;YACd,OAAO,EAAE,aAAa;YACtB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB;QACD,eAAe,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE;YACR,8CAA8C;YAC9C,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE;gBACnF,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI;oBACZ,QAAQ,EAAE,IAAI;oBACd,aAAa,EAAE,aAAa;oBAC5B,UAAU,EAAE,UAAU;iBACvB;gBACD,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE;aACpF;SACF;KACF,EACD,EAAE,EAAE,EAAE,aAAa,EAAE,CACtB,CAAA;AACH,CAAC,EA5CS,MAAM,KAAN,MAAM,QA4Cf"}
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/web/components/Kbd.tsx"],"names":[],"mappings":"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"}