release: complete UI component catalog 0.2.58

packages/ui/ui.css

@@ -938,6 +938,109 @@
   }
 }
 
+/* --- Complete catalog composition patterns ----------------------------- */
+.wire-catalog-action {
+  display: inline-flex;
+  max-width: 100%;
+}
+.wire-catalog-form,
+.wire-catalog-collection,
+.wire-catalog-section {
+  display: grid;
+  gap: clamp(1rem, 2vw, 1.5rem);
+  min-width: 0;
+}
+.wire-catalog-form > header,
+.wire-catalog-collection > header,
+.wire-catalog-section > header {
+  display: grid;
+  gap: 0.5rem;
+}
+.wire-catalog-form :where(h2, p),
+.wire-catalog-collection :where(h2, p),
+.wire-catalog-section :where(h2, p) {
+  margin: 0;
+}
+.wire-catalog-field {
+  min-width: 0;
+}
+.wire-catalog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  overflow: auto;
+  padding: clamp(1rem, 4vw, 2rem);
+  background: rgb(2 6 23 / 0.68);
+  backdrop-filter: blur(8px);
+}
+.wire-catalog-overlay .wire-dialog {
+  width: min(100%, 42rem);
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: clamp(1rem, 4vw, 1.5rem);
+  color: var(--wire-color-text);
+  background: var(--wire-color-surface);
+  border: 1px solid var(--wire-color-border);
+  border-radius: var(--wire-radius);
+  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.3);
+}
+.wire-catalog-collection__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: 1rem;
+  min-width: 0;
+}
+.wire-catalog-feedback {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.5rem 1rem;
+  align-items: start;
+}
+.wire-catalog-feedback p {
+  grid-column: 1 / -1;
+  margin: 0;
+}
+.wire-catalog-visualization {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+.wire-catalog-visualization figcaption {
+  display: grid;
+  gap: 0.35rem;
+}
+.wire-catalog-visualization__content {
+  min-height: 10rem;
+  overflow-x: auto;
+}
+.wire-catalog-visualization__skeleton {
+  width: 100%;
+  min-height: 10rem;
+}
+.wire-catalog-card__image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: calc(var(--wire-radius) * 0.75);
+}
+
+@media (max-width: 480px) {
+  .wire-catalog-action,
+  .wire-catalog-action > :where(a, button) {
+    width: 100%;
+  }
+  .wire-catalog-overlay {
+    align-items: end;
+    padding: 0;
+  }
+  .wire-catalog-overlay .wire-dialog {
+    max-height: 92dvh;
+    border-radius: var(--wire-radius) var(--wire-radius) 0 0;
+  }
+}
+
 /* --- Motion system -------------------------------------------------------
  * Applies to both Tailwind-authored and token-authored components. Motion is
  * intentionally limited to composited properties so interaction stays fluid.