@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/css/dist/section-menu.css

@@ -0,0 +1,225 @@
+/*
+ * Section menu: the row under the header that switches between the sections of a page.
+ *
+ * <nav class="plinth-section-menu" aria-label="Project">
+ *   <a class="plinth-section-menu-item" href="/overview" aria-current="page">
+ *     <span class="plinth-section-menu-label">Overview</span>
+ *   </a>
+ *   <a class="plinth-section-menu-item" href="/tasks">
+ *     <span class="plinth-section-menu-label">Tasks</span>
+ *     <span class="plinth-section-menu-count">8</span>
+ *   </a>
+ * </nav>
+ *
+ * The root is a <nav>, named by aria-label (label in Blade and Vue) or by the app's own
+ * aria-labelledby, so it reads apart from the page's other navigation. Its items are links. A
+ * menu that switches views in place, without navigating, has buttons instead, and its root is
+ * <div class="plinth-section-menu" role="group"> (nav set to false in Blade and Vue):
+ *
+ * <button type="button" class="plinth-section-menu-item" aria-pressed="true">…</button>
+ *
+ * Each item is its own component (<x-plinth::section-menu-item>, PlinthSectionMenuItem), so the
+ * app's attributes and listeners land on the item (ADR 2). The count is optional.
+ * plinth-section-menu-label has no rule of its own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - current: a link prints aria-current="page" for the section being shown; a button always
+ *   prints aria-pressed, "true" or "false". The current item takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), so colour is not
+ *   its only cue; the others are muted text on no surface, like a ghost button. A pressed button
+ *   still answers hover and press with a step on the tint (accent-subtle-hover,
+ *   accent-subtle-active).
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Layout: a row --plinth-section-menu-height (56px) tall, on the surface with a divider below,
+ * the same inline padding as the header and clear of the notch on a phone held sideways. Its
+ * items are --plinth-section-menu-item-height (40px) tall, never less than the 40px touch
+ * target, and at least 40px wide. The row never wraps: when the items don't fit it scrolls
+ * sideways and snaps to them, with a thin scrollbar for a mouse and none on a touch screen; the
+ * row's block padding keeps the focus ring inside it. The app scrolls a current item that starts
+ * out of view into view.
+ * Placement is the app's: put it under the header, or make it sticky below it with
+ * position: sticky, inset-block-start: calc(var(--plinth-header-height) +
+ * env(safe-area-inset-top)) and z-index: var(--plinth-layer-sticky).
+ */
+
+@layer plinth {
+  .plinth-section-menu {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-block-size: var(--plinth-section-menu-height);
+
+    /* What the item and the divider leave of the row's height, so the row is exactly its token. */
+    padding-block: calc(
+      (
+          var(--plinth-section-menu-height) - var(--plinth-section-menu-item-height) -
+            var(--plinth-border-width-thin)
+        ) /
+        2
+    );
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    font-family: var(--plinth-font-family-body);
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    scrollbar-width: none;
+    background-color: var(--plinth-color-surface);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-section-menu:dir(rtl) {
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+    scroll-padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+  }
+
+  /* A mouse without a sideways wheel needs a scrollbar to reach the items that don't fit. */
+  @media (hover: hover) and (pointer: fine) {
+    .plinth-section-menu {
+      scrollbar-width: thin;
+    }
+  }
+
+  .plinth-section-menu-item {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--plinth-touch-target);
+    min-block-size: max(var(--plinth-section-menu-item-height), var(--plinth-touch-target));
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--plinth-font-size-md);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    scroll-snap-align: start;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid transparent;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  @media (hover: hover) {
+    a.plinth-section-menu-item[href]:not([aria-current='page']):hover,
+    button.plinth-section-menu-item:enabled:not([aria-pressed='true']):hover {
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-section-menu-item[href]:not([aria-current='page']):active,
+  button.plinth-section-menu-item:enabled:not([aria-pressed='true']):active {
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* The border and an inset ring make the 2px edge, so selecting doesn't move the label. */
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']) {
+    color: var(--plinth-color-accent-text);
+    background-color: var(--plinth-color-accent-subtle);
+    border-color: var(--plinth-color-accent);
+    box-shadow: inset 0 0 0 calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /*
+   * A pressed button can be pressed again, so it answers hover and press with a step on the tint.
+   * Not in forced colours, where the tint would replace the system highlight under the label.
+   */
+  @media (hover: hover) and (forced-colors: none) {
+    button.plinth-section-menu-item:enabled[aria-pressed='true']:hover {
+      background-color: var(--plinth-color-accent-subtle-hover);
+    }
+  }
+
+  @media (forced-colors: none) {
+    button.plinth-section-menu-item:enabled[aria-pressed='true']:active {
+      background-color: var(--plinth-color-accent-subtle-active);
+    }
+  }
+
+  .plinth-section-menu-item:disabled,
+  .plinth-section-menu-item[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-section-menu-item:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  /* A gap between the ring and the accent edge, so focus and selection read apart. */
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-section-menu-count {
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page'])
+    .plinth-section-menu-count {
+    color: inherit;
+  }
+
+  @media (min-width: 768px) {
+    .plinth-section-menu {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+      scroll-padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+    }
+
+    .plinth-section-menu:dir(rtl) {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+      scroll-padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+    }
+  }
+
+  /* The current item is only a surface tint: in forced colours it takes the system highlight. */
+  @media (forced-colors: active) {
+    .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page'])
+      .plinth-section-menu-count {
+      color: HighlightText;
+    }
+
+    .plinth-section-menu-item:disabled,
+    .plinth-section-menu-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}

package/packages/css/dist/sheet.css

@@ -0,0 +1,239 @@
+/*
+ * Sheet: a modal panel on the edge of the screen the developer picks, for filters, side
+ * information or navigation. Optionally on another edge below 768px.
+ *
+ * <dialog id="filters" class="plinth-sheet" data-side="end" data-side-phone="bottom"
+ *   closedby="any" aria-labelledby="filters-title" aria-describedby="filters-description">
+ *   <div class="plinth-sheet-panel">
+ *     <div class="plinth-sheet-handle" aria-hidden="true"></div>
+ *     <div class="plinth-sheet-header">
+ *       <h2 id="filters-title" class="plinth-sheet-title">Filters</h2>
+ *       <p id="filters-description" class="plinth-sheet-description">Narrow the list down.</p>
+ *       <button type="button" class="plinth-button plinth-icon-button plinth-sheet-close"
+ *         data-variant="ghost" data-size="md" aria-label="Close" commandfor="filters"
+ *         command="close">
+ *         <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *       </button>
+ *     </div>
+ *     <div class="plinth-sheet-body">…</div>
+ *     <div class="plinth-sheet-footer">…</div>
+ *   </div>
+ * </dialog>
+ *
+ * The root is the <dialog>, and it needs an id: commandfor and aria-labelledby point at it, and
+ * the title's and description's ids are the root's id with -title and -description. The panel is
+ * the root's only child and holds the parts. The handle is there only where the sheet's side on a
+ * phone is the bottom (data-side="bottom" with no data-side-phone, or data-side-phone="bottom"):
+ * decorative (aria-hidden), shown below 768px, where the sheet is dragged down to close
+ * (modal.css). The title is
+ * required; the description (and its aria-describedby) and the footer are optional. The close
+ * button is an icon button (button.css and icon.css) and is always there: closedby="any" (tap the
+ * backdrop) is an enhancement Safari doesn't have yet. A project may set closedby="closerequest"
+ * on a sheet that must not close on a stray tap.
+ *
+ * Open it with showModal() or a <button commandfor="filters" command="show-modal">. Open is the
+ * native state, [open]; the browser puts the sheet in the top layer, makes the page inert, traps
+ * focus, closes on Escape and returns focus. The dialog fires close when it closes. For a modal
+ * centred on the screen, use the dialog (dialog.css).
+ *
+ * Side (data-side), at every width: end (default, also when missing or unknown) and start are
+ * full-height panels on the inline-end and inline-start edges, sheet.side-width wide and at
+ * most the screen's width less a gap, so the page shows beside them; top and bottom are the
+ * screen's width on the top and bottom edges, as tall as their content up to the screen's height
+ * less a gap that also clears the safe area at the other edge. The sides are logical: in
+ * right-to-left text end is the left edge and start the right.
+ *
+ * Side on a phone (data-side-phone, optional): the side below 768px, one of the same four; from
+ * 768px up data-side holds. data-side="end" data-side-phone="bottom" is a side panel on a tablet
+ * or desktop and a bottom sheet on a phone. Leave it out to keep data-side at every width. It
+ * takes only those four values: any other makes the phone's side end (the layers never print
+ * one, and leave the attribute out instead).
+ *
+ * The edge the sheet sits on has no border or radius; the edge facing the page has a hairline
+ * (in forced colours too), and a top or bottom sheet rounds the corners facing the page. Each
+ * side clears the safe areas it touches (the notch, the status bar and the home indicator, with
+ * viewport-fit=cover).
+ *
+ * The description is a secondary line, at the size of a list row's description.
+ *
+ * The surface, the backdrop, the scroll lock, the motion, the safe areas and the parts come from
+ * the modal base (modal.css), which the dialog shares; load it with this file. The body scrolls,
+ * the header and footer stay put, and the page under an open sheet doesn't scroll. The sheet
+ * slides in from its edge and back out on the motion tokens, which drop to 0ms under
+ * prefers-reduced-motion. This file sets only where the sheet sits and how big it is.
+ *
+ * A sheet on the bottom edge has its height capped by 100dvh, which clears the home indicator
+ * (env(safe-area-inset-bottom)) but not, on its own, the on-screen keyboard: iOS lays the
+ * keyboard over the page. A page with a form in a sheet sets
+ * <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+ * where the browser supports it, and keeps the sheet's fields near its top.
+ *
+ * In Livewire, a re-render would morph the open dialog back to the server's markup and drop its
+ * open attribute: put wire:ignore.self on the sheet (or keep it outside the component that
+ * re-renders), and always pass an id, since a generated one changes on every render.
+ */
+
+@layer plinth {
+  /*
+   * The end side, the default. The sides are written twice: as the phone's side (data-side-phone,
+   * or data-side without it), and from 768px up as data-side again for a sheet with
+   * data-side-phone. The phone's rules use :where() so the later ones win on order alone.
+   */
+  .plinth-sheet {
+    /* Translate isn't logical: -1 (under :dir(rtl), below) turns the slide around. */
+    --plinth-sheet-direction: 1;
+    --plinth-sheet-safe-area-inline-start: env(safe-area-inset-left);
+    --plinth-sheet-safe-area-inline-end: env(safe-area-inset-right);
+    --plinth-modal-offset: calc(100% * var(--plinth-sheet-direction)) 0;
+    --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+    block-size: auto;
+    max-block-size: none;
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: 0 var(--plinth-sheet-safe-area-inline-end);
+    margin: 0;
+    border-width: 0;
+    border-inline-start-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+  }
+
+  .plinth-sheet:where([data-side='start']:not([data-side-phone]), [data-side-phone='start']) {
+    --plinth-modal-offset: calc(-100% * var(--plinth-sheet-direction)) 0;
+
+    inset-block: 0;
+    inset-inline: 0 auto;
+    inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+    max-block-size: none;
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start) 0;
+    border-width: 0;
+    border-inline-end-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+  }
+
+  .plinth-sheet:where([data-side='top']:not([data-side-phone]), [data-side-phone='top']) {
+    --plinth-modal-offset: 0 -100%;
+    --plinth-modal-safe-area-end: initial;
+
+    inset-block: 0 auto;
+    inset-inline: 0;
+    inline-size: 100%;
+    max-block-size: calc(
+      100dvh - max(var(--plinth-space-12), env(safe-area-inset-bottom) + var(--plinth-space-4))
+    );
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start)
+      var(--plinth-sheet-safe-area-inline-end);
+    border-width: 0;
+    border-block-end-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+    border-end-start-radius: var(--plinth-radius-container);
+    border-end-end-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-sheet:where([data-side='bottom']:not([data-side-phone]), [data-side-phone='bottom']) {
+    --plinth-modal-offset: 0 100%;
+
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: 100%;
+    max-block-size: calc(
+      100dvh - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+    );
+    padding-block: 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start)
+      var(--plinth-sheet-safe-area-inline-end);
+    border-width: 0;
+    border-block-start-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+    border-start-start-radius: var(--plinth-radius-container);
+    border-start-end-radius: var(--plinth-radius-container);
+  }
+
+  /*
+   * With its grab handle, a bottom sheet on a phone is dragged down to close (modal.css): the root
+   * fills the screen, see-through, and its panel is the surface, as tall as its content up to the
+   * screen's height less a gap.
+   */
+  .plinth-sheet:where([data-side='bottom']:not([data-side-phone]), [data-side-phone='bottom']):has(
+      > * > .plinth-sheet-handle
+    ) {
+    inset: 0;
+    max-block-size: none;
+    padding: 0;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* Right-to-left text turns the slide around and swaps the safe areas. */
+  .plinth-sheet:dir(rtl) {
+    --plinth-sheet-direction: -1;
+    --plinth-sheet-safe-area-inline-start: env(safe-area-inset-right);
+    --plinth-sheet-safe-area-inline-end: env(safe-area-inset-left);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-sheet[data-side-phone] {
+      --plinth-modal-offset: calc(100% * var(--plinth-sheet-direction)) 0;
+      --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+      max-block-size: none;
+      padding-block: env(safe-area-inset-top) 0;
+      padding-inline: 0 var(--plinth-sheet-safe-area-inline-end);
+      border-width: 0;
+      border-inline-start-width: var(--plinth-border-width-thin);
+      border-radius: 0;
+    }
+
+    .plinth-sheet[data-side-phone][data-side='start'] {
+      --plinth-modal-offset: calc(-100% * var(--plinth-sheet-direction)) 0;
+
+      inset-inline: 0 auto;
+      padding-inline: var(--plinth-sheet-safe-area-inline-start) 0;
+      border-inline-start-width: 0;
+      border-inline-end-width: var(--plinth-border-width-thin);
+    }
+
+    .plinth-sheet[data-side-phone][data-side='top'] {
+      --plinth-modal-offset: 0 -100%;
+      --plinth-modal-safe-area-end: initial;
+
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100%;
+      max-block-size: calc(
+        100dvh - max(var(--plinth-space-12), env(safe-area-inset-bottom) + var(--plinth-space-4))
+      );
+      padding-inline: var(--plinth-sheet-safe-area-inline-start)
+        var(--plinth-sheet-safe-area-inline-end);
+      border-block-end-width: var(--plinth-border-width-thin);
+      border-inline-start-width: 0;
+      border-end-start-radius: var(--plinth-radius-container);
+      border-end-end-radius: var(--plinth-radius-container);
+    }
+
+    .plinth-sheet[data-side='bottom'] {
+      --plinth-modal-offset: 0 100%;
+
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100%;
+      max-block-size: calc(
+        100dvh - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+      );
+      padding-block: 0;
+      padding-inline: var(--plinth-sheet-safe-area-inline-start)
+        var(--plinth-sheet-safe-area-inline-end);
+      border-block-start-width: var(--plinth-border-width-thin);
+      border-inline-start-width: 0;
+      border-start-start-radius: var(--plinth-radius-container);
+      border-start-end-radius: var(--plinth-radius-container);
+    }
+  }
+}