@sovereignfs/ui 0.83.1 → 0.89.1

package/NOTICE

@@ -22,3 +22,11 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+This package includes the Hanken Grotesk typeface (src/fonts, Fontsource's build of the Google Fonts release).
+
+Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk)
+
+SIL Open Font License, Version 1.1. The full text is in fonts/OFL.txt, and at https://openfontlicense.org.

package/README.md

@@ -1,6 +1,6 @@
 # @sovereignfs/ui
 
-Sovereign Design System — design tokens and React components for building [Sovereign](https://github.com/sovereignfs/sovereign) plugins.
+Sovereign Design System — design tokens and React components for building [Sovereign](https://github.com/sovereignfs) apps.
 
 ## Installation
 
@@ -51,7 +51,7 @@ Primitive tokens   --sv-grey-50 … --sv-grey-950  /  --sv-space-1 … --sv-spac
 Semantic tokens    --sv-color-surface  /  --sv-color-text-primary  /  --sv-shadow-card
 ```
 
-Plugin developers reference **semantic tokens** — never primitive colours directly. Dark mode and instance theming work by swapping semantic token values; no component changes required.
+App developers reference **semantic tokens** — never primitive colours directly. Dark mode and instance theming work by swapping semantic token values; no component changes required.
 
 ## Icon component
 
@@ -66,10 +66,8 @@ Available icon names: `activity`, `alert-triangle`, `bell`, `check`, `chevron-do
 ## Documentation
 
 - [Storybook — live component & token gallery](https://sovereignfs.github.io/storybook)
-- [Design system reference](https://github.com/sovereignfs/sovereign/blob/main/docs/design-system.md)
-- [Plugin development guide](https://github.com/sovereignfs/sovereign/blob/main/docs/plugin-development.md)
-- [SDK stability & semver policy](https://github.com/sovereignfs/sovereign/blob/main/docs/sdk-stability.md)
+- [Design system reference](../../docs/design-system.md)
 
 ## License
 
-AGPL-3.0-or-later
+[MPL-2.0](LICENSE). The icons are derived from Lucide (ISC); see [NOTICE](NOTICE).

package/dist/AppsLauncher.module.css

@@ -94,3 +94,9 @@
   white-space: nowrap;
   max-width: 100%;
 }
+
+.trigger:focus-visible,
+.tile:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Button.module.css

@@ -167,3 +167,8 @@
 .destructive:active:not(:disabled) {
   background-color: color-mix(in srgb, var(--sv-color-error-surface) 85%, black);
 }
+
+/* A `ButtonLink` is an anchor in a button's clothes: no underline, and the same height as the button beside it. */
+.link {
+  text-decoration: none;
+}

package/dist/Card.module.css

@@ -40,3 +40,9 @@
   outline: 2px solid var(--sv-color-focus-ring);
   outline-offset: 2px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .interactive {
+    transition: none;
+  }
+}

package/dist/CardTile.module.css

@@ -179,3 +179,9 @@
   padding: var(--sv-space-3) var(--sv-space-2);
   border-radius: var(--sv-radius-md);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .newTile {
+    transition: none;
+  }
+}

package/dist/CheckableListRow.module.css

@@ -93,3 +93,11 @@
 .trailing {
   flex-shrink: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .label,
+  .label::after {
+    transition: none;
+  }
+}

package/dist/Checkbox.module.css

@@ -109,3 +109,11 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .box,
+  .label,
+  .label::after {
+    transition: none;
+  }
+}

package/dist/CodeTextarea.module.css

@@ -51,3 +51,9 @@
   border-color: var(--sv-color-error-border);
   box-shadow: 0 0 0 2px var(--sv-color-error-border);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea {
+    transition: none;
+  }
+}

package/dist/ColorPicker.module.css

@@ -130,3 +130,9 @@
   color: var(--sv-color-text-muted);
   pointer-events: none;
 }
+
+.swatch:focus-visible,
+.customWrapper:has(.customInput:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Combobox.module.css

@@ -120,3 +120,9 @@
   font-size: var(--sv-font-size-sm);
   text-align: center;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .trigger {
+    transition: none;
+  }
+}

package/dist/Command.module.css

@@ -78,3 +78,9 @@
   font-size: var(--sv-font-size-sm);
   text-align: center;
 }
+
+.input:focus-visible,
+.item:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}

package/dist/ConfirmDialog.module.css

@@ -111,3 +111,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .destructiveConfirm {
+    transition: none;
+  }
+}

package/dist/DatePicker.module.css

@@ -59,3 +59,9 @@
   padding: var(--sv-space-4);
   padding-bottom: max(var(--sv-space-4), env(safe-area-inset-bottom));
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .trigger {
+    transition: none;
+  }
+}

package/dist/Dialog.module.css

@@ -6,7 +6,7 @@
  * content is sparse, only hitting the cap (and scrolling internally, inside
  * `.content`) once content actually exceeds it. Before this, height was
  * fixed too, which left short-content consumers (e.g. a two-field form in
- * console/plugins/PluginAccessDialog.tsx) looking like a near-empty
+ * the Console) looking like a near-empty
  * skeleton — see docs/architecture-rules.md. `auto` goes further — content-
  * driven on BOTH width and height, each independently capped rather than
  * either being fixed — for content whose natural footprint varies enough

