From 9b4f90299088959ee67c89449f6e0c36f82dc68b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 24 Sep 2025 11:21:39 -0400 Subject: [PATCH 01/17] Add dropdown demo --- src/dropdown/index.html | 387 ++++++++++++++++++++++++++++++++++++++++ src/dropdown/script.js | 34 ++++ src/dropdown/style.css | 270 ++++++++++++++++++++++++++++ 3 files changed, 691 insertions(+) create mode 100644 src/dropdown/index.html create mode 100644 src/dropdown/script.js create mode 100644 src/dropdown/style.css diff --git a/src/dropdown/index.html b/src/dropdown/index.html new file mode 100644 index 0000000..edc0262 --- /dev/null +++ b/src/dropdown/index.html @@ -0,0 +1,387 @@ + + + + + + + + +
+
+
+

Bird News Daily

+
+

+ Building a Disclosure Navigation with Baseline features +

+
+ + +
+
+

Bird News Daily

+
+
+ +
+

©2025 Bird News Daily

+
+
+ + + diff --git a/src/dropdown/script.js b/src/dropdown/script.js new file mode 100644 index 0000000..163e498 --- /dev/null +++ b/src/dropdown/script.js @@ -0,0 +1,34 @@ +window.addEventListener("hashchange", () => { + handleRoute(window.location.hash); +}); + +const CONTAINS_PATH_TEXT = "Contains current page link"; + +function handleRoute(newPage) { + // Close all open popovers, would be unneeded if we actually had navigated to a new page + document.querySelectorAll(":popover-open").forEach((popover) => { + popover.hidePopover(); + }); + + // Replace the content + const heading = document.getElementById("id-page-title"); + heading.innerText = newPage; + + const formerLink = document.querySelector("[aria-current]"); + if (formerLink) formerLink.removeAttribute("aria-current"); + + const linkToRoute = document.querySelector(`[href="${newPage}"]`); + linkToRoute.setAttribute("aria-current", "page"); + + // Remove existing title attributes + document + .querySelectorAll(`[title="${CONTAINS_PATH_TEXT}"]`) + .forEach((element) => { + element.removeAttribute("title"); + }); + + // Add a title to ancestors + document.querySelectorAll("li:has(a[aria-current])").forEach((element) => { + element.setAttribute("title", CONTAINS_PATH_TEXT); + }); +} diff --git a/src/dropdown/style.css b/src/dropdown/style.css new file mode 100644 index 0000000..d94e79d --- /dev/null +++ b/src/dropdown/style.css @@ -0,0 +1,270 @@ +.nav-list { + align-items: center; + display: flex; + flex-wrap: wrap; + background: var(--color-gray); + list-style: none; + margin: 0; + padding: 0; + + [popover] { + /* Override default browser style */ + border: 1px solid var(--border-color); + border-radius: 3px; + margin: 0; + padding: 1rem 0; + inset: auto; + } + + /* Top level */ + ul { + position-area: block-end span-inline-end; + margin: 0; + min-width: anchor-size(); + width: max-content; + + &:popover-open { + display: grid; + } + + li { + display: flex; + flex-direction: row; + align-items: start; + } + } + + /* Second-level */ + ul ul { + position-area: span-block-end inline-end; + position-try: block-end span-inline-end; + } + + button:has(+ :popover-open) { + --rotate-btn-icon: 90deg; + } +} + +.nav-list-item button, +.nav-list-item a { + background: var(--navlist-item-bg, transparent); + border: thin solid var(--list-item-border-color, transparent); + + padding: 0.5em 0.75em; + inline-size: 100%; + + &:hover, + &:focus { + --link-focus-color: var(--highlight-color); + --btn-text: var(--highlight-color); + background: light-dark(oklch(90.5% 0.013 196), oklch(35.3% 0.085 238)); + } +} + +[data-icon~="triangle"] { + --gradient-start-default: var(--outline-color); + --gradient-end-default: var(--highlight-color); + + margin-block-start: .25ch; + rotate: var(--rotate-btn-icon, 0); + transition: rotate 0.2s ease-in; + + .gradient-start { + stop-color: var(--disclosure-gradient-start, var(--gradient-start-default)); + } + + .gradient-end { + stop-color: var(--disclosure-gradient-end, var(--gradient-end-default)) ; + } + + @media (forced-colors: active) { + --disclosure-gradient-start: currentColor; + --disclosure-gradient-end: currentColor; + } +} + +a[aria-current], +li:has(a[aria-current]) > button { + --navlist-item-bg: var(--active); + --link-focus-color: transparent; +} + +/* presentational style*/ + +.page { + display: grid; + min-height: 100vh; + grid: min-content min-content 1fr min-content / 1fr; +} + +/* Header */ +.page header { + background: var(--color-primary); + padding: .5em 1em; + + .title { + margin: 0; + } +} + +.tagline { + font-family: var(--serif-font); + font-style: italic; + margin-block-end: 0; +} + +main { + padding: var(--gap) var(--double-gap); +} + +footer { + background: var(--color-primary); + font-family: var(--serif-font); + font-size: var(--text-small); + font-style: italic; + padding: 1em; +} + +[data-button] { + align-items: center; + background: var(--btn-bg); + border: thin solid var(--btn-border, transparent); + color: var(--btn-text, var(--bg)); + cursor: pointer; + display: inline-flex; + font-size: inherit; + padding: 0.5em 0.75em; +} + +[data-icon] { + display: inline-block; + block-size: var(--icon-height, var(--icon-size, 1em)); + overflow: visible; + inline-size: var(--icon-width, var(--icon-size, 1em)); +} + +@layer reset, base; + +:root { + color-scheme: light dark; +} + +@layer base { + html { + --text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem); + --text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem); + --text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem); + --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem); + --gap: clamp(2cqi, 0.5lh, 5cqi); + --quarter-gap: calc(var(--gap) / 4); + --double-gap: calc(var(--gap) * 2); + --accent-color: light-dark(oklch(66.3% 0.234 253), oklch(45.2% 0.054 302)); + --active: var(--color-primary); + --text-color: light-dark(oklch(0% 0 none), oklch(100% 0 none)); + --highlight-color: light-dark( + oklch(43.9% 0.132 250), + oklch(92.6% 0.132 250) + ); + --border-color: light-dark(oklch(62.5% 0 none), oklch(87% 0 none)); + --outline-color: light-dark( + oklch(50.9% 0.37 323.38), + oklch(93.9% 0.37 323.38) + ); + + --color-primary: light-dark( + oklch(88.631% 0.02763 225), + oklch(43.3% 0.085 238) + ); + --color-gray: light-dark(oklch(94.912% 0 none), oklch(41.7% 0 none)); + + --color-background: #fff; + + --sans-serif-font: + Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", + source-sans-pro, sans-serif; + --serif-font: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; + } + + body { + background: var(--background); + color: var(--text-color); + font-size: var(--text-normal); + font-family: var(--sans-serif-font); + margin: 0; + } + + :focus { + outline: medium dotted var(--outline-color); + outline-offset: 0.18em; + } + + :any-link { + color: var(--link-text-color, currentColor); + text-decoration: underline; + text-underline-offset: 0.18em; + text-decoration-color: var(--link-focus-color, var(--highlight-color)); + text-decoration-thickness: var(--underline-thickness, 0.1em); + transition: + color 0.3s ease-in-out, + text-decoration-thickness 0.3s ease-in, + text-decoration-color 0.3s linear; + + &:hover, + &:focus { + --link-text-color: var(--highlight-color); + --link-focus-color: var(--color-background); + --underline-thickness: 0.18em; + } + } + + .visually-hidden:not(:focus, :active) { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(1px 1px 1px 1px); + height: 1px; + overflow: hidden; + pointer-events: none; + position: absolute; + width: 1px; + } + + svg { + fill: var(--fill, currentColor); + padding: 1px; + } + +} + +@layer reset { + * { + box-sizing: border-box; + } + + html { + block-size: 100%; + } + + body { + margin: unset; + min-block-size: 100vh; + } + + picture { + display: contents; + } + + img { + display: block; + } + + img, + svg { + max-inline-size: 100%; + } + + input, + button, + textarea, + select { + font: inherit; + } +} From 7840d02941f1d6e4f81476cbe52dba644e0839fb Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 25 Sep 2025 15:46:53 +0200 Subject: [PATCH 02/17] style cleanup --- src/dropdown/index.html | 4 +--- src/dropdown/style.css | 34 +++++++++++++--------------------- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/src/dropdown/index.html b/src/dropdown/index.html index edc0262..819b54f 100644 --- a/src/dropdown/index.html +++ b/src/dropdown/index.html @@ -8,9 +8,7 @@
-

Bird News Daily

-

Building a Disclosure Navigation with Baseline features

@@ -374,7 +372,7 @@

Bird News Daily

-

Bird News Daily

+

Bird News Daily

diff --git a/src/dropdown/style.css b/src/dropdown/style.css index d94e79d..136c842 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -74,7 +74,7 @@ } .gradient-end { - stop-color: var(--disclosure-gradient-end, var(--gradient-end-default)) ; + stop-color: var(--disclosure-gradient-end, var(--gradient-end-default)); } @media (forced-colors: active) { @@ -84,7 +84,7 @@ } a[aria-current], -li:has(a[aria-current]) > button { +li:has(a[aria-current])>button { --navlist-item-bg: var(--active); --link-focus-color: transparent; } @@ -114,7 +114,7 @@ li:has(a[aria-current]) > button { } main { - padding: var(--gap) var(--double-gap); + padding: var(--gap) 1em; } footer { @@ -161,23 +161,16 @@ footer { --accent-color: light-dark(oklch(66.3% 0.234 253), oklch(45.2% 0.054 302)); --active: var(--color-primary); --text-color: light-dark(oklch(0% 0 none), oklch(100% 0 none)); - --highlight-color: light-dark( - oklch(43.9% 0.132 250), - oklch(92.6% 0.132 250) - ); + --highlight-color: light-dark(oklch(43.9% 0.132 250), + oklch(92.6% 0.132 250)); --border-color: light-dark(oklch(62.5% 0 none), oklch(87% 0 none)); - --outline-color: light-dark( - oklch(50.9% 0.37 323.38), - oklch(93.9% 0.37 323.38) - ); - - --color-primary: light-dark( - oklch(88.631% 0.02763 225), - oklch(43.3% 0.085 238) - ); + --outline-color: light-dark(oklch(50.9% 0.37 323.38), + oklch(93.9% 0.37 323.38)); + --color-primary: light-dark(oklch(88.631% 0.02763 225), + oklch(43.3% 0.085 238)); --color-gray: light-dark(oklch(94.912% 0 none), oklch(41.7% 0 none)); - - --color-background: #fff; + --background-color: light-dark(oklch(91.141% 0.00652 16.403), oklch(22.635% 0.01351 291.83)); + ; --sans-serif-font: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", @@ -186,7 +179,7 @@ footer { } body { - background: var(--background); + background: var(--background-color); color: var(--text-color); font-size: var(--text-normal); font-family: var(--sans-serif-font); @@ -212,7 +205,7 @@ footer { &:hover, &:focus { --link-text-color: var(--highlight-color); - --link-focus-color: var(--color-background); + --link-focus-color: var(--background-color); --underline-thickness: 0.18em; } } @@ -231,7 +224,6 @@ footer { fill: var(--fill, currentColor); padding: 1px; } - } @layer reset { From 12f94e3f0ca74273c4d2a1ee740e9b5aed1f05a8 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 25 Sep 2025 13:08:26 -0400 Subject: [PATCH 03/17] Add title --- src/dropdown/index.html | 178 +++++++++++++++------------------------- 1 file changed, 65 insertions(+), 113 deletions(-) diff --git a/src/dropdown/index.html b/src/dropdown/index.html index 819b54f..08b262f 100644 --- a/src/dropdown/index.html +++ b/src/dropdown/index.html @@ -1,19 +1,20 @@ - + + Bird News Daily
-

Bird News Daily

+

Bird News Daily

Building a Disclosure Navigation with Baseline features

- -
-
-

Bird News Daily

-
-
+
+
+

Bird News Daily

+
+
-
-

©2025 Bird News Daily

-
+
+

©2025 Bird News Daily

+
diff --git a/src/dropdown/style.css b/src/dropdown/style.css index b90f97f..e6a58a7 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -1,19 +1,58 @@ @layer reset, theme, layout, components; @layer components { - [popover] { - /* Override default browser style */ + [data-menu] { + --popover-offset: -10px; + + &:popover-open { + --show-menu: 1; + --outer-popover-inset: 0; + --nested-popover-inset: 0; + + display: grid; + + @starting-style { + --show-menu: 0; + --outer-popover-inset: var(--popover-offset); + --nested-popover-inset: var(--popover-offset); + } + } + border: 1px solid var(--border-color); border-radius: 3px; - margin: 0; + opacity: var(--show-menu, 0); padding: 1rem 0; + position: absolute; + /* Override default popover browser styles */ + margin: 0; inset: auto; - - &:popover-open { - display: grid; + transition: + opacity var(--slow), + inset var(--fast), + overlay var(--fast) allow-discrete, + display var(--fast) allow-discrete; + + li { + align-items: start; + display: flex; + flex-direction: row; } } + [data-menu~='outer'] { + position-area: block-end span-inline-end; + position-try-fallbacks: top, right; + inline-size: max-content; + min-inline-size: anchor-size(); + inset-block-start: var(--outer-popover-inset, var(--popover-offset)); + } + + [data-menu~='nested'] { + position-area: span-block-end inline-end; + position-try: block-end span-inline-end; + inset-inline-start: var(--nested-popover-inset, var(--popover-offset)); + } + .nav-list { align-items: center; display: flex; @@ -23,24 +62,6 @@ margin: 0; padding: 0; - .menu { - position-area: block-end span-inline-end; - inline-size: max-content; - margin: 0; - min-inline-size: anchor-size(); - - li { - align-items: start; - display: flex; - flex-direction: row - } - - .sub-menu { - position-area: span-block-end inline-end; - position-try: block-end span-inline-end; - } - } - button:has(+ :popover-open) { --rotate-btn-icon: 90deg; } @@ -67,7 +88,7 @@ margin-block-start: .25ch; rotate: var(--rotate-btn-icon, 0); - transition: rotate 0.2s ease-in; + transition: rotate var(--fast) ease-in; .gradient-start { stop-color: var(--disclosure-gradient-start, var(--gradient-start-default)); @@ -99,7 +120,7 @@ display: inline-flex; font-size: inherit; padding: 0.5em 0.75em; - transition: color 0.3s ease-in-out; + transition: background var(--slow) ease-in, color var(--slow) ease-in-out; } [data-icon] { @@ -160,6 +181,11 @@ --quarter-gap: calc(var(--gap) / 4); --double-gap: calc(var(--gap) * 2); + /* Transition Timing */ + --faster: 100ms; + --fast: 250ms; + --slow: 500ms; + /* colors */ color-scheme: light dark; --accent-color: light-dark(oklch(66.3% 0.234 253), oklch(45.2% 0.054 302)); From a6fc2e3f67b71fad384b776a84bada3db2a3beea Mon Sep 17 00:00:00 2001 From: dvdherron Date: Fri, 17 Oct 2025 11:39:52 +0200 Subject: [PATCH 08/17] lint --- src/dropdown/index.html | 529 +++++++++++++++------------------------- 1 file changed, 203 insertions(+), 326 deletions(-) diff --git a/src/dropdown/index.html b/src/dropdown/index.html index 33d1950..3838e2b 100644 --- a/src/dropdown/index.html +++ b/src/dropdown/index.html @@ -1,336 +1,213 @@ - - - - - Bird News Daily - - -
-

Bird News Daily

-

- Building a Disclosure Navigation with Baseline features -

-
- + + + + + +
  • + Sightings +
    • +
  • + Birdsong Recordings +
    • +
  • + Photo Essays +
    • +
  • + The Sunday Interview +
    • + + +
  • + + +
    • + + + +
    +
    +

    Bird News Daily

    +
    +
    -
    -
    -

    Bird News Daily

    -
    -
    +
    +

    ©2025 Bird News Daily

    +
    + + -
    -

    ©2025 Bird News Daily

    -
    - - From 3692d317e5f2fb34019d05d7619ccea4e966f183 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 23 Oct 2025 09:36:53 -0400 Subject: [PATCH 09/17] Add more content, add to sitemap --- src/dropdown/index.html | 54 +++++++++++++++++++++++++++++++++++++++-- src/dropdown/script.js | 9 +++++++ src/index.html | 1 + 3 files changed, 62 insertions(+), 2 deletions(-) diff --git a/src/dropdown/index.html b/src/dropdown/index.html index 3838e2b..451780e 100644 --- a/src/dropdown/index.html +++ b/src/dropdown/index.html @@ -197,13 +197,63 @@

    Bird News Daily

    -

    Bird News Daily

    +
    +

    + Quail eider garganey eu scotering Tinamou nostrud Tinamou nightjar sit + sunt peregrine non cuckoo puffin incididunt. +

    +

    + Vesper sparrow qui nisi labore ut do duail peregrine cupidatat occaecat + ea minim garganey avocet. Duail enim in scotering nisi avocet amet. +

    +

    + Amet cackling goose ea hummingbird sunt amet puffin officia in quail + garganey cackling goose est. Ut hummingbird quail cuckoo peregrine + cackling goose ex consequat ut sunt owl ea vesper sparrow amet. +

    +
    + +
    -

    ©2025 Bird News Daily

    diff --git a/src/dropdown/script.js b/src/dropdown/script.js index 163e498..10fdd17 100644 --- a/src/dropdown/script.js +++ b/src/dropdown/script.js @@ -3,6 +3,7 @@ window.addEventListener("hashchange", () => { }); const CONTAINS_PATH_TEXT = "Contains current page link"; +let shownBlock = 0; function handleRoute(newPage) { // Close all open popovers, would be unneeded if we actually had navigated to a new page @@ -14,6 +15,14 @@ function handleRoute(newPage) { const heading = document.getElementById("id-page-title"); heading.innerText = newPage; + const contentBlocks = document.querySelectorAll("[data-article]"); + shownBlock = (shownBlock + 1) % contentBlocks.length; + + contentBlocks.forEach((block, index) => { + if(index === shownBlock) block.removeAttribute('hidden'); + else block.setAttribute('hidden', ''); + }); + const formerLink = document.querySelector("[aria-current]"); if (formerLink) formerLink.removeAttribute("aria-current"); diff --git a/src/index.html b/src/index.html index aaa5501..2c8cf99 100644 --- a/src/index.html +++ b/src/index.html @@ -28,6 +28,7 @@

    List of Demos

    From 844134c28d656c18d76f0592b1c3250f45b98abd Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 23 Oct 2025 21:13:52 +0200 Subject: [PATCH 10/17] clean up popover styles --- src/dropdown/style.css | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index e6a58a7..12a4db7 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -4,6 +4,20 @@ [data-menu] { --popover-offset: -10px; + border: 1px solid var(--border-color); + border-radius: 3px; + opacity: var(--show-menu, 0); + padding: 1rem 0; + position: absolute; + /* Override default popover browser styles */ + margin: 0; + inset: auto; + transition: + opacity var(--slow), + inset var(--fast), + overlay var(--slow) allow-discrete, + display var(--slow) allow-discrete; + &:popover-open { --show-menu: 1; --outer-popover-inset: 0; @@ -13,25 +27,11 @@ @starting-style { --show-menu: 0; - --outer-popover-inset: var(--popover-offset); - --nested-popover-inset: var(--popover-offset); + --outer-popover-inset: -10px; + --nested-popover-inset: -10px; } } - border: 1px solid var(--border-color); - border-radius: 3px; - opacity: var(--show-menu, 0); - padding: 1rem 0; - position: absolute; - /* Override default popover browser styles */ - margin: 0; - inset: auto; - transition: - opacity var(--slow), - inset var(--fast), - overlay var(--fast) allow-discrete, - display var(--fast) allow-discrete; - li { align-items: start; display: flex; @@ -41,7 +41,7 @@ [data-menu~='outer'] { position-area: block-end span-inline-end; - position-try-fallbacks: top, right; + position-try-fallbacks: flip-inline, span-inline-start, center, flip-block; inline-size: max-content; min-inline-size: anchor-size(); inset-block-start: var(--outer-popover-inset, var(--popover-offset)); @@ -50,6 +50,7 @@ [data-menu~='nested'] { position-area: span-block-end inline-end; position-try: block-end span-inline-end; + position-try-fallbacks: flip-inline, inline-start; inset-inline-start: var(--nested-popover-inset, var(--popover-offset)); } From 66e04de4a1280a7d0afdc429cef97ebcb2ddbedd Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 23 Oct 2025 21:37:50 +0200 Subject: [PATCH 11/17] make main content narrower --- src/dropdown/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index 12a4db7..ee1a38e 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -142,7 +142,10 @@ } main { + display: grid; grid-area: main; + grid-template-columns: minmax(0, 60ch); + margin-inline: auto; padding: var(--gap) 1em; } From 9345f50eb82899994db2b9be1f7100d6183910f7 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Fri, 24 Oct 2025 11:59:59 +0200 Subject: [PATCH 12/17] add animation media query --- src/dropdown/style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index ee1a38e..d6cbbeb 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -11,7 +11,7 @@ position: absolute; /* Override default popover browser styles */ margin: 0; - inset: auto; + inset: auto; transition: opacity var(--slow), inset var(--fast), @@ -30,6 +30,11 @@ --outer-popover-inset: -10px; --nested-popover-inset: -10px; } + + @media (prefers-reduced-motion: reduce) { + --outer-popover-inset: auto; + --nested-popover-inset: auto; + } } li { From d3ce6faf0389ecd7c37091dda21e5887e83c9474 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Mon, 27 Oct 2025 12:23:28 +0100 Subject: [PATCH 13/17] fix grid layout in safari --- src/dropdown/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index d6cbbeb..cdf8420 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -23,6 +23,7 @@ --outer-popover-inset: 0; --nested-popover-inset: 0; + align-content: start; display: grid; @starting-style { From 3a17aad24f478ca7447a64d43d5575c7dc54c326 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Mon, 27 Oct 2025 12:35:17 +0100 Subject: [PATCH 14/17] fix anchor positioning --- src/dropdown/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index cdf8420..d5a5530 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -47,7 +47,7 @@ [data-menu~='outer'] { position-area: block-end span-inline-end; - position-try-fallbacks: flip-inline, span-inline-start, center, flip-block; + position-try-fallbacks: flip-inline; inline-size: max-content; min-inline-size: anchor-size(); inset-block-start: var(--outer-popover-inset, var(--popover-offset)); @@ -55,8 +55,7 @@ [data-menu~='nested'] { position-area: span-block-end inline-end; - position-try: block-end span-inline-end; - position-try-fallbacks: flip-inline, inline-start; + position-try: flip-inline, flip-start; inset-inline-start: var(--nested-popover-inset, var(--popover-offset)); } From b12cd12617d4256c3350699d30aaa8e95b445da3 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Mon, 27 Oct 2025 12:44:27 +0100 Subject: [PATCH 15/17] add extra space after main content --- src/dropdown/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index d5a5530..19aa5d0 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -151,7 +151,7 @@ grid-area: main; grid-template-columns: minmax(0, 60ch); margin-inline: auto; - padding: var(--gap) 1em; + padding: var(--gap) 1em calc(var(--gap) * 3); } nav { From 5818b8fbe68928bfbb26b4c0d45cca50ab4efe79 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Tue, 28 Oct 2025 13:11:58 +0100 Subject: [PATCH 16/17] cleanup popover alignment on transition --- src/dropdown/style.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index 19aa5d0..3295010 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -3,9 +3,11 @@ @layer components { [data-menu] { --popover-offset: -10px; - + align-content: start; border: 1px solid var(--border-color); border-radius: 3px; + box-shadow: 4px 8px 10px 0 var(--shadow), + 0 6px 8px 0 var(--shadow); opacity: var(--show-menu, 0); padding: 1rem 0; position: absolute; @@ -23,9 +25,13 @@ --outer-popover-inset: 0; --nested-popover-inset: 0; - align-content: start; display: grid; + @supports not (position-area: block-end span-inline-end) { + --outer-popover-inset: auto; + --nested-popover-inset: auto; + } + @starting-style { --show-menu: 0; --outer-popover-inset: -10px; @@ -203,6 +209,7 @@ --highlight-color: light-dark(oklch(43.9% 0.132 250), oklch(92.6% 0.132 250)); --border-color: light-dark(oklch(62.5% 0 none), oklch(87% 0 none)); + --shadow: light-dark(oklch(from var(--border-color) l c h / 0.753), oklch(24.899% 0.00564 285.917 / 0.83)); --outline-color: light-dark(oklch(50.9% 0.37 323.38), oklch(93.9% 0.37 323.38)); --color-primary: light-dark(oklch(88.631% 0.02763 225), From 6f85fc21ecf73b63763647e75460096d74292558 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 6 Nov 2025 09:02:15 -0500 Subject: [PATCH 17/17] Remove exit animation if overlay not supported, fixes Safari --- src/dropdown/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/dropdown/style.css b/src/dropdown/style.css index 3295010..fe77322 100644 --- a/src/dropdown/style.css +++ b/src/dropdown/style.css @@ -18,7 +18,11 @@ opacity var(--slow), inset var(--fast), overlay var(--slow) allow-discrete, - display var(--slow) allow-discrete; + display var(--display-timing, var(--slow)) allow-discrete; + + @supports not (overlay: auto) { + --display-timing: 0s; + } &:popover-open { --show-menu: 1;