css-tags 0.1.0

package/components/img-container.css

@@ -0,0 +1,141 @@
+/**
+ * A token-driven image frame with semantic loading and error states.
+ * Supports <img-container>, [data-img-container], and .img-container hosts.
+ */
+
+:is(img-container, [data-img-container], .img-container) {
+  --ic-aspect-ratio: attr(aspect-ratio type(*), auto);
+  --ic-object-fit: attr(object-fit type(*), cover);
+  --ic-object-position: attr(object-position type(*), center);
+  --ic-radius: attr(radius type(*), 0);
+  --ic-shadow: attr(shadow type(*), none);
+  --ic-bg: attr(bg type(*), transparent);
+  --ic-transition: attr(transition type(*), opacity 0.3s ease);
+  --ic-loading-start: var(--surface-muted, #f0f0f0);
+  --ic-loading-middle: var(--surface-overt, #e0e0e0);
+  --ic-error-bg: var(--surface-error, #fee);
+  --ic-error-border: var(--outline-error, #fcc);
+  --ic-error-color: var(--text-error, #a22);
+
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: var(--ic-aspect-ratio);
+  border-radius: var(--ic-radius);
+  box-shadow: var(--ic-shadow);
+  background-color: var(--ic-bg);
+  transition: var(--ic-transition);
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  /* aria-busy is the primary loading-state contract. */
+  &::before {
+    content: '';
+    background: linear-gradient(
+      90deg,
+      var(--ic-loading-start) 25%,
+      var(--ic-loading-middle) 50%,
+      var(--ic-loading-start) 75%
+    );
+    background-size: 200% 100%;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &[aria-busy="true"]::before,
+  &:has(img[data-loading])::before {
+    opacity: 1;
+    animation: img-container-loading 1.5s linear infinite;
+  }
+
+  &[data-error],
+  &:has(img[data-error]) {
+    background: var(--ic-error-bg);
+    border: var(--border-width, 1px) dashed var(--ic-error-border);
+  }
+
+  &[data-error]::after,
+  &:has(img[data-error])::after {
+    content: attr(error-message, "Image failed to load");
+    display: grid;
+    place-items: center;
+    padding: var(--space-md, 1rem);
+    color: var(--ic-error-color);
+    background: var(--ic-error-bg);
+    font-size: var(--font-size-sm, 0.875rem);
+    text-align: center;
+  }
+
+  & :is(img, picture, video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--ic-object-fit);
+    object-position: var(--ic-object-position);
+    border-radius: inherit;
+    transition: inherit;
+  }
+
+  & picture > img {
+    width: 100%;
+    height: 100%;
+  }
+
+  & img[data-loading] {
+    opacity: 0;
+  }
+
+  & img:is([loaded], [data-loaded]) {
+    opacity: 1;
+  }
+
+  & img[data-error] {
+    visibility: hidden;
+  }
+}
+
+@keyframes img-container-loading {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+/* Viewport fallbacks for attribute-driven responsive aspect ratios. */
+@media (max-width: 480px) {
+  :is(img-container, [data-img-container], .img-container)[responsive] {
+    --ic-aspect-ratio: attr(mobile-aspect-ratio type(*), var(--ic-aspect-ratio));
+  }
+}
+
+@media (min-width: 768px) {
+  :is(img-container, [data-img-container], .img-container)[responsive] {
+    --ic-aspect-ratio: attr(desktop-aspect-ratio type(*), var(--ic-aspect-ratio));
+  }
+}
+
+:is(img-container, [data-img-container], .img-container)[theme="card"] {
+  --ic-radius: var(--radius-lg, 0.75rem);
+  --ic-shadow: var(--shadow-md, none);
+}
+
+:is(img-container, [data-img-container], .img-container)[theme="hero"] {
+  --ic-shadow: var(--shadow-lg, none);
+}
+
+:is(img-container, [data-img-container], .img-container)[theme="thumbnail"] {
+  --ic-radius: var(--radius-md, 0.5rem);
+  --ic-aspect-ratio: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(img-container, [data-img-container], .img-container),
+  :is(img-container, [data-img-container], .img-container)::before {
+    animation: none;
+    transition: none;
+  }
+}

package/components/img-container.js

@@ -0,0 +1,75 @@
+/** Progressive enhancement for image-container loading, fallback, and host shorthands. */
+
+function initializeImageContainers(root = document) {
+  const containers = root.querySelectorAll(':is(img-container, [data-img-container], .img-container)');
+
+  containers.forEach(container => {
+    if (container.dataset.imgContainerInitialized === 'true') return;
+
+    const img = container.querySelector('img');
+    if (!img) return;
+
+    container.dataset.imgContainerInitialized = 'true';
+    container.setAttribute('aria-busy', 'true');
+    img.setAttribute('data-loading', '');
+
+    const markLoaded = () => {
+      img.removeAttribute('data-loading');
+      img.removeAttribute('data-error');
+      img.setAttribute('data-loaded', '');
+      img.setAttribute('loaded', '');
+      container.setAttribute('aria-busy', 'false');
+      container.removeAttribute('data-error');
+    };
+
+    const markFailed = () => {
+      const fallback = container.getAttribute('fallback-src');
+
+      if (fallback && container.dataset.fallbackAttempted !== 'true') {
+        container.dataset.fallbackAttempted = 'true';
+        img.removeAttribute('data-error');
+        img.setAttribute('data-loading', '');
+        img.src = fallback;
+        return;
+      }
+
+      img.removeAttribute('data-loading');
+      img.setAttribute('data-error', '');
+      container.setAttribute('aria-busy', 'false');
+      container.setAttribute('data-error', '');
+    };
+
+    img.addEventListener('load', markLoaded);
+    img.addEventListener('error', markFailed);
+
+    if (container.hasAttribute('lazy') && !img.hasAttribute('loading')) {
+      img.loading = 'lazy';
+    }
+
+    const src = container.getAttribute('src') || img.getAttribute('data-src');
+    const srcset = container.getAttribute('srcset') || img.getAttribute('data-srcset');
+    const sizes = container.getAttribute('sizes');
+    const alt = container.getAttribute('alt');
+
+    if (srcset) img.srcset = srcset;
+    if (sizes) img.sizes = sizes;
+    if (alt && !img.hasAttribute('alt')) img.alt = alt;
+    if (src && !img.getAttribute('src')) img.src = src;
+
+    img.removeAttribute('data-src');
+    img.removeAttribute('data-srcset');
+
+    if (img.complete && img.currentSrc) {
+      if (img.naturalWidth > 0) markLoaded();
+      else markFailed();
+    }
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => initializeImageContainers(), { once: true });
+} else {
+  initializeImageContainers();
+}
+
+export { initializeImageContainers };

package/components/list.css

@@ -0,0 +1,69 @@
+/**
+ * list.css
+ *
+ * A flexible and styleable list component.
+ * ------------------------------------------------------------------------------
+ * @feature {CSS Nesting} - For organized styling of items and markers.
+ * @feature {::marker} - For direct styling of list item markers.
+ * @feature {attr()} - For custom icon URLs and colors via CSS masks.
+ */
+
+:is(list, [data-list], .list) {
+    --b-p: attr(padding type(*), 0);
+    --b-m: attr(margin type(*), 0);
+    display: flex;
+    flex-direction: column;
+    gap: attr(gap type(*), var(--l-gap, 0.5rem));
+    padding-block: var(--b-p);
+    padding-inline-end: var(--b-p);
+    padding-inline-start: attr(indent type(*), max(var(--b-p), 1.5rem));
+    list-style-position: outside;
+    margin: var(--b-m);
+    /* Style for inline lists */
+    &[inline] {
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding-inline-start: 0;
+      list-style: none;
+    }
+
+    & > :is(list-item, [data-list-item], .list-item) {
+      display: list-item;
+      position: relative;
+
+      /* Style the native list item marker */
+      &::marker {
+        color: attr(marker-color type(*), var(--theme-primary));
+        content: '• ';
+      }
+
+      &[type]::marker { content: attr(type) ' '; }
+
+      /* Support for custom icons using modern CSS masks */
+      &[icon] {
+        list-style: none;
+        padding-inline-start: calc(attr(icon-size type(*), 1.2em) + 0.5rem);
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset-inline-start: 0; /* Logical property */
+          top: 0.15em;
+          width: attr(icon-size type(*), 1.2em);
+          height: attr(icon-size type(*), 1.2em);
+          background-color: attr(icon-color type(*), var(--theme-primary));
+          mask-image: attr(icon type(<url>), none);
+          mask-size: contain;
+          mask-repeat: no-repeat;
+          mask-position: center;
+        }
+      }
+    }
+
+    & > :is(list-divider, [data-list-divider], .list-divider) {
+      block-size: var(--list-divider-size, var(--divider-size, 1px));
+      background-color: var(--list-divider-color, var(--divider-color, var(--divider-color-subtle, var(--outline-subtle))));
+      margin-block: attr(gap type(*), 0.5rem); /* Logical property */
+      border: 0;
+    }
+}

package/components/loading.css

@@ -0,0 +1,112 @@
+/**
+ * loading.css
+ *
+ * Semantic, token-driven loading feedback.
+ * `aria-busy="true"` is the spinner state; `.skeleton` and
+ * `[data-skeleton]` provide lightweight placeholder surfaces.
+ */
+
+@keyframes loading-spin {
+  to { transform: rotate(1turn); }
+}
+
+@keyframes skeleton-shimmer {
+  to { background-position-x: -200%; }
+}
+
+:where([aria-busy="true"]) {
+  --_spinner-size: var(--spinner-size, 1.25em);
+  --_spinner-stroke: var(--spinner-stroke-width, 0.16em);
+  --_spinner-color: var(--spinner-color, currentColor);
+  --_spinner-track: var(--spinner-track-color, oklch(from currentColor l c h / 0.25));
+  --_spinner-speed: var(--spinner-speed, 700ms);
+}
+
+:where([aria-busy="true"])[data-spinner="small"] {
+  --_spinner-size: var(--spinner-size-small, 0.9em);
+}
+
+:where([aria-busy="true"])[data-spinner="large"] {
+  --_spinner-size: var(--spinner-size-large, 2rem);
+}
+
+:where([aria-busy="true"]):not([data-spinner="overlay"])::before {
+  content: "";
+  display: inline-block;
+  inline-size: var(--_spinner-size);
+  block-size: var(--_spinner-size);
+  margin-inline-end: 0.55em;
+  vertical-align: -0.18em;
+  border: var(--_spinner-stroke) solid var(--_spinner-track);
+  border-block-start-color: var(--_spinner-color);
+  border-radius: 50%;
+  animation: loading-spin var(--_spinner-speed) linear infinite;
+}
+
+:where([aria-busy="true"]:empty):not([data-spinner="overlay"])::before {
+  margin-inline-end: 0;
+}
+
+:where([aria-busy="true"])[data-spinner="overlay"] {
+  position: relative;
+  isolation: isolate;
+}
+
+:where([aria-busy="true"])[data-spinner="overlay"]::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--spinner-overlay-backdrop, oklch(from var(--surface-default, white) l c h / 0.72));
+  backdrop-filter: blur(var(--spinner-overlay-blur, 2px));
+}
+
+:where([aria-busy="true"])[data-spinner="overlay"]::before {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  inset: 50% auto auto 50%;
+  translate: -50% -50%;
+  inline-size: var(--_spinner-size);
+  block-size: var(--_spinner-size);
+  border: var(--_spinner-stroke) solid var(--_spinner-track);
+  border-block-start-color: var(--_spinner-color);
+  border-radius: 50%;
+  animation: loading-spin var(--_spinner-speed) linear infinite;
+}
+
+:is(.skeleton, [data-skeleton]) {
+  --_skeleton-bg: var(--skeleton-background, var(--surface-muted, #e5e7eb));
+  --_skeleton-highlight: var(--skeleton-highlight, oklch(from var(--_skeleton-bg) calc(l + 0.08) c h));
+
+  color: transparent;
+  border-radius: var(--skeleton-radius, var(--radius-sm, 0.375rem));
+  background-image: linear-gradient(
+    100deg,
+    var(--_skeleton-bg) 30%,
+    var(--_skeleton-highlight) 50%,
+    var(--_skeleton-bg) 70%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer var(--skeleton-shimmer-duration, 1.4s) linear infinite;
+  cursor: wait;
+  user-select: none;
+}
+
+:is(.skeleton, [data-skeleton]).line {
+  min-block-size: 0.85em;
+  max-inline-size: 100%;
+}
+
+:is(.skeleton, [data-skeleton]).box {
+  min-block-size: var(--skeleton-box-min-height, 8rem);
+  inline-size: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([aria-busy="true"])::before,
+  :is(.skeleton, [data-skeleton]) {
+    animation: none;
+  }
+}

package/components/masonry.css

@@ -0,0 +1,48 @@
+/**
+ * masonry.css
+ *
+ * A declarative component and mixin for the experimental CSS Masonry Layout.
+ * ------------------------------------------------------------------------------
+ * ⚠️ IMPORTANT: EXPERIMENTAL FEATURE - Requires browser flag in Edge/Chrome 140+.
+ *
+ * @feature {CSS Masonry} - For creating packed, brick-like layouts.
+ */
+
+/* 1. MIXIN (for use in CSS) */
+@mixin --masonry(
+  --direction type(*): 'column',
+  --tracks type(*): 'repeat(auto-fill, auto)',
+  --gap type(*): 1.5rem
+) {
+  display: masonry;
+  masonry-direction: var(--direction);
+  gap: var(--gap);
+  @when (var(--direction) = 'column') { grid-template-columns: var(--tracks); }
+  @when (var(--direction) = 'row') { grid-template-rows: var(--tracks); }
+}
+
+/* 2. COMPONENT (for use in HTML)
+ * Standard grid is the baseline. Browsers with masonry support enhance it. */
+:is(masonry-layout, [data-masonry], .masonry-layout) {
+  display: grid;
+  masonry-direction: attr(direction type(*), column);
+  gap: attr(gap type(*), 1.5rem);
+  item-tolerance: attr(tolerance type(*), 0);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  grid-template-columns: attr(cols type(*), repeat(auto-fit, minmax(min(100%, 16rem), 1fr)));
+  grid-template-rows: attr(rows type(*), none);
+  grid-auto-flow: dense;
+}
+
+@supports (display: masonry) {
+  :is(masonry-layout, [data-masonry], .masonry-layout) {
+    display: masonry;
+    grid-auto-flow: initial;
+  }
+}
+
+/* Item spanning for the component */
+:is(masonry-layout, [data-masonry], .masonry-layout) > * {
+  grid-column: attr(col type(*), auto);
+  grid-row: attr(row type(*), auto);
+}

package/components/modal.css

@@ -0,0 +1,73 @@
+/**
+ * Dialog and legacy modal surfaces.
+ *
+ * Native `<dialog>` is the canonical interactive API. `modal-dialog` is an
+ * optional visual host; consumers must still provide dialog behaviour and
+ * accessibility semantics when they do not use the native element.
+ */
+
+:is(dialog[data-modal], dialog.modal, modal-dialog) {
+  width: min(var(--modal-width, 36rem), calc(100% - 2rem));
+  max-height: min(var(--modal-max-height, 85dvh), calc(100% - 2rem));
+  margin: auto;
+  padding: var(--modal-padding, var(--space-lg, 1.5rem));
+  overflow: auto;
+  color: var(--modal-text, var(--text-default, CanvasText));
+  background: var(--modal-bg, var(--surface-default, Canvas));
+  border: var(--modal-border-width, 1px) solid
+    var(--modal-border-color, var(--outline-default, currentColor));
+  border-radius: var(--modal-radius, var(--radius-lg, 0.75rem));
+  box-shadow: var(--modal-shadow, 0 1.25rem 3rem rgb(0 0 0 / 0.24));
+}
+
+:is(dialog[data-modal], dialog.modal, modal-dialog)::backdrop {
+  background: var(--modal-backdrop, rgb(0 0 0 / 0.55));
+  backdrop-filter: blur(var(--modal-backdrop-blur, 3px));
+}
+
+:is(dialog[data-modal], dialog.modal, modal-dialog) > :first-child {
+  margin-block-start: 0;
+}
+
+:is(dialog[data-modal], dialog.modal, modal-dialog) > :last-child {
+  margin-block-end: 0;
+}
+
+/* Backwards-compatible overlay for applications that already manage the
+   interaction and focus lifecycle themselves. */
+:is([data-modal-overlay], .modal-overlay) {
+  position: fixed;
+  z-index: var(--modal-z-index, 1000);
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: var(--space-lg, 1.5rem);
+  background: var(--modal-backdrop, rgb(0 0 0 / 0.55));
+  backdrop-filter: blur(var(--modal-backdrop-blur, 3px));
+}
+
+:is([data-modal-overlay], .modal-overlay) > :is(.modal__panel, [data-modal-panel]) {
+  width: min(var(--modal-width, 36rem), 100%);
+  max-height: var(--modal-max-height, 85dvh);
+  padding: var(--modal-padding, var(--space-lg, 1.5rem));
+  overflow: auto;
+  color: var(--modal-text, var(--text-default, CanvasText));
+  background: var(--modal-bg, var(--surface-default, Canvas));
+  border: var(--modal-border-width, 1px) solid
+    var(--modal-border-color, var(--outline-default, currentColor));
+  border-radius: var(--modal-radius, var(--radius-lg, 0.75rem));
+  box-shadow: var(--modal-shadow, 0 1.25rem 3rem rgb(0 0 0 / 0.24));
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(dialog[data-modal], dialog.modal)[open] {
+    animation: modal-enter var(--modal-duration, 160ms) ease-out;
+  }
+
+  @keyframes modal-enter {
+    from {
+      opacity: 0;
+      transform: translateY(0.5rem) scale(0.98);
+    }
+  }
+}