@lazhus/kg-ui 0.5.3 → 0.7.0

package/custom-elements.json

@@ -414,7 +414,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true }, type: { type: String } }"
+              "default": "{ color: { type: String }, // primary, secondary, tertiary, red, green, etc. size: { type: String }, // mini, tiny, small, medium, large, big, huge, massive fullwidth: { type: Boolean }, circular: { type: Boolean }, square: { type: Boolean }, loading: { type: Boolean }, disabled: { type: Boolean }, basic: { type: Boolean }, inverted: { type: Boolean }, active: { type: Boolean }, text: { type: Boolean }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true } }"
             },
             {
               "kind": "field",
@@ -493,6 +493,12 @@
               "default": "'button'"
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -630,13 +636,39 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ checked: { type: Boolean, reflect: true }, label: { type: String }, disabled: { type: Boolean }, color: { type: String }, indeterminate: { type: Boolean } }"
+              "default": "{ checked: { type: Boolean, reflect: true }, label: { type: String }, indeterminate: { type: Boolean }, // disabled and value are handled by mixin color: { type: String } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } /* Checkmark Icon */ .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } `"
+              "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-checkbox-container { display: flex; align-items: center; gap: 10px; position: relative; } .checkbox-box { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-checkbox-container:hover .checkbox-box { border-color: var(--checkbox-active-color, var(--kg-primary)); } .kg-checkbox-container.checked .checkbox-box { background: var(--checkbox-active-color, var(--kg-primary)); border-color: var(--checkbox-active-color, var(--kg-primary)); } .checkmark { width: 12px; height: 12px; color: white; opacity: 0; transform: scale(0.5) rotate(-45deg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .checked .checkmark { opacity: 1; transform: scale(1) rotate(0); } /* Indeterminate state */ .checkbox-box::after { content: ''; position: absolute; width: 10px; height: 2px; background: white; border-radius: 1px; opacity: 0; transform: scaleX(0.5); transition: all 0.2s; } .kg-checkbox-container.indeterminate .checkbox-box { background: var(--kg-primary); border-color: var(--kg-primary); } .indeterminate .checkbox-box::after { opacity: 1; transform: scaleX(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } `"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateFormValue"
             },
             {
               "kind": "method",
@@ -656,7 +688,7 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
@@ -664,11 +696,11 @@
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "'on'"
             }
           ],
           "events": [
@@ -679,6 +711,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -722,7 +760,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: String, reflect: true }, label: { type: String }, open: { type: Boolean }, disabled: { type: Boolean } }"
+              "default": "{ // value, disabled, name handled by mixin label: { type: String }, open: { type: Boolean } }"
             },
             {
               "kind": "field",
@@ -790,14 +828,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "_presets",
@@ -815,9 +845,15 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
-            "package": "lit"
+            "module": "src/components/kg-colorpicker.js"
           },
           "tagName": "kg-colorpicker",
           "customElement": true
@@ -1219,7 +1255,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: String, reflect: true }, open: { type: Boolean, reflect: true }, disabled: { type: Boolean, reflect: true }, placeholder: { type: String }, label: { type: String }, showTime: { type: Boolean }, mode: { type: String }, // 'date', 'month', 'year' locale: { type: String }, min: { type: String }, max: { type: String }, _viewDate: { type: Object }, _selectedDate: { type: Object } }"
+              "default": "{ // value, disabled, name handled by mixin open: { type: Boolean, reflect: true }, placeholder: { type: String }, label: { type: String }, showTime: { type: Boolean }, mode: { type: String }, // 'date', 'month', 'year' locale: { type: String }, min: { type: String }, max: { type: String }, _viewDate: { type: Object }, _selectedDate: { type: Object } }"
             },
             {
               "kind": "field",
@@ -1484,9 +1520,15 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
-            "package": "lit"
+            "module": "src/components/kg-datepicker.js"
           },
           "tagName": "kg-datepicker",
           "customElement": true
