@zubra/compiler 0.0.0-stage → 5.0.3

package/registry/components/toggle-switch.zb

@@ -0,0 +1,27 @@
+<!--
+  An on/off switch with a label and a description. A form control (submits "on" when checked).
+  @fires checkedchange - It was switched; `detail` is the new state.
+-->
+<script>
+  function toggle() {
+    checked = !checked
+  }
+</script>
+<style>
+  :host { display: block; }
+  button { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line, #dde); border-radius: 0.8rem; background: var(--surface, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; }
+  .track { flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--line, #ccd); position: relative; transition: background 0.2s; }
+  .track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: white; box-shadow: 0 1px 2px #0003; transition: transform 0.2s; }
+  [aria-checked=true] .track { background: var(--accent, #36c); }
+  [aria-checked=true] .track::after { transform: translateX(1.1rem); }
+  .text { display: grid; flex: 1; }
+  small { color: var(--muted, #667); }
+  .extra { font-weight: 700; white-space: nowrap; }
+</style>
+<toggle-switch form-associated checked:model={false} label="" description="" extra="">
+  <button type="button" role="switch" aria-checked={checked ? "true" : "false"} onclick={toggle}>
+    <span class="track"></span>
+    <span class="text"><span class="label">{label}</span><small>{description}</small></span>
+    <span class="extra">{extra}</span>
+  </button>
+</toggle-switch>

package/registry/components/tool-tip.zb

@@ -0,0 +1,68 @@
+<!--
+  A short description shown when its trigger is hovered or focused: the trigger is the slotted
+  element, and the tip describes it (aria-describedby), so a screen reader reads it with the
+  trigger's name. It shows after `delay` milliseconds, stays while the pointer is over it, and
+  Escape hides it without moving focus (WCAG 1.4.13). It sits in the top layer (`popover`), placed
+  above the trigger by CSS anchor positioning, or by script where that isn't supported.
+  @slot - The trigger: one focusable element.
+  @slot content - The tip (defaults to `text`).
+-->
+<script>
+  import { id, onMount } from '@zubra/runtime'
+
+  const tipId = id()
+  const anchored = typeof CSS !== "undefined" && CSS.supports("position-area: top")
+  let wrap = null
+  let tip = null
+  let timer = null
+
+  function show() {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      if (!tip || tip.matches(":popover-open")) return
+      tip.showPopover()
+      if (!anchored) place()
+    }, delay)
+  }
+  function hide() {
+    clearTimeout(timer)
+    if (tip?.matches(":popover-open")) tip.hidePopover()
+  }
+  // Without anchor positioning: centred above the trigger, or below it if there's no room.
+  function place() {
+    const trigger = wrap.firstElementChild.getBoundingClientRect()
+    const own = tip.getBoundingClientRect()
+    const top = trigger.top - own.height - 6 >= 0 ? trigger.top - own.height - 6 : trigger.bottom + 6
+    const left = Math.min(Math.max(4, trigger.left + (trigger.width - own.width) / 2), innerWidth - own.width - 4)
+    tip.style.top = `${top}px`
+    tip.style.left = `${left}px`
+  }
+
+  onMount(() => {
+    const trigger = wrap.firstElementChild
+    if (!trigger) return
+    const described = (trigger.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean)
+    if (!described.includes(tipId)) trigger.setAttribute("aria-describedby", [...described, tipId].join(" "))
+    trigger.style.setProperty("anchor-name", `--${tipId}`)
+    const escape = (event) => { if (event.key === "Escape") hide() }
+    document.addEventListener("keydown", escape)
+    return () => {
+      hide()
+      document.removeEventListener("keydown", escape)
+    }
+  })
+</script>
+<style>
+  :host { display: inline-block; }
+  .trigger { display: contents; }
+  [popover] { position: fixed; inset: auto; margin: 0; padding: 0.3rem 0.55rem; border: 0; border-radius: 0.4rem; background: var(--ink, #1d2130); color: var(--surface, #fff); font-size: 0.85rem; line-height: 1.3; max-width: 18rem; pointer-events: auto; }
+  @supports (position-area: top) {
+    [popover] { position-area: top; position-try-fallbacks: flip-block; margin-bottom: 6px; }
+  }
+</style>
+<tool-tip text="" delay={300}>
+  <span class="trigger" ref={wrap} onpointerenter={show} onpointerleave={hide} onfocusin={show} onfocusout={hide}>
+    <zb-slot></zb-slot>
+    <span popover="manual" role="tooltip" id={tipId} ref={tip} style:position-anchor={`--${tipId}`}><zb-slot name="content">{text}</zb-slot></span>
+  </span>
+</tool-tip>

package/registry/index.json

@@ -0,0 +1,233 @@
+{
+  "components": [
+    {
+      "name": "accordion-panel",
+      "category": "widget",
+      "description": "A section that opens and closes, on the native <details>: the browser does the keyboard (Enter and Space on the heading), the find-in-page opening and the announcements. Panels with the same `group` form an accordion where one is open at a time (<details name>). `open` is two-way.",
+      "files": [
+        "accordion-panel.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "chat-message",
+      "category": "app",
+      "description": "One message: avatar, author, time, text (with @mentions and links picked out), the message it replies to, and reactions. `me` is the signed-in user's name: their messages, mentions of them and their reactions are marked.",
+      "files": [
+        "chat-message.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "choice-cards",
+      "category": "input",
+      "description": "Pick one of several cards: a radio group. A form control; arrow keys move the choice. Each item is `{ id, title, detail, price, note }` (`note` and `price` optional).",
+      "files": [
+        "choice-cards.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "color-swatches",
+      "category": "input",
+      "description": "Pick a colour from `colors`. A form control (a radio group): arrow keys move the choice.",
+      "files": [
+        "color-swatches.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "combo-box",
+      "category": "widget",
+      "description": "A combobox: type to filter, arrow keys to move, Enter to pick, Escape to close. A form control. Its behaviour is Zag.js's combobox machine (through @zubra/runtime/zag); its markup and styles are this file's. It needs `npm install @zag-js/vanilla @zag-js/combobox`. `items` is `[{ value, label }]`; `value` is two-way.",
+      "files": [
+        "combo-box.zb"
+      ],
+      "dependencies": [],
+      "packages": [
+        "@zag-js/vanilla",
+        "@zag-js/combobox"
+      ]
+    },
+    {
+      "name": "date-range",
+      "category": "input",
+      "description": "A check-in and check-out date, as one value `{ start, end }` (\"YYYY-MM-DD\" strings). A form control: invalid until both are set and `end` is after `start`.",
+      "files": [
+        "date-range.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "donut-chart",
+      "category": "display",
+      "description": "A donut chart of `segments` (`[{ label, value, tone }]`, `tone` 0–7), with the total in the middle and a legend. Choosing a segment (or its legend entry) selects it; again clears it.",
+      "files": [
+        "donut-chart.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "dropdown-menu",
+      "category": "widget",
+      "description": "A menu of actions behind a button, on the platform's `popover`: the browser puts it in the top layer and closes it on Escape or a click outside. Down or Up on the button opens it; arrow keys, Home, End and typing a letter move among the items; Enter or Space picks one, and focus goes back to the button. It's placed below the button by CSS anchor positioning, or by script where that isn't supported. `items` is `[{ value, label, disabled? }]`.",
+      "files": [
+        "dropdown-menu.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "flip-card",
+      "category": "display",
+      "description": "A card with two faces that flips in 3D. Click, Space or Enter flips it. Shadow DOM: the faces are slotted, and the page's CSS styles them, not the card's.",
+      "files": [
+        "flip-card.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "kanban-column",
+      "category": "app",
+      "description": "A board column: a heading with a count and an optional work-in-progress limit, its cards (the default slot) and a drop zone for cards dragged from anywhere on the board.",
+      "files": [
+        "kanban-column.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "line-chart",
+      "category": "display",
+      "description": "A price chart: an area under a line, with the high, low and a crosshair that follows the pointer and shows the value under it.",
+      "files": [
+        "line-chart.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "message-composer",
+      "category": "app",
+      "description": "Writing a message: Enter sends, Shift+Enter adds a line, the box grows with the text, an emoji menu inserts at the caret, and a message being replied to shows above.",
+      "files": [
+        "message-composer.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "modal-dialog",
+      "category": "app",
+      "description": "A modal dialog on the native <dialog>: the page behind is inert, focus moves into the dialog and back to where it was, and Escape, the close button or a click on the backdrop closes it. `open` is two-way.",
+      "files": [
+        "modal-dialog.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "money-input",
+      "category": "input",
+      "description": "An amount of money. Typing is free-form; on blur it's formatted (`1234.5` → `1,234.50`). The value is a number (or null when empty). A form control: `required` and `min` validate it.",
+      "files": [
+        "money-input.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "progress-ring",
+      "category": "display",
+      "description": "A ring that fills to `value` of `max`, with what's in the middle from the default slot (the percentage if empty).",
+      "files": [
+        "progress-ring.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "quantity-stepper",
+      "category": "input",
+      "description": "A number with − and + buttons, between `min` and `max`. A form control.",
+      "files": [
+        "quantity-stepper.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "segmented-control",
+      "category": "input",
+      "description": "A row of mutually exclusive options. `options` is `[{ value, label }]`.",
+      "files": [
+        "segmented-control.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "spark-line",
+      "category": "display",
+      "description": "A small line of recent values, green when it ends higher than it started, red when lower.",
+      "files": [
+        "spark-line.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "star-rating",
+      "category": "input",
+      "description": "A star rating that is a form control: it submits its value under its `name`, is invalid while `required` and unset, and goes back to 0 when its form resets. `readonly` shows a rating.",
+      "files": [
+        "star-rating.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "step-indicator",
+      "category": "display",
+      "description": "Where a multi-step flow is: steps done (which can be revisited), the current one, and those ahead.",
+      "files": [
+        "step-indicator.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "streak-grid",
+      "category": "display",
+      "description": "A habit's last weeks as a grid of days (a column per week, Monday at the top), shaded by how much of the goal was done. Choosing a day toggles it; arrow keys move between days. `log` maps \"YYYY-MM-DD\" to a count; `today` is \"YYYY-MM-DD\".",
+      "files": [
+        "streak-grid.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "tab-list",
+      "category": "widget",
+      "description": "Tabs: a tab list and the panels it switches between. The panels are the slotted elements with a `data-tab` attribute matching a tab's value; they get role=tabpanel, are labelled by their tab, and are hidden unless chosen. Arrow keys, Home and End move between the tabs (one tab stop), and the focused tab is chosen as it moves, unless `manual`, where Enter or Space chooses it. `tabs` is `[{ value, label }]`; `value` is two-way and defaults to the first tab.",
+      "files": [
+        "tab-list.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "tag-input",
+      "category": "input",
+      "description": "A list of tags you type: Enter or comma adds one, Backspace in the empty field removes the last, × removes any. Suggestions come from `suggestions`. A form control.",
+      "files": [
+        "tag-input.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "toggle-switch",
+      "category": "input",
+      "description": "An on/off switch with a label and a description. A form control (submits \"on\" when checked).",
+      "files": [
+        "toggle-switch.zb"
+      ],
+      "dependencies": []
+    },
+    {
+      "name": "tool-tip",
+      "category": "widget",
+      "description": "A short description shown when its trigger is hovered or focused: the trigger is the slotted element, and the tip describes it (aria-describedby), so a screen reader reads it with the trigger's name. It shows after `delay` milliseconds, stays while the pointer is over it, and Escape hides it without moving focus (WCAG 1.4.13). It sits in the top layer (`popover`), placed above the trigger by CSS anchor positioning, or by script where that isn't supported.",
+      "files": [
+        "tool-tip.zb"
+      ],
+      "dependencies": []
+    }
+  ]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.