Repository navigation
Adds breadcrumb and fixes focus ring issues - #305
Merged
Merged
Conversation
… examples The examples set only the texts that existed when they were written, so on the English docs page the rest fell back to English: the short month names and Done in the date picker, Done, Now and the AM/PM texts in the time picker, and the day names screen readers hear. Both now set every text in Finnish, so they are complete translations to copy. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…ings `outline-none focus-visible:outline-2` computes a 2px ring of style none in Tailwind v4: outline-none also sets --tw-outline-style, which the width utility reads. The time picker's columns, end switch, Now and Done, the date picker's arrows, view buttons, lists, Today and Done, the fullscreen panels' close button and c-link matched :focus-visible and drew nothing. Each now restates focus-visible:outline-solid, like c-button. The selected end tab is filled with primary, so its ring is on-primary inside the fill. lint:focus fails on the pattern, and specs read the painted ring of every stop reached from the keyboard. The two date picker baselines taken after keyboard steps now show the ring; the time picker's open-panel baseline was stale (the pills' squircle corners) and is rewritten. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
A page-level breadcrumb: c-breadcrumb holds c-breadcrumb-item crumbs, each a link to a level of the hierarchy, the last always the current page (plain text, aria-current="page"). Crumbs look like small text buttons but render their own <a>; a single-page app routes by intercepting a crumb's native click. An icon goes in a crumb's icon slot, and an icon-only crumb is named by its host aria-label. The row is always one line (ADR-0067). When its crumbs do not fit, the middle ones fold behind a "…" button, the one nearest the first crumb first; the first and current crumbs never fold, and past that their labels truncate, current first, with the full label as a title. Folded crumbs move into the fold panel through slot="folded", so the consumer's own element, click listener included, is the panel row. Widths are measured in the row and cached; the fold re-runs on resize, content changes and font loads, in the list's own units under a CSS zoom. The fold panel is a disclosure of links in the top layer with the menu panel's look and a peek: Tab walks the folded crumbs, the arrow keys move between them and wrap, Home/End reach the ends, and the arrows on the fold button open it onto the first or last. Escape and a press outside close it and return focus to the button. Focus is read in the breadcrumb's own tree, so the panel stays open when an app renders the breadcrumb in a shadow root. Chromium's renderer crashes when one frame both empties an open popover and moves its anchor out of the row, so the panel closes a frame before an unfold. Chevrons and the fold button are mdi icons, and each label is nudged so its capitals centre on them whatever font the page falls back to. The glossary gains the breadcrumb terms; tree-select's in-panel one is now the panel breadcrumb. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
villeerikssoncsc
approved these changes
Oct 5, 2026
c-breadcrumb's `texts` takes an app default, so the generated DEFAULTABLE_PROPS has its tag and the pinned allow-list spec failed. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces the
c-breadcrumbandc-breadcrumb-itemcomponents for hierarchical site navigation, addresses keyboard focus ring visibility, and enhances documentation examples for date and time picker texts.c-breadcrumbcomponent and itsc-breadcrumb-itemchildren to display the current page's position in a site's hierarchy (ADR-0067).outline-nonepreventedfocus-visiblerings from painting onc-time-picker's columns and buttons,c-date-picker's arrows and buttons, the close button of fullscreen panels, andc-link.outlineproperties.c-date-pickerandc-time-pickerto include comprehensive Finnish translations for all available text properties, improving internationalization guidance.