@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/collection/components/bh-date-picker/bh-date-picker.css

@@ -1,217 +1,10 @@
-/**
- * Bellhop Stencil Global Styles
- *
- * This file imports all design tokens and provides global CSS custom properties
- * that are available to all Stencil components.
- */
-
-/* ==========================================================================
-   FONT IMPORTS
-   ========================================================================== */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
-
-/* ==========================================================================
-   DESIGN TOKENS
-   ========================================================================== */
-
-:root {
-  /* -------------------------------------------------------------------------
-     COLORS - Primary
-     ------------------------------------------------------------------------- */
-  --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%);
-  --color-transparent: hsla(0, 0%, 100%, 0);
-
-  /* Neutral */
-  --color-neutral-25: hsl(240, 20%, 99%);
-  --color-neutral-50: hsl(240, 20%, 98%);
-  --color-neutral-100: hsl(240, 17%, 95%);
-  --color-neutral-200: hsl(227, 25%, 89%);
-  --color-neutral-300: hsl(224, 24%, 78%);
-  --color-neutral-400: hsl(226, 24%, 59%);
-  --color-neutral-500: hsl(226, 24%, 48%);
-  --color-neutral-600: hsl(226, 24%, 38%);
-  --color-neutral-700: hsl(226, 24%, 25%);
-  --color-neutral-800: hsl(233, 33%, 10%);
-  --color-neutral-900: hsl(231, 32%, 8%);
-  --color-neutral-950: hsl(231, 32%, 8%);
-
-  /* Brand */
-  --color-brand-25: hsl(220, 82%, 98%);
-  --color-brand-50: hsl(222, 87%, 97%);
-  --color-brand-100: hsl(221, 94%, 94%);
-  --color-brand-200: hsl(221, 92%, 86%);
-  --color-brand-300: hsl(224, 95%, 77%);
-  --color-brand-400: hsl(224, 94%, 72%);
-  --color-brand-500: hsl(230, 67%, 58%);
-  --color-brand-600: hsl(230, 69%, 48%);
-  --color-brand-700: hsl(230, 75%, 34%);
-  --color-brand-800: hsl(243, 86%, 44%);
-  --color-brand-900: hsl(237, 69%, 24%);
-  --color-brand-950: hsl(237, 61%, 20%);
-
-  /* Error */
-  --color-error-25: hsl(12, 100%, 99%);
-  --color-error-50: hsl(5, 86%, 97%);
-  --color-error-100: hsl(4, 93%, 94%);
-  --color-error-200: hsl(3, 96%, 89%);
-  --color-error-300: hsl(4, 96%, 80%);
-  --color-error-400: hsl(4, 92%, 69%);
-  --color-error-500: hsl(4, 86%, 58%);
-  --color-error-600: hsl(4, 74%, 49%);
-  --color-error-700: hsl(4, 76%, 40%);
-  --color-error-800: hsl(4, 72%, 33%);
-  --color-error-900: hsl(8, 65%, 29%);
-  --color-error-950: hsl(8, 75%, 19%);
-
-  /* Warning */
-  --color-warning-25: hsl(42, 100%, 98%);
-  --color-warning-50: hsl(45, 100%, 96%);
-  --color-warning-100: hsl(45, 96%, 89%);
-  --color-warning-200: hsl(44, 98%, 77%);
-  --color-warning-300: hsl(42, 99%, 65%);
-  --color-warning-400: hsl(39, 98%, 56%);
-  --color-warning-500: hsl(34, 94%, 50%);
-  --color-warning-600: hsl(28, 97%, 44%);
-  --color-warning-700: hsl(22, 92%, 37%);
-  --color-warning-800: hsl(19, 84%, 31%);
-  --color-warning-900: hsl(18, 79%, 27%);
-  --color-warning-950: hsl(17, 79%, 17%);
-
-  /* Success */
-  --color-success-25: hsl(142, 80%, 98%);
-  --color-success-50: hsl(145, 81%, 96%);
-  --color-success-100: hsl(140, 80%, 90%);
-  --color-success-200: hsl(144, 78%, 80%);
-  --color-success-300: hsl(148, 63%, 67%);
-  --color-success-400: hsl(150, 57%, 54%);
-  --color-success-500: hsl(152, 77%, 39%);
-  --color-success-600: hsl(153, 91%, 30%);
-  --color-success-700: hsl(155, 90%, 24%);
-  --color-success-800: hsl(155, 84%, 20%);
-  --color-success-900: hsl(156, 83%, 16%);
-  --color-success-950: hsl(157, 82%, 11%);
-
-  /* -------------------------------------------------------------------------
-     TYPOGRAPHY
-     ------------------------------------------------------------------------- */
-  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-
-  /* Weights */
-  --weight-regular: 400;
-  --weight-medium: 500;
-  --weight-semibold: 600;
-  --weight-bold: 700;
-
-  /* Text Sizes */
-  --text-xl-size: 1.25rem;
-  --text-lg-size: 1.125rem;
-  --text-md-size: 1rem;
-  --text-sm-size: 0.875rem;
-  --text-xs-size: 0.75rem;
-
-  /* Line Heights */
-  --text-xl-line: 1.875rem;
-  --text-lg-line: 1.75rem;
-  --text-md-line: 1.5rem;
-  --text-sm-line: 1.25rem;
-  --text-xs-line: 1.125rem;
-
-  /* -------------------------------------------------------------------------
-     SPACING
-     ------------------------------------------------------------------------- */
-  --spacing-none: 0rem;
-  --spacing-xxs: 0.125rem;
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.375rem;
-  --spacing-md: 0.5rem;
-  --spacing-lg: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-2xl: 1.25rem;
-  --spacing-3xl: 1.5rem;
-  --spacing-4xl: 2rem;
-  --spacing-5xl: 2.5rem;
-  --spacing-6xl: 3rem;
-
-  /* -------------------------------------------------------------------------
-     RADIUS
-     ------------------------------------------------------------------------- */
-  --radius-none: 0rem;
-  --radius-xxs: 0.125rem;
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.625rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.25rem;
-  --radius-4xl: 1.5rem;
-  --radius-full: 9999px;
-
-  /* -------------------------------------------------------------------------
-     SHADOWS
-     ------------------------------------------------------------------------- */
-  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
-    0px 1px 2px rgba(16, 24, 40, 0.06);
-  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
-    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-
-  /* -------------------------------------------------------------------------
-     ICON COMPENSATION (for buttons with icons)
-     ------------------------------------------------------------------------- */
-  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
-  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-}
-
-/* ==========================================================================
-   BASE STYLES
-   ========================================================================== */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Material Symbols base styling */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: 'liga';
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-
 :host {
   display: inline-block;
   position: relative;
 }
 
 .date-picker-container {
-  position: relative;
-  display: inline-block;
+  width: 100%;
 }
 
 .date-picker-trigger {
@@ -234,18 +27,35 @@
 
 .date-picker-menu-container {
   position: absolute;
-  top: 100%;
   left: 0;
   z-index: 1000;
-  margin-top: var(--spacing-xs);
+  display: none; /* Hide when not open */
+  min-width: 100%; /* Match width of the trigger */
 }
 
+.date-picker-menu-container.is-open {
+  display: block;
+}
+
+/* Default position: Bottom */
+.date-picker-menu-container:not(.open-upward) {
+  top: 100%;
+  margin-top: 8px;
+}
+
+/* Flipped position: Top */
+.date-picker-menu-container.open-upward {
+  bottom: 100%;
+  margin-bottom: 8px;
+}
+
+/* Ensure backdrop covers the whole screen to catch clicks */
 .date-picker-backdrop {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
   background: transparent;
-}
+}

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

