@manzanohq/components 0.1.1 → 0.1.4

package/dist/themes/utilities.css

@@ -89,6 +89,33 @@
   cursor: pointer;
 }
 
+.mz-btn-sm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--mz-color-border);
+  border-radius: var(--mz-radius-md);
+  background: var(--mz-color-surface);
+  color: var(--mz-color-text-secondary);
+  font-family: inherit;
+  font-size: var(--mz-font-size-xs);
+  font-weight: var(--mz-font-weight-medium);
+  padding: var(--mz-space-xs) var(--mz-space-sm);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.mz-btn-sm:hover {
+  border-color: var(--mz-color-primary);
+  color: var(--mz-color-text);
+}
+
+.mz-btn-sm--active {
+  background: var(--mz-color-primary);
+  border-color: var(--mz-color-primary);
+  color: var(--mz-color-on-primary, #fff);
+}
+
 /* --- Code block --- */
 
 .mz-code {
@@ -114,6 +141,7 @@
   overflow-y: auto;
   line-height: var(--mz-line-height-loose);
   color: var(--mz-color-text-secondary);
+  white-space: pre-wrap;
 }
 
 .mz-log:empty::before {
@@ -121,6 +149,41 @@
   font-style: italic;
 }
 
+/* --- API / data table --- */
+
+.mz-table,
+.mz-api-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--mz-font-size-sm);
+}
+
+.mz-table th,
+.mz-api-table th {
+  text-align: left;
+  font-weight: var(--mz-font-weight-semibold);
+  color: var(--mz-color-text);
+  padding: var(--mz-space-xs) var(--mz-space-sm);
+  border-bottom: var(--mz-border-width-md, 2px) solid var(--mz-color-border);
+}
+
+.mz-table td,
+.mz-api-table td {
+  padding: var(--mz-space-xs) var(--mz-space-sm);
+  color: var(--mz-color-text-secondary);
+  border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);
+  vertical-align: top;
+}
+
+.mz-table td code,
+.mz-api-table td code {
+  font-family: var(--mz-font-mono);
+  font-size: var(--mz-font-size-xs);
+  padding: 0.1em 0.4em;
+  background: var(--mz-color-surface-raised);
+  border-radius: var(--mz-radius-sm);
+}
+
 /* --- Variant matrix --- */
 
 .mz-matrix {
@@ -151,6 +214,428 @@
   flex-shrink: 0;
 }
 
