@manzanohq/components 0.1.1 → 0.1.4

package/cdn/chunks/chunk.XW4SOVO7.js

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

package/cdn/chunks/chunk.YJQBIP5J.js

@@ -1,113 +0,0 @@
-import{a}from"./chunk.KUTEZIT4.js";import{a as r}from"./chunk.NNH44ORV.js";var t=[a,r`
-    @layer base, variants, appearances, states;
-
-    @layer base {
-      :host {
-        display: block;
-      }
-
-      .alert {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--mz-space-sm);
-        padding: var(--mz-space-md) var(--mz-space-lg);
-        border: var(--mz-border-width-sm) solid transparent;
-        border-radius: var(--mz-alert-radius, var(--mz-radius-lg));
-        background: var(--_bg);
-        color: var(--_text);
-        border-color: var(--_border, transparent);
-        font-family: var(--mz-font-sans);
-        font-size: var(--mz-font-size-sm);
-        line-height: var(--mz-line-height-normal);
-      }
-
-      .alert__icon {
-        display: flex;
-        flex-shrink: 0;
-        padding-top: var(--mz-space-3xs);
-        font-size: var(--mz-font-size-lg);
-      }
-
-      .alert__content {
-        flex: 1;
-        min-width: 0;
-      }
-
-      .alert__close {
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: var(--mz-space-2xs);
-        margin: calc(var(--mz-space-2xs) * -1);
-        cursor: pointer;
-        color: inherit;
-        opacity: 0.7;
-        border-radius: var(--mz-radius-sm);
-        transition: opacity var(--mz-transition-fast);
-        font-size: var(--mz-font-size-lg);
-        line-height: 1;
-      }
-
-      .alert__close:hover {
-        opacity: 1;
-      }
-
-      .alert__close:focus-visible {
-        outline: var(--mz-focus-ring);
-        outline-offset: var(--mz-focus-ring-offset);
-      }
-    }
-
-    @layer variants {
-      :host([variant='primary']) {
-        --_color: var(--mz-color-primary);
-      }
-
-      :host([variant='danger']) {
-        --_color: var(--mz-color-danger);
-      }
-
-      :host([variant='success']) {
-        --_color: var(--mz-color-success);
-      }
-
-      :host([variant='warning']) {
-        --_color: var(--mz-color-warning);
-      }
-
-      :host([variant='neutral']),
-      :host(:not([variant])) {
-        --_color: var(--mz-color-neutral);
-      }
-    }
-
-    @layer appearances {
-      :host([appearance='soft']),
-      :host(:not([appearance])) {
-        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);
-        --_text: var(--mz-color-text);
-        --_border: color-mix(in srgb, var(--_color) 30%, transparent);
-      }
-
-      :host([appearance='filled']) {
-        --_bg: var(--_color);
-        --_text: var(--mz-color-on-primary);
-      }
-
-      :host([appearance='outline']) {
-        --_bg: transparent;
-        --_text: var(--mz-color-text);
-        --_border: var(--_color);
-      }
-    }
-
-    @layer states {
-      :host([hidden]) {
-        display: none;
-      }
-    }
-  `];export{t as a};
-//# sourceMappingURL=chunk.YJQBIP5J.js.map

package/cdn/chunks/chunk.YVOT5EWM.js

