dev-process-kit 0.2.0 → 0.3.0-beta.0

package/dist/chunks/shared-C1rWkW_W.js

@@ -0,0 +1,705 @@
+import{ah as e}from"./shared-BQqlFaPv.js";const r=e`
+  /* ------------------------------------------------------------ count */
+
+  /* How many: a small rounded mono figure, beside a tab or a heading. data-size='sm' is quieter. */
+  :where(.dpk-count) {
+    display: inline-block;
+    flex: none;
+    min-width: 18px;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: var(--tone-soft, var(--dpk-rule));
+    color: var(--tone, var(--dpk-ink-soft));
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    line-height: 17px;
+    text-align: center;
+  }
+
+  :where(.dpk-count[data-size='sm']) {
+    color: var(--tone, var(--dpk-ink-faint));
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  /* A count lands like the kit's own count badge does: it pops into place. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.dpk-count) {
+      animation: dpk-pop var(--dpk-dur) var(--dpk-ease-spring);
+    }
+  }
+
+  /* ------------------------------------------------------------ segmented */
+
+  /* A sunken track with the selected segment raised on top of it. */
+  :where(.dpk-segmented) {
+    display: inline-flex;
+    gap: 2px;
+    max-width: 100%;
+    padding: 2px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 999px;
+    background: var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 3px var(--dpk-shade-1);
+  }
+
+  :where(.dpk-segmented) > :where(a, button) {
+    padding: 4px 12px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 550;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background var(--dpk-dur) var(--dpk-ease),
+      color var(--dpk-dur) var(--dpk-ease),
+      box-shadow var(--dpk-dur) var(--dpk-ease);
+  }
+
+  :where(.dpk-segmented) > :where(a:hover, button:hover) {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink);
+  }
+
+  :where(.dpk-segmented) > :where(a:focus-visible, button:focus-visible) {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  :where(.dpk-segmented)
+    > :where(
+      [aria-selected='true'],
+      [aria-pressed='true'],
+      [aria-checked='true'],
+      [aria-current]:not([aria-current='false'])
+    ) {
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-weight: 650;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  /* The pick landing in its track: the raised segment grows into place, so the
+     eye follows the selection instead of finding it already moved. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.dpk-segmented)
+      > :where(
+        [aria-selected='true'],
+        [aria-pressed='true'],
+        [aria-checked='true'],
+        [aria-current]:not([aria-current='false'])
+      ) {
+      animation: dpk-scale-in var(--dpk-dur-fast) var(--dpk-ease-out);
+    }
+  }
+
+  /* ------------------------------------------------------------ tab strip */
+
+  /*
+   * The pages of a view: an underlined tab strip, heavier than a segmented
+   * toggle. The selected tab's underline sits on the strip's bottom rule;
+   * --dpk-tabstrip-pad is the room between the tabs and that rule, so a bar
+   * that draws its own rule can set it to its padding and drop the strip's.
+   */
+  :where(.dpk-tabstrip) {
+    --_tabstrip-pad: var(--dpk-tabstrip-pad, 6px);
+    position: relative;
+    display: flex;
+    gap: 4px;
+    min-width: 0;
+    padding-bottom: var(--_tabstrip-pad);
+    border-bottom: 1px solid var(--dpk-rule);
+  }
+
+  :where(.dpk-tabstrip) > :where(a, button) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 10px;
+    border: none;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 13.5px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color var(--dpk-dur) var(--dpk-ease),
+      background var(--dpk-dur) var(--dpk-ease);
+  }
+
+  :where(.dpk-tabstrip) > :where(a:hover, button:hover) {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink);
+  }
+
+  :where(.dpk-tabstrip) > :where(a:focus-visible, button:focus-visible) {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  :where(.dpk-tabstrip)
+    > :where([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) {
+    color: var(--dpk-ink);
+    font-weight: 700;
+  }
+
+  :where(.dpk-tabstrip)
+    > :where([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))::after {
+    content: '';
+    position: absolute;
+    right: 10px;
+    bottom: calc(-1 * var(--_tabstrip-pad) - 1px);
+    left: 10px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--dpk-tabstrip-accent, var(--dpk-blue));
+    transform-origin: center;
+  }
+
+  /* The underline is drawn out from under its label as the tab takes over. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.dpk-tabstrip)
+      > :where([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))::after {
+      animation: dpk-grow-in var(--dpk-dur-fast) var(--dpk-ease-out);
+    }
+  }
+
+  :where(.dpk-tabstrip)
+    > :where([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))
+    > :where(.dpk-count) {
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  /* ------------------------------------------------------------ filter */
+
+  /*
+   * A select-like trigger that names what it filters and what it is set to:
+   * <button class="dpk-filter"><span>Status</span><b>All</b></button>.
+   * data-active='true' (or aria-pressed) marks a filter that narrows the view.
+   */
+  :where(.dpk-filter) {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 6px;
+    max-width: 260px;
+    min-height: var(--dpk-control-h, 30px);
+    padding: 6px 28px 6px 10px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23878e9e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
+      no-repeat right 8px center;
+    color: var(--dpk-ink);
+    font: inherit;
+    font-size: 12.5px;
+    text-align: left;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    cursor: pointer;
+    transition:
+      border-color var(--dpk-dur) var(--dpk-ease),
+      box-shadow var(--dpk-dur) var(--dpk-ease),
+      background-color var(--dpk-dur) var(--dpk-ease),
+      transform var(--dpk-dur-fast) var(--dpk-ease);
+  }
+
+  :where(.dpk-filter:hover) {
+    border-color: var(--dpk-rule-hover);
+  }
+
+  :where(.dpk-filter:focus-visible) {
+    outline: none;
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-focus);
+  }
+
+  :where(.dpk-filter[data-active='true'], .dpk-filter[aria-pressed='true']) {
+    border-color: color-mix(in oklab, var(--dpk-blue) 55%, var(--dpk-rule-strong));
+    background-color: color-mix(in oklab, var(--dpk-blue) 8%, var(--dpk-paper-raised));
+  }
+
+  :where(.dpk-filter) > :where(:first-child) {
+    flex: none;
+    color: var(--dpk-ink-faint);
+    font-size: 11.5px;
+    font-weight: 600;
+  }
+
+  :where(.dpk-filter) > :where(:last-child:not(:first-child)) {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--dpk-ink);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ------------------------------------------------------------ add */
+
+  /* The quiet "add one here" button at the end of a list or a cell: dashed, blue under the pointer. */
+  :where(.dpk-add) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-faint);
+    font: inherit;
+    font-size: 11.5px;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background var(--dpk-dur) var(--dpk-ease),
+      border-color var(--dpk-dur) var(--dpk-ease),
+      color var(--dpk-dur) var(--dpk-ease),
+      transform var(--dpk-dur-fast) var(--dpk-ease);
+  }
+
+  :where(.dpk-add:hover) {
+    border-color: var(--dpk-blue);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  :where(.dpk-add:focus-visible) {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  /* ------------------------------------------------------------ form controls */
+
+  /*
+   * Text entry atoms for author content: a one-line .dpk-input (text, url,
+   * …), a resizable .dpk-textarea, and the native .dpk-select styled to
+   * match. For a filterable or multi-pick list use the combobox component
+   * instead; for a popover listbox, the select component.
+   */
+  :where(.dpk-input, .dpk-textarea, .dpk-select) {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--dpk-control-h, 32px);
+    padding: 6px 10px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font: inherit;
+    font-size: 12.5px;
+    box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+    transition:
+      border-color var(--dpk-dur) var(--dpk-ease),
+      box-shadow var(--dpk-dur) var(--dpk-ease),
+      background var(--dpk-dur) var(--dpk-ease);
+  }
+
+  :where(.dpk-input, .dpk-textarea)::placeholder {
+    color: var(--dpk-ink-faint);
+  }
+
+  :where(.dpk-input:hover, .dpk-textarea:hover, .dpk-select:hover) {
+    border-color: var(--dpk-rule-hover);
+  }
+
+  /* The ring arrives over the fast step rather than snapping on: the same
+     focus ring, given the time to read as feedback. */
+  :where(.dpk-input:focus, .dpk-textarea:focus, .dpk-select:focus) {
+    outline: none;
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-focus);
+    transition-duration: var(--dpk-dur-fast);
+  }
+
+  :where(.dpk-input:disabled, .dpk-textarea:disabled, .dpk-select:disabled) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  :where(.dpk-textarea) {
+    resize: vertical;
+    min-height: 64px;
+    line-height: 1.55;
+  }
+
+  :where(.dpk-select) {
+    appearance: none;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23878e9e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    padding-right: 28px;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    cursor: pointer;
+  }
+`,a=e`
+  :where(.dpk-card) {
+    --_card-tone: var(--dpk-card-tone, var(--dpk-ink-faint));
+    position: relative;
+    display: flow-root;
+    min-width: 0;
+    padding: 12px 13px;
+    border: 1px solid color-mix(in oklab, var(--_card-tone) 24%, var(--dpk-rule));
+    border-radius: 12px;
+    background: color-mix(in oklab, var(--_card-tone) 6%, var(--dpk-paper-raised));
+    color: var(--dpk-ink-soft);
+    box-shadow:
+      0 1px 1px var(--dpk-shade-1),
+      0 2px 6px -3px var(--dpk-shade-2);
+    transition:
+      box-shadow var(--dpk-dur) var(--dpk-ease),
+      transform var(--dpk-dur) var(--dpk-ease),
+      border-color var(--dpk-dur) var(--dpk-ease),
+      opacity var(--dpk-dur) var(--dpk-ease),
+      filter var(--dpk-dur) var(--dpk-ease);
+  }
+
+  :where(.dpk-card[data-tone]) {
+    --_card-tone: var(--tone);
+  }
+
+  /* Flow layout, not grid: inline author content stays on one line. */
+  :where(.dpk-card) > :where(*) {
+    margin: 0;
+  }
+
+  :where(.dpk-card) > :where(* + *) {
+    margin-top: var(--dpk-card-gap, 8px);
+  }
+
+  :where(.dpk-card) :where(h3, h4) {
+    color: var(--dpk-ink);
+    font-size: 13.5px;
+  }
+
+  /* A card that opens something lifts under the pointer. */
+  :where(a.dpk-card, button.dpk-card, .dpk-card[tabindex], .dpk-card[data-interactive]) {
+    cursor: pointer;
+  }
+
+  :where(a.dpk-card) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(button.dpk-card) {
+    width: 100%;
+    font: inherit;
+    text-align: start;
+  }
+
+  /* A card that opens something lifts under the pointer: it rises by the kit's
+     one lift step, its edge warms toward its own tone and its elevation grows
+     into the room the rise leaves under it. Transform only — the cards beside
+     it never move. */
+  :where(a.dpk-card:hover, button.dpk-card:hover, .dpk-card[tabindex]:hover, .dpk-card[data-interactive]:hover) {
+    border-color: color-mix(in oklab, var(--_card-tone) 45%, var(--dpk-rule));
+    box-shadow:
+      0 1px 2px var(--dpk-shade-1),
+      0 8px 20px -10px var(--dpk-shade-3);
+    transform: translateY(var(--dpk-lift));
+  }
+
+  /* Pressed, it settles back down: the gesture a button makes under the finger. */
+  :where(a.dpk-card:active, button.dpk-card:active, .dpk-card[tabindex]:active, .dpk-card[data-interactive]:active) {
+    transform: translateY(0) scale(var(--dpk-press));
+  }
+
+  :where(.dpk-card:focus-visible) {
+    outline: none;
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-focus);
+  }
+
+  /* The card the reader has open or picked. */
+  :where(
+    .dpk-card[aria-current='true'],
+    .dpk-card[aria-selected='true'],
+    .dpk-card[aria-pressed='true'],
+    .dpk-card[data-chosen],
+    .dpk-card[data-state~='selected']
+  ) {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--dpk-blue) 20%, transparent),
+      0 8px 20px -10px var(--dpk-shade-3);
+  }
+
+  /* A highlight across many cards (a path, a search hit): the cards on it stand out, the rest step back. */
+  :where(.dpk-card[data-state~='highlight']) {
+    border-color: color-mix(in oklab, var(--dpk-accent) 70%, var(--dpk-rule));
+    box-shadow:
+      0 0 0 2px color-mix(in oklab, var(--dpk-accent) 28%, transparent),
+      0 8px 20px -10px var(--dpk-shade-3);
+  }
+
+  :where(.dpk-card[data-state~='dimmed']) {
+    opacity: 0.4;
+    filter: saturate(0.4);
+  }
+
+  :where(.dpk-card[data-state~='dimmed']:is(:hover, :focus-visible, [data-state~='selected'])) {
+    opacity: 0.85;
+    filter: none;
+  }
+
+  :where(.dpk-card[data-state~='dragging']) {
+    opacity: 0.45;
+    transform: none;
+  }
+
+  /* A card related to the one in focus: a dashed ring in its tone, outside the edge. */
+  :where(.dpk-card[data-state~='marked']) {
+    outline: 2px dashed var(--dpk-card-mark, var(--dpk-amber));
+    outline-offset: 2px;
+  }
+
+  :where(.dpk-card[data-variant='sunken']) {
+    border-color: transparent;
+    background: var(--dpk-paper-sunken);
+    box-shadow: none;
+  }
+
+  /* ------------------------------------------------------------ card parts */
+
+  :where(.dpk-card-head) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  :where(.dpk-card-title) {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--dpk-ink);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  /* The size and the owner at the end of the head, small, like a ticket's. */
+  :where(.dpk-card-meta) {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  /* The body, cut after --dpk-card-lines lines (3). */
+  :where(.dpk-card-text) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--dpk-card-lines, 3);
+    overflow: hidden;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.dpk-card-text) > :where(*) {
+    margin: 0;
+  }
+
+  :where(.dpk-card-text) :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: 650;
+  }
+
+  :where(.dpk-card-text) :where(ul, ol) {
+    padding-left: 1.2em;
+  }
+
+  :where(.dpk-card-text) :where(code) {
+    padding: 0 3px;
+    border-radius: 4px;
+    background: var(--dpk-paper-inset);
+    font-family: var(--dpk-mono);
+    font-size: 0.92em;
+  }
+
+  :where(.dpk-card-text) :where(a) {
+    color: var(--dpk-blue);
+  }
+
+  /* A row of chips (labels, links, dependencies). */
+  :where(.dpk-card-row) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  /* Where the item sits and what was said about it. */
+  :where(.dpk-card-foot) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  /* The key people call the item by, quiet like a ticket number. */
+  :where(.dpk-card-key) {
+    flex: none;
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-weight: 600;
+    line-height: 18px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  :where(.dpk-card-chip) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 1px 7px;
+    border-radius: 6px;
+    background: color-mix(in oklab, var(--_card-tone, var(--dpk-ink-faint)) 10%, var(--dpk-paper-sunken));
+    color: var(--dpk-ink-soft);
+    font-size: 10.5px;
+    font-weight: 600;
+    line-height: 18px;
+    white-space: nowrap;
+  }
+
+  :where(.dpk-card-chip) > :where(span) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :where(.dpk-card-chip) > :where(svg) {
+    flex: none;
+    width: 12px;
+    height: 12px;
+  }
+
+  /* A count (comments, reviews): bare mono figures; a data-tone colors it. */
+  :where(.dpk-card-chip[data-variant='count']) {
+    background: transparent;
+    color: var(--tone, var(--dpk-ink-faint));
+    font-family: var(--dpk-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The counts sit at the right end of the foot. */
+  :where(.dpk-card-foot) > :where(:not([data-variant='count'])) + :where([data-variant='count']) {
+    margin-left: auto;
+  }
+
+  /* A size (an estimate, a version): a small boxed mono figure. */
+  :where(.dpk-card-chip[data-variant='outline']) {
+    padding: 0 6px;
+    border: 1px solid color-mix(in oklab, var(--_card-tone, var(--dpk-ink-faint)) 30%, var(--dpk-rule-strong));
+    border-radius: 5px;
+    background: var(--dpk-paper-raised);
+    font-family: var(--dpk-mono);
+    font-weight: 650;
+    line-height: 17px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ------------------------------------------------------------ pill / avatar */
+
+  /* A label in its own color: a dot and a name on a tinted pill. Any color through --tone. */
+  :where(.dpk-pill) {
+    --_pill-tone: var(--tone, var(--dpk-ink-faint));
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0 7px;
+    border: 1px solid color-mix(in oklab, var(--_pill-tone) 35%, transparent);
+    border-radius: 999px;
+    background: color-mix(in oklab, var(--_pill-tone) 12%, var(--dpk-paper-raised));
+    color: var(--dpk-ink);
+    font-size: 10.5px;
+    font-weight: 600;
+    line-height: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.dpk-pill)::before {
+    content: '';
+    flex: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--_pill-tone);
+  }
+
+  /* A person by their initial, in their color. data-size: sm (18px, default), md (24px), lg (34px). */
+  :where(.dpk-avatar) {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--tone, var(--dpk-blue));
+    color: var(--dpk-paper-raised);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  :where(.dpk-avatar[data-size='md']) {
+    width: 24px;
+    height: 24px;
+    font-size: 11.5px;
+  }
+
+  :where(.dpk-avatar[data-size='lg']) {
+    width: 34px;
+    height: 34px;
+    font-size: 14px;
+    font-weight: 650;
+  }
+
+  /* Overlapping avatars: a team on one card. */
+  :where(.dpk-avatars) {
+    display: inline-flex;
+  }
+
+  :where(.dpk-avatars) > :where(.dpk-avatar) {
+    box-shadow: 0 0 0 2px var(--dpk-paper-raised);
+  }
+
+  :where(.dpk-avatars) > :where(.dpk-avatar + .dpk-avatar) {
+    margin-left: -5px;
+  }
+
+  /* A label and a face land in their place: the same pop a count uses, so the
+     small figures on a card read as one family of "just appeared" marks. */
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.dpk-pill, .dpk-avatar) {
+      animation: dpk-pop var(--dpk-dur) var(--dpk-ease-spring);
+    }
+  }
+`;export{r as a,a as c};