@master/internal-site 0.1.2 → 0.1.3

package/src/home/home.css

@@ -92,21 +92,16 @@
   /* The compact header keeps the brand centred: GitHub takes the search button's end, as wide as the menu button. */
   .home-header[data-background="transparent"] .ui-header-end {
     justify-content: flex-end;
-    width: 2.375rem;
+    width: var(--ui-header-target);
 
-    @media (--md) {
+    @media (width >= 64rem) {
       width: auto;
     }
   }
 
   .home-header[data-background="transparent"] .ui-header-end > a[aria-label="GitHub"] {
     display: flex;
-    margin-left: 0;
-
-    @media (--md) {
-      margin-left: auto;
-      margin-right: -0.188rem;
-    }
+    margin: 0;
   }
 
   .home-section-wrap {
@@ -406,401 +401,7 @@
     }
   }
 
-  /*
-   * Cards stand directly on the page ground: no shell around them, so every edge is the card's own 1px
-   * contour. A card may hold its figure in a well, 12px in, and nothing deeper.
-   */
-  .home-bento-frame {
-    position: relative;
-  }
-
-  .home-bento-grid {
-    display: grid;
-    gap: var(--home-gap);
-
-    @media (--md) {
-      gap: 1rem;
-    }
-  }
-
-  .home-bento-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    border-radius: var(--home-radius-sheet);
-    background-color: var(--home-sheet);
-    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
-    transition: box-shadow var(--home-base) var(--home-ease);
-
-    &:hover {
-      box-shadow: 0 0 0 1px var(--home-rule), var(--home-elevation-1);
-    }
-  }
-
-  /* The title and description stay together, with a separate illustration to their right. */
-  .home-bento-card-header {
-    /* Contain the header only: size containment on the subgrid card collapses auto-height code panes. */
-    container: home-card / inline-size;
-    padding: 1.75rem 1.5rem 2rem;
-
-    @media (--sm) {
-      padding: 2.25rem 2.25rem 2.5rem;
-    }
-
-    @media (--lg) {
-      padding: 2.5rem 2.75rem 2.75rem;
-    }
-  }
-
-  .home-bento-card-caption {
-    display: grid;
-    grid-template-columns: minmax(0, 44ch) 7rem;
-    /* In a wide card the copy keeps its measure and the illustration rides the card's right edge. */
-    justify-content: space-between;
-    align-items: start;
-    align-content: start;
-    column-gap: 1.5rem;
-  }
-
-  .home-bento-card-copy { min-width: 0; }
-
-  .home-bento-card-caption > .home-illustration {
-    --home-illustration-size: 7rem;
-  }
-
-  /*
-   * A narrow card cannot spare a 7rem column beside its copy: the title shares a row with a smaller
-   * illustration and the description takes the full measure below, so neither wraps a word or two per line.
-   */
-  @container home-card (width < 28rem) {
-    .home-bento-card-caption {
-      grid-template-columns: minmax(0, 1fr) 4rem;
-      align-items: center;
-      gap: 0.75rem 1rem;
-    }
-    .home-bento-card-copy { display: contents; }
-    .home-bento-card-title { grid-column: 1; grid-row: 1; }
-    .home-bento-card-body { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 0; }
-    .home-bento-card-hint { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
-    .home-bento-card-caption > .home-illustration {
-      --home-illustration-size: 4rem;
-      grid-column: 2;
-      grid-row: 1;
-      margin-block: 0;
-    }
-  }
-
-  @container home-card (width < 16rem) {
-    .home-bento-card-caption { grid-template-columns: minmax(0, 1fr) 3rem; column-gap: 0.75rem; }
-    .home-bento-card-caption > .home-illustration { --home-illustration-size: 3rem; }
-  }
-
-  @container home-card (width < 12rem) {
-    .home-bento-card-caption { grid-template-columns: minmax(0, 1fr); }
-    .home-bento-card-caption > .home-illustration { display: none; }
-  }
-
-  @container home-card (width >= 28rem) {
-    .home-bento-card-caption { column-gap: 3rem; }
-  }
-
-  .home-bento-card-title {
-    min-width: 0;
-    margin: 0;
-    font-size: var(--home-card-title);
-    font-weight: var(--font-weight-regular);
-    line-height: 1.25;
-    letter-spacing: -0.025em;
-    color: var(--home-text);
-    text-wrap: balance;
-  }
-
-  .home-bento-card-body {
-    min-width: 0;
-    max-width: 44ch;
-    margin: 0.75rem 0 0;
-    font-size: var(--home-body);
-    line-height: 1.6;
-    color: var(--home-text-quiet);
-    text-wrap: pretty;
-  }
-
-  .home-bento-card-hint {
-    margin: 0.75rem 0 0;
-    font-size: var(--home-caption);
-    line-height: 1.5;
-    color: var(--home-text-faint);
-  }
-
-  .home-heading-link {
-    color: inherit;
-    text-decoration: none;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 0.2em;
-
-    &:hover { text-decoration-line: underline; }
-
-    &:focus-visible {
-      border-radius: var(--radius-sm);
-      outline: 2px solid var(--home-ink);
-      outline-offset: 4px;
-    }
-  }
-
-  /*
-   * The well's contour is drawn above the figure, so a pane that fills the well never hides it and
-   * a pane's own edge never doubles it: every well reads as one 1px line.
-   */
-  .home-bento-visual {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    margin: auto var(--home-gap) var(--home-gap);
-    border-radius: var(--home-radius-well);
-    background-color: var(--home-well);
-
-    &::after {
-      position: absolute;
-      inset: 0;
-      z-index: 20;
-      border-radius: inherit;
-      box-shadow: var(--home-groove);
-      pointer-events: none;
-      content: '';
-    }
-  }
-
-  .home-bento-visual-top {
-    margin-top: 0;
-  }
-
-  .home-dot-grid {
-    background-image: radial-gradient(var(--home-rule) 1px, transparent 1px);
-    background-size: 16px 16px;
-    background-position: 8px 8px;
-  }
-
-  /* A tag: mono caps inside a hairline, for states such as "Default". */
-  .home-tag {
-    display: inline-flex;
-    align-items: center;
-    height: 1.25rem;
-    padding-inline: 0.4375rem;
-    border-radius: var(--home-radius-chip);
-    font-family: var(--home-mono);
-    font-size: 0.625rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--home-text-quiet);
-    box-shadow: inset 0 0 0 1px var(--home-rule);
-  }
-
-  /* Code sits straight in its well: the docs block border, fill and radius stay out of figures. */
-  .home-code-window {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    tab-size: 2;
-
-    .ui-code {
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      box-shadow: none;
-    }
-
-    .home-code-window-pre {
-      overflow: hidden;
-      padding: var(--spacing-lg) var(--spacing-sm);
-      border-radius: 0;
-      background-color: transparent;
-    }
-  }
-
-  .home-code-window-has-fix {
-    &:where(:hover, :active) .home-code-window-source {
-      opacity: 0;
-    }
-
-    &:where(:hover, :active) .home-code-window-fix {
-      opacity: 1;
-    }
-  }
-
-  .home-code-window-dot {
-    display: block;
-    width: 0.625rem;
-    height: 0.625rem;
-    border-radius: calc(infinity * 1px);
-    background-color: var(--home-rule);
-    opacity: 0.56;
-  }
-
-  .home-code-window-stack {
-    display: grid;
-    flex: auto;
-    min-height: 0;
-  }
-
-  .home-code-window-layer {
-    grid-area: 1 / 1 / 2 / 2;
-    min-width: 0;
-    transition: opacity 0.16s ease-out;
-    will-change: opacity;
-  }
-
-  .home-code-window-fix {
-    opacity: 0;
-  }
-
-  .home-code-window-body {
-    flex: auto;
-    min-height: 0;
-  }
-
-  /* The scrollable code fills a clipped well, so its focus ring sits inside the well's edge. */
-  .home-code-window-body :focus-visible {
-    outline-offset: -2px;
-  }
-
-  .home-code-window-problem {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
-    padding-inline: var(--spacing-md);
-  }
-
-  .home-code-window-problem-icon {
-    flex: none;
-    margin-top: 1px;
-  }
-
-  .home-code-window-problem-content {
-    min-width: 0;
-  }
-
-  .home-code-window-problem-meta {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Diagnostics wrap like an editor's problems panel instead of running out of the card. */
-  .home-code-window-problem-message {
-    display: -webkit-box;
-    overflow: hidden;
-    margin: 0;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-wrap: pretty;
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    color: var(--home-text);
-  }
-
-  .home-code-window-problem-meta {
-    margin: var(--spacing-3xs) 0 0;
-    font-size: var(--text-2xs);
-    line-height: var(--text-2xs--line-height);
-    color: var(--home-text-quiet);
-  }
-
-  /* A recessed gray track holds a white selected segment that sits just above it. */
-  /*
-   * Segmented control: a soft pill track drawn with one 1px line, and a raised thumb that slides to the
-   * chosen option and takes its width. Until the thumb is measured, the chosen option paints its own.
-   */
-  .home-segmented-control {
-    --home-segment-pad: 3px;
-    position: relative;
-    isolation: isolate;
-    display: inline-flex;
-    align-items: center;
-    width: fit-content;
-    padding: var(--home-segment-pad);
-    border-radius: calc(infinity * 1px);
-    background-color: color-mix(in oklab, var(--home-text) 4%, var(--home-ground));
-    box-shadow: inset 0 0 0 1px var(--home-hairline);
-  }
-
-  .home-segmented-control-thumb {
-    position: absolute;
-    top: var(--home-segment-pad);
-    bottom: var(--home-segment-pad);
-    left: 0;
-    z-index: -1;
-    width: var(--home-segment-width, 0);
-    border-radius: calc(infinity * 1px);
-    background-color: light-dark(var(--home-sheet), color-mix(in oklab, var(--home-sheet) 86%, white));
-    /* The thumb is lit by the page lamp, like the hero's glass: its shadow falls away from the lamp. */
-    box-shadow:
-      0 0 0 1px var(--home-hairline),
-      0 1px 2px light-dark(oklch(18% 0 none / 0.06), oklch(0% 0 none / 0.4)),
-      calc(var(--cast-x, 1px) * 0.6) calc(var(--cast-y, 4px) * 0.6) 8px -3px light-dark(oklch(18% 0 none / 0.1), oklch(0% 0 none / 0.5)),
-      inset 0 1px 0 var(--home-highlight);
-    translate: var(--home-segment-x, 0) 0;
-    opacity: 0;
-
-    /* Both rims catch light: the near one from the lamp, the far one turned a little away from it. */
-    &::before {
-      position: absolute;
-      inset: 0;
-      padding: 1px;
-      border-radius: inherit;
-      background: linear-gradient(var(--lit-angle, -20deg), light-dark(oklch(0.2 0 none / 0.06), rgb(255 255 255 / 0.05)), transparent 35%, transparent 62%, light-dark(rgb(255 255 255 / 1), rgb(255 255 255 / 0.22)));
-      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
-      pointer-events: none;
-      content: '';
-    }
-
-    .home-segmented-control[data-ready] & {
-      opacity: 1;
-      transition: translate var(--home-base) var(--home-ease), width var(--home-base) var(--home-ease);
-    }
-  }
-
-  .home-segmented-control-option {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.875rem;
-    min-width: 3.75rem;
-    padding-inline: 0.875rem;
-    border: 0;
-    border-radius: calc(infinity * 1px);
-    font-size: 0.8125rem;
-    font-weight: var(--font-weight-medium);
-    line-height: 1;
-    letter-spacing: -0.005em;
-    white-space: nowrap;
-    color: var(--home-text-quiet);
-    background-color: transparent;
-    cursor: pointer;
-    transition: color var(--home-quick) var(--home-ease);
-
-    &:hover,
-    &[aria-pressed='true'] {
-      color: var(--home-text);
-    }
-
-    /* Before the thumb is measured, the chosen option carries the raised look itself. */
-    .home-segmented-control:not([data-ready]) &[aria-pressed='true'] {
-      background-color: var(--home-sheet);
-      box-shadow: 0 0 0 1px var(--home-hairline);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--home-ink);
-      outline-offset: 1px;
-    }
-  }
-
   @media (--motion-reduce) {
-    .home-segmented-control-thumb {
-      transition: none !important;
-    }
 
     /* Without motion, hover keeps its color cue but the arrow stays put instead of jumping. */
     .home-section-link:hover > svg,
@@ -808,135 +409,6 @@
       translate: none;
     }
   }
