@astryxdesign/core 0.5.1 → 0.5.2-canary.11abdc7

package/locales/ru-RU.json

@@ -647,10 +647,6 @@
     "defaultMessage": "Выберите дату",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Выбор даты",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(откроется в новой вкладке)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/sr-SP.json

@@ -647,10 +647,6 @@
     "defaultMessage": "Изаберите датум",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Изаберите датум",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(отвара се у новој картици)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/sv-SE.json

@@ -643,10 +643,6 @@
     "defaultMessage": "Välj ett datum",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Välj datum",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(öppnas i ny flik)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/tr-TR.json

@@ -647,10 +647,6 @@
     "defaultMessage": "Bir tarih seçin",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Tarih seçin",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(yeni sekmede açılır)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/uk-UA.json

@@ -647,10 +647,6 @@
     "defaultMessage": "Виберіть дату",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Виберіть дату",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(відкривається в новій вкладці)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/vi-VN.json

@@ -643,10 +643,6 @@
     "defaultMessage": "Chọn ngày",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "Chọn ngày",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "(mở trong tab mới)",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/zh-CN.json

@@ -651,10 +651,6 @@
     "defaultMessage": "选择日期",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "选择日期",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "（在新标签页中打开）",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/locales/zh-TW.json

@@ -651,10 +651,6 @@
     "defaultMessage": "選擇日期",
     "description": "Grey placeholder inside an empty DateTimeInput field. Note: the English says only \"date\" though the field is date+time — do not add \"and time\" unless natural."
   },
