@astryxdesign/core 0.1.3 → 0.1.4-canary.02643db

package/src/Calendar/dayCellUtils.test.ts

@@ -5,10 +5,13 @@ import {
   computeDayCellState,
   computeRangeRounding,
   computePreviewRounding,
+  computeDayNeighborContinuity,
   isEndpoint,
+  isRangeHighlighted,
+  isPreviewHighlighted,
   type DayCellStateInput,
 } from './dayCellUtils';
-import {plainDateFromISO} from '../utils/plainDate';
+import {plainDateFromISO, plainDateIsEqual} from '../utils/plainDate';
 
 function makeInput(
   overrides: Partial<DayCellStateInput> = {},
@@ -118,6 +121,49 @@ describe('computeDayCellState', () => {
     expect(stateLast.isFirstColumn).toBe(false);
     expect(stateLast.isLastColumn).toBe(true);
   });
+
+  // Regression (#2715): outside (adjacent-month) days must not receive
+  // selection/range/preview state. In the two-month layout the same date
+  // renders in both panes, so highlighting the spillover copy would duplicate
+  // the selection onto the wrong month's pane.
+  it('does not apply range state to outside days', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        isOutside: true,
+        mode: 'range',
+        rangeStart: plainDateFromISO('2024-03-15'),
+        rangeEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    expect(state.isInRange).toBe(false);
+    expect(state.isRangeStart).toBe(false);
+    expect(state.isRangeEnd).toBe(false);
+  });
+
+  it('does not apply preview state to outside days', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        isOutside: true,
+        previewStart: plainDateFromISO('2024-03-15'),
+        previewEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    expect(state.isInPreview).toBe(false);
+    expect(state.isPreviewStart).toBe(false);
+    expect(state.isPreviewEnd).toBe(false);
+  });
+
+  it('does not mark an outside day as selected', () => {
+    const state = computeDayCellState(
+      makeInput({
+        isOutside: true,
+        selectedDate: plainDateFromISO('2024-03-15'),
+      }),
+    );
+    expect(state.isSelected).toBe(false);
+  });
 });
 
 describe('computeRangeRounding', () => {
@@ -161,6 +207,96 @@ describe('computeRangeRounding', () => {
     const rounding = computeRangeRounding(state);
     expect(rounding.roundRight).toBe(true);
   });
+
+  // #2715 follow-up: cap the highlight where the range meets a disabled or
+  // adjacent-month (outside) day. A mid-range day (neither endpoint nor grid
+  // edge) gets an end cap on the side whose neighbour breaks the run.
+  it('caps the right edge when the next day breaks the range (e.g. disabled)', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        mode: 'range',
+        rangeStart: plainDateFromISO('2024-03-15'),
+        rangeEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computeRangeRounding(state, {
+      prevInRange: true,
+      nextInRange: false,
+    });
+    expect(rounding.roundLeft).toBe(false);
+    expect(rounding.roundRight).toBe(true);
+  });
+
+  it('caps the left edge when the previous day breaks the range', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        mode: 'range',
+        rangeStart: plainDateFromISO('2024-03-15'),
+        rangeEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computeRangeRounding(state, {
+      prevInRange: false,
+      nextInRange: true,
+    });
+    expect(rounding.roundLeft).toBe(true);
+    expect(rounding.roundRight).toBe(false);
+  });
+
+  it('does not cap a mid-range day when both neighbours continue the range', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        mode: 'range',
+        rangeStart: plainDateFromISO('2024-03-15'),
+        rangeEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computeRangeRounding(state, {
+      prevInRange: true,
+      nextInRange: true,
+    });
+    expect(rounding.roundLeft).toBe(false);
+    expect(rounding.roundRight).toBe(false);
+  });
+});
+
+describe('isRangeHighlighted', () => {
+  const base = {
+    date: plainDateFromISO('2024-03-17'),
+    mode: 'range' as const,
+    rangeStart: plainDateFromISO('2024-03-15'),
+    rangeEnd: plainDateFromISO('2024-03-20'),
+    isDisabled: false,
+    isOutside: false,
+  };
+
+  it('true for an enabled in-month day inside the range', () => {
+    expect(isRangeHighlighted(base)).toBe(true);
+  });
+
+  it('false for a disabled day (breaks continuity)', () => {
+    expect(isRangeHighlighted({...base, isDisabled: true})).toBe(false);
+  });
+
+  it('false for an adjacent-month (outside) day', () => {
+    expect(isRangeHighlighted({...base, isOutside: true})).toBe(false);
+  });
+
+  it('false outside the range bounds', () => {
+    expect(
+      isRangeHighlighted({...base, date: plainDateFromISO('2024-03-25')}),
+    ).toBe(false);
+  });
+
+  it('false in single mode', () => {
+    expect(isRangeHighlighted({...base, mode: 'single'})).toBe(false);
+  });
 });
 
 describe('computePreviewRounding', () => {
@@ -175,6 +311,175 @@ describe('computePreviewRounding', () => {
     expect(rounding.roundLeft).toBe(true);
     expect(rounding.roundRight).toBe(false);
   });
+
+  // #2715: the hover preview needs the same disabled/outside caps as the
+  // committed range, so the transient highlight terminates cleanly at the gap.
+  it('caps the right edge when the next day breaks the preview run', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        previewStart: plainDateFromISO('2024-03-15'),
+        previewEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computePreviewRounding(state, {
+      prevInPreview: true,
+      nextInPreview: false,
+    });
+    expect(rounding.roundLeft).toBe(false);
+    expect(rounding.roundRight).toBe(true);
+  });
+
+  it('caps the left edge when the previous day breaks the preview run', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        previewStart: plainDateFromISO('2024-03-15'),
+        previewEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computePreviewRounding(state, {
+      prevInPreview: false,
+      nextInPreview: true,
+    });
+    expect(rounding.roundLeft).toBe(true);
+    expect(rounding.roundRight).toBe(false);
+  });
+
+  it('does not cap a mid-preview day when both neighbours continue', () => {
+    const state = computeDayCellState(
+      makeInput({
+        date: plainDateFromISO('2024-03-17'),
+        dayIndex: 3,
+        previewStart: plainDateFromISO('2024-03-15'),
+        previewEnd: plainDateFromISO('2024-03-20'),
+      }),
+    );
+    const rounding = computePreviewRounding(state, {
+      prevInPreview: true,
+      nextInPreview: true,
+    });
+    expect(rounding.roundLeft).toBe(false);
+    expect(rounding.roundRight).toBe(false);
+  });
+});
+
+describe('isPreviewHighlighted', () => {
+  const base = {
+    date: plainDateFromISO('2024-03-17'),
+    previewStart: plainDateFromISO('2024-03-15'),
+    previewEnd: plainDateFromISO('2024-03-20'),
+    isDisabled: false,
+    isOutside: false,
+  };
+
+  it('true for an enabled in-month day inside the preview span', () => {
+    expect(isPreviewHighlighted(base)).toBe(true);
+  });
+
+  it('false for a disabled day', () => {
+    expect(isPreviewHighlighted({...base, isDisabled: true})).toBe(false);
+  });
+
+  it('false for an adjacent-month (outside) day', () => {
+    expect(isPreviewHighlighted({...base, isOutside: true})).toBe(false);
+  });
+
+  it('false outside the preview bounds', () => {
+    expect(
+      isPreviewHighlighted({...base, date: plainDateFromISO('2024-03-25')}),
+    ).toBe(false);
+  });
+
+  it('false with no preview span', () => {
+    expect(
+      isPreviewHighlighted({...base, previewStart: null, previewEnd: null}),
+    ).toBe(false);
+  });
+});
+
+describe('computeDayNeighborContinuity', () => {
+  // A week row of 5 consecutive in-month days, Mar 15–19.
+  const week = (
+    [
+      '2024-03-15',
+      '2024-03-16',
+      '2024-03-17',
+      '2024-03-18',
+      '2024-03-19',
+    ] as const
+  ).map(iso => ({
+    date: plainDateFromISO(iso),
+    isOutside: false,
+  }));
+
+  const baseInput = {
+    week,
+    mode: 'range' as const,
+    rangeStart: plainDateFromISO('2024-03-15'),
+    rangeEnd: plainDateFromISO('2024-03-19'),
+    previewStart: null,
+    previewEnd: null,
+    isDisabled: () => false,
+  };
+
+  it('reports both range neighbours continuing for a mid-range day', () => {
+    const c = computeDayNeighborContinuity({...baseInput, dayIndex: 2});
+    expect(c.prevInRange).toBe(true);
+    expect(c.nextInRange).toBe(true);
+  });
+
+  it('breaks continuity where a neighbour is disabled', () => {
+    // Disable Mar 18 (index 3): its neighbour Mar 17 (index 2) sees a break to
+    // the right.
+    const disabledDay = plainDateFromISO('2024-03-18');
+    const c = computeDayNeighborContinuity({
+      ...baseInput,
+      dayIndex: 2,
+      isDisabled: date => plainDateIsEqual(date, disabledDay),
+    });
+    expect(c.prevInRange).toBe(true);
+    expect(c.nextInRange).toBe(false);
+  });
+
+  it('breaks continuity where a neighbour is an outside day', () => {
+    const weekWithOutside = week.map((d, i) =>
+      i === 3 ? {...d, isOutside: true} : d,
+    );
+    const c = computeDayNeighborContinuity({
+      ...baseInput,
+      week: weekWithOutside,
+      dayIndex: 2,
+    });
+    expect(c.nextInRange).toBe(false);
+  });
+
+  it('treats a missing neighbour (row edge) as a break', () => {
+    const first = computeDayNeighborContinuity({...baseInput, dayIndex: 0});
+    expect(first.prevInRange).toBe(false);
+    const last = computeDayNeighborContinuity({
+      ...baseInput,
+      dayIndex: week.length - 1,
+    });
+    expect(last.nextInRange).toBe(false);
+  });
+
+  it('derives preview continuity independently of range', () => {
+    const c = computeDayNeighborContinuity({
+      ...baseInput,
+      rangeStart: null,
+      rangeEnd: null,
+      previewStart: plainDateFromISO('2024-03-15'),
+      previewEnd: plainDateFromISO('2024-03-19'),
+      dayIndex: 2,
+    });
+    expect(c.prevInRange).toBe(false);
+    expect(c.nextInRange).toBe(false);
+    expect(c.prevInPreview).toBe(true);
+    expect(c.nextInPreview).toBe(true);
+  });
 });
 
 describe('isEndpoint', () => {

package/src/Calendar/dayCellUtils.ts

@@ -31,7 +31,14 @@ export interface DayCellStateInput {
   isOutside: boolean;
 }
 
-/** Derives all visual/interaction states for a single day cell. */
+/**
+ * Derives all visual/interaction states for a single day cell.
+ *
+ * Outside (adjacent-month) days never receive selection, range, or preview
+ * state: in the two-month layout the same date renders in both panes, and
+ * highlighting the spillover copy would duplicate the selection onto the wrong
+ * month's pane (#2715).
+ */
 export function computeDayCellState(input: DayCellStateInput): DayCellState {
   const {
     date,
@@ -51,55 +58,241 @@ export function computeDayCellState(input: DayCellStateInput): DayCellState {
     effectivelyDisabled: isDisabled || isOutside,
     isToday: plainDateIsEqual(date, today),
     isSelected: !!(
+      !isOutside &&
       mode === 'single' &&
       selectedDate &&
       plainDateIsEqual(date, selectedDate)
     ),
     isInRange: !!(
+      !isOutside &&
       mode === 'range' &&
       rangeStart &&
       rangeEnd &&
       plainDateIsInRange(date, [rangeStart, rangeEnd])
     ),
     isRangeStart: !!(
+      !isOutside &&
       mode === 'range' &&
       rangeStart &&
       plainDateIsEqual(date, rangeStart)
     ),
     isRangeEnd: !!(
+      !isOutside &&
       mode === 'range' &&
       rangeEnd &&
       plainDateIsEqual(date, rangeEnd)
     ),
     isInPreview: !!(
+      !isOutside &&
       previewStart &&
       previewEnd &&
       plainDateIsInRange(date, [previewStart, previewEnd])
     ),
-    isPreviewStart: !!(previewStart && plainDateIsEqual(date, previewStart)),
-    isPreviewEnd: !!(previewEnd && plainDateIsEqual(date, previewEnd)),
+    isPreviewStart: !!(
+      !isOutside &&
+      previewStart &&
+      plainDateIsEqual(date, previewStart)
+    ),
+    isPreviewEnd: !!(
+      !isOutside &&
+      previewEnd &&
+      plainDateIsEqual(date, previewEnd)
+    ),
     isFirstColumn: dayIndex === 0,
     isLastColumn: dayIndex === 6,
   };
 }
 
-/** Edge rounding for range background (rounds at grid edges and range endpoints). */
-export function computeRangeRounding(state: DayCellState) {
+/**
+ * Generic rounding for a highlight run (range or preview).
+ *
+ * Rounds at the run's endpoints and the grid row edges, and also caps the
+ * highlight where the run meets a break in continuity — a neighbouring cell
+ * that is disabled or an adjacent-month (outside) day (#2715).
+ */
+function computeHighlightRounding(input: {
+  isStart: boolean;
+  isEnd: boolean;
+  isFirstColumn: boolean;
+  isLastColumn: boolean;
+  prevContinues?: boolean;
+  nextContinues?: boolean;
+}) {
+  const prevBreaks =
+    input.prevContinues !== undefined ? !input.prevContinues : false;
+  const nextBreaks =
+    input.nextContinues !== undefined ? !input.nextContinues : false;
   return {
-    roundLeft: state.isRangeStart || state.isFirstColumn,
-    roundRight: state.isRangeEnd || state.isLastColumn,
+    roundLeft: input.isStart || input.isFirstColumn || prevBreaks,
+    roundRight: input.isEnd || input.isLastColumn || nextBreaks,
   };
 }
 
-/** Edge rounding for preview background. */
-export function computePreviewRounding(state: DayCellState) {
-  return {
-    roundLeft: state.isPreviewStart || state.isFirstColumn,
-    roundRight: state.isPreviewEnd || state.isLastColumn,
-  };
+/** Rounding for the committed range background. */
+export function computeRangeRounding(
+  state: DayCellState,
+  neighbors?: {prevInRange?: boolean; nextInRange?: boolean},
+) {
+  return computeHighlightRounding({
+    isStart: state.isRangeStart,
+    isEnd: state.isRangeEnd,
+    isFirstColumn: state.isFirstColumn,
+    isLastColumn: state.isLastColumn,
+    prevContinues: neighbors?.prevInRange,
+    nextContinues: neighbors?.nextInRange,
+  });
+}
+
+/** Rounding for the hover-preview background. */
+export function computePreviewRounding(
+  state: DayCellState,
+  neighbors?: {prevInPreview?: boolean; nextInPreview?: boolean},
+) {
+  return computeHighlightRounding({
+    isStart: state.isPreviewStart,
+    isEnd: state.isPreviewEnd,
+    isFirstColumn: state.isFirstColumn,
+    isLastColumn: state.isLastColumn,
+    prevContinues: neighbors?.prevInPreview,
+    nextContinues: neighbors?.nextInPreview,
+  });
 }
 
 /** Whether a day is a selection endpoint (selected, range start, or range end). */
 export function isEndpoint(state: DayCellState): boolean {
   return state.isSelected || state.isRangeStart || state.isRangeEnd;
 }
+
+/**
+ * Whether a day is part of an unbroken highlight run (enabled, in-month, inside
+ * the given span). Outside and disabled days break the run, producing end caps.
+ */
+function isSpanHighlighted(input: {
+  date: PlainDate;
+  spanStart: PlainDate | null;
+  spanEnd: PlainDate | null;
+  isDisabled: boolean;
+  isOutside: boolean;
+}): boolean {
+  const {date, spanStart, spanEnd, isDisabled, isOutside} = input;
+  return !!(
+    !isOutside &&
+    !isDisabled &&
+    spanStart &&
+    spanEnd &&
+    plainDateIsInRange(date, [spanStart, spanEnd])
+  );
+}
+
+/** Whether a day participates in the continuous committed-range highlight. */
+export function isRangeHighlighted(input: {
+  date: PlainDate;
+  mode: 'single' | 'range';
+  rangeStart: PlainDate | null;
+  rangeEnd: PlainDate | null;
+  isDisabled: boolean;
+  isOutside: boolean;
+}): boolean {
+  if (input.mode !== 'range') {return false;}
+  return isSpanHighlighted({
+    date: input.date,
+    spanStart: input.rangeStart,
+    spanEnd: input.rangeEnd,
+    isDisabled: input.isDisabled,
+    isOutside: input.isOutside,
+  });
+}
+
+/** Whether a day participates in the continuous hover-preview highlight. */
+export function isPreviewHighlighted(input: {
+  date: PlainDate;
+  previewStart: PlainDate | null;
+  previewEnd: PlainDate | null;
+  isDisabled: boolean;
+  isOutside: boolean;
+}): boolean {
+  return isSpanHighlighted({
+    date: input.date,
+    spanStart: input.previewStart,
+    spanEnd: input.previewEnd,
+    isDisabled: input.isDisabled,
+    isOutside: input.isOutside,
+  });
+}
+
+/**
+ * Continuity of the highlighted run through a day's immediate neighbours in the
+ * same week row, for both the committed range and the hover preview. A day gets
+ * an end cap on whichever side its neighbour does not continue the run (see
+ * {@link computeRangeRounding} / {@link computePreviewRounding}).
+ */
+export interface DayNeighborContinuity {
+  prevInRange: boolean;
+  nextInRange: boolean;
+  prevInPreview: boolean;
+  nextInPreview: boolean;
+}
+
+/** Minimal shape needed from a week's day cells to derive neighbour continuity. */
+export interface NeighborDay {
+  date: PlainDate;
+  isOutside: boolean;
+}
+
+/**
+ * Derives whether the previous/next day in the same week row continues the
+ * highlighted run, for both range and preview. Broken out from the render path
+ * so the neighbour logic is unit-testable in isolation.
+ */
+export function computeDayNeighborContinuity(input: {
+  week: ReadonlyArray<NeighborDay>;
+  dayIndex: number;
+  mode: 'single' | 'range';
+  rangeStart: PlainDate | null;
+  rangeEnd: PlainDate | null;
+  previewStart: PlainDate | null;
+  previewEnd: PlainDate | null;
+  isDisabled: (date: PlainDate) => boolean;
+}): DayNeighborContinuity {
+  const {
+    week,
+    dayIndex,
+    mode,
+    rangeStart,
+    rangeEnd,
+    previewStart,
+    previewEnd,
+    isDisabled,
+  } = input;
+
+  const prev = week[dayIndex - 1];
+  const next = week[dayIndex + 1];
+
+  const rangeContinues = (day: NeighborDay | undefined): boolean =>
+    day != null &&
+    isRangeHighlighted({
+      date: day.date,
+      mode,
+      rangeStart,
+      rangeEnd,
+      isDisabled: isDisabled(day.date),
+      isOutside: day.isOutside,
+    });
+
+  const previewContinues = (day: NeighborDay | undefined): boolean =>
+    day != null &&
+    isPreviewHighlighted({
+      date: day.date,
+      previewStart,
+      previewEnd,
+      isDisabled: isDisabled(day.date),
+      isOutside: day.isOutside,
+    });
+
+  return {
+    prevInRange: rangeContinues(prev),
+    nextInRange: rangeContinues(next),
+    prevInPreview: previewContinues(prev),
+    nextInPreview: previewContinues(next),
+  };
+}

package/src/Card/Card.doc.mjs

@@ -84,7 +84,7 @@ export const docs = {
   theming: {
     container: true,
     targets: [
-      {className: 'astryx-card'},
+      {className: 'astryx-card', visualProps: ['variant']},
     ],
     vars: [
       {name: '--_card-radius', description: 'Border radius of the card', default: 'var(--radius-container)', private: true},

package/src/Chat/useChatNewMessages.test.tsx

@@ -64,7 +64,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
       const {contentRef} = useChatNewMessages({isLocked: true, onResize});
       return (
         <div ref={contentRef} data-testid="content">
-          <div className="xds-chat-message">msg</div>
+          <div className="astryx-chat-message">msg</div>
         </div>
       );
     }
@@ -91,7 +91,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
           </button>
           {mounted && (
             <div ref={contentRef} data-testid="content">
-              <div className="xds-chat-message">msg</div>
+              <div className="astryx-chat-message">msg</div>
             </div>
           )}
         </>
@@ -129,7 +129,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
           </button>
           {mounted && (
             <div ref={contentRef} data-testid="content">
-              <div className="xds-chat-message">msg</div>
+              <div className="astryx-chat-message">msg</div>
             </div>
           )}
         </>
@@ -198,7 +198,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
       if (!el.querySelector?.('.astryx-chat-message')) {
         return false;
       }
-      if (el.className?.includes('xds-chat-layout')) {
+      if (el.className?.includes('astryx-chat-layout')) {
         return false;
       }
       return true;

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -63,11 +63,17 @@ export const docs = {
       description: 'Whether the checkbox is disabled.',
       default: 'false',
     },
+    {
+      name: 'htmlName',
+      type: 'string',
+      description:
+        'The HTML name attribute for the underlying checkbox input, useful for form submissions (submits "on" when checked).',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isReadOnly',
@@ -171,6 +177,7 @@ export const docsZh = {
     },
     {name: 'isLoading', type: 'boolean', description: '复选框是否处于加载状态。显示旋转器并阻止交互。', default: 'false'},
     {name: 'isDisabled', type: 'boolean', description: '复选框是否禁用。', default: 'false'},
+    {name: 'htmlName', type: 'string', description: '底层复选框输入的 HTML name 属性，用于表单提交（勾选时提交 "on"）。'},
     {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.'},
     {name: 'isReadOnly', type: 'boolean', description: '复选框是否为只读。以完整不透明度显示当前状态但阻止交互。与 isDisabled 不同，只读复选框不会变暗。', default: 'false'},
     {name: 'isOptional', type: 'boolean', description: '字段是否可选。与 isRequired 互斥。', default: 'false'},
@@ -222,6 +229,7 @@ export const docsDense = {
     changeAction: 'async action; fires after onChange, shows spinner while pending',
     isLoading: 'shows spinner + prevents interaction',
     isDisabled: 'disable checkbox',
+    htmlName: 'HTML name attr for the checkbox; submits "on" when checked.',
     isOptional: 'mark field as optional (mutually exclusive w/ isRequired)',
     isRequired: 'mark field as required (mutually exclusive w/ isOptional)',
     size: 'sm (compact) or md (default)',