@sovereignfs/ui 0.54.0 → 0.89.1

package/dist/ColorPicker.module.css

@@ -0,0 +1,138 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sv-space-2);
+}
+
+.swatch {
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border-radius: var(--sv-radius-md);
+  border: 2px solid transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.swatch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.swatchSelected {
+  border-color: var(--sv-color-accent);
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+/* Dashed/outlined rather than filled — there's no real color value to paint
+   for "no color". */
+.swatchNone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--sv-color-surface-sunken);
+  border: 2px dashed var(--sv-color-border-strong);
+  color: var(--sv-color-text-muted);
+}
+
+.swatchNone.swatchSelected {
+  border-style: solid;
+}
+
+/* Wraps the native color input so a decorative "+" glyph can sit on top of
+   it while it's empty (a native `<input type="color">` can't have DOM
+   children of its own) and so the same `.swatchSelected` ring used above can
+   be applied to the wrapper without fighting the input's own default
+   focus/border rendering. */
+.customWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sv-space-8);
+  height: var(--sv-space-8);
+  border-radius: var(--sv-radius-md);
+  border: 2px solid transparent;
+}
+
+.customWrapper.swatchSelected {
+  /* Same visual treatment as .swatchSelected, but scoped to the wrapper —
+     the input itself is styled borderless below, so this is the only
+     border/outline actually rendered for the custom trigger. */
+  border-color: var(--sv-color-accent);
+}
+
+/* Before a custom color is actually chosen — same dashed/outlined treatment
+   as .swatchNone, since there's equally no real color value to paint yet. */
+.customWrapperEmpty {
+  background-color: var(--sv-color-surface-sunken);
+  border-style: dashed;
+  border-color: var(--sv-color-border-strong);
+}
+
+/* Reset the native control to a plain color swatch matching the curated
+   ones above — browsers default `<input type="color">` to its own chrome
+   (a bordered box with visible padding around the swatch). */
+.customInput {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  cursor: pointer;
+  background: none;
+}
+
+/* Invisible but still clickable/focusable while empty — the input always
+   holds *some* real hex internally (no true empty state), but that value
+   was never actually chosen by the user, so it must never render as this
+   trigger's own swatch color. Becomes visible again the moment a real
+   choice makes it into `value` (`.customWrapperEmpty` stops applying). */
+.customWrapperEmpty .customInput {
+  opacity: 0;
+}
+
+.customInput:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.customWrapperEmpty .customInput:disabled {
+  opacity: 0;
+}
+
+.customInput::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: var(--sv-radius-md);
+}
+
+.customInput::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--sv-radius-md);
+}
+
+.customInput::-moz-color-swatch {
+  border: none;
+  border-radius: var(--sv-radius-md);
+}
+
+/* `inset: 0` alone doesn't center this — the icon already has an explicit
+   width/height (its own size class), so an absolutely positioned box with
+   all four insets pinned to 0 resolves against top/left rather than
+   stretching to let flex centering do anything, landing the glyph in the
+   corner instead of the middle. `top/left: 50%` + `translate(-50%, -50%)`
+   centers a fixed-size element regardless of its own dimensions. */
+.customPlusIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  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

@@ -15,7 +15,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   cursor: pointer;
   transition:
@@ -61,7 +61,7 @@
   flex-shrink: 0;
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   background: transparent;
   color: var(--sv-color-text-primary);
   font: inherit;
@@ -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

@@ -13,7 +13,7 @@
   flex-shrink: 0;
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
   background: transparent;
   color: var(--sv-color-text-primary);
   font: inherit;
@@ -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

@@ -41,7 +41,7 @@
   font-size: var(--sv-font-size-xs);
   color: var(--sv-color-error-text);
   padding: var(--sv-space-2) var(--sv-space-3);
-  border: 1px solid var(--sv-color-error-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-error-border);
   border-radius: var(--sv-radius-sm);
   background-color: var(--sv-color-error-surface);
 }
@@ -70,7 +70,7 @@
      Button). Matches Button's md padding, updated alongside it (10px,
      36px rendered height). */
   padding: 10px var(--sv-space-4);
-  border: 1px solid transparent;
+  border: var(--sv-border-width-hairline) solid transparent;
   border-radius: var(--sv-radius-md);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);
