@cloudhal/cli 0.0.0-stage → 0.1.1

package/dist/assets/starters/blog/src/styles/features/carousel.css

@@ -0,0 +1,266 @@
+/*
+ * RFC-0027: carousels. A scroll-snap track (native swipe, momentum and keyboard scrolling, RTL by
+ * logical properties), slides in one frame size, markers as links to the slides.
+ */
+.ch-carousel {
+  --ch-c-gap: calc(var(--spacing) * 4);
+  --ch-c-peek: 0%;
+  --ch-c-n: 1;
+  position: relative;
+}
+.ch-carousel[data-gap="none"] {
+  --ch-c-gap: 0px;
+}
+.ch-carousel[data-gap="s"] {
+  --ch-c-gap: calc(var(--spacing) * 2);
+}
+.ch-carousel[data-gap="l"] {
+  --ch-c-gap: calc(var(--spacing) * 6);
+}
+.ch-carousel[data-gap="xl"] {
+  --ch-c-gap: calc(var(--spacing) * 10);
+}
+.ch-carousel[data-peek="s"] {
+  --ch-c-peek: 12%;
+}
+.ch-carousel[data-peek="m"] {
+  --ch-c-peek: 24%;
+}
+.ch-carousel[data-per-view="2"] {
+  --ch-c-n: 2;
+  --ch-c-n-set: 2;
+}
+.ch-carousel[data-per-view="3"] {
+  --ch-c-n: 3;
+  --ch-c-n-set: 3;
+}
+.ch-carousel[data-per-view="4"] {
+  --ch-c-n: 4;
+  --ch-c-n-set: 4;
+}
+/* perView follows the room the carousel has: at most 2 when medium, 1 when narrow (a peek stays). */
+.ch-carousel {
+  container-type: inline-size;
+}
+@container (max-width: 44rem) {
+  .ch-carousel__track {
+    --ch-c-n: min(var(--ch-c-n-set, 1), 2);
+  }
+}
+@container (max-width: 28rem) {
+  .ch-carousel__track {
+    --ch-c-n: 1;
+  }
+}
+.ch-carousel__track {
+  display: grid;
+  grid-auto-flow: column;
+  /* perView slides, the next one peeking in by --ch-c-peek */
+  grid-auto-columns: calc(
+    (100% - (var(--ch-c-n) - 1) * var(--ch-c-gap) - var(--ch-c-peek)) /
+    var(--ch-c-n)
+  );
+  gap: var(--ch-c-gap);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+  scrollbar-width: thin;
+  padding-block: 2px;
+}
+/* As many as fit: a rail without perView, by item width. */
+.ch-carousel[data-variant="rail"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(16rem, 85%);
+}
+.ch-carousel[data-item="s"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(12rem, 70%);
+}
+.ch-carousel[data-item="l"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(22rem, 90%);
+}
+.ch-carousel__track:focus-visible {
+  outline: 2px solid var(--ch-color-focus, currentColor);
+  outline-offset: 2px;
+}
+:root:not([data-ch-motion="none"]) .ch-carousel__track {
+  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ch-carousel__track {
+    scroll-behavior: auto !important;
+  }
+}
+.ch-carousel__slide {
+  scroll-snap-align: start;
+  min-width: 0;
+}
+.ch-carousel[data-align="center"] .ch-carousel__slide {
+  scroll-snap-align: center;
+}
+/* A hero: full width like a band, one slide at a time, every slide in one frame. */
+.ch-carousel[data-variant="hero"] {
+  margin-inline: calc(50% - 50vw);
+}
+.ch-carousel[data-variant="hero"] .ch-carousel__track {
+  grid-auto-columns: 100%;
+  gap: 0;
+  scrollbar-width: none;
+}
+.ch-carousel[data-variant="hero"] .ch-carousel__slide {
+  scroll-snap-stop: always;
+}
+.ch-carousel[data-aspect] .ch-carousel__slide {
+  overflow: hidden;
+}
+.ch-carousel[data-aspect="16:9"] .ch-carousel__slide {
+  aspect-ratio: 16 / 9;
+}
+.ch-carousel[data-aspect="21:9"] .ch-carousel__slide {
+  aspect-ratio: 21 / 9;
+}
+.ch-carousel[data-aspect="4:3"] .ch-carousel__slide {
+  aspect-ratio: 4 / 3;
+}
+.ch-carousel[data-aspect="1:1"] .ch-carousel__slide {
+  aspect-ratio: 1;
+}
+.ch-carousel[data-aspect="3:4"] .ch-carousel__slide {
+  aspect-ratio: 3 / 4;
+}
+/* A wide hero frame is too short on a phone: narrow carousels use a taller one (still one size). */
+@container (max-width: 40rem) {
+  .ch-carousel[data-variant="hero"]:is([data-aspect="16:9"], [data-aspect="21:9"])
+    .ch-carousel__slide {
+    aspect-ratio: 4 / 5;
+  }
+}
+/* A slide's content fills its frame: images cover it, a band stays inside it. */
+.ch-carousel[data-aspect] .ch-carousel__slide > * {
+  height: 100%;
+}
+.ch-carousel[data-aspect] .ch-carousel__slide :is(.ch-figure, .ch-figure img) {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  margin: 0;
+}
+.ch-carousel .ch-band {
+  margin-inline: 0;
+  padding-inline: clamp(1rem, 6%, 4rem);
+}
+.ch-carousel[data-variant="hero"] .ch-band {
+  display: flex;
+  align-items: center;
+}
+/* A band holding only a picture fills what its padding leaves (under a transparent header too). */
+.ch-carousel[data-variant="hero"] .ch-band > .ch-band__inner:has(> .ch-figure:only-child) {
+  flex: 1;
+  align-self: stretch;
+  min-height: 0;
+}
+/* Controls: arrows the module reveals (their place kept), markers as links. */
+.ch-carousel__controls {
+  @apply mt-3 flex items-center justify-center gap-3;
+}
+.ch-carousel__arrow {
+  @apply inline-flex size-9 cursor-pointer items-center justify-center rounded-full border border-zinc-300 text-lg;
+  background: var(--ch-color-surface);
+}
+.ch-carousel__arrow[data-ch-pending] {
+  visibility: hidden;
+}
+.ch-carousel__arrow[aria-disabled="true"] {
+  @apply cursor-default opacity-40;
+}
+.ch-carousel__markers {
+  @apply flex flex-wrap items-center justify-center gap-1.5;
+  scroll-target-group: auto;
+}
+.ch-carousel__markers a {
+  @apply inline-flex min-w-7 items-center justify-center rounded-full px-2 py-0.5 text-sm tabular-nums text-zinc-600 no-underline;
+}
+.ch-carousel__markers[data-style="dots"] a {
+  @apply size-6 min-w-6 p-0;
+}
+.ch-carousel__markers[data-style="dots"] a::before {
+  content: "";
+  @apply block size-2 rounded-full bg-current;
+}
+.ch-carousel__markers a:is(:target-current, [aria-current="true"]) {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+.ch-carousel__markers[data-style="dots"] a:is(:target-current, [aria-current="true"]) {
+  background: transparent;
+  color: var(--ch-color-brand);
+}
+
+/*
+ * RFC-0027 27c: galleries (one image at a time, whole, with thumbnails) and testimonials (centred,
+ * the neighbours peeking in). A gallery shows each image whole on a calm field until RFC-0028's
+ * fit modes (blur-fill) arrive.
+ */
+.ch-carousel[data-variant="gallery"] .ch-carousel__track {
+  grid-auto-columns: 100%;
+  gap: 0;
+  scrollbar-width: none;
+}
+.ch-carousel[data-variant="gallery"] .ch-carousel__slide {
+  scroll-snap-stop: always;
+  background: var(--ch-color-surface-muted);
+  border-radius: var(--ch-radius-m, 0.5rem);
+}
+.ch-carousel[data-variant="gallery"][data-aspect]
+  .ch-carousel__slide
+  :is(.ch-figure, .ch-figure img) {
+  object-fit: contain;
+}
+.ch-carousel__markers[data-style="thumbs"] {
+  @apply flex-nowrap justify-start gap-2 overflow-x-auto;
+  scrollbar-width: thin;
+}
+.ch-carousel__markers[data-style="thumbs"] a {
+  @apply size-16 min-w-16 shrink-0 overflow-hidden rounded p-0 opacity-70;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ch-carousel__markers[data-style="thumbs"] a img {
+  @apply size-full object-cover;
+}
+.ch-carousel__markers[data-style="thumbs"] a:is(:target-current, [aria-current="true"]) {
+  background: transparent;
+  opacity: 1;
+  outline-color: var(--ch-color-brand);
+}
+.ch-carousel[data-variant="testimonials"] {
+  --ch-c-peek: 24%;
+}
+.ch-carousel[data-variant="testimonials"][data-peek="none"] {
+  --ch-c-peek: 0%;
+}
+.ch-carousel[data-variant="testimonials"] .ch-carousel__slide {
+  scroll-snap-align: center;
+}
+.ch-carousel[data-variant="testimonials"] .ch-carousel__track {
+  /* one quote in the middle, its neighbours' edges showing; the first and last centre too */
+  grid-auto-columns: 100%;
+  padding-inline: calc(var(--ch-c-peek) / 2);
+  scroll-padding-inline: calc(var(--ch-c-peek) / 2);
+}
+
+/* RFC-0027 27d: a playing hero's rotation control: first in Tab order (first in the markup), shown
+   at the start of the controls row (clear of a transparent header over the hero). */
+.ch-carousel__rotate {
+  @apply absolute bottom-0 start-4 z-10 inline-flex size-9 cursor-pointer items-center justify-center rounded-full border border-zinc-300 text-base;
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+}
+.ch-carousel__rotate[data-ch-pending] {
+  display: none;
+}
+.ch-carousel__rotate[data-state="playing"] [data-when="stopped"],
+.ch-carousel__rotate[data-state="stopped"] [data-when="playing"] {
+  display: none;
+}
+.ch-carousel__rotate > span {
+  display: inline-flex;
+}

package/dist/assets/starters/blog/src/styles/features/chrome-menus.css

@@ -0,0 +1,264 @@
+/*
+ * RFC-0025 25b: the phone menu, submenus, hiding, shrinking and the transparent header.
+ * `--ch-header-h` is the chrome module's measure of the header (a close guess until it runs).
+ */
+:root {
+  --ch-header-h: 4.75rem;
+}
+.ch-menu-slot {
+  display: none;
+}
+@media (max-width: 639.98px) {
+  .ch-header[data-collapse="sm"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="sm"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="sm"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+@media (max-width: 767.98px) {
+  .ch-header[data-collapse="md"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="md"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="md"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+@media (max-width: 1023.98px) {
+  .ch-header[data-collapse="lg"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="lg"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="lg"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+.ch-header[data-collapse="always"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+  display: none;
+}
+.ch-header[data-collapse="always"] .ch-menu-slot {
+  display: block;
+}
+.ch-header[data-collapse="always"] .ch-header__brand {
+  margin-inline-end: auto;
+}
+.ch-menu__open {
+  @apply inline-flex cursor-pointer list-none items-center gap-2 rounded border border-current/25 px-3 py-1.5 text-sm font-medium;
+}
+.ch-menu__open::-webkit-details-marker {
+  display: none;
+}
+/* What opens over the page reads like the page, whatever the header stands on. */
+:is(.ch-menu__panel, .ch-nav-menu__pop, .ch-menu__dialog) {
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+}
+.ch-menu[open] > .ch-menu__panel {
+  @apply absolute inset-x-4 top-full z-40 overflow-auto rounded-lg border border-zinc-200 p-4 shadow-lg;
+  max-height: calc(100dvh - var(--ch-header-h) - 1rem);
+}
+.ch-menu__panel {
+  @apply grid gap-4;
+}
+.ch-menu__nav ul {
+  @apply grid gap-1;
+}
+.ch-menu__nav a,
+.ch-menu__nav summary,
+.ch-menu__nav li > span {
+  @apply block rounded px-2 py-2 text-base;
+}
+.ch-menu__nav a:hover {
+  background: var(--ch-color-surface-muted);
+}
+/* A group's line: its link (or name) and the caret, side by side. */
+.ch-menu__nav summary {
+  @apply flex items-center justify-between gap-2;
+}
+.ch-menu__nav summary > a {
+  @apply p-0;
+}
+.ch-menu__nav--small a {
+  @apply py-1.5 text-sm;
+}
+.ch-menu__current {
+  @apply font-semibold;
+}
+.ch-menu__panel .ch-nav-menu > ul {
+  @apply static mt-0 border-0 p-0 pl-3 shadow-none;
+}
+.ch-menu__search input {
+  @apply w-full rounded-md border border-zinc-300 px-3 py-2;
+}
+/* Drawers and the full-screen menu: a modal dialog (the browser traps focus, Escape closes it). */
+.ch-menu__dialog {
+  @apply m-0 content-start gap-4 p-4;
+  max-width: none;
+  max-height: none;
+  height: 100dvh;
+  width: min(22rem, calc(100vw - 3rem));
+  border: 0;
+}
+/* Only an open dialog is laid out: a display of its own would show a closed one. */
+.ch-menu__dialog[open] {
+  display: grid;
+}
+.ch-menu__dialog[data-style="drawer-end"] {
+  margin-inline-start: auto;
+}
+.ch-menu__dialog[data-style="fullscreen"] {
+  width: 100vw;
+}
+.ch-menu__dialog::backdrop {
+  background: rgb(0 0 0 / 0.45);
+}
+.ch-menu__bar {
+  @apply flex items-center justify-between gap-3;
+}
+.ch-menu__close {
+  @apply rounded border border-zinc-300 px-3 py-1.5 text-sm font-medium;
+}
+.ch-menu__dialog[open] {
+  transition:
+    translate var(--ch-dur-2, 0.25s) var(--ch-ease-out, ease-out),
+    opacity var(--ch-dur-2, 0.25s) ease-out;
+}
+@starting-style {
+  .ch-menu__dialog[data-style="drawer-start"][open] {
+    translate: -100% 0;
+  }
+  .ch-menu__dialog[data-style="drawer-end"][open] {
+    translate: 100% 0;
+  }
+  .ch-menu__dialog[data-style="fullscreen"][open] {
+    opacity: 0;
+  }
+}
+/* Submenus in the bar: popovers under their button (anchor positioning; the module otherwise). */
+.ch-nav-menu[data-popover] {
+  @apply inline-flex items-center gap-1;
+}
+.ch-nav-menu__btn {
+  @apply inline-flex cursor-pointer items-center gap-1 rounded px-1 py-0.5;
+}
+/* From the text's own color, so it reads on the page and on a transparent header alike. */
+.ch-nav-menu__btn:hover,
+.ch-nav-menu__btn:has(+ :popover-open) {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-nav-menu__pop {
+  @apply min-w-48 rounded-lg border border-zinc-200 p-2 text-sm shadow-lg;
+  margin: 0;
+  inset: auto;
+  position-area: bottom span-right;
+  margin-block-start: 6px;
+}
+.ch-nav-menu__pop ul {
+  @apply grid gap-0.5;
+}
+.ch-nav-menu__pop a,
+.ch-nav-menu__pop li > span {
+  @apply block rounded px-2 py-1.5;
+}
+.ch-nav-menu__pop a:hover {
+  background: var(--ch-color-surface-muted);
+}
+/* Hiding and shrinking move the header, never its box, so nothing below it shifts. */
+.ch-header[data-behavior="hide-on-scroll"],
+.ch-header[data-shrink],
+.ch-header[data-shrink] .ch-header__inner {
+  transition: translate var(--ch-dur-2, 0.25s) var(--ch-ease-out, ease-out);
+}
+.ch-header[data-shrink][data-ch-scrolled] {
+  translate: 0 -0.75rem;
+}
+.ch-header[data-shrink][data-ch-scrolled] .ch-header__inner {
+  translate: 0 0.375rem;
+}
+.ch-header[data-behavior="hide-on-scroll"][data-ch-hidden] {
+  translate: 0 -100%;
+}
+/* Transparent over a loud first band: that surface's text role, its own fill once scrolled. */
+.ch-header[data-transparent] {
+  margin-block-end: calc(-1 * var(--ch-header-h));
+}
+.ch-header[data-transparent]:not([data-ch-scrolled]) {
+  background: transparent;
+  border-bottom-color: transparent;
+  box-shadow: none;
+}
+.ch-header[data-transparent][data-over="inverse"]:not([data-ch-scrolled]) {
+  color: var(--ch-color-text-inverse);
+}
+.ch-header[data-transparent]:is([data-over="brand"], [data-over="gradient"]):not(
+  [data-ch-scrolled]
+) {
+  color: var(--ch-color-on-brand);
+}
+.ch-header[data-transparent][data-over="accent"]:not([data-ch-scrolled]) {
+  color: var(--ch-color-on-accent);
+}
+.ch-header[data-transparent]:not([data-ch-scrolled])
+  :is(.ch-header__nav, .ch-header__utility, .ch-header__bar-link) {
+  color: inherit;
+}
+.ch-header[data-transparent]:not([data-ch-scrolled]) :is(.ch-header__nav, .ch-header__utility) > a,
+.ch-header[data-transparent]:not([data-ch-scrolled]) .ch-nav-menu[data-popover] > :is(a, button) {
+  color: inherit;
+}
+/* On a brand hero the primary button would vanish into it: its colors swap until the fill. */
+.ch-header[data-transparent]:is([data-over="brand"], [data-over="gradient"]):not([data-ch-scrolled])
+.ch-button--primary {
+  background: var(--ch-color-on-brand);
+  color: var(--ch-color-brand);
+}
+.ch-header[data-transparent][data-ch-scrolled] {
+  background: var(--ch-color-surface);
+  transition: background-color var(--ch-dur-2, 0.25s) ease-out;
+}
+/* Under a transparent header the page starts at the very top (the band makes its own room). */
+.ch-header[data-transparent] ~ main > .ch-surface:first-child {
+  padding-block-start: 0;
+}
+/* The first band (the root or its first child, three levels at most, like `heroSurface`) starts
+   under the header: it keeps its own room above the content. */
+.ch-header[data-transparent] ~ main > .ch-surface:first-child > .ch-band:first-child,
+.ch-header[data-transparent] ~ main > .ch-surface:first-child > :first-child > .ch-band:first-child,
+.ch-header[data-transparent]
+  ~ main
+  > .ch-surface:first-child
+  > :first-child
+  > :first-child
+  > .ch-band:first-child,
+.ch-header[data-transparent]
+  ~ main
+  > .ch-surface:first-child
+  .ch-carousel[data-variant="hero"]
+  > .ch-carousel__track
+  > .ch-carousel__slide
+  > .ch-band:first-child {
+  padding-block-start: calc(var(--ch-header-h) + 3rem);
+}
+:root[data-ch-motion="none"] :is(.ch-header, .ch-header__inner, .ch-menu__dialog) {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.ch-header, .ch-header__inner, .ch-menu__dialog) {
+    transition: none;
+  }
+}
+/* The `/menu` page: the phone menu, for readers without the dialog. */
+.ch-menu-page {
+  @apply py-8;
+}
+.ch-menu-page h1 {
+  @apply mb-6 text-3xl font-bold;
+}