amadan

rastrillo / fiesta Public

← Discussions

Task 6: seg-tabs made of buttons, red then green open

On branch fiesta-1-1

claude operated by paul@keymail.dev session 33749ae8 · claude-code/2.1.312 · DOCS-T1

Commit c1bb9ae, "Seg-tabs take buttons for a choice made in place, pressed by aria-pressed". Hub CI on c1bb9ae: passed, all 48 shards, suite step 103 s; the size step reads fiesta.css 23,239.

Red

TestASegTabButtonLooksLikeASegTabLink against the CSS before the change (red by assertion, every leg; first lines)

segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's background-color is "rgb(239, 239, 239)", #current's is "rgb(255, 255, 255)"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's color is "rgb(0, 0, 0)", #current's is "rgb(24, 24, 27)"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's font-family is "Arial", #current's is "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's font-size is "13.3333px", #current's is "12.5px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's font-weight is "400", #current's is "600"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's line-height is "normal", #current's is "18.75px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's padding is "1px 6px", #current's is "5px 16px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's border-radius is "0px", #current's is "4px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's box-shadow is "none", #current's is "rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset, rgba(16, 24, 40, 0.08) 0px 1px 2px 0px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's min-block-size is "auto", #current's is "32px"; a button in a track must be the tab a link is
segtabs_browser_test.go:102: day light, mouse at 1280: #pressed's cursor is "default", #current's is "pointer"; a button in a track must be the tab a link is
segtabs_browser_test.go:103: day light, mouse at 1280: #unpressed's background-color is "rgb(239, 239, 239)", #link's is "rgba(0, 0, 0, 0)"; a button in a track must be the tab a link is
segtabs_browser_test.go:103: day light, mouse at 1280: #unpressed's color is "rgb(0, 0, 0)", #link's is "rgb(82, 82, 92)"; a button in a track must be the tab a link is
segtabs_browser_test.go:103: day light, mouse at 1280: #unpressed's font-family is "Arial", #link's is "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"; a button in a track must be the tab a link is
segtabs_browser_test.go:148: forced colours: the pressed button's background-color is "rgb(255, 255, 255)", the current link's "rgba(5, 0, 73, 0.8)"
segtabs_browser_test.go:148: forced colours: the pressed button's color is "rgb(0, 0, 0)", the current link's "rgb(255, 255, 255)"
segtabs_browser_test.go:148: print: the pressed button's background-color is "rgb(239, 239, 239)", the current link's "rgb(255, 255, 255)"
segtabs_browser_test.go:148: print: the pressed button's color is "rgb(0, 0, 0)", the current link's "rgb(24, 24, 27)"
... 292 failure lines in all
FAIL	amadan.net/rastrillo/fiesta/check	2.138s
FAIL

TestForcedColoursAndPrintFlattenTheAxisAndCoverEveryComponent, wants added, CSS not yet

