@ds-mo/ui 2.10.1 → 2.10.2

package/src/wc/components/Fade/Fade.tsx

@@ -1,54 +1,21 @@
-import { Component, Prop, Element, State, h, Host } from '@stencil/core';
-import { isShellGradientActive } from '../../nav/badge-gradient-ring';
+import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';
+import {
+  isScrollAtEdge,
+  scrollEdgeFadeClassMap,
+  scrollEdgeFadeSizeStyle,
+  type ScrollEdgeFadeEdge,
+  type ScrollEdgeFadeSize,
+  type ScrollEdgeFadeSizeToken,
+} from '../../utils/scroll-edge-fade';
 
-export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
-export type FadeSurface =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'navigation'
-  | 'media'
-  | 'always-dark'
-  | 'inverted';
-export type FadeSizeToken =
-  | '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 FadeSize = FadeSizeToken | (string & {});
+/** @deprecated Use `ScrollEdgeFadeEdge` from `@ds-mo/ui/utils`. */
+export type FadeSide = ScrollEdgeFadeEdge;
 
-const SIZE_VALUE: Record<FadeSizeToken, 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)',
-};
+/** @deprecated Use `ScrollEdgeFadeSizeToken` from `@ds-mo/ui/utils`. */
+export type FadeSizeToken = ScrollEdgeFadeSizeToken;
 
