mmo-specimen

1 symbol · generated 30 Sep 2026

element

mmo-specimen

One specimen of the design system: a live example, and the html that produced it.

<mmo-specimen label="" note="" ground="surface" layout="row" code="open"></mmo-specimen>

Extends: CustomShadowElement

The example is the element's own light dom, shown through a `<slot>` -- so it is painted by the document's stylesheet, which is the only place `.button`, `.card` or `.tag` exist. A shadow root sees none of that css, so anything copied into one would be a second, drifting copy of the design system; slotting the real markup is what makes a specimen show the real thing. The code panel is that same markup, read back from the light dom, dedented and highlighted -- so the html shown can never say something different from what is rendered above it. ```html <mmo-specimen label="Tones" note="one filled recipe, six hues"> <button class="primary">Save</button> <button class="error">Delete</button> </mmo-specimen> ```

Index

	label	the caption of the specimen
	note	one line saying what the variants below are for
	ground	the ground the example is shown on: `surface`, `bg` or `ink`
	layout	how the examples are arranged: `row` (default), `column`, `grid` or `block`
	code	`open` to show the html, `closed` to fold it away behind the toggle
	tocTimer static	one rebuild of the page's table of contents for all the specimens of a page, not one each
	ground accessor	The ground the example is currently shown on.
	constructor()
	init()
	load()	Read the example back from the light dom and fill the code panel.
	clean(html)	What the page's own tooling wrote into the example on its way past -- the `id` a table of contents anchors a heading with.
	hideFromToc()	The headings of an example are not sections of the page.
	dedent(html)	The markup as a page would write it: tabs expanded, the blank lines around it dropped and the template's own indentation taken off, so the html reads from column zero whatever depth the specimen si…
	cycleGround()	Show the example on the next ground: what looks right on white can vanish on ink.
	toggleCode()	Fold the html away, or bring it back.
	copy()	Copy the html of the example.
	(default)	the example itself, written exactly as a page would write it
	.plain	drop the frame, for a specimen that is already a full-width block

Attributes5

label

mmo-specimen.jhs

the caption of the specimen

label=""

note

mmo-specimen.jhs

one line saying what the variants below are for

note=""

ground

mmo-specimen.jhs

the ground the example is shown on: surface, bg or ink

ground="surface"

layout

mmo-specimen.jhs

how the examples are arranged: row (default), column, grid or block

layout="row"

code

mmo-specimen.jhs

open to show the html, closed to fold it away behind the toggle

code="open"

Properties2

tocTimer

staticmmo-specimen.jhs:52

one rebuild of the page's table of contents for all the specimens of a page, not one each

static tocTimer = null;

ground

accessormmo-specimen.jhs:134

The ground the example is currently shown on.

get ground() set ground(value)

Type: string

Methods9

constructor()

mmo-specimen.jhs:54

constructor()

init()

mmo-specimen.jhs:59

init()

load()

mmo-specimen.jhs:69

Read the example back from the light dom and fill the code panel.

load()

returns void

clean(html)

mmo-specimen.jhs:85

What the page's own tooling wrote into the example on its way past -- the id a table of contents anchors a heading with. It is not part of the specimen's html, so it is not shown as if it were.

clean(html)

html	`string`
returns	`string`

hideFromToc()

mmo-specimen.jhs:94

The headings of an example are not sections of the page. Mark them, drop the anchors a table of contents may already have given them, and ask it to rebuild -- once for the whole page.

hideFromToc()

returns void

dedent(html)

mmo-specimen.jhs:114

The markup as a page would write it: tabs expanded, the blank lines around it dropped and the template's own indentation taken off, so the html reads from column zero whatever depth the specimen sits at in the page.

dedent(html)