@slotted/styles 0.0.0-stage → 0.1.0-beta.1

package/src/tour/tour.tokens.json

@@ -0,0 +1,67 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-control-gap-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-radius",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-duration-long",
+  "--slotted-duration-short",
+  "--slotted-easing-exit",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-heading",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-lg",
+  "--slotted-font-size-md",
+  "--slotted-font-size-sm",
+  "--slotted-font-size-xl",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-lg",
+  "--slotted-line-height-md",
+  "--slotted-line-height-xs",
+  "--slotted-radius-lg",
+  "--slotted-radius-md",
+  "--slotted-radius-sm",
+  "--slotted-radius-xs",
+  "--slotted-scrim",
+  "--slotted-shadow-lg",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-space-7",
+  "--slotted-surface-raised",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-tour-arrow-size",
+  "--slotted-tour-arrow-tip-radius",
+  "--slotted-tour-border-color",
+  "--slotted-tour-gap",
+  "--slotted-tour-measure",
+  "--slotted-tour-measure-compact",
+  "--slotted-tour-measure-lg",
+  "--slotted-tour-measure-sm",
+  "--slotted-tour-padding-block",
+  "--slotted-tour-padding-block-lg",
+  "--slotted-tour-padding-block-sm",
+  "--slotted-tour-padding-inline",
+  "--slotted-tour-padding-inline-lg",
+  "--slotted-tour-padding-inline-sm",
+  "--slotted-tour-radius",
+  "--slotted-tour-scrim",
+  "--slotted-tour-shadow",
+  "--slotted-tour-spotlight-padding",
+  "--slotted-tour-spotlight-radius",
+  "--slotted-tour-surface",
+  "--slotted-tour-text",
+  "--slotted-z-index-overlay"
+]

package/src/transfer/transfer.css