-
-  .home-chip {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    padding: var(--spacing-4xs) var(--spacing-xs);
-    border-radius: var(--home-radius-chip);
-    outline: 1px solid var(--home-hairline);
-    font-family: var(--home-mono);
-    font-size: 0.75rem;
-    line-height: 1.5;
-    white-space: nowrap;
-    color: var(--home-text-body);
-    background-color: var(--home-sheet);
-  }
-
-  .home-terminal-line {
-    display: block;
-    overflow: hidden;
-    padding: var(--spacing-xs) var(--spacing-sm);
-    border-radius: var(--radius-lg);
-    font-family: var(--home-mono);
-    font-size: 0.75rem;
-    line-height: 1.5;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--home-text);
-    background-color: var(--home-sheet);
-    box-shadow: inset 0 0 0 1px var(--home-hairline), var(--home-edge);
-  }
-
-  /* An endless row: the track holds two copies, so moving it by half its width loops seamlessly. */
-  .home-marquee {
-    overflow: hidden;
-    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
-  }
-
-  .home-marquee-track {
-    display: flex;
-    width: max-content;
-    /* Longhands keep the keyframe name static; a variable inside the shorthand reads as a dynamic name. */
-    animation-name: home-marquee;
-    animation-duration: var(--home-marquee-duration, 32s);
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-
-    & > * {
-      margin-right: var(--spacing-xs);
-    }
-
-    .home-marquee:hover & {
-      animation-play-state: paused;
-    }
-  }
-
-  .home-marquee-reverse .home-marquee-track {
-    animation-direction: reverse;
-  }
-
-  /* Same height and corner as an action beside it; the copy button nests inside with a concentric corner. */
-  .home-command {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    box-sizing: border-box;
-    max-width: 100%;
-    height: 2.75rem;
-    padding: 0 0.25rem 0 var(--spacing-md);
-    border-radius: var(--home-radius-control);
-    font-family: var(--home-mono);
-    font-size: 0.875rem;
-    color: var(--home-text);
-  }
-
-  /* The command fills the field and reads from the left, so the copy button sits at the far edge. */
-  .home-command > code {
-    flex: auto;
-    text-align: left;
-  }
-
-  .home-command-copy {
-    display: grid;
-    flex: none;
-    place-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: calc(var(--home-radius-control) - 0.25rem);
-    color: var(--home-text-quiet);
-    cursor: pointer;
-    transition: color var(--duration-fast) var(--easing-smooth), background-color var(--duration-fast) var(--easing-smooth);
-
-    &:hover {
-      color: var(--home-text);
-      background-color: var(--home-well);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--home-ink);
-    }
-  }
-
-  .home-code-tag {
-    color: var(--home-code-tag);
-  }
-
-  /* Markup brackets and `=` are punctuation, as in the docs' highlighted code. */
-  .home-code-punct {
-    color: var(--home-text-faint);
-  }
-
-  .home-code-attr {
-    color: var(--home-code-attr);
-  }
-
-  .home-code-string {
-    color: var(--home-code-string);
-  }
-
-  .home-spin {
-    animation: home-spin 0.9s linear infinite;
-  }
-
-  @media (--motion-reduce) {
-    .home-marquee-track,
-    .home-spin {
-      animation: none;
-    }
-
-  }
 }
 
 /* Capture only the header, keeping the scrolling page live underneath its transition. */
