seblify 0.2.1 → 0.3.0

package/dist/components/framework/overlay/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type TooltipPlacement = 'top-start' | 'top' | 'top-end' | 'end-top' | 'end' | 'end-bottom' | 'bottom-start' | 'bottom' | 'bottom-end' | 'start-top' | 'start' | 'start-bottom';
+type TooltipTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type TooltipInteractionSource = 'pointer' | 'focus';
+type TooltipInteractionEvent = {
+    trigger: TooltipInteractionSource;
+    originalEvent: Event;
+};
+declare const Tooltip: import("svelte").Component<{
+    [x: string]: unknown;
+    animation?: "none" | "smooth" | "bouncy" | "snappy" | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    content?: string | undefined;
+    defaultVisible?: boolean | undefined;
+    gap?: (number | CustomCssSize) | undefined;
+    offset?: (number | CustomCssSize) | undefined;
+    onTooltipEnter?: ((event: TooltipInteractionEvent) => void) | undefined;
+    onTooltipLeave?: ((event: TooltipInteractionEvent) => void) | undefined;
+    onTriggerEnter?: ((event: TooltipInteractionEvent) => void) | undefined;
+    onTriggerLeave?: ((event: TooltipInteractionEvent) => void) | undefined;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
+    placement?: TooltipPlacement | undefined;
+    showArrow?: boolean | undefined;
+    tone?: TooltipTone | undefined;
+    tooltip?: Snippet | undefined;
+    visible?: boolean | undefined;
+}, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/utility/format/duration/formatDuration.d.ts

@@ -0,0 +1,15 @@
+export type DurationFormat = 'unit' | 'clock';
+export type DurationRounding = 'floor' | 'round' | 'ceil';
+export type DurationUnit = 'year' | 'month' | 'week' | 'millisecond' | 'second' | 'minute' | 'hour' | 'day';
+export type DurationStyle = 'long' | 'short' | 'narrow';
+export type FormatDurationOptions = {
+    format?: DurationFormat;
+    largestUnit?: DurationUnit;
+    locale?: Intl.LocalesArgument;
+    minUnits?: number;
+    maxUnits?: number;
+    rounding?: DurationRounding;
+    smallestUnit?: DurationUnit;
+    style?: DurationStyle;
+};
+export declare function formatDuration(value: number, options?: FormatDurationOptions): string;

package/dist/components/utility/format/duration/formatDuration.js

