@ds-mo/ui 1.0.2 → 1.2.0

package/src/react/ds-scrollbar.ts

@@ -0,0 +1,26 @@
+'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-select.ts

@@ -0,0 +1,27 @@
+'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 DsSelectCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSelect as DsSelectElement, defineCustomElement as defineDsSelect } from "@ds-mo/ui/dist/components/ds-select.js";
+
+export type DsSelectEvents = { onDsChange: EventName<DsSelectCustomEvent<string>> };
+
+export const DsSelect: StencilReactComponent<DsSelectElement, DsSelectEvents, Components.DsSelect> = /*@__PURE__*/ createComponent<DsSelectElement, DsSelectEvents, Components.DsSelect>({
+    tagName: 'ds-select',
+    elementClass: DsSelectElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsSelectEvents,
+    defineCustomElement: defineDsSelect
+});

package/src/react/ds-sidebar.ts

@@ -0,0 +1,33 @@
+'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 DsSidebarCustomEvent, type SidebarWidth } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSidebar as DsSidebarElement, defineCustomElement as defineDsSidebar } from "@ds-mo/ui/dist/components/ds-sidebar.js";
+
+export type DsSidebarEvents = {
+    onDsToggle: EventName<DsSidebarCustomEvent<void>>,
+    onDsWidthChange: EventName<DsSidebarCustomEvent<SidebarWidth>>
+};
+
+export const DsSidebar: StencilReactComponent<DsSidebarElement, DsSidebarEvents, Components.DsSidebar> = /*@__PURE__*/ createComponent<DsSidebarElement, DsSidebarEvents, Components.DsSidebar>({
+    tagName: 'ds-sidebar',
+    elementClass: DsSidebarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsToggle: 'dsToggle',
+        onDsWidthChange: 'dsWidthChange'
+    } as DsSidebarEvents,
+    defineCustomElement: defineDsSidebar
+});

package/src/react/ds-skeleton.ts

@@ -0,0 +1,26 @@
+'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 { DsSkeleton as DsSkeletonElement, defineCustomElement as defineDsSkeleton } from "@ds-mo/ui/dist/components/ds-skeleton.js";
+
+export type DsSkeletonEvents = NonNullable<unknown>;
+
+export const DsSkeleton: StencilReactComponent<DsSkeletonElement, DsSkeletonEvents, Components.DsSkeleton> = /*@__PURE__*/ createComponent<DsSkeletonElement, DsSkeletonEvents, Components.DsSkeleton>({
+    tagName: 'ds-skeleton',
+    elementClass: DsSkeletonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsSkeletonEvents,
+    defineCustomElement: defineDsSkeleton
+});

package/src/react/ds-slider.ts

@@ -0,0 +1,27 @@
+'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 DsSliderCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsSlider as DsSliderElement, defineCustomElement as defineDsSlider } from "@ds-mo/ui/dist/components/ds-slider.js";
+
+export type DsSliderEvents = { onDsChange: EventName<DsSliderCustomEvent<number>> };
+
+export const DsSlider: StencilReactComponent<DsSliderElement, DsSliderEvents, Components.DsSlider> = /*@__PURE__*/ createComponent<DsSliderElement, DsSliderEvents, Components.DsSlider>({
+    tagName: 'ds-slider',
+    elementClass: DsSliderElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsSliderEvents,
+    defineCustomElement: defineDsSlider
+});

package/src/react/ds-surface.ts

@@ -0,0 +1,26 @@
+'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-tab-group-nav.ts

@@ -0,0 +1,27 @@
+'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 DsTabGroupNavCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTabGroupNav as DsTabGroupNavElement, defineCustomElement as defineDsTabGroupNav } from "@ds-mo/ui/dist/components/ds-tab-group-nav.js";
+
+export type DsTabGroupNavEvents = { onDsChange: EventName<DsTabGroupNavCustomEvent<string>> };
+
+export const DsTabGroupNav: StencilReactComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav> = /*@__PURE__*/ createComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav>({
+    tagName: 'ds-tab-group-nav',
+    elementClass: DsTabGroupNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsTabGroupNavEvents,
+    defineCustomElement: defineDsTabGroupNav
+});

package/src/react/ds-tab-group.ts

@@ -0,0 +1,27 @@
+'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 DsTabGroupCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTabGroup as DsTabGroupElement, defineCustomElement as defineDsTabGroup } from "@ds-mo/ui/dist/components/ds-tab-group.js";
+
+export type DsTabGroupEvents = { onDsChange: EventName<DsTabGroupCustomEvent<string>> };
+
+export const DsTabGroup: StencilReactComponent<DsTabGroupElement, DsTabGroupEvents, Components.DsTabGroup> = /*@__PURE__*/ createComponent<DsTabGroupElement, DsTabGroupEvents, Components.DsTabGroup>({
+    tagName: 'ds-tab-group',
+    elementClass: DsTabGroupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsTabGroupEvents,
+    defineCustomElement: defineDsTabGroup
+});

