@duskmoon-dev/el-cascader 0.5.0 → 0.6.0

package/dist/cjs/index.js

@@ -35,73 +35,46 @@ __export(exports_src, {
 module.exports = __toCommonJS(exports_src);
 
 // src/el-dm-cascader.ts
-var import_el_core = require("@duskmoon-dev/el-core");
+var import_el_base = require("@duskmoon-dev/el-base");
+var import_cascader = require("@duskmoon-dev/core/components/cascader");
 var chevronDownIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
 var chevronRightIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
 var checkIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 var closeIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
 var searchIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`;
 var loadingIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spinner"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`;
-var styles = import_el_core.css`
+var coreStyles = import_cascader.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
+var styles = import_el_base.css`
   :host {
     display: inline-block;
     width: 100%;
   }
 
+  ${coreStyles}
+
+  /* Override: block display for full-width behavior */
   .cascader {
-    position: relative;
-    width: 100%;
+    display: block;
   }
 
-  /* Trigger Button */
+  /* Override: trigger sizing & gap */
   .cascader-trigger {
-    display: flex;
-    align-items: center;
     gap: 0.5rem;
-    width: 100%;
     min-height: 2.75rem;
     padding: 0.5rem 0.75rem;
-    font-size: var(--font-size-md, 1rem);
-    line-height: 1.5;
-    color: var(--color-on-surface);
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-outline);
-    border-radius: var(--radius-md, 0.5rem);
-    cursor: pointer;
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-  }
-
-  .cascader-trigger:hover:not(:disabled) {
-    border-color: var(--color-on-surface-variant);
-  }
-
-  .cascader-trigger:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 15%, transparent);
-  }
-
-  .cascader-trigger:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    background-color: var(--color-surface-container);
   }
 
-  /* Value Display */
+  /* Override: value display as block text */
   .cascader-value {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: block;
     text-align: left;
   }
 
   .cascader-placeholder {
-    color: var(--color-on-surface-variant);
     opacity: 0.7;
   }
 
-  /* Tags Container (for multiple mode) */
+  /* Tags (not in core) */
   .cascader-tags {
     display: flex;
     flex-wrap: wrap;
@@ -161,81 +134,20 @@ var styles = import_el_core.css`
     color: var(--color-on-surface-variant);
   }
 
-  /* Icons */
-  .cascader-arrow {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    color: var(--color-on-surface-variant);
-    transition: transform 150ms ease;
-  }
-
-  .cascader-arrow svg {
-    width: 16px;
-    height: 16px;
-    display: block;
-  }
-
-  .cascader.open .cascader-arrow {
-    transform: rotate(180deg);
-  }
-
-  .cascader-clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: var(--color-on-surface-variant);
-    background-color: transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background-color 150ms ease;
-  }
-
+  /* Override: arrow/clear SVG sizing */
+  .cascader-arrow svg,
   .cascader-clear svg {
-    width: 14px;
-    height: 14px;
     display: block;
   }
 
-  .cascader-clear:hover {
-    background-color: var(--color-surface-container-high);
-  }
-
-  /* Dropdown - uses Popover API (top-layer requires position: fixed) */
+  /* Override: dropdown uses Popover API (top-layer requires position: fixed) */
   .cascader-dropdown {
     position: fixed;
-    margin: 0;
-    padding: 0;
-    border: 1px solid var(--color-outline-variant);
-    border-radius: var(--radius-md, 0.5rem);
-    background-color: var(--color-surface);
-    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-    overflow: hidden;
-    display: none;
     flex-direction: column;
     z-index: 1000;
   }
 
-  .cascader-dropdown:popover-open {
-    display: flex;
-  }
-
-  /* Search */
-  .cascader-search {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    border-bottom: 1px solid var(--color-outline-variant);
-  }
-
+  /* Search icon (not in core) */
   .cascader-search-icon {
     display: inline-flex;
     align-items: center;
@@ -252,86 +164,16 @@ var styles = import_el_core.css`
     display: block;
   }
 
-  .cascader-search-input {
-    flex: 1;
-    padding: 0.375rem 0.5rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-on-surface);
-    background-color: var(--color-surface-container);
-    border: none;
-    border-radius: var(--radius-sm, 0.25rem);
-    outline: none;
-  }
-
-  .cascader-search-input:focus {
-    background-color: var(--color-surface-container-high);
-  }
-
-  .cascader-search-input::placeholder {
-    color: var(--color-on-surface-variant);
-    opacity: 0.7;
-  }
-
-  /* Panels Container */
+  /* Override: panel max-height */
   .cascader-panels {
-    display: flex;
     max-height: 18rem;
   }
 
