@ds-mo/ui 3.0.1 → 3.1.1

package/src/wc/components/Icon/Icon.tsx

@@ -1,172 +0,0 @@
-import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
-import { flagIconLoaders } from './flag-icon-catalog';
-import { systemIconLoaders } from './system-icon-catalog';
-import { iconCache, iconCacheKey } from './icon-cache';
-import { parseIconSvg } from './icon-svg';
-
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-
-export type IconColorToken =
-  // Hierarchy
-  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'
-  // Intent — bold contrast (default)
-  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'guide' | 'neutral'
-  // Intent — faint
-  | 'faint-brand' | 'faint-negative' | 'faint-positive' | 'faint-warning'
-  | 'faint-caution' | 'faint-ai' | 'faint-neutral'
-  // Intent — medium
-  | 'medium-brand' | 'medium-negative' | 'medium-positive' | 'medium-warning'
-  | 'medium-caution' | 'medium-ai' | 'medium-neutral'
-  // Intent — bold (explicit)
-  | 'bold-brand' | 'bold-negative' | 'bold-positive' | 'bold-warning'
-  | 'bold-caution' | 'bold-ai' | 'bold-neutral'
-  // Intent — strong
-  | 'strong-brand' | 'strong-negative' | 'strong-positive' | 'strong-warning'
-  | 'strong-caution' | 'strong-ai' | 'strong-neutral'
-  // Contextual
-  | 'on-strong' | 'on-bold'
-  // Pass-through
-  | 'inherit';
-
-export type IconColor = IconColorToken | `var(--${string})`;
-
-@Component({
-  tag: 'ds-icon',
-  styleUrl: 'Icon.css',
-  scoped: true,
-})
-export class Icon {
-  @Element() el!: HTMLElement;
-
-  /** Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`) */
-  @Prop() name: string = '';
-  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
-  @Prop() size: IconSize = 'md';
-  /** Semantic foreground color token, or a raw CSS var reference. */
-  @Prop() color: IconColor | undefined;
-  /** Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons. */
-  @Prop() label: string | undefined;
-  /** Set `true` to look up from the flag icon set instead of the system icon set. */
-  @Prop() flag: boolean = false;
-
-  /** Resolved SVG markup — set synchronously on cache hit, async after a lazy load. */
-  @State() private svg: string = '';
-
-  /** Guards against out-of-order async resolutions when `name`/`flag` change quickly. */
-  private loadToken = 0;
-
-  /**
-   * Cache hit → render synchronously (pre-registered via `registerIcons` or
-   * previously loaded). Miss → fire the per-icon lazy loader; the glyph pops in
-   * when the (tiny, per-icon) chunk resolves and stays cached for every other
-   * ds-icon instance.
-   */
-  private resolveSvg() {
-    const flag = this.flag;
-    const key = iconCacheKey(this.name, flag);
-    const token = ++this.loadToken;
-
-    const cached = iconCache().get(key);
-    if (cached !== undefined) {
-      this.svg = cached;
-      return;
-    }
-
-    // Own-key lookup only: names resolve by exact canonical IcoMo export key —
-    // never meta.json aliases (not in the maps) and never inherited prototype
-    // keys ('constructor', 'toString', …) that a bare index access would hit.
-    const loaders = flag ? flagIconLoaders : systemIconLoaders;
-    const loader = Object.prototype.hasOwnProperty.call(loaders, this.name)
-      ? loaders[this.name]
-      : undefined;
-    if (!loader) {
-      this.svg = '';
-      return;
-    }
-
-    loader()
-      .then(svg => {
-        iconCache().set(key, svg);
-        if (token === this.loadToken) this.svg = svg;
-      })
-      .catch(() => {
-        if (token === this.loadToken) this.svg = '';
-      });
-  }
-
-  componentWillLoad() {
-    // Fire-and-forget: do not return the promise — a cache miss must not block
-    // the parent render tree on a network fetch.
-    this.resolveSvg();
-  }
-
-  /** Last markup injected into the DOM — skips redundant re-parse on unrelated re-renders. */
-  private renderedSvg: string | null = null;
-
-  private updateSvg() {
-    const container = this.el.querySelector<HTMLElement>('.icon__svg');
-    if (!container) return;
-    if (this.svg === this.renderedSvg) return;
-    this.renderedSvg = this.svg;
-
-    // Validate + inject as parsed DOM nodes — never innerHTML. Keeps ds-icon
-    // Trusted-Types compatible and rejects executable/foreign content in
-    // glyph strings (registerIcons accepts app-provided markup).
-    const svg = this.svg ? parseIconSvg(this.svg) : null;
-    if (!svg) {
-      container.replaceChildren();
-      return;
-    }
-
-    // Stencil's scoped CSS cannot reach injected elements (no sc-* class).
-    // Apply width/height as inline styles so sizing works regardless of scope class.
-    svg.removeAttribute('width');
-    svg.removeAttribute('height');
-    // Prevent SVG from being natively focusable (Firefox/IE default) while
-    // sitting inside an aria-hidden parent — fixes aria-hidden-focus violation.
-    svg.setAttribute('focusable', 'false');
-    svg.setAttribute('aria-hidden', 'true');
-    svg.style.display = 'block';
-    svg.style.flexShrink = '0';
-    svg.style.width = '100%';
-    svg.style.height = '100%';
-    container.replaceChildren(svg);
-  }
-
-  @Watch('name')
-  @Watch('flag')
-  onIconChange() {
-    this.resolveSvg();
-  }
-
-  componentDidRender() {
-    this.updateSvg();
-  }
-
-  render() {
-    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');
-
-    const cls: Record<string, boolean> = {
-      icon: true,
-      [`icon--size-${this.size}`]: true,
-      [`icon--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',
-      'icon--color-inherit': this.color === 'inherit',
-    };
-
-    const style = isCustomColor ? { color: this.color as string } : undefined;
-
-    return (
-      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-        <span
-          class={cls}
-          style={style}
-          role={this.label ? 'img' : 'presentation'}
-          aria-label={this.label}
-          aria-hidden={!this.label ? 'true' : undefined}
-        >
-          <span class="icon__svg" />
-        </span>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Icon/flag-icon-catalog.ts

@@ -1,36 +0,0 @@
-/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */
-
-export const flagIconLoaders: Record<string, () => Promise<string>> = {
-  FlagAustria: () => import('@ds-mo/icons/svg/flags/FlagAustria').then(m => m.FlagAustria),
-  FlagBelgium: () => import('@ds-mo/icons/svg/flags/FlagBelgium').then(m => m.FlagBelgium),
-  FlagBulgaria: () => import('@ds-mo/icons/svg/flags/FlagBulgaria').then(m => m.FlagBulgaria),
-  FlagCanada: () => import('@ds-mo/icons/svg/flags/FlagCanada').then(m => m.FlagCanada),
-  FlagCroatia: () => import('@ds-mo/icons/svg/flags/FlagCroatia').then(m => m.FlagCroatia),
-  FlagCyprus: () => import('@ds-mo/icons/svg/flags/FlagCyprus').then(m => m.FlagCyprus),
-  FlagCzechRepublic: () => import('@ds-mo/icons/svg/flags/FlagCzechRepublic').then(m => m.FlagCzechRepublic),
-  FlagDenmark: () => import('@ds-mo/icons/svg/flags/FlagDenmark').then(m => m.FlagDenmark),
-  FlagEU: () => import('@ds-mo/icons/svg/flags/FlagEU').then(m => m.FlagEU),
-  FlagEstonia: () => import('@ds-mo/icons/svg/flags/FlagEstonia').then(m => m.FlagEstonia),
-  FlagFinland: () => import('@ds-mo/icons/svg/flags/FlagFinland').then(m => m.FlagFinland),
-  FlagFrance: () => import('@ds-mo/icons/svg/flags/FlagFrance').then(m => m.FlagFrance),
-  FlagGermany: () => import('@ds-mo/icons/svg/flags/FlagGermany').then(m => m.FlagGermany),
-  FlagGreece: () => import('@ds-mo/icons/svg/flags/FlagGreece').then(m => m.FlagGreece),
-  FlagHungary: () => import('@ds-mo/icons/svg/flags/FlagHungary').then(m => m.FlagHungary),
-  FlagIreland: () => import('@ds-mo/icons/svg/flags/FlagIreland').then(m => m.FlagIreland),
-  FlagItaly: () => import('@ds-mo/icons/svg/flags/FlagItaly').then(m => m.FlagItaly),
-  FlagLatvia: () => import('@ds-mo/icons/svg/flags/FlagLatvia').then(m => m.FlagLatvia),
-  FlagLithuania: () => import('@ds-mo/icons/svg/flags/FlagLithuania').then(m => m.FlagLithuania),
-  FlagLuxembourg: () => import('@ds-mo/icons/svg/flags/FlagLuxembourg').then(m => m.FlagLuxembourg),
-  FlagMalta: () => import('@ds-mo/icons/svg/flags/FlagMalta').then(m => m.FlagMalta),
-  FlagMexico: () => import('@ds-mo/icons/svg/flags/FlagMexico').then(m => m.FlagMexico),
-  FlagNetherlands: () => import('@ds-mo/icons/svg/flags/FlagNetherlands').then(m => m.FlagNetherlands),
-  FlagPoland: () => import('@ds-mo/icons/svg/flags/FlagPoland').then(m => m.FlagPoland),
-  FlagPortugal: () => import('@ds-mo/icons/svg/flags/FlagPortugal').then(m => m.FlagPortugal),
-  FlagRomania: () => import('@ds-mo/icons/svg/flags/FlagRomania').then(m => m.FlagRomania),
-  FlagSlovakia: () => import('@ds-mo/icons/svg/flags/FlagSlovakia').then(m => m.FlagSlovakia),
-  FlagSlovenia: () => import('@ds-mo/icons/svg/flags/FlagSlovenia').then(m => m.FlagSlovenia),
-  FlagSpain: () => import('@ds-mo/icons/svg/flags/FlagSpain').then(m => m.FlagSpain),
-  FlagSweden: () => import('@ds-mo/icons/svg/flags/FlagSweden').then(m => m.FlagSweden),
-  FlagUnitedKingdom: () => import('@ds-mo/icons/svg/flags/FlagUnitedKingdom').then(m => m.FlagUnitedKingdom),
-  FlagUnitedStates: () => import('@ds-mo/icons/svg/flags/FlagUnitedStates').then(m => m.FlagUnitedStates),
-};

package/src/wc/components/Icon/icon-cache.ts

@@ -1,47 +0,0 @@
-/**
- * Shared SVG glyph cache for ds-icon.
- *
- * Keyed on a global symbol so every module instance (the compiled Stencil chunk
- * inside dist/components and any direct source import, e.g. via `@ds-mo/ui/utils`)
- * reads and writes the same cache. Without this, `registerIcons` called from an
- * app would fill a different Map than the one ds-icon resolves from.
- */
-const CACHE_KEY = Symbol.for('ds-mo.icon-svg-cache');
-
-type IconCacheMap = Map<string, string>;
-
-type GlobalWithIconCache = { [CACHE_KEY]?: IconCacheMap };
-
-export function iconCacheKey(name: string, flag: boolean): string {
-  return flag ? `flag:${name}` : `system:${name}`;
-}
-
-export function iconCache(): IconCacheMap {
-  const g = globalThis as GlobalWithIconCache;
-  return (g[CACHE_KEY] ??= new Map());
-}
-
-/**
- * Pre-register glyphs so ds-icon renders them synchronously — no lazy-chunk
- * fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`
- * in the app (statically, so they ship in the app's own bundle):
- *
- * ```ts
- * import { Bell } from '@ds-mo/icons/svg/Bell';
- * import { US } from '@ds-mo/icons/svg/flags/US';
- * import { registerIcons } from '@ds-mo/ui/utils';
- *
- * registerIcons({ Bell });
- * registerIcons({ US }, { flag: true });
- * ```
- *
- * Icons that are not registered still work — they lazy-load on first render
- * and stay cached afterwards.
- */
-export function registerIcons(icons: Record<string, string>, options?: { flag?: boolean }): void {
-  const cache = iconCache();
-  const flag = options?.flag === true;
-  for (const [name, svg] of Object.entries(icons)) {
-    cache.set(iconCacheKey(name, flag), svg);
-  }
-}

package/src/wc/components/Icon/icon-svg.ts

@@ -1,73 +0,0 @@
-/**
- * Glyph markup validation + Trusted-Types-safe parsing for ds-icon.
- *
- * Glyphs normally come from the trusted @ds-mo/icons build pipeline, but
- * `registerIcons` accepts arbitrary app-provided strings and injection is a
- * sink — so every glyph is validated at the render boundary. Injection uses
- * parsed DOM nodes (never innerHTML), which keeps ds-icon working under a
- * strict CSP with `require-trusted-types-for 'script'`.
- */
-
-/** Structural view of an element so the walk is unit-testable without a DOM. */
-export interface IconSvgElementLike {
-  localName: string;
-  getAttributeNames(): string[];
-  getAttribute(name: string): string | null;
-  children: ArrayLike<IconSvgElementLike>;
-}
-
-/** Elements that can execute or embed foreign content — never valid in a glyph. */
-const FORBIDDEN_ELEMENTS = new Set([
-  'script',
-  'foreignobject',
-  'iframe',
-  'object',
-  'embed',
-  'animation', // SVG 1.2 external-content element (distinct from animate/animateTransform)
-]);
-
-function isValidIconSvgElement(el: IconSvgElementLike): boolean {
-  if (FORBIDDEN_ELEMENTS.has(el.localName.toLowerCase())) return false;
-
-  for (const attr of el.getAttributeNames()) {
-    const lower = attr.toLowerCase();
-    // Event handler attributes (onclick, onload, …) — any casing.
-    if (lower.startsWith('on')) return false;
-    // References must stay internal (#gradient-id); rejects javascript:, data:,
-    // and external URLs on <use>, <a>, <image>, …
-    if (lower === 'href' || lower === 'xlink:href') {
-      const value = el.getAttribute(attr) ?? '';
-      if (!value.startsWith('#')) return false;
-    }
-  }
-
-  for (let i = 0; i < el.children.length; i++) {
-    if (!isValidIconSvgElement(el.children[i])) return false;
-  }
-
-  return true;
-}
-
-/** True when `root` is an `<svg>` whose whole tree passes validation. */
-export function isValidIconSvgRoot(root: IconSvgElementLike | null): boolean {
-  return root != null && root.localName === 'svg' && isValidIconSvgElement(root);
-}
-
-/**
- * Parse + validate glyph markup. Returns a detached `<svg>` element ready to
- * append (appending adopts it into the document), or `null` when the markup
- * is not well-formed XML, not rooted at `<svg>`, or fails validation —
- * ds-icon renders an empty fixed-size box in that case.
- */
-export function parseIconSvg(svg: string): SVGElement | null {
-  if (typeof DOMParser === 'undefined') return null;
-
-  const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
-  // Malformed XML yields a parsererror document (root or nested, per browser).
-  if (doc.querySelector('parsererror')) return null;
-
-  const root = doc.documentElement as unknown as IconSvgElementLike;
-  if (!isValidIconSvgRoot(root)) return null;
-
-  return doc.documentElement as unknown as SVGElement;
-}

package/src/wc/components/Icon/index.ts

@@ -1 +0,0 @@
-export type { IconSize, IconColorToken, IconColor } from './Icon';