package/src/react/ds-table.ts

@@ -0,0 +1,35 @@
+'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 DsTableCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTable as DsTableElement, defineCustomElement as defineDsTable } from "@ds-mo/ui/dist/components/ds-table.js";
+
+export type DsTableEvents = {
+    onDsSort: EventName<DsTableCustomEvent<{ columnId: string }>>,
+    onDsRowClick: EventName<DsTableCustomEvent<{ row: unknown; rowIndex: number }>>,
+    onDsPageChange: EventName<DsTableCustomEvent<{ pageIndex: number }>>
+};
+
+export const DsTable: StencilReactComponent<DsTableElement, DsTableEvents, Components.DsTable> = /*@__PURE__*/ createComponent<DsTableElement, DsTableEvents, Components.DsTable>({
+    tagName: 'ds-table',
+    elementClass: DsTableElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsSort: 'dsSort',
+        onDsRowClick: 'dsRowClick',
+        onDsPageChange: 'dsPageChange'
+    } as DsTableEvents,
+    defineCustomElement: defineDsTable
+});

package/src/react/ds-tag.ts

@@ -0,0 +1,35 @@
+'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 DsTagCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTag as DsTagElement, defineCustomElement as defineDsTag } from "@ds-mo/ui/dist/components/ds-tag.js";
+
+export type DsTagEvents = {
+    onDsRemove: EventName<DsTagCustomEvent<void>>,
+    onDsClick: EventName<DsTagCustomEvent<void>>,
+    onDsPressedChange: EventName<DsTagCustomEvent<boolean>>
+};
+
+export const DsTag: StencilReactComponent<DsTagElement, DsTagEvents, Components.DsTag> = /*@__PURE__*/ createComponent<DsTagElement, DsTagEvents, Components.DsTag>({
+    tagName: 'ds-tag',
+    elementClass: DsTagElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsRemove: 'dsRemove',
+        onDsClick: 'dsClick',
+        onDsPressedChange: 'dsPressedChange'
+    } as DsTagEvents,
+    defineCustomElement: defineDsTag
+});

package/src/react/ds-text.ts

@@ -0,0 +1,26 @@
+'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 { DsText as DsTextElement, defineCustomElement as defineDsText } from "@ds-mo/ui/dist/components/ds-text.js";
+
+export type DsTextEvents = NonNullable<unknown>;
+
+export const DsText: StencilReactComponent<DsTextElement, DsTextEvents, Components.DsText> = /*@__PURE__*/ createComponent<DsTextElement, DsTextEvents, Components.DsText>({
+    tagName: 'ds-text',
+    elementClass: DsTextElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsTextEvents,
+    defineCustomElement: defineDsText
+});

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

@@ -0,0 +1,26 @@
+'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/react/ds-toggle-button-group.ts

@@ -0,0 +1,27 @@
+'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

@@ -0,0 +1,27 @@
+'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/react/ds-toggle.ts

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

package/src/react/ds-tooltip.ts

@@ -0,0 +1,26 @@
+'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 { DsTooltip as DsTooltipElement, defineCustomElement as defineDsTooltip } from "@ds-mo/ui/dist/components/ds-tooltip.js";
+
+export type DsTooltipEvents = NonNullable<unknown>;
+
+export const DsTooltip: StencilReactComponent<DsTooltipElement, DsTooltipEvents, Components.DsTooltip> = /*@__PURE__*/ createComponent<DsTooltipElement, DsTooltipEvents, Components.DsTooltip>({
+    tagName: 'ds-tooltip',
+    elementClass: DsTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsTooltipEvents,
+    defineCustomElement: defineDsTooltip
+});

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

@@ -0,0 +1,144 @@
+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/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'ds-badge',
+  styleUrl: 'Badge.css',
+  scoped: true,
+})
+export class Badge {
+  @Prop() count: number = 0;
+  @Prop() isSelected: boolean = false;
+  /** Accessible label. Defaults to the count as a string. */
+  @Prop() label: string | undefined;
+
+  render() {
+    if (this.count === 0) return <Host style={{ display: 'none' }} />;
+
+    const display = this.count > 9 ? '+' : String(this.count);
+    const ariaLabel = this.label ?? String(this.count);
+
+    return (
+      <Host class="badge" aria-label={ariaLabel}>
+        <span
+          class={{
+            'text-caption-emphasis': true,
+            'badge__text': true,
+            'badge__text--selected': this.isSelected,
+          }}
+        >
+          {display}
+        </span>
+      </Host>
+    );
+  }
+}

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

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