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

package/src/table/table.tokens.json

@@ -0,0 +1,69 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-control-font-family",
+  "--slotted-control-font-size-md",
+  "--slotted-control-gap-md",
+  "--slotted-control-height-md",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-regular",
+  "--slotted-font-weight-semibold",
+  "--slotted-ground",
+  "--slotted-line-height-md",
+  "--slotted-radius-md",
+  "--slotted-radius-sm",
+  "--slotted-shadow-xs",
+  "--slotted-space-2",
+  "--slotted-space-5",
+  "--slotted-space-9",
+  "--slotted-surface",
+  "--slotted-table-border-color",
+  "--slotted-table-border-color-strong",
+  "--slotted-table-border-width",
+  "--slotted-table-cell-padding-block",
+  "--slotted-table-cell-padding-inline",
+  "--slotted-table-color",
+  "--slotted-table-color-muted",
+  "--slotted-table-column-actions-size",
+  "--slotted-table-control-radius",
+  "--slotted-table-font-family",
+  "--slotted-table-font-size",
+  "--slotted-table-gap",
+  "--slotted-table-header-surface",
+  "--slotted-table-header-surface-hover",
+  "--slotted-table-icon-size",
+  "--slotted-table-radius",
+  "--slotted-table-row-color-selected",
+  "--slotted-table-row-min-block-size",
+  "--slotted-table-row-surface-hover",
+  "--slotted-table-row-surface-selected",
+  "--slotted-table-row-surface-selected-hover",
+  "--slotted-table-row-surface-stripe",
+  "--slotted-table-selection-size",
+  "--slotted-table-shadow",
+  "--slotted-table-sticky-inset",
+  "--slotted-table-sticky-offset",
+  "--slotted-table-sticky-offset-end",
+  "--slotted-table-surface",
+  "--slotted-target-comfortable",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-subtle-hover",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-z-index-sticky"
+]

package/src/table-of-contents/table-of-contents.css

