@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/date-range-picker/date-range-picker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/date-range-picker/date-range-picker.ts"],
+  "sourcesContent": ["import { MzDateRangePicker } from './date-range-picker.component.js';\n\nexport * from './date-range-picker.component.js';\n\nMzDateRangePicker.define('mz-date-range-picker');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-date-range-picker': MzDateRangePicker;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAElC,cAAc;AAEd,kBAAkB,OAAO,sBAAsB;",
+  "names": []
+}

package/dist/components/date-range-picker/date-range-picker.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=date-range-picker.styles.d.ts.map

package/dist/components/date-range-picker/date-range-picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.styles.ts"],"names":[],"mappings":";AAGA,wBAqbE"}

package/dist/components/date-range-picker/date-range-picker.styles.js

@@ -0,0 +1,444 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var date_range_picker_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([inline]) {
+      display: block;
+    }
+
+    :host([open]) {
+      z-index: 1000;
+      position: relative;
+    }
+
+    .drp {
+      position: relative;
+      font-family: var(--mz-font-sans);
+    }
+
+    /* --- Trigger --- */
+
+    .drp__control {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface, #fff);
+      cursor: pointer;
+      transition: border-color 0.15s, box-shadow 0.15s;
+      gap: var(--mz-space-xs);
+    }
+
+    .drp--open .drp__control {
+      border-color: var(--mz-color-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);
+    }
+
+    .drp--disabled .drp__control {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .drp__input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--mz-font-size-base);
+      color: var(--mz-color-text);
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      outline: none;
+      cursor: pointer;
+      min-width: 0;
+      text-align: center;
+    }
+
+    .drp__input::placeholder {
+      color: var(--mz-color-text-disabled);
+    }
+
+    .drp__input--start {
+      text-align: right;
+      padding-right: 0;
+    }
+
+    .drp__input--end {
+      text-align: left;
+      padding-left: 0;
+    }
+
+    .drp__arrow {
+      display: flex;
+      align-items: center;
+      color: var(--mz-color-text-disabled);
+      flex-shrink: 0;
+    }
+
+    .drp__icon {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--mz-space-sm);
+      color: var(--mz-color-text-disabled);
+      flex-shrink: 0;
+    }
+
+    /* --- Panel --- */
+
+    .drp__panel {
+      position: absolute;
+      top: calc(100% + var(--mz-space-xs, 4px));
+      left: 0;
+      z-index: 1000;
+      background: var(--mz-color-surface, #fff);
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg, 0.75rem);
+      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));
+      padding: var(--mz-space-md);
+      width: fit-content;
+    }
+
+    .drp--inline .drp__panel {
+      position: static;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+    }
+
+    .drp--inline {
+      container-type: inline-size;
+    }
+
+    .drp__months {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--mz-space-lg);
+    }
+
+    @container (max-width: 500px) {
+      .drp__months {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    /* --- Month header --- */
+
+    .drp__month-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--mz-space-xs) 0;
+      margin-bottom: var(--mz-space-xs);
+      min-height: 1.75rem;
+    }
+
+    .drp__month-title {
+      font-weight: var(--mz-font-weight-semibold, 600);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+      flex: 1;
+      text-align: center;
+    }
+
+    .drp__nav {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: transparent;
+      color: var(--mz-color-text);
+      cursor: pointer;
+      transition: background 0.15s;
+      padding: 0;
+      flex-shrink: 0;
+    }
+
+    .drp__nav:hover {
+      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));
+    }
+
+    .drp__nav-spacer {
+      width: 1.75rem;
+      flex-shrink: 0;
+    }
+
+    /* --- Weekday headers --- */
+
+    .drp__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+      margin-bottom: var(--mz-space-xs);
+    }
+
+    .drp__weekday {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-text-secondary);
+      font-weight: var(--mz-font-weight-medium, 500);
+      padding: var(--mz-space-xs) 0;
+    }
+
+    /* --- Day grid --- */
+
+    .drp__days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    .drp__day-cell {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      aspect-ratio: 1;
+    }
+
+    /* Range band (behind the day button) */
+    .drp__day-cell::before {
+      content: '';
+      position: absolute;
+      inset: 2px 0;
+      background: transparent;
+      z-index: 0;
+    }
+
+    .drp__day-cell--in-range::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);
+    }
+
+    .drp__day-cell--preview::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);
+    }
+
+    .drp__day-cell--range-start::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);
+      border-radius: var(--mz-radius-md, 0.5rem) 0 0 var(--mz-radius-md, 0.5rem);
+    }
+
+    .drp__day-cell--range-end::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);
+      border-radius: 0 var(--mz-radius-md, 0.5rem) var(--mz-radius-md, 0.5rem) 0;
+    }
+
+    .drp__day-cell--range-start.drp__day-cell--range-end::before {
+      border-radius: var(--mz-radius-md, 0.5rem);
+    }
+
+    /* Preview start/end half-bands */
+    .drp__day-cell--preview-start::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);
+      border-radius: var(--mz-radius-md, 0.5rem) 0 0 var(--mz-radius-md, 0.5rem);
+    }
+
+    .drp__day-cell--preview-end::before {
+      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);
+      border-radius: 0 var(--mz-radius-md, 0.5rem) var(--mz-radius-md, 0.5rem) 0;
+    }
+
+    /* Row edge rounding */
+    .drp__day-cell--in-range:first-child::before,
+    .drp__day-cell--preview:first-child::before {
+      border-radius: var(--mz-radius-sm, 0.25rem) 0 0 var(--mz-radius-sm, 0.25rem);
+    }
+
+    .drp__day-cell--in-range:last-child::before,
+    .drp__day-cell--preview:last-child::before {
+      border-radius: 0 var(--mz-radius-sm, 0.25rem) var(--mz-radius-sm, 0.25rem) 0;
+    }
+
+    /* --- Day button --- */
+
+    .drp__day {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+      padding: 0;
+    }
+
+    .drp__day:focus-visible {
+      outline: 2px solid var(--mz-color-primary);
+      outline-offset: 1px;
+    }
+
+    .drp__day:hover:not(:disabled):not(.drp__day--selected) {
+      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));
+    }
+
+    .drp__day--selected {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary, #fff);
+      font-weight: var(--mz-font-weight-semibold, 600);
+    }
+
+    .drp__day--today:not(.drp__day--selected) {
+      border: 1px solid var(--mz-color-primary);
+      color: var(--mz-color-primary);
+      font-weight: var(--mz-font-weight-semibold, 600);
+    }
+
+    .drp__day--disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .drp__day--outside {
+      visibility: hidden;
+    }
+
+    /* --- Footer --- */
+
+    .drp__footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-top: 1px solid var(--mz-color-border);
+      margin-top: var(--mz-space-md);
+      padding-top: var(--mz-space-sm);
+      gap: var(--mz-space-xs);
+      flex-wrap: wrap;
+    }
+
+    .drp__presets {
+      display: flex;
+      gap: var(--mz-space-xs);
+      flex-wrap: wrap;
+    }
+
+    .drp__preset {
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface);
+      color: var(--mz-color-text);
+      font-family: inherit;
+      font-size: var(--mz-font-size-xs);
+      padding: var(--mz-space-xs) var(--mz-space-sm);
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+    }
+
+    .drp__preset:hover {
+      border-color: var(--mz-color-primary);
+      background: color-mix(in srgb, var(--mz-color-primary) 8%, var(--mz-color-surface));
+    }
+
+    .drp__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-xs);
+      margin-left: auto;
+    }
+
+    .drp__clear {
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: transparent;
+      color: var(--mz-color-text-secondary);
+      font-family: inherit;
+      font-size: var(--mz-font-size-xs);
+      padding: var(--mz-space-xs) var(--mz-space-sm);
+      cursor: pointer;
+      transition: color 0.15s;
+    }
+
+    .drp__clear:hover {
+      color: var(--mz-color-text);
+    }
+
+    .drp__apply {
+      border: none;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary, #fff);
+      font-family: inherit;
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-semibold, 600);
+      padding: var(--mz-space-xs) var(--mz-space-md);
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+
+    .drp__apply:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+
+    .drp__apply:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    /* --- Accessibility --- */
+
+    .drp__sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* --- Mobile / touch --- */
+
+    @media (max-width: 600px) {
+      .drp__months {
+        grid-template-columns: 1fr;
+      }
+
+      .drp__panel {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .drp--inline .drp__panel {
+        left: 0;
+        transform: none;
+      }
+    }
+
+    @media (pointer: coarse) {
+      .drp__day {
+        width: 2.75rem;
+        height: 2.75rem;
+      }
+
+      .drp__nav {
+        width: 2.75rem;
+        height: 2.75rem;
+      }
+
+      .drp__preset,
+      .drp__clear,
+      .drp__apply {
+        min-height: 2.75rem;
+        padding: var(--mz-space-sm) var(--mz-space-md);
+        font-size: var(--mz-font-size-sm);
+      }
+    }
+  `
+];
+export {
+  date_range_picker_styles_default as default
+};
+//# sourceMappingURL=date-range-picker.styles.js.map

package/dist/components/date-range-picker/date-range-picker.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/date-range-picker/date-range-picker.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n    }\n\n    :host([inline]) {\n      display: block;\n    }\n\n    :host([open]) {\n      z-index: 1000;\n      position: relative;\n    }\n\n    .drp {\n      position: relative;\n      font-family: var(--mz-font-sans);\n    }\n\n    /* --- Trigger --- */\n\n    .drp__control {\n      display: flex;\n      align-items: center;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-surface, #fff);\n      cursor: pointer;\n      transition: border-color 0.15s, box-shadow 0.15s;\n      gap: var(--mz-space-xs);\n    }\n\n    .drp--open .drp__control {\n      border-color: var(--mz-color-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 20%, transparent);\n    }\n\n    .drp--disabled .drp__control {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .drp__input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--mz-font-size-base);\n      color: var(--mz-color-text);\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      outline: none;\n      cursor: pointer;\n      min-width: 0;\n      text-align: center;\n    }\n\n    .drp__input::placeholder {\n      color: var(--mz-color-text-disabled);\n    }\n\n    .drp__input--start {\n      text-align: right;\n      padding-right: 0;\n    }\n\n    .drp__input--end {\n      text-align: left;\n      padding-left: 0;\n    }\n\n    .drp__arrow {\n      display: flex;\n      align-items: center;\n      color: var(--mz-color-text-disabled);\n      flex-shrink: 0;\n    }\n\n    .drp__icon {\n      display: flex;\n      align-items: center;\n      padding: 0 var(--mz-space-sm);\n      color: var(--mz-color-text-disabled);\n      flex-shrink: 0;\n    }\n\n    /* --- Panel --- */\n\n    .drp__panel {\n      position: absolute;\n      top: calc(100% + var(--mz-space-xs, 4px));\n      left: 0;\n      z-index: 1000;\n      background: var(--mz-color-surface, #fff);\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg, 0.75rem);\n      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));\n      padding: var(--mz-space-md);\n      width: fit-content;\n    }\n\n    .drp--inline .drp__panel {\n      position: static;\n      border: none;\n      box-shadow: none;\n      padding: 0;\n    }\n\n    .drp--inline {\n      container-type: inline-size;\n    }\n\n    .drp__months {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: var(--mz-space-lg);\n    }\n\n    @container (max-width: 500px) {\n      .drp__months {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    /* --- Month header --- */\n\n    .drp__month-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mz-space-xs) 0;\n      margin-bottom: var(--mz-space-xs);\n      min-height: 1.75rem;\n    }\n\n    .drp__month-title {\n      font-weight: var(--mz-font-weight-semibold, 600);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n      flex: 1;\n      text-align: center;\n    }\n\n    .drp__nav {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 1.75rem;\n      height: 1.75rem;\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: transparent;\n      color: var(--mz-color-text);\n      cursor: pointer;\n      transition: background 0.15s;\n      padding: 0;\n      flex-shrink: 0;\n    }\n\n    .drp__nav:hover {\n      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));\n    }\n\n    .drp__nav-spacer {\n      width: 1.75rem;\n      flex-shrink: 0;\n    }\n\n    /* --- Weekday headers --- */\n\n    .drp__weekdays {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      text-align: center;\n      margin-bottom: var(--mz-space-xs);\n    }\n\n    .drp__weekday {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-text-secondary);\n      font-weight: var(--mz-font-weight-medium, 500);\n      padding: var(--mz-space-xs) 0;\n    }\n\n    /* --- Day grid --- */\n\n    .drp__days {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n    }\n\n    .drp__day-cell {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      aspect-ratio: 1;\n    }\n\n    /* Range band (behind the day button) */\n    .drp__day-cell::before {\n      content: '';\n      position: absolute;\n      inset: 2px 0;\n      background: transparent;\n      z-index: 0;\n    }\n\n    .drp__day-cell--in-range::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);\n    }\n\n    .drp__day-cell--preview::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);\n    }\n\n    .drp__day-cell--range-start::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);\n      border-radius: var(--mz-radius-md, 0.5rem) 0 0 var(--mz-radius-md, 0.5rem);\n    }\n\n    .drp__day-cell--range-end::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 12%, transparent);\n      border-radius: 0 var(--mz-radius-md, 0.5rem) var(--mz-radius-md, 0.5rem) 0;\n    }\n\n    .drp__day-cell--range-start.drp__day-cell--range-end::before {\n      border-radius: var(--mz-radius-md, 0.5rem);\n    }\n\n    /* Preview start/end half-bands */\n    .drp__day-cell--preview-start::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);\n      border-radius: var(--mz-radius-md, 0.5rem) 0 0 var(--mz-radius-md, 0.5rem);\n    }\n\n    .drp__day-cell--preview-end::before {\n      background: color-mix(in srgb, var(--mz-color-primary) 8%, transparent);\n      border-radius: 0 var(--mz-radius-md, 0.5rem) var(--mz-radius-md, 0.5rem) 0;\n    }\n\n    /* Row edge rounding */\n    .drp__day-cell--in-range:first-child::before,\n    .drp__day-cell--preview:first-child::before {\n      border-radius: var(--mz-radius-sm, 0.25rem) 0 0 var(--mz-radius-sm, 0.25rem);\n    }\n\n    .drp__day-cell--in-range:last-child::before,\n    .drp__day-cell--preview:last-child::before {\n      border-radius: 0 var(--mz-radius-sm, 0.25rem) var(--mz-radius-sm, 0.25rem) 0;\n    }\n\n    /* --- Day button --- */\n\n    .drp__day {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 2rem;\n      height: 2rem;\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n      cursor: pointer;\n      transition: background 0.15s, color 0.15s;\n      padding: 0;\n    }\n\n    .drp__day:focus-visible {\n      outline: 2px solid var(--mz-color-primary);\n      outline-offset: 1px;\n    }\n\n    .drp__day:hover:not(:disabled):not(.drp__day--selected) {\n      background: color-mix(in srgb, var(--mz-color-primary) 15%, var(--mz-color-surface));\n    }\n\n    .drp__day--selected {\n      background: var(--mz-color-primary);\n      color: var(--mz-color-on-primary, #fff);\n      font-weight: var(--mz-font-weight-semibold, 600);\n    }\n\n    .drp__day--today:not(.drp__day--selected) {\n      border: 1px solid var(--mz-color-primary);\n      color: var(--mz-color-primary);\n      font-weight: var(--mz-font-weight-semibold, 600);\n    }\n\n    .drp__day--disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n\n    .drp__day--outside {\n      visibility: hidden;\n    }\n\n    /* --- Footer --- */\n\n    .drp__footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      border-top: 1px solid var(--mz-color-border);\n      margin-top: var(--mz-space-md);\n      padding-top: var(--mz-space-sm);\n      gap: var(--mz-space-xs);\n      flex-wrap: wrap;\n    }\n\n    .drp__presets {\n      display: flex;\n      gap: var(--mz-space-xs);\n      flex-wrap: wrap;\n    }\n\n    .drp__preset {\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-surface);\n      color: var(--mz-color-text);\n      font-family: inherit;\n      font-size: var(--mz-font-size-xs);\n      padding: var(--mz-space-xs) var(--mz-space-sm);\n      cursor: pointer;\n      transition: background 0.15s, border-color 0.15s;\n    }\n\n    .drp__preset:hover {\n      border-color: var(--mz-color-primary);\n      background: color-mix(in srgb, var(--mz-color-primary) 8%, var(--mz-color-surface));\n    }\n\n    .drp__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-xs);\n      margin-left: auto;\n    }\n\n    .drp__clear {\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: transparent;\n      color: var(--mz-color-text-secondary);\n      font-family: inherit;\n      font-size: var(--mz-font-size-xs);\n      padding: var(--mz-space-xs) var(--mz-space-sm);\n      cursor: pointer;\n      transition: color 0.15s;\n    }\n\n    .drp__clear:hover {\n      color: var(--mz-color-text);\n    }\n\n    .drp__apply {\n      border: none;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-primary);\n      color: var(--mz-color-on-primary, #fff);\n      font-family: inherit;\n      font-size: var(--mz-font-size-xs);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      padding: var(--mz-space-xs) var(--mz-space-md);\n      cursor: pointer;\n      transition: opacity 0.15s;\n    }\n\n    .drp__apply:hover:not(:disabled) {\n      opacity: 0.9;\n    }\n\n    .drp__apply:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    /* --- Accessibility --- */\n\n    .drp__sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* --- Mobile / touch --- */\n\n    @media (max-width: 600px) {\n      .drp__months {\n        grid-template-columns: 1fr;\n      }\n\n      .drp__panel {\n        left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .drp--inline .drp__panel {\n        left: 0;\n        transform: none;\n      }\n    }\n\n    @media (pointer: coarse) {\n      .drp__day {\n        width: 2.75rem;\n        height: 2.75rem;\n      }\n\n      .drp__nav {\n        width: 2.75rem;\n        height: 2.75rem;\n      }\n\n      .drp__preset,\n      .drp__clear,\n      .drp__apply {\n        min-height: 2.75rem;\n        padding: var(--mz-space-sm) var(--mz-space-md);\n        font-size: var(--mz-font-size-sm);\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,mCAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmbF;",
+  "names": []
+}

package/dist/components/dialog/dialog.styles.js

@@ -64,7 +64,7 @@ var dialog_styles_default = [
 
     .dialog__close:hover {
       color: var(--mz-color-text);
-      background: var(--mz-color-gray-100);
+      background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));
     }
 
     .dialog__close:focus-visible {

package/dist/components/dialog/dialog.styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog/dialog.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: contents;\n    }\n\n    .dialog {\n      border: none;\n      padding: 0;\n      background: transparent;\n      max-width: none;\n      max-height: none;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .dialog::backdrop {\n      background: rgb(28 25 21 / 0.5);\n    }\n\n    .dialog__panel {\n      position: fixed;\n      inset: 0;\n      margin: auto;\n      display: flex;\n      flex-direction: column;\n      width: min(calc(100vw - var(--mz-space-xl) * 2), 32rem);\n      max-height: calc(100vh - var(--mz-space-xl) * 2);\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      border-radius: var(--mz-radius-lg);\n      box-shadow: var(--mz-shadow-xl);\n      z-index: var(--mz-z-modal, 1050);\n    }\n\n    .dialog__header {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-lg);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text);\n    }\n\n    .dialog__close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-inline-start: auto;\n      padding: var(--mz-space-2xs);\n      border: none;\n      background: none;\n      color: var(--mz-color-text-secondary);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);\n    }\n\n    .dialog__close:hover {\n      color: var(--mz-color-text);\n      background: var(--mz-color-gray-100);\n    }\n\n    .dialog__close:focus-visible {\n      outline: var(--mz-focus-ring);\n      outline-offset: var(--mz-focus-ring-offset);\n    }\n\n    .dialog__body {\n      flex: 1;\n      padding: var(--mz-space-lg);\n      overflow-y: auto;\n      color: var(--mz-color-text);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .dialog__footer {\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);\n    }\n\n    .dialog__footer:empty {\n      display: none;\n    }\n  `\n];\n"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: contents;\n    }\n\n    .dialog {\n      border: none;\n      padding: 0;\n      background: transparent;\n      max-width: none;\n      max-height: none;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .dialog::backdrop {\n      background: rgb(28 25 21 / 0.5);\n    }\n\n    .dialog__panel {\n      position: fixed;\n      inset: 0;\n      margin: auto;\n      display: flex;\n      flex-direction: column;\n      width: min(calc(100vw - var(--mz-space-xl) * 2), 32rem);\n      max-height: calc(100vh - var(--mz-space-xl) * 2);\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      border-radius: var(--mz-radius-lg);\n      box-shadow: var(--mz-shadow-xl);\n      z-index: var(--mz-z-modal, 1050);\n    }\n\n    .dialog__header {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-lg);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text);\n    }\n\n    .dialog__close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-inline-start: auto;\n      padding: var(--mz-space-2xs);\n      border: none;\n      background: none;\n      color: var(--mz-color-text-secondary);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);\n    }\n\n    .dialog__close:hover {\n      color: var(--mz-color-text);\n      background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));\n    }\n\n    .dialog__close:focus-visible {\n      outline: var(--mz-focus-ring);\n      outline-offset: var(--mz-focus-ring-offset);\n    }\n\n    .dialog__body {\n      flex: 1;\n      padding: var(--mz-space-lg);\n      overflow-y: auto;\n      color: var(--mz-color-text);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .dialog__footer {\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);\n    }\n\n    .dialog__footer:empty {\n      display: none;\n    }\n  `\n];\n"],
   "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,wBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFF;",
   "names": []
 }

