@ds-mo/ui 2.11.2 → 2.13.0

package/src/react/ds-header.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsHeader as DsHeaderElement, defineCustomElement as defineDsHeader } from "@ds-mo/ui/dist/components/ds-header.js";
-
-export type DsHeaderEvents = NonNullable<unknown>;
-
-export const DsHeader: StencilReactComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader> = /*@__PURE__*/ createComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader>({
-    tagName: 'ds-header',
-    elementClass: DsHeaderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsHeaderEvents,
-    defineCustomElement: defineDsHeader
-});

package/src/react/ds-scrollbar.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsScrollbar as DsScrollbarElement, defineCustomElement as defineDsScrollbar } from "@ds-mo/ui/dist/components/ds-scrollbar.js";
-
-export type DsScrollbarEvents = NonNullable<unknown>;
-
-export const DsScrollbar: StencilReactComponent<DsScrollbarElement, DsScrollbarEvents, Components.DsScrollbar> = /*@__PURE__*/ createComponent<DsScrollbarElement, DsScrollbarEvents, Components.DsScrollbar>({
-    tagName: 'ds-scrollbar',
-    elementClass: DsScrollbarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsScrollbarEvents,
-    defineCustomElement: defineDsScrollbar
-});

package/src/react/ds-surface.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsSurface as DsSurfaceElement, defineCustomElement as defineDsSurface } from "@ds-mo/ui/dist/components/ds-surface.js";
-
-export type DsSurfaceEvents = NonNullable<unknown>;
-
-export const DsSurface: StencilReactComponent<DsSurfaceElement, DsSurfaceEvents, Components.DsSurface> = /*@__PURE__*/ createComponent<DsSurfaceElement, DsSurfaceEvents, Components.DsSurface>({
-    tagName: 'ds-surface',
-    elementClass: DsSurfaceElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsSurfaceEvents,
-    defineCustomElement: defineDsSurface
-});

package/src/react/ds-toast-provider.ts

@@ -1,26 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsToastProvider as DsToastProviderElement, defineCustomElement as defineDsToastProvider } from "@ds-mo/ui/dist/components/ds-toast-provider.js";
-
-export type DsToastProviderEvents = NonNullable<unknown>;
-
-export const DsToastProvider: StencilReactComponent<DsToastProviderElement, DsToastProviderEvents, Components.DsToastProvider> = /*@__PURE__*/ createComponent<DsToastProviderElement, DsToastProviderEvents, Components.DsToastProvider>({
-    tagName: 'ds-toast-provider',
-    elementClass: DsToastProviderElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsToastProviderEvents,
-    defineCustomElement: defineDsToastProvider
-});

package/src/wc/components/Accordion/Accordion.tsx

