The `:not(.docs-card-container) .docs-card` selector was meant to give
standalone cards a vertical margin, but no element has the
docs-card-container class, so it matched every card. Cards in a grid
without a header picked up the 1rem margin on top of the 1.25rem grid
gap, leaving rows 52px apart while columns are 20px apart (for example on
/reference/migrations, /guide/i18n and /roadmap).
Apply the margin only to cards that are not direct children of a card
grid.
(cherry picked from commit b9cbc5fbbe)
Five more defects in the example viewer, following #70508.
The DOM was queried before Angular rendered it. `setCodeLinesVisibility()`
walks the rendered lines but ran synchronously on tab change, so it measured
the outgoing tab and the incoming file showed in full. The selected tab was
also lost when the code block was hidden and reshown, because the recreated
tab group had no `[selectedIndex]` while `snippetCode` survived, leaving the
strip and the code disagreeing.
`expandable` was computed once at startup by counting hidden DOM nodes, so a
collapsed tab offered no way to expand it, and recomputing that count on tab
change would drop the control whenever the block was expanded, since nothing
is hidden then. Both paths now share one rule: a file is expandable when it
has a `visibleLinesRange` and either the block is expanded or the range
actually hides lines, so a range that covers its whole file still gets no
inert control.
Array indices were also mixed with 1-based line numbers: the gap check tested
`index - 1` for the preceding line, drawing a `...` separator inside
contiguous ranges, and the gutter tested `index` while the code tested
`index + 1`, shifting every line number by one.
Five new specs cover these, using the comma-separated range format the
pipeline emits; each fails with its fix reverted. The tab label also moves
from 0.8125rem to 0.875rem to match the code beside it.
(cherry picked from commit 26afa313f3)
Inline code inside a link renders as a chip with its own background. Text
decoration propagates from the anchor and cannot be cancelled by a descendant,
so with the chip laid out as a regular inline box the link underline is drawn
straight across it.
Lay the chip out as an atomic inline box, which the propagated decoration is not
drawn across. This applies to the link rule only; code outside of links keeps
`display: inline` for wrapping in multiline paragraphs, and the link rule
already sets `white-space: nowrap`.
(cherry picked from commit efe1aae1cd)
Two custom properties in the shared-docs styles reference tokens that are
defined nowhere, so the declarations are invalid at computed-value time.
_kbd.scss sets the <kbd> text color with var(---tertiary-contrast); the extra
leading dash points at an undefined property with no fallback, so the color
resolves to the inherited value instead of the intended --tertiary-contrast.
_colors.scss builds --light-pink-to-light-purple-horizontal-gradient from
var(--light-purple), which is not defined anywhere (the sibling token is
--light-violet, defined in the same file), invalidating the gradient. The
gradient is not currently referenced, so this corrects a latent malformed
declaration rather than a visible bug.
Point both at the defined tokens: --tertiary-contrast and --light-violet.
(cherry picked from commit e70994bdc3)
In the light theme block of _colors.scss, --webgl-page-background and
--webgl-gray-unfilled were written on a single line without a separating
semicolon, and --webgl-page-background wrapped --page-background in an
invalid nested var(). As a result --webgl-page-background got a garbage
value and --webgl-gray-unfilled was never defined in the light theme.
Split them into two well-formed declarations and drop the nested var(),
matching the structure already used in the dark theme block.
(cherry picked from commit 91822538fe)
The tutorial intro and "next steps" pages were plain headings with no
send-off. Bookend each tutorial with Angie: a greeting pose welcoming
learners on the intro page, and a superhero pose congratulating them on
the completion page, each beside a speech bubble.
The bubble treatment from the 404 page lived inside the not-found
component, so it's extracted into a reusable docs-content style
(docs-tutorial-mascot) usable from tutorial markdown, and applied to the
intro and completion pages of the Learn Angular, Signals, and Signal
Forms tutorials.
Several adev states show only plain text today. This brings the Angie
mascot into them for warmer, more on-brand empty states, with no change
to copy or behavior:
- Search dialog: a magnifying-glass Angie on "Start typing to see
results", a questioning Angie on "No results found".
- API reference: a questioning Angie on "No API items found." and on the
package filter's "No results found".
- Deprecated API pages: the back-turned orthos pose in the shared
deprecation warning.
The mascots are decorative (aria-hidden) and sized per placement; the
poses are added as SVG assets under assets/images/angie/.
Also moves the Shiki highlighter init in the jsdoc-transforms spec into a
beforeAll, fixing a flake where the spec failed under randomized test
order.
The search dialog (Cmd/Ctrl+K) opens as a native modal via `showModal()`, but the
page behind it stayed scrollable, so scrolling drifted the underlying content
beneath the blurred backdrop.
`body` already reserves a stable scrollbar gutter, so setting `overflow: hidden`
while the dialog is open blocks background scrolling with no layout shift. The rule
keys off the dialog's `[open]` state, so it restores automatically on every close
path (Escape, click-outside, navigation) with no script involved.
The "Prefer" / "Avoid" code block headers rendered the style label as
plain inline text joined to the title with a bare "-" separator, giving
the two block types little visual distinction. The taller label also left
the prefer/avoid header at a different height from the plain filename
header, so the copy button's single "top" value could not center it in
both.
Style the label as a small uppercased pill tinted with the block's style
color, drop the "-" separator, add a subtle inset accent under the header,
and swap the heavier "dangerous" icon on "Avoid" for "close". Give every
header a fixed height with box-sizing: border-box and vertically center
its contents so all variants render at the same height and the copy button
stays centered.
This supersedes #69638, folding in its centering fix for the copy button
offset that #69030 introduced.
The active docs tab applied a 2px bottom border that inactive tabs lacked,
which shrank the active label's content box and clipped its descenders. It
also set `line-height: 1.5` only on the active label, so switching tabs
nudged the text. Reserve the border as transparent on every tab and recolor
it on the active one, and share the label `line-height`, so the letters are
no longer cut and the label stays put when switching.
The ::selection background mixes only 10% of the accent color into
--octonary-contrast. In dark mode --octonary-contrast resolves to
gray-900 (#151417), which is the same color code blocks use as their
background, so selected code renders ~90% code-background and is almost
invisible.
Add a .docs-dark-mode ::selection override that raises the tint to 30%
so highlighted text stays legible over the near-black surface. Light
mode is unchanged, as its selection already contrasts the white page.
Fixes#69507
The code tabs rendered by the example viewer (e.g. the npm/pnpm/yarn/bun
install tabs) paint their active label as transparent text clipped to a
gradient. Material's MDC tab styles add `transition: color 0.15s linear`
to `.mdc-tab__text-label`, plus a 100ms delay on the active tab. Because
that transition animates `color` from the solid label color to
transparent, the solid color stays visible on top of the gradient for
~100ms when a tab is activated, which reads as a white flash.
Disable the transition on these labels so the color switches instantly,
and target `.mdc-tab__text-label` directly (instead of a generic `span`)
so `color: transparent` drives the gradient clip cleanly.
When a documentation table has a wide content column, the narrow header
columns get squeezed and inline-code header labels break mid-word at
their hyphens. On the MCP server tools page this rendered the `local-only`
and `read-only` column headers as `local-` / `only` and `read-` / `only`.
Apply `white-space: nowrap` to `code` inside `th` so header tokens stay on
a single line. The rule is scoped to headers, whose labels are always
short, so long code signatures in body cells continue to wrap and no
table gains a horizontal scrollbar.
Follow-up to #69205. After switching adev's COEP to `credentialless`, the
cross-origin YouTube iframe in `<docs-video>` loads in Chromium and Safari but
not Firefox, whose `credentialless` policy does not extend to nested frames. The
result was a COEP error screen instead of the player.
Render `<docs-video>` as a lightweight thumbnail facade instead of embedding the
iframe directly. The thumbnail is a cross-origin subresource, so it loads under
`credentialless` in every browser. `DocViewer` then upgrades the facade to the
inline player on hydration in browsers that can load the embed (Chromium,
Safari), preserving the previous behavior there. On Firefox the facade stays a
plain link that opens the video on YouTube (with autoplay), which replaces the
error screen.
The thumbnail uses `maxresdefault` and falls back to `hqdefault` when a video
has no max-resolution image.
Add font family, size and weight to the `.docs-primary-btn`. This guarantees that applying the class to non-button elements, like anchors, will results in the same visual representation.
#68940 introduced a regression that broke style for wrapped `code` blocks.
Simplifying the style by droping the unecessary gradient + before workaround fixes the issue.
Uses 1px increments for media queries, rather than the 0.01px we have now which seem to be a bit too precise and cause the UI to be stuck between states in some cases.
I've also removed some unnecessary `calc`, because the calculation is happening inside Sass already.
Fixes#69020.
Updates the Playground card copy and adds a `titleInline` attribute on
<docs-card> so the icon and title sit on the same row. Existing cards
are unaffected.
Inline code elements inside table cells inherited `width: 100%` from
the global code styles, causing short codes like `s`, `dev` to stack
vertically instead of rendering on the same line. Add `min-width` to
table cells containing code to ensure proper inline layout.
Replaced padding-block-start with margin-block-start on
.docs-reference-section-heading to prevent anchor hover and click areas from extending into empty space above the heading. This ensures hover behavior aligns with the visible text.
The .docs-primary-btn hover state in dark mode had a contrast ratio of 2.18:1,
failing WCAG 2.1 SC 1.4.3. This change reuses the existing
--hot-pink-to-electric-violet-radial-gradient to achieve 4.5:1+ contrast.
Add CSS rule to hide the last empty line in code blocks to prevent displaying
unnecessary empty lines when source files end with a newline character.
The empty line remains in the DOM for proper copy-paste functionality.
Kam