@santi020k/lumen-core 3.0.1 → 4.1.0

package/dist/extended-charts.d.ts

@@ -0,0 +1,95 @@
+import { type LumenChartDomain, type LumenChartTone } from './charts.js';
+export interface LumenCalendarHeatmapDatum {
+    date: string;
+    value: number | null;
+}
+export interface LumenCalendarHeatmapOptions {
+    startDate: string;
+    endDate: string;
+    weekStartsOn?: 0 | 1 | undefined;
+    domain?: LumenChartDomain | undefined;
+}
+export interface LumenFunnelDatum {
+    id: string;
+    label: string;
+    value: number | null;
+    tone?: LumenChartTone;
+}
+export interface LumenBoxPlotDatum {
+    id: string;
+    label: string;
+    min: number | null;
+    q1: number | null;
+    median: number | null;
+    q3: number | null;
+    max: number | null;
+    outliers?: readonly number[];
+    tone?: LumenChartTone;
+}
+export interface LumenBoxPlotOptions {
+    domain?: LumenChartDomain | undefined;
+}
+export interface LumenBoxPlotStatisticLabels {
+    min: string;
+    q1: string;
+    median: string;
+    q3: string;
+    max: string;
+    outliers: string;
+}
+/** Strict Gregorian date-only identity, independent of locale, time zone and DST. */
+export declare const parseLumenCalendarDate: (value: unknown) => number | null;
+export declare const isLumenCalendarHeatmapDatum: (value: unknown) => value is LumenCalendarHeatmapDatum;
+export declare const isLumenFunnelDatum: (value: unknown) => value is LumenFunnelDatum;
+export declare const isLumenBoxPlotDatum: (value: unknown) => value is LumenBoxPlotDatum;
+interface CalendarCell {
+    date: string;
+    value: number | null;
+    week: number;
+    day: number;
+    ratio: number | null;
+}
+export declare const createLumenCalendarHeatmapGeometry: (data: readonly LumenCalendarHeatmapDatum[], options: LumenCalendarHeatmapOptions) => {
+    valid: boolean;
+    domain: {
+        min: number;
+        max: number;
+    };
+    cells: CalendarCell[];
+    weekCount: number;
+};
+export declare const createLumenFunnelGeometry: (data: readonly LumenFunnelDatum[]) => {
+    valid: boolean;
+    max: number;
+    rows: {
+        ratio: number | null;
+        id: string;
+        label: string;
+        value: number | null;
+        tone?: LumenChartTone;
+    }[];
+};
+export declare const createLumenBoxPlotGeometry: (data: readonly LumenBoxPlotDatum[], options?: LumenBoxPlotOptions) => {
+    valid: boolean;
+    domain: LumenChartDomain;
+    ticks: number[];
+    rows: {
+        minPosition: number | null;
+        q1Position: number | null;
+        medianPosition: number | null;
+        q3Position: number | null;
+        maxPosition: number | null;
+        outlierPositions: number[];
+        id: string;
+        label: string;
+        min: number | null;
+        q1: number | null;
+        median: number | null;
+        q3: number | null;
+        max: number | null;
+        outliers?: readonly number[];
+        tone?: LumenChartTone;
+    }[];
+};
+export {};
+//# sourceMappingURL=extended-charts.d.ts.map

