@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/time-picker.js

@@ -0,0 +1,457 @@
+import { css as u, LitElement as b, html as l } from "lit";
+import { property as n, state as d, customElement as h } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+const v = u`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .time-picker {
+    position: relative;
+    font-family: var(--bp-font-family);
+  }
+
+  .label {
+    display: block;
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+    margin-bottom: var(--bp-spacing-xs);
+    cursor: pointer;
+  }
+
+  .label-required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .input {
+    width: 100%;
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    padding-right: var(--bp-spacing-2xl);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    font-size: var(--bp-font-size-base);
+    font-family: var(--bp-font-family);
+    color: var(--bp-color-text);
+    background-color: var(--bp-color-surface);
+    cursor: pointer;
+    transition: border-color var(--bp-transition-fast);
+  }
+
+  .input::placeholder {
+    color: var(--bp-color-text-muted);
+  }
+
+  .icon {
+    position: absolute;
+    right: var(--bp-spacing-sm);
+    pointer-events: none;
+    font-size: var(--bp-font-size-lg);
+    color: var(--bp-color-text-muted);
+  }
+
+  .clear-button {
+    position: absolute;
+    right: var(--bp-spacing-xl);
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    font-size: var(--bp-font-size-xl);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    padding: 0;
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      color var(--bp-transition-fast),
+      background-color var(--bp-transition-fast);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 0;
+    right: 0;
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);
+    border-radius: var(--bp-border-radius-sm);
+    box-shadow: var(--bp-shadow-md);
+    max-height: 320px;
+    overflow-y: auto;
+    z-index: var(--bp-z-dropdown);
+    animation: slideDown var(--bp-transition-fast) ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .time-option {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  /* Variants */
+  .time-option--selected {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  /* Sizes */
+  .time-picker--sm .input {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    padding-right: var(--bp-spacing-xl);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .time-picker--sm .icon {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .time-picker--sm .clear-button {
+    right: var(--bp-spacing-lg);
+  }
+
+  .time-picker--lg .input {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    padding-right: var(--bp-spacing-24);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .time-picker--lg .icon {
+    font-size: var(--bp-font-size-xl);
+  }
+
+  .time-picker--lg .clear-button {
+    right: var(--bp-spacing-2xl);
+  }
+
+  /* States */
+  .input:hover:not(:disabled) {
+    border-color: var(--bp-color-primary);
+  }
+
+  .input[aria-expanded='true'] {
+    border-color: var(--bp-color-primary);
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .clear-button:hover {
+    color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .time-option:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .time-option--selected:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 12%,
+      transparent
+    );
+  }
+`;
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (t, r, e, i) => {
+  for (var o = i > 1 ? void 0 : i ? g(r, e) : r, p = t.length - 1, c; p >= 0; p--)
+    (c = t[p]) && (o = (i ? c(r, e, o) : c(o)) || o);
+  return i && o && f(r, e, o), o;
+};
+let s = class extends b {
+  constructor() {
+    super(), this.isOpen = !1, this.focusedHour = null, this.focusedMinute = null, this.handleDocumentClick = (t) => {
+      this.contains(t.target) || (this.isOpen = !1);
+    }, this.toggleDropdown = () => {
+      this.disabled || (this.isOpen = !this.isOpen, this.isOpen ? (globalThis.setTimeout(() => {
+        document.addEventListener("click", this.handleDocumentClick);
+      }, 0), this.updateComplete.then(() => {
+        const t = this.shadowRoot?.querySelector(
+          ".time-option--selected"
+        );
+        t && t.scrollIntoView({ block: "nearest" });
+      })) : document.removeEventListener("click", this.handleDocumentClick));
+    }, this.value = "", this.name = "", this.label = "", this.placeholder = "Select time", this.disabled = !1, this.required = !1, this.size = "md", this.format = "12", this.step = 15;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick);
+  }
+  parseTime(t) {
+    if (!t) return null;
+    const r = t.match(/^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i);
+    if (!r) return null;
+    let e = parseInt(r[1], 10);
+    const i = parseInt(r[2], 10), o = r[3]?.toUpperCase();
+    return this.format === "12" && o && (o === "PM" && e !== 12 && (e += 12), o === "AM" && e === 12 && (e = 0)), e < 0 || e > 23 || i < 0 || i > 59 ? null : { hours: e, minutes: i };
+  }
+  formatTime(t, r) {
+    if (this.format === "24")
+      return `${t.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+    const e = t >= 12 ? "PM" : "AM";
+    return `${t === 0 ? 12 : t > 12 ? t - 12 : t}:${r.toString().padStart(2, "0")} ${e}`;
+  }
+  getDisplayValue() {
+    if (!this.value) return "";
+    const t = this.parseTime(this.value);
+    return t ? this.formatTime(t.hours, t.minutes) : this.value;
+  }
+  generateTimeOptions() {
+    const t = [], r = this.format === "24" ? 23 : 11;
+    for (let e = 0; e <= r; e++)
+      for (let i = 0; i < 60; i += this.step) {
+        const o = (this.format === "24", e);
+        t.push({
+          hours: o,
+          minutes: i,
+          display: this.formatTime(o, i)
+        });
+      }
+    if (this.format === "12")
+      for (let e = 0; e <= 11; e++)
+        for (let i = 0; i < 60; i += this.step) {
+          const o = e + 12;
+          t.push({
+            hours: o,
+            minutes: i,
+            display: this.formatTime(o, i)
+          });
+        }
+    return t;
+  }
+  handleTimeSelect(t, r) {
+    const e = this.formatTime(t, r), i = this.value;
+    this.value = e, this.isOpen = !1, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { value: e, hours: t, minutes: r, previousValue: i },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleClear(t) {
+    t.stopPropagation();
+    const r = this.value;
+    this.value = "", this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: {
+          value: "",
+          hours: null,
+          minutes: null,
+          previousValue: r
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(t) {
+    const r = t;
+    if (!this.isOpen) {
+      (r.key === "ArrowDown" || r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.isOpen = !0);
+      return;
+    }
+    switch (r.key) {
+      case "Escape":
+        r.preventDefault(), this.isOpen = !1;
+        break;
+      case "ArrowDown":
+      case "ArrowUp":
+        r.preventDefault();
+        break;
+      case "Enter":
+      case " ":
+        r.preventDefault(), this.focusedHour !== null && this.focusedMinute !== null && this.handleTimeSelect(this.focusedHour, this.focusedMinute);
+        break;
+    }
+  }
+  isSelected(t, r) {
+    const e = this.parseTime(this.value);
+    return e ? e.hours === t && e.minutes === r : !1;
+  }
+  render() {
+    const t = this.getDisplayValue(), r = this.generateTimeOptions();
+    return l`
+      <div class="time-picker time-picker--${this.size}">
+        ${this.label ? l`
+              <label class="label" part="label" @click=${this.toggleDropdown}>
+                ${this.label}
+                ${this.required ? l`<span class="label-required">*</span>` : ""}
+              </label>
+            ` : ""}
+        <div
+          class="input-wrapper"
+          part="input-wrapper"
+          @keydown=${this.handleKeyDown}
+        >
+          <input
+            type="text"
+            class="input"
+            part="input"
+            .value=${t}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${this.name}
+            readonly
+            aria-haspopup="listbox"
+            aria-expanded=${this.isOpen}
+            aria-disabled=${this.disabled}
+            aria-label=${this.label || this.placeholder || "Time picker"}
+            @click=${this.toggleDropdown}
+          />
+          ${this.value && !this.disabled ? l`
+                <button
+                  type="button"
+                  class="clear-button"
+                  part="clear-button"
+                  @click=${this.handleClear}
+                  aria-label="Clear time"
+                  tabindex="-1"
+                >
+                  ✕
+                </button>
+              ` : ""}
+          <div class="icon" part="icon">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 4V8L10.5 10.5M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        ${this.isOpen ? l`
+              <div class="dropdown" part="dropdown" role="listbox">
+                ${r.map(
+      (e) => l`
+                    <div
+                      class=${m({
+        "time-option": !0,
+        "time-option--selected": this.isSelected(
+          e.hours,
+          e.minutes
+        )
+      })}
+                      part="time-option"
+                      role="option"
+                      aria-selected=${this.isSelected(
+        e.hours,
+        e.minutes
+      )}
+                      @click=${() => this.handleTimeSelect(e.hours, e.minutes)}
+                    >
+                      ${e.display}
+                    </div>
+                  `
+    )}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+s.styles = [v];
+a([
+  n({ type: String })
+], s.prototype, "value", 2);
+a([
+  n({ type: String })
+], s.prototype, "name", 2);
+a([
+  n({ type: String })
+], s.prototype, "label", 2);
+a([
+  n({ type: String })
+], s.prototype, "placeholder", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "disabled", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "required", 2);
+a([
+  n({ type: String })
+], s.prototype, "size", 2);
+a([
+  n({ type: String })
+], s.prototype, "format", 2);
+a([
+  n({ type: Number })
+], s.prototype, "step", 2);
+a([
+  d()
+], s.prototype, "isOpen", 2);
+a([
+  d()
+], s.prototype, "focusedHour", 2);
+a([
+  d()
+], s.prototype, "focusedMinute", 2);
+s = a([
+  h("bp-time-picker")
+], s);
+export {
+  s as BpTimePicker
+};
+//# sourceMappingURL=time-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sources":["../../source/components/time-picker/time-picker.style.ts","../../source/components/time-picker/time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const timePickerStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .time-picker {\n    position: relative;\n    font-family: var(--bp-font-family);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n    margin-bottom: var(--bp-spacing-xs);\n    cursor: pointer;\n  }\n\n  .label-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .input {\n    width: 100%;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    padding-right: var(--bp-spacing-2xl);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    font-size: var(--bp-font-size-base);\n    font-family: var(--bp-font-family);\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-surface);\n    cursor: pointer;\n    transition: border-color var(--bp-transition-fast);\n  }\n\n  .input::placeholder {\n    color: var(--bp-color-text-muted);\n  }\n\n  .icon {\n    position: absolute;\n    right: var(--bp-spacing-sm);\n    pointer-events: none;\n    font-size: var(--bp-font-size-lg);\n    color: var(--bp-color-text-muted);\n  }\n\n  .clear-button {\n    position: absolute;\n    right: var(--bp-spacing-xl);\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    font-size: var(--bp-font-size-xl);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    padding: 0;\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n  }\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-xs));\n    left: 0;\n    right: 0;\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);\n    border-radius: var(--bp-border-radius-sm);\n    box-shadow: var(--bp-shadow-md);\n    max-height: 320px;\n    overflow-y: auto;\n    z-index: var(--bp-z-dropdown);\n    animation: slideDown var(--bp-transition-fast) ease-out;\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .time-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    min-height: 44px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  /* Variants */\n  .time-option--selected {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  /* Sizes */\n  .time-picker--sm .input {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    padding-right: var(--bp-spacing-xl);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .time-picker--sm .icon {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .time-picker--sm .clear-button {\n    right: var(--bp-spacing-lg);\n  }\n\n  .time-picker--lg .input {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    padding-right: var(--bp-spacing-24);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .time-picker--lg .icon {\n    font-size: var(--bp-font-size-xl);\n  }\n\n  .time-picker--lg .clear-button {\n    right: var(--bp-spacing-2xl);\n  }\n\n  /* States */\n  .input:hover:not(:disabled) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .input[aria-expanded='true'] {\n    border-color: var(--bp-color-primary);\n  }\n\n  .input:focus {\n    outline: none;\n    border-color: var(--bp-color-focus);\n    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n  }\n\n  .input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .clear-button:hover {\n    color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .time-option:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .time-option--selected:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 12%,\n      transparent\n    );\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { timePickerStyles } from './time-picker.style.js';\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg';\nexport type TimeFormat = '12' | '24';\n\n/**\n * A time picker component with dropdown time selection.\n *\n * @element bp-time-picker\n *\n * @fires bp-change - Fired when the selected time changes\n *\n * @csspart input-wrapper - The input wrapper container\n * @csspart input - The text input field\n * @csspart icon - The clock icon indicator\n * @csspart clear-button - The clear button\n * @csspart dropdown - The time options dropdown\n * @csspart time-option - Individual time option in dropdown\n */\n@customElement('bp-time-picker')\nexport class BpTimePicker extends LitElement {\n  @property({ type: String }) declare value: string;\n  @property({ type: String }) declare name: string;\n  @property({ type: String }) declare label: string;\n  @property({ type: String }) declare placeholder: string;\n  @property({ type: Boolean }) declare disabled: boolean;\n  @property({ type: Boolean }) declare required: boolean;\n  @property({ type: String }) declare size: TimePickerSize;\n  @property({ type: String }) declare format: TimeFormat;\n  @property({ type: Number }) declare step: number;\n\n  @state() private isOpen = false;\n  @state() private focusedHour: number | null = null;\n  @state() private focusedMinute: number | null = null;\n\n  static styles = [timePickerStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.name = '';\n    this.label = '';\n    this.placeholder = 'Select time';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n    this.format = '12';\n    this.step = 15; // 15-minute intervals by default\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleDocumentClick = (e: MouseEvent) => {\n    if (!this.contains(e.target as globalThis.Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      // Add document click handler on next tick to avoid immediate close\n      globalThis.setTimeout(() => {\n        document.addEventListener('click', this.handleDocumentClick);\n      }, 0);\n      // Scroll to selected option\n      this.updateComplete.then(() => {\n        const selected = this.shadowRoot?.querySelector(\n          '.time-option--selected'\n        ) as HTMLElement;\n        if (selected) {\n          selected.scrollIntoView({ block: 'nearest' });\n        }\n      });\n    } else {\n      document.removeEventListener('click', this.handleDocumentClick);\n    }\n  };\n\n  private parseTime(\n    timeString: string\n  ): { hours: number; minutes: number } | null {\n    if (!timeString) return null;\n\n    const match = timeString.match(/^(\\d{1,2}):(\\d{2})(?:\\s*(AM|PM))?$/i);\n    if (!match) return null;\n\n    let hours = parseInt(match[1], 10);\n    const minutes = parseInt(match[2], 10);\n    const period = match[3]?.toUpperCase();\n\n    if (this.format === '12' && period) {\n      if (period === 'PM' && hours !== 12) hours += 12;\n      if (period === 'AM' && hours === 12) hours = 0;\n    }\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;\n\n    return { hours, minutes };\n  }\n\n  private formatTime(hours: number, minutes: number): string {\n    if (this.format === '24') {\n      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n    }\n\n    const period = hours >= 12 ? 'PM' : 'AM';\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;\n    return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;\n  }\n\n  private getDisplayValue(): string {\n    if (!this.value) return '';\n\n    const parsed = this.parseTime(this.value);\n    if (!parsed) return this.value;\n\n    return this.formatTime(parsed.hours, parsed.minutes);\n  }\n\n  private generateTimeOptions(): Array<{\n    hours: number;\n    minutes: number;\n    display: string;\n  }> {\n    const options: Array<{ hours: number; minutes: number; display: string }> =\n      [];\n    const maxHours = this.format === '24' ? 23 : 11;\n\n    for (let h = 0; h <= maxHours; h++) {\n      for (let m = 0; m < 60; m += this.step) {\n        const hours = this.format === '24' ? h : h;\n        options.push({\n          hours,\n          minutes: m,\n          display: this.formatTime(hours, m),\n        });\n      }\n    }\n\n    // For 12-hour format, add PM times\n    if (this.format === '12') {\n      for (let h = 0; h <= 11; h++) {\n        for (let m = 0; m < 60; m += this.step) {\n          const hours = h + 12;\n          options.push({\n            hours,\n            minutes: m,\n            display: this.formatTime(hours, m),\n          });\n        }\n      }\n    }\n\n    return options;\n  }\n\n  private handleTimeSelect(hours: number, minutes: number) {\n    const newValue = this.formatTime(hours, minutes);\n    const oldValue = this.value;\n\n    this.value = newValue;\n    this.isOpen = false;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { value: newValue, hours, minutes, previousValue: oldValue },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClear(e: MouseEvent) {\n    e.stopPropagation();\n    const oldValue = this.value;\n    this.value = '';\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: '',\n          hours: null,\n          minutes: null,\n          previousValue: oldValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeyDown(e: Event) {\n    const event = e as globalThis.KeyboardEvent;\n    if (!this.isOpen) {\n      if (\n        event.key === 'ArrowDown' ||\n        event.key === 'Enter' ||\n        event.key === ' '\n      ) {\n        event.preventDefault();\n        this.isOpen = true;\n      }\n      return;\n    }\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.isOpen = false;\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        // Navigate through time options\n        break;\n\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.focusedHour !== null && this.focusedMinute !== null) {\n          this.handleTimeSelect(this.focusedHour, this.focusedMinute);\n        }\n        break;\n    }\n  }\n\n  private isSelected(hours: number, minutes: number): boolean {\n    const parsed = this.parseTime(this.value);\n    if (!parsed) return false;\n    return parsed.hours === hours && parsed.minutes === minutes;\n  }\n\n  render() {\n    const displayValue = this.getDisplayValue();\n    const timeOptions = this.generateTimeOptions();\n\n    return html`\n      <div class=\"time-picker time-picker--${this.size}\">\n        ${this.label\n          ? html`\n              <label class=\"label\" part=\"label\" @click=${this.toggleDropdown}>\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"label-required\">*</span>`\n                  : ''}\n              </label>\n            `\n          : ''}\n        <div\n          class=\"input-wrapper\"\n          part=\"input-wrapper\"\n          @keydown=${this.handleKeyDown}\n        >\n          <input\n            type=\"text\"\n            class=\"input\"\n            part=\"input\"\n            .value=${displayValue}\n            placeholder=${this.placeholder}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${this.name}\n            readonly\n            aria-haspopup=\"listbox\"\n            aria-expanded=${this.isOpen}\n            aria-disabled=${this.disabled}\n            aria-label=${this.label || this.placeholder || 'Time picker'}\n            @click=${this.toggleDropdown}\n          />\n          ${this.value && !this.disabled\n            ? html`\n                <button\n                  type=\"button\"\n                  class=\"clear-button\"\n                  part=\"clear-button\"\n                  @click=${this.handleClear}\n                  aria-label=\"Clear time\"\n                  tabindex=\"-1\"\n                >\n                  ✕\n                </button>\n              `\n            : ''}\n          <div class=\"icon\" part=\"icon\">\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 4V8L10.5 10.5M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        ${this.isOpen\n          ? html`\n              <div class=\"dropdown\" part=\"dropdown\" role=\"listbox\">\n                ${timeOptions.map(\n                  (option) => html`\n                    <div\n                      class=${classMap({\n                        'time-option': true,\n                        'time-option--selected': this.isSelected(\n                          option.hours,\n                          option.minutes\n                        ),\n                      })}\n                      part=\"time-option\"\n                      role=\"option\"\n                      aria-selected=${this.isSelected(\n                        option.hours,\n                        option.minutes\n                      )}\n                      @click=${() =>\n                        this.handleTimeSelect(option.hours, option.minutes)}\n                    >\n                      ${option.display}\n                    </div>\n                  `\n                )}\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-time-picker': BpTimePicker;\n  }\n}\n"],"names":["timePickerStyles","css","BpTimePicker","LitElement","e","selected","timeString","match","hours","minutes","period","parsed","options","maxHours","h","m","newValue","oldValue","event","displayValue","timeOptions","html","option","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}