@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/css/dist/menu.css

@@ -0,0 +1,245 @@
+/*
+ * Menu: a short list of actions that opens from a button, in a popover anchored to it.
+ *
+ * <button type="button" class="plinth-button plinth-icon-button" popovertarget="ticket-actions"
+ *   aria-label="More actions">…</button>
+ * <div class="plinth-menu" id="ticket-actions" popover="auto">
+ *   <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *     command="hide-popover">
+ *     <span class="plinth-menu-icon" aria-hidden="true"><svg>…</svg></span>
+ *     <span class="plinth-menu-label">Assign to me</span>
+ *     <kbd class="plinth-menu-shortcut" aria-hidden="true">A</kbd>
+ *   </button>
+ *   <a class="plinth-menu-item" href="/tickets/42/print">
+ *     <span class="plinth-menu-label">Print</span>
+ *   </a>
+ *   <hr class="plinth-menu-separator">
+ *   <div class="plinth-menu-group" role="group" aria-label="Move to">
+ *     <div class="plinth-menu-heading" aria-hidden="true">Move to</div>
+ *     <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *       command="hide-popover"><span class="plinth-menu-label">Archive</span></button>
+ *   </div>
+ *   <hr class="plinth-menu-separator">
+ *   <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *     command="hide-popover" data-tone="danger">
+ *     <span class="plinth-menu-label">Delete</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div popover="auto"> with an id (required in Blade, Vue and React), which the
+ * app's button names in popovertarget (or commandfor with command="toggle-popover"). The browser
+ * opens and closes it (ADR 2): the top layer, a click outside or Escape closes it, focus goes back
+ * to the button, and the browser tells assistive technology whether the button's menu is
+ * expanded. The button is the app's own (an icon button or a button); it is not part of the menu.
+ *
+ * It is not role="menu". The ARIA menu pattern needs arrow keys and a roving focus, which would be
+ * script in every layer; this is a list of buttons and links, reached with Tab, as ADR 2 decides
+ * for menus of actions. So the button has no aria-haspopup, and the items are plain buttons and
+ * links that read as such.
+ *
+ * Parts, each its own component in Blade, Vue and React:
+ * - item: a <button type="button">, or an <a href> when it navigates. A button item closes its
+ *   menu when pressed: commandfor="<the menu's id>" command="hide-popover", which the layers take
+ *   from the menu around the item. A link closes the menu by leaving the page; an app that routes
+ *   without loading a page closes it with hidePopover(). The icon is the project's SVG, decorative;
+ *   the label is the item's name. The shortcut is a hint for the eye, aria-hidden; the app that
+ *   has the shortcut adds aria-keyshortcuts to the item.
+ * - separator: an <hr> between items.
+ * - group: a <div role="group"> named by its heading (aria-label), with the heading shown above
+ *   its items and hidden from assistive technology, which reads the group's name instead.
+ *
+ * Variants and states:
+ * - data-tone="danger" on an item that deletes or removes something: the danger text colour and a
+ *   danger tint on hover. The label still says what it does; the colour is not the only signal.
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; pressed takes the sunken surface; the focus ring on
+ *   :focus-visible, drawn inside the item (focus-ring.offset-inset).
+ * - open is the native one (:popover-open), never a class.
+ *
+ * Placement: below the button, starting at its start edge, through CSS anchor positioning (the
+ * popover's button is its implicit anchor). It takes the side of the button with more room, above
+ * or below, and is never taller than that room: a long menu scrolls. When it would leave the
+ * screen sideways it flips to the button's end edge. It is the same at every width; a phone gets no bottom sheet,
+ * since a menu is a few actions next to the button that opened them (a long list belongs in a
+ * sheet). A browser without anchor positioning shows the menu in the middle of the screen, where
+ * it still works. Script opens it with showPopover({ source: button }), so it has its anchor;
+ * without a source it has none, and sits in the screen's start corner.
+ *
+ * Size: --plinth-menu-min-width (192px) to --plinth-menu-max-width (320px), never wider than the
+ * screen less a margin, and never taller than the room it has. Items are --plinth-touch-target
+ * (40px) tall; with a mouse from 768px up, --plinth-control-md (32px). A long label wraps.
+ * It fades in and out on the motion tokens, which drop to 0ms under prefers-reduced-motion.
+ */
+
+@layer plinth {
+  .plinth-menu {
+    /* The browser's popover rules centre it on the screen: the fallback without anchoring. */
+    box-sizing: border-box;
+    min-inline-size: min(var(--plinth-menu-min-width), 100vi - 2 * var(--plinth-space-2));
+    max-inline-size: min(var(--plinth-menu-max-width), 100vi - 2 * var(--plinth-space-2));
+    max-block-size: calc(100dvb - 2 * var(--plinth-space-2));
+    padding: var(--plinth-space-1);
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+    box-shadow: var(--plinth-elevation-2);
+    opacity: 0;
+    transition:
+      opacity var(--plinth-duration-fast) var(--plinth-easing-exit),
+      overlay var(--plinth-duration-fast) allow-discrete,
+      display var(--plinth-duration-fast) allow-discrete;
+  }
+
+  .plinth-menu:popover-open {
+    opacity: 1;
+    transition-timing-function: var(--plinth-easing-enter);
+  }
+
+  @starting-style {
+    .plinth-menu:popover-open {
+      opacity: 0;
+    }
+  }
+
+  @supports (position-area: block-end) {
+    .plinth-menu {
+      inset: auto;
+      max-block-size: calc(100% - 2 * var(--plinth-space-1));
+      margin-block: var(--plinth-space-1);
+      margin-inline: 0;
+      position-area: block-end span-inline-end;
+      position-try-order: most-block-size;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+    }
+  }
+
+  .plinth-menu-item {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: var(--plinth-space-1);
+    padding-inline: var(--plinth-space-2);
+    margin: 0;
+    font: inherit;
+    color: var(--plinth-color-text);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-menu-item[data-tone='danger'] {
+    color: var(--plinth-color-danger-text);
+  }
+
+  @media (hover: hover) {
+    a.plinth-menu-item[href]:hover,
+    button.plinth-menu-item:enabled:hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+
+    a.plinth-menu-item[href][data-tone='danger']:hover,
+    button.plinth-menu-item:enabled[data-tone='danger']:hover {
+      background-color: var(--plinth-color-danger-surface);
+    }
+  }
+
+  a.plinth-menu-item[href]:active,
+  button.plinth-menu-item:enabled:active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  .plinth-menu-item:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-inset);
+  }
+
+  .plinth-menu-item:disabled,
+  .plinth-menu-item[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-menu-icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--plinth-size-icon-sm);
+    block-size: var(--plinth-size-icon-sm);
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-menu-item[data-tone='danger'] .plinth-menu-icon {
+    color: inherit;
+  }
+
+  .plinth-menu-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .plinth-menu-label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-menu-shortcut {
+    flex: none;
+    padding-inline-start: var(--plinth-space-4);
+    margin-inline-start: auto;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    color: var(--plinth-color-text-subtle);
+  }
+
+  .plinth-menu-separator {
+    block-size: 0;
+    margin-block: var(--plinth-space-1);
+    margin-inline: calc(-1 * var(--plinth-space-1));
+    border: 0;
+    border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-menu-group {
+    margin: 0;
+  }
+
+  .plinth-menu-heading {
+    padding-block: var(--plinth-space-2) var(--plinth-space-1);
+    padding-inline: var(--plinth-space-2);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-medium);
+    color: var(--plinth-color-text-subtle);
+  }
+
+  @media (min-width: 768px) and (pointer: fine) {
+    .plinth-menu-item {
+      min-block-size: var(--plinth-control-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-menu-item:disabled,
+    .plinth-menu-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}

package/packages/css/dist/modal.css

@@ -0,0 +1,367 @@
+/*
+ * Modal base: what the dialog (dialog.css), the sheet (sheet.css) and the drawer (drawer.css)
+ * share, written once so they can't drift apart (docs/adr/0005): the root's surface and motion,
+ * the backdrop, the scroll lock, the safe areas, the panel and the grab handle, and the header,
+ * title, description, close button, body and footer. It has no markup of its own and no class:
+ * each component keeps its own root and part classes (plinth-dialog, plinth-dialog-panel, …;
+ * plinth-sheet, plinth-sheet-panel, …), listed here in :is(). A page that loads the components
+ * one by one loads modal.css with them.
+ *
+ * The parts sit in a panel, the root's only child:
+ *   <dialog class="plinth-sheet" …>
+ *     <div class="plinth-sheet-panel">
+ *       <div class="plinth-sheet-handle" aria-hidden="true"></div>   (a bottom panel on a phone)
+ *       <div class="plinth-sheet-header">…</div>
+ *       <div class="plinth-sheet-body">…</div>
+ *       <div class="plinth-sheet-footer">…</div>                       (optional)
+ *     </div>
+ *   </dialog>
+ *
+ * The rules sit in a layer inside plinth (plinth.modal), so a component's own rules win over them
+ * whatever the order the files load in, and a project's utilities win over both.
+ *
+ * Each component sets where its root sits and how big it is, and tunes the motion and the safe
+ * area through three custom properties on the root; it never sets translate or opacity itself:
+ * - --plinth-modal-offset: where the root slides in from and back out to (a translate value;
+ *   0 0, the default, is no slide);
+ * - --plinth-modal-closed-opacity: its opacity while it opens and closes (0 fades it, 1, the
+ *   default, doesn't);
+ * - --plinth-modal-safe-area-end: env(safe-area-inset-bottom) when the root reaches the bottom
+ *   edge of the screen, so its last part clears the home indicator; initial (the default) when
+ *   it doesn't.
+ *
+ * The motion runs on the motion tokens, which drop to 0ms under prefers-reduced-motion. While a
+ * modal is open the page under it doesn't scroll (html:has(…:modal)), and it has no scrollbar
+ * gutter (scrollbar-gutter: auto, over a project's stable in an earlier layer): the top layer is
+ * never drawn in the gutter, so a gutter would leave a strip of the page beside a sheet on the end
+ * edge or the full width. Where the scrollbar takes space the page shifts by its width under the
+ * backdrop; overlay scrollbars take no space and nothing shifts. The body scrolls, with
+ * overscroll-behavior: contain; the header and footer stay put; the margins of the body's first and
+ * last child are reset, so its padding is its edge. On a phone the footer's actions share its
+ * width; from 768px up they sit at its end.
+ *
+ * A bottom panel on a phone (a sheet whose side below 768px is the bottom, a dialog with
+ * data-side-phone="bottom" that can be dismissed, and the drawer) has a grab handle, and the
+ * person drags it down to close it. The layers print the handle only there; its presence is what
+ * turns the dragging on, below 768px. Dragging is native scrolling: the root fills the screen and
+ * is a scroll-snap container, see-through, with a spacer as tall as the screen above the panel,
+ * so the browser gives the momentum and the snapping. Without script the handle shows and the
+ * close button and Escape close the panel. What the platform can't do, the layers add (a few
+ * lines, docs/adr/0002 section 6: x-init in Blade, useSwipeToClose in Vue and React):
+ * - on scrollend (scroll where it is missing), when the panel has gone off the bottom edge, they
+ *   call requestClose() (close() where it is missing), so cancel fires first, as for Escape; when
+ *   the app prevents it, the panel goes back to where it opened;
+ * - a tap on the root itself, above the panel, closes it when closedby="any", since the browser
+ *   reads that tap as one on the dialog, not its backdrop;
+ * - on toggle to open, a drawer with data-snap scrolls to that snap point (a browser that fires no
+ *   toggle on a dialog opens it at its largest).
+ * The snapping is the browser's own scrolling, and the layers' scroll is instant.
+ */
+
+@layer plinth {
+  @layer modal {
+    html:has(:is(.plinth-dialog, .plinth-sheet, .plinth-drawer):modal) {
+      overflow: hidden;
+      scrollbar-gutter: auto;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer) {
+      --plinth-modal-offset: 0 0;
+      --plinth-modal-closed-opacity: 1;
+      --plinth-modal-safe-area-end: initial;
+
+      position: fixed;
+      box-sizing: border-box;
+      flex-direction: column;
+      max-inline-size: 100%;
+      padding: 0;
+      overflow: hidden;
+      font-family: var(--plinth-font-family-body);
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-raised);
+      border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+      opacity: var(--plinth-modal-closed-opacity);
+      translate: var(--plinth-modal-offset);
+      transition:
+        translate var(--plinth-duration-normal) var(--plinth-easing-exit),
+        opacity var(--plinth-duration-normal) var(--plinth-easing-exit),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+      display: flex;
+      opacity: 1;
+      translate: 0 0;
+      transition-timing-function: var(--plinth-easing-enter);
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+        opacity: var(--plinth-modal-closed-opacity);
+        translate: var(--plinth-modal-offset);
+      }
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)::backdrop {
+      background-color: var(--plinth-color-overlay);
+      opacity: 0;
+      transition:
+        opacity var(--plinth-duration-normal) var(--plinth-easing-standard),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+        opacity: 0;
+      }
+    }
+
+    /*
+     * The panel holds the parts, the root's only child. It is the column the body scrolls in;
+     * the root is the surface, except for a bottom panel on a phone (below).
+     */
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel) {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-block-size: 0;
+      margin: 0;
+    }
+
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--plinth-space-1) var(--plinth-space-3);
+      align-items: center;
+      padding-block: var(--plinth-space-3);
+      padding-inline: var(--plinth-space-4) var(--plinth-space-3);
+      border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* With no close button, the header's padding is even. */
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header):not(
+      :has(> :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close))
+    ) {
+      padding-inline-end: var(--plinth-space-4);
+    }
+
+    :is(.plinth-dialog-title, .plinth-sheet-title, .plinth-drawer-title) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-lg);
+      font-weight: var(--plinth-font-weight-semibold);
+      line-height: var(--plinth-font-leading-tight);
+      letter-spacing: var(--plinth-font-tracking-tight);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-description, .plinth-sheet-description, .plinth-drawer-description) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-sm);
+      line-height: var(--plinth-font-leading-normal);
+      color: var(--plinth-color-text-muted);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close) {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      flex: 1 1 auto;
+      min-block-size: 0;
+      padding: var(--plinth-space-4);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      font-size: var(--plinth-font-size-md);
+      line-height: var(--plinth-font-leading-normal);
+    }
+
+    /* The body's padding is its edge: the first and last child's margins don't add to it. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :first-child {
+      margin-block-start: 0;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :last-child {
+      margin-block-end: 0;
+    }
+
+    /*
+     * A browser can focus a scrolling area that has nothing focusable in it (Chrome and Firefox
+     * do, Safari doesn't yet), so a long body of text only is better with a link or a control in
+     * it.
+     */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    /* The last part clears the home indicator when the root reaches the bottom edge. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):last-child {
+      padding-block-end: max(
+        var(--plinth-space-4),
+        var(--plinth-modal-safe-area-end, var(--plinth-space-4))
+      );
+    }
+
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--plinth-space-2);
+      justify-content: flex-end;
+      padding-block: var(--plinth-space-3)
+        max(var(--plinth-space-3), var(--plinth-modal-safe-area-end, var(--plinth-space-3)));
+      padding-inline: var(--plinth-space-4);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* On a phone the footer's actions share its width. */
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+      flex: 1 1 0;
+    }
+
+    /*
+     * A bottom panel on a phone, dragged down to close: a root whose panel holds a handle (the
+     * layers print one only where the panel is on the bottom edge below 768px, and can be
+     * dismissed). The root fills the screen and is a scroll-snap container, see-through; its
+     * ::before is a spacer as tall as the screen above the panel, so scrolling it down is the
+     * panel going off the bottom edge. The flex column runs bottom up (column-reverse), so the
+     * root opens scrolled to its end, with the panel showing. Two snap positions: the panel's
+     * end on the screen's bottom edge (open), and the spacer filling the screen (closed); the
+     * layers close the dialog when the scrolling settles there. The panel is the surface, and the
+     * body hands a swipe on to the root once it is scrolled to its top.
+     */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+      > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex-direction: column-reverse;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    /* As a scrolling area the root can take focus (Chrome and Firefox), so it shows the ring. */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )::before {
+      flex: none;
+      order: 1;
+      block-size: 100%;
+      content: '';
+      scroll-snap-align: start;
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+      > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex: none;
+      max-block-size: calc(
+        100% - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+      );
+      padding-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+      scroll-snap-align: end;
+      background-color: var(--plinth-color-surface-raised);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-start-start-radius: var(--plinth-radius-container);
+      border-start-end-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+    }
+
+    /*
+     * The grab handle, a short pill centred at the top; decorative, since Escape and the close
+     * button close the panel too. From 768px up it is hidden.
+     */
+    :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+      display: block;
+      flex: none;
+      align-self: center;
+      inline-size: var(--plinth-space-10);
+      block-size: var(--plinth-space-1);
+      margin-block-start: var(--plinth-space-2);
+      background-color: var(--plinth-color-border-strong);
+      border-radius: var(--plinth-radius-pill);
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )
+      > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      overscroll-behavior: auto;
+    }
+
+    @media (forced-colors: active) {
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        background-color: CanvasText;
+      }
+    }
+
+    @media (min-width: 768px) {
+      :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+        flex: none;
+      }
+
+      /* From 768px up no panel is dragged: the root is the surface again. */
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex-direction: column;
+        overflow: hidden;
+        overscroll-behavior: auto;
+        scroll-snap-type: none;
+        scrollbar-width: auto;
+        background-color: var(--plinth-color-surface-raised);
+        box-shadow: var(--plinth-elevation-3);
+      }
+
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+          > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )::before {
+        content: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex: 1 1 auto;
+        max-block-size: none;
+        padding-inline: 0;
+        scroll-snap-align: none;
+        background-color: transparent;
+        border-block-start: 0;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        display: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+          > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )
+        > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+        overscroll-behavior: contain;
+      }
+    }
+  }
+}