@salemcobalt/ui 0.2.0-rc.7 → 0.2.0-rc.9

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.7 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.9 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -306,6 +306,10 @@
   .sc-button[data-loading] > .sc-button__label {
     opacity: 0;
   }
+  /* Its own line box, so descenders sit inside the label (the button sets line-height: 1 for centring). */
+  .sc-button__label {
+    line-height: var(--sc-font-line-height-ui);
+  }
   .sc-button__icon {
     display: inline-flex;
     inline-size: 1.125em;
@@ -325,6 +329,44 @@
     border-inline-end-color: transparent;
     animation: sc-spin 0.8s linear infinite;
   }
+  /* Icon-only: square, the label kept for assistive tech only, no shortcut hint. Same element, so focus and
+     any open tooltip survive the switch. */
+  .sc-button[data-icon-only] {
+    inline-size: var(--_h);
+    padding-inline: 0;
+  }
+  .sc-button[data-icon-only] > .sc-button__label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .sc-button[data-icon-only] > .sc-button__shortcut {
+    display: none;
+  }
+  /* A shortcut hint after the label: a Kbd tinted to the button's own colour, so it reads on every variant. */
+  .sc-button__shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sc-spacing-3xs);
+    flex: none;
+    margin-inline-start: var(--sc-spacing-3xs);
+  }
+  .sc-button__shortcut .sc-kbd {
+    background: transparent;
+    color: inherit;
+    border-color: currentColor;
+    box-shadow: none;
+    opacity: 0.72;
+  }
+  .sc-button__shortcut .sc-kbd-group {
+    color: inherit;
+  }
+  .sc-button[data-loading] > .sc-button__shortcut {
+    opacity: 0;
+  }
   @keyframes sc-spin {
     to {
       rotate: 1turn;
@@ -361,6 +403,40 @@
   .sc-icon-button[data-loading] > .sc-button__icon {
     opacity: 0;
   }
+  /* Status dot, top-left: icons such as the broom own the top-right and fill the bottom. Physical corner on
+     purpose, because the glyph does not mirror in RTL either. */
+  .sc-icon-button__dot {
+    --_dot: var(--sc-color-accent-default);
+    position: absolute;
+    inset: var(--sc-spacing-2xs) auto auto var(--sc-spacing-2xs);
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: var(--sc-radius-full);
+    background: var(--_dot);
+    box-shadow: 0 0 0 var(--sc-border-width-focus)
+      var(--sc-icon-button-dot-ring, var(--sc-color-surface-default));
+    pointer-events: none;
+  }
+  .sc-icon-button[data-size='sm'] > .sc-icon-button__dot {
+    inset: var(--sc-spacing-3xs) auto auto var(--sc-spacing-3xs);
+    inline-size: 6px;
+    block-size: 6px;
+  }
+  .sc-icon-button__dot[data-tone='neutral'] {
+    --_dot: var(--sc-color-text-subtle);
+  }
+  .sc-icon-button__dot[data-tone='success'] {
+    --_dot: var(--sc-color-success-solid);
+  }
+  .sc-icon-button__dot[data-tone='warning'] {
+    --_dot: var(--sc-color-warning-solid);
+  }
+  .sc-icon-button__dot[data-tone='danger'] {
+    --_dot: var(--sc-color-danger-solid);
+  }
+  .sc-icon-button__dot[data-tone='info'] {
+    --_dot: var(--sc-color-info-solid);
+  }
   .sc-button[data-popup-open] {
     background: var(--sc-color-surface-active);
   }
@@ -1703,6 +1779,50 @@
   .sc-tabs__panel[data-hidden] {
     display: none;
   }
+  /* Segmented: a quiet control. Sunken track, the active tab raised on `surface-default` by the sliding
+     indicator, no accent colour; counts are plain muted numbers
+     (`text-muted`, not `text-subtle`, which fails AA on the sunken track). */
+  .sc-tabs__list[data-variant='segmented'] {
+    display: inline-flex;
+    align-self: flex-start;
+    max-inline-size: 100%;
+    gap: var(--sc-spacing-3xs);
+    padding: var(--sc-spacing-3xs);
+    border-block-end: 0;
+    border-radius: var(--sc-radius-md);
+    background: var(--sc-color-surface-sunken);
+    isolation: isolate;
+  }
+  .sc-tabs__list[data-variant='segmented'][data-fill] {
+    display: flex;
+    align-self: stretch;
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab {
+    position: relative;
+    z-index: 1;
+    block-size: var(--sc-size-control-sm);
+    padding-inline: var(--sc-spacing-sm);
+    border-radius: var(--sc-radius-sm);
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab:hover:not([data-disabled]) {
+    background: transparent;
+  }
+  .sc-tabs__list[data-variant='segmented'] .sc-tabs__count,
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__tab[data-active] > .sc-tabs__count {
+    padding-inline: 0;
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    font-weight: var(--sc-font-weight-regular);
+  }
+  .sc-tabs__list[data-variant='segmented'] > .sc-tabs__indicator {
+    inset-block: 0 auto;
+    z-index: 0;
+    block-size: var(--active-tab-height);
+    translate: var(--active-tab-left) var(--active-tab-top);
+    background: var(--sc-color-surface-default);
+    border-radius: var(--sc-radius-sm);
+    box-shadow: var(--sc-elevation-1);
+  }
   @media (prefers-reduced-motion: reduce) {
     .sc-tabs__tab,
     .sc-tabs__indicator {
@@ -1710,139 +1830,573 @@
     }
   }
   
-  /* ---- toolbar.css ---- */
-  /* ---- Toolbar --------------------------------------------------------------- */
-  .sc-toolbar {
+  /* ---- priority-nav.css ---- */
+  /* ---- PriorityNav ----------------------------------------------------------- */
+  /* Takes the free space in a flex header (brand · nav · actions) without sizing to its own links, so the
+     row can grow back after collapsing. In a grid, give it a `minmax(0, 1fr)` track. */
+  .sc-priority-nav {
+    position: relative;
+    flex: 1 1 0%;
+    min-inline-size: 0;
+    /* The toggle goes icon-only when the nav itself is narrow (below), whatever the viewport. */
+    container: sc-priority-nav / inline-size;
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+  }
+  .sc-priority-nav__list {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    gap: var(--sc-spacing-xs);
+    gap: var(--sc-spacing-2xs);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sc-priority-nav__item,
+  .sc-priority-nav__more {
+    flex: none;
+    display: flex;
+  }
+  .sc-priority-nav__more[hidden] {
+    display: none;
+  }
+  /* Once measured, the current link is the one item that may shrink (ellipsis) when the row cannot hold it
+     and "More". While measuring it keeps its full width like the others. */
+  .sc-priority-nav:not([data-measuring]) .sc-priority-nav__item[data-current] {
+    flex: 0 1 auto;
     min-inline-size: 0;
+  }
+  /* Before measurement (server HTML, pre-hydration, no JS): one line that never wraps. With JS the line
+     clips for the few frames before hydration measures it; without JS it scrolls sideways (below). */
+  .sc-priority-nav[data-measuring] > .sc-priority-nav__list {
     overflow-x: auto;
+    overflow-y: hidden;
     scrollbar-width: none;
   }
-  .sc-toolbar[data-wrap] {
-    flex-wrap: wrap;
-    overflow: visible;
+  .sc-priority-nav[data-measuring] .sc-priority-nav__more[hidden] {
+    display: flex;
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
   }
-  .sc-toolbar__group {
+  @media (scripting: none) {
+    .sc-priority-nav[data-measuring] > .sc-priority-nav__list {
+      scrollbar-width: thin;
+    }
+  }
+  .sc-priority-nav__link,
+  .sc-priority-nav__toggle {
     display: inline-flex;
-    flex: none;
     align-items: center;
     gap: var(--sc-spacing-2xs);
+    box-sizing: border-box;
+    block-size: var(--sc-size-control-sm);
+    margin: 0;
+    padding-inline: var(--sc-spacing-sm);
+    border: 0;
+    border-radius: var(--sc-radius-sm);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    font: inherit;
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-ui);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--sc-duration-fast) var(--sc-ease-standard),
+      color var(--sc-duration-fast) var(--sc-ease-standard);
   }
-  .sc-toolbar__separator {
-    flex: none;
-    inline-size: var(--sc-border-width-hairline);
-    block-size: var(--sc-size-icon-lg);
-    margin-inline: var(--sc-spacing-2xs);
-    background: var(--sc-color-border-default);
-  }
-  .sc-toolbar[data-orientation='vertical'] {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .sc-toolbar[data-orientation='vertical'] > .sc-toolbar__separator {
-    inline-size: auto;
-    block-size: var(--sc-border-width-hairline);
-    margin-inline: 0;
-    margin-block: var(--sc-spacing-2xs);
-  }
-  .sc-toolbar__spacer {
-    flex: 1 1 0;
-    min-inline-size: var(--sc-spacing-xs);
+  .sc-priority-nav__link {
+    min-inline-size: 0;
   }
-  .sc-toolbar[data-gap='none'],
-  .sc-toolbar__group[data-gap='none'] {
-    gap: var(--sc-spacing-none);
+  .sc-priority-nav__label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .sc-toolbar[data-gap='3xs'],
-  .sc-toolbar__group[data-gap='3xs'] {
-    gap: var(--sc-spacing-3xs);
+  .sc-priority-nav__link:hover,
+  .sc-priority-nav__toggle:hover {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
   }
-  .sc-toolbar[data-gap='2xs'],
-  .sc-toolbar__group[data-gap='2xs'] {
-    gap: var(--sc-spacing-2xs);
+  .sc-priority-nav__link:active,
+  .sc-priority-nav__toggle:active {
+    background: var(--sc-color-surface-active);
   }
-  .sc-toolbar[data-gap='xs'],
-  .sc-toolbar__group[data-gap='xs'] {
-    gap: var(--sc-spacing-xs);
+  .sc-priority-nav__link[aria-current='page'] {
+    color: var(--sc-color-text-default);
+    box-shadow: inset 0 calc(-1 * var(--sc-border-width-focus)) 0 var(--sc-color-accent-default);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
   }
-  .sc-toolbar[data-gap='sm'],
-  .sc-toolbar__group[data-gap='sm'] {
-    gap: var(--sc-spacing-sm);
+  .sc-priority-nav__link:focus-visible,
+  .sc-priority-nav__toggle:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: calc(-1 * var(--sc-border-width-focus));
   }
-  .sc-toolbar[data-gap='md'],
-  .sc-toolbar__group[data-gap='md'] {
-    gap: var(--sc-spacing-md);
+  .sc-priority-nav__toggle[aria-expanded='true'] {
+    background: var(--sc-color-surface-active);
+    color: var(--sc-color-text-default);
   }
-  .sc-toolbar[data-gap='lg'],
-  .sc-toolbar__group[data-gap='lg'] {
-    gap: var(--sc-spacing-lg);
+  .sc-priority-nav__ellipsis {
+    display: none;
   }
-  .sc-toolbar[data-gap='xl'],
-  .sc-toolbar__group[data-gap='xl'] {
-    gap: var(--sc-spacing-xl);
+  @container sc-priority-nav (inline-size <= 400px) {
+    .sc-priority-nav__toggle {
+      justify-content: center;
+      inline-size: var(--sc-size-control-sm);
+      padding-inline: 0;
+    }
+    .sc-priority-nav__ellipsis {
+      display: inline-block;
+    }
+    .sc-priority-nav__chevron {
+      display: none;
+    }
+    /* Visually hidden, still part of the accessible name ("More, 3 links"). */
+    .sc-priority-nav__toggle-label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
   }
-  .sc-toolbar[data-gap='2xl'],
-  .sc-toolbar__group[data-gap='2xl'] {
-    gap: var(--sc-spacing-2xl);
+  .sc-priority-nav__chevron {
+    transition: rotate var(--sc-duration-fast) var(--sc-ease-standard);
   }
-  .sc-toolbar[data-gap='3xl'],
-  .sc-toolbar__group[data-gap='3xl'] {
-    gap: var(--sc-spacing-3xl);
+  .sc-priority-nav__toggle[aria-expanded='true'] > .sc-priority-nav__chevron {
+    rotate: 180deg;
   }
-  .sc-toolbar[data-gap='4xl'],
-  .sc-toolbar__group[data-gap='4xl'] {
-    gap: var(--sc-spacing-4xl);
+  /* The panel: Menu's surface, a list of the collapsed links. While open it is in the top layer (Popover
+     API), so no ancestor's overflow clips it; it is fixed-positioned against the viewport either way. */
+  .sc-priority-nav__toggle {
+    anchor-name: var(--_anchor);
   }
-  
-  /* ---- banner.css ---- */
-  /* ---- Banner ---------------------------------------------------------------- */
-  .sc-banner {
-    --_bg: var(--sc-color-info-subtle);
-    --_fg: var(--sc-color-info-text);
+  .sc-priority-nav__panel {
+    --_gutter: var(--sc-spacing-md);
+    position: fixed;
+    inset: auto;
+    z-index: var(--sc-z-dropdown);
     display: flex;
-    align-items: center;
-    gap: var(--sc-spacing-xs);
+    flex-direction: column;
     box-sizing: border-box;
-    min-block-size: var(--sc-size-control-md);
-    padding-block: var(--sc-spacing-2xs);
-    padding-inline: var(--sc-spacing-sm) var(--sc-spacing-2xs);
-    border-radius: var(--sc-radius-md);
-    background: var(--_bg);
-    color: var(--_fg);
+    inline-size: max-content;
+    min-inline-size: min(180px, 100vw - 2 * var(--_gutter));
+    max-inline-size: min(320px, 100vw - 2 * var(--_gutter));
+    max-block-size: min(28rem, 100dvh - 2 * var(--_gutter));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    margin: 0;
+    padding: var(--sc-spacing-2xs);
+    list-style: none;
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-surface-raised);
+    --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
+    --sc-color-surface-active: var(--sc-color-surface-raised-active);
+    color: var(--sc-color-text-default);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    box-shadow: var(--sc-elevation-2);
     font-family: var(--sc-font-family-sans);
     font-size: var(--sc-font-size-sm);
-    line-height: var(--sc-font-line-height-ui);
+    transition:
+      opacity var(--sc-duration-fast) var(--sc-ease-enter),
+      translate var(--sc-duration-fast) var(--sc-ease-enter);
+  }
+  /* Anchored below the toggle, aligned to its inline-end edge; flips to its inline-start edge (and above
+     it) when that would leave the viewport; when no edge fits, it spans the viewport row under the toggle,
+     centred on it and kept a gutter from both edges. Without anchor positioning, JS sets left/top (place.ts). */
+  @supports (anchor-name: --a) {
+    .sc-priority-nav__panel {
+      position-anchor: var(--_anchor);
+      position-area: block-end span-inline-start;
+      margin-block: var(--sc-spacing-2xs);
+      /* Makes an option that ends closer than the gutter to the viewport edge count as overflowing. */
+      margin-inline-start: var(--_gutter);
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline,
+        --sc-priority-nav-fit;
+    }
   }
-  .sc-banner[data-tone='success'] {
-    --_bg: var(--sc-color-success-subtle);
-    --_fg: var(--sc-color-success-text);
+  @position-try --sc-priority-nav-fit {
+    position-area: block-end span-all;
+    justify-self: anchor-center;
+    margin-inline: var(--_gutter);
   }
-  .sc-banner[data-tone='warning'] {
-    --_bg: var(--sc-color-warning-subtle);
-    --_fg: var(--sc-color-warning-text);
+  @starting-style {
+    .sc-priority-nav__panel {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--sc-spacing-2xs));
+    }
   }
-  .sc-banner[data-tone='danger'] {
-    --_bg: var(--sc-color-danger-subtle);
-    --_fg: var(--sc-color-danger-text);
+  .sc-priority-nav__panel[hidden] {
+    display: none;
   }
-  .sc-banner[data-tone='neutral'] {
-    --_bg: var(--sc-color-surface-sunken);
-    --_fg: var(--sc-color-text-default);
+  .sc-priority-nav__panel .sc-priority-nav__link {
+    display: flex;
+    inline-size: 100%;
+    padding-inline: var(--sc-spacing-xs);
+    color: var(--sc-color-text-default);
   }
-  .sc-banner__icon {
-    display: inline-flex;
-    flex: none;
+  @media (prefers-reduced-motion: reduce) {
+    .sc-priority-nav__link,
+    .sc-priority-nav__toggle,
+    .sc-priority-nav__chevron,
+    .sc-priority-nav__panel {
+      transition: none;
+    }
   }
-  .sc-banner__body {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    text-wrap: pretty;
+  
+  /* ---- popover.css ---- */
+  /* ---- Popover --------------------------------------------------------------- */
+  .sc-popover__positioner {
+    z-index: var(--sc-z-dropdown);
+    outline: 0;
   }
-  .sc-banner__action {
-    flex: none;
+  /* Menu's surface: raised background, hairline border, large radius, elevation 2. */
+  .sc-popover {
+    position: relative;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 360px);
+    max-block-size: var(--available-height);
+    overflow: auto;
+    padding: var(--sc-spacing-md);
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-surface-raised);
+    --sc-color-surface-hover: var(--sc-color-surface-raised-hover);
+    --sc-color-surface-active: var(--sc-color-surface-raised-active);
+    color: var(--sc-color-text-default);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    box-shadow: var(--sc-elevation-2);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-normal);
+    outline: 0;
+    transform-origin: var(--transform-origin);
+    transition:
+      opacity var(--sc-duration-fast) var(--sc-ease-enter),
+      scale var(--sc-duration-fast) var(--sc-ease-enter);
+  }
+  /* With an arrow the popup must not clip it. */
+  .sc-popover:has(> .sc-popover__arrow) {
+    overflow: visible;
+  }
+  .sc-popover[data-starting-style],
+  .sc-popover[data-ending-style] {
+    opacity: 0;
+    scale: 0.97;
+  }
+  .sc-popover[data-ending-style] {
+    transition-timing-function: var(--sc-ease-exit);
+  }
+  .sc-popover[data-instant] {
+    transition: none;
+  }
+  .sc-popover__title {
+    margin: 0;
+    font-size: var(--sc-font-size-md);
+    line-height: var(--sc-font-line-height-snug);
+    font-weight: var(--sc-font-weight-semibold);
+  }
+  .sc-popover__title:has(~ .sc-popover__close),
+  .sc-popover__close ~ .sc-popover__title {
+    padding-inline-end: var(--sc-spacing-xl);
+  }
+  .sc-popover__description {
+    margin: var(--sc-spacing-2xs) 0 0;
+    color: var(--sc-color-text-muted);
+  }
+  .sc-popover__close {
+    position: absolute;
+    inset-block-start: var(--sc-spacing-xs);
+    inset-inline-end: var(--sc-spacing-xs);
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--sc-size-control-sm);
+    block-size: var(--sc-size-control-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sc-radius-md);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    cursor: pointer;
+  }
+  .sc-popover__close:hover {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
+  }
+  .sc-popover__close:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: calc(-1 * var(--sc-border-width-focus));
+  }
+  /* A 16×8 tip with the popup's fill and border, placed by Base UI on the side facing the trigger. It overlaps
+     the popup's border by one hairline so the border does not run across its base. */
+  .sc-popover__arrow {
+    --_w: 16px;
+    --_h: 8px;
+    display: block;
+    inline-size: var(--_w);
+    block-size: calc(var(--_h) + var(--sc-border-width-hairline));
+    overflow: clip;
+    pointer-events: none;
+  }
+  .sc-popover__arrow::before {
+    content: '';
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    box-sizing: border-box;
+    inline-size: calc(var(--_h) * 1.4142);
+    block-size: calc(var(--_h) * 1.4142);
+    background: var(--sc-color-surface-raised);
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    translate: -50% 50%;
+    rotate: 45deg;
+  }
+  .sc-popover__arrow[data-side='top'] {
+    inset-block-end: calc(-1 * var(--_h));
+    rotate: 180deg;
+  }
+  .sc-popover__arrow[data-side='bottom'] {
+    inset-block-start: calc(-1 * var(--_h));
+  }
+  .sc-popover__arrow[data-side='left'],
+  .sc-popover__arrow[data-side='inline-start'] {
+    inset-inline-end: calc(-1 * (var(--_w) + var(--_h)) / 2);
+    rotate: 90deg;
+  }
+  .sc-popover__arrow[data-side='right'],
+  .sc-popover__arrow[data-side='inline-end'] {
+    inset-inline-start: calc(-1 * (var(--_w) + var(--_h)) / 2);
+    rotate: -90deg;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-popover {
+      transition-duration: 0ms;
+    }
+    .sc-popover[data-starting-style],
+    .sc-popover[data-ending-style] {
+      scale: none;
+    }
+  }
+  
+  /* ---- broom-icon.css ---- */
+  /* ---- BroomIcon ------------------------------------------------------------- */
+  /* Geometry and motion as approved: the body pivots on the handle top (20.2, 2.2) from -14deg to 8deg while
+     the dust fades in and drifts left in step; strokes stay a fixed screen width at any size. */
+  .sc-broom {
+    --sc-broom-stroke: 1.25px;
+  }
+  /* `display` (72px) is a one-off for the broom's showcase and empty states. Move it into the Icon sizes and
+     tokens if a second icon ever needs it. */
+  .sc-icon.sc-broom[data-size='display'] {
+    --_s: calc(var(--sc-size-icon-xl) * 3);
+    --sc-broom-stroke: 1.75px;
+  }
+  .sc-broom__body,
+  .sc-broom__dust {
+    transform-box: view-box;
+    stroke-width: var(--sc-broom-stroke);
+  }
+  .sc-broom__body {
+    transform-origin: 20.2px 2.2px;
+  }
+  .sc-broom * {
+    vector-effect: non-scaling-stroke;
+  }
+  .sc-broom__band {
+    fill: currentColor;
+    stroke: none;
+  }
+  .sc-broom__dust {
+    opacity: 0;
+  }
+  .sc-broom[data-sweeping] .sc-broom__body {
+    animation: sc-broom-sweep 0.9s ease-in-out infinite alternate;
+  }
+  .sc-broom[data-sweeping] .sc-broom__dust {
+    animation: sc-broom-dust 0.9s ease-in-out infinite alternate;
+  }
+  @keyframes sc-broom-sweep {
+    from {
+      transform: rotate(-14deg);
+    }
+    to {
+      transform: rotate(8deg);
+    }
+  }
+  /* At the top of the sweep (8deg) the head stays about 2 grid units clear of the dust. */
+  @keyframes sc-broom-dust {
+    from {
+      opacity: 0;
+      transform: translateX(0.5px);
+    }
+    to {
+      opacity: 0.9;
+      transform: translateX(-1px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sc-broom[data-sweeping] .sc-broom__body,
+    .sc-broom[data-sweeping] .sc-broom__dust {
+      animation: none;
+    }
+    .sc-broom[data-sweeping] .sc-broom__dust {
+      opacity: 0.9;
+    }
+  }
+  /* Drawn on a 24px grid (the shipped icons use 16px), so inside an IconButton it takes the next icon size up:
+     20px in an md button, as in the approved nav mock. */
+  .sc-icon-button > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-lg);
+  }
+  .sc-icon-button[data-size='sm'] > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-md);
+  }
+  .sc-icon-button[data-size='lg'] > .sc-button__icon:has(> .sc-broom) {
+    --_icon: var(--sc-size-icon-xl);
+  }
+  
+  /* ---- toolbar.css ---- */
+  /* ---- Toolbar --------------------------------------------------------------- */
+  .sc-toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--sc-spacing-xs);
+    min-inline-size: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .sc-toolbar[data-wrap] {
+    flex-wrap: wrap;
+    overflow: visible;
+  }
+  .sc-toolbar__group {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--sc-spacing-2xs);
+  }
+  .sc-toolbar__separator {
+    flex: none;
+    inline-size: var(--sc-border-width-hairline);
+    block-size: var(--sc-size-icon-lg);
+    margin-inline: var(--sc-spacing-2xs);
+    background: var(--sc-color-border-default);
+  }
+  .sc-toolbar[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .sc-toolbar[data-orientation='vertical'] > .sc-toolbar__separator {
+    inline-size: auto;
+    block-size: var(--sc-border-width-hairline);
+    margin-inline: 0;
+    margin-block: var(--sc-spacing-2xs);
+  }
+  .sc-toolbar__spacer {
+    flex: 1 1 0;
+    min-inline-size: var(--sc-spacing-xs);
+  }
+  .sc-toolbar[data-gap='none'],
+  .sc-toolbar__group[data-gap='none'] {
+    gap: var(--sc-spacing-none);
+  }
+  .sc-toolbar[data-gap='3xs'],
+  .sc-toolbar__group[data-gap='3xs'] {
+    gap: var(--sc-spacing-3xs);
+  }
+  .sc-toolbar[data-gap='2xs'],
+  .sc-toolbar__group[data-gap='2xs'] {
+    gap: var(--sc-spacing-2xs);
+  }
+  .sc-toolbar[data-gap='xs'],
+  .sc-toolbar__group[data-gap='xs'] {
+    gap: var(--sc-spacing-xs);
+  }
+  .sc-toolbar[data-gap='sm'],
+  .sc-toolbar__group[data-gap='sm'] {
+    gap: var(--sc-spacing-sm);
+  }
+  .sc-toolbar[data-gap='md'],
+  .sc-toolbar__group[data-gap='md'] {
+    gap: var(--sc-spacing-md);
+  }
+  .sc-toolbar[data-gap='lg'],
+  .sc-toolbar__group[data-gap='lg'] {
+    gap: var(--sc-spacing-lg);
+  }
+  .sc-toolbar[data-gap='xl'],
+  .sc-toolbar__group[data-gap='xl'] {
+    gap: var(--sc-spacing-xl);
+  }
+  .sc-toolbar[data-gap='2xl'],
+  .sc-toolbar__group[data-gap='2xl'] {
+    gap: var(--sc-spacing-2xl);
+  }
+  .sc-toolbar[data-gap='3xl'],
+  .sc-toolbar__group[data-gap='3xl'] {
+    gap: var(--sc-spacing-3xl);
+  }
+  .sc-toolbar[data-gap='4xl'],
+  .sc-toolbar__group[data-gap='4xl'] {
+    gap: var(--sc-spacing-4xl);
+  }
+  
+  /* ---- banner.css ---- */
+  /* ---- Banner ---------------------------------------------------------------- */
+  .sc-banner {
+    --_bg: var(--sc-color-info-subtle);
+    --_fg: var(--sc-color-info-text);
+    display: flex;
+    align-items: center;
+    gap: var(--sc-spacing-xs);
+    box-sizing: border-box;
+    min-block-size: var(--sc-size-control-md);
+    padding-block: var(--sc-spacing-2xs);
+    padding-inline: var(--sc-spacing-sm) var(--sc-spacing-2xs);
+    border-radius: var(--sc-radius-md);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--sc-font-family-sans);
+    font-size: var(--sc-font-size-sm);
+    line-height: var(--sc-font-line-height-ui);
+  }
+  .sc-banner[data-tone='success'] {
+    --_bg: var(--sc-color-success-subtle);
+    --_fg: var(--sc-color-success-text);
+  }
+  .sc-banner[data-tone='warning'] {
+    --_bg: var(--sc-color-warning-subtle);
+    --_fg: var(--sc-color-warning-text);
+  }
+  .sc-banner[data-tone='danger'] {
+    --_bg: var(--sc-color-danger-subtle);
+    --_fg: var(--sc-color-danger-text);
+  }
+  .sc-banner[data-tone='neutral'] {
+    --_bg: var(--sc-color-surface-sunken);
+    --_fg: var(--sc-color-text-default);
+  }
+  .sc-banner__icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .sc-banner__body {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-wrap: pretty;
+  }
+  .sc-banner__action {
+    flex: none;
   }
   .sc-banner__dismiss {
     flex: none;
@@ -2374,9 +2928,11 @@
     inline-size: 100%;
     block-size: 100%;
   }
+  /* The label clips for the ellipsis, so it needs a real line box or descenders get cut (the chip sets line-height: 1). */
   .sc-chip__label {
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: var(--sc-font-line-height-ui);
   }
   .sc-chip[data-removable] > .sc-chip__action,
   .sc-chip[data-removable] > .sc-chip__label {
@@ -2670,4 +3226,1274 @@
     }
   }
   
+  /* ---- filepond/dist/filepond.css ---- */
+  /*!
+   * FilePond 4.32.12
+   * Licensed under MIT, https://opensource.org/licenses/MIT/
+   * Please visit https://pqina.nl/filepond/ for details.
+   */
+  
+  /* eslint-disable */
+  .filepond--assistant {
+      position: absolute;
+      overflow: hidden;
+      height: 1px;
+      width: 1px;
+      padding: 0;
+      border: 0;
+      clip: rect(1px, 1px, 1px, 1px);
+      -webkit-clip-path: inset(50%);
+      clip-path: inset(50%);
+      white-space: nowrap;
+  }
+  /* Hard to override styles */
+  .filepond--browser.filepond--browser {
+      /* is positioned absolute so it is focusable for form validation errors */
+      position: absolute;
+      margin: 0;
+      padding: 0;
+  
+      /* is positioned ~behind drop label */
+      left: 1em;
+      top: 1.75em;
+      width: calc(100% - 2em);
+  
+      /* hide visually */
+      opacity: 0;
+      font-size: 0; /* removes text cursor in Internet Explorer 11 */
+  }
+  .filepond--data {
+      position: absolute;
+      width: 0;
+      height: 0;
+      padding: 0;
+      margin: 0;
+      border: none;
+      visibility: hidden;
+      pointer-events: none;
+      contain: strict;
+  }
+  .filepond--drip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+      opacity: 0.1;
+  
+      /* can't interact with this element */
+      pointer-events: none;
+  
+      /* inherit border radius from parent (needed for drip-blob cut of) */
+      border-radius: 0.5em;
+  
+      /* this seems to prevent Chrome from redrawing this layer constantly */
+      background: rgba(0, 0, 0, 0.01);
+  }
+  .filepond--drip-blob {
+      position: absolute;
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      top: 0;
+      left: 0;
+      width: 8em;
+      height: 8em;
+      margin-left: -4em;
+      margin-top: -4em;
+      background: #292625;
+      border-radius: 50%;
+  
+      /* will be animated */
+      will-change: transform, opacity;
+  }
+  .filepond--drop-label {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      margin: 0;
+      color: #4f4f4f;
+  
+      /* center contents */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+  
+      /* fixes IE11 centering problems (is overruled by label min-height) */
+      height: 0px;
+  
+      /* dont allow selection */
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+  
+      /* will be animated */
+      will-change: transform, opacity;
+  }
+  /* Hard to override styles on purpose */
+  .filepond--drop-label.filepond--drop-label label {
+      display: block;
+      margin: 0;
+      padding: 0.5em; /* use padding instead of margin so click area is not impacted */
+  }
+  .filepond--drop-label label {
+      cursor: default;
+      font-size: 0.875em;
+      font-weight: normal;
+      text-align: center;
+      line-height: 1.5;
+  }
+  .filepond--label-action {
+      text-decoration: underline;
+      -webkit-text-decoration-skip: ink;
+      text-decoration-skip-ink: auto;
+      -webkit-text-decoration-color: #a7a4a4;
+      text-decoration-color: #a7a4a4;
+      cursor: pointer;
+  }
+  .filepond--root[data-disabled] .filepond--drop-label label {
+      opacity: 0.5;
+  }
+  /* Hard to override styles */
+  .filepond--file-action-button.filepond--file-action-button {
+      font-size: 1em;
+      width: 1.625em;
+      height: 1.625em;
+  
+      font-family: inherit;
+      line-height: inherit;
+  
+      margin: 0;
+      padding: 0;
+      border: none;
+      outline: none;
+  
+      will-change: transform, opacity;
+  
+      /* hidden label */
+  }
+  .filepond--file-action-button.filepond--file-action-button span {
+      position: absolute;
+      overflow: hidden;
+      height: 1px;
+      width: 1px;
+      padding: 0;
+      border: 0;
+      clip: rect(1px, 1px, 1px, 1px);
+      -webkit-clip-path: inset(50%);
+      clip-path: inset(50%);
+      white-space: nowrap;
+  }
+  .filepond--file-action-button.filepond--file-action-button {
+      /* scale SVG to fill button */
+  }
+  .filepond--file-action-button.filepond--file-action-button svg {
+      width: 100%;
+      height: 100%;
+  }
+  .filepond--file-action-button.filepond--file-action-button {
+      /* bigger touch area */
+  }
+  .filepond--file-action-button.filepond--file-action-button::after {
+      position: absolute;
+      left: -0.75em;
+      right: -0.75em;
+      top: -0.75em;
+      bottom: -0.75em;
+      content: '';
+  }
+  /* Soft styles */
+  .filepond--file-action-button {
+      /* use default arrow cursor */
+      cursor: auto;
+  
+      /* reset default button styles */
+      color: #fff;
+  
+      /* set default look n feel */
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.5);
+      background-image: none;
+  
+      /* we animate box shadow on focus */
+      /* it's only slightly slower than animating */
+      /* a pseudo-element with transforms and renders */
+      /* a lot better on chrome */
+      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+      transition: box-shadow 0.25s ease-in;
+  }
+  .filepond--file-action-button:hover,
+  .filepond--file-action-button:focus {
+      box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
+  }
+  .filepond--file-action-button[disabled] {
+      color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(0, 0, 0, 0.25);
+  }
+  .filepond--file-action-button[hidden] {
+      display: none;
+  }
+  /* edit button */
+  .filepond--action-edit-item.filepond--action-edit-item {
+      width: 2em;
+      height: 2em;
+      padding: 0.1875em;
+  }
+  .filepond--action-edit-item.filepond--action-edit-item[data-align*='center'] {
+      margin-left: -0.1875em;
+  }
+  .filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom'] {
+      margin-bottom: -0.1875em;
+  }
+  .filepond--action-edit-item-alt {
+      border: none;
+      line-height: inherit;
+      background: transparent;
+      font-family: inherit;
+      color: inherit;
+      outline: none;
+      padding: 0;
+      margin: 0 0 0 0.25em;
+      pointer-events: all;
+      position: absolute;
+  }
+  .filepond--action-edit-item-alt svg {
+      width: 1.3125em;
+      height: 1.3125em;
+  }
+  .filepond--action-edit-item-alt span {
+      font-size: 0;
+      opacity: 0;
+  }
+  .filepond--file-info {
+      position: static;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1;
+      margin: 0 0.5em 0 0;
+      min-width: 0;
+  
+      /* will be animated */
+      will-change: transform, opacity;
+  
+      /* can't do anything with this info */
+      pointer-events: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+  
+      /* no margins on children */
+  }
+  .filepond--file-info * {
+      margin: 0;
+  }
+  .filepond--file-info {
+      /* we don't want to have these overrules so these selectors are a bit more specific */
+  }
+  .filepond--file-info .filepond--file-info-main {
+      font-size: 0.75em;
+      line-height: 1.2;
+  
+      /* we want ellipsis if this bar gets too wide */
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 100%;
+  }
+  .filepond--file-info .filepond--file-info-sub {
+      font-size: 0.625em;
+      opacity: 0.5;
+      transition: opacity 0.25s ease-in-out;
+      white-space: nowrap;
+  }
+  .filepond--file-info .filepond--file-info-sub:empty {
+      display: none;
+  }
+  .filepond--file-status {
+      position: static;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      flex-grow: 0;
+      flex-shrink: 0;
+  
+      margin: 0;
+      min-width: 2.25em;
+      text-align: right;
+  
+      /* will be animated */
+      will-change: transform, opacity;
+  
+      /* can't do anything with this info */
+      pointer-events: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+  
+      /* no margins on children */
+  }
+  .filepond--file-status * {
+      margin: 0;
+      white-space: nowrap;
+  }
+  .filepond--file-status {
+      /* font sizes */
+  }
+  .filepond--file-status .filepond--file-status-main {
+      font-size: 0.75em;
+      line-height: 1.2;
+  }
+  .filepond--file-status .filepond--file-status-sub {
+      font-size: 0.625em;
+      opacity: 0.5;
+      transition: opacity 0.25s ease-in-out;
+  }
+  /* Hard to override styles */
+  .filepond--file-wrapper.filepond--file-wrapper {
+      border: none;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+      height: 100%;
+  
+      /* hide legend for visual users */
+  }
+  .filepond--file-wrapper.filepond--file-wrapper > legend {
+      position: absolute;
+      overflow: hidden;
+      height: 1px;
+      width: 1px;
+      padding: 0;
+      border: 0;
+      clip: rect(1px, 1px, 1px, 1px);
+      -webkit-clip-path: inset(50%);
+      clip-path: inset(50%);
+      white-space: nowrap;
+  }
+  .filepond--file {
+      position: static;
+      display: flex;
+      height: 100%;
+      align-items: flex-start;
+  
+      padding: 0.5625em 0.5625em;
+  
+      color: #fff;
+      border-radius: 0.5em;
+  
+      /* control positions */
+  }
+  .filepond--file .filepond--file-status {
+      margin-left: auto;
+      margin-right: 2.25em;
+  }
+  .filepond--file .filepond--processing-complete-indicator {
+      pointer-events: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      z-index: 3;
+  }
+  .filepond--file .filepond--processing-complete-indicator,
+  .filepond--file .filepond--progress-indicator,
+  .filepond--file .filepond--file-action-button {
+      position: absolute;
+  }
+  .filepond--file {
+      /* .filepond--file-action-button */
+  }
+  .filepond--file [data-align*='left'] {
+      left: 0.5625em;
+  }
+  .filepond--file [data-align*='right'] {
+      right: 0.5625em;
+  }
+  .filepond--file [data-align*='center'] {
+      left: calc(50% - 0.8125em); /* .8125 is half of button width */
+  }
+  .filepond--file [data-align*='bottom'] {
+      bottom: 1.125em;
+  }
+  .filepond--file [data-align='center'] {
+      top: calc(50% - 0.8125em);
+  }
+  .filepond--file .filepond--progress-indicator {
+      margin-top: 0.1875em;
+  }
+  .filepond--file .filepond--progress-indicator[data-align*='right'] {
+      margin-right: 0.1875em;
+  }
+  .filepond--file .filepond--progress-indicator[data-align*='left'] {
+      margin-left: 0.1875em;
+  }
+  /* make sure text does not overlap */
+  [data-filepond-item-state='cancelled'] .filepond--file-info,
+  [data-filepond-item-state*='invalid'] .filepond--file-info,
+  [data-filepond-item-state*='error'] .filepond--file-info {
+      margin-right: 2.25em;
+  }
+  [data-filepond-item-state~='processing'] .filepond--file-status-sub {
+      opacity: 0;
+  }
+  [data-filepond-item-state~='processing']
+      .filepond--action-abort-item-processing
+      ~ .filepond--file-status
+      .filepond--file-status-sub {
+      opacity: 0.5;
+  }
+  [data-filepond-item-state='processing-error'] .filepond--file-status-sub {
+      opacity: 0;
+  }
+  [data-filepond-item-state='processing-error']
+      .filepond--action-retry-item-processing
+      ~ .filepond--file-status
+      .filepond--file-status-sub {
+      opacity: 0.5;
+  }
+  [data-filepond-item-state='processing-complete'] {
+      /* busy state */
+  }
+  [data-filepond-item-state='processing-complete'] .filepond--action-revert-item-processing svg {
+      -webkit-animation: fall 0.5s 0.125s linear both;
+      animation: fall 0.5s 0.125s linear both;
+  }
+  [data-filepond-item-state='processing-complete'] {
+      /* hide details by default, only show when can revert */
+  }
+  [data-filepond-item-state='processing-complete'] .filepond--file-status-sub {
+      opacity: 0.5;
+  }
+  [data-filepond-item-state='processing-complete']
+      .filepond--processing-complete-indicator:not([style*='hidden'])
+      ~ .filepond--file-status
+      .filepond--file-status-sub {
+      opacity: 0;
+  }
+  [data-filepond-item-state='processing-complete'] .filepond--file-info-sub {
+      opacity: 0;
+  }
+  [data-filepond-item-state='processing-complete']
+      .filepond--action-revert-item-processing
+      ~ .filepond--file-info
+      .filepond--file-info-sub {
+      opacity: 0.5;
+  }
+  /* file state can be invalid or error, both are visually similar but */
+  /* having them as separate states might be useful */
+  [data-filepond-item-state*='invalid'] .filepond--panel,
+  [data-filepond-item-state*='invalid'] .filepond--file-wrapper,
+  [data-filepond-item-state*='error'] .filepond--panel,
+  [data-filepond-item-state*='error'] .filepond--file-wrapper {
+      -webkit-animation: shake 0.65s linear both;
+      animation: shake 0.65s linear both;
+  }
+  /* spins progress indicator when file is marked as busy */
+  [data-filepond-item-state*='busy'] .filepond--progress-indicator svg {
+      -webkit-animation: spin 1s linear infinite;
+      animation: spin 1s linear infinite;
+  }
+  /**
+   * States
+   */
+  @-webkit-keyframes spin {
+      0% {
+          -webkit-transform: rotateZ(0deg);
+          transform: rotateZ(0deg);
+      }
+  
+      100% {
+          -webkit-transform: rotateZ(360deg);
+          transform: rotateZ(360deg);
+      }
+  }
+  @keyframes spin {
+      0% {
+          -webkit-transform: rotateZ(0deg);
+          transform: rotateZ(0deg);
+      }
+  
+      100% {
+          -webkit-transform: rotateZ(360deg);
+          transform: rotateZ(360deg);
+      }
+  }
+  @-webkit-keyframes shake {
+      10%,
+      90% {
+          -webkit-transform: translateX(-0.0625em);
+          transform: translateX(-0.0625em);
+      }
+  
+      20%,
+      80% {
+          -webkit-transform: translateX(0.125em);
+          transform: translateX(0.125em);
+      }
+  
+      30%,
+      50%,
+      70% {
+          -webkit-transform: translateX(-0.25em);
+          transform: translateX(-0.25em);
+      }
+  
+      40%,
+      60% {
+          -webkit-transform: translateX(0.25em);
+          transform: translateX(0.25em);
+      }
+  }
+  @keyframes shake {
+      10%,
+      90% {
+          -webkit-transform: translateX(-0.0625em);
+          transform: translateX(-0.0625em);
+      }
+  
+      20%,
+      80% {
+          -webkit-transform: translateX(0.125em);
+          transform: translateX(0.125em);
+      }
+  
+      30%,
+      50%,
+      70% {
+          -webkit-transform: translateX(-0.25em);
+          transform: translateX(-0.25em);
+      }
+  
+      40%,
+      60% {
+          -webkit-transform: translateX(0.25em);
+          transform: translateX(0.25em);
+      }
+  }
+  @-webkit-keyframes fall {
+      0% {
+          opacity: 0;
+          -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+          -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+      }
+  
+      70% {
+          opacity: 1;
+          -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+          -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+      }
+  
+      100% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+          -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+      }
+  }
+  @keyframes fall {
+      0% {
+          opacity: 0;
+          -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+          -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+      }
+  
+      70% {
+          opacity: 1;
+          -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+          -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+      }
+  
+      100% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+          -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+      }
+  }
+  /* ignore all other interaction elements while dragging a file */
+  .filepond--hopper[data-hopper-state='drag-over'] > * {
+      pointer-events: none;
+  }
+  /* capture all hit tests using a hidden layer, this speeds up the event flow */
+  .filepond--hopper[data-hopper-state='drag-over']::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 100;
+  }
+  .filepond--progress-indicator {
+      z-index: 103;
+  }
+  .filepond--file-action-button {
+      z-index: 102;
+  }
+  .filepond--file-status {
+      z-index: 101;
+  }
+  .filepond--file-info {
+      z-index: 100;
+  }
+  .filepond--item {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+  
+      padding: 0;
+      margin: 0.25em;
+  
+      will-change: transform, opacity;
+  
+      touch-action: auto;
+  
+      /* item children order */
+  }
+  .filepond--item > .filepond--panel {
+      z-index: -1;
+  }
+  /* has a slight shadow */
+  .filepond--item > .filepond--panel .filepond--panel-bottom {
+      box-shadow: 0 0.0625em 0.125em -0.0625em rgba(0, 0, 0, 0.25);
+  }
+  .filepond--item {
+      /* drag related */
+  }
+  .filepond--item > .filepond--file-wrapper,
+  .filepond--item > .filepond--panel {
+      transition: opacity 0.15s ease-out;
+  }
+  .filepond--item[data-drag-state] {
+      cursor: -webkit-grab;
+      cursor: grab;
+  }
+  .filepond--item[data-drag-state] > .filepond--panel {
+      transition: box-shadow 0.125s ease-in-out;
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+  .filepond--item[data-drag-state='drag'] {
+      cursor: -webkit-grabbing;
+      cursor: grabbing;
+  }
+  .filepond--item[data-drag-state='drag'] > .filepond--panel {
+      box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.325);
+  }
+  .filepond--item[data-drag-state]:not([data-drag-state='idle']) {
+      z-index: 2;
+  }
+  /* states */
+  .filepond--item-panel {
+      background-color: #64605e;
+  }
+  [data-filepond-item-state='processing-complete'] .filepond--item-panel {
+      background-color: #369763;
+  }
+  [data-filepond-item-state*='invalid'] .filepond--item-panel,
+  [data-filepond-item-state*='error'] .filepond--item-panel {
+      background-color: #c44e47;
+  }
+  /* style of item panel */
+  .filepond--item-panel {
+      border-radius: 0.5em;
+      transition: background-color 0.25s;
+  }
+  /* normal mode */
+  .filepond--list-scroller {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: 0;
+      will-change: transform;
+  }
+  /* scroll mode */
+  .filepond--list-scroller[data-state='overflow'] .filepond--list {
+      bottom: 0;
+      right: 0;
+  }
+  .filepond--list-scroller[data-state='overflow'] {
+      overflow-y: scroll;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+      -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
+      mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
+  }
+  /* style scrollbar */
+  .filepond--list-scroller::-webkit-scrollbar {
+      background: transparent;
+  }
+  .filepond--list-scroller::-webkit-scrollbar:vertical {
+      width: 1em;
+  }
+  .filepond--list-scroller::-webkit-scrollbar:horizontal {
+      height: 0;
+  }
+  .filepond--list-scroller::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.3);
+      border-radius: 99999px;
+      border: 0.3125em solid transparent;
+      background-clip: content-box;
+  }
+  /* hard to overide styles on purpose */
+  .filepond--list.filepond--list {
+      position: absolute;
+      top: 0;
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+  
+      /* prevents endless paint calls on filepond--list-scroller */
+      will-change: transform;
+  }
+  /* used for padding so allowed to be restyled */
+  .filepond--list {
+      left: 0.75em;
+      right: 0.75em;
+  }
+  .filepond--root[data-style-panel-layout~='integrated'] {
+      width: 100%;
+      height: 100%;
+      max-width: none;
+      margin: 0;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root {
+      border-radius: 0;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root > *,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root > * {
+      display: none;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--drop-label,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
+      bottom: 0;
+      height: auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 7;
+  }
+  .filepond--root[data-style-panel-layout~='circle'],
+  .filepond--root[data-style-panel-layout~='integrated'] {
+      /* we're only loading one item, this makes the intro animation a bit nicer */
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--item-panel,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--item-panel {
+      display: none;
+  }
+  .filepond--root[data-style-panel-layout~='compact'] .filepond--list-scroller,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--list-scroller {
+      overflow: hidden;
+      height: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+  }
+  .filepond--root[data-style-panel-layout~='compact'] .filepond--list,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--list {
+      left: 0;
+      right: 0;
+      height: 100%;
+  }
+  .filepond--root[data-style-panel-layout~='compact'] .filepond--item,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--item {
+      margin: 0;
+  }
+  .filepond--root[data-style-panel-layout~='compact'] .filepond--file-wrapper,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--file-wrapper {
+      height: 100%;
+  }
+  .filepond--root[data-style-panel-layout~='compact'] .filepond--drop-label,
+  .filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
+      z-index: 7;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] {
+      border-radius: 99999rem;
+      overflow: hidden;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] > .filepond--panel {
+      border-radius: inherit;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] > .filepond--panel > * {
+      display: none;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] {
+      /* circle cuts of this info, so best to hide it */
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--file-info {
+      display: none;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--file-status {
+      display: none;
+  }
+  .filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item {
+      opacity: 1 !important;
+      visibility: visible !important;
+  }
+  /* dirfty way to fix circular overflow issue on safari 11+ */
+  @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+          .filepond--root[data-style-panel-layout~='circle'] {
+              will-change: transform;
+          }
+      }
+  }
+  .filepond--panel-root {
+      border-radius: 0.5em;
+      background-color: #f1f0ef;
+  }
+  .filepond--panel {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      margin: 0;
+  
+      /* defaults to 100% height (fixed height mode) this fixes problem with panel height in IE11 */
+      height: 100% !important;
+  
+      /* no interaction possible with panel */
+      pointer-events: none;
+  }
+  .filepond-panel:not([data-scalable='false']) {
+      height: auto !important;
+  }
+  .filepond--panel[data-scalable='false'] > div {
+      display: none;
+  }
+  .filepond--panel[data-scalable='true'] {
+      /* this seems to fix Chrome performance issues */
+      /* - when box-shadow is enabled */
+      /* - when multiple ponds are active on the same page */
+      -webkit-transform-style: preserve-3d;
+      transform-style: preserve-3d;
+  
+      /* prevent borders and backgrounds */
+      background-color: transparent !important;
+      border: none !important;
+  }
+  .filepond--panel-top,
+  .filepond--panel-bottom,
+  .filepond--panel-center {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+  }
+  .filepond--panel-top,
+  .filepond--panel-bottom {
+      height: 0.5em;
+  }
+  .filepond--panel-top {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      border-bottom: none !important;
+  
+      /* fixes tiny transparant line between top and center panel */
+  }
+  .filepond--panel-top::after {
+      content: '';
+      position: absolute;
+      height: 2px;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      background-color: inherit;
+  }
+  .filepond--panel-center,
+  .filepond--panel-bottom {
+      will-change: transform;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      -webkit-transform-origin: left top;
+      transform-origin: left top;
+      -webkit-transform: translate3d(0, 0.5em, 0);
+      transform: translate3d(0, 0.5em, 0);
+  }
+  .filepond--panel-bottom {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+      border-top: none !important;
+  
+      /* fixes tiny transparant line between bottom and center of panel */
+  }
+  .filepond--panel-bottom::before {
+      content: '';
+      position: absolute;
+      height: 2px;
+      left: 0;
+      right: 0;
+      top: -1px;
+      background-color: inherit;
+  }
+  .filepond--panel-center {
+      /* the center panel is scaled using scale3d to fit the correct height */
+      /* we use 100px instead of 1px as scaling 1px to a huge height is really laggy on chrome */
+      height: 100px !important;
+      border-top: none !important;
+      border-bottom: none !important;
+      border-radius: 0 !important;
+  
+      /* hide if not transformed, prevents a little flash when the panel is at 100px height while attached for first time */
+  }
+  .filepond--panel-center:not([style]) {
+      visibility: hidden;
+  }
+  .filepond--progress-indicator {
+      position: static;
+      width: 1.25em;
+      height: 1.25em;
+  
+      color: #fff;
+  
+      /* can't have margins */
+      margin: 0;
+  
+      /* no interaction possible with progress indicator */
+      pointer-events: none;
+  
+      /* will be animated */
+      will-change: transform, opacity;
+  }
+  .filepond--progress-indicator svg {
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+      transform-box: fill-box; /* should center the animation correctly when zoomed in */
+  }
+  .filepond--progress-indicator path {
+      fill: none;
+      stroke: currentColor;
+  }
+  .filepond--list-scroller {
+      z-index: 6;
+  }
+  .filepond--drop-label {
+      z-index: 5;
+  }
+  .filepond--drip {
+      z-index: 3;
+  }
+  .filepond--root > .filepond--panel {
+      z-index: 2;
+  }
+  .filepond--browser {
+      z-index: 1;
+  }
+  .filepond--root {
+      /* layout*/
+      box-sizing: border-box;
+      position: relative;
+      margin-bottom: 1em;
+  
+      /* base font size for whole component */
+      font-size: 1rem;
+  
+      /* base line height */
+      line-height: normal;
+  
+      /* up uses default system font family */
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+          'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  
+      /* will increase font weight a bit on Safari */
+      font-weight: 450;
+  
+      /* default text alignment */
+      text-align: left;
+  
+      /* better text rendering on Safari */
+      text-rendering: optimizeLegibility;
+  
+      /* text direction is ltr for now */
+      direction: ltr;
+  
+      /* optimize rendering */
+      /* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
+      contain: layout style size;
+  
+      /* correct box sizing, line-height and positioning on child elements */
+  }
+  .filepond--root * {
+      box-sizing: inherit;
+      line-height: inherit;
+  }
+  .filepond--root *:not(text) {
+      font-size: inherit;
+  }
+  .filepond--root {
+      /* block everything */
+  }
+  .filepond--root[data-disabled] {
+      pointer-events: none;
+  }
+  .filepond--root[data-disabled] .filepond--list-scroller {
+      pointer-events: all;
+  }
+  .filepond--root[data-disabled] .filepond--list {
+      pointer-events: none;
+  }
+  /**
+   * Root element children layout
+   */
+  .filepond--root .filepond--drop-label {
+      min-height: 4.75em;
+  }
+  .filepond--root .filepond--list-scroller {
+      margin-top: 1em;
+      margin-bottom: 1em;
+  }
+  .filepond--root .filepond--credits {
+      position: absolute;
+      right: 0;
+      opacity: 0.4;
+      line-height: 0.85;
+      font-size: 11px;
+      color: inherit;
+      text-decoration: none;
+      z-index: 3;
+      bottom: -14px;
+  }
+  .filepond--root .filepond--credits[style] {
+      top: 0;
+      bottom: auto;
+      margin-top: 14px;
+  }
+  
+  /* ---- file-input.css ---- */
+  /* ---- FileInput (FilePond, docs/adr/0004) ------------------------------------
+     FilePond's own stylesheet (filepond/dist/filepond.css) is concatenated just before this file, inside the
+     same layer. Everything here is scoped under .sc-file-input and wins by specificity, never !important.
+     FilePond lays out its rows in JS from measured sizes, so spacing is set in em on its elements and the
+     zone's height through min-height on the drop label. */
+  .sc-file-input-field {
+    /* Drop zone height: two control heights, so `size` and compact density move it with the other fields. */
+    --_zone: calc(var(--_h) * 2);
+  }
+  .sc-file-input {
+    position: relative;
+    box-sizing: border-box;
+    border: var(--sc-border-width-hairline) dashed var(--sc-color-border-strong);
+    border-radius: var(--sc-radius-lg);
+    background: var(--sc-color-surface-default);
+    color: var(--sc-color-text-default);
+    font-size: var(--_fs);
+    transition:
+      border-color var(--sc-duration-fast) var(--sc-ease-standard),
+      background-color var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-file-input:not([data-disabled]):hover {
+    border-color: var(--sc-color-text-muted);
+  }
+  /* The file input is FilePond's single tab stop and is invisible; the ring goes on the zone. */
+  .sc-file-input:has(.filepond--browser:focus-visible) {
+    border-color: var(--sc-color-border-focus);
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: var(--sc-border-width-focus);
+  }
+  .sc-file-input:has(.filepond--root[data-hopper-state='drag-over']) {
+    border-style: solid;
+    border-color: var(--sc-color-accent-default);
+    background: var(--sc-color-accent-subtle);
+  }
+  .sc-file-input[data-invalid] {
+    border-color: var(--sc-color-danger-solid);
+  }
+  .sc-file-input[data-disabled] {
+    border-style: solid;
+    border-color: var(--sc-color-border-default);
+    background: var(--sc-color-surface-sunken);
+    color: var(--sc-color-text-muted);
+    cursor: not-allowed;
+  }
+  
+  /* Before FilePond loads (server render, first paint): the same zone, inert. */
+  .sc-file-input__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--_zone);
+    padding: var(--sc-spacing-xs);
+    color: var(--sc-color-text-muted);
+    text-align: center;
+  }
+  .sc-file-input__browse {
+    color: var(--sc-color-text-link);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  
+  /* FilePond's root and the panel it animates behind the rows: the zone above paints the surface instead. */
+  .sc-file-input .filepond--root {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: var(--sc-font-line-height-ui);
+    color: inherit;
+  }
+  .sc-file-input .filepond--panel-root {
+    background-color: transparent;
+  }
+  .sc-file-input .filepond--drip {
+    display: none;
+  }
+  .sc-file-input .filepond--root .filepond--drop-label {
+    min-height: var(--_zone);
+    color: var(--sc-color-text-muted);
+  }
+  /* Disabled reads through the sunken surface, solid border and cursor; the text stays at muted so it keeps AA
+     (axe cannot tell this label belongs to a disabled control). */
+  .sc-file-input[data-disabled] .filepond--root .filepond--drop-label {
+    color: var(--sc-color-text-muted);
+  }
+  .sc-file-input .filepond--drop-label.filepond--drop-label label {
+    padding: var(--sc-spacing-xs);
+    font-size: 1em;
+    line-height: var(--sc-font-line-height-ui);
+    cursor: pointer;
+  }
+  .sc-file-input .filepond--root[data-disabled] .filepond--drop-label label {
+    opacity: 1;
+  }
+  .sc-file-input .filepond--label-action {
+    color: var(--sc-color-text-link);
+    text-decoration-color: currentColor;
+    text-underline-offset: 0.2em;
+  }
+  .sc-file-input[data-disabled] .filepond--label-action {
+    color: inherit;
+  }
+  .sc-file-input .filepond--root .filepond--list-scroller {
+    margin-block: 0 0.5em;
+  }
+  .sc-file-input .filepond--list.filepond--list {
+    inset-inline: 0.5em;
+  }
+  
+  /* File rows */
+  .sc-file-input .filepond--item {
+    margin: 0.25em 0;
+  }
+  .sc-file-input .filepond--item-panel {
+    border-radius: var(--sc-radius-md);
+    background-color: var(--sc-color-surface-sunken);
+  }
+  .sc-file-input[data-disabled] .filepond--item-panel {
+    background-color: var(--sc-color-surface-default);
+  }
+  .sc-file-input .filepond--item > .filepond--panel .filepond--panel-bottom {
+    box-shadow: none;
+  }
+  .sc-file-input .filepond--file {
+    align-items: center;
+    padding: 0.5em 0.75em;
+    color: var(--sc-color-text-default);
+  }
+  .sc-file-input[data-disabled] .filepond--file {
+    color: var(--sc-color-text-muted);
+  }
+  .sc-file-input .filepond--file-info {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--sc-spacing-xs);
+    margin-inline-end: 2.5em;
+  }
+  .sc-file-input .filepond--file-info .filepond--file-info-main {
+    flex: 0 1 auto;
+    inline-size: auto;
+    font-size: 1em;
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-ui);
+  }
+  .sc-file-input .filepond--file-info .filepond--file-info-sub {
+    flex: none;
+    font-size: var(--sc-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--sc-color-text-muted);
+    opacity: 1;
+  }
+  .sc-file-input .filepond--file-status {
+    display: none;
+  }
+  .sc-file-input .filepond--progress-indicator {
+    color: var(--sc-color-text-muted);
+  }
+  /* The × at the end of each row: a ghost icon button. */
+  .sc-file-input .filepond--file-action-button.filepond--file-action-button {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--sc-size-control-sm);
+    block-size: var(--sc-size-control-sm);
+    border-radius: var(--sc-radius-sm);
+    font-size: inherit;
+  }
+  .sc-file-input .filepond--file [data-align*='right'] {
+    inset-inline-end: 0.25em;
+  }
+  .sc-file-input .filepond--file-action-button.filepond--file-action-button svg {
+    inline-size: var(--sc-size-icon-md);
+    block-size: var(--sc-size-icon-md);
+  }
+  .sc-file-input .filepond--action-remove-item {
+    top: 50%;
+    margin-block-start: calc(var(--sc-size-control-sm) / -2);
+    background: transparent;
+    color: var(--sc-color-text-muted);
+    box-shadow: none;
+    cursor: pointer;
+    transition:
+      background-color var(--sc-duration-fast) var(--sc-ease-standard),
+      color var(--sc-duration-fast) var(--sc-ease-standard);
+  }
+  .sc-file-input .filepond--action-remove-item:hover,
+  .sc-file-input .filepond--action-remove-item:focus {
+    background: var(--sc-color-surface-hover);
+    color: var(--sc-color-text-default);
+    box-shadow: none;
+  }
+  .sc-file-input .filepond--file-action-button.filepond--file-action-button:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: 0;
+  }
+  .sc-file-input .filepond--action-remove-item[disabled] {
+    background: transparent;
+    color: var(--sc-color-text-subtle);
+    cursor: not-allowed;
+  }
+  
+  /* The message slot stays in the tree (it is the live region); out of the flow while empty. */
+  .sc-file-input__messages {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sc-spacing-3xs);
+  }
+  .sc-file-input__messages:empty {
+    position: absolute;
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .sc-file-input,
+    .sc-file-input .filepond--action-remove-item {
+      transition: none;
+    }
+  }
+  
 }