@@ -1,213 +0,0 @@
-import{a as o}from"./chunk.KUTEZIT4.js";import{a as r}from"./chunk.NNH44ORV.js";var t=[o,r`
-    @layer base, variants, appearances, sizes, states;
-
-    @layer base {
-      :host {
-        display: inline-block;
-      }
-
-      .button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--mz-space-xs);
-        border: var(--mz-border-width-sm) solid transparent;
-        font-family: var(--mz-font-sans);
-        font-weight: var(--mz-font-weight-semibold);
-        text-decoration: none;
-        white-space: nowrap;
-        user-select: none;
-        cursor: pointer;
-        transition:
-          background var(--mz-transition-fast) ease,
-          color var(--mz-transition-fast) ease,
-          border-color var(--mz-transition-fast) ease,
-          box-shadow var(--mz-transition-fast) ease;
-        background: var(--_bg);
-        color: var(--_text);
-        border-color: var(--_border, transparent);
-        --_default-radius: var(--_radius, var(--mz-button-radius, var(--mz-radius-md)));
-        border-start-start-radius: var(--mz-button-radius-start, var(--_default-radius));
-        border-end-start-radius: var(--mz-button-radius-start, var(--_default-radius));
-        border-start-end-radius: var(--mz-button-radius-end, var(--_default-radius));
-        border-end-end-radius: var(--mz-button-radius-end, var(--_default-radius));
-        height: var(--_height);
-        padding-inline: var(--_padding-inline);
-        font-size: var(--_font-size);
-        line-height: var(--mz-line-height-dense);
-      }
-
-      .button:focus-visible {
-        outline: var(--mz-focus-ring);
-        outline-offset: var(--mz-focus-ring-offset);
-      }
-
-      /* Prefix / Suffix slots */
-      .button__prefix,
-      .button__suffix {
-        display: inline-flex;
-        flex: none;
-      }
-
-      .button__label {
-        display: inline-flex;
-        align-items: center;
-      }
-
-      /* Loading state */
-      .button--loading .button__label,
-      .button--loading .button__prefix,
-      .button--loading .button__suffix {
-        visibility: hidden;
-      }
-
-      .button__spinner {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .button--loading {
-        position: relative;
-        cursor: wait;
-      }
-    }
-
-    @layer variants {
-      :host([variant='primary']) {
-        --_color: var(--mz-color-primary);
-        --_color-hover: var(--mz-color-primary-hover);
-        --_color-active: var(--mz-color-primary-active);
-        --_on-color: var(--mz-color-on-primary);
-      }
-
-      :host([variant='danger']) {
-        --_color: var(--mz-color-danger);
-        --_color-hover: var(--mz-color-danger-hover);
-        --_color-active: var(--mz-color-danger-active);
-        --_on-color: var(--mz-color-on-danger);
-      }
-
-      :host([variant='success']) {
-        --_color: var(--mz-color-success);
-        --_color-hover: var(--mz-color-success-hover);
-        --_color-active: var(--mz-color-success-active);
-        --_on-color: var(--mz-color-on-success);
-      }
-
-      :host([variant='warning']) {
-        --_color: var(--mz-color-warning);
-        --_color-hover: var(--mz-color-warning-hover);
-        --_color-active: var(--mz-color-warning-active);
-        --_on-color: var(--mz-color-on-warning);
-      }
-
-      :host([variant='neutral']),
-      :host(:not([variant])) {
-        --_color: var(--mz-color-neutral);
-        --_color-hover: var(--mz-color-neutral-hover);
-        --_color-active: var(--mz-color-neutral-active);
-        --_on-color: var(--mz-color-on-neutral);
-      }
-    }
-
-    @layer appearances {
-      /* Filled (default) */
-      :host([appearance='filled']),
-      :host(:not([appearance])) {
-        --_bg: var(--mz-button-bg, var(--_color));
-        --_text: var(--mz-button-color, var(--_on-color));
-      }
-      :host([appearance='filled']:hover),
-      :host(:not([appearance]):hover) {
-        --_bg: var(--_color-hover);
-      }
-      :host([appearance='filled']:active),
-      :host(:not([appearance]):active) {
-        --_bg: var(--_color-active);
-      }
-
-      /* Outline */
-      :host([appearance='outline']) {
-        --_bg: transparent;
-        --_text: var(--_color);
-        --_border: var(--_color);
-      }
-      :host([appearance='outline']:hover) {
-        --_bg: var(--_color);
-        --_text: var(--_on-color);
-      }
-
-      /* Ghost */
-      :host([appearance='ghost']) {
-        --_bg: transparent;
-        --_text: var(--_color);
-        --_border: transparent;
-      }
-      :host([appearance='ghost']:hover) {
-        --_bg: color-mix(in srgb, var(--_color) 10%, transparent);
-      }
-
-      /* Link */
-      :host([appearance='link']) {
-        --_bg: transparent;
-        --_text: var(--_color);
-        --_border: transparent;
-      }
-      :host([appearance='link']) .button {
-        text-decoration: underline;
-        padding-inline: 0;
-      }
-      :host([appearance='link']:hover) {
-        --_text: var(--_color-hover);
-      }
-    }
-
-    @layer sizes {
-      :host([size='xs']) {
-        --_height: 1.375rem;
-        --_padding-inline: var(--mz-space-xs);
-        --_font-size: var(--mz-font-size-2xs);
-      }
-
-      :host([size='sm']) {
-        --_height: 1.75rem;
-        --_padding-inline: var(--mz-space-sm);
-        --_font-size: var(--mz-font-size-xs);
-      }
-
-      :host([size='md']),
-      :host(:not([size])) {
-        --_height: 2rem;
-        --_padding-inline: var(--mz-space-md);
-        --_font-size: var(--mz-font-size-sm);
-      }
-
-      :host([size='lg']) {
-        --_height: 2.5rem;
-        --_padding-inline: var(--mz-space-lg);
-        --_font-size: var(--mz-font-size-sm);
-      }
-
-      :host([size='xl']) {
-        --_height: 3rem;
-        --_padding-inline: var(--mz-space-xl);
-        --_font-size: var(--mz-font-size-md);
-      }
-    }
-
-    @layer states {
-      /* Pill shape */
-      :host([pill]) {
-        --_radius: var(--mz-radius-pill);
-      }
-
-      /* Disabled */
-      :host([disabled]) .button {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-  `];export{t as a};
-//# sourceMappingURL=chunk.YVOT5EWM.js.map

package/cdn/chunks/chunk.ZI3BHN26.js

@@ -1,90 +0,0 @@
-import{a as r}from"./chunk.KUTEZIT4.js";import{a}from"./chunk.NNH44ORV.js";var o=[r,a`
-    :host {
-      display: block;
-    }
-
-    .card {
-      border: var(--mz-card-border-width, var(--mz-panel-border-width)) solid
-        var(--mz-card-border-color, var(--mz-panel-border-color));
-      border-radius: var(--mz-card-border-radius, var(--mz-panel-border-radius));
-      background: var(--mz-card-bg, var(--mz-color-surface));
-      box-shadow: var(--mz-card-shadow, var(--mz-shadow-sm));
-      overflow: hidden;
-      transition: box-shadow var(--mz-transition-normal) ease,
-        transform var(--mz-transition-normal) ease;
-    }
-
-    .card:hover {
-      box-shadow: var(--mz-card-shadow-hover, var(--mz-shadow-md));
-      transform: translateY(-1px);
-    }
-
-    /* ---- Image ---- */
-
-    .card__image {
-      line-height: 0;
-    }
-
-    .card__image--empty {
-      display: none;
-    }
-
-    .card__image ::slotted(img) {
-      width: 100%;
-      height: auto;
-      display: block;
-    }
-
-    /* ---- Header ---- */
-
-    .card__header {
-      padding: var(--mz-card-padding, var(--mz-space-lg)) var(--mz-card-padding, var(--mz-space-xl));
-    }
-
-    .card__header--empty {
-      display: none;
-    }
-
-    /*
-     * Only show the header's bottom border when there's NO image above it.
-     * When an image is present, the visual break is already strong enough.
-     */
-    .card__image--empty + .card__header:not(.card__header--empty) {
-      border-bottom: var(--mz-panel-border-width) solid var(--mz-color-border);
-    }
-
-    /* When header follows an image, tighten the top padding — the image IS the separator */
-    .card__image:not(.card__image--empty) + .card__header {
-      padding-top: var(--mz-space-md);
-      padding-bottom: var(--mz-space-xs);
-    }
-
-    /* ---- Body ---- */
-
-    .card__body {
-      padding: var(--mz-card-padding, var(--mz-space-xl));
-      color: color-mix(in srgb, var(--mz-color-text) 78%, transparent);
-    }
-
-    /* When body follows a visible header (no image case), reduce top padding to avoid double-spacing */
-    .card__image--empty + .card__header:not(.card__header--empty) + .card__body {
-      padding-top: var(--mz-space-md);
-    }
-
-    /* When body follows a visible header after an image, tighten further */
-    .card__image:not(.card__image--empty) + .card__header:not(.card__header--empty) + .card__body {
-      padding-top: var(--mz-space-sm);
-    }
-
-    /* ---- Footer ---- */
-
-    .card__footer {
-      padding: var(--mz-space-md) var(--mz-card-padding, var(--mz-space-xl));
-      border-top: var(--mz-panel-border-width) solid var(--mz-color-border);
-    }
-
-    .card__footer--empty {
-      display: none;
-    }
-  `];export{o as a};
-//# sourceMappingURL=chunk.ZI3BHN26.js.map

