@ds-mo/ui 3.0.0 → 3.1.0

package/src/wc/utils/scroll-edge-fade.ts

@@ -1,148 +0,0 @@
-/** CSS custom property for scroll-edge fade depth (dimension token or length). */
-export const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';
-
-export const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';
-
-export type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';
-
-export type ScrollEdgeFadeSizeToken =
-  | 'size-000'
-  | 'size-050'
-  | 'size-075'
-  | 'size-100'
-  | 'size-150'
-  | 'size-200'
-  | 'size-250'
-  | 'size-300'
-  | 'size-400'
-  | 'size-500'
-  | 'size-600'
-  | 'size-800';
-
-export type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken | (string & {});
-
-const SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {
-  'size-000': 'var(--dimension-size-000)',
-  'size-050': 'var(--dimension-size-050)',
-  'size-075': 'var(--dimension-size-075)',
-  'size-100': 'var(--dimension-size-100)',
-  'size-150': 'var(--dimension-size-150)',
-  'size-200': 'var(--dimension-size-200)',
-  'size-250': 'var(--dimension-size-250)',
-  'size-300': 'var(--dimension-size-300)',
-  'size-400': 'var(--dimension-size-400)',
-  'size-500': 'var(--dimension-size-500)',
-  'size-600': 'var(--dimension-size-600)',
-  'size-800': 'var(--dimension-size-800)',
-};
-
-const SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;
-
-export interface ScrollEdgeFadeOptions {
-  /** One or more edges to fade. */
-  edges: ScrollEdgeFadeEdge | ScrollEdgeFadeEdge[];
-  /**
-   * When true, or when every listed edge is at its scroll limit, removes the mask.
-   * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).
-   */
-  atEnd?: boolean | Partial<Record<ScrollEdgeFadeEdge, boolean>>;
-  /** Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). */
-  hidden?: boolean;
-}
-
-/** Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. */
-export function resolveScrollEdgeFadeSize(
-  size: ScrollEdgeFadeSize = 'size-600',
-  height?: string,
-): string {
-  if (height) return height;
-  return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)
-    ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]
-    : size;
-}
-
-/** Inline style map setting fade depth on a scroll container. */
-export function scrollEdgeFadeSizeStyle(
-  size: ScrollEdgeFadeSize = 'size-600',
-  height?: string,
-): Record<string, string> {
-  return {
-    [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),
-  };
-}
-
-/**
- * Alpha mask for a scroll container edge — content fades to transparent so
- * textured backgrounds (shell gradients, images) show through.
- */
-export function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {
-  switch (edge) {
-    case 'top':
-      return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;
-    case 'bottom':
-      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
-    case 'left':
-      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
-    case 'right':
-      return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;
-  }
-}
-
-/** Inline style map for a masked scroll region (single edge). */
-export function scrollEdgeFadeMaskStyle(
-  edge: ScrollEdgeFadeEdge,
-  size: ScrollEdgeFadeSize = 'size-600',
-  height?: string,
-): Record<string, string> {
-  const mask = scrollEdgeFadeMaskImage(edge);
-  return {
-    ...scrollEdgeFadeSizeStyle(size, height),
-    WebkitMaskImage: mask,
-    maskImage: mask,
-    WebkitMaskSize: '100% 100%',
-    maskSize: '100% 100%',
-  };
-}
-
-/** Class map for `scroll-edge-fade` modifiers — pair with `scroll-edge-fade.css`. */
-export function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {
-  const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];
-  const classes: Record<string, boolean> = {
-    'scroll-edge-fade': true,
-    'scroll-edge-fade--hidden': opts.hidden === true,
-  };
-
-  for (const edge of edges) {
-    classes[`scroll-edge-fade--${edge}`] = true;
-  }
-
-  const { atEnd } = opts;
-  if (atEnd === true) {
-    classes['scroll-edge-fade--at-end'] = true;
-  } else if (atEnd && typeof atEnd === 'object') {
-    const allAtEnd = edges.every(edge => atEnd[edge]);
-    if (allAtEnd) {
-      classes['scroll-edge-fade--at-end'] = true;
-    }
-  }
-
-  return classes;
-}
-
-/** Whether a scroll container is flush with the given edge (within `threshold` px). */
-export function isScrollAtEdge(
-  el: HTMLElement,
-  edge: ScrollEdgeFadeEdge,
-  threshold = 2,
-): boolean {
-  switch (edge) {
-    case 'top':
-      return el.scrollTop <= threshold;
-    case 'bottom':
-      return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
-    case 'left':
-      return el.scrollLeft <= threshold;
-    case 'right':
-      return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;
-  }
-}

package/src/wc/utils/token-defaults.ts