package/dist/extended-charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-charts.d.ts","sourceRoot":"","sources":["../src/extended-charts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAyC,MAAM,aAAa,CAAA;AAE/G,MAAM,WAAW,yBAAyB;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE;AACjF,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAAA;IAChC,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAA;CACtC;AACD,MAAM,WAAW,gBAAgB;IAAG,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE;AAC5G,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACjB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AACD,MAAM,WAAW,mBAAmB;IAAG,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAA;CAAE;AAC9E,MAAM,WAAW,2BAA2B;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;CACjB;AAQD,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,IAgBhE,CAAA;AAED,eAAO,MAAM,2BAA2B,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,yBAGrE,CAAA;AAOD,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,gBAM5D,CAAA;AA8BD,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,iBAS7D,CAAA;AAgCD,UAAU,YAAY;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE;AAkD9G,eAAO,MAAM,kCAAkC,GAC7C,MAAM,SAAS,yBAAyB,EAAE,EAAE,SAAS,2BAA2B;;;;;;;;CAsBjF,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,MAAM,SAAS,gBAAgB,EAAE;;;;;YAjNnC,MAAM;eAAS,MAAM;eAAS,MAAM,GAAG,IAAI;eAAS,cAAc;;CAsOzG,CAAA;AAED,eAAO,MAAM,0BAA0B,GAAI,MAAM,SAAS,iBAAiB,EAAE,EAAE,UAAS,mBAAwB;;;;;;;;;;;YAtO1G,MAAM;eACH,MAAM;aACR,MAAM,GAAG,IAAI;YACd,MAAM,GAAG,IAAI;gBACT,MAAM,GAAG,IAAI;YACjB,MAAM,GAAG,IAAI;aACZ,MAAM,GAAG,IAAI;mBACP,SAAS,MAAM,EAAE;eACrB,cAAc;;CAiQtB,CAAA"}

package/dist/extended-charts.js

