@ds-mo/ui 14.35.0 → 15.0.0

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

@@ -0,0 +1,273 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "title": "Calendar",
+  "description": "Month calendar grid for choosing one calendar date or an inclusive date range, reused by form date fields and filter range selection.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/calendar",
+    "source": "src/wc/components/Calendar/Calendar.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Month calendar grid for choosing one calendar date or an inclusive date range, reused by form date fields and filter range selection.",
+      "useWhen": [
+        "A user picks one calendar day from a month grid.",
+        "A user builds an inclusive start and end date by choosing two days.",
+        "A date field or filter needs the shared month navigation, weekday headings, and selected-day treatment."
+      ],
+      "avoidWhen": [
+        "The user types a date without opening a calendar; the owning field keeps that editable value.",
+        "The user chooses a relative preset such as last 7 days rather than fixed calendar days.",
+        "The popup also has to host filter categories, search, or apply actions; that surface stays with FilterMenu."
+      ],
+      "alternatives": [
+        {
+          "when": "The date is a form field that can be typed or picked.",
+          "component": "component:ds-input-date",
+          "reason": "InputDate owns the editable field, form association, and the calendar popup."
+        },
+        {
+          "when": "The value is a clock time rather than a calendar date.",
+          "component": "component:ds-time-picker",
+          "reason": "TimePicker owns bounded hour, minute, and AM/PM lists with the same 32px tile geometry."
+        },
+        {
+          "when": "The user chooses relative presets or mixed filter families from one trigger.",
+          "component": "component:ds-filter-menu",
+          "reason": "FilterMenu owns relative date presets and hosts this calendar only for fixed ranges."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input-date",
+        "component:ds-filter-menu",
+        "component:ds-button-unfilled",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "The month grid is labelled with the visible month and year. Days are grid cells with an accessible date name.",
+        "The grid keeps one tab stop. Arrow keys move by day or week, Home and End move within the week, and Page Up or Page Down change month.",
+        "In range mode, the first chosen day applies immediately as a one-day range. Hovering or focusing another day previews the inclusive span without changing the value until the second activation.",
+        "Month navigation buttons are named Previous month and Next month. Inactive calendars disable day and month controls."
+      ],
+      "states": [
+        "Single selection paints the current value with the shared interaction-fill selected wash and primary text. A committed range paints inclusive days with the faint brand fill and both edges boldly.",
+        "Today uses emphasized primary text without becoming selected on its own.",
+        "Days outside the visible month remain in the six-week grid and use tertiary text. Optional min and max dates disable days outside that inclusive bound.",
+        "After the first range day is chosen, that day keeps the shared pressed overlay. Hovering or focusing toward another day paints the inclusive span with the shared hover overlay on top of the previous committed range, which stays visible until the replacement is completed. Completing the end day orders the two dates inclusively and replaces those overlays with brand fill."
+      ],
+      "responsiveBehavior": [
+        "The grid fills the width supplied by its owner. Seven equal day columns and the shared 4px gaps are owned here; the owner supplies the popup or pane width."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Listen for dsChange. Single mode emits YYYY-MM-DD. Range mode emits range:start/end using the shared date-filter string."
+        ],
+        "react": [
+          "Use DsCalendar, bind value, and handle onDsChange."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Calendar/Calendar.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "autoFocus": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "auto-focus",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Move keyboard focus into the grid after the calendar is rendered."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "max": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "max",
+          "required": false,
+          "mutable": false
+        },
+        "min": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "min",
+          "required": false,
+          "mutable": false
+        },
+        "selectionMode": {
+          "type": "CalendarSelectionMode",
+          "resolvedType": "\"range\" | \"single\"",
+          "attribute": "selection-mode",
+          "default": "'single'",
+          "required": false,
+          "mutable": false,
+          "description": "Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "autoFocus": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "auto-focus",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Move keyboard focus into the grid after the calendar is rendered."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "max": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "max",
+        "required": false,
+        "mutable": false
+      },
+      "min": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "min",
+        "required": false,
+        "mutable": false
+      },
+      "selectionMode": {
+        "type": "CalendarSelectionMode",
+        "resolvedType": "\"range\" | \"single\"",
+        "attribute": "selection-mode",
+        "default": "'single'",
+        "required": false,
+        "mutable": false,
+        "description": "Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-calendar",
+      "react": "DsCalendar",
+      "vue": "DsCalendar",
+      "angular": "DsCalendar"
+    },
+    "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-calendar.js';",
+        "example": "<ds-calendar></ds-calendar>"
+      },
+      "react": {
+        "import": "import { DsCalendar } from '@ds-mo/ui/react';",
+        "example": "<DsCalendar />"
+      },
+      "vue": {
+        "import": "import { DsCalendar } from '@ds-mo/ui/vue';",
+        "example": "<DsCalendar />"
+      },
+      "angular": {
+        "import": "import { DsCalendar } from '@ds-mo/ui/angular/ds-calendar';",
+        "example": "<ds-calendar></ds-calendar>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^8.1.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Calendar/Calendar.css",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.calendar {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n  min-width: calc(\n    (var(--dimension-size-400) * 7) + (var(--dimension-space-050) * 6) +\n      (var(--dimension-space-100) * 2)\n  );\n  padding: var(--ds-calendar-padding, var(--dimension-space-100));\n}\n\n.calendar-heading {\n  display: grid;\n  grid-template-columns: var(--dimension-size-400) minmax(0, 1fr) var(--dimension-size-400);\n  align-items: center;\n  text-align: center;\n}\n\n.calendar-nav--previous {\n  justify-self: start;\n}\n\n.calendar-nav--next {\n  justify-self: end;\n}\n\n.calendar-weekdays,\n.calendar-grid__row {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  column-gap: var(--dimension-space-050);\n}\n\n.calendar-grid {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--dimension-space-050);\n}\n\n.calendar-weekdays {\n  align-items: center;\n  min-height: var(--dimension-size-400);\n  margin-block-start: var(--dimension-space-050);\n  color: var(--color-foreground-secondary);\n  text-align: center;\n}\n\n.calendar-day {\n  appearance: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  cursor: default;\n}\n\n.calendar-day:disabled {\n  cursor: not-allowed;\n}\n\n.calendar-day--outside {\n  color: var(--color-foreground-tertiary);\n}\n\n.calendar-day--in-range {\n  background: var(--color-background-faint-brand);\n  color: var(--color-foreground-primary);\n}\n\n/* In-progress span uses the shared hover overlay; the first day keeps pressed via --surface-open. */\n.calendar-day.ds-interaction-fill.calendar-day--range-preview:not(:disabled)::after {\n  background: var(--ds-interaction-hover);\n}\n\n.calendar-day.ds-interaction-fill.calendar-day--range-preview:active:not(:disabled)::after {\n  background: var(--ds-interaction-pressed);\n}\n\n.calendar-day--today {\n  color: var(--color-foreground-primary);\n}\n\n.calendar-day--range-edge {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n@media (forced-colors: active) {\n  .calendar-day--range-edge {\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Calendar/Calendar.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  dateFilterRangeValue,\n  isIsoCalendarDate,\n  parseDateFilterValue,\n  shiftIsoCalendarDate,\n} from '../../utils';\nimport {\n  CALENDAR_WEEKDAYS,\n  calendarDays,\n  calendarMonth,\n  calendarMonthLabel,\n  calendarPaintedRange,\n  calendarToday,\n  shiftCalendarMonth,\n  type CalendarDateRange,\n} from './calendar-grid';\n\nexport type CalendarSelectionMode = 'single' | 'range';\n\n@Component({\n  tag: 'ds-calendar',\n  styleUrl: 'Calendar.css',\n  scoped: true,\n})\nexport class Calendar {\n  @Element() el!: HTMLElement;\n\n  /** Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string. */\n  @Prop() selectionMode: CalendarSelectionMode = 'single';\n  @Prop() value: string = '';\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Move keyboard focus into the grid after the calendar is rendered. */\n  @Prop() autoFocus: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private month = calendarMonth(calendarToday());\n  @State() private pendingStart = '';\n  @State() private previewEnd = '';\n  @State() private heldRange: CalendarDateRange | null = null;\n\n  componentWillLoad() {\n    this.month = calendarMonth(this.anchorDate());\n  }\n\n  componentDidLoad() {\n    if (this.autoFocus) void this.setFocus();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.month = calendarMonth(this.anchorDate());\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector<HTMLElement>('.calendar-day[tabindex=\"0\"]')?.focus();\n  }\n\n  private anchorDate(): string {\n    if (this.selectionMode === 'range') {\n      const parsed = parseDateFilterValue(this.value);\n      if (parsed?.kind === 'range') return parsed.start;\n      return calendarToday();\n    }\n    return isIsoCalendarDate(this.value) ? this.value : calendarToday();\n  }\n\n  private isDisabled(day: string): boolean {\n    if (this.isInactive) return true;\n    if (this.min && isIsoCalendarDate(this.min) && day < this.min) return true;\n    if (this.max && isIsoCalendarDate(this.max) && day > this.max) return true;\n    return false;\n  }\n\n  private moveMonth = (offset: number) => {\n    this.previewEnd = '';\n    this.month = shiftCalendarMonth(this.month, offset);\n  };\n\n  private selectDate = (day: string) => {\n    if (this.isDisabled(day)) return;\n    this.previewEnd = '';\n    if (this.selectionMode === 'single') {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(day);\n      return;\n    }\n    const pending = this.pendingStart;\n    if (pending) {\n      this.pendingStart = '';\n      this.heldRange = null;\n      this.dsChange.emit(dateFilterRangeValue(pending, day));\n      return;\n    }\n    const current = parseDateFilterValue(this.value);\n    this.heldRange = current?.kind === 'range' ? { start: current.start, end: current.end } : null;\n    this.pendingStart = day;\n    this.dsChange.emit(dateFilterRangeValue(day, day));\n  };\n\n  private previewRange = (day: string) => {\n    if (!this.pendingStart || this.previewEnd === day) return;\n    this.previewEnd = day;\n  };\n\n  private clearPreview = () => {\n    if (!this.previewEnd) return;\n    this.previewEnd = '';\n  };\n\n  private focusDate(day: string) {\n    this.previewRange(day);\n    const targetMonth = calendarMonth(day);\n    if (this.month !== targetMonth) this.month = targetMonth;\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLElement>(`[data-date-option=\"${day}\"]`)?.focus();\n    });\n  }\n\n  private handleDayKeyDown = (event: KeyboardEvent, day: string) => {\n    let offset: number | null = null;\n    if (event.key === 'ArrowLeft') offset = -1;\n    else if (event.key === 'ArrowRight') offset = 1;\n    else if (event.key === 'ArrowUp') offset = -7;\n    else if (event.key === 'ArrowDown') offset = 7;\n    else if (event.key === 'Home') {\n      offset = -new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'End') {\n      offset = 6 - new Date(`${day}T00:00:00Z`).getUTCDay();\n    } else if (event.key === 'PageUp' || event.key === 'PageDown') {\n      const month = shiftCalendarMonth(calendarMonth(day), event.key === 'PageUp' ? -1 : 1);\n      const candidate = `${month}-${day.slice(8, 10)}`;\n      event.preventDefault();\n      this.focusDate(isIsoCalendarDate(candidate) ? candidate : `${month}-01`);\n      return;\n    }\n    if (offset === null) return;\n    event.preventDefault();\n    this.focusDate(shiftIsoCalendarDate(day, offset));\n  };\n\n  render() {\n    const liveRange = this.selectionMode === 'range' ? parseDateFilterValue(this.value) : null;\n    const liveRangeValue = liveRange?.kind === 'range' ? liveRange : null;\n    const rangeValue = calendarPaintedRange(this.pendingStart, this.heldRange, liveRangeValue);\n    const days = calendarDays(this.month);\n    const weeks = Array.from({ length: 6 }, (_, index) => days.slice(index * 7, index * 7 + 7));\n    const today = calendarToday();\n    const previewStart =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[0] : null;\n    const previewFinish =\n      this.pendingStart && this.previewEnd ? [this.pendingStart, this.previewEnd].sort()[1] : null;\n    const selectedSingle =\n      this.selectionMode === 'single' && isIsoCalendarDate(this.value) ? this.value : '';\n    const preferredFocus =\n      this.pendingStart ||\n      selectedSingle ||\n      rangeValue?.end ||\n      (this.month === today.slice(0, 7) ? today : '');\n    const focusDate = days.some(day => day.value === preferredFocus)\n      ? preferredFocus\n      : (days.find(day => day.inMonth)?.value ?? days[0]?.value);\n\n    return (\n      <Host>\n        <div class=\"calendar\">\n          <div class=\"calendar-heading ds-control--md\">\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--previous\"\n              variant=\"icon\"\n              icon=\"ChevronLeft\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive}\n              ariaLabel=\"Previous month\"\n              onDsClick={() => this.moveMonth(-1)}\n            />\n            <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"primary\">\n              {calendarMonthLabel(this.month)}\n            </ds-text>\n            <ds-button-unfilled\n              class=\"calendar-nav calendar-nav--next\"\n              variant=\"icon\"\n              icon=\"ChevronRight\"\n              size=\"md\"\n              hasBorder={false}\n              isInactive={this.isInactive}\n              ariaLabel=\"Next month\"\n              onDsClick={() => this.moveMonth(1)}\n            />\n          </div>\n          <div class=\"calendar-weekdays\" aria-hidden=\"true\">\n            {CALENDAR_WEEKDAYS.map(day => (\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                {day}\n              </ds-text>\n            ))}\n          </div>\n          <div\n            class=\"calendar-grid\"\n            role=\"grid\"\n            aria-label={calendarMonthLabel(this.month)}\n            onMouseLeave={this.clearPreview}\n          >\n            {weeks.map((week, weekIndex) => (\n              <div class=\"calendar-grid__row\" role=\"row\" key={`week-${weekIndex}`}>\n                {week.map(day => {\n                  const selectedInRange = Boolean(\n                    liveRangeValue &&\n                    day.value >= liveRangeValue.start &&\n                    day.value <= liveRangeValue.end\n                  );\n                  const paintedInRange = Boolean(\n                    rangeValue && day.value >= rangeValue.start && day.value <= rangeValue.end\n                  );\n                  const pendingStartDay =\n                    this.selectionMode === 'range' &&\n                    Boolean(this.pendingStart) &&\n                    day.value === this.pendingStart;\n                  const previewInRange = Boolean(\n                    this.pendingStart &&\n                    previewStart &&\n                    previewFinish &&\n                    day.value >= previewStart &&\n                    day.value <= previewFinish &&\n                    day.value !== this.pendingStart\n                  );\n                  const inRange = this.selectionMode === 'range' && paintedInRange;\n                  const rangeEdge = Boolean(\n                    this.selectionMode === 'range' &&\n                    rangeValue &&\n                    (day.value === rangeValue.start || day.value === rangeValue.end)\n                  );\n                  const selected = this.selectionMode === 'single' && day.value === selectedSingle;\n                  const textColor = rangeEdge\n                    ? 'on-bold'\n                    : selected ||\n                        inRange ||\n                        pendingStartDay ||\n                        previewInRange ||\n                        day.value === today\n                      ? 'primary'\n                      : day.inMonth\n                        ? 'secondary'\n                        : 'tertiary';\n                  return (\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-date-option={day.value}\n                      class={{\n                        'calendar-day': true,\n                        'calendar-day--outside': !day.inMonth,\n                        'calendar-day--today': day.value === today,\n                        'calendar-day--in-range': inRange,\n                        'calendar-day--range-preview': previewInRange,\n                        'calendar-day--range-edge': rangeEdge,\n                        'calendar-day--selected': selected,\n                        'ds-focus-ring-inset': true,\n                        'ds-interaction-fill': true,\n                        'ds-interaction-fill--on-bold': rangeEdge,\n                        'ds-interaction-fill--surface-open':\n                          pendingStartDay && !this.isDisabled(day.value),\n                        'ds-interaction-fill--selected': selected && !this.isDisabled(day.value),\n                      }}\n                      disabled={this.isDisabled(day.value)}\n                      aria-label={day.label}\n                      aria-selected={selectedInRange || selected ? 'true' : 'false'}\n                      tabIndex={day.value === focusDate ? 0 : -1}\n                      onMouseEnter={() => this.previewRange(day.value)}\n                      onFocus={() => this.previewRange(day.value)}\n                      onClick={() => this.selectDate(day.value)}\n                      onKeyDown={event => this.handleDayKeyDown(event, day.value)}\n                    >\n                      <ds-text\n                        class=\"ds-interaction-fill__content\"\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        color={textColor}\n                        emphasis={day.value === today}\n                      >\n                        {day.day}\n                      </ds-text>\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Calendar/calendar-grid.ts",
+      "content": "import { isIsoCalendarDate, shiftIsoCalendarDate } from '../../utils';\n\nexport interface CalendarDateRange {\n  start: string;\n  end: string;\n}\n\nexport interface CalendarDay {\n  value: string;\n  day: number;\n  inMonth: boolean;\n  label: string;\n}\n\nexport const CALENDAR_WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nconst MONTH_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  month: 'long',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\nconst DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric',\n  timeZone: 'UTC',\n});\n\nexport function calendarToday(): string {\n  const today = new Date();\n  const year = today.getFullYear();\n  const month = String(today.getMonth() + 1).padStart(2, '0');\n  const day = String(today.getDate()).padStart(2, '0');\n  return `${year}-${month}-${day}`;\n}\n\nexport function calendarMonth(value: string): string {\n  return isIsoCalendarDate(value) ? value.slice(0, 7) : calendarToday().slice(0, 7);\n}\n\nexport function shiftCalendarMonth(value: string, offset: number): string {\n  const [year, month] = value.split('-').map(Number);\n  const date = new Date(Date.UTC(year, month - 1 + offset, 1));\n  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}`;\n}\n\nexport function calendarMonthLabel(value: string): string {\n  const [year, month] = value.split('-').map(Number);\n  return MONTH_FORMATTER.format(new Date(Date.UTC(year, month - 1, 1)));\n}\n\nexport function calendarDays(value: string): CalendarDay[] {\n  const [year, month] = value.split('-').map(Number);\n  const firstOfMonth = `${year}-${String(month).padStart(2, '0')}-01`;\n  const firstWeekday = new Date(`${firstOfMonth}T00:00:00Z`).getUTCDay();\n  const gridStart = shiftIsoCalendarDate(firstOfMonth, -firstWeekday);\n  return Array.from({ length: 42 }, (_, index) => {\n    const dateValue = shiftIsoCalendarDate(gridStart, index);\n    const date = new Date(`${dateValue}T00:00:00Z`);\n    return {\n      value: dateValue,\n      day: date.getUTCDate(),\n      inMonth: dateValue.startsWith(`${value}-`),\n      label: DATE_FORMATTER.format(date),\n    };\n  });\n}\n\n/** Keep the previous committed range visible while a replacement range is being chosen. */\nexport function calendarPaintedRange(\n  pendingStart: string,\n  heldRange: CalendarDateRange | null,\n  valueRange: CalendarDateRange | null\n): CalendarDateRange | null {\n  return pendingStart ? heldRange : valueRange;\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -176,7 +176,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -214,7 +214,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -51,10 +51,12 @@
         "The native link owns hover, pressed, and focus-visible states across the complete card in navigation-only mode.",
         "In content mode, the native link owns those interaction states only across the header while the body remains application-owned.",
         "An empty or unsafe href renders non-interactive card chrome without a false keyboard target.",
+        "Copy is always stacked, so a missing description keeps the heading at the start of the column instead of centering it in the header.",
         "The application owns destination loading, authorization, not-found, and recovery states after navigation."
       ],
       "responsiveBehavior": [
         "Choose sm, md, or lg from the parent layout; the surface never exceeds its parent width.",
+        "The heading stays at the start of the stacked copy column whether or not supporting copy is present, so mixed destination lists keep titles aligned. The chevron stays vertically centered in the header.",
         "Supporting copy wraps while the chevron remains visible at the trailing edge.",
         "The parent owns wrapping, columns, stacking, and breakpoint changes between cards."
       ],
@@ -225,7 +227,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -243,12 +245,12 @@
   "files": [
     {
       "path": "src/wc/components/CardNavigation/CardNavigation.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: center;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--ds-radius-card);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  align-items: flex-start;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: flex-start;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  align-self: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardNavigation/CardNavigation.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, 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<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': !!description,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <ds-text\n            class=\"card-navigation__title ds-chrome-header__heading\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          {description ? (\n            <ds-text\n              class=\"card-navigation__description ds-chrome-header__description\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              as=\"span\"\n            >\n              {description}\n            </ds-text>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        class={{\n          'card-navigation': true,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, 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<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': true,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <ds-text\n            class=\"card-navigation__title ds-chrome-header__heading\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          {description ? (\n            <ds-text\n              class=\"card-navigation__description ds-chrome-header__description\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              as=\"span\"\n            >\n              {description}\n            </ds-text>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        class={{\n          'card-navigation': true,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -352,7 +352,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -255,7 +255,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -304,7 +304,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/chart-legend.json

@@ -273,7 +273,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -235,7 +235,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -358,7 +358,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -289,7 +289,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/code-block.json

@@ -134,7 +134,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/conversation-list-item.json

@@ -259,7 +259,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/conversation-list-section.json

@@ -116,7 +116,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/conversation-list.json

@@ -23,8 +23,7 @@
       "commonlyComposedWith": [
         "component:ds-conversation-list-section",
         "component:ds-conversation-list-item",
-        "component:ds-empty-state",
-        "component:ds-scroll-overlay"
+        "component:ds-empty-state"
       ],
       "patterns": [
         "pattern:conversation"
@@ -34,14 +33,13 @@
         "Keep the empty message descriptive and every persistent action explicitly named."
       ],
       "states": [
-        "The default floating action stays at the lower end corner.",
-        "actionLayout footer stretches a long action between 8px side and bottom insets.",
-        "Both action layouts share the always-active scroll-overlay fade controller, reserve measured end clearance, and begin fading 8px before the visible action.",
-        "ConversationList paints its measured fade on a separate surface-aware layer so contextual row actions retain a real backdrop for blur; hovered, focused, and menu-open rows rise above that decorative fade.",
+        "The action stays at the lower end corner, inset 16px from both edges.",
+        "Slot an icon-only rounded button; the corner action is the single supported placement, so a full-width labelled action no longer has a layout to sit in.",
+        "Rows scroll beneath the action. The list reserves no end clearance and paints no fade, so it keeps its full height whether or not an action is slotted.",
         "The persistent action wrapper splits its md outer shadow from a top inset-highlight overlay so opaque filled actions keep the complete TokoMo elevation; slotted buttons disable optional resting borders and the press-scale modifier moves the button and elevated surface as one unit."
       ],
       "responsiveBehavior": [
-        "The list fills its owner, scrolls independently, and keeps its persistent action above scrolling rows."
+        "The list fills its owner, scrolls independently, and floats its corner action above scrolling rows."
       ],
       "references": [
         {
@@ -51,32 +49,12 @@
       ]
     },
     "api": {
-      "props": {
-        "actionLayout": {
-          "type": "ConversationListActionLayout",
-          "resolvedType": "\"floating\" | \"footer\"",
-          "attribute": "action-layout",
-          "default": "'floating'",
-          "required": false,
-          "mutable": false,
-          "description": "Corner icon action or full-width persistent footer action."
-        }
-      },
+      "props": {},
       "events": [],
       "methods": [],
       "slots": []
     },
-    "props": {
-      "actionLayout": {
-        "type": "ConversationListActionLayout",
-        "resolvedType": "\"floating\" | \"footer\"",
-        "attribute": "action-layout",
-        "default": "'floating'",
-        "required": false,
-        "mutable": false,
-        "description": "Corner icon action or full-width persistent footer action."
-      }
-    },
+    "props": {},
     "events": [],
     "methods": [],
     "slots": [],
@@ -108,7 +86,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^7.0.0"
+          "@ds-mo/icons ^8.1.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -122,12 +100,12 @@
   "files": [
     {
       "path": "src/wc/components/ConversationList/ConversationList.css",
-      "content": "@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.conversation-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.conversation-list__viewport {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.conversation-list__content {\n  position: relative;\n  min-height: 100%;\n  padding: var(--dimension-space-100);\n  padding-bottom: calc(var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px));\n  box-sizing: border-box;\n}\n\n.conversation-list__fade {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  height: var(--ds-scroll-overlay-fade-block-size, 0);\n  pointer-events: none;\n  background-color: var(\n    --ds-scroll-overlay-surface-color,\n    var(--_shell-chrome-bg, var(--color-background-primary))\n  );\n  --ds-scroll-edge-fade-size: 100%;\n}\n\n.conversation-list__fade::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: var(--ds-scroll-overlay-surface-image, var(--ds-shell-gradient-image, none));\n  background-position: var(--ds-scroll-overlay-surface-position, 0 0);\n  background-attachment: fixed;\n  background-size: var(--ds-scroll-overlay-surface-size, var(--ds-shell-gradient-size, auto));\n  background-repeat: no-repeat;\n  opacity: var(--ds-scroll-overlay-surface-image-opacity, var(--ds-shell-gradient-opacity, 1));\n}\n\n.conversation-list__empty {\n  position: absolute;\n  inset-block: 0 var(--ds-scroll-overlay-block-size, 0);\n  inset-inline: 0;\n  box-sizing: border-box;\n}\n\n/* The named slot itself keeps this wrapper from matching :empty. Only create\n   its full-size hit area when assigned empty-state content is actually here. */\n.conversation-list__empty:not(:has([slot='empty'])) {\n  display: none;\n}\n\n.conversation-list__actions {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  z-index: var(--dimension-z-index-floating);\n  padding: 0 var(--dimension-space-200) var(--dimension-space-200) 0;\n}\n\n.conversation-list__actions--footer {\n  left: 0;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100);\n}\n\n.conversation-list__actions-surface {\n  display: flex;\n  border-radius: var(--dimension-radius-half);\n}\n\n.conversation-list__actions--footer .conversation-list__actions-surface {\n  width: 100%;\n}\n\n.conversation-list__actions-surface:empty {\n  display: none;\n}\n",
+      "content": "@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.conversation-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.conversation-list__viewport {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.conversation-list__content {\n  position: relative;\n  min-height: 100%;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.conversation-list__empty {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n}\n\n/* The named slot itself keeps this wrapper from matching :empty. Only create\n   its full-size hit area when assigned empty-state content is actually here. */\n.conversation-list__empty:not(:has([slot='empty'])) {\n  display: none;\n}\n\n/* Corner action. Rows scroll beneath it — there is no reserved clearance and no\n   fade, so the list keeps its full height whether or not an action is slotted. */\n.conversation-list__actions {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  z-index: var(--dimension-z-index-floating);\n  padding: 0 var(--dimension-space-200) var(--dimension-space-200) 0;\n}\n\n.conversation-list__actions-surface {\n  display: flex;\n  border-radius: var(--dimension-radius-half);\n}\n\n.conversation-list__actions-surface:empty {\n  display: none;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ConversationList/ConversationList.tsx",
-      "content": "import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport type ConversationListActionLayout = 'floating' | 'footer';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class ConversationList {\n  @Element() el!: HTMLElement;\n\n  /** Corner icon action or full-width persistent footer action. */\n  @Prop() actionLayout: ConversationListActionLayout = 'floating';\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private empty?: HTMLElement;\n  private overlay?: HTMLElement;\n  private scrollOverlayController?: ScrollOverlayController;\n  private emptySlotObserver?: MutationObserver;\n\n  componentDidLoad(): void {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.scrollOverlayController = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n      overlayContentSelector: '[slot=\"actions\"]',\n    });\n    this.scrollOverlayController.connect();\n    this.syncEmptyStateLayout();\n    this.emptySlotObserver = new MutationObserver(this.syncEmptyStateLayout);\n    this.emptySlotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback(): void {\n    this.scrollOverlayController?.disconnect();\n    this.emptySlotObserver?.disconnect();\n  }\n\n  private syncEmptyStateLayout = (): void => {\n    const emptyState = this.el.querySelector<HTMLElement>('[slot=\"empty\"]');\n    if (emptyState && !this.empty?.contains(emptyState)) {\n      // Stencil's scoped-slot runtime does not relocate nodes appended after\n      // hydration. Keep that dynamic fallback aligned with the CSS-owned\n      // wrapper used by declarative slot content.\n      emptyState.style.setProperty('position', 'absolute');\n      emptyState.style.setProperty('inset-block-start', '0');\n      emptyState.style.setProperty('inset-inline', '0');\n      emptyState.style.setProperty('inset-block-end', 'var(--ds-scroll-overlay-block-size, 0)');\n      emptyState.style.setProperty('height', 'auto');\n      emptyState.style.setProperty('box-sizing', 'border-box');\n    }\n    this.scrollOverlayController?.sync();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div\n            class=\"conversation-list__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            onScroll={() => this.scrollOverlayController?.sync()}\n          >\n            <div\n              class=\"conversation-list__content\"\n              ref={element => {\n                this.content = element;\n              }}\n            >\n              <slot />\n              <div\n                class=\"conversation-list__empty\"\n                ref={element => {\n                  this.empty = element;\n                }}\n              >\n                <slot name=\"empty\" />\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"conversation-list__fade scroll-edge-fade scroll-edge-fade--top\"\n            aria-hidden=\"true\"\n          />\n          <div\n            class={{\n              'conversation-list__actions': true,\n              'conversation-list__actions--footer': this.actionLayout === 'footer',\n            }}\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <div class=\"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  scoped: true,\n})\nexport class ConversationList {\n  @Element() el!: HTMLElement;\n\n  private empty?: HTMLElement;\n  private emptySlotObserver?: MutationObserver;\n\n  componentDidLoad(): void {\n    this.syncEmptyStateLayout();\n    this.emptySlotObserver = new MutationObserver(this.syncEmptyStateLayout);\n    this.emptySlotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback(): void {\n    this.emptySlotObserver?.disconnect();\n  }\n\n  private syncEmptyStateLayout = (): void => {\n    const emptyState = this.el.querySelector<HTMLElement>('[slot=\"empty\"]');\n    if (emptyState && !this.empty?.contains(emptyState)) {\n      // Stencil's scoped-slot runtime does not relocate nodes appended after\n      // hydration. Keep that dynamic fallback aligned with the CSS-owned\n      // wrapper used by declarative slot content.\n      emptyState.style.setProperty('position', 'absolute');\n      emptyState.style.setProperty('inset-block-start', '0');\n      emptyState.style.setProperty('inset-inline', '0');\n      emptyState.style.setProperty('inset-block-end', '0');\n      emptyState.style.setProperty('height', 'auto');\n      emptyState.style.setProperty('box-sizing', 'border-box');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div class=\"conversation-list__viewport\">\n            <div class=\"conversation-list__content\">\n              <slot />\n              <div\n                class=\"conversation-list__empty\"\n                ref={element => {\n                  this.empty = element;\n                }}\n              >\n                <slot name=\"empty\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"conversation-list__actions\">\n            <div class=\"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]