@@ -1,81 +0,0 @@
-import {
-  dimensionIconographyMd,
-  dimensionIconographySm,
-  dimensionIconographyXs,
-  dimensionMenuWidthXs,
-  dimensionPanelWidth2xs,
-  dimensionPanelWidthLg,
-  dimensionPanelWidthMd,
-  dimensionRadius025,
-  dimensionSize200,
-  dimensionSize300,
-  dimensionSize400,
-  dimensionSize600,
-  dimensionSize800,
-  dimensionSpace050,
-  dimensionSpace200,
-  typographyLineheightLg,
-  typographyLineheightMd,
-  typographyLineheightSm,
-  typographyLineheightXl,
-  typographyLineheightXs,
-  effectAnimationDelayLong2,
-  effectAnimationDelayMedium1,
-  effectAnimationDelayMedium3,
-  effectAnimationDelayInstant,
-  effectAnimationDelayShort2,
-  effectAnimationDurationMedium1,
-  effectAnimationDurationShort3,
-  effectMotionShort2,
-  effectMotionShort3,
-} from '@ds-mo/tokens/ts';
-
-/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */
-export const TOKEN_DEFAULTS = {
-  space050: dimensionSpace050,
-  space200: dimensionSpace200,
-  radius025: dimensionRadius025,
-  size200: dimensionSize200,
-  size300: dimensionSize300,
-  size400: dimensionSize400,
-  size600: dimensionSize600,
-  size800: dimensionSize800,
-  iconographyMd: dimensionIconographyMd,
-  iconographySm: dimensionIconographySm,
-  iconographyXs: dimensionIconographyXs,
-  panelWidth2xs: dimensionPanelWidth2xs,
-  panelWidthMd: dimensionPanelWidthMd,
-  panelWidthLg: dimensionPanelWidthLg,
-  menuWidthXs: dimensionMenuWidthXs,
-  lineheightLg: typographyLineheightLg,
-  lineheightMd: typographyLineheightMd,
-  lineheightSm: typographyLineheightSm,
-  lineheightXl: typographyLineheightXl,
-  lineheightXs: typographyLineheightXs,
-  motionShort2: effectMotionShort2,
-  motionShort3: effectMotionShort3,
-  animationDurationShort3: effectAnimationDurationShort3,
-  animationDurationMedium1: effectAnimationDurationMedium1,
-  animationDelayInstant: effectAnimationDelayInstant,
-  animationDelayMedium1: effectAnimationDelayMedium1,
-  animationDelayMedium3: effectAnimationDelayMedium3,
-  animationDelayShort2: effectAnimationDelayShort2,
-  animationDelayLong2: effectAnimationDelayLong2,
-  /** Unmeasured menu height fallback: 20× base (160px at default scale). */
-  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',
-  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
-  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',
-  /** Fill-mode donut diameter floor: 16× size-base (128px). */
-  donutFillMin: 'calc(var(--dimension-size-base) * 16)',
-  /** Fill-mode donut diameter ceiling: 24× size-base (192px). */
-  donutFillMax: 'calc(var(--dimension-size-base) * 24)',
-} as const;
-
-export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;
-
-/** Valid CSS length strings for overlay offset props — bind on `sideOffset` / `alignOffset` in hosts. */
-export const TOKEN_CSS_LENGTHS = {
-  space050: `var(${dimensionSpace050})`,
-  space200: `var(${dimensionSpace200})`,
-  menuWidthXs: `var(${dimensionMenuWidthXs})`,
-} as const;

package/src/wc/utils/truncate-svg-text.ts

@@ -1,25 +0,0 @@
-/**
- * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`
- * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —
- * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.
- *
- * Mutates `el.textContent` during measurement; the caller's next render (driven by the
- * returned string going into state) overwrites it with the final value.
- */
-export function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {
-  el.textContent = text;
-  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;
-
-  let lo = 0;
-  let hi = text.length;
-  while (lo < hi) {
-    const mid = Math.ceil((lo + hi) / 2);
-    el.textContent = `${text.slice(0, mid)}…`;
-    if (el.getComputedTextLength() <= maxWidth) {
-      lo = mid;
-    } else {
-      hi = mid - 1;
-    }
-  }
-  return lo > 0 ? `${text.slice(0, lo)}…` : '…';
-}

package/src/wc/utils/typography.css

