seblify 0.3.0 → 0.4.0

package/dist/components/framework/surface/paper/Paper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 type PaperElement = keyof HTMLElementTagNameMap;
 type PaperPadding = 'none' | 'sm' | 'md' | 'lg';
 type PaperRadius = 'sm' | 'md' | 'lg';
-type PaperTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type PaperTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
 type PaperVariant = 'solid' | 'soft' | 'tint' | 'plain';
 declare const Paper: import("svelte").Component<{
     as?: PaperElement | undefined;

package/dist/components/utility/format/date-time/formatDateTime.d.ts

@@ -0,0 +1,23 @@
+export type DateTimeInput = Date | number | string;
+export type DateTimeDateStyle = 'short' | 'medium' | 'long' | 'full';
+export type DateTimeTimeStyle = 'short' | 'medium' | 'long' | 'full';
+export type DateTimeLocaleOptions = {
+    locale?: Intl.LocalesArgument;
+    timeZone?: string;
+};
+export type FormatDateOptions = DateTimeLocaleOptions & {
+    dateStyle?: DateTimeDateStyle;
+};
+export type FormatTimeOptions = DateTimeLocaleOptions & {
+    hour12?: boolean;
+    timeStyle?: DateTimeTimeStyle;
+};
+export type FormatDateTimeOptions = DateTimeLocaleOptions & {
+    dateStyle?: DateTimeDateStyle;
+    hour12?: boolean;
+    timeStyle?: DateTimeTimeStyle;
+};
+export declare function formatDate(timestamp: DateTimeInput, options?: FormatDateOptions): string;
+export declare function formatTime(timestamp: DateTimeInput, options?: FormatTimeOptions): string;
+export declare function formatDateTime(timestamp: DateTimeInput, options?: FormatDateTimeOptions): string;
+export declare function dateTimeIsoString(timestamp: DateTimeInput): string;

package/dist/components/utility/format/date-time/formatDateTime.js

@@ -0,0 +1,33 @@
+export function formatDate(timestamp, options = {}) {
+    return new Intl.DateTimeFormat(options.locale, {
+        dateStyle: options.dateStyle ?? 'medium',
+        timeZone: options.timeZone,
+    }).format(toDate(timestamp));
+}
+export function formatTime(timestamp, options = {}) {
+    return new Intl.DateTimeFormat(options.locale, {
+        hour12: options.hour12,
+        timeStyle: options.timeStyle ?? 'short',
+        timeZone: options.timeZone,
+    }).format(toDate(timestamp));
+}
+export function formatDateTime(timestamp, options = {}) {
+    return new Intl.DateTimeFormat(options.locale, {
+        dateStyle: options.dateStyle ?? 'medium',
+        hour12: options.hour12,
+        timeStyle: options.timeStyle ?? 'short',
+        timeZone: options.timeZone,
+    }).format(toDate(timestamp));
+}
+export function dateTimeIsoString(timestamp) {
+    return toDate(timestamp).toISOString();
+}
+function toDate(timestamp) {
+    const date = timestamp instanceof Date
+        ? new Date(timestamp.getTime())
+        : new Date(timestamp);
+    if (Number.isNaN(date.getTime())) {
+        throw new RangeError('Invalid date time timestamp.');
+    }
+    return date;
+}

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

@@ -1,3 +1,4 @@
+import type { DurationRounding } from '../duration/formatDuration';
 export type RelativeTimeInput = Date | number | string;
 export type RelativeTimeLabel = {
     label: string;
@@ -8,6 +9,7 @@ export type RelativeTimeLabel = {
 };
 export type RelativeTimePresentation = 'relative' | 'unit';
 export type RelativeTimeMode = 'time' | 'calendar';
+export type RelativeTimeRounding = DurationRounding;
 export type RelativeTimeStyle = 'long' | 'short' | 'narrow';
 export type RelativeTimeUnitSteps = 'detailed' | 'compact' | 'simple';
 export type RelativeTimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
@@ -24,9 +26,14 @@ export type RelativeTimeState = {
 export type FormatRelativeTimeOptions = {
     from?: RelativeTimeInput;
     labels?: readonly RelativeTimeLabel[];
+    largestUnit?: RelativeTimeUnit;
     locale?: Intl.LocalesArgument;
+    maxUnits?: number;
+    minUnits?: number;
     mode?: RelativeTimeMode;
     presentation?: RelativeTimePresentation;
+    rounding?: RelativeTimeRounding;
+    smallestUnit?: RelativeTimeUnit;
     style?: RelativeTimeStyle;
     unitSteps?: RelativeTimeUnitSteps;
 };

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

@@ -1,3 +1,4 @@
+import { formatDuration } from '../duration/formatDuration';
 const SECOND = 1000;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
@@ -8,11 +9,36 @@ const YEAR = 12 * MONTH;
 const CALENDAR_TIME_THRESHOLD = 13 * HOUR;
 const MAX_TIMEOUT = 2_147_483_647;
 const DEFAULT_LABEL_THRESHOLD = SECOND - 1;
+const UNIT_MILLISECONDS = {
+    second: SECOND,
+    minute: MINUTE,
+    hour: HOUR,
+    day: DAY,
+    week: WEEK,
+    month: MONTH,
+    year: YEAR,
+};
+const UNIT_INDEX = {
+    second: 0,
+    minute: 1,
+    hour: 2,
+    day: 3,
+    week: 4,
+    month: 5,
+    year: 6,
+};
 export function formatRelativeTime(value, options = {}) {
     const state = getRelativeTimeState(value, options);
     if (state.label !== undefined) {
         return state.label;
     }
+    if (usesDurationFormatting(options)) {
+        const durationText = formatRelativeTimeDuration(state, options);
+        if (options.presentation === 'unit') {
+            return durationText;
+        }
+        return formatRelativeDuration(durationText, state, options);
+    }
     if (options.presentation === 'unit') {
         return new Intl.NumberFormat(options.locale, {
             style: 'unit',
@@ -45,7 +71,7 @@ function selectRelativeTimeState(targetTime, fromTime, options) {
     const direction = getDirection(milliseconds);
     const absoluteMilliseconds = Math.abs(milliseconds);
     const unitSteps = options.unitSteps ?? 'detailed';
-    const selected = selectUnit(absoluteMilliseconds, unitSteps);
+    const selected = selectUnit(absoluteMilliseconds, unitSteps, options);
     const labelSelection = selectLabel(milliseconds, options.labels);
     const calendarLabel = selectCalendarLabel(targetTime, fromTime, milliseconds, options);
     const label = labelSelection?.label ?? calendarLabel;
@@ -60,6 +86,122 @@ function selectRelativeTimeState(targetTime, fromTime, options) {
         unit: selected.unit,
     };
 }
+function usesDurationFormatting(options) {
+    return ((options.maxUnits !== undefined && Math.floor(options.maxUnits) > 1) ||
+        (options.minUnits !== undefined && Math.floor(options.minUnits) > 1));
+}
+function formatRelativeTimeDuration(state, options) {
+    const minUnits = options.minUnits;
+    const maxUnits = options.maxUnits === undefined && minUnits !== undefined
+        ? minUnits
+        : options.maxUnits;
+    return formatDuration(Math.abs(state.milliseconds), {
+        largestUnit: getDurationLargestUnit(state.unit, options),
+        locale: options.locale,
+        maxUnits,
+        minUnits,
+        rounding: options.rounding,
+        smallestUnit: (options.smallestUnit ?? 'second'),
+        style: options.style,
+    });
+}
+function getDurationLargestUnit(selectedUnit, options) {
+    if (options.largestUnit !== undefined) {
+        return options.largestUnit;
+    }
+    const minUnits = getPositiveIntegerOption(options.minUnits);
+    if (minUnits === undefined || minUnits <= 1) {
+        return selectedUnit;
+    }
+    const smallestUnit = options.smallestUnit ?? 'second';
+    const smallestUnitIndex = UNIT_INDEX[smallestUnit];
+    if (smallestUnitIndex === undefined) {
+        throw new RangeError('Invalid relative time smallestUnit.');
+    }
+    const selectedUnitIndex = UNIT_INDEX[selectedUnit];
+    const inferredUnitIndex = Math.min(UNIT_INDEX.year, Math.max(selectedUnitIndex, smallestUnitIndex + minUnits - 1));
+    return unitFromIndex(inferredUnitIndex);
+}
+function getPositiveIntegerOption(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value) || value < 1) {
+        throw new RangeError('Invalid relative time unit count.');
+    }
+    return Math.floor(value);
+}
+function unitFromIndex(index) {
+    const unit = Object.keys(UNIT_INDEX).find((candidate) => UNIT_INDEX[candidate] === index);
+    if (unit === undefined) {
+        throw new RangeError('Invalid relative time unit index.');
+    }
+    return unit;
+}
+function formatRelativeDuration(durationText, state, options) {
+    const formatter = new Intl.RelativeTimeFormat(options.locale, {
+        numeric: state.direction === 'present' ? 'auto' : 'always',
+        style: options.style ?? 'long',
+    });
+    if (state.direction === 'present') {
+        return formatter.format(0, 'second');
+    }
+    const sampleAmount = state.direction === 'past' ? -1 : 1;
+    const parts = formatter.formatToParts(sampleAmount, 'second');
+    const firstUnitPartIndex = parts.findIndex(isRelativeTimeNumberPart);
+    const lastUnitPartIndex = findLastRelativeTimeNumberPartIndex(parts);
+    if (firstUnitPartIndex === -1 || lastUnitPartIndex === -1) {
+        return formatter.format(sampleAmount, 'second');
+    }
+    const suffix = removeUnitText(parts
+        .slice(lastUnitPartIndex + 1)
+        .map((part) => part.value)
+        .join(''), options);
+    return [
+        ...parts.slice(0, firstUnitPartIndex).map((part) => part.value),
+        durationText,
+        suffix,
+    ].join('');
+}
+function findLastRelativeTimeNumberPartIndex(parts) {
+    for (let index = parts.length - 1; index >= 0; index -= 1) {
+        if (isRelativeTimeNumberPart(parts[index])) {
+            return index;
+        }
+    }
+    return -1;
+}
+function isRelativeTimeNumberPart(part) {
+    return (part.type === 'integer' ||
+        part.type === 'decimal' ||
+        part.type === 'fraction' ||
+        part.type === 'group');
+}
+function removeUnitText(text, options) {
+    const unitText = new Intl.NumberFormat(options.locale, {
+        style: 'unit',
+        unit: 'second',
+        unitDisplay: options.style ?? 'long',
+    })
+        .formatToParts(1)
+        .find((part) => part.type === 'unit')?.value;
+    if (unitText === undefined) {
+        return text;
+    }
+    const index = text.indexOf(unitText);
+    if (index === -1) {
+        return text;
+    }
+    const before = text.slice(0, index);
+    let after = text.slice(index + unitText.length);
+    if (after.startsWith('.') && (after.length === 1 || after[1] === ' ')) {
+        after = after.slice(1);
+    }
+    if (before.trim() === '') {
+        return after;
+    }
+    return `${before}${after}`;
+}
 export function relativeTimeDateTime(value) {
     return new Date(toTime(value, 'value')).toISOString();
 }
@@ -76,14 +218,55 @@ function getDirection(milliseconds) {
     }
     return milliseconds < 0 ? 'past' : 'future';
 }
-function selectUnit(milliseconds, unitSteps) {
-    if (unitSteps === 'detailed') {
-        return selectDetailedUnit(milliseconds);
+function selectUnit(milliseconds, unitSteps, options) {
+    validateUnitRange(options.largestUnit, options.smallestUnit);
+    const selected = unitSteps === 'detailed'
+        ? selectDetailedUnit(milliseconds)
+        : unitSteps === 'compact'
+            ? selectCompactUnit(milliseconds)
+            : selectSimpleUnit(milliseconds);
+    const largestLimited = limitLargestUnit(milliseconds, selected, options.largestUnit);
+    return limitSmallestUnit(milliseconds, largestLimited, options.smallestUnit);
+}
+function validateUnitRange(largestUnit, smallestUnit) {
+    if (largestUnit !== undefined && !(largestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time largestUnit.');
+    }
+    if (smallestUnit !== undefined && !(smallestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time smallestUnit.');
+    }
+    if (largestUnit !== undefined &&
+        smallestUnit !== undefined &&
+        UNIT_INDEX[largestUnit] < UNIT_INDEX[smallestUnit]) {
+        throw new RangeError('Relative time largestUnit must be larger than smallestUnit.');
+    }
+}
+function limitLargestUnit(milliseconds, selected, largestUnit) {
+    if (largestUnit === undefined) {
+        return selected;
     }
-    if (unitSteps === 'compact') {
-        return selectCompactUnit(milliseconds);
+    if (!(largestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time largestUnit.');
     }
-    return selectSimpleUnit(milliseconds);
+    if (UNIT_INDEX[selected.unit] <= UNIT_INDEX[largestUnit]) {
+        return selected;
+    }
+    return {
+        amount: wholeUnit(milliseconds, UNIT_MILLISECONDS[largestUnit]),
+        unit: largestUnit,
+    };
+}
+function limitSmallestUnit(milliseconds, selected, smallestUnit) {
+    if (smallestUnit === undefined) {
+        return selected;
+    }
+    if (UNIT_INDEX[selected.unit] >= UNIT_INDEX[smallestUnit]) {
+        return selected;
+    }
+    return {
+        amount: wholeUnit(milliseconds, UNIT_MILLISECONDS[smallestUnit]),
+        unit: smallestUnit,
+    };
 }
 function selectLabel(milliseconds, labels) {
     if (labels === undefined) {
@@ -337,6 +520,10 @@ function matchesRelativeTimeState(targetTime, fromTime, options, current) {
     if (current.label !== next.label) {
         return false;
     }
+    if (usesDurationFormatting(options)) {
+        return (formatRelativeTimeDuration(current, options) ===
+            formatRelativeTimeDuration(next, options));
+    }
     return (current.amount === next.amount &&
         current.direction === next.direction &&
         current.unit === next.unit);

package/dist/design-system/inheritance/tokens.js

@@ -11,6 +11,12 @@ const inheritanceTokens = [
         value: 'ambient fill text color',
         description: 'Resolved readable foreground color for content placed on the current tone fill. Use when a child can render a solid tone surface.',
     },
+    {
+        name: '--seblify-current-tone-fill-hover',
+        category: 'Tone',
+        value: 'ambient fill hover color',
+        description: 'Resolved hover color for the current tone fill. Use when a child renders a solid interactive tone surface.',
+    },
     {
         name: '--seblify-current-tone-text',
         category: 'Tone',

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

@@ -1,15 +1,16 @@
 import type { Snippet } from 'svelte';
 import { CustomCssSize } from './complex-types';
 type SizeKeys = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-type ToneOptions = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type ToneOptions = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type SurfaceOptions = 'default' | '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 VariantOptions = 'solid' | 'soft' | 'tint' | 'outline' | 'plain' | 'blank' | 'inset' | 'overflow';
 type BorderOptions = 'none' | 'solid' | 'dash';
 type ShapeOptions = 'pill' | 'dot' | 'floating' | 'line' | 'slim' | 'long' | 'flat';
 type AlignOptions = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type DirOptions = 'ltr' | 'rtl' | 'auto';
-type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy';
+type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy' | 'fade' | 'scale' | 'bump' | 'pop' | 'draw' | 'rise' | 'bounce';
 type OrientationOptions = 'horizontal' | 'vertical';
 export type SeblifyReservedPropOptions = {
     class: string;
@@ -39,6 +40,7 @@ export type SeblifyReservedPropOptions = {
     shape: ShapeOptions & {};
     tone: ToneOptions & {};
     variant: VariantOptions & {};
+    surface: SurfaceOptions & {};
     size: (SizeKeys & {}) | CustomCssSize;
     padding: ((SizeKeys | 'none') & {}) | CustomCssSize;
     animation: AnimationOptions & {};

package/dist/design-system/theme/tokens.d.ts

@@ -1,7 +1,77 @@
-declare const themeTokens: {
+declare const themeTokens: ({
+    readonly name: "--seblify-color-background";
+    readonly category: "Surface";
+    readonly value: "#faf7f2";
+    readonly description: "Default page background behind component surfaces.";
+} | {
+    readonly name: "--seblify-color-surface";
+    readonly category: "Surface";
+    readonly value: "#fffdf9";
+    readonly description: "Default component surface.";
+} | {
+    readonly name: "--seblify-color-surface-raised";
+    readonly category: "Surface";
+    readonly value: "#ffffff";
+    readonly description: "Raised surface for panels, popovers, and elevated UI.";
+} | {
+    readonly name: "--seblify-color-surface-muted";
+    readonly category: "Surface";
+    readonly value: "#f2ebe4";
+    readonly description: "Muted surface for inactive controls and subtle areas.";
+} | {
+    readonly name: "--seblify-color-surface-hover";
+    readonly category: "Surface";
+    readonly value: "#ebe1d8";
+    readonly description: "Surface color for hover states on neutral controls.";
+} | {
+    readonly name: "--seblify-color-surface-inverse";
+    readonly category: "Surface";
+    readonly value: "#15110f";
+    readonly description: "High-contrast inverse surface for sidebars and snackbars.";
+} | {
+    readonly name: "--seblify-color-surface-inverse-hover";
+    readonly category: "Surface";
+    readonly value: "#241d19";
+    readonly description: "Hover or active state on inverse surfaces.";
+} | {
+    readonly name: "--seblify-color-border";
+    readonly category: "Border";
+    readonly value: "#ded0c4";
+    readonly description: "Default border for controls and containers.";
+} | {
+    readonly name: "--seblify-color-border-strong";
+    readonly category: "Border";
+    readonly value: "#c5afa0";
+    readonly description: "Stronger border for interactive controls.";
+} | {
+    readonly name: "--seblify-color-border-inverse";
+    readonly category: "Border";
+    readonly value: "#4a3b32";
+    readonly description: "Border used on inverse surfaces.";
+} | {
+    readonly name: "--seblify-color-text";
+    readonly category: "Text";
+    readonly value: "#211916";
+    readonly description: "Primary text color on page and surface backgrounds.";
+} | {
+    readonly name: "--seblify-color-text-muted";
+    readonly category: "Text";
+    readonly value: "#6f5f55";
+    readonly description: "Secondary text for descriptions, helper text, and metadata.";
+} | {
+    readonly name: "--seblify-color-text-subtle";
+    readonly category: "Text";
+    readonly value: "#8b7a70";
+    readonly description: "Lower-emphasis text for labels, separators, and quiet UI.";
+} | {
+    readonly name: "--seblify-color-text-inverse";
+    readonly category: "Text";
+    readonly value: "#fff4e7";
+    readonly description: "Text placed on inverse surfaces.";
+} | {
     name: string;
     category: string;
     value: string;
     description: string;
-}[];
+})[];
 export default themeTokens;