@ds-mo/ui 9.2.0 → 10.0.0

package/dist/mcp-data/registry/banner.json

@@ -1,206 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "banner",
-  "title": "Banner",
-  "description": "Intent-colored message bar. Supports floating toast mode with auto-dismiss and fade-out animation.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/banner",
-    "source": "src/wc/components/Banner/Banner.tsx",
-    "intentStatus": "migration-pending",
-    "intent": null,
-    "api": {
-      "props": {
-        "contrast": {
-          "type": "BannerContrast",
-          "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
-          "attribute": "contrast",
-          "default": "'medium'",
-          "required": false,
-          "mutable": false
-        },
-        "dismissLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "dismiss-label",
-          "default": "'Dismiss'",
-          "required": false,
-          "mutable": false
-        },
-        "floating": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "floating",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Renders at a fixed position (centered top) and auto-dismisses after 4 s."
-        },
-        "header": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "header",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Renders the diagonal-stripe accent bar above the body."
-        },
-        "intent": {
-          "type": "BannerIntent",
-          "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
-          "attribute": "intent",
-          "default": "'neutral'",
-          "required": false,
-          "mutable": false
-        },
-        "message": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "message",
-          "default": "''",
-          "required": false,
-          "mutable": false
-        },
-        "showDismiss": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-dismiss",
-          "default": "false",
-          "required": false,
-          "mutable": false
-        }
-      },
-      "events": [
-        {
-          "name": "dsDismiss",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true
-        }
-      ],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "contrast": {
-        "type": "BannerContrast",
-        "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
-        "attribute": "contrast",
-        "default": "'medium'",
-        "required": false,
-        "mutable": false
-      },
-      "dismissLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "dismiss-label",
-        "default": "'Dismiss'",
-        "required": false,
-        "mutable": false
-      },
-      "floating": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "floating",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Renders at a fixed position (centered top) and auto-dismisses after 4 s."
-      },
-      "header": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "header",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Renders the diagonal-stripe accent bar above the body."
-      },
-      "intent": {
-        "type": "BannerIntent",
-        "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
-        "attribute": "intent",
-        "default": "'neutral'",
-        "required": false,
-        "mutable": false
-      },
-      "message": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "message",
-        "default": "''",
-        "required": false,
-        "mutable": false
-      },
-      "showDismiss": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-dismiss",
-        "default": "false",
-        "required": false,
-        "mutable": false
-      }
-    },
-    "events": [
-      {
-        "name": "dsDismiss",
-        "detail": "void",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true
-      }
-    ],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-banner",
-      "react": "DsBanner",
-      "angular": "DsBanner"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-banner.js';",
-        "example": "<ds-banner></ds-banner>"
-      },
-      "react": {
-        "import": "import { DsBanner } from '@ds-mo/ui/react';",
-        "example": "<DsBanner />"
-      },
-      "angular": {
-        "import": "import { DsBanner } from '@ds-mo/ui/angular/ds-banner';",
-        "example": "<ds-banner></ds-banner>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "text"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/Banner/Banner.css",
-      "content": ".banner-surface {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n  width: 100%;\n  height: var(--dimension-space-100);\n  flex-shrink: 0;\n  overflow: hidden;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(\n    -45deg,\n    var(--banner-content),\n    var(--banner-content) var(--dimension-size-100),\n    transparent var(--dimension-size-100),\n    transparent var(--dimension-size-200)\n  );\n}\n\n.banner-body {\n  padding: var(--dimension-space-075);\n  min-height: var(--dimension-size-400);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dimension-space-075);\n}\n\n.banner-message {\n  color: var(--banner-content);\n  flex: 1;\n  min-width: 0;\n}\n\n.banner-dismiss {\n  background: none;\n  border: none;\n  margin: 0;\n  padding: var(--dimension-space-025);\n  color: var(--banner-content);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.banner-dismiss::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n  pointer-events: none;\n}\n\n.banner-dismiss:hover::before  { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n  position: fixed;\n  top: var(--dimension-space-200);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n.floating-toast {\n  pointer-events: auto;\n  animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n  animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(-4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .floating-toast {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n\n  .floating-toast--closing {\n    opacity: 0;\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/Banner/Banner.tsx",
-      "content": "import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Prop() intent: BannerIntent = 'neutral';\n  @Prop() contrast: BannerContrast = 'medium';\n  @Prop() message: string = '';\n  /** Renders the diagonal-stripe accent bar above the body. */\n  @Prop() header: boolean = false;\n  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n  @Prop() floating: boolean = false;\n  @Prop() showDismiss: boolean = false;\n  @Prop() dismissLabel: string = 'Dismiss';\n\n  @State() private closing: boolean = false;\n\n  @Event() dsDismiss!: EventEmitter<void>;\n\n  private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private get fadeOutMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get autoDismissMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);\n  }\n\n  componentDidLoad() {\n    if (this.floating && this.message) this.scheduleDismiss();\n  }\n\n  @Watch('message')\n  onMessageChange(newVal: string) {\n    if (this.floating && newVal) {\n      this.closing = false;\n      this.scheduleDismiss();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearTimers();\n  }\n\n  private clearTimers() {\n    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }\n  }\n\n  private scheduleDismiss() {\n    this.clearTimers();\n    this.dismissTimer = setTimeout(() => {\n      this.dismissTimer = null;\n      this.beginClose();\n    }, this.autoDismissMs);\n  }\n\n  private beginClose() {\n    this.clearTimers();\n    if (this.floating) {\n      const fadeOutMs = this.fadeOutMs;\n      if (fadeOutMs <= 0) {\n        this.closing = false;\n        this.dsDismiss.emit();\n        return;\n      }\n      this.closing = true;\n      this.closeTimer = setTimeout(() => {\n        this.closing = false;\n        this.closeTimer = null;\n        this.dsDismiss.emit();\n      }, fadeOutMs);\n    } else {\n      this.dsDismiss.emit();\n    }\n  }\n\n  private getContentColor(): string {\n    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n    return `var(--color-foreground-${c}-${this.intent})`;\n  }\n\n  private getBg(): string {\n    return `var(--color-background-${this.contrast}-${this.intent})`;\n  }\n\n  private getElevation(): string {\n    return this.floating\n      ? 'var(--effect-elevation-elevated-floating)'\n      : 'var(--effect-elevation-elevated-sm)';\n  }\n\n  render() {\n    const contentColor = this.getContentColor();\n    const isAssertive = this.intent === 'negative';\n\n    const bannerEl = (\n      <div\n        class={{ 'banner-wrapper': true }}\n        style={{ '--banner-content': contentColor } as { [key: string]: string }}\n        role={isAssertive ? 'alert' : 'status'}\n        aria-live={isAssertive ? undefined : 'polite'}\n      >\n        <div\n          class=\"banner-surface\"\n          style={{\n            backgroundColor: this.getBg(),\n            boxShadow: this.getElevation(),\n          }}\n        >\n          {this.header && (\n            <div class=\"banner-header-surface\">\n              <div class=\"banner-header\" />\n            </div>\n          )}\n          <div class=\"banner-body\">\n            <ds-text class=\"banner-message\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n              {this.message}\n            </ds-text>\n            {this.showDismiss && (\n              <button\n                type=\"button\"\n                class=\"banner-dismiss\"\n                onClick={() => this.beginClose()}\n                aria-label={this.dismissLabel}\n              >\n                &times;\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n\n    if (this.floating) {\n      return (\n        <Host style={{ display: 'contents' }}>\n          <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n              {bannerEl}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/mcp-data/registry/card.json

@@ -1,126 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "card",
-  "title": "Card",
-  "description": "General and settings-compatible card chrome — width + matching min-height tokens, header (title + actions slot), and a flex body that fills leftover space.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card",
-    "source": "src/wc/components/Card/Card.tsx",
-    "intentStatus": "migration-pending",
-    "intent": null,
-    "api": {
-      "props": {
-        "appearance": {
-          "type": "CardAppearance",
-          "resolvedType": "\"default\" | \"editing\"",
-          "attribute": "appearance",
-          "default": "'default'",
-          "required": false,
-          "mutable": false,
-          "description": "Chrome recipe — `editing` applies the settings edit wash."
-        },
-        "cardWidth": {
-          "type": "CardWidth",
-          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
-          "attribute": "card-width",
-          "default": "'md'",
-          "required": false,
-          "mutable": false,
-          "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so empty bodies still fill the card."
-        },
-        "heading": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "heading",
-          "required": true,
-          "mutable": false,
-          "description": "Section heading shown in the card header."
-        }
-      },
-      "events": [],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "appearance": {
-        "type": "CardAppearance",
-        "resolvedType": "\"default\" | \"editing\"",
-        "attribute": "appearance",
-        "default": "'default'",
-        "required": false,
-        "mutable": false,
-        "description": "Chrome recipe — `editing` applies the settings edit wash."
-      },
-      "cardWidth": {
-        "type": "CardWidth",
-        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
-        "attribute": "card-width",
-        "default": "'md'",
-        "required": false,
-        "mutable": false,
-        "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so empty bodies still fill the card."
-      },
-      "heading": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "heading",
-        "required": true,
-        "mutable": false,
-        "description": "Section heading shown in the card header."
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-card",
-      "react": "DsCard",
-      "angular": "DsCard"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-card.js';",
-        "example": "<ds-card></ds-card>"
-      },
-      "react": {
-        "import": "import { DsCard } from '@ds-mo/ui/react';",
-        "example": "<DsCard />"
-      },
-      "angular": {
-        "import": "import { DsCard } from '@ds-mo/ui/angular/ds-card';",
-        "example": "<ds-card></ds-card>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "text"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/Card/Card.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-width);\n  min-height: var(--_card-min-height);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n:host(.card--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  flex-shrink: 0;\n  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* Title owns wrap + label inset (was nested wrap 075 + title 025 before metric-box).\n   Beat Text’s block/inline-box display so flex centering still applies. */\nds-text.card__title {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: calc(\n    var(--dimension-space-075) + var(--dimension-space-025)\n  );\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card__actions:empty {\n  display: none;\n}\n\n.card__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__body {\n  border-radius: var(--dimension-radius-025);\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/Card/Card.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardWidth = 'sm' | 'md' | 'lg';\n\n/** Visual chrome recipe — default app surface, or settings edit wash. */\nexport type CardAppearance = 'default' | 'editing';\n\nconst CARD_WIDTH_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n/**\n * Shared card chrome — width + matching min-height tokens, header (title + actions),\n * and a flex body that fills leftover space. Data-visualization cards use their\n * dedicated `ds-card-shell-data-viz` boundary instead.\n */\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so empty bodies still fill the card.\n   */\n  @Prop() cardWidth: CardWidth = 'md';\n\n  /** Chrome recipe — `editing` applies the settings edit wash. */\n  @Prop() appearance: CardAppearance = 'default';\n\n  render() {\n    const editing = this.appearance === 'editing';\n\n    return (\n      <Host\n        class={{\n          card: true,\n          'card--editing': editing,\n        }}\n        style={{\n          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card__header\">\n          <ds-text\n            class=\"card__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/react/ds-banner.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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.
- */
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { type DsBannerCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsBanner as DsBannerElement } from "@ds-mo/ui/dist/components/ds-banner.js";
-export type DsBannerEvents = {
-    onDsDismiss: EventName<DsBannerCustomEvent<void>>;
-};
-export declare const DsBanner: StencilReactComponent<DsBannerElement, DsBannerEvents, Components.DsBanner>;

package/dist/react/ds-banner.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-import { DsBanner as DsBannerElement, defineCustomElement as defineDsBanner } from "@ds-mo/ui/dist/components/ds-banner.js";
-export const DsBanner = /*@__PURE__*/ createComponent({
-    tagName: 'ds-banner',
-    elementClass: DsBannerElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsDismiss: 'dsDismiss' },
-    defineCustomElement: defineDsBanner
-});

