@ponchia/ui 0.2.1 → 0.3.0

package/css/content.css

@@ -0,0 +1,324 @@
+/* ==========================================================================
+   content — .ui-prose: long-form rich text, zero per-element classes.
+
+   Wrap the raw HTML a Markdown renderer emits in a single `.ui-prose`
+   and the document is styled in the Nothing aesthetic while the markup
+   stays semantic and machine-readable (no class-soup). Everything here
+   is an element selector scoped under `.ui-prose`, so it never leaks
+   into app UI.
+   ========================================================================== */
+
+.ui-prose {
+  color: var(--text-soft);
+  font-size: var(--text-base);
+  line-height: 1.7;
+
+  /* Readable measure; the container can still be wider for tables/media. */
+  --prose-measure: 72ch;
+}
+
+.ui-prose > * {
+  margin-block: 0;
+  max-inline-size: var(--prose-measure);
+}
+
+/* Flow rhythm — space comes from the following element. */
+.ui-prose > * + * {
+  margin-block-start: var(--space-md);
+}
+
+.ui-prose > * + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--space-2xl);
+}
+
+/* Full-bleed-ish elements opt out of the text measure. */
+.ui-prose > :is(figure, pre, table, hr, .ui-dotrule) {
+  max-inline-size: none;
+}
+
+/* --- Headings — brand display face; only the top two shout --- */
+
+.ui-prose :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--text);
+  font-family: var(--display);
+  line-height: 1.12;
+  text-wrap: balance;
+}
+
+.ui-prose h1 {
+  font-size: var(--text-xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose h2 {
+  font-size: var(--text-lg);
+  letter-spacing: var(--tracking-wide);
+  padding-block-end: 0.3rem;
+  border-block-end: 1px solid var(--line);
+  text-transform: uppercase;
+}
+
+.ui-prose h3 {
+  font-size: var(--text-lg);
+}
+
+.ui-prose :is(h4, h5, h6) {
+  font-size: var(--text-base);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose :is(h5, h6) {
+  color: var(--text-dim);
+}
+
+/* Anchored headings clear a sticky chrome and expose a dot on hover. */
+.ui-prose :is(h1, h2, h3, h4, h5, h6)[id] {
+  scroll-margin-block-start: 6rem;
+}
+
+/* --- Text-level --- */
+
+.ui-prose :is(p, ul, ol, dl, blockquote, figure, pre, table) {
+  font-size: inherit;
+}
+
+.ui-prose a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22rem;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-prose strong {
+  color: var(--text);
+}
+
+.ui-prose mark {
+  background: var(--accent-soft);
+  color: var(--text);
+  padding: 0.02em 0.22em;
+}
+
+.ui-prose small {
+  font-size: var(--text-xs);
+}
+
+.ui-prose abbr[title] {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2rem;
+}
+
+.ui-prose :is(sub, sup) {
+  font-size: 0.72em;
+}
+
+@media (hover: hover) {
+  .ui-prose a:hover {
+    color: var(--accent-text);
+    text-decoration-color: var(--accent);
+  }
+}
+
+/* --- Lists — the Nothing dot/square marker --- */
+
+.ui-prose :is(ul, ol) {
+  padding-inline-start: 1.4rem;
+}
+
+.ui-prose li + li {
+  margin-block-start: 0.4rem;
+}
+
+.ui-prose li::marker {
+  color: var(--accent-text);
+}
+
+.ui-prose ul {
+  list-style: square;
+}
+
+.ui-prose :is(ul, ol) :is(ul, ol) {
+  margin-block-start: 0.4rem;
+}
+
+/* GitHub task lists stay semantic; just align them. */
+.ui-prose li:has(> input[type='checkbox']) {
+  list-style: none;
+  margin-inline-start: -1.4rem;
+}
+
+.ui-prose li > input[type='checkbox'] {
+  accent-color: var(--accent);
+  margin-inline-end: 0.4rem;
+}
+
+/* --- Quote --- */
+
+.ui-prose blockquote {
+  border-inline-start: 2px solid var(--accent);
+  color: var(--text-dim);
+  font-style: normal;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-prose blockquote > * + * {
+  margin-block-start: var(--space-xs);
+}
+
+/* --- Definition list --- */
+
+.ui-prose dt {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose dd {
+  margin-inline-start: 0;
+  padding-block: 0.16rem 0.6rem;
+}
+
+.ui-prose dd + dt {
+  border-block-start: 1px solid var(--line);
+  padding-block-start: 0.6rem;
+}
+
+/* --- Code --- */
+
+.ui-prose :not(pre) > code {
+  font-size: 0.88em;
+}
+
+.ui-prose pre {
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+/* --- Rule — reuse the dot-matrix divider look --- */
+
+.ui-prose hr {
+  background-image: radial-gradient(var(--line-strong) 1.4px, transparent 1.4px);
+  background-position: 0 50%;
+  background-size: 9px 9px;
+  block-size: 3px;
+  border: 0;
+  margin-block: var(--space-xl);
+}
+
+/* --- Media --- */
+
+.ui-prose :is(img, video, svg) {
+  block-size: auto;
+  border-radius: var(--radius-sm);
+  max-inline-size: 100%;
+}
+
+.ui-prose figure {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: start;
+}
+
+.ui-prose figcaption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+/* --- Table — raw Markdown tables look like ui-table --- */
+
+.ui-prose table {
+  border: 1px solid var(--line);
+  border-collapse: collapse;
+  border-radius: var(--radius-md);
+  display: block;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  inline-size: 100%;
+  overflow-x: auto;
+}
+
+.ui-prose :is(th, td) {
+  border-block-end: 1px solid var(--line);
+  padding: 0.6rem 0.8rem;
+  text-align: start;
+  vertical-align: top;
+}
+
+.ui-prose th {
+  background: var(--panel);
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-prose td {
+  color: var(--text-soft);
+}
+
+.ui-prose tbody tr:last-child :is(th, td) {
+  border-block-end: 0;
+}
+
+/* --- Compact variant — tighter rhythm for dense docs --- */
+
+.ui-prose--compact {
+  line-height: 1.55;
+}
+
+.ui-prose--compact > * + * {
+  margin-block-start: var(--space-sm);
+}
+
+.ui-prose--compact > * + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--space-lg);
+}
+
+/* ==========================================================================
+   ui-quote — pull-quote with attribution. A long-form companion to
+   .ui-prose (works inside it or standalone). Emphasis via scale + a
+   short accent rule, not a tinted box. Use <figure>/<blockquote> +
+   <figcaption>; tag-agnostic.
+   ========================================================================== */
+
+.ui-quote {
+  color: var(--text);
+  display: grid;
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  gap: var(--space-sm);
+  line-height: 1.2;
+  margin-block: var(--space-xl);
+  max-inline-size: 40ch;
+  text-wrap: balance;
+}
+
+.ui-quote::before {
+  background: var(--accent);
+  block-size: 2px;
+  content: '';
+  inline-size: 2.5rem;
+}
+
+.ui-quote__cite {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-style: normal;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/css/core.css

@@ -1,5 +1,7 @@
-/* @ponchia/ui — core bundle (no breakpoint overrides).
-   Consumers that manage their own responsive layer import this.
+/* @ponchia/ui — the CSS bundle (single source entrypoint).
+   The legacy non-ui-* vocabulary and the separate responsive layer were
+   removed in 0.3.0; the ui-* components carry their own breakpoints, so
+   there is one bundle, not a core/full split.
 
    Everything ships inside the `bronto` cascade layer. Any un-layered CSS
    in the consuming app therefore wins over the framework without a
@@ -12,11 +14,13 @@
 @import url('./base.css') layer(bronto);
 @import url('./motion.css') layer(bronto);
 @import url('./dots.css') layer(bronto);
-@import url('./layout.css') layer(bronto);
 @import url('./navigation.css') layer(bronto);
-@import url('./typography.css') layer(bronto);
+@import url('./site.css') layer(bronto);
+@import url('./content.css') layer(bronto);
 @import url('./primitives.css') layer(bronto);
 @import url('./forms.css') layer(bronto);
+@import url('./feedback.css') layer(bronto);
+@import url('./overlay.css') layer(bronto);
+@import url('./disclosure.css') layer(bronto);
 @import url('./table.css') layer(bronto);
-@import url('./cards.css') layer(bronto);
 @import url('./app.css') layer(bronto);

package/css/disclosure.css

@@ -0,0 +1,323 @@
+/* ==========================================================================
+   disclosure — tabs / accordion / segmented / breadcrumb / pagination / avatar
+   Tabs use an ARIA + .is-active contract (toggle via your framework or the
+   shipped behaviors); accordion is native <details>; segmented is a
+   CSS-only :has() radio group. All Nothing-flat with the dot cue.
+   ========================================================================== */
+
+/* --- Tabs --- */
+
+.ui-tabs {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.ui-tabs__list {
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  gap: 0.1rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ui-tabs__list::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-tab {
+  background: transparent;
+  border: 0;
+  border-block-end: 2px solid transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  margin-block-end: -1px;
+  padding: 0.6rem 0.85rem;
+  text-transform: uppercase;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-tab.is-active {
+  border-block-end-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-tab:focus-visible {
+  /* An inset box, deliberately distinct from the .is-active bottom-border
+     so focus ≠ selection for low-vision keyboard users: the global
+     button:focus-visible ring would otherwise sit exactly on the active
+     underline. Geometry (inset offset), not colour, carries the
+     distinction — colour stays the solid accent used by every other
+     control's ring (the --focus-ring token wiring is decided globally,
+     not per-component). */
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -3px;
+}
+
+.ui-tabs__panel[hidden] {
+  display: none;
+}
+
+@media (hover: hover) {
+  .ui-tab:hover:not(.is-active) {
+    color: var(--text);
+  }
+}
+
+/* --- Accordion — styled native <details> --- */
+
+.ui-accordion {
+  display: grid;
+}
+
+.ui-accordion__item {
+  border-block-end: 1px solid var(--line);
+}
+
+.ui-accordion__summary {
+  align-items: center;
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  gap: 0.6rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  padding: 0.85rem 0.2rem;
+  text-transform: uppercase;
+}
+
+.ui-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Dot marker rotates into an arrow cue when open. */
+.ui-accordion__summary::before {
+  border-inline-end: 1.5px solid var(--text-dim);
+  border-block-end: 1.5px solid var(--text-dim);
+  content: '';
+  block-size: 0.4rem;
+  transform: rotate(-45deg);
+  transition: transform var(--duration-fast) var(--ease-spring);
+  inline-size: 0.4rem;
+}
+
+.ui-accordion__item[open] .ui-accordion__summary {
+  color: var(--accent-text);
+}
+
+.ui-accordion__item[open] .ui-accordion__summary::before {
+  border-color: var(--accent);
+  transform: rotate(45deg);
+}
+
+.ui-accordion__body {
+  color: var(--text-soft);
+  padding: 0 0.2rem 0.95rem;
+}
+
+.ui-accordion__body > :first-child {
+  margin-block-start: 0;
+}
+
+/* --- Segmented control — CSS-only radio group --- */
+
+.ui-segmented {
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  gap: 1px;
+  overflow: hidden;
+  padding: 2px;
+}
+
+.ui-segmented__option {
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  flex: 1 0 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.42rem 0.8rem;
+  text-align: center;
+  text-transform: uppercase;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+}
+
+.ui-segmented__option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-segmented__option:has(input:checked) {
+  background: var(--accent);
+  color: var(--button-text);
+}
+
+.ui-segmented__option:has(input:focus-visible) {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .ui-segmented__option:hover:not(:has(input:checked)) {
+    color: var(--text);
+  }
+}
+
+/* --- Breadcrumb --- */
+
+.ui-breadcrumb {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.5rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-breadcrumb__item {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.ui-breadcrumb__item:not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  content: '';
+  block-size: 0.22rem;
+  inline-size: 0.22rem;
+}
+
+.ui-breadcrumb__item[aria-current] {
+  color: var(--text);
+}
+
+.ui-breadcrumb__item a {
+  color: inherit;
+}
+
+@media (hover: hover) {
+  .ui-breadcrumb__item a:hover {
+    color: var(--accent-text);
+  }
+}
+
+/* --- Pagination --- */
+
+.ui-pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-pagination__item {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  justify-content: center;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
+  padding: 0 0.5rem;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-pagination__item.is-active {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-pagination__item[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+@media (hover: hover) {
+  .ui-pagination__item:not(.is-active, [aria-disabled='true']):hover {
+    border-color: var(--line-strong);
+    color: var(--text);
+  }
+}
+
+/* --- Avatar — sharp, monospace initials or image --- */
+
+.ui-avatar {
+  --av-size: 2.2rem;
+
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  font-size: calc(var(--av-size) * 0.38);
+  font-weight: 700;
+  block-size: var(--av-size);
+  justify-content: center;
+  letter-spacing: 0.04em;
+  overflow: hidden;
+  text-transform: uppercase;
+  inline-size: var(--av-size);
+}
+
+.ui-avatar img {
+  block-size: 100%;
+  object-fit: cover;
+  inline-size: 100%;
+}
+
+.ui-avatar--sm {
+  --av-size: 1.5rem;
+}
+
+.ui-avatar--lg {
+  --av-size: 3.2rem;
+}
+
+.ui-avatar-group {
+  display: inline-flex;
+}
+
+.ui-avatar-group .ui-avatar {
+  box-shadow: 0 0 0 2px var(--bg);
+}
+
+.ui-avatar-group .ui-avatar:not(:first-child) {
+  margin-inline-start: -0.5rem;
+}