-const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
-  default: 'var(--color-background-secondary)',
-  primary: 'var(--color-background-primary)',
-  secondary: 'var(--color-background-secondary)',
-  navigation: 'var(--color-navigation-background)',
-  media: 'var(--color-media-background)',
-  'always-dark': 'var(--color-always-dark-background)',
-  inverted: 'var(--color-inverted-background)',
-};
+/** @deprecated Use `ScrollEdgeFadeSize` from `@ds-mo/ui/utils`. */
+export type FadeSize = ScrollEdgeFadeSize;
 
 @Component({
   tag: 'ds-fade',
@@ -58,10 +25,7 @@ const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
 export class Fade {
   @Element() el!: HTMLElement;
 
-  /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */
-  @State() private shellGradientChrome: 'panel' | 'bar' | null = null;
-
-  /** Edge where the fade is anchored. */
+  /** Edge where content fades as it approaches the scroll boundary. */
   @Prop() side: FadeSide = 'bottom';
 
   /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
@@ -73,61 +37,43 @@ export class Fade {
    */
   @Prop() height: string | undefined;
 
-  /** Surface context used to choose the fade target background token. */
-  @Prop() surface: FadeSurface = 'default';
-
-  /** Direct background override for contexts that already expose a resolved surface var. */
-  @Prop() background: string = 'var(--color-background-secondary)';
-
-  /** Controls visibility without removing the element from layout/positioning. */
+  /** Controls the mask without removing the scroll container from layout. */
   @Prop() visible: boolean = true;
 
-  componentDidLoad() {
-    this.syncShellGradient();
-  }
+  @State() private atEnd = false;
 
-  private syncShellGradient() {
-    if (!isShellGradientActive(this.el)) {
-      this.shellGradientChrome = null;
-      return;
-    }
-    this.shellGradientChrome = this.el.closest('ds-bar-nav') ? 'bar' : 'panel';
+  @Watch('side')
+  @Watch('visible')
+  protected onFadeConfigChange() {
+    this.syncAtEnd();
   }
 
-  private resolveSize(): string {
-    if (this.height) return this.height;
+  componentDidLoad() {
+    this.syncAtEnd();
+  }
 
-    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)
-      ? SIZE_VALUE[this.size as FadeSizeToken]
-      : this.size;
+  private syncAtEnd() {
+    this.atEnd = isScrollAtEdge(this.el, this.side);
   }
 
-  private resolveBackground(): string {
-    if (this.background !== 'var(--color-background-secondary)') return this.background;
-    return SURFACE_BACKGROUND[this.surface];
+  private handleScroll(e: Event) {
+    const target = e.currentTarget as HTMLElement;
+    this.atEnd = isScrollAtEdge(target, this.side);
   }
 
   render() {
-    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';
-
     return (
       <Host
-        aria-hidden="true"
-        class={{
-          fade: true,
-          'fade--hidden': !this.visible,
-          'fade--vertical-edge': isVerticalEdge,
-          'fade--horizontal-edge': !isVerticalEdge,
-          'fade--shell-gradient': this.shellGradientChrome !== null,
-          'fade--shell-gradient-panel': this.shellGradientChrome === 'panel',
-          'fade--shell-gradient-bar': this.shellGradientChrome === 'bar',
-          [`fade--${this.side}`]: true,
-        }}
-        style={{
-          '--ds-fade-size': this.resolveSize(),
-          '--ds-fade-bg': this.resolveBackground(),
-        } as Record<string, string>}
-      />
+        class={scrollEdgeFadeClassMap({
+          edges: this.side,
+          atEnd: { [this.side]: this.atEnd },
+          hidden: !this.visible,
+        })}
+        style={scrollEdgeFadeSizeStyle(this.size, this.height) as Record<string, string>}
+        onScroll={(e: Event) => this.handleScroll(e)}
+      >
+        <slot />
+      </Host>
     );
   }
 }

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

@@ -1 +1 @@
-export type { FadeSide, FadeSize, FadeSizeToken, FadeSurface } from './Fade';
+export type { FadeSide, FadeSize, FadeSizeToken } from './Fade';

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -17,6 +17,7 @@ import {
   type PanelNavRouterMode,
   type PanelNavUserActionDetail,
 } from './panel-nav-types';
+import { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';
 
 @Component({
   tag: 'ds-panel-nav',
@@ -88,7 +89,6 @@ export class PanelNav {
 
   @State() private renderedStyle: NavChromeStyle = 'dashboard';
   @State() private parsedGroups: PanelNavGroup[] = [];
-  @State() private atBottom = false;
   @State() private isAnimating = false;
   @State() private rovingIndex: number = 0;
   @State() private viewportNarrow: boolean = false;
@@ -179,7 +179,6 @@ export class PanelNav {
   componentDidLoad() {
     this.syncHostPropsIfNeeded();
     this.scheduleDeferredHostPropSync();
-    this.checkScroll();
     if (this.breakpoint > 0) this.connectResizeObserver();
   }
 
@@ -389,19 +388,6 @@ export class PanelNav {
     this.focusRovingAt(next);
   }
 
-  private checkScroll() {
-    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;
-    if (!body) return;
-    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;
-    this.atBottom = remaining < 2;
-  }
-
-  private handleBodyScroll(e: Event) {
-    const body = e.target as HTMLElement;
-    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;
-    this.atBottom = remaining < 2;
-  }
-
   private handleItemClick(id: string) {
     this.dsNavSelect.emit(id);
   }
@@ -558,7 +544,6 @@ export class PanelNav {
       'panel-nav--settings': !isDashboard,
       'panel-nav--collapsed': collapsed,
       'panel-nav--animating': this.isAnimating,
-      'panel-nav--at-bottom': this.atBottom,
     };
 
     return (
@@ -601,11 +586,8 @@ export class PanelNav {
           <div
             class={{
               'panel-nav__body': true,
-              'scroll-edge-fade': true,
-              'scroll-edge-fade--bottom': true,
-              'scroll-edge-fade--at-end': this.atBottom,
+              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),
             }}
-            onScroll={e => this.handleBodyScroll(e)}
           >
             {(() => {
               let flatIdx = 0;

package/src/wc/components.d.ts

@@ -19,7 +19,7 @@ import { CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
 import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
-import { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
+import { FadeSide, FadeSize } from "./components/Fade/Fade";
 import { HeaderBackground } from "./components/Header/Header";
 import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
@@ -57,7 +57,7 @@ export { CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
 export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
-export { FadeSide, FadeSize, FadeSurface } from "./components/Fade/Fade";
+export { FadeSide, FadeSize } from "./components/Fade/Fade";
 export { HeaderBackground } from "./components/Header/Header";
 export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
@@ -445,17 +445,12 @@ export namespace Components {
         "type": EmptyStateType;
     }
     interface DsFade {
-        /**
-          * Direct background override for contexts that already expose a resolved surface var.
-          * @default 'var(--color-background-secondary)'
-         */
-        "background": string;
         /**
           * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length. Prefer `size`.
          */
         "height": string | undefined;
         /**
-          * Edge where the fade is anchored.
+          * Edge where content fades as it approaches the scroll boundary.
           * @default 'bottom'
          */
         "side": FadeSide;
@@ -465,12 +460,7 @@ export namespace Components {
          */
         "size": FadeSize;
         /**
-          * Surface context used to choose the fade target background token.
-          * @default 'default'
-         */
-        "surface": FadeSurface;
-        /**
-          * Controls visibility without removing the element from layout/positioning.
+          * Controls the mask without removing the scroll container from layout.
           * @default true
          */
         "visible": boolean;
@@ -2134,17 +2124,12 @@ declare namespace LocalJSX {
         "type"?: EmptyStateType;
     }
     interface DsFade {
-        /**
-          * Direct background override for contexts that already expose a resolved surface var.
-          * @default 'var(--color-background-secondary)'
-         */
-        "background"?: string;
         /**
           * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length. Prefer `size`.
          */
         "height"?: string | undefined;
         /**
-          * Edge where the fade is anchored.
+          * Edge where content fades as it approaches the scroll boundary.
           * @default 'bottom'
          */
         "side"?: FadeSide;
@@ -2154,12 +2139,7 @@ declare namespace LocalJSX {
          */
         "size"?: FadeSize;
         /**
-          * Surface context used to choose the fade target background token.
-          * @default 'default'
-         */
-        "surface"?: FadeSurface;
-        /**
-          * Controls visibility without removing the element from layout/positioning.
+          * Controls the mask without removing the scroll container from layout.
           * @default true
          */
         "visible"?: boolean;
@@ -2916,8 +2896,6 @@ declare namespace LocalJSX {
         "side": FadeSide;
         "size": FadeSize;
         "height": string | undefined;
-        "surface": FadeSurface;
-        "background": string;
         "visible": boolean;
     }
     interface DsFieldAttributes {

package/src/wc/utils/index.ts

@@ -4,9 +4,18 @@ export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
 export {
   SCROLL_EDGE_FADE_DEFAULT_SIZE,
   SCROLL_EDGE_FADE_SIZE_VAR,
+  isScrollAtEdge,
+  resolveScrollEdgeFadeSize,
+  scrollEdgeFadeClassMap,
   scrollEdgeFadeMaskImage,
   scrollEdgeFadeMaskStyle,
+  scrollEdgeFadeSizeStyle,
+} from './scroll-edge-fade';
+export type {
+  ScrollEdgeFadeEdge,
+  ScrollEdgeFadeOptions,
+  ScrollEdgeFadeSize,
+  ScrollEdgeFadeSizeToken,
 } from './scroll-edge-fade';
-export type { ScrollEdgeFadeEdge } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';

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

@@ -1,8 +1,9 @@
 /**
- * Scroll-edge alpha fade — apply to overflow scroll containers.
- * Pair with `.scroll-edge-fade--at-end` when the relevant edge is flush (no fade).
+ * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.
+ * Masks scrolling content to transparent so flat surfaces, shell gradients, and
+ * images show through. Pair with `.scroll-edge-fade--at-end` when flush.
  *
- * @see scroll-edge-fade.ts for programmatic mask helpers.
+ * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.
  */
 
 .scroll-edge-fade {
@@ -67,7 +68,8 @@
   mask-size: 100% 100%;
 }
 
-.scroll-edge-fade--at-end {
+.scroll-edge-fade--at-end,
+.scroll-edge-fade--hidden {
   -webkit-mask-image: none;
   mask-image: none;
 }

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

@@ -5,12 +5,75 @@ 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 (gradients, images) show through. Prefer over painted
- * `ds-fade` overlays on non-flat surfaces.
+ * textured backgrounds (shell gradients, images) show through.
  */
 export function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {
   switch (edge) {
@@ -25,14 +88,61 @@ export function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {
   }
 }
 
-/** Inline style map for a masked scroll region. */
-export function scrollEdgeFadeMaskStyle(edge: ScrollEdgeFadeEdge): Record<string, string> {
+/** 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 {
-    [SCROLL_EDGE_FADE_SIZE_VAR]: SCROLL_EDGE_FADE_DEFAULT_SIZE,
+    ...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/dist/components/p-BFPfyJ8Z.js

@@ -1,2 +0,0 @@
-const t="--_badge-gradient-position";function n(t){const n=t.closest("ds-app-shell");return n?.hasAttribute("gradient")===true}export{t as B,n as i};
-//# sourceMappingURL=p-BFPfyJ8Z.js.map

package/dist/components/p-BFPfyJ8Z.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute"],"sources":["src/wc/nav/badge-gradient-ring.ts"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed — consumers importing\n  // `@ds-mo/ui/nav` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n"],"mappings":"AAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,Q","ignoreList":[]}

package/dist/components/p-BOpHKDOG.js

@@ -1,2 +0,0 @@
-import{p as e,H as a,h as i,a as n,t as r}from"./index.js";import{i as d,B as t}from"./p-BFPfyJ8Z.js";const s=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const o={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const g=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&d(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const i=this.el.closest("ds-bar-nav");if(i)this.gradientObserver.observe(i);const n=this.el.closest("ds-panel-nav");if(n)this.gradientObserver.observe(n)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!d(this.el))return a;a[t]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return i(n,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const d=this.background??o[this.surface];return i(n,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(d)},i("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&a))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return s()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),g)}break}}))}c();export{g as B,c as d};
-//# sourceMappingURL=p-BOpHKDOG.js.map

package/dist/components/p-BOpHKDOG.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","isShellGradientActive","el","update","window","addEventListener","ResizeObserver","observe","shell","closest","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","BADGE_GRADIENT_POSITION_VAR","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","badge__mark"],"sources":["src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={this.ringHostStyle(ring)}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAW,IAAM,ymECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA4GvD,CA1GC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBW,EAAsBhB,KAAKiB,IAAK,CAC9DjB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMa,EAAS,KACblB,KAAKO,uBAAyB,CAAC,EAEjCW,IAEAlB,KAAKS,uBAAyBS,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCrB,KAAKQ,iBAAmB,IAAIa,eAAeH,GAC3ClB,KAAKQ,iBAAiBc,QAAQtB,KAAKiB,IAEnC,MAAMM,EAAQvB,KAAKiB,GAAGO,QAAQ,gBAC9B,GAAID,EAAOvB,KAAKQ,iBAAiBc,QAAQC,GAEzC,MAAME,EAAMzB,KAAKiB,GAAGO,QAAQ,cAC5B,GAAIC,EAAKzB,KAAKQ,iBAAiBc,QAAQG,GAEvC,MAAMC,EAAQ1B,KAAKiB,GAAGO,QAAQ,gBAC9B,GAAIE,EAAO1B,KAAKQ,iBAAiBc,QAAQI,E,EAIrC,sBAAAb,GACN,GAAIb,KAAKS,uBAAwB,CAC/BU,OAAOQ,oBAAoB,SAAU3B,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBoB,aACvB5B,KAAKQ,iBAAmB,I,CAGlB,aAAAqB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK9B,KAAKK,qBAAuBW,EAAsBhB,KAAKiB,IAAK,OAAOc,EAGxEA,EAAMC,GAA+B,MACrC,OAAOD,C,CAGT,MAAAE,GACE,MAAMC,EAAQlC,KAAKC,UAAY,MAE/B,IAAKiC,GAASlC,KAAKE,QAAU,EAAG,OAAOiC,EAACC,EAAI,CAACL,MAAO,CAAEM,QAAS,UAE/D,MAAMA,EAAUrC,KAAKE,MAAQF,KAAKG,IAAM,IAAMmC,OAAOtC,KAAKE,OAC1D,MAAMqC,EAAYvC,KAAKwC,QAAUN,EAAQ,eAAiBI,OAAOtC,KAAKE,QACtE,MAAM4B,EAAO9B,KAAKyC,YAActD,EAAaa,KAAKI,SAElD,OACE+B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmBlC,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACWkC,EACZR,MAAO/B,KAAK6B,cAAcC,IAE1BK,EAAA,QACEO,MAAO,CACLE,YAAe,KACf,yBAA0BV,GAC3B,cACW,SAEVA,GAASG,G","ignoreList":[]}