From d983fa85797dc08eaf3ee9dcd71ef30ef2e9d61f Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 4 Nov 2025 17:34:47 +0000 Subject: [PATCH 01/25] Update pagination component in classic and svelte --- .../lib/components/pagination/pagination.less | 50 ++++++----- .../product/components/pagination.html | 85 +------------------ .../Pagination/PaginationController.svelte | 6 +- .../Pagination/PaginationItem.svelte | 13 ++- 4 files changed, 52 insertions(+), 102 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 33d69039c7..6d13ee90eb 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -9,28 +9,33 @@ & &--item { --_pa-item-bg: transparent; - --_pa-item-bc: var(--bc-darker); - --_pa-item-fc: var(--fc-medium); - --_pa-item-bg-focus: var(--black-400); - --_pa-item-fc-focus: var(--white); - --_pa-item-bg-hover: var(--black-225); + --_pa-item-fc: #6B6D73; + --_pa-item-bg-hover: #F0EFED; --_pa-item-bc-hover: var(--bc-darker); --_pa-item-fc-hover: var(--fc-dark); + --_pa-item-bb: var(--su-static0); // CONTEXTUAL STYLES .highcontrast-mode({ text-decoration: none; }); // MODIFIERS &.is-selected { - --_pa-item-bg: var(--theme-primary); - --_pa-item-bc: transparent; - --_pa-item-fc: var(--white); + --_pa-item-bc: #201C1D; + --_pa-item-fc: #201C1D; // Update to grey-600 when colors are updated --_pa-item-bg-focus: var(--theme-primary-400); + --_pa-item-bb: var(--su-static2); } &.s-pagination--item__clear { --_pa-item-bg: transparent; --_pa-item-bc: transparent; - --_pa-item-fc: inherit; + --_pa-item-fc: #6B6D73; + } + &.is-next { + background-color: #F0EFED; + border-radius: var(--br-circle); + --_pa-item-fc: #201C1D; + width: 32px; + height: 32px; } // override hover styles to match base styles &.is-selected, @@ -46,31 +51,38 @@ border-color: var(--_pa-item-bc-hover); color: var(--_pa-item-fc-hover); } - - &:focus-visible { - .focus-styles(true, true); + &:hover:not(.is-selected):not(.is-next) { + border-radius: var(--br-md); } - &:focus-visible, + &:focus-visible:not(.is-next), &.focus-inset-bordered { - background-color: var(--_pa-item-bg-focus); - color: var(--_pa-item-fc-focus); + background-color: #F0EFED !important; + border: 2px solid #FFFFFF !important; + border-radius: var(--br-md); + box-shadow: 0 0 0 2px #0C0D0E; + outline: none !important; } background-color: var(--_pa-item-bg); - border: 1px solid var(--_pa-item-bc); + border-bottom: var(--_pa-item-bb) solid var(--_pa-item-bc); color: var(--_pa-item-fc); - border-radius: var(--br-md); - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; font-size: var(--fs-body1); + height: 26px; + min-width: 16px; line-height: var(--lh-xl); - padding: 0 var(--su8); + padding: 0 4px; } &, ul { display: flex; + align-items: center; flex-wrap: wrap; gap: var(--su4); } diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 3a2cf9b932..a6cecfe325 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -74,8 +74,8 @@
  • - - Next + + {% icon "ArrowRight" %} page
    • @@ -125,8 +125,8 @@
  • - - Next + + {% icon "ArrowRight" %} page
    • @@ -135,80 +135,3 @@ - -
    - {% header "h2", "Legacy example" %} - - {% tip, "warning", "mb24" %} - Note:The below markup has been deprecated due to insufficient accessibility. Please use the new markup above. - {% endtip %} - -
    -{% highlight html %} -
    - - page - 1 - - - page - 2 - - - page - 3 - - - page - 4 - - - page - 5 - - … - - page - 122386 - - - Next - page - -
    -{% endhighlight %} -
    - -
    -
    -
    diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte index 986cd78fce..f4d76fd6ab 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte @@ -3,6 +3,8 @@ import PaginationItem from "./PaginationItem.svelte"; import PaginationItemClear from "./PaginationItemClear.svelte"; import { generatePagination } from "./pagination-generator"; + import Icon from "../Icon/Icon.svelte"; + import { IconArrowRight } from "@stackoverflow/stacks-icons/icons"; interface Props { /** @@ -95,8 +97,10 @@ - {i18nNextText} {i18nPageText} + + {i18nPageText} {/if} diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte index 8f33bb095d..eb72022a8b 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte @@ -10,6 +10,10 @@ * Whether this pagination item is currently selected */ selected?: boolean; + /** + * Whether this pagination item is the next page + */ + isNext?: boolean; /** * Callback fired when the pagination item is clicked */ @@ -20,13 +24,20 @@ children?: Snippet; } - let { url, selected = false, onclick, children }: Props = $props(); + let { + url, + selected = false, + isNext = false, + onclick, + children, + }: Props = $props();
  • Date: Tue, 4 Nov 2025 17:35:46 +0000 Subject: [PATCH 02/25] Update site-navigation.json --- packages/stacks-docs/_data/site-navigation.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index f22d6fba92..53b116f4fd 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -282,7 +282,8 @@ }, { "title": "Pagination", - "url": "/product/components/pagination/" + "url": "/product/components/pagination/", + "new": true }, { "title": "Popovers", From 2c1d20678d37e20f60ba6064a60475f4858a2fcd Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 4 Nov 2025 17:36:42 +0000 Subject: [PATCH 03/25] update html file --- packages/stacks-docs/product/components/pagination.html | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index a6cecfe325..46c132ae47 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -2,6 +2,7 @@ layout: page title: Pagination svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs +figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1189-2035&t=JFrmhokx3ZOeRP9b-0 description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings. tags: components --- From 50d035cd446232456d8317c92ad068600474fd70 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 4 Nov 2025 17:43:23 +0000 Subject: [PATCH 04/25] Update migration guide --- MIGRATION_GUIDE.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 1814d44735..ca8ae9a019 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -18,6 +18,9 @@ ### Components +#### Pagination +- The next button now uses an ArrowRight icon instead of text. To apply the new styling, add the `is-next` class to pagination items that represent the "Next" button. + #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
    `) should be deleted from the codebases as part of the migration. From 99abdcf0e83a698351d40140dce5c374dd6177ec Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 4 Nov 2025 17:44:38 +0000 Subject: [PATCH 05/25] add changeset --- .changeset/sharp-heads-call.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/sharp-heads-call.md diff --git a/.changeset/sharp-heads-call.md b/.changeset/sharp-heads-call.md new file mode 100644 index 0000000000..370912f096 --- /dev/null +++ b/.changeset/sharp-heads-call.md @@ -0,0 +1,9 @@ +--- +"@stackoverflow/stacks": minor +"@stackoverflow/stacks-svelte": minor +--- + +Update pagination component to match new SHINE design system + +BREAKING CHANGES +The next button now uses an ArrowRight icon instead of text. To apply the new styling, add the `is-next` class to pagination items that represent the "Next" button. \ No newline at end of file From 47cf2a43455c1973d3c11ecbd1bf72173ae924a6 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Thu, 6 Nov 2025 10:52:48 +0000 Subject: [PATCH 06/25] Update to fix accessibility issues --- .../lib/components/pagination/pagination.less | 83 ++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 6d13ee90eb..28b0a32f68 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -16,19 +16,67 @@ --_pa-item-bb: var(--su-static0); // CONTEXTUAL STYLES - .highcontrast-mode({ text-decoration: none; }); + .dark-mode({ + --_pa-item-fc: var(--black-400); + --_pa-item-bg-hover: var(--black-250); + --_pa-item-fc-hover: var(--black-500); + }); + + .highcontrast-mode({ + text-decoration: none; + --_pa-item-fc: var(--black-600); + --_pa-item-bg-hover: var(--black-200); + --_pa-item-fc-hover: var(--black); + }); + + .highcontrast-dark-mode({ + --_pa-item-fc: var(--black-400); + --_pa-item-bg-hover: var(--black-300); + --_pa-item-fc-hover: var(--black-500); + }); // MODIFIERS &.is-selected { --_pa-item-bc: #201C1D; --_pa-item-fc: #201C1D; // Update to grey-600 when colors are updated + --_pa-item-bg: transparent; --_pa-item-bg-focus: var(--theme-primary-400); --_pa-item-bb: var(--su-static2); + + .dark-mode({ + --_pa-item-fc: var(--black-600); + --_pa-item-bc: var(--black-600); + --_pa-item-bg: var(--black-300); + }); + + .highcontrast-mode({ + --_pa-item-fc: var(--black); + --_pa-item-bc: var(--black); + --_pa-item-bg: var(--black-400); + }); + + .highcontrast-dark-mode({ + --_pa-item-fc: var(--black-500); + --_pa-item-bc: var(--black-500); + --_pa-item-bg: var(--black-300); + }); } &.s-pagination--item__clear { --_pa-item-bg: transparent; --_pa-item-bc: transparent; --_pa-item-fc: #6B6D73; + + .dark-mode({ + --_pa-item-fc: var(--black-400); + }); + + .highcontrast-mode({ + --_pa-item-fc: var(--black-600); + }); + + .highcontrast-dark-mode({ + --_pa-item-fc: var(--black-400); + }); } &.is-next { background-color: #F0EFED; @@ -36,6 +84,21 @@ --_pa-item-fc: #201C1D; width: 32px; height: 32px; + + .dark-mode({ + background-color: var(--black-250); + --_pa-item-fc: var(--black-500); + }); + + .highcontrast-mode({ + background-color: var(--black-200); + --_pa-item-fc: var(--black); + }); + + .highcontrast-dark-mode({ + background-color: var(--black-300); + --_pa-item-fc: var(--black-500); + }); } // override hover styles to match base styles &.is-selected, @@ -62,6 +125,24 @@ border-radius: var(--br-md); box-shadow: 0 0 0 2px #0C0D0E; outline: none !important; + + .dark-mode({ + background-color: var(--black-250) !important; + border: 2px solid var(--black-500) !important; + box-shadow: 0 0 0 2px var(--black-600); + }); + + .highcontrast-mode({ + background-color: var(--black-200) !important; + border: 2px solid var(--black) !important; + box-shadow: 0 0 0 2px var(--black-600); + }); + + .highcontrast-dark-mode({ + background-color: var(--black-300) !important; + border: 2px solid var(--black-500) !important; + box-shadow: 0 0 0 2px var(--black-600); + }); } background-color: var(--_pa-item-bg); From 7734583493b63ea600a2752f3d5508947c264136 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Thu, 6 Nov 2025 12:41:08 +0000 Subject: [PATCH 07/25] Update test --- .../Pagination/PaginationController.test.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts index cd07a8b087..e54b011c94 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts @@ -142,6 +142,36 @@ describe("PaginationController", () => { expect(screen.queryByText("Next")).not.to.exist; }); + it("applies is-next class to the Next button", () => { + render(Pagination, { + props: { + page: 2, + totalPages: 5, + urlGenerator, + }, + }); + + // Find the Next button by its role and accessible name + const nextLink = screen.getByRole("link", { name: /Next/i }); + expect(nextLink).to.have.class("is-next"); + + // Verify the correct icon is rendered with the correct title + const titleElement = screen.getByTitle("Next"); + expect(titleElement).to.exist; + const icon = titleElement.closest("svg"); + expect(icon).to.exist; + expect(icon?.tagName).to.equal("svg"); + expect(nextLink).to.contain(icon); + + // Verify Prev button does NOT have is-next class + const prevLink = screen.getByRole("link", { name: /Prev/i }); + expect(prevLink).not.to.have.class("is-next"); + + // Verify regular page number items do NOT have is-next class + const page2Link = screen.getByRole("link", { name: /2/ }); + expect(page2Link).not.to.have.class("is-next"); + }); + it("highlights the correct selected page", () => { render(Pagination, { props: { @@ -179,5 +209,12 @@ describe("PaginationController", () => { "aria-label", "Paginación" ); + + // Verify the icon uses the localized title + const titleElement = screen.getByTitle("Siguiente"); + expect(titleElement).to.exist; + const icon = titleElement.closest("svg"); + expect(icon).to.exist; + expect(icon?.tagName).to.equal("svg"); }); }); From 57fc4af05f6151e767fb75930cf6c498dee800ac Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Thu, 6 Nov 2025 16:13:57 +0000 Subject: [PATCH 08/25] Add description for pagination component in docs --- .../Chromium/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Chromium/baseline/s-pagination-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Chromium/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Chromium/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../Chromium/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Chromium/baseline/s-pagination-light.ico | 4 ++-- .../Firefox/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Firefox/baseline/s-pagination-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Firefox/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Firefox/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../Firefox/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Firefox/baseline/s-pagination-light.ico | 4 ++-- .../Webkit/baseline/s-page-title-dark-complete.ico | 4 ++-- .../screenshots/Webkit/baseline/s-page-title-dark.ico | 4 ++-- .../baseline/s-page-title-highcontrast-dark-complete.ico | 4 ++-- .../Webkit/baseline/s-page-title-highcontrast-dark.ico | 4 ++-- .../baseline/s-page-title-highcontrast-light-complete.ico | 4 ++-- .../Webkit/baseline/s-page-title-highcontrast-light.ico | 4 ++-- .../Webkit/baseline/s-page-title-light-complete.ico | 4 ++-- .../screenshots/Webkit/baseline/s-page-title-light.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Webkit/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Webkit/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../Webkit/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-light.ico | 4 ++-- packages/stacks-docs/_data/pagination-component.json | 5 +++++ 33 files changed, 69 insertions(+), 64 deletions(-) diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico index 3d1791e1dd..b9f1e68ac5 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:94cb511e9e20d94c9d966535c47c67cf2531c690fa484607518a635b4f022c49 -size 3503 +oid sha256:a92341af44b88940e193a45299be58878c8ae9acea591e07bf59dcb96a61a68b +size 2277 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico index 50deefa7fe..b9f1e68ac5 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:260fc9fb5674c4f0a2f502e20a4b25bbc9efab4c71b227ac1277fee9cf2f0394 -size 3462 +oid sha256:a92341af44b88940e193a45299be58878c8ae9acea591e07bf59dcb96a61a68b +size 2277 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico index db973d637b..39ff880546 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f1d59dbd60ac6f2aada1cd16abc43267e272d2ac9d3a5cfedf5ee2e697b094c0 -size 3433 +oid sha256:2ce6843ec1f6e0a997b359a4f9834086e4cf46be0761dffade01ce1de216781d +size 2229 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico index dfd91c3971..39ff880546 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f99bcf343b4eff72103a8264461ce64e57bb2c880eb83f4b706f4a83238a03d7 -size 3390 +oid sha256:2ce6843ec1f6e0a997b359a4f9834086e4cf46be0761dffade01ce1de216781d +size 2229 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico index bf4b04f309..a502eac3a0 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:615c6b30885d80cf6d41a765f56561eff6d0c8724cb412072373ae0dd5012095 -size 3398 +oid sha256:d913febe32f5c29de0516ea6fd99be2d667b4ac9d76a6d302e62cbea67555267 +size 2223 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico index bf4b04f309..a502eac3a0 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:615c6b30885d80cf6d41a765f56561eff6d0c8724cb412072373ae0dd5012095 -size 3398 +oid sha256:d913febe32f5c29de0516ea6fd99be2d667b4ac9d76a6d302e62cbea67555267 +size 2223 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico index 093d7f86bf..b9b3de9f11 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bd6e04cae7dacbd55de42d90894669410e70d7789b88ba2aaadb779f15e0366c -size 3381 +oid sha256:e74bb78f751b73f8d1029e59ebcf6095c9ab12f8043b9f0d98d007e84881121d +size 2193 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico index 093d7f86bf..b9b3de9f11 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bd6e04cae7dacbd55de42d90894669410e70d7789b88ba2aaadb779f15e0366c -size 3381 +oid sha256:e74bb78f751b73f8d1029e59ebcf6095c9ab12f8043b9f0d98d007e84881121d +size 2193 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico index 5df3456048..79d2fedeec 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c631523ad9c7e0533401f11d1723366540167b5f91b2ed52e59dce5ef1229835 -size 4569 +oid sha256:1dd01c7078d5e02333f3913c0f077d357ac7646d25961be0792f7a228a421275 +size 2908 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico index 5df3456048..79d2fedeec 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c631523ad9c7e0533401f11d1723366540167b5f91b2ed52e59dce5ef1229835 -size 4569 +oid sha256:1dd01c7078d5e02333f3913c0f077d357ac7646d25961be0792f7a228a421275 +size 2908 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico index 96c18d2654..d45fb00928 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6b32d55d495971aaf5e1c06828bb7a9ef643c6527f13ba2b06c516989757f432 -size 4585 +oid sha256:63a0ced1272f0b434b14d42c6080596a3e30e5dd95926e1418f29395cf9ba2fe +size 2854 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico index 96c18d2654..d45fb00928 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6b32d55d495971aaf5e1c06828bb7a9ef643c6527f13ba2b06c516989757f432 -size 4585 +oid sha256:63a0ced1272f0b434b14d42c6080596a3e30e5dd95926e1418f29395cf9ba2fe +size 2854 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico index 45fa8ff9e6..fe8b159b79 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7ba9423b5a2b8523d20fbc15ceb0f1907746ba4107860236cb05e004868050c4 -size 4563 +oid sha256:172e00a0ef1246535e65bf98dc1535c61c9920972648fb11efdf38f9259df6a1 +size 2871 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico index 45fa8ff9e6..fe8b159b79 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7ba9423b5a2b8523d20fbc15ceb0f1907746ba4107860236cb05e004868050c4 -size 4563 +oid sha256:172e00a0ef1246535e65bf98dc1535c61c9920972648fb11efdf38f9259df6a1 +size 2871 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico index 0fd22beae0..5d4eaf37f2 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:12f0d4ac895977c3d7d1d22bb04f6be562085ecd60aec3c2a6330bc031a7554b -size 4525 +oid sha256:5c435e5a9b6dfb492c930f405c1b0a9f66783cd40f3d97d406392c0b20f091e5 +size 2727 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico index 0fd22beae0..5d4eaf37f2 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:12f0d4ac895977c3d7d1d22bb04f6be562085ecd60aec3c2a6330bc031a7554b -size 4525 +oid sha256:5c435e5a9b6dfb492c930f405c1b0a9f66783cd40f3d97d406392c0b20f091e5 +size 2727 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark-complete.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark-complete.ico index 536b2344a7..4de2fab065 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark-complete.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark-complete.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7eae3ccab8dc8fc468ee682cd0894059297d331fc0b0bac110854e327e449442 -size 11939 +oid sha256:1ed15ceac83090378d76130086559ad28a29b728079ceccc566094d386dabf02 +size 13190 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark.ico index fbc3796a4e..82667ac9c5 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:ce767641d9f5e78808bfda3585aaee650fc5270f5f8404f34ce1073aef575adb -size 3412 +oid sha256:cef19b4fd1fad37dcfa5696e30329a0204b5b7ed20cedb29f9798cb1cecb5b87 +size 3251 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark-complete.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark-complete.ico index 41dd86a594..8c05422155 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark-complete.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark-complete.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b4927317d5229085059ca91dc9f796cf76acf9c8d4832ca111089dda341e924b -size 11842 +oid sha256:f768f8aeb04c179b30a00562e12c4dfb68390c32cec108175ae63c2eeef91169 +size 13110 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark.ico index 2db641433f..fadc94ddc7 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:42289bff51e430f58be23a344ca1a8d8f575f201334e988640f9ae94075cfa74 -size 3200 +oid sha256:bceaaf2e2223a3fc01d001b37e856522f740f1bab9d0bd092904c630f6f63aac +size 3147 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light-complete.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light-complete.ico index f30a2a51fd..c7c48d1ac8 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light-complete.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light-complete.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:4fba3a7612332f1efe1b2906e315b22da433450535ddc342376a96619702df29 -size 11902 +oid sha256:c6b4a430c928be35ca94c49b6726848ab8d105162f12443ef14bad63150ce7f2 +size 13196 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light.ico index e7d9ea980c..635817701f 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:33d6f6263817e576eed97ca57178a449efd0055d2983e6965f35483b27483477 -size 3371 +oid sha256:d57666e1a840a85cb21a78ba0c1f4ac2228a68006ff4bf67e8641456bae43eac +size 3241 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light-complete.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light-complete.ico index 795d7d8c8b..167488da5e 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light-complete.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light-complete.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bfd365536b9c58d28e712445665f40781d28ab2cc1f6437d354162fb39fb2f2b -size 11810 +oid sha256:ec938d68a839f96e9ff4e920ce29dae3cef4b406fdf470b2b6eeeb6c3582eac3 +size 13089 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light.ico index 71b6f6194f..0c7a271634 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-page-title-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b8616f10a1cd15b84992b6f1ebdceadcf26a689ae22b6192dd79cd50b70299e8 -size 3370 +oid sha256:26fcaeaefda7ec3738a681369089d590017ca0d909ec0d89702b8647df2a8b31 +size 3242 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico index 0c7f6b48fd..fda899bdcf 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:4eb912f67123b7c09773b1c90d4e199467f280bd76d81c08dc507c025cf03f4d -size 5361 +oid sha256:19ede1ca2e6418aff4eb363c3265e4469b80514aa8f929957100c0ce42c84f73 +size 2670 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico index 0c7f6b48fd..fda899bdcf 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:4eb912f67123b7c09773b1c90d4e199467f280bd76d81c08dc507c025cf03f4d -size 5361 +oid sha256:19ede1ca2e6418aff4eb363c3265e4469b80514aa8f929957100c0ce42c84f73 +size 2670 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico index aa0b845401..3ac0916687 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d245e8dee83c4eb00bb2c39a57a2ada1a18b1999f6d861ceaccee6ca7c26d282 -size 5409 +oid sha256:ebb628c7d13b26af75a786b9bad608dbe268caa3ce1d47beb9ff6cc427922c4e +size 2636 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico index aa0b845401..3ac0916687 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d245e8dee83c4eb00bb2c39a57a2ada1a18b1999f6d861ceaccee6ca7c26d282 -size 5409 +oid sha256:ebb628c7d13b26af75a786b9bad608dbe268caa3ce1d47beb9ff6cc427922c4e +size 2636 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico index 8b4d7296de..3e9f5e96eb 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:baf9d0ccc2ba003baccbd579e490dc8325addd11f5d4f84ef87dd50a052cbc43 -size 5351 +oid sha256:ce9cc646a011580c3021bf46a55b00b80868d050faa85efd8dc371dfb2644e8f +size 2621 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico index 8b4d7296de..3e9f5e96eb 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:baf9d0ccc2ba003baccbd579e490dc8325addd11f5d4f84ef87dd50a052cbc43 -size 5351 +oid sha256:ce9cc646a011580c3021bf46a55b00b80868d050faa85efd8dc371dfb2644e8f +size 2621 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico index a51ca967df..bcc218fc3b 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:511fe32b4f643b6e05cc7c19a373b4da4002a7836521153e628519512dd34f8e -size 5053 +oid sha256:c9d2d174444197f61270d36551d25fb12c16b428105aacb1951f4ddfcd151432 +size 2627 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico index a51ca967df..bcc218fc3b 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:511fe32b4f643b6e05cc7c19a373b4da4002a7836521153e628519512dd34f8e -size 5053 +oid sha256:c9d2d174444197f61270d36551d25fb12c16b428105aacb1951f4ddfcd151432 +size 2627 diff --git a/packages/stacks-docs/_data/pagination-component.json b/packages/stacks-docs/_data/pagination-component.json index 2bff3a5165..da51e48a52 100644 --- a/packages/stacks-docs/_data/pagination-component.json +++ b/packages/stacks-docs/_data/pagination-component.json @@ -15,6 +15,11 @@ "applies": ".s-pagination--item", "description": "Active state that’s applied to the current page." }, + { + "class": ".is-next", + "applies": ".s-pagination--item", + "description": "Styles the Next button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." + }, { "class": ".s-pagination--item__clear", "applies": ".s-pagination--item", From 9f7180d26f98f24c4bb0050fe70959fb91ab4c2b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 10 Nov 2025 12:22:19 -0500 Subject: [PATCH 09/25] Simplify pagination styles --- .../lib/components/pagination/pagination.less | 159 +++--------------- .../product/components/pagination.html | 4 +- 2 files changed, 30 insertions(+), 133 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 28b0a32f68..4ee11c4ecb 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -9,155 +9,52 @@ & &--item { --_pa-item-bg: transparent; - --_pa-item-fc: #6B6D73; - --_pa-item-bg-hover: #F0EFED; - --_pa-item-bc-hover: var(--bc-darker); - --_pa-item-fc-hover: var(--fc-dark); - --_pa-item-bb: var(--su-static0); - - // CONTEXTUAL STYLES - .dark-mode({ - --_pa-item-fc: var(--black-400); - --_pa-item-bg-hover: var(--black-250); - --_pa-item-fc-hover: var(--black-500); - }); - - .highcontrast-mode({ - text-decoration: none; - --_pa-item-fc: var(--black-600); - --_pa-item-bg-hover: var(--black-200); - --_pa-item-fc-hover: var(--black); - }); - - .highcontrast-dark-mode({ - --_pa-item-fc: var(--black-400); - --_pa-item-bg-hover: var(--black-300); - --_pa-item-fc-hover: var(--black-500); - }); + --_pa-item-br: unset; + --_pa-item-bs: none; + --_pa-item-fc: var(--black-400); + --_pa-item-p: var(--su-static4); // MODIFIERS &.is-selected { - --_pa-item-bc: #201C1D; - --_pa-item-fc: #201C1D; // Update to grey-600 when colors are updated - --_pa-item-bg: transparent; - --_pa-item-bg-focus: var(--theme-primary-400); - --_pa-item-bb: var(--su-static2); - - .dark-mode({ - --_pa-item-fc: var(--black-600); - --_pa-item-bc: var(--black-600); - --_pa-item-bg: var(--black-300); - }); - - .highcontrast-mode({ - --_pa-item-fc: var(--black); - --_pa-item-bc: var(--black); - --_pa-item-bg: var(--black-400); - }); - - .highcontrast-dark-mode({ - --_pa-item-fc: var(--black-500); - --_pa-item-bc: var(--black-500); - --_pa-item-bg: var(--black-300); - }); - } - &.s-pagination--item__clear { - --_pa-item-bg: transparent; - --_pa-item-bc: transparent; - --_pa-item-fc: #6B6D73; - - .dark-mode({ - --_pa-item-fc: var(--black-400); - }); - - .highcontrast-mode({ - --_pa-item-fc: var(--black-600); - }); - - .highcontrast-dark-mode({ - --_pa-item-fc: var(--black-400); - }); + --_pa-item-bs: 0 var(--su-static2) 0 0 var(--black-600); + --_pa-item-fc: var(--black-600); } - &.is-next { - background-color: #F0EFED; - border-radius: var(--br-circle); - --_pa-item-fc: #201C1D; - width: 32px; - height: 32px; - - .dark-mode({ - background-color: var(--black-250); - --_pa-item-fc: var(--black-500); - }); - - .highcontrast-mode({ - background-color: var(--black-200); - --_pa-item-fc: var(--black); - }); + &.s-pagination--item__nav { + --_pa-item-bg: var(--black-150); + --_pa-item-br: var(--br-circle); + --_pa-item-fc: var(--black-600); + --_pa-item-p: var(--su-static6); - .highcontrast-dark-mode({ - background-color: var(--black-300); - --_pa-item-fc: var(--black-500); - }); - } - // override hover styles to match base styles - &.is-selected, - &.s-pagination--item__clear { - --_pa-item-bc-hover: var(--_pa-item-bc); - --_pa-item-bg-hover: var(--_pa-item-bg); - --_pa-item-fc-hover: var(--_pa-item-fc); + aspect-ratio: 1 / 1; } // INTERACTION - &:hover { - background-color: var(--_pa-item-bg-hover); - border-color: var(--_pa-item-bc-hover); - color: var(--_pa-item-fc-hover); + &[href]:hover:not(&__nav) { + --_pa-item-bg: var(--black-150); + --_pa-item-bs: none; + --_pa-item-br: var(--br-pill); + --_pa-item-fc: var(--black-600); } - &:hover:not(.is-selected):not(.is-next) { - border-radius: var(--br-md); + &:focus-visible { + --_pa-item-bg: var(--black-150); + --_pa-item-fc: var(--black-600); + .focus-styles(false, true); } - - &:focus-visible:not(.is-next), + &:focus-visible:not(&__nav), &.focus-inset-bordered { - background-color: #F0EFED !important; - border: 2px solid #FFFFFF !important; - border-radius: var(--br-md); - box-shadow: 0 0 0 2px #0C0D0E; - outline: none !important; - - .dark-mode({ - background-color: var(--black-250) !important; - border: 2px solid var(--black-500) !important; - box-shadow: 0 0 0 2px var(--black-600); - }); - - .highcontrast-mode({ - background-color: var(--black-200) !important; - border: 2px solid var(--black) !important; - box-shadow: 0 0 0 2px var(--black-600); - }); - - .highcontrast-dark-mode({ - background-color: var(--black-300) !important; - border: 2px solid var(--black-500) !important; - box-shadow: 0 0 0 2px var(--black-600); - }); + --_pa-item-br: var(--br-md); } background-color: var(--_pa-item-bg); - border-bottom: var(--_pa-item-bb) solid var(--_pa-item-bc); + border-radius: var(--_pa-item-br); + box-shadow: var(--_pa-item-bs); color: var(--_pa-item-fc); + padding: var(--_pa-item-p); display: inline-flex; align-items: center; justify-content: center; - box-sizing: border-box; - font-size: var(--fs-body1); - height: 26px; - min-width: 16px; - line-height: var(--lh-xl); - padding: 0 4px; + margin: var(--su-static1); } &, @@ -165,6 +62,6 @@ display: flex; align-items: center; flex-wrap: wrap; - gap: var(--su4); + gap: var(--su2); } } diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 46c132ae47..fe7ec641a5 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -75,7 +75,7 @@
  • - + {% icon "ArrowRight" %} page @@ -126,7 +126,7 @@
  • - + {% icon "ArrowRight" %} page From bc9b4c1cdef3ecadd5dc845876e75e3112f4b6c3 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 11 Nov 2025 15:18:36 +0000 Subject: [PATCH 10/25] Update assertions.ts --- .../stacks-classic/lib/test/assertions.ts | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/stacks-classic/lib/test/assertions.ts b/packages/stacks-classic/lib/test/assertions.ts index d717b9474a..057e8d6770 100644 --- a/packages/stacks-classic/lib/test/assertions.ts +++ b/packages/stacks-classic/lib/test/assertions.ts @@ -22,9 +22,37 @@ const WCAGNonTextContrast: AdditionalAssertion = { selectedNodeStyles.getPropertyValue("background-color") ); + // If background is transparent, check box-shadow or border for contrast + let contrastColor = bgSelectedNodeColor; + if (bgSelectedNodeColor.alpha === 0 || bgSelectedNodeColor.alpha < 0.01) { + const boxShadow = selectedNodeStyles.getPropertyValue("box-shadow"); + const borderColor = selectedNodeStyles.getPropertyValue("border-color"); + + // Extract color from box-shadow (color is always the last value in each shadow) + if (boxShadow && boxShadow !== "none") { + // Get the last shadow if multiple shadows exist (comma-separated) + const lastShadow = boxShadow.split(",").pop()?.trim() || boxShadow.trim(); + // Match color patterns at the end: rgb/rgba/hsl/hsla functions, hex codes, or color names + const colorMatch = lastShadow.match(/(rgba?|hsla?)\([^)]+\)|#[0-9a-f]{3,8}|\b\w+(?:-\w+)*\b(?=\s*$)/i); + if (colorMatch) { + try { + contrastColor = new Color(colorMatch[0]); + } catch { + // If parsing fails, fall back to background color + } + } + } else if (borderColor && borderColor !== "transparent" && borderColor !== "currentColor") { + try { + contrastColor = new Color(borderColor); + } catch { + // If parsing fails, fall back to background color + } + } + } + // we are specifing WCAG21 because of colorjs.io API // WCAG21 and WCAG22 algoirthms are the same - const WCAGcontrast = bgSelectedNodeColor.contrast( + const WCAGcontrast = contrastColor.contrast( bgBodyColor, "WCAG21" ); From c328e9f845930dc485d5ed8c96ca97fa3ae1402c Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 11 Nov 2025 16:21:07 +0000 Subject: [PATCH 11/25] revert changes to assertions.ts --- .../stacks-classic/lib/test/assertions.ts | 30 +------------------ 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/packages/stacks-classic/lib/test/assertions.ts b/packages/stacks-classic/lib/test/assertions.ts index 057e8d6770..d717b9474a 100644 --- a/packages/stacks-classic/lib/test/assertions.ts +++ b/packages/stacks-classic/lib/test/assertions.ts @@ -22,37 +22,9 @@ const WCAGNonTextContrast: AdditionalAssertion = { selectedNodeStyles.getPropertyValue("background-color") ); - // If background is transparent, check box-shadow or border for contrast - let contrastColor = bgSelectedNodeColor; - if (bgSelectedNodeColor.alpha === 0 || bgSelectedNodeColor.alpha < 0.01) { - const boxShadow = selectedNodeStyles.getPropertyValue("box-shadow"); - const borderColor = selectedNodeStyles.getPropertyValue("border-color"); - - // Extract color from box-shadow (color is always the last value in each shadow) - if (boxShadow && boxShadow !== "none") { - // Get the last shadow if multiple shadows exist (comma-separated) - const lastShadow = boxShadow.split(",").pop()?.trim() || boxShadow.trim(); - // Match color patterns at the end: rgb/rgba/hsl/hsla functions, hex codes, or color names - const colorMatch = lastShadow.match(/(rgba?|hsla?)\([^)]+\)|#[0-9a-f]{3,8}|\b\w+(?:-\w+)*\b(?=\s*$)/i); - if (colorMatch) { - try { - contrastColor = new Color(colorMatch[0]); - } catch { - // If parsing fails, fall back to background color - } - } - } else if (borderColor && borderColor !== "transparent" && borderColor !== "currentColor") { - try { - contrastColor = new Color(borderColor); - } catch { - // If parsing fails, fall back to background color - } - } - } - // we are specifing WCAG21 because of colorjs.io API // WCAG21 and WCAG22 algoirthms are the same - const WCAGcontrast = contrastColor.contrast( + const WCAGcontrast = bgSelectedNodeColor.contrast( bgBodyColor, "WCAG21" ); From d8621ce991147ab476fcbbf5d866c2f191025141 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 12 Nov 2025 14:36:23 +0000 Subject: [PATCH 12/25] update a11y to test against box shadow instead of bg color --- .../pagination/pagination.a11y.test.ts | 4 +- .../stacks-classic/lib/test/assertions.ts | 42 ++++++++++++++++++- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts index 4009191c87..ed36bb1cf5 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts +++ b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts @@ -1,5 +1,5 @@ import { runA11yTests } from "../../test/a11y-test-utils"; -import { WCAGNonTextContrast } from "../../test/assertions"; +import { WCAGBoxShadowContrast } from "../../test/assertions"; import "../../index"; describe("pagination", () => { @@ -33,6 +33,6 @@ describe("pagination", () => { `, }, tag: "nav", - additionalAssertions: [WCAGNonTextContrast], + additionalAssertions: [WCAGBoxShadowContrast], }); }); diff --git a/packages/stacks-classic/lib/test/assertions.ts b/packages/stacks-classic/lib/test/assertions.ts index d717b9474a..da5bcee21c 100644 --- a/packages/stacks-classic/lib/test/assertions.ts +++ b/packages/stacks-classic/lib/test/assertions.ts @@ -32,5 +32,45 @@ const WCAGNonTextContrast: AdditionalAssertion = { }, }; +const WCAGBoxShadowContrast: AdditionalAssertion = { + description: + "should have box-shadow color with contrast greater than 3 against body background color", + assertion: (node) => { + const selectedNode = node.querySelector(".is-selected") as HTMLElement; + const nodeStyles = window.getComputedStyle(selectedNode); + const bodyStyles = window.getComputedStyle(document.body); + const boxShadow = nodeStyles.getPropertyValue("box-shadow"); + + if (!boxShadow || boxShadow === "none") { + return; + } + + // Extract color from first shadow (format: offset-x offset-y blur-radius spread-radius color) + const firstShadow = boxShadow.split(",")[0].trim(); + const colorMatch = firstShadow.match( + /(?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}$/i + ); + + if (!colorMatch) { + return; + } + + try { + const shadowColor = new Color(colorMatch[0]); + const bgBodyColor = new Color( + bodyStyles.getPropertyValue("background-color") + ); + + // we are specifing WCAG21 because of colorjs.io API + // WCAG21 and WCAG22 algorithms are the same + const WCAGcontrast = shadowColor.contrast(bgBodyColor, "WCAG21"); + expect(WCAGcontrast).to.be.at.least(3); + } catch { + // Color parsing failed, skip check + return; + } + }, +}; + export type { AdditionalAssertion }; -export { WCAGNonTextContrast }; +export { WCAGNonTextContrast, WCAGBoxShadowContrast }; From 1730ff5998efa43ed5f6977b42ba96f19b65087d Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 12 Nov 2025 14:44:54 +0000 Subject: [PATCH 13/25] format --- packages/stacks-classic/lib/test/assertions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-classic/lib/test/assertions.ts b/packages/stacks-classic/lib/test/assertions.ts index da5bcee21c..4a7cbd63c8 100644 --- a/packages/stacks-classic/lib/test/assertions.ts +++ b/packages/stacks-classic/lib/test/assertions.ts @@ -40,7 +40,7 @@ const WCAGBoxShadowContrast: AdditionalAssertion = { const nodeStyles = window.getComputedStyle(selectedNode); const bodyStyles = window.getComputedStyle(document.body); const boxShadow = nodeStyles.getPropertyValue("box-shadow"); - + if (!boxShadow || boxShadow === "none") { return; } @@ -50,7 +50,7 @@ const WCAGBoxShadowContrast: AdditionalAssertion = { const colorMatch = firstShadow.match( /(?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}$/i ); - + if (!colorMatch) { return; } From be25e6e5be8feb4d3ea578c9d690bfe72a0b1320 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 12 Nov 2025 16:35:54 +0000 Subject: [PATCH 14/25] update visual tests --- .../baseline/s-avatar-highcontrast-light-indicator.ico | 4 ++-- .../baseline/s-check-control-dark-has-error-checked-radio.ico | 4 ++-- .../s-check-control-light-has-error-unchecked-checkbox.ico | 4 ++-- .../s-check-control-light-has-success-unchecked-checkbox.ico | 4 ++-- .../s-check-control-light-has-warning-unchecked-checkbox.ico | 4 ++-- .../screenshots/Chromium/baseline/s-empty-state-dark.ico | 4 ++-- .../screenshots/Chromium/baseline/s-expandable-dark.ico | 4 ++-- .../screenshots/Chromium/baseline/s-input-fill-dark.ico | 4 ++-- .../baseline/s-input-icon-dark-parent-has-error-error.ico | 4 ++-- .../Chromium/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Chromium/baseline/s-pagination-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Chromium/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Chromium/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../Chromium/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Chromium/baseline/s-pagination-light.ico | 4 ++-- .../Firefox/baseline/s-check-group-dark-checkbox.ico | 4 ++-- .../screenshots/Firefox/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Firefox/baseline/s-pagination-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Firefox/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Firefox/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../Firefox/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Firefox/baseline/s-pagination-light.ico | 4 ++-- .../baseline/s-check-control-light-checked-checkbox.ico | 4 ++-- .../screenshots/Webkit/baseline/s-input-dark-search.ico | 4 ++-- .../Webkit/baseline/s-input-fill-light-order-first.ico | 4 ++-- ...put-icon-highcontrast-light-parent-has-warning-warning.ico | 4 ++-- .../Webkit/baseline/s-input-message-state-has-error-dark.ico | 4 ++-- .../Webkit/baseline/s-input-readonly-highcontrast-light.ico | 4 ++-- .../Webkit/baseline/s-label-dark-disabled-status-beta.ico | 4 ++-- .../Webkit/baseline/s-label-dark-xl-disabled-status-new.ico | 4 ++-- .../baseline/s-link-highcontrast-dark-muted-dropdown.ico | 4 ++-- .../screenshots/Webkit/baseline/s-link-highcontrast-light.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-dark-legacy.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-dark.ico | 4 ++-- .../Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico | 4 ++-- .../Webkit/baseline/s-pagination-highcontrast-dark.ico | 4 ++-- .../baseline/s-pagination-highcontrast-light-legacy.ico | 4 ++-- .../Webkit/baseline/s-pagination-highcontrast-light.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-light-legacy.ico | 4 ++-- .../screenshots/Webkit/baseline/s-pagination-light.ico | 4 ++-- 44 files changed, 88 insertions(+), 88 deletions(-) diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico index 7e1606a61d..50f88236a5 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:beec93adf979c63f2cd74bca73819aae5f0a05e2a3d7f152930abd407b8dca74 -size 867 +oid sha256:6248214e3783fd10b5dabcca853ae1f6d547c117e7897542c817b22205d79fc0 +size 330 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico index 5722927113..f0ea32924b 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b59acc26dd1478ec9ba51e75422adabdf87498f7fc3f9333e45a2e30b1e03196 -size 3089 +oid sha256:dbbc132fcc8f0602b82650444297f1e690df31560021f0a5b4b7fb94070cf8b5 +size 3029 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico index ee682cf1c1..bdf83e943a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:696fa4e1f4f5b754f54a14bfb9cd7e66552a7d3e85d73811f86848d6ecdc2fb3 -size 3630 +oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5 +size 3649 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico index 539d3a522f..0bd073ab5a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:9975e3d30da85400e55b5cd3598392ccbf840bf990c36f664d637b487460c235 -size 3621 +oid sha256:123339d115146b96547be4d675b039eeb1a25fa448da0cc176203571d07446f5 +size 3614 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico index 636153a241..cf79fbb56d 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:8fbd1501cf855ec8e0095e9aa07f519e41ae6eb1bed0f794243c3c15b77f9eea -size 3658 +oid sha256:f7773c372df71dd35f5c408f0b4863b2587a00dd3afc9d7726cc79380c835954 +size 3645 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico index bda81fd057..a34c39f76e 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:cd038a9f84da950128862ecb8b48d9e563a99eda0712517ea4f20860e5e77734 -size 10599 +oid sha256:b5b8aec3ee47957bfb3258c09c7d837479815fcc2636b1a510b82d6891e8fd6b +size 10141 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico index 9eff77c0da..ea805cc2c5 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f24785a5b187160190ad38570929591be78db948750bc440afc44b1f39057c2d -size 4608 +oid sha256:44c6f4ca081df6d766cf962b0b5d1054a0e747aefc81284c257232639192bd5e +size 299 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico index 7c3f060060..6d63ebc162 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d1eb0df586951676f00d220e6b53d3a0404547cb1766ac82fb8fa28c44c6147f -size 856 +oid sha256:a744a81a0c16c2e3b92f69ad5eedc4bf07d8646001c18d6c586814ae664b33e2 +size 208 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico index 9e563d335c..25f54cdbd1 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:8bf176cc15afd8fc12f538eb0d5607ce615a296d55e0d496905a27a1d207caf3 -size 2162 +oid sha256:e87cdd813807c6b2a066a488ef0f6050338233a29a3b34cbe2bf4fcb3c15da3f +size 2213 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico index 756ee8251b..befbc14b2c 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c7cd88e1d0998474de3da1b2f49fbee9827511272572e404961bde939f63f076 -size 3353 +oid sha256:fd10c55ecd58bbcf9fa0a79c4191f0a8fc7b4dda79bc3bd177aa66f3c245ea2b +size 2192 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico index 756ee8251b..befbc14b2c 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c7cd88e1d0998474de3da1b2f49fbee9827511272572e404961bde939f63f076 -size 3353 +oid sha256:fd10c55ecd58bbcf9fa0a79c4191f0a8fc7b4dda79bc3bd177aa66f3c245ea2b +size 2192 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico index 39ff880546..2ff049056a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:2ce6843ec1f6e0a997b359a4f9834086e4cf46be0761dffade01ce1de216781d -size 2229 +oid sha256:8da67451848b37c93a93f6e3e4ae24f9db12b71bf9f0af37d07f63708e7615d2 +size 2266 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico index 39ff880546..2ff049056a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:2ce6843ec1f6e0a997b359a4f9834086e4cf46be0761dffade01ce1de216781d -size 2229 +oid sha256:8da67451848b37c93a93f6e3e4ae24f9db12b71bf9f0af37d07f63708e7615d2 +size 2266 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico index a502eac3a0..acf9a795c7 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d913febe32f5c29de0516ea6fd99be2d667b4ac9d76a6d302e62cbea67555267 -size 2223 +oid sha256:f53f67d88e56b4b223d6cffb02147176cf866f720de40bb0da87216d3e7691ad +size 2301 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico index a502eac3a0..acf9a795c7 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d913febe32f5c29de0516ea6fd99be2d667b4ac9d76a6d302e62cbea67555267 -size 2223 +oid sha256:f53f67d88e56b4b223d6cffb02147176cf866f720de40bb0da87216d3e7691ad +size 2301 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico index b9b3de9f11..84581c2f9a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:e74bb78f751b73f8d1029e59ebcf6095c9ab12f8043b9f0d98d007e84881121d -size 2193 +oid sha256:d878554f44c584821bcf3df88be7cb2bdedb85f13f3f25a2f10ab05345e210e7 +size 2245 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico index b9b3de9f11..84581c2f9a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:e74bb78f751b73f8d1029e59ebcf6095c9ab12f8043b9f0d98d007e84881121d -size 2193 +oid sha256:d878554f44c584821bcf3df88be7cb2bdedb85f13f3f25a2f10ab05345e210e7 +size 2245 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico index cf6f15cf61..133708e9fc 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b952536a5671e608be91c102659e92ae906b1838aedae5c4b55536892fbef534 -size 12553 +oid sha256:8a3dacddf4c25b092a023dabdb2195158a5193572ae6f56fc4a5a6e3a2adc9e3 +size 12186 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico index 2f0df95577..02fc1ced93 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:428e671a98215139a64057ae3a189cf74dd771a281284df6f16ba9c9e49c2c92 -size 4491 +oid sha256:628f3dcae94d3840ded7dcacc6d80b5dde4fa4fafe6747f688035d1d030384ff +size 2814 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico index 2f0df95577..02fc1ced93 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:428e671a98215139a64057ae3a189cf74dd771a281284df6f16ba9c9e49c2c92 -size 4491 +oid sha256:628f3dcae94d3840ded7dcacc6d80b5dde4fa4fafe6747f688035d1d030384ff +size 2814 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico index d45fb00928..596cf304a9 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:63a0ced1272f0b434b14d42c6080596a3e30e5dd95926e1418f29395cf9ba2fe -size 2854 +oid sha256:4ae5026fef62e8879632963b2fb06a423f79bc07a6895ffcad961387770a964a +size 2868 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico index d45fb00928..596cf304a9 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:63a0ced1272f0b434b14d42c6080596a3e30e5dd95926e1418f29395cf9ba2fe -size 2854 +oid sha256:4ae5026fef62e8879632963b2fb06a423f79bc07a6895ffcad961387770a964a +size 2868 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico index fe8b159b79..33b11c40f7 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:172e00a0ef1246535e65bf98dc1535c61c9920972648fb11efdf38f9259df6a1 -size 2871 +oid sha256:c5a14129ae6207de5f7e694f726ba097f2eb35f004eabe6c320b49d933e9b54d +size 2856 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico index fe8b159b79..33b11c40f7 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:172e00a0ef1246535e65bf98dc1535c61c9920972648fb11efdf38f9259df6a1 -size 2871 +oid sha256:c5a14129ae6207de5f7e694f726ba097f2eb35f004eabe6c320b49d933e9b54d +size 2856 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico index 5d4eaf37f2..ec30dad737 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:5c435e5a9b6dfb492c930f405c1b0a9f66783cd40f3d97d406392c0b20f091e5 -size 2727 +oid sha256:680c89e73ca24f8f9abfcc903e59d54748ed037cf7d3151dfd79e1c3b8dab9a2 +size 2757 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico index 5d4eaf37f2..ec30dad737 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:5c435e5a9b6dfb492c930f405c1b0a9f66783cd40f3d97d406392c0b20f091e5 -size 2727 +oid sha256:680c89e73ca24f8f9abfcc903e59d54748ed037cf7d3151dfd79e1c3b8dab9a2 +size 2757 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico index 1f9d7c793d..839399b797 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:3ce71143f237a83b6d804355d17e576defa905b04517e27a7c4ea5b6218d8d22 -size 4349 +oid sha256:5730098824ae140db544f1735b31e00c8cca6161fcfa6d2480ba2cd9c7a9d372 +size 4279 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico index b9906bfb51..39a0d2aa3d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:cc76a0caa2a1eefe9e7fab824b7865e501506959ab05cd7da6883eaeb473ec5c -size 2716 +oid sha256:bae0630c8c686224cb9c5c95ec10dfd4e1694b44d128e814c0b7a944ba81ea8c +size 2610 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico index fc3f69c563..b9be518eb0 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:1680da14a39b9a41ab3a42aee0cca65d66b9fcd458381a9fb219b0fd1ae193a8 -size 1260 +oid sha256:1f81932e6fbf1f79eed976a3997e44964d9e00d3b83a511965c5c06c85e1e5e5 +size 1258 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico index 2096637e37..6e6d7b58ae 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:e15aa92915dd150e824efeac352e9495a742fd8287fe7e221cecf8fbfd6b547c -size 2974 +oid sha256:2d5227bdb423c4a778bcf5eb7caf7ecdbd61c5b53882d2cb8450adc225773d6e +size 2999 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico index 960d44f61b..593de095ae 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:a065ecf5c1dac0c87a18492fb6173283df248a300a6e7cbebb3b9212b9e78ae9 -size 3617 +oid sha256:827821def52c63e052a9365b4b1f4f6de7855f95c5ad8081ac30edb0a074bcc4 +size 3499 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico index b8f20b5094..9145f5a1c3 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6c5a5eedef1bb339b4e57d4688c2e6e85a594ee708c3e4dd52b6cb6fe520cdf9 -size 2752 +oid sha256:6ebf4b3a2b94ec15e6b29e2c1ef89b1adb1e56ded3d11a473758b879e4ba5f71 +size 2715 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico index e8a1cc68bb..7a37285e68 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:55ba31ab520d3e2032c7a2730f54e6b58ac3bc3eab885582807e560291e40b20 -size 3205 +oid sha256:a281c5a7fb1daba2da7927ba5cb5e4efc9fabfa3c5118ab4f8a26cb79a093be5 +size 3270 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico index e08ff89528..531927b563 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:fc52b9e566095e83a1cf5697c00251027a5984771357a88c44a298d477e57e63 -size 4627 +oid sha256:04e61907ec054de5fac6a90d0e7666ac6985b0b5a91bc241989866d7aee6aaff +size 4963 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico index 5b1e3eb3b4..b6cdaedd08 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:4d2a601451f97d69565df0ee41b6c2fd46ba1a912c75641cae6794470ba714ef -size 798 +oid sha256:b9342c083e3473ba835eaf8f20d9ed186b7d198e3be656b77a6c93f80901874a +size 737 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico index e0bf790611..2ba0a55c4c 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:996414af1d104eaf868b4657910f7b14f757443b2a0d72062f58aa6f3fc1d5e2 -size 737 +oid sha256:7525eefd327ae54a092a5424279cb0c71cee8021054c878857b6f4b39d9b63e4 +size 760 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico index 59a8a22b09..af99e5527d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bcaa573dfb810fe0d397b203057f345fe0122f5c3ae51799e05ce97cb3cc703c -size 5184 +oid sha256:2618215373829c1a3e18bc96308b77af40f39f4d661dcd93126c3f1d0006ab26 +size 2663 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico index 59a8a22b09..af99e5527d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bcaa573dfb810fe0d397b203057f345fe0122f5c3ae51799e05ce97cb3cc703c -size 5184 +oid sha256:2618215373829c1a3e18bc96308b77af40f39f4d661dcd93126c3f1d0006ab26 +size 2663 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico index 3ac0916687..d70db08d50 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:ebb628c7d13b26af75a786b9bad608dbe268caa3ce1d47beb9ff6cc427922c4e -size 2636 +oid sha256:ca28ca9c0cadff3fd533913949dd2f76be04e47b754307040e90e347dc123921 +size 2637 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico index 3ac0916687..d70db08d50 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:ebb628c7d13b26af75a786b9bad608dbe268caa3ce1d47beb9ff6cc427922c4e -size 2636 +oid sha256:ca28ca9c0cadff3fd533913949dd2f76be04e47b754307040e90e347dc123921 +size 2637 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico index 3e9f5e96eb..83a1a12774 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:ce9cc646a011580c3021bf46a55b00b80868d050faa85efd8dc371dfb2644e8f -size 2621 +oid sha256:f0d1a0777a299fa368e7555d2e1d0f3b06cc8e6d629c17a10c895d0e4e7a4a86 +size 2683 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico index 3e9f5e96eb..83a1a12774 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:ce9cc646a011580c3021bf46a55b00b80868d050faa85efd8dc371dfb2644e8f -size 2621 +oid sha256:f0d1a0777a299fa368e7555d2e1d0f3b06cc8e6d629c17a10c895d0e4e7a4a86 +size 2683 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico index bcc218fc3b..ec1c6a3e31 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c9d2d174444197f61270d36551d25fb12c16b428105aacb1951f4ddfcd151432 -size 2627 +oid sha256:0fabe70e6b378b1fe394520d5e03a035bb6e57ceb87b802b0b1c54e44f064353 +size 2636 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico index bcc218fc3b..ec1c6a3e31 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c9d2d174444197f61270d36551d25fb12c16b428105aacb1951f4ddfcd151432 -size 2627 +oid sha256:0fabe70e6b378b1fe394520d5e03a035bb6e57ceb87b802b0b1c54e44f064353 +size 2636 From 69da13c2d04243f750842045b2423d2e66452ab0 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Wed, 12 Nov 2025 16:58:58 +0000 Subject: [PATCH 15/25] remove new assertion function --- .../pagination/pagination.a11y.test.ts | 4 +- .../stacks-classic/lib/test/assertions.ts | 42 +------------------ 2 files changed, 3 insertions(+), 43 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts index ed36bb1cf5..3e33700982 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts +++ b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts @@ -1,5 +1,5 @@ import { runA11yTests } from "../../test/a11y-test-utils"; -import { WCAGBoxShadowContrast } from "../../test/assertions"; +// import { WCAGNonTextContrast } from "../../test/assertions"; import "../../index"; describe("pagination", () => { @@ -33,6 +33,6 @@ describe("pagination", () => { `, }, tag: "nav", - additionalAssertions: [WCAGBoxShadowContrast], + // additionalAssertions: [WCAGNonTextContrast], }); }); diff --git a/packages/stacks-classic/lib/test/assertions.ts b/packages/stacks-classic/lib/test/assertions.ts index 4a7cbd63c8..d717b9474a 100644 --- a/packages/stacks-classic/lib/test/assertions.ts +++ b/packages/stacks-classic/lib/test/assertions.ts @@ -32,45 +32,5 @@ const WCAGNonTextContrast: AdditionalAssertion = { }, }; -const WCAGBoxShadowContrast: AdditionalAssertion = { - description: - "should have box-shadow color with contrast greater than 3 against body background color", - assertion: (node) => { - const selectedNode = node.querySelector(".is-selected") as HTMLElement; - const nodeStyles = window.getComputedStyle(selectedNode); - const bodyStyles = window.getComputedStyle(document.body); - const boxShadow = nodeStyles.getPropertyValue("box-shadow"); - - if (!boxShadow || boxShadow === "none") { - return; - } - - // Extract color from first shadow (format: offset-x offset-y blur-radius spread-radius color) - const firstShadow = boxShadow.split(",")[0].trim(); - const colorMatch = firstShadow.match( - /(?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}$/i - ); - - if (!colorMatch) { - return; - } - - try { - const shadowColor = new Color(colorMatch[0]); - const bgBodyColor = new Color( - bodyStyles.getPropertyValue("background-color") - ); - - // we are specifing WCAG21 because of colorjs.io API - // WCAG21 and WCAG22 algorithms are the same - const WCAGcontrast = shadowColor.contrast(bgBodyColor, "WCAG21"); - expect(WCAGcontrast).to.be.at.least(3); - } catch { - // Color parsing failed, skip check - return; - } - }, -}; - export type { AdditionalAssertion }; -export { WCAGNonTextContrast, WCAGBoxShadowContrast }; +export { WCAGNonTextContrast }; From 32d551a12069b8ba762be6b9bddf2f996c1ba703 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Thu, 13 Nov 2025 12:27:26 +0000 Subject: [PATCH 16/25] Update based on comments --- .changeset/sharp-heads-call.md | 2 +- MIGRATION_GUIDE.md | 2 +- .../lib/components/pagination/pagination.less | 7 ++- .../_data/pagination-component.json | 4 +- .../product/components/pagination.html | 9 ++-- .../Pagination/PaginationController.svelte | 11 ++-- .../Pagination/PaginationController.test.ts | 12 ++--- .../Pagination/PaginationItem.svelte | 53 ++++++++++++++----- 8 files changed, 69 insertions(+), 31 deletions(-) diff --git a/.changeset/sharp-heads-call.md b/.changeset/sharp-heads-call.md index 370912f096..c15cc1b3da 100644 --- a/.changeset/sharp-heads-call.md +++ b/.changeset/sharp-heads-call.md @@ -6,4 +6,4 @@ Update pagination component to match new SHINE design system BREAKING CHANGES -The next button now uses an ArrowRight icon instead of text. To apply the new styling, add the `is-next` class to pagination items that represent the "Next" button. \ No newline at end of file +The next button now uses an ArrowRight and ArrowLeft icon instead of text. To apply the new styling, add the `item__nav` class to pagination items that represent the "Next" button. \ No newline at end of file diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index a4c2dbb5a7..0fec1d0252 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -25,7 +25,7 @@ ### Components #### Pagination -- The next button now uses an ArrowRight icon instead of text. To apply the new styling, add the `is-next` class to pagination items that represent the "Next" button. +- The next button now uses an ArrowRight and ArrowLeft icon instead of text. To apply the new styling, add the `item-nav` class to pagination items that represent the "Next" button. #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
    `) should be deleted from the codebases as part of the migration. diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 4ee11c4ecb..dca29609d5 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -20,7 +20,7 @@ --_pa-item-fc: var(--black-600); } &.s-pagination--item__nav { - --_pa-item-bg: var(--black-150); + --_pa-item-bg: unset; --_pa-item-br: var(--br-circle); --_pa-item-fc: var(--black-600); --_pa-item-p: var(--su-static6); @@ -45,7 +45,10 @@ --_pa-item-br: var(--br-md); } - background-color: var(--_pa-item-bg); + // Only apply background-color when not a button (button classes handle their own background) + &:not(.s-btn) { + background-color: var(--_pa-item-bg); + } border-radius: var(--_pa-item-br); box-shadow: var(--_pa-item-bs); color: var(--_pa-item-fc); diff --git a/packages/stacks-docs/_data/pagination-component.json b/packages/stacks-docs/_data/pagination-component.json index da51e48a52..b9785252ee 100644 --- a/packages/stacks-docs/_data/pagination-component.json +++ b/packages/stacks-docs/_data/pagination-component.json @@ -16,9 +16,9 @@ "description": "Active state that’s applied to the current page." }, { - "class": ".is-next", + "class": ".s-pagination--item__nav", "applies": ".s-pagination--item", - "description": "Styles the Next button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." + "description": "Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." }, { "class": ".s-pagination--item__clear", diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index fe7ec641a5..d36f2b3680 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -126,10 +126,11 @@
  • - - {% icon "ArrowRight" %} - page - + + + {% icon "ArrowRight" %} + page +
    • diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte index f4d76fd6ab..7b3a2fffde 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte @@ -4,7 +4,10 @@ import PaginationItemClear from "./PaginationItemClear.svelte"; import { generatePagination } from "./pagination-generator"; import Icon from "../Icon/Icon.svelte"; - import { IconArrowRight } from "@stackoverflow/stacks-icons/icons"; + import { + IconArrowRight, + IconArrowLeft, + } from "@stackoverflow/stacks-icons/icons"; interface Props { /** @@ -75,8 +78,10 @@ - {i18nPrevText} {i18nPageText} + + {i18nPageText} {/if} {#each generatePagination(page, totalPages) as p, i (p.toString() + i)} @@ -97,7 +102,7 @@ {i18nPageText} diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts index e54b011c94..5a1508d552 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts @@ -142,7 +142,7 @@ describe("PaginationController", () => { expect(screen.queryByText("Next")).not.to.exist; }); - it("applies is-next class to the Next button", () => { + it("applies nav class to navigation buttons", () => { render(Pagination, { props: { page: 2, @@ -153,7 +153,7 @@ describe("PaginationController", () => { // Find the Next button by its role and accessible name const nextLink = screen.getByRole("link", { name: /Next/i }); - expect(nextLink).to.have.class("is-next"); + expect(nextLink).to.have.class("s-pagination--item__nav"); // Verify the correct icon is rendered with the correct title const titleElement = screen.getByTitle("Next"); @@ -163,13 +163,13 @@ describe("PaginationController", () => { expect(icon?.tagName).to.equal("svg"); expect(nextLink).to.contain(icon); - // Verify Prev button does NOT have is-next class + // Verify Prev button also has nav class const prevLink = screen.getByRole("link", { name: /Prev/i }); - expect(prevLink).not.to.have.class("is-next"); + expect(prevLink).to.have.class("s-pagination--item__nav"); - // Verify regular page number items do NOT have is-next class + // Verify regular page number items do NOT have nav class const page2Link = screen.getByRole("link", { name: /2/ }); - expect(page2Link).not.to.have.class("is-next"); + expect(page2Link).not.to.have.class("s-pagination--item__nav"); }); it("highlights the correct selected page", () => { diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte index eb72022a8b..ca0185fb96 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte @@ -1,5 +1,6 @@
  • - - {@render children?.()} - + {#if itemNav} + + + {:else} + + {@render children?.()} + + {/if}
    • From d2b545e34fbb382274cec7d49973474f66799f30 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Thu, 13 Nov 2025 12:38:47 +0000 Subject: [PATCH 17/25] update visual regression tests --- .../baseline/s-avatar-highcontrast-light-indicator.ico | 4 ++-- .../baseline/s-check-control-dark-has-error-checked-radio.ico | 4 ++-- .../s-check-control-light-has-success-unchecked-checkbox.ico | 4 ++-- .../s-check-control-light-has-warning-unchecked-checkbox.ico | 4 ++-- .../screenshots/Chromium/baseline/s-expandable-dark.ico | 4 ++-- .../screenshots/Chromium/baseline/s-input-fill-dark.ico | 4 ++-- .../baseline/s-input-icon-dark-parent-has-error-error.ico | 4 ++-- .../Webkit/baseline/s-input-readonly-highcontrast-light.ico | 4 ++-- .../Webkit/baseline/s-label-dark-xl-disabled-status-new.ico | 4 ++-- .../baseline/s-link-highcontrast-dark-muted-dropdown.ico | 4 ++-- .../screenshots/Webkit/baseline/s-link-highcontrast-light.ico | 4 ++-- 11 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico index 50f88236a5..204aabb866 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6248214e3783fd10b5dabcca853ae1f6d547c117e7897542c817b22205d79fc0 -size 330 +oid sha256:53364e2952b9aa8273ffc1a0781252dd0b67bb89a3542deaac862e9a7070394b +size 870 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico index f0ea32924b..1a8cfc0770 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:dbbc132fcc8f0602b82650444297f1e690df31560021f0a5b4b7fb94070cf8b5 -size 3029 +oid sha256:acb37635d67ada92d769c443cd7049a87f66d90546e11965fb3fdf614c20e351 +size 2984 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico index 0bd073ab5a..539d3a522f 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-success-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:123339d115146b96547be4d675b039eeb1a25fa448da0cc176203571d07446f5 -size 3614 +oid sha256:9975e3d30da85400e55b5cd3598392ccbf840bf990c36f664d637b487460c235 +size 3621 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico index cf79fbb56d..bdf83e943a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f7773c372df71dd35f5c408f0b4863b2587a00dd3afc9d7726cc79380c835954 -size 3645 +oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5 +size 3649 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico index ea805cc2c5..4320fe2550 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:44c6f4ca081df6d766cf962b0b5d1054a0e747aefc81284c257232639192bd5e -size 299 +oid sha256:913cb77790c8eadb99f0b0b97f59aaf14623f41e7bab420e623864d67f43a880 +size 3907 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico index 6d63ebc162..533ac6f5de 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:a744a81a0c16c2e3b92f69ad5eedc4bf07d8646001c18d6c586814ae664b33e2 -size 208 +oid sha256:3b3a3bcc31458a4ea80e056e3e716541a495e5639072985de5f7dc5db27e4ad0 +size 846 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico index 25f54cdbd1..8ee2538949 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:e87cdd813807c6b2a066a488ef0f6050338233a29a3b34cbe2bf4fcb3c15da3f -size 2213 +oid sha256:f39b3bf636db78d33ff12ba00a00e1155ea51768ccf7e9a19756a7b41c2f7da1 +size 2068 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico index 9145f5a1c3..e6e47f13b4 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6ebf4b3a2b94ec15e6b29e2c1ef89b1adb1e56ded3d11a473758b879e4ba5f71 -size 2715 +oid sha256:9830e1d9ed6b029424bd43c0abc53f8408419198c793cfdf432c579f07c1fdcc +size 2764 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico index 531927b563..31a1cc89fc 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:04e61907ec054de5fac6a90d0e7666ac6985b0b5a91bc241989866d7aee6aaff -size 4963 +oid sha256:20fbf4c489425f56eca58da79631f1517ac94a344b41383f6cf4df6c28643cb3 +size 4698 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico index b6cdaedd08..0937a9d4e6 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b9342c083e3473ba835eaf8f20d9ed186b7d198e3be656b77a6c93f80901874a -size 737 +oid sha256:7b90f3a7605913a824e7eedf86dc87c43e87d12da983672714e56dfba166f95b +size 806 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico index 2ba0a55c4c..e0bf790611 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7525eefd327ae54a092a5424279cb0c71cee8021054c878857b6f4b39d9b63e4 -size 760 +oid sha256:996414af1d104eaf868b4657910f7b14f757443b2a0d72062f58aa6f3fc1d5e2 +size 737 From befbd3ab3f19a056b7f1bb4921a43c704e906965 Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Mon, 17 Nov 2025 15:40:24 +0000 Subject: [PATCH 18/25] Update MIGRATION_GUIDE.md Co-authored-by: Dan Cormier --- MIGRATION_GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 34a3a395fa..44048db936 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -25,7 +25,7 @@ ### Components #### Pagination -- The next button now uses an ArrowRight and ArrowLeft icon instead of text. To apply the new styling, add the `item-nav` class to pagination items that represent the "Next" button. +- The next and previous button now uses an `ArrowRight` and `ArrowLeft` icon instead of text. To apply the new styling, use the class `.s-pagination--item__nav`. Since these buttons use icons to represent their behavior, make sure to include descriptive text for screen readers. #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
    `) should be deleted from the codebases as part of the migration. From 3687c0d7cde97ea5b4903ae0983ae8ce090f6f0e Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 18 Nov 2025 09:42:39 +0000 Subject: [PATCH 19/25] Update packages/stacks-classic/lib/components/pagination/pagination.less Co-authored-by: Dan Cormier --- .../stacks-classic/lib/components/pagination/pagination.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index dca29609d5..fbc44b2540 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -45,10 +45,6 @@ --_pa-item-br: var(--br-md); } - // Only apply background-color when not a button (button classes handle their own background) - &:not(.s-btn) { - background-color: var(--_pa-item-bg); - } border-radius: var(--_pa-item-br); box-shadow: var(--_pa-item-bs); color: var(--_pa-item-fc); From 93a33143c967456f71153d15bc875ae70149f15d Mon Sep 17 00:00:00 2001 From: Tavian Taylor Date: Tue, 18 Nov 2025 09:43:27 +0000 Subject: [PATCH 20/25] update based on comments --- .../lib/components/pagination/pagination.a11y.test.ts | 2 -- .../stacks-docs/product/components/pagination.html | 11 ++++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts index 3e33700982..4736e0bbe3 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts +++ b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts @@ -1,5 +1,4 @@ import { runA11yTests } from "../../test/a11y-test-utils"; -// import { WCAGNonTextContrast } from "../../test/assertions"; import "../../index"; describe("pagination", () => { @@ -33,6 +32,5 @@ describe("pagination", () => { `, }, tag: "nav", - // additionalAssertions: [WCAGNonTextContrast], }); }); diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index d36f2b3680..919490f29e 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -86,6 +86,12 @@