css-tags 0.1.0

package/carousel.js

@@ -0,0 +1,86 @@
+/**
+ * carousel.js
+ *
+ * Logic for the responsive and touch-friendly carousel component.
+ * ------------------------------------------------------------------------------
+ * This script initializes all carousels on the page, adding support for:
+ * - Next/Previous button navigation and state management.
+ * - Looping behavior.
+ * - Touch-based swipe navigation for mobile devices.
+ * - It overrides scroll-snap behavior for transform-based animations.
+ */
+function initializeCarousels(root = document) {
+  const carousels = root.querySelectorAll(':is(carousel, [data-carousel], .carousel)');
+
+  carousels.forEach(carousel => {
+    if (carousel.dataset.carouselInitialized === 'true') return;
+
+    const slidesContainer = carousel.querySelector(':is(.carousel-slides, [data-carousel-slides])');
+    const items = carousel.querySelectorAll(':is(carousel-item, [data-carousel-item], .carousel-item)');
+    const prevTrigger = carousel.querySelector(':is(carousel-trigger, [data-carousel-trigger], .carousel-trigger)[direction="prev"]');
+    const nextTrigger = carousel.querySelector(':is(carousel-trigger, [data-carousel-trigger], .carousel-trigger)[direction="next"]');
+
+    if (!slidesContainer || items.length === 0) return;
+    carousel.dataset.carouselInitialized = 'true';
+
+    const totalSlides = items.length;
+    const isLooping = carousel.hasAttribute('loop');
+
+    // Set the slides container width to accommodate all slides
+    slidesContainer.style.width = `${totalSlides * 100}%`;
+
+    // Set each item width to match the carousel width
+    items.forEach(item => {
+      item.style.width = `${100 / totalSlides}%`;
+    });
+
+    let currentIndex = 0;
+
+    function updateCarousel(isInstant = false) {
+      if (isInstant) slidesContainer.style.transition = 'none';
+
+      slidesContainer.style.transform = `translateX(-${currentIndex * (100 / totalSlides)}%)`;
+
+      if (isInstant) {
+        // Restore transition after the instant move
+        setTimeout(() => slidesContainer.style.transition = '', 50);
+      }
+
+      if (!isLooping) {
+        prevTrigger?.toggleAttribute('disabled', currentIndex === 0);
+        nextTrigger?.toggleAttribute('disabled', currentIndex === totalSlides - 1);
+      }
+    }
+
+    function goToSlide(index) {
+      if (isLooping) {
+        currentIndex = (index + totalSlides) % totalSlides;
+      } else {
+        currentIndex = Math.max(0, Math.min(index, totalSlides - 1));
+      }
+      updateCarousel();
+    }
+
+    prevTrigger?.addEventListener('click', () => goToSlide(currentIndex - 1));
+    nextTrigger?.addEventListener('click', () => goToSlide(currentIndex + 1));
+
+    let touchStartX = 0;
+    carousel.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, { passive: true });
+    carousel.addEventListener('touchend', e => {
+      const touchEndX = e.changedTouches[0].screenX;
+      if (Math.abs(touchEndX - touchStartX) > 50) {
+        goToSlide(touchEndX < touchStartX ? currentIndex + 1 : currentIndex - 1);
+      }
+    });
+
+    updateCarousel(true); // Initial setup without animation
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => initializeCarousels(), { once: true });
+} else {
+  initializeCarousels();
+}
+
+export { initializeCarousels };

package/components/accessibility.css

