@echodial/deck 0.1.0

package/dist/layers/anchor.css

@@ -0,0 +1,192 @@
+/* ==========================================================================
+   Deck — 25 Anchor positioning
+   Every floating thing in Deck was positioned by hand with
+   getBoundingClientRect, which does not flip when it hits the bottom of the
+   window, does not shift back inside when it hits an edge, and does not
+   follow its anchor inside a scrolling container. Those are exactly the
+   problems Floating UI solves, and they are also exactly what CSS anchor
+   positioning solves natively — with no JavaScript, on the compositor, and
+   without a resize or scroll listener.
+
+   So Deck uses anchor positioning where the browser has it, and hands off to
+   Floating UI where it does not, if you have loaded it. Neither is required.
+   ========================================================================== */
+
+@layer deck.components {
+
+  @supports (anchor-name: --a) {
+
+    /* --- Naming an anchor --------------------------------------------------
+       Put .anchor on the trigger and --anchor on both trigger and panel.
+       Each pair needs a unique name, so generate it server-side in Keel:
+         <button class="anchor" style="--anchor:--menu-<?= $id ?>">
+       ---------------------------------------------------------------------- */
+    .anchor { anchor-name: var(--anchor); }
+
+    /* --- Menus and mega menus ---------------------------------------------- */
+    .menu, .mega, .datepicker {
+      position-anchor: var(--anchor);
+      position-area: block-end span-inline-end;
+      position-try-fallbacks:
+        block-end span-inline-start,
+        block-start span-inline-end,
+        block-start span-inline-start,
+        flip-block, flip-inline;
+      position-try-order: most-block-size;
+      margin-block: var(--space-2);
+      /* stay inside the viewport no matter which fallback wins */
+      max-block-size: calc(100dvh - var(--space-8));
+      max-inline-size: calc(100vw - var(--space-6));
+      inset: auto;
+    }
+    .menu { min-inline-size: max(12rem, anchor-size(inline)); }
+
+    .mega {
+      position-area: block-end;
+      justify-self: anchor-center;
+    }
+
+    /* A dropdown that should match the width of the field it belongs to */
+    .menu-match { inline-size: anchor-size(inline); min-inline-size: 0; }
+
+    /* --- Combobox list ------------------------------------------------------
+       The listbox is a sibling today, positioned with absolute. With anchor
+       positioning it can go in the top layer and escape overflow:hidden
+       ancestors, which is the bug that bites every combobox inside a modal.
+       ---------------------------------------------------------------------- */
+    .combo-control { anchor-name: var(--anchor, --combo); }
+    .combo-list {
+      position-anchor: var(--anchor, --combo);
+      position-area: block-end;
+      position-try-fallbacks: flip-block;
+      inline-size: anchor-size(inline);
+      inset: auto;
+      margin-block: 4px;
+    }
+    .combo-list.is-above { inset: auto; }
+
+    /* --- Tooltips -----------------------------------------------------------
+       The ::after tooltip could never flip. This one can, and it can carry a
+       real arrow that stays pointed at the anchor.
+       ---------------------------------------------------------------------- */
+    .tip {
+      position: fixed;
+      position-anchor: var(--anchor);
+      position-area: block-start;
+      position-try-fallbacks: flip-block, flip-inline;
+      justify-self: anchor-center;
+      margin: var(--space-2);
+      inline-size: max-content;
+      max-inline-size: 16rem;
+      padding: var(--space-2) var(--space-3);
+      border: 0;
+      border-radius: var(--r-xs);
+      background: var(--ink-900);
+      color: var(--ink-50);
+      font-size: var(--text-xs);
+      line-height: 1.4;
+      box-shadow: var(--shadow-3);
+      opacity: 0;
+      transition: opacity var(--dur-2) var(--ease-out),
+                  overlay var(--dur-2) allow-discrete,
+                  display var(--dur-2) allow-discrete;
+    }
+    .tip:popover-open { opacity: 1; }
+    @starting-style { .tip:popover-open { opacity: 0; } }
+    .tip::backdrop { background: transparent; }
+
+    /* The arrow on a .tip. background: inherit takes the tip's colour, and
+       justify-self: anchor-center keeps it pointed at the trigger whichever way
+       the tip has flipped. */
+    .tip-arrow {
+      position: absolute;
+      inline-size: 8px;
+      block-size: 8px;
+      rotate: 45deg;
+      background: inherit;
+      position-anchor: var(--anchor);
+      justify-self: anchor-center;
+    }
+
+    /* --- Popover card -------------------------------------------------------
+       A richer tooltip: a heading, body copy, and actions. Used for the
+       "what does this labor code mean" pattern.
+       ---------------------------------------------------------------------- */
+    .pop {
+      position: fixed;
+      position-anchor: var(--anchor);
+      position-area: block-end;
+      position-try-fallbacks: flip-block, flip-inline, block-start span-inline-start;
+      justify-self: anchor-center;
+      margin: var(--space-2);
+      inline-size: min(20rem, calc(100vw - var(--space-6)));
+      padding: var(--space-4);
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      box-shadow: var(--shadow-4);
+      opacity: 0;
+      translate: 0 -4px;
+      transition: opacity var(--dur-2) var(--ease-out),
+                  translate var(--dur-2) var(--ease-out),
+                  overlay var(--dur-2) allow-discrete,
+                  display var(--dur-2) allow-discrete;
+    }
+    .pop:popover-open { opacity: 1; translate: 0; }
+    @starting-style { .pop:popover-open { opacity: 0; translate: 0 -4px; } }
+    .pop::backdrop { background: transparent; }
+    /* The heading inside a popover card. */
+    .pop-title { font-weight: 620; margin-block-end: var(--space-1); }
+    /* The explanatory text inside a popover card. */
+    .pop-body { font-size: var(--text-sm); color: var(--text-muted); }
+    /* The action row at the bottom of a popover card. A button here can close
+       the panel with popovertargetaction="hide" and no script. */
+    .pop-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }
+
+    /* --- Hide the anchored element when its anchor scrolls out of view ------ */
+    .menu, .mega, .tip, .pop, .datepicker, .combo-list {
+      position-visibility: anchors-visible;
+    }
+  }
+
+  /* --- Floating UI handoff --------------------------------------------------
+     Where anchor positioning is missing, deck-adapters.js uses Floating UI if
+     it is on the page and falls back to Deck's own placement if it is not.
+     These rules just get out of the way so the adapter can set inset.
+     ---------------------------------------------------------------------- */
+  @supports not (anchor-name: --a) {
+    .tip, .pop {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      inline-size: max-content;
+      max-inline-size: 16rem;
+      border: 0;
+      border-radius: var(--r-xs);
+      background: var(--ink-900);
+      color: var(--ink-50);
+      font-size: var(--text-xs);
+      padding: var(--space-2) var(--space-3);
+      box-shadow: var(--shadow-3);
+      opacity: 0;
+      transition: opacity var(--dur-2) var(--ease-out),
+                  overlay var(--dur-2) allow-discrete,
+                  display var(--dur-2) allow-discrete;
+    }
+    .pop {
+      inline-size: min(20rem, calc(100vw - var(--space-6)));
+      max-inline-size: none;
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--line);
+      border-radius: var(--r-md);
+      box-shadow: var(--shadow-4);
+      padding: var(--space-4);
+    }
+    .tip:popover-open, .pop:popover-open { opacity: 1; }
+    @starting-style { .tip:popover-open, .pop:popover-open { opacity: 0; } }
+    .tip::backdrop, .pop::backdrop { background: transparent; }
+    .tip-arrow { position: absolute; inline-size: 8px; block-size: 8px; rotate: 45deg; background: inherit; }
+  }
+}