package/dist/DragHandleRow.module.css

@@ -55,3 +55,9 @@
 .dragging {
   opacity: 0.5;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .handle {
+    transition: none;
+  }
+}

package/dist/FileDropzone.module.css

@@ -1,4 +1,5 @@
 .dropzone {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--sv-space-4);
@@ -58,6 +59,29 @@
   color: var(--sv-color-text-muted);
 }
 
+/* Hidden to the eye and not to the keyboard: `display: none` would take the input out of the tab order, and the dropzone with
+   it. The label around it is the visible control, and shows the focus ring above. */
 .hiddenInput {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dropzone:has(.hiddenInput:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropzone {
+    transition: none;
+  }
 }

package/dist/Header.module.css

@@ -60,3 +60,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.brandBadge:focus-visible,
+.plugin:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/IconPicker.module.css

@@ -10,8 +10,10 @@
   cursor: pointer;
 }
 
-.trigger:hover {
-  background: var(--sv-color-surface-sunken);
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
 }
 
 .trigger:disabled {
@@ -54,10 +56,18 @@
   cursor: pointer;
 }
 
-.option:hover {
-  background: var(--sv-color-surface-sunken);
+@media (hover: hover) {
+  .option:hover {
+    background: var(--sv-color-surface-sunken);
+  }
 }
 
 .optionSelected {
   background: var(--sv-color-accent-subtle);
 }
+
+.trigger:focus-visible,
+.option:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: -2px;
+}

package/dist/Input.module.css

@@ -50,3 +50,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .input {
+    transition: none;
+  }
+}

package/dist/LegalLinks.module.css

@@ -15,10 +15,17 @@
   text-decoration-color: var(--sv-color-border);
 }
 
-.link:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .link:hover {
+    color: var(--sv-color-text-primary);
+  }
 }
 
 .dot {
   color: var(--sv-color-border);
 }
+
+.link:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Markdown.module.css

@@ -71,3 +71,8 @@
   line-height: 1.6;
   white-space: pre;
 }
+
+.root a:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/Message.module.css

@@ -45,8 +45,17 @@
   border-bottom-left-radius: var(--sv-radius-sm);
 }
 
+/*
+ * Wraps rather than overflowing. A turn can carry several actions plus a
+ * caption (which model answered, and when), and on a phone-width column
+ * that row is easily wider than the message list — an unwrapped row put a
+ * horizontal scrollbar on the conversation and clipped the last action off
+ * the edge, where it could not be reached at all.
+ */
 .actions {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: var(--sv-space-2);
   margin-top: var(--sv-space-1);
   font-size: var(--sv-font-size-caption);

package/dist/MobileAppsDrawer.module.css

@@ -1,8 +1,6 @@
-/* Matches the runtime shell's own Apps drawer grid exactly
-   (runtime/app/(platform)/_components/MobileNav.module.css's .drawerGrid/
-   .drawerGridItem/.drawerGridIcon/.drawerGridName) — this component is
-   meant to replace that hand-rolled markup for any consumer building its
-   own Apps-style launcher. No header row — see the component's own doc
+/* Matches the shell's own Apps drawer grid exactly — this component is
+   meant to replace hand-rolled markup for any consumer building its own
+   Apps-style launcher. No header row — see the component's own doc
    comment for why. */
 
 .grid {
@@ -80,3 +78,9 @@
   word-break: break-word;
   max-width: 80px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .gridIcon {
+    transition: none;
+  }
+}

package/dist/MobileFooter.module.css

@@ -71,3 +71,9 @@
   position: relative;
   z-index: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .navItem {
+    transition: none;
+  }
+}

package/dist/NavList.module.css

@@ -65,9 +65,12 @@
     color 0.1s ease;
 }
 
+/* The sidebar this sits in is the raised surface, which in a dark theme is the sunken surface's own colour, so
+   neither the hover nor the current row could be told from the rest with it: both are a tint of the accent,
+   which shows on either. */
 @media (hover: hover) {
   .static .row:hover {
-    background-color: var(--sv-color-surface-sunken);
+    background-color: color-mix(in srgb, var(--sv-color-accent) 6%, transparent);
     color: var(--sv-color-text-primary);
   }
 }
@@ -78,7 +81,7 @@
 }
 
 .static .rowActive {
-  background-color: var(--sv-color-surface-sunken);
+  background-color: var(--sv-color-accent-subtle);
   color: var(--sv-color-text-primary);
   font-weight: var(--sv-font-weight-semibold);
 }
@@ -128,3 +131,9 @@
 .drilldown .icon {
   color: var(--sv-color-text-muted);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .static .row {
+    transition: none;
+  }
+}

package/dist/NavTabs.module.css

@@ -35,7 +35,7 @@
   border-bottom-color: var(--sv-color-text-primary);
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .nav {
     flex-wrap: nowrap;
     overflow-x: auto;
@@ -48,3 +48,9 @@
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .link {
+    transition: none;
+  }
+}

package/dist/NotificationsPanel.module.css

