@adia-ai/web-components 0.0.13 → 0.0.15

package/components/index.js

@@ -3,6 +3,12 @@
  * Import this single file to register all custom elements.
  */
 
+/* Side-effect import — auto-attaches the document-level MutationObserver
+   that drives `data-stream-*` attribute behavior on any element with a
+   settable `.data` property (chart-ui, table-ui, heatmap-ui, stat-ui,
+   list-ui). See packages/web-components/core/data-stream.js. */
+import '../core/data-stream.js';
+
 export { AdiaIcon } from './icon/icon.js';
 export { AdiaButton } from './button/button.js';
 export { AdiaInput } from './input/input.js';
@@ -48,6 +54,7 @@ export { AdiaRow }   from './row/row.js';
 export { AdiaGrid }  from './grid/grid.js';
 export { AdiaStack } from './stack/stack.js';
 export { AdiaChart } from './chart/chart.js';
+export { AdiaChartLegend } from './chart-legend/chart-legend.js';
 export { AdiaPopover } from './popover/popover.js';
 export { AdiaAccordion, AdiaAccordionItem } from './accordion/accordion.js';
 export { AdiaDivider } from './divider/divider.js';

package/components/input/input.css

@@ -23,6 +23,7 @@
     --input-easing:          var(--a-easing);
 
     /* ── State: hover/focus ── */
+    --input-bg-hover:        var(--a-ui-bg-hover);
     --input-fg-hover:        var(--a-fg);
     --input-affix-fg-hover:  var(--a-fg-subtle);
     --input-fg-focus:        var(--a-fg);
@@ -72,6 +73,7 @@
     transition: border-color var(--input-duration) var(--input-easing);
   }
   :scope:not([disabled]) [slot="field"]:hover {
+    background: var(--input-bg-hover);
     border-color: var(--input-border-hover);
     color: var(--input-fg-hover);
   }

package/components/stat/stat.a2ui.json

@@ -83,6 +83,9 @@
       "change": {
         "description": "Child content region for the `change` slot."
       },
+      "chart": {
+        "description": "Inline sparkline / mini-chart slot. Typically a `<chart-ui slot=\"chart\" type=\"sparkline\">` positioned to the right of the value + change rows. The grid reflows to give the chart a sized right-column region; authors can use any chart type but sparklines / small bar variants read best."
+      },
       "icon": {
         "description": "Icon region — single icon-ui child."
       },

package/components/stat/stat.css

@@ -35,6 +35,38 @@
     align-items: baseline;
   }
 
+  /* ── Chart slot (inline sparkline) ──
+     When an author adds <chart-ui slot="chart"> (or any sparkline-shape
+     child), the grid reflows so the chart occupies the right column
+     across the value + change rows, fixed to the stat's right edge.
+     Hero number and chart read as a single visual unit. */
+  :scope:has([slot="chart"]) {
+    grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
+    grid-template-areas:
+      "label  icon"
+      "value  chart"
+      "change chart";
+    align-items: end;
+  }
+
+  /* Cap the chart slot at a sparkline-appropriate size — otherwise the
+     chart's default aspect ratio stretches the row heights and bloats
+     the whole card. Consumers who want a taller inline chart can
+     override --stat-chart-max-height on the host. Uses `chart-ui[slot]`
+     compound selector to beat chart-ui's own `:scope { max-height: 28rem }`
+     (specificity 0,1,1 beats 0,0,1). `[slot="chart"]` alone is (0,1,0)
+     — enough on paper but empirically losing to chart-ui's own scope in
+     practice; the type selector makes it explicit. */
+  [slot="chart"] {
+    grid-area: chart;
+    align-self: center;
+    min-width: 0;
+    width: 100%;
+  }
+  chart-ui[slot="chart"] {
+    max-height: var(--stat-chart-max-height, 3rem);
+  }
+
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;

package/components/stat/stat.yaml

@@ -41,6 +41,12 @@ slots:
     description: "Label region — control label."
   value:
     description: "Child content region for the `value` slot."
+  chart:
+    description: >-
+      Inline sparkline / mini-chart slot. Typically a `<chart-ui slot="chart"
+      type="sparkline">` positioned to the right of the value + change rows.
+      The grid reflows to give the chart a sized right-column region; authors
+      can use any chart type but sparklines / small bar variants read best.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/textarea/textarea.css

@@ -22,6 +22,7 @@
     --textarea-easing:          var(--a-easing);
 
     /* ── State ── */
+    --textarea-bg-hover:        var(--a-ui-bg-hover);
     --textarea-fg-hover:        var(--a-fg);
     --textarea-label-fg-focus:  var(--a-fg-subtle);
     --textarea-bg-disabled:     var(--a-ui-bg-disabled);
@@ -66,6 +67,7 @@
     transition: border-color var(--textarea-duration) var(--textarea-easing);
   }
   :scope:not([disabled]) [slot="text"]:hover {
+    background: var(--textarea-bg-hover);
     border-color: var(--textarea-border-hover);
     color: var(--textarea-fg-hover);
   }

package/components/tooltip/tooltip.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Tooltip.json",
   "title": "Tooltip",
-  "description": "Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.",
+  "description": "Tooltip popup. Two modes — default `follows=\"trigger\"` shows on hover/focus anchored to wrapped children; `follows=\"pointer\"` subscribes to chart-hover events from [for] and renders a data-viz card that tracks the pointer.",
   "type": "object",
   "allOf": [
     {
@@ -17,12 +17,37 @@
       "const": "Tooltip"
     },
     "delay": {
-      "description": "Delay in milliseconds before showing the tooltip on hover.",
+      "description": "Delay in milliseconds before showing the tooltip on hover (trigger mode only).",
       "type": "number",
       "default": 400
     },
+    "follows": {
+      "description": "`trigger` (default) pins to wrapped children via hover/focus. `pointer` subscribes to chart-hover/chart-leave events from [for] and positions at the pointer coordinates — used by chart-ui / heatmap-ui.",
+      "type": "string",
+      "enum": [
+        "trigger",
+        "pointer"
+      ],
+      "default": "trigger"
+    },
+    "for": {
+      "description": "id-ref of a chart-ui / heatmap-ui to follow. Required when follows=pointer. The target must dispatch `chart-hover` and `chart-leave` events.",
+      "type": "string",
+      "default": ""
+    },
+    "indicator": {
+      "description": "Color swatch shown beside each value row in pointer mode. `none` omits the swatch. Swatch color reads `--tooltip-indicator-color` which the host injects per-row from `--color-{seriesKey}`.",
+      "type": "string",
+      "enum": [
+        "none",
+        "dot",
+        "line",
+        "dashed"
+      ],
+      "default": "none"
+    },
     "placement": {
-      "description": "Preferred position relative to the anchor element.",
+      "description": "Preferred position relative to the anchor element (trigger mode only).",
       "type": "string",
       "enum": [
         "top",
@@ -37,7 +62,7 @@
       "default": "top"
     },
     "text": {
-      "description": "Tooltip text content displayed in the overlay.",
+      "description": "Tooltip text content displayed in the overlay (trigger mode only).",
       "type": "string",
       "default": ""
     }

package/components/tooltip/tooltip.css

@@ -37,3 +37,114 @@
 .tooltip-popup:popover-open {
   display: block;
 }
+
+/* ── Pointer-follow mode (chart/heatmap) ──
+   Richer card: surface bg (not inverse), multi-row layout, indicator dot
+   per row reads `--tooltip-indicator-color` which the host injects per-row.
+   Copies `--color-{key}` + `--chart-0..9` from the target chart at show
+   time so series-keyed colors resolve despite the top-layer cascade break. */
+.tooltip-popup[data-follows="pointer"] {
+  --tooltip-indicator-size:  var(--a-space-2-5);
+  --tooltip-label-weight:    var(--a-weight-medium);
+  --tooltip-value-weight:    var(--a-weight-semibold);
+
+  /* Sized to its content — shared tooltip width reads as too wide for
+     short messages ("Mar 48") and doesn't help long ones either. max-width
+     prevents runaway text when values are long. */
+  width: max-content;
+  max-width: 18rem;
+  padding: var(--a-space-2) var(--a-space-3);
+  background: var(--a-canvas-0);
+  color: var(--a-fg);
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-radius-md);
+  box-shadow: var(--a-shadow-md);
+  font-size: var(--a-ui-tiny);
+  white-space: normal;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-space-0-5);
+
+  /* Elastic pointer follow — smooth the left/top updates so the tooltip
+     trails the pointer briefly rather than snapping on every mousemove.
+     Short ease-out duration keeps it snappy; prefers-reduced-motion drops
+     the transition entirely below. */
+  transition: left var(--a-duration-fast) var(--a-easing-out),
+              top  var(--a-duration-fast) var(--a-easing-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-popup[data-follows="pointer"] {
+    transition: none;
+  }
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-role="label"] {
+  color: var(--a-fg-subtle);
+  font-weight: var(--tooltip-label-weight);
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-role="series"] {
+  color: var(--a-fg-subtle);
+  font-size: calc(var(--a-ui-tiny) * 0.95);
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-row] {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--a-space-1) var(--a-space-2);
+  padding: 1px 0;
+}
+
+/* Multi-series mode: the row the pointer is actually over gets a
+   brighter name weight to stand out from the other series rows. */
+.tooltip-popup[data-follows="pointer"] [data-tip-row][data-hovered] [data-tip-role="name"],
+.tooltip-popup[data-follows="pointer"] [data-tip-row][data-hovered] [data-tip-role="value"] {
+  color: var(--a-fg-strong);
+  font-weight: var(--a-weight-semibold);
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-role="name"] {
+  color: var(--a-fg-subtle);
+  font-weight: var(--a-weight-regular);
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-role="value"] {
+  font-weight: var(--tooltip-value-weight);
+  color: var(--a-fg);
+}
+
+.tooltip-popup[data-follows="pointer"] [data-tip-role="pct"] {
+  color: var(--a-fg-subtle);
+  font-weight: var(--a-weight-regular);
+}
+
+/* Indicator variants — dot / line / dashed */
+.tooltip-popup[data-follows="pointer"][data-indicator="dot"] [data-indicator] {
+  display: inline-block;
+  width: var(--tooltip-indicator-size);
+  height: var(--tooltip-indicator-size);
+  border-radius: 50%;
+  background: var(--tooltip-indicator-color, var(--chart-0));
+  flex-shrink: 0;
+}
+
+.tooltip-popup[data-follows="pointer"][data-indicator="line"] [data-indicator] {
+  display: inline-block;
+  width: calc(var(--tooltip-indicator-size) * 1.6);
+  height: 2px;
+  background: var(--tooltip-indicator-color, var(--chart-0));
+  flex-shrink: 0;
+}
+
+.tooltip-popup[data-follows="pointer"][data-indicator="dashed"] [data-indicator] {
+  display: inline-block;
+  width: calc(var(--tooltip-indicator-size) * 1.6);
+  border-top: 2px dashed var(--tooltip-indicator-color, var(--chart-0));
+  flex-shrink: 0;
+}
+
+.tooltip-popup[data-follows="pointer"][data-indicator="none"] [data-indicator] {
+  display: none;
+}

