@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/css/dist/page-header.css

@@ -0,0 +1,124 @@
+/*
+ * Page header: the bar at the top of a page, with a leading action, the page's heading and
+ * trailing actions. On a phone it is the screen's top bar; in an app shell it heads the page beside
+ * the sidebar, under the app bar. It sticks to the top as the content scrolls under it.
+ *
+ * <header class="plinth-page-header" data-top>
+ *   <div class="plinth-page-header-leading">
+ *     <a class="plinth-button plinth-icon-button" href="/inbox" data-variant="ghost"
+ *       data-size="md" aria-label="Back">
+ *       <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
+ *     </a>
+ *   </div>
+ *   <h1 class="plinth-page-header-heading">Inbox</h1>
+ *   <div class="plinth-page-header-actions">
+ *     <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
+ *       data-size="md" aria-label="Search">…</button>
+ *   </div>
+ * </header>
+ *
+ * The root is a <header>. At the top of the page (not inside <main>, <article>, <section>, <aside>
+ * or <nav>) it is the page's banner landmark, so a page has one there; inside <main>, as in an app
+ * shell, it is no landmark, only the page's header. The heading is required: an <h1> by default, or
+ * <h2> to <h6> (level) when the page sits beside another page's <h1>, such as an open ticket beside
+ * the list on a wide screen. The level doesn't change the look. The heading stays on one line and
+ * ends in an ellipsis when it doesn't fit.
+ *
+ * The leading part holds one action, usually an icon button: a menu button that opens a sheet
+ * (commandfor and command="show-modal") on a top-level page, or a back link (with data-mirror on
+ * its icon so it points the other way in right-to-left text) on a page under it. The actions part
+ * holds the trailing actions: at most three icon buttons (put the rest in a menu), or a primary
+ * button such as New ticket. Both are optional, and printed only when they have content. Every
+ * icon button needs its own name (label). The page header needs button.css and icon.css for them.
+ *
+ * Variant (the app sets it, the page header doesn't guess):
+ * - data-top: the page header is the screen's top bar, at the very top of a phone's screen. It
+ *   adds env(safe-area-inset-top) above its height, which pads it below the status bar and the
+ *   notch on a phone that draws under them (viewport-fit=cover). Leave it off under an app bar.
+ *
+ * Its height is the page-header.height component token (56px). The inline padding clears the
+ * notch on a phone held sideways. It is sticky on the layer.sticky z-index, so it sits above the
+ * page and below sheets and menus (the top layer), and it sticks --plinth-page-header-offset from
+ * the top: 0 by default, or the app bar's height in a shell that has one. Content scrolls under
+ * it, so the app sets scroll-padding-block-start on its scrolling element (the offset plus the
+ * height, plus env(safe-area-inset-top) with data-top) to keep a focused element or an anchor's
+ * target from landing under the page header.
+ *
+ * The actions sit var(--plinth-space-2) apart, so on a touch screen the 40px hit areas of 32px
+ * icon buttons don't overlap.
+ *
+ * The app owns the state: the page header has no states of its own. What the actions do is the
+ * app's (a link, a commandfor, wire:click, @click on the icon button).
+ */
+
+@layer plinth {
+  .plinth-page-header {
+    position: sticky;
+    inset-block-start: var(--plinth-page-header-offset);
+    z-index: var(--plinth-layer-sticky);
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-block-size: var(--plinth-page-header-height);
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    font-family: var(--plinth-font-family-body);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-page-header:dir(rtl) {
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+  }
+
+  /* The screen's top bar clears the status bar and the notch. */
+  .plinth-page-header[data-top] {
+    min-block-size: calc(var(--plinth-page-header-height) + env(safe-area-inset-top));
+    padding-block-start: env(safe-area-inset-top);
+  }
+
+  .plinth-page-header-leading,
+  .plinth-page-header-actions {
+    display: flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+  }
+
+  .plinth-page-header-heading {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    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);
+    white-space: nowrap;
+  }
+
+  /* Without a leading action or trailing actions, the heading keeps the text's distance from the edge. */
+  .plinth-page-header-heading:first-child {
+    margin-inline-start: var(--plinth-space-2);
+  }
+
+  .plinth-page-header-heading:last-child {
+    margin-inline-end: var(--plinth-space-2);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-page-header {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+    }
+
+    .plinth-page-header:dir(rtl) {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+    }
+  }
+}