depth_media_test.go:50: the @media (forced-colors: active) { block does not carry "[rst-seg-tabs] > button[aria-pressed=\"true\"]"
depth_media_test.go:50: the @media print { block does not carry "[rst-seg-tabs] > button[aria-pressed=\"true\"]"

The CSS alone, no inventory row, widenings or exceptions (go test ./check)

--- FAIL: TestEveryOneOhDeclarationStillApplies (0.01s)
--- FAIL: TestEveryNewRuleRequiresNewMarkup (0.04s)
--- FAIL: TestEveryInteractiveRuleIsInTheTapInventory (0.02s)
sizing_test.go:486: tokens.css styles a control no row of §1.4's inventory names:
	.rst-seg-tabs > button, [rst-seg-tabs] > button
	add a floor rule and a tapInventory row, or say why it is exempt
baseline_test.go:524: css/tokens.css: 1.0.0's :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__
baseline_test.go:524: css/tokens.css: 1.0.0's :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__
baseline_test.go:676: css/tokens.css: :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .rst-row__action, .rst-row-menu > summary, .rst-pagination > a, .rst-seg-tabs a, .rst-seg-tabs > button, .rst-switch, .rst-choice__cards label, .rst-tblock__head, .rst-bulkbar__close, .rst-bulkbar__escalate, .rst-modal-close, .rst-modal-panel > nav a, .rst-back-nav a, .rst-signin__providers > a, .rst-shell__brand, .rst-shell__nav a, .rst-shell__menu > summary, .rst-shell__chrome > summary, .rst-shell__account > summary, .rst-shell__back > a) .icon { block-size: 1rem } is new and :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .rst-row__action, .rst-row-menu > summary, .rst-pagination > a, .rst-seg-tabs a, .rst-seg-tabs > button, .rst-switch, .rst-choice__cards label, .rst-tblock__head, .rst-bulkbar__close, .rst-bulkbar__escalate, .rst-modal-close, .rst-modal-panel > nav a, .rst-back-nav a, .rst-signin__providers > a, .rst-shell__brand, .rst-shell__nav a, .rst-shell__menu > summary, .rst-shell__chrome > summary, .rst-shell__account > summary, .rst-shell__back > a) .icon: `:where(` is outside the grammar
baseline_test.go:676: css/tokens.css: :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .rst-row__action, .rst-row-menu > summary, .rst-pagination > a, .rst-seg-tabs a, .rst-seg-tabs > button, .rst-switch, .rst-choice__cards label, .rst-tblock__head, .rst-bulkbar__close, .rst-bulkbar__escalate, .rst-modal-close, .rst-modal-panel > nav a, .rst-back-nav a, .rst-signin__providers > a, .rst-shell__brand, .rst-shell__nav a, .rst-shell__menu > summary, .rst-shell__chrome > summary, .rst-shell__account > summary, .rst-shell__back > a) .icon { inline-size: 1rem } is new and :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .rst-row__action, .rst-row-menu > summary, .rst-pagination > a, .rst-seg-tabs a, .rst-seg-tabs > button, .rst-switch, .rst-choice__cards label, .rst-tblock__head, .rst-bulkbar__close, .rst-bulkbar__escalate, .rst-modal-close, .rst-modal-panel > nav a, .rst-back-nav a, .rst-signin__providers > a, .rst-shell__brand, .rst-shell__nav a, .rst-shell__menu > summary, .rst-shell__chrome > summary, .rst-shell__account > summary, .rst-shell__back > a) .icon: `:where(` is outside the grammar
baseline_test.go:676: css/tokens.css: :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [rst-cal-nav], [rst-row-action], [rst-row-menu] > summary, [rst-pagination] > a, [rst-seg-tabs] a, [rst-seg-tabs] > button, [rst-switch], [rst-choice-cards] label, [rst-tblock-head], [rst-bulkbar-close], [rst-bulkbar-escalate], [rst-modal-close], [rst-modal-panel] > nav a, [rst-back-nav] a, [rst-signin-providers] > a, [rst-shell-brand], [rst-shell-nav] a, [rst-shell-menu] > summary, [rst-shell-chrome] > summary, [rst-shell-account] > summary, [rst-shell-back] > a) .icon { block-size: 1rem } is new and :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [rst-cal-nav], [rst-row-action], [rst-row-menu] > summary, [rst-pagination] > a, [rst-seg-tabs] a, [rst-seg-tabs] > button, [rst-switch], [rst-choice-cards] label, [rst-tblock-head], [rst-bulkbar-close], [rst-bulkbar-escalate], [rst-modal-close], [rst-modal-panel] > nav a, [rst-back-nav] a, [rst-signin-providers] > a, [rst-shell-brand], [rst-shell-nav] a, [rst-shell-menu] > summary, [rst-shell-chrome] > summary, [rst-shell-account] > summary, [rst-shell-back] > a) .icon: `:where(` is outside the grammar
... 62 new-rule refusals in all

Catalog gates before the drafts (go test ./internal/gallery)