@@ -1010,18 +482,6 @@
   }
 }
 
-@keyframes home-marquee {
-  to {
-    translate: -50% 0;
-  }
-}
-
-@keyframes home-spin {
-  to {
-    rotate: 1turn;
-  }
-}
-
 @keyframes home-rise {
   from {
     opacity: 0;
@@ -1037,45 +497,13 @@
 }
 
 /*
- * Forced colors drop shadows and backgrounds: framed tools keep a system-color contour, the size chart keeps
- * its measured bars, and the footer's engraved mark (decoration only) steps aside instead of covering the links.
+ The decorative footer mark steps aside in forced colors.
  */
 @layer components {
   @media (forced-colors: active) {
-    :is(.home-bento-card, .home-editor-window, .home-agent, .home-code-window, .home-lint-pane) {
-      outline: 1px solid CanvasText;
-    }
-
-    .home-bench-bar {
-      forced-color-adjust: none;
-    }
 
     .home-footer-mark {
       display: none;
     }
-
-    /* The theme split keeps a visible line and handle where the two modes meet. */
-    .home-theme-divider {
-      forced-color-adjust: none;
-      background-color: CanvasText !important;
-    }
-
-    .home-theme-knob {
-      outline: 1px solid CanvasText;
-    }
-
-    /* The agent's steps keep a visible current step and progress without their fills. */
-    .home-agent-step[aria-current] {
-      outline: 1px solid Highlight;
-    }
-
-    .home-agent-step-track {
-      outline: 1px solid CanvasText;
-    }
-
-    .home-agent-step-fill {
-      background-color: Highlight;
-      forced-color-adjust: none;
-    }
   }
 }

package/src/home/segmented-control.css

@@ -0,0 +1,94 @@
+/* * Segmented control: a soft pill track drawn with one 1px line, and a raised thumb that slides to the
+   * chosen option and takes its width. Until the thumb is measured, the chosen option paints its own. */
+@layer components {
+  .home-segmented-control {
+    --home-segment-pad: 3px;
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    padding: var(--home-segment-pad);
+    border-radius: calc(infinity * 1px);
+    background-color: color-mix(in oklab, var(--home-text) 4%, var(--home-ground));
+    box-shadow: inset 0 0 0 1px var(--home-hairline);
+  }
+
+  .home-segmented-control-thumb {
+    position: absolute;
+    top: var(--home-segment-pad);
+    bottom: var(--home-segment-pad);
+    left: 0;
+    z-index: -1;
+    width: var(--home-segment-width, 0);
+    border-radius: calc(infinity * 1px);
+    background-color: light-dark(var(--home-sheet), color-mix(in oklab, var(--home-sheet) 86%, white));
+    /* The thumb is lit by the page lamp, like the hero's glass: its shadow falls away from the lamp. */
+    box-shadow:
+      0 0 0 1px var(--home-hairline),
+      0 1px 2px light-dark(oklch(18% 0 none / 0.06), oklch(0% 0 none / 0.4)),
+      calc(var(--cast-x, 1px) * 0.6) calc(var(--cast-y, 4px) * 0.6) 8px -3px light-dark(oklch(18% 0 none / 0.1), oklch(0% 0 none / 0.5)),
+      inset 0 1px 0 var(--home-highlight);
+    translate: var(--home-segment-x, 0) 0;
+    opacity: 0;
+
+    /* Both rims catch light: the near one from the lamp, the far one turned a little away from it. */
+    &::before {
+      position: absolute;
+      inset: 0;
+      padding: 1px;
+      border-radius: inherit;
+      background: linear-gradient(var(--lit-angle, -20deg), light-dark(oklch(0.2 0 none / 0.06), rgb(255 255 255 / 0.05)), transparent 35%, transparent 62%, light-dark(rgb(255 255 255 / 1), rgb(255 255 255 / 0.22)));
+      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+      pointer-events: none;
+      content: '';
+    }
+
+    .home-segmented-control[data-ready] & {
+      opacity: 1;
+      transition: translate var(--home-base) var(--home-ease), width var(--home-base) var(--home-ease);
+    }
+  }
+
+  .home-segmented-control-option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.875rem;
+    min-width: 3.75rem;
+    padding-inline: 0.875rem;
+    border: 0;
+    border-radius: calc(infinity * 1px);
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    letter-spacing: -0.005em;
+    white-space: nowrap;
+    color: var(--home-text-quiet);
+    background-color: transparent;
+    cursor: pointer;
+    transition: color var(--home-quick) var(--home-ease);
+
+    &:hover,
+    &[aria-pressed='true'] {
+      color: var(--home-text);
+    }
+
+    /* Before the thumb is measured, the chosen option carries the raised look itself. */
+    .home-segmented-control:not([data-ready]) &[aria-pressed='true'] {
+      background-color: var(--home-sheet);
+      box-shadow: 0 0 0 1px var(--home-hairline);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 1px;
+    }
+  }
+
+  @media (--motion-reduce) {
+    .home-segmented-control-thumb {
+      transition: none !important;
+    }
+  }
+}