@ds-mo/ui 2.12.0 → 2.13.0

package/dist/components/p-DusYu-if.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonFilledCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","label","icon","intent","contrast","isInactive","type","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","ariaLabel","undefined","render","textVariant","iconSize","cls","h","Host","key","class","tabIndex","ref","el","disabled","onClick","name","color"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height. */\n:host(.button-filled-host--icon) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  line-height: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\n/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */\nconst TEXT_VARIANT: Record<ButtonFilledSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive) return;\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.showLabel && this.label) return undefined;\n    if (this.variant === 'icon') return this.icon || 'action';\n    return this.label || 'action';\n  }\n\n  render() {\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          {this.showLabel && (\n            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>\n              {this.label}\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,IAAM,g3dCoB9B,MAAMC,EAAiD,CACrDC,GAAI,4BACJC,GAAI,2BACJC,GAAI,yBAON,MAAMC,EAA0D,CAC9DH,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOE,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,MAAgB,GAGhBH,KAAAI,KAAe,GAGfJ,KAAAK,OAA6B,QAM7BL,KAAAM,SAAiC,OAGjCN,KAAAO,WAAsB,MAGtBP,KAAAQ,KAAsC,SAMtCR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKO,WAAY,OACrBP,KAAKY,QAAQC,KAAKF,EAAM,CA6E3B,CAnFC,cAAMG,GACJd,KAAKS,UAAUM,O,CAQjB,YAAYC,GACV,OAAOhB,KAAKC,UAAY,QAAUD,KAAKC,UAAY,Y,CAGrD,aAAYgB,GACV,OAAOjB,KAAKC,UAAY,SAAWD,KAAKC,UAAY,Y,CAGtD,kBAAYiB,GACV,GAAIlB,KAAKmB,UAAW,OAAOnB,KAAKmB,UAChC,GAAInB,KAAKiB,WAAajB,KAAKG,MAAO,OAAOiB,UACzC,GAAIpB,KAAKC,UAAY,OAAQ,OAAOD,KAAKI,MAAQ,SACjD,OAAOJ,KAAKG,OAAS,Q,CAGvB,MAAAkB,GACE,MAAMC,EAAchC,EAAaU,KAAKE,MACtC,MAAMqB,EAAW7B,EAAUM,KAAKE,MAEhC,MAAMsB,EAA+B,CACnC,gBAAiB,KACjB,sBAAuB,KACvB,uBAAwBxB,KAAKO,WAE7B,+BAAgCP,KAAKM,WAAa,OAClD,iCAAkCN,KAAKM,WAAa,SACpD,iCAAkCN,KAAKM,WAAa,SAEpD,sBAAuBN,KAAKO,WAC5B,iBAAkBP,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,sBAAuBF,KAAKC,UAAY,OACxC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,CAAC,yBAAyBD,KAAKK,UAAW,KAC1C,CAAC,2BAA2BL,KAAKM,YAAaN,KAAKM,WAAa,QAGlE,OACEmB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4B5B,KAAKC,UAAY,OAC7C,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,MAElC2B,UAAU,GAEVJ,EAAA,UAAAE,IAAA,2CACEG,IAAKC,IACH/B,KAAKS,SAAWsB,GAAM,IAAI,EAE5BvB,KAAMR,KAAKQ,KACXoB,MAAOJ,EACPQ,SAAUhC,KAAKO,WAAU,aACbP,KAAKkB,eACjBe,QAASjC,KAAKU,aAEbV,KAAKgB,UACJS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yDACVH,EAAA,WAAAE,IAAA,2CAASO,KAAMlC,KAAKI,KAAMF,KAAMqB,EAAUY,MAAM,aAGnDnC,KAAKiB,WACJQ,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,uBAAwB,KAAMN,CAACA,GAAc,KAAM,+BAAgC,OAC/FtB,KAAKG,Q","ignoreList":[]}

package/dist/types/components/CardDataViz/CardDataViz.d.ts

@@ -1,22 +0,0 @@
-export type CardDataVizWidth = 'sm' | 'md' | 'lg';
-/**
- * Copied from CardSetting as a starting scaffold — header edit affordance removed for now
- * (data-viz widgets don't have an obvious "edit" action the way settings fields do); revisit
- * once the data-viz card's real header actions (menu, caption, footer stat) are designed.
- */
-export declare class CardDataViz {
-    el: HTMLElement;
-    /** Widget heading shown in the card header. */
-    heading: string;
-    /** Card width token. */
-    cardWidth: CardDataVizWidth;
-    private hasChartSlot;
-    private hasLegendSlot;
-    componentWillRender(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private handleChartHover;
-    private handleLegendHover;
-    render(): any;
-}
-//# sourceMappingURL=CardDataViz.d.ts.map

package/dist/types/components/CardDataViz/index.d.ts

@@ -1,2 +0,0 @@
-export type { CardDataVizWidth } from './CardDataViz';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Header/Header.d.ts

@@ -1,7 +0,0 @@
-export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-export declare class Header {
-    heading: string | undefined;
-    background: HeaderBackground;
-    render(): any;
-}
-//# sourceMappingURL=Header.d.ts.map

package/dist/types/components/Scrollbar/Scrollbar.d.ts

@@ -1,27 +0,0 @@
-export type ScrollbarVariant = 'default' | 'thick';
-export declare class Scrollbar {
-    el: HTMLElement;
-    variant: ScrollbarVariant;
-    showTrackOnHover: boolean;
-    private thumbHeight;
-    private thumbTop;
-    private thumbWidth;
-    private thumbLeft;
-    private isDragging;
-    private isDraggingH;
-    private isPointerInside;
-    private contentEl;
-    private resizeObserver;
-    private scrollHandler;
-    private dragStartY;
-    private dragStartScrollTop;
-    private dragStartX;
-    private dragStartScrollLeft;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private updateThumb;
-    private handleThumbMouseDown;
-    private handleThumbHMouseDown;
-    render(): any;
-}
-//# sourceMappingURL=Scrollbar.d.ts.map

package/src/react/ds-card-data-viz.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 { DsCardDataViz as DsCardDataVizElement, defineCustomElement as defineDsCardDataViz } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
-
-export type DsCardDataVizEvents = NonNullable<unknown>;
-
-export const DsCardDataViz: StencilReactComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz> = /*@__PURE__*/ createComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz>({
-    tagName: 'ds-card-data-viz',
-    elementClass: DsCardDataVizElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {} as DsCardDataVizEvents,
-    defineCustomElement: defineDsCardDataViz
-});

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/wc/components/CardDataViz/index.ts

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

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>
-    );
-  }
-}

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

@@ -1,189 +0,0 @@
-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>
-    );
-  }
-}