@vectoriox/iox-ui 5.5.2 → 5.7.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -4953,6 +4953,201 @@ function partClassName(type, partKey) {
     return PART_CLASS_NAMES[type]?.[partKey];
 }
 
+function parseHexColor(hex) {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
+    if (!m)
+        return null;
+    let h = m[1];
+    if (h.length === 3)
+        h = h.split('').map(c => c + c).join('');
+    const n = parseInt(h, 16);
+    return { r: ((n >> 16) & 255) / 255, g: ((n >> 8) & 255) / 255, b: (n & 255) / 255 };
+}
+function toHexColor(c) {
+    const q = (v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, '0');
+    return `#${q(c.r)}${q(c.g)}${q(c.b)}`;
+}
+const srgbToLinear = (v) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+const linearToSrgb = (v) => (v <= 0.0031308 ? v * 12.92 : 1.055 * Math.pow(v, 1 / 2.4) - 0.055);
+function rgbToOklab(c) {
+    const r = srgbToLinear(c.r), g = srgbToLinear(c.g), b = srgbToLinear(c.b);
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    return {
+        L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+        a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+        b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    };
+}
+function oklabToRgb(c) {
+    const l = Math.pow(c.L + 0.3963377774 * c.a + 0.2158037573 * c.b, 3);
+    const m = Math.pow(c.L - 0.1055613458 * c.a - 0.0638541728 * c.b, 3);
+    const s = Math.pow(c.L - 0.0894841775 * c.a - 1.291485548 * c.b, 3);
+    return {
+        r: linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+        g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+        b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+    };
+}
+const inGamut = (c) => [c.r, c.g, c.b].every(v => v >= -1e-6 && v <= 1 + 1e-6);
+/** The OKLab colour at (L, hue, chroma), chroma reduced until it fits sRGB. */
+function atLightness(L, hueA, hueB, chroma) {
+    const len = Math.hypot(hueA, hueB) || 1;
+    const ua = hueA / len, ub = hueB / len;
+    let c = chroma;
+    for (let i = 0; i < 24; i++) {
+        const rgb = oklabToRgb({ L, a: ua * c, b: ub * c });
+        if (inGamut(rgb))
+            return rgb;
+        c *= 0.82;
+    }
+    return oklabToRgb({ L, a: 0, b: 0 });
+}
+// ── WCAG 2 (the gate) ────────────────────────────────────────────────────────
+function relativeLuminance(c) {
+    return 0.2126 * srgbToLinear(c.r) + 0.7152 * srgbToLinear(c.g) + 0.0722 * srgbToLinear(c.b);
+}
+/** WCAG 2 contrast ratio between two colours (order-independent), 1..21. */
+function wcagContrastRatio(a, b) {
+    const ca = typeof a === 'string' ? parseHexColor(a) : a;
+    const cb = typeof b === 'string' ? parseHexColor(b) : b;
+    if (!ca || !cb)
+        return 1;
+    const la = relativeLuminance(ca), lb = relativeLuminance(cb);
+    const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+// ── APCA (the read-out — WCAG 2 stays the gate) ─────────────────────────────
+/**
+ * APCA-W3 lightness contrast Lc (0.0.98G-4g constants), text-on-background and signed:
+ * positive for dark-on-light, negative for light-on-dark; |Lc| ≈ 106–108 at the extremes.
+ * Shown in the picker as the perceptual read-out; never used as the pass/fail gate here.
+ */
+function apcaLc(text, bg) {
+    const toY = (c) => 0.2126729 * Math.pow(c.r, 2.4) + 0.7151522 * Math.pow(c.g, 2.4) + 0.072175 * Math.pow(c.b, 2.4);
+    const clamp = (y) => (y < 0.022 ? y + Math.pow(0.022 - y, 1.414) : y);
+    const ct = typeof text === 'string' ? parseHexColor(text) : text;
+    const cb = typeof bg === 'string' ? parseHexColor(bg) : bg;
+    if (!ct || !cb)
+        return 0;
+    const yTxt = clamp(toY(ct)), yBg = clamp(toY(cb));
+    let lc;
+    if (yBg > yTxt)
+        lc = (Math.pow(yBg, 0.56) - Math.pow(yTxt, 0.57)) * 1.14;
+    else
+        lc = (Math.pow(yBg, 0.65) - Math.pow(yTxt, 0.62)) * 1.14;
+    if (Math.abs(lc) < 0.1)
+        return 0;
+    return Math.round((lc > 0 ? lc - 0.027 : lc + 0.027) * 1000) / 10;
+}
+// ── The ramp ─────────────────────────────────────────────────────────────────
+/** Fixed, perceptually even lightness ladder for brand-50 … brand-900. */
+const RAMP_STEPS = [
+    { step: 50, L: 0.97, chromaScale: 0.22 },
+    { step: 100, L: 0.93, chromaScale: 0.42 },
+    { step: 200, L: 0.86, chromaScale: 0.66 },
+    { step: 300, L: 0.78, chromaScale: 0.85 },
+    { step: 400, L: 0.70, chromaScale: 0.96 },
+    { step: 500, L: 0.62, chromaScale: 1.0 },
+    { step: 600, L: 0.53, chromaScale: 0.96 },
+    { step: 700, L: 0.45, chromaScale: 0.88 },
+    { step: 800, L: 0.36, chromaScale: 0.76 },
+    { step: 900, L: 0.27, chromaScale: 0.62 },
+];
+const BLACK = { r: 0, g: 0, b: 0 };
+const WHITE = { r: 1, g: 1, b: 1 };
+/** Snap to the 8-bit hex the token will actually carry — contrast is judged on WHAT SHIPS.
+ *  (The first version searched in float space and hex rounding landed 6.9596 where 7 was owed.) */
+const quant = (c) => parseHexColor(toHexColor(c));
+/** Binary-search an OKLab lightness so `contrast(colour, against) ≥ ratio`, darkening-or-lightening. */
+function atContrast(against, ratio, hueA, hueB, chroma, darker) {
+    let lo = darker ? 0 : rgbToOklab(against).L;
+    let hi = darker ? rgbToOklab(against).L : 1;
+    let best = quant(atLightness(darker ? 0.18 : 0.92, hueA, hueB, chroma));
+    for (let i = 0; i < 28; i++) {
+        const mid = (lo + hi) / 2;
+        const candidate = quant(atLightness(mid, hueA, hueB, chroma));
+        if (wcagContrastRatio(candidate, against) >= ratio) {
+            best = candidate;
+            if (darker)
+                lo = mid;
+            else
+                hi = mid; // pull back toward `against`: the LOWEST passing step
+        }
+        else {
+            if (darker)
+                hi = mid;
+            else
+                lo = mid;
+        }
+    }
+    return best;
+}
+/**
+ * The derived brand tokens (plan §6's table, every row asserted in brand.spec.ts):
+ * `brand-50…900` (monotonic OKLab lightness, gamut-safe) · `brandInk` (black or white, ≥4.5 on
+ * brand-500 — brand-500's lightness is nudged when neither side clears it) · `surface`/`ink`/
+ * `inkMuted` (seed-tinted neutrals, ≥7:1 / ≥4.5:1 on surface) · `line` (the LIGHTEST neutral that
+ * still clears 3:1 on surface) · `accent` (pack-rotated hue, ≥4.5:1 on surface) — with dark-scheme
+ * values for the neutral family riding `values.dark`.
+ *
+ * Throws on an unparseable seed: callers (the picker) validate; a silent fallback here would
+ * launch a studio into a palette nobody chose.
+ */
+function deriveBrandTokens(seed, pack) {
+    const seedRgb = parseHexColor(seed);
+    if (!seedRgb)
+        throw new TypeError(`deriveBrandTokens: not a colour: "${seed}"`);
+    const lab = rgbToOklab(seedRgb);
+    const chroma = Math.hypot(lab.a, lab.b);
+    const ua = chroma > 1e-6 ? lab.a : 0.0, ub = chroma > 1e-6 ? lab.b : 1e-6; // grey seeds: keep a stable (arbitrary) hue axis
+    const baseChroma = Math.max(chroma, 0.02); // near-grey seeds still get a usable, quiet ramp
+    const token = (name, value, dark) => ({ name, value, ...(dark ? { values: { dark } } : {}), type: 'color', group: 'colour' });
+    // 1 — the ramp
+    const ramp = RAMP_STEPS.map(({ step, L, chromaScale }) => ({ step, rgb: atLightness(L, ua, ub, baseChroma * chromaScale) }));
+    // 2 — brandInk on brand-500, nudging 500 (within its neighbours) when neither ink clears 4.5
+    let five = ramp.find(r => r.step === 500);
+    five.rgb = quant(five.rgb);
+    const inkFor = (bg) => (wcagContrastRatio(WHITE, bg) >= wcagContrastRatio(BLACK, bg) ? WHITE : BLACK);
+    for (let i = 0; i < 40 && wcagContrastRatio(inkFor(five.rgb), five.rgb) < 4.5; i++) {
+        const L = rgbToOklab(five.rgb).L;
+        // Mid tones can fail both inks — walk toward whichever side is already winning, but
+        // never past the neighbouring steps: the ramp's monotonic lightness is a guarantee.
+        const towardDark = wcagContrastRatio(WHITE, five.rgb) >= wcagContrastRatio(BLACK, five.rgb);
+        const next = Math.min(0.695, Math.max(0.545, L + (towardDark ? -0.012 : 0.012)));
+        if (next === L)
+            break;
+        five.rgb = quant(atLightness(next, ua, ub, baseChroma));
+    }
+    const brandInk = inkFor(five.rgb);
+    // 3 — the neutral family, faintly tinted by the seed hue. Surfaces are quantized FIRST:
+    // every later guarantee is measured against the hex that ships, not a float ideal.
+    const tint = 0.006;
+    const surface = quant(atLightness(0.985, ua, ub, tint));
+    const surfaceDark = quant(atLightness(0.145, ua, ub, tint * 1.5));
+    const ink = atContrast(surface, 7, ua, ub, tint * 2, true);
+    const inkDark = atContrast(surfaceDark, 7, ua, ub, tint * 2, false);
+    const inkMuted = atContrast(surface, 4.5, ua, ub, tint * 2, true);
+    const inkMutedDark = atContrast(surfaceDark, 4.5, ua, ub, tint * 2, false);
+    const line = atContrast(surface, 3, ua, ub, tint, true);
+    const lineDark = atContrast(surfaceDark, 3, ua, ub, tint, false);
+    // 4 — the accent: pack-defined hue rotation from the seed, readable on surface
+    const rot = ((pack.accentHueDeg ?? 150) * Math.PI) / 180;
+    const ra = ua * Math.cos(rot) - ub * Math.sin(rot);
+    const rb = ua * Math.sin(rot) + ub * Math.cos(rot);
+    const accent = atContrast(surface, 4.5, ra, rb, Math.max(baseChroma, 0.06), true);
+    return [
+        ...ramp.map(({ step, rgb }) => token(`brand-${step}`, toHexColor(rgb))),
+        token('brandInk', toHexColor(brandInk)),
+        token('surface', toHexColor(surface), toHexColor(surfaceDark)),
+        token('ink', toHexColor(ink), toHexColor(inkDark)),
+        token('inkMuted', toHexColor(inkMuted), toHexColor(inkMutedDark)),
+        token('line', toHexColor(line), toHexColor(lineDark)),
+        token('accent', toHexColor(accent)),
+    ];
+}
+
 /**
  * Design-token → CSS compilation, shared by BOTH renderers (flavors plan F0).
  *
@@ -5088,6 +5283,12 @@ const SWISS_FLAVOR = {
         ButtonBlock: { borderRadius: 'radius-control', padding: 'space-control' },
         Card: { borderRadius: 'radius-surface' },
     },
+    // F2: Swiss turns the seed toward a cool counterpoint. NOTE deliberately: the brand tokens
+    // deriveBrandTokens() emits are SEEDED per org — they do not join `defaults` here, because a
+    // colour default repaints legacy nodes whose saved styleProps lack the key (the engine fills
+    // missing keys from config defaults). Coloured element defaults are a Swiss v2 upgrade
+    // decision (§10 C2), taken with the picker in front of the author — never a side effect.
+    accentHueDeg: 150,
 };
 /** What both renderers use until F2 lets an org choose. */
 const DEFAULT_FLAVOR = SWISS_FLAVOR;
@@ -6929,5 +7130,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_FLAVOR, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SWISS_FLAVOR, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, compileTokenCss, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, flavorDefaultDeclarations, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveFlavorDefaults, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, styleKeyToKebab, tokensToDarkVarMap, tokensToVarMap, validateFlavorPack, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_FLAVOR, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SWISS_FLAVOR, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, apcaLc, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, compileTokenCss, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveBrandTokens, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, flavorDefaultDeclarations, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, oklabToRgb, parentBreakpoint, parseHexColor, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, relativeLuminance, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveFlavorDefaults, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, rgbToOklab, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, styleKeyToKebab, toHexColor, tokensToDarkVarMap, tokensToVarMap, validateFlavorPack, variableAliases, variableItemsFrom, wcagContrastRatio, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map