@@ -0,0 +1,175 @@
+import { lumenChartTones, scaleLumenChartValue } from './charts.js';
+const inRange = (value, min, max) => value >= min && value <= max;
+const dayMilliseconds = 86_400_000;
+const measurement = (value) => value === null || (typeof value === 'number' && Number.isFinite(value));
+const text = (value) => typeof value === 'string' && value.trim().length > 0;
+const tone = (value) => value === undefined || lumenChartTones.some(item => item === value);
+/** Strict Gregorian date-only identity, independent of locale, time zone and DST. */
+export const parseLumenCalendarDate = (value) => {
+    if (typeof value !== 'string' || value.length !== 10 || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return null;
+    const year = Number(value.slice(0, 4));
+    const month = Number(value.slice(5, 7));
+    const day = Number(value.slice(8, 10));
+    if (year < 1 || !inRange(month, 1, 12) || !inRange(day, 1, 31))
+        return null;
+    const date = new Date(0);
+    date.setUTCFullYear(year, month - 1, day);
+    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day)
+        return null;
+    return date.getTime();
+};
+export const isLumenCalendarHeatmapDatum = (value) => (typeof value === 'object' && value !== null && 'date' in value && 'value' in value &&
+    parseLumenCalendarDate(value.date) !== null && measurement(value.value));
+const identityValid = (value) => (typeof value === 'object' && value !== null && 'id' in value && 'label' in value &&
+    text(value.id) && text(value.label) && (!('tone' in value) || tone(value.tone)));
+export const isLumenFunnelDatum = (value) => {
+    if (!identityValid(value) || typeof value !== 'object' || value === null || !('value' in value))
+        return false;
+    if (!measurement(value.value))
+        return false;
+    return value.value === null || value.value >= 0;
+};
+const orderedStats = (stats) => stats.every((item, index) => {
+    const previous = stats[index - 1];
+    return typeof item === 'number' && Number.isFinite(item) &&
+        (index === 0 || (typeof previous === 'number' && item >= previous));
+});
+const validOutliers = (value, missing) => {
+    if (value === undefined)
+        return true;
+    if (!Array.isArray(value))
+        return false;
+    const entries = Array.from(value);
+    if (!entries.every(item => typeof item === 'number' && Number.isFinite(item)))
+        return false;
+    return !missing || value.length === 0;
+};
+const hasBoxStats = (value) => typeof value === 'object' && value !== null &&
+    'min' in value && 'q1' in value && 'median' in value && 'q3' in value && 'max' in value;
+export const isLumenBoxPlotDatum = (value) => {
+    if (!identityValid(value) || !hasBoxStats(value))
+        return false;
+    const stats = [value.min, value.q1, value.median, value.q3, value.max];
+    const missing = stats.every(item => item === null);
+    if (!missing && !orderedStats(stats))
+        return false;
+    return validOutliers('outliers' in value ? value.outliers : undefined, missing);
+};
+const automaticDomain = (values) => {
+    if (values.length === 0)
+        return { min: 0, max: 1 };
+    let min = values[0] ?? 0;
+    let max = min;
+    for (const value of values) {
+        min = Math.min(min, value);
+        max = Math.max(max, value);
+    }
+    if (min === max) {
+        const padding = Math.max(1, Math.abs(min) * 0.01);
+        const lower = min - padding;
+        const upper = max + padding;
+        min = Number.isFinite(lower) ? lower : min;
+        max = Number.isFinite(upper) ? upper : max;
+    }
+    return { min, max };
+};
+const validDomain = (domain, values) => (Number.isFinite(domain.min) && Number.isFinite(domain.max) && domain.min < domain.max &&
+    values.every(value => domain.min <= value && value <= domain.max));
+const createCalendarCells = (start, count, weekStartsOn, dates, domain) => {
+    const cells = [];
+    const offset = (new Date(start).getUTCDay() - weekStartsOn + 7) % 7;
+    for (let index = 0; index < count; index++) {
+        const date = new Date(start + index * dayMilliseconds).toISOString().slice(0, 10);
+        const value = dates.get(date) ?? null;
+        cells.push({ date,
+            value,
+            week: Math.floor((offset + index) / 7),
+            day: (offset + index) % 7,
+            ratio: value === null ? null : scaleLumenChartValue(value, domain, 0, 1) });
+    }
+    return cells;
+};
+const calendarObservationInRange = (date, start, end) => {
+    const timestamp = parseLumenCalendarDate(date);
+    return timestamp !== null && inRange(timestamp, start, end);
+};
+const isArrayCollection = (value) => Array.isArray(value);
+const calendarDates = (data, start, end) => {
+    const dates = new Map();
+    const valid = isArrayCollection(data) && Array.from(data).every(item => {
+        if (!isLumenCalendarHeatmapDatum(item) || dates.has(item.date))
+            return false;
+        if (!calendarObservationInRange(item.date, start, end))
+            return false;
+        dates.set(item.date, item.value);
+        return true;
+    });
+    return { valid, dates };
+};
+const isWeekStart = (value) => value === 0 || value === 1;
+const invalidCalendar = () => ({ valid: false, domain: { min: 0, max: 1 }, cells: Array(), weekCount: 0 });
+export const createLumenCalendarHeatmapGeometry = (data, options) => {
+    const start = parseLumenCalendarDate(options.startDate);
+    const end = parseLumenCalendarDate(options.endDate);
+    const weekStartsOn = options.weekStartsOn ?? 0;
+    if (start === null || end === null || !isWeekStart(weekStartsOn))
+        return invalidCalendar();
+    const count = (end - start) / dayMilliseconds + 1;
+    if (!inRange(count, 1, 3660))
+        return invalidCalendar();
+    const { valid: validData, dates } = calendarDates(data, start, end);
+    const values = [...dates.values()].filter((value) => value !== null);
+    const domain = options.domain ?? automaticDomain(values);
+    if (!validData || !validDomain(domain, values))
+        return invalidCalendar();
+    const cells = createCalendarCells(start, count, weekStartsOn, dates, domain);
+    const weekCount = Math.ceil(((new Date(start).getUTCDay() - weekStartsOn + 7) % 7 + count) / 7);
+    return { valid: true, domain, cells, weekCount };
+};
+export const createLumenFunnelGeometry = (data) => {
+    const ids = new Set();
+    let max = 0;
+    const valid = isArrayCollection(data) && Array.from(data).every(item => {
+        if (!isLumenFunnelDatum(item) || ids.has(item.id))
+            return false;
+        ids.add(item.id);
+        max = Math.max(max, item.value ?? 0);
+        return true;
+    });
+    const ratio = (value) => {
+        if (value === null)
+            return null;
+        return max === 0 ? 0 : value / max;
+    };
+    return { valid, max: valid ? max : 0, rows: valid ? data.map(item => ({ ...item, ratio: ratio(item.value) })) : [] };
+};
+export const createLumenBoxPlotGeometry = (data, options = {}) => {
+    const ids = new Set();
+    const validData = isArrayCollection(data) && Array.from(data).every(item => {
+        if (!isLumenBoxPlotDatum(item) || ids.has(item.id))
+            return false;
+        ids.add(item.id);
+        return true;
+    });
+    const values = validData ?
+        data.flatMap(item => ([item.min, item.q1, item.median, item.q3, item.max, ...(item.outliers ?? [])]
+            .filter((value) => value !== null))) :
+        [];
+    const requested = options.domain ?? automaticDomain(values);
+    const valid = validData && validDomain(requested, values);
+    const domain = valid ? requested : { min: 0, max: 1 };
+    const position = (value) => value === null ? null : scaleLumenChartValue(value, domain, 0, 1);
+    return { valid,
+        domain,
+        ticks: [domain.min, domain.min / 2 + domain.max / 2, domain.max],
+        rows: valid ?
+            data.map(item => ({ ...item,
+                minPosition: position(item.min),
+                q1Position: position(item.q1),
+                medianPosition: position(item.median),
+                q3Position: position(item.q3),
+                maxPosition: position(item.max),
+                outlierPositions: (item.outliers ?? []).map(value => scaleLumenChartValue(value, domain, 0, 1)) })) :
+            [] };
+};