i18n_test.go:154: i18n/ru.json has no translation of examples.seg-tabs.states.buttons-that-switch-in-place (...)
i18n_test.go:154: i18n/ru.json has no translation of labels.seg-tabs.buttons-that-switch-in-place ("Buttons that switch in place")
i18n_test.go:208: i18n/drafts.json: examples.seg-tabs.blurb was drafted from "A segmented control of plain links. ...", and its English is now "A segmented control of links or buttons. ..."
i18n_test.go:605: day/ar/frames/seg-tabs/buttons-that-switch-in-place.html carries the English "List"
(and the same for every locale)

TestANounAndItsVerbAreTranslatedApart with the seg-tabs noun sense taken out

--- FAIL: TestANounAndItsVerbAreTranslatedApart (3.98s)
localise_test.go:563: day/ru's seg-tabs buttons frame does not label its group Вид
localise_test.go:571: EnglishStrings lists View (noun) as "" and View as "View"; want both, each saying View
FAIL

Mutations (scratch worktree /var/tmp/fiesta-t6-mut, each reverted)

| # | Mutation | Caught by | |---|---|---| | M1 | Reset rule deleted | TestASegTabButtonLooksLikeASegTabLink, 108 lines: font-family Arial, line-height normal, cursor default, background rgb(239, 239, 239), ... | | M2 | Buttons taken out of the pressed thumb rule | Same test, 50 lines: pressed background rgba(0, 0, 0, 0) vs rgb(255, 255, 255), colour, font-weight 550 vs 600, box-shadow none | | M3 | Buttons taken out of the hover rule | Same test, 12 lines: "a hovered unpressed button is rgb(82, 82, 92), a hovered link rgb(24, 24, 27)" in every theme, scheme and pointer | | M4 | Buttons taken out of the desktop floor | Same test: min-block-size and min-inline-size "auto" vs "32px" at 1280; TestEveryTapTargetIsAtLeast44Pixels 390x844 touch: button "List" is 60.8x31.0, under the 44x44 floor | | M5 | Buttons taken out of the phone's centring rule | Same test, 36 lines at 390: display block vs flex, align-items and justify-content normal vs center | | M6 | Pressed button taken out of the forced-colours rule | Same test: forced colours background rgb(255, 255, 255) vs the link's Highlight, colour rgb(0, 0, 0) vs rgb(255, 255, 255) | | M7 | Pressed button taken out of the print rule | Same test: print box-shadow "rgba(0, 0, 0, 0) 0px 1px 0px 0px inset, rgba(16, 24, 40, 0.08) 0px 1px 2px 0px" vs "none" | | M8 | Buttons taken out of the icon :where() lists | TestEveryControlSizesTheIconInIt: "Segmented tabs: buttons ([rst-seg-tabs] > button) is a control the floor holds, and the rule that sizes an icon inside a control does not name it"; TestEveryOneOhDeclarationStillApplies: both widenedSelectors entries used by no declaration | | M9 | Hover rule written [rst-seg-tabs] button:hover (descendant, not child) | TestEveryNewRuleRequiresNewMarkup: "[rst-seg-tabs] button:hover { color: var(--rst-text) } is new and ...: no compound positively requires a name 1.0 does not style; no newOnOldMarkup entry is this selector", both spellings, and both :hover exceptions named unused. The browser test stays green here: only the grammar gate can see this one. |

Green, locally (docs-t1)

  • go test . ./example ./check ./internal/gallery ./internal/www ./internal/build -count=1: ok
  • ./hack/gotest.sh browser check -run 'SegTab|EveryTapTargetIsAtLeast44Pixels|TheFloorChangesNothingButSizeOnADesktop|TestEveryExampleStateMeetsTheFloors|TestBothSpellingsComputeTheSameStyles|TestForcedColoursKeepBordersAndSelection|TestPrintDrawsBordersAndNoDepth': ok (74 s; "157 of the manifest's 157 states served")
  • ./hack/gotest.sh browser internal.gallery -run 'TestPreviewFrameHeightsFit': ok (377 s) with 110 / 170 for the new key
  • go test ./internal/gallery -run 'TestANounAndItsVerbAreTranslatedApart|TestAVerbAndItsNounAreTranslatedApart': ok

Size (make size, gzip level 6; allotment 140)

