@lazhus/kg-ui 0.10.4 → 0.10.5

package/custom-elements.json

@@ -4720,7 +4720,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",

package/dist/components/kg-select.js

@@ -141,6 +141,9 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
     .selected-text {
       color: var(--kg-text);
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .tags-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "type": "module",
   "files": [
     "dist",