@kdcloudjs/shoelace 1.0.51 → 1.0.52

package/dist/chunks/chunk.7BGBHTVK.js

@@ -0,0 +1,1129 @@
+import {
+  cascader_styles_default
+} from "./chunk.LFZTSYFA.js";
+import {
+  SlTag
+} from "./chunk.XUZUYULF.js";
+import {
+  SlPopup
+} from "./chunk.M7UFY5KZ.js";
+import {
+  form_control_styles_default
+} from "./chunk.2ASGWQBH.js";
+import {
+  FormControlController
+} from "./chunk.WBWPWG4N.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.YO2LOYG6.js";
+import {
+  SlIcon
+} from "./chunk.S3YDHX7E.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.735URR7H.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/cascader/cascader.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SlCascader = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["sl-blur", "sl-input"]
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.localize = new LocalizeController(this);
+    this.closeWatcher = null;
+    this.hasFocus = false;
+    this.displayLabel = "";
+    this.menus = [];
+    this.selectedPath = [];
+    this.expandedKeys = [];
+    this.searchKeyword = "";
+    this.searchResults = [];
+    this.selectedPaths = [];
+    this.name = "";
+    this.value = [];
+    this.defaultValue = [];
+    this.size = "medium";
+    this.placeholder = "";
+    this.multiple = false;
+    this.disabled = false;
+    this.panelDisabled = false;
+    this.allowClear = true;
+    this.open = false;
+    this.defaultOpen = false;
+    this.hoist = true;
+    this.label = "";
+    this.placement = "bottomLeft";
+    this.helpText = "";
+    this.form = "";
+    this.required = false;
+    this.options = [];
+    this.fieldNames = {
+      label: "label",
+      value: "value",
+      children: "children"
+    };
+    this.expandTrigger = "click";
+    this.changeOnSelect = false;
+    this.separator = " / ";
+    this.showFullPath = true;
+    this.showSearch = false;
+    this.notFoundContent = "Not Found";
+    this.variant = "outlined";
+    this.status = "";
+    this.loadData = null;
+    this.displayRender = null;
+    this.optionRender = null;
+    this.maxTagCount = void 0;
+    this.maxTagPlaceholder = "";
+    this.maxTagTextLength = void 0;
+    this.showCheckedStrategy = "show-parent";
+    this.handleDocumentFocusIn = (event) => {
+      const path = event.composedPath();
+      if (this && !path.includes(this)) {
+        this.hide();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+        this.displayInput.focus({ preventScroll: true });
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      const path = event.composedPath();
+      if (this && !path.includes(this)) {
+        this.hide();
+      }
+    };
+    this.defaultSearchFilter = (inputValue, path) => {
+      return path.some((option) => this.getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase()));
+    };
+  }
+  // ==================== Getters ====================
+  get validity() {
+    return this.valueInput.validity;
+  }
+  get validationMessage() {
+    return this.valueInput.validationMessage;
+  }
+  get popupPlacement() {
+    const map = {
+      bottomLeft: "bottom-start",
+      bottomRight: "bottom-end",
+      topLeft: "top-start",
+      topRight: "top-end"
+    };
+    return map[this.placement] || "bottom-start";
+  }
+  get isSearchMode() {
+    return !!this.showSearch && this.searchKeyword.length > 0;
+  }
+  get hasValue() {
+    if (this.multiple) {
+      return this.value.length > 0;
+    }
+    return this.value.length > 0;
+  }
+  // ==================== Lifecycle ====================
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.defaultOpen) {
+      this.open = false;
+    }
+    this.initMenus();
+  }
+  firstUpdated() {
+    if (this.defaultOpen && !this.disabled) {
+      this.open = true;
+    }
+  }
+  initMenus() {
+    if (this.options.length > 0) {
+      this.menus = [this.options];
+    }
+  }
+  // ==================== Field Helpers ====================
+  getFieldValue(option, field) {
+    const fieldName = this.fieldNames[field] || field;
+    return option[fieldName];
+  }
+  getOptionValue(option) {
+    return this.getFieldValue(option, "value");
+  }
+  getOptionLabel(option) {
+    var _a;
+    return (_a = this.getFieldValue(option, "label")) != null ? _a : "";
+  }
+  getOptionChildren(option) {
+    return this.getFieldValue(option, "children");
+  }
+  // ==================== Open/Close Listeners ====================
+  addOpenListeners() {
+    var _a;
+    document.addEventListener("focusin", this.handleDocumentFocusIn);
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    if (this.getRootNode() !== document) {
+      this.getRootNode().addEventListener("focusin", this.handleDocumentFocusIn);
+    }
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        if (this.open) {
+          this.hide();
+          this.displayInput.focus({ preventScroll: true });
+        }
+      };
+    }
+  }
+  removeOpenListeners() {
+    var _a;
+    document.removeEventListener("focusin", this.handleDocumentFocusIn);
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    if (this.getRootNode() !== document) {
+      this.getRootNode().removeEventListener("focusin", this.handleDocumentFocusIn);
+    }
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+  }
+  // ==================== Event Handlers ====================
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleLabelClick() {
+    this.displayInput.focus();
+  }
+  handleComboboxMouseDown(event) {
+    if (this.disabled) return;
+    event.preventDefault();
+    if (this.showSearch && this.searchInput) {
+      this.searchInput.focus({ preventScroll: true });
+    } else {
+      this.displayInput.focus({ preventScroll: true });
+    }
+    this.open = !this.open;
+  }
+  handleClearClick(event) {
+    event.stopPropagation();
+    if (this.multiple) {
+      this.value = [];
+      this.selectedPaths = [];
+    } else {
+      this.value = [];
+      this.selectedPath = [];
+    }
+    this.displayLabel = "";
+    this.menus = [this.options];
+    this.expandedKeys = [];
+    this.searchKeyword = "";
+    this.searchResults = [];
+    this.displayInput.focus({ preventScroll: true });
+    this.updateComplete.then(() => {
+      this.emit("sl-clear");
+      this.emit("sl-input");
+      this.emit("sl-change");
+    });
+  }
+  handleClearMouseDown(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  handleSearchInput(event) {
+    const input = event.target;
+    this.searchKeyword = input.value;
+    if (this.searchKeyword) {
+      this.performSearch();
+      if (!this.open) {
+        this.open = true;
+      }
+    } else {
+      this.searchResults = [];
+    }
+  }
+  // ==================== Option Click/Hover ====================
+  handleOptionClick(option, columnIndex) {
+    if (this.panelDisabled || option.disabled) return;
+    const children = this.getOptionChildren(option);
+    const value = this.getOptionValue(option);
+    const hasChildren = children && children.length > 0;
+    const isLeaf = option.isLeaf !== void 0 ? option.isLeaf : !hasChildren;
+    const newSelectedPath = this.selectedPath.slice(0, columnIndex);
+    newSelectedPath.push(option);
+    this.selectedPath = newSelectedPath;
+    const newExpandedKeys = this.expandedKeys.slice(0, columnIndex);
+    newExpandedKeys.push(value);
+    this.expandedKeys = newExpandedKeys;
+    this.rebuildMenus();
+    if (hasChildren) {
+      this.menus = [...this.menus, children];
+      if (!this.multiple && this.changeOnSelect) {
+        this.selectOption();
+      }
+    } else if (this.loadData && !isLeaf && !option.loading) {
+      option.loading = true;
+      this.requestUpdate();
+      this.loadData(newSelectedPath);
+      if (this.changeOnSelect) {
+        this.selectOption();
+      }
+    } else {
+      if (this.multiple) {
+        this.toggleMultipleSelection(newSelectedPath);
+      } else {
+        this.selectOption();
+        this.hide();
+      }
+    }
+  }
+  /** Handle checkbox click in multiple mode - toggles selection without expanding */
+  handleCheckboxClick(event, option, columnIndex) {
+    event.stopPropagation();
+    if (this.panelDisabled || option.disabled) return;
+    const children = this.getOptionChildren(option);
+    const hasChildren = children && children.length > 0;
+    if (hasChildren) {
+      const currentPath = this.buildPathToOption(option, columnIndex);
+      this.toggleParentSelection(option, currentPath);
+    } else {
+      const currentPath = this.buildPathToOption(option, columnIndex);
+      this.toggleMultipleSelection(currentPath);
+    }
+  }
+  handleOptionMouseEnter(option, columnIndex) {
+    if (this.panelDisabled || this.expandTrigger !== "hover" || option.disabled) return;
+    const value = this.getOptionValue(option);
+    const newExpandedKeys = this.expandedKeys.slice(0, columnIndex);
+    newExpandedKeys.push(value);
+    this.expandedKeys = newExpandedKeys;
+    const newMenus = [this.options];
+    let currentOptions = this.options;
+    for (let i = 0; i <= columnIndex; i++) {
+      const key = this.expandedKeys[i];
+      if (key !== void 0) {
+        const opt = currentOptions.find((o) => this.getOptionValue(o) === key);
+        if (opt) {
+          const optChildren = this.getOptionChildren(opt);
+          if (optChildren && optChildren.length > 0) {
+            newMenus.push(optChildren);
+            currentOptions = optChildren;
+          }
+        }
+      }
+    }
+    this.menus = newMenus;
+  }
+  handleSearchResultClick(path) {
+    if (this.panelDisabled) return;
+    if (this.multiple) {
+      this.toggleMultipleSelection(path);
+    } else {
+      this.selectedPath = path;
+      this.expandedKeys = path.map((opt) => this.getOptionValue(opt));
+      this.selectOption();
+      this.searchKeyword = "";
+      this.searchResults = [];
+      this.hide();
+    }
+  }
+  handleTagRemove(index) {
+    if (this.disabled) return;
+    const paths = [...this.selectedPaths];
+    paths.splice(index, 1);
+    this.selectedPaths = paths;
+    this.value = paths.map((p) => p.map((opt) => this.getOptionValue(opt)));
+    this.updateDisplayLabel();
+    this.updateComplete.then(() => {
+      this.emit("sl-input");
+      this.emit("sl-change");
+    });
+  }
+  // ==================== Menu/Selection Logic ====================
+  rebuildMenus() {
+    const newMenus = [this.options];
+    for (let i = 0; i < this.selectedPath.length; i++) {
+      const option = this.selectedPath[i];
+      const children = this.getOptionChildren(option);
+      if (children && children.length > 0 && i < this.selectedPath.length - 1) {
+        newMenus.push(children);
+      }
+    }
+    this.menus = newMenus;
+  }
+  selectOption() {
+    this.value = this.selectedPath.map((opt) => this.getOptionValue(opt));
+    this.updateDisplayLabel();
+    this.updateComplete.then(() => {
+      this.emit("sl-input");
+      this.emit("sl-change");
+    });
+  }
+  toggleMultipleSelection(path) {
+    const pathValues = path.map((opt) => this.getOptionValue(opt));
+    const existingIndex = this.selectedPaths.findIndex(
+      (p) => JSON.stringify(p.map((opt) => this.getOptionValue(opt))) === JSON.stringify(pathValues)
+    );
+    if (existingIndex >= 0) {
+      const newPaths = [...this.selectedPaths];
+      newPaths.splice(existingIndex, 1);
+      this.selectedPaths = newPaths;
+    } else {
+      this.selectedPaths = [...this.selectedPaths, path];
+    }
+    this.value = this.selectedPaths.map((p) => p.map((opt) => this.getOptionValue(opt)));
+    this.updateDisplayLabel();
+    this.updateComplete.then(() => {
+      this.emit("sl-input");
+      this.emit("sl-change");
+    });
+  }
+  isPathSelected(path) {
+    const pathValues = JSON.stringify(path.map((opt) => this.getOptionValue(opt)));
+    return this.selectedPaths.some((p) => JSON.stringify(p.map((opt) => this.getOptionValue(opt))) === pathValues);
+  }
+  /** Check if an option is fully selected (all descendants for parent nodes) */
+  isOptionChecked(option, columnIndex) {
+    const children = this.getOptionChildren(option);
+    const hasChildren = children && children.length > 0;
+    if (hasChildren) {
+      const currentPath = this.buildPathToOption(option, columnIndex);
+      const leafPaths = this.getDescendantLeafPaths(option, currentPath);
+      return leafPaths.length > 0 && leafPaths.every((lp) => this.isPathSelected(lp));
+    }
+    const optionValue = this.getOptionValue(option);
+    return this.selectedPaths.some(
+      (p) => p[columnIndex] !== void 0 && this.getOptionValue(p[columnIndex]) === optionValue
+    );
+  }
+  /** Build path from root to an option at a given column index using expanded keys */
+  buildPathToOption(option, columnIndex) {
+    const path = [];
+    let currentOptions = this.options;
+    for (let i = 0; i < columnIndex; i++) {
+      const key = this.expandedKeys[i];
+      const opt = currentOptions.find((o) => this.getOptionValue(o) === key);
+      if (opt) {
+        path.push(opt);
+        const children = this.getOptionChildren(opt);
+        if (children) currentOptions = children;
+      }
+    }
+    path.push(option);
+    return path;
+  }
+  /** Get all non-disabled leaf paths under an option. currentPath includes the option itself. */
+  getDescendantLeafPaths(option, currentPath) {
+    const children = this.getOptionChildren(option);
+    if (!children || children.length === 0) {
+      return [currentPath];
+    }
+    const paths = [];
+    for (const child of children) {
+      if (child.disabled) continue;
+      const childPath = [...currentPath, child];
+      paths.push(...this.getDescendantLeafPaths(child, childPath));
+    }
+    return paths;
+  }
+  /** Toggle all descendant leaf selections for a parent option */
+  toggleParentSelection(option, currentPath) {
+    const leafPaths = this.getDescendantLeafPaths(option, currentPath);
+    if (leafPaths.length === 0) return;
+    const allSelected = leafPaths.every((lp) => this.isPathSelected(lp));
+    const newPaths = [...this.selectedPaths];
+    if (allSelected) {
+      for (const leafPath of leafPaths) {
+        const lpValues = JSON.stringify(leafPath.map((opt) => this.getOptionValue(opt)));
+        const idx = newPaths.findIndex((p) => JSON.stringify(p.map((opt) => this.getOptionValue(opt))) === lpValues);
+        if (idx >= 0) {
+          newPaths.splice(idx, 1);
+        }
+      }
+    } else {
+      for (const leafPath of leafPaths) {
+        if (!this.isPathSelected(leafPath)) {
+          newPaths.push(leafPath);
+        }
+      }
+    }
+    this.selectedPaths = newPaths;
+    this.value = this.selectedPaths.map((p) => p.map((opt) => this.getOptionValue(opt)));
+    this.updateDisplayLabel();
+    this.updateComplete.then(() => {
+      this.emit("sl-input");
+      this.emit("sl-change");
+    });
+  }
+  /** Check if some (but not all) descendant leaves are selected - indeterminate checkbox state */
+  isOptionIndeterminate(option, columnIndex) {
+    const children = this.getOptionChildren(option);
+    if (!children || children.length === 0) return false;
+    const currentPath = this.buildPathToOption(option, columnIndex);
+    const leafPaths = this.getDescendantLeafPaths(option, currentPath);
+    const selectedCount = leafPaths.filter((lp) => this.isPathSelected(lp)).length;
+    return selectedCount > 0 && selectedCount < leafPaths.length;
+  }
+  updateDisplayLabel() {
+    var _a;
+    if (this.multiple) {
+      this.displayLabel = "";
+      return;
+    }
+    const labels = this.selectedPath.map((opt) => this.getOptionLabel(opt));
+    if (this.displayRender) {
+      this.displayLabel = this.displayRender(labels, this.selectedPath);
+    } else if (this.showFullPath) {
+      this.displayLabel = labels.join(this.separator);
+    } else {
+      this.displayLabel = (_a = labels[labels.length - 1]) != null ? _a : "";
+    }
+  }
+  // ==================== Search Logic ====================
+  performSearch() {
+    if (!this.showSearch || !this.searchKeyword) {
+      this.searchResults = [];
+      return;
+    }
+    const config = typeof this.showSearch === "object" ? this.showSearch : {};
+    const filterFn = config.filter || this.defaultSearchFilter;
+    const limit = config.limit !== void 0 ? config.limit : 50;
+    const allPaths = this.getAllPaths(this.options);
+    let filtered = allPaths.filter((path) => filterFn(this.searchKeyword, path));
+    if (config.sort) {
+      filtered.sort((a, b) => config.sort(a, b, this.searchKeyword));
+    }
+    if (limit !== false && filtered.length > limit) {
+      filtered = filtered.slice(0, limit);
+    }
+    this.searchResults = filtered;
+  }
+  getAllPaths(options, parentPath = []) {
+    const paths = [];
+    for (const option of options) {
+      const currentPath = [...parentPath, option];
+      const children = this.getOptionChildren(option);
+      if (children && children.length > 0) {
+        paths.push(...this.getAllPaths(children, currentPath));
+      } else {
+        paths.push(currentPath);
+      }
+    }
+    return paths;
+  }
+  // ==================== Restore Path from Value ====================
+  restoreSelectedPath() {
+    if (this.multiple) {
+      this.restoreMultiplePaths();
+      return;
+    }
+    const val = this.value;
+    const path = [];
+    const newMenus = [this.options];
+    let currentOptions = this.options;
+    for (const v of val) {
+      const option = currentOptions.find((opt) => this.getOptionValue(opt) === v);
+      if (option) {
+        path.push(option);
+        const children = this.getOptionChildren(option);
+        if (children && children.length > 0) {
+          newMenus.push(children);
+          currentOptions = children;
+        } else {
+          break;
+        }
+      } else {
+        break;
+      }
+    }
+    this.selectedPath = path;
+    this.expandedKeys = path.map((opt) => this.getOptionValue(opt));
+    this.menus = newMenus;
+    this.updateDisplayLabel();
+  }
+  restoreMultiplePaths() {
+    const vals = this.value;
+    const paths = [];
+    for (const val of vals) {
+      const path = this.findPathByValues(val);
+      if (path.length > 0) {
+        paths.push(path);
+      }
+    }
+    this.selectedPaths = paths;
+    this.updateDisplayLabel();
+  }
+  findPathByValues(values) {
+    const path = [];
+    let currentOptions = this.options;
+    for (const v of values) {
+      const option = currentOptions.find((opt) => this.getOptionValue(opt) === v);
+      if (option) {
+        path.push(option);
+        const children = this.getOptionChildren(option);
+        if (children && children.length > 0) {
+          currentOptions = children;
+        } else {
+          break;
+        }
+      } else {
+        break;
+      }
+    }
+    return path;
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.open = false;
+      this.handleOpenChange();
+    }
+  }
+  handleOptionsChange() {
+    this.initMenus();
+    if (this.hasValue && this.options.length > 0) {
+      this.restoreSelectedPath();
+    }
+  }
+  handleValueChange() {
+    if (this.hasValue && this.options.length > 0) {
+      this.restoreSelectedPath();
+    }
+  }
+  handleOpenChange() {
+    if (this.open && !this.disabled) {
+      this.emit("sl-show");
+      this.addOpenListeners();
+      this.popup.active = true;
+      this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide");
+      this.removeOpenListeners();
+      this.popup.active = false;
+      this.searchKeyword = "";
+      this.searchResults = [];
+      this.emit("sl-after-hide");
+    }
+  }
+  // ==================== Public Methods ====================
+  async show() {
+    if (this.open || this.disabled) {
+      this.open = false;
+      return;
+    }
+    this.open = true;
+    await this.updateComplete;
+  }
+  async hide() {
+    if (!this.open || this.disabled) {
+      this.open = false;
+      return;
+    }
+    this.open = false;
+    await this.updateComplete;
+  }
+  checkValidity() {
+    return this.valueInput.checkValidity();
+  }
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  reportValidity() {
+    return this.valueInput.reportValidity();
+  }
+  setCustomValidity(message) {
+    this.valueInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  focus(options) {
+    if (this.showSearch && this.searchInput) {
+      this.searchInput.focus(options);
+    } else {
+      this.displayInput.focus(options);
+    }
+  }
+  blur() {
+    if (this.showSearch && this.searchInput) {
+      this.searchInput.blur();
+    } else {
+      this.displayInput.blur();
+    }
+  }
+  // ==================== Render: Search Results ====================
+  renderSearchResults() {
+    if (this.searchResults.length === 0) {
+      return html`
+        <div class="cascader__not-found" part="not-found">
+          <slot name="not-found">${this.notFoundContent}</slot>
+        </div>
+      `;
+    }
+    return html`
+      <div class="cascader__search-results">
+        ${this.searchResults.map((path) => {
+      const labels = path.map((opt) => this.getOptionLabel(opt));
+      const displayText = labels.join(this.separator);
+      const isSelected = this.multiple ? this.isPathSelected(path) : false;
+      return html`
+            <div
+              class=${classMap({
+        cascader__option: true,
+        "cascader__option--disabled": this.panelDisabled,
+        "cascader__option--selected": isSelected
+      })}
+              part="menu-item"
+              @click=${() => this.handleSearchResultClick(path)}
+            >
+              ${this.multiple ? html`<span class="cascader__checkbox ${isSelected ? "cascader__checkbox--checked" : ""}"></span>` : nothing}
+              <span class="cascader__option-label">${displayText}</span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  // ==================== Render: Menu ====================
+  renderMenu() {
+    if (this.isSearchMode) {
+      return html` <div class="cascader__menu cascader__menu--search" part="menu">${this.renderSearchResults()}</div> `;
+    }
+    if (this.menus.length === 0 || this.menus.length === 1 && this.menus[0].length === 0) {
+      return html`
+        <div class="cascader__menu" part="menu">
+          <div class="cascader__not-found" part="not-found">
+            <slot name="not-found">${this.notFoundContent}</slot>
+          </div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="cascader__menu" part="menu">
+        ${this.menus.map(
+      (column, columnIndex) => html`
+            <div class="cascader__menu-column" part="menu-column">
+              ${column.map((option) => {
+        const value = this.getOptionValue(option);
+        const label = this.getOptionLabel(option);
+        const children = this.getOptionChildren(option);
+        const hasChildren = children && children.length > 0;
+        const isExpanded = this.expandedKeys[columnIndex] === value;
+        const isSelected = this.multiple ? this.isOptionChecked(option, columnIndex) : this.selectedPath[columnIndex] === option;
+        const isIndeterminate = this.multiple && !isSelected ? this.isOptionIndeterminate(option, columnIndex) : false;
+        const isLoading = !!option.loading;
+        const showExpandIcon = hasChildren || this.loadData && option.isLeaf === false;
+        return html`
+                  <div
+                    class=${classMap({
+          cascader__option: true,
+          "cascader__option--disabled": this.panelDisabled || !!option.disabled,
+          "cascader__option--expanded": isExpanded,
+          "cascader__option--selected": isSelected,
+          "cascader__option--loading": isLoading
+        })}
+                    part="menu-item"
+                    @click=${() => this.handleOptionClick(option, columnIndex)}
+                    @mouseenter=${() => this.handleOptionMouseEnter(option, columnIndex)}
+                  >
+                    ${this.multiple ? html`<span
+                          class="cascader__checkbox ${isSelected ? "cascader__checkbox--checked" : isIndeterminate ? "cascader__checkbox--indeterminate" : ""}"
+                          @click=${(e) => this.handleCheckboxClick(e, option, columnIndex)}
+                        ></span>` : nothing}
+                    <span class="cascader__option-label">${this.optionRender ? this.optionRender(option) : label}</span>
+                    ${isLoading ? html`<sl-icon name="arrow-repeat" class="cascader__loading-icon"></sl-icon>` : showExpandIcon ? html`<sl-icon name="chevron-right" class="cascader__option-expand-icon"></sl-icon>` : nothing}
+                  </div>
+                `;
+      })}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  // ==================== Render: Tags (Multiple Mode) ====================
+  renderTags() {
+    if (!this.multiple || this.selectedPaths.length === 0) return nothing;
+    let visiblePaths = this.selectedPaths;
+    let hiddenCount = 0;
+    if (this.maxTagCount !== void 0 && this.selectedPaths.length > this.maxTagCount) {
+      visiblePaths = this.selectedPaths.slice(0, this.maxTagCount);
+      hiddenCount = this.selectedPaths.length - this.maxTagCount;
+    }
+    return html`
+      <div class="cascader__tags" part="tags">
+        ${visiblePaths.map((path, index) => {
+      let label = this.showFullPath ? path.map((opt) => this.getOptionLabel(opt)).join(this.separator) : this.getOptionLabel(path[path.length - 1]);
+      if (this.maxTagTextLength && label.length > this.maxTagTextLength) {
+        label = label.slice(0, this.maxTagTextLength) + "...";
+      }
+      return html`
+            <sl-tag
+              part="tag"
+              exportparts="base:tag__base,content:tag__content,remove-button:tag__remove-button"
+              size=${this.size}
+              removable
+              @sl-remove=${() => this.handleTagRemove(index)}
+            >
+              ${label}
+            </sl-tag>
+          `;
+    })}
+        ${hiddenCount > 0 ? html` <sl-tag part="tag" size=${this.size}> ${this.maxTagPlaceholder || `+ ${hiddenCount} ...`} </sl-tag> ` : nothing}
+      </div>
+    `;
+  }
+  // ==================== Render ====================
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.allowClear && !this.disabled && this.hasValue;
+    const isPlaceholderVisible = this.placeholder && !this.hasValue && !this.searchKeyword;
+    const isSearchEnabled = !!this.showSearch;
+    const showTags = this.multiple && this.selectedPaths.length > 0;
+    const formValue = this.multiple ? JSON.stringify(this.value) : this.value.join(",");
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          id="label"
+          part="form-control-label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <sl-popup
+            class=${classMap({
+      cascader: true,
+      "cascader--outlined": this.variant === "outlined",
+      "cascader--borderless": this.variant === "borderless",
+      "cascader--filled": this.variant === "filled",
+      "cascader--underlined": this.variant === "underlined",
+      "cascader--open": this.open,
+      "cascader--disabled": this.disabled,
+      "cascader--multiple": this.multiple,
+      "cascader--focused": this.hasFocus,
+      "cascader--placeholder-visible": !!isPlaceholderVisible,
+      "cascader--top": this.placement.startsWith("top"),
+      "cascader--bottom": this.placement.startsWith("bottom"),
+      "cascader--small": this.size === "small",
+      "cascader--medium": this.size === "medium",
+      "cascader--large": this.size === "large",
+      "cascader--has-tags": showTags,
+      "cascader--error": this.status === "error",
+      "cascader--warning": this.status === "warning"
+    })}
+            placement=${this.popupPlacement}
+            strategy=${this.hoist ? "fixed" : "absolute"}
+            distance="4"
+            flip
+            shift
+            auto-size="vertical"
+            auto-size-padding="10"
+          >
+            <div part="combobox" class="cascader__combobox" slot="anchor" @mousedown=${this.handleComboboxMouseDown}>
+              <slot name="prefix" part="prefix" class="cascader__prefix"></slot>
+
+              <div class="cascader__content">
+                ${showTags ? this.renderTags() : nothing}
+                ${isSearchEnabled ? html`
+                      <input
+                        part="search-input"
+                        class="cascader__search-input"
+                        type="text"
+                        placeholder=${!showTags && !this.hasValue ? this.placeholder : ""}
+                        .disabled=${this.disabled}
+                        .value=${this.searchKeyword}
+                        autocomplete="off"
+                        aria-controls="menu"
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="listbox"
+                        aria-labelledby="label"
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        @input=${this.handleSearchInput}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                      />
+                      ${!this.searchKeyword && !showTags ? html`
+                            <input
+                              part="display-input"
+                              class="cascader__display-input cascader__display-input--behind"
+                              type="text"
+                              .value=${this.displayLabel}
+                              readonly
+                              tabindex="-1"
+                            />
+                          ` : nothing}
+                    ` : html`
+                      <input
+                        part="display-input"
+                        class="cascader__display-input"
+                        type="text"
+                        placeholder=${showTags ? "" : this.placeholder}
+                        .disabled=${this.disabled}
+                        .value=${showTags ? "" : this.displayLabel}
+                        readonly
+                        aria-controls="menu"
+                        aria-expanded=${this.open ? "true" : "false"}
+                        aria-haspopup="listbox"
+                        aria-labelledby="label"
+                        aria-disabled=${this.disabled ? "true" : "false"}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                      />
+                    `}
+              </div>
+
+              <input
+                class="cascader__value-input"
+                type="text"
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                .value=${formValue}
+                tabindex="-1"
+                aria-hidden="true"
+              />
+
+              ${hasClearIcon ? html`
+                    <button
+                      part="clear-button"
+                      class="cascader__clear"
+                      type="button"
+                      aria-label=${this.localize.term("clearEntry")}
+                      @click=${this.handleClearClick}
+                      @mousedown=${this.handleClearMouseDown}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <sl-icon name="x-circle-fill" library="system"></sl-icon>
+                      </slot>
+                    </button>
+                  ` : nothing}
+
+              <slot name="suffix" part="suffix" class="cascader__suffix"></slot>
+
+              <slot name="expand-icon" part="expand-icon" class="cascader__expand-icon">
+                <sl-icon library="system" name="chevron-down"></sl-icon>
+              </slot>
+            </div>
+
+            ${this.renderMenu()}
+          </sl-popup>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SlCascader.styles = [component_styles_default, form_control_styles_default, cascader_styles_default];
+SlCascader.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-popup": SlPopup,
+  "sl-tag": SlTag
+};
+/** Constants for showCheckedStrategy, matching Ant Design Cascader.SHOW_PARENT / Cascader.SHOW_CHILD */
+SlCascader.SHOW_PARENT = "show-parent";
+SlCascader.SHOW_CHILD = "show-child";
+__decorateClass([
+  query(".cascader")
+], SlCascader.prototype, "popup", 2);
+__decorateClass([
+  query(".cascader__combobox")
+], SlCascader.prototype, "combobox", 2);
+__decorateClass([
+  query(".cascader__display-input")
+], SlCascader.prototype, "displayInput", 2);
+__decorateClass([
+  query(".cascader__search-input")
+], SlCascader.prototype, "searchInput", 2);
+__decorateClass([
+  query(".cascader__value-input")
+], SlCascader.prototype, "valueInput", 2);
+__decorateClass([
+  query(".cascader__menu")
+], SlCascader.prototype, "menu", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "displayLabel", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "menus", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "selectedPath", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "expandedKeys", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "searchKeyword", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "searchResults", 2);
+__decorateClass([
+  state()
+], SlCascader.prototype, "selectedPaths", 2);
+__decorateClass([
+  property()
+], SlCascader.prototype, "name", 2);
+__decorateClass([
+  property({ type: Array })
+], SlCascader.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: "value", type: Array })
+], SlCascader.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCascader.prototype, "size", 2);
+__decorateClass([
+  property()
+], SlCascader.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlCascader.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlCascader.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "panel-disabled", reflect: true })
+], SlCascader.prototype, "panelDisabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "allow-clear" })
+], SlCascader.prototype, "allowClear", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlCascader.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "default-open" })
+], SlCascader.prototype, "defaultOpen", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlCascader.prototype, "hoist", 2);
+__decorateClass([
+  property()
+], SlCascader.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCascader.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SlCascader.prototype, "helpText", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCascader.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlCascader.prototype, "required", 2);
+__decorateClass([
+  property({ type: Array })
+], SlCascader.prototype, "options", 2);
+__decorateClass([
+  property({ type: Object, attribute: "field-names" })
+], SlCascader.prototype, "fieldNames", 2);
+__decorateClass([
+  property({ attribute: "expand-trigger" })
+], SlCascader.prototype, "expandTrigger", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "change-on-select" })
+], SlCascader.prototype, "changeOnSelect", 2);
+__decorateClass([
+  property()
+], SlCascader.prototype, "separator", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-full-path" })
+], SlCascader.prototype, "showFullPath", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCascader.prototype, "showSearch", 2);
+__decorateClass([
+  property({ attribute: "not-found-content" })
+], SlCascader.prototype, "notFoundContent", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCascader.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCascader.prototype, "status", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCascader.prototype, "loadData", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCascader.prototype, "displayRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCascader.prototype, "optionRender", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-tag-count" })
+], SlCascader.prototype, "maxTagCount", 2);
+__decorateClass([
+  property({ attribute: "max-tag-placeholder" })
+], SlCascader.prototype, "maxTagPlaceholder", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-tag-text-length" })
+], SlCascader.prototype, "maxTagTextLength", 2);
+__decorateClass([
+  property({ attribute: "show-checked-strategy" })
+], SlCascader.prototype, "showCheckedStrategy", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlCascader.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("options")
+], SlCascader.prototype, "handleOptionsChange", 1);
+__decorateClass([
+  watch("value")
+], SlCascader.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlCascader.prototype, "handleOpenChange", 1);
+
+export {
+  SlCascader
+};