package/dist/components/drawer/drawer.styles.js

@@ -97,7 +97,7 @@ var drawer_styles_default = [
 
     .drawer__close:hover {
       color: var(--mz-color-text);
-      background: var(--mz-color-gray-100);
+      background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));
     }
 
     .drawer__close:focus-visible {

package/dist/components/drawer/drawer.styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/drawer/drawer.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: contents;\n    }\n\n    .drawer {\n      border: none;\n      padding: 0;\n      background: transparent;\n      max-width: none;\n      max-height: none;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .drawer::backdrop {\n      background: rgb(28 25 21 / 0.5);\n    }\n\n    .drawer__panel {\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      box-shadow: var(--mz-shadow-xl);\n      z-index: var(--mz-z-modal, 1050);\n      overflow: hidden;\n    }\n\n    /* Placement: start (left) */\n    :host([placement='start']) .drawer__panel,\n    :host(:not([placement])) .drawer__panel {\n      inset-block: 0;\n      inset-inline-start: 0;\n      width: min(20rem, calc(100vw - var(--mz-space-xl)));\n      height: 100%;\n      border-radius: 0 var(--mz-radius-lg) var(--mz-radius-lg) 0;\n    }\n\n    /* Placement: end (right) */\n    :host([placement='end']) .drawer__panel {\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: min(20rem, calc(100vw - var(--mz-space-xl)));\n      height: 100%;\n      border-radius: var(--mz-radius-lg) 0 0 var(--mz-radius-lg);\n    }\n\n    /* Placement: top */\n    :host([placement='top']) .drawer__panel {\n      inset-inline: 0;\n      inset-block-start: 0;\n      width: 100%;\n      max-height: min(20rem, calc(100vh - var(--mz-space-xl)));\n      border-radius: 0 0 var(--mz-radius-lg) var(--mz-radius-lg);\n    }\n\n    /* Placement: bottom */\n    :host([placement='bottom']) .drawer__panel {\n      inset-inline: 0;\n      inset-block-end: 0;\n      width: 100%;\n      max-height: min(20rem, calc(100vh - var(--mz-space-xl)));\n      border-radius: var(--mz-radius-lg) var(--mz-radius-lg) 0 0;\n    }\n\n    .drawer__header {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-lg);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text);\n    }\n\n    .drawer__close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-inline-start: auto;\n      padding: var(--mz-space-2xs);\n      border: none;\n      background: none;\n      color: var(--mz-color-text-secondary);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);\n    }\n\n    .drawer__close:hover {\n      color: var(--mz-color-text);\n      background: var(--mz-color-gray-100);\n    }\n\n    .drawer__close:focus-visible {\n      outline: var(--mz-focus-ring);\n      outline-offset: var(--mz-focus-ring-offset);\n    }\n\n    .drawer__body {\n      flex: 1;\n      padding: var(--mz-space-lg);\n      overflow-y: auto;\n      color: var(--mz-color-text);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .drawer__footer {\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);\n    }\n\n    .drawer__footer:empty {\n      display: none;\n    }\n  `\n];\n"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: contents;\n    }\n\n    .drawer {\n      border: none;\n      padding: 0;\n      background: transparent;\n      max-width: none;\n      max-height: none;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .drawer::backdrop {\n      background: rgb(28 25 21 / 0.5);\n    }\n\n    .drawer__panel {\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      background: var(--mz-color-surface-overlay, var(--mz-color-surface));\n      box-shadow: var(--mz-shadow-xl);\n      z-index: var(--mz-z-modal, 1050);\n      overflow: hidden;\n    }\n\n    /* Placement: start (left) */\n    :host([placement='start']) .drawer__panel,\n    :host(:not([placement])) .drawer__panel {\n      inset-block: 0;\n      inset-inline-start: 0;\n      width: min(20rem, calc(100vw - var(--mz-space-xl)));\n      height: 100%;\n      border-radius: 0 var(--mz-radius-lg) var(--mz-radius-lg) 0;\n    }\n\n    /* Placement: end (right) */\n    :host([placement='end']) .drawer__panel {\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: min(20rem, calc(100vw - var(--mz-space-xl)));\n      height: 100%;\n      border-radius: var(--mz-radius-lg) 0 0 var(--mz-radius-lg);\n    }\n\n    /* Placement: top */\n    :host([placement='top']) .drawer__panel {\n      inset-inline: 0;\n      inset-block-start: 0;\n      width: 100%;\n      max-height: min(20rem, calc(100vh - var(--mz-space-xl)));\n      border-radius: 0 0 var(--mz-radius-lg) var(--mz-radius-lg);\n    }\n\n    /* Placement: bottom */\n    :host([placement='bottom']) .drawer__panel {\n      inset-inline: 0;\n      inset-block-end: 0;\n      width: 100%;\n      max-height: min(20rem, calc(100vh - var(--mz-space-xl)));\n      border-radius: var(--mz-radius-lg) var(--mz-radius-lg) 0 0;\n    }\n\n    .drawer__header {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-bottom: var(--mz-border-width-sm) solid var(--mz-color-border);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-lg);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text);\n    }\n\n    .drawer__close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-inline-start: auto;\n      padding: var(--mz-space-2xs);\n      border: none;\n      background: none;\n      color: var(--mz-color-text-secondary);\n      cursor: pointer;\n      border-radius: var(--mz-radius-sm);\n      transition: color var(--mz-transition-fast), background var(--mz-transition-fast);\n    }\n\n    .drawer__close:hover {\n      color: var(--mz-color-text);\n      background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));\n    }\n\n    .drawer__close:focus-visible {\n      outline: var(--mz-focus-ring);\n      outline-offset: var(--mz-focus-ring-offset);\n    }\n\n    .drawer__body {\n      flex: 1;\n      padding: var(--mz-space-lg);\n      overflow-y: auto;\n      color: var(--mz-color-text);\n      font-family: var(--mz-font-sans);\n      font-size: var(--mz-font-size-md);\n      line-height: var(--mz-line-height-normal);\n    }\n\n    .drawer__footer {\n      padding: var(--mz-space-md) var(--mz-space-lg);\n      border-top: var(--mz-border-width-sm) solid var(--mz-color-border);\n    }\n\n    .drawer__footer:empty {\n      display: none;\n    }\n  `\n];\n"],
   "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,wBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0HF;",
   "names": []
 }

