@ds-mo/ui 8.3.1 → 9.1.0

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

@@ -0,0 +1,276 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chip",
+  "title": "Chip",
+  "description": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chip",
+    "source": "src/wc/components/Chip/Chip.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
+      "useWhen": [
+        "A user-applied value such as a filter, recipient, or tokenized input entry must remain visible and individually removable.",
+        "A compact metadata value needs a semantic neutral, active, error, or caution status before removal.",
+        "A collection owner can remove the represented value and restore focus after the dismiss action."
+      ],
+      "avoidWhen": [
+        "The label is static or not individually removable; use Tag instead.",
+        "The control selects, toggles, or navigates; use the matching button or navigation component.",
+        "The information is a persistent status, count, or unread indicator; use Badge or an appropriate status composition instead.",
+        "The chip would be placed on any surface other than a primary surface."
+      ],
+      "alternatives": [
+        {
+          "when": "The metadata label is static and has no dismiss action.",
+          "component": "component:ds-tag",
+          "reason": "Tag owns non-interactive taxonomy and metadata labels."
+        },
+        {
+          "when": "The compact mark communicates a count, status, or unread indicator.",
+          "component": "component:ds-badge",
+          "reason": "Badge owns supplemental counters and status marks without a dismiss action."
+        },
+        {
+          "when": "The value is a selectable or persistent toggle.",
+          "component": "component:ds-button-unfilled",
+          "reason": "ButtonUnfilled owns command and toggle semantics."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input",
+        "component:ds-select"
+      ],
+      "accessibility": [
+        "Keep the visible label meaningful without relying on semantic color alone.",
+        "Give the dismiss action a name that identifies the represented value.",
+        "After removal, the parent moves focus to the next chip, then the previous chip, or the owning collection or input trigger when no chips remain.",
+        "Inactive chips remain visible while their dismiss action is disabled and removed from keyboard interaction."
+      ],
+      "states": [
+        "Semantic state describes the represented value; active does not mean selected or pressed.",
+        "The dismiss action is the chip's only interaction, and the parent owns data mutation after dsRemove.",
+        "Long labels remain on one line and truncate only when the consuming layout supplies a maximum width; otherwise the chip sizes to its content.",
+        "Rounded shape is a visual choice and does not change semantics or interaction.",
+        "Chip is designed only for primary surfaces and has no surface-context API."
+      ],
+      "responsiveBehavior": [
+        "The parent chooses chip size and owns wrapping, overflow, and collection condensation.",
+        "Chip does not automatically resize, hide, or collapse its label at responsive breakpoints."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "dsRemove has no payload; associate each rendered chip with its owning value and remove that value from the event handler."
+        ],
+        "react": [
+          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
+        ],
+        "angular": [
+          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Chip/Chip.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false
+        },
+        "maxWidth": {
+          "type": "string | number | undefined",
+          "resolvedType": "number | string | undefined",
+          "attribute": "max-width",
+          "required": false,
+          "mutable": false
+        },
+        "removeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "remove-label",
+          "default": "'Remove {label}'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
+        },
+        "rounded": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "rounded",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "size": {
+          "type": "ChipSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false
+        },
+        "state": {
+          "type": "ChipState",
+          "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
+          "attribute": "state",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic color state."
+        }
+      },
+      "events": [
+        {
+          "name": "dsRemove",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Fired when the remove button is clicked."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false
+      },
+      "maxWidth": {
+        "type": "string | number | undefined",
+        "resolvedType": "number | string | undefined",
+        "attribute": "max-width",
+        "required": false,
+        "mutable": false
+      },
+      "removeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "remove-label",
+        "default": "'Remove {label}'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
+      },
+      "rounded": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "rounded",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "size": {
+        "type": "ChipSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false
+      },
+      "state": {
+        "type": "ChipState",
+        "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
+        "attribute": "state",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic color state."
+      }
+    },
+    "events": [
+      {
+        "name": "dsRemove",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Fired when the remove button is clicked."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-chip",
+      "react": "DsChip",
+      "angular": "DsChip"
+    },
+    "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-chip.js';",
+        "example": "<ds-chip></ds-chip>"
+      },
+      "react": {
+        "import": "import { DsChip } from '@ds-mo/ui/react';",
+        "example": "<DsChip />"
+      },
+      "angular": {
+        "import": "import { DsChip } from '@ds-mo/ui/angular/ds-chip';",
+        "example": "<ds-chip></ds-chip>"
+      },
+      "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",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Chip/Chip.css",
+      "content": "@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before {\n  background-color: var(--color-interaction-hover);\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n  inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n  inset: 0;\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Chip/Chip.tsx",
+      "content": "import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': true,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive,\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        <button\n          type=\"button\"\n          class=\"tag__remove ds-focus-ring-inset\"\n          onClick={this.handleRemove}\n          aria-label={this.removeLabel.replace('{label}', this.label)}\n          disabled={this.isInactive || undefined}\n        >\n          <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,225 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "divider",
+  "title": "Divider",
+  "description": "Horizontal or vertical separator between sibling content groups, decorative by default with optional structural semantics.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/divider",
+    "source": "src/wc/components/Divider/Divider.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Horizontal or vertical separator between sibling content groups, decorative by default with optional structural semantics.",
+      "useWhen": [
+        "Related sibling content groups on one surface need stronger visual separation than spacing alone provides.",
+        "A list or panel needs an inset separator that does not define the outer edge of its container.",
+        "Meaningful document or group structure requires an explicit horizontal or vertical separator."
+      ],
+      "avoidWhen": [
+        "Spacing alone communicates the grouping clearly.",
+        "The line defines a container edge, control outline, or selected state; use the owning component's border treatment.",
+        "The divider would compensate for weak headings or unclear information hierarchy.",
+        "A decorative flourish does not clarify grouping."
+      ],
+      "alternatives": [
+        {
+          "when": "Content needs an enclosing surface and outer boundary.",
+          "component": "component:ds-card",
+          "reason": "Card owns container chrome, structure, and edge treatment."
+        },
+        {
+          "when": "A static compact label is being used to name a group.",
+          "component": "component:ds-text",
+          "reason": "Text communicates hierarchy directly instead of relying on a line."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card",
+        "component:ds-menu",
+        "component:ds-panel-sub-nav"
+      ],
+      "accessibility": [
+        "Keep purely visual dividers hidden from assistive technology.",
+        "Expose separator semantics only when the line represents meaningful document or group structure.",
+        "Semantic orientation must match the divider's visual orientation.",
+        "Do not use a semantic divider as a substitute for headings, landmarks, or explicit group labels."
+      ],
+      "states": [
+        "Horizontal and vertical variants separate sibling groups along the parent's layout axis.",
+        "The omitted background context is for primary and secondary surfaces. Explicit faint documents a faint surface while using the same standard divider token.",
+        "Other background contexts select their matching divider token, including navigation where Divider is composed inside app chrome.",
+        "Inset is symmetric along the line axis. Explicit length is reserved for layout-specific separators; otherwise the line fills the available axis."
+      ],
+      "responsiveBehavior": [
+        "The parent layout decides whether to change orientation, visibility, inset, or length at responsive breakpoints.",
+        "Divider does not infer layout direction or hide itself responsively."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set semantic mode only from known document structure; presentation alone should remain hidden from assistive technology."
+        ],
+        "react": [
+          "Derive orientation and visibility from the parent layout rather than viewport logic inside Divider."
+        ],
+        "angular": [
+          "Derive orientation and visibility from the parent layout rather than viewport logic inside Divider."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Divider/Divider.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "background": {
+          "type": "DividerBackground | undefined",
+          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+          "attribute": "background",
+          "required": false,
+          "mutable": false,
+          "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+        },
+        "inset": {
+          "type": "DividerInset",
+          "resolvedType": "\"none\" | \"space-000\" | \"space-012\" | \"space-025\" | \"space-050\" | \"space-075\" | \"space-100\" | \"space-125\" | \"space-150\" | \"space-175\" | \"space-200\" | \"space-250\" | \"space-300\" | \"space-400\" | \"space-600\" | \"space-800\" | string & {}",
+          "attribute": "inset",
+          "default": "'none'",
+          "required": false,
+          "mutable": false,
+          "description": "Insets the divider from its start/end edges. Accepts spacing token names or any CSS length."
+        },
+        "length": {
+          "type": "DividerLength",
+          "resolvedType": "\"auto\" | \"full\" | string & {}",
+          "attribute": "length",
+          "default": "'auto'",
+          "required": false,
+          "mutable": false,
+          "description": "Visual line length. Defaults to filling the available axis. Accepts any CSS length."
+        },
+        "orientation": {
+          "type": "DividerOrientation",
+          "resolvedType": "\"horizontal\" | \"vertical\"",
+          "attribute": "orientation",
+          "default": "'horizontal'",
+          "required": false,
+          "mutable": false,
+          "description": "Direction of the divider line. Defaults to 'horizontal'."
+        },
+        "semantic": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "semantic",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "background": {
+        "type": "DividerBackground | undefined",
+        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+        "attribute": "background",
+        "required": false,
+        "mutable": false,
+        "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+      },
+      "inset": {
+        "type": "DividerInset",
+        "resolvedType": "\"none\" | \"space-000\" | \"space-012\" | \"space-025\" | \"space-050\" | \"space-075\" | \"space-100\" | \"space-125\" | \"space-150\" | \"space-175\" | \"space-200\" | \"space-250\" | \"space-300\" | \"space-400\" | \"space-600\" | \"space-800\" | string & {}",
+        "attribute": "inset",
+        "default": "'none'",
+        "required": false,
+        "mutable": false,
+        "description": "Insets the divider from its start/end edges. Accepts spacing token names or any CSS length."
+      },
+      "length": {
+        "type": "DividerLength",
+        "resolvedType": "\"auto\" | \"full\" | string & {}",
+        "attribute": "length",
+        "default": "'auto'",
+        "required": false,
+        "mutable": false,
+        "description": "Visual line length. Defaults to filling the available axis. Accepts any CSS length."
+      },
+      "orientation": {
+        "type": "DividerOrientation",
+        "resolvedType": "\"horizontal\" | \"vertical\"",
+        "attribute": "orientation",
+        "default": "'horizontal'",
+        "required": false,
+        "mutable": false,
+        "description": "Direction of the divider line. Defaults to 'horizontal'."
+      },
+      "semantic": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "semantic",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-divider",
+      "react": "DsDivider",
+      "angular": "DsDivider"
+    },
+    "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-divider.js';",
+        "example": "<ds-divider></ds-divider>"
+      },
+      "react": {
+        "import": "import { DsDivider } from '@ds-mo/ui/react';",
+        "example": "<DsDivider />"
+      },
+      "angular": {
+        "import": "import { DsDivider } from '@ds-mo/ui/angular/ds-divider';",
+        "example": "<ds-divider></ds-divider>"
+      },
+      "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/Divider/Divider.css",
+      "content": ":host {\n  --_divider-color: var(--color-divider-divider);\n  --_divider-inset: 0;\n  --_divider-length: 100%;\n\n  display: block;\n  flex-shrink: 0;\n  width: var(--_divider-length);\n  height: var(--dimension-stroke-width-012);\n  margin: 0 var(--_divider-inset);\n  border: none;\n  background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n  width: var(--dimension-stroke-width-012);\n  height: var(--_divider-length);\n  min-height: var(--dimension-stroke-width-012);\n  margin: var(--_divider-inset) 0;\n  align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n  align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n  --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n  --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n  --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n  --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n  --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n  --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n  --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n  --_divider-color: var(--color-inverted-divider);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Divider/Divider.tsx",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\nexport type DividerInsetToken =\n  | 'space-000'\n  | 'space-012'\n  | 'space-025'\n  | 'space-050'\n  | 'space-075'\n  | 'space-100'\n  | 'space-125'\n  | 'space-150'\n  | 'space-175'\n  | 'space-200'\n  | 'space-250'\n  | 'space-300'\n  | 'space-400'\n  | 'space-600'\n  | 'space-800';\nexport type DividerInset = 'none' | DividerInsetToken | (string & {});\nexport type DividerLength = 'auto' | 'full' | (string & {});\n\nconst INSET_VALUE: Record<'none' | DividerInsetToken, string> = {\n  none: '0',\n  'space-000': 'var(--dimension-space-000)',\n  'space-012': 'var(--dimension-space-012)',\n  'space-025': 'var(--dimension-space-025)',\n  'space-050': 'var(--dimension-space-050)',\n  'space-075': 'var(--dimension-space-075)',\n  'space-100': 'var(--dimension-space-100)',\n  'space-125': 'var(--dimension-space-125)',\n  'space-150': 'var(--dimension-space-150)',\n  'space-175': 'var(--dimension-space-175)',\n  'space-200': 'var(--dimension-space-200)',\n  'space-250': 'var(--dimension-space-250)',\n  'space-300': 'var(--dimension-space-300)',\n  'space-400': 'var(--dimension-space-400)',\n  'space-600': 'var(--dimension-space-600)',\n  'space-800': 'var(--dimension-space-800)',\n};\n\n@Component({\n  tag: 'ds-divider',\n  styleUrl: 'Divider.css',\n  scoped: true,\n})\nexport class Divider {\n  /** Direction of the divider line. Defaults to 'horizontal'. */\n  @Prop() orientation: DividerOrientation = 'horizontal';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: DividerBackground | undefined;\n\n  /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */\n  @Prop() inset: DividerInset = 'none';\n\n  /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */\n  @Prop() length: DividerLength = 'auto';\n\n  /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */\n  @Prop() semantic: boolean = false;\n\n  private resolveInset(): string {\n    return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)\n      ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]\n      : this.inset;\n  }\n\n  private resolveLength(): string {\n    return this.length === 'auto' || this.length === 'full'\n      ? '100%'\n      : this.length;\n  }\n\n  render() {\n    const isVertical = this.orientation === 'vertical';\n    const hasCustomLength = this.length !== 'auto' && this.length !== 'full';\n\n    return (\n      <Host\n        role={this.semantic ? 'separator' : undefined}\n        aria-orientation={this.semantic ? this.orientation : undefined}\n        aria-hidden={this.semantic ? undefined : 'true'}\n        class={{\n          divider: true,\n          'divider--vertical': isVertical,\n          'divider--custom-length': hasCustomLength,\n          [`divider--background-${this.background}`]: !!this.background,\n        }}\n        style={{\n          '--_divider-inset': this.resolveInset(),\n          '--_divider-length': this.resolveLength(),\n        }}\n      />\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}