@misoto22/kioku-ui 0.0.0 → 0.2.0

package/src/CheckboxInput/CheckboxInput.tsx

@@ -0,0 +1,276 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {useFieldControl} from '../Field/index.js';
+
+// The box is one micro-control tall — the same block a switch track occupies,
+// so a row of checkboxes and a row of switches sit on the same rhythm. Its
+// offset is the relationship that matters: it centres on the *first line* of
+// the label rather than on the label's whole box, so a label that wraps to two
+// lines does not drag the box down with it. Both survive a density change
+// because neither is a measurement.
+const boxSize = semanticTokens.spacingLg;
+const boxFirstLineOffset = `calc((${semanticTokens.fontSizeMd} * ${semanticTokens.lineHeightBody} - ${boxSize}) / 2)`;
+
+// The mark inside the box. It is stroked at twice the hairline — one hairline
+// disappears inside a 14px square — and sized as a fraction of the box rather
+// than as a length, so it follows a density change the way the box does.
+const markStroke = `calc(2 * ${semanticTokens.borderWidth})`;
+
+const styles = stylex.create({
+  row: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    fontFamily: semanticTokens.fontFamilyBody,
+    gap: semanticTokens.spacingSm,
+  },
+  // The box is drawn here, not by the engine. Left native, this component
+  // contributed exactly one declaration — `accent-color` — and the browser
+  // supplied the white fill, the #767676 edge, the radius, the check glyph and
+  // every disabled grey. None of those are in this system, and no amount of
+  // tinting makes them join it. `appearance: none` is what hands authorship
+  // back; `Slider` makes the same move for the same reason.
+  //
+  // It is still a real `<input type="checkbox">`: the click target, the label
+  // association, the form value, the space key and the accessibility tree all
+  // stay where they were. Only the paint changes.
+  box: {
+    appearance: 'none',
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    blockSize: boxSize,
+    borderColor: semanticTokens.borderStrong,
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    display: 'inline-block',
+    flexShrink: 0,
+    inlineSize: boxSize,
+    // The UA gives a checkbox 3px/4px of its own margin. Left in place it
+    // insets the box from the row's start edge and pushes the label to 9px,
+    // so the 6px gap declared above was never the gap on screen.
+    marginBlockEnd: 0,
+    marginBlockStart: boxFirstLineOffset,
+    marginInline: 0,
+    position: 'relative',
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'background-color, border-color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    ':disabled': {
+      backgroundColor: semanticTokens.colorDisabledSurface,
+      borderColor: semanticTokens.borderDisabled,
+      cursor: 'default',
+    },
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':hover:not(:disabled)': {borderColor: semanticTokens.borderInteractive},
+  },
+  // Holding is a mark, not a fill: a tick stroked in ink inside the same well.
+  // It is two edges of an empty box stood on its corner, so it takes its
+  // colour from the palette — an image could not, across four skins and two
+  // appearances.
+  boxChecked: {
+    '::before': {
+      blockSize: '58%',
+      borderBlockEndColor: semanticTokens.colorText,
+      borderBlockEndStyle: semanticTokens.borderStyle,
+      borderBlockEndWidth: markStroke,
+      borderInlineEndColor: semanticTokens.colorText,
+      borderInlineEndStyle: semanticTokens.borderStyle,
+      borderInlineEndWidth: markStroke,
+      content: '',
+      inlineSize: '30%',
+      insetBlockStart: '50%',
+      insetInlineStart: '50%',
+      position: 'absolute',
+      transform: 'translate(-50%, -58%) rotate(45deg)',
+    },
+  },
+  boxCheckedDisabled: {
+    '::before': {
+      borderBlockEndColor: semanticTokens.colorDisabledText,
+      borderInlineEndColor: semanticTokens.colorDisabledText,
+    },
+  },
+  // Partly held is a rule rather than a tick: the question has an answer, but
+  // not one this box can state.
+  boxIndeterminate: {
+    '::before': {
+      backgroundColor: semanticTokens.colorText,
+      blockSize: markStroke,
+      content: '',
+      inlineSize: '50%',
+      insetBlockStart: '50%',
+      insetInlineStart: '50%',
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+    },
+  },
+  boxIndeterminateDisabled: {
+    '::before': {backgroundColor: semanticTokens.colorDisabledText},
+  },
+  text: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: semanticTokens.spacingXs,
+  },
+  label: {
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    letterSpacing: semanticTokens.letterSpacingLabel,
+    lineHeight: semanticTokens.lineHeightBody,
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+  },
+  // Holding is a mark on the label, not a fill behind the row.
+  labelChecked: {
+    color: semanticTokens.colorText,
+    fontWeight: semanticTokens.fontWeightMedium,
+  },
+  labelClear: {
+    color: semanticTokens.colorTextSecondary,
+    fontWeight: semanticTokens.fontWeightRegular,
+  },
+  labelDisabled: {
+    color: semanticTokens.colorDisabledText,
+    fontWeight: semanticTokens.fontWeightRegular,
+  },
+  description: {
+    color: semanticTokens.colorTextMuted,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeSm,
+    letterSpacing: semanticTokens.letterSpacingBody,
+    lineHeight: semanticTokens.lineHeightBody,
+  },
+  descriptionDisabled: {color: semanticTokens.colorDisabledText},
+});
+
+type SharedCheckboxProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'checked' | 'children' | 'className' | 'defaultChecked' | 'onChange' | 'type'
+> & {
+  readonly description?: ReactNode;
+  readonly indeterminate?: boolean;
+  readonly label: ReactNode;
+  readonly onCheckedChange?: (checked: boolean) => void;
+};
+
+type ControlledCheckboxProps = SharedCheckboxProps & {
+  readonly checked: boolean;
+  readonly defaultChecked?: never;
+  readonly onCheckedChange: (checked: boolean) => void;
+};
+
+type UncontrolledCheckboxProps = SharedCheckboxProps & {
+  readonly checked?: never;
+  readonly defaultChecked?: boolean;
+};
+
+/** Props for a single independent choice. */
+export type CheckboxInputProps =
+  ControlledCheckboxProps | UncontrolledCheckboxProps;
+
+/**
+ * Records one independent choice. `indeterminate` is a display state only —
+ * it never survives a click, because the DOM has no third value to submit.
+ */
+export function CheckboxInput({
+  'aria-describedby': ariaDescribedBy,
+  checked,
+  defaultChecked = false,
+  description,
+  disabled,
+  id,
+  indeterminate = false,
+  label,
+  onCheckedChange,
+  required,
+  ...props
+}: CheckboxInputProps) {
+  const field = useFieldControl();
+  const boxRef = useRef<HTMLInputElement>(null);
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checked ?? internalChecked;
+  const describedBy =
+    [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') ||
+    undefined;
+
+  // `indeterminate` is a DOM property rather than an attribute, so it is set
+  // imperatively; the mark it draws is the same fact read back out.
+  const showsDash = indeterminate && !isChecked;
+
+  useEffect(() => {
+    if (boxRef.current) {
+      boxRef.current.indeterminate = showsDash;
+    }
+  }, [showsDash]);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const next = event.currentTarget.checked;
+    if (checked === undefined) {
+      setInternalChecked(next);
+    }
+    onCheckedChange?.(next);
+  }
+
+  return (
+    <label {...stylex.props(styles.row)}>
+      <input
+        {...props}
+        aria-describedby={describedBy}
+        checked={isChecked}
+        disabled={disabled}
+        id={field?.controlId ?? id}
+        onChange={handleChange}
+        ref={boxRef}
+        required={required ?? field?.required}
+        {...stylex.props(
+          styles.box,
+          isChecked && styles.boxChecked,
+          isChecked && disabled && styles.boxCheckedDisabled,
+          showsDash && styles.boxIndeterminate,
+          showsDash && disabled && styles.boxIndeterminateDisabled,
+        )}
+        type="checkbox"
+      />
+      <span {...stylex.props(styles.text)}>
+        <span
+          {...stylex.props(
+            styles.label,
+            disabled
+              ? styles.labelDisabled
+              : isChecked
+                ? styles.labelChecked
+                : styles.labelClear,
+          )}
+        >
+          {label}
+        </span>
+        {description === undefined ? null : (
+          <span
+            {...stylex.props(
+              styles.description,
+              disabled && styles.descriptionDisabled,
+            )}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}

package/src/CheckboxInput/index.ts

@@ -0,0 +1 @@
+export {CheckboxInput, type CheckboxInputProps} from './CheckboxInput.js';

package/src/CheckboxList/CheckboxList.doc.ts

@@ -0,0 +1,22 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const checkboxListDoc = {
+  name: 'CheckboxList',
+  description: 'Collects independent choices under one question.',
+  props: [
+    {
+      name: 'defaultValue',
+      description: 'Sets the initial uncontrolled choices.',
+    },
+    {name: 'legend', description: 'States the question the options answer.'},
+    {name: 'onValueChange', description: 'Receives the next set of values.'},
+    {name: 'options', description: 'Supplies the choices in reading order.'},
+    {name: 'value', description: 'Controls the current set of values.'},
+  ],
+  inheritedProps: [
+    'HTMLAttributes<HTMLFieldSetElement> except children, className, defaultValue, and onChange',
+  ],
+  example:
+    '<CheckboxList legend="Notify" onValueChange={setChannels} options={channels} value={channels} />',
+  storyId: 'core-checkbox-list--default',
+} satisfies ComponentDoc;

package/src/CheckboxList/CheckboxList.tsx

@@ -0,0 +1,114 @@
+import * as stylex from '@stylexjs/stylex';
+import {useState, type HTMLAttributes, type ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {CheckboxInput} from '../CheckboxInput/index.js';
+
+const styles = stylex.create({
+  group: {
+    borderStyle: 'none',
+    borderWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: semanticTokens.fontFamilyBody,
+    gap: semanticTokens.spacingSm,
+    margin: 0,
+    padding: 0,
+  },
+  // The question above the answers, set as the same eyebrow `Field` gives its
+  // label: a legend and a field label do one job, and a form that mixes the
+  // two sizes reads as two forms.
+  legend: {
+    color: semanticTokens.colorTextSecondary,
+    fontFamily: semanticTokens.fontFamilyHeading,
+    fontSize: semanticTokens.fontSizeXs,
+    fontWeight: semanticTokens.fontWeightMedium,
+    letterSpacing: semanticTokens.letterSpacingEyebrow,
+    lineHeight: semanticTokens.lineHeightHeading,
+    // A legend is not a flex item: the browser lifts it out of the fieldset's
+    // formatting context and draws it in the border box, so the group's `gap`
+    // never reaches it and the first row sat flush against the question. The
+    // step has to be spent here, and it has to match the group's own gap.
+    marginBlockEnd: semanticTokens.spacingSm,
+    padding: 0,
+  },
+});
+
+/** One independently selectable option. */
+export interface CheckboxOption {
+  readonly description?: ReactNode;
+  readonly disabled?: boolean;
+  readonly label: ReactNode;
+  readonly value: string;
+}
+
+type SharedCheckboxListProps = Omit<
+  HTMLAttributes<HTMLFieldSetElement>,
+  'children' | 'className' | 'defaultValue' | 'onChange'
+> & {
+  readonly legend: ReactNode;
+  readonly onValueChange?: (values: readonly string[]) => void;
+  readonly options: readonly CheckboxOption[];
+};
+
+type ControlledCheckboxListProps = SharedCheckboxListProps & {
+  readonly defaultValue?: never;
+  readonly onValueChange: (values: readonly string[]) => void;
+  readonly value: readonly string[];
+};
+
+type UncontrolledCheckboxListProps = SharedCheckboxListProps & {
+  readonly defaultValue?: readonly string[];
+  readonly value?: never;
+};
+
+/** Props for a set of independent choices under one question. */
+export type CheckboxListProps =
+  ControlledCheckboxListProps | UncontrolledCheckboxListProps;
+
+/**
+ * Collects independent choices under one question. Unlike `RadioList` any
+ * number of options can hold at once.
+ */
+export function CheckboxList({
+  defaultValue,
+  legend,
+  onValueChange,
+  options,
+  value,
+  ...props
+}: CheckboxListProps) {
+  const [internalValue, setInternalValue] = useState<readonly string[]>(
+    defaultValue ?? [],
+  );
+  const selected = value ?? internalValue;
+
+  function toggle(optionValue: string, checked: boolean) {
+    const next = checked
+      ? [...selected, optionValue]
+      : selected.filter((entry) => entry !== optionValue);
+
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+
+  return (
+    <fieldset {...props} {...stylex.props(styles.group)}>
+      <legend {...stylex.props(styles.legend)}>{legend}</legend>
+      {options.map(({description, disabled, label, value: optionValue}) => (
+        <CheckboxInput
+          checked={selected.includes(optionValue)}
+          {...(description === undefined ? {} : {description})}
+          disabled={disabled ?? false}
+          key={optionValue}
+          label={label}
+          onCheckedChange={(checked) => {
+            toggle(optionValue, checked);
+          }}
+        />
+      ))}
+    </fieldset>
+  );
+}

package/src/CheckboxList/index.ts

@@ -0,0 +1,5 @@
+export {
+  CheckboxList,
+  type CheckboxListProps,
+  type CheckboxOption,
+} from './CheckboxList.js';

package/src/Citation/Citation.doc.ts

@@ -0,0 +1,14 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const citationDoc = {
+  name: 'Citation',
+  description: 'Names the source of a claim.',
+  props: [
+    {name: 'children', description: 'Supplies the source name.'},
+    {name: 'href', description: 'Links the source name to the source itself.'},
+    {name: 'marker', description: 'Adds a decorative superscript marker.'},
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children and className'],
+  example: '<Citation href="/rfc" marker="1">RFC 9457</Citation>',
+  storyId: 'core-citation--default',
+} satisfies ComponentDoc;

package/src/Citation/Citation.tsx

@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes, ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {Link} from '../navigation/index.js';
+
+const styles = stylex.create({
+  citation: {
+    color: semanticTokens.colorTextMuted,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeSm,
+    fontStyle: 'normal',
+    letterSpacing: semanticTokens.letterSpacingLabel,
+    lineHeight: semanticTokens.lineHeightBody,
+  },
+  // The marker is a figure, not a word: mono and tabular, so a page of
+  // citations keeps its superscripts on one width.
+  marker: {
+    fontFamily: semanticTokens.fontFamilyMono,
+    fontSize: semanticTokens.fontSizeXs,
+    fontVariantNumeric: 'tabular-nums',
+    letterSpacing: semanticTokens.letterSpacingMono,
+    verticalAlign: 'super',
+  },
+});
+
+/** Props for a reference to a source. */
+export interface CitationProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  'children' | 'className'
+> {
+  readonly children: ReactNode;
+  readonly href?: string;
+  readonly marker?: ReactNode;
+}
+
+/**
+ * Names the source of a claim. When a marker is supplied it is superscripted
+ * and the source name stays in the accessible name, so a reader hears what
+ * "1" refers to rather than the digit alone.
+ */
+export function Citation({children, href, marker, ...props}: CitationProps) {
+  const body =
+    href === undefined ? children : <Link href={href}>{children}</Link>;
+
+  return (
+    <cite {...props} {...stylex.props(styles.citation)}>
+      {marker === undefined ? null : (
+        <span aria-hidden="true" {...stylex.props(styles.marker)}>
+          {marker}
+        </span>
+      )}
+      {body}
+    </cite>
+  );
+}

package/src/Citation/index.ts

@@ -0,0 +1 @@
+export {Citation, type CitationProps} from './Citation.js';

package/src/ClickableCard/ClickableCard.doc.ts

@@ -0,0 +1,10 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const clickableCardDoc = {
+  name: 'ClickableCard',
+  description: 'A card surface that is itself one control.',
+  props: [{name: 'children', description: 'Supplies the card content.'}],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except className'],
+  example: '<ClickableCard onClick={open}>Release 12</ClickableCard>',
+  storyId: 'core-clickable-card--default',
+} satisfies ComponentDoc;

package/src/ClickableCard/ClickableCard.tsx

@@ -0,0 +1,79 @@
+import * as stylex from '@stylexjs/stylex';
+import type {ButtonHTMLAttributes, ReactNode} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  card: {
+    backgroundColor: semanticTokens.colorSurface,
+    // A control's own edge is a real border, so the card carries no
+    // elevation: drawing both would draw the same line twice.
+    borderColor: semanticTokens.borderDefault,
+    borderRadius: semanticTokens.radiusContainer,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    boxShadow: 'none',
+    boxSizing: 'border-box',
+    color: semanticTokens.colorText,
+    cursor: 'pointer',
+    display: 'block',
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    fontWeight: semanticTokens.fontWeightRegular,
+    inlineSize: '100%',
+    letterSpacing: semanticTokens.letterSpacingBody,
+    lineHeight: semanticTokens.lineHeightBody,
+    padding: semanticTokens.spacingLg,
+    textAlign: 'start',
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty:
+      'background-color, background-image, border-color, color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    ':disabled': {
+      backgroundColor: semanticTokens.colorDisabledSurface,
+      borderColor: semanticTokens.borderDisabled,
+      color: semanticTokens.colorDisabledText,
+      cursor: 'default',
+    },
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    // Hover is a wash laid *over* the surface, not a swap of it. The overlay
+    // token is a few per cent of ink; assigning it to `backgroundColor`
+    // throws the card's own fill away and lets the canvas show through, so
+    // the plate loses its ground at exactly the moment it is being pointed
+    // at. The card never lifts, scales, or grows a shadow either: nothing in
+    // this system blurs.
+    ':hover:not(:disabled)': {
+      backgroundImage: `linear-gradient(${semanticTokens.colorOverlayHover}, ${semanticTokens.colorOverlayHover})`,
+      borderColor: semanticTokens.borderInteractive,
+    },
+  },
+});
+
+/** Props for a card that acts as a single control. */
+export interface ClickableCardProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'className'
+> {
+  readonly children: ReactNode;
+}
+
+/**
+ * A card that is itself the control. It emits one button, so the whole surface
+ * is a single tab stop — never nest another control inside it.
+ */
+export function ClickableCard({
+  children,
+  type = 'button',
+  ...props
+}: ClickableCardProps) {
+  return (
+    <button {...props} {...stylex.props(styles.card)} type={type}>
+      {children}
+    </button>
+  );
+}

package/src/ClickableCard/index.ts

@@ -0,0 +1 @@
+export {ClickableCard, type ClickableCardProps} from './ClickableCard.js';

package/src/Code/Code.doc.ts

@@ -0,0 +1,10 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const codeDoc = {
+  name: 'Code',
+  description: 'Marks an inline fragment as code.',
+  props: [{name: 'children', description: 'Supplies the code fragment.'}],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except className'],
+  example: '<Code>pnpm add @misoto22/kioku-ui</Code>',
+  storyId: 'core-code--default',
+} satisfies ComponentDoc;

package/src/Code/Code.tsx

@@ -0,0 +1,31 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    borderRadius: semanticTokens.radiusInner,
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyMono,
+    // A ratio, not a size: inline code tracks whatever it is set inside.
+    fontSize: '0.9375em',
+    fontVariantNumeric: 'tabular-nums',
+    letterSpacing: semanticTokens.letterSpacingMono,
+    paddingInline: semanticTokens.spacingXs,
+    wordBreak: 'break-word',
+  },
+});
+
+/** Props for an inline code fragment. */
+export type CodeProps = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+
+/** Marks a fragment as code without claiming it is a standalone block. */
+export function Code({children, ...props}: CodeProps) {
+  return (
+    <code {...props} {...stylex.props(styles.base)}>
+      {children}
+    </code>
+  );
+}

package/src/Code/index.ts

@@ -0,0 +1 @@
+export {Code, type CodeProps} from './Code.js';

package/src/CodeBlock/CodeBlock.doc.ts

@@ -0,0 +1,21 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const codeBlockDoc = {
+  name: 'CodeBlock',
+  description: 'Shows a block of source with a copy control.',
+  props: [
+    {
+      name: 'wrap',
+      description: 'Wraps long lines instead of scrolling them out of view.',
+    },
+    {name: 'code', description: 'Supplies the source to show and copy.'},
+    {name: 'copiedLabel', description: 'Names the control after a copy.'},
+    {name: 'copyLabel', description: 'Names the copy control.'},
+    {name: 'language', description: 'Records which language the source is in.'},
+  ],
+  inheritedProps: [
+    'HTMLAttributes<HTMLDivElement> except children and className',
+  ],
+  example: '<CodeBlock code="pnpm add @misoto22/kioku-ui" language="bash" />',
+  storyId: 'core-code-block--default',
+} satisfies ComponentDoc;