@@ -0,0 +1,218 @@
+const MILLISECOND = 1;
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const YEAR = 365.25 * DAY;
+const MONTH = YEAR / 12;
+const UNITS = [
+    { unit: 'year', milliseconds: YEAR },
+    { unit: 'month', milliseconds: MONTH },
+    { unit: 'week', milliseconds: WEEK },
+    { unit: 'day', milliseconds: DAY },
+    { unit: 'hour', milliseconds: HOUR },
+    { unit: 'minute', milliseconds: MINUTE },
+    { unit: 'second', milliseconds: SECOND },
+    { unit: 'millisecond', milliseconds: MILLISECOND },
+];
+export function formatDuration(value, options = {}) {
+    const milliseconds = toDurationMilliseconds(value);
+    if (options.format === 'clock') {
+        return formatClockDuration(milliseconds, options);
+    }
+    return formatUnitDuration(milliseconds, options);
+}
+function toDurationMilliseconds(value) {
+    if (!Number.isFinite(value) || value < 0) {
+        throw new RangeError('Invalid duration value.');
+    }
+    return value;
+}
+function formatUnitDuration(milliseconds, options) {
+    const largestUnit = options.largestUnit ?? 'day';
+    const smallestUnit = options.smallestUnit ?? 'second';
+    const maxUnits = getMaxUnits(options.maxUnits);
+    const minUnits = getMinUnits(options.minUnits, maxUnits);
+    const unitConfigs = getUnitConfigs(largestUnit, smallestUnit);
+    const parts = maxUnits === 1
+        ? selectSingleUnitPart(milliseconds, unitConfigs, options)
+        : selectUnitParts(milliseconds, unitConfigs, maxUnits, minUnits, options);
+    const formattedParts = parts.map((part) => formatUnit(part.amount, part.unit, options));
+    return new Intl.ListFormat(options.locale, {
+        style: options.style ?? 'long',
+        type: 'unit',
+    }).format(formattedParts);
+}
+function getMaxUnits(maxUnits) {
+    if (maxUnits === undefined) {
+        return 2;
+    }
+    if (!Number.isFinite(maxUnits) || maxUnits < 1) {
+        throw new RangeError('Invalid duration maxUnits.');
+    }
+    return Math.floor(maxUnits);
+}
+function getMinUnits(minUnits, maxUnits) {
+    if (minUnits === undefined) {
+        return 1;
+    }
+    if (!Number.isFinite(minUnits) || minUnits < 1 || minUnits > maxUnits) {
+        throw new RangeError('Invalid duration minUnits.');
+    }
+    return Math.floor(minUnits);
+}
+function getUnitConfigs(largestUnit, smallestUnit) {
+    const startIndex = UNITS.findIndex((config) => config.unit === largestUnit);
+    const endIndex = UNITS.findIndex((config) => config.unit === smallestUnit);
+    if (startIndex === -1) {
+        throw new RangeError('Invalid duration largestUnit.');
+    }
+    if (endIndex === -1) {
+        throw new RangeError('Invalid duration smallestUnit.');
+    }
+    if (startIndex > endIndex) {
+        throw new RangeError('Duration largestUnit must be larger than smallestUnit.');
+    }
+    return [...UNITS.slice(startIndex, endIndex + 1)];
+}
+function selectSingleUnitPart(milliseconds, unitConfigs, options) {
+    const smallestUnit = unitConfigs[unitConfigs.length - 1];
+    const selectedUnit = unitConfigs.find((config) => milliseconds >= config.milliseconds) ??
+        smallestUnit;
+    const rounding = options.rounding ?? 'round';
+    const amount = milliseconds < smallestUnit.milliseconds
+        ? 0
+        : roundToTenths(milliseconds / selectedUnit.milliseconds, rounding);
+    return [
+        {
+            amount,
+            unit: selectedUnit.unit,
+        },
+    ];
+}
+function selectUnitParts(milliseconds, unitConfigs, maxUnits, minUnits, options) {
+    const smallestUnit = unitConfigs[unitConfigs.length - 1];
+    let remainingMilliseconds = roundToUnit(milliseconds, smallestUnit.milliseconds, options.rounding ?? 'floor');
+    const decomposedParts = [];
+    for (const config of unitConfigs) {
+        const amount = Math.floor(remainingMilliseconds / config.milliseconds);
+        decomposedParts.push({
+            amount,
+            unit: config.unit,
+        });
+        remainingMilliseconds -= amount * config.milliseconds;
+    }
+    const firstNonZeroIndex = decomposedParts.findIndex((part) => part.amount !== 0);
+    if (firstNonZeroIndex === -1) {
+        return [
+            {
+                amount: 0,
+                unit: smallestUnit.unit,
+            },
+        ];
+    }
+    if (minUnits > 1) {
+        const startIndex = Math.max(0, Math.min(firstNonZeroIndex, decomposedParts.length - minUnits));
+        return decomposedParts.slice(startIndex, startIndex + maxUnits);
+    }
+    const parts = decomposedParts.filter((part) => part.amount !== 0);
+    return parts.slice(0, maxUnits);
+}
+function formatUnit(amount, unit, options) {
+    return new Intl.NumberFormat(options.locale, {
+        maximumFractionDigits: 1,
+        style: 'unit',
+        unit,
+        unitDisplay: options.style ?? 'long',
+    }).format(amount);
+}
+function formatClockDuration(milliseconds, options) {
+    const largestUnit = options.largestUnit ?? 'day';
+    const smallestUnit = options.smallestUnit ?? 'second';
+    const unitConfigs = getUnitConfigs(largestUnit, smallestUnit);
+    const minUnits = getClockMinUnits(options.minUnits);
+    const smallestConfig = unitConfigs[unitConfigs.length - 1];
+    const visibleMilliseconds = roundToUnit(milliseconds, smallestConfig.milliseconds, options.rounding ?? 'floor');
+    const showMilliseconds = options.smallestUnit === 'millisecond';
+    const parts = decomposeDuration(visibleMilliseconds, unitConfigs);
+    const partByUnit = new Map(parts.map((part) => [part.unit, part.amount]));
+    const years = partByUnit.get('year') ?? 0;
+    const months = partByUnit.get('month') ?? 0;
+    const weeks = partByUnit.get('week') ?? 0;
+    const days = partByUnit.get('day') ?? 0;
+    const hours = partByUnit.get('hour') ?? 0;
+    const minutes = partByUnit.get('minute') ?? 0;
+    const seconds = partByUnit.get('second') ?? 0;
+    const prefixes = [
+        formatClockPrefix(years, 'y', includesUnit(unitConfigs, 'year'), minUnits >= 6),
+        formatClockPrefix(months, 'mo', includesUnit(unitConfigs, 'month'), minUnits >= 5),
+        formatClockPrefix(weeks, 'w', includesUnit(unitConfigs, 'week'), minUnits >= 5),
+        formatClockPrefix(days, 'd', includesUnit(unitConfigs, 'day'), minUnits >= 4),
+    ].filter((part) => part !== undefined);
+    const showHours = hours > 0 ||
+        prefixes.length > 0 ||
+        largestUnit === 'hour' ||
+        minUnits >= 3;
+    const formattedHours = prefixes.length > 0 || minUnits >= 3
+        ? pad(hours)
+        : hours.toString();
+    const clock = showHours
+        ? `${formattedHours}:${pad(minutes)}:${pad(seconds)}`
+        : `${pad(minutes)}:${pad(seconds)}`;
+    const clockWithPrefixes = prefixes.length > 0 ? `${prefixes.join(' ')} ${clock}` : clock;
+    if (!showMilliseconds) {
+        return clockWithPrefixes;
+    }
+    return `${clockWithPrefixes}.${padMilliseconds(partByUnit.get('millisecond') ?? 0)}`;
+}
+function decomposeDuration(milliseconds, unitConfigs) {
+    let remainingMilliseconds = milliseconds;
+    return unitConfigs.map((config) => {
+        const amount = Math.floor(remainingMilliseconds / config.milliseconds);
+        remainingMilliseconds -= amount * config.milliseconds;
+        return {
+            amount,
+            unit: config.unit,
+        };
+    });
+}
+function includesUnit(unitConfigs, unit) {
+    return unitConfigs.some((config) => config.unit === unit);
+}
+function getClockMinUnits(minUnits) {
+    if (minUnits === undefined) {
+        return 2;
+    }
+    if (!Number.isFinite(minUnits) || minUnits < 1) {
+        throw new RangeError('Invalid duration minUnits.');
+    }
+    return Math.floor(minUnits);
+}
+function formatClockPrefix(amount, suffix, unitIsIncluded, force) {
+    if (!unitIsIncluded || (amount === 0 && !force)) {
+        return undefined;
+    }
+    return `${amount}${suffix}`;
+}
+function roundToTenths(value, rounding) {
+    return roundValue(value * 10, rounding) / 10;
+}
+function roundToUnit(milliseconds, unitMilliseconds, rounding) {
+    return roundValue(milliseconds / unitMilliseconds, rounding) * unitMilliseconds;
+}
+function roundValue(value, rounding) {
+    if (rounding === 'floor') {
+        return Math.floor(value);
+    }
+    if (rounding === 'ceil') {
+        return Math.ceil(value);
+    }
+    return Math.round(value);
+}
+function pad(value) {
+    return value.toString().padStart(2, '0');
+}
+function padMilliseconds(value) {
+    return value.toString().padStart(3, '0');
+}

