@uncinq/css-components 1.8.0 → 1.9.0

package/css/components/button.css

@@ -1,6 +1,9 @@
 /* components/button.css */
 @layer components {
   .btn {
+    --icon-margin-inline-start: 0;
+    --icon-size: var(--btn-font-size);
+
     align-items: center;
     appearance: none;
     background-color: var(--btn-color-background);

package/css/components/drawer.css

@@ -1,106 +1,51 @@
 /* components/drawer.css */
 /*
- * .drawer — slide-in panel, vanilla JS driven.
+ * .drawer — panel sliding in from an edge.
  *
- * JS (components/drawer.js) manages:
- *   .showing  — panel becoming visible (open transition)
- *   .show     — panel fully open
- *   .hiding   — panel becoming hidden (close transition)
- *   aria-hidden="true" when closed
- *   body.drawer-open when panel is open
+ * A variant is pure configuration: this file declares nothing but --panel-*
+ * tokens. components/panel.css owns every rule — structure, placement,
+ * open/closed contract and backdrop.
  *
- * Triggers: .js-drawer-toggle[data-target="#id"]
- * Close:    .js-drawer-close (inside panel)
+ * Works on a <dialog> opened with showModal() and on any element carrying
+ * popover="auto", opened with showPopover(). Both land in the top layer and
+ * get the native ::backdrop. Reach for the second form when the panel is not
+ * always modal: combined with .panel-inline-* it becomes a region of the
+ * page above a breakpoint, which a <dialog> cannot be without claiming
+ * role="dialog" the whole time.
  *
  * Position variants: .drawer-start | .drawer-end | .drawer-top | .drawer-bottom
+ * Inline variants:   .panel-inline-* — see components/panel.css
  *
- * Expected HTML:
- *   <div id="navigation" class="drawer drawer-start" role="dialog" aria-modal="true" aria-hidden="true">
- *     <div class="header">
- *       <span class="title">...</span>
- *       <button class="js-drawer-close btn">...</button>
- *     </div>
- *     <div class="content">...</div>
- *   </div>
+ * Triggers: .js-dialog-toggle[data-target="#id"]
+ * Close:    .js-dialog-close inside the panel, Escape, or a click outside
  */
 @layer components {
-
-  /* ── Panel ───────────────────────────────────────────────────────── */
-
   .drawer {
-    --color-link: var(--drawer-color-text);
-    --nav-color-text: var(--color-link);
-
-    background-color: var(--drawer-color-background);
-    bottom: var(--drawer-bottom, 0);
-    box-shadow: var(--drawer-shadow);
-    color: var(--drawer-color-text);
-    display: flex;
-    flex-direction: column;
-    inset-inline-start: var(--drawer-start, auto);
-    inset-inline-end: var(--drawer-end, 0);
-    max-width: 100%;
-    overflow: hidden;
-    position: fixed;
-    top: var(--drawer-top, 0);
-    transform: var(--drawer-translate, translateX(100%));
-    visibility: hidden;
-    width: var(--drawer-width);
-    z-index: var(--drawer-z-index);
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition-duration: var(--drawer-transition-duration);
-      transition-property: transform, visibility;
-      transition-timing-function: var(--drawer-transition-easing);
-    }
-
-    /* Visible during transitions and when open */
-    &.show,
-    &.showing,
-    &.hiding {
-      visibility: visible;
-    }
-
-    /* Fully open — remove transform */
-    &.show {
-      transform: none;
-    }
-
-    /* ── Header ────────────────────────────────────────────────────── */
-
-    & > .header {
-      align-items: center;
-      border-block-end: var(--drawer-border-width) var(--drawer-border-style) var(--drawer-border-color);
-      display: flex;
-      flex-shrink: 0;
-      justify-content: space-between;
-      padding-block: var(--drawer-header-padding-block, var(--drawer-padding-block));
-      padding-inline: var(--drawer-header-padding-inline, var(--drawer-padding-inline));
-
-      & .title {
-        font-size: var(--font-size-md);
-        font-weight: var(--font-weight-heading);
-        margin: 0;
-      }
-    }
-
-    /* ── Body ──────────────────────────────────────────────────────── */
-
-    & > .content {
-      flex-grow: 1;
-      overflow-y: auto;
-      padding-block: var(--drawer-header-padding-block, var(--drawer-padding-block));
-      padding-inline: var(--drawer-header-padding-inline, var(--drawer-padding-inline));
-    }
-
-    /* ── Footer ──────────────────────────────────────────────────────── */
-
-    & > .footer {
-      border-block-start: var(--drawer-border-width) var(--drawer-border-style) var(--drawer-border-color);
-      flex-shrink: 0;
-      padding-block: var(--drawer-header-padding-block, var(--drawer-padding-block));
-      padding-inline: var(--drawer-header-padding-inline, var(--drawer-padding-inline));
-    }
+    /* Structure */
+    --panel-backdrop-blur: var(--drawer-backdrop-blur);
+    --panel-backdrop-color: var(--drawer-backdrop-color);
+    --panel-border-style: var(--drawer-border-style);
+    --panel-border-width: var(--drawer-border-width);
+    --panel-color-background: var(--drawer-color-background);
+    --panel-color-border: var(--drawer-color-border);
+    --panel-color-text: var(--drawer-color-text);
+    --panel-content-padding-block: var(--drawer-content-padding-block, var(--drawer-padding-block));
+    --panel-content-padding-inline: var(--drawer-content-padding-inline, var(--drawer-padding-inline));
+    --panel-footer-padding-block: var(--drawer-footer-padding-block, var(--drawer-padding-block));
+    --panel-footer-padding-inline: var(--drawer-footer-padding-inline, var(--drawer-padding-inline));
+    --panel-header-padding-block: var(--drawer-header-padding-block, var(--drawer-padding-block));
+    --panel-header-padding-inline: var(--drawer-header-padding-inline, var(--drawer-padding-inline));
+    --panel-shadow: var(--drawer-shadow);
+    --panel-transition-duration: var(--drawer-transition-duration);
+    --panel-transition-easing: var(--drawer-transition-easing);
+
+    /* Placement — two edges pinned, the opposite ones auto. The margin stays
+       at 0 so the UA rules that centre a modal <dialog> do not apply. */
+    --panel-inline-size: var(--drawer-width);
+    --panel-inset-block: var(--drawer-top) var(--drawer-bottom);
+    --panel-inset-inline: var(--drawer-start) var(--drawer-end);
+    --panel-max-inline-size: 100%;
+    --panel-translate: var(--drawer-translate);
   }
 
   /* ── Position variants ───────────────────────────────────────────── */
@@ -112,80 +57,28 @@
   }
 
   .drawer-end {
-    --drawer-start: auto;
     --drawer-end: 0;
+    --drawer-start: auto;
     --drawer-translate: translateX(100%);
   }
 
   .drawer-top {
+    --drawer-bottom: auto;
     --drawer-end: 0;
     --drawer-start: 0;
     --drawer-top: 0;
     --drawer-translate: translateY(-100%);
-    height: var(--drawer-height);
+    --panel-block-size: var(--drawer-height);
+    --panel-inline-size: auto;
   }
 
   .drawer-bottom {
+    --drawer-bottom: 0;
     --drawer-end: 0;
     --drawer-start: 0;
-    --drawer-bottom: 0;
+    --drawer-top: auto;
     --drawer-translate: translateY(100%);
-    height: var(--drawer-height);
-  }
-
-  /* ── Responsive variants (static above breakpoint) ──────────────── */
-
-  .drawer-tablet {
-    @media (--tablet) {
-      box-shadow: none;
-      overflow: visible;
-      position: static;
-      transform: none;
-      transition: none;
-      visibility: visible;
-      width: auto;
-      z-index: auto;
-    }
-  }
-
-  .drawer-laptop {
-    @media (--laptop) {
-      box-shadow: none;
-      overflow: visible;
-      position: static;
-      transform: none;
-      transition: none;
-      visibility: visible;
-      width: auto;
-      z-index: auto;
-    }
-  }
-
-  /* ── Backdrop ────────────────────────────────────────────────────── */
-
-  .drawer-backdrop {
-    backdrop-filter: blur(var(--drawer-backdrop-blur));
-    background-color: var(--drawer-backdrop-color);
-    inset: 0;
-    position: fixed;
-    z-index: calc(var(--drawer-z-index) - 1);
-
-    &.fade {
-      opacity: 0;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: opacity var(--drawer-transition-duration) var(--drawer-transition-easing);
-      }
-    }
-
-    &.show {
-      opacity: 1;
-    }
-  }
-
-  /* ── Body scroll lock ────────────────────────────────────────────── */
-
-  body.drawer-open {
-    overflow: hidden;
+    --panel-block-size: var(--drawer-height);
+    --panel-inline-size: auto;
   }
 }

