@ds-mo/ui 9.2.0 → 10.0.0

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

@@ -27,9 +27,9 @@
       ],
       "alternatives": [
         {
-          "when": "Content needs an enclosing surface and outer boundary.",
-          "component": "component:ds-card",
-          "reason": "Card owns container chrome, structure, and edge treatment."
+          "when": "Editable settings need an enclosing section surface and outer boundary.",
+          "component": "component:ds-card-setting",
+          "reason": "CardSetting owns settings-section chrome, structure, and edge treatment."
         },
         {
           "when": "A static compact label is being used to name a group.",
@@ -38,7 +38,7 @@
         }
       ],
       "commonlyComposedWith": [
-        "component:ds-card",
+        "component:ds-card-setting",
         "component:ds-menu",
         "component:ds-panel-sub-nav"
       ],
@@ -199,7 +199,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/empty-state.json

@@ -167,7 +167,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -194,7 +194,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -195,7 +195,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -235,7 +235,7 @@
     },
     {
       "path": "src/wc/components/Icon/system-icon-catalog.ts",
-      "content": "/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */\n\nexport const systemIconLoaders: Record<string, () => Promise<string>> = {\n  AI: () => import('@ds-mo/icons/svg/AI').then(m => m.AI),\n  AIChip: () => import('@ds-mo/icons/svg/AIChip').then(m => m.AIChip),\n  AINew: () => import('@ds-mo/icons/svg/AINew').then(m => m.AINew),\n  AISparkle: () => import('@ds-mo/icons/svg/AISparkle').then(m => m.AISparkle),\n  AUX: () => import('@ds-mo/icons/svg/AUX').then(m => m.AUX),\n  AUXFilled: () => import('@ds-mo/icons/svg/AUXFilled').then(m => m.AUXFilled),\n  AndroidFilled: () => import('@ds-mo/icons/svg/AndroidFilled').then(m => m.AndroidFilled),\n  ArrowDown: () => import('@ds-mo/icons/svg/ArrowDown').then(m => m.ArrowDown),\n  ArrowLeft: () => import('@ds-mo/icons/svg/ArrowLeft').then(m => m.ArrowLeft),\n  ArrowPath: () => import('@ds-mo/icons/svg/ArrowPath').then(m => m.ArrowPath),\n  ArrowRight: () => import('@ds-mo/icons/svg/ArrowRight').then(m => m.ArrowRight),\n  ArrowUp: () => import('@ds-mo/icons/svg/ArrowUp').then(m => m.ArrowUp),\n  ArrowsDiagonal: () => import('@ds-mo/icons/svg/ArrowsDiagonal').then(m => m.ArrowsDiagonal),\n  ArrowsDiff: () => import('@ds-mo/icons/svg/ArrowsDiff').then(m => m.ArrowsDiff),\n  ArrowsDiffDisabled: () => import('@ds-mo/icons/svg/ArrowsDiffDisabled').then(m => m.ArrowsDiffDisabled),\n  ArrowsVertical: () => import('@ds-mo/icons/svg/ArrowsVertical').then(m => m.ArrowsVertical),\n  AtSign: () => import('@ds-mo/icons/svg/AtSign').then(m => m.AtSign),\n  Avatar: () => import('@ds-mo/icons/svg/Avatar').then(m => m.Avatar),\n  BackslashBrackets: () => import('@ds-mo/icons/svg/BackslashBrackets').then(m => m.BackslashBrackets),\n  BatteryCharging: () => import('@ds-mo/icons/svg/BatteryCharging').then(m => m.BatteryCharging),\n  BatteryEmpty: () => import('@ds-mo/icons/svg/BatteryEmpty').then(m => m.BatteryEmpty),\n  BatteryFull: () => import('@ds-mo/icons/svg/BatteryFull').then(m => m.BatteryFull),\n  BatteryHalf: () => import('@ds-mo/icons/svg/BatteryHalf').then(m => m.BatteryHalf),\n  BatteryLow: () => import('@ds-mo/icons/svg/BatteryLow').then(m => m.BatteryLow),\n  Beaker: () => import('@ds-mo/icons/svg/Beaker').then(m => m.Beaker),\n  Bell: () => import('@ds-mo/icons/svg/Bell').then(m => m.Bell),\n  BellCircle: () => import('@ds-mo/icons/svg/BellCircle').then(m => m.BellCircle),\n  BellExclamation: () => import('@ds-mo/icons/svg/BellExclamation').then(m => m.BellExclamation),\n  BellFilled: () => import('@ds-mo/icons/svg/BellFilled').then(m => m.BellFilled),\n  BellRinging: () => import('@ds-mo/icons/svg/BellRinging').then(m => m.BellRinging),\n  BellWifi: () => import('@ds-mo/icons/svg/BellWifi').then(m => m.BellWifi),\n  BlackWhite: () => import('@ds-mo/icons/svg/BlackWhite').then(m => m.BlackWhite),\n  BlankUI: () => import('@ds-mo/icons/svg/BlankUI').then(m => m.BlankUI),\n  Bluetooth: () => import('@ds-mo/icons/svg/Bluetooth').then(m => m.Bluetooth),\n  Bolt: () => import('@ds-mo/icons/svg/Bolt').then(m => m.Bolt),\n  BoltFilled: () => import('@ds-mo/icons/svg/BoltFilled').then(m => m.BoltFilled),\n  Bookmark: () => import('@ds-mo/icons/svg/Bookmark').then(m => m.Bookmark),\n  Box: () => import('@ds-mo/icons/svg/Box').then(m => m.Box),\n  Braces: () => import('@ds-mo/icons/svg/Braces').then(m => m.Braces),\n  Bug: () => import('@ds-mo/icons/svg/Bug').then(m => m.Bug),\n  BuildingFacility: () => import('@ds-mo/icons/svg/BuildingFacility').then(m => m.BuildingFacility),\n  BuildingHome: () => import('@ds-mo/icons/svg/BuildingHome').then(m => m.BuildingHome),\n  BuildingOffice: () => import('@ds-mo/icons/svg/BuildingOffice').then(m => m.BuildingOffice),\n  BuildingPublic: () => import('@ds-mo/icons/svg/BuildingPublic').then(m => m.BuildingPublic),\n  BuildingShop: () => import('@ds-mo/icons/svg/BuildingShop').then(m => m.BuildingShop),\n  Bulb: () => import('@ds-mo/icons/svg/Bulb').then(m => m.Bulb),\n  Calculator: () => import('@ds-mo/icons/svg/Calculator').then(m => m.Calculator),\n  Calendar: () => import('@ds-mo/icons/svg/Calendar').then(m => m.Calendar),\n  CalendarClock: () => import('@ds-mo/icons/svg/CalendarClock').then(m => m.CalendarClock),\n  CameraA: () => import('@ds-mo/icons/svg/CameraA').then(m => m.CameraA),\n  CameraB: () => import('@ds-mo/icons/svg/CameraB').then(m => m.CameraB),\n  Card: () => import('@ds-mo/icons/svg/Card').then(m => m.Card),\n  CardPerson: () => import('@ds-mo/icons/svg/CardPerson').then(m => m.CardPerson),\n  Cart: () => import('@ds-mo/icons/svg/Cart').then(m => m.Cart),\n  Chart: () => import('@ds-mo/icons/svg/Chart').then(m => m.Chart),\n  Check: () => import('@ds-mo/icons/svg/Check').then(m => m.Check),\n  CheckCircle: () => import('@ds-mo/icons/svg/CheckCircle').then(m => m.CheckCircle),\n  CheckCircleFilled: () => import('@ds-mo/icons/svg/CheckCircleFilled').then(m => m.CheckCircleFilled),\n  CheckDouble: () => import('@ds-mo/icons/svg/CheckDouble').then(m => m.CheckDouble),\n  ChevronDown: () => import('@ds-mo/icons/svg/ChevronDown').then(m => m.ChevronDown),\n  ChevronLeft: () => import('@ds-mo/icons/svg/ChevronLeft').then(m => m.ChevronLeft),\n  ChevronLeftDouble: () => import('@ds-mo/icons/svg/ChevronLeftDouble').then(m => m.ChevronLeftDouble),\n  ChevronRight: () => import('@ds-mo/icons/svg/ChevronRight').then(m => m.ChevronRight),\n  ChevronRightDouble: () => import('@ds-mo/icons/svg/ChevronRightDouble').then(m => m.ChevronRightDouble),\n  ChevronUp: () => import('@ds-mo/icons/svg/ChevronUp').then(m => m.ChevronUp),\n  ChevronUpDown: () => import('@ds-mo/icons/svg/ChevronUpDown').then(m => m.ChevronUpDown),\n  Circle: () => import('@ds-mo/icons/svg/Circle').then(m => m.Circle),\n  CircleArrow: () => import('@ds-mo/icons/svg/CircleArrow').then(m => m.CircleArrow),\n  CircleArrowsDiff: () => import('@ds-mo/icons/svg/CircleArrowsDiff').then(m => m.CircleArrowsDiff),\n  CircleArrowsDiffDisabled: () => import('@ds-mo/icons/svg/CircleArrowsDiffDisabled').then(m => m.CircleArrowsDiffDisabled),\n  CircleConcentricFilled: () => import('@ds-mo/icons/svg/CircleConcentricFilled').then(m => m.CircleConcentricFilled),\n  CircleConcentricThree: () => import('@ds-mo/icons/svg/CircleConcentricThree').then(m => m.CircleConcentricThree),\n  CircleConcentricTwo: () => import('@ds-mo/icons/svg/CircleConcentricTwo').then(m => m.CircleConcentricTwo),\n  CircleExclamation: () => import('@ds-mo/icons/svg/CircleExclamation').then(m => m.CircleExclamation),\n  CircleExclamationFilled: () => import('@ds-mo/icons/svg/CircleExclamationFilled').then(m => m.CircleExclamationFilled),\n  CircleFastForward: () => import('@ds-mo/icons/svg/CircleFastForward').then(m => m.CircleFastForward),\n  CircleFilled: () => import('@ds-mo/icons/svg/CircleFilled').then(m => m.CircleFilled),\n  CircleGrid: () => import('@ds-mo/icons/svg/CircleGrid').then(m => m.CircleGrid),\n  CirclePlay: () => import('@ds-mo/icons/svg/CirclePlay').then(m => m.CirclePlay),\n  CircleQuestion: () => import('@ds-mo/icons/svg/CircleQuestion').then(m => m.CircleQuestion),\n  CircleSlash: () => import('@ds-mo/icons/svg/CircleSlash').then(m => m.CircleSlash),\n  Clipboard: () => import('@ds-mo/icons/svg/Clipboard').then(m => m.Clipboard),\n  ClipboardCheck: () => import('@ds-mo/icons/svg/ClipboardCheck').then(m => m.ClipboardCheck),\n  Clock: () => import('@ds-mo/icons/svg/Clock').then(m => m.Clock),\n  ClockDefer: () => import('@ds-mo/icons/svg/ClockDefer').then(m => m.ClockDefer),\n  ClockFilled: () => import('@ds-mo/icons/svg/ClockFilled').then(m => m.ClockFilled),\n  ClockSixteenHour: () => import('@ds-mo/icons/svg/ClockSixteenHour').then(m => m.ClockSixteenHour),\n  Cloud: () => import('@ds-mo/icons/svg/Cloud').then(m => m.Cloud),\n  CloudEllipses: () => import('@ds-mo/icons/svg/CloudEllipses').then(m => m.CloudEllipses),\n  CloudLightning: () => import('@ds-mo/icons/svg/CloudLightning').then(m => m.CloudLightning),\n  CloudRain: () => import('@ds-mo/icons/svg/CloudRain').then(m => m.CloudRain),\n  CloudRainSun: () => import('@ds-mo/icons/svg/CloudRainSun').then(m => m.CloudRainSun),\n  CloudSun: () => import('@ds-mo/icons/svg/CloudSun').then(m => m.CloudSun),\n  CloudWind: () => import('@ds-mo/icons/svg/CloudWind').then(m => m.CloudWind),\n  Cluster: () => import('@ds-mo/icons/svg/Cluster').then(m => m.Cluster),\n  Coin: () => import('@ds-mo/icons/svg/Coin').then(m => m.Coin),\n  CoinStack: () => import('@ds-mo/icons/svg/CoinStack').then(m => m.CoinStack),\n  CoinStackGeneral: () => import('@ds-mo/icons/svg/CoinStackGeneral').then(m => m.CoinStackGeneral),\n  Compass: () => import('@ds-mo/icons/svg/Compass').then(m => m.Compass),\n  Copy: () => import('@ds-mo/icons/svg/Copy').then(m => m.Copy),\n  Crop: () => import('@ds-mo/icons/svg/Crop').then(m => m.Crop),\n  Cross: () => import('@ds-mo/icons/svg/Cross').then(m => m.Cross),\n  CrossCircle: () => import('@ds-mo/icons/svg/CrossCircle').then(m => m.CrossCircle),\n  CrossCircleFilled: () => import('@ds-mo/icons/svg/CrossCircleFilled').then(m => m.CrossCircleFilled),\n  Cube: () => import('@ds-mo/icons/svg/Cube').then(m => m.Cube),\n  Cup: () => import('@ds-mo/icons/svg/Cup').then(m => m.Cup),\n  CursorPointer: () => import('@ds-mo/icons/svg/CursorPointer').then(m => m.CursorPointer),\n  CursorPointerMinus: () => import('@ds-mo/icons/svg/CursorPointerMinus').then(m => m.CursorPointerMinus),\n  CursorPointerPlus: () => import('@ds-mo/icons/svg/CursorPointerPlus').then(m => m.CursorPointerPlus),\n  Dashboard: () => import('@ds-mo/icons/svg/Dashboard').then(m => m.Dashboard),\n  DeviceAIDashcamPlus: () => import('@ds-mo/icons/svg/DeviceAIDashcamPlus').then(m => m.DeviceAIDashcamPlus),\n  DeviceAssetTracker: () => import('@ds-mo/icons/svg/DeviceAssetTracker').then(m => m.DeviceAssetTracker),\n  DeviceDVR: () => import('@ds-mo/icons/svg/DeviceDVR').then(m => m.DeviceDVR),\n  DeviceDashcam: () => import('@ds-mo/icons/svg/DeviceDashcam').then(m => m.DeviceDashcam),\n  DeviceDashcamLiveStream: () => import('@ds-mo/icons/svg/DeviceDashcamLiveStream').then(m => m.DeviceDashcamLiveStream),\n  DeviceDoorSensor: () => import('@ds-mo/icons/svg/DeviceDoorSensor').then(m => m.DeviceDoorSensor),\n  DeviceMobile: () => import('@ds-mo/icons/svg/DeviceMobile').then(m => m.DeviceMobile),\n  DeviceMobileTwo: () => import('@ds-mo/icons/svg/DeviceMobileTwo').then(m => m.DeviceMobileTwo),\n  DeviceOmnicam: () => import('@ds-mo/icons/svg/DeviceOmnicam').then(m => m.DeviceOmnicam),\n  DeviceSensor: () => import('@ds-mo/icons/svg/DeviceSensor').then(m => m.DeviceSensor),\n  DeviceTablet: () => import('@ds-mo/icons/svg/DeviceTablet').then(m => m.DeviceTablet),\n  DeviceVehicleGateway: () => import('@ds-mo/icons/svg/DeviceVehicleGateway').then(m => m.DeviceVehicleGateway),\n  Devices: () => import('@ds-mo/icons/svg/Devices').then(m => m.Devices),\n  Document: () => import('@ds-mo/icons/svg/Document').then(m => m.Document),\n  DocumentArrow: () => import('@ds-mo/icons/svg/DocumentArrow').then(m => m.DocumentArrow),\n  DocumentChart: () => import('@ds-mo/icons/svg/DocumentChart').then(m => m.DocumentChart),\n  DocumentDollar: () => import('@ds-mo/icons/svg/DocumentDollar').then(m => m.DocumentDollar),\n  DocumentGear: () => import('@ds-mo/icons/svg/DocumentGear').then(m => m.DocumentGear),\n  DocumentInverted: () => import('@ds-mo/icons/svg/DocumentInverted').then(m => m.DocumentInverted),\n  DocumentPencil: () => import('@ds-mo/icons/svg/DocumentPencil').then(m => m.DocumentPencil),\n  DocumentPlus: () => import('@ds-mo/icons/svg/DocumentPlus').then(m => m.DocumentPlus),\n  DocumentQuestion: () => import('@ds-mo/icons/svg/DocumentQuestion').then(m => m.DocumentQuestion),\n  DocumentReceipt: () => import('@ds-mo/icons/svg/DocumentReceipt').then(m => m.DocumentReceipt),\n  DocumentStacked: () => import('@ds-mo/icons/svg/DocumentStacked').then(m => m.DocumentStacked),\n  Dot: () => import('@ds-mo/icons/svg/Dot').then(m => m.Dot),\n  DotFilled: () => import('@ds-mo/icons/svg/DotFilled').then(m => m.DotFilled),\n  DotPath: () => import('@ds-mo/icons/svg/DotPath').then(m => m.DotPath),\n  Download: () => import('@ds-mo/icons/svg/Download').then(m => m.Download),\n  Drag: () => import('@ds-mo/icons/svg/Drag').then(m => m.Drag),\n  Ellipses: () => import('@ds-mo/icons/svg/Ellipses').then(m => m.Ellipses),\n  Email: () => import('@ds-mo/icons/svg/Email').then(m => m.Email),\n  Engine: () => import('@ds-mo/icons/svg/Engine').then(m => m.Engine),\n  Enter: () => import('@ds-mo/icons/svg/Enter').then(m => m.Enter),\n  EntityAsset: () => import('@ds-mo/icons/svg/EntityAsset').then(m => m.EntityAsset),\n  EntityAssetFilled: () => import('@ds-mo/icons/svg/EntityAssetFilled').then(m => m.EntityAssetFilled),\n  EntityDriver: () => import('@ds-mo/icons/svg/EntityDriver').then(m => m.EntityDriver),\n  EntityDriverFilled: () => import('@ds-mo/icons/svg/EntityDriverFilled').then(m => m.EntityDriverFilled),\n  EntityTravelGroup: () => import('@ds-mo/icons/svg/EntityTravelGroup').then(m => m.EntityTravelGroup),\n  EntityTravelGroupFilled: () => import('@ds-mo/icons/svg/EntityTravelGroupFilled').then(m => m.EntityTravelGroupFilled),\n  EntityVehicle: () => import('@ds-mo/icons/svg/EntityVehicle').then(m => m.EntityVehicle),\n  EntityVehicleCharging: () => import('@ds-mo/icons/svg/EntityVehicleCharging').then(m => m.EntityVehicleCharging),\n  EntityVehicleChargingFilled: () => import('@ds-mo/icons/svg/EntityVehicleChargingFilled').then(m => m.EntityVehicleChargingFilled),\n  EntityVehicleFilled: () => import('@ds-mo/icons/svg/EntityVehicleFilled').then(m => m.EntityVehicleFilled),\n  EntityVehicleImmobilized: () => import('@ds-mo/icons/svg/EntityVehicleImmobilized').then(m => m.EntityVehicleImmobilized),\n  EntityVehicleImmobilizedFilled: () => import('@ds-mo/icons/svg/EntityVehicleImmobilizedFilled').then(m => m.EntityVehicleImmobilizedFilled),\n  ErrorTriangle: () => import('@ds-mo/icons/svg/ErrorTriangle').then(m => m.ErrorTriangle),\n  ErrorTriangleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleFilled').then(m => m.ErrorTriangleFilled),\n  ErrorTriangleSimpleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleSimpleFilled').then(m => m.ErrorTriangleSimpleFilled),\n  Export: () => import('@ds-mo/icons/svg/Export').then(m => m.Export),\n  ExternalLink: () => import('@ds-mo/icons/svg/ExternalLink').then(m => m.ExternalLink),\n  Eye: () => import('@ds-mo/icons/svg/Eye').then(m => m.Eye),\n  EyeDisabled: () => import('@ds-mo/icons/svg/EyeDisabled').then(m => m.EyeDisabled),\n  EyeLock: () => import('@ds-mo/icons/svg/EyeLock').then(m => m.EyeLock),\n  FastForward: () => import('@ds-mo/icons/svg/FastForward').then(m => m.FastForward),\n  FastForwardSkip: () => import('@ds-mo/icons/svg/FastForwardSkip').then(m => m.FastForwardSkip),\n  Filters: () => import('@ds-mo/icons/svg/Filters').then(m => m.Filters),\n  FitToScreen: () => import('@ds-mo/icons/svg/FitToScreen').then(m => m.FitToScreen),\n  Flag: () => import('@ds-mo/icons/svg/Flag').then(m => m.Flag),\n  FlagFilled: () => import('@ds-mo/icons/svg/FlagFilled').then(m => m.FlagFilled),\n  FloppyDisk: () => import('@ds-mo/icons/svg/FloppyDisk').then(m => m.FloppyDisk),\n  Folder: () => import('@ds-mo/icons/svg/Folder').then(m => m.Folder),\n  FolderFilled: () => import('@ds-mo/icons/svg/FolderFilled').then(m => m.FolderFilled),\n  FuelPump: () => import('@ds-mo/icons/svg/FuelPump').then(m => m.FuelPump),\n  FullScreen: () => import('@ds-mo/icons/svg/FullScreen').then(m => m.FullScreen),\n  FullScreenExit: () => import('@ds-mo/icons/svg/FullScreenExit').then(m => m.FullScreenExit),\n  Gauge: () => import('@ds-mo/icons/svg/Gauge').then(m => m.Gauge),\n  GaugeTemperature: () => import('@ds-mo/icons/svg/GaugeTemperature').then(m => m.GaugeTemperature),\n  Gear: () => import('@ds-mo/icons/svg/Gear').then(m => m.Gear),\n  GearCheck: () => import('@ds-mo/icons/svg/GearCheck').then(m => m.GearCheck),\n  Geofence: () => import('@ds-mo/icons/svg/Geofence').then(m => m.Geofence),\n  GeofenceCircle: () => import('@ds-mo/icons/svg/GeofenceCircle').then(m => m.GeofenceCircle),\n  GeofenceDiamond: () => import('@ds-mo/icons/svg/GeofenceDiamond').then(m => m.GeofenceDiamond),\n  GeofenceSquare: () => import('@ds-mo/icons/svg/GeofenceSquare').then(m => m.GeofenceSquare),\n  GlobeNetwork: () => import('@ds-mo/icons/svg/GlobeNetwork').then(m => m.GlobeNetwork),\n  GlobeWorldMap: () => import('@ds-mo/icons/svg/GlobeWorldMap').then(m => m.GlobeWorldMap),\n  Graph: () => import('@ds-mo/icons/svg/Graph').then(m => m.Graph),\n  GraphArrow: () => import('@ds-mo/icons/svg/GraphArrow').then(m => m.GraphArrow),\n  GraphBars: () => import('@ds-mo/icons/svg/GraphBars').then(m => m.GraphBars),\n  GraphDecreasing: () => import('@ds-mo/icons/svg/GraphDecreasing').then(m => m.GraphDecreasing),\n  GraphIncreasing: () => import('@ds-mo/icons/svg/GraphIncreasing').then(m => m.GraphIncreasing),\n  GroupBy: () => import('@ds-mo/icons/svg/GroupBy').then(m => m.GroupBy),\n  Hamburger: () => import('@ds-mo/icons/svg/Hamburger').then(m => m.Hamburger),\n  HandOpen: () => import('@ds-mo/icons/svg/HandOpen').then(m => m.HandOpen),\n  Headset: () => import('@ds-mo/icons/svg/Headset').then(m => m.Headset),\n  History: () => import('@ds-mo/icons/svg/History').then(m => m.History),\n  HourGlass: () => import('@ds-mo/icons/svg/HourGlass').then(m => m.HourGlass),\n  Image: () => import('@ds-mo/icons/svg/Image').then(m => m.Image),\n  Import: () => import('@ds-mo/icons/svg/Import').then(m => m.Import),\n  ImportClock: () => import('@ds-mo/icons/svg/ImportClock').then(m => m.ImportClock),\n  Inbox: () => import('@ds-mo/icons/svg/Inbox').then(m => m.Inbox),\n  IosFilled: () => import('@ds-mo/icons/svg/IosFilled').then(m => m.IosFilled),\n  Jerrycan: () => import('@ds-mo/icons/svg/Jerrycan').then(m => m.Jerrycan),\n  KeyA: () => import('@ds-mo/icons/svg/KeyA').then(m => m.KeyA),\n  KeyB: () => import('@ds-mo/icons/svg/KeyB').then(m => m.KeyB),\n  KeyCmd: () => import('@ds-mo/icons/svg/KeyCmd').then(m => m.KeyCmd),\n  KeyShift: () => import('@ds-mo/icons/svg/KeyShift').then(m => m.KeyShift),\n  LED: () => import('@ds-mo/icons/svg/LED').then(m => m.LED),\n  Layers: () => import('@ds-mo/icons/svg/Layers').then(m => m.Layers),\n  Leaf: () => import('@ds-mo/icons/svg/Leaf').then(m => m.Leaf),\n  LeftCollapse: () => import('@ds-mo/icons/svg/LeftCollapse').then(m => m.LeftCollapse),\n  LeftCollapseB: () => import('@ds-mo/icons/svg/LeftCollapseB').then(m => m.LeftCollapseB),\n  LeftExpand: () => import('@ds-mo/icons/svg/LeftExpand').then(m => m.LeftExpand),\n  LeftExpandB: () => import('@ds-mo/icons/svg/LeftExpandB').then(m => m.LeftExpandB),\n  LeftTurnSignal: () => import('@ds-mo/icons/svg/LeftTurnSignal').then(m => m.LeftTurnSignal),\n  LetterB: () => import('@ds-mo/icons/svg/LetterB').then(m => m.LetterB),\n  LetterC: () => import('@ds-mo/icons/svg/LetterC').then(m => m.LetterC),\n  LetterI: () => import('@ds-mo/icons/svg/LetterI').then(m => m.LetterI),\n  License: () => import('@ds-mo/icons/svg/License').then(m => m.License),\n  LicensePlate: () => import('@ds-mo/icons/svg/LicensePlate').then(m => m.LicensePlate),\n  Lifebuoy: () => import('@ds-mo/icons/svg/Lifebuoy').then(m => m.Lifebuoy),\n  Link: () => import('@ds-mo/icons/svg/Link').then(m => m.Link),\n  List: () => import('@ds-mo/icons/svg/List').then(m => m.List),\n  Loads: () => import('@ds-mo/icons/svg/Loads').then(m => m.Loads),\n  LocationPin: () => import('@ds-mo/icons/svg/LocationPin').then(m => m.LocationPin),\n  LocationPinArrows: () => import('@ds-mo/icons/svg/LocationPinArrows').then(m => m.LocationPinArrows),\n  LocationPinDisabled: () => import('@ds-mo/icons/svg/LocationPinDisabled').then(m => m.LocationPinDisabled),\n  LocationPinDollar: () => import('@ds-mo/icons/svg/LocationPinDollar').then(m => m.LocationPinDollar),\n  LockClosed: () => import('@ds-mo/icons/svg/LockClosed').then(m => m.LockClosed),\n  LockClosedFilled: () => import('@ds-mo/icons/svg/LockClosedFilled').then(m => m.LockClosedFilled),\n  LockOpen: () => import('@ds-mo/icons/svg/LockOpen').then(m => m.LockOpen),\n  Logout: () => import('@ds-mo/icons/svg/Logout').then(m => m.Logout),\n  Logs: () => import('@ds-mo/icons/svg/Logs').then(m => m.Logs),\n  LogsMagnifyingGlass: () => import('@ds-mo/icons/svg/LogsMagnifyingGlass').then(m => m.LogsMagnifyingGlass),\n  MagnifyingGlass: () => import('@ds-mo/icons/svg/MagnifyingGlass').then(m => m.MagnifyingGlass),\n  MagnifyingGlassGraph: () => import('@ds-mo/icons/svg/MagnifyingGlassGraph').then(m => m.MagnifyingGlassGraph),\n  MagnifyingGlassZoomIn: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomIn').then(m => m.MagnifyingGlassZoomIn),\n  MagnifyingGlassZoomOut: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomOut').then(m => m.MagnifyingGlassZoomOut),\n  MapNavigation: () => import('@ds-mo/icons/svg/MapNavigation').then(m => m.MapNavigation),\n  MapPage: () => import('@ds-mo/icons/svg/MapPage').then(m => m.MapPage),\n  MapPin: () => import('@ds-mo/icons/svg/MapPin').then(m => m.MapPin),\n  MarkRead: () => import('@ds-mo/icons/svg/MarkRead').then(m => m.MarkRead),\n  Match: () => import('@ds-mo/icons/svg/Match').then(m => m.Match),\n  MessageBubble: () => import('@ds-mo/icons/svg/MessageBubble').then(m => m.MessageBubble),\n  MessageBubbleStack: () => import('@ds-mo/icons/svg/MessageBubbleStack').then(m => m.MessageBubbleStack),\n  Messaging: () => import('@ds-mo/icons/svg/Messaging').then(m => m.Messaging),\n  Mic: () => import('@ds-mo/icons/svg/Mic').then(m => m.Mic),\n  MicMute: () => import('@ds-mo/icons/svg/MicMute').then(m => m.MicMute),\n  Minimize: () => import('@ds-mo/icons/svg/Minimize').then(m => m.Minimize),\n  Monitor: () => import('@ds-mo/icons/svg/Monitor').then(m => m.Monitor),\n  Notification: () => import('@ds-mo/icons/svg/Notification').then(m => m.Notification),\n  NumberTen: () => import('@ds-mo/icons/svg/NumberTen').then(m => m.NumberTen),\n  OctagonSubtract: () => import('@ds-mo/icons/svg/OctagonSubtract').then(m => m.OctagonSubtract),\n  Odometer: () => import('@ds-mo/icons/svg/Odometer').then(m => m.Odometer),\n  OverviewAI: () => import('@ds-mo/icons/svg/OverviewAI').then(m => m.OverviewAI),\n  PanelCollapse: () => import('@ds-mo/icons/svg/PanelCollapse').then(m => m.PanelCollapse),\n  PanelExpand: () => import('@ds-mo/icons/svg/PanelExpand').then(m => m.PanelExpand),\n  Paperclip: () => import('@ds-mo/icons/svg/Paperclip').then(m => m.Paperclip),\n  PaperplaneSend: () => import('@ds-mo/icons/svg/PaperplaneSend').then(m => m.PaperplaneSend),\n  Paragraph: () => import('@ds-mo/icons/svg/Paragraph').then(m => m.Paragraph),\n  ParagraphCheck: () => import('@ds-mo/icons/svg/ParagraphCheck').then(m => m.ParagraphCheck),\n  ParagraphPencil: () => import('@ds-mo/icons/svg/ParagraphPencil').then(m => m.ParagraphPencil),\n  Pause: () => import('@ds-mo/icons/svg/Pause').then(m => m.Pause),\n  PauseFilled: () => import('@ds-mo/icons/svg/PauseFilled').then(m => m.PauseFilled),\n  Pencil: () => import('@ds-mo/icons/svg/Pencil').then(m => m.Pencil),\n  PencilSquiggle: () => import('@ds-mo/icons/svg/PencilSquiggle').then(m => m.PencilSquiggle),\n  Person: () => import('@ds-mo/icons/svg/Person').then(m => m.Person),\n  PersonAt: () => import('@ds-mo/icons/svg/PersonAt').then(m => m.PersonAt),\n  PersonConnect: () => import('@ds-mo/icons/svg/PersonConnect').then(m => m.PersonConnect),\n  PersonFrame: () => import('@ds-mo/icons/svg/PersonFrame').then(m => m.PersonFrame),\n  PersonGear: () => import('@ds-mo/icons/svg/PersonGear').then(m => m.PersonGear),\n  PersonGroup: () => import('@ds-mo/icons/svg/PersonGroup').then(m => m.PersonGroup),\n  PersonGroupArrows: () => import('@ds-mo/icons/svg/PersonGroupArrows').then(m => m.PersonGroupArrows),\n  PersonManager: () => import('@ds-mo/icons/svg/PersonManager').then(m => m.PersonManager),\n  PersonShield: () => import('@ds-mo/icons/svg/PersonShield').then(m => m.PersonShield),\n  PersonStar: () => import('@ds-mo/icons/svg/PersonStar').then(m => m.PersonStar),\n  Phone: () => import('@ds-mo/icons/svg/Phone').then(m => m.Phone),\n  PhoneDisconnect: () => import('@ds-mo/icons/svg/PhoneDisconnect').then(m => m.PhoneDisconnect),\n  PicmanFilled: () => import('@ds-mo/icons/svg/PicmanFilled').then(m => m.PicmanFilled),\n  Pin: () => import('@ds-mo/icons/svg/Pin').then(m => m.Pin),\n  PipBottomLeft: () => import('@ds-mo/icons/svg/PipBottomLeft').then(m => m.PipBottomLeft),\n  PipBottomRight: () => import('@ds-mo/icons/svg/PipBottomRight').then(m => m.PipBottomRight),\n  PipTopLeft: () => import('@ds-mo/icons/svg/PipTopLeft').then(m => m.PipTopLeft),\n  PipTopRight: () => import('@ds-mo/icons/svg/PipTopRight').then(m => m.PipTopRight),\n  Play: () => import('@ds-mo/icons/svg/Play').then(m => m.Play),\n  PlayFilled: () => import('@ds-mo/icons/svg/PlayFilled').then(m => m.PlayFilled),\n  Plug: () => import('@ds-mo/icons/svg/Plug').then(m => m.Plug),\n  Plus: () => import('@ds-mo/icons/svg/Plus').then(m => m.Plus),\n  PlusCircle: () => import('@ds-mo/icons/svg/PlusCircle').then(m => m.PlusCircle),\n  Preferences: () => import('@ds-mo/icons/svg/Preferences').then(m => m.Preferences),\n  Printer: () => import('@ds-mo/icons/svg/Printer').then(m => m.Printer),\n  PunchCard: () => import('@ds-mo/icons/svg/PunchCard').then(m => m.PunchCard),\n  Puzzle: () => import('@ds-mo/icons/svg/Puzzle').then(m => m.Puzzle),\n  PuzzleJoined: () => import('@ds-mo/icons/svg/PuzzleJoined').then(m => m.PuzzleJoined),\n  Redo: () => import('@ds-mo/icons/svg/Redo').then(m => m.Redo),\n  Refresh: () => import('@ds-mo/icons/svg/Refresh').then(m => m.Refresh),\n  Restore: () => import('@ds-mo/icons/svg/Restore').then(m => m.Restore),\n  RewardRibbon: () => import('@ds-mo/icons/svg/RewardRibbon').then(m => m.RewardRibbon),\n  Rewind: () => import('@ds-mo/icons/svg/Rewind').then(m => m.Rewind),\n  RewindSkip: () => import('@ds-mo/icons/svg/RewindSkip').then(m => m.RewindSkip),\n  RewindSkipFilled: () => import('@ds-mo/icons/svg/RewindSkipFilled').then(m => m.RewindSkipFilled),\n  RightCollapse: () => import('@ds-mo/icons/svg/RightCollapse').then(m => m.RightCollapse),\n  RightCollapseB: () => import('@ds-mo/icons/svg/RightCollapseB').then(m => m.RightCollapseB),\n  RightExpand: () => import('@ds-mo/icons/svg/RightExpand').then(m => m.RightExpand),\n  RightExpandB: () => import('@ds-mo/icons/svg/RightExpandB').then(m => m.RightExpandB),\n  RightTurnSignal: () => import('@ds-mo/icons/svg/RightTurnSignal').then(m => m.RightTurnSignal),\n  Rotate: () => import('@ds-mo/icons/svg/Rotate').then(m => m.Rotate),\n  Satellite: () => import('@ds-mo/icons/svg/Satellite').then(m => m.Satellite),\n  Scan: () => import('@ds-mo/icons/svg/Scan').then(m => m.Scan),\n  Scissor: () => import('@ds-mo/icons/svg/Scissor').then(m => m.Scissor),\n  Scope: () => import('@ds-mo/icons/svg/Scope').then(m => m.Scope),\n  Seatbelt: () => import('@ds-mo/icons/svg/Seatbelt').then(m => m.Seatbelt),\n  SeatbeltBuckle: () => import('@ds-mo/icons/svg/SeatbeltBuckle').then(m => m.SeatbeltBuckle),\n  Shapes: () => import('@ds-mo/icons/svg/Shapes').then(m => m.Shapes),\n  ShareCircles: () => import('@ds-mo/icons/svg/ShareCircles').then(m => m.ShareCircles),\n  ShareCirclesFilled: () => import('@ds-mo/icons/svg/ShareCirclesFilled').then(m => m.ShareCirclesFilled),\n  SharePaperplane: () => import('@ds-mo/icons/svg/SharePaperplane').then(m => m.SharePaperplane),\n  Shield: () => import('@ds-mo/icons/svg/Shield').then(m => m.Shield),\n  ShieldCheck: () => import('@ds-mo/icons/svg/ShieldCheck').then(m => m.ShieldCheck),\n  ShieldCheckmarkFilled: () => import('@ds-mo/icons/svg/ShieldCheckmarkFilled').then(m => m.ShieldCheckmarkFilled),\n  ShieldCircle: () => import('@ds-mo/icons/svg/ShieldCircle').then(m => m.ShieldCircle),\n  ShieldCircleFilled: () => import('@ds-mo/icons/svg/ShieldCircleFilled').then(m => m.ShieldCircleFilled),\n  ShieldCross: () => import('@ds-mo/icons/svg/ShieldCross').then(m => m.ShieldCross),\n  ShieldCrossFilled: () => import('@ds-mo/icons/svg/ShieldCrossFilled').then(m => m.ShieldCrossFilled),\n  ShieldFilled: () => import('@ds-mo/icons/svg/ShieldFilled').then(m => m.ShieldFilled),\n  ShieldLock: () => import('@ds-mo/icons/svg/ShieldLock').then(m => m.ShieldLock),\n  ShieldLockFilled: () => import('@ds-mo/icons/svg/ShieldLockFilled').then(m => m.ShieldLockFilled),\n  ShoppingBag: () => import('@ds-mo/icons/svg/ShoppingBag').then(m => m.ShoppingBag),\n  Snowflake: () => import('@ds-mo/icons/svg/Snowflake').then(m => m.Snowflake),\n  SpeakerPhone: () => import('@ds-mo/icons/svg/SpeakerPhone').then(m => m.SpeakerPhone),\n  SpeedometerArrow: () => import('@ds-mo/icons/svg/SpeedometerArrow').then(m => m.SpeedometerArrow),\n  SpeedometerLeft: () => import('@ds-mo/icons/svg/SpeedometerLeft').then(m => m.SpeedometerLeft),\n  SpeedometerRight: () => import('@ds-mo/icons/svg/SpeedometerRight').then(m => m.SpeedometerRight),\n  SpikeCirclePercentage: () => import('@ds-mo/icons/svg/SpikeCirclePercentage').then(m => m.SpikeCirclePercentage),\n  SpikeCirclePercentageFilled: () => import('@ds-mo/icons/svg/SpikeCirclePercentageFilled').then(m => m.SpikeCirclePercentageFilled),\n  Square: () => import('@ds-mo/icons/svg/Square').then(m => m.Square),\n  SquareArrowTopRight: () => import('@ds-mo/icons/svg/SquareArrowTopRight').then(m => m.SquareArrowTopRight),\n  SquareCheck: () => import('@ds-mo/icons/svg/SquareCheck').then(m => m.SquareCheck),\n  SquareCheckFilled: () => import('@ds-mo/icons/svg/SquareCheckFilled').then(m => m.SquareCheckFilled),\n  SquareDollar: () => import('@ds-mo/icons/svg/SquareDollar').then(m => m.SquareDollar),\n  SquareDollarFilled: () => import('@ds-mo/icons/svg/SquareDollarFilled').then(m => m.SquareDollarFilled),\n  SquareDottedMinus: () => import('@ds-mo/icons/svg/SquareDottedMinus').then(m => m.SquareDottedMinus),\n  SquareFilled: () => import('@ds-mo/icons/svg/SquareFilled').then(m => m.SquareFilled),\n  SquareGrid: () => import('@ds-mo/icons/svg/SquareGrid').then(m => m.SquareGrid),\n  SquarePencil: () => import('@ds-mo/icons/svg/SquarePencil').then(m => m.SquarePencil),\n  SquarePlus: () => import('@ds-mo/icons/svg/SquarePlus').then(m => m.SquarePlus),\n  SquareSubtract: () => import('@ds-mo/icons/svg/SquareSubtract').then(m => m.SquareSubtract),\n  SquareSubtractFilled: () => import('@ds-mo/icons/svg/SquareSubtractFilled').then(m => m.SquareSubtractFilled),\n  Star: () => import('@ds-mo/icons/svg/Star').then(m => m.Star),\n  StarFilled: () => import('@ds-mo/icons/svg/StarFilled').then(m => m.StarFilled),\n  Stopwatch: () => import('@ds-mo/icons/svg/Stopwatch').then(m => m.Stopwatch),\n  Street: () => import('@ds-mo/icons/svg/Street').then(m => m.Street),\n  Subtract: () => import('@ds-mo/icons/svg/Subtract').then(m => m.Subtract),\n  SubtractCircle: () => import('@ds-mo/icons/svg/SubtractCircle').then(m => m.SubtractCircle),\n  SubtractCircleFilled: () => import('@ds-mo/icons/svg/SubtractCircleFilled').then(m => m.SubtractCircleFilled),\n  Table: () => import('@ds-mo/icons/svg/Table').then(m => m.Table),\n  Tag: () => import('@ds-mo/icons/svg/Tag').then(m => m.Tag),\n  Target: () => import('@ds-mo/icons/svg/Target').then(m => m.Target),\n  TargetDollar: () => import('@ds-mo/icons/svg/TargetDollar').then(m => m.TargetDollar),\n  Text: () => import('@ds-mo/icons/svg/Text').then(m => m.Text),\n  ThemeDark: () => import('@ds-mo/icons/svg/ThemeDark').then(m => m.ThemeDark),\n  ThemeLight: () => import('@ds-mo/icons/svg/ThemeLight').then(m => m.ThemeLight),\n  ThumbsDown: () => import('@ds-mo/icons/svg/ThumbsDown').then(m => m.ThumbsDown),\n  ThumbsDownFilled: () => import('@ds-mo/icons/svg/ThumbsDownFilled').then(m => m.ThumbsDownFilled),\n  ThumbsUp: () => import('@ds-mo/icons/svg/ThumbsUp').then(m => m.ThumbsUp),\n  ThumbsUpFilled: () => import('@ds-mo/icons/svg/ThumbsUpFilled').then(m => m.ThumbsUpFilled),\n  TirePressure: () => import('@ds-mo/icons/svg/TirePressure').then(m => m.TirePressure),\n  Toggle: () => import('@ds-mo/icons/svg/Toggle').then(m => m.Toggle),\n  TrafficLight: () => import('@ds-mo/icons/svg/TrafficLight').then(m => m.TrafficLight),\n  Trash: () => import('@ds-mo/icons/svg/Trash').then(m => m.Trash),\n  Trophy: () => import('@ds-mo/icons/svg/Trophy').then(m => m.Trophy),\n  TurnSignal: () => import('@ds-mo/icons/svg/TurnSignal').then(m => m.TurnSignal),\n  TurnSignalFilled: () => import('@ds-mo/icons/svg/TurnSignalFilled').then(m => m.TurnSignalFilled),\n  Undo: () => import('@ds-mo/icons/svg/Undo').then(m => m.Undo),\n  Upgrade: () => import('@ds-mo/icons/svg/Upgrade').then(m => m.Upgrade),\n  Upload: () => import('@ds-mo/icons/svg/Upload').then(m => m.Upload),\n  VehicleTrailer: () => import('@ds-mo/icons/svg/VehicleTrailer').then(m => m.VehicleTrailer),\n  VehicleTruck: () => import('@ds-mo/icons/svg/VehicleTruck').then(m => m.VehicleTruck),\n  VehicleTruckMagnifyingGlass: () => import('@ds-mo/icons/svg/VehicleTruckMagnifyingGlass').then(m => m.VehicleTruckMagnifyingGlass),\n  Video: () => import('@ds-mo/icons/svg/Video').then(m => m.Video),\n  ViewMenu: () => import('@ds-mo/icons/svg/ViewMenu').then(m => m.ViewMenu),\n  Volume: () => import('@ds-mo/icons/svg/Volume').then(m => m.Volume),\n  VolumeFilled: () => import('@ds-mo/icons/svg/VolumeFilled').then(m => m.VolumeFilled),\n  VolumeMute: () => import('@ds-mo/icons/svg/VolumeMute').then(m => m.VolumeMute),\n  VolumeMuteFilled: () => import('@ds-mo/icons/svg/VolumeMuteFilled').then(m => m.VolumeMuteFilled),\n  WandSparkle: () => import('@ds-mo/icons/svg/WandSparkle').then(m => m.WandSparkle),\n  Waveform: () => import('@ds-mo/icons/svg/Waveform').then(m => m.Waveform),\n  Webhooks: () => import('@ds-mo/icons/svg/Webhooks').then(m => m.Webhooks),\n  Whistle: () => import('@ds-mo/icons/svg/Whistle').then(m => m.Whistle),\n  WifiHorizontal: () => import('@ds-mo/icons/svg/WifiHorizontal').then(m => m.WifiHorizontal),\n  WifiTower: () => import('@ds-mo/icons/svg/WifiTower').then(m => m.WifiTower),\n  WifiVertical: () => import('@ds-mo/icons/svg/WifiVertical').then(m => m.WifiVertical),\n  WifiVerticalFilled: () => import('@ds-mo/icons/svg/WifiVerticalFilled').then(m => m.WifiVerticalFilled),\n  WifiVerticalFilledDisabled: () => import('@ds-mo/icons/svg/WifiVerticalFilledDisabled').then(m => m.WifiVerticalFilledDisabled),\n  WorkflowA: () => import('@ds-mo/icons/svg/WorkflowA').then(m => m.WorkflowA),\n  WorkflowB: () => import('@ds-mo/icons/svg/WorkflowB').then(m => m.WorkflowB),\n  Wrench: () => import('@ds-mo/icons/svg/Wrench').then(m => m.Wrench),\n  ZoomBackOut: () => import('@ds-mo/icons/svg/ZoomBackOut').then(m => m.ZoomBackOut),\n};\n",
+      "content": "/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */\n\nexport const systemIconLoaders: Record<string, () => Promise<string>> = {\n  AI: () => import('@ds-mo/icons/svg/AI').then(m => m.AI),\n  AIChip: () => import('@ds-mo/icons/svg/AIChip').then(m => m.AIChip),\n  AINew: () => import('@ds-mo/icons/svg/AINew').then(m => m.AINew),\n  AISparkle: () => import('@ds-mo/icons/svg/AISparkle').then(m => m.AISparkle),\n  AUX: () => import('@ds-mo/icons/svg/AUX').then(m => m.AUX),\n  AUXFilled: () => import('@ds-mo/icons/svg/AUXFilled').then(m => m.AUXFilled),\n  AndroidFilled: () => import('@ds-mo/icons/svg/AndroidFilled').then(m => m.AndroidFilled),\n  ArrowDown: () => import('@ds-mo/icons/svg/ArrowDown').then(m => m.ArrowDown),\n  ArrowLeft: () => import('@ds-mo/icons/svg/ArrowLeft').then(m => m.ArrowLeft),\n  ArrowPath: () => import('@ds-mo/icons/svg/ArrowPath').then(m => m.ArrowPath),\n  ArrowRight: () => import('@ds-mo/icons/svg/ArrowRight').then(m => m.ArrowRight),\n  ArrowUp: () => import('@ds-mo/icons/svg/ArrowUp').then(m => m.ArrowUp),\n  ArrowsDiagonal: () => import('@ds-mo/icons/svg/ArrowsDiagonal').then(m => m.ArrowsDiagonal),\n  ArrowsDiff: () => import('@ds-mo/icons/svg/ArrowsDiff').then(m => m.ArrowsDiff),\n  ArrowsDiffDisabled: () => import('@ds-mo/icons/svg/ArrowsDiffDisabled').then(m => m.ArrowsDiffDisabled),\n  ArrowsVertical: () => import('@ds-mo/icons/svg/ArrowsVertical').then(m => m.ArrowsVertical),\n  AtSign: () => import('@ds-mo/icons/svg/AtSign').then(m => m.AtSign),\n  Avatar: () => import('@ds-mo/icons/svg/Avatar').then(m => m.Avatar),\n  BackslashBrackets: () => import('@ds-mo/icons/svg/BackslashBrackets').then(m => m.BackslashBrackets),\n  BatteryCharging: () => import('@ds-mo/icons/svg/BatteryCharging').then(m => m.BatteryCharging),\n  BatteryEmpty: () => import('@ds-mo/icons/svg/BatteryEmpty').then(m => m.BatteryEmpty),\n  BatteryFull: () => import('@ds-mo/icons/svg/BatteryFull').then(m => m.BatteryFull),\n  BatteryHalf: () => import('@ds-mo/icons/svg/BatteryHalf').then(m => m.BatteryHalf),\n  BatteryLow: () => import('@ds-mo/icons/svg/BatteryLow').then(m => m.BatteryLow),\n  Beaker: () => import('@ds-mo/icons/svg/Beaker').then(m => m.Beaker),\n  Bell: () => import('@ds-mo/icons/svg/Bell').then(m => m.Bell),\n  BellCircle: () => import('@ds-mo/icons/svg/BellCircle').then(m => m.BellCircle),\n  BellExclamation: () => import('@ds-mo/icons/svg/BellExclamation').then(m => m.BellExclamation),\n  BellFilled: () => import('@ds-mo/icons/svg/BellFilled').then(m => m.BellFilled),\n  BellRinging: () => import('@ds-mo/icons/svg/BellRinging').then(m => m.BellRinging),\n  BellWifi: () => import('@ds-mo/icons/svg/BellWifi').then(m => m.BellWifi),\n  BlackWhite: () => import('@ds-mo/icons/svg/BlackWhite').then(m => m.BlackWhite),\n  BlankUI: () => import('@ds-mo/icons/svg/BlankUI').then(m => m.BlankUI),\n  Bluetooth: () => import('@ds-mo/icons/svg/Bluetooth').then(m => m.Bluetooth),\n  Bolt: () => import('@ds-mo/icons/svg/Bolt').then(m => m.Bolt),\n  BoltFilled: () => import('@ds-mo/icons/svg/BoltFilled').then(m => m.BoltFilled),\n  Bookmark: () => import('@ds-mo/icons/svg/Bookmark').then(m => m.Bookmark),\n  Box: () => import('@ds-mo/icons/svg/Box').then(m => m.Box),\n  Braces: () => import('@ds-mo/icons/svg/Braces').then(m => m.Braces),\n  Bug: () => import('@ds-mo/icons/svg/Bug').then(m => m.Bug),\n  BuildingFacility: () => import('@ds-mo/icons/svg/BuildingFacility').then(m => m.BuildingFacility),\n  BuildingHome: () => import('@ds-mo/icons/svg/BuildingHome').then(m => m.BuildingHome),\n  BuildingOffice: () => import('@ds-mo/icons/svg/BuildingOffice').then(m => m.BuildingOffice),\n  BuildingPublic: () => import('@ds-mo/icons/svg/BuildingPublic').then(m => m.BuildingPublic),\n  BuildingShop: () => import('@ds-mo/icons/svg/BuildingShop').then(m => m.BuildingShop),\n  Bulb: () => import('@ds-mo/icons/svg/Bulb').then(m => m.Bulb),\n  Calculator: () => import('@ds-mo/icons/svg/Calculator').then(m => m.Calculator),\n  Calendar: () => import('@ds-mo/icons/svg/Calendar').then(m => m.Calendar),\n  CalendarClock: () => import('@ds-mo/icons/svg/CalendarClock').then(m => m.CalendarClock),\n  CameraA: () => import('@ds-mo/icons/svg/CameraA').then(m => m.CameraA),\n  CameraB: () => import('@ds-mo/icons/svg/CameraB').then(m => m.CameraB),\n  Card: () => import('@ds-mo/icons/svg/Card').then(m => m.Card),\n  CardPerson: () => import('@ds-mo/icons/svg/CardPerson').then(m => m.CardPerson),\n  Cart: () => import('@ds-mo/icons/svg/Cart').then(m => m.Cart),\n  Chart: () => import('@ds-mo/icons/svg/Chart').then(m => m.Chart),\n  Check: () => import('@ds-mo/icons/svg/Check').then(m => m.Check),\n  CheckCircle: () => import('@ds-mo/icons/svg/CheckCircle').then(m => m.CheckCircle),\n  CheckCircleFilled: () => import('@ds-mo/icons/svg/CheckCircleFilled').then(m => m.CheckCircleFilled),\n  CheckDouble: () => import('@ds-mo/icons/svg/CheckDouble').then(m => m.CheckDouble),\n  ChevronDown: () => import('@ds-mo/icons/svg/ChevronDown').then(m => m.ChevronDown),\n  ChevronLeft: () => import('@ds-mo/icons/svg/ChevronLeft').then(m => m.ChevronLeft),\n  ChevronLeftDouble: () => import('@ds-mo/icons/svg/ChevronLeftDouble').then(m => m.ChevronLeftDouble),\n  ChevronRight: () => import('@ds-mo/icons/svg/ChevronRight').then(m => m.ChevronRight),\n  ChevronRightDouble: () => import('@ds-mo/icons/svg/ChevronRightDouble').then(m => m.ChevronRightDouble),\n  ChevronUp: () => import('@ds-mo/icons/svg/ChevronUp').then(m => m.ChevronUp),\n  ChevronUpDown: () => import('@ds-mo/icons/svg/ChevronUpDown').then(m => m.ChevronUpDown),\n  Circle: () => import('@ds-mo/icons/svg/Circle').then(m => m.Circle),\n  CircleArrow: () => import('@ds-mo/icons/svg/CircleArrow').then(m => m.CircleArrow),\n  CircleArrowsDiff: () => import('@ds-mo/icons/svg/CircleArrowsDiff').then(m => m.CircleArrowsDiff),\n  CircleArrowsDiffDisabled: () => import('@ds-mo/icons/svg/CircleArrowsDiffDisabled').then(m => m.CircleArrowsDiffDisabled),\n  CircleConcentricFilled: () => import('@ds-mo/icons/svg/CircleConcentricFilled').then(m => m.CircleConcentricFilled),\n  CircleConcentricThree: () => import('@ds-mo/icons/svg/CircleConcentricThree').then(m => m.CircleConcentricThree),\n  CircleConcentricTwo: () => import('@ds-mo/icons/svg/CircleConcentricTwo').then(m => m.CircleConcentricTwo),\n  CircleExclamation: () => import('@ds-mo/icons/svg/CircleExclamation').then(m => m.CircleExclamation),\n  CircleExclamationFilled: () => import('@ds-mo/icons/svg/CircleExclamationFilled').then(m => m.CircleExclamationFilled),\n  CircleFastForward: () => import('@ds-mo/icons/svg/CircleFastForward').then(m => m.CircleFastForward),\n  CircleFilled: () => import('@ds-mo/icons/svg/CircleFilled').then(m => m.CircleFilled),\n  CircleGrid: () => import('@ds-mo/icons/svg/CircleGrid').then(m => m.CircleGrid),\n  CirclePlay: () => import('@ds-mo/icons/svg/CirclePlay').then(m => m.CirclePlay),\n  CircleQuestion: () => import('@ds-mo/icons/svg/CircleQuestion').then(m => m.CircleQuestion),\n  CircleSlash: () => import('@ds-mo/icons/svg/CircleSlash').then(m => m.CircleSlash),\n  Clipboard: () => import('@ds-mo/icons/svg/Clipboard').then(m => m.Clipboard),\n  ClipboardCheck: () => import('@ds-mo/icons/svg/ClipboardCheck').then(m => m.ClipboardCheck),\n  Clock: () => import('@ds-mo/icons/svg/Clock').then(m => m.Clock),\n  ClockDefer: () => import('@ds-mo/icons/svg/ClockDefer').then(m => m.ClockDefer),\n  ClockFilled: () => import('@ds-mo/icons/svg/ClockFilled').then(m => m.ClockFilled),\n  ClockSixteenHour: () => import('@ds-mo/icons/svg/ClockSixteenHour').then(m => m.ClockSixteenHour),\n  Cloud: () => import('@ds-mo/icons/svg/Cloud').then(m => m.Cloud),\n  CloudEllipses: () => import('@ds-mo/icons/svg/CloudEllipses').then(m => m.CloudEllipses),\n  CloudLightning: () => import('@ds-mo/icons/svg/CloudLightning').then(m => m.CloudLightning),\n  CloudRain: () => import('@ds-mo/icons/svg/CloudRain').then(m => m.CloudRain),\n  CloudRainSun: () => import('@ds-mo/icons/svg/CloudRainSun').then(m => m.CloudRainSun),\n  CloudSun: () => import('@ds-mo/icons/svg/CloudSun').then(m => m.CloudSun),\n  CloudWind: () => import('@ds-mo/icons/svg/CloudWind').then(m => m.CloudWind),\n  Cluster: () => import('@ds-mo/icons/svg/Cluster').then(m => m.Cluster),\n  Coin: () => import('@ds-mo/icons/svg/Coin').then(m => m.Coin),\n  CoinStack: () => import('@ds-mo/icons/svg/CoinStack').then(m => m.CoinStack),\n  CoinStackGeneral: () => import('@ds-mo/icons/svg/CoinStackGeneral').then(m => m.CoinStackGeneral),\n  Compass: () => import('@ds-mo/icons/svg/Compass').then(m => m.Compass),\n  Copy: () => import('@ds-mo/icons/svg/Copy').then(m => m.Copy),\n  Crop: () => import('@ds-mo/icons/svg/Crop').then(m => m.Crop),\n  Cross: () => import('@ds-mo/icons/svg/Cross').then(m => m.Cross),\n  CrossCircle: () => import('@ds-mo/icons/svg/CrossCircle').then(m => m.CrossCircle),\n  CrossCircleFilled: () => import('@ds-mo/icons/svg/CrossCircleFilled').then(m => m.CrossCircleFilled),\n  Cube: () => import('@ds-mo/icons/svg/Cube').then(m => m.Cube),\n  Cup: () => import('@ds-mo/icons/svg/Cup').then(m => m.Cup),\n  CursorPointer: () => import('@ds-mo/icons/svg/CursorPointer').then(m => m.CursorPointer),\n  CursorPointerMinus: () => import('@ds-mo/icons/svg/CursorPointerMinus').then(m => m.CursorPointerMinus),\n  CursorPointerPlus: () => import('@ds-mo/icons/svg/CursorPointerPlus').then(m => m.CursorPointerPlus),\n  Dashboard: () => import('@ds-mo/icons/svg/Dashboard').then(m => m.Dashboard),\n  DeviceAIDashcamPlus: () => import('@ds-mo/icons/svg/DeviceAIDashcamPlus').then(m => m.DeviceAIDashcamPlus),\n  DeviceAssetTracker: () => import('@ds-mo/icons/svg/DeviceAssetTracker').then(m => m.DeviceAssetTracker),\n  DeviceDVR: () => import('@ds-mo/icons/svg/DeviceDVR').then(m => m.DeviceDVR),\n  DeviceDashcam: () => import('@ds-mo/icons/svg/DeviceDashcam').then(m => m.DeviceDashcam),\n  DeviceDashcamLiveStream: () => import('@ds-mo/icons/svg/DeviceDashcamLiveStream').then(m => m.DeviceDashcamLiveStream),\n  DeviceDoorSensor: () => import('@ds-mo/icons/svg/DeviceDoorSensor').then(m => m.DeviceDoorSensor),\n  DeviceMobile: () => import('@ds-mo/icons/svg/DeviceMobile').then(m => m.DeviceMobile),\n  DeviceMobileTwo: () => import('@ds-mo/icons/svg/DeviceMobileTwo').then(m => m.DeviceMobileTwo),\n  DeviceOmnicam: () => import('@ds-mo/icons/svg/DeviceOmnicam').then(m => m.DeviceOmnicam),\n  DeviceSensor: () => import('@ds-mo/icons/svg/DeviceSensor').then(m => m.DeviceSensor),\n  DeviceTablet: () => import('@ds-mo/icons/svg/DeviceTablet').then(m => m.DeviceTablet),\n  DeviceVehicleGateway: () => import('@ds-mo/icons/svg/DeviceVehicleGateway').then(m => m.DeviceVehicleGateway),\n  Devices: () => import('@ds-mo/icons/svg/Devices').then(m => m.Devices),\n  Document: () => import('@ds-mo/icons/svg/Document').then(m => m.Document),\n  DocumentArrow: () => import('@ds-mo/icons/svg/DocumentArrow').then(m => m.DocumentArrow),\n  DocumentChart: () => import('@ds-mo/icons/svg/DocumentChart').then(m => m.DocumentChart),\n  DocumentDollar: () => import('@ds-mo/icons/svg/DocumentDollar').then(m => m.DocumentDollar),\n  DocumentGear: () => import('@ds-mo/icons/svg/DocumentGear').then(m => m.DocumentGear),\n  DocumentInverted: () => import('@ds-mo/icons/svg/DocumentInverted').then(m => m.DocumentInverted),\n  DocumentPencil: () => import('@ds-mo/icons/svg/DocumentPencil').then(m => m.DocumentPencil),\n  DocumentPlus: () => import('@ds-mo/icons/svg/DocumentPlus').then(m => m.DocumentPlus),\n  DocumentQuestion: () => import('@ds-mo/icons/svg/DocumentQuestion').then(m => m.DocumentQuestion),\n  DocumentReceipt: () => import('@ds-mo/icons/svg/DocumentReceipt').then(m => m.DocumentReceipt),\n  DocumentStacked: () => import('@ds-mo/icons/svg/DocumentStacked').then(m => m.DocumentStacked),\n  Dot: () => import('@ds-mo/icons/svg/Dot').then(m => m.Dot),\n  DotFilled: () => import('@ds-mo/icons/svg/DotFilled').then(m => m.DotFilled),\n  DotPath: () => import('@ds-mo/icons/svg/DotPath').then(m => m.DotPath),\n  Download: () => import('@ds-mo/icons/svg/Download').then(m => m.Download),\n  Drag: () => import('@ds-mo/icons/svg/Drag').then(m => m.Drag),\n  Ellipses: () => import('@ds-mo/icons/svg/Ellipses').then(m => m.Ellipses),\n  Email: () => import('@ds-mo/icons/svg/Email').then(m => m.Email),\n  Engine: () => import('@ds-mo/icons/svg/Engine').then(m => m.Engine),\n  Enter: () => import('@ds-mo/icons/svg/Enter').then(m => m.Enter),\n  EntityAsset: () => import('@ds-mo/icons/svg/EntityAsset').then(m => m.EntityAsset),\n  EntityAssetFilled: () => import('@ds-mo/icons/svg/EntityAssetFilled').then(m => m.EntityAssetFilled),\n  EntityDriver: () => import('@ds-mo/icons/svg/EntityDriver').then(m => m.EntityDriver),\n  EntityDriverFilled: () => import('@ds-mo/icons/svg/EntityDriverFilled').then(m => m.EntityDriverFilled),\n  EntityTravelGroup: () => import('@ds-mo/icons/svg/EntityTravelGroup').then(m => m.EntityTravelGroup),\n  EntityTravelGroupFilled: () => import('@ds-mo/icons/svg/EntityTravelGroupFilled').then(m => m.EntityTravelGroupFilled),\n  EntityVehicle: () => import('@ds-mo/icons/svg/EntityVehicle').then(m => m.EntityVehicle),\n  EntityVehicleCharging: () => import('@ds-mo/icons/svg/EntityVehicleCharging').then(m => m.EntityVehicleCharging),\n  EntityVehicleChargingFilled: () => import('@ds-mo/icons/svg/EntityVehicleChargingFilled').then(m => m.EntityVehicleChargingFilled),\n  EntityVehicleFilled: () => import('@ds-mo/icons/svg/EntityVehicleFilled').then(m => m.EntityVehicleFilled),\n  EntityVehicleImmobilized: () => import('@ds-mo/icons/svg/EntityVehicleImmobilized').then(m => m.EntityVehicleImmobilized),\n  EntityVehicleImmobilizedFilled: () => import('@ds-mo/icons/svg/EntityVehicleImmobilizedFilled').then(m => m.EntityVehicleImmobilizedFilled),\n  ErrorTriangle: () => import('@ds-mo/icons/svg/ErrorTriangle').then(m => m.ErrorTriangle),\n  ErrorTriangleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleFilled').then(m => m.ErrorTriangleFilled),\n  ErrorTriangleSimpleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleSimpleFilled').then(m => m.ErrorTriangleSimpleFilled),\n  Export: () => import('@ds-mo/icons/svg/Export').then(m => m.Export),\n  ExternalLink: () => import('@ds-mo/icons/svg/ExternalLink').then(m => m.ExternalLink),\n  Eye: () => import('@ds-mo/icons/svg/Eye').then(m => m.Eye),\n  EyeDisabled: () => import('@ds-mo/icons/svg/EyeDisabled').then(m => m.EyeDisabled),\n  EyeLock: () => import('@ds-mo/icons/svg/EyeLock').then(m => m.EyeLock),\n  FastForward: () => import('@ds-mo/icons/svg/FastForward').then(m => m.FastForward),\n  FastForwardSkip: () => import('@ds-mo/icons/svg/FastForwardSkip').then(m => m.FastForwardSkip),\n  Filters: () => import('@ds-mo/icons/svg/Filters').then(m => m.Filters),\n  FitToScreen: () => import('@ds-mo/icons/svg/FitToScreen').then(m => m.FitToScreen),\n  Flag: () => import('@ds-mo/icons/svg/Flag').then(m => m.Flag),\n  FlagFilled: () => import('@ds-mo/icons/svg/FlagFilled').then(m => m.FlagFilled),\n  FloppyDisk: () => import('@ds-mo/icons/svg/FloppyDisk').then(m => m.FloppyDisk),\n  Folder: () => import('@ds-mo/icons/svg/Folder').then(m => m.Folder),\n  FolderFilled: () => import('@ds-mo/icons/svg/FolderFilled').then(m => m.FolderFilled),\n  FuelPump: () => import('@ds-mo/icons/svg/FuelPump').then(m => m.FuelPump),\n  FullScreen: () => import('@ds-mo/icons/svg/FullScreen').then(m => m.FullScreen),\n  FullScreenExit: () => import('@ds-mo/icons/svg/FullScreenExit').then(m => m.FullScreenExit),\n  Gauge: () => import('@ds-mo/icons/svg/Gauge').then(m => m.Gauge),\n  GaugeTemperature: () => import('@ds-mo/icons/svg/GaugeTemperature').then(m => m.GaugeTemperature),\n  Gear: () => import('@ds-mo/icons/svg/Gear').then(m => m.Gear),\n  GearCheck: () => import('@ds-mo/icons/svg/GearCheck').then(m => m.GearCheck),\n  Geofence: () => import('@ds-mo/icons/svg/Geofence').then(m => m.Geofence),\n  GeofenceCircle: () => import('@ds-mo/icons/svg/GeofenceCircle').then(m => m.GeofenceCircle),\n  GeofenceDiamond: () => import('@ds-mo/icons/svg/GeofenceDiamond').then(m => m.GeofenceDiamond),\n  GeofenceSquare: () => import('@ds-mo/icons/svg/GeofenceSquare').then(m => m.GeofenceSquare),\n  GlobeNetwork: () => import('@ds-mo/icons/svg/GlobeNetwork').then(m => m.GlobeNetwork),\n  GlobeWorldMap: () => import('@ds-mo/icons/svg/GlobeWorldMap').then(m => m.GlobeWorldMap),\n  Graph: () => import('@ds-mo/icons/svg/Graph').then(m => m.Graph),\n  GraphArrow: () => import('@ds-mo/icons/svg/GraphArrow').then(m => m.GraphArrow),\n  GraphBars: () => import('@ds-mo/icons/svg/GraphBars').then(m => m.GraphBars),\n  GraphDecreasing: () => import('@ds-mo/icons/svg/GraphDecreasing').then(m => m.GraphDecreasing),\n  GraphIncreasing: () => import('@ds-mo/icons/svg/GraphIncreasing').then(m => m.GraphIncreasing),\n  GroupBy: () => import('@ds-mo/icons/svg/GroupBy').then(m => m.GroupBy),\n  Hamburger: () => import('@ds-mo/icons/svg/Hamburger').then(m => m.Hamburger),\n  HandHeart: () => import('@ds-mo/icons/svg/HandHeart').then(m => m.HandHeart),\n  HandOpen: () => import('@ds-mo/icons/svg/HandOpen').then(m => m.HandOpen),\n  Headset: () => import('@ds-mo/icons/svg/Headset').then(m => m.Headset),\n  History: () => import('@ds-mo/icons/svg/History').then(m => m.History),\n  HourGlass: () => import('@ds-mo/icons/svg/HourGlass').then(m => m.HourGlass),\n  Image: () => import('@ds-mo/icons/svg/Image').then(m => m.Image),\n  Import: () => import('@ds-mo/icons/svg/Import').then(m => m.Import),\n  ImportClock: () => import('@ds-mo/icons/svg/ImportClock').then(m => m.ImportClock),\n  Inbox: () => import('@ds-mo/icons/svg/Inbox').then(m => m.Inbox),\n  IosFilled: () => import('@ds-mo/icons/svg/IosFilled').then(m => m.IosFilled),\n  Jerrycan: () => import('@ds-mo/icons/svg/Jerrycan').then(m => m.Jerrycan),\n  KeyA: () => import('@ds-mo/icons/svg/KeyA').then(m => m.KeyA),\n  KeyB: () => import('@ds-mo/icons/svg/KeyB').then(m => m.KeyB),\n  KeyCmd: () => import('@ds-mo/icons/svg/KeyCmd').then(m => m.KeyCmd),\n  KeyShift: () => import('@ds-mo/icons/svg/KeyShift').then(m => m.KeyShift),\n  LED: () => import('@ds-mo/icons/svg/LED').then(m => m.LED),\n  Layers: () => import('@ds-mo/icons/svg/Layers').then(m => m.Layers),\n  Leaf: () => import('@ds-mo/icons/svg/Leaf').then(m => m.Leaf),\n  LeftCollapse: () => import('@ds-mo/icons/svg/LeftCollapse').then(m => m.LeftCollapse),\n  LeftCollapseB: () => import('@ds-mo/icons/svg/LeftCollapseB').then(m => m.LeftCollapseB),\n  LeftExpand: () => import('@ds-mo/icons/svg/LeftExpand').then(m => m.LeftExpand),\n  LeftExpandB: () => import('@ds-mo/icons/svg/LeftExpandB').then(m => m.LeftExpandB),\n  LeftTurnSignal: () => import('@ds-mo/icons/svg/LeftTurnSignal').then(m => m.LeftTurnSignal),\n  LetterB: () => import('@ds-mo/icons/svg/LetterB').then(m => m.LetterB),\n  LetterC: () => import('@ds-mo/icons/svg/LetterC').then(m => m.LetterC),\n  LetterI: () => import('@ds-mo/icons/svg/LetterI').then(m => m.LetterI),\n  License: () => import('@ds-mo/icons/svg/License').then(m => m.License),\n  LicensePlate: () => import('@ds-mo/icons/svg/LicensePlate').then(m => m.LicensePlate),\n  Lifebuoy: () => import('@ds-mo/icons/svg/Lifebuoy').then(m => m.Lifebuoy),\n  Link: () => import('@ds-mo/icons/svg/Link').then(m => m.Link),\n  List: () => import('@ds-mo/icons/svg/List').then(m => m.List),\n  Loads: () => import('@ds-mo/icons/svg/Loads').then(m => m.Loads),\n  LocationPin: () => import('@ds-mo/icons/svg/LocationPin').then(m => m.LocationPin),\n  LocationPinArrows: () => import('@ds-mo/icons/svg/LocationPinArrows').then(m => m.LocationPinArrows),\n  LocationPinDisabled: () => import('@ds-mo/icons/svg/LocationPinDisabled').then(m => m.LocationPinDisabled),\n  LocationPinDollar: () => import('@ds-mo/icons/svg/LocationPinDollar').then(m => m.LocationPinDollar),\n  LockClosed: () => import('@ds-mo/icons/svg/LockClosed').then(m => m.LockClosed),\n  LockClosedFilled: () => import('@ds-mo/icons/svg/LockClosedFilled').then(m => m.LockClosedFilled),\n  LockOpen: () => import('@ds-mo/icons/svg/LockOpen').then(m => m.LockOpen),\n  Logout: () => import('@ds-mo/icons/svg/Logout').then(m => m.Logout),\n  Logs: () => import('@ds-mo/icons/svg/Logs').then(m => m.Logs),\n  LogsMagnifyingGlass: () => import('@ds-mo/icons/svg/LogsMagnifyingGlass').then(m => m.LogsMagnifyingGlass),\n  MagnifyingGlass: () => import('@ds-mo/icons/svg/MagnifyingGlass').then(m => m.MagnifyingGlass),\n  MagnifyingGlassGraph: () => import('@ds-mo/icons/svg/MagnifyingGlassGraph').then(m => m.MagnifyingGlassGraph),\n  MagnifyingGlassZoomIn: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomIn').then(m => m.MagnifyingGlassZoomIn),\n  MagnifyingGlassZoomOut: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomOut').then(m => m.MagnifyingGlassZoomOut),\n  MapNavigation: () => import('@ds-mo/icons/svg/MapNavigation').then(m => m.MapNavigation),\n  MapPage: () => import('@ds-mo/icons/svg/MapPage').then(m => m.MapPage),\n  MapPin: () => import('@ds-mo/icons/svg/MapPin').then(m => m.MapPin),\n  MarkRead: () => import('@ds-mo/icons/svg/MarkRead').then(m => m.MarkRead),\n  Match: () => import('@ds-mo/icons/svg/Match').then(m => m.Match),\n  MessageBubble: () => import('@ds-mo/icons/svg/MessageBubble').then(m => m.MessageBubble),\n  MessageBubbleStack: () => import('@ds-mo/icons/svg/MessageBubbleStack').then(m => m.MessageBubbleStack),\n  Messaging: () => import('@ds-mo/icons/svg/Messaging').then(m => m.Messaging),\n  Mic: () => import('@ds-mo/icons/svg/Mic').then(m => m.Mic),\n  MicMute: () => import('@ds-mo/icons/svg/MicMute').then(m => m.MicMute),\n  Minimize: () => import('@ds-mo/icons/svg/Minimize').then(m => m.Minimize),\n  Monitor: () => import('@ds-mo/icons/svg/Monitor').then(m => m.Monitor),\n  Notification: () => import('@ds-mo/icons/svg/Notification').then(m => m.Notification),\n  NumberTen: () => import('@ds-mo/icons/svg/NumberTen').then(m => m.NumberTen),\n  OctagonSubtract: () => import('@ds-mo/icons/svg/OctagonSubtract').then(m => m.OctagonSubtract),\n  Odometer: () => import('@ds-mo/icons/svg/Odometer').then(m => m.Odometer),\n  OverviewAI: () => import('@ds-mo/icons/svg/OverviewAI').then(m => m.OverviewAI),\n  PanelCollapse: () => import('@ds-mo/icons/svg/PanelCollapse').then(m => m.PanelCollapse),\n  PanelExpand: () => import('@ds-mo/icons/svg/PanelExpand').then(m => m.PanelExpand),\n  Paperclip: () => import('@ds-mo/icons/svg/Paperclip').then(m => m.Paperclip),\n  PaperplaneSend: () => import('@ds-mo/icons/svg/PaperplaneSend').then(m => m.PaperplaneSend),\n  Paragraph: () => import('@ds-mo/icons/svg/Paragraph').then(m => m.Paragraph),\n  ParagraphCheck: () => import('@ds-mo/icons/svg/ParagraphCheck').then(m => m.ParagraphCheck),\n  ParagraphPencil: () => import('@ds-mo/icons/svg/ParagraphPencil').then(m => m.ParagraphPencil),\n  Pause: () => import('@ds-mo/icons/svg/Pause').then(m => m.Pause),\n  PauseFilled: () => import('@ds-mo/icons/svg/PauseFilled').then(m => m.PauseFilled),\n  Pencil: () => import('@ds-mo/icons/svg/Pencil').then(m => m.Pencil),\n  PencilSquiggle: () => import('@ds-mo/icons/svg/PencilSquiggle').then(m => m.PencilSquiggle),\n  Person: () => import('@ds-mo/icons/svg/Person').then(m => m.Person),\n  PersonAt: () => import('@ds-mo/icons/svg/PersonAt').then(m => m.PersonAt),\n  PersonConnect: () => import('@ds-mo/icons/svg/PersonConnect').then(m => m.PersonConnect),\n  PersonFrame: () => import('@ds-mo/icons/svg/PersonFrame').then(m => m.PersonFrame),\n  PersonGear: () => import('@ds-mo/icons/svg/PersonGear').then(m => m.PersonGear),\n  PersonGroup: () => import('@ds-mo/icons/svg/PersonGroup').then(m => m.PersonGroup),\n  PersonGroupArrows: () => import('@ds-mo/icons/svg/PersonGroupArrows').then(m => m.PersonGroupArrows),\n  PersonManager: () => import('@ds-mo/icons/svg/PersonManager').then(m => m.PersonManager),\n  PersonShield: () => import('@ds-mo/icons/svg/PersonShield').then(m => m.PersonShield),\n  PersonStar: () => import('@ds-mo/icons/svg/PersonStar').then(m => m.PersonStar),\n  Phone: () => import('@ds-mo/icons/svg/Phone').then(m => m.Phone),\n  PhoneDisconnect: () => import('@ds-mo/icons/svg/PhoneDisconnect').then(m => m.PhoneDisconnect),\n  PicmanFilled: () => import('@ds-mo/icons/svg/PicmanFilled').then(m => m.PicmanFilled),\n  Pin: () => import('@ds-mo/icons/svg/Pin').then(m => m.Pin),\n  PipBottomLeft: () => import('@ds-mo/icons/svg/PipBottomLeft').then(m => m.PipBottomLeft),\n  PipBottomRight: () => import('@ds-mo/icons/svg/PipBottomRight').then(m => m.PipBottomRight),\n  PipTopLeft: () => import('@ds-mo/icons/svg/PipTopLeft').then(m => m.PipTopLeft),\n  PipTopRight: () => import('@ds-mo/icons/svg/PipTopRight').then(m => m.PipTopRight),\n  Play: () => import('@ds-mo/icons/svg/Play').then(m => m.Play),\n  PlayFilled: () => import('@ds-mo/icons/svg/PlayFilled').then(m => m.PlayFilled),\n  Plug: () => import('@ds-mo/icons/svg/Plug').then(m => m.Plug),\n  Plus: () => import('@ds-mo/icons/svg/Plus').then(m => m.Plus),\n  PlusCircle: () => import('@ds-mo/icons/svg/PlusCircle').then(m => m.PlusCircle),\n  Preferences: () => import('@ds-mo/icons/svg/Preferences').then(m => m.Preferences),\n  Printer: () => import('@ds-mo/icons/svg/Printer').then(m => m.Printer),\n  PunchCard: () => import('@ds-mo/icons/svg/PunchCard').then(m => m.PunchCard),\n  Puzzle: () => import('@ds-mo/icons/svg/Puzzle').then(m => m.Puzzle),\n  PuzzleJoined: () => import('@ds-mo/icons/svg/PuzzleJoined').then(m => m.PuzzleJoined),\n  Redo: () => import('@ds-mo/icons/svg/Redo').then(m => m.Redo),\n  Refresh: () => import('@ds-mo/icons/svg/Refresh').then(m => m.Refresh),\n  Restore: () => import('@ds-mo/icons/svg/Restore').then(m => m.Restore),\n  RewardRibbon: () => import('@ds-mo/icons/svg/RewardRibbon').then(m => m.RewardRibbon),\n  Rewind: () => import('@ds-mo/icons/svg/Rewind').then(m => m.Rewind),\n  RewindSkip: () => import('@ds-mo/icons/svg/RewindSkip').then(m => m.RewindSkip),\n  RewindSkipFilled: () => import('@ds-mo/icons/svg/RewindSkipFilled').then(m => m.RewindSkipFilled),\n  RightCollapse: () => import('@ds-mo/icons/svg/RightCollapse').then(m => m.RightCollapse),\n  RightCollapseB: () => import('@ds-mo/icons/svg/RightCollapseB').then(m => m.RightCollapseB),\n  RightExpand: () => import('@ds-mo/icons/svg/RightExpand').then(m => m.RightExpand),\n  RightExpandB: () => import('@ds-mo/icons/svg/RightExpandB').then(m => m.RightExpandB),\n  RightTurnSignal: () => import('@ds-mo/icons/svg/RightTurnSignal').then(m => m.RightTurnSignal),\n  Rotate: () => import('@ds-mo/icons/svg/Rotate').then(m => m.Rotate),\n  Satellite: () => import('@ds-mo/icons/svg/Satellite').then(m => m.Satellite),\n  Scan: () => import('@ds-mo/icons/svg/Scan').then(m => m.Scan),\n  Scissor: () => import('@ds-mo/icons/svg/Scissor').then(m => m.Scissor),\n  Scope: () => import('@ds-mo/icons/svg/Scope').then(m => m.Scope),\n  Seatbelt: () => import('@ds-mo/icons/svg/Seatbelt').then(m => m.Seatbelt),\n  SeatbeltBuckle: () => import('@ds-mo/icons/svg/SeatbeltBuckle').then(m => m.SeatbeltBuckle),\n  Shapes: () => import('@ds-mo/icons/svg/Shapes').then(m => m.Shapes),\n  ShareCircles: () => import('@ds-mo/icons/svg/ShareCircles').then(m => m.ShareCircles),\n  ShareCirclesFilled: () => import('@ds-mo/icons/svg/ShareCirclesFilled').then(m => m.ShareCirclesFilled),\n  SharePaperplane: () => import('@ds-mo/icons/svg/SharePaperplane').then(m => m.SharePaperplane),\n  Shield: () => import('@ds-mo/icons/svg/Shield').then(m => m.Shield),\n  ShieldCheck: () => import('@ds-mo/icons/svg/ShieldCheck').then(m => m.ShieldCheck),\n  ShieldCheckmarkFilled: () => import('@ds-mo/icons/svg/ShieldCheckmarkFilled').then(m => m.ShieldCheckmarkFilled),\n  ShieldCircle: () => import('@ds-mo/icons/svg/ShieldCircle').then(m => m.ShieldCircle),\n  ShieldCircleFilled: () => import('@ds-mo/icons/svg/ShieldCircleFilled').then(m => m.ShieldCircleFilled),\n  ShieldCross: () => import('@ds-mo/icons/svg/ShieldCross').then(m => m.ShieldCross),\n  ShieldCrossFilled: () => import('@ds-mo/icons/svg/ShieldCrossFilled').then(m => m.ShieldCrossFilled),\n  ShieldFilled: () => import('@ds-mo/icons/svg/ShieldFilled').then(m => m.ShieldFilled),\n  ShieldLock: () => import('@ds-mo/icons/svg/ShieldLock').then(m => m.ShieldLock),\n  ShieldLockFilled: () => import('@ds-mo/icons/svg/ShieldLockFilled').then(m => m.ShieldLockFilled),\n  ShoppingBag: () => import('@ds-mo/icons/svg/ShoppingBag').then(m => m.ShoppingBag),\n  Snowflake: () => import('@ds-mo/icons/svg/Snowflake').then(m => m.Snowflake),\n  SpeakerPhone: () => import('@ds-mo/icons/svg/SpeakerPhone').then(m => m.SpeakerPhone),\n  SpeedometerArrow: () => import('@ds-mo/icons/svg/SpeedometerArrow').then(m => m.SpeedometerArrow),\n  SpeedometerLeft: () => import('@ds-mo/icons/svg/SpeedometerLeft').then(m => m.SpeedometerLeft),\n  SpeedometerRight: () => import('@ds-mo/icons/svg/SpeedometerRight').then(m => m.SpeedometerRight),\n  SpikeCirclePercentage: () => import('@ds-mo/icons/svg/SpikeCirclePercentage').then(m => m.SpikeCirclePercentage),\n  SpikeCirclePercentageFilled: () => import('@ds-mo/icons/svg/SpikeCirclePercentageFilled').then(m => m.SpikeCirclePercentageFilled),\n  Square: () => import('@ds-mo/icons/svg/Square').then(m => m.Square),\n  SquareArrowTopRight: () => import('@ds-mo/icons/svg/SquareArrowTopRight').then(m => m.SquareArrowTopRight),\n  SquareCheck: () => import('@ds-mo/icons/svg/SquareCheck').then(m => m.SquareCheck),\n  SquareCheckFilled: () => import('@ds-mo/icons/svg/SquareCheckFilled').then(m => m.SquareCheckFilled),\n  SquareDollar: () => import('@ds-mo/icons/svg/SquareDollar').then(m => m.SquareDollar),\n  SquareDollarFilled: () => import('@ds-mo/icons/svg/SquareDollarFilled').then(m => m.SquareDollarFilled),\n  SquareDottedMinus: () => import('@ds-mo/icons/svg/SquareDottedMinus').then(m => m.SquareDottedMinus),\n  SquareFilled: () => import('@ds-mo/icons/svg/SquareFilled').then(m => m.SquareFilled),\n  SquareGrid: () => import('@ds-mo/icons/svg/SquareGrid').then(m => m.SquareGrid),\n  SquarePencil: () => import('@ds-mo/icons/svg/SquarePencil').then(m => m.SquarePencil),\n  SquarePlus: () => import('@ds-mo/icons/svg/SquarePlus').then(m => m.SquarePlus),\n  SquareSubtract: () => import('@ds-mo/icons/svg/SquareSubtract').then(m => m.SquareSubtract),\n  SquareSubtractFilled: () => import('@ds-mo/icons/svg/SquareSubtractFilled').then(m => m.SquareSubtractFilled),\n  Star: () => import('@ds-mo/icons/svg/Star').then(m => m.Star),\n  StarFilled: () => import('@ds-mo/icons/svg/StarFilled').then(m => m.StarFilled),\n  Stopwatch: () => import('@ds-mo/icons/svg/Stopwatch').then(m => m.Stopwatch),\n  Street: () => import('@ds-mo/icons/svg/Street').then(m => m.Street),\n  Subtract: () => import('@ds-mo/icons/svg/Subtract').then(m => m.Subtract),\n  SubtractCircle: () => import('@ds-mo/icons/svg/SubtractCircle').then(m => m.SubtractCircle),\n  SubtractCircleFilled: () => import('@ds-mo/icons/svg/SubtractCircleFilled').then(m => m.SubtractCircleFilled),\n  Table: () => import('@ds-mo/icons/svg/Table').then(m => m.Table),\n  Tag: () => import('@ds-mo/icons/svg/Tag').then(m => m.Tag),\n  Target: () => import('@ds-mo/icons/svg/Target').then(m => m.Target),\n  TargetDollar: () => import('@ds-mo/icons/svg/TargetDollar').then(m => m.TargetDollar),\n  Text: () => import('@ds-mo/icons/svg/Text').then(m => m.Text),\n  ThemeDark: () => import('@ds-mo/icons/svg/ThemeDark').then(m => m.ThemeDark),\n  ThemeLight: () => import('@ds-mo/icons/svg/ThemeLight').then(m => m.ThemeLight),\n  ThumbsDown: () => import('@ds-mo/icons/svg/ThumbsDown').then(m => m.ThumbsDown),\n  ThumbsDownFilled: () => import('@ds-mo/icons/svg/ThumbsDownFilled').then(m => m.ThumbsDownFilled),\n  ThumbsUp: () => import('@ds-mo/icons/svg/ThumbsUp').then(m => m.ThumbsUp),\n  ThumbsUpFilled: () => import('@ds-mo/icons/svg/ThumbsUpFilled').then(m => m.ThumbsUpFilled),\n  TirePressure: () => import('@ds-mo/icons/svg/TirePressure').then(m => m.TirePressure),\n  Toggle: () => import('@ds-mo/icons/svg/Toggle').then(m => m.Toggle),\n  TrafficLight: () => import('@ds-mo/icons/svg/TrafficLight').then(m => m.TrafficLight),\n  Trash: () => import('@ds-mo/icons/svg/Trash').then(m => m.Trash),\n  Trophy: () => import('@ds-mo/icons/svg/Trophy').then(m => m.Trophy),\n  TurnSignal: () => import('@ds-mo/icons/svg/TurnSignal').then(m => m.TurnSignal),\n  TurnSignalFilled: () => import('@ds-mo/icons/svg/TurnSignalFilled').then(m => m.TurnSignalFilled),\n  Undo: () => import('@ds-mo/icons/svg/Undo').then(m => m.Undo),\n  Upgrade: () => import('@ds-mo/icons/svg/Upgrade').then(m => m.Upgrade),\n  Upload: () => import('@ds-mo/icons/svg/Upload').then(m => m.Upload),\n  VehicleTrailer: () => import('@ds-mo/icons/svg/VehicleTrailer').then(m => m.VehicleTrailer),\n  VehicleTruck: () => import('@ds-mo/icons/svg/VehicleTruck').then(m => m.VehicleTruck),\n  VehicleTruckMagnifyingGlass: () => import('@ds-mo/icons/svg/VehicleTruckMagnifyingGlass').then(m => m.VehicleTruckMagnifyingGlass),\n  Video: () => import('@ds-mo/icons/svg/Video').then(m => m.Video),\n  ViewMenu: () => import('@ds-mo/icons/svg/ViewMenu').then(m => m.ViewMenu),\n  Volume: () => import('@ds-mo/icons/svg/Volume').then(m => m.Volume),\n  VolumeFilled: () => import('@ds-mo/icons/svg/VolumeFilled').then(m => m.VolumeFilled),\n  VolumeMute: () => import('@ds-mo/icons/svg/VolumeMute').then(m => m.VolumeMute),\n  VolumeMuteFilled: () => import('@ds-mo/icons/svg/VolumeMuteFilled').then(m => m.VolumeMuteFilled),\n  WandSparkle: () => import('@ds-mo/icons/svg/WandSparkle').then(m => m.WandSparkle),\n  Waveform: () => import('@ds-mo/icons/svg/Waveform').then(m => m.Waveform),\n  Webhooks: () => import('@ds-mo/icons/svg/Webhooks').then(m => m.Webhooks),\n  Whistle: () => import('@ds-mo/icons/svg/Whistle').then(m => m.Whistle),\n  WifiHorizontal: () => import('@ds-mo/icons/svg/WifiHorizontal').then(m => m.WifiHorizontal),\n  WifiTower: () => import('@ds-mo/icons/svg/WifiTower').then(m => m.WifiTower),\n  WifiVertical: () => import('@ds-mo/icons/svg/WifiVertical').then(m => m.WifiVertical),\n  WifiVerticalFilled: () => import('@ds-mo/icons/svg/WifiVerticalFilled').then(m => m.WifiVerticalFilled),\n  WifiVerticalFilledDisabled: () => import('@ds-mo/icons/svg/WifiVerticalFilledDisabled').then(m => m.WifiVerticalFilledDisabled),\n  WorkflowA: () => import('@ds-mo/icons/svg/WorkflowA').then(m => m.WorkflowA),\n  WorkflowB: () => import('@ds-mo/icons/svg/WorkflowB').then(m => m.WorkflowB),\n  Wrench: () => import('@ds-mo/icons/svg/Wrench').then(m => m.Wrench),\n  ZoomBackOut: () => import('@ds-mo/icons/svg/ZoomBackOut').then(m => m.ZoomBackOut),\n};\n",
       "type": "registry:ui"
     }
   ]

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

