@ds-mo/ui 2.8.0 → 2.10.0

package/src/react/ds-button.ts

@@ -1,35 +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 { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsButtonCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsButton as DsButtonElement, defineCustomElement as defineDsButton } from "@ds-mo/ui/dist/components/ds-button.js";
-
-export type DsButtonEvents = {
-    onDsClick: EventName<DsButtonCustomEvent<MouseEvent>>,
-    onDsMouseEnter: EventName<DsButtonCustomEvent<MouseEvent>>,
-    onDsMouseLeave: EventName<DsButtonCustomEvent<MouseEvent>>
-};
-
-export const DsButton: StencilReactComponent<DsButtonElement, DsButtonEvents, Components.DsButton> = /*@__PURE__*/ createComponent<DsButtonElement, DsButtonEvents, Components.DsButton>({
-    tagName: 'ds-button',
-    elementClass: DsButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDsClick: 'dsClick',
-        onDsMouseEnter: 'dsMouseEnter',
-        onDsMouseLeave: 'dsMouseLeave'
-    } as DsButtonEvents,
-    defineCustomElement: defineDsButton
-});

package/src/react/ds-toggle-button-group.ts

@@ -1,27 +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 { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsToggleButtonGroupCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsToggleButtonGroup as DsToggleButtonGroupElement, defineCustomElement as defineDsToggleButtonGroup } from "@ds-mo/ui/dist/components/ds-toggle-button-group.js";
-
-export type DsToggleButtonGroupEvents = { onDsChange: EventName<DsToggleButtonGroupCustomEvent<string>> };
-
-export const DsToggleButtonGroup: StencilReactComponent<DsToggleButtonGroupElement, DsToggleButtonGroupEvents, Components.DsToggleButtonGroup> = /*@__PURE__*/ createComponent<DsToggleButtonGroupElement, DsToggleButtonGroupEvents, Components.DsToggleButtonGroup>({
-    tagName: 'ds-toggle-button-group',
-    elementClass: DsToggleButtonGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsChange: 'dsChange' } as DsToggleButtonGroupEvents,
-    defineCustomElement: defineDsToggleButtonGroup
-});

package/src/react/ds-toggle-button.ts

@@ -1,27 +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 { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsToggleButtonCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsToggleButton as DsToggleButtonElement, defineCustomElement as defineDsToggleButton } from "@ds-mo/ui/dist/components/ds-toggle-button.js";
-
-export type DsToggleButtonEvents = { onDsChange: EventName<DsToggleButtonCustomEvent<boolean>> };
-
-export const DsToggleButton: StencilReactComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton> = /*@__PURE__*/ createComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton>({
-    tagName: 'ds-toggle-button',
-    elementClass: DsToggleButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsChange: 'dsChange' } as DsToggleButtonEvents,
-    defineCustomElement: defineDsToggleButton
-});

package/src/wc/components/Button/Button.tsx