-  /* Panel */
   .cascader-panel {
-    display: flex;
-    flex-direction: column;
-    min-width: 10rem;
-    max-width: 14rem;
     max-height: 18rem;
-    overflow-y: auto;
-    border-right: 1px solid var(--color-outline-variant);
-  }
-
-  .cascader-panel:last-child {
-    border-right: none;
-  }
-
-  .cascader-panel-options {
-    padding: 0.25rem;
-  }
-
-  /* Option */
-  .cascader-option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-on-surface);
-    background-color: transparent;
-    border: none;
-    border-radius: var(--radius-sm, 0.25rem);
-    cursor: pointer;
-    text-align: left;
-    transition: background-color 150ms ease;
-  }
-
-  .cascader-option:hover:not(.disabled) {
-    background-color: var(--color-surface-container);
-  }
-
-  .cascader-option.active {
-    background-color: var(--color-surface-container-high);
-  }
-
-  .cascader-option.selected {
-    background-color: var(--color-primary-container, #e8def8);
-    color: var(--color-on-primary-container, #1d1b20);
-  }
-
-  .cascader-option.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
   }
 
+  /* Checkbox (not in core) */
   .cascader-option-checkbox {
     display: flex;
     align-items: center;
@@ -344,27 +186,13 @@ var styles = import_el_core.css`
     flex-shrink: 0;
   }
 
-  .cascader-option.selected .cascader-option-checkbox {
+  .cascader-option-selected .cascader-option-checkbox {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
     color: var(--color-on-primary, white);
   }
 
-  .cascader-option-label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .cascader-option-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-on-surface-variant);
-    flex-shrink: 0;
-  }
-
+  /* Loading spinner (not in core) */
   .cascader-option-loading {
     display: flex;
     align-items: center;
@@ -381,7 +209,7 @@ var styles = import_el_core.css`
     to { transform: rotate(360deg); }
   }
 
-  /* Search Results */
+  /* Search results (not in core) */
   .cascader-search-results {
     padding: 0.25rem;
     max-height: 18rem;
@@ -425,15 +253,7 @@ var styles = import_el_core.css`
     margin: 0 0.25rem;
   }
 
-  /* Empty State */
-  .cascader-empty {
-    padding: 1.5rem;
-    text-align: center;
-    color: var(--color-on-surface-variant);
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  /* Size Variants */
+  /* Size variants via :host (override core's container-class approach) */
   :host([size="sm"]) .cascader-trigger {
     min-height: 2.25rem;
     padding: 0.375rem 0.5rem;
@@ -448,7 +268,7 @@ var styles = import_el_core.css`
     border-radius: var(--radius-lg, 0.625rem);
   }
 
-  /* Validation States */
+  /* Validation states via :host (override core's container-class approach) */
   :host([validation-state="invalid"]) .cascader-trigger {
     border-color: var(--color-error);
   }
@@ -462,7 +282,7 @@ var styles = import_el_core.css`
     border-color: var(--color-success);
   }
 
-  /* Disabled State */
+  /* Disabled state via :host */
   :host([disabled]) {
     pointer-events: none;
   }
@@ -474,7 +294,7 @@ var styles = import_el_core.css`
   }
 `;
 
-class ElDmCascader extends import_el_core.BaseElement {
+class ElDmCascader extends import_el_base.BaseElement {
   static properties = {
     value: { type: String, reflect: true, default: "" },
     placeholder: { type: String, default: "Select..." },
@@ -842,7 +662,7 @@ class ElDmCascader extends import_el_core.BaseElement {
   }
   render() {
     return `
-      <div class="cascader ${this._isOpen ? "open" : ""}">
+      <div class="cascader ${this._isOpen ? "cascader-open" : ""}">
         ${this._renderTrigger()}
         ${this._renderDropdown()}
       </div>
@@ -930,9 +750,9 @@ class ElDmCascader extends import_el_core.BaseElement {
       const hasChildren = !this._isLeaf(option);
       const classes = [
         "cascader-option",
-        isActive ? "active" : "",
-        isSelected ? "selected" : "",
-        option.disabled ? "disabled" : ""
+        isActive ? "cascader-option-active" : "",
+        isSelected ? "cascader-option-selected" : "",
+        option.disabled ? "cascader-option-disabled" : ""
       ].filter(Boolean).join(" ");
       return `
           <button
@@ -952,7 +772,7 @@ class ElDmCascader extends import_el_core.BaseElement {
     }).join("");
     return `
       <div class="cascader-panel">
-        <div class="cascader-panel-options">${optionsHtml}</div>
+        <div class="cascader-options">${optionsHtml}</div>
       </div>
     `;
   }
@@ -1085,5 +905,5 @@ function register() {
   }
 }
 
-//# debugId=563AC9BF97CC5E2A64756E2164756E21
+//# debugId=861FBB6E5253C9AB64756E2164756E21
 //# sourceMappingURL=index.js.map