@@ -0,0 +1,51 @@
+/**
+ * Accessibility primitives
+ *
+ * Skip links intentionally enhance anchors only: the navigation semantics and
+ * keyboard behavior belong in HTML, while CSS controls their presentation.
+ */
+
+:is(a.skip-link, a[data-skip-link]) {
+  position: fixed;
+  inset-block-start: var(--skip-link-inset-block, var(--space-sm, 0.5rem));
+  inset-inline-start: var(--skip-link-inset-inline, var(--space-sm, 0.5rem));
+  z-index: var(--skip-link-z-index, var(--z-index-skip-link, 10001));
+  padding: var(--skip-link-padding, var(--space-sm, 0.5rem) var(--space-md, 1rem));
+  border: var(--skip-link-border, 1px solid currentColor);
+  border-radius: var(--skip-link-radius, var(--border-radius-md, 0.5rem));
+  background: var(--skip-link-background, var(--accent, CanvasText));
+  color: var(--skip-link-color, var(--on-accent, Canvas));
+  box-shadow: var(--skip-link-shadow, var(--shadow-md, 0 0.25rem 0.75rem rgb(0 0 0 / 0.2)));
+  font-weight: var(--skip-link-font-weight, var(--font-weight-semibold, 600));
+  line-height: var(--line-height-tight, 1.25);
+  text-decoration: none;
+  opacity: 0;
+  transform: translateY(calc(-100% - var(--skip-link-inset-block, var(--space-sm, 0.5rem))));
+  transition:
+    transform var(--skip-link-duration, var(--transition-fast, 150ms)) ease,
+    opacity var(--skip-link-duration, var(--transition-fast, 150ms)) ease;
+}
+
+:is(a.skip-link, a[data-skip-link]):is(:focus, :focus-visible) {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+:is(a.skip-link, a[data-skip-link]):focus-visible {
+  outline: var(--skip-link-focus-outline, 3px solid var(--focus-ring-color, currentColor));
+  outline-offset: var(--skip-link-focus-offset, 3px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(a.skip-link, a[data-skip-link]) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :is(a.skip-link, a[data-skip-link]) {
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}

package/components/actions.css

@@ -0,0 +1,76 @@
+/** Compact action controls. Native buttons remain the canonical API. */
+
+:is(button[data-icon-button], button.icon-button, icon-button,
+    button[data-fab], button.fab, floating-action) {
+  --_icon-button-size: var(--icon-button-size, 2.75rem);
+
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  inline-size: var(--_icon-button-size);
+  block-size: var(--_icon-button-size);
+  min-inline-size: var(--_icon-button-size);
+  padding: var(--icon-button-padding, 0.625rem);
+  border: var(--icon-button-border-width, var(--border-width, 1px)) solid
+    var(--icon-button-border-color, var(--outline-default));
+  border-radius: var(--icon-button-radius, var(--radius-md, 0.5rem));
+  background: var(--icon-button-background, var(--surface-default));
+  color: var(--icon-button-color, var(--text-default));
+  line-height: 1;
+}
+
+:is(button[data-icon-button], button.icon-button, icon-button,
+    button[data-fab], button.fab, floating-action)
+  > :is(svg, img, [data-icon]) {
+  inline-size: var(--icon-button-icon-size, 1.25rem);
+  block-size: var(--icon-button-icon-size, 1.25rem);
+  object-fit: contain;
+}
+
+:is(button[data-icon-button], button.icon-button, icon-button,
+    button[data-fab], button.fab, floating-action):is(:hover, :focus-visible) {
+  background: var(--icon-button-hover-background, var(--surface-subtle));
+  border-color: var(--icon-button-hover-border-color, var(--outline-overt));
+}
+
+:is(button[data-icon-button], button.icon-button, icon-button,
+    button[data-fab], button.fab, floating-action):focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+:is(button[data-icon-button], button.icon-button, icon-button):is([data-size="sm"], [size="sm"]) {
+  --icon-button-size: 2.25rem;
+  --icon-button-icon-size: 1rem;
+}
+
+:is(button[data-icon-button], button.icon-button, icon-button):is([data-size="lg"], [size="lg"]) {
+  --icon-button-size: 3.25rem;
+  --icon-button-icon-size: 1.5rem;
+}
+
+:is(button[data-fab], button.fab, floating-action) {
+  --icon-button-size: var(--fab-size, 3.5rem);
+  --icon-button-radius: var(--fab-radius, var(--radius-full, 9999px));
+  --icon-button-background: var(--fab-background, var(--accent));
+  --icon-button-color: var(--fab-color, var(--text-on-accent));
+  --icon-button-border-color: var(--fab-border-color, transparent);
+
+  position: fixed;
+  z-index: var(--fab-z-index, var(--z-index-50, 50));
+  inset-inline-end: max(var(--fab-inset-inline, 1.25rem), env(safe-area-inset-right));
+  inset-block-end: max(var(--fab-inset-block, 1.25rem), env(safe-area-inset-bottom));
+  box-shadow: var(--fab-shadow, var(--shadow-lg));
+}
+
+:is(button[data-fab], button.fab, floating-action):is(:hover, :focus-visible) {
+  --icon-button-hover-background: var(--fab-hover-background, var(--accent-overt));
+}
+
+@media (forced-colors: active) {
+  :is(button[data-icon-button], button.icon-button, icon-button,
+      button[data-fab], button.fab, floating-action) {
+    border-color: ButtonText;
+  }
+}

package/components/alert.css

@@ -0,0 +1,122 @@
+/** Native-first feedback surfaces with optional icon, body, and actions. */
+
+:is(alert-message, [data-alert], .alert) {
+  --_alert-background: var(--alert-background, var(--surface-info, var(--surface-subtle)));
+  --_alert-border-color: var(--alert-border-color, var(--outline-info, var(--outline-subtle)));
+  --_alert-color: var(--alert-color, var(--text-info, var(--text-default)));
+
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--alert-gap, var(--space-md, var(--spacing-md, 1rem)));
+  align-items: start;
+  padding: var(--alert-padding, var(--space-md, var(--spacing-md, 1rem)));
+  border: var(--alert-border-width, var(--border-width, 1px)) solid var(--_alert-border-color);
+  border-radius: var(--alert-radius, var(--radius-md, var(--border-radius-md, 0.5rem)));
+  background: var(--_alert-background);
+  color: var(--_alert-color);
+}
+
+:is(alert-message, [data-alert], .alert)
+  :is([slot="icon"], [data-alert-icon], .alert__icon) {
+  align-self: start;
+}
+
+:is(alert-message, [data-alert], .alert)
+  :is([slot="title"], [data-alert-title], .alert__title) {
+  font-weight: var(--alert-title-weight, var(--font-weight-semibold, 600));
+}
+
+:is(alert-message, [data-alert], .alert)
+  :is([slot="body"], [data-alert-body], .alert__body) {
+  min-inline-size: 0;
+}
+
+:is(alert-message, [data-alert], .alert)
+  > :is([slot="actions"], [data-alert-actions], .alert__actions) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--alert-actions-gap, var(--space-sm, 0.5rem));
+  min-inline-size: 0;
+}
+
+:is(alert-message, [data-alert], .alert):is([density="compact"], [data-density="compact"], .alert-compact) {
+  --alert-gap: var(--alert-compact-gap, var(--space-sm, var(--spacing-sm, 0.75rem)));
+  --alert-padding: var(--alert-compact-padding, var(--space-sm, var(--spacing-sm, 0.75rem)));
+}
+
+:is(alert-message, [data-alert], .alert):is([density="spacious"], [data-density="spacious"], .alert-spacious) {
+  --alert-gap: var(--alert-spacious-gap, var(--space-lg, var(--spacing-lg, 1.5rem)));
+  --alert-padding: var(--alert-spacious-padding, var(--space-lg, var(--spacing-lg, 1.5rem)));
+}
+
+:is(alert-message, [data-alert], .alert):is([status="success"], [data-status="success"], .alert-success) {
+  --_alert-background: var(--alert-background, var(--alert-success-background, var(--surface-success)));
+  --_alert-border-color: var(--alert-border-color, var(--alert-success-border-color, var(--outline-success)));
+  --_alert-color: var(--alert-color, var(--alert-success-color, var(--text-success)));
+}
+
+:is(alert-message, [data-alert], .alert):is([status="warning"], [data-status="warning"], .alert-warning) {
+  --_alert-background: var(--alert-background, var(--alert-warning-background, var(--surface-warning)));
+  --_alert-border-color: var(--alert-border-color, var(--alert-warning-border-color, var(--outline-warning)));
+  --_alert-color: var(--alert-color, var(--alert-warning-color, var(--text-warning)));
+}
+
+:is(alert-message, [data-alert], .alert):is([status="error"], [data-status="error"], .alert-error) {
+  --_alert-background: var(--alert-background, var(--alert-error-background, var(--surface-error)));
+  --_alert-border-color: var(--alert-border-color, var(--alert-error-border-color, var(--outline-error)));
+  --_alert-color: var(--alert-color, var(--alert-error-color, var(--text-error)));
+}
+
+:is(alert-message, [data-alert], .alert):is([status="info"], [data-status="info"], .alert-info) {
+  --_alert-background: var(--alert-background, var(--alert-info-background, var(--surface-info)));
+  --_alert-border-color: var(--alert-border-color, var(--alert-info-border-color, var(--outline-info)));
+  --_alert-color: var(--alert-color, var(--alert-info-color, var(--text-info)));
+}
+
+/* The single-column layout above is the fallback when :has() is unavailable. */
+@supports selector(:has(*)) {
+  :is(alert-message, [data-alert], .alert):has(
+      > :is([slot="icon"], [data-alert-icon], .alert__icon)
+    ) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  :is(alert-message, [data-alert], .alert):has(
+      > :is([slot="actions"], [data-alert-actions], .alert__actions)
+    ) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :is(alert-message, [data-alert], .alert):has(
+      > :is([slot="icon"], [data-alert-icon], .alert__icon)
+    ):has(
+      > :is([slot="actions"], [data-alert-actions], .alert__actions)
+    ) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+
+@media (max-width: 30rem) {
+  @supports selector(:has(*)) {
+    :is(alert-message, [data-alert], .alert):has(
+        > :is([slot="icon"], [data-alert-icon], .alert__icon)
+      ):has(
+        > :is([slot="actions"], [data-alert-actions], .alert__actions)
+      ) {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :is(alert-message, [data-alert], .alert):has(
+        > :is([slot="icon"], [data-alert-icon], .alert__icon)
+      )
+      > :is([slot="actions"], [data-alert-actions], .alert__actions) {
+      grid-column: 2;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  :is(alert-message, [data-alert], .alert) {
+    border-color: CanvasText;
+  }
+}

package/components/application-patterns.css

@@ -0,0 +1,122 @@
+/** Application and feed patterns built on semantic content. */
+
+:is(message-bubble, [data-bubble], .bubble) {
+  display: grid;
+  inline-size: fit-content;
+  max-inline-size: var(--bubble-max-width, min(42rem, 85%));
+  gap: var(--bubble-gap, var(--space-xs, 0.5rem));
+  padding: var(--bubble-padding, var(--space-sm, 0.75rem) var(--space-md, 1rem));
+  border: var(--bubble-border-width, var(--border-width, 1px)) solid
+    var(--bubble-border-color, var(--outline-subtle));
+  border-radius: var(--bubble-radius, var(--radius-lg, 0.75rem));
+  background: var(--bubble-background, var(--surface-subtle));
+  color: var(--bubble-color, var(--text-default));
+}
+
+:is(message-bubble, [data-bubble], .bubble):is([data-sender="self"], .bubble-self) {
+  justify-self: end;
+  border-end-end-radius: var(--bubble-tail-radius, var(--radius-xs, 0.25rem));
+  background: var(--bubble-self-background, var(--accent));
+  color: var(--bubble-self-color, var(--text-on-accent));
+}
+
+:is(message-bubble, [data-bubble], .bubble):is([data-sender="other"], .bubble-other) {
+  justify-self: start;
+  border-end-start-radius: var(--bubble-tail-radius, var(--radius-xs, 0.25rem));
+}
+
+:is([data-chat], .chat) {
+  display: grid;
+  gap: var(--chat-gap, var(--space-sm, 0.75rem));
+}
+
+:is([data-bubble-meta], .bubble-meta) {
+  color: inherit;
+  font-size: var(--bubble-meta-size, var(--font-size-xs, 0.75rem));
+  opacity: var(--bubble-meta-opacity, 0.72);
+}
+
+:is(message-bubble, [data-bubble], .bubble)[aria-busy="true"]::after {
+  content: "•••";
+  inline-size: 1.5em;
+  overflow: hidden;
+  animation: bubble-thinking 1.2s steps(4, end) infinite;
+}
+
+@keyframes bubble-thinking {
+  from { inline-size: 0; }
+}
+
+:is(log-card, [data-log-card], .log-card) {
+  display: grid;
+  overflow: hidden;
+  border: var(--log-card-border-width, var(--border-width, 1px)) solid
+    var(--log-card-border-color, var(--outline-subtle));
+  border-radius: var(--log-card-radius, var(--radius-lg, 0.75rem));
+  background: var(--log-card-background, var(--surface-default));
+  color: var(--log-card-color, var(--text-default));
+}
+
+:is([data-log-header], .log-card-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--log-card-gap, var(--space-sm, 0.75rem));
+  padding: var(--log-card-header-padding, var(--space-sm, 0.75rem) var(--space-md, 1rem));
+  border-block-end: var(--border-width, 1px) solid var(--log-card-border-color, var(--outline-subtle));
+  background: var(--log-card-header-background, var(--surface-subtle));
+}
+
+:is([data-log-body], .log-card-body) {
+  max-block-size: var(--log-card-max-height, 24rem);
+  padding: var(--log-card-body-padding, var(--space-sm, 0.75rem));
+  overflow: auto;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: var(--log-card-font-size, var(--font-size-sm, 0.875rem));
+}
+
+:is([data-log-row], .log-row) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--log-row-gap, var(--space-sm, 0.75rem));
+  padding: var(--log-row-padding, var(--space-xs, 0.5rem));
+  border-radius: var(--log-row-radius, var(--radius-sm, 0.25rem));
+}
+
+:is([data-log-row], .log-row)::before {
+  content: "";
+  align-self: center;
+  inline-size: var(--log-marker-size, 0.5rem);
+  block-size: var(--log-marker-size, 0.5rem);
+  border-radius: 50%;
+  background: var(--log-marker-color, var(--text-muted));
+}
+
+:is([data-log-row="success"], .log-row-success) { --log-marker-color: var(--success); }
+:is([data-log-row="warning"], .log-row-warning) { --log-marker-color: var(--warning); }
+:is([data-log-row="error"], .log-row-error) { --log-marker-color: var(--error); }
+:is([data-log-row="running"], .log-row-running) { --log-marker-color: var(--info); }
+
+:is(snap-feed, [data-snap-feed], .snap-feed) {
+  display: flex;
+  flex-direction: column;
+  block-size: var(--snap-feed-height, min(80dvh, 48rem));
+  overflow-y: auto;
+  overscroll-behavior-block: contain;
+  scroll-snap-type: y var(--snap-feed-strictness, mandatory);
+  scrollbar-gutter: stable;
+}
+
+:is(snap-feed, [data-snap-feed], .snap-feed) > * {
+  flex: 0 0 var(--snap-feed-item-min-height, 100%);
+  min-block-size: 0;
+  scroll-snap-align: var(--snap-feed-align, start);
+  scroll-snap-stop: var(--snap-feed-stop, normal);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(message-bubble, [data-bubble], .bubble)[aria-busy="true"]::after {
+    animation: none;
+    inline-size: auto;
+  }
+}

package/components/badge.css

@@ -0,0 +1,125 @@
+/**
+ * Compact, non-interactive metadata with custom-element, data, and class hosts.
+ * `variant` is the visual surface API; `role` is reserved for ARIA semantics.
+ */
+
+:is(badge, [data-badge], .badge) {
+  --_badge-background: var(--badge-background, var(--surface-overt));
+  --_badge-color: var(--badge-color, var(--text-on-surface-overt, var(--text-default)));
+  --_badge-border-color: var(--badge-border-color, var(--outline-overt));
+  --_badge-border-width: var(--badge-border-width, var(--border-width, 1px));
+  --_badge-radius: var(--badge-radius, var(--radius-full, var(--border-radius-full, 9999px)));
+  --_badge-padding-inline: var(--badge-padding-inline, 0.55em);
+  --_badge-padding-block: var(--badge-padding-block, 0.15em);
+  --_badge-gap: var(--badge-gap, var(--space-2xs, 0.25rem));
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_badge-gap);
+  max-inline-size: 100%;
+  padding: var(--_badge-padding-block) var(--_badge-padding-inline);
+  border: var(--_badge-border-width) solid var(--_badge-border-color);
+  border-radius: var(--_badge-radius);
+  background: var(--_badge-background);
+  color: var(--_badge-color);
+  font-size: 0.85em;
+  line-height: 1;
+  overflow-wrap: anywhere;
+}
+
+@supports (text-box: trim-both cap alphabetic) {
+  :is(badge, [data-badge], .badge) {
+    text-box: var(--text-box-badge, var(--text-box-ui));
+  }
+}
+
+@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
+  :is(badge, [data-badge], .badge) {
+    text-box-trim: var(--text-box-trim-badge, var(--text-box-trim-ui));
+    text-box-edge: var(--text-box-edge-badge, var(--text-box-edge-ui));
+  }
+}
+
+:is(badge, [data-badge], .badge):is([size="sm"], [data-size="sm"], .badge-sm) {
+  --_badge-padding-block: 0.1em;
+  --_badge-padding-inline: 0.45em;
+  font-size: 0.75em;
+}
+
+:is(badge, [data-badge], .badge):is([size="md"], [data-size="md"], .badge-md) {
+  --_badge-padding-block: 0.15em;
+  --_badge-padding-inline: 0.55em;
+  font-size: 0.85em;
+}
+
+:is(badge, [data-badge], .badge):is([size="lg"], [data-size="lg"], .badge-lg) {
+  --_badge-padding-block: 0.25em;
+  --_badge-padding-inline: 0.7em;
+  font-size: 0.95em;
+}
+
+:is(badge, [data-badge], .badge):is([variant="subtle"], [data-variant="subtle"], .badge-subtle) {
+  --_badge-background: var(--surface-subtle);
+  --_badge-color: var(--text-on-surface-subtle, var(--text-default));
+  --_badge-border-color: var(--outline-subtle);
+}
+
+:is(badge, [data-badge], .badge):is([variant="default"], [data-variant="default"], .badge-default) {
+  --_badge-background: var(--surface-default);
+  --_badge-color: var(--text-on-surface, var(--text-default));
+  --_badge-border-color: var(--outline-default);
+}
+
+:is(badge, [data-badge], .badge):is([variant="muted"], [data-variant="muted"], .badge-muted) {
+  --_badge-background: var(--surface-muted);
+  --_badge-color: var(--text-on-surface-muted, var(--text-default));
+  --_badge-border-color: var(--outline-subtle);
+}
+
+:is(badge, [data-badge], .badge):is([variant="overt"], [data-variant="overt"], .badge-overt) {
+  --_badge-background: var(--surface-overt);
+  --_badge-color: var(--text-on-surface-overt, var(--text-default));
+  --_badge-border-color: var(--outline-overt);
+}
+
+/* Deprecated compatibility: use `variant`; `role` must describe accessibility. */
+:is(badge, [data-badge], .badge)[role="subtle"] { --_badge-background: var(--surface-subtle); --_badge-color: var(--text-on-surface-subtle, var(--text-default)); --_badge-border-color: var(--outline-subtle); }
+:is(badge, [data-badge], .badge)[role="default"] { --_badge-background: var(--surface-default); --_badge-color: var(--text-on-surface, var(--text-default)); --_badge-border-color: var(--outline-default); }
+:is(badge, [data-badge], .badge)[role="muted"] { --_badge-background: var(--surface-muted); --_badge-color: var(--text-on-surface-muted, var(--text-default)); --_badge-border-color: var(--outline-subtle); }
+:is(badge, [data-badge], .badge)[role="overt"] { --_badge-background: var(--surface-overt); --_badge-color: var(--text-on-surface-overt, var(--text-default)); --_badge-border-color: var(--outline-overt); }
+
+:is(badge, [data-badge], .badge):is([status="success"], [data-status="success"], .badge-success) {
+  --_badge-background: var(--surface-success);
+  --_badge-color: var(--text-success);
+  --_badge-border-color: var(--outline-success);
+}
+
+:is(badge, [data-badge], .badge):is([status="warning"], [data-status="warning"], .badge-warning) {
+  --_badge-background: var(--surface-warning);
+  --_badge-color: var(--text-warning);
+  --_badge-border-color: var(--outline-warning);
+}
+
+:is(badge, [data-badge], .badge):is([status="error"], [data-status="error"], .badge-error) {
+  --_badge-background: var(--surface-error);
+  --_badge-color: var(--text-error);
+  --_badge-border-color: var(--outline-error);
+}
+
+:is(badge, [data-badge], .badge):is([status="info"], [data-status="info"], .badge-info) {
+  --_badge-background: var(--surface-info);
+  --_badge-color: var(--text-info);
+  --_badge-border-color: var(--outline-info);
+}
+
+:is(badge, [data-badge], .badge):is([status="primary"], [data-status="primary"], .badge-primary) {
+  --_badge-background: var(--accent);
+  --_badge-color: var(--text-on-accent);
+  --_badge-border-color: var(--accent-overt, var(--accent));
+}
+
+:is(badge, [data-badge], .badge):is([status="overt"], [data-status="overt"], .badge-status-overt) {
+  --_badge-background: var(--surface-overt);
+  --_badge-color: var(--text-on-surface-overt, var(--text-default));
+  --_badge-border-color: var(--outline-overt);
+}