@@ -1,146 +0,0 @@
-/*
- * Internal typography recipes shared by ds-text and native text surfaces that
- * cannot render a custom element (for example, an <input> value).
- *
- * Each variant owns its font-size + line-height pairing. Never override one
- * without the other from a consuming component.
- */
-
-:host(.ds-text--display-medium),
-.ds-text--display-medium {
-  font-size: var(--typography-fontsize-3xl);
-  line-height: var(--typography-lineheight-3xl);
-}
-
-:host(.ds-text--display-small),
-.ds-text--display-small {
-  font-size: var(--typography-fontsize-2xl);
-  line-height: var(--typography-lineheight-2xl);
-}
-
-:host(.ds-text--title-large),
-.ds-text--title-large {
-  font-size: var(--typography-fontsize-xl);
-  line-height: var(--typography-lineheight-xl);
-}
-
-:host(.ds-text--title-medium),
-.ds-text--title-medium {
-  font-size: var(--typography-fontsize-lg);
-  line-height: var(--typography-lineheight-lg);
-}
-
-:host(.ds-text--title-small),
-.ds-text--title-small {
-  font-size: var(--typography-fontsize-md);
-  line-height: var(--typography-lineheight-md);
-}
-
-:host(.ds-text--body-large),
-.ds-text--body-large {
-  font-size: var(--typography-fontsize-lg);
-  line-height: var(--typography-lineheight-lg);
-}
-
-:host(.ds-text--body-medium),
-.ds-text--body-medium {
-  font-size: var(--typography-fontsize-md);
-  line-height: var(--typography-lineheight-md);
-}
-
-:host(.ds-text--body-small),
-.ds-text--body-small {
-  font-size: var(--typography-fontsize-sm);
-  line-height: var(--typography-lineheight-sm);
-}
-
-:host(.ds-text--caption),
-.ds-text--caption {
-  font-size: var(--typography-fontsize-xs);
-  line-height: var(--typography-lineheight-xs);
-  text-transform: uppercase;
-}
-
-:host(.ds-text--display-medium.ds-text--emphasis),
-:host(.ds-text--display-small.ds-text--emphasis),
-.ds-text--display-medium.ds-text--emphasis,
-.ds-text--display-small.ds-text--emphasis {
-  font-weight: var(--typography-weight-bold);
-  letter-spacing: var(--typography-letterspacing-negative-double);
-}
-
-:host(.ds-text--display-medium.ds-text--regular),
-:host(.ds-text--display-small.ds-text--regular),
-.ds-text--display-medium.ds-text--regular,
-.ds-text--display-small.ds-text--regular {
-  font-weight: var(--typography-weight-regular);
-  letter-spacing: var(--typography-letterspacing-negative);
-}
-
-:host(.ds-text--title-large.ds-text--emphasis),
-.ds-text--title-large.ds-text--emphasis {
-  font-weight: var(--typography-weight-semibold);
-  letter-spacing: var(--typography-letterspacing-negative-double);
-}
-
-:host(.ds-text--title-large.ds-text--regular),
-.ds-text--title-large.ds-text--regular {
-  font-weight: var(--typography-weight-regular);
-  letter-spacing: var(--typography-letterspacing-negative);
-}
-
-:host(.ds-text--title-medium.ds-text--emphasis),
-:host(.ds-text--title-small.ds-text--emphasis),
-.ds-text--title-medium.ds-text--emphasis,
-.ds-text--title-small.ds-text--emphasis {
-  font-weight: var(--typography-weight-semibold);
-  letter-spacing: var(--typography-letterspacing-negative);
-}
-
-:host(.ds-text--title-medium.ds-text--regular),
-:host(.ds-text--title-small.ds-text--regular),
-.ds-text--title-medium.ds-text--regular,
-.ds-text--title-small.ds-text--regular {
-  font-weight: var(--typography-weight-regular);
-  letter-spacing: var(--typography-letterspacing-negative-half);
-}
-
-:host(.ds-text--body-large.ds-text--emphasis),
-:host(.ds-text--body-medium.ds-text--emphasis),
-.ds-text--body-large.ds-text--emphasis,
-.ds-text--body-medium.ds-text--emphasis {
-  font-weight: var(--typography-weight-medium);
-  letter-spacing: var(--typography-letterspacing-negative);
-}
-
-:host(.ds-text--body-large.ds-text--regular),
-:host(.ds-text--body-medium.ds-text--regular),
-.ds-text--body-large.ds-text--regular,
-.ds-text--body-medium.ds-text--regular {
-  font-weight: var(--typography-weight-regular);
-  letter-spacing: var(--typography-letterspacing-negative-half);
-}
-
-:host(.ds-text--body-small.ds-text--emphasis),
-.ds-text--body-small.ds-text--emphasis {
-  font-weight: var(--typography-weight-medium);
-  letter-spacing: var(--typography-letterspacing-negative-half);
-}
-
-:host(.ds-text--body-small.ds-text--regular),
-.ds-text--body-small.ds-text--regular {
-  font-weight: var(--typography-weight-regular);
-  letter-spacing: var(--typography-letterspacing-none);
-}
-
-:host(.ds-text--caption.ds-text--emphasis),
-.ds-text--caption.ds-text--emphasis {
-  font-weight: var(--typography-weight-semibold);
-  letter-spacing: var(--typography-letterspacing-positive);
-}
-
-:host(.ds-text--caption.ds-text--regular),
-.ds-text--caption.ds-text--regular {
-  font-weight: var(--typography-weight-medium);
-  letter-spacing: var(--typography-letterspacing-positive);
-}