@@ -1750,13 +1792,17 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ label: { type: String }, placeholder: { type: String }, accept: { type: String }, multiple: { type: Boolean }, disabled: { type: Boolean }, hideChips: { type: Boolean, attribute: 'hide-chips' }, files: { type: Array, state: true }, _previews: { state: true } }"
+              "default": "{ // value, disabled, name handled by mixin label: { type: String }, placeholder: { type: String }, accept: { type: String }, multiple: { type: Boolean }, hideChips: { type: Boolean, attribute: 'hide-chips' }, files: { type: Array, state: true }, _previews: { state: true } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { display: flex; flex-direction: column; gap: 0.5rem; } .label { font-size: 0.85rem; font-weight: 600; color: var(--kg-text); } .upload-wrapper { display: flex; align-items: stretch; border: 2px solid var(--kg-border); border-radius: 10px; overflow: hidden; background: var(--kg-bg-primary); transition: all 0.2s ease; height: var(--kg-form-height); cursor: pointer; } .upload-wrapper:hover:not(.disabled) { border-color: var(--kg-primary); } .upload-wrapper.active { border-color: var(--kg-primary); box-shadow: 0 0 0 3px rgba(65, 171, 52, 0.1); } .upload-wrapper.disabled { opacity: 0.6; cursor: not-allowed; background: var(--kg-bg-secondary); } .file-display { flex: 1; display: flex; align-items: center; padding: 0 1rem; font-size: 0.9rem; color: var(--kg-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-display.has-file { color: var(--kg-text); font-weight: 500; } .divider { width: 1px; background: var(--kg-border); margin: 8px 0; transition: background 0.2s ease; } .upload-wrapper:hover .divider { background: var(--kg-primary); opacity: 0.3; } .upload-btn { width: 48px; display: flex; align-items: center; justify-content: center; color: var(--kg-primary); background: transparent; transition: all 0.2s ease; } .upload-wrapper:hover .upload-btn { background: rgba(65, 171, 52, 0.05); } input[type=\"file\"] { display: none; } /* File Chips below for multiple */ .file-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--kg-bg-secondary); border: 1px solid var(--kg-border); border-radius: 20px; font-size: 0.8rem; animation: slideIn 0.2s ease; } .chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-remove { cursor: pointer; color: var(--kg-text-muted); display: flex; align-items: center; } .chip-remove:hover { color: #e74c3c; } @keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .preview-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--kg-border); } .chip .preview-thumb { width: 20px; height: 20px; margin-right: 6px; } `"
+              "default": "css` :host { display: block; width: 100%; font-family: inherit; } .container { display: flex; flex-direction: column; gap: 0.5rem; } .label { font-size: 0.85rem; font-weight: 600; color: var(--kg-text); } .upload-wrapper { display: flex; align-items: stretch; border: 2px solid var(--kg-border); border-radius: 10px; overflow: hidden; background: var(--kg-bg-primary); transition: all 0.2s ease; height: var(--kg-form-height); cursor: pointer; } .upload-wrapper:hover:not(.disabled) { border-color: var(--kg-primary); } .upload-wrapper.active { border-color: var(--kg-primary); box-shadow: 0 0 0 3px rgba(65, 171, 52, 0.1); } .upload-wrapper.disabled { opacity: 0.6; cursor: not-allowed; background: var(--kg-bg-secondary); } .file-display { flex: 1; display: flex; align-items: center; padding: 0 1rem; font-size: 0.9rem; color: var(--kg-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-display.has-file { color: var(--kg-text); font-weight: 500; } .divider { width: 1px; background: var(--kg-border); margin: 8px 0; transition: background 0.2s ease; } .upload-wrapper:hover .divider { background: var(--kg-primary); opacity: 0.3; } .upload-btn { width: 48px; display: flex; align-items: center; justify-content: center; color: var(--kg-primary); background: transparent; transition: all 0.2s ease; } .upload-wrapper:hover .upload-btn { background: rgba(65, 171, 52, 0.05); } input[type=\"file\"] { display: none; } .file-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--kg-bg-secondary); border: 1px solid var(--kg-border); border-radius: 20px; font-size: 0.8rem; animation: slideIn 0.2s ease; } .chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-remove { cursor: pointer; color: var(--kg-text-muted); display: flex; align-items: center; } .chip-remove:hover { color: #e74c3c; } @keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .preview-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--kg-border); } .chip .preview-thumb { width: 20px; height: 20px; margin-right: 6px; } `"
+            },
+            {
+              "kind": "method",
+              "name": "_updateFormValue"
             },
             {
               "kind": "method",
@@ -1836,14 +1882,6 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -1868,14 +1906,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "hideChips",
@@ -1906,6 +1936,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -2150,7 +2186,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: String }, label: { type: String }, placeholder: { type: String }, type: { type: String }, size: { type: String }, disabled: { type: Boolean }, loading: { type: Boolean }, error: { type: Boolean }, fullwidth: { type: Boolean, reflect: true }, inverted: { type: Boolean, reflect: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true }, _showPassword: { type: Boolean, state: true }, positive: { type: Boolean, reflect: true }, integer: { type: Boolean, reflect: true } }"
+              "default": "{ // value, type, disabled are now handled by FormAssociated label: { type: String }, placeholder: { type: String }, loading: { type: Boolean }, error: { type: Boolean }, fullwidth: { type: Boolean, reflect: true }, inverted: { type: Boolean, reflect: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true }, _showPassword: { type: Boolean, state: true }, positive: { type: Boolean, reflect: true }, integer: { type: Boolean, reflect: true } }"
             },
             {
               "kind": "field",
@@ -2193,22 +2229,6 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "string"
-              },
-              "default": "'text'"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -2250,6 +2270,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -2841,7 +2867,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: String, reflect: true }, direction: { type: String }, // horizontal, vertical label: { type: String } }"
+              "default": "{ // value, name handled by mixin direction: { type: String }, // horizontal, vertical label: { type: String } }"
             },
             {
               "kind": "field",
@@ -2904,9 +2930,15 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
-            "package": "lit"
+            "module": "src/components/kg-radio-group.js"
           },
           "tagName": "kg-radio-group",
           "customElement": true
