huibo-ui 0.3.0

package/dist/collection/components/TimePicker/time-picker.css

@@ -0,0 +1,151 @@
+:host {
+  display: inline-block;
+  position: relative;
+  --hb-time-picker-font-size: 14px;
+  --hb-time-picker-height: 32px;
+  --hb-time-picker-border-color: var(--hb-border-color, #dcdfe6);
+  --hb-time-picker-border-color-hover: var(--hb-color-primary);
+  --hb-time-picker-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-time-picker {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+}
+
+.hb-time-picker__input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.hb-time-picker__input {
+  display: inline-block;
+  width: 100%;
+  height: var(--hb-time-picker-height);
+  line-height: var(--hb-time-picker-height);
+  padding: 0 30px 0 15px;
+  font-size: var(--hb-time-picker-font-size);
+  color: var(--hb-color-text-regular, #606266);
+  background-color: var(--hb-time-picker-bg-color);
+  border: 1px solid var(--hb-time-picker-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.hb-time-picker__input:hover:not(:disabled) {
+  border-color: var(--hb-time-picker-border-color-hover);
+}
+
+.hb-time-picker__suffix {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.hb-time-picker__clear {
+  margin-right: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+}
+
+.hb-time-picker__icon {
+  font-size: 14px;
+}
+
+.hb-time-picker__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background-color: var(--hb-time-picker-bg-color);
+  border: 1px solid var(--hb-time-picker-border-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 200px;
+  max-height: 300px;
+}
+
+.hb-time-picker__body {
+  display: flex;
+  padding: 8px;
+}
+
+.hb-time-picker__list {
+  flex: 1;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.hb-time-picker__list-title {
+  text-align: center;
+  font-size: 12px;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+  padding: 8px 0;
+  border-bottom: 1px solid var(--hb-border-color-lighter, #e4e7ed);
+}
+
+.hb-time-picker__list-content {
+  padding: 4px 0;
+}
+
+.hb-time-picker__item {
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--hb-color-text-regular, #606266);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.hb-time-picker__item:hover {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-time-picker__item--selected {
+  background-color: var(--hb-color-primary-light-9, #ecf5ff);
+  color: var(--hb-color-primary);
+  font-weight: 600;
+}
+
+.hb-time-picker--small {
+  width: 180px;
+}
+
+.hb-time-picker--small .hb-time-picker__input {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}
+
+.hb-time-picker--large {
+  width: 220px;
+}
+
+.hb-time-picker--large .hb-time-picker__input {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+}
+
+.hb-time-picker--disabled {
+  cursor: not-allowed;
+}
+
+.hb-time-picker--disabled .hb-time-picker__input {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  border-color: var(--hb-time-picker-border-color);
+  color: var(--hb-color-text-disabled, #c0c4cc);
+  cursor: not-allowed;
+}
+

package/dist/collection/components/TimeSelect/TimeSelect.js

@@ -0,0 +1,389 @@
+import { h } from "@stencil/core";
+/**
+ * TimeSelect 时间选择组件
+ * 可用于时间选择
+ */
+export class TimeSelect {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 输入框占位文本
+     */
+    placeholder = '请选择时间';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 开始时间
+     * @default '09:00'
+     */
+    start = '09:00';
+    /**
+     * 结束时间
+     * @default '18:00'
+     */
+    end = '18:00';
+    /**
+     * 间隔时间
+     * @default 60
+     */
+    step = 60;
+    /**
+     * 最小时间
+     */
+    minTime;
+    /**
+     * 最大时间
+     */
+    maxTime;
+    isOpen = false;
+    inputValue = '';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    componentDidLoad() {
+        this.updateInputValue();
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    handleDocumentClick = (e) => {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    };
+    handleValueChange() {
+        this.updateInputValue();
+    }
+    updateInputValue() {
+        this.inputValue = this.modelValue || '';
+    }
+    generateTimeOptions() {
+        const options = [];
+        const [startHour, startMinute] = this.start.split(':').map(Number);
+        const [endHour, endMinute] = this.end.split(':').map(Number);
+        const startMinutes = startHour * 60 + startMinute;
+        const endMinutes = endHour * 60 + endMinute;
+        for (let minutes = startMinutes; minutes <= endMinutes; minutes += this.step) {
+            const hour = Math.floor(minutes / 60);
+            const minute = minutes % 60;
+            const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+            if (this.minTime && timeStr < this.minTime)
+                continue;
+            if (this.maxTime && timeStr > this.maxTime)
+                continue;
+            options.push(timeStr);
+        }
+        return options;
+    }
+    handleInputClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = undefined;
+        this.inputValue = '';
+        this.isOpen = false;
+        this.hbChange.emit(undefined);
+    };
+    handleSelect = (time) => {
+        this.modelValue = time;
+        this.inputValue = time;
+        this.isOpen = false;
+        this.hbChange.emit(time);
+    };
+    render() {
+        const timeOptions = this.generateTimeOptions();
+        const showClear = this.clearable && this.modelValue;
+        return (h("div", { key: '763924d65773a88baf74f9a680887bb0f5f11915', class: {
+                'hb-time-select': true,
+                'hb-time-select--open': this.isOpen,
+                'hb-time-select--disabled': this.disabled,
+                [`hb-time-select--${this.size}`]: true,
+            } }, h("div", { key: '4b11ea13620be04784c2fab4720829733ec4b192', class: "hb-time-select__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '9c398769a1d886640b83e71f3b962dc56bc8e26a', type: "text", class: "hb-time-select__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '7258097816864a711ca573fc9276bcdf0cc3a99b', class: "hb-time-select__suffix" }, showClear && (h("span", { key: 'cf39db893b847f992075b15c4d80ea7a13af0a7f', class: "hb-time-select__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: '98b70c62d0443b93387de1204a816f8f5fd01629', class: "hb-time-select__arrow" }, "\u25BC"))), this.isOpen && (h("div", { key: '49e548e8674505db8d3bd426eb3a909c8f4861d7', class: "hb-time-select__dropdown" }, h("ul", { key: '72233e92a5b7384d7cce618a86b36a06f173ecd2', class: "hb-time-select__menu" }, timeOptions.map((time) => (h("li", { class: {
+                'hb-time-select__menu-item': true,
+                'hb-time-select__menu-item--selected': time === this.modelValue,
+            }, onClick: () => this.handleSelect(time) }, time))))))));
+    }
+    static get is() { return "hb-time-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'\u8BF7\u9009\u62E9\u65F6\u95F4'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "start": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'09:00'"
+                        }],
+                    "text": "\u5F00\u59CB\u65F6\u95F4"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start",
+                "reflect": false,
+                "defaultValue": "'09:00'"
+            },
+            "end": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'18:00'"
+                        }],
+                    "text": "\u7ED3\u675F\u65F6\u95F4"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end",
+                "reflect": false,
+                "defaultValue": "'18:00'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "60"
+                        }],
+                    "text": "\u95F4\u9694\u65F6\u95F4"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "60"
+            },
+            "minTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5C0F\u65F6\u95F4"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-time",
+                "reflect": false
+            },
+            "maxTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u65F6\u95F4"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-time",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=TimeSelect.js.map