package/dist/figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"figma.d.ts","sourceRoot":"","sources":["../src/figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EAEvB,gBAAgB,EACjB,MAAM,YAAY,CAAA;AAOnB,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,oBAAoB,CAAA;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,kBAAkB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,4BAA4B;IAC3C,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,sBAAsB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,+BAA+B;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,MAAM,oBAAoB,GAC5B,OAAO,GACT,aAAa,GACb,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,QAAQ,CAAA;AAEV,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAA;IAC7C,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAA;IAC7C,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAC,CAAA;CAChF;AAyGD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,oBAUpD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MAMlD,CAAA;AAED,eAAO,MAAM,uBAAuB,GAClC,OAAO,mBAAmB,EAC1B,eAAgB,KACf,MAAmD,CAAA;AAEtD,eAAO,MAAM,yBAAyB,GACpC,QAAQ,gBAAgB,EACxB,UAAS,+BAAoC,KAC5C,4BAwBF,CAAA;AAuCD,eAAO,MAAM,uBAAuB,GAClC,QAAQ,gBAAgB,KACvB,sBAyCD,CAAA"}
+{"version":3,"file":"figma.d.ts","sourceRoot":"","sources":["../src/figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EAEvB,gBAAgB,EACjB,MAAM,YAAY,CAAA;AAOnB,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,oBAAoB,CAAA;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,kBAAkB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,4BAA4B;IAC3C,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,sBAAsB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,+BAA+B;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,MAAM,oBAAoB,GAC5B,OAAO,GACT,aAAa,GACb,WAAW,GACX,UAAU,GACV,YAAY,GACZ,QAAQ,GACR,QAAQ,CAAA;AAEV,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAA;IAC7C,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAA;IAC7C,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAC,CAAA;CAChF;AAkHD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,oBAUpD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MAMlD,CAAA;AAED,eAAO,MAAM,uBAAuB,GAClC,OAAO,mBAAmB,EAC1B,eAAgB,KACf,MAAmD,CAAA;AAEtD,eAAO,MAAM,yBAAyB,GACpC,QAAQ,gBAAgB,EACxB,UAAS,+BAAoC,KAC5C,4BAwBF,CAAA;AAuCD,eAAO,MAAM,uBAAuB,GAClC,QAAQ,gBAAgB,KACvB,sBAyCD,CAAA"}

package/dist/figma.js

@@ -30,6 +30,15 @@ const lumenTokenDescriptions = {
     'surface-muted': 'Subtle component surface.',
     'surface-strong': 'Raised or stronger component surface.',
     'ui-duration': 'Base transition duration for interactive states.',
+    'ui-border-width': 'Structural border width; focus indicators remain independent.',
+    'ui-space-zero': 'Zero spacing.',
+    'ui-space-xs': 'Extra small spacing.',
+    'ui-space-sm': 'Small spacing.',
+    'ui-space-md': 'Medium spacing.',
+    'ui-space-lg': 'Large spacing.',
+    'ui-space-xl': 'Extra large spacing.',
+    'ui-space-2xl': 'Section spacing.',
+    'ui-space-3xl': 'Large section spacing.',
     'ui-duration-fast': 'Fast transition duration for small state changes.',
     'ui-duration-slow': 'Slow transition duration for larger movements.',
     'ui-ease': 'Standard easing curve for interface motion.',
@@ -149,7 +158,7 @@ const getEffectDesignTokenValue = (token, value) => {
 const getStructureDesignTokenType = (token) => {
     if (token === 'ui-font')
         return 'fontFamily';
-    if (token.startsWith('ui-radius'))
+    if (token.startsWith('ui-radius') || token.startsWith('ui-space') || token === 'ui-border-width')
         return 'dimension';
     if (token.startsWith('ui-shadow'))
         return 'shadow';

package/dist/floating-panel.d.ts

@@ -0,0 +1,24 @@
+export type LumenFloatingPanelPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+export interface LumenFloatingPanelOptions {
+    /** Logical alignment follows the trigger's inherited text direction. */
+    placement?: LumenFloatingPanelPlacement | undefined;
+    offset?: number | undefined;
+    collisionPadding?: number | undefined;
+    /** Focus the first matching element inside the panel after it opens. A malformed selector skips focus. */
+    initialFocus?: string | undefined;
+    /**
+     * Called when the panel should close: focus moves outside, its containing dialog closes, or the trigger
+     * or panel leaves the document. The caller hides the panel and calls the cleanup.
+     */
+    onDismiss: () => void;
+}
+/**
+ * Shows `panel` anchored to `trigger`: in the top layer when the Popover API exists, otherwise fixed. The
+ * panel follows scroll, resize, visual viewport, and enclosing animation changes, flips to stay visible,
+ * honors RTL, and calls `onDismiss` on outside focus, when its containing dialog closes, or when the trigger
+ * or panel leaves the document. Connecting makes the panel visible; the caller owns hiding it again. The returned
+ * cleanup leaves the top layer, returns owned focus to the trigger, restores the panel's previous inline
+ * styles and popover attributes, and removes every listener and observer.
+ */
+export declare const connectLumenFloatingPanel: (panel: HTMLElement, trigger: HTMLElement, { placement, offset, collisionPadding, initialFocus, onDismiss }: LumenFloatingPanelOptions) => (() => void);
+//# sourceMappingURL=floating-panel.d.ts.map

package/dist/floating-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../src/floating-panel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,CAAA;AAEjG,MAAM,WAAW,yBAAyB;IACxC,wEAAwE;IACxE,SAAS,CAAC,EAAE,2BAA2B,GAAG,SAAS,CAAA;IACnD,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AA4MD;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,WAAW,EAClB,SAAS,WAAW,EACpB,kEAAmF,yBAAyB,KAC3G,CAAC,MAAM,IAAI,CA8Db,CAAA"}

package/dist/floating-panel.js

@@ -0,0 +1,203 @@
+const finiteDistance = (value, fallback) => {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, value);
+};
+const clamp = (value, minimum, maximum) => {
+    const upperBound = Math.max(minimum, maximum);
+    return Math.max(minimum, Math.min(value, upperBound));
+};
+const styleKeys = [
+    'box-sizing',
+    'position',
+    'inset',
+    'left',
+    'top',
+    'right',
+    'bottom',
+    'margin',
+    'max-width',
+    'max-height',
+    'overflow-y'
+];
+const viewportBounds = ({ view, padding }) => {
+    const viewport = view.visualViewport;
+    const left = (viewport?.offsetLeft ?? 0) + padding;
+    const top = (viewport?.offsetTop ?? 0) + padding;
+    const width = Math.max(0, (viewport?.width ?? view.innerWidth) - padding * 2);
+    const height = Math.max(0, (viewport?.height ?? view.innerHeight) - padding * 2);
+    return { left, top, width, height, right: left + width, bottom: top + height };
+};
+const shouldPlaceBelow = (placement, above, below, height) => placement.startsWith('bottom') ? below >= height || below >= above : !(above >= height || above >= below);
+const positionPanel = (context) => {
+    const { panel, trigger, view, placement, gap } = context;
+    const viewport = viewportBounds(context);
+    const anchor = trigger.getBoundingClientRect();
+    panel.style.boxSizing = 'border-box';
+    panel.style.position = 'fixed';
+    panel.style.inset = 'auto';
+    panel.style.margin = '0';
+    panel.style.maxWidth = `${viewport.width}px`;
+    panel.style.maxHeight = `${viewport.height}px`;
+    panel.style.overflowY = 'auto';
+    const below = Math.max(0, viewport.bottom - anchor.bottom - gap);
+    const above = Math.max(0, anchor.top - viewport.top - gap);
+    const placeBelow = shouldPlaceBelow(placement, above, below, panel.getBoundingClientRect().height);
+    const availableHeight = placeBelow ? below : above;
+    panel.style.maxHeight = `${Math.min(viewport.height, availableHeight || viewport.height)}px`;
+    const bounds = panel.getBoundingClientRect();
+    const rtl = view.getComputedStyle(trigger).direction === 'rtl';
+    const alignRight = placement.endsWith('end') !== rtl;
+    const x = alignRight ? anchor.right - bounds.width : anchor.left;
+    const y = placeBelow ? anchor.bottom + gap : anchor.top - bounds.height - gap;
+    const alignment = placement.endsWith('end') ? 'end' : 'start';
+    panel.style.left = `${clamp(x, viewport.left, viewport.right - bounds.width)}px`;
+    panel.style.top = `${clamp(y, viewport.top, viewport.bottom - bounds.height)}px`;
+    panel.dataset.placement = `${placeBelow ? 'bottom' : 'top'}-${alignment}`;
+};
+// Transform transitions and animations move the trigger without resizing it, so ResizeObserver stays quiet.
+const settleEvents = ['animationend', 'animationcancel', 'transitionend', 'transitioncancel'];
+const observePosition = (context, dismiss) => {
+    const { panel, trigger, view } = context;
+    const document = panel.ownerDocument;
+    const NodeType = view.Node;
+    const dialog = trigger.closest('dialog');
+    const position = () => {
+        positionPanel(context);
+    };
+    const focusOutside = (event) => {
+        if (event.target instanceof NodeType &&
+            !panel.contains(event.target) && !trigger.contains(event.target))
+            dismiss();
+    };
+    const scroll = (event) => {
+        if (!(event.target instanceof NodeType) || !panel.contains(event.target))
+            position();
+    };
+    const observer = typeof view.ResizeObserver === 'function' ? new view.ResizeObserver(position) : undefined;
+    // Removing an open panel's owner must not leave document listeners or an expanded trigger behind.
+    const removal = typeof view.MutationObserver === 'function' ?
+        new view.MutationObserver(() => {
+            if (!trigger.isConnected || !panel.isConnected ||
+                trigger.ownerDocument !== document || panel.ownerDocument !== document)
+                dismiss();
+        }) :
+        undefined;
+    removal?.observe(document, { childList: true, subtree: true });
+    observer?.observe(trigger);
+    observer?.observe(panel);
+    document.addEventListener('focusin', focusOutside);
+    document.addEventListener('scroll', scroll, true);
+    for (const type of settleEvents)
+        document.addEventListener(type, position, true);
+    // Some engines move focus to the body without a focusin when a containing dialog closes.
+    dialog?.addEventListener('close', dismiss);
+    view.addEventListener('resize', position);
+    view.visualViewport?.addEventListener('resize', position);
+    view.visualViewport?.addEventListener('scroll', position);
+    return () => {
+        observer?.disconnect();
+        removal?.disconnect();
+        document.removeEventListener('focusin', focusOutside);
+        document.removeEventListener('scroll', scroll, true);
+        for (const type of settleEvents)
+            document.removeEventListener(type, position, true);
+        dialog?.removeEventListener('close', dismiss);
+        view.removeEventListener('resize', position);
+        view.visualViewport?.removeEventListener('resize', position);
+        view.visualViewport?.removeEventListener('scroll', position);
+    };
+};
+const restoreExternalFocus = (owner, focused) => {
+    const ElementType = owner.defaultView?.HTMLElement;
+    if (ElementType && focused instanceof ElementType && focused.isConnected && owner.activeElement !== focused) {
+        focused.focus({ preventScroll: true });
+    }
+};
+const restoreFocus = (panel, trigger, topLayer) => {
+    const document = panel.ownerDocument;
+    const focused = document.activeElement;
+    const ownedFocus = focused !== null && panel.contains(focused);
+    if (topLayer && panel.matches(':popover-open'))
+        panel.hidePopover();
+    if (ownedFocus && trigger.isConnected)
+        trigger.focus({ preventScroll: true });
+    // Closing a panel must not steal focus from a dialog opened by its action.
+    if (!ownedFocus)
+        restoreExternalFocus(document, focused);
+};
+const restoreAttribute = (panel, name, value) => {
+    if (value === null)
+        panel.removeAttribute(name);
+    else
+        panel.setAttribute(name, value);
+};
+// A malformed selector must not abort after the panel is shown, so it is resolved first and only skips focus.
+const findInitialFocus = (panel, view, selector) => {
+    if (!selector)
+        return null;
+    try {
+        return panel.querySelector(selector);
+    }
+    catch (error) {
+        if (error instanceof view.DOMException && error.name === 'SyntaxError')
+            return null;
+        throw error;
+    }
+};
+/**
+ * Shows `panel` anchored to `trigger`: in the top layer when the Popover API exists, otherwise fixed. The
+ * panel follows scroll, resize, visual viewport, and enclosing animation changes, flips to stay visible,
+ * honors RTL, and calls `onDismiss` on outside focus, when its containing dialog closes, or when the trigger
+ * or panel leaves the document. Connecting makes the panel visible; the caller owns hiding it again. The returned
+ * cleanup leaves the top layer, returns owned focus to the trigger, restores the panel's previous inline
+ * styles and popover attributes, and removes every listener and observer.
+ */
+export const connectLumenFloatingPanel = (panel, trigger, { placement = 'bottom-start', offset, collisionPadding, initialFocus, onDismiss }) => {
+    const view = panel.ownerDocument.defaultView;
+    if (!view)
+        return () => undefined;
+    const context = {
+        panel,
+        trigger,
+        view,
+        placement,
+        gap: finiteDistance(offset, 6),
+        padding: finiteDistance(collisionPadding, 8)
+    };
+    const focusTarget = findInitialFocus(panel, view, initialFocus);
+    const previousPopover = panel.getAttribute('popover');
+    const previousPlacement = panel.getAttribute('data-placement');
+    const previousStyles = styleKeys.map(key => [
+        key, panel.style.getPropertyValue(key), panel.style.getPropertyPriority(key)
+    ]);
+    const topLayer = typeof panel.showPopover === 'function';
+    panel.hidden = false;
+    if (topLayer) {
+        panel.setAttribute('popover', 'manual');
+        panel.showPopover();
+    }
+    positionPanel(context);
+    focusTarget?.focus({ preventScroll: true });
+    let connected = true;
+    const dismiss = () => {
+        if (connected)
+            onDismiss();
+    };
+    const stopObserving = observePosition(context, dismiss);
+    return () => {
+        if (!connected)
+            return;
+        connected = false;
+        stopObserving();
+        restoreFocus(panel, trigger, topLayer);
+        restoreAttribute(panel, 'popover', previousPopover);
+        restoreAttribute(panel, 'data-placement', previousPlacement);
+        for (const [key, value, priority] of previousStyles) {
+            if (value)
+                panel.style.setProperty(key, value, priority);
+            else
+                panel.style.removeProperty(key);
+        }
+    };
+};

package/dist/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../src/forms.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,mEAMpB,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;AAE9D,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,OAAO;IAC9C,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,OAAO,EAAE,IAAI,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,eAAe,CAAA;IACvB,OAAO,EAAE,KAAK,CAAA;CACf;AAED,MAAM,MAAM,eAAe,CAAC,IAAI,GAAG,OAAO,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAEvF,MAAM,MAAM,mBAAmB,GAC3B,eAAe,GACjB,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAC7D,SAAS,eAAe,EAAE,GAC1B,IAAI,GACJ,SAAS,CAAA;AAiDX,eAAO,MAAM,wBAAwB,GACnC,OAAO,mBAAmB,KACzB,eAqCF,CAAA;AAED,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,eAAe,EACvB,MAAM,MAAM,KACX,eAAe,EAAwD,CAAA;AAE1E,eAAO,MAAM,sBAAsB,GAAI,IAAI,EACzC,MAAM,IAAI,KACT,gBAAgB,CAAC,IAAI,CAA8B,CAAA;AAEtD,eAAO,MAAM,sBAAsB,GACjC,QAAQ,mBAAmB,KAC1B,gBAGD,CAAA"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../src/forms.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,mEAMpB,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAA;AAE9D,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,OAAO;IAC9C,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,OAAO,EAAE,IAAI,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,eAAe,CAAA;IACvB,OAAO,EAAE,KAAK,CAAA;CACf;AAED,MAAM,MAAM,eAAe,CAAC,IAAI,GAAG,OAAO,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;AAEvF,MAAM,MAAM,mBAAmB,GAC3B,eAAe,GACjB,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAC7D,SAAS,eAAe,EAAE,GAC1B,IAAI,GACJ,SAAS,CAAA;AAiEX,eAAO,MAAM,wBAAwB,GACnC,OAAO,mBAAmB,KACzB,eAqCF,CAAA;AAED,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,eAAe,EACvB,MAAM,MAAM,KACX,eAAe,EAAwD,CAAA;AAE1E,eAAO,MAAM,sBAAsB,GAAI,IAAI,EACzC,MAAM,IAAI,KACT,gBAAgB,CAAC,IAAI,CAA8B,CAAA;AAEtD,eAAO,MAAM,sBAAsB,GACjC,QAAQ,mBAAmB,KAC1B,gBAGD,CAAA"}

package/dist/forms.js

@@ -5,8 +5,21 @@ export const lumenFormStatuses = [
     'success',
     'error'
 ];
-const isStringArray = (value) => Array.isArray(value);
-const isLumenFieldErrorArray = (value) => Array.isArray(value);
+const isStringArray = (value) => Array.isArray(value) &&
+    value.every((message) => typeof message === 'string');
+const isOptionalString = (value) => value === undefined || typeof value === 'string';
+const isLumenFieldError = (value) => {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    if (!('message' in value) || typeof value.message !== 'string')
+        return false;
+    if (!('name' in value) || typeof value.name !== 'string')
+        return false;
+    if ('code' in value && !isOptionalString(value.code))
+        return false;
+    return !('controlId' in value) || isOptionalString(value.controlId);
+};
+const isLumenFieldErrorArray = (value) => Array.isArray(value) && value.every(isLumenFieldError);
 const compactMessages = (value) => {
     if (typeof value === 'string') {
         const message = value.trim();
@@ -21,9 +34,10 @@ const compactMessages = (value) => {
 const isLumenFormErrors = (value) => Boolean(value &&
     !Array.isArray(value) &&
     'fields' in value &&
-    Array.isArray(value.fields) &&
+    isLumenFieldErrorArray(value.fields) &&
     'form' in value &&
-    Array.isArray(value.form));
+    isStringArray(value.form) &&
+    (value.fields.length > 0 || Object.keys(value).every(name => name === 'fields' || name === 'form')));
 const normalizeFieldError = (error) => {
     const message = error.message.trim();
     const name = error.name.trim();