@@ -1,158 +0,0 @@
-import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';
-
-export type ButtonVariant   = 'primary' | 'secondary';
-export type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';
-export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-const ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };
-const TEXT_CLASS: Record<ButtonSize, string> = {
-  xs: 'text-caption-emphasis',
-  sm: 'text-body-small-emphasis',
-  md: 'text-body-medium-emphasis',
-  lg: 'text-body-large-emphasis',
-};
-
-@Component({
-  tag: 'ds-button',
-  styleUrl: 'Button.css',
-  scoped: true,
-})
-export class Button {
-  @Element() el!: HTMLElement;
-
-  @Prop() variant: ButtonVariant = 'primary';
-  @Prop() intent: ButtonIntent = 'brand';
-  @Prop() size: ButtonSize = 'md';
-  @Prop() label: string | undefined;
-  @Prop() rounded: boolean = false;
-  @Prop() fullWidth: boolean = false;
-  @Prop() width: string | undefined;
-  @Prop() contrast: ButtonContrast = 'bold';
-  @Prop() background: ButtonBackground | undefined;
-  @Prop() dropdown: boolean = false;
-  @Prop() badgeCount: number | undefined;
-  @Prop() elevation: ButtonElevation | undefined;
-  @Prop() loading: boolean = false;
-  @Prop() inactive: boolean = false;
-  @Prop() href: string | undefined;
-  @Prop() target: string | undefined;
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
-
-  @State() private hasIcon: boolean = false;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;
-  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;
-
-  componentWillLoad() {
-    this.hasIcon = !!this.el.querySelector('[slot="icon"]');
-  }
-
-  private handleClick = (e: MouseEvent) => {
-    if (this.inactive || this.loading) return;
-    this.dsClick.emit(e);
-  };
-
-  private get effectiveElevation(): ButtonElevation {
-    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');
-  }
-
-  render() {
-    const Tag = this.href ? 'a' : 'button';
-    const size = this.size;
-    const iconSize = ICON_SIZE[size];
-    const textClass = TEXT_CLASS[size];
-    const elev = this.effectiveElevation;
-    const hasLabel = !!this.label;
-    const showLeading = this.hasIcon || this.loading;
-    const isIconOnly = showLeading && !hasLabel;
-    const isLabelOnly = hasLabel && !showLeading;
-    const isIconAndLabel = showLeading && hasLabel;
-    const bg = this.background;
-
-    const btnCls: Record<string, boolean> = {
-      btn: true,
-      [this.variant]: true,
-      [`intent${cap(this.intent)}`]: true,
-      [`size${size.toUpperCase()}`]: size !== 'md',
-      rounded: this.rounded,
-      inactive: this.inactive || this.loading,
-      iconOnly: isIconOnly,
-      labelOnly: isLabelOnly,
-      iconAndLabel: isIconAndLabel,
-      dropdown: this.dropdown,
-      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',
-      [`elevation${cap(elev)}`]: true,
-      onMedium: bg === 'medium',
-      onBold: bg === 'bold',
-      onStrong: bg === 'strong',
-      onAlwaysDark: bg === 'always-dark',
-      fullWidth: this.fullWidth,
-    };
-
-    const extraProps: Record<string, unknown> = {};
-    if (Tag === 'button') {
-      extraProps.type = this.type;
-      extraProps.disabled = this.inactive || this.loading;
-    }
-    if (this.href) extraProps.href = this.href;
-    if (this.target) extraProps.target = this.target;
-
-    return (
-      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>
-        <Tag
-          class={btnCls}
-          style={this.width ? { width: this.width } : undefined}
-          aria-label={this.ariaLabel}
-          aria-labelledby={this.ariaLabelledby}
-          aria-disabled={this.inactive || this.loading || undefined}
-          aria-busy={this.loading || undefined}
-          onClick={this.handleClick}
-          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}
-          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}
-          {...extraProps}
-        >
-          {/* Leading icon / loader */}
-          <span class="btn__icon" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>
-            {this.loading
-              ? <ds-loader size={iconSize} />
-              : <slot name="icon" />
-            }
-          </span>
-          {/* Label */}
-          {hasLabel && (
-            <span class={`btn__label ${textClass}`}>{this.label}</span>
-          )}
-          {/* Trailing chevron */}
-          {this.dropdown && (
-            <svg
-              class="btn__chevron"
-              width={iconSize}
-              height={iconSize}
-              viewBox="0 0 20 20"
-              fill="none"
-              aria-hidden="true"
-            >
-              <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          )}
-          {/* Badge */}
-          {this.badgeCount != null && this.badgeCount > 0 && (
-            <span class="btn__badge">
-              {this.badgeCount > 9 ? '+' : this.badgeCount}
-            </span>
-          )}
-        </Tag>
-      </Host>
-    );
-  }
-}
-
-function cap(s: string) {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}

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

@@ -1 +0,0 @@
-export type { ButtonVariant, ButtonElevation, ButtonIntent, ButtonSize, ButtonContrast, ButtonBackground } from './Button';

package/src/wc/components/ButtonGroup/ButtonGroup.tsx

