@ds-mo/ui 1.0.2 → 1.1.0

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

@@ -0,0 +1,124 @@
+import type { PanelNavGroup, PanelNavItem, PanelNavVariant } from './PanelNav';
+
+/** Whether `path` matches `href` at a segment boundary (exact or child path). */
+export function hrefMatchesPath(path: string, href: string): boolean {
+  return path === href || path.startsWith(`${href}/`);
+}
+
+/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
+export function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {
+  if (!path) return '';
+
+  let bestId = '';
+  let bestLen = 0;
+
+  for (const item of items) {
+    if (!item.href) continue;
+    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {
+      bestId = item.id;
+      bestLen = item.href.length;
+    }
+  }
+
+  return bestId;
+}
+
+/** Total nav item count across all groups. */
+export function countPanelNavItems(groups: PanelNavGroup[]): number {
+  return groups.reduce((sum, g) => sum + g.items.length, 0);
+}
+
+/** Parse `groups` from either a JSON attribute string or a JS property array. */
+export function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {
+  if (Array.isArray(groups)) return groups;
+  if (typeof groups === 'string') {
+    try {
+      const parsed = JSON.parse(groups);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  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;
+  if (attr === null) return false;
+  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[],
+  groups: string | unknown,
+): boolean {
+  return (
+    countPanelNavItems(parsedGroups) === 0 &&
+    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/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,128 @@
+import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';
+
+export interface RadioOption {
+  label: string;
+  value: string;
+  inactive?: boolean;
+}
+
+@Component({
+  tag: 'ds-radio-group',
+  styleUrl: 'RadioGroup.css',
+  scoped: true,
+})
+export class RadioGroup {
+  @Element() el!: HTMLElement;
+
+  @Prop() options: RadioOption[] = [];
+  @Prop({ mutable: true }) value: string = '';
+  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';
+  @Prop() inactive: boolean = false;
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
+
+  @Event() dsChange!: EventEmitter<string>;
+
+  private get activeItems(): HTMLElement[] {
+    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));
+  }
+
+  @Listen('keydown')
+  handleKeyDown(e: KeyboardEvent) {
+    const items = this.activeItems;
+    if (!items.length) return;
+
+    const focused = items.find(item => item === document.activeElement);
+    if (!focused) return;
+
+    const idx = items.indexOf(focused);
+    let next = -1;
+
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        e.preventDefault();
+        next = (idx + 1) % items.length;
+        break;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        e.preventDefault();
+        next = (idx - 1 + items.length) % items.length;
+        break;
+      case 'Home':
+        e.preventDefault();
+        next = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        next = items.length - 1;
+        break;
+    }
+
+    if (next >= 0) {
+      items[next].focus();
+      const nextValue = items[next].dataset['value'];
+      if (nextValue && nextValue !== this.value) {
+        this.value = nextValue;
+        this.dsChange.emit(nextValue);
+      }
+    }
+  }
+
+  private selectItem(optValue: string) {
+    if (this.inactive) return;
+    if (optValue !== this.value) {
+      this.value = optValue;
+      this.dsChange.emit(optValue);
+    }
+  }
+
+  render() {
+    const selectedIdx = this.options.findIndex(o => o.value === this.value);
+    const firstActiveIdx = this.options.findIndex(o => !this.inactive && !o.inactive);
+    const focusableIdx = selectedIdx >= 0 && !this.inactive && !this.options[selectedIdx]?.inactive
+      ? selectedIdx
+      : firstActiveIdx;
+
+    return (
+      <Host
+        role="radiogroup"
+        aria-label={this.ariaLabel}
+        aria-labelledby={this.ariaLabelledby}
+        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}
+      >
+        {this.options.map((opt, i) => {
+          const isItemInactive = this.inactive || !!opt.inactive;
+          const isChecked = opt.value === this.value;
+          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);
+
+          return (
+            <div
+              key={opt.value}
+              role="radio"
+              aria-checked={String(isChecked)}
+              aria-disabled={isItemInactive || undefined}
+              tabIndex={tabIdx}
+              data-radio-item
+              data-value={opt.value}
+              data-inactive={isItemInactive || undefined}
+              class={{ 'radio-item': true, 'radio-item--inactive': isItemInactive }}
+              onClick={() => !isItemInactive && this.selectItem(opt.value)}
+              onKeyDown={(e: KeyboardEvent) => {
+                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {
+                  e.preventDefault();
+                  this.selectItem(opt.value);
+                }
+              }}
+            >
+              <span class={{ circle: true, 'circle--checked': isChecked }}>
+                {isChecked && <span class="dot" />}
+              </span>
+              <span class="text-body-medium radio-label">{opt.label}</span>
+            </div>
+          );
+        })}
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { RadioOption } from './RadioGroup';

package/src/wc/components/Scrollbar/Scrollbar.tsx

@@ -0,0 +1,189 @@
+import { Component, Prop, State, Element, h, Host } from '@stencil/core';
+
+export type ScrollbarVariant = 'default' | 'thick';
+
+@Component({
+  tag: 'ds-scrollbar',
+  styleUrl: 'Scrollbar.css',
+  scoped: true,
+})
+export class Scrollbar {
+  @Element() el!: HTMLElement;
+
+  @Prop() variant: ScrollbarVariant = 'default';
+  @Prop() showTrackOnHover: boolean = true;
+
+  @State() private thumbHeight: number = 0;
+  @State() private thumbTop: number = 0;
+  @State() private thumbWidth: number = 0;
+  @State() private thumbLeft: number = 0;
+  @State() private isDragging: boolean = false;
+  @State() private isDraggingH: boolean = false;
+  @State() private isPointerInside: boolean = false;
+
+  private contentEl: HTMLElement | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+  private scrollHandler: (() => void) | null = null;
+
+  // Drag state (not reactive — no re-render needed)
+  private dragStartY = 0;
+  private dragStartScrollTop = 0;
+  private dragStartX = 0;
+  private dragStartScrollLeft = 0;
+
+  componentDidLoad() {
+    this.contentEl = this.el.querySelector('.scrollbar-content') as HTMLElement | null;
+    if (!this.contentEl) return;
+
+    this.scrollHandler = () => this.updateThumb();
+    this.contentEl.addEventListener('scroll', this.scrollHandler);
+
+    this.resizeObserver = new ResizeObserver(() => this.updateThumb());
+    this.resizeObserver.observe(this.contentEl);
+    window.addEventListener('resize', this.scrollHandler);
+
+    this.updateThumb();
+  }
+
+  disconnectedCallback() {
+    if (this.contentEl && this.scrollHandler) {
+      this.contentEl.removeEventListener('scroll', this.scrollHandler);
+    }
+    if (this.scrollHandler) {
+      window.removeEventListener('resize', this.scrollHandler);
+    }
+    this.resizeObserver?.disconnect();
+  }
+
+  private updateThumb() {
+    const container = this.el.querySelector('.scrollbar-container') as HTMLElement | null;
+    const content = this.contentEl;
+    if (!container || !content) return;
+
+    const cH = container.clientHeight;
+    const cW = container.clientWidth;
+    const sH = content.scrollHeight;
+    const sW = content.scrollWidth;
+    const st = content.scrollTop;
+    const sl = content.scrollLeft;
+
+    if (sH <= cH) {
+      this.thumbHeight = 0;
+    } else {
+      const h = Math.max(20, cH * (cH / sH));
+      this.thumbHeight = h;
+      this.thumbTop = (st / (sH - cH)) * (cH - h);
+    }
+
+    if (sW <= cW) {
+      this.thumbWidth = 0;
+    } else {
+      const w = Math.max(20, cW * (cW / sW));
+      this.thumbWidth = w;
+      this.thumbLeft = (sl / (sW - cW)) * (cW - w);
+    }
+  }
+
+  private handleThumbMouseDown(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const content = this.contentEl;
+    if (!content) return;
+
+    this.isDragging = true;
+    this.dragStartY = e.clientY;
+    this.dragStartScrollTop = content.scrollTop;
+
+    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
+
+    const onMove = (ev: MouseEvent) => {
+      const deltaY = ev.clientY - this.dragStartY;
+      const scrollable = content.scrollHeight - container.clientHeight;
+      const ratio = scrollable / (container.clientHeight - this.thumbHeight);
+      content.scrollTop = Math.max(0, Math.min(scrollable, this.dragStartScrollTop + deltaY * ratio));
+    };
+    const onUp = () => {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  private handleThumbHMouseDown(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const content = this.contentEl;
+    if (!content) return;
+
+    this.isDraggingH = true;
+    this.dragStartX = e.clientX;
+    this.dragStartScrollLeft = content.scrollLeft;
+
+    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;
+
+    const onMove = (ev: MouseEvent) => {
+      const deltaX = ev.clientX - this.dragStartX;
+      const scrollable = content.scrollWidth - container.clientWidth;
+      const ratio = scrollable / (container.clientWidth - this.thumbWidth);
+      content.scrollLeft = Math.max(0, Math.min(scrollable, this.dragStartScrollLeft + deltaX * ratio));
+    };
+    const onUp = () => {
+      this.isDraggingH = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  render() {
+    const showThumb  = this.thumbHeight > 0;
+    const showThumbH = this.thumbWidth > 0;
+    const isScrollable = showThumb || showThumbH;
+    const showTrack = this.showTrackOnHover && (this.isPointerInside || this.isDragging || this.isDraggingH);
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <div
+          class={{
+            'scrollbar-container': true,
+            'scrollbar-container--thick': this.variant === 'thick',
+          }}
+          data-show-track={showTrack ? 'true' : 'false'}
+          data-dragging={this.isDragging || this.isDraggingH}
+          onMouseEnter={() => { if (this.showTrackOnHover) this.isPointerInside = true; }}
+          onMouseLeave={() => { this.isPointerInside = false; }}
+        >
+          <div
+            class="scrollbar-content"
+            tabIndex={isScrollable ? 0 : undefined}
+          >
+            <slot />
+          </div>
+
+          {showThumb && (
+            <div class="scrollbar-track" aria-hidden="true">
+              <div
+                class="scrollbar-thumb"
+                style={{ height: `${this.thumbHeight}px`, top: `${this.thumbTop}px` }}
+                onMouseDown={(e: MouseEvent) => this.handleThumbMouseDown(e)}
+              />
+            </div>
+          )}
+
+          {showThumbH && (
+            <div class="scrollbar-track-h" aria-hidden="true">
+              <div
+                class="scrollbar-thumb-h"
+                style={{ width: `${this.thumbWidth}px`, left: `${this.thumbLeft}px` }}
+                onMouseDown={(e: MouseEvent) => this.handleThumbHMouseDown(e)}
+              />
+            </div>
+          )}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Select/Select.tsx

@@ -0,0 +1,195 @@
+import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';
+import type { MenuItemData } from '../Menu/Menu';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+@Component({
+  tag: 'ds-select',
+  styleUrl: 'Select.css',
+  scoped: true,
+})
+export class Select {
+  @Element() el!: HTMLElement;
+
+  /**
+   * Array of options. Set via JS property.
+   * @example el.options = [{ label: 'Apple', value: 'apple' }];
+   */
+  @Prop() options: SelectOption[] = [];
+
+  /** Currently selected value. */
+  @Prop({ mutable: true }) value: string = '';
+
+  /** Placeholder shown when no value is selected. */
+  @Prop() placeholder: string = 'Select option';
+
+  /** Disables interaction. */
+  @Prop() inactive: boolean = false;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
+
+  /** Emits the selected value string. */
+  @Event() dsChange!: EventEmitter<string>;
+
+  @State() private isOpen: boolean = false;
+
+  private triggerEl: HTMLButtonElement | null = null;
+  private menuEl: HTMLDsMenuElement | null = null;
+
+  componentDidLoad() {
+    // Wire up the menu anchor to the trigger button
+    if (this.menuEl && this.triggerEl) {
+      this.menuEl.anchor = this.triggerEl;
+    }
+    // Listen for menu selection events
+    this.menuEl?.addEventListener('dsSelect', (e: Event) => {
+      const detail = (e as CustomEvent<MenuItemData>).detail;
+      if (detail?.value !== undefined) {
+        this.value = String(detail.value);
+        this.dsChange.emit(this.value);
+      }
+      this.isOpen = false;
+    });
+    // Listen for menu close event
+    this.menuEl?.addEventListener('dsClose', () => {
+      this.isOpen = false;
+    });
+  }
+
+  @Watch('isOpen')
+  onIsOpenChange(open: boolean) {
+    if (this.menuEl) {
+      this.menuEl.open = open;
+    }
+  }
+
+  @Watch('options')
+  onOptionsChange() {
+    this.syncMenuItems();
+  }
+
+  @Watch('value')
+  onValueChange() {
+    this.syncMenuItems();
+  }
+
+  private syncMenuItems() {
+    if (!this.menuEl) return;
+    this.menuEl.items = this.options.map(opt => ({
+      label: opt.label,
+      value: opt.value,
+      isSelected: opt.value === this.value,
+    }));
+  }
+
+  private open() {
+    if (this.inactive || !this.options.length) return;
+    // Sync menu width to trigger width
+    if (this.menuEl && this.triggerEl) {
+      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;
+      this.menuEl.anchor = this.triggerEl;
+    }
+    this.syncMenuItems();
+    this.isOpen = true;
+  }
+
+  private close() {
+    this.isOpen = false;
+  }
+
+  private toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  @Listen('keydown')
+  handleKeyDown(e: KeyboardEvent) {
+    // Only handle keydown on the trigger button
+    if (document.activeElement !== this.triggerEl) return;
+
+    if (!this.isOpen) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          this.open();
+          break;
+      }
+    } else {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+        this.triggerEl?.focus();
+      }
+    }
+  }
+
+  private get selectedLabel(): string {
+    const found = this.options.find(o => o.value === this.value);
+    return found?.label ?? '';
+  }
+
+  private get hasSelection(): boolean {
+    return !!this.options.find(o => o.value === this.value);
+  }
+
+  render() {
+    const label = this.hasSelection ? this.selectedLabel : this.placeholder;
+    const showPlaceholder = !this.hasSelection;
+
+    return (
+      <Host class={{ 'select-host': true, inactive: this.inactive }}>
+        <button
+          ref={el => {
+            this.triggerEl = (el as HTMLButtonElement) ?? null;
+          }}
+          type="button"
+          class={{ trigger: true, 'trigger--open': this.isOpen }}
+          disabled={this.inactive}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={this.isOpen}
+          aria-label={this.ariaLabel}
+          aria-labelledby={this.ariaLabelledby}
+          onClick={() => this.toggle()}
+        >
+          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>
+            {label}
+          </span>
+          <svg
+            class="trigger__chevron"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M4 6L8 10L12 6"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <ds-menu
+          ref={el => {
+            this.menuEl = (el as HTMLDsMenuElement) ?? null;
+          }}
+          side="bottom"
+          align="start"
+        />
+      </Host>
+    );
+  }
+}