@@ -566,7 +566,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -166,7 +166,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -113,7 +113,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -129,7 +129,7 @@
   "files": [
     {
       "path": "src/wc/components/Markdown/Markdown.css",
-      "content": ":host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n}\n\n.markdown {\n  min-width: 0;\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  overflow-wrap: anywhere;\n}\n\n.markdown > :first-child {\n  margin-top: 0;\n}\n\n.markdown > :last-child {\n  margin-bottom: 0;\n}\n\np,\nul,\nol,\nblockquote,\n.markdown__table-wrap,\nds-code-block {\n  margin: 0 0 var(--dimension-space-150);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: var(--dimension-space-200) 0 var(--dimension-space-100);\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-weight: var(--typography-weight-semibold);\n}\n\nh1,\nh2 {\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n}\n\nh3,\nh4,\nh5,\nh6 {\n  font-size: var(--typography-fontsize-lg);\n  line-height: var(--typography-lineheight-lg);\n}\n\nul,\nol {\n  padding-left: var(--dimension-space-300);\n}\n\nli + li {\n  margin-top: var(--dimension-space-050);\n}\n\nli > input {\n  margin-right: var(--dimension-space-050);\n}\n\nblockquote {\n  padding-left: var(--dimension-space-150);\n  border-left: var(--dimension-stroke-width-025) solid var(--color-border-secondary);\n  color: var(--color-foreground-secondary);\n}\n\na {\n  color: var(--color-foreground-brand);\n  text-decoration: underline;\n}\n\ncode:not(ds-code-block code) {\n  padding: var(--dimension-space-012) var(--dimension-space-025);\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-secondary);\n  font-family: var(--typography-fontfamily-mono);\n  font-size: var(--typography-fontsize-sm);\n}\n\nhr {\n  margin: var(--dimension-space-200) 0;\n  border: none;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.markdown__table-wrap {\n  overflow-x: auto;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth,\ntd {\n  padding: var(--dimension-space-075);\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  text-align: left;\n  vertical-align: top;\n}\n\nth {\n  font-weight: var(--typography-weight-semibold);\n}\n",
+      "content": ":host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.markdown {\n  min-width: 0;\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  overflow-wrap: anywhere;\n}\n\n.markdown > :first-child {\n  margin-top: 0;\n}\n\n.markdown > :last-child {\n  margin-bottom: 0;\n}\n\np,\nul,\nol,\nblockquote,\n.markdown__table-wrap,\nds-code-block {\n  margin: 0 0 var(--dimension-space-150);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: var(--dimension-space-200) 0 var(--dimension-space-100);\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-weight: var(--typography-weight-semibold);\n}\n\nh1,\nh2 {\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n}\n\nh3,\nh4,\nh5,\nh6 {\n  font-size: var(--typography-fontsize-lg);\n  line-height: var(--typography-lineheight-lg);\n}\n\nul,\nol {\n  padding-left: var(--dimension-space-300);\n}\n\nli + li {\n  margin-top: var(--dimension-space-050);\n}\n\nli > input {\n  margin-right: var(--dimension-space-050);\n}\n\nblockquote {\n  padding-left: var(--dimension-space-150);\n  border-left: var(--dimension-stroke-width-025) solid var(--color-border-secondary);\n  color: var(--color-foreground-secondary);\n}\n\na {\n  color: var(--color-foreground-brand);\n  text-decoration: underline;\n}\n\ncode:not(ds-code-block code) {\n  padding: var(--dimension-space-012) var(--dimension-space-025);\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-secondary);\n  font-family: var(--typography-fontfamily-mono);\n  font-size: var(--typography-fontsize-sm);\n}\n\nhr {\n  margin: var(--dimension-space-200) 0;\n  border: none;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.markdown__table-wrap {\n  overflow-x: auto;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth,\ntd {\n  padding: var(--dimension-space-075);\n  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  text-align: left;\n  vertical-align: top;\n}\n\nth {\n  font-weight: var(--typography-weight-semibold);\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -218,6 +218,14 @@
         }
       },
       "events": [
+        {
+          "name": "dsAfterClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after the popup's exit motion is complete and its rendered content is removed."
+        },
         {
           "name": "dsClose",
           "detail": "void",
@@ -376,6 +384,14 @@
       }
     },
     "events": [
+      {
+        "name": "dsAfterClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after the popup's exit motion is complete and its rendered content is removed."
+      },
       {
         "name": "dsClose",
         "detail": "void",
@@ -433,7 +449,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -457,7 +473,7 @@
     },
     {
       "path": "src/wc/components/Menu/Menu.tsx",
-      "content": "import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  choicePopupMinWidth,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n} from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\n\nexport type MenuSelectionMode = 'none' | 'single';\nimport {\n  isMenuGradientPickerSection,\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n} from './menu-types';\nimport {\n  shellGradientPickerSections,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** Give ordinary rows mutually-exclusive radio-menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n  @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a `gradient-picker` section swatch is chosen. */\n  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.listenersReady = true;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('anchorAlignment')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      | (HTMLElement & { setFocus?: () => Promise<void> | void })\n      | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n    const sectionInsetPx = this.viewportPadPx;\n    if (!this.minWidth) {\n      if (\n        this.anchorAlignment === 'choice-cell' &&\n        (this.side === 'top' || this.side === 'bottom')\n      ) {\n        popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n          anchorRect.width,\n          sectionInsetPx\n        )}px)`;\n      } else {\n        popup.style.removeProperty('min-width');\n      }\n    }\n\n    this.pos = computeMenuPosition({\n      anchorRect,\n      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: resolveChoicePopupAlignOffset({\n        align: this.align,\n        alignOffsetPx: this.alignOffsetPx,\n        sectionInsetPx,\n        anchorAlignment: this.anchorAlignment,\n      }),\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (this.hasCompositeSections) {\n      requestAnimationFrame(() => {\n        this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n      });\n      return;\n    }\n\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => {\n      if (this.shouldRender && !this.closing) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive)\n      .map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n  }\n\n  private handleGradientSelect(preset: ShellGradientPreset) {\n    this.dsGradientSelect.emit(preset);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{\n            'menu-popup': true,\n            'menu-popup--closing': this.closing,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role={this.hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={this.hasCompositeSections ? undefined : 'vertical'}\n        >\n          <div class=\"ds-choice-list\">\n            {sections.map((section, si) => (\n              <div\n                key={si}\n                class={{\n                  'menu-section': true,\n                  'menu-section--divided': si < sections.length - 1,\n                  'menu-section--gradient-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                }}\n                role={section.header ? 'group' : undefined}\n                aria-label={section.header}\n              >\n                {section.header && (\n                  <ds-text\n                    class=\"section-header ds-choice-section__header ds-control--md\"\n                    as=\"span\"\n                    variant=\"text-body-small\"\n                    emphasis\n                    color=\"primary\"\n                    aria-hidden=\"true\"\n                  >\n                    {section.header}\n                  </ds-text>\n                )}\n                {isMenuGradientPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.header ?? 'Shell gradient theme'}\n                    sections={shellGradientPickerSections()}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleGradientSelect(e.detail as ShellGradientPreset);\n                    }}\n                  />\n                ) : isMenuSwatchPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n                    options={section.options ?? []}\n                    sections={section.sections ?? []}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleSwatchSelect(e.detail);\n                    }}\n                  />\n                ) : (\n                  section.items.map(item => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isRadioItem =\n                      !this.hasCompositeSections &&\n                      this.selectionMode === 'single' &&\n                      !item.showSwitch;\n                    return (\n                      <button\n                        key={idx}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control--md': true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !item.isInactive,\n                          'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                          'menu-item--selected': !!item.isSelected,\n                          'ds-control-inactive': !!item.isInactive,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                        }}\n                        role={\n                          this.hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                            ? 'menuitemcheckbox'\n                            : isRadioItem\n                            ? 'menuitemradio'\n                            : 'menuitem'\n                        }\n                        aria-checked={\n                          !this.hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isRadioItem\n                            ? String(!!item.isSelected)\n                            : undefined\n                        }\n                        aria-pressed={\n                          this.hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !this.hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isRadioItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        disabled={item.isInactive}\n                        tabIndex={this.hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                        onMouseDown={() => {\n                          this.focusRingVisible = false;\n                        }}\n                        onClick={() => this.handleItemClick(item)}\n                        onFocus={() => {\n                          this.focusedIndex = idx;\n                        }}\n                      >\n                        {isRadioItem && (\n                          <span\n                            class=\"menu-item__radio-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <span\n                              class={{\n                                'menu-item__radio': true,\n                                'menu-item__radio--checked': !!item.isSelected,\n                              }}\n                            >\n                              {item.isSelected && <span class=\"menu-item__radio-dot\" />}\n                            </span>\n                          </span>\n                        )}\n                        <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n                          <ds-text\n                            class=\"menu-item__label ds-choice-item__label\"\n                            as=\"span\"\n                            variant=\"text-body-medium\"\n                            color={item.isSelected ? 'primary' : 'secondary'}\n                          >\n                            {item.label}\n                          </ds-text>\n                          {item.subtext && (\n                            <ds-text\n                              class=\"menu-item__subtext ds-choice-item__subtext\"\n                              as=\"span\"\n                              variant=\"text-body-small\"\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.dot && (\n                          <span\n                            class=\"menu-item__dot-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-badge\n                              class=\"menu-item__dot\"\n                              variant=\"dot\"\n                              hasRing={false}\n                              label=\"\"\n                            />\n                          </span>\n                        )}\n                        {item.showSwitch && (\n                          <ds-switch\n                            class=\"menu-item__switch ds-interaction-fill__content\"\n                            size=\"md\"\n                            checked={!!item.switchValue}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  choicePopupMinWidth,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n} from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\n\nexport type MenuSelectionMode = 'none' | 'single';\nimport {\n  isMenuGradientPickerSection,\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n} from './menu-types';\nimport {\n  shellGradientPickerSections,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nfunction snapshotMenuSections(sections: MenuSection[]): MenuSection[] {\n  return sections.map(section => {\n    if (isMenuGradientPickerSection(section)) return { ...section };\n    if (isMenuSwatchPickerSection(section)) {\n      return {\n        ...section,\n        options: section.options?.map(option => ({ ...option })),\n        sections: section.sections?.map(swatchSection => ({\n          ...swatchSection,\n          options: swatchSection.options.map(option => ({ ...option })),\n        })),\n      };\n    }\n    return { ...section, items: section.items.map(item => ({ ...item })) };\n  });\n}\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** Give ordinary rows mutually-exclusive radio-menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n  @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a `gradient-picker` section swatch is chosen. */\n  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n  /** Last content actually painted while open; retained unchanged through exit motion. */\n  private lastRenderedSections: MenuSection[] = [];\n  private closingSections: MenuSection[] | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSections = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.listenersReady = true;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.captureClosingSections();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('anchorAlignment')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n    this.lastRenderedSections = [];\n    this.closingSections = null;\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSections() {\n    if (this.closingSections) return;\n    const visibleSections = this.lastRenderedSections.length\n      ? this.lastRenderedSections\n      : this.activeSections;\n    this.closingSections = snapshotMenuSections(visibleSections);\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      | (HTMLElement & { setFocus?: () => Promise<void> | void })\n      | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n    const sectionInsetPx = this.viewportPadPx;\n    if (!this.minWidth) {\n      if (\n        this.anchorAlignment === 'choice-cell' &&\n        (this.side === 'top' || this.side === 'bottom')\n      ) {\n        popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n          anchorRect.width,\n          sectionInsetPx\n        )}px)`;\n      } else {\n        popup.style.removeProperty('min-width');\n      }\n    }\n\n    this.pos = computeMenuPosition({\n      anchorRect,\n      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: resolveChoicePopupAlignOffset({\n        align: this.align,\n        alignOffsetPx: this.alignOffsetPx,\n        sectionInsetPx,\n        anchorAlignment: this.anchorAlignment,\n      }),\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (this.hasCompositeSections) {\n      requestAnimationFrame(() => {\n        this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n      });\n      return;\n    }\n\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => {\n      if (this.shouldRender && !this.closing) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSections();\n    if (restoreFocus) this.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive)\n      .map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    // Consumers commonly change the item source while handling selection.\n    // Capture first so the exit animation never paints the next menu context.\n    this.captureClosingSections();\n    this.dsSelect.emit(item);\n  }\n\n  private handleGradientSelect(preset: ShellGradientPreset) {\n    this.dsGradientSelect.emit(preset);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.closing\n      ? (this.closingSections ?? this.lastRenderedSections)\n      : this.activeSections;\n    const hasCompositeSections = sections.some(isMenuPickerSection);\n    if (!this.closing) {\n      this.lastRenderedSections = snapshotMenuSections(sections);\n      this.closingSections = null;\n    }\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{\n            'menu-popup': true,\n            'menu-popup--closing': this.closing,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role={hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n        >\n          <div class=\"ds-choice-list\">\n            {sections.map((section, si) => (\n              <div\n                key={si}\n                class={{\n                  'menu-section': true,\n                  'menu-section--divided': si < sections.length - 1,\n                  'menu-section--gradient-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                }}\n                role={section.header ? 'group' : undefined}\n                aria-label={section.header}\n              >\n                {section.header && (\n                  <ds-text\n                    class=\"section-header ds-choice-section__header ds-control--md\"\n                    as=\"span\"\n                    variant=\"text-body-small\"\n                    emphasis\n                    color=\"primary\"\n                    aria-hidden=\"true\"\n                  >\n                    {section.header}\n                  </ds-text>\n                )}\n                {isMenuGradientPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.header ?? 'Shell gradient theme'}\n                    sections={shellGradientPickerSections()}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleGradientSelect(e.detail as ShellGradientPreset);\n                    }}\n                  />\n                ) : isMenuSwatchPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n                    options={section.options ?? []}\n                    sections={section.sections ?? []}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleSwatchSelect(e.detail);\n                    }}\n                  />\n                ) : (\n                  section.items.map(item => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isRadioItem =\n                      !hasCompositeSections &&\n                      this.selectionMode === 'single' &&\n                      !item.showSwitch;\n                    return (\n                      <button\n                        key={idx}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control--md': true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !item.isInactive,\n                          'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                          'menu-item--selected': !!item.isSelected,\n                          'ds-control-inactive': !!item.isInactive,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                        }}\n                        role={\n                          hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                            ? 'menuitemcheckbox'\n                            : isRadioItem\n                            ? 'menuitemradio'\n                            : 'menuitem'\n                        }\n                        aria-checked={\n                          !hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isRadioItem\n                            ? String(!!item.isSelected)\n                            : undefined\n                        }\n                        aria-pressed={\n                          hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isRadioItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        disabled={item.isInactive}\n                        tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                        onMouseDown={() => {\n                          this.focusRingVisible = false;\n                        }}\n                        onClick={() => this.handleItemClick(item)}\n                        onFocus={() => {\n                          this.focusedIndex = idx;\n                        }}\n                      >\n                        {isRadioItem && (\n                          <span\n                            class=\"menu-item__radio-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <span\n                              class={{\n                                'menu-item__radio': true,\n                                'menu-item__radio--checked': !!item.isSelected,\n                              }}\n                            >\n                              {item.isSelected && <span class=\"menu-item__radio-dot\" />}\n                            </span>\n                          </span>\n                        )}\n                        <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n                          <ds-text\n                            class=\"menu-item__label ds-choice-item__label\"\n                            as=\"span\"\n                            variant=\"text-body-medium\"\n                            color={item.isSelected ? 'primary' : 'secondary'}\n                          >\n                            {item.label}\n                          </ds-text>\n                          {item.subtext && (\n                            <ds-text\n                              class=\"menu-item__subtext ds-choice-item__subtext\"\n                              as=\"span\"\n                              variant=\"text-body-small\"\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.dot && (\n                          <span\n                            class=\"menu-item__dot-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-badge\n                              class=\"menu-item__dot\"\n                              variant=\"dot\"\n                              hasRing={false}\n                              label=\"\"\n                            />\n                          </span>\n                        )}\n                        {item.showSwitch && (\n                          <ds-switch\n                            class=\"menu-item__switch ds-interaction-fill__content\"\n                            size=\"md\"\n                            checked={!!item.switchValue}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/message-bubble.json

@@ -15,7 +15,7 @@
       "status": "experimental",
       "summary": "Visible message content surface with a body-medium default, separated from message-row direction and metadata.",
       "useWhen": [
-        "Message content needs a primary, secondary, ghost, or error surface within a Message row.",
+        "Message content needs a primary, secondary, or ghost surface within a Message row.",
         "Plain incoming or outgoing message copy should use the shared body-medium regular typography recipe without application styling."
       ],
       "avoidWhen": [
@@ -30,7 +30,7 @@
         "pattern:conversation"
       ],
       "accessibility": [
-        "Surface styling does not add semantics; meaningful error or status copy belongs in message content or metadata."
+        "Surface styling does not add semantics; failed delivery belongs in Message metadata below the unchanged bubble rather than in an error bubble treatment."
       ],
       "responsiveBehavior": [
         "The bubble wraps content and allows wide ghost responses to use more transcript width."
@@ -46,7 +46,7 @@
       "props": {
         "variant": {
           "type": "MessageBubbleVariant",
-          "resolvedType": "\"error\" | \"ghost\" | \"primary\" | \"secondary\"",
+          "resolvedType": "\"ghost\" | \"primary\" | \"secondary\"",
           "attribute": "variant",
           "default": "'secondary'",
           "required": false,
@@ -60,7 +60,7 @@
     "props": {
       "variant": {
         "type": "MessageBubbleVariant",
-        "resolvedType": "\"error\" | \"ghost\" | \"primary\" | \"secondary\"",
+        "resolvedType": "\"ghost\" | \"primary\" | \"secondary\"",
         "attribute": "variant",
         "default": "'secondary'",
         "required": false,
@@ -93,7 +93,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -107,12 +107,12 @@
   "files": [
     {
       "path": "src/wc/components/MessageBubble/MessageBubble.css",
-      "content": ":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n}\n\n:host(.message-bubble--ghost) {\n  display: block;\n  max-width: 100%;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-start-start-radius: var(\n    --ds-message-bubble-radius-start-start,\n    var(--dimension-radius-050)\n  );\n  border-start-end-radius: var(--ds-message-bubble-radius-start-end, var(--dimension-radius-050));\n  border-end-start-radius: var(--ds-message-bubble-radius-end-start, var(--dimension-radius-050));\n  border-end-end-radius: var(--ds-message-bubble-radius-end-end, var(--dimension-radius-050));\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--primary) .message-bubble {\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-faint-brand);\n}\n\n:host(.message-bubble--secondary) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--ghost) .message-bubble {\n  padding-inline: 0;\n  background: transparent;\n  border-radius: 0;\n}\n\n:host(.message-bubble--error) .message-bubble {\n  background: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-bold-negative);\n}\n",
+      "content": ":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n:host(.message-bubble--ghost) {\n  display: block;\n  max-width: 100%;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-050);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--primary) .message-bubble {\n  background: var(--color-translucent-translucent);\n  color: var(--color-foreground-primary);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--secondary) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--ghost) .message-bubble {\n  padding-inline: 0;\n  background: transparent;\n  border-radius: 0;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/MessageBubble/MessageBubble.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'primary' | 'secondary' | 'ghost' | 'error';\n\n@Component({\n  tag: 'ds-message-bubble',\n  styleUrl: 'MessageBubble.css',\n  scoped: true,\n})\nexport class MessageBubble {\n  @Prop() variant: MessageBubbleVariant = 'secondary';\n\n  render() {\n    return (\n      <Host class={`message-bubble--${this.variant}`}>\n        <div class=\"message-bubble\"><slot /></div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'primary' | 'secondary' | 'ghost';\n\n@Component({\n  tag: 'ds-message-bubble',\n  styleUrl: 'MessageBubble.css',\n  scoped: true,\n})\nexport class MessageBubble {\n  @Prop() variant: MessageBubbleVariant = 'secondary';\n\n  render() {\n    return (\n      <Host class={`message-bubble--${this.variant}`}>\n        <div class=\"message-bubble\"><slot /></div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]