actual-css 0.1.0

package/src/css/optional/scroll-snap.css

@@ -0,0 +1,51 @@
+/*
+ * Scroll snap — optional horizontal rails for niche card strips and simple
+ * touch-friendly overflow areas.
+ *
+ * This is not a full carousel. For previous/next controls, pagination,
+ * active state, drag behavior, looping, or robust desktop mouse interaction,
+ * use a dedicated carousel library.
+ */
+.scroll-snap {
+  --scroll-snap-gap: var(--gap);
+  --scroll-snap-align: start;
+  --scroll-snap-item-size: auto;
+
+  display: flex;
+  gap: var(--scroll-snap-gap);
+  overflow-x: auto;
+}
+
+.scroll-snap > * {
+  flex: 0 0 var(--scroll-snap-item-size);
+}
+
+@supports (scroll-snap-type: x mandatory) {
+  .scroll-snap {
+    overscroll-behavior-inline: contain;
+    scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    scroll-snap-type: x mandatory;
+  }
+
+  .scroll-snap > * {
+    scroll-snap-align: var(--scroll-snap-align);
+  }
+
+  .scroll-snap[data-snap="center"] {
+    --scroll-snap-align: center;
+  }
+}
+
+@supports (scroll-snap-type: inline mandatory) {
+  .scroll-snap {
+    scroll-snap-type: inline mandatory;
+  }
+}
+
+.scroll-snap[data-scrollbar="hidden"] {
+  scrollbar-width: none;
+}
+
+.scroll-snap[data-scrollbar="hidden"]::-webkit-scrollbar {
+  display: none;
+}

package/src/css/optional/scroller.css

@@ -0,0 +1,51 @@
+/*
+ * Scroller — optional custom scrollbar styling for overflow regions.
+ *
+ * Apply to any scroll container (.overflow-auto, sidebars, long tables). Both
+ * stable-color (Firefox) and ::-webkit-scrollbar (Safari/Chromium) are styled;
+ * the thumb lands as a thin, theme-aware affordance with a hover state.
+ */
+.scroller {
+  --scroller-size: 0.625rem;
+  --scroller-padding: 0.125rem;
+  --scroller-track: transparent;
+  --scroller-thumb: var(--border);
+  --scroller-thumb-hover: var(--text-muted);
+
+  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+  scrollbar-width: thin;
+}
+
+.scroller::-webkit-scrollbar {
+  width: var(--scroller-size);
+  height: var(--scroller-size);
+}
+
+.scroller::-webkit-scrollbar-track {
+  background: var(--scroller-track);
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  border: var(--scroller-padding) solid transparent;
+  border-radius: var(--radius-full);
+  background: var(--scroller-thumb);
+  background-clip: content-box;
+}
+
+@media (hover: hover) {
+  .scroller::-webkit-scrollbar-thumb:hover {
+    background: var(--scroller-thumb-hover);
+    background-clip: content-box;
+  }
+}
+
+.scroller::-webkit-scrollbar-corner {
+  background: var(--scroller-track);
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .scroller {
+    --scroller-thumb: color-mix(in oklch, var(--text-muted), transparent 55%);
+    --scroller-thumb-hover: color-mix(in oklch, var(--text-muted), transparent 30%);
+  }
+}

package/src/css/optional/typography-fluid.css

@@ -0,0 +1,48 @@
+/*
+ * Optional fluid typography module.
+ *
+ * Not imported by actual.css. Import this file manually after actual.css when
+ * you need display, title, and lead sizes that scale with the viewport. Typical
+ * use cases: marketing pages, landing pages, hero sections, documentation
+ * homepages.
+ *
+ * Do not use this for body text, app UI, or the default prose scale. Fluid
+ * sizing is not the foundation of the typography system — it is a small opt-in
+ * surface for display text on content-heavy pages.
+ *
+ * Public API:
+ *   --fluid-display, --fluid-title, --fluid-lead  (size tokens, clamp())
+ *   .text-display, .text-title, .text-lead        (composed classes)
+ *
+ * Values are generated from scripts/rfs.ts over the 360px -> 1440px range.
+ */
+:root {
+  --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vw), 4.25rem);
+  --fluid-title: clamp(2rem, calc(1.75rem + 1.111vw), 2.75rem);
+  --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vw), 1.25rem);
+}
+
+@supports (inline-size: 100vi) {
+  :root {
+    --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vi), 4.25rem);
+    --fluid-title: clamp(2rem, calc(1.75rem + 1.111vi), 2.75rem);
+    --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vi), 1.25rem);
+  }
+}
+
+.text-display {
+  font-size: var(--fluid-display);
+  line-height: var(--line-height-tight);
+  text-wrap: balance;
+}
+
+.text-title {
+  font-size: var(--fluid-title);
+  line-height: var(--line-height-tight);
+  text-wrap: balance;
+}
+
+.text-lead {
+  font-size: var(--fluid-lead);
+  line-height: var(--line-height-relaxed);
+}

