css-tags 0.1.0

package/components/box-extra.css

@@ -0,0 +1,220 @@
+/**
+ * box-extra.css
+ *
+ * A supplementary library of mixins and utilities for the box model.
+ * ------------------------------------------------------------------------------
+ * This file provides the CSS-centric counterpart to the `<box>` component.
+ * It contains a powerful `@mixin --box` that allows you to apply the same
+ * declarative styling to any selector in your stylesheet.
+ *
+ * --- PHILOSOPHY ---
+ * - CSS-First: Apply box-model styling directly in your CSS where it belongs,
+ *   without needing a specific HTML tag.
+ * - Reusability: Use the mixin to create consistent, custom components.
+ * - Convenience: Use the utility classes for common, one-off patterns.
+ *
+ * ==============================================================================
+ * ⚠️ IMPORTANT: PROPOSED FEATURE NOTICE ⚠️
+ * The @mixin rule is NOT SUPPORTED in any browser as of late 2025.
+ * This file demonstrates a forward-looking, pre-processor-free approach.
+ * ==============================================================================
+ *
+ * --- TABLE OF CONTENTS ---
+ *
+ * 1.  CORE BOX MIXIN
+ *     - `@mixin --box`
+ *
+ * 2.  UTILITY CLASSES
+ *     - `.u-panel`: A lightly styled container.
+ *     - `.u-well`: An inset container.
+ *     - `.u-spacer-block`: A vertical spacer.
+ *
+ */
+
+/*
+ * ==============================================================================
+ * 1. CORE BOX MIXIN (Proposed Syntax)
+ * ==============================================================================
+ */
+
+/**
+ * @mixin --box
+ * A comprehensive "Swiss Army Knife" mixin for applying common box-model and
+ * layout styles to any selector. It replicates the full functionality of the
+ * <box> component.
+ *
+ * -- SPACING PARAMETERS --
+ * @param {<length>} --p - Shorthand for block and inline padding.
+ * @param {<length>} --px - Overrides inline (horizontal) padding.
+ * @param {<length>} --py - Overrides block (vertical) padding.
+ * @param {<length>} --m - Shorthand for block and inline margin.
+ * @param {<length>} --mx - Overrides inline (horizontal) margin.
+ * @param {<length>} --my - Overrides block (vertical) margin.
+ *
+ * -- APPEARANCE PARAMETERS --
+ * @param {<color>} --bg - The background color.
+ * @param {<color>} --color - The text color.
+ * @param {string} --border - The full border property string.
+ * @param {<length>} --radius - The border-radius.
+ *
+ * -- LAYOUT & SIZING PARAMETERS --
+ * @param {string} --display - The display property (e.g., 'block', 'flex', 'grid').
+ * @param {<length>} --width, --height, --max-width - Sizing properties.
+ * @param {string} --align - The text-align property.
+ *
+ * @example
+ *   .custom-alert {
+ *     @apply --box(
+ *       --display: flex,
+ *       --p: var(--space-lg),
+ *       --bg: var(--surface-error),
+ *       --radius: var(--radius-md)
+ *     );
+ *   }
+ */
+@mixin --box(
+  /* Spacing */
+  --p: 0,
+  --px: null,
+  --py: null,
+  --m: 0,
+  --mx: null,
+  --my: null,
+  /* Appearance */
+  --bg: transparent,
+  --color: inherit,
+  --border: none,
+  --radius: 0,
+  /* Layout & Sizing */
+  --display: block,
+  --width: auto,
+  --height: auto,
+  --max-width: none,
+  --align: start
+) {
+  display: var(--display);
+
+  /*
+   * The var() fallback mechanism cleverly handles shorthands.
+   * If --px is provided, it's used; otherwise, it falls back to --p.
+   */
+  padding-inline: var(--px, var(--p));
+  padding-block: var(--py, var(--p));
+  margin-inline: var(--mx, var(--m));
+  margin-block: var(--my, var(--m));
+
+  width: var(--width);
+  height: var(--height);
+  max-width: var(--max-width);
+
+  background-color: var(--bg);
+  color: var(--auto-contrast-text, oklch(from var(--bg) clamp(0.1, (var(--l-threshold, 0.65) / l - 1) * 999, 0.98) min(c, var(--c-threshold, 0.08)) h));
+  color: var(--color);
+  border: var(--border);
+  border-radius: var(--radius);
+
+  text-align: var(--align);
+}
+
+
+/*
+ * ==============================================================================
+ * 2. UTILITY CLASSES
+ * ==============================================================================
+ * A few common UI patterns, built using the --box mixin for consistency.
+ */
+
+/**
+ * .u-panel
+ * A general-purpose container with padding, a subtle background, and rounded corners.
+ *
+ * @example
+ *   <div class="u-panel">This content is inside a panel.</div>
+ */
+.u-panel {
+  display: block;
+  padding: var(--space-md, 1.5rem);
+  background-color: var(--surface-subtle);
+  border-radius: var(--radius-lg, 8px);
+  @apply --box(
+    --p: var(--space-md, 1.5rem),
+    --bg: var(--surface-subtle),
+    --radius: var(--radius-lg, 8px)
+  );
+}
+
+/**
+ * .u-well
+ * An inset panel, often used for code blocks or read-only information.
+ *
+ * @example
+ *   <div class="u-well">This content is inside a well.</div>
+ */
+.u-well {
+  display: block;
+  padding: var(--space-md, 1.5rem);
+  background-color: var(--surface-muted);
+  border: 1px solid var(--outline-muted);
+  border-radius: var(--radius-md, 6px);
+  @apply --box(
+    --p: var(--space-md, 1.5rem),
+    --bg: var(--surface-muted),
+    --border: 1px solid var(--outline-muted),
+    --radius: var(--radius-md, 6px)
+  );
+}
+
+/**
+ * .u-spacer-block
+ * A simple utility for adding vertical space between elements.
+ * Customize the height with the `--_height` local variable.
+ *
+ * @example
+ *   <p>First paragraph.</p>
+ *   <div class="u-spacer-block" style="--_height: 4rem;"></div>
+ *   <p>Second paragraph.</p>
+ */
+.u-spacer-block {
+  --_height: var(--space-lg, 2rem);
+  display: block;
+  height: var(--_height);
+
+  @apply --box(
+    --display: block,
+    --height: var(--_height)
+  );
+}
+
+
+/*
+ * ==============================================================================
+ * 3. COMPOSITION EXAMPLE: STYLING A CALLOUT COMPONENT
+ * ==============================================================================
+ * This example shows how you could use the --box mixin to quickly build a new,
+ * fully-styled custom component from a semantic element.
+ */
+.box-callout-info {
+  display: grid;
+  padding: var(--space-lg, 2rem);
+  background-color: var(--surface-info);
+  border: 1px solid var(--info);
+  border-radius: var(--radius-lg, 8px);
+  /* Apply base styles using the box mixin */
+  @apply --box(
+    --display: grid,
+    --p: var(--space-lg, 2rem),
+    --bg: var(--surface-info),
+    --border: 1px solid var(--info),
+    --radius: var(--radius-lg, 8px)
+  );
+
+  /* Add additional styles specific to this component */
+  grid-template-columns: max-content 1fr;
+  gap: var(--space-md, 1.5rem);
+  align-items: center;
+
+  &::before {
+    content: 'ℹ️'; /* Info icon */
+    font-size: 1.5em;
+  }
+}