package/dist/components/utility/format/relative-time/formatRelativeTime.d.ts

@@ -0,0 +1,35 @@
+export type RelativeTimeInput = Date | number | string;
+export type RelativeTimeLabel = {
+    label: string;
+    threshold?: number;
+} | {
+    label?: string;
+    threshold: number;
+};
+export type RelativeTimePresentation = 'relative' | 'unit';
+export type RelativeTimeMode = 'time' | 'calendar';
+export type RelativeTimeStyle = 'long' | 'short' | 'narrow';
+export type RelativeTimeUnitSteps = 'detailed' | 'compact' | 'simple';
+export type RelativeTimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+export type RelativeTimeDirection = 'past' | 'present' | 'future';
+export type RelativeTimeState = {
+    amount: number;
+    direction: RelativeTimeDirection;
+    milliseconds: number;
+    label?: string;
+    signedAmount: number;
+    unit: RelativeTimeUnit;
+    updateInMilliseconds: number;
+};
+export type FormatRelativeTimeOptions = {
+    from?: RelativeTimeInput;
+    labels?: readonly RelativeTimeLabel[];
+    locale?: Intl.LocalesArgument;
+    mode?: RelativeTimeMode;
+    presentation?: RelativeTimePresentation;
+    style?: RelativeTimeStyle;
+    unitSteps?: RelativeTimeUnitSteps;
+};
+export declare function formatRelativeTime(value: RelativeTimeInput, options?: FormatRelativeTimeOptions): string;
+export declare function getRelativeTimeState(value: RelativeTimeInput, options?: FormatRelativeTimeOptions): RelativeTimeState;
+export declare function relativeTimeDateTime(value: RelativeTimeInput): string;