@@ -0,0 +1,571 @@
+@layer slotted.components {
+  /**
+   * Two lists and the moves between them.
+   *
+   *   root ▸ switch (steps only)
+   *   body ▸ ┌ pane source ──────┐  actions  ┌ pane target ──────┐
+   *          │ pane-header        │  Add ›    │ pane-header        │
+   *          │ search             │  Add all »│ search             │
+   *          ├────────────────────┤           ├────────────────────┤
+   *          │ list ▸ listbox     │  ‹ Remove │ list ▸ listbox     │
+   *          │   drop-indicator   │  « …      │                    │
+   *          ├────────────────────┤  reorder  ├────────────────────┤
+   *          │ pane-footer        │  ⌃ Up ⌄   │ pane-footer        │
+   *          └────────────────────┘           └────────────────────┘
+   *
+   * The listbox, the checkbox, the text field, the buttons and the switch are
+   * their families'. This sheet places them and draws what none of them owns:
+   * the pane's frame, the header's alignment with the listbox's check column,
+   * the chevrons on the moves, the drop line and the narrow layout. Every
+   * part is reached from the root with child combinators, because the
+   * composed families have parts named `label`, `root` and `empty` of their
+   * own and a descendant rule would restyle theirs.
+   *
+   * Density is answered through the control geometry: every inset here is a
+   * control's padding or gap at the family's size step, and the list is a
+   * number of control heights tall.
+   */
+  [data-ui='transfer'] {
+    --_text: var(--slotted-text, CanvasText);
+    --_muted: var(--slotted-text-muted, GrayText);
+    --_rule: var(--slotted-border-subtle, ButtonBorder);
+    --_edge: var(--slotted-control-border-color, ButtonBorder);
+    --_surface: var(--slotted-control-surface, Field);
+    --_shadow: var(--slotted-control-shadow, none);
+    --_radius: var(--slotted-radius-md, 6px);
+    --_pane-min: var(--slotted-transfer-pane-min-inline-size, 13rem);
+    --_gap: var(--slotted-space-5, 0.75rem);
+    --_rows: var(--slotted-transfer-rows, 8);
+    --_duration: var(--slotted-control-transition-duration);
+    --_easing: var(--slotted-control-transition-easing);
+
+    /* The step the family is at, restated per size below. */
+    --_option-height: var(--slotted-control-height-md, 34px);
+    --_option-inset: var(--slotted-control-padding-inline-md, 13px);
+    --_mark: var(--slotted-control-icon-size-md, 16px);
+    --_box: var(--slotted-selection-size-md, 16px);
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    /* The listbox's own inset, so the header lines up with its options. */
+    --_list-inset: var(--slotted-listbox-padding-block, var(--slotted-space-2, 0.25rem));
+
+    box-sizing: border-box;
+    color: var(--_text);
+    display: grid;
+    font-family: var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);
+    font-size: var(--_font-size);
+    line-height: var(--slotted-line-height-md, 1.5);
+    min-inline-size: 0;
+    row-gap: var(--_gap);
+    text-align: start;
+    /* Below 36rem the body becomes steps; see the end of this sheet. */
+    container-name: transfer;
+    container-type: inline-size;
+  }
+
+  [data-ui='transfer'][data-size='sm'] {
+    --_option-height: var(--slotted-control-height-sm, 30px);
+    --_option-inset: var(--slotted-control-padding-inline-sm, 10px);
+    --_mark: var(--slotted-control-icon-size-sm, 14px);
+    --_box: var(--slotted-selection-size-sm, 14px);
+    --_font-size: var(--slotted-control-font-size-sm, 12px);
+  }
+
+  [data-ui='transfer'][data-size='lg'] {
+    --_option-height: var(--slotted-control-height-lg, 38px);
+    --_option-inset: var(--slotted-control-padding-inline-lg, 16px);
+    --_mark: var(--slotted-control-icon-size-lg, 18px);
+    --_box: var(--slotted-selection-size-lg, 18px);
+    --_font-size: var(--slotted-control-font-size-lg, 14px);
+  }
+
+  /* ── The switch, which only steps lay out ─────────────────────────────── */
+
+  [data-ui='transfer'] > [data-part='switch'] {
+    display: none;
+  }
+
+  [data-ui='transfer'] > [data-part='switch'] > [data-ui='segmented-control'] {
+    inline-size: 100%;
+  }
+
+  /* ── The body ─────────────────────────────────────────────────────────── */
+
+  /**
+   * Two panes of equal share and the actions between them at their own width.
+   * The actions centre on the panes' block size, which is the lists' middle
+   * give or take the header, and the eye reads them as belonging to both.
+   */
+  [data-ui='transfer'] > [data-part='body'] {
+    align-items: center;
+    column-gap: var(--_gap);
+    display: grid;
+    grid-template-columns:
+      minmax(var(--_pane-min), 1fr)
+      max-content
+      minmax(var(--_pane-min), 1fr);
+    min-inline-size: 0;
+  }
+
+  /* ── A pane ───────────────────────────────────────────────────────────── */
+
+  /**
+   * The frame a standalone listbox would draw, moved out one element so the
+   * header, the search and the footer stand inside it with the list. The
+   * listbox inside is `plain`: a box inside a box is what the variant exists
+   * to prevent.
+   */
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] {
+    align-self: stretch;
+    background: var(--_surface);
+    border: var(--slotted-border-width-thin, 1px) solid var(--_edge);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    min-inline-size: 0;
+    /* A row's ground is square and would reach past the rounded corner. */
+    overflow: clip;
+    transition:
+      border-color var(--_duration) var(--_easing),
+      box-shadow var(--_duration) var(--_easing);
+  }
+
+  /**
+   * The header's start is the listbox's check column: the list's own inset,
+   * then the option's, less half of what the select-all box is wider than
+   * the check. The box then stands centred over the marks it selects.
+   */
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='pane-header'] {
+    align-items: center;
+    /* A stated step rather than the control gap: the box's focus ring is
+       drawn four pixels out, and at dense the control gap is four and six
+       pixels, so the ring touched the title. */
+    column-gap: var(--slotted-space-4, 0.5rem);
+    display: flex;
+    min-block-size: var(--_option-height);
+    padding-block: var(--slotted-space-3, 0.375rem);
+    padding-inline-end: calc(var(--_list-inset) + var(--_option-inset));
+    padding-inline-start: calc(
+      var(--_list-inset) + var(--_option-inset) - (var(--_box) - var(--_mark)) / 2
+    );
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='pane-header']
+    > [data-part='select-all'] {
+    display: inline-flex;
+    flex: none;
+  }
+
+  /* The box stands alone: its name is on the input, and the Angular binding's
+     empty label would otherwise keep the grid's gap after the box. */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='pane-header']
+    > [data-part='select-all']
+    > [data-ui='checkbox'] {
+    column-gap: 0;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='pane-header']
+    > [data-part='title'] {
+    color: var(--_text);
+    font-weight: var(--slotted-font-weight-semibold, 600);
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /**
+   * The count holds its line: a pane narrow enough to push it would wrap the
+   * title instead, and a figure that jumps as it counts is read as a change of
+   * meaning. Tabular figures keep "9 of 12" and "10 of 12" the same width.
+   */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='pane-header']
+    > [data-part='count'] {
+    color: var(--_muted);
+    flex: none;
+    font-size: var(--slotted-font-size-xs, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--slotted-line-height-xs, 1.4);
+    margin-inline-start: auto;
+    white-space: nowrap;
+  }
+
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='search'] {
+    padding-block-end: var(--slotted-space-4, 0.5rem);
+    padding-inline: var(--slotted-space-4, 0.5rem);
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='search']
+    > [data-ui='text-field'] {
+    inline-size: 100%;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='search']
+    [data-part='search-icon'] {
+    /* Holds the search `Glyph` the binding draws, at the icon size the text
+       field's start slot states. */
+    display: inline-flex;
+    flex: none;
+  }
+
+  /**
+   * The list is a stated number of options tall whatever it holds, so the two
+   * panes stand level when one is full and the other empty, and a move does
+   * not change the height of the page. The listbox fills it and scrolls
+   * inside it; its measure cap is lifted, because the pane is the measure.
+   */
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='list'] {
+    block-size: calc(var(--_rows) * var(--_option-height) + 2 * var(--_list-inset));
+    border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_rule);
+    box-sizing: content-box;
+    min-block-size: 0;
+    position: relative;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-ui='listbox'] {
+    --slotted-listbox-measure: none;
+
+    block-size: 100%;
+    max-block-size: 100%;
+  }
+
+  /**
+   * An empty list says so in the middle of the space it would fill, rather
+   * than in a row at the top that reads as the first option.
+   */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-ui='listbox']:has(> [data-part='empty']) {
+    align-content: center;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-ui='listbox']
+    > [data-part='empty']
+    > [data-part='empty'] {
+    /* The mark above the words is the `Glyph` the binding draws: an empty tray,
+       or a failed search while a query is typed. */
+    --slotted-icon-size: var(--_mark);
+    display: grid;
+    justify-items: center;
+    row-gap: var(--slotted-space-3, 0.375rem);
+  }
+
+  /** An option the collection does not hold: the key, in the muted ink. */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-ui='listbox']
+    [data-part='option']:has(> [data-part='indicator'][data-unresolved]) {
+    color: var(--_muted);
+    font-family: var(--slotted-font-family-mono, ui-monospace, monospace);
+  }
+
+  /**
+   * Where a pointer drop would land: a line of no height between two options,
+   * so nothing moves while the reader aims. Its offset is measured by script,
+   * which is the one thing the stylesheet cannot know.
+   */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-part='drop-indicator'] {
+    block-size: 0;
+    inset-block-start: var(--_drop-offset, 0);
+    inset-inline: calc(var(--_list-inset) + var(--slotted-space-2, 0.25rem));
+    pointer-events: none;
+    position: absolute;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-part='drop-indicator']::before {
+    background-color: var(--slotted-tone-accent-solid);
+    block-size: var(--slotted-border-width-thick, 2px);
+    border-radius: var(--slotted-radius-full, 9999px);
+    content: '';
+    inset-block-start: calc(var(--slotted-border-width-thick, 2px) / -2);
+    inset-inline: 0;
+    position: absolute;
+  }
+
+  /* An option being carried is the ghost of itself where it came from. */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='pane']
+    > [data-part='list']
+    > [data-ui='listbox']
+    [data-part='option']:has(> [data-part='indicator'][data-dragging]) {
+    opacity: 0.5;
+  }
+
+  /**
+   * The pane a drop would land in. The accent edge at 3:1 is the signal; the
+   * ring doubles it, so the edge reads at a glance without the pane moving.
+   */
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'][data-drop-target] {
+    border-color: var(--slotted-tone-accent-border, Highlight);
+    box-shadow: 0 0 0 var(--slotted-border-width-thin, 1px)
+      var(--slotted-tone-accent-border, Highlight);
+  }
+
+  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='pane-footer'] {
+    border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_rule);
+    color: var(--_muted);
+    font-size: var(--slotted-font-size-xs, 0.75rem);
+    line-height: var(--slotted-line-height-xs, 1.4);
+    padding-block: var(--slotted-space-4, 0.5rem);
+    padding-inline: calc(var(--_list-inset) + var(--_option-inset));
+  }
+
+  /* ── The pane's states ────────────────────────────────────────────────── */
+
+  [data-ui='transfer'][data-invalid] > [data-part='body'] > [data-part='pane'] {
+    --_edge: var(--slotted-tone-danger-border, Mark);
+    /* Width as well as colour (WCAG 1.4.1): in `high-contrast` the danger
+       border is the resting edge's black. An edge inside the border, so
+       nothing moves, in place of the resting lift — the one `text-field`
+       draws. */
+    --_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);
+    --_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--_edge);
+  }
+
+  [data-ui='transfer'][data-disabled] {
+    --_surface: var(--slotted-disabled-background, Canvas);
+    --_edge: var(--slotted-disabled-border, GrayText);
+    --_text: var(--slotted-disabled-foreground, GrayText);
+    --_muted: var(--slotted-disabled-foreground, GrayText);
+    --_shadow: none;
+  }
+
+  /* ── The actions ──────────────────────────────────────────────────────── */
+
+  /**
+   * One column of equal widths, so the four words line up as a list and the
+   * widest sets the rest. The two directions stand apart by more than the
+   * buttons inside each, which is how the eye tells "toward Chosen" from
+   * "toward Available" before reading either.
+   */
+  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] {
+    display: grid;
+    gap: var(--slotted-space-3, 0.375rem);
+    grid-auto-rows: auto;
+    min-inline-size: 0;
+  }
+
+  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='move-to-source'],
+  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='reorder'] {
+    margin-block-start: var(--slotted-space-4, 0.5rem);
+  }
+
+  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-ui='button'] {
+    inline-size: 100%;
+  }
+
+  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='reorder'] {
+    display: grid;
+    gap: var(--slotted-space-3, 0.375rem);
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='actions']
+    > [data-part='reorder']
+    > [data-ui='button'] {
+    inline-size: 100%;
+  }
+
+  /**
+   * The chevrons. A move toward the target carries its mark after the word,
+   * pointing where the items go; a move toward the source carries it before.
+   * The glyph is the `Glyph` the binding draws in the button's own start or
+   * end slot — one chevron for a selection, two for everything, a chevron
+   * down for a reorder — so the button family's slot geometry and inset decide
+   * its size and air. What is left here is which way the box points.
+   *
+   * Toward the source is the other way along the inline axis, and a
+   * right-to-left document turns both.
+   */
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-source'], [data-part='move-all-to-source'])
+    > [data-part='start']
+    > [data-ui='icon'],
+  [data-ui='transfer']:dir(rtl)
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-target'], [data-part='move-all-to-target'])
+    > [data-part='end']
+    > [data-ui='icon'] {
+    scale: -1 1;
+  }
+
+  [data-ui='transfer']:dir(rtl)
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-source'], [data-part='move-all-to-source'])
+    > [data-part='start']
+    > [data-ui='icon'] {
+    scale: 1 1;
+  }
+
+  [data-ui='transfer']
+    > [data-part='body']
+    > [data-part='actions']
+    > [data-part='reorder']
+    > [data-part='move-up']
+    > [data-part='start']
+    > [data-ui='icon'] {
+    scale: 1 -1;
+  }
+
+  /* ── Steps ────────────────────────────────────────────────────────────── */
+
+  /**
+   * One pane at a time, chosen by the switch. The body becomes one column, the
+   * pane the switch does not name leaves the layout, and the actions become a
+   * row of the current pane's two moves in the DOM's order: under the source,
+   * above the target. Moving the actions to one place for both would put them
+   * out of the tab order the reader walks.
+   *
+   * The rules are written twice, once for `layout="steps"` and once for
+   * `layout="auto"` under the container step, because a container condition
+   * cannot be a selector.
+   */
+  [data-ui='transfer'][data-layout='steps'] > [data-part='switch'] {
+    display: block;
+  }
+
+  [data-ui='transfer'][data-layout='steps'] > [data-part='body'] {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--slotted-space-4, 0.5rem);
+  }
+
+  [data-ui='transfer'][data-layout='steps']
+    > [data-part='body']
+    > [data-part='pane']:not([data-current]) {
+    display: none;
+  }
+
+  [data-ui='transfer'][data-layout='steps'] > [data-part='body'] > [data-part='actions'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  [data-ui='transfer'][data-layout='steps']
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-source'], [data-part='reorder']) {
+    margin-block-start: 0;
+  }
+
+  [data-ui='transfer'][data-layout='steps'][data-pane='source']
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-source'], [data-part='move-all-to-source'], [data-part='reorder']),
+  [data-ui='transfer'][data-layout='steps'][data-pane='target']
+    > [data-part='body']
+    > [data-part='actions']
+    > :is([data-part='move-to-target'], [data-part='move-all-to-target']) {
+    display: none;
+  }
+
+  [data-ui='transfer'][data-layout='steps']
+    > [data-part='body']
+    > [data-part='actions']
+    > [data-part='reorder'] {
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @container transfer (inline-size < 36rem) {
+    [data-ui='transfer'][data-layout='auto'] > [data-part='switch'] {
+      display: block;
+    }
+
+    [data-ui='transfer'][data-layout='auto'] > [data-part='body'] {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--slotted-space-4, 0.5rem);
+    }
+
+    [data-ui='transfer'][data-layout='auto']
+      > [data-part='body']
+      > [data-part='pane']:not([data-current]) {
+      display: none;
+    }
+
+    [data-ui='transfer'][data-layout='auto'] > [data-part='body'] > [data-part='actions'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    [data-ui='transfer'][data-layout='auto']
+      > [data-part='body']
+      > [data-part='actions']
+      > :is([data-part='move-to-source'], [data-part='reorder']) {
+      margin-block-start: 0;
+    }
+
+    [data-ui='transfer'][data-layout='auto'][data-pane='source']
+      > [data-part='body']
+      > [data-part='actions']
+      > :is([data-part='move-to-source'], [data-part='move-all-to-source'], [data-part='reorder']),
+    [data-ui='transfer'][data-layout='auto'][data-pane='target']
+      > [data-part='body']
+      > [data-part='actions']
+      > :is([data-part='move-to-target'], [data-part='move-all-to-target']) {
+      display: none;
+    }
+
+    [data-ui='transfer'][data-layout='auto']
+      > [data-part='body']
+      > [data-part='actions']
+      > [data-part='reorder'] {
+      grid-column: 1 / -1;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  /*
+   * Forced colours remove every box shadow, and the edge with them. The width
+   * comes back as an outline inside the border; a pane
+   * draws no focus ring of its own.
+   */
+  @media (forced-colors: active) {
+    [data-ui='transfer'][data-invalid] > [data-part='body'] > [data-part='pane'] {
+      outline: var(--_invalid-edge-width) solid CanvasText;
+      outline-offset: calc(
+        -1 * (var(--slotted-border-width-thin, 1px) + var(--_invalid-edge-width))
+      );
+    }
+  }
+}

package/src/transfer/transfer.tokens.json

@@ -0,0 +1,49 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-thick",
+  "--slotted-border-width-thin",
+  "--slotted-control-border-color",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-height-lg",
+  "--slotted-control-height-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-invalid-edge-width",
+  "--slotted-control-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-shadow",
+  "--slotted-control-surface",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-background",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-font-family-mono",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-md",
+  "--slotted-line-height-xs",
+  "--slotted-listbox-padding-block",
+  "--slotted-radius-full",
+  "--slotted-radius-md",
+  "--slotted-selection-size-lg",
+  "--slotted-selection-size-md",
+  "--slotted-selection-size-sm",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-border",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-danger-border",
+  "--slotted-transfer-pane-min-inline-size",
+  "--slotted-transfer-rows"
+]