@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/data-table/data-table.styles.js

@@ -0,0 +1,230 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var data_table_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+      font-family: var(--mz-font-sans);
+    }
+
+    .data-table {
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg, 0.75rem);
+      overflow: hidden;
+      background: var(--mz-color-surface, #fff);
+    }
+
+    .data-table__toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      border-bottom: 1px solid var(--mz-color-border);
+      gap: var(--mz-space-md);
+    }
+
+    .data-table__search {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-xs);
+      flex: 1;
+      max-width: 20rem;
+    }
+
+    .data-table__search-icon {
+      color: var(--mz-color-text-disabled);
+      flex-shrink: 0;
+    }
+
+    .data-table__search-input {
+      flex: 1;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      padding: var(--mz-space-xs) var(--mz-space-sm);
+      font-family: inherit;
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+      background: var(--mz-color-surface, #fff);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .data-table__search-input:focus {
+      border-color: var(--mz-color-primary);
+    }
+
+    .data-table__search-input::placeholder {
+      color: var(--mz-color-text-disabled);
+    }
+
+    .data-table__selection-count {
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-primary);
+      font-weight: var(--mz-font-weight-medium, 500);
+      white-space: nowrap;
+    }
+
+    .data-table__wrapper {
+      overflow-x: auto;
+    }
+
+    .data-table__table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .data-table__th {
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      text-align: left;
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-semibold, 600);
+      color: var(--mz-color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--mz-color-border);
+      white-space: nowrap;
+      user-select: none;
+    }
+
+    .data-table__th--sortable {
+      cursor: pointer;
+      transition: color 0.15s;
+    }
+
+    .data-table__th--sortable:hover {
+      color: var(--mz-color-text);
+    }
+
+    .data-table__th--sorted {
+      color: var(--mz-color-primary);
+    }
+
+    .data-table__th--align-center {
+      text-align: center;
+    }
+
+    .data-table__th--align-right {
+      text-align: right;
+    }
+
+    .data-table__sort-icon {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-left: 0.25rem;
+    }
+
+    .data-table__th--checkbox,
+    .data-table__td--checkbox {
+      width: 2.5rem;
+      text-align: center;
+      padding: var(--mz-space-xs) var(--mz-space-sm);
+    }
+
+    .data-table__td {
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      font-size: var(--mz-font-size-sm);
+      color: var(--mz-color-text);
+      border-bottom: 1px solid var(--mz-color-border);
+    }
+
+    .data-table__td--align-center {
+      text-align: center;
+    }
+
+    .data-table__td--align-right {
+      text-align: right;
+    }
+
+    /* Striped */
+    .data-table__table--striped .data-table__tr:nth-child(even) {
+      background: var(--mz-color-surface-raised);
+    }
+
+    /* Bordered */
+    .data-table__table--bordered .data-table__th,
+    .data-table__table--bordered .data-table__td {
+      border: 1px solid var(--mz-color-border);
+    }
+
+    /* Hoverable */
+    .data-table__table--hoverable .data-table__tr:hover {
+      background: var(--mz-color-surface-raised);
+    }
+
+    /* Selected row */
+    .data-table__tr--selected {
+      background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface)) !important;
+    }
+
+    /* Empty */
+    .data-table__empty {
+      text-align: center;
+      padding: var(--mz-space-xl) var(--mz-space-md);
+      color: var(--mz-color-text-secondary);
+      font-size: var(--mz-font-size-sm);
+    }
+
+    /* Pagination */
+    .data-table__pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      border-top: 1px solid var(--mz-color-border);
+    }
+
+    .data-table__page-info {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-text-secondary);
+    }
+
+    .data-table__page-controls {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-sm);
+    }
+
+    .data-table__page-number {
+      font-size: var(--mz-font-size-xs);
+      color: var(--mz-color-text);
+    }
+
+    .data-table__page-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface, #fff);
+      color: var(--mz-color-text);
+      cursor: pointer;
+      padding: 0;
+      transition: background 0.15s, border-color 0.15s;
+    }
+
+    .data-table__page-btn:hover:not(:disabled) {
+      background: var(--mz-color-surface-raised);
+      border-color: var(--mz-color-text-disabled);
+    }
+
+    .data-table__page-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    /* Checkbox styling */
+    input[type='checkbox'] {
+      accent-color: var(--mz-color-primary);
+      width: 1rem;
+      height: 1rem;
+      cursor: pointer;
+    }
+  `
+];
+export {
+  data_table_styles_default as default
+};
+//# sourceMappingURL=data-table.styles.js.map

package/dist/components/data-table/data-table.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/data-table/data-table.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: block;\n      font-family: var(--mz-font-sans);\n    }\n\n    .data-table {\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg, 0.75rem);\n      overflow: hidden;\n      background: var(--mz-color-surface, #fff);\n    }\n\n    .data-table__toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      border-bottom: 1px solid var(--mz-color-border);\n      gap: var(--mz-space-md);\n    }\n\n    .data-table__search {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-xs);\n      flex: 1;\n      max-width: 20rem;\n    }\n\n    .data-table__search-icon {\n      color: var(--mz-color-text-disabled);\n      flex-shrink: 0;\n    }\n\n    .data-table__search-input {\n      flex: 1;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      padding: var(--mz-space-xs) var(--mz-space-sm);\n      font-family: inherit;\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n      background: var(--mz-color-surface, #fff);\n      outline: none;\n      transition: border-color 0.15s;\n    }\n\n    .data-table__search-input:focus {\n      border-color: var(--mz-color-primary);\n    }\n\n    .data-table__search-input::placeholder {\n      color: var(--mz-color-text-disabled);\n    }\n\n    .data-table__selection-count {\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-primary);\n      font-weight: var(--mz-font-weight-medium, 500);\n      white-space: nowrap;\n    }\n\n    .data-table__wrapper {\n      overflow-x: auto;\n    }\n\n    .data-table__table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .data-table__th {\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      text-align: left;\n      font-size: var(--mz-font-size-xs);\n      font-weight: var(--mz-font-weight-semibold, 600);\n      color: var(--mz-color-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      border-bottom: 1px solid var(--mz-color-border);\n      white-space: nowrap;\n      user-select: none;\n    }\n\n    .data-table__th--sortable {\n      cursor: pointer;\n      transition: color 0.15s;\n    }\n\n    .data-table__th--sortable:hover {\n      color: var(--mz-color-text);\n    }\n\n    .data-table__th--sorted {\n      color: var(--mz-color-primary);\n    }\n\n    .data-table__th--align-center {\n      text-align: center;\n    }\n\n    .data-table__th--align-right {\n      text-align: right;\n    }\n\n    .data-table__sort-icon {\n      display: inline-flex;\n      vertical-align: middle;\n      margin-left: 0.25rem;\n    }\n\n    .data-table__th--checkbox,\n    .data-table__td--checkbox {\n      width: 2.5rem;\n      text-align: center;\n      padding: var(--mz-space-xs) var(--mz-space-sm);\n    }\n\n    .data-table__td {\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      font-size: var(--mz-font-size-sm);\n      color: var(--mz-color-text);\n      border-bottom: 1px solid var(--mz-color-border);\n    }\n\n    .data-table__td--align-center {\n      text-align: center;\n    }\n\n    .data-table__td--align-right {\n      text-align: right;\n    }\n\n    /* Striped */\n    .data-table__table--striped .data-table__tr:nth-child(even) {\n      background: var(--mz-color-surface-raised);\n    }\n\n    /* Bordered */\n    .data-table__table--bordered .data-table__th,\n    .data-table__table--bordered .data-table__td {\n      border: 1px solid var(--mz-color-border);\n    }\n\n    /* Hoverable */\n    .data-table__table--hoverable .data-table__tr:hover {\n      background: var(--mz-color-surface-raised);\n    }\n\n    /* Selected row */\n    .data-table__tr--selected {\n      background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface)) !important;\n    }\n\n    /* Empty */\n    .data-table__empty {\n      text-align: center;\n      padding: var(--mz-space-xl) var(--mz-space-md);\n      color: var(--mz-color-text-secondary);\n      font-size: var(--mz-font-size-sm);\n    }\n\n    /* Pagination */\n    .data-table__pagination {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--mz-space-sm) var(--mz-space-md);\n      border-top: 1px solid var(--mz-color-border);\n    }\n\n    .data-table__page-info {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-text-secondary);\n    }\n\n    .data-table__page-controls {\n      display: flex;\n      align-items: center;\n      gap: var(--mz-space-sm);\n    }\n\n    .data-table__page-number {\n      font-size: var(--mz-font-size-xs);\n      color: var(--mz-color-text);\n    }\n\n    .data-table__page-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 1.75rem;\n      height: 1.75rem;\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      color: var(--mz-color-text);\n      cursor: pointer;\n      padding: 0;\n      transition: background 0.15s, border-color 0.15s;\n    }\n\n    .data-table__page-btn:hover:not(:disabled) {\n      background: var(--mz-color-surface-raised);\n      border-color: var(--mz-color-text-disabled);\n    }\n\n    .data-table__page-btn:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n\n    /* Checkbox styling */\n    input[type='checkbox'] {\n      accent-color: var(--mz-color-primary);\n      width: 1rem;\n      height: 1rem;\n      cursor: pointer;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,4BAAQ;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;AA6NF;",
+  "names": []
+}

package/dist/components/date-picker/date-picker.component.d.ts

@@ -0,0 +1,67 @@
+import { type TemplateResult } from 'lit';
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A date picker with text input and calendar dropdown.
+ *
+ * @tag mz-date-picker
+ *
+ * @event mz-change - Emitted when a date is selected.
+ * @event mz-clear - Emitted when the value is cleared.
+ *
+ * @csspart base - The component wrapper.
+ * @csspart control - The input control wrapper.
+ * @csspart input - The text input element.
+ * @csspart calendar - The calendar dropdown panel.
+ */
+export declare class MzDatePicker extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The selected date in YYYY-MM-DD format. */
+    value: string;
+    /** Input placeholder text. */
+    placeholder: string;
+    /** Minimum selectable date in YYYY-MM-DD format. */
+    min: string;
+    /** Maximum selectable date in YYYY-MM-DD format. */
+    max: string;
+    /** Disables the date picker. */
+    disabled: boolean;
+    /** Makes the input readonly. */
+    readonly: boolean;
+    /** The date picker's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Form name for the date picker. */
+    name: string;
+    /** First day of the week (0 = Sunday, 1 = Monday, etc.). */
+    firstDayOfWeek: number;
+    /** Locale for date formatting. Uses browser default when empty. */
+    locale: string;
+    private isOpen;
+    private viewDate;
+    private blurTimeout;
+    private outsideClickHandler;
+    constructor();
+    willUpdate(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    /** Opens the calendar dropdown. */
+    show(): void;
+    /** Closes the calendar dropdown. */
+    hide(): void;
+    /** Clears the selected value. */
+    clear(): void;
+    private get formattedValue();
+    private handleControlClick;
+    private handleBlur;
+    private handleKeydown;
+    private handleCalendarClick;
+    private prevMonth;
+    private nextMonth;
+    private formatDateString;
+    private isToday;
+    private isDateDisabled;
+    private selectDate;
+    private renderCalendarHeader;
+    private renderWeekDays;
+    private renderDays;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=date-picker.component.d.ts.map

package/dist/components/date-picker/date-picker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,cAAc;IAC9C,MAAM,CAAC,MAAM,4BAAU;IAEvB,8CAA8C;IAClC,KAAK,SAAM;IAEvB,8BAA8B;IAClB,WAAW,SAAmB;IAE1C,oDAAoD;IACxC,GAAG,SAAM;IAErB,oDAAoD;IACxC,GAAG,SAAM;IAErB,gCAAgC;IACY,QAAQ,UAAS;IAE7D,gCAAgC;IACY,QAAQ,UAAS;IAE7D,8BAA8B;IACD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3E,qCAAqC;IACzB,IAAI,SAAM;IAEtB,4DAA4D;IACA,cAAc,SAAK;IAE/E,mEAAmE;IACvD,MAAM,SAAM;IAEf,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAO;IAEhC,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,mBAAmB,CAIzB;;IAQF,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS/C,oBAAoB,IAAI,IAAI;IAQ5B,mCAAmC;IACnC,IAAI,IAAI,IAAI;IAMZ,oCAAoC;IACpC,IAAI,IAAI,IAAI;IAKZ,iCAAiC;IACjC,KAAK,IAAI,IAAI;IAKb,OAAO,KAAK,cAAc,GAMzB;IAED,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,UAAU;IAgDlB,MAAM;CAqCP"}

package/dist/components/date-picker/date-picker.component.js

@@ -0,0 +1,282 @@
+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, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./date-picker.styles.js";
+class MzDatePicker extends ManzanoElement {
+  constructor() {
+    super();
+    this.value = "";
+    this.placeholder = "Select a date";
+    this.min = "";
+    this.max = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.size = "medium";
+    this.name = "";
+    this.firstDayOfWeek = 0;
+    this.locale = "";
+    this.isOpen = false;
+    this.blurTimeout = null;
+    this.outsideClickHandler = (e) => {
+      if (!this.contains(e.target)) {
+        this.hide();
+      }
+    };
+    const now = /* @__PURE__ */ new Date();
+    this.viewDate = new Date(now.getFullYear(), now.getMonth(), 1);
+  }
+  willUpdate(changed) {
+    if (changed.has("value") && this.value) {
+      const [y, m] = this.value.split("-").map(Number);
+      if (y && m) {
+        this.viewDate = new Date(y, m - 1, 1);
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.outsideClickHandler, true);
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+    }
+  }
+  /** Opens the calendar dropdown. */
+  show() {
+    if (this.disabled || this.readonly) return;
+    this.isOpen = true;
+    document.addEventListener("click", this.outsideClickHandler, true);
+  }
+  /** Closes the calendar dropdown. */
+  hide() {
+    this.isOpen = false;
+    document.removeEventListener("click", this.outsideClickHandler, true);
+  }
+  /** Clears the selected value. */
+  clear() {
+    this.value = "";
+    this.emit("mz-clear");
+  }
+  get formattedValue() {
+    if (!this.value) return "";
+    const [y, m, d] = this.value.split("-").map(Number);
+    const date = new Date(y, m - 1, d);
+    const locale = this.locale || void 0;
+    return new Intl.DateTimeFormat(locale, { year: "numeric", month: "short", day: "numeric" }).format(date);
+  }
+  handleControlClick(e) {
+    e.stopPropagation();
+    if (this.disabled || this.readonly) return;
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleBlur() {
+    this.blurTimeout = setTimeout(() => {
+      if (this.isOpen) {
+        this.hide();
+      }
+    }, 150);
+  }
+  handleKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.isOpen) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+  }
+  handleCalendarClick(e) {
+    e.stopPropagation();
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+      this.blurTimeout = null;
+    }
+  }
+  prevMonth() {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+  }
+  nextMonth() {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+  }
+  formatDateString(year, month, day) {
+    return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+  }
+  isToday(year, month, day) {
+    const now = /* @__PURE__ */ new Date();
+    return now.getFullYear() === year && now.getMonth() === month && now.getDate() === day;
+  }
+  isDateDisabled(dateStr) {
+    if (this.min && dateStr < this.min) return true;
+    if (this.max && dateStr > this.max) return true;
+    return false;
+  }
+  selectDate(dateStr) {
+    this.value = dateStr;
+    this.isOpen = false;
+    document.removeEventListener("click", this.outsideClickHandler, true);
+    this.emit("mz-change");
+  }
+  renderCalendarHeader() {
+    return html`
+      <div class="date-picker__header">
+        <button type="button" class="date-picker__nav" @click=${this.prevMonth} aria-label="Previous month">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <span class="date-picker__month-year">
+          ${this.viewDate.toLocaleDateString(this.locale || void 0, { month: "long", year: "numeric" })}
+        </span>
+        <button type="button" class="date-picker__nav" @click=${this.nextMonth} aria-label="Next month">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+      </div>
+    `;
+  }
+  renderWeekDays() {
+    const days = [];
+    const locale = this.locale || void 0;
+    for (let i = 0; i < 7; i++) {
+      const dayIndex = (this.firstDayOfWeek + i) % 7;
+      const d = new Date(2024, 0, 7 + dayIndex);
+      days.push(new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d));
+    }
+    return html`
+      <div class="date-picker__weekdays">
+        ${days.map((d) => html`<div class="date-picker__weekday">${d}</div>`)}
+      </div>
+    `;
+  }
+  renderDays() {
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+    const firstOfMonth = new Date(year, month, 1);
+    const lastOfMonth = new Date(year, month + 1, 0);
+    let startDay = firstOfMonth.getDay() - this.firstDayOfWeek;
+    if (startDay < 0) startDay += 7;
+    const daysInMonth = lastOfMonth.getDate();
+    const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
+    const cells = [];
+    for (let i = 0; i < totalCells; i++) {
+      const dayNum = i - startDay + 1;
+      const isCurrentMonth = dayNum >= 1 && dayNum <= daysInMonth;
+      if (!isCurrentMonth) {
+        cells.push(html`<div class="date-picker__day date-picker__day--outside"></div>`);
+        continue;
+      }
+      const dateStr = this.formatDateString(year, month, dayNum);
+      const isSelected = dateStr === this.value;
+      const isToday = this.isToday(year, month, dayNum);
+      const isDisabledDate = this.isDateDisabled(dateStr);
+      cells.push(html`
+        <button type="button"
+          class=${classMap({
+        "date-picker__day": true,
+        "date-picker__day--selected": isSelected,
+        "date-picker__day--today": isToday,
+        "date-picker__day--disabled": isDisabledDate
+      })}
+          ?disabled=${isDisabledDate}
+          @click=${() => this.selectDate(dateStr)}>
+          ${dayNum}
+        </button>
+      `);
+    }
+    return html`<div class="date-picker__days">${cells}</div>`;
+  }
+  render() {
+    return html`
+      <div part="base" class=${classMap({
+      "date-picker": true,
+      "date-picker--open": this.isOpen,
+      "date-picker--disabled": this.disabled
+    })}>
+        <div part="control" class="date-picker__control" @click=${this.handleControlClick}>
+          <input part="input" class="date-picker__input" type="text"
+            .value=${this.formattedValue}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${true}
+            @focus=${() => {
+    }}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+          />
+          <div class="date-picker__icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+              <line x1="16" y1="2" x2="16" y2="6"/>
+              <line x1="8" y1="2" x2="8" y2="6"/>
+              <line x1="3" y1="10" x2="21" y2="10"/>
+            </svg>
+          </div>
+        </div>
+
+        ${this.isOpen ? html`
+          <div part="calendar" class="date-picker__calendar" @click=${this.handleCalendarClick}>
+            ${this.renderCalendarHeader()}
+            ${this.renderWeekDays()}
+            ${this.renderDays()}
+          </div>
+        ` : nothing}
+      </div>
+    `;
+  }
+}
+MzDatePicker.styles = styles;
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDatePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDatePicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzDatePicker.prototype, "size", 2);
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "name", 2);
+__decorateClass([
+  property({ type: Number, attribute: "first-day-of-week" })
+], MzDatePicker.prototype, "firstDayOfWeek", 2);
+__decorateClass([
+  property()
+], MzDatePicker.prototype, "locale", 2);
+__decorateClass([
+  state()
+], MzDatePicker.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], MzDatePicker.prototype, "viewDate", 2);
+export {
+  MzDatePicker
+};
+//# sourceMappingURL=date-picker.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/date-picker/date-picker.component.ts"],
+  "sourcesContent": ["import { html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './date-picker.styles.js';\n\n/**\n * @summary A date picker with text input and calendar dropdown.\n *\n * @tag mz-date-picker\n *\n * @event mz-change - Emitted when a date is selected.\n * @event mz-clear - Emitted when the value is cleared.\n *\n * @csspart base - The component wrapper.\n * @csspart control - The input control wrapper.\n * @csspart input - The text input element.\n * @csspart calendar - The calendar dropdown panel.\n */\nexport class MzDatePicker extends ManzanoElement {\n  static styles = styles;\n\n  /** The selected date in YYYY-MM-DD format. */\n  @property() value = '';\n\n  /** Input placeholder text. */\n  @property() placeholder = 'Select a date';\n\n  /** Minimum selectable date in YYYY-MM-DD format. */\n  @property() min = '';\n\n  /** Maximum selectable date in YYYY-MM-DD format. */\n  @property() max = '';\n\n  /** Disables the date picker. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** The date picker's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Form name for the date picker. */\n  @property() name = '';\n\n  /** First day of the week (0 = Sunday, 1 = Monday, etc.). */\n  @property({ type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek = 0;\n\n  /** Locale for date formatting. Uses browser default when empty. */\n  @property() locale = '';\n\n  @state() private isOpen = false;\n  @state() private viewDate: Date;\n\n  private blurTimeout: ReturnType<typeof setTimeout> | null = null;\n  private outsideClickHandler = (e: MouseEvent) => {\n    if (!this.contains(e.target as Node)) {\n      this.hide();\n    }\n  };\n\n  constructor() {\n    super();\n    const now = new Date();\n    this.viewDate = new Date(now.getFullYear(), now.getMonth(), 1);\n  }\n\n  willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('value') && this.value) {\n      const [y, m] = this.value.split('-').map(Number);\n      if (y && m) {\n        this.viewDate = new Date(y, m - 1, 1);\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outsideClickHandler, true);\n    if (this.blurTimeout) {\n      clearTimeout(this.blurTimeout);\n    }\n  }\n\n  /** Opens the calendar dropdown. */\n  show(): void {\n    if (this.disabled || this.readonly) return;\n    this.isOpen = true;\n    document.addEventListener('click', this.outsideClickHandler, true);\n  }\n\n  /** Closes the calendar dropdown. */\n  hide(): void {\n    this.isOpen = false;\n    document.removeEventListener('click', this.outsideClickHandler, true);\n  }\n\n  /** Clears the selected value. */\n  clear(): void {\n    this.value = '';\n    this.emit('mz-clear');\n  }\n\n  private get formattedValue(): string {\n    if (!this.value) return '';\n    const [y, m, d] = this.value.split('-').map(Number);\n    const date = new Date(y, m - 1, d);\n    const locale = this.locale || undefined;\n    return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(date);\n  }\n\n  private handleControlClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this.disabled || this.readonly) return;\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private handleBlur(): void {\n    this.blurTimeout = setTimeout(() => {\n      if (this.isOpen) {\n        this.hide();\n      }\n    }, 150);\n  }\n\n  private handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.hide();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.isOpen) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  }\n\n  private handleCalendarClick(e: MouseEvent): void {\n    // Prevent calendar clicks from bubbling to document (outside click handler)\n    e.stopPropagation();\n    // Also prevent the blur timeout from closing\n    if (this.blurTimeout) {\n      clearTimeout(this.blurTimeout);\n      this.blurTimeout = null;\n    }\n  }\n\n  private prevMonth(): void {\n    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);\n  }\n\n  private nextMonth(): void {\n    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);\n  }\n\n  private formatDateString(year: number, month: number, day: number): string {\n    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n  }\n\n  private isToday(year: number, month: number, day: number): boolean {\n    const now = new Date();\n    return now.getFullYear() === year && now.getMonth() === month && now.getDate() === day;\n  }\n\n  private isDateDisabled(dateStr: string): boolean {\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  private selectDate(dateStr: string): void {\n    this.value = dateStr;\n    this.isOpen = false;\n    document.removeEventListener('click', this.outsideClickHandler, true);\n    this.emit('mz-change');\n  }\n\n  private renderCalendarHeader(): TemplateResult {\n    return html`\n      <div class=\"date-picker__header\">\n        <button type=\"button\" class=\"date-picker__nav\" @click=${this.prevMonth} aria-label=\"Previous month\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"/></svg>\n        </button>\n        <span class=\"date-picker__month-year\">\n          ${this.viewDate.toLocaleDateString(this.locale || undefined, { month: 'long', year: 'numeric' })}\n        </span>\n        <button type=\"button\" class=\"date-picker__nav\" @click=${this.nextMonth} aria-label=\"Next month\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"/></svg>\n        </button>\n      </div>\n    `;\n  }\n\n  private renderWeekDays(): TemplateResult {\n    const days: string[] = [];\n    const locale = this.locale || undefined;\n    for (let i = 0; i < 7; i++) {\n      const dayIndex = (this.firstDayOfWeek + i) % 7;\n      // Jan 7 2024 is a Sunday (dayIndex 0)\n      const d = new Date(2024, 0, 7 + dayIndex);\n      days.push(new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d));\n    }\n    return html`\n      <div class=\"date-picker__weekdays\">\n        ${days.map(d => html`<div class=\"date-picker__weekday\">${d}</div>`)}\n      </div>\n    `;\n  }\n\n  private renderDays(): TemplateResult {\n    const year = this.viewDate.getFullYear();\n    const month = this.viewDate.getMonth();\n\n    const firstOfMonth = new Date(year, month, 1);\n    const lastOfMonth = new Date(year, month + 1, 0);\n\n    // What day of week does the 1st fall on?\n    let startDay = firstOfMonth.getDay() - this.firstDayOfWeek;\n    if (startDay < 0) startDay += 7;\n\n    const daysInMonth = lastOfMonth.getDate();\n    const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;\n\n    const cells: TemplateResult[] = [];\n\n    for (let i = 0; i < totalCells; i++) {\n      const dayNum = i - startDay + 1;\n      const isCurrentMonth = dayNum >= 1 && dayNum <= daysInMonth;\n\n      if (!isCurrentMonth) {\n        cells.push(html`<div class=\"date-picker__day date-picker__day--outside\"></div>`);\n        continue;\n      }\n\n      const dateStr = this.formatDateString(year, month, dayNum);\n      const isSelected = dateStr === this.value;\n      const isToday = this.isToday(year, month, dayNum);\n      const isDisabledDate = this.isDateDisabled(dateStr);\n\n      cells.push(html`\n        <button type=\"button\"\n          class=${classMap({\n            'date-picker__day': true,\n            'date-picker__day--selected': isSelected,\n            'date-picker__day--today': isToday,\n            'date-picker__day--disabled': isDisabledDate\n          })}\n          ?disabled=${isDisabledDate}\n          @click=${() => this.selectDate(dateStr)}>\n          ${dayNum}\n        </button>\n      `);\n    }\n\n    return html`<div class=\"date-picker__days\">${cells}</div>`;\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=${classMap({\n        'date-picker': true,\n        'date-picker--open': this.isOpen,\n        'date-picker--disabled': this.disabled\n      })}>\n        <div part=\"control\" class=\"date-picker__control\" @click=${this.handleControlClick}>\n          <input part=\"input\" class=\"date-picker__input\" type=\"text\"\n            .value=${this.formattedValue}\n            placeholder=${this.placeholder}\n            ?disabled=${this.disabled}\n            ?readonly=${true}\n            @focus=${() => {}}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          <div class=\"date-picker__icon\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n              <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n              <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n              <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n            </svg>\n          </div>\n        </div>\n\n        ${this.isOpen ? html`\n          <div part=\"calendar\" class=\"date-picker__calendar\" @click=${this.handleCalendarClick}>\n            ${this.renderCalendarHeader()}\n            ${this.renderWeekDays()}\n            ${this.renderDays()}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import { MzDatePicker } from './date-picker.component.js';
+export * from './date-picker.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-date-picker': MzDatePicker;
+    }
+}
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,cAAc,4BAA4B,CAAC;AAI3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,4 @@
+import { MzDatePicker } from "./date-picker.component.js";
+export * from "./date-picker.component.js";
+MzDatePicker.define("mz-date-picker");
+//# sourceMappingURL=date-picker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/date-picker/date-picker.ts"],
+  "sourcesContent": ["import { MzDatePicker } from './date-picker.component.js';\n\nexport * from './date-picker.component.js';\n\nMzDatePicker.define('mz-date-picker');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-date-picker': MzDatePicker;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAE7B,cAAc;AAEd,aAAa,OAAO,gBAAgB;",
+  "names": []
+}

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

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