@ds-mo/ui 1.2.0 → 1.4.0

package/src/wc/components/PanelNav/panel-nav-utils.ts

@@ -1,4 +1,35 @@
-import type { PanelNavGroup, PanelNavItem, PanelNavVariant } from './PanelNav';
+import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
+import {
+  NAV_STYLE_HINT_ATTR,
+  clearNavStyleHint,
+  readNavStyleAttr,
+  resolveNavChromeStyle,
+  setNavStyleHint,
+  shouldResyncNavChromeStyle,
+} from '../../nav/nav-chrome';
+import { ensureShellNavVtStyle } from '../../nav/shell-view-transition';
+
+export type { NavChromeStyle } from '../../nav/nav-chrome';
+export {
+  NAV_STYLE_HINT_ATTR,
+  readNavStyleAttr,
+  setNavStyleHint,
+  clearNavStyleHint,
+  resolveNavChromeStyle as resolvePanelNavStyle,
+  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,
+};
+
+/** @deprecated Use `setNavStyleHint` */
+export const setPanelNavStyleHint = setNavStyleHint;
+
+/** @deprecated Use `clearNavStyleHint` */
+export const clearPanelNavStyleHint = clearNavStyleHint;
+
+/** @deprecated Use `NAV_STYLE_HINT_ATTR` */
+export const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;
+
+/** @deprecated Use `ensureShellNavVtStyle` */
+export const ensurePanelNavVtStyle = ensureShellNavVtStyle;
 
 /** Whether `path` matches `href` at a segment boundary (exact or child path). */
 export function hrefMatchesPath(path: string, href: string): boolean {
@@ -42,41 +73,6 @@ export function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {
   return [];
 }
 
-/** `document.documentElement` attribute for pre-bootstrap variant hints (SPA hard reload). */
-export const PANEL_NAV_VARIANT_HINT_ATTR = 'data-panel-nav-variant';
-
-/** Parse `variant` from a host attribute value. */
-export function readPanelNavVariantAttr(attr: string | null): PanelNavVariant | undefined {
-  if (attr === 'settings' || attr === 'dashboard') return attr;
-  return undefined;
-}
-
-/** Set a document-level variant hint before the custom element upgrades (hard reload). */
-export function setPanelNavVariantHint(variant: PanelNavVariant): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.setAttribute(PANEL_NAV_VARIANT_HINT_ATTR, variant);
-}
-
-export function clearPanelNavVariantHint(): void {
-  if (typeof document === 'undefined') return;
-  document.documentElement.removeAttribute(PANEL_NAV_VARIANT_HINT_ATTR);
-}
-
-/** Resolve initial variant — host attr, then document hint, then prop default. */
-export function resolvePanelNavVariant(
-  variantProp: PanelNavVariant,
-  variantAttr: string | null,
-  documentVariantAttr: string | null = typeof document !== 'undefined'
-    ? document.documentElement.getAttribute(PANEL_NAV_VARIANT_HINT_ATTR)
-    : null,
-): PanelNavVariant {
-  return (
-    readPanelNavVariantAttr(variantAttr) ??
-    readPanelNavVariantAttr(documentVariantAttr) ??
-    variantProp
-  );
-}
-
 /** Resolve whether VT is disabled from prop and/or host attribute. */
 export function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {
   if (prop) return true;
@@ -84,14 +80,6 @@ export function resolvePanelNavDisableVt(prop: boolean, attr: string | null): bo
   return attr !== 'false';
 }
 
-/** True when internal rendered surface lags the host `variant` prop. */
-export function shouldResyncPanelNavVariant(
-  renderedVariant: PanelNavVariant,
-  variant: PanelNavVariant,
-): boolean {
-  return renderedVariant !== variant;
-}
-
 /** True when host `groups` has items but internal parsed state is still empty. */
 export function shouldResyncPanelNavGroups(
   parsedGroups: PanelNavGroup[],
@@ -102,23 +90,3 @@ export function shouldResyncPanelNavGroups(
     countPanelNavItems(parsePanelNavGroups(groups)) > 0
   );
 }
-
-let vtStyleInjected = false;
-
-/** Inject view-transition suppress styles once per document (shared by PanelNav + hosts). */
-export function ensurePanelNavVtStyle(): void {
-  if (vtStyleInjected) return;
-  const id = 'ds-panel-nav-vt-style';
-  if (document.getElementById(id)) {
-    vtStyleInjected = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = id;
-  style.textContent = [
-    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',
-    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',
-  ].join('\n');
-  document.head.appendChild(style);
-  vtStyleInjected = true;
-}

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -176,7 +176,15 @@ export class TabGroup {
                   [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,
                 }}>
                   {tab.label}
-                  {tab.dot && <span class="tab__dot" aria-hidden="true" />}
+                  {tab.dot && (
+                    <ds-badge
+                      class="tab__dot"
+                      variant="dot"
+                      background="var(--_dot-ring)"
+                      label=""
+                      aria-hidden="true"
+                    />
+                  )}
                 </span>
               </button>
             );

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -6,7 +6,7 @@ import {
   type TabItemTab,
 } from '../TabGroup/tab-item-utils';
 