package/css/components/dropdown.css

@@ -79,6 +79,7 @@
     list-style: none;
     min-width: var(--dropdown-min-width);
     opacity: 0;
+    overflow: hidden;
     padding: var(--dropdown-padding, 0);
     pointer-events: none;
     position: absolute;

package/css/components/map.css

@@ -13,7 +13,7 @@
     margin-block: var(--map-margin-block);
     overflow: hidden;
 
-    @media not (--tablet) {
+    @media not (--sm) {
       --map-ratio: var(--map-ratio-mobile);
       .container & {
         margin-inline: calc(-1 * var(--gutter));

package/css/components/modal.css

@@ -1,151 +1,59 @@
 /* components/modal.css */
 /*
- * .modal — centered dialog, native <dialog>.
+ * .modal — centred panel.
  *
- * JS (components/modal.js) only calls showModal() / close(): [open] and
- * ::backdrop drive the styling, and the browser handles Escape, the focus trap
- * and making the rest of the page inert. No state class, no backdrop element.
+ * A variant is pure configuration: this file declares nothing but --panel-*
+ * tokens. components/panel.css owns every rule — structure, placement,
+ * open/closed contract and backdrop.
  *
- * The dialog sits in the top layer, so it needs no z-index.
- *
- * Triggers: .js-dialog-toggle[data-target="#id"]
- * Close:    .js-dialog-close (inside the panel), click outside the panel
+ * Works on a <dialog> opened with showModal() and on any element carrying
+ * popover="auto", opened with showPopover(). Both land in the top layer and
+ * get the native ::backdrop. Reach for the second form only when the panel is not
+ * always modal, typically when .panel-inline-* turns it into a region of the
+ * page above a breakpoint.
  *
  * Per-instance sizing: override --modal-max-width on the element.
  *
- * Expected HTML:
- *   <dialog id="navigation" class="modal" aria-labelledby="navigationLabel" aria-modal="true">
- *     <div class="header">
- *       <p class="title" id="navigationLabel">...</p>
- *       <button class="btn-close js-dialog-close">...</button>
- *     </div>
- *     <div class="content">...</div>
- *     <div class="footer">...</div>
- *   </dialog>
+ * Triggers: .js-dialog-toggle[data-target="#id"]
+ * Close:    .js-dialog-close inside the panel, Escape, or a click outside
  */
 @layer components {
-
-  /* ── Panel ───────────────────────────────────────────────────────── */
-
   .modal {
-    background-color: var(--modal-color-background);
-    border: 0;
-    border-radius: var(--modal-radius);
-    box-shadow: var(--modal-shadow);
-    color: var(--modal-color-text);
-    display: flex;
-    flex-direction: column;
-    inline-size: 100%;
+    /* Structure */
+    --panel-backdrop-blur: var(--modal-backdrop-blur);
+    --panel-backdrop-color: var(--modal-backdrop-color);
+    --panel-border-style: var(--modal-border-style);
+    --panel-border-width: var(--modal-border-width);
+    --panel-color-background: var(--modal-color-background);
+    --panel-color-border: var(--modal-color-border);
+    --panel-color-text: var(--modal-color-text);
+    --panel-content-padding-block: var(--modal-content-padding-block, var(--modal-padding-block));
+    --panel-content-padding-inline: var(--modal-content-padding-inline, var(--modal-padding-inline));
+    --panel-footer-padding-block: var(--modal-footer-padding-block, var(--modal-padding-block));
+    --panel-footer-padding-inline: var(--modal-footer-padding-inline, var(--modal-padding-inline));
+    --panel-header-padding-block: var(--modal-header-padding-block, var(--modal-padding-block));
+    --panel-header-padding-inline: var(--modal-header-padding-inline, var(--modal-padding-inline));
+    --panel-radius: var(--modal-radius);
+    --panel-shadow: var(--modal-shadow);
+    --panel-transition-duration: var(--modal-transition-duration);
+    --panel-transition-easing: var(--modal-transition-easing);
+
+    /* Placement — inset 0 with auto margins centres the panel on both axes.
+       The height is fit-content and not auto: with both block insets set, an
+       auto height is resolved to fill the gap and the auto margins collapse to
+       0, so the panel would neither centre nor shrink to its content. The UA
+       dialog stylesheet uses fit-content for that very reason. */
+    --panel-block-size: fit-content;
+    --panel-inline-size: 100%;
+    --panel-inset-block: 0;
+    --panel-inset-inline: 0;
+    --panel-margin: auto;
     /* min() replaces the mobile breakpoint: the panel always keeps
        --modal-margin clear of the viewport edges, whatever the max is set to */
-    max-block-size: min(var(--modal-max-height), 100% - var(--modal-margin) * 2);
-    max-inline-size: min(var(--modal-max-width), 100% - var(--modal-margin) * 2);
-    opacity: 0;
-    /* padding lives on the sections, so a click on the dialog itself is
-       always a click on the backdrop */
-    overflow: hidden;
-    padding: 0;
-    transform: var(--modal-translate);
-
-    /* display: flex would override the UA rule that hides a closed dialog */
-    &:not([open]) {
-      display: none;
-    }
-
-    /* Fully open — settle the panel */
-    &[open] {
-      opacity: 1;
-      transform: none;
-    }
-
-    /* allow-discrete keeps the dialog in the top layer while it fades out */
-    @media (prefers-reduced-motion: no-preference) {
-      transition-behavior: allow-discrete;
-      transition-duration: var(--modal-transition-duration);
-      transition-property: opacity, transform, display, overlay;
-      transition-timing-function: var(--modal-transition-easing);
-    }
-
-    /* ── Header ────────────────────────────────────────────────────── */
-
-    & > .header {
-      align-items: center;
-      border-block-end: var(--modal-border-width) var(--modal-border-style) var(--modal-border-color);
-      display: flex;
-      flex-shrink: 0;
-      justify-content: space-between;
-      padding-block: var(--modal-header-padding-block, var(--modal-padding-block));
-      padding-inline: var(--modal-header-padding-inline, var(--modal-padding-inline));
-
-      & .title {
-        font-size: var(--font-size-md);
-        font-weight: var(--font-weight-heading);
-        margin: 0;
-      }
-    }
-
-    /* ── Body ──────────────────────────────────────────────────────── */
-
-    & > .content {
-      flex-grow: 1;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding-block: var(--modal-content-padding-block, var(--modal-padding-block));
-      padding-inline: var(--modal-content-padding-inline, var(--modal-padding-inline));
-    }
-
-    /* ── Footer ────────────────────────────────────────────────────── */
-
-    & > .footer {
-      border-block-start:var(--modal-border-width) var(--modal-border-style) var(--modal-border-color);
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 0;
-      gap: var(--spacing-sm);
-      padding-block: var(--modal-footer-padding-block, var(--modal-padding-block));
-      padding-inline: var(--modal-footer-padding-inline, var(--modal-padding-inline));
-
-      @media (--tablet) {
-        flex-direction: row;
-        justify-content: flex-end;
-      }
-    }
-  }
-
-  /* ── Backdrop ────────────────────────────────────────────────────── */
-
-  .modal::backdrop {
-    backdrop-filter: blur(var(--modal-backdrop-blur));
-    background-color: var(--modal-backdrop-color);
-    opacity: 0;
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition-behavior: allow-discrete;
-      transition-duration: var(--modal-transition-duration);
-      transition-property: opacity, display, overlay;
-      transition-timing-function: var(--modal-transition-easing);
-    }
-  }
-
-  .modal[open]::backdrop {
-    opacity: 1;
-  }
-
-  /* Opening is a discrete display change — both need an explicit start state */
-  @starting-style {
-    .modal[open] {
-      opacity: 0;
-      transform: var(--modal-translate);
-    }
-
-    .modal[open]::backdrop {
-      opacity: 0;
-    }
-  }
-
-  /* ── Page scroll lock ────────────────────────────────────────────── */
-
-  body:has(.modal[open]) {
-    overflow: hidden;
+    --panel-max-block-size: min(var(--modal-max-height), 100% - var(--modal-margin) * 2);
+    --panel-max-inline-size: min(var(--modal-max-width), 100% - var(--modal-margin) * 2);
+    --panel-min-block-size: var(--modal-min-height);
+    --panel-opacity: 0;
+    --panel-translate: var(--modal-translate);
   }
 }

package/css/components/nav.css

@@ -25,7 +25,9 @@
       gap: var(--nav-gap);
       list-style: var(--nav-list-style, none);
       margin-block: var(--nav-margin-block, 0);
-      padding-inline-start: var(--nav-padding-inline-start, 0);
+      margin-inline: var(--nav-margin-inline);
+      padding-block: var(--nav-padding-block);
+      padding-inline: var(--nav-padding-inline, 0);
     }
 
     /* ── Nav item ────────────────────────────────────────────────── */
@@ -38,27 +40,22 @@
 
     /* ── Links ───────────────────────────────────────────────────── */
 
-    a {
+    a:where(:not(.btn)),
+    li > span {
+      color: var(--nav-color-text);
       display: block;
       padding-block: var(--nav-link-padding-block);
       padding-inline: var(--nav-link-padding-inline);
       text-transform: var(--nav-link-text-transform);
-    }
-
-    a:not(.btn) {
-      color: var(--nav-color-text);
       &.active {
         --nav-color-text: var(--nav-color-text-active);
       }
     }
 
-    /* Non-link items (current page rendered as span) */
-    li > span {
+    /* ── Dropdown ───────────────────────────────────────────────────── */
+
+    .dropdown-toggle {
       color: var(--nav-color-text);
-      display: block;
-      padding-block: var(--nav-link-padding-block);
-      padding-inline: var(--nav-link-padding-inline);
-      text-transform: var(--nav-link-text-transform);
     }
 
     /* ── Item highlighted ───────────────────────────────────────────────────── */

package/css/components/pagination.css

@@ -91,7 +91,7 @@
     }
 
     /* On small screens: hide first/last controls and non-adjacent page numbers */
-    @media not (--tablet) {
+    @media not (--sm) {
       .first,
       .last,
       li:has(.first),

package/css/components/panel.css

@@ -0,0 +1,432 @@
+/* components/panel.css */
+/*
+ * Shared skeleton for .modal and .drawer.
+ *
+ * Both are the same panel — header / content / footer, same open/closed
+ * contract — and differ only in where they sit: modal.css centres them,
+ * drawer.css sticks them to an edge.
+ *
+ * The tag picks the strategy, not the class. Either variant can be:
+ * - <dialog> opened with showModal() — [open], native ::backdrop, top layer,
+ *   and the browser handles Escape, the focus trap and inertness;
+ * - any element carrying popover="auto", opened by components/dialog.js
+ *   with showPopover() — same top layer, same ::backdrop, but no role of its
+ *   own. Use this when the panel becomes a static region of the page above a
+ *   breakpoint (see .panel-inline-*): a <dialog> is exposed as role="dialog"
+ *   even when it is only styled as a sidebar, whereas dialog.js sets that
+ *   role solely while the panel is open.
+ *
+ * Most selectors here are :where()-wrapped so they carry no specificity: the
+ * variants and the host components always win without escalating. The
+ * .panel-inline-* variants are the exception — they must beat .modal and
+ * .drawer, which they do on source order, so this file is imported last.
+ *
+ * Structure reads --panel-* tokens; each variant aliases them from its own
+ * namespace, so --modal-* and --drawer-* stay the public API.
+ *
+ * Expected HTML:
+ *   <dialog class="modal" id="x" aria-labelledby="xLabel">
+ *     <div class="header">
+ *       <p class="title" id="xLabel">...</p>
+ *       <button class="btn-close js-dialog-close"></button>
+ *     </div>
+ *     <div class="content">...</div>
+ *     <div class="footer">...</div>
+ *   </dialog>
+ */
+@layer components {
+
+  /* ── Open / closed ─────────────────────────────────────────────────
+   * `display` is only ever declared on a state selector: declaring it on the
+   * panel itself would beat the UA rule that hides a closed <dialog>. Both
+   * rules carry no specificity, so .panel-inline-* can put the panel back
+   * into the flow with a single class. */
+
+  :where(.modal, .drawer):not(:where([open], :popover-open)) {
+    display: none;
+  }
+
+  /* :is() and not :where() on the state: this has to beat the base rule below,
+     which is 0,0,0 and comes later in the file. 0,1,0 wins on specificity
+     rather than on source order, and still leaves a host component — .toc
+     .drawer is 0,2,0 — room to override without escalating. */
+  :where(.modal, .drawer):is([open], :popover-open) {
+    display: flex;
+    opacity: 1;
+    transform: none;
+  }
+
+  /* ── Panel ─────────────────────────────────────────────────────── */
+
+  :where(.modal, .drawer) {
+    --color-link: var(--panel-color-text);
+    --color-link-hover: var(--panel-color-text);
+    --nav-color-text: var(--color-link);
+
+    background-color: var(--panel-color-background);
+    border: 0;
+    border-radius: var(--panel-radius, 0);
+    box-shadow: var(--panel-shadow);
+    color: var(--panel-color-text);
+    flex-direction: column;
+    overflow: hidden;
+    /* padding lives on the sections, so a click on the panel itself is
+       always a click on the backdrop */
+    padding: 0;
+
+    /* Placement — every value comes from the variant. A modal centres itself
+       with inset 0 + margin auto; a drawer pins two edges and leaves the
+       others auto. Declaring position/inset explicitly also covers <dialog>,
+       whose UA rules would otherwise centre an edge panel. */
+    block-size: var(--panel-block-size, auto);
+    inline-size: var(--panel-inline-size, auto);
+    inset-block: var(--panel-inset-block, auto);
+    inset-inline: var(--panel-inset-inline, auto);
+    margin: var(--panel-margin, 0);
+    max-block-size: var(--panel-max-block-size, none);
+    max-inline-size: var(--panel-max-inline-size, none);
+    min-block-size: var(--panel-min-block-size, auto);
+    /* Closed state, so also the values the panel animates FROM — the
+       @starting-style block below restates these two. A drawer leaves opacity
+       alone and only slides; a modal sets 0 and fades as well. */
+    opacity: var(--panel-opacity, 1);
+    position: fixed;
+    transform: var(--panel-translate, none);
+
+    /* allow-discrete keeps the panel displayed while it transitions out, and
+       keeps a <dialog> in the top layer until the transition ends */
+    @media (prefers-reduced-motion: no-preference) {
+      transition-behavior: allow-discrete;
+      transition-duration: var(--panel-transition-duration);
+      transition-property: display, opacity, overlay, transform;
+      transition-timing-function: var(--panel-transition-easing);
+    }
+
+    /* ── Header ──────────────────────────────────────────────────── */
+
+    & > .header {
+      align-items: center;
+      border-block-end: var(--panel-border-width) var(--panel-border-style) var(--panel-color-border);
+      display: flex;
+      flex-shrink: 0;
+      justify-content: space-between;
+      padding-block: var(--panel-header-padding-block);
+      padding-inline: var(--panel-header-padding-inline);
+
+      & .title {
+        font-size: var(--font-size-md);
+        font-weight: var(--font-weight-heading);
+        margin: 0;
+      }
+    }
+
+    /* ── Body ────────────────────────────────────────────────────── */
+
+    & > .content {
+      flex-grow: 1;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding-block: var(--panel-content-padding-block);
+      padding-inline: var(--panel-content-padding-inline);
+    }
+
+    /* ── Footer ──────────────────────────────────────────────────── */
+
+    & > .footer {
+      border-block-start: var(--panel-border-width) var(--panel-border-style) var(--panel-color-border);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      gap: var(--spacing-sm);
+      padding-block: var(--panel-footer-padding-block);
+      padding-inline: var(--panel-footer-padding-inline);
+
+      @media (--sm) {
+        flex-direction: row;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  /* ── Inline variants ───────────────────────────────────────────────
+   * Above the chosen breakpoint the panel stops being an overlay and becomes
+   * a region of the page: the host component then only styles what is its
+   * own (sticky behaviour, labels, nav layout). Written once here, so adding
+   * a property to .modal or .drawer means neutralising it right below rather
+   * than patching every host component.
+   *
+   * The panel must NOT be a <dialog> when one of these is used — see the
+   * strategy note at the top of this file. components/dialog.js also closes
+   * an open panel carrying one of these classes when the viewport width
+   * changes, since CSS alone cannot release the backdrop, the scroll lock
+   * and the inert background. */
+
+  .panel-inline-sm {
+    @media (--sm) {
+      /* Colours go too, not just geometry: a region of the page carries none
+         of the panel's chrome and takes the page's own text and link colours.
+         `inherit` on a custom property hands it back to the parent, which is
+         exactly what is wanted here — and it has to be done token by token.
+         Resetting --panel-color-text, which the three derive from, would make
+         them invalid at computed-value time rather than page-valued, and every
+         link would fall back to the surrounding text colour instead of the
+         site's link colour. Keep this list in step with the panel rule above. */
+      --color-link: inherit;
+      --color-link-hover: inherit;
+      --nav-color-text: inherit;
+
+      background-color: transparent;
+      block-size: auto;
+      border-radius: 0;
+      box-shadow: none;
+      color: inherit;
+      display: flex;
+      inline-size: auto;
+      inset-block: auto;
+      inset-inline: auto;
+      margin: 0;
+      max-block-size: none;
+      max-inline-size: none;
+      min-block-size: auto;
+      opacity: 1;
+      overflow: visible;
+      position: static;
+      transform: none;
+      transition: none;
+
+      > .header,
+      > .footer {
+        display: none;
+      }
+
+      > .content {
+        flex-grow: 0;
+        overflow-y: visible;
+        overscroll-behavior: auto;
+        padding: 0;
+      }
+    }
+  }
+
+  .panel-inline-md {
+    @media (--md) {
+      /* Colours go too, not just geometry: a region of the page carries none
+         of the panel's chrome and takes the page's own text and link colours.
+         `inherit` on a custom property hands it back to the parent, which is
+         exactly what is wanted here — and it has to be done token by token.
+         Resetting --panel-color-text, which the three derive from, would make
+         them invalid at computed-value time rather than page-valued, and every
+         link would fall back to the surrounding text colour instead of the
+         site's link colour. Keep this list in step with the panel rule above. */
+      --color-link: inherit;
+      --color-link-hover: inherit;
+      --nav-color-text: inherit;
+
+      background-color: transparent;
+      block-size: auto;
+      border-radius: 0;
+      box-shadow: none;
+      color: inherit;
+      display: flex;
+      inline-size: auto;
+      inset-block: auto;
+      inset-inline: auto;
+      margin: 0;
+      max-block-size: none;
+      max-inline-size: none;
+      min-block-size: auto;
+      opacity: 1;
+      overflow: visible;
+      position: static;
+      transform: none;
+      transition: none;
+
+      > .header,
+      > .footer {
+        display: none;
+      }
+
+      > .content {
+        flex-grow: 0;
+        overflow-y: visible;
+        overscroll-behavior: auto;
+        padding: 0;
+      }
+    }
+  }
+
+  .panel-inline-lg {
+    @media (--lg) {
+      /* Colours go too, not just geometry: a region of the page carries none
+         of the panel's chrome and takes the page's own text and link colours.
+         `inherit` on a custom property hands it back to the parent, which is
+         exactly what is wanted here — and it has to be done token by token.
+         Resetting --panel-color-text, which the three derive from, would make
+         them invalid at computed-value time rather than page-valued, and every
+         link would fall back to the surrounding text colour instead of the
+         site's link colour. Keep this list in step with the panel rule above. */
+      --color-link: inherit;
+      --color-link-hover: inherit;
+      --nav-color-text: inherit;
+
+      background-color: transparent;
+      block-size: auto;
+      border-radius: 0;
+      box-shadow: none;
+      color: inherit;
+      display: flex;
+      inline-size: auto;
+      inset-block: auto;
+      inset-inline: auto;
+      margin: 0;
+      max-block-size: none;
+      max-inline-size: none;
+      min-block-size: auto;
+      opacity: 1;
+      overflow: visible;
+      position: static;
+      transform: none;
+      transition: none;
+
+      > .header,
+      > .footer {
+        display: none;
+      }
+
+      > .content {
+        flex-grow: 0;
+        overflow-y: visible;
+        overscroll-behavior: auto;
+        padding: 0;
+      }
+    }
+  }
+
+  .panel-inline-xl {
+    @media (--xl) {
+      /* Colours go too, not just geometry: a region of the page carries none
+         of the panel's chrome and takes the page's own text and link colours.
+         `inherit` on a custom property hands it back to the parent, which is
+         exactly what is wanted here — and it has to be done token by token.
+         Resetting --panel-color-text, which the three derive from, would make
+         them invalid at computed-value time rather than page-valued, and every
+         link would fall back to the surrounding text colour instead of the
+         site's link colour. Keep this list in step with the panel rule above. */
+      --color-link: inherit;
+      --color-link-hover: inherit;
+      --nav-color-text: inherit;
+
+      background-color: transparent;
+      block-size: auto;
+      border-radius: 0;
+      box-shadow: none;
+      color: inherit;
+      display: flex;
+      inline-size: auto;
+      inset-block: auto;
+      inset-inline: auto;
+      margin: 0;
+      max-block-size: none;
+      max-inline-size: none;
+      min-block-size: auto;
+      opacity: 1;
+      overflow: visible;
+      position: static;
+      transform: none;
+      transition: none;
+
+      > .header,
+      > .footer {
+        display: none;
+      }
+
+      > .content {
+        flex-grow: 0;
+        overflow-y: visible;
+        overscroll-behavior: auto;
+        padding: 0;
+      }
+    }
+  }
+
+  /* ── Trigger ───────────────────────────────────────────────────────
+   * Once the panel has gone inline there is nothing left to open, so its
+   * trigger goes with it. Kept here rather than restated by every host.
+   *
+   * Only reaches a trigger that is the panel's own previous sibling: adjacency
+   * is what proves intent, so any button there qualifies. A trigger placed
+   * further away — inside the heading that precedes the panel, as the filters
+   * do — is not covered and stays visible. */
+
+  @media (--sm) {
+    button:has(+ .panel-inline-sm) { display: none; }
+  }
+
+  @media (--md) {
+    button:has(+ .panel-inline-md) { display: none; }
+  }
+
+  @media (--lg) {
+    button:has(+ .panel-inline-lg) { display: none; }
+  }
+
+  @media (--xl) {
+    button:has(+ .panel-inline-xl) { display: none; }
+  }
+
+  /* ── Entry transition ──────────────────────────────────────────────
+   * Opening is a discrete display change, so the start state has to be
+   * spelled out. It is exactly the closed state, which now lives in tokens —
+   * one block covers both variants, panel and ::backdrop alike. */
+
+  @starting-style {
+    :where(.modal, .drawer):is([open], :popover-open) {
+      opacity: var(--panel-opacity, 1);
+      transform: var(--panel-translate, none);
+    }
+  }
+
+  /* ── Backdrop ──────────────────────────────────────────────────────
+   * Both paths put the panel in the top layer — showModal() for a <dialog>,
+   * showPopover() for anything else — so both get the native ::backdrop, and
+   * it inherits from the panel: it reads the very --panel-* tokens the panel
+   * declares. No backdrop node is ever injected, and no z-index is involved.
+   *
+   * This is why the class-driven path uses popover rather than a plain
+   * element. A backdrop placed outside the panel sits in the root stacking
+   * context, while the panel stays confined to its nearest stacking ancestor
+   * — a sticky sidebar wrapper, a sticky header — so the veil paints over the
+   * panel and no z-index can lift it out. Placing the backdrop next to the
+   * panel only moves the problem: it then inherits the same confinement and
+   * anything painted later shows through it. The top layer removes the
+   * question entirely, which is exactly what it exists for. */
+
+  :where(.modal, .drawer)::backdrop {
+    backdrop-filter: blur(var(--panel-backdrop-blur));
+    background-color: var(--panel-backdrop-color);
+    opacity: 0;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-behavior: allow-discrete;
+      transition-duration: var(--panel-transition-duration);
+      transition-property: display, opacity, overlay;
+      transition-timing-function: var(--panel-transition-easing);
+    }
+  }
+
+  :where(.modal, .drawer):is([open], :popover-open)::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    :where(.modal, .drawer):is([open], :popover-open)::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* ── Page scroll lock ────────────────────────────────────────────── */
+
+  body:has(:where(.modal, .drawer):where([open], :popover-open)) {
+    overflow: hidden;
+  }
+}

package/css/index.css

@@ -24,3 +24,4 @@
 @import 'components/nav-accessibility.css';
 @import 'components/nav-title.css';
 @import 'components/pagination.css';
+@import 'components/panel.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {