@c2n/steps 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/steps.ts","declarations":[{"kind":"class","description":"A vertical list of steps: the trace of a task as it runs, or a wizard's progress. Each row is a marker, a label,\nan optional dimmed `detail` beside it and `trailing` text at the end — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group**, and a group is a disclosure: its own row is the summary and its sub-steps\nare the detail. **Every step is a row, and every row is visible** — a group starts expanded and nothing ever\nfolds one away on its own. The chevron is there for the reader, `collapsed` in the markup starts a stage folded,\nand the run only ever brings a folded stage *back* into view when it starts running or something in it fails.\n\nAuthor it either way, and mix them freely:\n\n- **Declarative** — slot `c2-step` children and nest them for sub-steps.\n- **Data-driven** — hand it a `steps` array of `{ id, label, detail, trailing, status, children }` and it renders\n the tree itself. The array wins when both are present. During a run, `updateStep(id, patch)` changes one step\n without rebuilding the array.\n\nEverything the markup fills with a slot, the data-driven mode fills with a renderer: `renderMarker` for the\n`marker` slot, `renderToggle` for `toggle`, `renderLabel` / `renderDetail` / `renderTrailing` for the text, and\n`renderItem` for that text all at once. Each is handed the node, its depth, its position, its dotted path and\nthe status actually in effect.\n\nA parent step that does not author a `status` takes one from its children: the most urgent thing inside wins, so\na stage reports that it is running, or that something under it failed, without you setting it.\n\n`current` is the shortcut a wizard wants: set it to the index of the active step and every top-level step that\nhas neither an explicit `status` nor sub-steps becomes `success` before it, `current` at it and `pending` after.\n\nA step that arrives while the list is already on screen grows into place rather than appearing, and a marker\ngives one beat as its status settles — which is what a trace being written in front of you should look like.\n`--c2-step--enter-duration: 0s` turns the first off, and `prefers-reduced-motion` turns both off.\n\nThe connector rail between markers is drawn by CSS and off by default, because a trace does not want one — give\n`--c2-step__rail--width` a width and a stepper gets its rail.\n\nNumbering follows the tree: `marker=\"number\"` draws a dotted path, so the first child of the third step reads\n`3.1` rather than a second `1`.","name":"Steps","cssProperties":[{"type":{"text":"pixel"},"description":"Space between rows. A stepper usually wants some; a trace does not.","name":"--c2-steps--gap","default":"0px"},{"type":{"text":"color"},"name":"--c2-steps--background"},{"type":{"text":"border"},"name":"--c2-steps--border"},{"type":{"text":"border-radius"},"name":"--c2-steps--border-radius"},{"type":{"text":"padding"},"name":"--c2-steps--padding-block","default":"0px"},{"type":{"text":"padding"},"name":"--c2-steps--padding-inline","default":"0px"},{"type":{"text":"overflow"},"description":"`auto` with a `max-height` keeps a long run in its own scroller.","name":"--c2-steps--overflow-y","default":"visible"},{"type":{"text":"max-height"},"name":"--c2-steps--max-height","default":"none"}],"slots":[{"description":"The `c2-step` children. Ignored when `steps` is set.","name":""}],"members":[{"kind":"field","name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"How each marker is drawn: a status glyph, the step's number, or nothing.","attribute":"marker","reflects":true},{"kind":"field","name":"current","type":{"text":"number"},"default":"-1","description":"Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level\nstep with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and\n`pending` after it.","attribute":"current","reflects":true},{"kind":"field","name":"steps","type":{"text":"StepNode[] | undefined"},"default":"undefined","description":"The steps as data, instead of `c2-step` children. Takes precedence over the slot.","attribute":"steps"},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name for the list.","attribute":"aria-label"},{"kind":"field","name":"renderItem","type":{"text":"StepRenderer | undefined"},"description":"Replaces a row's text when rendering from `steps`, so a step can carry a badge, a link, an avatar — anything\nLit renders. It overrides `renderLabel`, `renderDetail` and `renderTrailing`, which are the finer-grained way\nto do the same thing. The marker and the disclosure are their own columns, not part of the text, so\n`renderMarker` and `renderToggle` still apply alongside it."},{"kind":"field","name":"renderMarker","type":{"text":"StepRenderer | undefined"},"description":"The step's icon when rendering from `steps` — the data-driven half of the `marker` slot. Return an `<svg>`, an\nicon element, a letter; anything Lit renders. Without one the marker draws the glyph for the step's status."},{"kind":"field","name":"renderToggle","type":{"text":"StepRenderer | undefined"},"description":"The step's disclosure affordance when rendering from `steps` — the data-driven half of the `toggle` slot."},{"kind":"field","name":"renderLabel","type":{"text":"StepRenderer | undefined"},"description":"Replaces the label when rendering from `steps`."},{"kind":"field","name":"renderDetail","type":{"text":"StepRenderer | undefined"},"description":"Replaces the dimmed detail when rendering from `steps`."},{"kind":"field","name":"renderTrailing","type":{"text":"StepRenderer | undefined"},"description":"Replaces the trailing content when rendering from `steps`."},{"kind":"field","name":"written","privacy":"private","readonly":true,"default":"new WeakMap<Element, StepStatus>()","description":"The status this element last wrote to each step, which is how it knows whether a step is still its to write.\n\n`status` reflects, and a server-rendered step arrives with the default already stamped on it, so the presence\nof the attribute proves nothing about who put it there. A step is ours while it still holds what we last gave\nit — the moment a run sets something else on it, it is the run's, for good."},{"kind":"field","name":"known","privacy":"private","readonly":true,"default":"new WeakSet<Element>()","description":"Steps this element has already laid out. A step it has not seen before is new — but only once the list itself\nhas been drawn: on the first pass every step is new, and a whole trace fading in at once is not an arrival,\nit is a page loading."},{"kind":"field","name":"hasSynced","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"observer","type":{"text":"MutationObserver | undefined"},"privacy":"private","description":"A run ticks a step over by setting `status` on it, which is nothing this element renders and so nothing Lit\nwould notice. Watching the attribute is what lets a parent roll the change up and a group open on it."},{"kind":"method","name":"updateStep","return":{"type":{"text":"boolean"}},"parameters":[{"name":"id","type":{"text":"string"}},{"name":"patch","type":{"text":"Partial<StepNode>"}}],"description":"Changes one step of `steps` in place and redraws, without rebuilding the array — what a task runner wants when\nit ticks a step over hundreds of times. Returns `false` when no step carries that `id`."},{"kind":"method","name":"expandAll","description":"Brings every group back into view."},{"kind":"method","name":"collapseAll","description":"Folds every group away, leaving the top-level stages."},{"kind":"method","name":"setCollapsedOfAll","privacy":"private","parameters":[{"name":"collapsed","type":{"text":"boolean"}}]},{"kind":"method","name":"allSteps","privacy":"private","return":{"type":{"text":"HTMLElement[]"}},"description":"Every step in the list, wherever it came from."},{"kind":"method","name":"collectSteps","privacy":"private","static":true,"return":{"type":{"text":"HTMLElement[]"}},"parameters":[{"name":"root","type":{"text":"ParentNode"}}],"description":"The nearest `c2-step` descendants of `root`, looking through anything that is not one.\n\nA step is rarely a literal child: Astro wraps every island in an `<astro-island>` (which is\n`display: contents`, so it changes nothing but the tree), and a consumer may wrap rows in a `<div>`. Matching\nonly direct children silently found nothing there, and every step kept its defaults."},{"kind":"field","name":"rootSteps","type":{"text":"HTMLElement[]"},"privacy":"private","description":"Top-level steps, whether they came from the slot or from `steps`.","readonly":true},{"kind":"method","name":"syncSteps","privacy":"private","description":"Writes depth, position and presentation onto every step, and gives a parent that authored no `status` the one\nrolled up from its children — which is why the walk returns the statuses it settled on.\n\nCheap to repeat: each value is a property assignment Lit will no-op when unchanged."},{"kind":"method","name":"mayWrite","privacy":"private","return":{"type":{"text":"boolean"}},"parameters":[{"name":"element","type":{"text":"ManagedStep"}}],"description":"Whether this element may still write a step's status. A step it has never written is its to write while the\nstep is `pending` — what \"nobody said\" looks like, from the markup or from the server. After that it is ours\nonly while it still holds the value we gave it."},{"kind":"method","name":"deriveStatus","privacy":"private","return":{"type":{"text":"StepStatus"}},"parameters":[{"name":"childStatuses","type":{"text":"StepStatus[]"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}}],"description":"A parent takes the most urgent status under it; a leaf takes the wizard's `current`, or nothing happened yet."},{"kind":"method","name":"statusOf","privacy":"private","return":{"type":{"text":"StepStatus"}},"parameters":[{"name":"node","type":{"text":"StepNode"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}}],"description":"The status a data node ends up with, so a renderer is handed what is actually drawn."},{"kind":"method","name":"renderNode","privacy":"private","return":{"type":{"text":"TemplateResult"}},"parameters":[{"name":"node","type":{"text":"StepNode"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}},{"name":"parentPath","type":{"text":"string"}}]}],"events":[{"type":{"text":"CustomEvent<StepToggleEventDetail>"},"description":"Fired by a `c2-step` when a group opens or closes, and bubbling to here. `event.target` is the step; `detail.path` says where it sits.","name":"step-toggle"}],"attributes":[{"name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"How each marker is drawn: a status glyph, the step's number, or nothing.","fieldName":"marker"},{"name":"current","type":{"text":"number"},"default":"-1","description":"Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level\nstep with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and\n`pending` after it.","fieldName":"current"},{"name":"steps","type":{"text":"StepNode[] | undefined"},"default":"undefined","description":"The steps as data, instead of `c2-step` children. Takes precedence over the slot.","fieldName":"steps"},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name for the list.","fieldName":"ariaLabel"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-steps","customElement":true,"slotComponents":["c2-step"]},{"kind":"variable","name":"node"},{"kind":"variable","name":"position"},{"kind":"variable","name":"path"}],"exports":[{"kind":"js","name":"StepContext","declaration":{"name":"StepContext","module":"./step-types.js"}},{"kind":"js","name":"StepNode","declaration":{"name":"StepNode","module":"./step-types.js"}},{"kind":"js","name":"StepRenderer","declaration":{"name":"StepRenderer","module":"./step-types.js"}},{"kind":"js","name":"StepStatus","declaration":{"name":"StepStatus","module":"./step-types.js"}},{"kind":"js","name":"StepsMarker","declaration":{"name":"StepsMarker","module":"./step-types.js"}},{"kind":"js","name":"StepToggleEventDetail","declaration":{"name":"StepToggleEventDetail","module":"./step.js"}},{"kind":"js","name":"StepEventMap","declaration":{"name":"StepEventMap","module":"./step.js"}},{"kind":"js","name":"Steps","declaration":{"name":"Steps","module":"src/steps.ts"}},{"kind":"custom-element-definition","name":"c2-steps","declaration":{"name":"Steps","module":"src/steps.ts"}}]},{"kind":"javascript-module","path":"src/step.ts","declarations":[{"kind":"class","description":"One row of a Steps list: a marker, a label with optional dimmed `detail`, and `trailing` text at the end\nof the row — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group.** Nest `c2-step` children and the row becomes the summary of a disclosure\nand the children its detail, so a long run collapses to the shape of the task rather than to a wall of lines.\nThere is no second element to learn: the same tag is a leaf or a group depending on what is inside it.\n\n**Every step is a row, and every row is visible.** A group starts expanded and nothing ever folds one away on\nits own: the chevron is there for the reader, and `collapsed` in the markup starts a stage folded. The run only\never brings a stage *back* into view — a folded one reopens when it starts running (`running`, `current`) or\nwhen something in it goes wrong (`error`, `warning`).\n\n**A step is one row.** Label, detail and trailing text sit on a single line and truncate with an ellipsis rather\nthan wrapping, so a hundred-step trace stays scannable, and a sub-step is indented far enough that its marker\nlands under its parent's label. `--c2-step__text--flex-direction: column` still stacks the detail under the\nlabel, which a wizard's descriptions want — that is two lines on purpose, and each of them is still one line.\n\nThe step never sets its own depth, position or marker mode: the parent `c2-steps` writes them on every pass, so\na step used on its own renders as a single root-level row.","name":"Step","cssProperties":[{"type":{"text":"pixel"},"description":"Space between the marker, the text and the trailing content.","name":"--c2-step__row--gap","default":"10px"},{"type":{"text":"padding"},"name":"--c2-step__row--padding-block","default":"7px"},{"type":{"text":"padding"},"name":"--c2-step__row--padding-inline","default":"12px"},{"type":{"text":"pixel"},"description":"Extra inset per level of nesting. The default puts a sub-step's marker under its parent's label, which is what makes the nesting read without drawing anything.","name":"--c2-step__row--indent","default":"marker size + row gap"},{"type":{"text":"border-radius"},"name":"--c2-step__row--border-radius"},{"type":{"text":"color"},"name":"--c2-step__row--background"},{"type":{"text":"color"},"description":"Set it to make the rows respond to the pointer.","name":"--c2-step__row__hover--background"},{"type":{"text":"border"},"description":"The hairline under each row.","name":"--c2-step__row--border-bottom","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"description":"Focus ring of a group's row, which is a button.","name":"--c2-step__row--outline","default":"2px solid rgb(2, 101, 220)"},{"type":{"text":"pixel"},"description":"Width of the `toggle` slot's column, when it is filled.","name":"--c2-step__toggle--size","default":"14px"},{"type":{"text":"pixel"},"description":"Space between that column and the marker.","name":"--c2-step__toggle--gap","default":"4px"},{"type":{"text":"color"},"name":"--c2-step__toggle--color","default":"#a1a1aa"},{"type":{"text":"color"},"description":"A vertical rule at each ancestor's depth, for a file-tree look. Off by default.","name":"--c2-step__guide--color","default":"#e4e4e7"},{"type":{"text":"pixel"},"description":"Width of that rule. `1px` turns the guides on.","name":"--c2-step__guide--width","default":"0px"},{"type":{"text":"pixel"},"name":"--c2-step__marker--size","default":"16px"},{"type":{"text":"font-size"},"description":"Size of the dotted path in `marker=\"number\"`.","name":"--c2-step__marker--font-size","default":"10px"},{"type":{"text":"padding"},"description":"Breathing room either side of a dotted path, which is what turns the circle into a pill when the number is long. Only `marker=\"number\"` uses it.","name":"--c2-step__marker--padding-inline","default":"3px"},{"type":{"text":"font-weight"},"name":"--c2-step__marker--font-weight","default":"600"},{"type":{"text":"border-radius"},"name":"--c2-step__marker--border-radius","default":"999px"},{"type":{"text":"border"},"description":"The ring, drawn for the states that have no glyph of their own (`pending`, `current`, `running`) and for every `marker=\"number\"` step. A finished step is its glyph, so it has no ring.","name":"--c2-step__marker--border","default":"1px solid #bcbcc6"},{"type":{"text":"color"},"name":"--c2-step__marker--background","default":"transparent"},{"type":{"text":"color"},"name":"--c2-step__marker--color","default":"#71717a"},{"type":{"text":"pixel"},"description":"Width of the connector. `0px` is the trace look; `2px` gives a stepper its rail.","name":"--c2-step__rail--width","default":"0px"},{"type":{"text":"color"},"name":"--c2-step__rail--color","default":"#e4e4e7"},{"type":{"text":"pixel"},"description":"Space between the marker and the rail.","name":"--c2-step__rail--gap","default":"4px"},{"type":{"text":"color"},"name":"--c2-step__label--color","default":"#18181b"},{"type":{"text":"font-size"},"name":"--c2-step__label--font-size","default":"13px"},{"type":{"text":"font-weight"},"name":"--c2-step__label--font-weight","default":"500"},{"type":{"text":"font-family"},"name":"--c2-step__label--font-family","default":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},{"type":{"text":"color"},"name":"--c2-step__detail--color","default":"#71717a"},{"type":{"text":"font-size"},"description":"Falls back to the label size.","name":"--c2-step__detail--font-size"},{"type":{"text":"font-weight"},"name":"--c2-step__detail--font-weight","default":"400"},{"type":{"text":"pixel"},"description":"Space between the label and the detail when they share a line.","name":"--c2-step__detail--gap","default":"8px"},{"type":{"text":"pixel"},"description":"Space between them when they are stacked.","name":"--c2-step__detail--row-gap","default":"2px"},{"type":{"text":"flex-direction-row"},"description":"`column` puts the detail on its own line under the label, which a wizard's descriptions want. It is the only variable that switch needs: the gap and the alignment follow it.","name":"--c2-step__text--flex-direction","default":"row"},{"type":{"text":"align-items"},"description":"How the label and the detail line up across the row. Stacked, they are flush left whatever this says.","name":"--c2-step__text--align-items","default":"baseline"},{"type":{"text":"color"},"name":"--c2-step__trailing--color","default":"#71717a"},{"type":{"text":"font-size"},"description":"Falls back to the label size.","name":"--c2-step__trailing--font-size"},{"type":{"text":"font-weight"},"name":"--c2-step__trailing--font-weight","default":"400"},{"type":{"text":"color"},"description":"Marker colour when the step succeeded.","name":"--c2-step__success--color","default":"#16a34a"},{"type":{"text":"color"},"name":"--c2-step__error--color","default":"#dc2626"},{"type":{"text":"color"},"name":"--c2-step__warning--color","default":"#d97706"},{"type":{"text":"color"},"name":"--c2-step__running--color","default":"rgb(2, 101, 220)"},{"type":{"text":"color"},"name":"--c2-step__current--color","default":"rgb(2, 101, 220)"},{"type":{"text":"color"},"description":"Marker and label colour when the step was skipped.","name":"--c2-step__skipped--color","default":"#71717a"},{"type":{"text":"time"},"description":"Colour transitions, and the beat a marker gives when its status settles.","name":"--c2-step--transition-duration","default":"150ms"},{"type":{"text":"time"},"description":"How long a step arriving in a running trace takes to grow into place. `0s` turns the animation off.","name":"--c2-step--enter-duration","default":"260ms"},{"type":{"text":"translate"},"description":"How far it slides while it does.","name":"--c2-step--enter-translate","default":"-4px"}],"cssParts":[{"description":"The box around the whole step, which is what grows when a new step arrives.","name":"frame"},{"description":"The row itself: toggle, marker, text and trailing content. A group's row is its `<summary>`.","name":"row"},{"description":"The disclosure chevron of a group.","name":"toggle"},{"description":"The round marker at the start of the row.","name":"marker"},{"description":"The connector between this marker and the next.","name":"rail"},{"description":"The primary text.","name":"label"},{"description":"The dimmed secondary text.","name":"detail"},{"description":"The text at the end of the row.","name":"trailing"},{"description":"The box holding the sub-steps.","name":"children"}],"slots":[{"description":"Sub-steps. A step that has them is a group.","name":""},{"description":"Primary text. Falls back to the `label` attribute.","name":"label"},{"description":"Secondary text beside the label. Falls back to the `detail` attribute.","name":"detail"},{"description":"Content at the end of the row. Falls back to the `trailing` attribute.","name":"trailing"},{"description":"Replaces the whole marker: a custom icon, an avatar, a number of your own.","name":"marker"},{"description":"A disclosure affordance of your own — a chevron, a caret. Empty by default: a trace is a list of rows, and the row is already clickable. It is filled per step, so give a leaf an empty `<span slot=\"toggle\"></span>` to keep its rows lined up with the groups above them.","name":"toggle"}],"members":[{"kind":"field","name":"status","type":{"text":"StepStatus"},"default":"'pending'","description":"State of the step. Drives the marker glyph and the accent colour, and reopens a folded group.","attribute":"status","reflects":true},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"Primary text, when the `label` slot is empty.","attribute":"label"},{"kind":"field","name":"detail","type":{"text":"string"},"default":"''","description":"Dimmed secondary text beside the label, when the `detail` slot is empty.","attribute":"detail"},{"kind":"field","name":"trailing","type":{"text":"string"},"default":"''","description":"Text at the end of the row, when the `trailing` slot is empty.","attribute":"trailing"},{"kind":"field","name":"collapsed","type":{"text":"boolean"},"default":"false","description":"Whether this group is folded away. A group is expanded by default — every step in the list is a row you can\nsee — and only the reader, the markup or a reopening status ever changes that.","attribute":"collapsed","reflects":true},{"kind":"field","name":"level","type":{"text":"number"},"default":"0","description":"Depth of nesting. Written by the parent `c2-steps`; setting it by hand only changes the indent."},{"kind":"field","name":"position","type":{"text":"number"},"default":"1","description":"1-based position among its siblings. Written by the parent."},{"kind":"field","name":"path","type":{"text":"string"},"default":"'1'","description":"Dotted position through the tree — `3.1` for the first child of the third step. Shown by `marker=\"number\"`."},{"kind":"field","name":"last","type":{"text":"boolean"},"default":"false","description":"Whether this is the last step of its group, so the rail stops here. Written by the parent."},{"kind":"field","name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"Marker mode, written by the parent `c2-steps`."},{"kind":"field","name":"grouped","type":{"text":"boolean"},"default":"false","description":"Whether the list holds any group at all, written by the parent. A list of plain rows drops the chevron column\nrather than leaving every row inset by an empty one."},{"kind":"field","name":"hasChildren","type":{"text":"boolean"},"default":"false","description":"Whether this step has sub-steps, and so is a group. Written by the parent `c2-steps`, which walks the tree\nanyway; a step on its own works it out for itself."},{"kind":"field","name":"hasDetailSlot","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasTrailingSlot","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasToggleSlot","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"handleAnimationEnd","privacy":"private","readonly":true,"description":"`entering` is written by the parent on a step that arrived after the list was already on screen, and it is\nthe whole of the enter animation. It comes off again the moment that animation is done, so a step is never\nleft in a state that would replay it — the spinner is ignored here because it never ends."},{"kind":"method","name":"handleSlotChange","privacy":"private","parameters":[{"name":"name","type":{"text":"'detail' | 'trailing' | 'toggle'"}},{"name":"event","type":{"text":"Event"}}],"description":"These three collapse when empty, so their rows have to know whether the slot was filled."},{"kind":"method","name":"syncHasChildren","privacy":"private","description":"Astro wraps an island in `<astro-island>`, so a sub-step is rarely a literal child — look right through."},{"kind":"method","name":"handleToggle","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"renderMarker","privacy":"private"},{"kind":"method","name":"renderRowContent","privacy":"private","return":{"type":{"text":"TemplateResult"}},"description":"The row's content, identical whether it is a plain row or a group's summary."},{"kind":"method","name":"renderChildren","privacy":"private","return":{"type":{"text":"TemplateResult"}}}],"events":[{"name":"step-toggle","type":{"text":"CustomEvent<StepToggleEventDetail>"},"description":"A group was folded away or brought back. Bubbles."}],"attributes":[{"name":"status","type":{"text":"StepStatus"},"default":"'pending'","description":"State of the step. Drives the marker glyph and the accent colour, and reopens a folded group.","fieldName":"status"},{"name":"label","type":{"text":"string"},"default":"''","description":"Primary text, when the `label` slot is empty.","fieldName":"label"},{"name":"detail","type":{"text":"string"},"default":"''","description":"Dimmed secondary text beside the label, when the `detail` slot is empty.","fieldName":"detail"},{"name":"trailing","type":{"text":"string"},"default":"''","description":"Text at the end of the row, when the `trailing` slot is empty.","fieldName":"trailing"},{"name":"collapsed","type":{"text":"boolean"},"default":"false","description":"Whether this group is folded away. A group is expanded by default — every step in the list is a row you can\nsee — and only the reader, the markup or a reopening status ever changes that.","fieldName":"collapsed"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-step","customElement":true}],"exports":[{"kind":"js","name":"StepStatus","declaration":{"name":"StepStatus","module":"./step-types.js"}},{"kind":"js","name":"StepsMarker","declaration":{"name":"StepsMarker","module":"./step-types.js"}},{"kind":"js","name":"Step","declaration":{"name":"Step","module":"src/step.ts"}},{"kind":"custom-element-definition","name":"c2-step","declaration":{"name":"Step","module":"src/step.ts"}}]}]}
|
|
1
|
+
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/steps.ts","declarations":[{"kind":"class","description":"A vertical list of steps: the trace of a task as it runs, or a wizard's progress. Each row is a marker, a label,\nan optional dimmed `detail` beside it and `trailing` text at the end — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group**, and a group is a disclosure: its own row is the summary and its sub-steps\nare the detail. **Every step is a row, and every row is visible** — a group starts expanded and nothing ever\nfolds one away on its own. The chevron is there for the reader, `collapsed` in the markup starts a stage folded,\nand the run only ever brings a folded stage *back* into view when it starts running or something in it fails.\n\nAuthor it either way, and mix them freely:\n\n- **Declarative** — slot `c2-step` children and nest them for sub-steps.\n- **Data-driven** — hand it a `steps` array of `{ id, label, detail, trailing, status, children }` and it renders\n the tree itself. The array wins when both are present. During a run, `updateStep(id, patch)` changes one step\n without rebuilding the array.\n\nEverything the markup fills with a slot, the data-driven mode fills with a renderer: `renderMarker` for the\n`marker` slot, `renderToggle` for `toggle`, `renderLabel` / `renderDetail` / `renderTrailing` for the text, and\n`renderItem` for that text all at once. Each is handed the node, its depth, its position, its dotted path and\nthe status actually in effect.\n\nA parent step that does not author a `status` takes one from its children: the most urgent thing inside wins, so\na stage reports that it is running, or that something under it failed, without you setting it.\n\n`current` is the shortcut a wizard wants: set it to the index of the active step and every top-level step that\nhas neither an explicit `status` nor sub-steps becomes `success` before it, `current` at it and `pending` after.\n\nA step that arrives while the list is already on screen grows into place rather than appearing, and a marker\ngives one beat as its status settles — which is what a trace being written in front of you should look like.\n`--c2-step--enter-duration: 0s` turns the first off, and `prefers-reduced-motion` turns both off.\n\nThe connector rail between markers is drawn by CSS and off by default, because a trace does not want one — give\n`--c2-step__rail--width` a width and a stepper gets its rail.\n\nNumbering follows the tree: `marker=\"number\"` draws a dotted path, so the first child of the third step reads\n`3.1` rather than a second `1`.","name":"Steps","cssProperties":[{"type":{"text":"pixel"},"description":"Space between rows. A stepper usually wants some; a trace does not.","name":"--c2-steps--gap","default":"0px"},{"type":{"text":"color"},"name":"--c2-steps--background"},{"type":{"text":"border"},"name":"--c2-steps--border"},{"type":{"text":"border-radius"},"name":"--c2-steps--border-radius"},{"type":{"text":"padding"},"name":"--c2-steps--padding-block","default":"0px"},{"type":{"text":"padding"},"name":"--c2-steps--padding-inline","default":"0px"},{"type":{"text":"overflow"},"description":"`auto` with a `max-height` keeps a long run in its own scroller.","name":"--c2-steps--overflow-y","default":"visible"},{"type":{"text":"max-height"},"name":"--c2-steps--max-height","default":"none"}],"slots":[{"description":"The `c2-step` children. Ignored when `steps` is set.","name":""}],"members":[{"kind":"field","name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"How each marker is drawn: a status glyph, the step's number, or nothing.","attribute":"marker","reflects":true},{"kind":"field","name":"current","type":{"text":"number"},"default":"-1","description":"Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level\nstep with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and\n`pending` after it.","attribute":"current","reflects":true},{"kind":"field","name":"steps","type":{"text":"StepNode[] | undefined"},"default":"undefined","description":"The steps as data, instead of `c2-step` children. Takes precedence over the slot.","attribute":"steps"},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name for the list.","attribute":"aria-label"},{"kind":"field","name":"renderItem","type":{"text":"StepRenderer | undefined"},"description":"Replaces a row's text when rendering from `steps`, so a step can carry a badge, a link, an avatar — anything\nLit renders. It overrides `renderLabel`, `renderDetail` and `renderTrailing`, which are the finer-grained way\nto do the same thing. The marker and the disclosure are their own columns, not part of the text, so\n`renderMarker` and `renderToggle` still apply alongside it."},{"kind":"field","name":"renderMarker","type":{"text":"StepRenderer | undefined"},"description":"The step's icon when rendering from `steps` — the data-driven half of the `marker` slot. Return an `<svg>`, an\nicon element, a letter; anything Lit renders. Without one the marker draws the glyph for the step's status."},{"kind":"field","name":"renderToggle","type":{"text":"StepRenderer | undefined"},"description":"The step's disclosure affordance when rendering from `steps` — the data-driven half of the `toggle` slot."},{"kind":"field","name":"renderLabel","type":{"text":"StepRenderer | undefined"},"description":"Replaces the label when rendering from `steps`."},{"kind":"field","name":"renderDetail","type":{"text":"StepRenderer | undefined"},"description":"Replaces the dimmed detail when rendering from `steps`."},{"kind":"field","name":"renderTrailing","type":{"text":"StepRenderer | undefined"},"description":"Replaces the trailing content when rendering from `steps`."},{"kind":"field","name":"written","privacy":"private","readonly":true,"default":"new WeakMap<Element, StepStatus>()","description":"The status this element last wrote to each step, which is how it knows whether a step is still its to write.\n\n`status` reflects, and a server-rendered step arrives with the default already stamped on it, so the presence\nof the attribute proves nothing about who put it there. A step is ours while it still holds what we last gave\nit — the moment a run sets something else on it, it is the run's, for good."},{"kind":"field","name":"known","privacy":"private","readonly":true,"default":"new WeakSet<Element>()","description":"Steps this element has already laid out. A step it has not seen before is new — but only once the list itself\nhas been drawn: on the first pass every step is new, and a whole trace fading in at once is not an arrival,\nit is a page loading."},{"kind":"field","name":"hasSynced","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"observer","type":{"text":"MutationObserver | undefined"},"privacy":"private","description":"A run ticks a step over by setting `status` on it, which is nothing this element renders and so nothing Lit\nwould notice. Watching the attribute is what lets a parent roll the change up and a group open on it."},{"kind":"method","name":"updateStep","return":{"type":{"text":"boolean"}},"parameters":[{"name":"id","type":{"text":"string"}},{"name":"patch","type":{"text":"Partial<StepNode>"}}],"description":"Changes one step of `steps` in place and redraws, without rebuilding the array — what a task runner wants when\nit ticks a step over hundreds of times. Returns `false` when no step carries that `id`."},{"kind":"method","name":"expandAll","description":"Brings every group back into view."},{"kind":"method","name":"collapseAll","description":"Folds every group away, leaving the top-level stages."},{"kind":"method","name":"setCollapsedOfAll","privacy":"private","parameters":[{"name":"collapsed","type":{"text":"boolean"}}]},{"kind":"method","name":"allSteps","privacy":"private","return":{"type":{"text":"HTMLElement[]"}},"description":"Every step in the list, wherever it came from."},{"kind":"method","name":"collectSteps","privacy":"private","static":true,"return":{"type":{"text":"HTMLElement[]"}},"parameters":[{"name":"root","type":{"text":"ParentNode"}}],"description":"The nearest `c2-step` descendants of `root`, looking through anything that is not one.\n\nA step is rarely a literal child: Astro wraps every island in an `<astro-island>` (which is\n`display: contents`, so it changes nothing but the tree), and a consumer may wrap rows in a `<div>`. Matching\nonly direct children silently found nothing there, and every step kept its defaults."},{"kind":"field","name":"rootSteps","type":{"text":"HTMLElement[]"},"privacy":"private","description":"Top-level steps, whether they came from the slot or from `steps`.","readonly":true},{"kind":"method","name":"syncSteps","privacy":"private","description":"Writes depth, position and presentation onto every step, and gives a parent that authored no `status` the one\nrolled up from its children — which is why the walk returns the statuses it settled on.\n\nCheap to repeat: each value is a property assignment Lit will no-op when unchanged."},{"kind":"method","name":"mayWrite","privacy":"private","return":{"type":{"text":"boolean"}},"parameters":[{"name":"element","type":{"text":"ManagedStep"}}],"description":"Whether this element may still write a step's status. A step it has never written is its to write while the\nstep is `pending` — what \"nobody said\" looks like, from the markup or from the server. After that it is ours\nonly while it still holds the value we gave it."},{"kind":"method","name":"deriveStatus","privacy":"private","return":{"type":{"text":"StepStatus"}},"parameters":[{"name":"childStatuses","type":{"text":"StepStatus[]"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}}],"description":"A parent takes the most urgent status under it; a leaf takes the wizard's `current`, or nothing happened yet."},{"kind":"method","name":"statusOf","privacy":"private","return":{"type":{"text":"StepStatus"}},"parameters":[{"name":"node","type":{"text":"StepNode"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}}],"description":"The status a data node ends up with, so a renderer is handed what is actually drawn."},{"kind":"method","name":"renderNode","privacy":"private","return":{"type":{"text":"TemplateResult"}},"parameters":[{"name":"node","type":{"text":"StepNode"}},{"name":"level","type":{"text":"number"}},{"name":"index","type":{"text":"number"}},{"name":"parentPath","type":{"text":"string"}}]}],"events":[{"type":{"text":"CustomEvent<StepToggleEventDetail>"},"description":"Fired by a `c2-step` when a group opens or closes, and bubbling to here. `event.target` is the step; `detail.path` says where it sits.","name":"step-toggle"}],"attributes":[{"name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"How each marker is drawn: a status glyph, the step's number, or nothing.","fieldName":"marker"},{"name":"current","type":{"text":"number"},"default":"-1","description":"Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level\nstep with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and\n`pending` after it.","fieldName":"current"},{"name":"steps","type":{"text":"StepNode[] | undefined"},"default":"undefined","description":"The steps as data, instead of `c2-step` children. Takes precedence over the slot.","fieldName":"steps"},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name for the list.","fieldName":"ariaLabel"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-steps","customElement":true,"slotComponents":["c2-step"]},{"kind":"variable","name":"node"},{"kind":"variable","name":"position"},{"kind":"variable","name":"path"}],"exports":[{"kind":"js","name":"StepContext","declaration":{"name":"StepContext","module":"./step-types.js"}},{"kind":"js","name":"StepNode","declaration":{"name":"StepNode","module":"./step-types.js"}},{"kind":"js","name":"StepRenderer","declaration":{"name":"StepRenderer","module":"./step-types.js"}},{"kind":"js","name":"StepStatus","declaration":{"name":"StepStatus","module":"./step-types.js"}},{"kind":"js","name":"StepsMarker","declaration":{"name":"StepsMarker","module":"./step-types.js"}},{"kind":"js","name":"StepToggleEventDetail","declaration":{"name":"StepToggleEventDetail","module":"./step.js"}},{"kind":"js","name":"StepEventMap","declaration":{"name":"StepEventMap","module":"./step.js"}},{"kind":"js","name":"Steps","declaration":{"name":"Steps","module":"src/steps.ts"}},{"kind":"custom-element-definition","name":"c2-steps","declaration":{"name":"Steps","module":"src/steps.ts"}}]},{"kind":"javascript-module","path":"src/step.ts","declarations":[{"kind":"class","description":"One row of a Steps list: a marker, a label with optional dimmed `detail`, and `trailing` text at the end\nof the row — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group.** Nest `c2-step` children and the row becomes the summary of a disclosure\nand the children its detail, so a long run collapses to the shape of the task rather than to a wall of lines.\nThere is no second element to learn: the same tag is a leaf or a group depending on what is inside it.\n\n**Every step is a row, and every row is visible.** A group starts expanded and nothing ever folds one away on\nits own: the chevron is there for the reader, and `collapsed` in the markup starts a stage folded. The run only\never brings a stage *back* into view — a folded one reopens when it starts running (`running`, `current`) or\nwhen something in it goes wrong (`error`, `warning`).\n\n**A step is one row.** Label, detail and trailing text sit on a single line and truncate with an ellipsis rather\nthan wrapping, so a hundred-step trace stays scannable, and a sub-step is indented far enough that its marker\nlands under its parent's label. `--c2-step__text--flex-direction: column` still stacks the detail under the\nlabel, which a wizard's descriptions want — that is two lines on purpose, and each of them is still one line.\n\nThe step never sets its own depth, position or marker mode: the parent `c2-steps` writes them on every pass, so\na step used on its own renders as a single root-level row.","name":"Step","cssProperties":[{"type":{"text":"pixel"},"description":"Space between the marker, the text and the trailing content.","name":"--c2-step__row--gap","default":"10px"},{"type":{"text":"padding"},"name":"--c2-step__row--padding-block","default":"7px"},{"type":{"text":"padding"},"name":"--c2-step__row--padding-inline","default":"12px"},{"type":{"text":"pixel"},"description":"Extra inset per level of nesting. The default puts a sub-step's marker under its parent's label, which is what makes the nesting read without drawing anything.","name":"--c2-step__row--indent","default":"marker size + row gap"},{"type":{"text":"border-radius"},"name":"--c2-step__row--border-radius"},{"type":{"text":"color"},"name":"--c2-step__row--background"},{"type":{"text":"color"},"description":"Set it to make the rows respond to the pointer.","name":"--c2-step__row__hover--background"},{"type":{"text":"border"},"description":"The hairline under each row.","name":"--c2-step__row--border-bottom","default":"1px solid #e4e4e7"},{"type":{"text":"border"},"description":"Focus ring of a group's row, which is a button.","name":"--c2-step__row--outline","default":"2px solid rgb(2, 101, 220)"},{"type":{"text":"pixel"},"description":"Width of the `toggle` slot's column, when it is filled.","name":"--c2-step__toggle--size","default":"14px"},{"type":{"text":"pixel"},"description":"Space between that column and the marker.","name":"--c2-step__toggle--gap","default":"4px"},{"type":{"text":"color"},"name":"--c2-step__toggle--color","default":"#a1a1aa"},{"type":{"text":"color"},"description":"A vertical rule at each ancestor's depth, for a file-tree look. Off by default.","name":"--c2-step__guide--color","default":"#e4e4e7"},{"type":{"text":"pixel"},"description":"Width of that rule. `1px` turns the guides on.","name":"--c2-step__guide--width","default":"0px"},{"type":{"text":"pixel"},"name":"--c2-step__marker--size","default":"16px"},{"type":{"text":"font-size"},"description":"Size of the dotted path in `marker=\"number\"`.","name":"--c2-step__marker--font-size","default":"10px"},{"type":{"text":"padding"},"description":"Breathing room either side of a dotted path, which is what turns the circle into a pill when the number is long. Only `marker=\"number\"` uses it.","name":"--c2-step__marker--padding-inline","default":"3px"},{"type":{"text":"font-weight"},"name":"--c2-step__marker--font-weight","default":"600"},{"type":{"text":"border-radius"},"name":"--c2-step__marker--border-radius","default":"999px"},{"type":{"text":"border"},"description":"The ring, drawn for the states that have no glyph of their own (`pending`, `current`, `running`) and for every `marker=\"number\"` step. A finished step is its glyph, so it has no ring.","name":"--c2-step__marker--border","default":"1px solid #bcbcc6"},{"type":{"text":"color"},"name":"--c2-step__marker--background","default":"transparent"},{"type":{"text":"color"},"name":"--c2-step__marker--color","default":"#71717a"},{"type":{"text":"pixel"},"description":"Width of the connector. `0px` is the trace look; `2px` gives a stepper its rail.","name":"--c2-step__rail--width","default":"0px"},{"type":{"text":"color"},"name":"--c2-step__rail--color","default":"#e4e4e7"},{"type":{"text":"pixel"},"description":"Space between the marker and the rail.","name":"--c2-step__rail--gap","default":"4px"},{"type":{"text":"color"},"name":"--c2-step__label--color","default":"#18181b"},{"type":{"text":"font-size"},"name":"--c2-step__label--font-size","default":"13px"},{"type":{"text":"font-weight"},"name":"--c2-step__label--font-weight","default":"500"},{"type":{"text":"font-family"},"name":"--c2-step__label--font-family","default":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},{"type":{"text":"color"},"name":"--c2-step__detail--color","default":"#71717a"},{"type":{"text":"font-size"},"description":"Falls back to the label size.","name":"--c2-step__detail--font-size"},{"type":{"text":"font-weight"},"name":"--c2-step__detail--font-weight","default":"400"},{"type":{"text":"pixel"},"description":"Space between the label and the detail when they share a line.","name":"--c2-step__detail--gap","default":"8px"},{"type":{"text":"pixel"},"description":"Space between them when they are stacked.","name":"--c2-step__detail--row-gap","default":"2px"},{"type":{"text":"flex-direction-row"},"description":"`column` puts the detail on its own line under the label, which a wizard's descriptions want. It is the only variable that switch needs: the gap and the alignment follow it.","name":"--c2-step__text--flex-direction","default":"row"},{"type":{"text":"align-items"},"description":"How the label and the detail line up across the row. Stacked, they are flush left whatever this says.","name":"--c2-step__text--align-items","default":"baseline"},{"type":{"text":"color"},"name":"--c2-step__trailing--color","default":"#71717a"},{"type":{"text":"font-size"},"description":"Falls back to the label size.","name":"--c2-step__trailing--font-size"},{"type":{"text":"font-weight"},"name":"--c2-step__trailing--font-weight","default":"400"},{"type":{"text":"color"},"description":"Marker colour when the step succeeded.","name":"--c2-step__success--color","default":"#16a34a"},{"type":{"text":"color"},"name":"--c2-step__error--color","default":"#dc2626"},{"type":{"text":"color"},"name":"--c2-step__warning--color","default":"#d97706"},{"type":{"text":"color"},"name":"--c2-step__running--color","default":"rgb(2, 101, 220)"},{"type":{"text":"color"},"name":"--c2-step__current--color","default":"rgb(2, 101, 220)"},{"type":{"text":"color"},"description":"Marker and label colour when the step was skipped.","name":"--c2-step__skipped--color","default":"#71717a"},{"type":{"text":"time"},"description":"Colour transitions, and the beat a marker gives when its status settles.","name":"--c2-step--transition-duration","default":"150ms"},{"type":{"text":"time"},"description":"How long a step arriving in a running trace takes to grow into place. `0s` turns the animation off.","name":"--c2-step--enter-duration","default":"260ms"},{"type":{"text":"translate"},"description":"How far it slides while it does.","name":"--c2-step--enter-translate","default":"-4px"}],"cssParts":[{"description":"The box around the whole step, which is what grows when a new step arrives.","name":"frame"},{"description":"The row itself: toggle, marker, text and trailing content. A group's row is its `<summary>`.","name":"row"},{"description":"Disclosure region containing the assigned `toggle` slot for a group.","name":"toggle"},{"description":"Round marker region containing the `marker` slot or status fallback at the start of the row.","name":"marker"},{"description":"The connector between this marker and the next.","name":"rail"},{"description":"Primary-text region containing the `label` slot or property fallback.","name":"label"},{"description":"Secondary-text region containing the `detail` slot or property fallback.","name":"detail"},{"description":"End-aligned text region containing the `trailing` slot or property fallback.","name":"trailing"},{"description":"The box holding the sub-steps.","name":"children"}],"slots":[{"description":"Sub-steps. A step that has them is a group.","name":""},{"description":"Primary text. Falls back to the `label` attribute.","name":"label"},{"description":"Secondary text beside the label. Falls back to the `detail` attribute.","name":"detail"},{"description":"Content at the end of the row. Falls back to the `trailing` attribute.","name":"trailing"},{"description":"Replaces the whole marker: a custom icon, an avatar, a number of your own.","name":"marker"},{"description":"A disclosure affordance of your own — a chevron, a caret. Empty by default: a trace is a list of rows, and the row is already clickable. It is filled per step, so give a leaf an empty `<span slot=\"toggle\"></span>` to keep its rows lined up with the groups above them.","name":"toggle"}],"members":[{"kind":"field","name":"status","type":{"text":"StepStatus"},"default":"'pending'","description":"State of the step. Drives the marker glyph and the accent colour, and reopens a folded group.","attribute":"status","reflects":true},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"Primary text, when the `label` slot is empty.","attribute":"label"},{"kind":"field","name":"detail","type":{"text":"string"},"default":"''","description":"Dimmed secondary text beside the label, when the `detail` slot is empty.","attribute":"detail"},{"kind":"field","name":"trailing","type":{"text":"string"},"default":"''","description":"Text at the end of the row, when the `trailing` slot is empty.","attribute":"trailing"},{"kind":"field","name":"collapsed","type":{"text":"boolean"},"default":"false","description":"Whether this group is folded away. A group is expanded by default — every step in the list is a row you can\nsee — and only the reader, the markup or a reopening status ever changes that.","attribute":"collapsed","reflects":true},{"kind":"field","name":"level","type":{"text":"number"},"default":"0","description":"Depth of nesting. Written by the parent `c2-steps`; setting it by hand only changes the indent."},{"kind":"field","name":"position","type":{"text":"number"},"default":"1","description":"1-based position among its siblings. Written by the parent."},{"kind":"field","name":"path","type":{"text":"string"},"default":"'1'","description":"Dotted position through the tree — `3.1` for the first child of the third step. Shown by `marker=\"number\"`."},{"kind":"field","name":"last","type":{"text":"boolean"},"default":"false","description":"Whether this is the last step of its group, so the rail stops here. Written by the parent."},{"kind":"field","name":"marker","type":{"text":"StepsMarker"},"default":"'icon'","description":"Marker mode, written by the parent `c2-steps`."},{"kind":"field","name":"grouped","type":{"text":"boolean"},"default":"false","description":"Whether the list holds any group at all, written by the parent. A list of plain rows drops the chevron column\nrather than leaving every row inset by an empty one."},{"kind":"field","name":"hasChildren","type":{"text":"boolean"},"default":"false","description":"Whether this step has sub-steps, and so is a group. Written by the parent `c2-steps`, which walks the tree\nanyway; a step on its own works it out for itself."},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['detail', 'trailing', 'toggle'])"},{"kind":"field","name":"handleAnimationEnd","privacy":"private","readonly":true,"description":"`entering` is written by the parent on a step that arrived after the list was already on screen, and it is\nthe whole of the enter animation. It comes off again the moment that animation is done, so a step is never\nleft in a state that would replay it — the spinner is ignored here because it never ends."},{"kind":"method","name":"handleSlotChange","privacy":"private","parameters":[{"name":"name","type":{"text":"'detail' | 'trailing' | 'toggle'"}},{"name":"event","type":{"text":"Event"}}],"description":"These three collapse when empty, so their rows have to know whether the slot was filled."},{"kind":"method","name":"syncHasChildren","privacy":"private","description":"Astro wraps an island in `<astro-island>`, so a sub-step is rarely a literal child — look right through."},{"kind":"method","name":"handleToggle","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"renderMarker","privacy":"private"},{"kind":"method","name":"renderRowContent","privacy":"private","return":{"type":{"text":"TemplateResult"}},"description":"The row's content, identical whether it is a plain row or a group's summary."},{"kind":"method","name":"renderChildren","privacy":"private","return":{"type":{"text":"TemplateResult"}}}],"events":[{"name":"step-toggle","type":{"text":"CustomEvent<StepToggleEventDetail>"},"description":"A group was folded away or brought back. Bubbles."}],"attributes":[{"name":"status","type":{"text":"StepStatus"},"default":"'pending'","description":"State of the step. Drives the marker glyph and the accent colour, and reopens a folded group.","fieldName":"status"},{"name":"label","type":{"text":"string"},"default":"''","description":"Primary text, when the `label` slot is empty.","fieldName":"label"},{"name":"detail","type":{"text":"string"},"default":"''","description":"Dimmed secondary text beside the label, when the `detail` slot is empty.","fieldName":"detail"},{"name":"trailing","type":{"text":"string"},"default":"''","description":"Text at the end of the row, when the `trailing` slot is empty.","fieldName":"trailing"},{"name":"collapsed","type":{"text":"boolean"},"default":"false","description":"Whether this group is folded away. A group is expanded by default — every step in the list is a row you can\nsee — and only the reader, the markup or a reopening status ever changes that.","fieldName":"collapsed"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-step","customElement":true}],"exports":[{"kind":"js","name":"StepStatus","declaration":{"name":"StepStatus","module":"./step-types.js"}},{"kind":"js","name":"StepsMarker","declaration":{"name":"StepsMarker","module":"./step-types.js"}},{"kind":"js","name":"Step","declaration":{"name":"Step","module":"src/step.ts"}},{"kind":"custom-element-definition","name":"c2-step","declaration":{"name":"Step","module":"src/step.ts"}}]}]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import { property, state } from "lit/decorators.js";
|
|
3
2
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
3
|
+
import { property } from "@c2n/core/lit-helper.js";
|
|
4
4
|
import { classMap } from "lit/directives/class-map.js";
|
|
5
|
+
import { SlotPresenceController } from "@c2n/core/dom-helper.js";
|
|
5
6
|
//#region src/step-icons.ts
|
|
6
7
|
/** What a screen reader reads for each status, since the marker is a glyph. */
|
|
7
8
|
var STATUS_LABELS = {
|
|
@@ -81,9 +82,11 @@ var Step = class Step extends LitElement {
|
|
|
81
82
|
this.marker = "icon";
|
|
82
83
|
this.grouped = false;
|
|
83
84
|
this.hasChildren = false;
|
|
84
|
-
this.
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
this.slotPresence = new SlotPresenceController(this, [
|
|
86
|
+
"detail",
|
|
87
|
+
"trailing",
|
|
88
|
+
"toggle"
|
|
89
|
+
]);
|
|
87
90
|
this.handleAnimationEnd = (event) => {
|
|
88
91
|
const name = event.animationName;
|
|
89
92
|
if (name.includes("step-enter") && event.target === this) this.removeAttribute("entering");
|
|
@@ -98,15 +101,13 @@ var Step = class Step extends LitElement {
|
|
|
98
101
|
this.setAttribute("role", "listitem");
|
|
99
102
|
this.addEventListener("animationend", this.handleAnimationEnd);
|
|
100
103
|
this.renderRoot.addEventListener("animationend", this.handleAnimationEnd);
|
|
104
|
+
this.syncHasChildren();
|
|
101
105
|
}
|
|
102
106
|
disconnectedCallback() {
|
|
103
107
|
this.removeEventListener("animationend", this.handleAnimationEnd);
|
|
104
108
|
this.renderRoot.removeEventListener("animationend", this.handleAnimationEnd);
|
|
105
109
|
super.disconnectedCallback();
|
|
106
110
|
}
|
|
107
|
-
firstUpdated() {
|
|
108
|
-
this.syncHasChildren();
|
|
109
|
-
}
|
|
110
111
|
willUpdate(changed) {
|
|
111
112
|
if (!changed.has("status") || changed.get("status") === void 0) return;
|
|
112
113
|
if (STATUS_REOPENS.has(this.status)) this.collapsed = false;
|
|
@@ -128,10 +129,7 @@ var Step = class Step extends LitElement {
|
|
|
128
129
|
}
|
|
129
130
|
/** These three collapse when empty, so their rows have to know whether the slot was filled. */
|
|
130
131
|
handleSlotChange(name, event) {
|
|
131
|
-
|
|
132
|
-
if (name === "detail") this.hasDetailSlot = filled;
|
|
133
|
-
else if (name === "trailing") this.hasTrailingSlot = filled;
|
|
134
|
-
else this.hasToggleSlot = filled;
|
|
132
|
+
this.slotPresence.handleSlotChange(event);
|
|
135
133
|
}
|
|
136
134
|
/** Astro wraps an island in `<astro-island>`, so a sub-step is rarely a literal child — look right through. */
|
|
137
135
|
syncHasChildren() {
|
|
@@ -147,10 +145,10 @@ var Step = class Step extends LitElement {
|
|
|
147
145
|
}
|
|
148
146
|
/** The row's content, identical whether it is a plain row or a group's summary. */
|
|
149
147
|
renderRowContent() {
|
|
150
|
-
const detail = this.detail || this.
|
|
151
|
-
const trailing = this.trailing || this.
|
|
148
|
+
const detail = this.detail || this.slotPresence.has("detail");
|
|
149
|
+
const trailing = this.trailing || this.slotPresence.has("trailing");
|
|
152
150
|
return html`
|
|
153
|
-
<span class="c2-step__toggle" part="toggle" aria-hidden="true" ?hidden=${!this.
|
|
151
|
+
<span class="c2-step__toggle" part="toggle" aria-hidden="true" ?hidden=${!this.slotPresence.has("toggle")}>
|
|
154
152
|
<slot name="toggle" @slotchange=${(event) => this.handleSlotChange("toggle", event)}></slot>
|
|
155
153
|
</span>
|
|
156
154
|
<span class="c2-step__gutter">
|
|
@@ -212,9 +210,6 @@ __decorate([property({ attribute: false })], Step.prototype, "last", void 0);
|
|
|
212
210
|
__decorate([property({ attribute: false })], Step.prototype, "marker", void 0);
|
|
213
211
|
__decorate([property({ attribute: false })], Step.prototype, "grouped", void 0);
|
|
214
212
|
__decorate([property({ attribute: false })], Step.prototype, "hasChildren", void 0);
|
|
215
|
-
__decorate([state()], Step.prototype, "hasDetailSlot", void 0);
|
|
216
|
-
__decorate([state()], Step.prototype, "hasTrailingSlot", void 0);
|
|
217
|
-
__decorate([state()], Step.prototype, "hasToggleSlot", void 0);
|
|
218
213
|
Step = __decorate([customElement("c2-step")], Step);
|
|
219
214
|
//#endregion
|
|
220
215
|
export { __decorate as n, rollupStatus as r, Step as t };
|
package/dist/step.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Step } from "./step-
|
|
1
|
+
import { t as Step } from "./step-ba5pZZlB.js";
|
|
2
2
|
export { Step };
|
package/dist/steps.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { n as __decorate, r as rollupStatus } from "./step-
|
|
1
|
+
import { n as __decorate, r as rollupStatus } from "./step-ba5pZZlB.js";
|
|
2
2
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
3
|
-
import { property } from "lit/decorators.js";
|
|
4
3
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
4
|
import { repeat } from "lit/directives/repeat.js";
|
|
6
5
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
7
|
-
import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
|
|
6
|
+
import { jsonPropertyConverter, property } from "@c2n/core/lit-helper.js";
|
|
8
7
|
//#region src/steps.scss?inline
|
|
9
8
|
var steps_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--c2-steps--gap,0px);\n box-sizing: border-box;\n max-height: var(--c2-steps--max-height,none);\n overflow-y: var(--c2-steps--overflow-y,visible);\n padding: var(--c2-steps--padding-block,0px) var(--c2-steps--padding-inline,0px);\n background: var(--c2-steps--background);\n border: var(--c2-steps--border);\n border-radius: var(--c2-steps--border-radius);\n}\n\n:host([hidden]) {\n display: none;\n}";
|
|
10
9
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/steps",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/steps.js",
|
|
6
6
|
"exports": {
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
}
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@c2n/core": "0.0.
|
|
77
|
+
"@c2n/core": "0.0.14",
|
|
78
78
|
"lit": "3.3.3"
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
81
|
"@c2n/config": "*"
|
|
82
82
|
},
|
|
83
83
|
"customElements": "custom-elements.json",
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
|
|
85
85
|
}
|
package/types/src/step.d.ts
CHANGED
|
@@ -54,12 +54,12 @@ export interface Step {
|
|
|
54
54
|
*
|
|
55
55
|
* @csspart frame - The box around the whole step, which is what grows when a new step arrives.
|
|
56
56
|
* @csspart row - The row itself: toggle, marker, text and trailing content. A group's row is its `<summary>`.
|
|
57
|
-
* @csspart toggle -
|
|
58
|
-
* @csspart marker -
|
|
57
|
+
* @csspart toggle - Disclosure region containing the assigned `toggle` slot for a group.
|
|
58
|
+
* @csspart marker - Round marker region containing the `marker` slot or status fallback at the start of the row.
|
|
59
59
|
* @csspart rail - The connector between this marker and the next.
|
|
60
|
-
* @csspart label -
|
|
61
|
-
* @csspart detail -
|
|
62
|
-
* @csspart trailing -
|
|
60
|
+
* @csspart label - Primary-text region containing the `label` slot or property fallback.
|
|
61
|
+
* @csspart detail - Secondary-text region containing the `detail` slot or property fallback.
|
|
62
|
+
* @csspart trailing - End-aligned text region containing the `trailing` slot or property fallback.
|
|
63
63
|
* @csspart children - The box holding the sub-steps.
|
|
64
64
|
*
|
|
65
65
|
* @cssproperty {pixel} [--c2-step__row--gap=10px] - Space between the marker, the text and the trailing content.
|
|
@@ -152,9 +152,7 @@ export declare class Step extends LitElement {
|
|
|
152
152
|
* anyway; a step on its own works it out for itself.
|
|
153
153
|
*/
|
|
154
154
|
hasChildren: boolean;
|
|
155
|
-
private
|
|
156
|
-
private hasTrailingSlot;
|
|
157
|
-
private hasToggleSlot;
|
|
155
|
+
private readonly slotPresence;
|
|
158
156
|
connectedCallback(): void;
|
|
159
157
|
disconnectedCallback(): void;
|
|
160
158
|
/**
|
|
@@ -163,7 +161,6 @@ export declare class Step extends LitElement {
|
|
|
163
161
|
* left in a state that would replay it — the spinner is ignored here because it never ends.
|
|
164
162
|
*/
|
|
165
163
|
private readonly handleAnimationEnd;
|
|
166
|
-
protected firstUpdated(): void;
|
|
167
164
|
protected willUpdate(changed: PropertyValues): void;
|
|
168
165
|
protected updated(changed: PropertyValues): void;
|
|
169
166
|
/** These three collapse when empty, so their rows have to know whether the slot was filled. */
|
package/types/src/step.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKpG,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI9D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE9D,kDAAkD;AAClD,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,uGAAuG;IACvG,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,aAAa,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,IAAI;IACnB,gBAAgB,EAAE,qBAAqB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAC3D,mBAAmB,EAAE,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;CAClE;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,oGAAoG;IACvE,MAAM,EAAE,UAAU,CAAY;IAE3D,oDAAoD;IACxC,KAAK,SAAK;IAEtB,+EAA+E;IACnE,MAAM,SAAK;IAEvB,qEAAqE;IACzD,QAAQ,SAAK;IAEzB;;;OAGG;IACyC,SAAS,UAAQ;IAE7D,sGAAsG;IACtE,KAAK,SAAI;IAEzC,kEAAkE;IAClC,QAAQ,SAAI;IAE5C,kHAAkH;IAClF,IAAI,SAAM;IAE1C,iGAAiG;IACjE,IAAI,UAAQ;IAE5C,qDAAqD;IACrB,MAAM,EAAE,WAAW,CAAS;IAE5D;;;OAGG;IAC6B,OAAO,UAAQ;IAE/C;;;OAGG;IAC6B,WAAW,UAAQ;IAEnD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAqE;IAEzF,iBAAiB;IAUjB,oBAAoB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIlC;cAEkB,UAAU,CAAC,OAAO,EAAE,cAAc;cAOlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAclD,+FAA+F;IAC/F,OAAO,CAAC,gBAAgB;IAKxB,+GAA+G;IAC/G,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAMpB,mFAAmF;IACnF,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,cAAc;IAQb,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}
|
package/types/src/steps.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAK/E,OAAO,KAAK,EAAe,QAAQ,EAAE,YAAY,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAInG,OAAO,WAAW,CAAA;AAElB,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACnG,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAgBpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,+EAA+E;IAClD,MAAM,EAAE,WAAW,CAAS;IAEzD;;;;OAIG;IACwC,OAAO,SAAK;IAEvD,wFAAwF;IACxC,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAY;IAEzF,oCAAoC;IACY,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAE/E;;;;;OAKG;IAC6B,UAAU,CAAC,EAAE,YAAY,CAAA;IAEzD;;;OAGG;IAC6B,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,gHAAgH;IAChF,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,sDAAsD;IACtB,WAAW,CAAC,EAAE,YAAY,CAAA;IAE1D,8DAA8D;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,iEAAiE;IACjC,cAAc,CAAC,EAAE,YAAY,CAAA;IAE7D;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAqC;IAE7D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAyB;IAC/C,OAAO,CAAC,SAAS,CAAQ;IAEzB;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAE1B,iBAAiB;IAOjB,oBAAoB;cAKV,OAAO;IAI1B;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO;IAgBzD,yCAAyC;IACzC,SAAS;IAIT,4DAA4D;IAC5D,WAAW;IAIX,OAAO,CAAC,iBAAiB;IAIzB,qDAAqD;IACrD,OAAO,CAAC,QAAQ;IAKhB;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAS3B,wEAAwE;IACxE,OAAO,KAAK,SAAS,GAIpB;IAED;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IAoCjB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAKhB,oHAAoH;IACpH,OAAO,CAAC,YAAY;IAMpB,2FAA2F;IAC3F,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,UAAU;IA4BT,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}
|