@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/InputGroup/InputGroup.js

@@ -18,7 +18,7 @@
  * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
-import { useId, useMemo } from 'react';
+import { use, useId, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { sizeVars } from "../theme/tokens.stylex.js";
@@ -26,6 +26,7 @@ import { Field } from "../Field/index.js";
 import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
 import { mergeProps } from "../utils/index.js";
 import { InputGroupContext } from "./InputGroupContext.js";
+import { InputGroupInternalContext } from "./InputGroupInternalContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -72,7 +73,7 @@ export function InputGroup({
   label,
   isLabelHidden = false,
   description,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isOptional = false,
   isRequired = false,
   size: sizeProp,
@@ -85,6 +86,8 @@ export function InputGroup({
   'data-testid': testId,
   ...rest
 }) {
+  const parentGroup = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || parentGroup.isDisabled;
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
   const labelID = useId();
@@ -96,40 +99,47 @@ export function InputGroup({
     labelID,
     describedByIDs
   }), [labelID, describedByIDs]);
-  return /*#__PURE__*/_jsx(InputGroupContext, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(SizeProvider, {
-      value: size,
-      children: /*#__PURE__*/_jsx(Field, {
-        label: label,
-        isLabelHidden: isLabelHidden,
-        description: description,
-        inputID: inputId,
-        labelID: labelID,
-        descriptionID: description ? descriptionID : undefined,
-        isGroupLabel: true,
-        isOptional: isOptional,
-        isRequired: isRequired,
-        isDisabled: isDisabled,
-        status: status ? {
-          type: status.type,
-          message: status.message,
-          messageID: status.message ? statusMessageId : undefined
-        } : undefined,
-        statusVariant: "detached",
-        labelTooltip: labelTooltip,
-        children: /*#__PURE__*/_jsx("div", {
-          ref: ref,
-          "data-testid": testId,
-          ...rest,
-          role: "group",
-          "aria-labelledby": labelID,
-          "aria-describedby": describedByIDs,
-          ...mergeProps(themeProps('input-group', {
-            size,
-            status: status?.type ?? null
-          }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
-          children: children
+  const internalContextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
+  return /*#__PURE__*/_jsx(InputGroupInternalContext, {
+    value: internalContextValue,
+    children: /*#__PURE__*/_jsx(InputGroupContext, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(SizeProvider, {
+        value: size,
+        children: /*#__PURE__*/_jsx(Field, {
+          label: label,
+          isLabelHidden: isLabelHidden,
+          description: description,
+          inputID: inputId,
+          labelID: labelID,
+          descriptionID: description ? descriptionID : undefined,
+          isGroupLabel: true,
+          isOptional: isOptional,
+          isRequired: isRequired,
+          isDisabled: isDisabled,
+          status: status ? {
+            type: status.type,
+            message: status.message,
+            messageID: status.message ? statusMessageId : undefined
+          } : undefined,
+          statusVariant: "detached",
+          labelTooltip: labelTooltip,
+          children: /*#__PURE__*/_jsx("div", {
+            ref: ref,
+            "data-testid": testId,
+            ...rest,
+            role: "group",
+            "aria-disabled": isDisabled || undefined,
+            "aria-labelledby": labelID,
+            "aria-describedby": describedByIDs,
+            ...mergeProps(themeProps('input-group', {
+              size,
+              status: status?.type ?? null
+            }), stylex.props(styles.group, sizeStyles[size], isDisabled && styles.disabled, xstyle), className, style),
+            children: children
+          })
         })
       })
     })

package/dist/InputGroup/InputGroupInternalContext.d.ts

@@ -0,0 +1,4 @@
+export declare const InputGroupInternalContext: import("react").Context<{
+    isDisabled: boolean;
+}>;
+//# sourceMappingURL=InputGroupInternalContext.d.ts.map

package/dist/InputGroup/InputGroupInternalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupInternalContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupInternalContext.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,yBAAyB;;EAAqC,CAAC"}

package/dist/InputGroup/InputGroupInternalContext.js

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InputGroupInternalContext.ts
+ * @input Layer-scoped React context
+ * @output Package-private InputGroup state context
+ * @position Internal group state; not re-exported by index.ts
+ */
+import { createLayerScopedContext as createContext } from "../Layer/layerScopedContext.js";
+export const InputGroupInternalContext = createContext({
+  isDisabled: false
+});
+InputGroupInternalContext.displayName = 'InputGroupInternalContext';

package/dist/InputGroup/InputGroupText.d.ts

@@ -10,7 +10,7 @@
  * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface InputGroupTextProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/InputGroup/InputGroupText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkD5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAcrB;yBArBe,cAAc"}
+{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmD5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAerB;yBAtBe,cAAc"}

package/dist/InputGroup/InputGroupText.js

@@ -19,6 +19,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { inputGroupItemProps } from "./groupStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   text: {
@@ -65,6 +66,7 @@ export function InputGroupText({
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...rest,
+    ...inputGroupItemProps,
     ...mergeProps(themeProps('input-group-text'), stylex.props(styles.text, xstyle), className, style),
     children: children
   });

package/dist/InputGroup/groupStyles.d.ts

@@ -5,6 +5,15 @@
  * @position Shared styles consumed by InputGroup-compatible controls and addons
  */
 import * as stylex from '@stylexjs/stylex';
+/**
+ * The internal marker every InputGroup member sets on the element that carries
+ * its group styles: compatible inputs, Button addons and InputGroupText. The
+ * group's edge rules name members by it instead of a universal selector. Not
+ * public API.
+ */
+export declare const inputGroupItemProps: {
+    readonly 'data-astryx-input-group-item': "";
+};
 export declare const groupStyles: Readonly<{
     readonly buttonAddon: Readonly<{
         readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", 0 | null>;

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAmB3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AAmBX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -11,26 +11,40 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { radiusVars, borderVars } from "../theme/tokens.stylex.js";
 
-// A grouped control may be followed by context-layer infrastructure rather
-// than another control. Popovers, inert markers, and native dialog surfaces
-// are not visual group members; skip them when finding the trailing edge.
-const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
+/**
+ * The internal marker every InputGroup member sets on the element that carries
+ * its group styles: compatible inputs, Button addons and InputGroupText. The
+ * group's edge rules name members by it instead of a universal selector. Not
+ * public API.
+ */
+export const inputGroupItemProps = {
+  'data-astryx-input-group-item': ''
+};
+const MEMBER = '[data-astryx-input-group-item]';
+
+// Anything a caller places after a member (a wrapped Button, a custom element)
+// still counts as following it, so the trailing edge keeps today's rule over
+// any sibling; only context-layer infrastructure (popovers, inert markers,
+// native dialog surfaces) is skipped. Followers are not always members, so
+// this rule cannot name them by the marker.
+const FOLLOWED = ':has(~ *:not([popover]):not(template):not(dialog))';
+const IS_LAST_ITEM = `:not(${FOLLOWED})`;
 
 // Button consumes InputGroup context anywhere below the group, including buttons
 // inside an input's own implementation. Keep the visual adaptation on direct
 // children so internal clear, calendar, and disclosure actions stay unchanged.
-const DIRECT_INPUT_GROUP_ADDON = ':where(.astryx-input-group > *)';
-const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = ':where(.astryx-input-group > *):focus-visible';
-const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = ':where(.astryx-input-group > *):not(:first-child)';
-const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = ':where(.astryx-input-group > *):has(~ *:not([popover]):not(template):not(dialog))';
+const DIRECT_INPUT_GROUP_ADDON = `:where(.astryx-input-group > ${MEMBER})`;
+const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = `${DIRECT_INPUT_GROUP_ADDON}:focus-visible`;
+const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = `${DIRECT_INPUT_GROUP_ADDON}:not(:first-child)`;
+const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = `${DIRECT_INPUT_GROUP_ADDON}${FOLLOWED}`;
 export const groupStyles = {
   buttonAddon: {
-    krdFHd: "x1epqg88",
-    kVL7Gh: "xf2wquc",
-    kfmiAY: "x2dar1b",
-    kT0f0o: "x1tgb0ru",
-    kZKoxP: "x1vonza8",
-    kY2c9j: "x1qf1n5z",
+    krdFHd: "x132ell6",
+    kVL7Gh: "x1y3chn8",
+    kfmiAY: "x1wxx7ce",
+    kT0f0o: "xiyn7wy",
+    kZKoxP: "x1y436bp",
+    kY2c9j: "xf5goe6",
     $$css: true
   },
   inGroup: {

package/dist/InputGroup/index.d.ts

@@ -4,10 +4,10 @@
  * @output Exports InputGroup, InputGroupText, context hook, and types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { InputGroup } from './InputGroup';
-export type { InputGroupProps, InputGroupSize } from './InputGroup';
-export { InputGroupText } from './InputGroupText';
-export type { InputGroupTextProps } from './InputGroupText';
-export { useInputGroup } from './InputGroupContext';
-export type { InputGroupContextValue } from './InputGroupContext';
+export { InputGroup } from './InputGroup.js';
+export type { InputGroupProps, InputGroupSize } from './InputGroup.js';
+export { InputGroupText } from './InputGroupText.js';
+export type { InputGroupTextProps } from './InputGroupText.js';
+export { useInputGroup } from './InputGroupContext.js';
+export type { InputGroupContextValue } from './InputGroupContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/InteractiveRoleContext/InteractiveRoleContext.d.ts

@@ -1,4 +1,4 @@
-import type { InteractiveRole } from '../hooks/useInteractiveRole';
+import type { InteractiveRole } from '../hooks/useInteractiveRole.js';
 /**
  * Context that provides a role override to child components.
  *

package/dist/InteractiveRoleContext/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports InteractiveRoleContext module public API
  * @position Entry point for InteractiveRoleContext module
  */
-export { InteractiveRoleContext, useInteractiveRoleContext, } from './InteractiveRoleContext';
+export { InteractiveRoleContext, useInteractiveRoleContext, } from './InteractiveRoleContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Item/Item.d.ts

@@ -21,7 +21,7 @@
  * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export type ItemAlign = 'center' | 'start' | 'first-line';
 export type ItemDensity = 'compact' | 'balanced' | 'spacious';
 /**

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyB5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1E,yFAAyF;AACzF,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qFAAqF;IACrF,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;IAE/C;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAElC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+OD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,MAAkB,EAClB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,YAAY,EACZ,aAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA8UX;yBA1We,IAAI"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}

package/dist/Item/Item.js

@@ -184,7 +184,7 @@ const styles = {
   },
   swipeRoot: {
     kHBbk8: "xc8icb0",
-    kFalU9: "xx69xxh",
+    kFalU9: "xge0x1e",
     k3aq6I: "x1kncwj0",
     k1ekBW: "xuo13n2",
     kIyJzY: "x15p14ac",

package/dist/Item/ItemSwipeLayer.d.ts

@@ -16,8 +16,8 @@
  * split — no element is added for the swipe (spec AST-057, FR2).
  */
 import { type RefObject } from 'react';
-import { type SwipeHandlers } from './useSwipeAction';
-import type { ItemSwipeAction, ItemSwipeBehavior } from './Item';
+import { type SwipeHandlers } from './useSwipeAction.js';
+import type { ItemSwipeAction, ItemSwipeBehavior } from './Item.js';
 /**
  * What the root needs from the gesture: the handlers it forwards its events
  * into, and the test for the click the browser synthesizes after a drag. The

package/dist/Item/ItemSwipeLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemSwipeLayer.d.ts","sourceRoot":"","sources":["../../src/Item/ItemSwipeLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAaxD,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAM/D;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAqHD;;;GAGG;AACH,iBAAwB,cAAc,CAAC,EACrC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,+BAwIrB;kBA9IuB,cAAc;;;eAAd,cAAc"}
+{"version":3,"file":"ItemSwipeLayer.d.ts","sourceRoot":"","sources":["../../src/Item/ItemSwipeLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAaxD,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAM/D;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AA8HD;;;GAGG;AACH,iBAAwB,cAAc,CAAC,EACrC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,+BAwIrB;kBA9IuB,cAAc;;;eAAd,cAAc"}

package/dist/Item/ItemSwipeLayer.js

@@ -131,6 +131,9 @@ const swipeVariantStyles = {
   destructive: {
     kWkggS: "x1pjz0fi",
     kMwMTN: "x1m024r3",
+    kMzoRj: "xc342km x13rsnn2",
+    ksu8eU: "xng3xce xx61lck",
+    kVAM5u: "x1w1tqly",
     $$css: true
   }
 };

package/dist/Item/index.d.ts

@@ -4,6 +4,6 @@
  * @output Exports Item component and types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Item } from './Item';
-export type { ItemProps, ItemAlign, ItemDensity, ItemSwipeAction, ItemSwipeActions, ItemSwipeActionVariant, ItemSwipeBehavior, } from './Item';
+export { Item } from './Item.js';
+export type { ItemProps, ItemAlign, ItemDensity, ItemSwipeAction, ItemSwipeActions, ItemSwipeActionVariant, ItemSwipeBehavior, } from './Item.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Item/useSwipeAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeAction.d.ts","sourceRoot":"","sources":["../../src/Item/useSwipeAction.ts"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EACV,YAAY,IAAI,iBAAiB,EACjC,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,yBAAyB,CAAC;AAC5D,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAC5D,wEAAwE;AACxE,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAgBhE,yEAAyE;AACzE,eAAO,MAAM,eAAe,MAAM,CAAC;AAInC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChD,MAAM,MAAM,UAAU;AACpB,uBAAuB;AACrB,MAAM;AACR,iCAAiC;GAC/B,UAAU;AACZ,0DAA0D;GACxD,UAAU;AACZ,mEAAmE;GACjE,SAAS;AACX,uDAAuD;GACrD,MAAM,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,qDAAqD;IACrD,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,aAAa,CAAC;IACxB,iFAAiF;IACjF,KAAK,EAAE;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAC7C,oEAAoE;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC5C,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oFAAoF;IACpF,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAoDD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,eAAuB,EACvB,OAAO,GACR,EAAE,qBAAqB,GAAG,oBAAoB,CAmc9C"}
+{"version":3,"file":"useSwipeAction.d.ts","sourceRoot":"","sources":["../../src/Item/useSwipeAction.ts"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EACV,YAAY,IAAI,iBAAiB,EACjC,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,yBAAyB,CAAC;AAC5D,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAC5D,wEAAwE;AACxE,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAgBhE,yEAAyE;AACzE,eAAO,MAAM,eAAe,MAAM,CAAC;AAInC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChD,MAAM,MAAM,UAAU;AACpB,uBAAuB;AACrB,MAAM;AACR,iCAAiC;GAC/B,UAAU;AACZ,0DAA0D;GACxD,UAAU;AACZ,mEAAmE;GACjE,SAAS;AACX,uDAAuD;GACrD,MAAM,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,qDAAqD;IACrD,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,aAAa,CAAC;IACxB,iFAAiF;IACjF,KAAK,EAAE;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAC7C,oEAAoE;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC5C,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oFAAoF;IACpF,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAoDD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,eAAuB,EACvB,OAAO,GACR,EAAE,qBAAqB,GAAG,oBAAoB,CA+f9C"}

package/dist/Item/useSwipeAction.js

@@ -32,6 +32,12 @@
  * signal WebKit honours. Before the axis is decided, and for a drag the
  * scroller got, nothing is cancelled.
  *
+ * A pinch is the browser's: the root's `touch-action` keeps `pinch-zoom`, and
+ * a second finger that lands anywhere before the axis is decided turns the
+ * touch into a pinch, so the row lets it go and cancels nothing. A finger
+ * that is not the first one down never starts a drag. Once the row owns a
+ * drag, a second finger does not break it.
+ *
  * The drag's travel is one custom property written on the root, coalesced to
  * one write per frame; the root's transform reads it and the panels'
  * transforms read its negation, so the row moves and the panel appears fixed
@@ -120,6 +126,8 @@ export function useSwipeAction({
   const settleTimerRef = useRef(null);
   const frameRef = useRef(null);
   const pendingRef = useRef(null);
+  /** Removes the document listener that watches for a pinch's second finger. */
+  const stopPinchWatchRef = useRef(null);
   const [state, setState] = useState(IDLE_STATE);
   const stateRef = useRef(state);
   stateRef.current = state;
@@ -144,8 +152,38 @@ export function useSwipeAction({
     if (frameRef.current != null) {
       cancelAnimationFrame(frameRef.current);
     }
+    stopPinchWatchRef.current?.();
+    stopPinchWatchRef.current = null;
+  }, []);
+  const stopWatchingForPinch = useCallback(() => {
+    stopPinchWatchRef.current?.();
+    stopPinchWatchRef.current = null;
   }, []);
 
+  /**
+   * Until the axis is decided, a second finger anywhere on the page makes
+   * the touch a pinch: the row gives it up and cancels nothing, so the
+   * browser zooms. The finger can land off the row, so the document listens.
+   */
+  const watchForPinch = useCallback(drag => {
+    stopWatchingForPinch();
+    const onAnyPointerDown = event => {
+      if (event.pointerType === 'touch' && event.pointerId !== drag.pointerId && drag.claimed === null) {
+        drag.claimed = false;
+        stopWatchingForPinch();
+      }
+    };
+    document.addEventListener('pointerdown', onAnyPointerDown, {
+      capture: true,
+      passive: true
+    });
+    stopPinchWatchRef.current = () => {
+      document.removeEventListener('pointerdown', onAnyPointerDown, {
+        capture: true
+      });
+    };
+  }, [stopWatchingForPinch]);
+
   /** Write the travel (physical px) the transforms read. */
   const writeTravel = useCallback(travel => {
     const root = rootRef.current;
@@ -324,14 +362,25 @@ export function useSwipeAction({
   }, [rootRef, settle]);
   const onPointerDown = useCallback(event => {
     const current = stateRef.current;
-    if (!isEnabled || event.pointerType !== 'touch' || dragRef.current != null || current.phase === 'settling' || current.phase === 'held') {
+    const inFlight = dragRef.current;
+    if (inFlight != null) {
+      // A second finger before the axis is decided: a pinch, not a swipe.
+      if (event.pointerType === 'touch' && event.pointerId !== inFlight.pointerId && inFlight.claimed === null) {
+        inFlight.claimed = false;
+        stopWatchingForPinch();
+      }
+      return;
+    }
+    if (!isEnabled || event.pointerType !== 'touch' ||
+    // Another finger is already down: this one is part of a pinch.
+    event.isPrimary === false || current.phase === 'settling' || current.phase === 'held') {
       return;
     }
     const root = rootRef.current;
     const inlineSign = isRtlElement(root) ? -1 : 1;
     inlineSignRef.current = inlineSign;
     const startTime = now();
-    dragRef.current = {
+    const drag = {
       // Logical: the physical travel through the inline sign.
       baseTravel: travelRef.current * inlineSign,
       claimed: null,
@@ -348,7 +397,9 @@ export function useSwipeAction({
       startY: event.clientY,
       travel: 0
     };
-  }, [isEnabled, rootRef]);
+    dragRef.current = drag;
+    watchForPinch(drag);
+  }, [isEnabled, rootRef, stopWatchingForPinch, watchForPinch]);
   const onPointerMove = useCallback(event => {
     const drag = dragRef.current;
     if (drag == null || drag.pointerId !== event.pointerId || drag.claimed === false) {
@@ -361,6 +412,9 @@ export function useSwipeAction({
       if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < AXIS_LOCK_PX) {
         return;
       }
+      // The axis is decided now, whichever way: a later finger is the
+      // swipe's to ignore or the scroller's to use.
+      stopWatchingForPinch();
       // More horizontal than vertical is the row's, the rest the scroller's.
       if (Math.abs(deltaX) <= Math.abs(deltaY)) {
         drag.claimed = false;
@@ -413,13 +467,14 @@ export function useSwipeAction({
     drag.lastX = event.clientX;
     drag.lastTime = now();
     paintOnNextFrame(sign * drag.inlineSign * offset);
-  }, [paintOnNextFrame, rootRef, writeDuration]);
+  }, [paintOnNextFrame, rootRef, stopWatchingForPinch, writeDuration]);
   const endGesture = useCallback((event, cancelled) => {
     const drag = dragRef.current;
     if (drag == null || drag.pointerId !== event.pointerId) {
       return;
     }
     dragRef.current = null;
+    stopWatchingForPinch();
     if (drag.claimed !== true) {
       return;
     }
@@ -450,7 +505,7 @@ export function useSwipeAction({
       return;
     }
     settle(side, 0, 'idle');
-  }, [rootRef, settle, slideOutAndFire]);
+  }, [rootRef, settle, slideOutAndFire, stopWatchingForPinch]);
   const onPointerUp = useCallback(event => endGesture(event, false), [endGesture]);
   const onPointerCancel = useCallback(event => endGesture(event, true), [endGesture]);
   const shouldSuppressClick = useCallback(() => now() < suppressClickUntilRef.current, []);

package/dist/Kbd/Kbd.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file Kbd.tsx
- * @input Uses React, StyleX, theme tokens, shortcut key names and aliases
- * @output Exports Kbd component and KbdProps with canonical shortcut labels
+ * @input Uses React, StyleX, theme tokens, shortcut key names, aliases, provider-bound translator
+ * @output Exports Kbd component and KbdProps with localized shortcut text
  * @position Core implementation; renders styled keyboard shortcut indicators
  *
  * SYNC: When modified, update:
@@ -9,7 +9,7 @@
  * - /packages/cli/assets/templates/blocks/components/Kbd/ (showcase blocks)
  */
 import React from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface KbdProps extends BaseProps<HTMLSpanElement> {
     ref?: React.Ref<HTMLSpanElement>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+G5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBA6C3E;yBA7Ce,GAAG"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiH5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAkD3E;yBAlDe,GAAG"}

package/dist/Kbd/Kbd.js

@@ -4,8 +4,8 @@
 
 /**
  * @file Kbd.tsx
- * @input Uses React, StyleX, theme tokens, shortcut key names and aliases
- * @output Exports Kbd component and KbdProps with canonical shortcut labels
+ * @input Uses React, StyleX, theme tokens, shortcut key names, aliases, provider-bound translator
+ * @output Exports Kbd component and KbdProps with localized shortcut text
  * @position Core implementation; renders styled keyboard shortcut indicators
  *
  * SYNC: When modified, update:
@@ -17,6 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { isApplePlatform } from "../utils/isApplePlatform.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTranslator } from "../i18n/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,7 +46,7 @@ const KEY_DISPLAY = new Map([['ctrl', '\u2303'],
 // ↵
 ['backspace', '\u232B'],
 // ⌫
-['escape', 'Esc'], ['tab', '\u21E5'],
+['tab', '\u21E5'],
 // ⇥
 ['up', '\u2191'], ['down', '\u2193'], ['left', '\u2190'], ['right', '\u2192'], ['plus', '+']]);
 const KBD_KEY_ALIASES = new Map([['esc', 'escape'], ['return', 'enter']]);
@@ -55,10 +56,11 @@ const KBD_KEY_ALIASES = new Map([['esc', 'escape'], ['return', 'enter']]);
  * `mod` key (⌘ on macOS, Ctrl on other platforms) and falls back to
  * KEY_DISPLAY or uppercased key name.
  */
-function getKeyDisplay(key, isMac) {
+function getKeyDisplay(key, isMac, t) {
   if (key === 'mod') {
-    return isMac ? '\u2318' : 'Ctrl';
+    return isMac ? '\u2318' : t('@astryx.kbd.key.controlShort');
   }
+  if (key === 'escape') return t('@astryx.kbd.key.escapeShort');
   return KEY_DISPLAY.get(key) ?? key.toUpperCase();
 }
 
@@ -67,12 +69,13 @@ function getKeyDisplay(key, isMac) {
  * (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
  * accessible name for the shortcut is built from these words instead.
  */
-const KEY_LABEL = new Map([['ctrl', 'Control'], ['alt', 'Alt'], ['shift', 'Shift'], ['enter', 'Enter'], ['backspace', 'Backspace'], ['escape', 'Escape'], ['tab', 'Tab'], ['up', 'Up arrow'], ['down', 'Down arrow'], ['left', 'Left arrow'], ['right', 'Right arrow'], ['plus', 'Plus']]);
-function getKeyLabel(key, isMac) {
+const KEY_LABEL = new Map([['ctrl', '@astryx.kbd.key.control'], ['alt', '@astryx.kbd.key.alt'], ['shift', '@astryx.kbd.key.shift'], ['enter', '@astryx.kbd.key.enter'], ['backspace', '@astryx.kbd.key.backspace'], ['escape', '@astryx.kbd.key.escape'], ['tab', '@astryx.kbd.key.tab'], ['up', '@astryx.kbd.key.up'], ['down', '@astryx.kbd.key.down'], ['left', '@astryx.kbd.key.left'], ['right', '@astryx.kbd.key.right'], ['plus', '@astryx.kbd.key.plus']]);
+function getKeyLabel(key, isMac, t) {
   if (key === 'mod') {
-    return isMac ? 'Command' : 'Control';
+    return t(isMac ? '@astryx.kbd.key.command' : '@astryx.kbd.key.control');
   }
-  return KEY_LABEL.get(key) ?? key.toUpperCase();
+  const labelKey = KEY_LABEL.get(key);
+  return labelKey ? t(labelKey) : key.toUpperCase();
 }
 function subscribeToPlatformChanges() {
   return () => {};
@@ -103,6 +106,7 @@ export function Kbd({
   style,
   ...rest
 }) {
+  const t = useTranslator();
   const isMac = useSyncExternalStore(subscribeToPlatformChanges, isApplePlatform, getServerPlatformSnapshot);
   const keyOccurrences = new Map();
   const parts = keys.split('+').map(key => key.trim().toLowerCase()).map(sourceKey => {
@@ -118,7 +122,10 @@ export function Kbd({
   // the visual glyphs below are announced meaninglessly by assistive tech.
   const accessibleName = parts.map(({
     key
-  }) => getKeyLabel(key, isMac)).join(' + ');
+  }) => getKeyLabel(key, isMac, t)).reduce((shortcut, key, index) => index === 0 ? key : t('@astryx.kbd.shortcut', {
+    shortcut,
+    key
+  }), '');
   return /*#__PURE__*/_jsx("span", {
     ...rest,
     ref: ref,
@@ -133,7 +140,7 @@ export function Kbd({
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle x1tgivj0 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
       },
-      children: getKeyDisplay(key, isMac)
+      children: getKeyDisplay(key, isMac, t)
     }, reactKey))
   });
 }

package/dist/Kbd/index.d.ts

@@ -4,6 +4,6 @@
  * @output Exports public API for @astryxdesign/core Kbd
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';
+export { Kbd } from './Kbd.js';
+export type { KbdProps } from './Kbd.js';
 //# sourceMappingURL=index.d.ts.map