+/* ======================
+   CSS-only Layout Primitives
+   No JS needed — SEO-friendly, SSR-safe, no FOUC
+   ====================== */
+
+/* --- Stack --- */
+
+.mz-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mz-stack-gap, var(--mz-space-md));
+}
+
+.mz-stack--row { flex-direction: row; }
+.mz-stack--inline { display: inline-flex; }
+.mz-stack--wrap { flex-wrap: wrap; }
+.mz-stack--align-start { align-items: flex-start; }
+.mz-stack--align-center { align-items: center; }
+.mz-stack--align-end { align-items: flex-end; }
+.mz-stack--align-stretch { align-items: stretch; }
+.mz-stack--align-baseline { align-items: baseline; }
+.mz-stack--justify-start { justify-content: flex-start; }
+.mz-stack--justify-center { justify-content: center; }
+.mz-stack--justify-end { justify-content: flex-end; }
+.mz-stack--justify-between { justify-content: space-between; }
+.mz-stack--justify-around { justify-content: space-around; }
+.mz-stack--justify-evenly { justify-content: space-evenly; }
+
+/* --- Divider --- */
+
+.mz-divider {
+  border: 0;
+  border-top: var(--mz-border-width-sm) solid var(--mz-color-border);
+  margin: var(--mz-space-md) 0;
+}
+
+.mz-divider--sm { margin: var(--mz-space-sm) 0; }
+.mz-divider--lg { margin: var(--mz-space-lg) 0; }
+
+.mz-divider--vertical {
+  display: inline-block;
+  border-top: 0;
+  border-left: var(--mz-border-width-sm) solid var(--mz-color-border);
+  height: auto;
+  min-height: 1em;
+  align-self: stretch;
+  margin: 0 var(--mz-space-md);
+}
+
+.mz-divider--vertical.mz-divider--sm { margin: 0 var(--mz-space-sm); }
+.mz-divider--vertical.mz-divider--lg { margin: 0 var(--mz-space-lg); }
+
+/* --- Scroll area --- */
+
+.mz-scroll-area {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mz-color-border) transparent;
+}
+
+.mz-scroll-area--x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.mz-scroll-area--both {
+  overflow: auto;
+}
+
+.mz-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
+.mz-scroll-area::-webkit-scrollbar-thumb { background: var(--mz-color-border); border-radius: 6px; }
+.mz-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--mz-color-text-disabled); }
+.mz-scroll-area::-webkit-scrollbar-track { background: transparent; }
+
+/* --- Empty state --- */
+
+.mz-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--mz-space-2xl) var(--mz-space-lg);
+  gap: var(--mz-space-sm);
+}
+
+.mz-empty__icon {
+  color: var(--mz-color-border);
+  margin-bottom: var(--mz-space-xs);
+}
+
+.mz-empty__title {
+  font-size: var(--mz-font-size-md);
+  font-weight: var(--mz-font-weight-semibold, 600);
+  color: var(--mz-color-text);
+}
+
+.mz-empty__description {
+  font-size: var(--mz-font-size-sm);
+  color: var(--mz-color-text-secondary);
+  max-width: 24rem;
+  line-height: var(--mz-line-height-relaxed, 1.625);
+}
+
+.mz-empty__action {
+  margin-top: var(--mz-space-sm);
+}
+
+/* --- Kbd --- */
+
+kbd,
+.mz-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mz-space-3xs);
+  font-family: var(--mz-font-mono);
+  font-size: var(--mz-font-size-xs);
+  line-height: var(--mz-line-height-dense);
+  padding: var(--mz-space-3xs) var(--mz-space-2xs);
+  background: var(--mz-color-surface-raised);
+  border: var(--mz-border-width-sm) solid var(--mz-color-border);
+  border-radius: var(--mz-radius-sm);
+  box-shadow: 0 1px 0 0 var(--mz-color-border);
+  color: var(--mz-color-text);
+  white-space: nowrap;
+}
+
+/* --- Typography (semantic) --- */
+
+.mz-heading-1 {
+  font-size: var(--mz-font-size-3xl);
+  font-weight: var(--mz-font-weight-bold);
+  line-height: var(--mz-line-height-dense);
+  letter-spacing: -0.02em;
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-heading-2 {
+  font-size: var(--mz-font-size-2xl);
+  font-weight: var(--mz-font-weight-bold);
+  line-height: var(--mz-line-height-dense);
+  letter-spacing: -0.01em;
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-heading-3 {
+  font-size: var(--mz-font-size-xl);
+  font-weight: var(--mz-font-weight-semibold);
+  line-height: var(--mz-line-height-dense);
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-heading-4 {
+  font-size: var(--mz-font-size-lg);
+  font-weight: var(--mz-font-weight-semibold);
+  line-height: var(--mz-line-height-normal);
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-body {
+  font-size: var(--mz-font-size-md);
+  font-weight: var(--mz-font-weight-normal);
+  line-height: var(--mz-line-height-normal);
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-body-sm {
+  font-size: var(--mz-font-size-sm);
+  font-weight: var(--mz-font-weight-normal);
+  line-height: var(--mz-line-height-normal);
+  color: var(--mz-color-text);
+  margin: 0;
+}
+
+.mz-caption {
+  font-size: var(--mz-font-size-xs);
+  font-weight: var(--mz-font-weight-normal);
+  line-height: var(--mz-line-height-normal);
+  color: var(--mz-color-text-secondary);
+  margin: 0;
+}
+
+.mz-overline {
+  font-size: var(--mz-font-size-2xs);
+  font-weight: var(--mz-font-weight-semibold);
+  line-height: var(--mz-line-height-dense);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mz-color-text-secondary);
+  margin: 0;
+}
+
+.mz-lead {
+  font-size: var(--mz-font-size-lg);
+  font-weight: var(--mz-font-weight-normal);
+  line-height: var(--mz-line-height-loose);
+  color: var(--mz-color-text-secondary);
+  margin: 0;
+}
+
+.mz-code-inline {
+  font-family: var(--mz-font-mono);
+  font-size: 0.875em;
+  padding: 0.1em 0.4em;
+  background: var(--mz-color-surface-raised);
+  border-radius: var(--mz-radius-sm);
+}
+
+/* Prose: styled block of running text (articles, docs) */
+.mz-prose {
+  font-size: var(--mz-font-size-md);
+  line-height: var(--mz-line-height-loose);
+  color: var(--mz-color-text);
+  max-width: 65ch;
+}
+
+.mz-prose > * + * {
+  margin-top: var(--mz-space-md);
+}
+
+.mz-prose h1, .mz-prose h2, .mz-prose h3, .mz-prose h4 {
+  margin-top: var(--mz-space-xl);
+  margin-bottom: var(--mz-space-sm);
+  line-height: var(--mz-line-height-dense);
+}
+
+.mz-prose h1 { font-size: var(--mz-font-size-3xl); font-weight: var(--mz-font-weight-bold); letter-spacing: -0.02em; }
+.mz-prose h2 { font-size: var(--mz-font-size-2xl); font-weight: var(--mz-font-weight-bold); letter-spacing: -0.01em; }
+.mz-prose h3 { font-size: var(--mz-font-size-xl); font-weight: var(--mz-font-weight-semibold); }
+.mz-prose h4 { font-size: var(--mz-font-size-lg); font-weight: var(--mz-font-weight-semibold); }
+
+.mz-prose a {
+  color: var(--mz-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.mz-prose a:hover {
+  text-decoration-thickness: 2px;
+}
+
+.mz-prose strong {
+  font-weight: var(--mz-font-weight-semibold);
+  color: var(--mz-color-text);
+}
+
+.mz-prose code {
+  font-family: var(--mz-font-mono);
+  font-size: 0.875em;
+  padding: 0.1em 0.4em;
+  background: var(--mz-color-surface-raised);
+  border-radius: var(--mz-radius-sm);
+}
+
+.mz-prose blockquote {
+  border-left: 3px solid var(--mz-color-border);
+  padding-left: var(--mz-space-md);
+  margin-left: 0;
+  color: var(--mz-color-text-secondary);
+  font-style: italic;
+}
+
+.mz-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--mz-radius-md);
+}
+
+/* --- List --- */
+
+.mz-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mz-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--mz-space-sm);
+  padding: var(--mz-space-sm) var(--mz-space-md);
+  font-size: var(--mz-font-size-sm);
+  color: var(--mz-color-text);
+  border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);
+}
+
+.mz-list-item:last-child {
+  border-bottom: 0;
+}
+
+/* Interactive list items */
+a.mz-list-item,
+button.mz-list-item {
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s;
+  background: transparent;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+}
+
+a.mz-list-item:hover,
+button.mz-list-item:hover {
+  background: color-mix(in srgb, var(--mz-color-primary) 6%, var(--mz-color-surface));
+}
+
+a.mz-list-item:focus-visible,
+button.mz-list-item:focus-visible {
+  outline: 2px solid var(--mz-color-primary);
+  outline-offset: -2px;
+  border-radius: var(--mz-radius-sm);
+}
+
+.mz-list-item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--mz-color-text-secondary);
+}
+
+.mz-list-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mz-list-item__primary {
+  font-size: var(--mz-font-size-sm);
+  font-weight: var(--mz-font-weight-medium);
+  color: var(--mz-color-text);
+}
+
+.mz-list-item__secondary {
+  font-size: var(--mz-font-size-xs);
+  color: var(--mz-color-text-secondary);
+  margin-top: var(--mz-space-3xs);
+}
+
+.mz-list-item__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Size variants */
+.mz-list--sm .mz-list-item {
+  padding: var(--mz-space-xs) var(--mz-space-sm);
+  font-size: var(--mz-font-size-xs);
+}
+
+.mz-list--lg .mz-list-item {
+  padding: var(--mz-space-md) var(--mz-space-lg);
+  font-size: var(--mz-font-size-md);
+}
+
+/* Bordered variant */
+.mz-list--bordered {
+  border: var(--mz-border-width-sm) solid var(--mz-color-border);
+  border-radius: var(--mz-radius-lg);
+  overflow: hidden;
+}
+
+/* Striped variant */
+.mz-list--striped .mz-list-item:nth-child(even) {
+  background: var(--mz-color-surface-raised);
+}
+
+/* Flush variant (no horizontal padding) */
+.mz-list--flush .mz-list-item {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Unordered/ordered list styling inside prose */
+.mz-prose ul,
+.mz-prose ol {
+  padding-left: var(--mz-space-lg);
+}
+
+.mz-prose li + li {
+  margin-top: var(--mz-space-xs);
+}
+
+/* Description list */
+.mz-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--mz-space-xs) var(--mz-space-lg);
+  margin: 0;
+  font-size: var(--mz-font-size-sm);
+}
+
+.mz-dl dt {
+  font-weight: var(--mz-font-weight-semibold);
+  color: var(--mz-color-text);
+}
+
+.mz-dl dd {
+  margin: 0;
+  color: var(--mz-color-text-secondary);
+}
+
+/* Stacked description list */
+.mz-dl--stacked {
+  grid-template-columns: 1fr;
+}
+
+.mz-dl--stacked dd {
+  margin-bottom: var(--mz-space-sm);
+}
+
 /* ======================
    Tier 2: Utility Classes
    ====================== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manzanohq/components",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Manzano Web Components — a modern, accessible component library built with Lit",
   "type": "module",
   "license": "Apache-2.0",

package/cdn/chunks/chunk.2N73PDHB.js

@@ -1,30 +0,0 @@
-import{a as r}from"./chunk.KUTEZIT4.js";import{a as o}from"./chunk.NNH44ORV.js";var t=[r,o`
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    .popover__body {
-      position: absolute;
-      z-index: var(--mz-z-dropdown, 1000);
-      background: var(--mz-color-surface-overlay, var(--mz-color-surface));
-      border: var(--mz-border-width-sm) solid var(--mz-color-border);
-      border-radius: var(--mz-radius-md);
-      box-shadow: var(--mz-shadow-lg);
-      padding: var(--mz-space-md);
-      width: max-content;
-      max-width: 24rem;
-    }
-
-    .popover__arrow {
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      background: var(--mz-color-surface-overlay, var(--mz-color-surface));
-      border: var(--mz-border-width-sm) solid var(--mz-color-border);
-      /* Default: points up (for bottom placement). FloatingController rotates via inline style. */
-      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-      border: none;
-    }
-  `];export{t as a};
-//# sourceMappingURL=chunk.2N73PDHB.js.map

package/cdn/chunks/chunk.2UAEMVLU.js

@@ -1,2 +0,0 @@
-import{a as e}from"./chunk.BUUA7AGF.js";e.define("mz-divider");
-//# sourceMappingURL=chunk.2UAEMVLU.js.map

package/cdn/chunks/chunk.4MAZNWDD.js

@@ -1,2 +0,0 @@
-import{a}from"./chunk.IQQUD3EW.js";a.define("mz-tag");
-//# sourceMappingURL=chunk.4MAZNWDD.js.map

package/cdn/chunks/chunk.4XEZ5QSS.js

@@ -1,118 +0,0 @@
-import{a as o}from"./chunk.XJ4TAQZ2.js";import{a as e}from"./chunk.KUTEZIT4.js";import{a as r}from"./chunk.NNH44ORV.js";var s=[e,o,r`
-    @layer base, sizes, states;
-
-    @layer base {
-      :host {
-        display: block;
-        position: relative;
-      }
-
-      .select__control-wrapper {
-        position: relative;
-      }
-
-      .select__trigger {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);
-        border-radius: var(--_radius, var(--mz-input-border-radius));
-        background: var(--mz-input-bg, var(--mz-color-surface));
-        color: var(--mz-color-text);
-        font-family: var(--mz-font-sans);
-        font-size: var(--_font-size);
-        line-height: var(--mz-line-height-normal);
-        height: var(--_height);
-        padding: 0 var(--_padding-inline);
-        cursor: pointer;
-        transition:
-          border-color var(--mz-transition-fast),
-          box-shadow var(--mz-transition-fast);
-        text-align: start;
-      }
-
-      .select__trigger:hover {
-        border-color: var(--mz-color-border-hover);
-      }
-
-      .select__trigger:focus-visible {
-        border-color: var(--mz-color-primary);
-        outline: var(--mz-focus-ring);
-        outline-offset: var(--mz-focus-ring-offset);
-      }
-
-      .select__trigger--placeholder .select__display {
-        color: var(--mz-color-text-disabled);
-      }
-
-      .select__display {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .select__chevron {
-        flex-shrink: 0;
-        margin-inline-start: var(--mz-space-xs);
-        color: var(--mz-color-text-secondary);
-        transition: transform var(--mz-transition-fast);
-      }
-
-      .select__trigger--open .select__chevron {
-        transform: rotate(180deg);
-      }
-
-      .select__dropdown {
-        position: absolute;
-        z-index: 1000;
-        background: var(--mz-color-surface);
-        border: var(--mz-border-width-sm) solid var(--mz-color-border);
-        border-radius: var(--mz-radius-md);
-        box-shadow: var(--mz-shadow-lg);
-        padding: var(--mz-space-2xs);
-        overflow-y: auto;
-      }
-    }
-
-    @layer sizes {
-      :host([size='sm']) {
-        --_height: var(--mz-input-height-sm);
-        --_font-size: var(--mz-input-font-size-sm);
-        --_padding-inline: var(--mz-space-sm);
-      }
-
-      :host([size='md']),
-      :host(:not([size])) {
-        --_height: var(--mz-input-height-md);
-        --_font-size: var(--mz-input-font-size-md);
-        --_padding-inline: var(--mz-space-md);
-      }
-
-      :host([size='lg']) {
-        --_height: var(--mz-input-height-lg);
-        --_font-size: var(--mz-input-font-size-lg);
-        --_padding-inline: var(--mz-space-md);
-      }
-    }
-
-    @layer states {
-      :host([disabled]) .select__trigger {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      :host([data-user-invalid]) .select__trigger {
-        border-color: var(--mz-color-danger);
-      }
-
-      :host([data-user-invalid]) .select__trigger:focus-visible {
-        --mz-focus-ring-color: var(--mz-color-danger);
-      }
-
-      :host([pill]) {
-        --_radius: var(--mz-radius-pill);
-      }
-    }
-  `];export{s as a};
-//# sourceMappingURL=chunk.4XEZ5QSS.js.map

package/cdn/chunks/chunk.5DIMFNYE.js

@@ -1,9 +0,0 @@
-import{a as l}from"./chunk.KHFMYWK7.js";import{b as a}from"./chunk.BFGS3UP4.js";import{d as o}from"./chunk.SZ34NZMW.js";import{d as t}from"./chunk.NNH44ORV.js";var r=class extends o{constructor(){super(...arguments);this.localize=new a(this)}render(){let e="Loading";try{e=this.localize.term("loading")||"Loading"}catch{}return t`
-      <div
-        part="base"
-        class="spinner"
-        role="progressbar"
-        aria-label=${e}
-      ></div>
-    `}};r.styles=l;export{r as a};
-//# sourceMappingURL=chunk.5DIMFNYE.js.map

package/cdn/chunks/chunk.5J44JMQV.js

@@ -1,2 +0,0 @@
-import{a as e}from"./chunk.VKUFNHZY.js";e.define("mz-popover");
-//# sourceMappingURL=chunk.5J44JMQV.js.map