package/packages/css/dist/pill-row.css

@@ -0,0 +1,197 @@
+/*
+ * Pill row: a row of pills for filters, segments or sub-pages.
+ *
+ * <div class="plinth-pill-row" role="group" aria-label="Status">
+ *   <button type="button" class="plinth-pill" aria-pressed="true">
+ *     <span class="plinth-pill-label">Open</span>
+ *     <span class="plinth-pill-count">12</span>
+ *   </button>
+ *   <button type="button" class="plinth-pill" aria-pressed="false">
+ *     <span class="plinth-pill-label">Closed</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div role="group">, named by aria-label (label in Blade and Vue) or by the app's
+ * own aria-labelledby. A row of links that navigates is <nav class="plinth-pill-row"> instead,
+ * with no role (nav in Blade and Vue), and its pills are links:
+ *
+ * <a class="plinth-pill" href="…" aria-current="page"><span class="plinth-pill-label">…</span></a>
+ *
+ * Each pill is its own component (<x-plinth::pill>, PlinthPill), so the app's attributes and
+ * listeners land on the pill (ADR 2). The count is optional. plinth-pill-label has no rule of its
+ * own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - selected: a button pill always prints aria-pressed, "true" or "false"; a link pill prints
+ *   aria-current="page" for the page being shown. Selected takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), where the others
+ *   have a 1px neutral one, so colour is not its only cue. 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: on a phone the row scrolls sideways, with no visible scrollbar, and snaps to the pills;
+ * from 768px it wraps. The row's padding keeps the focus ring and the 40px touch target of the
+ * pills inside the scrolling area, whatever --plinth-pill-height is (32px by default). A pill is
+ * at least 40px wide.
+ */
+
+@layer plinth {
+  .plinth-pill-row {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    max-inline-size: 100%;
+    padding-block: max(
+      var(--plinth-space-1),
+      (var(--plinth-touch-target) - var(--plinth-pill-height)) / 2
+    );
+    padding-inline: var(--plinth-space-1);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: var(--plinth-space-1);
+    scrollbar-width: none;
+  }
+
+  .plinth-pill {
+    position: relative;
+    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: var(--plinth-pill-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    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 var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-pill);
+    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);
+  }
+
+  /* A 40px touch target through an invisible hit area, as on the button (ADR 3). */
+  @media (pointer: coarse) {
+    .plinth-pill::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+  }
+
+  @media (hover: hover) {
+    a.plinth-pill[href]:not([aria-current='page']):hover,
+    button.plinth-pill:enabled:not([aria-pressed='true']):hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-pill[href]:not([aria-current='page']):active,
+  button.plinth-pill:enabled:not([aria-pressed='true']):active {
+    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-pill: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-pill:enabled[aria-pressed='true']:hover {
+      background-color: var(--plinth-color-accent-subtle-hover);
+    }
+  }
+
+  @media (forced-colors: none) {
+    button.plinth-pill:enabled[aria-pressed='true']:active {
+      background-color: var(--plinth-color-accent-subtle-active);
+    }
+  }
+
+  .plinth-pill:disabled,
+  .plinth-pill[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-pill: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-pill:is([aria-pressed='true'], [aria-current='page']):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-pill-count {
+    font-weight: var(--plinth-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+    color: inherit;
+  }
+
+  /* Wider screens have room: the pills wrap onto more lines instead of scrolling. */
+  @media (min-width: 768px) {
+    .plinth-pill-row {
+      flex-wrap: wrap;
+      overflow-x: visible;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-pill {
+      border-color: ButtonText;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+      color: HighlightText;
+    }
+
+    .plinth-pill:disabled,
+    .plinth-pill[aria-disabled='true'] {
+      color: GrayText;
+      background-color: Canvas;
+      border-color: GrayText;
+    }
+  }
+}