@@ -1,144 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
-
-export interface AccordionItemData {
-  id: string;
-  label: string;
-  content?: string;
-  inactive?: boolean;
-}
-
-let idCounter = 0;
-
-@Component({
-  tag: 'ds-accordion',
-  styleUrl: 'Accordion.css',
-  scoped: true,
-})
-export class Accordion {
-  @Element() el!: HTMLElement;
-
-  @Prop() items: AccordionItemData[] = [];
-  @Prop() multiple: boolean = false;
-  /** Comma-separated list of expanded item IDs for controlled mode. */
-  @Prop({ mutable: true }) expandedIds: string = '';
-
-  @State() private internalIds: string[] = [];
-  @State() private heights: Record<string, number> = {};
-
-  @Event() dsExpandedChange!: EventEmitter<string[]>;
-
-  private instanceId = ++idCounter;
-  private resizeObservers: Map<string, ResizeObserver> = new Map();
-
-  private get activeIds(): string[] {
-    if (this.expandedIds) return this.expandedIds.split(',').map(s => s.trim()).filter(Boolean);
-    return this.internalIds;
-  }
-
-  componentDidLoad() {
-    this.bindResizeObservers();
-  }
-
-  disconnectedCallback() {
-    this.resizeObservers.forEach(ro => ro.disconnect());
-    this.resizeObservers.clear();
-  }
-
-  @Watch('items')
-  onItemsChange() {
-    requestAnimationFrame(() => {
-      this.bindResizeObservers();
-      this.measureAll();
-    });
-  }
-
-  private bindResizeObservers() {
-    this.resizeObservers.forEach(ro => ro.disconnect());
-    this.resizeObservers.clear();
-
-    this.items.forEach(item => {
-      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
-      if (!inner) return;
-      const ro = new ResizeObserver(() => {
-        this.heights = { ...this.heights, [item.id]: inner.scrollHeight };
-      });
-      ro.observe(inner);
-      this.resizeObservers.set(item.id, ro);
-    });
-  }
-
-  private measureAll() {
-    const next: Record<string, number> = { ...this.heights };
-    this.items.forEach(item => {
-      const inner = this.el.querySelector(`[data-inner="${item.id}"]`) as HTMLElement | null;
-      if (inner) next[item.id] = inner.scrollHeight;
-    });
-    this.heights = next;
-  }
-
-  private toggle(id: string) {
-    const current = this.activeIds;
-    let next: string[];
-    if (current.includes(id)) {
-      next = current.filter(x => x !== id);
-    } else {
-      next = this.multiple ? [...current, id] : [id];
-    }
-    this.internalIds = next;
-    this.dsExpandedChange.emit(next);
-  }
-
-  render() {
-    const activeIds = this.activeIds;
-
-    return (
-      <Host class="accordion">
-        {this.items.map(item => {
-          const isExpanded = activeIds.includes(item.id);
-          const triggerId = `ds-accordion-${this.instanceId}-trigger-${item.id}`;
-          const panelId = `ds-accordion-${this.instanceId}-panel-${item.id}`;
-          const bodyHeight = this.heights[item.id] ?? 0;
-
-          return (
-            <div
-              key={item.id}
-              class={{ item: true, 'item--inactive': !!item.inactive }}
-            >
-              <button
-                type="button"
-                id={triggerId}
-                class="trigger"
-                onClick={() => !item.inactive && this.toggle(item.id)}
-                aria-expanded={isExpanded}
-                aria-controls={panelId}
-                aria-disabled={item.inactive || undefined}
-                tabIndex={item.inactive ? -1 : 0}
-              >
-                <span class="text-body-medium-emphasis">{item.label}</span>
-                <span
-                  class={{ chevron: true, 'chevron--open': isExpanded }}
-                  aria-hidden="true"
-                >&#x203A;</span>
-              </button>
-              <div
-                id={panelId}
-                role="region"
-                aria-labelledby={triggerId}
-                class="body"
-                style={{ height: isExpanded ? `${bodyHeight}px` : '0' }}
-                aria-hidden={!isExpanded}
-              >
-                <div class="body-inner" data-inner={item.id}>
-                  {item.content
-                    ? <span class="text-body-medium">{item.content}</span>
-                    : <slot name={item.id} />
-                  }
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </Host>
-    );
-  }
-}

package/src/wc/components/Breadcrumb/Breadcrumb.tsx

@@ -1,61 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-@Component({
-  tag: 'ds-breadcrumb',
-  styleUrl: 'Breadcrumb.css',
-  scoped: true,
-})
-export class Breadcrumb {
-  @Prop() items: BreadcrumbItem[] = [];
-  @Prop() separator: string = '/';
-
-  @Event() dsNavigate!: EventEmitter<{ item: BreadcrumbItem; index: number }>;
-
-  private handleClick(item: BreadcrumbItem, index: number, e: MouseEvent) {
-    if (!item.href) {
-      e.preventDefault();
-    }
-    this.dsNavigate.emit({ item, index });
-  }
-
-  render() {
-    return (
-      <Host>
-        <nav aria-label="Breadcrumb" class="breadcrumb">
-          <ol class="list">
-            {this.items.map((item, i) => {
-              const isLast = i === this.items.length - 1;
-              return (
-                <li class="item" key={i}>
-                  {isLast ? (
-                    <span class="text-body-medium-emphasis current" aria-current="page">
-                      {item.label}
-                    </span>
-                  ) : (
-                    <span class="item-inner">
-                      <a
-                        href={item.href ?? '#'}
-                        class="link text-body-medium"
-                        onClick={e => this.handleClick(item, i, e)}
-                      >
-                        {item.label}
-                      </a>
-                      <span class="separator text-body-small" aria-hidden="true">
-                        {this.separator}
-                      </span>
-                    </span>
-                  )}
-                </li>
-              );
-            })}
-          </ol>
-        </nav>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx

@@ -1,129 +0,0 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-
-export type ButtonUnfilledIconOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
-
-export type ButtonUnfilledIconBackground = 'always-dark' | 'navigation';
-
-@Component({
-  tag: 'ds-button-unfilled-icon',
-  styleUrl: 'ButtonUnfilledIcon.css',
-  scoped: true,
-})
-export class ButtonUnfilledIcon {
-  @Element() el!: HTMLElement;
-
-  /** Icon name passed to <ds-icon>. */
-  @Prop() icon: string = '';
-
-  /** Active/selected visual state. */
-  @Prop() isActive: boolean = false;
-
-  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */
-  @Prop() activeFill: boolean = true;
-
-  /** Show a 1px tertiary border without changing the interaction model. */
-  @Prop() hasBorder: boolean = false;
-
-  /** Show a notification dot at the top-right of the icon zone. */
-  @Prop() dot: boolean = false;
-
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
-
-  /** Native button type. */
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-
-  /**
-   * Foreground and interaction tokens when the button sits on a contrasting parent
-   * background (default, medium, bold, or strong).
-   */
-  @Prop({ attribute: 'on-background-contrast' })
-  backgroundContrast?: ButtonUnfilledIconOnBackgroundContrast;
-
-  /** Parent surface context for navigation and always-dark chrome. */
-  @Prop() background: ButtonUnfilledIconBackground | undefined;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
-  @Prop() controls: string | undefined;
-  @Prop() expanded: boolean | undefined;
-  @Prop() haspopup: string | undefined;
-  @Prop() pressed: boolean | undefined;
-
-  /**
-   * Native `tabindex` for roving keyboard groups in shell chrome.
-   * Omit for the default button tab stop (`0`).
-   */
-  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private buttonEl: HTMLButtonElement | null = null;
-
-  @Method()
-  async setFocus() {
-    this.buttonEl?.focus();
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    if (this.inactive) return;
-    this.dsClick.emit(event);
-    this.dsChange.emit(!this.isActive);
-  };
-
-  private effectiveContrast(): ButtonUnfilledIconOnBackgroundContrast {
-    return this.backgroundContrast ?? 'default';
-  }
-
-  render() {
-    const bg = this.background;
-    const contrast = this.effectiveContrast();
-
-    const cls: Record<string, boolean> = {
-      'button-icon': true,
-      'ds-focus-ring-inset': true,
-      'button-icon--active': this.isActive,
-      'button-icon--active-fill': this.isActive && this.activeFill,
-      'button-icon--bordered': this.hasBorder,
-      'button-icon--inactive': this.inactive,
-      'button-icon--contrast-medium': contrast === 'medium',
-      'button-icon--contrast-bold': contrast === 'bold',
-      'button-icon--contrast-strong': contrast === 'strong',
-      'button-icon--on-always-dark': bg === 'always-dark',
-      'button-icon--on-navigation': bg === 'navigation',
-    };
-
-    return (
-      <Host tabIndex={-1}>
-        <button
-          ref={el => {
-            this.buttonEl = el ?? null;
-          }}
-          type={this.type}
-          class={cls}
-          disabled={this.inactive}
-          tabIndex={this.focusTabIndex ?? 0}
-          aria-label={this.ariaLabel}
-          aria-controls={this.controls}
-          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}
-          aria-haspopup={this.haspopup}
-          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}
-          onClick={this.handleClick}
-        >
-          <span class="button-icon__icon-wrap">
-            <ds-icon name={this.icon} size="md" color="inherit" />
-            {this.dot && (
-              <ds-badge
-                class="button-icon__dot"
-                variant="dot"
-                background="var(--ds-button-unfilled-icon-dot-ring)"
-                label=""
-                aria-hidden="true"
-              />
-            )}
-          </span>
-        </button>
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { ButtonUnfilledIconBackground, ButtonUnfilledIconOnBackgroundContrast } from './ButtonUnfilledIcon';

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

@@ -1 +0,0 @@
-export type { CardDataVizWidth } from './CardDataViz';

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

@@ -1,58 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import {
-  scrollEdgeFadeClassMap,
-  scrollEdgeFadeSizeStyle,
-  type ScrollEdgeFadeEdge,
-  type ScrollEdgeFadeSize,
-  type ScrollEdgeFadeSizeToken,
-} from '../../utils/scroll-edge-fade';
-
-/** @deprecated Use `ScrollEdgeFadeEdge` from `@ds-mo/ui/utils`. */
-export type FadeSide = ScrollEdgeFadeEdge;
-
-/** @deprecated Use `ScrollEdgeFadeSizeToken` from `@ds-mo/ui/utils`. */
-export type FadeSizeToken = ScrollEdgeFadeSizeToken;
-
-/** @deprecated Use `ScrollEdgeFadeSize` from `@ds-mo/ui/utils`. */
-export type FadeSize = ScrollEdgeFadeSize;
-
-@Component({
-  tag: 'ds-fade',
-  styleUrl: 'Fade.css',
-  scoped: true,
-})
-export class Fade {
-  /** 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. */
-  @Prop() size: FadeSize = 'size-600';
-
-  /**
-   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
-   * Prefer `size`.
-   */
-  @Prop() height: string | undefined;
-
-  /** Controls the mask without removing the scroll container from layout. */
-  @Prop() visible: boolean = true;
-
-  render() {
-    return (
-      <Host>
-        <div
-          class={{
-            'fade__scroll': true,
-            ...scrollEdgeFadeClassMap({
-              edges: this.side,
-              hidden: !this.visible,
-            }),
-          }}
-          style={scrollEdgeFadeSizeStyle(this.size, this.height) as Record<string, string>}
-        >
-          <slot />
-        </div>
-      </Host>
-    );
-  }
-}

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

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

package/src/wc/components/Header/Header.tsx

@@ -1,33 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-
-export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-
-@Component({
-  tag: 'ds-header',
-  styleUrl: 'Header.css',
-  scoped: true,
-})
-export class Header {
-  @Prop() heading: string | undefined;
-  @Prop() background: HeaderBackground = 'secondary';
-
-  render() {
-    return (
-      <Host
-        class={{ header: true, [`bg-${this.background}`]: true }}
-        role="banner"
-      >
-        <div class="left">
-          <slot name="left" />
-          {this.heading && <span class="title text-title-small">{this.heading}</span>}
-        </div>
-        <div class="center">
-          <slot name="center" />
-        </div>
-        <div class="right">
-          <slot name="right" />
-        </div>
-      </Host>
-    );
-  }
-}