| File | Before | After | Change | |---|---|---|---| | fiesta.css | 23,146 | 23,239 | +93 | | fiesta-plain.css | 22,431 | 22,524 | +93 | | fiesta-signal.css | 22,542 | 22,636 | +94 |

claude operated by paul@keymail.dev session 33749ae8 · claude-code/2.1.312 · DOCS-T1

Review fix: disabled seg-tabs buttons (Astra's Minor)

Commit 5cc67e5, "Show a disabled seg-tabs button as one: faint, default cursor, no hover". The first push, 8c3b9a0 (same tree), failed on the fleet: the no-rastrillo step was killed ("signal: terminated") with everything after it skipped. That step passes locally in 0.12 s, so I re-stamped the commit and force-pushed with lease. Hub CI on 5cc67e5: passed, all 48 shards, suite step 100 s; size reads fiesta.css 23,253.

  • Rule: .rst-seg-tabs > button:disabled, [rst-seg-tabs] > button:disabled { color: var(--rst-text-faint); cursor: default; }, placed after the hover and the thumb, which weigh the same. - Faint text matches a disabled pagination chip and calendar day. - The cursor is default, not not-allowed, because that is what Fiesta already uses for disabled controls (rst-btn, rst-cal-nav, rst-switch). Nothing in tokens.css uses not-allowed. The change is one word if you want it.
  • Promise gates: two exact newOnOldMarkup entries. The grammar admits :disabled beside :hover and :active, since a state only narrows a compound. Two grammar rows hold it: [rst-snippet] > button:disabled passes, and [rst-page] button:disabled is refused for "positively requires".
  • Test: the comparison track gains <button id="disabled" … disabled>. In every theme, scheme and pointer: - its text is the faint colour, with a control that faint differs from a tab's resting colour; - its cursor is default; - a forced hover and press leave it faint.

Red before the rule (all 12 legs, 36 lines)

segtabs_browser_test.go:125: day light, mouse at 1280: a disabled button's text is rgb(82, 82, 92), want the faint text colour rgb(107, 107, 117)
segtabs_browser_test.go:125: day light, mouse at 1280: a disabled button's cursor is "pointer", want "default": a pointer promises a click that does nothing
segtabs_browser_test.go:125: day light, mouse at 1280: a hovered, pressed disabled button turns rgb(24, 24, 27); it must stay rgb(107, 107, 117)

Mutations (scratch worktree /var/tmp/fiesta-t6-fix, each reverted)

| # | Mutation | Caught by | |---|---|---| | D1 | Rule deleted | Seg-tabs test, 36 lines (colour, cursor, hover) | | D2 | Rule moved before the hover rule | Seg-tabs test, 12 lines, the hover assertion only: "a hovered, pressed disabled button turns rgb(24, 24, 27); it must stay rgb(107, 107, 117)" | | D3 | disabled taken out of the grammar | TestOnlyNewMarkupPassesTheGrammar: "requiresNewMarkup(\"[rst-snippet] > button:disabled\") = false (... :disabled is outside the grammar), want true", and the refused row names the wrong reason; TestEveryNewRuleRequiresNewMarkup: "newOnOldMarkup[\"[rst-seg-tabs] > button:disabled\"] is outside the grammar" | | D4 | Rule written with a descendant combinator | TestEveryNewRuleRequiresNewMarkup: "[rst-seg-tabs] button:disabled { color: var(--rst-text-faint) } is new and ...: no compound positively requires a name 1.0 does not style; no newOnOldMarkup entry is this selector" (both spellings, both declarations) |

Green locally

  • go test ./check -count=1: ok
  • ./hack/gotest.sh browser check -run 'TestASegTabButtonLooksLikeASegTabLink|EveryTapTargetIsAtLeast44Pixels|TestBothSpellingsComputeTheSameStyles': ok

Size (gzip level 6)

| File | Before fix | After | Change | Task 6 total | |---|---|---|---|---| | fiesta.css | 23,239 | 23,253 | +14 | +107 of 140 | | fiesta-plain.css | 22,524 | 22,538 | +14 | +107 | | fiesta-signal.css | 22,636 | 22,650 | +14 | +108 |