package/cdn/chunks/chunk.ZI7YA6QO.js

@@ -1,33 +0,0 @@
-import{a as f}from"./chunk.VNNJR2UW.js";import{a,d}from"./chunk.GX7DY53T.js";import{a as p}from"./chunk.J37YLNQO.js";import{a as m}from"./chunk.O6DGTOVN.js";import{a as h,b as l}from"./chunk.3HBRHIFP.js";import{a as s,c as n,d as c}from"./chunk.SZ34NZMW.js";import{d as r,f as i}from"./chunk.NNH44ORV.js";import{a as o}from"./chunk.MGICPQBB.js";a("drawer.show.start",{keyframes:[{opacity:0,transform:"translateX(-100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}});a("drawer.hide.start",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-100%)"}],options:{duration:150,easing:"ease"}});a("drawer.show.end",{keyframes:[{opacity:0,transform:"translateX(100%)"},{opacity:1,transform:"translateX(0)"}],options:{duration:250,easing:"ease"}});a("drawer.hide.end",{keyframes:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(100%)"}],options:{duration:150,easing:"ease"}});a("drawer.show.top",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}});a("drawer.hide.top",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-100%)"}],options:{duration:150,easing:"ease"}});a("drawer.show.bottom",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:250,easing:"ease"}});a("drawer.hide.bottom",{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(100%)"}],options:{duration:150,easing:"ease"}});var t=class extends c{constructor(){super(...arguments);this.open=!1;this.label="";this.placement="start";this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.focusTrap=new m(this)}disconnectedCallback(){super.disconnectedCallback(),this.focusTrap.deactivate(),l()}async updated(e){e.has("open")&&(this.open?await this.showDrawer():e.get("open")===!0&&await this.hideDrawer())}async showDrawer(){this.emit("mz-show"),this.dialogEl.showModal(),h(),this.focusTrap.activate(),await d(this.panelEl,`drawer.show.${this.placement}`,this.prefersReducedMotion).finished,this.emit("mz-after-show")}async hideDrawer(){this.emit("mz-hide"),this.focusTrap.deactivate(),await d(this.panelEl,`drawer.hide.${this.placement}`,this.prefersReducedMotion).finished,this.dialogEl.close(),l(),this.emit("mz-after-hide")}requestClose(e){this.emit("mz-request-close",{cancelable:!0,detail:{source:e}})&&(this.open=!1)}show(){this.open=!0}hide(){this.open=!1}handleCancel(e){e.preventDefault(),this.requestClose("keyboard")}handleDialogClick(e){e.target===this.dialogEl&&this.requestClose("backdrop")}render(){return r`
-      <dialog
-        part="base"
-        class="drawer"
-        aria-label=${this.label||i}
-        @cancel=${this.handleCancel}
-        @click=${this.handleDialogClick}
-      >
-        <div part="panel" class="drawer__panel">
-          <header part="header" class="drawer__header">
-            <slot name="header">${this.label}</slot>
-            ${this.noCloseButton?i:r`
-                  <button
-                    part="close"
-                    class="drawer__close"
-                    type="button"
-                    aria-label="Close"
-                    @click=${()=>this.requestClose("close-button")}
-                  >
-                    <mz-icon name="x" label="Close"></mz-icon>
-                  </button>
-                `}
-          </header>
-          <div part="body" class="drawer__body">
-            <slot></slot>
-          </div>
-          <footer part="footer" class="drawer__footer">
-            <slot name="footer"></slot>
-          </footer>
-        </div>
-      </dialog>
-    `}};t.styles=f,t.dependencies={"mz-icon":p},o([n("dialog")],t.prototype,"dialogEl",2),o([n(".drawer__panel")],t.prototype,"panelEl",2),o([s({type:Boolean,reflect:!0})],t.prototype,"open",2),o([s()],t.prototype,"label",2),o([s({reflect:!0})],t.prototype,"placement",2),o([s({type:Boolean,attribute:"no-close-button"})],t.prototype,"noCloseButton",2);export{t as a};
-//# sourceMappingURL=chunk.ZI7YA6QO.js.map