@aparte/plugin-cards 0.0.0-stage → 0.29.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 aparté
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,152 @@
-# Temporary Holding Version
+# @aparte/plugin-cards
 
-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.
+Rich cards for [aparté](https://apartejs.dev): a tool's result drawn as a card instead of a
+row — weather, products, places, figures, orders, quotes, plans, scores, media, links — in variants, from your tool's own fields. Each card has its own entry,
+so an app ships only the cards it imports.
+
+```bash
+npm install @aparte/plugin-cards @aparte/core
+```
+
+```ts
+import { setupWeatherCard } from '@aparte/plugin-cards/weather';
+
+setupWeatherCard({
+  tool: 'get_weather',
+  map: (result) => ({ location: result.city, temperature: result.temp_c, condition: result.sky }),
+  variant: 'hero', // or 'compact', 'forecast', or a function of the data
+});
+```
+
+The full guide: [apartejs.dev/guides/cards](https://apartejs.dev/guides/cards/).
+
+## The weather card — `@aparte/plugin-cards/weather`
+
+- `setupWeatherCard(options)` plugs the card in and returns the function that unplugs it.
+  `options`: `tool`, `map`, `mapInput`, `variant`, `actions`, `onChange`, `config`.
+- `weatherCard` is the card itself: `weatherCard.setup(options)`, and `weatherCard.segment(data)`
+  for a `card` segment with its fallback sentence.
+- `readWeather(raw)` is the card's reading of its fields; `fromOpenMeteo(response, { location })`
+  reads an Open-Meteo forecast response.
+- `conditionFromWmo`, `conditionFromOpenWeather` and `conditionFromText` turn the usual APIs' codes
+  into one of `WEATHER_CONDITIONS`.
+- Types: `WeatherInput`, `WeatherData`, `WeatherHour`, `WeatherDay`, `WeatherCondition`,
+  `WeatherVariant`, `WindUnit`.
+
+## The generic card — `@aparte/plugin-cards/items`
+
+Articles, search results, anything with a title and a picture: `carousel` (default), `list`, `grid`.
+
+- `setupItemsCard(options)`, `itemsCard` (`.setup`, `.segment`), `readItems(raw)`, `ITEMS_MAX` (10).
+- Types: `ItemsInput`, `ItemInput`, `ItemImage`, `Item`, `ItemsData`, `ItemsVariant`.
+
+## The product card — `@aparte/plugin-cards/product`
+
+Prices, discount, rating, stock, merchant, options: `card` (default), `compact`, `detail`. Its reader takes
+schema.org, Shopify, Google Shopping and Fake Store shapes, and prices written as text.
+
+- `setupProductCard(options)`, `productCard` (`.setup`, `.segment`), `readProducts(raw)`, `discountOf(product)`.
+- Types: `ProductsInput`, `ProductInput`, `Product`, `ProductData`, `ProductAvailability`, `ProductVariant`.
+
+## The place card — `@aparte/plugin-cards/place`
+
+Rating, price level, open now (computed from the hours, across midnight), distance, and Directions /
+Call / Website buttons: `card` (default), `compact`, `detail` (with the week's hours). Its reader
+takes both generations of Google Places and Yelp.
+
+- `setupPlaceCard(options)` (adds `currencySymbol`, `now` and `builtIns`), `placeCard` (`.setup`, `.segment`),
+  `readPlaces(raw)`, `readHours(raw)`, `readTime(raw)`, `placeStatus(hours, date)`, `isOpenAt(hours, date)`,
+  `directionsUrl(place)`, `phoneUrl(phone)`.
+- Types: `PlaceInput`, `Place`, `PlaceData`, `PlaceHoursInput`, `PlaceHoursRange`, `PlacePrice`,
+  `PlaceStatus`, `PlaceKind`, `PlaceVariant`, `PlaceCardOptions`.
+
+## The key-figures card — `@aparte/plugin-cards/stats`
+
+KPIs with their change and a sparkline: `tiles` (default), `list`, `hero`. A plain record
+(`{ Revenue: 12000 }`) is read as label → value pairs.
+
+- `setupStatsCard(options)`, `statsCard` (`.setup`, `.segment`), `readStats(raw)`, `statValue(config, stat)`,
+  `statChange(config, stat)`, `humanizeKey(key)`.
+- Types: `StatsInput`, `StatInput`, `Stat`, `StatsData`, `StatFormat`, `StatIcon`, `StatsVariant`.
+
+## The order card — `@aparte/plugin-cards/order`
+
+An order or a booking as its receipt: `receipt` (default), `compact`, `confirmation`. Its reader
+takes Shopify, WooCommerce and Stripe Checkout (`minorUnits: true` for amounts in cents).
+
+- `setupOrderCard(options)`, `orderCard` (`.setup`, `.segment`), `readOrder(raw)`, `readWhen(value)`,
+  `nightsOf(from, to)`.
+- Types: `OrderInput`, `OrderLineInput`, `OrderDateInput`, `OrderData`, `OrderLine`, `OrderFact`, `OrderWhen`,
+  `OrderKind`, `OrderStatus`, `OrderVariant`.
+
+## The stock card — `@aparte/plugin-cards/stock`
+
+A quote with its chart: `chart` (default), `compact`, `ticker`, `candles`. Range buttons over the
+chart when the quote lists `ranges` and the card has an `onChange`. Its reader takes Yahoo Finance,
+Alpha Vantage, Finnhub, CoinGecko and Binance.
+
+- `setupStockCard(options)`, `stockCard` (`.setup`, `.segment`), `readQuotes(raw)`, `directionOf(quote)`,
+  `baselineOf(quote)`, `digitsOf(quote)`.
+- Types: `QuotesInput`, `QuoteInput`, `Quote`, `StockData`, `ChartPoint`, `Candle`, `MarketState`,
+  `StockRange`, `StockVariant`.
+
+## The plan card — `@aparte/plugin-cards/plan`
+
+An agent's plan or task list, updated in place as it works: `checklist` (default), `timeline`,
+`compact`. Its reader takes Markdown checklists and the todo lists agents already write.
+
+- `setupPlanCard(options)`, `planCard` (`.setup`, `.segment`), `readPlan(raw)`, `readStatus(value)`,
+  `planProgress(data)`, `durationText(config, seconds)`, `PLAN_STEPS_SHOWN` (50).
+- Types: `PlanInput`, `PlanStepInput`, `PlanStep`, `PlanData`, `PlanProgress`, `PlanStatus`, `PlanVariant`.
+
+## The score card — `@aparte/plugin-cards/score`
+
+A match or a scoreboard, any sport: `card` (default), `compact`, `detail`. Its reader takes
+API-Football, football-data.org, ESPN and TheSportsDB.
+
+- `setupScoreCard(options)` (adds `now`), `scoreCard` (`.setup`, `.segment`), `readMatches(raw)`,
+  `teamColor(value)`, `monogram(team)`, `inkOn(hex)`.
+- Types: `ScoreInput`, `MatchInput`, `TeamInput`, `MatchPeriodInput`, `MatchEventInput`, `ScoreData`,
+  `Match`, `Team`, `MatchPeriod`, `MatchEvent`, `MatchStatus`, `MatchSide`, `MatchEventType`, `Sport`,
+  `ScoreVariant`, `ScoreCardOptions`.
+
+## The media card — `@aparte/plugin-cards/media`
+
+Pictures, videos and sounds, with a lightbox: `single` (default), `gallery`, `strip`. Native
+`<video>` and `<audio>`; a YouTube or Vimeo page is a poster that links to it.
+
+- `setupMediaCard(options)`, `mediaCard` (`.setup`, `.segment`), `readMedia(raw)`, `readDuration(value)`,
+  `formatDuration(config, seconds)`.
+- Types: `MediumInput`, `Medium`, `MediaData`, `MediaKind`, `MediaVariant`, `MediaCardOptions`.
+
+## The link card — `@aparte/plugin-cards/link`
+
+A web page, previewed: `card` (default), `compact`, `quote`. Its reader takes Open Graph, Twitter
+keys and the usual search APIs; the card fetches nothing.
+
+- `setupLinkCard(options)`, `linkCard` (`.setup`, `.segment`), `readLinks(raw)`.
+- Types: `LinkInput`, `Link`, `LinkData`, `LinkType`, `LinkVariant`, `LinkCardOptions`.
+
+## The kit — `@aparte/plugin-cards`
+
+What every card is made with, for a card of your own that behaves like ours (three sources,
+states, variants, language switch, buttons):
+
+- `setupCardFences(options)` (`CardFenceOptions`, `CARD_FENCE_PREFIX`): draws a ```` ```card-weather ````
+  block of JSON in an answer as its card, for backends that send only text; `load` fetches each
+  card the first time a block names it.
+- `defineCard(definition)` and `CARD_SEGMENT_TYPE`; types `CardDefinition`, `CardSetupOptions`,
+  `CardContext`, `CardAction`, `CardActionEventDetail`, `CardChangeEventDetail`, `AparteCardSegment`.
+- Controls, drawn only when the card has an `onChange`: `segmented` (`SegmentedOptions`), `toggle`
+  (`ToggleOptions`), `slider` (`SliderOptions`). A press fires `aparte-card-change`, and what `onChange`
+  returns is drawn in place.
+- Drawing: `el`, `glyph`, `carousel` (`CarouselOptions`), `rating` (`RatingOptions`),
+  `sparkline` and `sparklinePath` (`SparklineOptions`).
+- Reading: `safeUrl`, `webUrl`, `num`, `str`, `toDate`, `currencyCode`.
+- Writing: `formatNumber`, `formatPercent`, `formatPrice`, `formatUnit`, `formatDay`, `formatHour`,
+  `formatWhen`; `word`, `languageOf`, `intlTag`, with `CardWord` and `CardLanguage`.
+
+A card's words come in the ten languages of `@aparte/locales`, picked by the locale's `tag`; a key
+of your locale wins (`aparteGlobalConfig.extendLocale({ cardsWeatherWind: 'Gusts' })`).
+
+> ESM-only. Part of the aparté monorepo. MIT.

package/dist/carousel-DwgHvriV.js

@@ -0,0 +1,63 @@
+import { e as el, r as word, h as formatNumber, K as KIT_WORDS, v as bindMarkup } from "./format-BFq79ydr.js";
+function carousel(ctx, slides, { label } = {}) {
+  const track = el("div", { class: "aparte-rich-card__track", attrs: label ? { tabindex: 0 } : {} });
+  if (label) ctx.bind(track, label, "aria-label");
+  slides.forEach((slide, i) => {
+    const wrap = el("div", { class: "aparte-rich-card__slide", attrs: { role: "group", "aria-roledescription": "slide" } }, slide);
+    ctx.bind(wrap, () => word(ctx.config, "cardsSlide", KIT_WORDS.cardsSlide, { n: formatNumber(ctx.config, i + 1), total: formatNumber(ctx.config, slides.length) }), "aria-label");
+    track.append(wrap);
+  });
+  const button = (dir) => {
+    const b = el("button", {
+      class: `aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--surface aparte-rich-card__nav aparte-rich-card__nav--${dir < 0 ? "prev" : "next"}`,
+      attrs: { type: "button" }
+    });
+    bindMarkup(b, () => ctx.config.getIcon(dir < 0 ? "prevBranch" : "nextBranch"));
+    ctx.bind(b, () => word(ctx.config, dir < 0 ? "cardsPrevious" : "cardsNext", dir < 0 ? KIT_WORDS.cardsPrevious : KIT_WORDS.cardsNext), "aria-label");
+    b.addEventListener("click", () => step(dir));
+    return b;
+  };
+  const prev = button(-1);
+  const next = button(1);
+  const root = el("div", { class: "aparte-rich-card__carousel", attrs: label ? { role: "region", "aria-roledescription": "carousel" } : {} }, track, prev, next);
+  if (label) ctx.bind(root, label, "aria-label");
+  const rtl = () => typeof getComputedStyle === "function" && getComputedStyle(track).direction === "rtl";
+  function step(dir) {
+    const slide = track.firstElementChild;
+    const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
+    const by = ((slide?.offsetWidth ?? track.clientWidth) + gap) * dir * (rtl() ? -1 : 1);
+    const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    track.scrollBy({ left: by, behavior: still ? "auto" : "smooth" });
+  }
+  function sync() {
+    const at = Math.abs(track.scrollLeft);
+    const room = track.scrollWidth - track.clientWidth;
+    root.toggleAttribute("data-overflow", room > 1);
+    const active = typeof document === "undefined" ? null : document.activeElement;
+    prev.disabled = at <= 1;
+    next.disabled = at >= room - 1;
+    if (active === prev && prev.disabled) (next.disabled ? track : next).focus({ preventScroll: true });
+    if (active === next && next.disabled) (prev.disabled ? track : prev).focus({ preventScroll: true });
+  }
+  let frame = 0;
+  track.addEventListener("scroll", () => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(sync);
+  }, { passive: true });
+  if (typeof ResizeObserver === "function") {
+    const watch = new ResizeObserver(() => {
+      if (!track.isConnected) {
+        watch.disconnect();
+        return;
+      }
+      sync();
+    });
+    watch.observe(track);
+  }
+  sync();
+  return root;
+}
+export {
+  carousel as c
+};
+//# sourceMappingURL=carousel-DwgHvriV.js.map

package/dist/carousel-DwgHvriV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-DwgHvriV.js","sources":["../src/kit/carousel.ts"],"sourcesContent":["/**\n * A row of slides that scrolls sideways: products, places, articles.\n *\n * Native scrolling with snap points, so touch, trackpad, wheel and keyboard (the track is\n * focusable; arrows scroll it) all work as the platform does. Two buttons step a slide at\n * a time and switch off at each end; they are not drawn when everything fits. Announced as\n * a carousel, each slide as \"2 of 5\" (the WAI-ARIA carousel pattern, without auto-play:\n * nothing here moves on its own).\n */\nimport { bindMarkup, type CardContext } from './define.js';\nimport { el } from './dom.js';\nimport { formatNumber } from './format.js';\nimport { KIT_WORDS, word } from './strings.js';\n\nexport interface CarouselOptions {\n    /** The carousel's accessible name (\"Products\"); its slides are counted inside it. */\n    label?: () => string;\n}\n\n/** The slides in a scrolling row, with its two buttons. */\nexport function carousel(ctx: CardContext, slides: HTMLElement[], { label }: CarouselOptions = {}): HTMLElement {\n    // Focusable so the arrow keys scroll it — and then named, since a focus stop must say what\n    // it is. Without a label the two buttons are the keyboard's way through.\n    const track = el('div', { class: 'aparte-rich-card__track', attrs: label ? { tabindex: 0 } : {} });\n    if (label) ctx.bind(track, label, 'aria-label');\n    slides.forEach((slide, i) => {\n        const wrap = el('div', { class: 'aparte-rich-card__slide', attrs: { role: 'group', 'aria-roledescription': 'slide' } }, slide);\n        ctx.bind(wrap, () => word(ctx.config, 'cardsSlide', KIT_WORDS.cardsSlide, { n: formatNumber(ctx.config, i + 1), total: formatNumber(ctx.config, slides.length) }), 'aria-label');\n        track.append(wrap);\n    });\n\n    const button = (dir: -1 | 1) => {\n        const b = el('button', {\n            class: `aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--surface aparte-rich-card__nav aparte-rich-card__nav--${dir < 0 ? 'prev' : 'next'}`,\n            attrs: { type: 'button' },\n        });\n        bindMarkup(b, () => ctx.config.getIcon(dir < 0 ? 'prevBranch' : 'nextBranch'));\n        ctx.bind(b, () => word(ctx.config, dir < 0 ? 'cardsPrevious' : 'cardsNext', dir < 0 ? KIT_WORDS.cardsPrevious : KIT_WORDS.cardsNext), 'aria-label');\n        b.addEventListener('click', () => step(dir));\n        return b;\n    };\n    const prev = button(-1);\n    const next = button(1);\n    // A region is a landmark, and a landmark needs a name: without a label it is a plain box.\n    const root = el('div', { class: 'aparte-rich-card__carousel', attrs: label ? { role: 'region', 'aria-roledescription': 'carousel' } : {} }, track, prev, next);\n    if (label) ctx.bind(root, label, 'aria-label');\n\n    const rtl = () => typeof getComputedStyle === 'function' && getComputedStyle(track).direction === 'rtl';\n    function step(dir: -1 | 1): void {\n        const slide = track.firstElementChild as HTMLElement | null;\n        const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\n        const by = ((slide?.offsetWidth ?? track.clientWidth) + gap) * dir * (rtl() ? -1 : 1);\n        const still = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n        track.scrollBy({ left: by, behavior: still ? 'auto' : 'smooth' });\n    }\n    function sync(): void {\n        // In a right-to-left page `scrollLeft` runs from 0 down to a negative number.\n        const at = Math.abs(track.scrollLeft);\n        const room = track.scrollWidth - track.clientWidth;\n        root.toggleAttribute('data-overflow', room > 1);\n        // A button switched off while it holds the focus would drop it on the page: the\n        // focus moves to the other button (or the track) first.\n        const active = typeof document === 'undefined' ? null : document.activeElement;\n        prev.disabled = at <= 1;\n        next.disabled = at >= room - 1;\n        if (active === prev && prev.disabled) (next.disabled ? track : next).focus({ preventScroll: true });\n        if (active === next && next.disabled) (prev.disabled ? track : prev).focus({ preventScroll: true });\n    }\n    let frame = 0;\n    track.addEventListener('scroll', () => {\n        cancelAnimationFrame(frame);\n        frame = requestAnimationFrame(sync);\n    }, { passive: true });\n    if (typeof ResizeObserver === 'function') {\n        // A card has no teardown hook: the observer lets itself go once the track has left\n        // the page (a removal reports a size change).\n        const watch = new ResizeObserver(() => {\n            if (!track.isConnected) { watch.disconnect(); return; }\n            sync();\n        });\n        watch.observe(track);\n    }\n    sync();\n    return root;\n}\n"],"names":[],"mappings":"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"}

package/dist/controls-BYUm4aRV.js

@@ -0,0 +1,62 @@
+import { e as el } from "./format-BFq79ydr.js";
+function segmented(ctx, { name, options, value, label }) {
+  if (!ctx.live || options.length === 0) return null;
+  const group = el("div", { class: "aparte-rich-card__segmented", attrs: { role: "group" } });
+  if (label) ctx.bind(group, label, "aria-label");
+  for (const option of options) {
+    const pressed = option.value === value;
+    const button = el("button", {
+      class: "aparte-rich-card__segment",
+      attrs: { type: "button", "aria-pressed": pressed ? "true" : "false", "data-card-key": `${name}:${option.value}` }
+    });
+    if (typeof option.label === "function") ctx.bind(button, option.label);
+    else button.textContent = option.label;
+    button.addEventListener("click", () => {
+      if (button.getAttribute("aria-pressed") === "true") return;
+      for (const other of group.querySelectorAll(".aparte-rich-card__segment")) other.setAttribute("aria-pressed", other === button ? "true" : "false");
+      ctx.change(name, option.value);
+    });
+    group.append(button);
+  }
+  return group;
+}
+function toggle(ctx, { name, checked, label }) {
+  if (!ctx.live) return null;
+  const button = el("button", {
+    class: "aparte-rich-card__toggle",
+    attrs: { type: "button", role: "switch", "aria-checked": checked ? "true" : "false", "data-card-key": name }
+  }, el("span", { class: "aparte-rich-card__toggle-thumb", attrs: { "aria-hidden": "true" } }));
+  ctx.bind(button, label, "aria-label");
+  button.addEventListener("click", () => {
+    const next = button.getAttribute("aria-checked") !== "true";
+    button.setAttribute("aria-checked", next ? "true" : "false");
+    ctx.change(name, next);
+  });
+  return button;
+}
+function slider(ctx, { name, value, min = 0, max = 100, step = 1, label, format = String }) {
+  if (!ctx.live) return null;
+  const input = el("input", {
+    class: "aparte-rich-card__slider-input",
+    attrs: { type: "range", min, max, step, value, "data-card-key": name }
+  });
+  const shown = el("output", { class: "aparte-rich-card__slider-value" });
+  const name_ = el("span", { class: "aparte-rich-card__slider-label" });
+  ctx.bind(name_, label);
+  ctx.bind(input, label, "aria-label");
+  const paint = (v) => {
+    shown.textContent = format(v);
+    input.setAttribute("aria-valuetext", format(v));
+  };
+  ctx.bind(shown, () => format(Number(input.value)));
+  paint(value);
+  input.addEventListener("input", () => paint(Number(input.value)));
+  input.addEventListener("change", () => ctx.change(name, Number(input.value)));
+  return el("label", { class: "aparte-rich-card__slider" }, name_, input, shown);
+}
+export {
+  slider as a,
+  segmented as s,
+  toggle as t
+};
+//# sourceMappingURL=controls-BYUm4aRV.js.map

package/dist/controls-BYUm4aRV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-BYUm4aRV.js","sources":["../src/kit/controls.ts"],"sourcesContent":["/**\n * Controls a card can carry: a row of choices, a switch, a slider. Each reports through\n * `ctx.change(name, value)`, so the card fires `aparte-card-change` and the app's\n * `onChange` answers with new data, drawn in place — a stock chart's range, a light's\n * brightness.\n *\n * A control is drawn only when something will answer it (`ctx.live`): without an\n * `onChange`, a button that does nothing would be a promise the card cannot keep\n * (ratified decision #8). Each control carries a `data-card-key`, so a redraw puts the\n * focus back on the control that was pressed.\n */\nimport type { CardContext } from './define.js';\nimport { el } from './dom.js';\n\nexport interface SegmentedOptions {\n    /** The control's name in the change (`range`). */\n    name: string;\n    /** The choices; a label is a string or a function read again on a language switch. */\n    options: Array<{ value: string; label: string | (() => string) }>;\n    /** The choice in force. */\n    value?: string;\n    /** The group's accessible name. */\n    label?: () => string;\n}\n\n/** A row of choices, one pressed (`aria-pressed`). `null` when nothing would answer it. */\nexport function segmented(ctx: CardContext, { name, options, value, label }: SegmentedOptions): HTMLElement | null {\n    if (!ctx.live || options.length === 0) return null;\n    const group = el('div', { class: 'aparte-rich-card__segmented', attrs: { role: 'group' } });\n    if (label) ctx.bind(group, label, 'aria-label');\n    for (const option of options) {\n        const pressed = option.value === value;\n        const button = el('button', {\n            class: 'aparte-rich-card__segment',\n            attrs: { type: 'button', 'aria-pressed': pressed ? 'true' : 'false', 'data-card-key': `${name}:${option.value}` },\n        });\n        if (typeof option.label === 'function') ctx.bind(button, option.label);\n        else button.textContent = option.label;\n        button.addEventListener('click', () => {\n            if (button.getAttribute('aria-pressed') === 'true') return;\n            // Pressed at once, before the app answers: a second press reads what was chosen.\n            for (const other of group.querySelectorAll('.aparte-rich-card__segment')) other.setAttribute('aria-pressed', other === button ? 'true' : 'false');\n            ctx.change(name, option.value);\n        });\n        group.append(button);\n    }\n    return group;\n}\n\nexport interface ToggleOptions {\n    name: string;\n    checked: boolean;\n    /** What it switches (\"Living-room light\"). */\n    label: () => string;\n}\n\n/** A switch (`role=\"switch\"`). `null` when nothing would answer it. */\nexport function toggle(ctx: CardContext, { name, checked, label }: ToggleOptions): HTMLElement | null {\n    if (!ctx.live) return null;\n    const button = el('button', {\n        class: 'aparte-rich-card__toggle',\n        attrs: { type: 'button', role: 'switch', 'aria-checked': checked ? 'true' : 'false', 'data-card-key': name },\n    }, el('span', { class: 'aparte-rich-card__toggle-thumb', attrs: { 'aria-hidden': 'true' } }));\n    ctx.bind(button, label, 'aria-label');\n    button.addEventListener('click', () => {\n        // Flipped at once, before the app answers: a second click before the answer flips it\n        // back, rather than sending the same state twice.\n        const next = button.getAttribute('aria-checked') !== 'true';\n        button.setAttribute('aria-checked', next ? 'true' : 'false');\n        ctx.change(name, next);\n    });\n    return button;\n}\n\nexport interface SliderOptions {\n    name: string;\n    value: number;\n    min?: number;\n    max?: number;\n    step?: number;\n    label: () => string;\n    /** How the value reads beside it, and to a screen reader (\"60 %\"). */\n    format?: (value: number) => string;\n}\n\n/**\n * A slider: the value beside it follows while it moves, the change is reported once it is\n * let go (`change`, not `input`) — one request for a drag, not one per pixel.\n */\nexport function slider(ctx: CardContext, { name, value, min = 0, max = 100, step = 1, label, format = String }: SliderOptions): HTMLElement | null {\n    if (!ctx.live) return null;\n    const input = el('input', {\n        class: 'aparte-rich-card__slider-input',\n        attrs: { type: 'range', min, max, step, value, 'data-card-key': name },\n    });\n    const shown = el('output', { class: 'aparte-rich-card__slider-value' });\n    const name_ = el('span', { class: 'aparte-rich-card__slider-label' });\n    ctx.bind(name_, label);\n    ctx.bind(input, label, 'aria-label');\n    const paint = (v: number) => {\n        shown.textContent = format(v);\n        input.setAttribute('aria-valuetext', format(v));\n    };\n    ctx.bind(shown, () => format(Number(input.value)));\n    paint(value);\n    input.addEventListener('input', () => paint(Number(input.value)));\n    input.addEventListener('change', () => ctx.change(name, Number(input.value)));\n    return el('label', { class: 'aparte-rich-card__slider' }, name_, input, shown);\n}\n"],"names":[],"mappings":";AA0BO,SAAS,UAAU,KAAkB,EAAE,MAAM,SAAS,OAAO,SAA+C;AAC/G,MAAI,CAAC,IAAI,QAAQ,QAAQ,WAAW,EAAG,QAAO;AAC9C,QAAM,QAAQ,GAAG,OAAO,EAAE,OAAO,+BAA+B,OAAO,EAAE,MAAM,QAAA,GAAW;AAC1F,MAAI,MAAO,KAAI,KAAK,OAAO,OAAO,YAAY;AAC9C,aAAW,UAAU,SAAS;AAC1B,UAAM,UAAU,OAAO,UAAU;AACjC,UAAM,SAAS,GAAG,UAAU;AAAA,MACxB,OAAO;AAAA,MACP,OAAO,EAAE,MAAM,UAAU,gBAAgB,UAAU,SAAS,SAAS,iBAAiB,GAAG,IAAI,IAAI,OAAO,KAAK,GAAA;AAAA,IAAG,CACnH;AACD,QAAI,OAAO,OAAO,UAAU,gBAAgB,KAAK,QAAQ,OAAO,KAAK;AAAA,QAChE,QAAO,cAAc,OAAO;AACjC,WAAO,iBAAiB,SAAS,MAAM;AACnC,UAAI,OAAO,aAAa,cAAc,MAAM,OAAQ;AAEpD,iBAAW,SAAS,MAAM,iBAAiB,4BAA4B,EAAG,OAAM,aAAa,gBAAgB,UAAU,SAAS,SAAS,OAAO;AAChJ,UAAI,OAAO,MAAM,OAAO,KAAK;AAAA,IACjC,CAAC;AACD,UAAM,OAAO,MAAM;AAAA,EACvB;AACA,SAAO;AACX;AAUO,SAAS,OAAO,KAAkB,EAAE,MAAM,SAAS,SAA4C;AAClG,MAAI,CAAC,IAAI,KAAM,QAAO;AACtB,QAAM,SAAS,GAAG,UAAU;AAAA,IACxB,OAAO;AAAA,IACP,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,gBAAgB,UAAU,SAAS,SAAS,iBAAiB,KAAA;AAAA,EAAK,GAC5G,GAAG,QAAQ,EAAE,OAAO,kCAAkC,OAAO,EAAE,eAAe,OAAA,EAAO,CAAG,CAAC;AAC5F,MAAI,KAAK,QAAQ,OAAO,YAAY;AACpC,SAAO,iBAAiB,SAAS,MAAM;AAGnC,UAAM,OAAO,OAAO,aAAa,cAAc,MAAM;AACrD,WAAO,aAAa,gBAAgB,OAAO,SAAS,OAAO;AAC3D,QAAI,OAAO,MAAM,IAAI;AAAA,EACzB,CAAC;AACD,SAAO;AACX;AAiBO,SAAS,OAAO,KAAkB,EAAE,MAAM,OAAO,MAAM,GAAG,MAAM,KAAK,OAAO,GAAG,OAAO,SAAS,UAA6C;AAC/I,MAAI,CAAC,IAAI,KAAM,QAAO;AACtB,QAAM,QAAQ,GAAG,SAAS;AAAA,IACtB,OAAO;AAAA,IACP,OAAO,EAAE,MAAM,SAAS,KAAK,KAAK,MAAM,OAAO,iBAAiB,KAAA;AAAA,EAAK,CACxE;AACD,QAAM,QAAQ,GAAG,UAAU,EAAE,OAAO,kCAAkC;AACtE,QAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,kCAAkC;AACpE,MAAI,KAAK,OAAO,KAAK;AACrB,MAAI,KAAK,OAAO,OAAO,YAAY;AACnC,QAAM,QAAQ,CAAC,MAAc;AACzB,UAAM,cAAc,OAAO,CAAC;AAC5B,UAAM,aAAa,kBAAkB,OAAO,CAAC,CAAC;AAAA,EAClD;AACA,MAAI,KAAK,OAAO,MAAM,OAAO,OAAO,MAAM,KAAK,CAAC,CAAC;AACjD,QAAM,KAAK;AACX,QAAM,iBAAiB,SAAS,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC,CAAC;AAChE,QAAM,iBAAiB,UAAU,MAAM,IAAI,OAAO,MAAM,OAAO,MAAM,KAAK,CAAC,CAAC;AAC5E,SAAO,GAAG,SAAS,EAAE,OAAO,8BAA8B,OAAO,OAAO,KAAK;AACjF;"}