@lazhus/kg-ui 0.9.12 → 0.9.13

package/custom-elements.json

@@ -433,7 +433,7 @@
               "type": {
                 "text": "object"
               },
-              "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 } }",
+              "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 }, isDefault: { type: Boolean, attribute: 'is-default' }, hasText: { type: Boolean, state: true }, hasLeft: { type: Boolean, state: true }, hasRight: { type: Boolean, state: true } }",
               "inheritedFrom": {
                 "name": "FormAssociated",
                 "module": "src/mixins/FormAssociated.js"
@@ -445,6 +445,10 @@
               "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": "field",
+              "name": "_handleGlobalEnter"
+            },
             {
               "kind": "method",
               "name": "_handleSlotChange",
@@ -519,6 +523,14 @@
                 "module": "src/mixins/FormAssociated.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "isDefault",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "formAssociated",

package/dist/components/kg-button.js

@@ -1,6 +1,6 @@
-var t=Object.defineProperty,o=(o,e,r)=>((o,e,r)=>e in o?t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r)(o,"symbol"!=typeof e?e+"":e,r);import{LitElement as e,css as r,html as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class s extends(n(e)){constructor(){super(),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1,this.type="button"}_handleSlotChange(t){const o=t.target,e=o.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;o.name?"left"===o.name?this.hasLeft=e:"right"===o.name&&(this.hasRight=e):this.hasText=e}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),o=this.color&&!t,e=!this.hasText&&(this.hasLeft||this.hasRight),r={[this.color]:t,"custom-color":o,[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":e},n=o?`border: none; --kg-custom-color: ${this.color};`:"";return a`
+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`
       <button 
-        class="${i(r)}"
+        class="${a(r)}"
         style="${n}"
         ?disabled=${this.disabled}
         @click=${this._handleClick}
@@ -13,7 +13,7 @@ var t=Object.defineProperty,o=(o,e,r)=>((o,e,r)=>e in o?t(o,e,{enumerable:!0,con
         
         <slot name="right" @slotchange=${this._handleSlotChange}></slot>
       </button>
-    `}_handleClick(t){if(this.loading||this.disabled)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.form?this.form.requestSubmit():"reset"===this.type&&this.form&&this.form.reset()}}o(s,"shadowRootOptions",{...e.shadowRootOptions,delegatesFocus:!0}),o(s,"properties",{color:{type:String},size:{type:String},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:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),o(s,"styles",r`
+    `}_handleClick(t){if(this.loading||this.disabled)return t.preventDefault(),void t.stopPropagation();"submit"===this.type&&this.form?this.form.requestSubmit():"reset"===this.type&&this.form&&this.form.reset()}}e(s,"shadowRootOptions",{...o.shadowRootOptions,delegatesFocus:!0}),e(s,"properties",{color:{type:String},size:{type:String},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},isDefault:{type:Boolean,attribute:"is-default"},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),e(s,"styles",r`
     :host {
       display: inline-block;
       vertical-align: middle;

package/package.json

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

package/types/components/kg-button.d.ts

@@ -25,6 +25,8 @@ export class kgbutton extends LitElement {
   /**  */
   type: string;
   /**  */
+  isDefault: boolean;
+  /**  */
   form: any;
   /** Generated from static properties */
   fullwidth: boolean;
@@ -63,6 +65,7 @@ declare global {
       hasLeft?: boolean;
       hasRight?: boolean;
       type?: string;
+      isDefault?: boolean;
       form?: any;
       fullwidth?: boolean;
       circular?: boolean;

package/types/index.d.ts

@@ -133,6 +133,7 @@ declare global {
       hasLeft?: boolean;
       hasRight?: boolean;
       type?: string;
+      isDefault?: boolean;
       form?: any;
       fullwidth?: boolean;
       circular?: boolean;