@@ -2947,13 +2979,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ checked: { type: Boolean, reflect: true }, label: { type: String }, name: { type: String }, value: { type: String }, disabled: { type: Boolean }, color: { type: String } }"
+              "default": "{ checked: { type: Boolean, reflect: true }, label: { type: String }, // name, value, disabled handled by mixin color: { type: String } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-radio-container { display: flex; align-items: center; gap: 10px; position: relative; } .radio-circle { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-radio-container:hover .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .kg-radio-container.checked .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } /* Inner Dot */ .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--radio-active-color, var(--kg-primary)); border-radius: 50%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .checked .radio-circle::after { transform: scale(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } /* States */ .disabled { opacity: 0.5; cursor: not-allowed; } .disabled .radio-circle { background: var(--kg-surface); } `"
+              "default": "css` :host { display: inline-block; cursor: pointer; user-select: none; font-family: inherit; } .kg-radio-container { display: flex; align-items: center; gap: 10px; position: relative; } .radio-circle { width: 20px; height: 20px; border: 2px solid var(--kg-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kg-bg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; flex-shrink: 0; } .kg-radio-container:hover .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .kg-radio-container.checked .radio-circle { border-color: var(--radio-active-color, var(--kg-primary)); } .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--radio-active-color, var(--kg-primary)); border-radius: 50%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .checked .radio-circle::after { transform: scale(1); } .label-text { font-size: 0.95rem; color: var(--kg-text); transition: color 0.2s; } .disabled { opacity: 0.5; cursor: not-allowed; } .disabled .radio-circle { background: var(--kg-surface); } `"
             },
             {
               "kind": "method",
@@ -2961,19 +2993,41 @@
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "_uncheckOthers"
             },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "kind": "method",
+              "name": "_updateFormValue"
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
@@ -2986,6 +3040,18 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
             }
           ],
           "superclass": {
@@ -3111,13 +3177,17 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ options: { type: Array }, value: { type: Object }, // Can be string or array placeholder: { type: String }, label: { type: String }, multiple: { type: Boolean }, disabled: { type: Boolean }, searchable: { type: Boolean }, _open: { type: Boolean, state: true }, _searchQuery: { type: String, state: true } }"
+              "default": "{ options: { type: Array }, value: { type: Object }, // Can be string, array, or object placeholder: { type: String }, label: { type: String }, multiple: { type: Boolean }, searchable: { type: Boolean }, _open: { type: Boolean, state: true }, _searchQuery: { type: String, state: true } // disabled is handled by mixin }"
             },
             {
               "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%; } .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); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); 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: 1000; 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; } `"
+              "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%; } .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); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); 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: 1000; 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; } `"
+            },
+            {
+              "kind": "method",
+              "name": "_updateFormValue"
             },
             {
               "kind": "method",
@@ -3214,14 +3284,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "searchable",
@@ -3255,6 +3317,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -3394,7 +3462,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: Number, reflect: true }, min: { type: Number }, max: { type: Number }, step: { type: Number }, label: { type: String }, color: { type: String }, disabled: { type: Boolean, reflect: true }, hideValue: { type: Boolean, reflect: true, attribute: 'hide-value' }, showPins: { type: Boolean, attribute: 'show-pins' } }"
+              "default": "{ // value, disabled, name handled by mixin min: { type: Number }, max: { type: Number }, step: { type: Number }, label: { type: String }, color: { type: String }, hideValue: { type: Boolean, reflect: true, attribute: 'hide-value' }, showPins: { type: Boolean, attribute: 'show-pins' } }"
             },
             {
               "kind": "field",
@@ -3415,14 +3483,6 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "50"
-            },
             {
               "kind": "field",
               "name": "min",
@@ -3449,11 +3509,11 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false"
+              "default": "50"
             },
             {
               "kind": "field",
@@ -3480,9 +3540,15 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
-            "package": "lit"
+            "module": "src/components/kg-slider.js"
           },
           "tagName": "kg-slider",
           "customElement": true
@@ -3708,7 +3774,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ checked: { type: Boolean, reflect: true }, disabled: { type: Boolean }, label: { type: String }, color: { type: String } // primary, secondary, tertiary }"
+              "default": "{ checked: { type: Boolean, reflect: true }, label: { type: String }, color: { type: String } // primary, secondary, tertiary // disabled and value handled by mixin }"
             },
             {
               "kind": "field",
@@ -3716,6 +3782,32 @@
               "static": true,
               "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } `"
             },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateFormValue"