package/dist/components/empty/empty.component.d.ts

@@ -0,0 +1,29 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary An empty state placeholder — used when a list, table, or content area has no data.
+ *
+ * @slot icon - Large illustration or icon displayed at the top.
+ * @slot title - Custom title content (overrides the `heading` property).
+ * @slot description - Custom description content (overrides the `description` property).
+ * @slot action - Action button(s) at the bottom.
+ * @slot - Additional content below the action area.
+ *
+ * @csspart base - The outer container.
+ * @csspart icon - The icon area.
+ * @csspart title - The title text.
+ * @csspart description - The description text.
+ * @csspart action - The action button area.
+ *
+ * @cssproperty --mz-empty-padding - Container padding.
+ * @cssproperty --mz-empty-icon-size - Icon area width and height.
+ * @cssproperty --mz-empty-icon-color - Icon color.
+ */
+export declare class MzEmpty extends ManzanoElement {
+    static styles: import("lit").CSSResult;
+    /** The heading text. Use the `title` slot for rich content. */
+    heading: string;
+    /** The description text. Use the `description` slot for rich content. */
+    description: string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=empty.component.d.ts.map

package/dist/components/empty/empty.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.component.d.ts","sourceRoot":"","sources":["../../../src/components/empty/empty.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,+DAA+D;IAC3B,OAAO,SAAM;IAEjD,yEAAyE;IAC7D,WAAW,SAAM;IAE7B,MAAM;CAgCP"}

package/dist/components/empty/empty.component.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./empty.styles.js";
+class MzEmpty extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this.description = "";
+  }
+  render() {
+    return html`
+      <div class="empty" part="base">
+        <div class="empty__icon" part="icon">
+          <slot name="icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
+              <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
+            </svg>
+          </slot>
+        </div>
+        ${this.heading ? html`
+              <div class="empty__title" part="title">
+                <slot name="title">${this.heading}</slot>
+              </div>
+            ` : html`<slot name="title"></slot>`}
+        ${this.description ? html`
+              <div class="empty__description" part="description">
+                <slot name="description">${this.description}</slot>
+              </div>
+            ` : html`<slot name="description"></slot>`}
+        <div class="empty__action" part="action">
+          <slot name="action"></slot>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+MzEmpty.styles = styles;
+__decorateClass([
+  property({ attribute: "heading" })
+], MzEmpty.prototype, "heading", 2);
+__decorateClass([
+  property()
+], MzEmpty.prototype, "description", 2);
+export {
+  MzEmpty
+};
+//# sourceMappingURL=empty.component.js.map

package/dist/components/empty/empty.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/empty/empty.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './empty.styles.js';\n\n/**\n * @summary An empty state placeholder \u2014 used when a list, table, or content area has no data.\n *\n * @slot icon - Large illustration or icon displayed at the top.\n * @slot title - Custom title content (overrides the `heading` property).\n * @slot description - Custom description content (overrides the `description` property).\n * @slot action - Action button(s) at the bottom.\n * @slot - Additional content below the action area.\n *\n * @csspart base - The outer container.\n * @csspart icon - The icon area.\n * @csspart title - The title text.\n * @csspart description - The description text.\n * @csspart action - The action button area.\n *\n * @cssproperty --mz-empty-padding - Container padding.\n * @cssproperty --mz-empty-icon-size - Icon area width and height.\n * @cssproperty --mz-empty-icon-color - Icon color.\n */\nexport class MzEmpty extends ManzanoElement {\n  static styles = styles;\n\n  /** The heading text. Use the `title` slot for rich content. */\n  @property({ attribute: 'heading' }) heading = '';\n\n  /** The description text. Use the `description` slot for rich content. */\n  @property() description = '';\n\n  render() {\n    return html`\n      <div class=\"empty\" part=\"base\">\n        <div class=\"empty__icon\" part=\"icon\">\n          <slot name=\"icon\">\n            <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"></polyline>\n              <path d=\"M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\"></path>\n            </svg>\n          </slot>\n        </div>\n        ${this.heading\n          ? html`\n              <div class=\"empty__title\" part=\"title\">\n                <slot name=\"title\">${this.heading}</slot>\n              </div>\n            `\n          : html`<slot name=\"title\"></slot>`}\n        ${this.description\n          ? html`\n              <div class=\"empty__description\" part=\"description\">\n                <slot name=\"description\">${this.description}</slot>\n              </div>\n            `\n          : html`<slot name=\"description\"></slot>`}\n        <div class=\"empty__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAqBZ,MAAM,gBAAgB,eAAe;AAAA,EAArC;AAAA;AAI+B,mBAAU;AAGlC,uBAAc;AAAA;AAAA,EAE1B,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUD,KAAK,UACH;AAAA;AAAA,qCAEyB,KAAK,OAAO;AAAA;AAAA,gBAGrC,gCAAgC;AAAA,UAClC,KAAK,cACH;AAAA;AAAA,2CAE+B,KAAK,WAAW;AAAA;AAAA,gBAG/C,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOhD;AACF;AAzCa,QACJ,SAAS;AAGoB;AAAA,EAAnC,SAAS,EAAE,WAAW,UAAU,CAAC;AAAA,GAJvB,QAIyB;AAGxB;AAAA,EAAX,SAAS;AAAA,GAPC,QAOC;",
+  "names": []
+}