@malva-ui/core 0.1.12

package/esm2022/page/lib/page-shell/page-shell-color.js

@@ -0,0 +1,193 @@
+/** Opaque black, used as one endpoint for automatic contrast. */
+const BLACK = { red: 0, green: 0, blue: 0, alpha: 1 };
+/** Opaque white, used as one endpoint for automatic contrast. */
+const WHITE = {
+    red: 255,
+    green: 255,
+    blue: 255,
+    alpha: 1,
+};
+/**
+ * Parses an RGB value emitted by the browser CSSOM.
+ *
+ * @param value Computed `rgb(...)` or `rgba(...)` string.
+ * @returns The normalized color, or `null` when the value is not parseable.
+ */
+export function parseComputedColor(value) {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'transparent') {
+        return { red: 0, green: 0, blue: 0, alpha: 0 };
+    }
+    const match = /^rgba?\((.*)\)$/i.exec(normalized);
+    if (!match) {
+        return null;
+    }
+    const body = match[1].trim();
+    const commaSeparated = body.includes(',');
+    let channelValues;
+    let alphaValue;
+    if (commaSeparated) {
+        const parts = body.split(',').map((part) => part.trim());
+        if (parts.length !== 3 && parts.length !== 4) {
+            return null;
+        }
+        channelValues = parts.slice(0, 3);
+        alphaValue = parts[3];
+    }
+    else {
+        const slashParts = body.split('/').map((part) => part.trim());
+        if (slashParts.length > 2) {
+            return null;
+        }
+        channelValues = slashParts[0].split(/\s+/);
+        alphaValue = slashParts[1];
+    }
+    if (channelValues.length !== 3) {
+        return null;
+    }
+    const channels = channelValues.map(_parseChannel);
+    const alpha = alphaValue === undefined ? 1 : _parseAlpha(alphaValue);
+    if (channels.some((channel) => channel === null) || alpha === null) {
+        return null;
+    }
+    return {
+        red: channels[0],
+        green: channels[1],
+        blue: channels[2],
+        alpha,
+    };
+}
+/**
+ * Composites one sRGB color over another using source-over alpha blending.
+ *
+ * @param foreground Color painted above the background.
+ * @param background Color painted below the foreground.
+ * @returns The effective blended color.
+ */
+export function compositeColors(foreground, background) {
+    const alpha = foreground.alpha + background.alpha * (1 - foreground.alpha);
+    if (alpha === 0) {
+        return { red: 0, green: 0, blue: 0, alpha: 0 };
+    }
+    return {
+        red: _compositeChannel(foreground.red, background.red, foreground.alpha, background.alpha, alpha),
+        green: _compositeChannel(foreground.green, background.green, foreground.alpha, background.alpha, alpha),
+        blue: _compositeChannel(foreground.blue, background.blue, foreground.alpha, background.alpha, alpha),
+        alpha,
+    };
+}
+/**
+ * Serializes a normalized color to modern CSS RGB syntax.
+ *
+ * @param color Color to serialize.
+ * @returns A CSS `rgb(...)` value.
+ */
+export function toCssColor(color) {
+    const channels = [color.red, color.green, color.blue]
+        .map(_formatNumber)
+        .join(', ');
+    if (color.alpha >= 1) {
+        return `rgb(${channels})`;
+    }
+    return `rgba(${channels}, ${_formatNumber(color.alpha)})`;
+}
+/**
+ * Computes the WCAG contrast ratio between two opaque effective colors.
+ *
+ * @param first First effective color.
+ * @param second Second effective color.
+ * @returns Contrast ratio in the inclusive range 1–21.
+ */
+export function contrastRatio(first, second) {
+    const firstLuminance = _relativeLuminance(first);
+    const secondLuminance = _relativeLuminance(second);
+    const lighter = Math.max(firstLuminance, secondLuminance);
+    const darker = Math.min(firstLuminance, secondLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/**
+ * Selects the black or white endpoint with the strongest WCAG contrast.
+ *
+ * @param background Opaque effective background color.
+ * @returns An opaque CSS black or white value.
+ */
+export function chooseContrastForeground(background) {
+    return contrastRatio(background, BLACK) >= contrastRatio(background, WHITE)
+        ? 'rgb(0, 0, 0)'
+        : 'rgb(255, 255, 255)';
+}
+/**
+ * Parses an RGB channel expressed as a number or percentage.
+ *
+ * @param value Serialized channel.
+ * @returns A channel in the range 0–255, or `null` when invalid.
+ */
+function _parseChannel(value) {
+    const isPercentage = value.endsWith('%');
+    const parsed = Number(isPercentage ? value.slice(0, -1) : value);
+    const channel = isPercentage ? (parsed / 100) * 255 : parsed;
+    return Number.isFinite(channel) && channel >= 0 && channel <= 255
+        ? channel
+        : null;
+}
+/**
+ * Parses an alpha channel expressed as a number or percentage.
+ *
+ * @param value Serialized alpha channel.
+ * @returns A channel in the range 0–1, or `null` when invalid.
+ */
+function _parseAlpha(value) {
+    const isPercentage = value.endsWith('%');
+    const parsed = Number(isPercentage ? value.slice(0, -1) : value);
+    const alpha = isPercentage ? parsed / 100 : parsed;
+    return Number.isFinite(alpha) && alpha >= 0 && alpha <= 1 ? alpha : null;
+}
+/**
+ * Blends one channel using source-over alpha compositing.
+ *
+ * @param foreground Foreground channel.
+ * @param background Background channel.
+ * @param foregroundAlpha Foreground alpha.
+ * @param backgroundAlpha Background alpha.
+ * @param outputAlpha Resulting alpha.
+ * @returns Blended channel.
+ */
+function _compositeChannel(foreground, background, foregroundAlpha, backgroundAlpha, outputAlpha) {
+    return ((foreground * foregroundAlpha +
+        background * backgroundAlpha * (1 - foregroundAlpha)) /
+        outputAlpha);
+}
+/**
+ * Computes WCAG relative luminance for an sRGB color.
+ *
+ * @param color Effective color.
+ * @returns Relative luminance in the range 0–1.
+ */
+function _relativeLuminance(color) {
+    const red = _linearizeChannel(color.red);
+    const green = _linearizeChannel(color.green);
+    const blue = _linearizeChannel(color.blue);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+/**
+ * Converts an sRGB channel to linear light for luminance calculation.
+ *
+ * @param channel Channel in the range 0–255.
+ * @returns Linearized channel in the range 0–1.
+ */
+function _linearizeChannel(channel) {
+    const normalized = channel / 255;
+    return normalized <= 0.04045
+        ? normalized / 12.92
+        : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+/**
+ * Produces a compact, stable decimal for CSS serialization.
+ *
+ * @param value Numeric value.
+ * @returns Rounded decimal without trailing zeroes.
+ */
+function _formatNumber(value) {
+    return String(Math.round(value * 1000) / 1000);
+}
+//# sourceMappingURL=page-shell-color.js.map

package/esm2022/page/lib/page-shell/page-shell-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell-color.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-shell/page-shell-color.ts"],"names":[],"mappings":"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","sourcesContent":["/** Internal normalized representation of a browser-resolved sRGB color. */\nexport interface MlvRgbaColor {\n  /** Red channel in the inclusive range 0–255. */\n  red: number;\n  /** Green channel in the inclusive range 0–255. */\n  green: number;\n  /** Blue channel in the inclusive range 0–255. */\n  blue: number;\n  /** Alpha channel in the inclusive range 0–1. */\n  alpha: number;\n}\n\n/** Opaque black, used as one endpoint for automatic contrast. */\nconst BLACK: MlvRgbaColor = { red: 0, green: 0, blue: 0, alpha: 1 };\n\n/** Opaque white, used as one endpoint for automatic contrast. */\nconst WHITE: MlvRgbaColor = {\n  red: 255,\n  green: 255,\n  blue: 255,\n  alpha: 1,\n};\n\n/**\n * Parses an RGB value emitted by the browser CSSOM.\n *\n * @param value Computed `rgb(...)` or `rgba(...)` string.\n * @returns The normalized color, or `null` when the value is not parseable.\n */\nexport function parseComputedColor(value: string): MlvRgbaColor | null {\n  const normalized = value.trim().toLowerCase();\n  if (normalized === 'transparent') {\n    return { red: 0, green: 0, blue: 0, alpha: 0 };\n  }\n\n  const match = /^rgba?\\((.*)\\)$/i.exec(normalized);\n\n  if (!match) {\n    return null;\n  }\n\n  const body = match[1].trim();\n  const commaSeparated = body.includes(',');\n  let channelValues: string[];\n  let alphaValue: string | undefined;\n\n  if (commaSeparated) {\n    const parts = body.split(',').map((part) => part.trim());\n    if (parts.length !== 3 && parts.length !== 4) {\n      return null;\n    }\n    channelValues = parts.slice(0, 3);\n    alphaValue = parts[3];\n  } else {\n    const slashParts = body.split('/').map((part) => part.trim());\n    if (slashParts.length > 2) {\n      return null;\n    }\n    channelValues = slashParts[0].split(/\\s+/);\n    alphaValue = slashParts[1];\n  }\n\n  if (channelValues.length !== 3) {\n    return null;\n  }\n\n  const channels = channelValues.map(_parseChannel);\n  const alpha = alphaValue === undefined ? 1 : _parseAlpha(alphaValue);\n\n  if (channels.some((channel) => channel === null) || alpha === null) {\n    return null;\n  }\n\n  return {\n    red: channels[0] as number,\n    green: channels[1] as number,\n    blue: channels[2] as number,\n    alpha,\n  };\n}\n\n/**\n * Composites one sRGB color over another using source-over alpha blending.\n *\n * @param foreground Color painted above the background.\n * @param background Color painted below the foreground.\n * @returns The effective blended color.\n */\nexport function compositeColors(\n  foreground: MlvRgbaColor,\n  background: MlvRgbaColor,\n): MlvRgbaColor {\n  const alpha = foreground.alpha + background.alpha * (1 - foreground.alpha);\n\n  if (alpha === 0) {\n    return { red: 0, green: 0, blue: 0, alpha: 0 };\n  }\n\n  return {\n    red: _compositeChannel(\n      foreground.red,\n      background.red,\n      foreground.alpha,\n      background.alpha,\n      alpha,\n    ),\n    green: _compositeChannel(\n      foreground.green,\n      background.green,\n      foreground.alpha,\n      background.alpha,\n      alpha,\n    ),\n    blue: _compositeChannel(\n      foreground.blue,\n      background.blue,\n      foreground.alpha,\n      background.alpha,\n      alpha,\n    ),\n    alpha,\n  };\n}\n\n/**\n * Serializes a normalized color to modern CSS RGB syntax.\n *\n * @param color Color to serialize.\n * @returns A CSS `rgb(...)` value.\n */\nexport function toCssColor(color: MlvRgbaColor): string {\n  const channels = [color.red, color.green, color.blue]\n    .map(_formatNumber)\n    .join(', ');\n  if (color.alpha >= 1) {\n    return `rgb(${channels})`;\n  }\n  return `rgba(${channels}, ${_formatNumber(color.alpha)})`;\n}\n\n/**\n * Computes the WCAG contrast ratio between two opaque effective colors.\n *\n * @param first First effective color.\n * @param second Second effective color.\n * @returns Contrast ratio in the inclusive range 1–21.\n */\nexport function contrastRatio(\n  first: MlvRgbaColor,\n  second: MlvRgbaColor,\n): number {\n  const firstLuminance = _relativeLuminance(first);\n  const secondLuminance = _relativeLuminance(second);\n  const lighter = Math.max(firstLuminance, secondLuminance);\n  const darker = Math.min(firstLuminance, secondLuminance);\n  return (lighter + 0.05) / (darker + 0.05);\n}\n\n/**\n * Selects the black or white endpoint with the strongest WCAG contrast.\n *\n * @param background Opaque effective background color.\n * @returns An opaque CSS black or white value.\n */\nexport function chooseContrastForeground(background: MlvRgbaColor): string {\n  return contrastRatio(background, BLACK) >= contrastRatio(background, WHITE)\n    ? 'rgb(0, 0, 0)'\n    : 'rgb(255, 255, 255)';\n}\n\n/**\n * Parses an RGB channel expressed as a number or percentage.\n *\n * @param value Serialized channel.\n * @returns A channel in the range 0–255, or `null` when invalid.\n */\nfunction _parseChannel(value: string): number | null {\n  const isPercentage = value.endsWith('%');\n  const parsed = Number(isPercentage ? value.slice(0, -1) : value);\n  const channel = isPercentage ? (parsed / 100) * 255 : parsed;\n  return Number.isFinite(channel) && channel >= 0 && channel <= 255\n    ? channel\n    : null;\n}\n\n/**\n * Parses an alpha channel expressed as a number or percentage.\n *\n * @param value Serialized alpha channel.\n * @returns A channel in the range 0–1, or `null` when invalid.\n */\nfunction _parseAlpha(value: string): number | null {\n  const isPercentage = value.endsWith('%');\n  const parsed = Number(isPercentage ? value.slice(0, -1) : value);\n  const alpha = isPercentage ? parsed / 100 : parsed;\n  return Number.isFinite(alpha) && alpha >= 0 && alpha <= 1 ? alpha : null;\n}\n\n/**\n * Blends one channel using source-over alpha compositing.\n *\n * @param foreground Foreground channel.\n * @param background Background channel.\n * @param foregroundAlpha Foreground alpha.\n * @param backgroundAlpha Background alpha.\n * @param outputAlpha Resulting alpha.\n * @returns Blended channel.\n */\nfunction _compositeChannel(\n  foreground: number,\n  background: number,\n  foregroundAlpha: number,\n  backgroundAlpha: number,\n  outputAlpha: number,\n): number {\n  return (\n    (foreground * foregroundAlpha +\n      background * backgroundAlpha * (1 - foregroundAlpha)) /\n    outputAlpha\n  );\n}\n\n/**\n * Computes WCAG relative luminance for an sRGB color.\n *\n * @param color Effective color.\n * @returns Relative luminance in the range 0–1.\n */\nfunction _relativeLuminance(color: MlvRgbaColor): number {\n  const red = _linearizeChannel(color.red);\n  const green = _linearizeChannel(color.green);\n  const blue = _linearizeChannel(color.blue);\n  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n}\n\n/**\n * Converts an sRGB channel to linear light for luminance calculation.\n *\n * @param channel Channel in the range 0–255.\n * @returns Linearized channel in the range 0–1.\n */\nfunction _linearizeChannel(channel: number): number {\n  const normalized = channel / 255;\n  return normalized <= 0.04045\n    ? normalized / 12.92\n    : ((normalized + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * Produces a compact, stable decimal for CSS serialization.\n *\n * @param value Numeric value.\n * @returns Rounded decimal without trailing zeroes.\n */\nfunction _formatNumber(value: number): string {\n  return String(Math.round(value * 1000) / 1000);\n}\n"]}

package/esm2022/page/lib/page-shell/page-shell-css-color.js

@@ -0,0 +1,207 @@
+import { compositeColors, parseComputedColor, } from './page-shell-color';
+/** Stable opaque base matching the default page-shell chrome background. */
+const DEFAULT_SHELL_BACKGROUND = {
+    red: 23,
+    green: 23,
+    blue: 23,
+    alpha: 1,
+};
+/**
+ * Resolves a CSS color in an element's actual inheritance context.
+ * Two inherited sentinel colors distinguish a valid result from an unresolved
+ * value that silently falls back to `inherit`.
+ *
+ * @param host Element whose cascade resolves custom properties.
+ * @param value Candidate CSS color.
+ * @returns Browser-resolved sRGB channels, or `null` when unresolved.
+ */
+export function resolveCssColor(host, value) {
+    const rawCandidate = value?.trim();
+    if (!rawCandidate ||
+        /^(currentcolor|inherit|initial|unset|revert|revert-layer)$/i.test(rawCandidate)) {
+        return null;
+    }
+    const view = host.ownerDocument.defaultView;
+    if (!view) {
+        return null;
+    }
+    const candidate = _resolveCustomProperties(host, rawCandidate);
+    if (!candidate) {
+        return null;
+    }
+    const first = _createColorProbe(host, 'rgb(1, 2, 3)', candidate);
+    const second = _createColorProbe(host, 'rgb(4, 5, 6)', candidate);
+    host.append(first.wrapper, second.wrapper);
+    const firstColor = parseComputedColor(view.getComputedStyle(first.probe).color);
+    const secondColor = parseComputedColor(view.getComputedStyle(second.probe).color);
+    first.wrapper.remove();
+    second.wrapper.remove();
+    return firstColor && secondColor && _colorsEqual(firstColor, secondColor)
+        ? firstColor
+        : null;
+}
+/**
+ * Resolves the visible backdrop beneath a translucent shell color.
+ * Ancestor backgrounds are composited from nearest to farthest before the
+ * stable shell default is used as the final opaque base.
+ *
+ * @param host Shell whose ancestor cascade supplies the backdrop.
+ * @returns Opaque effective backdrop.
+ */
+export function resolveBackdropBackground(host) {
+    const view = host.ownerDocument.defaultView;
+    let backdrop = {
+        red: 0,
+        green: 0,
+        blue: 0,
+        alpha: 0,
+    };
+    let current = host.parentElement;
+    while (view && current) {
+        const ancestorBackground = parseComputedColor(view.getComputedStyle(current).backgroundColor);
+        if (ancestorBackground) {
+            backdrop = compositeColors(backdrop, ancestorBackground);
+            if (backdrop.alpha >= 1) {
+                return backdrop;
+            }
+        }
+        current = current.parentElement;
+    }
+    const fallback = resolveCssColor(host, 'var(--mlv-palette-neutral-900)') ??
+        DEFAULT_SHELL_BACKGROUND;
+    return compositeColors(backdrop, fallback);
+}
+/**
+ * Resolves `var(...)` references from the host's computed cascade.
+ * The browser remains responsible for the custom-property cascade; this
+ * substitution handles CSSOM implementations that do not expand variables
+ * when serializing a computed `color` value.
+ *
+ * @param host Element whose cascade owns the custom properties.
+ * @param value CSS value that may contain custom-property references.
+ * @param seen Custom properties currently being expanded, for cycle safety.
+ * @param depth Expansion depth guard.
+ * @returns Value with variables substituted, or `null` when unresolved.
+ */
+function _resolveCustomProperties(host, value, seen = new Set(), depth = 0) {
+    if (depth > 16) {
+        return null;
+    }
+    const range = _findFirstVarFunction(value);
+    if (!range) {
+        return value;
+    }
+    const content = value.slice(range.contentStart, range.contentEnd);
+    const [namePart, fallback] = _splitCustomPropertyArguments(content);
+    const name = namePart.trim();
+    if (!/^--[a-z0-9_-]+$/i.test(name)) {
+        return null;
+    }
+    const view = host.ownerDocument.defaultView;
+    let replacement = view?.getComputedStyle(host).getPropertyValue(name).trim() ?? '';
+    if (!replacement || seen.has(name)) {
+        replacement = fallback?.trim() ?? '';
+    }
+    if (!replacement) {
+        return null;
+    }
+    const nextSeen = new Set(seen);
+    nextSeen.add(name);
+    const resolvedReplacement = _resolveCustomProperties(host, replacement, nextSeen, depth + 1);
+    if (!resolvedReplacement) {
+        if (!fallback) {
+            return null;
+        }
+        const resolvedFallback = _resolveCustomProperties(host, fallback.trim(), seen, depth + 1);
+        if (!resolvedFallback) {
+            return null;
+        }
+        return _resolveCustomProperties(host, `${value.slice(0, range.start)}${resolvedFallback}${value.slice(range.end)}`, seen, depth + 1);
+    }
+    return _resolveCustomProperties(host, `${value.slice(0, range.start)}${resolvedReplacement}${value.slice(range.end)}`, seen, depth + 1);
+}
+/**
+ * Locates the first balanced CSS `var(...)` function.
+ *
+ * @param value CSS value to scan.
+ * @returns Function and content offsets, or `null` when absent/malformed.
+ */
+function _findFirstVarFunction(value) {
+    const start = value.toLowerCase().indexOf('var(');
+    if (start < 0) {
+        return null;
+    }
+    let parentheses = 1;
+    for (let index = start + 4; index < value.length; index++) {
+        if (value[index] === '(') {
+            parentheses++;
+        }
+        else if (value[index] === ')') {
+            parentheses--;
+            if (parentheses === 0) {
+                return {
+                    start,
+                    end: index + 1,
+                    contentStart: start + 4,
+                    contentEnd: index,
+                };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Splits a custom-property name from its optional top-level fallback.
+ *
+ * @param content Contents of a `var(...)` function.
+ * @returns Name and optional fallback.
+ */
+function _splitCustomPropertyArguments(content) {
+    let parentheses = 0;
+    for (let index = 0; index < content.length; index++) {
+        if (content[index] === '(') {
+            parentheses++;
+        }
+        else if (content[index] === ')') {
+            parentheses--;
+        }
+        else if (content[index] === ',' && parentheses === 0) {
+            return [content.slice(0, index), content.slice(index + 1)];
+        }
+    }
+    return [content, undefined];
+}
+/**
+ * Creates a hidden color probe and its sentinel-colored wrapper.
+ *
+ * @param host Element whose document creates the probes.
+ * @param sentinel Inherited color used to detect unresolved candidates.
+ * @param candidate Candidate assigned to the probe.
+ * @returns Wrapper and probe elements.
+ */
+function _createColorProbe(host, sentinel, candidate) {
+    const document = host.ownerDocument;
+    const wrapper = document.createElement('span');
+    const probe = document.createElement('span');
+    wrapper.setAttribute('aria-hidden', 'true');
+    wrapper.style.cssText =
+        `position:fixed;inline-size:0;block-size:0;overflow:hidden;` +
+            `visibility:hidden;pointer-events:none;color:${sentinel}`;
+    probe.style.color = candidate;
+    wrapper.append(probe);
+    return { wrapper, probe };
+}
+/**
+ * Compares two normalized colors exactly as emitted by CSSOM.
+ *
+ * @param first First resolved color.
+ * @param second Second resolved color.
+ * @returns Whether all four channels match.
+ */
+function _colorsEqual(first, second) {
+    return (first.red === second.red &&
+        first.green === second.green &&
+        first.blue === second.blue &&
+        first.alpha === second.alpha);
+}
+//# sourceMappingURL=page-shell-css-color.js.map

package/esm2022/page/lib/page-shell/page-shell-css-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell-css-color.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-shell/page-shell-css-color.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,kBAAkB,GAEnB,MAAM,oBAAoB,CAAC;AAE5B,4EAA4E;AAC5E,MAAM,wBAAwB,GAAiB;IAC7C,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,CAAC;CACT,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,IAAiB,EACjB,KAAoB;IAEpB,MAAM,YAAY,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;IACnC,IACE,CAAC,YAAY;QACb,6DAA6D,CAAC,IAAI,CAChE,YAAY,CACb,EACD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAG,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAC/D,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAG,iBAAiB,CAAC,IAAI,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IAClE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,kBAAkB,CACnC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CACzC,CAAC;IACF,MAAM,WAAW,GAAG,kBAAkB,CACpC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAC1C,CAAC;IAEF,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAExB,OAAO,UAAU,IAAI,WAAW,IAAI,YAAY,CAAC,UAAU,EAAE,WAAW,CAAC;QACvE,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAAiB;IACzD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C,IAAI,QAAQ,GAAiB;QAC3B,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACT,CAAC;IACF,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;IAEjC,OAAO,IAAI,IAAI,OAAO,EAAE,CAAC;QACvB,MAAM,kBAAkB,GAAG,kBAAkB,CAC3C,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAAe,CAC/C,CAAC;QACF,IAAI,kBAAkB,EAAE,CAAC;YACvB,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;YACzD,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;gBACxB,OAAO,QAAQ,CAAC;YAClB,CAAC;QACH,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;IAClC,CAAC;IAED,MAAM,QAAQ,GACZ,eAAe,CAAC,IAAI,EAAE,gCAAgC,CAAC;QACvD,wBAAwB,CAAC;IAC3B,OAAO,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAS,wBAAwB,CAC/B,IAAiB,EACjB,KAAa,EACb,OAAO,IAAI,GAAG,EAAU,EACxB,KAAK,GAAG,CAAC;IAET,IAAI,KAAK,GAAG,EAAE,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpE,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C,IAAI,WAAW,GACb,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;IAEnE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACnC,WAAW,GAAG,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACvC,CAAC;IACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnB,MAAM,mBAAmB,GAAG,wBAAwB,CAClD,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,CAAC,CACV,CAAC;IACF,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,gBAAgB,GAAG,wBAAwB,CAC/C,IAAI,EACJ,QAAQ,CAAC,IAAI,EAAE,EACf,IAAI,EACJ,KAAK,GAAG,CAAC,CACV,CAAC;QACF,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,wBAAwB,CAC7B,IAAI,EACJ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,gBAAgB,GAAG,KAAK,CAAC,KAAK,CAC7D,KAAK,CAAC,GAAG,CACV,EAAE,EACH,IAAI,EACJ,KAAK,GAAG,CAAC,CACV,CAAC;IACJ,CAAC;IAED,OAAO,wBAAwB,CAC7B,IAAI,EACJ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,mBAAmB,GAAG,KAAK,CAAC,KAAK,CAChE,KAAK,CAAC,GAAG,CACV,EAAE,EACH,IAAI,EACJ,KAAK,GAAG,CAAC,CACV,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,qBAAqB,CAAC,KAAa;IAM1C,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,KAAK,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAC1D,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACzB,WAAW,EAAE,CAAC;QAChB,CAAC;aAAM,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YAChC,WAAW,EAAE,CAAC;YACd,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;gBACtB,OAAO;oBACL,KAAK;oBACL,GAAG,EAAE,KAAK,GAAG,CAAC;oBACd,YAAY,EAAE,KAAK,GAAG,CAAC;oBACvB,UAAU,EAAE,KAAK;iBAClB,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;GAKG;AACH,SAAS,6BAA6B,CACpC,OAAe;IAEf,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QACpD,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YAC3B,WAAW,EAAE,CAAC;QAChB,CAAC;aAAM,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YAClC,WAAW,EAAE,CAAC;QAChB,CAAC;aAAM,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;YACvD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IACD,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,iBAAiB,CACxB,IAAiB,EACjB,QAAgB,EAChB,SAAiB;IAEjB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7C,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC5C,OAAO,CAAC,KAAK,CAAC,OAAO;QACnB,4DAA4D;YAC5D,+CAA+C,QAAQ,EAAE,CAAC;IAC5D,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAC5B,CAAC;AAED;;;;;;GAMG;AACH,SAAS,YAAY,CAAC,KAAmB,EAAE,MAAoB;IAC7D,OAAO,CACL,KAAK,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG;QACxB,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;QAC5B,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI;QAC1B,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAC7B,CAAC;AACJ,CAAC","sourcesContent":["import {\n  compositeColors,\n  parseComputedColor,\n  type MlvRgbaColor,\n} from './page-shell-color';\n\n/** Stable opaque base matching the default page-shell chrome background. */\nconst DEFAULT_SHELL_BACKGROUND: MlvRgbaColor = {\n  red: 23,\n  green: 23,\n  blue: 23,\n  alpha: 1,\n};\n\n/**\n * Resolves a CSS color in an element's actual inheritance context.\n * Two inherited sentinel colors distinguish a valid result from an unresolved\n * value that silently falls back to `inherit`.\n *\n * @param host Element whose cascade resolves custom properties.\n * @param value Candidate CSS color.\n * @returns Browser-resolved sRGB channels, or `null` when unresolved.\n */\nexport function resolveCssColor(\n  host: HTMLElement,\n  value: string | null,\n): MlvRgbaColor | null {\n  const rawCandidate = value?.trim();\n  if (\n    !rawCandidate ||\n    /^(currentcolor|inherit|initial|unset|revert|revert-layer)$/i.test(\n      rawCandidate,\n    )\n  ) {\n    return null;\n  }\n\n  const view = host.ownerDocument.defaultView;\n  if (!view) {\n    return null;\n  }\n\n  const candidate = _resolveCustomProperties(host, rawCandidate);\n  if (!candidate) {\n    return null;\n  }\n\n  const first = _createColorProbe(host, 'rgb(1, 2, 3)', candidate);\n  const second = _createColorProbe(host, 'rgb(4, 5, 6)', candidate);\n  host.append(first.wrapper, second.wrapper);\n\n  const firstColor = parseComputedColor(\n    view.getComputedStyle(first.probe).color,\n  );\n  const secondColor = parseComputedColor(\n    view.getComputedStyle(second.probe).color,\n  );\n\n  first.wrapper.remove();\n  second.wrapper.remove();\n\n  return firstColor && secondColor && _colorsEqual(firstColor, secondColor)\n    ? firstColor\n    : null;\n}\n\n/**\n * Resolves the visible backdrop beneath a translucent shell color.\n * Ancestor backgrounds are composited from nearest to farthest before the\n * stable shell default is used as the final opaque base.\n *\n * @param host Shell whose ancestor cascade supplies the backdrop.\n * @returns Opaque effective backdrop.\n */\nexport function resolveBackdropBackground(host: HTMLElement): MlvRgbaColor {\n  const view = host.ownerDocument.defaultView;\n  let backdrop: MlvRgbaColor = {\n    red: 0,\n    green: 0,\n    blue: 0,\n    alpha: 0,\n  };\n  let current = host.parentElement;\n\n  while (view && current) {\n    const ancestorBackground = parseComputedColor(\n      view.getComputedStyle(current).backgroundColor,\n    );\n    if (ancestorBackground) {\n      backdrop = compositeColors(backdrop, ancestorBackground);\n      if (backdrop.alpha >= 1) {\n        return backdrop;\n      }\n    }\n    current = current.parentElement;\n  }\n\n  const fallback =\n    resolveCssColor(host, 'var(--mlv-palette-neutral-900)') ??\n    DEFAULT_SHELL_BACKGROUND;\n  return compositeColors(backdrop, fallback);\n}\n\n/**\n * Resolves `var(...)` references from the host's computed cascade.\n * The browser remains responsible for the custom-property cascade; this\n * substitution handles CSSOM implementations that do not expand variables\n * when serializing a computed `color` value.\n *\n * @param host Element whose cascade owns the custom properties.\n * @param value CSS value that may contain custom-property references.\n * @param seen Custom properties currently being expanded, for cycle safety.\n * @param depth Expansion depth guard.\n * @returns Value with variables substituted, or `null` when unresolved.\n */\nfunction _resolveCustomProperties(\n  host: HTMLElement,\n  value: string,\n  seen = new Set<string>(),\n  depth = 0,\n): string | null {\n  if (depth > 16) {\n    return null;\n  }\n\n  const range = _findFirstVarFunction(value);\n  if (!range) {\n    return value;\n  }\n\n  const content = value.slice(range.contentStart, range.contentEnd);\n  const [namePart, fallback] = _splitCustomPropertyArguments(content);\n  const name = namePart.trim();\n  if (!/^--[a-z0-9_-]+$/i.test(name)) {\n    return null;\n  }\n\n  const view = host.ownerDocument.defaultView;\n  let replacement =\n    view?.getComputedStyle(host).getPropertyValue(name).trim() ?? '';\n\n  if (!replacement || seen.has(name)) {\n    replacement = fallback?.trim() ?? '';\n  }\n  if (!replacement) {\n    return null;\n  }\n\n  const nextSeen = new Set(seen);\n  nextSeen.add(name);\n  const resolvedReplacement = _resolveCustomProperties(\n    host,\n    replacement,\n    nextSeen,\n    depth + 1,\n  );\n  if (!resolvedReplacement) {\n    if (!fallback) {\n      return null;\n    }\n    const resolvedFallback = _resolveCustomProperties(\n      host,\n      fallback.trim(),\n      seen,\n      depth + 1,\n    );\n    if (!resolvedFallback) {\n      return null;\n    }\n    return _resolveCustomProperties(\n      host,\n      `${value.slice(0, range.start)}${resolvedFallback}${value.slice(\n        range.end,\n      )}`,\n      seen,\n      depth + 1,\n    );\n  }\n\n  return _resolveCustomProperties(\n    host,\n    `${value.slice(0, range.start)}${resolvedReplacement}${value.slice(\n      range.end,\n    )}`,\n    seen,\n    depth + 1,\n  );\n}\n\n/**\n * Locates the first balanced CSS `var(...)` function.\n *\n * @param value CSS value to scan.\n * @returns Function and content offsets, or `null` when absent/malformed.\n */\nfunction _findFirstVarFunction(value: string): {\n  start: number;\n  end: number;\n  contentStart: number;\n  contentEnd: number;\n} | null {\n  const start = value.toLowerCase().indexOf('var(');\n  if (start < 0) {\n    return null;\n  }\n\n  let parentheses = 1;\n  for (let index = start + 4; index < value.length; index++) {\n    if (value[index] === '(') {\n      parentheses++;\n    } else if (value[index] === ')') {\n      parentheses--;\n      if (parentheses === 0) {\n        return {\n          start,\n          end: index + 1,\n          contentStart: start + 4,\n          contentEnd: index,\n        };\n      }\n    }\n  }\n\n  return null;\n}\n\n/**\n * Splits a custom-property name from its optional top-level fallback.\n *\n * @param content Contents of a `var(...)` function.\n * @returns Name and optional fallback.\n */\nfunction _splitCustomPropertyArguments(\n  content: string,\n): [string, string | undefined] {\n  let parentheses = 0;\n  for (let index = 0; index < content.length; index++) {\n    if (content[index] === '(') {\n      parentheses++;\n    } else if (content[index] === ')') {\n      parentheses--;\n    } else if (content[index] === ',' && parentheses === 0) {\n      return [content.slice(0, index), content.slice(index + 1)];\n    }\n  }\n  return [content, undefined];\n}\n\n/**\n * Creates a hidden color probe and its sentinel-colored wrapper.\n *\n * @param host Element whose document creates the probes.\n * @param sentinel Inherited color used to detect unresolved candidates.\n * @param candidate Candidate assigned to the probe.\n * @returns Wrapper and probe elements.\n */\nfunction _createColorProbe(\n  host: HTMLElement,\n  sentinel: string,\n  candidate: string,\n): { wrapper: HTMLSpanElement; probe: HTMLSpanElement } {\n  const document = host.ownerDocument;\n  const wrapper = document.createElement('span');\n  const probe = document.createElement('span');\n\n  wrapper.setAttribute('aria-hidden', 'true');\n  wrapper.style.cssText =\n    `position:fixed;inline-size:0;block-size:0;overflow:hidden;` +\n    `visibility:hidden;pointer-events:none;color:${sentinel}`;\n  probe.style.color = candidate;\n  wrapper.append(probe);\n\n  return { wrapper, probe };\n}\n\n/**\n * Compares two normalized colors exactly as emitted by CSSOM.\n *\n * @param first First resolved color.\n * @param second Second resolved color.\n * @returns Whether all four channels match.\n */\nfunction _colorsEqual(first: MlvRgbaColor, second: MlvRgbaColor): boolean {\n  return (\n    first.red === second.red &&\n    first.green === second.green &&\n    first.blue === second.blue &&\n    first.alpha === second.alpha\n  );\n}\n"]}

package/esm2022/page/lib/page-shell/page-shell.js

@@ -0,0 +1,131 @@
+import { afterRenderEffect, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, input, signal, ViewEncapsulation, } from '@angular/core';
+import { chooseContrastForeground, compositeColors, toCssColor, } from './page-shell-color';
+import { resolveBackdropBackground, resolveCssColor, } from './page-shell-css-color';
+import * as i0 from "@angular/core";
+/**
+ * Application-page shell that joins global top navigation, one or two sidebars,
+ * and the Page canvas without taking ownership of their component behaviour.
+ */
+export class MlvPageShell {
+    /**
+     * Optional CSS color for the shell chrome background.
+     * Browser-resolved values such as `var(--brand-color)` are supported.
+     */
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional CSS color overriding the automatically selected chrome foreground.
+     */
+    foreground = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foreground" }] : /* istanbul ignore next */ []));
+    /** @protected Browser-resolved background applied through the host style. */
+    _resolvedBackground = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedBackground" }] : /* istanbul ignore next */ []));
+    /** @protected Browser-resolved foreground applied through the host style. */
+    _resolvedForeground = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedForeground" }] : /* istanbul ignore next */ []));
+    /** @private Native shell host used as the CSS inheritance context. */
+    _host = inject(ElementRef);
+    /** @private Angular destruction hook for frame and observer cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Identifier of the pending color-resolution animation frame. */
+    _resolutionFrameId = null;
+    /** @private Watches theme and custom-property changes in the shell cascade. */
+    _mutationObserver = null;
+    constructor() {
+        afterRenderEffect(() => {
+            this.color();
+            this.foreground();
+            this._startColorObservation();
+            this._scheduleColorResolution();
+        });
+        this._destroyRef.onDestroy(() => {
+            this._mutationObserver?.disconnect();
+            const view = this._host.nativeElement.ownerDocument.defaultView;
+            if (this._resolutionFrameId !== null && view) {
+                view.cancelAnimationFrame(this._resolutionFrameId);
+            }
+        });
+    }
+    /**
+     * @private Observes the shell and its ancestors for cascade-affecting
+     * attribute changes. One observer can watch every node in the chain.
+     */
+    _startColorObservation() {
+        if (this._mutationObserver) {
+            return;
+        }
+        const host = this._host.nativeElement;
+        const view = host.ownerDocument.defaultView;
+        if (!view || typeof view.MutationObserver === 'undefined') {
+            return;
+        }
+        this._mutationObserver = new view.MutationObserver(() => {
+            this._scheduleColorResolution();
+        });
+        let current = host;
+        while (current) {
+            this._mutationObserver.observe(current, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'mlvtheme',
+                    'mlvTheme',
+                    'data-theme',
+                ],
+            });
+            current = current.parentElement;
+        }
+    }
+    /**
+     * @private Coalesces CSS reads and signal writes into the next render frame.
+     */
+    _scheduleColorResolution() {
+        if (this._resolutionFrameId !== null) {
+            return;
+        }
+        const view = this._host.nativeElement.ownerDocument.defaultView;
+        if (!view) {
+            return;
+        }
+        this._resolutionFrameId = view.requestAnimationFrame(() => {
+            this._resolutionFrameId = null;
+            this._resolveColors();
+        });
+    }
+    /**
+     * @private Resolves the input colors and updates the internal host variables.
+     */
+    _resolveColors() {
+        const host = this._host.nativeElement;
+        const background = resolveCssColor(host, this.color());
+        const explicitForeground = resolveCssColor(host, this.foreground());
+        this._resolvedBackground.set(background ? toCssColor(background) : null);
+        if (explicitForeground) {
+            this._resolvedForeground.set(toCssColor(explicitForeground));
+            return;
+        }
+        if (!background) {
+            this._resolvedForeground.set(null);
+            return;
+        }
+        const effectiveBackground = background.alpha < 1
+            ? compositeColors(background, resolveBackdropBackground(host))
+            : background;
+        this._resolvedForeground.set(chooseContrastForeground(effectiveBackground));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageShell, isStandalone: true, selector: "mlv-page-shell", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--mlv-page-shell-resolved-background": "_resolvedBackground()", "style.--mlv-page-shell-resolved-foreground": "_resolvedForeground()", "style.background": "_resolvedBackground()", "style.color": "_resolvedForeground()" }, classAttribute: "mlv-page-shell" }, ngImport: i0, template: "<ng-content select=\"[mlvPageTopbar]\" />\n<div class=\"mlv-page-shell__body\">\n  <ng-content select=\"[mlvPageSidebar]\" />\n  <div class=\"mlv-page-shell__content\"><ng-content /></div>\n  <ng-content select=\"[mlvPageEndSidebar]\" />\n</div>\n", styles: [".mlv-page-shell{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-shell *{box-sizing:border-box}.mlv-page-shell{--mlv-page-shell-chrome-background: var(--mlv-palette-neutral-900);--mlv-page-shell-chrome-foreground: var(--mlv-palette-neutral-50);--mlv-page-shell-effective-background: var( --mlv-page-shell-resolved-background, var(--mlv-page-shell-chrome-background) );--mlv-page-shell-effective-foreground: var( --mlv-page-shell-resolved-foreground, var(--mlv-page-shell-chrome-foreground) );display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;overflow:hidden;background:var(--mlv-page-shell-effective-background);color:var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar{flex:0 0 auto}.mlv-page-shell__topbar.mlv-action-bar{--mlv-action-bar-bg: var(--mlv-page-shell-effective-background);--mlv-action-bar-fg: var(--mlv-page-shell-effective-foreground);--mlv-action-bar-border: transparent;--mlv-action-bar-shadow: none;min-height:3.25rem;background:var(--mlv-page-shell-effective-background);-webkit-backdrop-filter:none;backdrop-filter:none}.mlv-page-shell__body{display:flex;flex:1 1 auto;min-width:0;min-height:0}.mlv-page-shell__content{display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.mlv-page-shell__content>.mlv-page{height:100%}.mlv-page-shell__sidebar{flex:0 0 auto;min-height:0}.mlv-page-shell__topbar .mlv-form-control-wrapper,.mlv-page-shell__sidebar .mlv-form-control-wrapper{--container-background-color: rgb(255 255 255 / 10%);--container-border-color: rgb(255 255 255 / 30%);--container-side-content-color: var(--mlv-page-shell-effective-foreground);--container-action-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-tertiary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 60%, transparent );--mlv-border-focus: var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: rgb(255 255 255 / 40%)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: rgb(255 255 255 / 50%)}.mlv-page-shell__sidebar.mlv-sidebar--offcanvas{width:0;min-width:0;overflow:visible}.mlv-page-shell__sidebar.mlv-sidebar{--mlv-sidebar-border-width: 0rem;--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-action: var(--mlv-page-shell-effective-foreground);--mlv-background-neutral-1: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-background-neutral-1-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-background-neutral-1-active: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, transparent );--mlv-border-focus: var(--mlv-page-shell-effective-foreground);--mlv-sidebar-hover-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-sidebar-active-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, transparent );--mlv-sidebar-rail-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 30%, transparent );height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-shell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-shell',
+                        '[style.--mlv-page-shell-resolved-background]': '_resolvedBackground()',
+                        '[style.--mlv-page-shell-resolved-foreground]': '_resolvedForeground()',
+                        '[style.background]': '_resolvedBackground()',
+                        '[style.color]': '_resolvedForeground()',
+                    }, template: "<ng-content select=\"[mlvPageTopbar]\" />\n<div class=\"mlv-page-shell__body\">\n  <ng-content select=\"[mlvPageSidebar]\" />\n  <div class=\"mlv-page-shell__content\"><ng-content /></div>\n  <ng-content select=\"[mlvPageEndSidebar]\" />\n</div>\n", styles: [".mlv-page-shell{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-shell *{box-sizing:border-box}.mlv-page-shell{--mlv-page-shell-chrome-background: var(--mlv-palette-neutral-900);--mlv-page-shell-chrome-foreground: var(--mlv-palette-neutral-50);--mlv-page-shell-effective-background: var( --mlv-page-shell-resolved-background, var(--mlv-page-shell-chrome-background) );--mlv-page-shell-effective-foreground: var( --mlv-page-shell-resolved-foreground, var(--mlv-page-shell-chrome-foreground) );display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;overflow:hidden;background:var(--mlv-page-shell-effective-background);color:var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar{flex:0 0 auto}.mlv-page-shell__topbar.mlv-action-bar{--mlv-action-bar-bg: var(--mlv-page-shell-effective-background);--mlv-action-bar-fg: var(--mlv-page-shell-effective-foreground);--mlv-action-bar-border: transparent;--mlv-action-bar-shadow: none;min-height:3.25rem;background:var(--mlv-page-shell-effective-background);-webkit-backdrop-filter:none;backdrop-filter:none}.mlv-page-shell__body{display:flex;flex:1 1 auto;min-width:0;min-height:0}.mlv-page-shell__content{display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.mlv-page-shell__content>.mlv-page{height:100%}.mlv-page-shell__sidebar{flex:0 0 auto;min-height:0}.mlv-page-shell__topbar .mlv-form-control-wrapper,.mlv-page-shell__sidebar .mlv-form-control-wrapper{--container-background-color: rgb(255 255 255 / 10%);--container-border-color: rgb(255 255 255 / 30%);--container-side-content-color: var(--mlv-page-shell-effective-foreground);--container-action-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-tertiary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 60%, transparent );--mlv-border-focus: var(--mlv-page-shell-effective-foreground)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--state-default:hover{--container-border-color: rgb(255 255 255 / 40%)}.mlv-page-shell__topbar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused,.mlv-page-shell__sidebar .mlv-form-control-wrapper.mlv-form-control-wrapper--focused{--container-border-color: rgb(255 255 255 / 50%)}.mlv-page-shell__sidebar.mlv-sidebar--offcanvas{width:0;min-width:0;overflow:visible}.mlv-page-shell__sidebar.mlv-sidebar{--mlv-sidebar-border-width: 0rem;--mlv-text-secondary: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 78%, transparent );--mlv-text-primary: var(--mlv-page-shell-effective-foreground);--mlv-text-action: var(--mlv-page-shell-effective-foreground);--mlv-background-neutral-1: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-background-neutral-1-hover: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-background-neutral-1-active: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, transparent );--mlv-border-focus: var(--mlv-page-shell-effective-foreground);--mlv-sidebar-hover-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 15%, transparent );--mlv-sidebar-active-bg: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 24%, transparent );--mlv-sidebar-rail-color: color-mix( in srgb, var(--mlv-page-shell-effective-foreground) 30%, transparent );height:100%;border:0;border-radius:0;box-shadow:none;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], foreground: [{ type: i0.Input, args: [{ isSignal: true, alias: "foreground", required: false }] }] } });
+//# sourceMappingURL=page-shell.js.map

package/esm2022/page/lib/page-shell/page-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-shell/page-shell.ts","../../../../../../../libs/core/page/src/lib/page-shell/page-shell.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  chooseContrastForeground,\n  compositeColors,\n  toCssColor,\n} from './page-shell-color';\nimport {\n  resolveBackdropBackground,\n  resolveCssColor,\n} from './page-shell-css-color';\n\n/**\n * Application-page shell that joins global top navigation, one or two sidebars,\n * and the Page canvas without taking ownership of their component behaviour.\n */\n@Component({\n  selector: 'mlv-page-shell',\n  templateUrl: './page-shell.html',\n  styleUrl: './page-shell.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-shell',\n    '[style.--mlv-page-shell-resolved-background]': '_resolvedBackground()',\n    '[style.--mlv-page-shell-resolved-foreground]': '_resolvedForeground()',\n    '[style.background]': '_resolvedBackground()',\n    '[style.color]': '_resolvedForeground()',\n  },\n})\nexport class MlvPageShell {\n  /**\n   * Optional CSS color for the shell chrome background.\n   * Browser-resolved values such as `var(--brand-color)` are supported.\n   */\n  readonly color = input<string | null>(null);\n\n  /**\n   * Optional CSS color overriding the automatically selected chrome foreground.\n   */\n  readonly foreground = input<string | null>(null);\n\n  /** @protected Browser-resolved background applied through the host style. */\n  protected readonly _resolvedBackground = signal<string | null>(null);\n\n  /** @protected Browser-resolved foreground applied through the host style. */\n  protected readonly _resolvedForeground = signal<string | null>(null);\n\n  /** @private Native shell host used as the CSS inheritance context. */\n  private readonly _host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** @private Angular destruction hook for frame and observer cleanup. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** @private Identifier of the pending color-resolution animation frame. */\n  private _resolutionFrameId: number | null = null;\n\n  /** @private Watches theme and custom-property changes in the shell cascade. */\n  private _mutationObserver: MutationObserver | null = null;\n\n  constructor() {\n    afterRenderEffect(() => {\n      this.color();\n      this.foreground();\n      this._startColorObservation();\n      this._scheduleColorResolution();\n    });\n\n    this._destroyRef.onDestroy(() => {\n      this._mutationObserver?.disconnect();\n      const view = this._host.nativeElement.ownerDocument.defaultView;\n      if (this._resolutionFrameId !== null && view) {\n        view.cancelAnimationFrame(this._resolutionFrameId);\n      }\n    });\n  }\n\n  /**\n   * @private Observes the shell and its ancestors for cascade-affecting\n   * attribute changes. One observer can watch every node in the chain.\n   */\n  private _startColorObservation(): void {\n    if (this._mutationObserver) {\n      return;\n    }\n\n    const host = this._host.nativeElement;\n    const view = host.ownerDocument.defaultView;\n    if (!view || typeof view.MutationObserver === 'undefined') {\n      return;\n    }\n\n    this._mutationObserver = new view.MutationObserver(() => {\n      this._scheduleColorResolution();\n    });\n\n    let current: HTMLElement | null = host;\n    while (current) {\n      this._mutationObserver.observe(current, {\n        attributes: true,\n        attributeFilter: [\n          'class',\n          'style',\n          'mlvtheme',\n          'mlvTheme',\n          'data-theme',\n        ],\n      });\n      current = current.parentElement;\n    }\n  }\n\n  /**\n   * @private Coalesces CSS reads and signal writes into the next render frame.\n   */\n  private _scheduleColorResolution(): void {\n    if (this._resolutionFrameId !== null) {\n      return;\n    }\n\n    const view = this._host.nativeElement.ownerDocument.defaultView;\n    if (!view) {\n      return;\n    }\n\n    this._resolutionFrameId = view.requestAnimationFrame(() => {\n      this._resolutionFrameId = null;\n      this._resolveColors();\n    });\n  }\n\n  /**\n   * @private Resolves the input colors and updates the internal host variables.\n   */\n  private _resolveColors(): void {\n    const host = this._host.nativeElement;\n    const background = resolveCssColor(host, this.color());\n    const explicitForeground = resolveCssColor(host, this.foreground());\n\n    this._resolvedBackground.set(background ? toCssColor(background) : null);\n\n    if (explicitForeground) {\n      this._resolvedForeground.set(toCssColor(explicitForeground));\n      return;\n    }\n\n    if (!background) {\n      this._resolvedForeground.set(null);\n      return;\n    }\n\n    const effectiveBackground =\n      background.alpha < 1\n        ? compositeColors(background, resolveBackdropBackground(host))\n        : background;\n    this._resolvedForeground.set(chooseContrastForeground(effectiveBackground));\n  }\n}\n","<ng-content select=\"[mlvPageTopbar]\" />\n<div class=\"mlv-page-shell__body\">\n  <ng-content select=\"[mlvPageSidebar]\" />\n  <div class=\"mlv-page-shell__content\"><ng-content /></div>\n  <ng-content select=\"[mlvPageEndSidebar]\" />\n</div>\n"]}