package/dist/layers/buttons.css

@@ -0,0 +1,210 @@
+/* ==========================================================================
+   Deck — 05 Buttons
+   ========================================================================== */
+
+@layer deck.components {
+
+  .btn {
+    --btn-bg: var(--surface);
+    --btn-text: var(--text);
+    --btn-border: var(--line-strong);
+    --btn-shadow: var(--shadow-1);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    block-size: var(--control-h);
+    min-inline-size: var(--control-h);
+    padding-inline: var(--space-4);
+    border: 1px solid var(--btn-border);
+    border-radius: var(--r-sm);
+    background: var(--btn-bg);
+    color: var(--btn-text);
+    box-shadow: var(--btn-shadow);
+    font-size: var(--text-base);
+    font-weight: 560;
+    line-height: 1;
+    letter-spacing: -.008em;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    transition: background-color var(--dur-1) var(--ease-out),
+                border-color var(--dur-1) var(--ease-out),
+                color var(--dur-1) var(--ease-out),
+                box-shadow var(--dur-1) var(--ease-out),
+                translate var(--dur-1) var(--ease-out);
+  }
+
+  /* Every button clears the 44px touch target even when it looks smaller */
+  .btn { position: relative; }
+  .btn::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: var(--tap);
+    min-block-size: var(--tap);
+  }
+
+  .btn:hover { background: var(--surface-hover); border-color: var(--ink-400); }
+  .btn:active { translate: 0 1px; box-shadow: none; }
+  .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+  /* Styles a link or non-form element as disabled. It cannot stop a click
+     the way the disabled attribute does, so add aria-disabled="true" and
+     remove the href if it must not be followed. */
+  .btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
+    opacity: .5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* --- Variants ----------------------------------------------------------- */
+  /* The one important action in a view. Solid brand fill; use exactly one
+     per screen so it keeps meaning something. */
+  .btn-primary {
+    --btn-bg: var(--brand-600);
+    --btn-text: var(--text-on-brand);
+    --btn-border: transparent;
+    --btn-shadow: var(--shadow-2), var(--shadow-inset);
+  }
+  .btn-primary:hover { --btn-bg: var(--brand-700); border-color: transparent; background: var(--brand-700); }
+
+  /* A secondary emphasis colour, for upsells and highlights. */
+  .btn-accent {
+    --btn-bg: var(--accent-500);
+    --btn-text: var(--text-on-accent);
+    --btn-border: transparent;
+    --btn-shadow: var(--shadow-2), var(--shadow-inset);
+  }
+  .btn-accent:hover { background: oklch(from var(--accent-500) calc(l - .05) c h); border-color: transparent; }
+
+  /* Destructive and irreversible. Pair it with a confirmation. */
+  .btn-danger {
+    --btn-bg: var(--bad-600);
+    --btn-text: var(--text-on-bad);
+    --btn-border: transparent;
+    --btn-shadow: var(--shadow-2), var(--shadow-inset);
+  }
+  .btn-danger:hover { background: var(--bad-700); border-color: transparent; }
+
+  /* Tinted, low weight. Good for an action repeated down a list. */
+  .btn-soft {
+    --btn-bg: var(--brand-soft);
+    --btn-text: var(--brand-soft-text);
+    --btn-border: transparent;
+    --btn-shadow: none;
+  }
+  .btn-soft:hover { background: color-mix(in oklab, var(--brand-soft) 80%, var(--brand-300)); border-color: transparent; }
+
+  /* No border or background until hover. For toolbars and dense rows where
+     seven bordered buttons would be noise. */
+  .btn-ghost {
+    --btn-bg: transparent;
+    --btn-border: transparent;
+    --btn-shadow: none;
+  }
+  .btn-ghost:hover { background: var(--surface-hover); border-color: transparent; }
+
+  /* Brand-coloured border, transparent fill. */
+  .btn-outline {
+    --btn-bg: transparent;
+    --btn-text: var(--brand);
+    --btn-border: color-mix(in oklab, var(--brand) 45%, transparent);
+    --btn-shadow: none;
+  }
+  .btn-outline:hover { background: var(--brand-soft); border-color: var(--brand); }
+
+  /* Looks like a link, behaves like a button. Only for a real <button>
+     that has to sit in a row of links — on an anchor it adds a touch
+     target, a ring offset and nowrap to something that wanted none of them. */
+  .btn-link {
+    --btn-bg: transparent;
+    --btn-border: transparent;
+    --btn-shadow: none;
+    --btn-text: var(--brand);
+    padding-inline: var(--space-1);
+    block-size: auto;
+  }
+  .btn-link:hover { background: none; border-color: transparent; text-decoration: underline; }
+
+  /* --- Sizes -------------------------------------------------------------- */
+  /* The 34px size. Still clears the 44px touch target, because the target
+     is a pseudo-element rather than the box. */
+  .btn-sm {
+    block-size: var(--control-h-sm);
+    padding-inline: var(--space-3);
+    font-size: var(--text-sm);
+    border-radius: var(--r-xs);
+    gap: var(--space-1);
+  }
+  /* The large size, from --control-h-lg. */
+  .btn-lg {
+    block-size: var(--control-h-lg);
+    padding-inline: var(--space-6);
+    font-size: var(--text-md);
+    font-weight: 600;
+  }
+  /* Full width. For a phone, or the primary action at the end of a form. */
+  .btn-block { inline-size: 100%; }
+
+  /* Square, icon-only button. It has no text, so it needs an aria-label. */
+  .btn-icon { padding-inline: 0; inline-size: var(--control-h); }
+  .btn-icon.btn-sm { inline-size: var(--control-h-sm); }
+  .btn-icon.btn-lg { inline-size: var(--control-h-lg); }
+  /* A fully rounded button, usually paired with .btn-icon. */
+  .btn-round { border-radius: var(--r-full); }
+
+  /* --- Group -------------------------------------------------------------- */
+  /* Buttons joined into one control, with the inner radii and the doubled
+     border between them removed. Logical radii, so it mirrors under RTL. */
+  .btn-group { display: inline-flex; }
+  .btn-group > .btn { border-radius: 0; box-shadow: none; }
+  .btn-group > .btn:first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
+  .btn-group > .btn:last-child  { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }
+  .btn-group > .btn + .btn { margin-inline-start: -1px; }
+  .btn-group > .btn:hover, .btn-group > .btn:focus-visible { z-index: 1; }
+
+  /* --- Loading ------------------------------------------------------------ */
+  .btn.is-loading { color: transparent; pointer-events: none; }
+  .btn.is-loading::after {
+    content: "";
+    position: absolute;
+    inline-size: 1em;
+    block-size: 1em;
+    border: 2px solid color-mix(in oklab, var(--btn-text) 30%, transparent);
+    border-block-start-color: var(--btn-text);
+    border-radius: var(--r-full);
+    animation: dk-spin .62s linear infinite;
+  }
+
+  @keyframes dk-spin { to { rotate: 360deg; } }
+
+  /* Floating action button, parked above the tab bar and the notch */
+  .fab {
+    position: fixed;
+    inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom));
+    inset-inline-end: var(--space-5);
+    z-index: var(--z-nav);
+    inline-size: 56px;
+    block-size: 56px;
+    border-radius: var(--r-full);
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    box-shadow: var(--shadow-4);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: scale var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out);
+  }
+  .fab:hover { background: var(--brand-700); scale: 1.04; }
+  .fab:active { scale: .96; }
+  body:has(.tabbar) .fab { inset-block-end: calc(var(--space-4) + var(--tap) + var(--space-3) + env(safe-area-inset-bottom)); }
+}