+            },
             {
               "kind": "method",
               "name": "_toggle"
@@ -3734,19 +3826,19 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "'primary'"
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "'primary'"
+              "default": "'on'"
             }
           ],
           "events": [
@@ -3757,6 +3849,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
@@ -4163,13 +4261,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ value: { type: String }, label: { type: String }, placeholder: { type: String }, rows: { type: Number }, disabled: { type: Boolean, reflect: true }, error: { type: Boolean, reflect: true }, fullwidth: { type: Boolean, reflect: true }, inverted: { type: Boolean, reflect: true }, resize: { type: String, reflect: true } // none, both, horizontal, vertical }"
+              "default": "{ // value, disabled handled by mixin label: { type: String }, placeholder: { type: String }, rows: { type: Number }, error: { type: Boolean, reflect: true }, fullwidth: { type: Boolean, reflect: true }, inverted: { type: Boolean, reflect: true }, resize: { type: String, reflect: true } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } /* Allow host to grow with content if resize is allowed */ :host([resize=\"both\"]), :host([resize=\"horizontal\"]) { display: inline-block; width: auto; min-width: 100px; } .kg-textarea-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .textarea-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-textarea { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .textarea-wrapper { display: flex; width: 100%; height: 100%; align-items: stretch; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; position: relative; } .textarea-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } textarea { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); text-align: left; line-height: 1.5; font-family: inherit; padding: 0.75rem 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; min-height: 5rem; } textarea::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error .textarea-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } /* Variations */ :host([inverted]) .textarea-label { color: rgba(255, 255, 255, 0.9); } :host([inverted]) .textarea-wrapper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; } :host([inverted]) .textarea-wrapper:focus-within { background: rgba(255, 255, 255, 0.12); border-color: var(--kg-primary); } :host([inverted]) textarea::placeholder { color: rgba(255, 255, 255, 0.5); } `"
+              "default": "css` :host { display: inline-block; max-width: 100%; vertical-align: top; } :host([fullwidth]) { display: block; width: 100%; } :host([resize=\"both\"]), :host([resize=\"horizontal\"]) { display: inline-block; width: auto; min-width: 100px; } .kg-textarea-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .textarea-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } .ui-textarea { display: inline-flex; width: 100%; color: var(--kg-text); font-family: inherit; } .textarea-wrapper { display: flex; width: 100%; height: 100%; align-items: stretch; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; position: relative; } .textarea-wrapper:focus-within { border-color: var(--kg-primary); background: var(--kg-bg); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } textarea { margin: 0; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-align: left; line-height: 1.5; font-family: inherit; padding: 0.75rem 1rem; background: transparent; border: none; color: inherit; min-width: 0; width: 100%; min-height: 5rem; } textarea::placeholder { color: var(--kg-text-muted); opacity: 0.6; } /* States */ .disabled { opacity: 0.45; pointer-events: none; } .error.textarea-wrapper { border-color: #DB2828; background-color: rgba(219, 40, 40, 0.02); } /* Variations */ :host([inverted]) .textarea-label { color: rgba(255, 255, 255, 0.9); } :host([inverted]) .textarea-wrapper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; } :host([inverted]) .textarea-wrapper:focus-within { background: rgba(255, 255, 255, 0.12); border-color: var(--kg-primary); } :host([inverted]) textarea::placeholder { color: rgba(255, 255, 255, 0.5); } `"
             },
             {
               "kind": "method",
@@ -4184,14 +4282,6 @@
               "kind": "method",
               "name": "render"
             },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -4208,14 +4298,6 @@
               },
               "default": "3"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "error",
@@ -4257,6 +4339,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "module": "/src/mixins/FormAssociated.js"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/chunks/FormAssociated-Ca1JavvX.js

@@ -0,0 +1 @@
+import{isServer as t}from"lit";const e=e=>class extends e{static get properties(){return{name:{type:String,reflect:!0},value:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},type:{type:String,reflect:!0}}}static get formAssociated(){return!0}constructor(){super(),this.name="",this.value="",this.disabled=!1,this.required=!1,this.type="text",!t&&this.attachInternals&&(this.internals=this.attachInternals())}get form(){return this.internals?this.internals.form:null}updated(t){super.updated(t),(t.has("value")||t.has("disabled"))&&this._updateFormValue()}_updateFormValue(){!t&&this.internals&&this.internals.setFormValue(this.value)}formResetCallback(){this.value=this.getAttribute("value")||""}formStateRestoreCallback(t){this.value=t}setValidity(e,i,s){!t&&this.internals&&this.internals.setValidity(e,i,s)}checkValidity(){return!this.internals||this.internals.checkValidity()}reportValidity(){return!this.internals||this.internals.reportValidity()}};export{e as F};