@lazhus/kg-ui 0.9.13 → 0.9.15

package/custom-elements.json

@@ -445,6 +445,19 @@
               "static": true,
               "default": "css` :host { display: inline-block; vertical-align: middle; } :host([fullwidth]) { display: block; margin: 0 0 0.5em 0; } button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-height: var(--kg-form-height); height: var(--kg-form-height); outline: none; border: none; vertical-align: top; background: var(--kg-border); color: var(--kg-text); font-family: inherit; margin: 0; padding: 0 1.5em; line-height: 1; text-transform: none; text-shadow: none; font-weight: 700; font-style: normal; text-align: center; text-decoration: none; border-radius: 4px; box-shadow: 0 0 0 1px transparent inset; user-select: none; transition: all 0.2s ease; position: relative; gap: 0.5em; box-sizing: border-box; } /* Reset padding for icon-only buttons to ensure 1:1 aspect ratio */ button.icon-only { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); gap: 0; flex-shrink: 0; } button.icon-only.circular { border-radius: 50%; } button:hover { filter: brightness(0.9); } button:focus-visible { outline: 2px solid var(--kg-primary); outline-offset: 2px; } button:active { filter: brightness(0.8); } /* Semantic Colors */ .primary { background-color: var(--kg-primary); color: #FFFFFF; } .secondary { background-color: var(--kg-secondary); color: #FFFFFF; } .tertiary { background-color: var(--kg-tertiary); color: #FFFFFF; } .error { background-color: #DB2828; color: #FFFFFF; } /* Custom Color Support */ .custom-color { background: var(--kg-custom-color) !important; color: #FFFFFF !important; border: none !important; } /* Variations */ .fullwidth { width: 100%; } .circular { border-radius: 10rem; } .square { padding: 0 !important; width: var(--kg-form-height); height: var(--kg-form-height); min-width: var(--kg-form-height); } .basic { background: transparent !important; box-shadow: 0 0 0 1px var(--kg-border) inset !important; color: var(--kg-text) !important; } .basic:hover { background: var(--kg-surface) !important; box-shadow: 0 0 0 1px var(--kg-text-muted) inset !important; } .basic.primary { color: var(--kg-primary) !important; box-shadow: 0 0 0 1px var(--kg-primary) inset !important; } .basic.secondary { color: var(--kg-secondary) !important; box-shadow: 0 0 0 1px var(--kg-secondary) inset !important; } .basic.tertiary { color: var(--kg-tertiary) !important; box-shadow: 0 0 0 1px var(--kg-tertiary) inset !important; } .basic.error { color: #DB2828 !important; box-shadow: 0 0 0 1px #DB2828 inset !important; } .text { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--kg-text) !important; padding-left: 0.5em !important; padding-right: 0.5em !important; } .text:hover { background: var(--kg-surface) !important; color: var(--kg-primary) !important; } .text.primary { color: var(--kg-primary) !important; } .text.secondary { color: var(--kg-secondary) !important; } /* Sizes */ .mini { font-size: 0.7rem; padding: 0.4em 0.8em; } .tiny { font-size: 0.8rem; padding: 0.5em 1em; } .small { font-size: 0.9rem; padding: 0.6em 1.25em; } .medium { font-size: 1rem; padding: 0.78em 1.5em; } .large { font-size: 1.1rem; padding: 0.85em 1.75em; } .big { font-size: 1.25rem; padding: 0.9em 2em; } .huge { font-size: 1.4rem; padding: 1em 2.25em; } .massive { font-size: 1.6rem; padding: 1.1em 2.5em; } /* Loading */ .loading { cursor: default !important; pointer-events: none !important; color: transparent !important; } .loading::after { position: absolute; content: ''; top: 50%; left: 50%; width: 1.15em; height: 1.15em; border-radius: 50%; border: 0.2em solid rgba(0, 0, 0, 0.1); border-top-color: var(--kg-text); transform: translate(-50%, -50%); animation: button-spin 0.6s linear infinite; } /* Spinner colors for semantic/colored buttons */ .primary.loading::after, .secondary.loading::after, .tertiary.loading::after, .error.loading::after, .custom-color.loading::after { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } /* Basic buttons should use their respective semantic colors for the spinner */ .basic.primary.loading::after { border-top-color: var(--kg-primary); } .basic.secondary.loading::after { border-top-color: var(--kg-secondary); } .basic.tertiary.loading::after { border-top-color: var(--kg-tertiary); } .basic.error.loading::after { border-top-color: #DB2828; } @keyframes button-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Disabled */ button:disabled { cursor: default !important; opacity: 0.45 !important; box-shadow: none !important; pointer-events: none !important; } `"
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociated",
+                "module": "src/mixins/FormAssociated.js"
+              }
+            },
             {
               "kind": "field",
               "name": "_handleGlobalEnter"
@@ -550,19 +563,6 @@
                 "module": "src/mixins/FormAssociated.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "updated",
-              "parameters": [
-                {
-                  "name": "changedProperties"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "FormAssociated",
-                "module": "src/mixins/FormAssociated.js"
-              }
-            },
             {
               "kind": "method",
               "name": "_updateFormValue",

package/dist/components/kg-button.js

@@ -1,4 +1,4 @@
-var t=Object.defineProperty,e=(e,o,r)=>((e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r)(e,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as i}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(n(o)){constructor(){super(),e(this,"_handleGlobalEnter",t=>{if("Enter"===t.key&&!this.disabled&&!this.loading){if("TEXTAREA"===document.activeElement.tagName)return;const e=this.getBoundingClientRect();if(e.width>0&&e.height>0){const e=document.activeElement.tagName;if("BUTTON"===e||"A"===e)return;this._handleClick(t);const o=this.shadowRoot.querySelector("button");o&&o.click()}}}),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1,this.type="button",this.isDefault=!1}connectedCallback(){super.connectedCallback(),this.isDefault&&window.addEventListener("keydown",this._handleGlobalEnter)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._handleGlobalEnter)}_handleSlotChange(t){const e=t.target,o=e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;e.name?"left"===e.name?this.hasLeft=o:"right"===e.name&&(this.hasRight=o):this.hasText=o}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),e=this.color&&!t,o=!this.hasText&&(this.hasLeft||this.hasRight),r={[this.color]:t,"custom-color":e,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":o},n=e?`border: none; --kg-custom-color: ${this.color};`:"";return i`
+var t=Object.defineProperty,e=(e,o,r)=>((e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r)(e,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as i}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(n(o)){constructor(){super(),e(this,"_handleGlobalEnter",t=>{if("Enter"===t.key&&!this.disabled&&!this.loading){if("TEXTAREA"===document.activeElement.tagName)return;const e=this.getBoundingClientRect();if(e.width>0&&e.height>0){const e=document.activeElement.tagName;if("BUTTON"===e||"A"===e)return;this._handleClick(t);const o=this.shadowRoot.querySelector("button");o&&o.click()}}}),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1,this.type="button",this.isDefault=!1}updated(t){t.has("isDefault")&&(this.isDefault?window.addEventListener("keydown",this._handleGlobalEnter):window.removeEventListener("keydown",this._handleGlobalEnter)),super.updated(t)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._handleGlobalEnter)}_handleSlotChange(t){const e=t.target,o=e.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;e.name?"left"===e.name?this.hasLeft=o:"right"===e.name&&(this.hasRight=o):this.hasText=o}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),e=this.color&&!t,o=!this.hasText&&(this.hasLeft||this.hasRight),r={[this.color]:t,"custom-color":e,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":o},n=e?`border: none; --kg-custom-color: ${this.color};`:"";return i`
       <button 
         class="${a(r)}"
         style="${n}"

package/dist/components/kg-input.js

@@ -1,4 +1,4 @@
-var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(i)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},loading:{type:Boolean},error:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},inverted:{type:Boolean,reflect:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0},_showPassword:{type:Boolean,state:!0},positive:{type:Boolean,reflect:!0},integer:{type:Boolean,reflect:!0}}}constructor(){super(),this.placeholder="",this.hasLeft=!1,this.hasRight=!1,this._showPassword=!1}_handleKeyDown(e){"Enter"===e.key&&this.form?this.form.requestSubmit():"number"===this.type&&("e"!==e.key&&"E"!==e.key&&(!this.positive||"-"!==e.key&&"_"!==e.key)&&(!this.integer||"."!==e.key&&","!==e.key)||e.preventDefault())}_handleInput(e){let t=e.target.value;"number"===this.type&&(this.integer?this.positive?t=t.replace(/\D/g,""):(t=t.replace(/[^\d-]/g,""),t.indexOf("-")>0&&(t=t.slice(0,t.indexOf("-"))+t.slice(t.indexOf("-")+1))):this.positive&&(t=t.replace(/-/g,"")),e.target.value!==t&&(e.target.value=t)),this.value=t,this.dispatchEvent(new CustomEvent("kg-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSlotChange(e){const t=e.target;if(!t)return;const i=t.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent.trim().length>0);"left"===t.name&&(this.hasLeft=i),"right"===t.name&&(this.hasRight=i)}_togglePassword(){this._showPassword=!this._showPassword}render(){const e={"ui-input":!0,[this.size]:!!this.size,disabled:this.disabled,loading:this.loading,error:this.error||!!this.errorText,fullwidth:this.fullwidth,inverted:this.inverted},t="number"===this.type,i="password"===this.type?this._showPassword?"text":"password":t?"text":this.type,r="password"===this.type?this.hasRight?"5rem":"3rem":this.hasRight?"3rem":"1rem",a=t?this.integer?"numeric":"decimal":"";return o`
+var e,t=Object.defineProperty;import{LitElement as i,css as r,html as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(a(i)){static get properties(){return{...super.properties,label:{type:String},placeholder:{type:String},loading:{type:Boolean},error:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},inverted:{type:Boolean,reflect:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0},_showPassword:{type:Boolean,state:!0},positive:{type:Boolean,reflect:!0},integer:{type:Boolean,reflect:!0}}}constructor(){super(),this.placeholder="",this.hasLeft=!1,this.hasRight=!1,this._showPassword=!1}_handleKeyDown(e){if("Enter"===e.key){const t=this.internals.form;if(t){const i=t.querySelector('kg-button[type="submit"], kg-button[is-default], button[type="submit"]');if(i)return i.tagName,i.click(),void e.preventDefault();t.requestSubmit()}}"number"===this.type&&("e"!==e.key&&"E"!==e.key&&(!this.positive||"-"!==e.key&&"_"!==e.key)&&(!this.integer||"."!==e.key&&","!==e.key)||e.preventDefault())}_handleInput(e){let t=e.target.value;"number"===this.type&&(this.integer?this.positive?t=t.replace(/\D/g,""):(t=t.replace(/[^\d-]/g,""),t.indexOf("-")>0&&(t=t.slice(0,t.indexOf("-"))+t.slice(t.indexOf("-")+1))):this.positive&&(t=t.replace(/-/g,"")),e.target.value!==t&&(e.target.value=t)),this.value=t,this.dispatchEvent(new CustomEvent("kg-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSlotChange(e){const t=e.target;if(!t)return;const i=t.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent.trim().length>0);"left"===t.name&&(this.hasLeft=i),"right"===t.name&&(this.hasRight=i)}_togglePassword(){this._showPassword=!this._showPassword}render(){const e={"ui-input":!0,[this.size]:!!this.size,disabled:this.disabled,loading:this.loading,error:this.error||!!this.errorText,fullwidth:this.fullwidth,inverted:this.inverted},t="number"===this.type,i="password"===this.type?this._showPassword?"text":"password":t?"text":this.type,r="password"===this.type?this.hasRight?"5rem":"3rem":this.hasRight?"3rem":"1rem",a=t?this.integer?"numeric":"decimal":"";return o`
       <div class="kg-input-container" style="--loading-offset: ${r}">
         ${this.label?o`<label class="input-label">${this.label}</label>`:""}
         <div class="${n(e)}">

package/package.json

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