@@ -111,3 +111,9 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .destructiveConfirm {
+    transition: none;
+  }
+}

package/dist/ConsentPrompt.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.description {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-2);
+  margin-top: var(--sv-space-1);
+}

package/dist/DatePicker.module.css

@@ -17,7 +17,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   cursor: pointer;
   transition:
@@ -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

@@ -1,13 +1,31 @@
 /* Dialog — scrim + centered panel. Tokens only (z-index is structural, not a
  * theming value, so it has no token).
  *
- * Each size is a FIXED box (width AND height) — the panel never grows or
- * shrinks with its content, so switching views inside it (e.g. overlay-plugin
- * tabs) keeps the dialog the exact same size. Overflow scrolls inside `.content`
- * while the panel and its close button stay put. The scrim's padding is the
- * fixed margin `lg` leaves around the viewport; `sm`/`md` are centered and cap
- * to that available space on short screens. On mobile every size becomes a
- * full-screen sheet.
+ * `sm`/`md` are a fixed WIDTH but a content-driven height, capped at a
+ * per-size max-height: the panel grows to fit its content and shrinks when
+ * 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
+ * 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
+ * (a card detail modal with an optional checklist/comments section) that a
+ * single fixed width doesn't fit it well either short or long. `lg` is a
+ * true fixed box (100%/100% of the scrim's available area) — no current
+ * overlay-shell plugin renders into it (Console did until workstream 0022
+ * moved it to `shell: "default"`; Account never resized off `overlaySize:
+ * "lg"`'s original default until epic task 14.5, see `fixed` below).
+ * `fixed` (named after its own behavior, not after this file's always-
+ * applied `.panel` wrapper class below) is also a true fixed box, width
+ * AND height both set — same "content never resizes it" guarantee as `lg`
+ * — but capped rather than filling the viewport, for a plugin whose
+ * settings-panel-shaped content doesn't warrant `lg`'s full-screen footprint
+ * (Account's own case, epic task 14.5 round 3). The close button stays
+ * pinned top-right regardless. The scrim's padding is the fixed margin
+ * `lg`/`fixed` leave around the viewport; `sm`/`md`/`auto` are centered and
+ * cap to that available space on short screens too. On mobile every size
+ * becomes a full-screen sheet.
  *
  * `--sv-dialog-inset-left` lets a host inset the scrim past a fixed left nav
  * rail (e.g. the platform sidebar) so the overlay's left margin is measured
@@ -50,7 +68,7 @@
   overflow: hidden;
   background: var(--sv-color-surface-raised);
   color: var(--sv-color-text-primary);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-lg);
   box-shadow: var(--sv-shadow-overlay);
   /* Desktop entrance: fade + gentle scale-up. Same two-phase-mount pattern as
@@ -86,7 +104,21 @@
   flex: 1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
+  /* Same slim, token-colored scrollbar as `ScrollArea`/`MessageScroller` —
+     without this, a `sm`/`md` dialog whose content exceeds its max-height
+     cap (e.g. on a short viewport where the cap itself shrinks to fit) gets
+     the browser's default OS scrollbar, which on non-overlay-scrollbar
+     platforms is wide enough to visually cut into `.panel`'s rounded
+     corner right where `.content` starts, reading as a layout bug rather
+     than an intentional scroll affordance. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sv-color-border-strong) transparent;
   padding: var(--sv-space-6);
+  /* This region already supplies the page gutter, so a PageContainer rendered
+     inside it stands its own down (see PageContainer.module.css). Without
+     this, an overlay plugin — one page tree rendered into both the Dialog and
+     the full-page shell fallback — would be padded twice here. */
+  --sv-page-gutter: 0px;
   /* Disable elastic overscroll within the dialog: `none` stops both scroll-
      chaining to the parent and the iOS rubber-band bounce inside the panel.
      `contain` only prevents chaining — the panel itself still bounces, which
@@ -96,33 +128,94 @@
   overscroll-behavior: none;
 }
 
-/* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
- * margin) so a size never overflows a small viewport. */
+.content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-full);
+}
+
+/* `sm`/`md`: fixed width, content-driven height up to the size's own cap
+ * (28rem/42rem — the box's old fixed heights, now a ceiling rather than a
+ * floor). `min(<cap>, 100%)` also still caps to the scrim's content box
+ * (viewport minus margin) so a size never overflows a short viewport. No
+ * explicit `height` — the panel's flex column sizes to `.content`'s natural
+ * height on its own; see the file-level comment above. */
 .sm {
   width: 24rem;
-  height: 28rem;
   max-width: 100%;
-  max-height: 100%;
+  max-height: min(28rem, 100%);
 }
 
 .md {
   width: 36rem;
-  height: 42rem;
   max-width: 100%;
-  max-height: 100%;
+  max-height: min(42rem, 100%);
 }
 