package/dist/collection/components/TimeSelect/TimeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelect.js","sourceRoot":"","sources":["../../../src/components/TimeSelect/TimeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\n\n/**\n * TimeSelect 时间选择组件\n * 可用于时间选择\n */\n@Component({\n  tag: 'hb-time-select',\n  styleUrl: 'time-select.css',\n  shadow: true,\n})\nexport class TimeSelect {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder: string = '请选择时间';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 开始时间\n   * @default '09:00'\n   */\n  @Prop() start: string = '09:00';\n\n  /**\n   * 结束时间\n   * @default '18:00'\n   */\n  @Prop() end: string = '18:00';\n\n  /**\n   * 间隔时间\n   * @default 60\n   */\n  @Prop() step: number = 60;\n\n  /**\n   * 最小时间\n   */\n  @Prop() minTime?: string;\n\n  /**\n   * 最大时间\n   */\n  @Prop() maxTime?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.updateInputValue();\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleDocumentClick = (e: MouseEvent) => {\n    if (!this.isOpen) return;\n    const target = e.target as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  };\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  private updateInputValue() {\n    this.inputValue = this.modelValue || '';\n  }\n\n  private generateTimeOptions(): string[] {\n    const options: string[] = [];\n    const [startHour, startMinute] = this.start.split(':').map(Number);\n    const [endHour, endMinute] = this.end.split(':').map(Number);\n    \n    const startMinutes = startHour * 60 + startMinute;\n    const endMinutes = endHour * 60 + endMinute;\n    \n    for (let minutes = startMinutes; minutes <= endMinutes; minutes += this.step) {\n      const hour = Math.floor(minutes / 60);\n      const minute = minutes % 60;\n      const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;\n      \n      if (this.minTime && timeStr < this.minTime) continue;\n      if (this.maxTime && timeStr > this.maxTime) continue;\n      \n      options.push(timeStr);\n    }\n    \n    return options;\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = undefined;\n    this.inputValue = '';\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleSelect = (time: string) => {\n    this.modelValue = time;\n    this.inputValue = time;\n    this.isOpen = false;\n    this.hbChange.emit(time);\n  };\n\n  render() {\n    const timeOptions = this.generateTimeOptions();\n    const showClear = this.clearable && this.modelValue;\n\n    return (\n      <div\n        class={{\n          'hb-time-select': true,\n          'hb-time-select--open': this.isOpen,\n          'hb-time-select--disabled': this.disabled,\n          [`hb-time-select--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-time-select__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            class=\"hb-time-select__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n          />\n          <span class=\"hb-time-select__suffix\">\n            {showClear && (\n              <span class=\"hb-time-select__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-time-select__arrow\">▼</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-time-select__dropdown\">\n            <ul class=\"hb-time-select__menu\">\n              {timeOptions.map((time) => (\n                <li\n                  class={{\n                    'hb-time-select__menu-item': true,\n                    'hb-time-select__menu-item--selected': time === this.modelValue,\n                  }}\n                  onClick={() => this.handleSelect(time)}\n                >\n                  {time}\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/TimeSelect/time-select.css

@@ -0,0 +1,139 @@
+:host {
+  display: inline-block;
+  position: relative;
+  --hb-time-select-font-size: 14px;
+  --hb-time-select-height: 32px;
+  --hb-time-select-border-color: var(--hb-border-color, #dcdfe6);
+  --hb-time-select-border-color-hover: var(--hb-color-primary);
+  --hb-time-select-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-time-select {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+}
+
+.hb-time-select__input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.hb-time-select__input {
+  display: inline-block;
+  width: 100%;
+  height: var(--hb-time-select-height);
+  line-height: var(--hb-time-select-height);
+  padding: 0 30px 0 15px;
+  font-size: var(--hb-time-select-font-size);
+  color: var(--hb-color-text-regular, #606266);
+  background-color: var(--hb-time-select-bg-color);
+  border: 1px solid var(--hb-time-select-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.hb-time-select__input:hover:not(:disabled) {
+  border-color: var(--hb-time-select-border-color-hover);
+}
+
+.hb-time-select__suffix {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.hb-time-select__clear {
+  margin-right: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+}
+
+.hb-time-select__arrow {
+  font-size: 12px;
+  transition: transform 0.3s;
+}
+
+.hb-time-select--open .hb-time-select__arrow {
+  transform: rotate(180deg);
+}
+
+.hb-time-select__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background-color: var(--hb-time-select-bg-color);
+  border: 1px solid var(--hb-time-select-border-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.hb-time-select__menu {
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+}
+
+.hb-time-select__menu-item {
+  padding: 8px 20px;
+  font-size: var(--hb-time-select-font-size);
+  color: var(--hb-color-text-regular, #606266);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.hb-time-select__menu-item:hover {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-time-select__menu-item--selected {
+  color: var(--hb-color-primary);
+  font-weight: 600;
+  background-color: var(--hb-color-primary-light-9, #ecf5ff);
+}
+
+.hb-time-select--small {
+  width: 180px;
+}
+
+.hb-time-select--small .hb-time-select__input {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}
+
+.hb-time-select--large {
+  width: 220px;
+}
+
+.hb-time-select--large .hb-time-select__input {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+}
+
+.hb-time-select--disabled {
+  cursor: not-allowed;
+}
+
+.hb-time-select--disabled .hb-time-select__input {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  border-color: var(--hb-time-select-border-color);
+  color: var(--hb-color-text-disabled, #c0c4cc);
+  cursor: not-allowed;
+}
+