stylegallery 0.1.11 → 0.1.13

package/design-engineering/evidence-patterns/faceted-filters.md

@@ -0,0 +1,90 @@
+---
+type: Domain Guide
+title: Faceted Filter Selection
+description: Make applied filters visible and removable while matching selection logic to the user's search task.
+aliases: ["faceted filters","applied filters","filter chips","OR filter values"]
+questions: ["How should multiple filter values combine and remain visible?"]
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-10-19
+---
+
+# Faceted Filter Selection
+
+Primary role: filter selection and recovery guide.
+
+## Repository Boundary
+
+This page owns filter meaning and visibility. [URL State](../state-management/patterns/url-state.md) owns serialization/history; [Latest Request Wins](../state-management/patterns/latest-request-wins.md) owns response authority. Layout owns sidebar and wrapping mechanics.
+
+## Reusable Method
+
+### Problem And Use
+
+Users forget hidden constraints and mistake a narrowed result set for the entire catalog. Use facets when users need to combine meaningful independent attributes. Avoid a dense facet system for a tiny list or attributes users cannot interpret.
+
+### Recommended Rules
+
+1. For ordinary product attributes, begin with OR within a facet and AND across facets: `(blue OR black) AND medium`. Explain any different query semantics.
+2. Show actual applied values, not just "3 filters". Include inherited/promoted filters and offer individual removal.
+3. Local proposal: provide one clear-all action when multiple optional constraints are active. Define which mandatory scope it cannot remove.
+4. Choose immediate application or an explicit Apply action from measured query cost and task behavior. Keep draft choices distinct from applied choices.
+5. Update the count and list from the same accepted request. Preserve the query and selected filters on no results; offer reversible broadening.
+
+### Evidence
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [Baymard combined values](https://baymard.com/research-articles/allow-applying-of-multiple-filter-values) | 2024 | E-commerce observations: mutually exclusive values forced repeated searches and memorization. 15% benchmark non-support is site prevalence, not a causal abandonment estimate. OR/AND is a commerce convention, not every domain's query language. |
+| [Baymard applied overview](https://baymard.com/research-articles/how-to-design-applied-filters) | 2020; updated 2026 | Observed confirmation, removal, and context problems without an overview. Article explicitly says testing was inconclusive about which desktop overview placement was most effective. |
+
+### Example
+
+Local server-backed filter form. The response should reflect applied selections and give each removable filter a URL preserving the others.
+
+```html
+<form action="/catalog" method="get">
+  <fieldset>
+    <legend>Color: match any selected color</legend>
+    <label><input type="checkbox" name="color" value="blue" checked>Blue</label>
+    <label><input type="checkbox" name="color" value="black">Black</label>
+  </fieldset>
+  <label for="size">Size</label>
+  <select id="size" name="size">
+    <option value="">Any size</option>
+    <option value="medium" selected>Medium</option>
+  </select>
+  <button>Apply filters</button>
+</form>
+<nav aria-label="Applied filters">
+  <a href="/catalog?size=medium">Remove color: blue</a>
+  <a href="/catalog?color=blue">Remove size: medium</a>
+  <a href="/catalog">Clear all filters</a>
+</nav>
+```
+
+## Opinionated Guidance
+
+Keep removal close to the results it explains. Use meaningful option names, and distinguish unavailable choices from choices that would produce zero results.
+
+## Platform-Specific Guidance
+
+A mobile filter sheet can hide draft choices; return to the result list with a visible applied overview. Focus return belongs to the sheet's interaction contract.
+
+## Unsupported Absolutes
+
+OR within every group is wrong for queries such as "contains all these ingredients". An applied-filter count alone does not explain scope. No fixed number of facets is proven optimal.
+
+## Verification Contract
+
+Proposed checks: two values in one facet, two facet types, direct URL, Back, clear-one, clear-all, zero results, obsolete response, and mobile sheet dismissal. Accessibility requires labeled groups, keyboard removal, stable focus after removal, and concise announced result updates for dynamic changes. No consumer execution is claimed. Re-review on query logic or application-policy changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis and fragment; primary sources rechecked 2026-10-19, no upstream samples copied. `consumer_reference: not_applicable` because no consumer search record is selected.
+
+## IA Navigation
+
+Parent: [Evidence Patterns](index.md).
+Next: [Empty States And No Results](empty-states.md).

package/design-engineering/evidence-patterns/form-labels.md

@@ -0,0 +1,82 @@
+---
+type: Domain Guide
+title: Persistent Form Labels
+description: Keep field identity and required instructions visible while users enter, review, and correct data.
+aliases: ["label placement","persistent labels","placeholder labels","floating labels"]
+questions: ["Should form labels sit above fields or inside placeholders?"]
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-10-19
+---
+
+# Persistent Form Labels
+
+Primary role: field labeling decision guide.
+
+## Repository Boundary
+
+This page owns persistent meaning and label selection. Layout owns spatial composition; [Text Input](../text-input-and-internationalization.md) owns direction and text editing. No decorative label system is introduced into reusable patterns.
+
+## Reusable Method
+
+### Problem And Use
+
+Placeholder-only labels disappear just when users need to review or correct a value. Use persistent labels for data-entry controls. Avoid adding redundant visible copy when a control already has a clear visible name, such as a button.
+
+### Recommended Rules
+
+1. Provide one unambiguous accessible name for each input and a persistent visible label for ordinary form fields. Associate a native `label` with its input.
+2. Local starting point: place labels above fields for narrow or translated forms. Side-aligned labels are a valid alternative when scanning and content fit are verified; there is no universal winning pixel gap.
+3. Put necessary format/required instructions outside placeholders. Explain any required marker and distinguish optional fields consistently.
+4. A floating label must remain readable after typing, autofill, validation, and zoom. Reserve room for full error messages; do not shrink labels into unreadable captions.
+5. Group related choices with `fieldset` and `legend`; each option still needs its own label.
+
+### Evidence
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [Baymard mobile inline labels](https://baymard.com/research-articles/mobile-forms-avoid-inline-labels) | 2013 | Qualitative mobile checkout observations: users deleted entered values to recover vanished labels, with some abandonment. No controlled completion-time estimate. "Inline labels" here means disappearing placeholder-style labels, not inline validation. |
+| [Labels or instructions, SC 3.3.2](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html) | 2024 Recommendation; living explanation read 2026 | Labels/instructions required when content requires input. Does not prescribe above-versus-left placement or a measured spacing value. |
+
+### Example
+
+```html
+<form action="/profile" method="post">
+  <label for="display-name">Display name</label>
+  <p id="name-help">Use the name you want other members to see.</p>
+  <input id="display-name" name="displayName" autocomplete="nickname"
+    aria-describedby="name-help">
+  <fieldset>
+    <legend>Digest frequency</legend>
+    <label><input type="radio" name="digest" value="weekly" checked>Weekly</label>
+    <label><input type="radio" name="digest" value="never">Never</label>
+  </fieldset>
+  <button>Save profile</button>
+</form>
+```
+
+## Opinionated Guidance
+
+Keep the label short and put explanations in associated help text. A quiet-looking form that requires memorization has not become simpler.
+
+## Platform-Specific Guidance
+
+Native floating-label controls and browser autofill need their own verification. Aligning text differently for RTL does not remove label associations or change reading order.
+
+## Unsupported Absolutes
+
+The cited study does not prove above-field labels always beat side labels. Its limited 1-2-field exceptions do not remove the accessible-name obligation. Floating labels are not automatically inaccessible or automatically proven usable.
+
+## Verification Contract
+
+Proposed checks: empty, populated, autofilled, invalid, disabled, long label, RTL, keyboard activation of a label, and zoom. Accessibility requires visible meaning, programmatic association, and contrast in each state; test both the name and help description. No browser/consumer execution is claimed. Re-review when label movement, autofill, or form composition changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis and example; sources rechecked 2026-10-19. No source samples copied. `consumer_reference: not_applicable` because no consumer form record is selected.
+
+## IA Navigation
+
+Parent: [Evidence Patterns](index.md).
+Next: [Localized Input Masks](input-masks.md).

package/design-engineering/evidence-patterns/index.md

@@ -0,0 +1,69 @@
+# Evidence-Based Interface Patterns
+
+Primary role: product interaction selection guide.
+
+Domain classification: design-engineering. Lifecycle: `experimental`. Provenance: locally authored synthesis. Reviewed on: 2026-10-19.
+
+## Repository Boundary
+
+Domain classification: design-engineering. These 12 experimental patterns own product decisions, not reusable spatial primitives or shared visual defaults. [Layout](../../layout/index.md) retains spatial ownership; [Quality](../../quality/index.md) retains evidence and accessibility precedence. This collection selects no consumer profile.
+
+## Reusable Method
+
+Start with the failure the user encounters, then select a pattern and verify its proposed cases in the consumer. Requirements, observed research findings, and local recommendations are different kinds of support.
+
+### Pattern Routes
+
+| User problem | Pattern | Decision |
+| --- | --- | --- |
+| Errors appear before entry is complete. | [Inline Validation Timing](inline-validation.md) | First validation versus correction timing |
+| Submission fails without a recovery path. | [Error Messages And Recovery Summaries](error-recovery.md) | Specific messages, summary, focus |
+| Field identity disappears after typing. | [Persistent Form Labels](form-labels.md) | Persistent labels and instructions |
+| Formatting rejects valid regional data. | [Localized Input Masks](input-masks.md) | Flexible input versus verified mask |
+| Hidden filters narrow the catalog unexpectedly. | [Faceted Filter Selection](faceted-filters.md) | Query logic and applied-value removal |
+| Empty content has no explanation. | [Empty States And No Results](empty-states.md) | First use versus zero matches/failure |
+| Table sorting or comparison loses context. | [Data Table Interaction](data-tables.md) | Sort scope, density, header semantics |
+| Similar controls imply different actions. | [Tabs And Segmented Controls](tabs-and-segmented-controls.md) | Panels versus values versus routes |
+| Highlighted text is committed accidentally. | [Autocomplete Acceptance](autocomplete.md) | Draft, candidate, accepted identity |
+| Parent location is confused with history. | [Breadcrumb Hierarchy](breadcrumbs.md) | Ancestry versus Back |
+| Bottom navigation mixes commands and routes. | [Bottom Navigation Destinations](bottom-navigation.md) | Stable peer destinations |
+| Theme changes erase meaningful contrast. | [Dark Mode Contrast](dark-mode-contrast.md) | Actual state/pair measurement |
+
+### Existing Owners To Extend Or Compose
+
+- [Loading And Feedback](../loading-and-feedback.md): toast versus inline feedback, skeleton/spinner selection, and bounded 0.1/1/10-second heuristics.
+- [Native Interaction Contracts](../native-interaction-contracts.md): modal focus containment and return.
+- [Input And Focus](../../platform-guides/input-and-focus.md): 24/44 CSS px target criteria, gesture alternatives, and input paths.
+- [Deletion And Supported Undo](../state-management/recipes/delete-undo.md): confirmation versus real reversibility.
+- [Accessible Motion](../../motion/accessible-motion.md): motion alternatives for pending work.
+
+### Evidence Reading Rules
+
+WCAG references use the [2024 WCAG 2.2 Recommendation](https://www.w3.org/TR/WCAG22/); its Understanding pages explain requirements. APG is informative implementation guidance. Living documents are labeled by the 2026 reading year where no fixed publication year is claimed. Baymard and NN/g findings retain their task context: site prevalence is not a user success rate, an observed extreme is not a mean, and a recommendation is not a controlled experiment.
+
+All cited bodies were rechecked 2026-10-19. A resolving URL is not proof that its recommendation fits every product. No consumer study, assistive-technology run, or browser conformance result is claimed.
+
+## Opinionated Guidance
+
+Prefer a bounded rule with a counterexample over a borrowed absolute. Numeric requirements retain their criterion, units, level, and exceptions; local counts and timings are explicitly proposals rather than research results.
+
+## Platform-Specific Guidance
+
+Record the actual browser, OS, input method, and assistive technology. Apple HIG and Android conventions are not web standards, and native points/dp are not automatically CSS pixels.
+
+## Unsupported Absolutes
+
+"Evidence-based" does not mean empirically proven for every task. No source in this collection authorizes a universal visual theme, mandatory framework, or accessibility guarantee from a code fragment.
+
+## Verification Contract
+
+For each chosen pattern, turn its cases into expected outcomes, run the real task, and retain actual evidence separately. The repository's domain/link/material checks validate documentation structure and retrieval, not those product outcomes. Re-review on a source revision, failed task, changed semantics, or changed owner.
+
+## Source, License, And Attribution
+
+Locally authored synthesis; primary sources are linked in each pattern with year and measurement boundary. No upstream prose, artwork, or samples copied. `consumer_reference: not_applicable` because the collection selects no consumer record.
+
+## IA Navigation
+
+Parent: [Design Engineering](../index.md).
+Next: [Inline Validation Timing](inline-validation.md).

package/design-engineering/evidence-patterns/inline-validation.md

@@ -0,0 +1,94 @@
+---
+type: Domain Guide
+title: Inline Validation Timing
+description: Validate completed input without interrupting initial entry and clear corrected errors promptly.
+aliases: ["inline validation","validation timing","validate on blur","premature validation"]
+questions: ["When should form fields show validation errors?"]
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-10-19
+---
+
+# Inline Validation Timing
+
+Primary role: form validation decision guide.
+
+## Repository Boundary
+
+This page owns when product validation becomes visible. [Text Input And Internationalization](../text-input-and-internationalization.md) owns composition and editing; [Error Recovery](error-recovery.md) owns message content and submission summaries. Client feedback does not replace server validation.
+
+## Reusable Method
+
+### Problem And Use
+
+An incomplete value is not necessarily a mistake: the user may still be typing. Use inline validation when a field can be checked independently. Avoid a success claim when validity depends on an uncompleted server check or another unfinished field.
+
+### Recommended Rules
+
+1. Local proposal: start with three presentation states: untouched, checked-invalid, checked-valid. Do not show required-field errors on initial focus.
+2. Check a newly edited field on leaving it, or at a genuinely complete input boundary. There is no universal character count or millisecond debounce for all fields.
+3. After an error is exposed, recheck on committed input so it disappears when corrected. Recheck dependent fields when their dependency changes.
+4. Keep submission validation as a backstop. Preserve all recoverable input, identify every rejected field, and accept only the current request's result.
+5. During IME composition, preserve provisional text; defer disruptive validation until composition completes. "Format accepted" must not claim that an address exists or a payment succeeded.
+
+### Evidence
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [Baymard inline validation](https://baymard.com/research-articles/inline-form-validation) | 2024 | Qualitative checkout observations: premature errors interrupted typing; stale errors misled users after correction. Public article provides examples, not a controlled effect size or participant denominator for these claims. |
+| [WCAG error identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html) | 2024 Recommendation; living explanation read 2026 | SC 3.3.1 requires text identification of automatically detected errors. It does not prescribe blur timing. No usability experiment. |
+
+### Example
+
+This local example progressively adds blur feedback to native validation; native submission remains available. Server checks are outside its scope.
+
+```html
+<form action="/subscribe" method="post">
+  <label for="address">Email address</label>
+  <input id="address" name="email" type="email" required
+    aria-describedby="address-error">
+  <p id="address-error"></p>
+  <button>Subscribe</button>
+</form>
+<script>
+const field = document.querySelector("#address");
+const error = document.querySelector("#address-error");
+let checked = false;
+function validate() {
+  const invalid = !field.validity.valid;
+  field.setAttribute("aria-invalid", String(invalid));
+  error.textContent = invalid ? "Enter a complete email address." : "";
+}
+field.addEventListener("blur", () => { checked = true; validate(); });
+field.addEventListener("input", (event) => {
+  if (checked && !event.isComposing) validate();
+});
+field.addEventListener("compositionend", () => { if (checked) validate(); });
+</script>
+```
+
+## Opinionated Guidance
+
+Prefer fewer truthful messages over a green check on every keystroke. Keep visual updates separate from announcements so correction does not create continuous speech.
+
+## Platform-Specific Guidance
+
+Native validation messages and focus behavior differ by browser. A server-rendered rejection needs equivalent inline relationships and preserved values.
+
+## Unsupported Absolutes
+
+Blur is not always the correct commit boundary. Baymard's checkout findings do not establish an optimal timing policy for every form. Its article contains inconsistent 31%/32% benchmark figures; neither is used here as an effect estimate.
+
+## Verification Contract
+
+Proposed checks: initial focus has no error; blur an incomplete value; correct it without blurring; edit a confirmation dependency; paste; compose text; submit untouched required fields; receive an obsolete server response. Inspect text, `aria-invalid`, focus, and announcements. Accessibility requires text rather than color alone and a programmatic field/message relationship. These cases and the example have not been executed against a consumer. Re-review on validation, dependency, or input-method changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis and example; no source samples copied. Sources rechecked 2026-10-19. `consumer_reference: not_applicable` because no consumer form record is selected.
+
+## IA Navigation
+
+Parent: [Evidence Patterns](index.md).
+Next: [Error Messages And Recovery Summaries](error-recovery.md).

package/design-engineering/evidence-patterns/input-masks.md

@@ -0,0 +1,79 @@
+---
+type: Domain Guide
+title: Localized Input Masks
+description: Choose flexible input before adding a verified regional mask that preserves editing and valid data.
+aliases: ["input masks","phone formatting","localized input","masked fields"]
+questions: ["When should a phone field use an input mask?"]
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-10-19
+---
+
+# Localized Input Masks
+
+Primary role: formatting and mask selection guide.
+
+## Repository Boundary
+
+This page owns whether formatting should constrain a field. [Text Input And Internationalization](../text-input-and-internationalization.md) owns IME, caret, undo, and representation boundaries. Domain guidance supplies no shared mask library or universal telephone parser.
+
+## Reusable Method
+
+### Problem And Use
+
+A mask can clarify grouping but reject perfectly valid numbers from another country. Use it only for a verified, bounded format with a demonstrated input need. Avoid one fixed mask for international phone numbers, names, or uncertain identifiers.
+
+### Recommended Rules
+
+1. Start with flexible text input. Local proposal: support at least paste, autofill, selection replacement, deletion, and undo before considering a mask acceptable.
+2. Separate raw edit text, parsed canonical data, and display formatting. Never silently truncate to fit the display.
+3. Apply regional formatting only after the region and its valid forms are known. Unsupported regions retain the flexible field.
+4. Prefer `type="tel"` for telephone input, not a numeric quantity control. Keyboard hints are not validators; preserve a meaningful plus sign and extension when the contract supports them.
+5. Treat incomplete input as an editing state. Reformat at a declared commit boundary when live rewriting would disrupt composition or caret position.
+
+### Evidence
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [Baymard input masking](https://baymard.com/research-articles/input-masking-form-field) | 2017 | Reports 89% of test subjects entered restricted numerical fields differently from supplied formatting examples. This is observed formatting variation, not a mask benefit percentage; the public article does not give a denominator for that statistic. |
+| [Labels or instructions](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html) | 2024 Recommendation; living explanation read 2026 | Required instructions must be available; a mask does not itself establish an accessible field name or explanation. No usability measurement. |
+
+### Example
+
+This is the intentional unmasked default, not a partial mask implementation. The server must parse and validate the supported regions without assuming a fixed digit count.
+
+```html
+<form action="/contact" method="post">
+  <label for="phone">Contact telephone</label>
+  <p id="phone-help">Include your country code. Spaces and punctuation are accepted.</p>
+  <input id="phone" name="phone" type="tel" autocomplete="tel"
+    aria-describedby="phone-help">
+  <button>Save contact</button>
+</form>
+```
+
+## Opinionated Guidance
+
+Use a mask to aid input, never to conceal a parser's narrow assumptions. Verify the help text against what the server actually accepts.
+
+## Platform-Specific Guidance
+
+Phone keyboards, autofill payloads, and composition paths vary across devices. Verify a real input method; synthetic key events do not reproduce it.
+
+## Unsupported Absolutes
+
+Not all telephone numbers have 10 digits. An example placeholder does not force users to follow that format. The 2017 findings do not prove a particular modern masking library reliable.
+
+## Verification Contract
+
+Proposed checks: international plus prefix, variable lengths, extension, pasted punctuation, caret edits in the middle, clear/undo, autofill, IME, and region change while editing. Accessibility requires persistent labels, announced errors, and no unexplained rejection or loss of data. Record round-trip values and selection positions. No consumer execution is claimed. Re-review when supported regions, parser, or formatter changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis and example; sources rechecked 2026-10-19, no source code copied. `consumer_reference: not_applicable` because no consumer input record is selected.
+
+## IA Navigation
+
+Parent: [Evidence Patterns](index.md).
+Next: [Faceted Filter Selection](faceted-filters.md).

package/design-engineering/evidence-patterns/tabs-and-segmented-controls.md

@@ -0,0 +1,81 @@
+---
+type: Domain Guide
+title: Tabs And Segmented Controls
+description: Separate panel navigation from value selection and choose an explicit keyboard and activation model.
+aliases: ["tabs versus segmented control","tab activation","segmented selection","tab panels"]
+questions: ["Should this control be tabs or a segmented selector?"]
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+reviewed_on: 2026-10-19
+---
+
+# Tabs And Segmented Controls
+
+Primary role: mutually exclusive view and value selection guide.
+
+## Repository Boundary
+
+This page owns semantics and activation, not the wrapping provided by [Tab Strip](../../patterns/in-line-grouping/tab-strip.md). [Native Interaction Contracts](../native-interaction-contracts.md) owns composite behavior selection and focus responsibility.
+
+## Reusable Method
+
+### Problem And Use
+
+Identical pill-shaped visuals can navigate panels, select a value, or issue commands. Use tabs for layered peer panels; use a radio group for one value from related options; use ordinary links for navigation to destinations. Avoid tab roles on controls with no associated panels.
+
+### Recommended Rules
+
+1. For APG tabs, expose a named tablist, tab/panel associations, exactly one selected tab, and one displayed panel in the basic single-selection model.
+2. Provide one tab stop into the tablist; Arrow keys navigate tabs. In manual activation, Space/Enter selects. Horizontal tabs must not consume Up/Down scrolling keys.
+3. Use automatic activation only when panel display has no noticeable latency. Remote loading is a reason to consider manual activation, not a reason to delay keyboard focus.
+4. Treat segment count as platform guidance: Apple suggests about 5-7 in wide interfaces and about 5 or fewer on iPhone. Content fit and localization can require fewer; these are not WCAG limits.
+5. Keep selected values independent from focus. Do not mix selection segments and destructive commands in one control.
+
+### Evidence
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [APG tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Living guidance, read 2026 | Defines keyboard/selection/panel relationships and the no-noticeable-latency condition for automatic activation; no measured millisecond cutoff. |
+| [Apple segmented controls](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) | Living HIG, read 2026; changelog includes 2023 | Platform recommendations and examples, not a comparative experiment. macOS also supports multiple selection or action segments; native appearance does not determine web semantics. |
+
+### Example
+
+This local example intentionally uses native radio semantics for a value, not incomplete tab markup. Product styling may make it segmented without changing its meaning.
+
+```html
+<form action="/report" method="get">
+  <fieldset>
+    <legend>Report period</legend>
+    <label><input type="radio" name="period" value="week" checked>Week</label>
+    <label><input type="radio" name="period" value="month">Month</label>
+    <label><input type="radio" name="period" value="year">Year</label>
+  </fieldset>
+  <button>Show report</button>
+</form>
+```
+
+## Opinionated Guidance
+
+Record the meaning before choosing a component name. A server-navigated link set can look like tabs while correctly remaining links.
+
+## Platform-Specific Guidance
+
+Apple's toolbar/inspector and main-window recommendations differ; do not transfer an iOS segmented view switch mechanically to macOS or web. HIG body was read through its [official documentation JSON](https://developer.apple.com/tutorials/data/design/human-interface-guidelines/segmented-controls.json).
+
+## Unsupported Absolutes
+
+Five segments is not a universal maximum. Roving focus does not mean automatic selection. A `tab` role alone supplies no keyboard behavior.
+
+## Verification Contract
+
+Proposed checks: Tab entry/exit, Arrow wrap, manual activation, slow panel, preserved panel draft, removed tab, long translation, and zoom. Accessibility requires accurate selection, names, associations, visible focus, and reachable panel content. No consumer execution is claimed. Re-review on widget meaning, activation, or latency changes.
+
+## Source, License, And Attribution
+
+Locally authored synthesis and example; official sources rechecked 2026-10-19. No platform assets or code copied. `consumer_reference: not_applicable` because no consumer selector record is selected.
+
+## IA Navigation
+
+Parent: [Evidence Patterns](index.md).
+Next: [Autocomplete Acceptance](autocomplete.md).

package/design-engineering/index.md

@@ -70,6 +70,23 @@ Choose [State Management](state-management/index.md) for UI state ownership, tra
 
 This domain proposes product-layer questions. [Quality Gates](../quality/index.md) remain the shared authority for claims, evidence families, accessibility precedence, rationale, and debt.
 
+## Evidence Patterns
+
+Use [Evidence-Based Interface Patterns](evidence-patterns/index.md) to distinguish standards, measured observations, and local product recommendations.
+
+- [Inline Validation Timing](evidence-patterns/inline-validation.md)
+- [Error Messages And Recovery Summaries](evidence-patterns/error-recovery.md)
+- [Persistent Form Labels](evidence-patterns/form-labels.md)
+- [Localized Input Masks](evidence-patterns/input-masks.md)
+- [Faceted Filter Selection](evidence-patterns/faceted-filters.md)
+- [Empty States And No Results](evidence-patterns/empty-states.md)
+- [Data Table Interaction](evidence-patterns/data-tables.md)
+- [Tabs And Segmented Controls](evidence-patterns/tabs-and-segmented-controls.md)
+- [Autocomplete Acceptance](evidence-patterns/autocomplete.md)
+- [Breadcrumb Hierarchy](evidence-patterns/breadcrumbs.md)
+- [Bottom Navigation Destinations](evidence-patterns/bottom-navigation.md)
+- [Dark Mode Contrast](evidence-patterns/dark-mode-contrast.md)
+
 ## Source-Backed Deep Dives
 
 - [Native Interaction Contracts](native-interaction-contracts.md). Choose dialog, disclosure, menu, popover, and combobox behavior.

package/design-engineering/loading-and-feedback.md

@@ -2,10 +2,11 @@
 type: Domain Guide
 title: Loading, Progress, And Feedback
 description: Separate input acknowledgement, pending work, stale content, confirmed completion, and measurable responsiveness.
+aliases: ["loading state","spinner","skeleton","progress indicator","로딩 상태","스켈레톤","진행 표시"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local
-reviewed_on: 2026-09-21
+reviewed_on: 2026-10-19
 ---
 
 # Loading, Progress, And Feedback
@@ -61,6 +62,33 @@ The editor submits a snapshot. Connectivity drops after the server may have rece
 
 Keep the submitted snapshot distinct from edits made while saving. A successful acknowledgement for the earlier snapshot cannot mark the newer draft saved. Compose [submitted snapshot](state-management/patterns/submitted-snapshot.md) with [draft and baseline](state-management/patterns/draft-and-baseline.md).
 
+### Indicator Choice And Time Boundaries
+
+Extend this owner rather than creating a second loading-state catalog. A skeleton is useful only when the eventual structure is sufficiently predictable; keep placeholders stationary under reduced motion and reserve realistic space. A spinner conveys indeterminate waiting, not a completion percentage. Prefer real progress when completed and total work are meaningful. None of these choices proves shorter perceived waiting for the current task.
+
+| Source | Year | What was measured or specified |
+| --- | --- | --- |
+| [NN/g response-time limits](https://www.nngroup.com/articles/response-times-3-important-limits/) | 1993; 2014 addendum | Synthesizes approximately 0.1 seconds for immediate-feeling response, 1 second for uninterrupted flow, and 10 seconds for sustained attention. These are published heuristics drawing on earlier HCI work, not a new controlled skeleton-versus-spinner experiment. |
+| [Status Messages explanation](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) | 2024 Recommendation; living explanation read 2026 | SC 4.1.3 addresses programmatically determinable status without taking focus; it specifies no toast timeout. |
+
+Those two sources were rechecked 2026-10-19. The 0.1/1/10-second heuristics help identify a feedback need; they are not exact trigger timers. For work expected to exceed about 10 seconds, explain stage, honest progress where available, and a supported interruption/recovery path. Never fabricate a percent to satisfy that heuristic. Do not artificially hold fast results to display a spinner.
+
+### Toast Versus Inline Feedback
+
+Local selection proposal: keep field errors inline, long-running state with its affected region, and important outcomes in a durable location. A nonmodal toast can supplement a low-priority completed action when missing it does not block recovery. Do not put the only error explanation, required decision, or sole recovery action in a disappearing toast. There is no source-backed universal three-, five-, or ten-second toast duration.
+
+For dynamic status, update an existing concise region without moving focus. Use assertive interruptions only when urgency warrants them; repeated routine success messages should not continually interrupt speech.
+
+```html
+<section aria-labelledby="upload-heading">
+  <h2 id="upload-heading">Upload</h2>
+  <p id="upload-status" role="status">Uploading file 2 of 4.</p>
+  <progress max="4" value="1" aria-label="Files uploaded">1 of 4</progress>
+</section>
+```
+
+This local fragment describes one completed file and the second in progress. The state owner must update both values together from accepted work; it does not implement uploading. For completed-zero and first-use guidance, use [Empty States And No Results](evidence-patterns/empty-states.md).
+
 ## Opinionated Guidance
 
 Prefer feedback that explains the actual stage and preserves a useful next action. Evaluate delays before showing indicators against measured task frequency and latency distribution; do not turn a borrowed delay into a universal rule. Avoid artificially holding completed content merely to finish a decorative loading cycle.

package/design-engineering/native-interaction-contracts.md

@@ -2,6 +2,8 @@
 type: Domain Guide
 title: Native Interaction Contracts
 description: Choose disclosure, dialog, popover, menu, and combobox behavior by semantics, focus, dismissal, and input ownership.
+aliases: ["dialog","popover","modal","menu","combobox","다이얼로그","팝오버","모달"]
+questions: ["When should I use a dialog instead of a popover?"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local
@@ -66,6 +68,14 @@ An editable combobox has at least two responsibilities: editing text and navigat
 
 A disabled-looking control needs a deliberate discoverability policy. Native `disabled` and `aria-disabled` have different behavior; choose which focus and activation behavior the task requires, and explain why an action is unavailable without relying only on color.
 
+### Modal Focus Checklist
+
+The [APG modal-dialog source](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) was rechecked 2026-10-19. It is living informative guidance, not a measured comparison. It requires an explicit model of focus inside the modal, Tab/Shift+Tab containment, Escape dismissal, and focus return. Local checklist: verify both boundaries of the tab sequence, not only initial focus.
+
+For long structured content, consider initial focus on a static heading with `tabindex="-1"` so the beginning remains visible. Do not assign positive tabindex values to force an artificial reading order. Include a visible close action. After closing, return to the opener unless it no longer exists or a documented workflow makes another destination logical. `aria-modal="true"` describes modality; it does not trap focus or make the background inert.
+
+These checks extend this guide's existing modal contract. They do not authorize a second focus-trap implementation or establish a browser/screen-reader result.
+
 ## Opinionated Guidance
 
 Prefer native semantics when they fit the task, and build the smallest custom behavior that remains necessary. Name the semantic reason for every role override. Treat multiple open surfaces as an ownership question: which surface receives Escape, where focus stays, and which state survives dismissal.

package/design-engineering/state-management/patterns/latest-request-wins.md

@@ -2,6 +2,8 @@
 type: Domain Guide
 title: Latest Request Wins
 description: Prevent an older read response from replacing the result of a newer user intent.
+aliases: ["race condition","stale response","out of order responses","경쟁 조건","오래된 응답"]
+questions: ["How do I stop an older search response from replacing newer results?"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local

package/design-engineering/state-management/patterns/optimistic-overlay.md

@@ -2,6 +2,7 @@
 type: Domain Guide
 title: Optimistic Overlay And Recovery
 description: Show a speculative change while preserving an authoritative base for recovery.
+aliases: ["optimistic update","optimistic UI","rollback","낙관적 업데이트"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local

package/design-engineering/state-management/patterns/single-flight.md

@@ -2,6 +2,8 @@
 type: Domain Guide
 title: Single Flight And Duplicate Submission
 description: Apply an explicit policy to repeated activation of one pending operation.
+aliases: ["double submit","duplicate submission","prevent double click","중복 제출","중복 클릭 방지","중복 제출 방지"]
+questions: ["How do I prevent a form from being submitted twice?"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local

package/design-engineering/state-management/patterns/unsaved-navigation.md

@@ -2,6 +2,8 @@
 type: Domain Guide
 title: Unsaved Changes And Navigation
 description: Make leaving an edited screen an explicit decision without losing the current draft.
+aliases: ["unsaved changes warning","leave page confirmation","beforeunload","저장하지 않은 변경 사항","이탈 경고"]
+questions: ["How do I warn before leaving with unsaved changes?"]
 domain: design-engineering
 lifecycle: experimental
 provenance_kind: local