package/dist/react/ds-card.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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.
- */
-import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsCard as DsCardElement } from "@ds-mo/ui/dist/components/ds-card.js";
-export type DsCardEvents = NonNullable<unknown>;
-export declare const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard, 'heading'>;

package/dist/react/ds-card.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-import { DsCard as DsCardElement, defineCustomElement as defineDsCard } from "@ds-mo/ui/dist/components/ds-card.js";
-export const DsCard = /*@__PURE__*/ createComponent({
-    tagName: 'ds-card',
-    elementClass: DsCardElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsCard
-});

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

@@ -1,31 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type BannerIntent = 'brand' | 'positive' | 'negative' | 'warning' | 'caution' | 'ai' | 'neutral' | 'walkthrough' | 'guide';
-export type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';
-export declare class Banner {
-    intent: BannerIntent;
-    contrast: BannerContrast;
-    message: string;
-    /** Renders the diagonal-stripe accent bar above the body. */
-    header: boolean;
-    /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */
-    floating: boolean;
-    showDismiss: boolean;
-    dismissLabel: string;
-    private closing;
-    dsDismiss: EventEmitter<void>;
-    private dismissTimer;
-    private closeTimer;
-    private get fadeOutMs();
-    private get autoDismissMs();
-    componentDidLoad(): void;
-    onMessageChange(newVal: string): void;
-    disconnectedCallback(): void;
-    private clearTimers;
-    private scheduleDismiss;
-    private beginClose;
-    private getContentColor;
-    private getBg;
-    private getElevation;
-    render(): any;
-}
-//# sourceMappingURL=Banner.d.ts.map

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

@@ -1,21 +0,0 @@
-export type CardWidth = 'sm' | 'md' | 'lg';
-/** Visual chrome recipe — default app surface, or settings edit wash. */
-export type CardAppearance = 'default' | 'editing';
-/**
- * Shared card chrome — width + matching min-height tokens, header (title + actions),
- * and a flex body that fills leftover space. Data-visualization cards use their
- * dedicated `ds-card-shell-data-viz` boundary instead.
- */
-export declare class Card {
-    /** Section heading shown in the card header. */
-    heading: string;
-    /**
-     * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
-     * matching `--dimension-card-height-*` so empty bodies still fill the card.
-     */
-    cardWidth: CardWidth;
-    /** Chrome recipe — `editing` applies the settings edit wash. */
-    appearance: CardAppearance;
-    render(): any;
-}
-//# sourceMappingURL=Card.d.ts.map

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

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