@@ -1,5 +1,10 @@
 import { h, Host } from "@stencil/core";
 export class BhDatePicker {
+    /**
+     * Reference to the host element.
+     * The '!' operator fixes the "no initializer" error.
+     */
+    el; //
     /**
      * Variant of the date picker trigger
      */
@@ -48,6 +53,8 @@ export class BhDatePicker {
      * Currently selected value
      */
     value;
+    menuStyles = {};
+    openUpward = false;
     selectedValue = null;
     tempSelection = null;
     isMenuOpen = false;
@@ -60,6 +67,7 @@ export class BhDatePicker {
      * Event emitted when a date is selected
      */
     bhDateSelect;
+    handleInputFocus;
     handleValueChange(newValue) {
         if (newValue !== undefined) {
             this.selectedValue = newValue;
@@ -83,19 +91,14 @@ export class BhDatePicker {
     handleTriggerClick = () => {
         if (this.disabled)
             return;
-        if (!this.isMenuOpen && this.showFooter) {
-            this.tempSelection = this.selectedValue;
+        if (!this.isMenuOpen) {
+            const rect = this.el.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom;
+            // Flip if there is less than 360px below
+            this.openUpward = spaceBelow < 360 && rect.top > 360;
         }
         this.isMenuOpen = !this.isMenuOpen;
     };
-    handleInputFocus = () => {
-        if (this.disabled)
-            return;
-        if (!this.isMenuOpen && this.showFooter) {
-            this.tempSelection = this.selectedValue;
-        }
-        this.isMenuOpen = true;
-    };
     handleDateSelect = (event) => {
         const date = event.detail;
         if (this.showFooter && date) {
@@ -151,7 +154,11 @@ export class BhDatePicker {
         this.handleMenuCancel();
     };
     render() {
-        return (h(Host, { key: 'a802c8d0bf2a5e40c909a8980f160d47b4e7bbde' }, h("div", { key: '348e50ba916744ded6d348683b61129140fc2923', class: "date-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: 'c044d02c7e1377c5596283dc44368b8656a9e511', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '0e298c804889426af639d955e747936728004ef0', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: '862b2d55c32a1eb5063b44a495fdf93b0b4fcd80', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '7573039c5ab7a356010e71a7ef4e37e3d7177b32', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '1f2dc7e7a932c76b3611fc090b9ee2c4637090a2', class: "date-picker-trigger input-field-container" }, h("bh-input-text", { key: 'f80ebc3d20ef711ee3b56031327b79395a609671', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_today", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), h("div", { key: '7a6e32953de4a30b13a4fb0ae3c1ebdbaeab9303', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '80ed5a884954d099a11fcf99f6f1e90584759116', class: "date-picker-menu-container" }, h("bh-picker-menu", { key: 'ac3fa6d95099990e9d4ac9a223944efd7e3f8d3d', visible: this.isMenuOpen, showFooter: this.showFooter, showTodayButton: this.showFooter, disableApply: this.showFooter && this.tempSelection === null, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply, onBhToday: this.handleToday }, h("bh-date-picker-content", { key: '8b92b1356191b4a0a48ddaa2b7f581f9d3eb4ac8', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, value: this.tempSelection ?? this.selectedValue ?? undefined, onBhDateSelect: this.handleDateSelect })))), (this.isMenuOpen || this.isMenuClosing) && (h("div", { key: '155ee3b226bf3425575c63e4d233c3eecb47b243', class: "date-picker-backdrop", onClick: this.handleBackdropClick }))));
+        return (h(Host, { key: '1c760d0b895f98511016d78240276a54236c2e05' }, h("div", { key: 'f3fc721a0bf8296fec06e227b9103ca5930bd411', class: "date-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: 'fd8cc35dd5d9c8ecd8c8633cfd0843cfc37e204b', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '0c142f8d364de9a0905679735c7ceb040c635aaa', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: 'b6beba3f4cfae4de2a8be6d0e7da8562d829e75e', class: "date-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '15a7b5d18cc2be3658410ac5aa3e48e1e0adb1de', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '2d565e93b226d43111ef691e05d960856ca87dc5', class: "date-picker-trigger input-field-container" }, h("bh-input-text", { key: '462b28593ed5445614a9e063dbf63f89cbe4b44b', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_today", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), h("div", { key: '1299f7f28b7936c1a70338bae5e0d35365871a13', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '84273fed1d286f1afc30939ad99ea88bce951195', class: {
+                'date-picker-menu-container': true,
+                'is-open': this.isMenuOpen,
+                'open-upward': this.openUpward
+            } }, h("bh-picker-menu", { key: '728185522dec8a402500a09fc5fa13b95b41f48a', visible: this.isMenuOpen, showFooter: this.showFooter, showTodayButton: this.showFooter, disableApply: this.showFooter && this.tempSelection === null, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply, onBhToday: this.handleToday }, h("bh-date-picker-content", { key: 'a16aa867608bb0e7199cec725c62c9b6eb5cd4c7', minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledDates: this.disabledDates, showOtherMonthDays: this.showOtherMonthDays, value: this.tempSelection ?? this.selectedValue ?? undefined, onBhDateSelect: this.handleDateSelect })))), (this.isMenuOpen || this.isMenuClosing) && (h("div", { key: 'a249f692dfdf55a6984cfa1cdba0c9b6869baf69', class: "date-picker-backdrop", onClick: this.handleBackdropClick }))));
     }
     static get is() { return "bh-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -176,7 +183,7 @@ export class BhDatePicker {
                     "references": {
                         "DatePickerVariant": {
                             "location": "local",
-                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-date-picker/bh-date-picker.tsx",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-date-picker/bh-date-picker.tsx",
                             "id": "src/components/bh-date-picker/bh-date-picker.tsx::DatePickerVariant"
                         }
                     }
@@ -424,6 +431,8 @@ export class BhDatePicker {
     }
     static get states() {
         return {
+            "menuStyles": {},
+            "openUpward": {},
             "selectedValue": {},
             "tempSelection": {},
             "isMenuOpen": {},
@@ -475,6 +484,7 @@ export class BhDatePicker {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",

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

@@ -1 +1 @@
-{"version":3,"file":"bh-date-picker.js","sourceRoot":"","sources":["../../../src/components/bh-date-picker/bh-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\n\nexport type DatePickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-date-picker',\n  styleUrl: 'bh-date-picker.css',\n  shadow: true,\n})\nexport class BhDatePicker {\n  /**\n   * Variant of the date picker trigger\n   */\n  @Prop() variant: DatePickerVariant = 'input';\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled dates\n   */\n  @Prop() disabledDates: DisabledDate[] = [];\n\n  /**\n   * Label for input variant\n   */\n  @Prop() label: string = 'Select Date';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose date';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = false;\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDate;\n\n  @State() selectedValue: SelectedDate | null = null;\n  @State() tempSelection: SelectedDate | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<SelectedDate | null>;\n\n  /**\n   * Event emitted when a date is selected\n   */\n  @Event() bhDateSelect!: EventEmitter<SelectedDate | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDate | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    const day = this.selectedValue.day.toString().padStart(2, '0');\n    return `${month}/${day}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = true;\n  };\n\n  private handleDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    const date = event.detail;\n    if (this.showFooter && date) {\n      this.tempSelection = date;\n    } else {\n      this.selectedValue = date;\n      this.bhChange.emit(date);\n      this.bhDateSelect.emit(date);\n      if (!this.showFooter) {\n        this.closeMenu();\n      }\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.tempSelection = null;\n      this.bhChange.emit(this.selectedValue);\n      this.bhDateSelect.emit(this.selectedValue);\n    }\n    this.closeMenu();\n  };\n\n  private handleToday = () => {\n    const today = new Date();\n    const todayDate: SelectedDate = {\n      year: today.getFullYear(),\n      month: today.getMonth(),\n      day: today.getDate(),\n    };\n\n    if (this.showFooter) {\n      this.tempSelection = todayDate;\n    } else {\n      this.selectedValue = todayDate;\n      this.bhChange.emit(todayDate);\n      this.bhDateSelect.emit(todayDate);\n      this.closeMenu();\n    }\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"date-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_today\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Date Picker Menu */}\n          <div class=\"date-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              showFooter={this.showFooter}\n              showTodayButton={this.showFooter}\n              disableApply={this.showFooter && this.tempSelection === null}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n              onBhToday={this.handleToday}\n            >\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                value={this.tempSelection ?? this.selectedValue ?? undefined}\n                onBhDateSelect={this.handleDateSelect}\n              ></bh-date-picker-content>\n            </bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"date-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bh-date-picker.js","sourceRoot":"","sources":["../../../src/components/bh-date-picker/bh-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch, State } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\nimport { BhInputTextCustomEvent } from '../../components';\n\nexport type DatePickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-date-picker',\n  styleUrl: 'bh-date-picker.css',\n  shadow: true,\n})\nexport class BhDatePicker {\n  /**\n   * Reference to the host element. \n   * The '!' operator fixes the \"no initializer\" error.\n   */\n  @Element() el!: HTMLElement; //\n  /**\n   * Variant of the date picker trigger\n   */\n  @Prop() variant: DatePickerVariant = 'input';\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled dates\n   */\n  @Prop() disabledDates: DisabledDate[] = [];\n\n  /**\n   * Label for input variant\n   */\n  @Prop() label: string = 'Select Date';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose date';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = false;\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDate;\n\n  @State() menuStyles: { [key: string]: string } = {};\n  @State() openUpward: boolean = false;\n  @State() selectedValue: SelectedDate | null = null;\n  @State() tempSelection: SelectedDate | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<SelectedDate | null>;\n\n  /**\n   * Event emitted when a date is selected\n   */\n  @Event() bhDateSelect!: EventEmitter<SelectedDate | null>;\n  handleInputFocus: ((event: BhInputTextCustomEvent<void>) => void) | undefined;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDate | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    const day = this.selectedValue.day.toString().padStart(2, '0');\n    return `${month}/${day}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    \n    if (!this.isMenuOpen) {\n      const rect = this.el.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      // Flip if there is less than 360px below\n      this.openUpward = spaceBelow < 360 && rect.top > 360;\n    }\n    \n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleDateSelect = (event: CustomEvent<SelectedDate | null>) => {\n    const date = event.detail;\n    if (this.showFooter && date) {\n      this.tempSelection = date;\n    } else {\n      this.selectedValue = date;\n      this.bhChange.emit(date);\n      this.bhDateSelect.emit(date);\n      if (!this.showFooter) {\n        this.closeMenu();\n      }\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.tempSelection = null;\n      this.bhChange.emit(this.selectedValue);\n      this.bhDateSelect.emit(this.selectedValue);\n    }\n    this.closeMenu();\n  };\n\n  private handleToday = () => {\n    const today = new Date();\n    const todayDate: SelectedDate = {\n      year: today.getFullYear(),\n      month: today.getMonth(),\n      day: today.getDate(),\n    };\n\n    if (this.showFooter) {\n      this.tempSelection = todayDate;\n    } else {\n      this.selectedValue = todayDate;\n      this.bhChange.emit(todayDate);\n      this.bhDateSelect.emit(todayDate);\n      this.closeMenu();\n    }\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"date-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"date-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_today\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Date Picker Menu */}\n          <div class={{\n            'date-picker-menu-container': true,\n            'is-open': this.isMenuOpen,\n            'open-upward': this.openUpward\n          }}>\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              showFooter={this.showFooter}\n              showTodayButton={this.showFooter}\n              disableApply={this.showFooter && this.tempSelection === null}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n              onBhToday={this.handleToday}\n            >\n              <bh-date-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                value={this.tempSelection ?? this.selectedValue ?? undefined}\n                onBhDateSelect={this.handleDateSelect}\n              ></bh-date-picker-content>\n            </bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"date-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/bh-date-picker-content/bh-date-picker-content.css

@@ -1,209 +1,3 @@
-/**
- * Bellhop Stencil Global Styles
- *
- * This file imports all design tokens and provides global CSS custom properties
- * that are available to all Stencil components.
- */
-
-/* ==========================================================================
-   FONT IMPORTS
-   ========================================================================== */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
-
-/* ==========================================================================
-   DESIGN TOKENS
-   ========================================================================== */
-
-:root {
-  /* -------------------------------------------------------------------------
-     COLORS - Primary
-     ------------------------------------------------------------------------- */
-  --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%);
-  --color-transparent: hsla(0, 0%, 100%, 0);
-
-  /* Neutral */
-  --color-neutral-25: hsl(240, 20%, 99%);
-  --color-neutral-50: hsl(240, 20%, 98%);
-  --color-neutral-100: hsl(240, 17%, 95%);
-  --color-neutral-200: hsl(227, 25%, 89%);
-  --color-neutral-300: hsl(224, 24%, 78%);
-  --color-neutral-400: hsl(226, 24%, 59%);
-  --color-neutral-500: hsl(226, 24%, 48%);
-  --color-neutral-600: hsl(226, 24%, 38%);
-  --color-neutral-700: hsl(226, 24%, 25%);
-  --color-neutral-800: hsl(233, 33%, 10%);
-  --color-neutral-900: hsl(231, 32%, 8%);
-  --color-neutral-950: hsl(231, 32%, 8%);
-
-  /* Brand */
-  --color-brand-25: hsl(220, 82%, 98%);
-  --color-brand-50: hsl(222, 87%, 97%);
-  --color-brand-100: hsl(221, 94%, 94%);
-  --color-brand-200: hsl(221, 92%, 86%);
-  --color-brand-300: hsl(224, 95%, 77%);
-  --color-brand-400: hsl(224, 94%, 72%);
-  --color-brand-500: hsl(230, 67%, 58%);
-  --color-brand-600: hsl(230, 69%, 48%);
-  --color-brand-700: hsl(230, 75%, 34%);
-  --color-brand-800: hsl(243, 86%, 44%);
-  --color-brand-900: hsl(237, 69%, 24%);
-  --color-brand-950: hsl(237, 61%, 20%);
-
-  /* Error */
-  --color-error-25: hsl(12, 100%, 99%);
-  --color-error-50: hsl(5, 86%, 97%);
-  --color-error-100: hsl(4, 93%, 94%);
-  --color-error-200: hsl(3, 96%, 89%);
-  --color-error-300: hsl(4, 96%, 80%);
-  --color-error-400: hsl(4, 92%, 69%);
-  --color-error-500: hsl(4, 86%, 58%);
-  --color-error-600: hsl(4, 74%, 49%);
-  --color-error-700: hsl(4, 76%, 40%);
-  --color-error-800: hsl(4, 72%, 33%);
-  --color-error-900: hsl(8, 65%, 29%);
-  --color-error-950: hsl(8, 75%, 19%);
-
-  /* Warning */
-  --color-warning-25: hsl(42, 100%, 98%);
-  --color-warning-50: hsl(45, 100%, 96%);
-  --color-warning-100: hsl(45, 96%, 89%);
-  --color-warning-200: hsl(44, 98%, 77%);
-  --color-warning-300: hsl(42, 99%, 65%);
-  --color-warning-400: hsl(39, 98%, 56%);
-  --color-warning-500: hsl(34, 94%, 50%);
-  --color-warning-600: hsl(28, 97%, 44%);
-  --color-warning-700: hsl(22, 92%, 37%);
-  --color-warning-800: hsl(19, 84%, 31%);
-  --color-warning-900: hsl(18, 79%, 27%);
-  --color-warning-950: hsl(17, 79%, 17%);
-
-  /* Success */
-  --color-success-25: hsl(142, 80%, 98%);
-  --color-success-50: hsl(145, 81%, 96%);
-  --color-success-100: hsl(140, 80%, 90%);
-  --color-success-200: hsl(144, 78%, 80%);
-  --color-success-300: hsl(148, 63%, 67%);
-  --color-success-400: hsl(150, 57%, 54%);
-  --color-success-500: hsl(152, 77%, 39%);
-  --color-success-600: hsl(153, 91%, 30%);
-  --color-success-700: hsl(155, 90%, 24%);
-  --color-success-800: hsl(155, 84%, 20%);
-  --color-success-900: hsl(156, 83%, 16%);
-  --color-success-950: hsl(157, 82%, 11%);
-
-  /* -------------------------------------------------------------------------
-     TYPOGRAPHY
-     ------------------------------------------------------------------------- */
-  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-
-  /* Weights */
-  --weight-regular: 400;
-  --weight-medium: 500;
-  --weight-semibold: 600;
-  --weight-bold: 700;
-
-  /* Text Sizes */
-  --text-xl-size: 1.25rem;
-  --text-lg-size: 1.125rem;
-  --text-md-size: 1rem;
-  --text-sm-size: 0.875rem;
-  --text-xs-size: 0.75rem;
-
-  /* Line Heights */
-  --text-xl-line: 1.875rem;
-  --text-lg-line: 1.75rem;
-  --text-md-line: 1.5rem;
-  --text-sm-line: 1.25rem;
-  --text-xs-line: 1.125rem;
-
-  /* -------------------------------------------------------------------------
-     SPACING
-     ------------------------------------------------------------------------- */
-  --spacing-none: 0rem;
-  --spacing-xxs: 0.125rem;
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.375rem;
-  --spacing-md: 0.5rem;
-  --spacing-lg: 0.75rem;
-  --spacing-xl: 1rem;
-  --spacing-2xl: 1.25rem;
-  --spacing-3xl: 1.5rem;
-  --spacing-4xl: 2rem;
-  --spacing-5xl: 2.5rem;
-  --spacing-6xl: 3rem;
-
-  /* -------------------------------------------------------------------------
-     RADIUS
-     ------------------------------------------------------------------------- */
-  --radius-none: 0rem;
-  --radius-xxs: 0.125rem;
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.625rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.25rem;
-  --radius-4xl: 1.5rem;
-  --radius-full: 9999px;
-
-  /* -------------------------------------------------------------------------
-     SHADOWS
-     ------------------------------------------------------------------------- */
-  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
-    0px 1px 2px rgba(16, 24, 40, 0.06);
-  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
-    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-
-  /* -------------------------------------------------------------------------
-     ICON COMPENSATION (for buttons with icons)
-     ------------------------------------------------------------------------- */
-  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
-  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
-}
-
-/* ==========================================================================
-   BASE STYLES
-   ========================================================================== */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Material Symbols base styling */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: 'liga';
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-
 :host {
   display: block;
 }