@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/datepicker/root/date-picker-test.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import DatePicker from '../index';
+
+	type Props = {
+		defaultValue?: string;
+		defaultOpen?: boolean;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		minValue?: string;
+		maxValue?: string;
+		isDateUnavailable?: (date: string) => boolean;
+		popoverAriaLabel?: string;
+	};
+
+	let {
+		defaultValue = '2026-02-10',
+		defaultOpen = false,
+		isDisabled = false,
+		isReadOnly = false,
+		minValue,
+		maxValue,
+		isDateUnavailable,
+		popoverAriaLabel = 'Calendar'
+	}: Props = $props();
+
+	let selectedValue = $state<string | null>('');
+	let openState = $state((() => defaultOpen)());
+	let openReason = $state('');
+</script>
+
+<DatePicker.Root
+	{defaultValue}
+	{defaultOpen}
+	{isDisabled}
+	{isReadOnly}
+	{minValue}
+	{maxValue}
+	{isDateUnavailable}
+	onChange={(nextValue) => {
+		selectedValue = nextValue;
+	}}
+	onOpenChange={(nextOpen, details) => {
+		openState = nextOpen;
+		openReason = details.reason;
+	}}
+>
+	<DatePicker.Input class="date-picker-input" aria-label="Date input">
+		{#snippet children(segment)}
+			<DatePicker.Segment class="date-picker-segment" {segment} />
+		{/snippet}
+	</DatePicker.Input>
+	<DatePicker.Trigger class="date-picker-trigger">Open calendar</DatePicker.Trigger>
+
+	<DatePicker.Popover class="date-picker-popover" aria-label={popoverAriaLabel}>
+		<DatePicker.Calendar class="date-picker-calendar">
+			<div class="flex items-center justify-between gap-2 p-2">
+				<DatePicker.TriggerPrevious
+					class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+				/>
+				<DatePicker.Heading class="text-sm font-medium" />
+				<DatePicker.TriggerNext
+					class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+				/>
+			</div>
+			<DatePicker.Grid class="w-full border-separate border-spacing-1 px-2 pb-2">
+				<DatePicker.GridHeader>
+					{#snippet children(dayLabel: string)}
+						<DatePicker.HeaderCell>
+							{dayLabel}
+						</DatePicker.HeaderCell>
+					{/snippet}
+				</DatePicker.GridHeader>
+				<DatePicker.GridBody>
+					{#snippet children(date: string)}
+						<DatePicker.BodyCell {date} />
+					{/snippet}
+				</DatePicker.GridBody>
+			</DatePicker.Grid>
+		</DatePicker.Calendar>
+	</DatePicker.Popover>
+</DatePicker.Root>
+
+<p data-testid="date-picker-value">{selectedValue}</p>
+<p data-testid="date-picker-open">{String(openState)}</p>
+<p data-testid="date-picker-open-reason">{openReason}</p>
+<button type="button" data-testid="outside-button">Outside</button>

package/dist/datepicker/root/date-picker-test.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    defaultValue?: string;
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    minValue?: string;
+    maxValue?: string;
+    isDateUnavailable?: (date: string) => boolean;
+    popoverAriaLabel?: string;
+};
+declare const DatePickerTest: import("svelte").Component<Props, {}, "">;
+type DatePickerTest = ReturnType<typeof DatePickerTest>;
+export default DatePickerTest;

package/dist/datepicker/root/date-utils.d.ts

@@ -0,0 +1,17 @@
+export type DatePickerDateValue = string;
+export type DatePickerSegmentType = 'day' | 'month' | 'year' | 'literal';
+export type DatePickerEditableSegmentType = Exclude<DatePickerSegmentType, 'literal'>;
+export type DatePickerSegmentPart = {
+    type: DatePickerSegmentType;
+    text: string;
+    value: string;
+    placeholder: string;
+    isPlaceholder: boolean;
+};
+export declare function isValidDatePickerValue(value: string | undefined): value is DatePickerDateValue;
+export declare function parseDatePickerValue(value: string): Date | null;
+export declare function formatDatePickerValue(date: Date): DatePickerDateValue;
+export declare function compareDatePickerValues(left: DatePickerDateValue, right: DatePickerDateValue): number;
+export declare function getDatePickerSegmentOrder(locale: string): DatePickerEditableSegmentType[];
+export declare function getDatePickerSegmentLabel(locale: string, type: DatePickerEditableSegmentType): string;
+export declare function buildDatePickerSegments(locale: string, value?: DatePickerDateValue): DatePickerSegmentPart[];

package/dist/datepicker/root/date-utils.js

@@ -0,0 +1,138 @@
+import { compareDateOnlyValues, formatDateOnlyValue, isValidDateOnlyValue, parseDateOnlyValue } from '../../utils/date-only';
+const segmentsFormatterCache = new Map();
+const segmentTemplateCache = new Map();
+const segmentLabelCache = new Map();
+const fallbackSegmentLabels = {
+    day: 'Day',
+    month: 'Month',
+    year: 'Year'
+};
+export function isValidDatePickerValue(value) {
+    return isValidDateOnlyValue(value);
+}
+export function parseDatePickerValue(value) {
+    return parseDateOnlyValue(value);
+}
+export function formatDatePickerValue(date) {
+    return formatDateOnlyValue(date);
+}
+export function compareDatePickerValues(left, right) {
+    return compareDateOnlyValues(left, right);
+}
+function getPartValue(type, value) {
+    if (!value || !isValidDatePickerValue(value))
+        return '';
+    const [year, month, day] = value.split('-');
+    if (type === 'day')
+        return day;
+    if (type === 'month')
+        return month;
+    return year;
+}
+function getPlaceholder(type) {
+    if (type === 'day')
+        return 'dd';
+    if (type === 'month')
+        return 'mm';
+    return 'yyyy';
+}
+function getFormatter(locale) {
+    let formatter = segmentsFormatterCache.get(locale);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(locale, {
+            timeZone: 'UTC',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit'
+        });
+        segmentsFormatterCache.set(locale, formatter);
+    }
+    return formatter;
+}
+function getSegmentTemplate(locale) {
+    let template = segmentTemplateCache.get(locale);
+    if (template)
+        return template;
+    const formatter = getFormatter(locale);
+    const sample = new Date(Date.UTC(2030, 10, 22));
+    const parts = formatter.formatToParts(sample);
+    template = parts
+        .filter((part) => part.type === 'literal' ||
+        part.type === 'day' ||
+        part.type === 'month' ||
+        part.type === 'year')
+        .map((part) => {
+        if (part.type === 'literal') {
+            return {
+                type: 'literal',
+                text: part.value
+            };
+        }
+        const type = part.type;
+        return {
+            type,
+            placeholder: getPlaceholder(type)
+        };
+    });
+    segmentTemplateCache.set(locale, template);
+    return template;
+}
+function sentenceCase(value) {
+    if (value.length === 0)
+        return value;
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function getSegmentLabels(locale) {
+    const labels = segmentLabelCache.get(locale);
+    if (labels)
+        return labels;
+    const nextLabels = { ...fallbackSegmentLabels };
+    if (typeof Intl.DisplayNames === 'function') {
+        try {
+            const displayNames = new Intl.DisplayNames([locale], {
+                type: 'dateTimeField'
+            });
+            const day = displayNames.of('day');
+            const month = displayNames.of('month');
+            const year = displayNames.of('year');
+            if (day)
+                nextLabels.day = sentenceCase(day);
+            if (month)
+                nextLabels.month = sentenceCase(month);
+            if (year)
+                nextLabels.year = sentenceCase(year);
+        }
+        catch {
+            // Ignore locale/feature errors and use fallback labels.
+        }
+    }
+    segmentLabelCache.set(locale, nextLabels);
+    return nextLabels;
+}
+export function getDatePickerSegmentOrder(locale) {
+    return getSegmentTemplate(locale).flatMap((part) => (part.type === 'literal' ? [] : [part.type]));
+}
+export function getDatePickerSegmentLabel(locale, type) {
+    return getSegmentLabels(locale)[type];
+}
+export function buildDatePickerSegments(locale, value) {
+    return getSegmentTemplate(locale).map((part) => {
+        if (part.type === 'literal') {
+            return {
+                type: 'literal',
+                text: part.text,
+                value: part.text,
+                placeholder: part.text,
+                isPlaceholder: false
+            };
+        }
+        const segmentValue = getPartValue(part.type, value);
+        return {
+            type: part.type,
+            text: segmentValue || part.placeholder,
+            value: segmentValue,
+            placeholder: part.placeholder,
+            isPlaceholder: segmentValue.length === 0
+        };
+    });
+}

package/dist/datepicker/root/draft-evaluation.d.ts

@@ -0,0 +1,13 @@
+import type { DatePickerDateValue } from './date-utils';
+import { type DatePickerSegmentDraft } from './segment-state';
+export type DatePickerDraftStatus = 'empty' | 'incomplete' | 'invalid' | 'out-of-range' | 'unavailable' | 'valid';
+export type DatePickerDraftEvaluation = {
+    status: DatePickerDraftStatus;
+    value: DatePickerDateValue | null;
+    isCommitable: boolean;
+    isInvalid: boolean;
+};
+export declare function evaluateDatePickerDraft(draft: DatePickerSegmentDraft, options: {
+    isDateOutOfRange: (value: DatePickerDateValue) => boolean;
+    isDateUnavailable: (value: DatePickerDateValue) => boolean;
+}): DatePickerDraftEvaluation;

package/dist/datepicker/root/draft-evaluation.js

@@ -0,0 +1,56 @@
+import { getCandidateValueFromDraft } from './segment-state';
+function isDraftEmpty(draft) {
+    return draft.day.length === 0 && draft.month.length === 0 && draft.year.length === 0;
+}
+function isDraftIncomplete(draft) {
+    return draft.day.length === 0 || draft.month.length === 0 || draft.year.length === 0;
+}
+export function evaluateDatePickerDraft(draft, options) {
+    if (isDraftEmpty(draft)) {
+        return {
+            status: 'empty',
+            value: null,
+            isCommitable: false,
+            isInvalid: false
+        };
+    }
+    if (isDraftIncomplete(draft)) {
+        return {
+            status: 'incomplete',
+            value: null,
+            isCommitable: false,
+            isInvalid: true
+        };
+    }
+    const candidate = getCandidateValueFromDraft(draft);
+    if (!candidate) {
+        return {
+            status: 'invalid',
+            value: null,
+            isCommitable: false,
+            isInvalid: true
+        };
+    }
+    if (options.isDateOutOfRange(candidate)) {
+        return {
+            status: 'out-of-range',
+            value: null,
+            isCommitable: false,
+            isInvalid: true
+        };
+    }
+    if (options.isDateUnavailable(candidate)) {
+        return {
+            status: 'unavailable',
+            value: null,
+            isCommitable: false,
+            isInvalid: true
+        };
+    }
+    return {
+        status: 'valid',
+        value: candidate,
+        isCommitable: true,
+        isInvalid: false
+    };
+}

package/dist/datepicker/root/focus-controller.d.ts

@@ -0,0 +1,3 @@
+import { type InputModality } from '../../primitives/input-modality';
+export declare function applyTriggerSelectionCloseState(triggerRef: HTMLElement | null, modality: InputModality): void;
+export declare function computeDatePickerFocusWithin(rootId: string): boolean;

package/dist/datepicker/root/focus-controller.js

@@ -0,0 +1,15 @@
+import { focusWithModality } from '../../primitives/input-modality';
+export function applyTriggerSelectionCloseState(triggerRef, modality) {
+    if (!triggerRef)
+        return;
+    requestAnimationFrame(() => {
+        if (!triggerRef || !triggerRef.isConnected)
+            return;
+        focusWithModality(triggerRef, modality);
+    });
+}
+export function computeDatePickerFocusWithin(rootId) {
+    const root = document.getElementById(rootId);
+    const activeElement = document.activeElement;
+    return !!root && !!activeElement && root.contains(activeElement);
+}

package/dist/datepicker/root/open-change.d.ts

@@ -0,0 +1,5 @@
+import type { DatePickerOpenChangeDetails, DatePickerOpenChangeReason } from './context';
+export declare function createDatePickerOpenChangeDetails(details?: {
+    reason?: DatePickerOpenChangeReason;
+    event?: Event;
+}): DatePickerOpenChangeDetails;

package/dist/datepicker/root/open-change.js

@@ -0,0 +1,13 @@
+export function createDatePickerOpenChangeDetails(details) {
+    let canceled = false;
+    return {
+        reason: details?.reason ?? 'none',
+        event: details?.event,
+        cancel: () => {
+            canceled = true;
+        },
+        get isCanceled() {
+            return canceled;
+        }
+    };
+}

package/dist/datepicker/root/open-controller.d.ts

@@ -0,0 +1,7 @@
+import type { DatePickerOpenChangeDetails, DatePickerOpenChangeReason } from './context';
+type DatePickerOpenChangeInput = DatePickerOpenChangeDetails | {
+    reason?: DatePickerOpenChangeReason;
+    event?: Event;
+} | undefined;
+export declare function resolveDatePickerOpenChangeDetails(input: DatePickerOpenChangeInput): DatePickerOpenChangeDetails;
+export {};

package/dist/datepicker/root/open-controller.js

@@ -0,0 +1,15 @@
+import { createDatePickerOpenChangeDetails } from './open-change';
+function isDatePickerOpenChangeDetails(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const candidate = value;
+    return (typeof candidate.cancel === 'function' &&
+        typeof candidate.reason === 'string' &&
+        typeof candidate.isCanceled === 'boolean');
+}
+export function resolveDatePickerOpenChangeDetails(input) {
+    if (isDatePickerOpenChangeDetails(input)) {
+        return input;
+    }
+    return createDatePickerOpenChangeDetails(input);
+}

package/dist/datepicker/root/segment-controller.d.ts

@@ -0,0 +1,8 @@
+import type { DatePickerEditableSegmentType } from './date-utils';
+export type DatePickerSegmentRefs = Record<DatePickerEditableSegmentType, HTMLElement | null>;
+export declare function createDatePickerSegmentRefs(): DatePickerSegmentRefs;
+export declare function registerDatePickerSegmentRef(refs: DatePickerSegmentRefs, type: DatePickerEditableSegmentType, element: HTMLElement | null): boolean;
+export declare function focusDatePickerSegmentByType(refs: DatePickerSegmentRefs, type: DatePickerEditableSegmentType): boolean;
+export declare function focusNextDatePickerSegment(refs: DatePickerSegmentRefs, segmentOrder: DatePickerEditableSegmentType[], type: DatePickerEditableSegmentType): boolean;
+export declare function focusPreviousDatePickerSegment(refs: DatePickerSegmentRefs, segmentOrder: DatePickerEditableSegmentType[], type: DatePickerEditableSegmentType): boolean;
+export declare function focusLastDatePickerSegment(refs: DatePickerSegmentRefs, segmentOrder: DatePickerEditableSegmentType[]): boolean;

package/dist/datepicker/root/segment-controller.js

@@ -0,0 +1,53 @@
+export function createDatePickerSegmentRefs() {
+    return {
+        day: null,
+        month: null,
+        year: null
+    };
+}
+export function registerDatePickerSegmentRef(refs, type, element) {
+    if (refs[type] === element)
+        return false;
+    refs[type] = element;
+    return true;
+}
+export function focusDatePickerSegmentByType(refs, type) {
+    const target = refs[type];
+    if (!target)
+        return false;
+    target.focus();
+    return true;
+}
+export function focusNextDatePickerSegment(refs, segmentOrder, type) {
+    const index = segmentOrder.indexOf(type);
+    if (index < 0)
+        return false;
+    for (let nextIndex = index + 1; nextIndex < segmentOrder.length; nextIndex += 1) {
+        const nextType = segmentOrder[nextIndex];
+        if (focusDatePickerSegmentByType(refs, nextType)) {
+            return true;
+        }
+    }
+    return false;
+}
+export function focusPreviousDatePickerSegment(refs, segmentOrder, type) {
+    const index = segmentOrder.indexOf(type);
+    if (index < 0)
+        return false;
+    for (let previousIndex = index - 1; previousIndex >= 0; previousIndex -= 1) {
+        const previousType = segmentOrder[previousIndex];
+        if (focusDatePickerSegmentByType(refs, previousType)) {
+            return true;
+        }
+    }
+    return false;
+}
+export function focusLastDatePickerSegment(refs, segmentOrder) {
+    for (let index = segmentOrder.length - 1; index >= 0; index -= 1) {
+        const type = segmentOrder[index];
+        if (focusDatePickerSegmentByType(refs, type)) {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/datepicker/root/segment-state.d.ts

@@ -0,0 +1,18 @@
+import { type DatePickerDateValue, type DatePickerSegmentType } from './date-utils';
+export type EditableSegmentType = Exclude<DatePickerSegmentType, 'literal'>;
+export type DatePickerSegmentDraft = {
+    day: string;
+    month: string;
+    year: string;
+};
+export declare function createEmptySegmentDraft(): DatePickerSegmentDraft;
+export declare function toDraftFromValue(nextValue: DatePickerDateValue): DatePickerSegmentDraft;
+export declare function normalizeSegmentInput(type: EditableSegmentType, rawValue: string): string;
+export declare function clampSegmentDraft(draft: DatePickerSegmentDraft, type: EditableSegmentType, fromTyping: boolean, rawNumericLength: number): DatePickerSegmentDraft;
+export declare function getCandidateValueFromDraft(draft: DatePickerSegmentDraft): DatePickerDateValue | null;
+export declare function getSegmentBounds(type: EditableSegmentType): {
+    min: number;
+    max: number;
+};
+export declare function getSegmentNumericValue(type: EditableSegmentType, draft: DatePickerSegmentDraft, valueInternal: DatePickerDateValue | null): number;
+export declare function clampSegment(type: EditableSegmentType, valueToClamp: number): number;

package/dist/datepicker/root/segment-state.js

@@ -0,0 +1,134 @@
+import { isValidDatePickerValue } from './date-utils';
+export function createEmptySegmentDraft() {
+    return {
+        day: '',
+        month: '',
+        year: ''
+    };
+}
+export function toDraftFromValue(nextValue) {
+    const [year, month, day] = nextValue.split('-');
+    return {
+        day: `${Number(day)}`,
+        month: `${Number(month)}`,
+        year: `${Number(year)}`
+    };
+}
+export function normalizeSegmentInput(type, rawValue) {
+    const maxLength = type === 'year' ? 4 : 2;
+    const numeric = rawValue.replace(/\D/g, '').slice(0, maxLength);
+    if (numeric.length === 0)
+        return '';
+    return numeric.replace(/^0+(?=\d)/, '');
+}
+function getMaxValidDayInMonth(year, month) {
+    const yearText = `${year}`.padStart(4, '0');
+    const monthText = `${month}`.padStart(2, '0');
+    for (let day = 31; day >= 28; day -= 1) {
+        const candidate = `${yearText}-${monthText}-${`${day}`.padStart(2, '0')}`;
+        if (isValidDatePickerValue(candidate)) {
+            return day;
+        }
+    }
+    return 28;
+}
+export function clampSegmentDraft(draft, type, fromTyping, rawNumericLength) {
+    const nextDraft = { ...draft };
+    if (nextDraft.year.length > 0) {
+        const parsedYear = Number(nextDraft.year);
+        if (Number.isFinite(parsedYear)) {
+            nextDraft.year = `${Math.min(9999, Math.max(1, parsedYear))}`;
+        }
+    }
+    if (nextDraft.month.length > 0) {
+        const parsedMonth = Number(nextDraft.month);
+        if (Number.isFinite(parsedMonth)) {
+            if (parsedMonth <= 0) {
+                if (!(fromTyping && type === 'month' && rawNumericLength < 2)) {
+                    nextDraft.month = '1';
+                }
+            }
+            else if (parsedMonth > 12) {
+                nextDraft.month = '12';
+            }
+        }
+    }
+    if (nextDraft.day.length > 0) {
+        const parsedDay = Number(nextDraft.day);
+        if (Number.isFinite(parsedDay)) {
+            if (parsedDay <= 0) {
+                if (!(fromTyping && type === 'day' && rawNumericLength < 2)) {
+                    nextDraft.day = '1';
+                }
+            }
+            else if (parsedDay > 31) {
+                nextDraft.day = '31';
+            }
+        }
+    }
+    if (nextDraft.day && nextDraft.month && nextDraft.year) {
+        const year = Number(nextDraft.year);
+        const month = Number(nextDraft.month);
+        const day = Number(nextDraft.day);
+        if (Number.isFinite(year) &&
+            Number.isFinite(month) &&
+            Number.isFinite(day) &&
+            year >= 1 &&
+            month >= 1 &&
+            month <= 12) {
+            const maxDayInMonth = getMaxValidDayInMonth(year, month);
+            if (day > maxDayInMonth) {
+                nextDraft.day = `${maxDayInMonth}`;
+            }
+        }
+    }
+    return nextDraft;
+}
+export function getCandidateValueFromDraft(draft) {
+    if (!draft.day || !draft.month || !draft.year)
+        return null;
+    const day = Number(draft.day);
+    const month = Number(draft.month);
+    const year = Number(draft.year);
+    if (!Number.isInteger(day) || !Number.isInteger(month) || !Number.isInteger(year)) {
+        return null;
+    }
+    if (year < 1 || year > 9999 || month < 1 || month > 12 || day < 1 || day > 31) {
+        return null;
+    }
+    const candidate = `${`${year}`.padStart(4, '0')}-${`${month}`.padStart(2, '0')}-${`${day}`.padStart(2, '0')}`;
+    if (!isValidDatePickerValue(candidate)) {
+        return null;
+    }
+    return candidate;
+}
+export function getSegmentBounds(type) {
+    if (type === 'month')
+        return { min: 1, max: 12 };
+    if (type === 'day')
+        return { min: 1, max: 31 };
+    return { min: 1, max: 9999 };
+}
+export function getSegmentNumericValue(type, draft, valueInternal) {
+    const draftValue = draft[type];
+    if (draftValue.length > 0) {
+        const parsed = Number(draftValue);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    if (valueInternal && isValidDatePickerValue(valueInternal)) {
+        const [year, month, day] = valueInternal.split('-');
+        if (type === 'day')
+            return Number(day);
+        if (type === 'month')
+            return Number(month);
+        return Number(year);
+    }
+    if (type === 'year')
+        return new Date().getUTCFullYear();
+    return 1;
+}
+export function clampSegment(type, valueToClamp) {
+    const { min, max } = getSegmentBounds(type);
+    return Math.min(max, Math.max(min, valueToClamp));
+}

package/dist/datepicker/root/value-commit.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerDateValue } from './date-utils';
+export type DatePickerValueLike = DatePickerDateValue | null | undefined;
+export declare function normalizeDatePickerValue(value: DatePickerValueLike, isValid: (value: string | undefined) => value is DatePickerDateValue): DatePickerDateValue | null;
+export declare function normalizeBindableDatePickerValue(value: DatePickerValueLike): DatePickerDateValue | null;

package/dist/datepicker/root/value-commit.js

@@ -0,0 +1,8 @@
+export function normalizeDatePickerValue(value, isValid) {
+    if (typeof value !== 'string')
+        return null;
+    return isValid(value) ? value : null;
+}
+export function normalizeBindableDatePickerValue(value) {
+    return value === undefined ? null : value;
+}

package/dist/datepicker/segment/README.md

@@ -0,0 +1,14 @@
+# DatePicker Segment
+
+## API reference
+
+### DatePicker.Segment
+
+Name: `DatePicker.Segment`  
+Description: Editable (or literal) date segment renderer used inside `DatePicker.Input`.
+
+| Prop           | Type                              | Default    | Description                                             |
+| -------------- | --------------------------------- | ---------- | ------------------------------------------------------- |
+| `segment`      | `DatePickerSegmentPart`           | `required` | Segment metadata and text payload.                      |
+| `class`        | `string`                          | `''`       | CSS class names for the segment span element.           |
+| `...restProps` | `HTMLAttributes<HTMLSpanElement>` | `-`        | Additional attributes forwarded to the segment element. |