j3w1 / theme

j3w1 / theme4.0.0

j3w1 / command

  • SPEC Overview
  • SPEC Foundations
  • SPEC Components
  • SPEC Patterns
  • SPEC Tokens
  • SPEC Tools
  • SPEC Workbench
  • SPEC Form builder
  • SPEC Task kit
  • SPEC Recipes
  • SPEC Figma bridge
  • SPEC Report an issue
  • SPEC Implement
  • SPEC For agents
  • SPEC Ports
  • SPEC Releases
  • SPEC Specification
  • DEMO Vue application demo

Description list

Semantic terms and values that wrap into a readable single column.

stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifestCanonical JSONVue gallery ↗Prepare an agent kit →

Live variants

default

Project
Atlas library
Owner
Avery Kim
Delivery
Ready for review
Markup
<j3w1-description-list id="example-description-list-default"><dl class="description-list"><div><dt>Project</dt><dd>Atlas library</dd></div><div><dt>Owner</dt><dd>Avery Kim</dd></div><div><dt>Delivery</dt><dd>Ready for review</dd></div></dl></j3w1-description-list>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@4.0.0
import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/description-list.css';
import '@j3w1/ui/register/description-list';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@4.0.0 j3w1-ui copy description-list --out ./vendor/j3w1/description-list

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

NameType / signatureMeaning
disabledCustomEventDisable the native controls owned by this instance.
loadingCustomEventMark the primary control busy and prevent duplicate activation.

properties

NameType / signatureMeaning
disabledbooleanDelegates disabled state to native children.
namestringNative control name; application form keys remain explicit.

methods

NameType / signatureMeaning
refresh(): voidReconnect behavior after replacing native child structure.
focus(options?: FocusOptions): voidFocus the first usable native control.

events

NameType / signatureMeaning

Dependencies and verification

Registered components: none. Style dependencies: none.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Description list description-list

  • Family: Information display
  • Maturity: stable
  • Priority: R2
  • Since: 1.0.0
  • Native control: Native dl, dt and dd
  • specified
  • demonstrated

Semantic terms and values that wrap into a readable single column.

Report an issue with this component

Tokens

Focus a role to inspect its values; follow its link for persistent usage and source details.

PartRoleValueUse
root.bgcolor.surface.defaultapproveduse#0d0707D-041 surface.default: color.primitive.modern.panel.
root.textcolor.text.defaultapproveduse#e99499D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
root.bordercolor.border.controlapproveduse#c81a1aD-041 owner correction: red control and floating-frame borders, distinct from rose text.
heading.textcolor.text.brightapproveduse#ffa2a7D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
secondary.textcolor.text.mutedapproveduse#d4868bD-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
control.bgcolor.surface.inputapproveduse#000000Form-control fill.
control.focuscolor.interaction.focus.ringobserveduse#e539351px dashed focus ring on controls and rows.
dependency.role-border-width-defaultborder.width.defaultobserveduse1pxEvery border is 1px.
dependency.role-color-border-dividercolor.border.dividerapproveduse#482b2bD-041 border.divider: color.primitive.modern.divider.
dependency.role-focus-offsetfocus.offsetobserveduse-2pxoutline-offset for controls.
dependency.role-radius-noneradius.noneobserveduse0pxThe only radius. Nothing is rounded.
dependency.role-space-12space.12observeduse12px
dependency.role-space-4space.4observeduse4px
dependency.role-space-8space.8observeduse8px

State matrix

Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).

StateDefault
default
Project
Atlas library
Owner
Avery Kim
Delivery
Ready for review
stacked

Purpose

Named facts as term and value pairs.

Anatomy

Parts as listed in the anatomy.

States

StateVisualNon-colour channel
defaultTwo aligned columns.Native term and description relationships.
stackedOne column at narrow widths.Each term immediately precedes its value.

Keyboard

As in the key table.

Accessibility

Use dt and dd, not a grid of unrelated paragraphs. Long values wrap without clipping. Keep link text meaningful.

Portability

Follows the shared component defaults in spec/portability.md (section “Shared component defaults”).

Non-examples

Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.

Contrast report

5 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.

PairStateKindForegroundBackgroundRatioMinResult
description-list default textdefaulttextcolor.text.default #e99499color.surface.default #0d07078.724.5pass
description-list default borderdefaultuicolor.border.control #c81a1acolor.surface.default #0d07073.443pass
Primary content—textcolor.text.default #e99499color.surface.default #0d07078.724.5pass
Supporting content—textcolor.text.muted #d4868bcolor.surface.default #0d07077.224.5pass
Control boundary—uicolor.border.control #c81a1acolor.surface.default #0d07073.443pass

Keys

KeyAction
Tab / Shift+TabVisit links in values. Plain facts are not tab stops.

For agents

Component JSON ·Implementation brief ·Build a task kit ·

Stress fixtures: FX-320 FX-360 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-TOUCH FX-DENSITY FX-STATE-MATRIX