@@ -1,110 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';
-
-export interface ButtonGroupItem {
-  label?: string;
-  /** Icon name for <ds-icon>. Set via JS property. */
-  icon?: string;
-  variant?: 'primary' | 'secondary';
-  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';
-  inactive?: boolean;
-  href?: string;
-}
-
-@Component({
-  tag: 'ds-button-group',
-  styleUrl: 'ButtonGroup.css',
-  scoped: true,
-})
-export class ButtonGroup {
-  /**
-   * Array of button descriptors. Set via JS property.
-   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
-   */
-  @Prop() items: ButtonGroupItem[] = [];
-
-  /** Chrome level for the group container. */
-  @Prop() elevation: ButtonGroupElevation = 'flat';
-
-  /** Size passed to each ds-button. */
-  @Prop() size: ButtonGroupSize = 'md';
-
-  /** Pill shape for group + buttons. */
-  @Prop() rounded: boolean = false;
-
-  /** Emits the index of the clicked item. */
-  @Event() dsClick!: EventEmitter<number>;
-
-  render() {
-    const items = this.items;
-    const count = items.length;
-    const elev = this.elevation;
-    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
-    const isGhost = elev === 'none';
-
-    const groupCls: Record<string, boolean> = {
-      group: true,
-      [`group${elevKey}`]: true,
-      groupRounded: this.rounded,
-    };
-
-    return (
-      <Host>
-        <div class={groupCls} role="group">
-          {items.map((item, i) => {
-            const isFirst = i === 0;
-            const isLast = i === count - 1;
-            const isMid = !isFirst && !isLast;
-            const variant = item.variant ?? 'secondary';
-            const isIconOnly = !!item.icon && !item.label;
-            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
-            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';
-
-            const itemCls: Record<string, boolean> = {
-              item: true,
-              first: isFirst,
-              last: isLast,
-              middle: isMid,
-              itemShort: isGhost && variant === 'secondary',
-              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
-              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
-              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
-            };
-
-            const dividerCls: Record<string, boolean> = {
-              divider: true,
-              dividerGhost: isGhost,
-              dividerGhostXS: isGhost && this.size === 'xs',
-              dividerGhostSM: isGhost && this.size === 'sm',
-              dividerGhostLG: isGhost && this.size === 'lg',
-            };
-
-            return [
-              i > 0 && (
-                <div class={dividerCls} aria-hidden="true" />
-              ),
-              <ds-button
-                class={itemCls}
-                variant={variant}
-                intent={item.intent ?? 'none'}
-                elevation={elev}
-                size={this.size}
-                label={item.label}
-                rounded={this.rounded}
-                inactive={item.inactive}
-                href={item.href}
-                onDsClick={() => this.dsClick.emit(i)}
-              >
-                {item.icon && (
-                  <ds-icon slot="icon" name={item.icon} />
-                )}
-              </ds-button>,
-            ];
-          })}
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ToggleButton/ToggleButton.tsx

@@ -1,124 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-import type { IconSize } from '../Icon/Icon';
-import { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';
-
-export type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleButtonSize       = 'md' | 'sm' | 'xs';
-export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-const ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };
-
-const ICON_TOKEN: Record<ToggleButtonSize, string> = {
-  md: TOKEN_DEFAULTS.iconographyMd,
-  sm: TOKEN_DEFAULTS.iconographySm,
-  xs: TOKEN_DEFAULTS.iconographyXs,
-};
-
-const TEXT_CLASS: Record<ToggleButtonSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
-@Component({
-  tag: 'ds-toggle-button',
-  styleUrl: 'ToggleButton.css',
-  scoped: true,
-})
-export class ToggleButton {
-  /**
-   * Chrome level.
-   *   none     — ghost (transparent, no border, no shadow)
-   *   flat     — border only, transparent bg
-   *   elevated — bg-primary + shadow  [default]
-   *   floating — bg-primary + FAB-strength shadow
-   */
-  @Prop() elevation: ToggleButtonElevation = 'elevated';
-
-  /** Label text. */
-  @Prop() label: string | undefined;
-
-  /**
-   * Icon name for <ds-icon>. Set via JS property.
-   * @example el.icon = 'GridView';
-   */
-  @Prop() icon: string | undefined;
-
-  /** Size: md (32px), sm (24px), xs (16px). */
-  @Prop() size: ToggleButtonSize = 'md';
-
-  /** Pill shape. */
-  @Prop() rounded: boolean = false;
-
-  /** Parent surface context — adjusts hover tokens for colored backgrounds. */
-  @Prop() background: ToggleButtonBackground | undefined;
-
-  /** Controlled pressed state. */
-  @Prop({ mutable: true }) pressed: boolean = false;
-
-  /** Disables interaction. */
-  @Prop() inactive: boolean = false;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-
-  /** Emits the new pressed value (!pressed) on click. */
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private handleClick = () => {
-    if (this.inactive) return;
-    this.dsChange.emit(!this.pressed);
-  };
-
-  render() {
-    const size = this.size;
-    const iconSize = ICON_SIZE[size];
-    const iconPx = resolveCssLengthPx(ICON_TOKEN[size], ICON_TOKEN[size]);
-    const textClass = TEXT_CLASS[size];
-    const hasIcon = !!this.icon;
-    const hasLabel = !!this.label;
-    const isIconOnly = hasIcon && !hasLabel;
-    const isLabelOnly = hasLabel && !hasIcon;
-    const isIconAndLabel = hasIcon && hasLabel;
-    const bg = this.background;
-    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);
-
-    const cls: Record<string, boolean> = {
-      'toggle-btn': true,
-      [`elevation${elevKey}`]: true,
-      sizeSM: size === 'sm',
-      sizeXS: size === 'xs',
-      rounded: this.rounded,
-      inactive: this.inactive,
-      pressed: this.pressed,
-      iconOnly: isIconOnly,
-      labelOnly: isLabelOnly,
-      iconAndLabel: isIconAndLabel,
-      onMedium: bg === 'medium',
-      onBold: bg === 'bold',
-      onStrong: bg === 'strong',
-      onAlwaysDark: bg === 'always-dark',
-    };
-
-    return (
-      <Host>
-        <button
-          type="button"
-          class={cls}
-          disabled={this.inactive}
-          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}
-          aria-pressed={this.pressed}
-          onClick={this.handleClick}
-        >
-          {hasIcon && (
-            <span class="toggle-btn__icon" style={{ fontSize: `${iconPx}px` }}>
-              <ds-icon name={this.icon} size={iconSize} />
-            </span>
-          )}
-          {hasLabel && (
-            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>
-          )}
-        </button>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,118 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export type ToggleGroupElevation  = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleGroupSize       = 'md' | 'sm' | 'xs';
-export type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface ToggleGroupItem {
-  id: string;
-  label?: string;
-  /** Icon name for <ds-icon>. */
-  icon?: string;
-  inactive?: boolean;
-}
-
-@Component({
-  tag: 'ds-toggle-button-group',
-  styleUrl: 'ToggleButtonGroup.css',
-  scoped: true,
-})
-export class ToggleButtonGroup {
-  /**
-   * Array of item descriptors. Set via JS property.
-   * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
-   */
-  @Prop() items: ToggleGroupItem[] = [];
-
-  /** ID of the currently selected / pressed item. */
-  @Prop({ mutable: true }) value: string = '';
-
-  /** Chrome level for the group container. */
-  @Prop() elevation: ToggleGroupElevation = 'elevated';
-
-  /** Size passed to each ds-toggle-button. */
-  @Prop() size: ToggleGroupSize = 'md';
-
-  /** Pill shape for group + buttons. */
-  @Prop() rounded: boolean = false;
-
-  /** Parent surface context. */
-  @Prop() background: ToggleGroupBackground | undefined;
-
-  /** Emits the id of the newly selected item. */
-  @Event() dsChange!: EventEmitter<string>;
-
-  private handleItemChange(id: string) {
-    if (id === this.value) return;
-    this.value = id;
-    this.dsChange.emit(id);
-  }
-
-  render() {
-    const items = this.items;
-    const count = items.length;
-    const elev = this.elevation;
-    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
-    const bg = this.background;
-    const isGhost = elev === 'none';
-
-    const groupCls: Record<string, boolean> = {
-      group: true,
-      [`group${elevKey}`]: true,
-      groupRounded: this.rounded,
-    };
-
-    return (
-      <Host>
-        <div class={groupCls} role="group">
-          {items.map((item, i) => {
-            const isFirst = i === 0;
-            const isLast = i === count - 1;
-            const isMid = !isFirst && !isLast;
-            const isPressed = item.id === this.value;
-            const isIconOnly = !!item.icon && !item.label;
-            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
-            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
-
-            const itemCls: Record<string, boolean> = {
-              item: true,
-              first: isFirst,
-              last: isLast,
-              middle: isMid,
-              itemShort: isGhost,
-              itemPressed: isGhost && isPressed,
-              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
-              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
-              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
-            };
-
-            const dividerCls: Record<string, boolean> = {
-              divider: true,
-              dividerGhost: isGhost,
-              dividerGhostXS: isGhost && this.size === 'xs',
-              dividerGhostSM: isGhost && this.size === 'sm',
-            };
-
-            return [
-              i > 0 && (
-                <div class={dividerCls} aria-hidden="true" />
-              ),
-              <ds-toggle-button
-                class={itemCls}
-                elevation={elev}
-                size={this.size}
-                label={item.label}
-                icon={item.icon}
-                rounded={this.rounded}
-                background={bg}
-                pressed={isPressed}
-                inactive={item.inactive}
-                onDsChange={() => this.handleItemChange(item.id)}
-              />,
-            ];
-          })}
-        </div>
-      </Host>
-    );
-  }
-}