css-tags 0.1.0

package/components/disclosure.css

@@ -0,0 +1,581 @@
+/**
+ * disclosure.css
+ *
+ * Native `details`/`summary` disclosure, accordion, and details-based tabs.
+ * Semantic HTML first — zero JS required.
+ * Progressive enhancement via @starting-style and interpolate-size.
+ * --------------------------------------------------------------------------
+ * Selectors: details, summary, .accordion / [data-accordion],
+ *            .tabs-details / [data-tabs-details]
+ *
+ * Variants:
+ *   [data-disclosure="compact"]   Tighter padding
+ *   [data-disclosure="flush"]     No border, no background (inline toggle)
+ *   [data-disclosure="bordered"]  Heavier bordered container style
+ *   summary[data-summary-end]     Chevron on the left, text on the right
+ *
+ * Tokens (all optional, sensible defaults derive from theme):
+ *   --disclosure-border-color       Outer border color
+ *   --disclosure-border-width       Outer border width
+ *   --disclosure-bg                 Panel background
+ *   --disclosure-radius             Corner rounding
+ *   --disclosure-padding            Content + summary inline/block padding
+ *   --disclosure-gap                Gap around content area
+ *   --disclosure-transition         Duration for open/close animation
+ *
+ *   --disclosure-summary-bg         Summary resting background
+ *   --disclosure-summary-color      Summary resting text color
+ *   --disclosure-summary-weight     Summary font weight
+ *   --disclosure-summary-hover-bg   Summary hover background
+ *   --disclosure-summary-hover-color Summary hover text color
+ *
+ *   --disclosure-content-bg         Content-area background (if distinct)
+ *
+ *   --accordion-gap                 Gap between accordion items
+ *   --accordion-radius              Outer radius on first/last items
+ */
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  BASE DETAILS / SUMMARY                                               ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+details {
+  --_border-color: var(--disclosure-border-color, var(--outline-subtle));
+  --_border-width: var(--disclosure-border-width, var(--border-width, 1px));
+  --_bg:           var(--disclosure-bg, var(--surface-default, transparent));
+  --_radius:       var(--disclosure-radius, var(--radius-md, 0.5rem));
+  --_padding:      var(--disclosure-padding, 1rem);
+  --_transition:   var(--disclosure-transition, 200ms);
+
+  border: var(--_border-width) solid var(--_border-color);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  overflow: hidden;
+}
+
+summary {
+  --_bg:          var(--disclosure-summary-bg, transparent);
+  --_color:       var(--disclosure-summary-color, var(--text-overt, inherit));
+  --_weight:      var(--disclosure-summary-weight, var(--font-weight-medium, 500));
+  --_hover-bg:    var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
+  --_hover-color: var(--disclosure-summary-hover-color, var(--text-overt, inherit));
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: var(--_padding);
+  background: var(--_bg);
+  color: var(--_color);
+  font-weight: var(--_weight);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  transition:
+    background-color var(--_transition) ease-out,
+    color            var(--_transition) ease-out;
+}
+
+/* Hide default marker across engines */
+summary::-webkit-details-marker { display: none; }
+summary::marker { content: ''; }
+
+/* Chevron indicator via ::after */
+summary::after {
+  content: '';
+  flex-shrink: 0;
+  width: 0.5em;
+  height: 0.5em;
+  border-inline-end: 2px solid currentColor;
+  border-block-end:  2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--_transition) ease;
+  margin-inline-start: auto;
+}
+
+details[open] > summary::after {
+  transform: rotate(45deg);
+}
+
+/* Hover & Focus */
+summary:hover {
+  background: var(--_hover-bg);
+  color: var(--_hover-color);
+}
+
+summary:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
+  outline-offset: calc(-1 * var(--focus-ring-width, 2px));
+}
+
+/* ── Content area ── */
+details > :not(summary) {
+  padding-inline: var(--disclosure-padding, 1rem);
+  background: var(--disclosure-content-bg, transparent);
+}
+
+details > summary + * {
+  padding-block-start: var(--disclosure-padding, 1rem);
+}
+
+details > :last-child:not(summary) {
+  padding-block-end: var(--disclosure-padding, 1rem);
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  CONTENT ANIMATION — @starting-style + interpolate-size              ║
+   ║  Progressive enhancement: browsers without support get instant toggle ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+/*
+ * Allow height to transition from 0 → auto using interpolate-size.
+ * Wrap the content in a <div> or <p> directly after <summary> for best results.
+ * Falls back to instant show/hide in older browsers.
+ */
+@supports (interpolate-size: allow-keywords) {
+  details {
+    interpolate-size: allow-keywords;
+  }
+
+  details > :not(summary) {
+    overflow: hidden;
+    block-size: auto;
+    transition:
+      block-size    var(--disclosure-transition, 200ms) ease-out,
+      opacity       var(--disclosure-transition, 200ms) ease-out,
+      padding-block var(--disclosure-transition, 200ms) ease-out;
+  }
+
+  details:not([open]) > :not(summary) {
+    block-size: 0;
+    opacity: 0;
+    padding-block: 0;
+  }
+
+  /* Entry animation: start collapsed, transition to auto */
+  @starting-style {
+    details[open] > :not(summary) {
+      block-size: 0;
+      opacity: 0;
+      padding-block: 0;
+    }
+  }
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  VARIANT: compact                                                     ║
+   ║  Tighter spacing for dense UIs (sidebars, settings panels)            ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+details[data-disclosure="compact"],
+:is(.accordion, [data-accordion])[data-disclosure="compact"] > details {
+  --disclosure-padding: 0.625rem 0.875rem;
+}
+
+details[data-disclosure="compact"] > summary {
+  font-size: 0.875rem;
+  gap: 0.5rem;
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  VARIANT: flush                                                       ║
+   ║  No border, no background — inline toggle (e.g. "Show code ▸")       ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+details[data-disclosure="flush"] {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+}
+
+details[data-disclosure="flush"] > summary {
+  padding-inline: 0;
+  background: transparent;
+  color: var(--text-link, var(--accent));
+  font-weight: var(--font-weight-normal, 400);
+  gap: 0.375rem;
+  justify-content: flex-start;
+}
+
+details[data-disclosure="flush"] > summary:hover {
+  background: transparent;
+  color: var(--text-link-hover, var(--accent-overt));
+}
+
+details[data-disclosure="flush"] > summary::after {
+  transform: rotate(-45deg);
+  width: 0.4em;
+  height: 0.4em;
+  margin-inline-start: 0;
+}
+
+details[data-disclosure="flush"][open] > summary::after {
+  transform: rotate(45deg);
+}
+
+details[data-disclosure="flush"] > :not(summary) {
+  padding-inline: 0;
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  VARIANT: bordered                                                    ║
+   ║  Heavier bordered container with distinct summary/content split       ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+details[data-disclosure="bordered"] {
+  --disclosure-border-width: var(--border-width-thick, 2px);
+  --disclosure-border-color: var(--outline-default, var(--outline-subtle));
+  --disclosure-radius: var(--radius-lg, 0.75rem);
+  box-shadow: 0 1px 3px oklch(from var(--base, #fff) calc(l - 50%) 0.02 h / 0.08);
+}
+
+details[data-disclosure="bordered"] > summary {
+  background: var(--surface-subtle);
+  border-block-end: var(--disclosure-border-width, var(--border-width-thick, 2px)) solid var(--disclosure-border-color, var(--outline-default));
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+details[data-disclosure="bordered"]:not([open]) > summary {
+  border-block-end-color: transparent;
+}
+
+details[data-disclosure="bordered"] > :not(summary) {
+  background: var(--disclosure-content-bg, var(--surface-default, transparent));
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  VARIANT: summary-end — right-aligned text, chevron leads            ║
+   ║  Usage: <summary data-summary-end>Show code</summary>               ║
+   ║  Ideal for "Code" toggles, debug info, footnotes                     ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+summary[data-summary-end] {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+summary[data-summary-end]::after {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  ACCORDION — .accordion / [data-accordion]                            ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+:is(.accordion, [data-accordion]) {
+  --_radius: var(--accordion-radius, var(--disclosure-radius, var(--radius-md, 0.5rem)));
+  --_gap:    var(--accordion-gap, 0px);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--_gap);
+}
+
+/* Strip individual radii when stacked together */
+:is(.accordion, [data-accordion]) > details {
+  border-radius: 0;
+}
+
+/* First child: round top corners */
+:is(.accordion, [data-accordion]) > details:first-child {
+  border-start-start-radius: var(--_radius);
+  border-start-end-radius:   var(--_radius);
+}
+
+/* Last child: round bottom corners */
+:is(.accordion, [data-accordion]) > details:last-child {
+  border-end-start-radius: var(--_radius);
+  border-end-end-radius:   var(--_radius);
+}
+
+/* Collapse shared borders when gap = 0 */
+:is(.accordion, [data-accordion]) > details + details {
+  margin-block-start: calc(-1 * var(--disclosure-border-width, var(--border-width, 1px)));
+}
+
+/* Open item gets subtle emphasis in accordion context */
+:is(.accordion, [data-accordion]) > details[open] > summary {
+  background: var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
+}
+
+
+/* ── Accordion with explicit gap — each item is standalone ── */
+
+:is(.accordion, [data-accordion])[style*="--accordion-gap"] > details,
+:is(.accordion, [data-accordion])[gap] > details {
+  border-radius: var(--_radius);
+  margin-block-start: 0;
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  DETAILS-BASED TABS (stacked) — .tabs-details-stacked                 ║
+   ║  Vertical disclosure-driven tabs. Each summary is a full-width row.   ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details {
+  border-radius: 0;
+}
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details + details {
+  margin-block-start: calc(-1 * var(--disclosure-border-width, var(--border-width, 1px)));
+}
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details:first-child {
+  border-start-start-radius: var(--disclosure-radius, var(--radius-md, 0.5rem));
+  border-start-end-radius:   var(--disclosure-radius, var(--radius-md, 0.5rem));
+}
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details:last-child {
+  border-end-start-radius: var(--disclosure-radius, var(--radius-md, 0.5rem));
+  border-end-end-radius:   var(--disclosure-radius, var(--radius-md, 0.5rem));
+}
+
+:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details[open] > summary {
+  background: var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
+  color: var(--text-overt);
+  border-inline-start: 3px solid var(--accent, currentColor);
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  GRID TABS — .tabs-details / [data-tabs-details]                      ║
+   ║  Horizontal tab bar using CSS subgrid + ::details-content.            ║
+   ║  Pure CSS, zero JS. Set --tab-count to match the number of tabs.      ║
+   ║                                                                        ║
+   ║  Tokens:                                                               ║
+   ║    --tab-count           Number of tabs (for grid columns)             ║
+   ║    --tabs-gap            Column gap between tab buttons                ║
+   ║    --tabs-border-color   Bottom border of tab row                      ║
+   ║    --tabs-active-color   Active tab indicator color                    ║
+   ║    --tabs-panel-padding  Padding inside the tab panel                  ║
+   ║    --tabs-radius         Border radius for boxed variant               ║
+   ║                                                                        ║
+   ║  Usage:                                                                ║
+   ║    <div class="tabs-details" style="--tab-count: 3">                  ║
+   ║      <details name="my-tabs" open style="--n: 1">                     ║
+   ║        <summary>Tab 1</summary>                                       ║
+   ║        <p>Panel 1 content</p>                                         ║
+   ║      </details>                                                        ║
+   ║      <details name="my-tabs" style="--n: 2">                          ║
+   ║        <summary>Tab 2</summary>                                       ║
+   ║        <p>Panel 2 content</p>                                         ║
+   ║      </details>                                                        ║
+   ║      <details name="my-tabs" style="--n: 3">                          ║
+   ║        <summary>Tab 3</summary>                                       ║
+   ║        <p>Panel 3 content</p>                                         ║
+   ║      </details>                                                        ║
+   ║    </div>                                                              ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+:is(.tabs-details, [data-tabs-details]) {
+  --_tab-count:      var(--tab-count, 3);
+  --_gap:            var(--tabs-gap, 0rem);
+  --_border-color:   var(--tabs-border-color, var(--outline-subtle));
+  --_active-color:   var(--tabs-active-color, var(--accent, currentColor));
+  --_panel-padding:  var(--tabs-panel-padding, var(--disclosure-padding, 1rem));
+  --_radius:         var(--tabs-radius, var(--disclosure-radius, var(--radius-md, 0.5rem)));
+  --_transition:     var(--disclosure-transition, 200ms);
+
+  display: grid;
+  grid-template-columns: repeat(var(--_tab-count), minmax(0, 1fr));
+  grid-template-rows: auto 1fr;
+  column-gap: var(--_gap);
+}
+
+/* Each details element spans the full grid */
+:is(.tabs-details, [data-tabs-details]) > details {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  grid-column: 1 / -1;
+  grid-row: 1 / span 2;
+  margin: 0;
+
+  /* Reset base details styles in tab context */
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+/* Summary acts as the tab button */
+:is(.tabs-details, [data-tabs-details]) > details > summary {
+  grid-row: 1;
+  grid-column: var(--n, 1) / span 1;
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+  gap: 0.5rem;
+
+  color: var(--text-subtle);
+  font-weight: var(--font-weight-medium, 500);
+  background: transparent;
+  border: none;
+  border-block-end: 2px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color        var(--_transition) ease-out,
+    border-color var(--_transition) ease-out;
+}
+
+/* Remove chevron in tab context */
+:is(.tabs-details, [data-tabs-details]) > details > summary::after {
+  display: none;
+}
+
+/* Tab hover */
+:is(.tabs-details, [data-tabs-details]) > details > summary:hover {
+  color: var(--text-overt);
+  background: transparent;
+}
+
+/* Tab focus */
+:is(.tabs-details, [data-tabs-details]) > details > summary:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
+  outline-offset: -2px;
+}
+
+/* Active tab */
+:is(.tabs-details, [data-tabs-details]) > details[open] > summary {
+  color: var(--text-overt);
+  font-weight: var(--font-weight-semibold, 600);
+  border-block-end-color: var(--_active-color);
+  background: transparent;
+  border-inline-start: none;
+}
+
+/* Tab panel — uses ::details-content for native open/close */
+:is(.tabs-details, [data-tabs-details]) > details::details-content {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  padding: var(--_panel-padding);
+
+  /* Smooth open/close */
+  opacity: 1;
+  block-size: auto;
+  overflow: visible;
+  transition:
+    opacity var(--_transition) ease-out,
+    display var(--_transition) ease-out allow-discrete;
+}
+
+:is(.tabs-details, [data-tabs-details]) > details:not([open])::details-content {
+  display: none;
+  opacity: 0;
+}
+
+/* Content inside panel — reset disclosure content padding */
+:is(.tabs-details, [data-tabs-details]) > details > :not(summary) {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+}
+
+/* Entry animation */
+@starting-style {
+  :is(.tabs-details, [data-tabs-details]) > details[open]::details-content {
+    opacity: 0;
+  }
+}
+
+
+/* ── Boxed variant — card-style tabs that visually connect to panel ── */
+
+:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details > summary {
+  border: var(--border-width, 1px) solid var(--_border-color);
+  border-block-end: none;
+  border-radius: var(--_radius) var(--_radius) 0 0;
+  background: var(--surface-subtle, var(--highlight-bg-muted));
+  margin-inline-end: -1px;
+  position: relative;
+}
+
+/* Active boxed tab — connects visually to the panel */
+:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details[open] > summary {
+  background: var(--surface-default, var(--base));
+  z-index: 2;
+  border-block-end-color: transparent;
+}
+
+/* Bridge between active tab and panel */
+:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details[open] > summary::after {
+  display: block;
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: -1px;
+  block-size: 2px;
+  background: var(--surface-default, var(--base));
+  border: none;
+  width: auto;
+  height: auto;
+  transform: none;
+}
+
+/* Boxed panel styling */
+:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details::details-content {
+  border: var(--border-width, 1px) solid var(--_border-color);
+  border-radius: 0 0 var(--_radius) var(--_radius);
+  margin-block-start: -1px;
+  background: var(--surface-default, var(--base));
+}
+
+
+/* ── Pill variant — rounded tab buttons with filled active state ── */
+
+:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) {
+  column-gap: 0.25rem;
+}
+
+:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details > summary {
+  border: none;
+  border-radius: var(--radius-full, 9999px);
+  padding: 0.5rem 1.25rem;
+}
+
+:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details > summary:hover {
+  background: var(--highlight-bg-subtle);
+}
+
+:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details[open] > summary {
+  background: var(--accent);
+  color: var(--text-on-base, #fff);
+  border-block-end: none;
+}
+
+:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details[open] > summary::after {
+  display: none;
+}
+
+
+/* ╔══════════════════════════════════════════════════════════════════════════╗
+   ║  REDUCED MOTION — respect user preference                             ║
+   ╚══════════════════════════════════════════════════════════════════════════╝ */
+
+@media (prefers-reduced-motion: reduce) {
+  summary,
+  summary::after,
+  details > :not(summary),
+  details::details-content {
+    transition-duration: 0ms !important;
+  }
+}

package/components/divider.css

@@ -0,0 +1,68 @@
+/**
+ * divider.css
+ *
+ * Semantic horizontal rules and opt-in horizontal or vertical separators.
+ * Native <hr> is the preferred content separator. Other hosts should carry
+ * role="separator" and an aria-orientation when they are meaningful.
+ */
+
+:is(hr, divider, [data-divider], .divider) {
+  --_divider-role-color: var(--divider-color-subtle, var(--outline-subtle));
+  --_divider-color: var(--divider-color, var(--_divider-role-color));
+  --_divider-size: var(--divider-size, var(--border-width, 1px));
+  --_divider-style: var(--divider-style, solid);
+  --_divider-gap: var(--divider-gap, var(--space-md, 1rem));
+  --_divider-length: var(--divider-length, 100%);
+
+  display: block;
+  box-sizing: border-box;
+  flex: none;
+  align-self: stretch;
+  inline-size: var(--_divider-length);
+  block-size: 0;
+  margin-block: var(--_divider-gap);
+  margin-inline: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  border-block-start: var(--_divider-size) var(--_divider-style) var(--_divider-color);
+  background: none;
+}
+
+:is(hr, divider, [data-divider], .divider)[strength="muted"] {
+  --_divider-role-color: var(--divider-color-muted, var(--outline-muted));
+}
+
+:is(hr, divider, [data-divider], .divider)[strength="default"] {
+  --_divider-role-color: var(--divider-color-default, var(--outline-default, var(--outline)));
+}
+
+:is(hr, divider, [data-divider], .divider)[strength="overt"] {
+  --_divider-role-color: var(--divider-color-overt, var(--outline-overt));
+}
+
+:is(hr, divider, [data-divider], .divider)[strength="accent"] {
+  --_divider-role-color: var(--divider-color-accent, var(--accent));
+}
+
+:is(hr, divider, [data-divider], .divider):is(
+  [orientation="vertical"],
+  [aria-orientation="vertical"],
+  [vertical]
+) {
+  --_divider-length: var(--divider-length, auto);
+
+  inline-size: 0;
+  block-size: var(--_divider-length);
+  min-block-size: var(--divider-min-length, 1.5rem);
+  margin-block: 0;
+  margin-inline: var(--_divider-gap);
+  border-block-start: 0;
+  border-inline-start: var(--_divider-size) var(--_divider-style) var(--_divider-color);
+}
+
+@media (forced-colors: active) {
+  :is(hr, divider, [data-divider], .divider) {
+    --_divider-color: CanvasText;
+  }
+}