-  "@astryx.dateTimeInput.dialogLabel": {
-    "defaultMessage": "選擇日期",
-    "description": "Screen-reader-only accessible name for the DateTimeInput picker dialog. Same English-only \"date\" phrasing as the placeholder — don't add \"and time\" unless natural."
-  },
   "@astryx.link.newTab": {
     "defaultMessage": "（在新分頁中開啟）",
     "description": "Visually-hidden (screen-reader-only) suffix appended to a Link's accessible name when it opens in a new tab. Example: `Documentation (opens in new tab)`."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.1",
+  "version": "0.5.2-canary.11abdc7",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,6 +661,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/cli": "0.5.2-canary.11abdc7",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
@@ -668,8 +669,7 @@
     "@stylexjs/babel-plugin": "^0.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@testing-library/react": "^16.3.2",
-    "@astryxdesign/cli": "0.5.1"
+    "@testing-library/react": "^16.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Calendar/Calendar.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Calendar',
   displayName: 'Calendar',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["calendar","datepicker","date picker","rangepicker","date range","monthview","daypicker"],
   usage: {
     description:

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxInput',
   displayName: 'Checkbox Input',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["checkbox","check","toggle","tick","indeterminate","boolean","tristate"],
   props: [
     {

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxList',
   displayName: 'Checkbox List',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: ["checkboxlist","checkbox","checkboxgroup","multichoice","multiselect","checklist"],
   description: 'Checkbox group container with field integration for label, description, and status.',

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'selector',
     'picker',
@@ -214,7 +214,7 @@ export const docsDense = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   description:
     'Input/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
   usage: {

package/src/DateInput/DateInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateInput',
   displayName: 'Date Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'dateinput',
     'datepicker',

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateRangeInput',
   displayName: 'Date Range Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'daterangepicker',
     'daterange',

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateTimeInput',
   displayName: 'Date Time Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'datetimepicker',
     'datetime',

package/src/Field/Field.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Field',
   displayName: 'Field',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["field","formfield","formgroup","formcontrol","label","input","required","optional","helpertext","hint"],
   playground: {
     defaults: {

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -5,7 +5,7 @@ export const docs = {
   name: 'FieldStatus',
   displayName: 'Field Status',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   description:
     'Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.',

package/src/FileInput/FileInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'FileInput',
   displayName: 'File Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["fileinput","file","upload","drag","drop","dropzone","attachment","browse"],
   props: [
     {

package/src/Indicator/Indicator.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Indicator',
   displayName: 'Indicator',
   group: 'Indicator',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'indicator',

package/src/InputGroup/InputGroup.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'InputGroup',
   displayName: 'Input Group',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'inputgroup',

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'MultiSelector',
   displayName: 'Multi Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'multiselect',
     'checkbox',

package/src/NumberInput/NumberInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'NumberInput',
   displayName: 'Number Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'numberinput',
     'numberfield',

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'PowerSearch',
   displayName: 'Power Search',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'powersearch',
     'search',

package/src/RadioList/RadioList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'RadioList',
   displayName: 'Radio List',
   group: 'Radio',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["radiolist","radio","radiogroup","radiobutton","optionlist","singlechoice","choicelist"],
   theming: {
     targets: [

package/src/Selector/Selector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Selector',
   displayName: 'Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'selector',
     'select',

package/src/Slider/Slider.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Slider',
   displayName: 'Slider',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["slider","range","slidebar","trackbar","scrubber","knob","thumb","rangeslider"],
   playground: {
     defaults: {
@@ -364,4 +364,4 @@ export const docsDense = {
     labelTooltip: 'Tooltip text for info icon next to label.',
     xstyle: 'StyleX layout styles; must be stylex.create() value.',
   },
-};
+};

package/src/Switch/Switch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Switch',
   displayName: 'Switch',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'switch',
     'toggle',

package/src/TextArea/TextArea.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextArea',
   displayName: 'Text Area',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textarea","textfield","multiline","comment","message","autoresize","autosize","charlimit"],
   props: [
     {

package/src/TextInput/TextInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextInput',
   displayName: 'Text Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textinput","textfield","input","search","clearable","prefix","suffix","adornment","validation"],
   props: [
     {

package/src/TimeInput/TimeInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TimeInput',
   displayName: 'Time Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'timeinput',
     'timepicker',

package/src/Toast/ToastViewport.test.tsx

@@ -793,6 +793,11 @@ describe('Toast swipe dismissal', () => {
     expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
       '120%',
     );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
     expect(getComputedStyle(visualToast).transform).not.toContain('translateX');
   });
 
@@ -1147,11 +1152,9 @@ describe('Toast swipe dismissal', () => {
 
     expect(onHide).toHaveBeenCalledWith('manual');
     expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
-      '0.700',
-    );
-    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe(
-      '0.985',
+      '',
     );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
     expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
       'calc(-1 * 120%)',
     );
@@ -1248,6 +1251,117 @@ describe('Toast swipe dismissal', () => {
     );
   });
 
+  it('abandons a one-finger swipe when a second touch starts', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const dispatchTouch = (
+      type: 'touchstart' | 'touchmove',
+      touches: {identifier: number; clientX: number; clientY: number}[],
+      changedTouches = touches,
+    ) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      Object.defineProperty(event, 'touches', {value: touches});
+      Object.defineProperty(event, 'changedTouches', {value: changedTouches});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+    const first = {identifier: 51, clientX: 10, clientY: 0};
+    const second = {identifier: 52, clientX: 30, clientY: 40};
+
+    act(() => {
+      dispatchTouch('touchstart', [first]);
+      dispatchTouch('touchmove', [{...first, clientY: 40}]);
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('40px');
+
+    act(() => {
+      dispatchTouch('touchstart', [first, second], [second]);
+    });
+    const multitouchMove = dispatchTouch('touchmove', [first, second]);
+
+    expect(multitouchMove.defaultPrevented).toBe(false);
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it('does not dismiss when another touch remains outside the Toast', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const first = {identifier: 61, clientX: 10, clientY: 0};
+    const second = {identifier: 62, clientX: 200, clientY: 200};
+    const dispatchTouch = (
+      type: 'touchstart' | 'touchmove' | 'touchend',
+      touches: (typeof first)[],
+      changedTouches: (typeof first)[],
+    ) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      Object.defineProperty(event, 'touches', {value: touches});
+      Object.defineProperty(event, 'changedTouches', {value: changedTouches});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+
+    act(() => {
+      dispatchTouch('touchstart', [first], [first]);
+      dispatchTouch(
+        'touchmove',
+        [{...first, clientY: 60}],
+        [{...first, clientY: 60}],
+      );
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('60px');
+
+    // The second contact began outside the Toast, so its touchstart did not
+    // reach the Toast listener. Ending the tracked finger must still cancel
+    // while that other contact remains active.
+    act(() => {
+      dispatchTouch('touchend', [second], [{...first, clientY: 60}]);
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+  });
+
+  it('does not let a pen event with the same numeric ID control a touch gesture', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const touch = {identifier: 7, clientX: 10, clientY: 0};
+    const touchStart = new Event('touchstart', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(touchStart, 'touches', {value: [touch]});
+    Object.defineProperty(touchStart, 'changedTouches', {value: [touch]});
+
+    act(() => {
+      visualToast.dispatchEvent(touchStart);
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 10,
+        clientY: 60,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 10,
+        clientY: 60,
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+
+    act(() => {
+      visualToast.dispatchEvent(
+        new Event('touchcancel', {bubbles: true, cancelable: true}),
+      );
+    });
+  });
+
   it('removes native touch listeners when a Toast unmounts', () => {
     const {visualToast, unmount} = renderSwipeToast();
     const removeListener = vi.spyOn(visualToast, 'removeEventListener');