package/components/tooltip/tooltip.js

@@ -3,9 +3,17 @@
  *   <button-ui text="Hover me"></button-ui>
  * </tooltip-ui>
  *
- * Tooltip popup. Wraps its children and shows a popover on hover/focus.
- * Uses Popover API (popover="manual") for top-layer rendering.
- * Positioned via anchorPopover() from @core/anchor.js.
+ * <!-- Pointer-follow mode: used by chart-ui to show a richer card that
+ *      tracks the cursor across datums. -->
+ * <tooltip-ui follows="pointer" for="my-chart" indicator="dot"></tooltip-ui>
+ *
+ * Tooltip popup. Two modes:
+ *
+ * 1. `follows="trigger"` (default) — wraps children and shows on hover/focus,
+ *    anchored to the trigger via @core/anchor.js + Popover API.
+ * 2. `follows="pointer"` — subscribes to `chart-hover`/`chart-leave` events
+ *    from `[for]`, renders a card with label + indicator + value rows, and
+ *    positions at the pointer coordinates. Used by chart-ui / heatmap-ui.
  *
  * No click interaction — hover/focus only.
  */
@@ -15,9 +23,12 @@ import { anchorPopover } from '../../core/anchor.js';
 
 class AdiaTooltip extends AdiaElement {
   static properties = {
-    text:      { type: String,  default: '', reflect: true },
-    placement: { type: String,  default: 'top', reflect: true },
-    delay:     { type: Number,  default: 400, reflect: true },
+    text:      { type: String,  default: '',         reflect: true },
+    placement: { type: String,  default: 'top',      reflect: true },
+    delay:     { type: Number,  default: 400,        reflect: true },
+    follows:   { type: String,  default: 'trigger',  reflect: true },  // trigger | pointer
+    for:       { type: String,  default: '',         reflect: true },
+    indicator: { type: String,  default: 'none',     reflect: true },  // none | dot | line | dashed
   };
 
   static template = () => null;
@@ -26,11 +37,21 @@ class AdiaTooltip extends AdiaElement {
   #timer = null;
   #cleanup = null;
 
+  /* Pointer-follow mode state */
+  #target = null;
+  #hoverHandler = null;
+  #leaveHandler = null;
+  #lastDetail = null;
+
   connected() {
-    this.addEventListener('mouseenter', this.#onEnter);
-    this.addEventListener('focusin', this.#onEnter);
-    this.addEventListener('mouseleave', this.#onLeave);
-    this.addEventListener('focusout', this.#onLeave);
+    if (this.follows === 'pointer') {
+      this.#attachPointerFollow();
+    } else {
+      this.addEventListener('mouseenter', this.#onEnter);
+      this.addEventListener('focusin', this.#onEnter);
+      this.addEventListener('mouseleave', this.#onLeave);
+      this.addEventListener('focusout', this.#onLeave);
+    }
   }
 
   disconnected() {
@@ -38,12 +59,19 @@ class AdiaTooltip extends AdiaElement {
     this.removeEventListener('focusin', this.#onEnter);
     this.removeEventListener('mouseleave', this.#onLeave);
     this.removeEventListener('focusout', this.#onLeave);
+    this.#detachPointerFollow();
     this.#hide();
   }
 
   render() {
-    // Update popover text if already showing
-    if (this.#popover) this.#popover.textContent = this.text;
+    // Trigger mode: update popover text if already showing
+    if (this.#popover && this.follows !== 'pointer') {
+      this.#popover.textContent = this.text;
+    }
+    // Pointer mode: re-paint content with current indicator if visible
+    if (this.#popover && this.follows === 'pointer' && this.#lastDetail) {
+      this.#paintPointerContent(this.#lastDetail);
+    }
   }
 
   #onEnter = () => {
@@ -89,6 +117,173 @@ class AdiaTooltip extends AdiaElement {
     try { this.#popover.hidePopover(); } catch (_) { /* popover not supported */ }
     this.#popover.remove();
     this.#popover = null;
+    this.#lastDetail = null;
+  }
+
+  /* ── Pointer-follow mode (chart/heatmap integration) ─────────────── */
+
+  #attachPointerFollow() {
+    this.#detachPointerFollow();
+    if (!this.for) return;
+
+    const root = this.getRootNode();
+    this.#target = (root && root.getElementById) ? root.getElementById(this.for) : document.getElementById(this.for);
+    if (!this.#target) {
+      // Warn once per (element, id) pair
+      if (!AdiaTooltip._warnedMissing) AdiaTooltip._warnedMissing = new WeakSet();
+      if (!AdiaTooltip._warnedMissing.has(this)) {
+        console.warn(`[tooltip-ui] follows="pointer" [for="${this.for}"] did not resolve to an element.`);
+        AdiaTooltip._warnedMissing.add(this);
+      }
+      return;
+    }
+
+    this.#hoverHandler = (e) => this.#onChartHover(e);
+    this.#leaveHandler = () => this.#hide();
+    this.#target.addEventListener('chart-hover', this.#hoverHandler);
+    this.#target.addEventListener('chart-leave', this.#leaveHandler);
+  }
+
+  #detachPointerFollow() {
+    if (this.#target && this.#hoverHandler) this.#target.removeEventListener('chart-hover', this.#hoverHandler);
+    if (this.#target && this.#leaveHandler) this.#target.removeEventListener('chart-leave', this.#leaveHandler);
+    this.#target = null;
+    this.#hoverHandler = null;
+    this.#leaveHandler = null;
+  }
+
+  #onChartHover(event) {
+    const detail = event.detail;
+    if (!detail) return;
+    this.#lastDetail = detail;
+
+    if (!this.#popover) {
+      this.#popover = this.#createPopover();
+      this.#copySeriesColorsFromTarget();
+      try { this.#popover.showPopover(); } catch (_) { /* unsupported */ }
+    }
+
+    this.#paintPointerContent(detail);
+    this.#positionAtPointer(detail.pointerX, detail.pointerY);
+  }
+
+  #createPopover() {
+    const el = document.createElement('div');
+    el.setAttribute('popover', 'manual');
+    el.setAttribute('role', 'tooltip');
+    el.setAttribute('data-follows', 'pointer');
+    el.setAttribute('data-indicator', this.indicator || 'none');
+    el.classList.add('tooltip-popup');
+    document.body.appendChild(el);
+    return el;
+  }
+
+  /* Copy per-series `--color-{key}` custom properties from the target chart
+     to the popover so inner rows can reference them. The popover lives in
+     the top layer and does NOT inherit custom properties from the host,
+     so we bridge them explicitly at show time. */
+  #copySeriesColorsFromTarget() {
+    if (!this.#target || !this.#popover) return;
+    /* Prefer inline style on the target (what chart-ui's #injectSeriesColors
+       writes). Fall back to computed style resolution for any --color-* vars
+       the author set on ancestors. */
+    const inline = this.#target.style;
+    for (let i = 0; i < inline.length; i++) {
+      const name = inline[i];
+      if (name.startsWith('--color-')) {
+        this.#popover.style.setProperty(name, inline.getPropertyValue(name));
+      }
+    }
+    /* Also copy the 10 categorical palette slots so the fallback
+       `var(--color-{key}, var(--chart-{slot}))` resolves. */
+    const cs = getComputedStyle(this.#target);
+    for (let i = 0; i < 10; i++) {
+      const v = cs.getPropertyValue(`--chart-${i}`).trim();
+      if (v) this.#popover.style.setProperty(`--chart-${i}`, v);
+    }
+  }
+
+  #paintPointerContent(detail) {
+    if (!this.#popover) return;
+    const { label, value, pct, series, slot, payload } = detail;
+    const indicator = this.indicator || 'none';
+
+    /* OD-CHART-05 — when `detail.payload` is an array (multi-series hover),
+       render one row per payload entry with the hovered series marked.
+       Fall back to the top-level single-datum shape for back-compat with
+       charts that don't emit a payload (categorical, single-series). */
+    const rows = Array.isArray(payload) && payload.length > 0
+      ? payload
+      : [{ series, label, value, pct, slot, hovered: true }];
+
+    const parts = [];
+
+    /* Label at the top — shared across all rows when a payload is
+       present (all series are at the same X column). */
+    if (label != null) {
+      parts.push(`<span data-tip-role="label">${this.#esc(String(label))}</span>`);
+    }
+
+    for (const row of rows) {
+      const rSeries = row.series ?? null;
+      const rValue  = row.value;
+      const rPct    = row.pct;
+      const rSlot   = row.slot != null ? row.slot : 0;
+      const indicatorColor = rSeries
+        ? `var(--color-${rSeries}, var(--chart-${rSlot}))`
+        : `var(--chart-${rSlot})`;
+
+      if (rValue == null && rPct == null) continue;
+
+      const valueStr = rValue != null ? this.#esc(String(rValue)) : '';
+      const pctStr = rPct != null ? `<span data-tip-role="pct"> (${rPct}%)</span>` : '';
+      const indEl = indicator !== 'none'
+        ? `<span data-indicator style="--tooltip-indicator-color: ${indicatorColor}"></span>`
+        : '';
+      const nameEl = rSeries
+        ? `<span data-tip-role="name">${this.#esc(rSeries)}</span>`
+        : '';
+      const hoveredAttr = row.hovered ? ' data-hovered' : '';
+
+      parts.push(`<span data-tip-row${hoveredAttr}>${indEl}${nameEl}<span data-tip-role="value">${valueStr}${pctStr}</span></span>`);
+    }
+
+    this.#popover.setAttribute('data-indicator', indicator);
+    this.#popover.setAttribute('aria-live', 'polite');
+    this.#popover.innerHTML = parts.join('');
+  }
+
+  #positionAtPointer(x, y) {
+    if (!this.#popover || x == null || y == null) return;
+    const gap = 12;
+    const edgePad = 8;
+    const popover = this.#popover;
+    popover.style.position = 'fixed';
+    popover.style.left = '0';
+    popover.style.top = '0';
+    /* Force reflow to read offset dimensions now that content changed */
+    const tw = popover.offsetWidth  || 0;
+    const th = popover.offsetHeight || 0;
+    /* Default: centered horizontally above the cursor, gap px clear of
+       the cursor. Clamp horizontally to viewport with edgePad on each
+       side (short tooltips near the viewport edge scoot inward rather
+       than drifting off-screen). Flip vertically when there's not
+       enough room above. */
+    let px = x - tw / 2;
+    let py = y - th - gap;
+    if (px < edgePad)                        px = edgePad;
+    if (px + tw > window.innerWidth - edgePad) px = window.innerWidth - tw - edgePad;
+    if (py < edgePad)                        py = y + gap;
+    popover.style.left = `${px}px`;
+    popover.style.top  = `${py}px`;
+  }
+
+  #esc(s) {
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
   }
 }
 customElements.define('tooltip-ui', AdiaTooltip);

package/components/tooltip/tooltip.yaml

@@ -6,14 +6,17 @@ tag: tooltip-ui
 component: Tooltip
 category: container
 version: 1
-description: Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.
+description: >-
+  Tooltip popup. Two modes — default `follows="trigger"` shows on hover/focus
+  anchored to wrapped children; `follows="pointer"` subscribes to chart-hover
+  events from [for] and renders a data-viz card that tracks the pointer.
 props:
   delay:
-    description: Delay in milliseconds before showing the tooltip on hover.
+    description: Delay in milliseconds before showing the tooltip on hover (trigger mode only).
     type: number
     default: 400
   placement:
-    description: Preferred position relative to the anchor element.
+    description: Preferred position relative to the anchor element (trigger mode only).
     type: string
     default: top
     enum:
@@ -26,9 +29,40 @@ props:
       - bottom-start
       - bottom-end
   text:
-    description: Tooltip text content displayed in the overlay.
+    description: Tooltip text content displayed in the overlay (trigger mode only).
     type: string
     default: ""
+  follows:
+    description: >-
+      `trigger` (default) pins to wrapped children via hover/focus. `pointer`
+      subscribes to chart-hover/chart-leave events from [for] and positions at
+      the pointer coordinates — used by chart-ui / heatmap-ui.
+    type: string
+    default: trigger
+    enum:
+      - trigger
+      - pointer
+    reflect: true
+  for:
+    description: >-
+      id-ref of a chart-ui / heatmap-ui to follow. Required when follows=pointer.
+      The target must dispatch `chart-hover` and `chart-leave` events.
+    type: string
+    default: ""
+    reflect: true
+  indicator:
+    description: >-
+      Color swatch shown beside each value row in pointer mode. `none` omits
+      the swatch. Swatch color reads `--tooltip-indicator-color` which the
+      host injects per-row from `--color-{seriesKey}`.
+    type: string
+    default: none
+    enum:
+      - none
+      - dot
+      - line
+      - dashed
+    reflect: true
 events: {}
 slots: {}
 states: