Exclusivobeta

Scope Tally `<mv-scope-tally>`

Torna visível o crescimento do escopo em relação ao pedido original, para projetos de clientes e orçamentos fechados, especificações de produto, compromissos de sprint, RFPs e contratos. Passe a base (itens com estimativas) e a linha do tempo das mudanças (itens adicionados, alterados ou removidos, cada um com quem pediu, quando, o impacto na estimativa, um status de aceito, pendente, movido para a fase 2 ou recusado, e se é faturável) como duas listas escritas na marcação ou pelas propriedades baseline e changes. Um resumo em palavras abre o card (“Original 12 days → Now 21 days · +75% across 7 accepted changes”, depois o impacto pendente e os dias faturáveis com o valor pela sua tarifa) acima de dois trilhos desenhados na mesma escala: o pedido original, com o que foi removido depois hachurado, e o escopo atual, em que cada aumento aceito é um degrau, cada um um tom mais escuro que o anterior, e os pedidos pendentes aparecem hachurados no final, cruzados por linhas tracejadas de pontos de revisão (+25%, +50%, configuráveis) que ficam sólidas depois de ultrapassadas. A linha do tempo é uma lista ordenada de degraus com data, tipo, custo, solicitante, total acumulado e o degrau que ultrapassou cada ponto de revisão; os pedidos pendentes são decididos no lugar (Accept as change order, Move to phase 2, Decline, com Undo) por um mv-scope-decision cancelável que mostra os totais depois da decisão, e cada um diz o que aceitá-lo faria (“If accepted: 24 days · +100% · Would pass +100%”). Um divisor “New since you last looked” (last-seen, ou por navegador com storage-key e um botão Mark as seen) separa o que mudou desde a sua última visita, e um lembrete neutro sugere rever orçamento e prazo em cada ponto de revisão, com mv-scope-threshold para o app. Compare to original lista em uma tabela, com totais, os itens adicionados, alterados, removidos e inalterados, e Copy summary gera um texto simples pronto para um e-mail ao cliente (mv-scope-export cancelável). As unidades podem ser dias, horas, semanas, pontos ou um código de moeda; variant="summary" mantém só o resumo e os trilhos para dashboards de portfólio.

Categoria	Exibição de dados
Tipo	Web Component (`<mv-scope-tally>`)
Status	beta
Também instala	button
Keywords	exclusive, culture, scope, scope-creep, change-order, quote, estimate, baseline, budget, freelance, agency, sprint, commitment, rfp, contract, timeline, compare, renegotiation, project-management

When to use

A freelancer or agency must show a client how a fixed quote grew, request by request, before asking for a change order
A sprint or release commitment keeps absorbing unplanned work and the team needs the growth and its sources in plain numbers
New requests on a spec, RFP or contract must be accepted, moved to a later phase or declined with their cost visible
A project dashboard should flag which engagements passed +25% or +50% of their original estimate

Avoid when

Tasks need to move through workflow stages rather than be measured against an original commitment → use Kanban instead
The wording of a requirement changed as it was relayed, not its size or cost → use Drift Check instead
A single request must be argued for and against before deciding, with weighted pros and cons → use Balance Sheet instead

Instalação

node scripts/add.mjs scope-tally --out ./src/marvelous

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["scope-tally"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/focus.js, core/motion.js, core/observe.js, components/scope-tally/scope-tally.js, components/scope-tally/scope-tally.css, components/button/button.css.

Uso

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis CSS:

<div id="st-demo" style="width:min(100%,72rem);margin-inline:auto">
  <style>
    #st-demo .st-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.25rem; align-items:start }
    #st-demo .st-side { display:grid; gap:1rem; position:sticky; top:1rem }
    #st-demo .st-panel { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-xs); font-size:.8125rem }
    #st-demo .st-panel h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #st-demo .st-panel p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #st-demo .st-k { color:var(--mv-fg-muted); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600 }
    #st-demo .st-log { list-style:none; margin:0; padding:0; display:grid; gap:.375rem; font-size:.75rem }
    #st-demo .st-log li { display:grid; gap:.125rem; padding:.375rem .5rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle) }
    #st-demo .st-log code { font:500 .6875rem/1.2 var(--mv-font-mono); color:var(--mv-fg) }
    #st-demo .st-log span { color:var(--mv-fg-muted) }
    #st-demo .st-log .st-empty { background:none; padding:0; color:var(--mv-fg-subtle) }
    #st-demo .st-minis { display:grid; gap:1rem }
    @media (max-width:60rem) {
      #st-demo .st-layout { grid-template-columns:minmax(0,1fr) }
      #st-demo .st-side { position:static; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
    }
  </style>

  <div class="st-layout">
    <mv-scope-tally id="st-main"
      heading="Customer portal rebuild"
      subheading="Harbor &amp; Pine Outfitters · Fixed quote Q-2026-114, signed Jul 28"
      unit="day" rate="850" thresholds="25,50,100" last-seen="2026-09-12">
      <ol data-scope-baseline>
        <li data-id="discovery" data-estimate="1">Discovery workshop and sitemap</li>
        <li data-id="design" data-estimate="3">Visual design: 5 page templates</li>
        <li data-id="cms" data-estimate="2">CMS setup and content model</li>
        <li data-id="catalog" data-estimate="3">Product catalog with filters</li>
        <li data-id="account" data-estimate="2">Customer accounts and order history</li>
        <li data-id="launch" data-estimate="1">QA, launch and handover</li>
      </ol>
      <ol data-scope-changes>
        <li data-id="newsletter" data-kind="add" data-delta="0.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-04" data-status="accepted" data-billable>Newsletter signup synced to the CRM</li>
        <li data-id="templates" data-kind="change" data-target="design" data-delta="1.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-12" data-status="accepted" data-billable>Two more page templates: Stores and Careers</li>
        <li data-id="sso" data-kind="add" data-delta="2" data-by="Daniel Okafor" data-role="Client IT" data-date="2026-08-19" data-status="accepted" data-billable>Staff sign-in through the company directory (SSO)</li>
        <li data-id="sitemap" data-kind="remove" data-target="discovery" data-by="Maya Chen" data-role="Client" data-date="2026-08-27" data-status="accepted">Discovery workshop dropped<span data-note>The client supplied an approved sitemap from their agency of record.</span></li>
        <li data-id="chat" data-kind="add" data-delta="4" data-by="Leo Martins" data-role="Client" data-date="2026-08-30" data-status="declined">Custom live chat widget<span data-note>Replaced by their existing help desk embed, at no cost.</span></li>
        <li data-id="locator" data-kind="add" data-delta="2" data-by="Maya Chen" data-role="Client" data-date="2026-09-03" data-status="accepted" data-billable>Store locator with map and opening hours</li>
        <li data-id="filters" data-kind="change" data-target="catalog" data-delta="1.5" data-by="Aiko Tanaka" data-role="Studio lead" data-date="2026-09-08" data-status="accepted" data-billable="false">Catalog filters by size, color and in-store stock<span data-note>Underestimated in the quote; absorbed by the studio.</span></li>
        <li data-id="i18n" data-kind="add" data-delta="3" data-by="Priya Raman" data-role="Client marketing" data-date="2026-09-10" data-status="deferred">French and Spanish versions of the site</li>
        <li data-id="giftcards" data-kind="add" data-delta="2.5" data-by="Leo Martins" data-role="Client" data-date="2026-09-15" data-status="accepted" data-billable>Gift cards at checkout</li>
        <li data-id="loyalty" data-kind="add" data-delta="3" data-by="Leo Martins" data-role="Client" data-date="2026-09-18" data-status="pending">Loyalty points in the account area<span data-note>Needs the points API from their POS vendor, expected in October.</span></li>
        <li data-id="a11y" data-kind="add" data-delta="1" data-by="Samira Haddad" data-role="Studio QA" data-date="2026-09-22" data-status="pending" data-billable="false">Fixes from the accessibility audit (contrast, focus order)</li>
      </ol>
    </mv-scope-tally>

    <aside class="st-side" aria-label="Demo controls">
      <div class="st-panel">
        <h4>Try it</h4>
        <p>Decide the pending requests, hover a step to find it on the rails, or switch to Compare to original.</p>
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="st-request">Client sends a new request</button>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="st-readonly">
          <span class="mv-choice-text"><span class="mv-choice-title">Client view</span><span class="mv-choice-description">Read-only, no decision buttons</span></span>
        </label>
      </div>
      <div class="st-panel">
        <span class="st-k">Events</span>
        <ol class="st-log" id="st-log"><li class="st-empty">Decide a request to see mv-scope-decision</li></ol>
      </div>
      <div class="st-minis">
        <mv-scope-tally id="st-sprint" variant="summary" heading="Sprint 42 commitment" subheading="Payments team · Sep 15 to Sep 26" unit="point" thresholds="15,30"></mv-scope-tally>
        <mv-scope-tally id="st-brand" variant="summary" heading="Brand guidelines" subheading="Northwind Labs · Fixed fee" unit="USD" thresholds="25,50"></mv-scope-tally>
      </div>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-scope-tally");
    const $ = (id) => document.getElementById(id);
    const main = $("st-main"), log = $("st-log");

    $("st-sprint").baseline = [
      { id: "refunds", label: "Partial refunds", estimate: 8 },
      { id: "payouts", label: "Scheduled payouts", estimate: 13 },
      { id: "report", label: "Legacy settlement report", estimate: 5 },
      { id: "webhooks", label: "Webhook retries", estimate: 8 },
    ];
    $("st-sprint").changes = [
      { id: "hotfix", label: "Hotfix: refund rounding", delta: 3, by: "On-call", date: "2026-09-16", status: "accepted" },
      { id: "applepay", label: "Apple Pay on web", delta: 8, by: "Product", date: "2026-09-17", status: "accepted" },
      { id: "drop", label: "Legacy report moved out", kind: "remove", target: "report", date: "2026-09-18", status: "accepted" },
      { id: "alerts", label: "Chargeback alerts", delta: 5, by: "Risk", date: "2026-09-22", status: "pending" },
    ];
    $("st-brand").baseline = [
      { id: "logo", label: "Logo refresh", estimate: 4500 },
      { id: "guide", label: "Guidelines document", estimate: 5000 },
      { id: "templates", label: "Social templates", estimate: 2500 },
    ];
    $("st-brand").changes = [
      { id: "motion", label: "Motion logo", delta: 1800, by: "Client", date: "2026-09-02", status: "accepted", billable: true },
      { id: "print", label: "Print stationery", delta: 950, by: "Client", date: "2026-09-11", status: "accepted", billable: true },
      { id: "signage", label: "Store signage kit", delta: 2400, by: "Client", date: "2026-09-19", status: "pending" },
    ];

    const push = (name, text) => {
      log.querySelector(".st-empty")?.remove();
      const li = document.createElement("li");
      const code = document.createElement("code");
      code.textContent = name;
      const span = document.createElement("span");
      span.textContent = text;
      li.append(code, span);
      log.prepend(li);
      while (log.children.length > 4) log.lastElementChild.remove();
    };
    const pct = (g) => `${g >= 0 ? "+" : ""}${Math.round(g * 100)}%`;
    main.addEventListener("mv-scope-decision", (e) => {
      const { decision, change, after } = e.detail;
      push("mv-scope-decision", `${decision} · ${change.label} → ${after?.now ?? main.totals.now} days`);
    });
    main.addEventListener("mv-scope-threshold", (e) => {
      const { threshold, direction, growth } = e.detail;
      push("mv-scope-threshold", `${direction} · +${threshold}% review point (${pct(growth)})`);
    });
    main.addEventListener("mv-scope-export", (e) => push("mv-scope-export", `${e.detail.text.split("\n").length} lines of summary`));

    const requests = [
      { label: "Export order history to CSV", delta: 1, by: "Maya Chen", role: "Client" },
      { label: "Wishlist shared by email", delta: 1.5, by: "Leo Martins", role: "Client" },
      { label: "Staff-only price overrides", delta: 2, by: "Daniel Okafor", role: "Client IT" },
    ];
    let next = 0;
    $("st-request").addEventListener("click", () => {
      const r = requests[next++ % requests.length];
      main.addChange({ ...r, id: `req-${next}`, date: new Date(), status: "pending" });
    });
    $("st-readonly").addEventListener("change", (e) => { main.readonly = e.target.checked; });
  </script>
</div>

Referência cultural

O Pescador e sua Mulher, Irmãos Grimm (1812, fábula). Cada desejo atendido leva direto a outro maior, uma casinha, depois um castelo, um reino e mais, e a água fica mais escura a cada volta até que tudo se perde. Na interface, cada pedido aceito é um degrau visível sobre o pedido original, cada degrau um tom mais escuro que o anterior, com pontos de revisão que convidam a uma conversa sobre orçamento e prazo antes que o escopo saia do controle.

API

Attributes

Name	Tipo	Default	Description
`heading`	string	`Scope`	Title of the card (project, quote or sprint name). Also heads the exported summary.
`subheading`	string		Secondary line under the title (client, quote number, signature date).
`heading-level`	number (2-6)	`3`	Level of the heading element.
`unit`	"day" \| "hour" \| "week" \| "month" \| any noun ("point") \| 3-letter currency code ("USD")	`day`	Unit of every estimate. Time units are formatted with Intl (“1 day”, “2.5 days”), other nouns get a plural (see unit-plural), a currency code formats estimates as money.
`unit-plural`	string		Plural of a custom unit when adding “s” is wrong (unit="person-day" unit-plural="person-days").
`rate`	number		Price per unit. When set, billable accepted changes also show their amount (“8.5 days billable ($7,225)”) and the summary adds the rate.
`currency`	ISO 4217 code	`USD`	Currency of rate amounts.
`thresholds`	comma-separated percents	`25,50`	Review points above the original estimate. Drawn as lines across the rails, reported on the step that passed them, and each one reached shows the renegotiation nudge and fires mv-scope-threshold.
`last-seen`	ISO date or date-time		Changes dated after this moment get a “New” tag and the “New since you last looked” divider. Overridden by Mark as seen / markSeen() and by the stored value when storage-key is set.
`storage-key`	string		Persists the last-seen moment and dismissed nudges per browser in localStorage (key mv-scope-tally:`<storage-key>`), synced across tabs.
`view`	"timeline" \| "compare"	`timeline`	Visible view. Reflects the tab chosen by the user.
`variant`	"summary"		Compact card with only the tally, the rails and the nudge (no views, no copy button), for dashboards listing several projects.
`readonly`	boolean		Hides decision and undo buttons, e.g. when the tally is shared with the client. Pending requests still show their impact.
`locale`	BCP 47 tag	`en-US`	Locale for numbers, percents, dates and lists.
`data-scope-baseline / data-scope-changes`	authored lists		On two child lists: each `<li>` of the baseline carries data-id and data-estimate; each change carries data-id, data-kind (add \| change \| remove), data-delta (signed; a removal without delta removes the target’s whole estimate), data-target (id of the item changed or removed), data-by, data-role, data-date, data-status (accepted \| pending \| deferred \| declined) and data-billable (present = billable, "false" = absorbed). The text is the label; an inner [data-note] element becomes the note. Read once, then replaced by the rendered card.
`data-tier / data-over`	set by the component		On the host: number of review points passed, and present once at least one is passed (the --_tier variable deepens the growth pill).

Properties

Name	Tipo	Description
`baseline`	Array<{ id, label, estimate }>	The original ask. Setting it re-renders.
`changes`	Array<{ id, label, kind?, target?, delta?, by?, role?, date?, status?, billable?, note? }>	Every change to the ask. kind defaults to "add" (or "change" when target is set), status to "pending"; dates sort the timeline. Reading it returns each change with its computed effect.
`totals`	{ baseline, now, delta, growth, projected, pending, pendingDelta, accepted, billable, billableAmount, threshold }	Current figures (read-only). growth is a ratio (0.75 = +75%), projected includes every pending request, billableAmount needs rate.
`threshold`	number \| null	Highest review point reached, in percent (read-only).
`seen`	Date \| null	Moment used for the “since you last looked” marker (read-only).
`strings`	Partial<Record<string, string>>	Overrides for every visible text, announcement and summary line ({placeholders} kept). English defaults.

Methods

Name	Description
`decide(id, decision)`	Applies "accept" \| "defer" \| "decline" \| "reopen" from code; emits mv-scope-decision with source "api" (cancelable). Returns false if cancelled, unknown or unchanged.
`addChange(change)`	Appends a change (usually a new pending request), animates it in and announces it. Returns its id.
`removeChange(id)`	Removes a change without an event.
`markSeen(at?)`	Marks everything up to now (or at) as seen, persists it with storage-key and emits mv-scope-seen.
`summary()`	Plain-text summary for a client email: original and current estimate, growth, billable change orders at your rate, pending impact, then accepted, pending, phase 2 and declined changes with date, cost and requester.
`copySummary()`	Emits the cancelable mv-scope-export, then copies the summary. Resolves true when copied.

Events

Name	Description
`mv-scope-decision`	Cancelable, before a decision is applied. detail: { id, decision: "accept" \| "defer" \| "decline" \| "reopen", source: "user" \| "api", previous: { status, billable }, change, totals (before), after: { baseline, now, growth, projected, threshold } }; undo sets detail.undo. preventDefault() keeps the change as it was (e.g. to confirm on the server first, then call decide()).
`mv-scope-threshold`	The highest review point reached changed after a decision or a data update. detail: { threshold, level, direction: "up" \| "down", growth, baseline, now }. Not fired for the initial state: read threshold instead.
`mv-scope-export`	Cancelable, before Copy summary writes to the clipboard. detail: { text, format: "text" }. preventDefault() to open your own mail composer with detail.text instead.
`mv-scope-seen`	Mark as seen was used. detail: { lastSeen }.
`mv-scope-view`	The user switched views. detail: { view }.

CSS classes

Name	Description
`mv-scope-tally-card`	The card (section labelled by the heading): -head, -overview, -nudge, -body.
`mv-scope-tally-tally / -subline`	Tally in words (-fig, -fig-label, -fig-value, -growth with data-dir, -across) and the pending / billable line.
`mv-scope-tally-strip`	Decorative rails (aria-hidden): -rail[data-rail=original\|now], -track, -seg[data-seg=original\|removed\|kept\|step\|pending] (data-id, --_d depth, data-active when linked), -marks / -mark[data-reached], -legend.
`mv-scope-tally-nudge`	Review-point note (role=note) with -nudge-title and Copy summary / Dismiss.
`mv-scope-tally-tabs / -tab / -panel`	View switcher (tablist) and its panels.
`mv-scope-tally-steps / -step`	Timeline `<ol>`; each step has data-id, data-status, data-kind, data-sign, data-new, and holds -node, -since (first new step), -step-top, -delta, -step-label, -step-by, -step-note, -step-foot (-status, -running, -cross), -decide, -undo.
`mv-scope-tally-table`	Compare to original table: tbody[data-group=added\|changed\|removed\|unchanged], tfoot totals, -compare-note.

CSS variables

Name	Default	Description
`--mv-scope-tally-step`	`var(--mv-accent)`	Hue of accepted steps; each step mixes more of it than the previous one.
`--mv-scope-tally-review`	`var(--mv-warning)`	Review-point lines, the nudge and the growth pill once a point is passed.
`--mv-scope-tally-pending`	`var(--mv-warning)`	Hatching and ink of pending requests.
`--mv-scope-tally-original`	`muted neutral`	Fill of the original ask on both rails.

Accessibility

The card is a <section> labelled by its heading. Everything the rails show is also written as text: the tally paragraph reads “Original: 12 days · Now: 21 days · +75% across 7 accepted changes”, the subline gives pending impact and billable days, and the rails themselves are aria-hidden (their segments are a pointer-only shortcut that scrolls to and focuses the matching step). The timeline is an ordered list in date order; each step states its date (<time>), kind (Added, Changed, Removed), cost, requester, status in words with an icon (Accepted · Change order, Awaiting decision, Moved to phase 2, Declined), the running total and any review point it passed, so nothing relies on color or hatching. The “New since you last looked” divider is real text inside the first new step, and every later new step carries a “New” tag. Decisions are native buttons grouped per request (role=group, “Decision for Loyalty points…”); after a decision focus moves to that step’s Undo button, after an undo back to Accept, and a polite status region announces the result with the new total (“Gift cards at checkout: Accepted. Total 21 days, +75% compared with the original.”), new requests and review points passed. The view switcher is a tablist with roving tabindex (arrow keys, Home, End) and automatic activation; the compare view is a real table with a caption, column and row headers, row groups and a totals footer, dashes read as “none”. The nudge is a role=note with a labelled Dismiss button. Reduced motion (OS or data-motion="reduce"): no segment growth, no flash, no slide-in. Forced colors: rails, marks and chips switch to system colors with borders and dashed outlines.