package/src/css/optional/utilities-extra.css

@@ -0,0 +1,289 @@
+/*
+ * Optional utility helpers.
+ *
+ * These classes are intentionally not part of the core API.
+ * They are escape hatches for layout nudges, not a full atomic scale.
+ *
+ * Core principle:
+ * - .sm / .lg provide local rhythm through --gap and --variant-space.
+ * - utilities consume the current context instead of defining their own -sm/-lg scale.
+ * - optional utilities extend core utilities, they do not re-express them.
+ * - follow verbose .{property}-{value} naming.
+ */
+
+/* Display */
+.display-block {
+  display: block;
+}
+
+.display-inline {
+  display: inline;
+}
+
+.display-inline-block {
+  display: inline-block;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-inline-flex {
+  display: inline-flex;
+}
+
+.display-grid {
+  display: grid;
+}
+
+/* Position */
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+/* Sizing */
+.inline-size-full {
+  inline-size: 100%;
+}
+
+.block-size-full {
+  block-size: 100%;
+}
+
+.min-inline-size-0 {
+  min-inline-size: 0;
+}
+
+.min-block-size-0 {
+  min-block-size: 0;
+}
+
+.max-inline-size-none {
+  max-inline-size: none;
+}
+
+/* Flex / alignment */
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.justify-content-start {
+  --cluster-justify: flex-start;
+  justify-content: flex-start;
+}
+
+.justify-content-center {
+  --cluster-justify: center;
+  justify-content: center;
+}
+
+.justify-content-end {
+  --cluster-justify: flex-end;
+  justify-content: flex-end;
+}
+
+.justify-content-space-between {
+  --cluster-justify: space-between;
+  justify-content: space-between;
+}
+
+.align-self-start {
+  align-self: start;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-end {
+  align-self: end;
+}
+
+/* Spacing */
+.padding-context {
+  padding: var(--variant-space);
+}
+
+.margin-inline-auto {
+  margin-inline: auto;
+}
+
+.margin-inline-start-auto {
+  margin-inline-start: auto;
+}
+
+.margin-inline-end-auto {
+  margin-inline-end: auto;
+}
+
+.margin-block-start-auto {
+  margin-block-start: auto;
+}
+
+.margin-block-end-auto {
+  margin-block-end: auto;
+}
+
+.gap-context {
+  gap: var(--gap);
+}
+
+.row-gap-context {
+  row-gap: var(--gap);
+}
+
+.column-gap-context {
+  column-gap: var(--gap);
+}
+
+/* Overflow */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-clip {
+  overflow: clip;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+/* Text */
+.white-space-normal {
+  white-space: normal;
+}
+
+.text-break {
+  overflow-wrap: break-word;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.font-weight-normal {
+  font-weight: var(--font-weight);
+}
+
+.font-weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-weight-strong {
+  font-weight: var(--font-weight-strong);
+}
+
+.font-weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Radius */
+.radius-sm-context {
+  border-radius: var(--radius-sm);
+}
+
+.radius-context {
+  border-radius: var(--radius);
+}
+
+.radius-lg-context {
+  border-radius: var(--radius-lg);
+}
+
+/* Border */
+.border-context {
+  border: var(--border-width) solid var(--border);
+}
+
+.border-block-start {
+  border-block-start: var(--border-width) solid var(--border);
+}
+
+.border-block-end {
+  border-block-end: var(--border-width) solid var(--border);
+}
+
+.border-inline-start {
+  border-inline-start: var(--border-width) solid var(--border);
+}
+
+.border-inline-end {
+  border-inline-end: var(--border-width) solid var(--border);
+}
+
+/* Surface */
+.background-surface {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.background-raised {
+  background: var(--surface-raised);
+  color: var(--text);
+}
+
+.background-subtle {
+  background: var(--surface-subtle);
+  color: var(--text);
+}
+
+/* Shadow */
+.shadow-context {
+  box-shadow: var(--shadow);
+}
+
+.shadow-popout-context {
+  box-shadow: var(--shadow-popout);
+}
+
+/* Interaction */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.user-select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Visibility */
+.display-none {
+  display: none;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+}

package/src/css/print.css

@@ -0,0 +1,47 @@
+@media print {
+  :root,
+  body {
+    /* Save some ink in dark mode */
+    color-scheme: light;
+    background: #fff;
+    color: #000;
+  }
+
+  .flyout,
+  .tooltip,
+  .surface-backdrop,
+  .status-bar,
+  .spinner,
+  dialog.modal[open],
+  dialog.drawer[open] {
+    display: none !important;
+  }
+
+  button.btn,
+  input[type="button"].btn,
+  input[type="submit"].btn,
+  input[type="reset"].btn {
+    display: none !important;
+  }
+
+  a.btn[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.875em;
+  }
+
+  .card,
+  .alert,
+  .badge {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
+  }
+}

package/src/css/prose.css

@@ -0,0 +1,187 @@
+/*
+ * Prose is the opt-in rich text scope for authored content.
+ *
+ * Global element styles stay mild so app UI is not shaped accidentally. Page
+ * layout, forms, cards, navigation, and app tables remain outside this scope.
+ */
+
+.prose {
+  /* Prose scale */
+  --prose-size: 1rem;
+  --prose-line-height: 1.7;
+  --prose-measure: 70ch;
+  --prose-flow: 1em;
+  --prose-heading-line-height: 1.2;
+  --prose-h1: 2rem;
+  --prose-h2: 1.5rem;
+  --prose-h3: 1.25rem;
+  --prose-h4: 1.125rem;
+
+  max-inline-size: var(--prose-measure);
+  color: var(--text);
+  font-size: var(--prose-size);
+  line-height: var(--prose-line-height);
+  overflow-wrap: break-word;
+}
+
+.prose :where(p, ul, ol, dl, blockquote, pre, table, figure) {
+  margin-block: var(--prose-flow) 0;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1.5em 0;
+  color: var(--text);
+  font-weight: var(--font-weight-strong);
+  line-height: var(--prose-heading-line-height);
+}
+
+.prose :where(p, li, blockquote) {
+  text-wrap: pretty;
+}
+
+.prose > :first-child {
+  margin-block-start: 0;
+}
+
+.prose h1 {
+  font-size: var(--prose-h1);
+}
+
+.prose h2 {
+  font-size: var(--prose-h2);
+}
+
+.prose h3 {
+  font-size: var(--prose-h3);
+}
+
+.prose h4 {
+  font-size: var(--prose-h4);
+}
+
+.prose a {
+  color: var(--primary);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+@media (hover: hover) {
+  .prose a:hover {
+    text-decoration-thickness: 0.12em;
+  }
+
+  @supports (color: color-mix(in oklch, red, white)) {
+    .prose a:hover {
+      color: color-mix(in oklch, var(--primary), var(--text) 15%);
+    }
+  }
+}
+
+.prose :where(ul, ol) {
+  padding-inline-start: 1.5em;
+}
+
+.prose li + li {
+  margin-block-start: 0.35em;
+}
+
+.prose code {
+  padding: 0.15em 0.3em;
+  border-radius: var(--radius-sm);
+  background: var(--surface-subtle);
+  color: var(--text);
+  font-size: 0.875em;
+}
+
+.prose kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.75em;
+  min-block-size: 1.6em;
+  padding-inline: 0.45em;
+  border: var(--border-width) solid var(--border);
+  border-block-end-width: calc(var(--border-width) * 2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: 0.08em;
+}
+
+.prose pre {
+  overflow-x: auto;
+  padding: 1em;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-subtle);
+}
+
+.prose pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.prose blockquote {
+  padding-inline-start: 1em;
+  border-inline-start: var(--border-width) solid var(--border);
+  color: var(--text-muted);
+}
+
+.prose figure {
+  margin-inline: 0;
+}
+
+.prose figcaption {
+  margin-block-start: 0.5em;
+  color: var(--text-muted);
+  font-size: 0.875em;
+}
+
+.prose table {
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+.prose th,
+.prose td {
+  padding: 0.5em;
+  border-block-end: var(--border-width) solid var(--border);
+  text-align: start;
+}
+
+/* Lead paragraph: a slightly larger, more relaxed reading-introduction text.
+   Non-fluid and always available — use .text-lead from the optional fluid
+   module for marketing/display surfaces. */
+.lead {
+  font-size: 1.125em;
+  line-height: var(--line-height-relaxed);
+}
+
+/* Readable content measure. Composes with .center for centering or with
+   margin-inline: auto for a one-off centered block. */
+.measure {
+  max-inline-size: var(--prose-measure, 70ch);
+}
+
+.prose.sm {
+  --prose-size: 0.9375rem;
+  --prose-h1: 1.75rem;
+  --prose-h2: 1.375rem;
+  --prose-h3: 1.125rem;
+  --prose-h4: 1rem;
+}
+
+.prose.lg {
+  --prose-size: 1.125rem;
+  --prose-measure: 72ch;
+  --prose-h1: 2.25rem;
+  --prose-h2: 1.625rem;
+  --prose-h3: 1.375rem;
+  --prose-h4: 1.25rem;
+}

package/src/css/reset.css

@@ -0,0 +1,56 @@
+/* Mild reset: useful defaults without classless magic. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+[hidden]:not([hidden="until-found"]) {
+  display: none !important;
+}
+
+/* Legacy dialog fallback only. Modern dialogs keep the browser's native closed
+   state so display/overlay transitions are not flattened by the reset.
+   The presentation for the dialog-fallback.js shim lives in the separate
+   dialog-fallback.css, so it can be dropped from custom bundles. */
+@supports not (selector(dialog:modal)) {
+  dialog:not([open]) {
+    display: none;
+  }
+}
+
+:where(img, svg, video) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+  }
+}