diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md index 0829314..438ea2a 100644 --- a/docs/DESIGN_SYSTEM.md +++ b/docs/DESIGN_SYSTEM.md @@ -400,6 +400,13 @@ squeezed beside long module headings on mobile. - Labels are uppercase and letter-spaced. - Inputs use dark surfaces, one-pixel borders, and clear disabled styling. +- Text selection uses the SHD orange selection token with dark contrasting text; + never rely on the browser's white or platform-blue highlight. Focused text, + number, search, select, and textarea controls use a one-pixel orange border, + while keyboard `focus-visible` adds a restrained one-pixel external orange + ring with a one-pixel offset. Do not stack inset accent edges with this focus + treatment. Carets and native checkbox, radio, and range accents use orange. + Browser-autofilled fields retain the dark SHD surface and light text. - Related min/max fields remain visually paired. - Small mutually exclusive option sets use a compact segmented radio control, even when visually presented like selectable checkbox cells. Include an @@ -742,6 +749,14 @@ Do not add zero badges or counts to informational registries such as Audit History and System Metrics. Badge text must expose an `awaiting review` label to assistive technology; color supplements that meaning rather than replacing it. +Registry name search is server-backed and updates as the user types after a +short debounce; it must search the complete filtered registry rather than only +the visible page. Preserve active filters and row-count settings, reset results +to page one, keep input focus, avoid scrolling, and replace browser history so +each keystroke does not create a navigation entry. Retain an explicit Search +button for immediate submission and keyboard/accessibility fallback. During +navigation, expose a textual pending state and suppress duplicate submissions. + Pending records may be used as dependencies in later proposals by any contributor. Render these choices in the ordinary assignment control with a restrained orange border/background and the explicit text `PENDING` plus the diff --git a/src/app.css b/src/app.css index ee6c598..27616a9 100644 --- a/src/app.css +++ b/src/app.css @@ -10,6 +10,9 @@ --shd-text-dim:#5d6567; --shd-orange:#f6a821; --shd-orange-hover:#ffc45d; + --shd-focus-ring:#f6a821; + --shd-selection-bg:#f6a821; + --shd-selection-text:#111415; --shd-success:#75c08c; --shd-danger:#df8069; --shd-info:#70b9d6; @@ -29,6 +32,7 @@ --shd-transition:transform .12s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{min-height:calc(100vh / var(--shd-display-scale));display:flex;flex-direction:column;margin:0;background:var(--shd-bg);color:var(--shd-text);font-family:Arial,Helvetica,sans-serif} button,input{font:inherit} a,a:hover,a:focus,a:focus-visible,a:active,a:visited{text-decoration:none} + ::selection{background:var(--shd-selection-bg);color:var(--shd-selection-text)}input,textarea{caret-color:var(--shd-orange)}input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--shd-orange)}:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea):focus{border-color:var(--shd-focus-ring);outline:none}:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea):focus-visible{outline:1px solid var(--shd-focus-ring);outline-offset:1px}:where(input,textarea):-webkit-autofill,:where(input,textarea):-webkit-autofill:hover,:where(input,textarea):-webkit-autofill:focus{-webkit-text-fill-color:var(--shd-text);caret-color:var(--shd-orange);box-shadow:inset 0 0 0 1000px #15130e;transition:background-color 9999s ease-out} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .site-footer{flex:0 0 auto;margin-top:auto} .contact-page.contact-page{margin:0 auto} diff --git a/src/lib/components/RegistryPagination.svelte b/src/lib/components/RegistryPagination.svelte index 833f5e5..e3110f0 100644 --- a/src/lib/components/RegistryPagination.svelte +++ b/src/lib/components/RegistryPagination.svelte @@ -1,5 +1,7 @@