@ds-mo/ui 9.0.0 → 9.1.0

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

@@ -0,0 +1,153 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-line",
+  "title": "ChartLine",
+  "description": "ChartLine component from @ds-mo/ui.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-line",
+    "source": "src/wc/components/ChartLine/ChartLine.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "categories": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "X-axis labels — must match each series' `data` length. Set as a JS property."
+        },
+        "height": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "height",
+          "default": "240",
+          "required": false,
+          "mutable": false
+        },
+        "series": {
+          "type": "ChartSeries[]",
+          "resolvedType": "ChartSeries[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "One or more series to plot. Set as a JS property (not an HTML attribute)."
+        },
+        "showPoints": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "show-points",
+          "default": "true",
+          "required": false,
+          "mutable": false
+        },
+        "width": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "width",
+          "default": "480",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "categories": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "X-axis labels — must match each series' `data` length. Set as a JS property."
+      },
+      "height": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "height",
+        "default": "240",
+        "required": false,
+        "mutable": false
+      },
+      "series": {
+        "type": "ChartSeries[]",
+        "resolvedType": "ChartSeries[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "One or more series to plot. Set as a JS property (not an HTML attribute)."
+      },
+      "showPoints": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "show-points",
+        "default": "true",
+        "required": false,
+        "mutable": false
+      },
+      "width": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "width",
+        "default": "480",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-chart-line",
+      "react": "DsChartLine",
+      "angular": "DsChartLine"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-chart-line.js';",
+        "example": "<ds-chart-line></ds-chart-line>"
+      },
+      "react": {
+        "import": "import { DsChartLine } from '@ds-mo/ui/react';",
+        "example": "<DsChartLine />"
+      },
+      "angular": {
+        "import": "import { DsChartLine } from '@ds-mo/ui/angular/ds-chart-line';",
+        "example": "<ds-chart-line></ds-chart-line>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, series.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/wc/components/ChartLine/ChartLine.css",
+      "content": ":host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n}\n\n.chart-line__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-line__path {\n  fill: none;\n  stroke-width: 2;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: 1.5;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ChartLine/ChartLine.tsx",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-line',\n  styleUrl: 'ChartLine.css',\n  scoped: true,\n})\nexport class ChartLine {\n  /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n  @Prop() showPoints: boolean = true;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const allValues = this.series.flatMap(s => s.data);\n    const yMax = max(allValues) ?? 0;\n\n    const xScale = scalePoint<number>()\n      .domain(this.categories.map((_, i) => i))\n      .range([0, innerWidth]);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const lineGenerator = lineShape<number>()\n      .x((_, i) => xScale(i) ?? 0)\n      .y(d => yScale(d));\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-line\">\n        <svg\n          class=\"chart-line__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.series.map(s => s.name).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-line__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((label, i) => (\n              <text\n                key={`x-${label}`}\n                class=\"chart-line__axis-label\"\n                x={xScale(i) ?? 0}\n                y={innerHeight + 16}\n                text-anchor=\"middle\"\n              >\n                {label}\n              </text>\n            ))}\n\n            {this.series.map((s, si) => {\n              const color = s.color ?? categoryColor(si);\n              return (\n                <g key={s.name}>\n                  <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n                  {this.showPoints &&\n                    s.data.map((d, i) => (\n                      <circle\n                        key={`${s.name}-${i}`}\n                        class=\"chart-line__point\"\n                        cx={xScale(i) ?? 0}\n                        cy={yScale(d)}\n                        r={3}\n                        fill={color}\n                      />\n                    ))}\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,361 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "title": "Checkbox",
+  "description": "Form-associated checkbox for independent choices, acknowledgment, or consent, with checked, unchecked, mixed, and three density states.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/checkbox",
+    "source": "src/wc/components/Checkbox/Checkbox.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Form-associated checkbox for independent choices, acknowledgment, or consent, with checked, unchecked, mixed, and three density states.",
+      "useWhen": [
+        "A user may independently select zero or more choices.",
+        "A form requires acknowledgment, consent, or an opt-in value before submission.",
+        "A composite multi-select option needs a presentation-only checkbox indicator."
+      ],
+      "avoidWhen": [
+        "Exactly one option must be chosen from a mutually exclusive set.",
+        "A binary setting takes effect immediately rather than being submitted or confirmed.",
+        "The control triggers a one-time command instead of maintaining selection state."
+      ],
+      "alternatives": [
+        {
+          "when": "Exactly one option must be chosen from a mutually exclusive set.",
+          "component": "component:ds-radio",
+          "reason": "Radio communicates one-of-many selection."
+        },
+        {
+          "when": "A binary setting takes effect immediately.",
+          "component": "component:ds-switch",
+          "reason": "Switch communicates an immediately applied on/off setting."
+        },
+        {
+          "when": "The interaction triggers a one-time command.",
+          "component": "component:ds-button-filled",
+          "reason": "Button semantics communicate an action rather than persistent selection."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-field",
+        "component:ds-select-multi",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Every interactive checkbox requires a visible label that provides its accessible name.",
+        "Enter and Space activate the checkbox; checked and mixed state are exposed through aria-checked.",
+        "Disabled and inactive checkboxes leave the tab order and are omitted from form submission.",
+        "Use presentation mode only inside a composite option that owns selection semantics, focus, and interaction."
+      ],
+      "states": [
+        "Unchecked boxes use a tertiary-foreground inset stroke: 1.25px at md, 1px at sm, and 0.75px at xs. Selected and mixed boxes remove the border, use a brand fill, and draw a component-owned check or subtract mark at the same density-specific stroke width.",
+        "Activating an indeterminate checkbox clears the mixed state, toggles checked, and emits dsChange with the resulting boolean.",
+        "The initial checked and indeterminate values are restored by native form reset; checked values submit under name and unchecked values submit nothing.",
+        "Sizes are md with a 16px box in a 20px placement, sm with a 12px box in a 16px placement, and xs with an 8px box in a 12px placement.",
+        "Presentation mode removes checkbox semantics, focus, interaction, label rendering, and form submission while preserving the visual state."
+      ],
+      "responsiveBehavior": [
+        "Choose size from the density of the containing row; labels may wrap while the placement box stays fixed.",
+        "Use the md indicator centered by the shared 20px option icon zone in multi-select rows."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Bind checked and indeterminate as properties for application state updates and listen for dsChange.",
+          "Use the form attribute on the host when associating a checkbox rendered outside its owning form."
+        ],
+        "react": [
+          "Use DsCheckbox and handle onDsChange; checked and indeterminate are mutable and update after user activation."
+        ],
+        "angular": [
+          "Use DsCheckbox with checked binding and dsChange, or the generated boolean value accessor in Angular forms."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Checkbox/Checkbox.stories.ts"
+        },
+        {
+          "label": "Cross-browser form and accessibility coverage",
+          "path": "tests/e2e/forms.spec.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "checked": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "checked",
+          "default": "false",
+          "required": false,
+          "mutable": true,
+          "description": "Current checked state."
+        },
+        "disabled": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "disabled",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Native disabled state."
+        },
+        "indeterminate": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "indeterminate",
+          "default": "false",
+          "required": false,
+          "mutable": true,
+          "description": "Mixed visual state. Activation clears it before toggling checked."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Design-system inactive state."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false,
+          "description": "Visible label and accessible name. Omitted only in presentation mode."
+        },
+        "name": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "name",
+          "required": false,
+          "mutable": false,
+          "description": "Native form field name."
+        },
+        "presentation": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "presentation",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Visual-only indicator for a composite control that owns selection semantics."
+        },
+        "required": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "required",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Require the checkbox to be checked for form validity."
+        },
+        "requiredMessage": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "required-message",
+          "default": "'This field is required.'",
+          "required": false,
+          "mutable": false,
+          "description": "Validation message used when a required checkbox is unchecked."
+        },
+        "size": {
+          "type": "CheckboxSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Visual and placement density."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "'on'",
+          "required": false,
+          "mutable": false,
+          "description": "Submitted value when checked."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after user activation with the new checked state."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "checked": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "checked",
+        "default": "false",
+        "required": false,
+        "mutable": true,
+        "description": "Current checked state."
+      },
+      "disabled": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "disabled",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Native disabled state."
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "indeterminate",
+        "default": "false",
+        "required": false,
+        "mutable": true,
+        "description": "Mixed visual state. Activation clears it before toggling checked."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Design-system inactive state."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false,
+        "description": "Visible label and accessible name. Omitted only in presentation mode."
+      },
+      "name": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "name",
+        "required": false,
+        "mutable": false,
+        "description": "Native form field name."
+      },
+      "presentation": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "presentation",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Visual-only indicator for a composite control that owns selection semantics."
+      },
+      "required": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "required",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Require the checkbox to be checked for form validity."
+      },
+      "requiredMessage": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "required-message",
+        "default": "'This field is required.'",
+        "required": false,
+        "mutable": false,
+        "description": "Validation message used when a required checkbox is unchecked."
+      },
+      "size": {
+        "type": "CheckboxSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Visual and placement density."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "'on'",
+        "required": false,
+        "mutable": false,
+        "description": "Submitted value when checked."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after user activation with the new checked state."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-checkbox",
+      "react": "DsCheckbox",
+      "angular": "DsCheckbox"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-checkbox.js';",
+        "example": "<ds-checkbox></ds-checkbox>"
+      },
+      "react": {
+        "import": "import { DsCheckbox } from '@ds-mo/ui/react';",
+        "example": "<DsCheckbox />"
+      },
+      "angular": {
+        "import": "import { DsCheckbox } from '@ds-mo/ui/angular/ds-checkbox';",
+        "example": "<ds-checkbox></ds-checkbox>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Checkbox/Checkbox.css",
+      "content": "@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Checkbox/Checkbox.tsx",
+      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type CheckboxSize = 'md' | 'sm' | 'xs';\n\nconst LABEL_VARIANT: Record<CheckboxSize, 'text-body-medium' | 'text-body-small' | 'text-caption'> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = 'This field is required.';\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    this.internals.setFormValue(!inactive && this.checked ? this.value : null);\n    const missing = this.required && !inactive && !this.checked;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line local/prefer-ds-icon -- Checkbox owns this density-specific state mark and its optical stroke.\n              <svg\n                class={{\n                  checkbox__mark: true,\n                  'checkbox__mark--checked': !this.indeterminate,\n                }}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                focusable=\"false\"\n              >\n                <path\n                  d={this.indeterminate ? 'M4 8H12' : 'M3.5 8.25L6.75 11.5L12.5 4.75'}\n                  vector-effect=\"non-scaling-stroke\"\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <ds-text\n            class=\"checkbox__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={LABEL_VARIANT[this.size]}\n            textId={this.labelId}\n          >\n            {this.label}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}