package/components/box.css

@@ -0,0 +1,75 @@
+/**
+ * box.css
+ *
+ * The "Swiss Army Knife" utility component.
+ * ------------------------------------------------------------------------------
+ * This component provides a declarative way to control dozens of CSS
+ * properties via HTML attributes. It's perfect for one-off layouts,
+ * spacers, and custom-styled containers without writing new CSS.
+ *
+ * @feature {attr() Level 5} - Extensively uses `attr()` with type-or-unit
+ *   and fallback values for dynamic and robust styling.
+ * @feature {Logical Properties} - Uses `padding-inline`, `margin-block`, etc.
+ */
+
+:is(box, [data-box], .box) {
+  /*
+   * For each CSS property, we define a custom property that reads its value
+   * from an HTML attribute using attr(). A fallback value is always provided.
+   */
+
+  /* Display & Layout */
+  --display: attr(display type(*), block);
+  --gap: attr(gap type(*), 0);
+
+  /* Spacing (using logical properties) */
+  --padding:         attr(p type(*), 0);
+  --padding-inline:  attr(px type(*), var(--padding));
+  --padding-block:   attr(py type(*), var(--padding));
+  --margin:          attr(m type(*), 0);
+  --margin-inline:   attr(mx type(*), var(--margin));
+  --margin-block:    attr(my type(*), var(--margin));
+
+  /* Sizing */
+  --width:  attr(width type(*), auto);
+  --height: attr(height type(*), auto);
+  --max-width: attr(max-width type(*), none);
+
+  /* Appearance */
+  --color:      attr(color type(*), inherit);
+  --border:     attr(border type(*), none);
+  --radius:     attr(radius type(*), 0);
+
+  /* Typography */
+  --text-align: attr(align type(*), start);
+
+  /* Apply the variables to the actual CSS properties */
+  display: var(--display);
+  gap: var(--gap);
+  padding-inline: var(--padding-inline);
+  padding-block: var(--padding-block);
+  margin-inline: var(--margin-inline);
+  margin-block: var(--margin-block);
+  width: var(--width);
+  height: var(--height);
+  max-width: var(--max-width);
+  background: attr(bg type(*), transparent);
+  color: var(--color);
+  border: var(--border);
+  border-radius: var(--radius);
+  text-align: var(--text-align);
+
+  /*
+   * Example of using a mixin for more complex styles.
+   * A box with `elevation="2"` would receive a pre-defined shadow.
+   */
+  &[elevation] {
+    /* @apply --elevation(attr(elevation type(*))); */
+  }
+
+  /* Only propagate --bg when a bg attribute is explicitly set.
+     This lets --bg inherit through non-bg boxes to reach <text> etc. */
+  &[bg] {
+    --bg: attr(bg type(*));
+  }
+}