-export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
 
 @Component({
   tag: 'ds-tab-group-nav',
@@ -119,18 +119,24 @@ export class TabGroupNav {
   private getBgClass(): string {
     if (!this.background || this.background === 'faint') return '';
     if (this.background === 'always-dark') return 'on-always-dark';
+    if (this.background === 'navigation') return 'on-navigation';
     return `on-${this.background}`;
   }
 
   render() {
     const bgClass = this.getBgClass();
     const isVertical = this.orientation === 'vertical';
+    const isNavigation = this.background === 'navigation';
 
     return (
       <Host class="tab-group-nav-host">
         <div
           role="tablist"
-          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}
+          class={{
+            'tab-list': true,
+            'tab-list--vertical': isVertical,
+            'tab-list--on-navigation': isNavigation,
+          }}
           aria-label={this.ariaLabel}
           aria-labelledby={this.ariaLabelledby}
           aria-orientation={isVertical ? 'vertical' : undefined}
@@ -176,7 +182,15 @@ export class TabGroupNav {
                   [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,
                 }}>
                   {tab.label}
-                  {tab.dot && <span class="tab__dot" aria-hidden="true" />}
+                  {tab.dot && (
+                    <ds-badge
+                      class="tab__dot"
+                      variant="dot"
+                      background="var(--_dot-ring)"
+                      label=""
+                      aria-hidden="true"
+                    />
+                  )}
                 </span>
               </button>
             );

package/src/wc/components/Tag/Tag.tsx

@@ -1,10 +1,9 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import { Component, Prop, h, Host } from '@stencil/core';
 
 export type TagIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast   = 'strong' | 'bold' | 'medium' | 'faint';
 export type TagElevation  = 'none' | 'flat' | 'elevated';
 export type TagSize       = 'md' | 'sm' | 'xs';
-export type TagBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 
 const TEXT_VARIANT: Record<TagSize, string> = {
   md: 'text-body-medium',
@@ -26,45 +25,10 @@ export class Tag {
   @Prop() elevation: TagElevation = 'none';
   @Prop() size: TagSize = 'md';
   @Prop() rounded: boolean = false;
-  @Prop() removable: boolean = false;
   @Prop() maxWidth: string | number | undefined;
-  @Prop() inactive: boolean = false;
-  @Prop() background: TagBackground | undefined;
-  @Prop({ mutable: true }) pressed: boolean = false;
-  /** Whether the tag has a click/toggle behavior. */
-  @Prop() interactive: boolean = false;
-
-  /** Fired when the remove button is clicked. */
-  @Event() dsRemove!: EventEmitter<void>;
-  /** Fired when an interactive tag is clicked. */
-  @Event() dsClick!: EventEmitter<void>;
-  /** Fired when the pressed state toggles. */
-  @Event() dsPressedChange!: EventEmitter<boolean>;
-
-  private handleClick = () => {
-    if (this.inactive) return;
-    this.pressed = !this.pressed;
-    this.dsPressedChange.emit(this.pressed);
-    this.dsClick.emit();
-  };
-
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (this.inactive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.handleClick();
-    }
-  };
-
-  private handleRemove = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dsRemove.emit();
-  };
 
   render() {
-    const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
     const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
-    const hasIconSlot = true; // always render slot, consumer decides whether to fill it
     const textVariant = TEXT_VARIANT[this.size];
     const iconSize = ICON_SIZE[this.size];
 
@@ -80,29 +44,15 @@ export class Tag {
       [`tag--size-${this.size}`]: true,
       'tag--rounded': this.rounded,
       'tag--rounded-no-icon-left': this.rounded, // consumer overrides via slot presence hack
-      'tag--rounded-no-remove-right': this.rounded && !this.removable,
+      'tag--rounded-no-remove-right': this.rounded,
       [`tag--icon-left-${sz}`]: false, // toggled by slotchange
-      [`tag--icon-right-${sz}`]: this.removable,
-      'tag--removable': this.removable,
-      'tag--interactive': this.interactive,
-      'tag--inactive': this.inactive,
-      'tag--pressed': this.pressed,
-      'tag--on-medium':      this.background === 'medium',
-      'tag--on-bold':        this.background === 'bold',
-      'tag--on-strong':      this.background === 'strong',
-      'tag--on-always-dark': this.background === 'always-dark',
+      [`tag--icon-right-${sz}`]: false,
     };
 
     return (
       <Host
         class={hostCls}
         style={maxWidthStyle}
-        onClick={this.interactive ? this.handleClick : undefined}
-        onKeyDown={this.interactive ? this.handleKeyDown : undefined}
-        role={this.interactive ? 'button' : undefined}
-        tabIndex={this.interactive ? (this.inactive ? -1 : 0) : undefined}
-        aria-pressed={this.interactive && this.pressed !== undefined ? String(this.pressed) : undefined}
-        aria-disabled={this.inactive || undefined}
       >
         {/* Leading icon slot — consumer provides an icon element */}
         <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
@@ -112,23 +62,6 @@ export class Tag {
         <span class={{ 'tag__label': true, [textVariant]: true }}>
           {this.label}
         </span>
-        {/* Remove button */}
-        {this.removable && (
-          <button
-            type="button"
-            class="tag__remove"
-            onClick={this.handleRemove}
-            aria-label={`Remove ${this.label}`}
-            tabIndex={-1}
-          >
-            {/* Remove icon slot — defaults to × glyph */}
-            <slot name="remove-icon">
-              <span class="tag__remove-x" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
-                ✕
-              </span>
-            </slot>
-          </button>
-        )}
       </Host>
     );
   }

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

@@ -1 +1 @@
-export type { TagIntent, TagContrast, TagElevation, TagSize, TagBackground } from './Tag';
+export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';