package/dist/components/utility/format/relative-time/formatRelativeTime.js

@@ -0,0 +1,343 @@
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 4 * WEEK;
+const YEAR = 12 * MONTH;
+const CALENDAR_TIME_THRESHOLD = 13 * HOUR;
+const MAX_TIMEOUT = 2_147_483_647;
+const DEFAULT_LABEL_THRESHOLD = SECOND - 1;
+export function formatRelativeTime(value, options = {}) {
+    const state = getRelativeTimeState(value, options);
+    if (state.label !== undefined) {
+        return state.label;
+    }
+    if (options.presentation === 'unit') {
+        return new Intl.NumberFormat(options.locale, {
+            style: 'unit',
+            unit: state.unit,
+            unitDisplay: options.style ?? 'long',
+        }).format(state.amount);
+    }
+    const formatter = new Intl.RelativeTimeFormat(options.locale, {
+        numeric: state.direction === 'present' ? 'auto' : 'always',
+        style: options.style ?? 'long',
+    });
+    return formatter.format(state.signedAmount, state.unit);
+}
+export function getRelativeTimeState(value, options = {}) {
+    const targetTime = toTime(value, 'value');
+    const fromTime = options.from === undefined ? Date.now() : toTime(options.from, 'from');
+    const state = selectRelativeTimeState(targetTime, fromTime, options);
+    return {
+        amount: state.amount,
+        direction: state.direction,
+        label: state.label,
+        milliseconds: state.milliseconds,
+        signedAmount: state.signedAmount,
+        unit: state.unit,
+        updateInMilliseconds: getUpdateInterval(targetTime, fromTime, options, state),
+    };
+}
+function selectRelativeTimeState(targetTime, fromTime, options) {
+    const milliseconds = targetTime - fromTime;
+    const direction = getDirection(milliseconds);
+    const absoluteMilliseconds = Math.abs(milliseconds);
+    const unitSteps = options.unitSteps ?? 'detailed';
+    const selected = selectUnit(absoluteMilliseconds, unitSteps);
+    const labelSelection = selectLabel(milliseconds, options.labels);
+    const calendarLabel = selectCalendarLabel(targetTime, fromTime, milliseconds, options);
+    const label = labelSelection?.label ?? calendarLabel;
+    const signedAmount = direction === 'past' ? -selected.amount : selected.amount;
+    return {
+        amount: selected.amount,
+        direction,
+        label,
+        labelSelection,
+        milliseconds,
+        signedAmount,
+        unit: selected.unit,
+    };
+}
+export function relativeTimeDateTime(value) {
+    return new Date(toTime(value, 'value')).toISOString();
+}
+function toTime(value, optionName) {
+    const time = value instanceof Date ? value.getTime() : new Date(value).getTime();
+    if (!Number.isFinite(time)) {
+        throw new RangeError(`Invalid relative time ${optionName}.`);
+    }
+    return time;
+}
+function getDirection(milliseconds) {
+    if (Math.abs(milliseconds) < SECOND) {
+        return 'present';
+    }
+    return milliseconds < 0 ? 'past' : 'future';
+}
+function selectUnit(milliseconds, unitSteps) {
+    if (unitSteps === 'detailed') {
+        return selectDetailedUnit(milliseconds);
+    }
+    if (unitSteps === 'compact') {
+        return selectCompactUnit(milliseconds);
+    }
+    return selectSimpleUnit(milliseconds);
+}
+function selectLabel(milliseconds, labels) {
+    if (labels === undefined) {
+        return undefined;
+    }
+    let match;
+    for (const label of labels) {
+        const thresholds = label.threshold === undefined
+            ? [DEFAULT_LABEL_THRESHOLD, -DEFAULT_LABEL_THRESHOLD]
+            : [label.threshold];
+        for (const threshold of thresholds) {
+            const thresholdIsInvalid = !Number.isFinite(threshold) && Math.abs(threshold) !== Infinity;
+            if (thresholdIsInvalid) {
+                throw new RangeError('Invalid relative time label threshold.');
+            }
+            const matches = milliseconds >= 0
+                ? threshold >= 0 && milliseconds <= threshold
+                : threshold < 0 && milliseconds >= threshold;
+            if (!matches) {
+                continue;
+            }
+            if (match === undefined ||
+                Math.abs(threshold) < Math.abs(match.threshold)) {
+                match = {
+                    label: label.label,
+                    threshold,
+                };
+            }
+        }
+    }
+    return match;
+}
+function selectCalendarLabel(targetTime, fromTime, milliseconds, options) {
+    if (options.mode !== 'calendar' || options.presentation === 'unit') {
+        return undefined;
+    }
+    if (Math.abs(milliseconds) < CALENDAR_TIME_THRESHOLD) {
+        return undefined;
+    }
+    const dayDelta = localCalendarDayIndex(targetTime) - localCalendarDayIndex(fromTime);
+    if (Math.abs(dayDelta) <= 1) {
+        return formatRelativeCalendarUnit(dayDelta, 'day', options);
+    }
+    if (Math.abs(dayDelta) <= 6) {
+        return formatRelativeWeekday(targetTime, dayDelta, options.locale);
+    }
+    if (Math.abs(dayDelta) <= 13) {
+        return formatRelativeCalendarUnit(dayDelta > 0 ? 1 : -1, 'week', options);
+    }
+    return undefined;
+}
+function localCalendarDayIndex(time) {
+    const date = new Date(time);
+    return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY);
+}
+function formatRelativeCalendarUnit(amount, unit, options) {
+    return new Intl.RelativeTimeFormat(options.locale, {
+        numeric: 'auto',
+        style: options.style ?? 'long',
+    }).format(amount, unit);
+}
+function formatRelativeWeekday(targetTime, dayDelta, locale) {
+    const resolvedLocale = new Intl.DateTimeFormat(locale).resolvedOptions().locale;
+    const language = resolvedLocale.split('-')[0];
+    const relativeWord = relativeWeekdayWord(language, dayDelta);
+    if (relativeWord === undefined) {
+        return undefined;
+    }
+    const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+    }).format(new Date(targetTime));
+    return `${relativeWord} ${weekday}`;
+}
+function relativeWeekdayWord(language, dayDelta) {
+    if (language === 'da') {
+        return dayDelta > 0 ? 'næste' : 'sidste';
+    }
+    if (language === 'en') {
+        return dayDelta > 0 ? 'next' : 'last';
+    }
+    return undefined;
+}
+function selectCompactUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds < 60) {
+        return { amount: seconds, unit: 'second' };
+    }
+    if (seconds < 90) {
+        return { amount: 1, unit: 'minute' };
+    }
+    if (seconds < 120) {
+        return { amount: 1.5, unit: 'minute' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes < 60) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    if (minutes < 90) {
+        return { amount: 1, unit: 'hour' };
+    }
+    if (minutes < 120) {
+        return { amount: 1.5, unit: 'hour' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours < 24) {
+        return { amount: hours, unit: 'hour' };
+    }
+    if (hours < 36) {
+        return { amount: 1, unit: 'day' };
+    }
+    if (hours < 48) {
+        return { amount: 1.5, unit: 'day' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days < 7) {
+        return { amount: days, unit: 'day' };
+    }
+    if (milliseconds < 1.5 * WEEK) {
+        return { amount: 1, unit: 'week' };
+    }
+    if (days < 14) {
+        return { amount: 1.5, unit: 'week' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks < 4) {
+        return { amount: weeks, unit: 'week' };
+    }
+    if (weeks < 6) {
+        return { amount: 1, unit: 'month' };
+    }
+    if (weeks < 8) {
+        return { amount: 1.5, unit: 'month' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months < 12) {
+        return { amount: months, unit: 'month' };
+    }
+    if (months < 18) {
+        return { amount: 1, unit: 'year' };
+    }
+    if (months < 24) {
+        return { amount: 1.5, unit: 'year' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function selectSimpleUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds < 60) {
+        return { amount: seconds, unit: 'second' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes < 60) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours < 24) {
+        return { amount: hours, unit: 'hour' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days < 7) {
+        return { amount: days, unit: 'day' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks < 4) {
+        return { amount: weeks, unit: 'week' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months < 12) {
+        return { amount: months, unit: 'month' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function selectDetailedUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds <= 99) {
+        return { amount: seconds, unit: 'second' };
+    }
+    if (seconds < 120) {
+        return { amount: 1.5, unit: 'minute' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes <= 99) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    if (minutes < 120) {
+        return { amount: 1.5, unit: 'hour' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours <= 35) {
+        return { amount: hours, unit: 'hour' };
+    }
+    if (hours < 48) {
+        return { amount: 1.5, unit: 'day' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days <= 13) {
+        return { amount: days, unit: 'day' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks <= 7) {
+        return { amount: weeks, unit: 'week' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months <= 11) {
+        return { amount: Math.max(2, months), unit: 'month' };
+    }
+    if (months <= 17) {
+        return { amount: 1, unit: 'year' };
+    }
+    if (months <= 23) {
+        return { amount: 1.5, unit: 'year' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function wholeUnit(milliseconds, unitMilliseconds) {
+    return Math.floor(milliseconds / unitMilliseconds);
+}
+function getUpdateInterval(targetTime, fromTime, options, current) {
+    let lower = 0;
+    let upper = 1;
+    while (upper < MAX_TIMEOUT) {
+        if (!matchesRelativeTimeState(targetTime, fromTime + upper, options, current)) {
+            break;
+        }
+        lower = upper;
+        upper *= 2;
+    }
+    if (upper >= MAX_TIMEOUT) {
+        return MAX_TIMEOUT;
+    }
+    while (upper - lower > 1) {
+        const middle = Math.floor((lower + upper) / 2);
+        if (matchesRelativeTimeState(targetTime, fromTime + middle, options, current)) {
+            lower = middle;
+        }
+        else {
+            upper = middle;
+        }
+    }
+    return Math.max(1, upper);
+}
+function matchesRelativeTimeState(targetTime, fromTime, options, current) {
+    const next = selectRelativeTimeState(targetTime, fromTime, options);
+    if (current.labelSelection?.label !== undefined ||
+        next.labelSelection?.label !== undefined) {
+        return current.labelSelection?.label === next.labelSelection?.label;
+    }
+    if (current.labelSelection?.threshold !== next.labelSelection?.threshold) {
+        return false;
+    }
+    if (current.label !== next.label) {
+        return false;
+    }
+    return (current.amount === next.amount &&
+        current.direction === next.direction &&
+        current.unit === next.unit);
+}

package/dist/design-system/reserved-props/allowed-options.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import { CustomCssSize } from './complex-types';
 type SizeKeys = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-type ToneOptions = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
-type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
-type VariantOptions = 'solid' | 'soft' | 'tint' | 'plain';
+type ToneOptions = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end-top' | 'end' | 'end-bottom' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start-bottom' | 'start' | 'start-top';
+type VariantOptions = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
 type BorderOptions = 'none' | 'solid' | 'dash';
 type ShapeOptions = 'pill' | 'dot' | 'floating' | 'line' | 'slim' | 'long' | 'flat';
 type AlignOptions = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
@@ -28,8 +28,11 @@ export type SeblifyReservedPropOptions = {
     step: number;
     length: number;
     open: boolean;
+    visible: boolean;
+    expanded: boolean;
     checked: boolean;
     disabled: boolean;
+    multiple: boolean;
     wrap: boolean;
     border: BorderOptions & {};
     radius: ((SizeKeys | 'none' | 'full') & {}) | CustomCssSize;