-.lg,
-.full {
+/* Content-driven on both axes, unlike `sm`/`md` (width fixed, only height
+ * content-driven) — for a dialog whose natural footprint varies a lot (a
+ * card detail modal with labels/due-date/assignees/description/checklist/
+ * comments, the case that originally motivated the now-removed `xl` size
+ * this replaces). `width: fit-content` shrink-wraps to the panel's own
+ * content (bounded by min/max-width below) the same way a flex item
+ * centered in `.scrim` naturally would with no explicit `width` at all —
+ * `min-width` just keeps sparse content (e.g. a short message) from reading
+ * as an oddly narrow sliver. Caps chosen to span roughly what `sm`/`xl`
+ * used to cover between them. */
+.auto {
+  width: fit-content;
+  min-width: min(24rem, 100%);
+  max-width: min(48rem, 100%);
+  max-height: min(48rem, 100%);
+}
+
+/* `lg`: a true fixed box, unaffected by the above — see the file-level
+ * comment. */
+.lg {
   width: 100%;
   height: 100%;
 }
 
+/* `fixed`: also a true fixed box (width AND height both set, like `lg`) but
+ * capped rather than filling the viewport — see the file-level comment.
+ * Named distinctly from the dialog's own always-applied `.panel` wrapper
+ * class above (every size gets `styles.panel` + `styles[size]` together —
+ * see Dialog.tsx) to avoid colliding with it. `max-width`/`max-height` are
+ * still needed despite `width`/`height` being fixed rem values, exactly
+ * like `sm`/`md`'s own `max-width: 100%` — a short or narrow viewport (a
+ * resized desktop window, not yet at the mobile breakpoint) must still be
+ * able to shrink this below its rem values instead of overflowing the
+ * scrim. */
+.fixed {
+  width: 64rem;
+  max-width: 100%;
+  height: 44rem;
+  max-height: 100%;
+}
+
 .close {
   position: absolute;
   top: var(--sv-space-3);
   right: var(--sv-space-3);
-  z-index: 1;
+  /* 2, not 1: a plugin's own sticky in-body header (e.g. a card detail
+     modal's title row) needs to paint above ordinary scrolling content, so
+     it sits at z-index: 1 — if `.close` also sat at 1, tree order would
+     decide the tie, and `.close` (rendered earlier in this component's own
+     JSX, before `.content` and everything a plugin nests inside it) would
+     lose to the plugin's later-in-tree header, disappearing underneath it
+     once they overlap on scroll. 2 keeps `.close` unambiguously on top
+     without relying on a tie-break plugin authors have no visibility into.
+     Found live in `sovereign-plugin-kanban`'s card detail modal — see that
+     repo's `kanban.module.css` `.cardHeader` comment for the matching half
+     of this fix and the Popover-stacking bug that motivated it. */
+  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -132,8 +225,6 @@
   border-radius: var(--sv-radius-md);
   background: transparent;
   color: var(--sv-color-text-muted);
-  font-size: var(--sv-font-size-xl);
-  line-height: 1;
   cursor: pointer;
 }
 
@@ -151,11 +242,27 @@
 
 /* Hidden on desktop; shown only on mobile where it replaces the close button.
  * OverlayHeader owns its own background/border/padding — this wrapper class
- * only toggles visibility per breakpoint. */
+ * only toggles visibility per breakpoint. Not used at all when the `header`
+ * prop is active — that OverlayHeader instance renders with no wrapper
+ * class, so it shows unconditionally on both breakpoints (see Dialog.tsx). */
 .mobileHeader {
   display: none;
 }
 
+/* The optional `footer` prop's row — shown on both desktop and mobile (no
+ * breakpoint gating, unlike `.mobileHeader`), a flex sibling after `.content`
+ * so it never scrolls, mirroring OverlayHeader's own `.header`/`.row`
+ * treatment (border on the opposite edge, same padding scale) so header and
+ * footer read as a matched pair when both are present. Layout-agnostic
+ * beyond that — the footer's own content decides its internal arrangement
+ * (e.g. a flex row with `justify-content: flex-end` for action buttons). */
+.footer {
+  flex-shrink: 0;
+  background: var(--sv-color-surface);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  padding: var(--sv-space-3) var(--sv-space-4);
+}
+
 /* Mobile: full-screen sheet (RFC 0001 §3, breakpoint unified to 768px per
  * RFC 0013). Every size fills the scrim's available area (which is already
  * inset from the top by --sv-dialog-inset-top when a fixed header is shown).
@@ -177,9 +284,11 @@
   .sm,
   .md,
   .lg,
-  .full {
+  .auto,
+  .fixed {
     width: 100%;
     height: 100%;
+    min-width: 0;
     max-width: none;
     max-height: none;
     border: none;

package/dist/DragHandleRow.module.css

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

package/dist/Drawer.module.css

@@ -7,8 +7,10 @@
 .scrim {
   position: fixed;
   inset: 0;
-  /* When the shell declares --sv-shell-footer-height (mobile nav bar), stop the
-     scrim above the footer so the panel never hides behind it. */
+  /* When --sv-shell-footer-height is set (mobile nav bar — by the platform
+     shell, or by a self-rendered MobileFooter via usePublishShellChromeHeight
+     for a shellConfig.mobileFooter: false plugin), stop the scrim above the
+     footer so the panel never hides behind it. */
   bottom: var(--sv-shell-footer-height, 0);
   z-index: 100;
   display: flex;
@@ -27,14 +29,21 @@
 .panel {
   width: 100%;
   max-height: 80dvh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  /* The panel itself no longer scrolls — see .body below. display: flex
+     (column) lets .handle (and OverlayHeader, when title is set) stay
+     fixed while .body's own overflow-y handles content taller than the
+     80dvh cap, the same fixed-header/scrollable-body split Sheet.module.css
+     already establishes (its .panel/.content pair). Before this, the whole
+     .panel scrolled as one block, so a tall drawer (e.g. many installed
+     plugins in the Apps grid) scrolled the grab handle itself out of view
+     along with the content — reachable in the DOM, invisible on screen. */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: var(--sv-color-surface-raised);
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;
   box-shadow: var(--sv-shadow-overlay);
-  /* Pull content above the home indicator / bottom bar in standalone mode. */
-  padding-bottom: env(safe-area-inset-bottom);
   outline: none;
   /* Slide up from below the viewport. Always a bottom sheet, so unlike Dialog
      there's no desktop-vs-mobile fork here. */
@@ -42,6 +51,26 @@
   transition: transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
 }
 
+/* The scroll container — everything below the fixed handle/OverlayHeader.
+   Scrollbar hidden (not overflow removed) the same way Tabs.module.css's
+   .tablist already does for this design system; scroll-driven UI here reads
+   as a native swipe list, not a document needing a visible scroll affordance. */
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  /* Pull content above the home indicator / bottom bar in standalone mode —
+     moved here from .panel now that this is the element whose bottom edge
+     is the actual scrollable content boundary. */
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.body::-webkit-scrollbar {
+  display: none;
+}
+
 .panelOpen {
   transform: translateY(0);
 }

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

@@ -0,0 +1,68 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: var(--sv-space-2) var(--sv-space-4);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  background-color: var(--sv-color-surface);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  min-width: 0;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  flex-shrink: 0;
+}
+
+.brandBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--sv-radius-md);
+  background-color: var(--sv-color-accent);
+  color: var(--sv-color-text-on-accent);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.brandLogoImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.plugin {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  min-width: 0;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+}
+
+.pluginName {
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  overflow: hidden;
+  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/HeaderFooterLayout.module.css

@@ -0,0 +1,21 @@
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.footer {
+  flex-shrink: 0;
+  overflow: hidden;
+}