@@ -0,0 +1,533 @@
+@layer slotted.components {
+  /**
+   * A list of links into the document the reader is in, with the link of the
+   * place in view marked. It is text and a rule: no fill on a row, no frame
+   * on the list. What it borrows from the control scale is the row's height,
+   * inset and type, so a column of links beside a page reads at the weight of
+   * the page's own controls.
+   *
+   * Three layouts, one anatomy. `vertical` is the column — the track on the
+   * list's start edge, the marker sliding along it. `horizontal` is the bar
+   * that sits in `page-header`'s tabs slot — the track under the bar, the
+   * marker sliding under the current link. `collapsed` is a trigger with the
+   * current label that opens the list in a layer under it.
+   *
+   *   root  ▸ label
+   *         ▸ trigger ▸ label · current · indicator      (collapsed)
+   *         ▸ panel ▸ marker
+   *                 ▸ list ▸ item ▸ link
+   *                               ▸ group ▸ item ▸ link …
+   *                        ▸ skeleton                    (loading)
+   *
+   * Two inks carry the list. `--_text` is the muted step every link rests in
+   * and `--_current` is the accent text step the current link is set in;
+   * hover mixes the first toward the page's own text colour, which is the rule
+   * `link` and `breadcrumb` arrived at for a line of text.
+   */
+  [data-ui='table-of-contents'] {
+    --_text: var(--slotted-table-of-contents-color, var(--slotted-text-muted, GrayText));
+    --_strong: var(--slotted-text, CanvasText);
+    --_hover: var(
+      --slotted-table-of-contents-color-hover,
+      color-mix(in oklab, var(--_text) 30%, var(--_strong))
+    );
+    --_current: var(
+      --slotted-table-of-contents-color-current,
+      var(--slotted-tone-accent-text, LinkText)
+    );
+    --_track: var(--slotted-table-of-contents-track-color, var(--slotted-border-subtle, GrayText));
+    --_track-width: var(
+      --slotted-table-of-contents-track-width,
+      var(--slotted-border-width-medium, 2px)
+    );
+    --_marker: var(
+      --slotted-table-of-contents-marker-color,
+      var(--slotted-tone-accent-solid, Highlight)
+    );
+    --_indent: var(--slotted-table-of-contents-indent, var(--slotted-space-5, 0.75rem));
+    --_line-height: var(--slotted-line-height-sm, 1.45);
+    --_duration: var(--slotted-duration-medium);
+    --_easing: var(--slotted-easing-standard, ease);
+
+    color: var(--_text);
+    display: block;
+    font-family: var(--slotted-font-family-sans, inherit);
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    /* A column beside a page: the page's measure is the page's, and the column has none of its own. */
+    min-inline-size: 0;
+  }
+
+  /* ── Size ───────────────────────────────────────────────────────────────
+   *
+   * The row is the control's height at the family's step, and the type and
+   * the inset are the control's own, so a row at `sm` is the row `button`
+   * draws at `sm`. The row's height is met with padding rather than with a
+   * fixed height, because a label wraps.
+   */
+
+  [data-ui='table-of-contents'][data-size='sm'] {
+    --_row-height: var(--slotted-control-height-sm, 30px);
+    --_font-size: var(--slotted-control-font-size-sm, 12px);
+    --_inset: var(--slotted-control-padding-inline-sm, 10px);
+    --_icon-size: var(--slotted-control-icon-size-sm, 14px);
+    --_gap: var(--slotted-control-gap-sm, 6px);
+  }
+
+  [data-ui='table-of-contents'][data-size='md'] {
+    --_row-height: var(--slotted-control-height-md, 34px);
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    --_inset: var(--slotted-control-padding-inline-md, 13px);
+    --_icon-size: var(--slotted-control-icon-size-md, 16px);
+    --_gap: var(--slotted-control-gap-md, 8px);
+  }
+
+  [data-ui='table-of-contents'][data-size='lg'] {
+    --_row-height: var(--slotted-control-height-lg, 38px);
+    --_font-size: var(--slotted-control-font-size-lg, 14px);
+    --_inset: var(--slotted-control-padding-inline-lg, 16px);
+    --_icon-size: var(--slotted-control-icon-size-lg, 18px);
+    --_gap: var(--slotted-control-gap-lg, 8px);
+  }
+
+  /** A list with no entries draws nothing: a title over an empty column is a broken column. */
+  [data-ui='table-of-contents'][data-empty]:not([data-loading]) {
+    display: none;
+  }
+
+  /* ── The label ──────────────────────────────────────────────────────────
+   *
+   * The list's title, set in the page's own text colour and one step of
+   * weight above the links, so the column reads as a titled list and not as a
+   * link that happens to be bold. It stands on the same inset as the links.
+   */
+
+  [data-ui='table-of-contents'] > [data-part='label'] {
+    color: var(--_strong);
+    font-size: var(--slotted-font-size-sm, 0.8125rem);
+    font-weight: var(--slotted-font-weight-semibold, 600);
+    line-height: var(--slotted-line-height-sm, 1.45);
+    margin-block-end: var(--slotted-space-3, 0.375rem);
+    padding-inline: var(--_inset);
+  }
+
+  /* ── The list ─────────────────────────────────────────────────────────── */
+
+  [data-ui='table-of-contents'] [data-part='panel'] {
+    position: relative;
+  }
+
+  [data-ui='table-of-contents'] :is([data-part='list'], [data-part='group']) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /**
+   * The track: a rule the whole list stands beside, on the edge facing the
+   * text. It is drawn once, on the first level, so the groups inside indent
+   * under it rather than each carrying a rule of their own.
+   */
+  [data-ui='table-of-contents'][data-layout='vertical'] [data-part='panel'] > [data-part='list'] {
+    border-inline-start: var(--_track-width) solid var(--_track);
+  }
+
+  [data-ui='table-of-contents'] [data-part='group'] {
+    padding-inline-start: var(--_indent);
+  }
+
+  [data-ui='table-of-contents'] [data-part='item'] {
+    /* An item is a block in a list; the marker beside the list is the panel's, not the item's. */
+    display: block;
+    min-inline-size: 0;
+  }
+
+  /* ── The link ─────────────────────────────────────────────────────────── */
+
+  [data-ui='table-of-contents'] [data-part='link'] {
+    border-radius: var(--slotted-control-radius, 4px);
+    color: inherit;
+    display: block;
+    /**
+     * A label wraps rather than truncating: a heading translated into a longer
+     * language is read whole in a 220-pixel column, which is what Docusaurus
+     * and Starlight do and what `docs/build-briefing.md` asks of every
+     * truncation — nothing leaves the DOM. An unbroken token breaks inside
+     * itself rather than widening the column.
+     */
+    overflow-wrap: anywhere;
+    /* The row's height, met with padding so a second line adds to it rather than overflowing it. */
+    padding-block: calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);
+    padding-inline: var(--_inset);
+    text-decoration: none;
+    transition:
+      color var(--slotted-duration-short) var(--_easing),
+      font-weight var(--slotted-duration-short) var(--_easing);
+  }
+
+  [data-ui='table-of-contents'] [data-part='link']:not([data-disabled]):not([data-current]):hover {
+    color: var(--_hover);
+  }
+
+  [data-ui='table-of-contents'] [data-part='link']:not([data-disabled]):not([data-current]):active {
+    color: var(--_strong);
+  }
+
+  /**
+   * The current link is said by its ink and its weight, and the marker beside
+   * the list says it a second time; neither says it alone, which is what
+   * `state-rail.test.mjs` asks of a band on an edge.
+   */
+  [data-ui='table-of-contents'] [data-part='link'][data-current] {
+    color: var(--_current);
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  /**
+   * The ring is drawn inside the row, as every row in a list of this library
+   * draws it: an outward ring on a row against the track would cross the
+   * track, and against the column's edge would be clipped by the panel that
+   * scrolls.
+   */
+  [data-ui='table-of-contents'] :is([data-part='link'], [data-part='trigger']):focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(-1 * var(--slotted-focus-ring-offset, 2px));
+  }
+
+  /* ── The marker ───────────────────────────────────────────────────────────
+   *
+   * One segment that travels along the track to the current link, the way
+   * Ant's ink does: the binding measures the current link against the panel
+   * and writes where it starts and how long it is. It lives in the panel and
+   * not in the list, because an `ol` holds only `li`, and it is positioned
+   * against the panel's content so it scrolls with the links when the panel
+   * scrolls. Absent a current link it has no size, so the track stands alone.
+   *
+   * It is pulled over the track by the track's own width, so the two lines
+   * are one line — the arithmetic `tabs` uses for the same pair.
+   */
+  [data-ui='table-of-contents'] [data-part='marker'] {
+    background-color: var(--_marker);
+    border-radius: var(--slotted-radius-full, 9999px);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      inset-block-start var(--_duration) var(--_easing),
+      inset-inline-start var(--_duration) var(--_easing),
+      block-size var(--_duration) var(--_easing),
+      inline-size var(--_duration) var(--_easing);
+  }
+
+  [data-ui='table-of-contents'][data-layout='vertical'] [data-part='marker'] {
+    block-size: var(--_marker-size, 0px);
+    inline-size: var(--_track-width);
+    inset-block-start: var(--_marker-start, 0px);
+    inset-inline-start: 0;
+  }
+
+  /* ── Numbered ───────────────────────────────────────────────────────────
+   *
+   * Counters per level — `1.`, `1.2`, `1.2.3` — for a contract, a policy or
+   * a procedure whose clauses are numbered. The number is text in tabular
+   * figures, muted like the link it precedes, and it takes the link's ink
+   * when the link is current.
+   */
+  [data-ui='table-of-contents'][data-numbered] :is([data-part='list'], [data-part='group']) {
+    counter-reset: slotted-table-of-contents;
+  }
+
+  [data-ui='table-of-contents'][data-numbered] [data-part='item'] {
+    counter-increment: slotted-table-of-contents;
+  }
+
+  [data-ui='table-of-contents'][data-numbered] [data-part='link']::before {
+    content: counters(slotted-table-of-contents, '.') '.';
+    display: inline-block;
+    font-variant-numeric: tabular-nums;
+    margin-inline-end: var(--_gap);
+  }
+
+  /* ── Sticky ───────────────────────────────────────────────────────────────
+   *
+   * The column pins under the page's chrome and takes the rest of the
+   * viewport; the panel scrolls, the label stays. `100dvh` because a phone's
+   * toolbar comes and goes; the panel's own scrollbar is hidden, because a
+   * column of a dozen links with a scrollbar beside it reads as a control.
+   */
+  [data-ui='table-of-contents'][data-sticky] {
+    display: flex;
+    flex-direction: column;
+    inset-block-start: var(--slotted-page-sticky-top, 0px);
+    max-block-size: calc(100dvh - var(--slotted-page-sticky-top, 0px));
+    position: sticky;
+  }
+
+  [data-ui='table-of-contents'][data-sticky] > [data-part='panel'] {
+    min-block-size: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+  }
+
+  /* ── Horizontal ───────────────────────────────────────────────────────────
+   *
+   * The bar under a page's title. One line that scrolls inline rather than
+   * compressing its labels — `tabs`' rule for a row of words — with the track
+   * under it and the marker under the current link. Groups are not shown:
+   * Ant's horizontal Anchor takes no children, and a bar with two levels is
+   * two bars.
+   */
+  [data-ui='table-of-contents'][data-layout='horizontal'] {
+    display: flex;
+    gap: var(--_gap);
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] > [data-part='label'] {
+    align-self: center;
+    flex: none;
+    margin-block-end: 0;
+    padding-inline-end: 0;
+    white-space: nowrap;
+  }
+
+  /**
+   * The track is painted as the panel's own background, not as its border:
+   * the panel is a scroll container, and a scroll container clips on both
+   * axes, so a marker hung over a border would be cut off. The background
+   * stays put while the links scroll — a background's default attachment —
+   * and the panel keeps the track's height under its content so the marker,
+   * absolutely positioned at the panel's end edge, sits on the track and
+   * scrolls with the link it marks.
+   */
+  [data-ui='table-of-contents'][data-layout='horizontal'] > [data-part='panel'] {
+    --_fade: var(--slotted-space-9, 2rem);
+    --_fade-angle: 90deg;
+
+    background: linear-gradient(var(--_track), var(--_track)) 0 100% / 100% var(--_track-width)
+      no-repeat;
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    padding-block-end: var(--_track-width);
+    scrollbar-width: none;
+  }
+
+  /**
+   * A bar with more links than room says so at the edge they continue past:
+   * the binding measures the panel and writes `data-overflow` as `start`,
+   * `end` or `both`, and the panel fades over one large step of space on that
+   * side. The track fades with the links, which is the hint — a rule that
+   * ends is a bar that ends. The gradient's angle is the one physical value
+   * here, mirrored by hand under `:dir(rtl)`, because a gradient angle takes
+   * no logical keyword.
+   */
+  [data-ui='table-of-contents'][data-layout='horizontal'] > [data-part='panel']:dir(rtl) {
+    --_fade-angle: 270deg;
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal']
+    > [data-part='panel'][data-overflow='end'] {
+    mask-image: linear-gradient(var(--_fade-angle), #000 calc(100% - var(--_fade)), transparent);
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal']
+    > [data-part='panel'][data-overflow='start'] {
+    mask-image: linear-gradient(var(--_fade-angle), transparent, #000 var(--_fade));
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal']
+    > [data-part='panel'][data-overflow='both'] {
+    mask-image: linear-gradient(
+      var(--_fade-angle),
+      transparent,
+      #000 var(--_fade),
+      #000 calc(100% - var(--_fade)),
+      transparent
+    );
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='list'] {
+    display: flex;
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='item'] {
+    flex: none;
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='link'] {
+    white-space: nowrap;
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='group'] {
+    display: none;
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='marker'] {
+    block-size: var(--_track-width);
+    inline-size: var(--_marker-size, 0px);
+    inset-block-end: 0;
+    inset-inline-start: var(--_marker-start, 0px);
+  }
+
+  /* ── Collapsed ────────────────────────────────────────────────────────────
+   *
+   * A phone's bar: a button the width of its column showing the list's title
+   * and the current label, with the list in a layer under it. The layer is in
+   * flow — anchored under the trigger by position alone, with no portal and
+   * no positioner, because it opens exactly one place — and it is a
+   * dismissable layer for Escape and a press outside.
+   */
+  [data-ui='table-of-contents'][data-layout='collapsed'] {
+    position: relative;
+  }
+
+  [data-ui='table-of-contents'] [data-part='trigger'] {
+    align-items: center;
+    appearance: none;
+    background: none;
+    border: 0;
+    border-block-end: var(--_track-width) solid var(--_track);
+    border-radius: 0;
+    color: var(--_strong);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    gap: var(--_gap);
+    inline-size: 100%;
+    margin: 0;
+    min-block-size: var(--_row-height);
+    padding-block: 0;
+    padding-inline: var(--_inset);
+    text-align: start;
+  }
+
+  [data-ui='table-of-contents'] [data-part='trigger'] > [data-part='label'] {
+    color: var(--_strong);
+    flex: none;
+    font-weight: var(--slotted-font-weight-semibold, 600);
+  }
+
+  /**
+   * The current label: the one line a reader on a phone has, so it takes the
+   * room the title leaves and is cut at the end when it is longer. The whole
+   * text stays in the DOM and in the list below.
+   */
+  [data-ui='table-of-contents'] [data-part='current'] {
+    color: var(--_text);
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui='table-of-contents'] [data-part='current']:empty {
+    display: none;
+  }
+
+  /**
+   * The chevron is the `chevron-down` Glyph element in an `icon` box, which the
+   * part sizes to the glyph scale and pushes to the end of the trigger. The box
+   * turns half a turn while the panel is open.
+   */
+  [data-ui='table-of-contents'] [data-part='indicator'] {
+    --slotted-icon-size: var(--_icon-size);
+
+    display: flex;
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  [data-ui='table-of-contents'] [data-part='indicator'] > [data-ui='icon'] {
+    transition: rotate var(--_duration) var(--_easing);
+  }
+
+  [data-ui='table-of-contents'][data-open] [data-part='indicator'] > [data-ui='icon'] {
+    rotate: 180deg;
+  }
+
+  [data-ui='table-of-contents'][data-layout='collapsed'] > [data-part='panel'] {
+    --_enter-distance: var(--slotted-space-2, 0.25rem);
+
+    background-color: var(--slotted-surface-raised, Canvas);
+    border: var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);
+    border-radius: var(--slotted-radius-md, 6px);
+    box-shadow: var(--slotted-shadow-md, none);
+    display: none;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    margin-block-start: var(--slotted-space-2, 0.25rem);
+    max-block-size: min(60dvh, 24rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-block: var(--slotted-space-2, 0.25rem);
+    position: absolute;
+    z-index: var(--slotted-z-index-popover, 1100);
+  }
+
+  [data-ui='table-of-contents'][data-layout='collapsed'][data-open] > [data-part='panel'] {
+    animation: slotted-table-of-contents-enter var(--slotted-duration-short)
+      var(--slotted-easing-enter, ease-out);
+    display: block;
+  }
+
+  /* The layer under the trigger has no track: the layer's own edge frames the list. */
+  [data-ui='table-of-contents'][data-layout='collapsed'] [data-part='marker'] {
+    display: none;
+  }
+
+  /** The layer arrives along the axis it opens on, R7 of `overlay-motion.test.mjs`. */
+  @keyframes slotted-table-of-contents-enter {
+    from {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--_enter-distance));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    @keyframes slotted-table-of-contents-enter {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+
+  /* ── Loading ────────────────────────────────────────────────────────────
+   *
+   * Rows with an item's geometry whose text is `skeleton`'s bar, so a column
+   * whose body is still arriving keeps its width and its rhythm.
+   */
+  [data-ui='table-of-contents'] [data-part='skeleton'] {
+    display: flex;
+    min-block-size: var(--_row-height);
+    padding-block: calc((var(--_row-height) - var(--_font-size) * var(--_line-height)) / 2);
+    padding-inline: var(--_inset);
+  }
+
+  [data-ui='table-of-contents'] [data-part='skeleton'] > [data-ui='skeleton'] {
+    --slotted-skeleton-block-size: var(--_font-size);
+  }
+
+  [data-ui='table-of-contents'][data-layout='horizontal'] [data-part='skeleton'] {
+    flex: none;
+    inline-size: 6rem;
+  }
+
+  /* ── Forced colours ───────────────────────────────────────────────────── */
+
+  @media (forced-colors: active) {
+    /* A painted background is the one thing the mode throws away: the marker is redrawn in the system's highlight. */
+    [data-ui='table-of-contents'] [data-part='marker'] {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+
+    [data-ui='table-of-contents'] [data-part='link'][data-current] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/src/table-of-contents/table-of-contents.tokens.json

@@ -0,0 +1,53 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-medium",
+  "--slotted-border-width-thin",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-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-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-radius",
+  "--slotted-duration-medium",
+  "--slotted-duration-short",
+  "--slotted-easing-enter",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-sm",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-sm",
+  "--slotted-radius-full",
+  "--slotted-radius-md",
+  "--slotted-shadow-md",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-5",
+  "--slotted-space-9",
+  "--slotted-surface-raised",
+  "--slotted-table-of-contents-color",
+  "--slotted-table-of-contents-color-current",
+  "--slotted-table-of-contents-color-hover",
+  "--slotted-table-of-contents-indent",
+  "--slotted-table-of-contents-marker-color",
+  "--slotted-table-of-contents-track-color",
+  "--slotted-table-of-contents-track-width",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-text",
+  "--slotted-z-index-popover"
+]