package/components/card.css

@@ -0,0 +1,130 @@
+/**
+ * card.css
+ *
+ * A token-first card with custom-element, data, and class hosts.
+ */
+
+:is(card, [data-card], .card) {
+  --_card-background: var(--card-background, var(--surface-default));
+  --_card-color: var(--card-color, var(--text-default));
+  --_card-border-color: var(--card-border-color, var(--outline-subtle, var(--outline, currentColor)));
+  --_card-border-width: var(--card-border-width, var(--border-width, 1px));
+  --_card-radius: var(--card-radius, var(--radius-lg, 0.75rem));
+  --_card-padding: var(--card-padding, var(--space-lg, 1.5rem));
+  --_card-gap: var(--card-gap, var(--space-sm, 0.75rem));
+
+  container: card-container / inline-size;
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--_card-border-width) solid var(--_card-border-color);
+  border-radius: var(--_card-radius);
+  background: var(--_card-background);
+  color: var(--_card-color);
+  box-shadow: var(--card-shadow, none);
+  transition: transform var(--transition-duration, 150ms) var(--transition-timing, ease-out),
+              box-shadow var(--transition-duration, 150ms) var(--transition-timing, ease-out);
+}
+
+:is(card, [data-card], .card):is(:hover, :focus-within) {
+  transform: var(--card-hover-transform, translateY(-2px));
+  box-shadow: var(--card-hover-shadow, var(--shadow-sm, none));
+}
+
+:is(card-media, [data-card-media], .card-media) {
+  display: block;
+  min-inline-size: 0;
+  aspect-ratio: var(--card-media-ratio, 16 / 9);
+  overflow: hidden;
+  background: var(--card-media-background, var(--surface-subtle));
+}
+
+:is(card-media, [data-card-media], .card-media) > :is(img, video) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: var(--card-media-fit, cover);
+}
+
+:is(card-body, [data-card-body], .card-body) {
+  display: flex;
+  min-inline-size: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--_card-gap);
+  padding: var(--_card-padding);
+}
+
+:is(card-header, [data-card-header], .card-header) {
+  display: block;
+  color: var(--card-heading-color, var(--text-overt));
+  font-family: var(--font-family-heading, inherit);
+  font-size: var(--card-heading-size, var(--font-size-card-title, var(--font-size-xl, 1.25rem)));
+  font-weight: var(--card-heading-weight, var(--font-weight-heading, var(--font-weight-semibold, 600)));
+  line-height: var(--line-height-card-title, var(--line-height-heading, 1.2));
+}
+
+/* Direct regions own their insets; regions nested in card-body use its inset. */
+:is(card, [data-card], .card) > :is(card-header, [data-card-header], .card-header) {
+  padding: var(--card-header-padding, var(--_card-padding));
+}
+
+@supports selector(:has(*)) {
+  :is(card, [data-card], .card):has(> :is(card-body, [data-card-body], .card-body))
+    > :is(card-header, [data-card-header], .card-header) {
+    padding-block-end: var(--card-header-padding-block-end, 0);
+  }
+}
+
+:is(card-content, [data-card-content], .card-content) {
+  display: block;
+  flex: 1;
+  color: var(--card-content-color, var(--text-default));
+}
+
+:is(card-content, [data-card-content], .card-content) > :first-child,
+:is(card-footer, [data-card-footer], .card-footer) > :first-child {
+  margin-block-start: 0;
+}
+
+:is(card-content, [data-card-content], .card-content) > :last-child,
+:is(card-footer, [data-card-footer], .card-footer) > :last-child {
+  margin-block-end: 0;
+}
+
+:is(card-footer, [data-card-footer], .card-footer) {
+  display: block;
+  margin-block-start: auto;
+  color: var(--card-footer-color, var(--text-subtle));
+  font-size: var(--card-footer-size, var(--font-size-meta, var(--font-size-sm, 0.875rem)));
+  line-height: var(--line-height-meta, var(--line-height-snug, 1.375));
+}
+
+:is(card, [data-card], .card) > :is(card-footer, [data-card-footer], .card-footer) {
+  padding: var(--card-footer-padding, var(--_card-padding));
+}
+
+@supports selector(:has(*)) {
+  :is(card, [data-card], .card):has(> :is(card-body, [data-card-body], .card-body))
+    > :is(card-footer, [data-card-footer], .card-footer) {
+    padding-block-start: var(--card-footer-padding-block-start, 0);
+  }
+}
+
+@container card-container (min-width: 32rem) {
+  :is(card, [data-card], .card)[data-card-layout="adaptive"],
+  :is(card, [data-card], .card):not([data-card-layout]) {
+    flex-direction: row;
+  }
+
+  :is(card, [data-card], .card)[data-card-layout="adaptive"] > :is(card-media, [data-card-media], .card-media),
+  :is(card, [data-card], .card):not([data-card-layout]) > :is(card-media, [data-card-media], .card-media) {
+    flex: 0 0 var(--card-media-width, 10rem);
+    aspect-ratio: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(card, [data-card], .card) { transition: none; }
+  :is(card, [data-card], .card):is(:hover, :focus-within) { transform: none; }
+}

package/components/carousel.css

@@ -0,0 +1,76 @@
+/**
+ * carousel.css
+ *
+ * Styles for a responsive and touch-friendly carousel.
+ * ------------------------------------------------------------------------------
+ * @feature {CSS Custom Properties} - For easy customization of animation.
+ * @feature {backdrop-filter} - For modern "glassmorphism" button effects.
+ * @feature {Scroll Snap} (Progressive Enhancement) - Provides a JS-free fallback.
+ */
+
+:is(carousel, [data-carousel], .carousel) {
+  --slide-duration: attr(duration type(*), 500ms);
+  --slide-timing: attr(timing-function type(*), cubic-bezier(0.4, 0, 0.2, 1));
+
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: attr(radius type(*), 0.75rem);
+  width: attr(width type(*), 100%);
+  max-inline-size: 100%;
+}
+
+/*
+ * The slides container can use scroll-snapping as a JS-free enhancement.
+ * The JS will override this with transform-based animation if it loads.
+ */
+:is(.carousel-slides, [data-carousel-slides]) {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+  -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
+  transition: transform var(--slide-duration) var(--slide-timing);
+@media (prefers-reduced-motion: reduce) {
+  transition: none;
+}
+
+  &::-webkit-scrollbar { display: none; } /* Hide scrollbar in WebKit */
+}
+
+:is(carousel-item, [data-carousel-item], .carousel-item) {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+
+:is(carousel-trigger, [data-carousel-trigger], .carousel-trigger) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  background-color: oklch(from var(--theme-bg) l c h / 0.5);
+  backdrop-filter: blur(5px);
+  color: var(--theme-text);
+  border: 1px solid transparent;
+  border-radius: 50%;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
+
+  &:hover {
+    background-color: oklch(from var(--theme-bg) l c h / 0.8);
+    border-color: var(--theme-primary);
+  }
+
+  &[direction="prev"] { inset-inline-start: 1rem; }
+  &[direction="next"] { inset-inline-end: 1rem; }
+
+  &[disabled] {
+    opacity: 0.3;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/components/chip.css

@@ -0,0 +1,71 @@
+/* chip.css */
+
+:is(chip, [data-chip], .chip) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap, var(--l-gap, 0.5em));
+  --b-bg: var(--chip-bg, var(--surface-subtle));
+  --b-bw: var(--chip-border-width, var(--border-width, 1px));
+  --b-bc: var(--chip-border-color, var(--outline-subtle));
+  --b-fg: var(--chip-color, var(--text-default));
+  --b-r: var(--chip-radius, var(--border-radius-full, 9999px));
+  --b-py: var(--chip-padding-block, 0.35em);
+  --b-px: var(--chip-padding-inline, 0.75em);
+  background-color: var(--b-bg);
+  border: var(--b-bw) solid var(--b-bc);
+  border-radius: var(--b-r);
+  color: var(--b-fg);
+  padding: var(--b-py) var(--b-px);
+  font-size: 0.9em;
+  line-height: 1;
+}
+
+@supports (text-box: trim-both cap alphabetic) {
+  :is(chip, [data-chip], .chip) {
+    text-box: var(--text-box-chip, var(--text-box-ui));
+  }
+}
+
+@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
+  :is(chip, [data-chip], .chip) {
+    text-box-trim: var(--text-box-trim-chip, var(--text-box-trim-ui));
+    text-box-edge: var(--text-box-edge-chip, var(--text-box-edge-ui));
+  }
+}
+
+:is(chip, [data-chip], .chip):is([size="sm"], [data-size="sm"], .chip-sm) { --b-py: 0.25em; --b-px: 0.6em; font-size: 0.85em; }
+:is(chip, [data-chip], .chip):is([size="md"], [data-size="md"], .chip-md) { --b-py: 0.35em; --b-px: 0.75em; font-size: 0.9em; }
+:is(chip, [data-chip], .chip):is([size="lg"], [data-size="lg"], .chip-lg) { --b-py: 0.5em; --b-px: 0.9em; font-size: 1em; }
+
+:is(chip, [data-chip], .chip):is([removable], [data-removable]):focus-visible {
+  outline: var(--focus-ring-width, 2px) var(--focus-ring-style, solid) var(--focus-ring-color, currentColor);
+  outline-offset: 2px;
+}
+
+:is(chip, [data-chip], .chip):is([removable], [data-removable]):hover { filter: brightness(1.02); }
+
+:is(chip, [data-chip], .chip):is([removable], [data-removable])::after {
+  content: "✕";
+  display: inline-block;
+  margin-inline-start: 0.25em;
+  font-size: 0.9em;
+  opacity: 0.7;
+}
+
+:is(chip, [data-chip], .chip):is([variant="default"], [data-variant="default"], .chip-default, [role="default"]) {
+  --b-bg: var(--chip-bg, var(--surface-default));
+  --b-bc: var(--chip-border-color, var(--outline-default));
+  --b-fg: var(--chip-color, var(--text-default));
+}
+
+:is(chip, [data-chip], .chip):is([variant="overt"], [data-variant="overt"], .chip-overt, [role="overt"]) {
+  --b-bg: var(--chip-bg, var(--surface-overt));
+  --b-bc: var(--chip-border-color, var(--outline-overt));
+  --b-fg: var(--chip-color, var(--text-on-surface-overt, var(--text-overt)));
+}
+
+:is(chip, [data-chip], .chip):is([variant="muted"], [data-variant="muted"], .chip-muted, [role="muted"]) {
+  --b-bg: var(--chip-bg, var(--surface-muted));
+  --b-bc: var(--chip-border-color, var(--outline-muted, var(--outline-subtle)));
+  --b-fg: var(--chip-color, var(--text-subtle));
+}