@@ -256,3 +256,13 @@
     background: var(--sv-color-surface-sunken);
   }
 }
+
+.trigger:focus-visible,
+.actionBtn:focus-visible,
+.closeBtn:focus-visible,
+.itemTitle:focus-visible,
+.dismissBtn:focus-visible,
+.viewAll:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/dist/QrCode.module.css

@@ -0,0 +1,17 @@
+/* A QR code is read by a camera, not a person, so it is black on white in every theme. */
+.qr {
+  display: inline-block;
+  padding: var(--sv-space-2);
+  border-radius: var(--sv-radius-md);
+  background: var(--sv-white);
+  line-height: 0;
+}
+
+.qr svg {
+  width: 11rem;
+  height: 11rem;
+}
+
+.qr path {
+  fill: var(--sv-black);
+}

package/dist/QuantityStepper.module.css

@@ -22,8 +22,10 @@
   cursor: pointer;
 }
 
-.button:hover:not(:disabled) {
-  background: var(--sv-color-surface);
+@media (hover: hover) {
+  .button:hover:not(:disabled) {
+    background: var(--sv-color-surface);
+  }
 }
 
 .button:disabled {

package/dist/RadioGroup.module.css

@@ -86,3 +86,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .circle {
+    transition: none;
+  }
+}

package/dist/SegmentedControl.module.css

@@ -53,3 +53,9 @@
     color: var(--sv-color-text-primary);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .segment {
+    transition: none;
+  }
+}

package/dist/Select.module.css

@@ -80,3 +80,9 @@
   width: 10px;
   height: 10px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .select {
+    transition: none;
+  }
+}

package/dist/Sheet.module.css

@@ -54,5 +54,20 @@
 .content {
   flex: 1 1 auto;
   overflow-y: auto;
-  overscroll-behavior: contain;
+  /* `none`, not `contain`: `contain` only stops scroll *chaining* to the
+     parent — the panel itself still rubber-bands, which is a real bug for
+     any caller-supplied content that puts a sticky element inside this
+     scroll container (a documented, supported pattern — see this file's own
+     `.content` comment above and Sheet.tsx's remark that "any content-owned
+     internal sticky positioning... resolves against this same scrolling
+     ancestor"). Confirmed live: sovereign-tasks' TaskDetailPane renders a
+     `position: sticky` header inside a Sheet on mobile, and pulling down at
+     the top of its scroll content dragged that header down with the bounce,
+     exposing blank panel background above it — the identical symptom
+     Dialog.module.css's own `.content` already documents and fixes with
+     `none` ("the panel itself still bounces, which reveals white
+     panel-background between OverlayHeader and the sticky tab strip on iOS
+     PWA"). A bounded overlay panel has no legitimate reason to bounce at
+     all, so `none` costs nothing functionally — same reasoning as Dialog. */
+  overscroll-behavior: none;
 }

package/dist/SplitPane.module.css

@@ -63,7 +63,7 @@
   outline-offset: -2px;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 768px) {
   .splitPane,
   .splitPane:not(:has(.handle)) {
     grid-template-columns: 1fr;

package/dist/StepStrip.module.css

@@ -42,9 +42,11 @@
   cursor: pointer;
 }
 
-.addChip:hover {
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .addChip:hover {
+    background: var(--sv-color-surface-sunken);
+    color: var(--sv-color-text-primary);
+  }
 }
 
 .addChip:focus-visible {

package/dist/SuggestionInput.module.css

@@ -67,11 +67,16 @@
   cursor: pointer;
 }
 
-.option:hover,
 .optionActive {
   background: var(--sv-color-surface-sunken);
 }
 
+@media (hover: hover) {
+  .option:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
 .optionIcon {
   display: flex;
   align-items: center;
@@ -101,3 +106,9 @@
   margin: var(--sv-space-1) var(--sv-space-2);
   border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .input {
+    transition: none;
+  }
+}

package/dist/SwipableMobileCarouselDots.module.css

@@ -62,3 +62,9 @@
     background: var(--sv-color-text-muted);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dot::before {
+    transition: none;
+  }
+}

package/dist/SystemBanner.module.css

@@ -77,3 +77,9 @@
   color: var(--sv-color-error-text);
   border-bottom-color: var(--sv-color-error-border);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dismiss {
+    transition: none;
+  }
+}

package/dist/Tabs.module.css

@@ -54,3 +54,9 @@
     color: var(--sv-color-text-primary);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .tab {
+    transition: none;
+  }
+}

package/dist/TagInput.module.css

@@ -139,3 +139,9 @@
     font-size: var(--sv-font-size-md);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .control {
+    transition: none;
+  }
+}

package/dist/Textarea.module.css

@@ -45,3 +45,9 @@
   overflow: hidden;
   resize: none;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea {
+    transition: none;
+  }
+}

package/dist/Toast.module.css

@@ -183,6 +183,11 @@
   }
 }
 
+.close:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .toast,
   .toast.exiting {

package/dist/Toggle.module.css

@@ -55,3 +55,10 @@
 .off .thumb {
   transform: translateX(0);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .track,
+  .thumb {
+    transition: none;
+  }
+}