package/components/container.css

@@ -0,0 +1,55 @@
+/**
+ * container.css
+ *
+ * A responsive container powered by CSS Style Queries.
+ * ------------------------------------------------------------------------------
+ * This component is a showcase of modern CSS architecture. It contains no
+ * media queries. Instead, it reacts to the global `--breakpoint-active` variable
+ * set on an ancestor (e.g., <body>), making it truly context-aware.
+ *
+ * @feature {Style Queries} - `@container style(...)` makes the component
+ *   react to the computed value of a parent's custom property.
+ * @feature {Logical Properties} - `margin-inline` for automatic LTR/RTL support.
+ * @feature {attr()} - For per-element overrides of max-width values.
+ */
+
+:is(container, [data-container], .container) {
+  /*
+   * 1. Define the max-width values for EACH possible state.
+   *    These can be overridden per-element with HTML attributes.
+   */
+  --mw-sm: attr(max-width-sm type(*), 100%);
+  --mw-md: attr(max-width-md type(*), 768px);
+  --mw-lg: attr(max-width-lg type(*), 1024px);
+  --mw-xl: attr(max-width-xl type(*), 1280px);
+
+  /*
+   * 2. Initialize the master variable and apply base styles.
+   *    It defaults to the largest size.
+   */
+  --container-max-width: var(--mw-xl);
+  --container-padding-inline: attr(pad type(*), 1.5rem);
+
+  display: block;
+  width: 100%;
+  margin-inline: auto; /* auto centers the container */
+  padding-inline: var(--container-padding-inline);
+  max-width: var(--container-max-width);
+}
+
+/*
+ * 3. Use Style Queries to update the master variable.
+ *    The component checks the value of `--breakpoint-active` from its query
+ *    container (e.g., <body>) and updates its own max-width accordingly.
+ */
+@container style(--breakpoint-active = lg) {
+  :is(container, [data-container], .container) { --container-max-width: var(--mw-lg); }
+}
+
+@container style(--breakpoint-active = md) {
+  :is(container, [data-container], .container) { --container-max-width: var(--mw-md); }
+}
+
+@container style(--breakpoint-active = sm) {
+  :is(container, [data-container], .container) { --container-max-width: var(--mw-sm); }
+}