le-kit 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1075 -1075
- package/dist/{core/cjs/index-D7B9TPh8.js → cjs/index-o1DRKw1g.js} +11 -4
- package/dist/cjs/index-o1DRKw1g.js.map +1 -0
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/le-box.cjs.entry.js +2 -2
- package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.cjs.js.map +1 -1
- package/dist/cjs/le-button_6.cjs.entry.js +11 -5
- package/dist/cjs/le-card.cjs.entry.js +2 -2
- package/dist/cjs/le-kit.cjs.js +1 -1
- package/dist/cjs/le-number-input.cjs.entry.js +2 -2
- package/dist/cjs/le-popup.cjs.entry.js +1 -1
- package/dist/cjs/le-round-progress.cjs.entry.js +1 -1
- package/dist/cjs/le-stack.cjs.entry.js +2 -2
- package/dist/cjs/le-text.cjs.entry.js +2 -2
- package/dist/cjs/le-turntable.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/{core/cjs/utils-DrsoID-a.js → cjs/utils-DqhadIxH.js} +3 -3
- package/dist/cjs/{utils-DrsoID-a.js.map → utils-DqhadIxH.js.map} +1 -1
- package/dist/collection/assets/custom-elements.json +4305 -0
- package/dist/collection/components/le-component/le-component.js +5 -2
- package/dist/collection/components/le-component/le-component.js.map +1 -1
- package/dist/collection/components/le-slot/le-slot.js +6 -3
- package/dist/collection/components/le-slot/le-slot.js.map +1 -1
- package/dist/collection/global/app.js +1 -1
- package/dist/collection/global/app.js.map +1 -1
- package/dist/collection/index.js +1 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/themes/base.css +89 -0
- package/dist/collection/themes/dark.css +100 -0
- package/dist/collection/themes/default.css +108 -0
- package/dist/collection/themes/gradient.css +100 -0
- package/dist/collection/themes/index.css +413 -0
- package/dist/collection/themes/minimal.css +100 -0
- package/dist/collection/themes/warm.css +100 -0
- package/dist/{cjs/index-D7B9TPh8.js → core/cjs/index-BsRb_UTe.js} +4 -4
- package/dist/core/cjs/index-BsRb_UTe.js.map +1 -0
- package/dist/core/cjs/index.cjs.js +3 -3
- package/dist/core/cjs/le-box.cjs.entry.js +2 -2
- package/dist/core/cjs/le-button.cjs.entry.js +2 -2
- package/dist/core/cjs/le-card.cjs.entry.js +2 -2
- package/dist/core/cjs/le-checkbox.cjs.entry.js +2 -2
- package/dist/core/cjs/le-kit.cjs.js +1 -1
- package/dist/core/cjs/le-number-input.cjs.entry.js +2 -2
- package/dist/core/cjs/le-popover.cjs.entry.js +1 -1
- package/dist/core/cjs/le-popup.cjs.entry.js +1 -1
- package/dist/core/cjs/le-round-progress.cjs.entry.js +1 -1
- package/dist/core/cjs/le-stack.cjs.entry.js +2 -2
- package/dist/core/cjs/le-string-input.cjs.entry.js +2 -2
- package/dist/core/cjs/le-text.cjs.entry.js +2 -2
- package/dist/core/cjs/le-turntable.cjs.entry.js +1 -1
- package/dist/core/cjs/loader.cjs.js +1 -1
- package/dist/{cjs/utils-DrsoID-a.js → core/cjs/utils-nsP8_w8_.js} +3 -3
- package/dist/core/cjs/{utils-DrsoID-a.js.map → utils-nsP8_w8_.js.map} +1 -1
- package/dist/core/collection/global/app.js +1 -1
- package/dist/core/collection/global/app.js.map +1 -1
- package/dist/core/collection/index.js +1 -1
- package/dist/core/collection/index.js.map +1 -1
- package/dist/core/esm/{index-PS-3Rz-c.js → index-CJ-z5Zj1.js} +4 -4
- package/dist/core/esm/index-CJ-z5Zj1.js.map +1 -0
- package/dist/core/esm/index.js +2 -2
- package/dist/core/esm/le-box.entry.js +2 -2
- package/dist/core/esm/le-button.entry.js +2 -2
- package/dist/core/esm/le-card.entry.js +2 -2
- package/dist/core/esm/le-checkbox.entry.js +2 -2
- package/dist/core/esm/le-kit.js +2 -2
- package/dist/core/esm/le-number-input.entry.js +2 -2
- package/dist/core/esm/le-popover.entry.js +1 -1
- package/dist/core/esm/le-popup.entry.js +1 -1
- package/dist/core/esm/le-round-progress.entry.js +1 -1
- package/dist/core/esm/le-stack.entry.js +2 -2
- package/dist/core/esm/le-string-input.entry.js +2 -2
- package/dist/core/esm/le-text.entry.js +2 -2
- package/dist/core/esm/le-turntable.entry.js +1 -1
- package/dist/core/esm/loader.js +2 -2
- package/dist/core/esm/{utils-lgjSfQP0.js → utils-Bxmld82M.js} +3 -3
- package/dist/core/esm/{utils-lgjSfQP0.js.map → utils-Bxmld82M.js.map} +1 -1
- package/dist/core/le-kit/index.esm.js +1 -1
- package/dist/core/le-kit/le-kit.esm.js +1 -1
- package/dist/core/le-kit/{p-a5f1e539.entry.js → p-0308bd1f.entry.js} +2 -2
- package/dist/core/le-kit/{p-1c5262eb.entry.js → p-257495cc.entry.js} +2 -2
- package/dist/core/le-kit/{p-32c08678.entry.js → p-2ac4789a.entry.js} +2 -2
- package/dist/core/le-kit/{p-4bf51acc.entry.js → p-45eace7c.entry.js} +2 -2
- package/dist/core/le-kit/{p-fd665f35.entry.js → p-556086ca.entry.js} +2 -2
- package/dist/core/le-kit/{p-dcf1343d.entry.js → p-5ef81068.entry.js} +2 -2
- package/dist/core/le-kit/{p-a24b042d.entry.js → p-66d35f48.entry.js} +2 -2
- package/dist/core/le-kit/{p-4a9a9805.entry.js → p-73682c5e.entry.js} +2 -2
- package/dist/{le-kit/p-PS-3Rz-c.js → core/le-kit/p-CJ-z5Zj1.js} +1 -1
- package/dist/core/le-kit/p-CJ-z5Zj1.js.map +1 -0
- package/dist/core/le-kit/{p-DN2JVY-7.js → p-Drz36PDp.js} +2 -2
- package/dist/core/le-kit/{p-DN2JVY-7.js.map → p-Drz36PDp.js.map} +1 -1
- package/dist/core/le-kit/{p-bbc9e13e.entry.js → p-aa6e906f.entry.js} +2 -2
- package/dist/core/le-kit/{p-38e7ec05.entry.js → p-d75214f9.entry.js} +2 -2
- package/dist/core/le-kit/{p-9ee92c29.entry.js → p-df552906.entry.js} +2 -2
- package/dist/core/le-kit/{p-c4223c60.entry.js → p-e0861e82.entry.js} +2 -2
- package/dist/core/types/global/app.d.ts +1 -1
- package/dist/core/types/index.d.ts +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/{index-PS-3Rz-c.js → index-CwNQ1GTa.js} +10 -4
- package/dist/esm/index-CwNQ1GTa.js.map +1 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/le-box.entry.js +2 -2
- package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map +1 -1
- package/dist/esm/le-button_6.entry.js +11 -5
- package/dist/esm/le-card.entry.js +2 -2
- package/dist/esm/le-kit.js +2 -2
- package/dist/esm/le-number-input.entry.js +2 -2
- package/dist/esm/le-popup.entry.js +1 -1
- package/dist/esm/le-round-progress.entry.js +1 -1
- package/dist/esm/le-stack.entry.js +2 -2
- package/dist/esm/le-text.entry.js +2 -2
- package/dist/esm/le-turntable.entry.js +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/{utils-lgjSfQP0.js → utils-Cf7fMI0j.js} +3 -3
- package/dist/esm/{utils-lgjSfQP0.js.map → utils-Cf7fMI0j.js.map} +1 -1
- package/dist/le-kit/assets/custom-elements.json +4305 -0
- package/dist/le-kit/index.esm.js +1 -1
- package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.esm.js.map +1 -1
- package/dist/le-kit/le-kit.esm.js +1 -1
- package/dist/le-kit/{p-935bb2d4.entry.js → p-08dbcc25.entry.js} +2 -2
- package/dist/le-kit/{p-d8157b06.entry.js → p-5dc35729.entry.js} +2 -2
- package/dist/le-kit/{p-34102cef.entry.js → p-64374730.entry.js} +2 -2
- package/dist/le-kit/{p-27710b5b.entry.js → p-79ec6f7c.entry.js} +2 -2
- package/dist/le-kit/{p-ccabc638.entry.js → p-8daf3c7f.entry.js} +2 -2
- package/dist/le-kit/p-9c69235d.entry.js +2 -0
- package/dist/le-kit/p-9c69235d.entry.js.map +1 -0
- package/dist/{core/le-kit/p-PS-3Rz-c.js → le-kit/p-CwNQ1GTa.js} +2 -2
- package/dist/le-kit/p-CwNQ1GTa.js.map +1 -0
- package/dist/le-kit/{p-e8c2ca0e.entry.js → p-ad398acd.entry.js} +2 -2
- package/dist/le-kit/{p-9d3dc4e5.entry.js → p-b8122ad6.entry.js} +2 -2
- package/dist/le-kit/{p-56a80e6d.entry.js → p-f9008505.entry.js} +2 -2
- package/dist/le-kit/{p-DN2JVY-7.js → p-y3FECAx9.js} +2 -2
- package/dist/le-kit/{p-DN2JVY-7.js.map → p-y3FECAx9.js.map} +1 -1
- package/dist/le-kit/themes/base.css +89 -0
- package/dist/le-kit/themes/dark.css +100 -0
- package/dist/le-kit/themes/default.css +108 -0
- package/dist/le-kit/themes/gradient.css +100 -0
- package/dist/le-kit/themes/index.css +413 -0
- package/dist/le-kit/themes/minimal.css +100 -0
- package/dist/le-kit/themes/warm.css +100 -0
- package/dist/types/global/app.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist/cjs/index-D7B9TPh8.js.map +0 -1
- package/dist/core/cjs/index-D7B9TPh8.js.map +0 -1
- package/dist/core/esm/index-PS-3Rz-c.js.map +0 -1
- package/dist/core/le-kit/p-PS-3Rz-c.js.map +0 -1
- package/dist/esm/index-PS-3Rz-c.js.map +0 -1
- package/dist/le-kit/p-615ea10f.entry.js +0 -2
- package/dist/le-kit/p-615ea10f.entry.js.map +0 -1
- package/dist/le-kit/p-PS-3Rz-c.js.map +0 -1
- /package/dist/core/le-kit/{p-a5f1e539.entry.js.map → p-0308bd1f.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-1c5262eb.entry.js.map → p-257495cc.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-32c08678.entry.js.map → p-2ac4789a.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-4bf51acc.entry.js.map → p-45eace7c.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-fd665f35.entry.js.map → p-556086ca.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-dcf1343d.entry.js.map → p-5ef81068.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-a24b042d.entry.js.map → p-66d35f48.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-4a9a9805.entry.js.map → p-73682c5e.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-bbc9e13e.entry.js.map → p-aa6e906f.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-38e7ec05.entry.js.map → p-d75214f9.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-9ee92c29.entry.js.map → p-df552906.entry.js.map} +0 -0
- /package/dist/core/le-kit/{p-c4223c60.entry.js.map → p-e0861e82.entry.js.map} +0 -0
- /package/dist/le-kit/{p-935bb2d4.entry.js.map → p-08dbcc25.entry.js.map} +0 -0
- /package/dist/le-kit/{p-d8157b06.entry.js.map → p-5dc35729.entry.js.map} +0 -0
- /package/dist/le-kit/{p-34102cef.entry.js.map → p-64374730.entry.js.map} +0 -0
- /package/dist/le-kit/{p-27710b5b.entry.js.map → p-79ec6f7c.entry.js.map} +0 -0
- /package/dist/le-kit/{p-ccabc638.entry.js.map → p-8daf3c7f.entry.js.map} +0 -0
- /package/dist/le-kit/{p-e8c2ca0e.entry.js.map → p-ad398acd.entry.js.map} +0 -0
- /package/dist/le-kit/{p-9d3dc4e5.entry.js.map → p-b8122ad6.entry.js.map} +0 -0
- /package/dist/le-kit/{p-56a80e6d.entry.js.map → p-f9008505.entry.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,j as e,k as i,H as l}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,j as e,k as i,H as l}from"./p-CwNQ1GTa.js";import{o}from"./p-y3FECAx9.js";const n=":host{display:block}:host([hidden]){display:none}.le-text{margin:0;color:var(--le-text-color, var(--le-color-text));font-family:var(--le-font-family);line-height:var(--le-text-line-height, 1.5)}.variant-p{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-normal, 400);color:var(--le-color-text)}.variant-h1{font-size:var(--le-font-size-4xl, 2.5rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.2;color:var(--le-color-text);letter-spacing:-0.02em}.variant-h2{font-size:var(--le-font-size-3xl, 2rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.25;color:var(--le-color-text);letter-spacing:-0.01em}.variant-h3{font-size:var(--le-font-size-2xl, 1.5rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.3;color:var(--le-color-text)}.variant-h4{font-size:var(--le-font-size-xl, 1.25rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.35;color:var(--le-color-text)}.variant-h5{font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.4;color:var(--le-color-text)}.variant-h6{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.45;color:var(--le-color-text);text-transform:uppercase;letter-spacing:0.05em}.variant-code{font-family:var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);font-size:var(--le-font-size-sm, 0.875rem);background:var(--le-color-surface-alt, #f5f5f5);padding:var(--le-space-md);border-radius:var(--le-radius-md);overflow-x:auto;white-space:pre-wrap;color:var(--le-color-text)}.variant-quote{font-size:var(--le-font-size-lg, 1.125rem);font-style:italic;color:var(--le-color-text-secondary);border-left:4px solid var(--le-color-primary);padding-left:var(--le-space-lg);margin-left:0;margin-right:0}.variant-label{font-size:var(--le-font-size-sm, 0.875rem);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text-secondary);text-transform:uppercase;letter-spacing:0.05em}.variant-small{font-size:var(--le-font-size-sm, 0.875rem);color:var(--le-color-text-secondary)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate.max-lines-2,.truncate.max-lines-3,.truncate.max-lines-4,.truncate.max-lines-5{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical}.truncate.max-lines-2{-webkit-line-clamp:2;line-clamp:2}.truncate.max-lines-3{-webkit-line-clamp:3;line-clamp:3}.truncate.max-lines-4{-webkit-line-clamp:4;line-clamp:4}.truncate.max-lines-5{-webkit-line-clamp:5;line-clamp:5}:host([align=\"center\"]) .le-text{text-align:center}:host([align=\"right\"]) .le-text{text-align:right}:host([align=\"justify\"]) .le-text{text-align:justify}.le-text a{color:var(--le-color-primary);text-decoration:underline}.le-text a:hover{color:var(--le-color-primary-dark)}.le-text strong,.le-text b{font-weight:var(--le-font-weight-bold, 700)}.le-text em,.le-text i{font-style:italic}.le-text u{text-decoration:underline}.le-text s,.le-text strike{text-decoration:line-through}";const s=class{constructor(e){t(this,e)}get el(){return e(this)}variant="p";align="left";color;truncate=false;maxLines;adminMode=false;content="";isFocused=false;selectionState={isBold:false,isItalic:false,isUnderline:false,isStrikethrough:false,isLink:false,blockType:"p"};editorRef;slotRef;disconnectModeObserver;connectedCallback(){this.disconnectModeObserver=o(this.el,(t=>{const e=this.adminMode;this.adminMode=t==="admin";if(this.adminMode&&!e){requestAnimationFrame((()=>this.readSlottedContent()))}else if(!this.adminMode&&e){this.syncContentToSlot()}}))}disconnectedCallback(){this.disconnectModeObserver?.()}onVariantChange(){if(this.adminMode&&this.editorRef){this.syncContentToSlot()}}readSlottedContent(){if(!this.slotRef)return;const t=this.slotRef.assignedNodes({flatten:true});let e="";t.forEach((t=>{if(t.nodeType===Node.TEXT_NODE){e+=t.textContent}else if(t.nodeType===Node.ELEMENT_NODE){e+=t.innerHTML||t.textContent}}));this.content=e.trim()}syncContentToSlot(){if(!this.editorRef)return;const t=this.editorRef.innerHTML;const e=this.slotRef;if(e){const i=e.assignedNodes({flatten:true});if(i.length>0){const e=i[0];if(e.nodeType===Node.ELEMENT_NODE){e.innerHTML=t}else if(e.nodeType===Node.TEXT_NODE){const i=e.parentNode;if(i){const l=document.createElement("span");l.innerHTML=t;i.replaceChild(l,e);if(l.childNodes.length===1&&l.firstChild?.nodeType===Node.TEXT_NODE){i.replaceChild(l.firstChild,l)}}}}else{this.el.innerHTML=t}}}handleInput=()=>{if(this.editorRef){this.content=this.editorRef.innerHTML;this.updateSelectionState()}};handleFocus=()=>{this.isFocused=true;this.updateSelectionState()};handleBlur=t=>{const e=t.relatedTarget;const i=this.el.shadowRoot?.querySelector(".le-text-toolbar");if(i?.contains(e)){return}setTimeout((()=>{if(!this.el.shadowRoot?.activeElement){this.isFocused=false;this.syncContentToSlot()}}),150)};handleSelectionChange=()=>{this.updateSelectionState()};updateSelectionState(){const t=window.getSelection();if(!t||t.rangeCount===0)return;this.selectionState={isBold:document.queryCommandState("bold"),isItalic:document.queryCommandState("italic"),isUnderline:document.queryCommandState("underline"),isStrikethrough:document.queryCommandState("strikeThrough"),isLink:this.isSelectionInLink(t),blockType:this.variant}}isSelectionInLink(t){if(!t.anchorNode)return false;let e=t.anchorNode;while(e&&e!==this.editorRef){if(e.nodeName==="A")return true;e=e.parentNode}return false}execCommand(t,e){this.editorRef?.focus();document.execCommand(t,false,e);this.handleInput();this.updateSelectionState()}toggleBold=t=>{t.preventDefault();this.execCommand("bold")};toggleItalic=t=>{t.preventDefault();this.execCommand("italic")};toggleUnderline=t=>{t.preventDefault();this.execCommand("underline")};toggleStrikethrough=t=>{t.preventDefault();this.execCommand("strikeThrough")};toggleLink=t=>{t.preventDefault();if(this.selectionState.isLink){this.execCommand("unlink")}else{const t=prompt("Enter URL:","https://");if(t){this.execCommand("createLink",t)}}};changeVariant=t=>{const e=t.target;this.variant=e.value};renderToolbar(){return i("div",{class:"le-text-toolbar"},i("select",{class:"le-text-toolbar-select",onChange:this.changeVariant,onMouseDown:t=>t.preventDefault()},i("option",{value:"p",selected:this.variant==="p"},"Paragraph"),i("option",{value:"h1",selected:this.variant==="h1"},"Heading 1"),i("option",{value:"h2",selected:this.variant==="h2"},"Heading 2"),i("option",{value:"h3",selected:this.variant==="h3"},"Heading 3"),i("option",{value:"h4",selected:this.variant==="h4"},"Heading 4"),i("option",{value:"h5",selected:this.variant==="h5"},"Heading 5"),i("option",{value:"h6",selected:this.variant==="h6"},"Heading 6"),i("option",{value:"quote",selected:this.variant==="quote"},"Quote"),i("option",{value:"code",selected:this.variant==="code"},"Code"),i("option",{value:"label",selected:this.variant==="label"},"Label"),i("option",{value:"small",selected:this.variant==="small"},"Small")),i("div",{class:"le-text-toolbar-divider"}),i("button",{type:"button",class:{"le-text-toolbar-btn":true,active:this.selectionState.isBold},onMouseDown:this.toggleBold,title:"Bold (Ctrl+B)"},i("strong",null,"B")),i("button",{type:"button",class:{"le-text-toolbar-btn":true,active:this.selectionState.isItalic},onMouseDown:this.toggleItalic,title:"Italic (Ctrl+I)"},i("em",null,"I")),i("button",{type:"button",class:{"le-text-toolbar-btn":true,active:this.selectionState.isUnderline},onMouseDown:this.toggleUnderline,title:"Underline (Ctrl+U)"},i("span",{style:{textDecoration:"underline"}},"U")),i("button",{type:"button",class:{"le-text-toolbar-btn":true,active:this.selectionState.isStrikethrough},onMouseDown:this.toggleStrikethrough,title:"Strikethrough"},i("span",{style:{textDecoration:"line-through"}},"S")),i("div",{class:"le-text-toolbar-divider"}),i("button",{type:"button",class:{"le-text-toolbar-btn":true,active:this.selectionState.isLink},onMouseDown:this.toggleLink,title:this.selectionState.isLink?"Remove link":"Add link"},"🔗"))}getTag(){switch(this.variant){case"quote":return"blockquote";case"code":return"pre";case"label":return"label";case"small":return"small";default:return this.variant}}render(){const t=this.getTag();const e={};if(this.color){e.color=this.color}if(this.align){e.textAlign=this.align}const o={"le-text":true,[`variant-${this.variant}`]:true,truncate:this.truncate,[`max-lines-${this.maxLines}`]:this.truncate&&this.maxLines};if(this.adminMode){return i(l,{class:"admin-mode"},i("le-component",{component:"le-text"},i("div",{class:"le-text-editor-wrapper"},this.isFocused&&this.renderToolbar(),i(t,{class:o,part:"text",style:e},i("div",{ref:t=>this.editorRef=t,class:"le-text-editor",contentEditable:true,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyUp:this.handleSelectionChange,onMouseUp:this.handleSelectionChange,innerHTML:this.content})),i("div",{class:"hidden-slot"},i("slot",{ref:t=>this.slotRef=t,onSlotchange:()=>this.readSlottedContent()})))))}return i(l,null,i(t,{class:o,part:"text",style:e},i("slot",{ref:t=>this.slotRef=t})))}static get watchers(){return{variant:["onVariantChange"]}}};s.style=n;export{s as le_text};
|
|
2
|
+
//# sourceMappingURL=p-ad398acd.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,i as t,j as i,k as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,i as t,j as i,k as n}from"./p-CwNQ1GTa.js";import{c as r}from"./p-y3FECAx9.js";const s=":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}";const l=class{constructor(i){e(this,i);this.leChange=t(this,"leChange");this.leInput=t(this,"leInput")}get el(){return i(this)}value;name;label;placeholder;min;max;step=1;required=false;disabled=false;readonly=false;iconStart;showSpinners=true;externalId;isValid=true;validationMessage="";leChange;leInput;valueChanged(){this.validate()}validate(){if(this.required&&(this.value===undefined||this.value===null||isNaN(this.value))){this.isValid=false;this.validationMessage="This field is required";return}if(this.value!==undefined&&this.value!==null&&!isNaN(this.value)){if(this.min!==undefined&&this.value<this.min){this.isValid=false;this.validationMessage=`Value must be at least ${this.min}`;return}if(this.max!==undefined&&this.value>this.max){this.isValid=false;this.validationMessage=`Value must be at most ${this.max}`;return}}this.isValid=true;this.validationMessage=""}emitChange(){this.leChange.emit({value:this.value,name:this.name,externalId:this.externalId,isValid:this.isValid})}emitInput(){this.leInput.emit({value:this.value,name:this.name,externalId:this.externalId,isValid:this.isValid})}updateValue(e){if(this.disabled||this.readonly)return;const t=this.step.toString().split(".")[1]?.length||0;const i=parseFloat(e.toFixed(t));this.value=i;this.validate();this.emitInput()}handleInput=e=>{const t=e.target;const i=parseFloat(t.value);if(t.value===""){this.value=undefined}else if(!isNaN(i)){this.value=i}this.validate();this.emitInput()};handleChange=()=>{this.validate();this.emitChange()};handleKeyDown=e=>{if(this.disabled||this.readonly)return;let t=1;if(e.shiftKey)t=10;if(e.altKey)t=.1;const i=this.value||0;if(e.key==="ArrowUp"){e.preventDefault();this.updateValue(i+this.step*t)}else if(e.key==="ArrowDown"){e.preventDefault();this.updateValue(i-this.step*t)}};handleWheel=e=>{if(this.disabled||this.readonly)return;if(document.activeElement!==e.target)return;e.preventDefault();const t=this.value||0;if(e.deltaY<0){this.updateValue(t+this.step)}else{this.updateValue(t-this.step)}};increment=e=>{e.preventDefault();const t=this.value||0;this.updateValue(t+this.step);this.emitChange()};decrement=e=>{e.preventDefault();const t=this.value||0;this.updateValue(t-this.step);this.emitChange()};render(){return n("le-component",{key:"6af8d1fd4c89597f7da3be391cabccbb9d1f9800",component:"le-number-input",hostClass:r({disabled:this.disabled})},n("div",{key:"e4e0ad02f89b2eb8dd7649d2f2e70bc821cb2774",class:"le-input-wrapper"},this.label&&n("label",{key:"30ad120d5571018ea9891340b5406f6939a1fe0e",class:"le-input-label",htmlFor:this.name},this.label),n("div",{key:"27b835ad1559a1ea4366c4b7c2b31d412e8b8ef7",class:r("le-input-container",{"has-error":!this.isValid})},this.iconStart&&n("span",{key:"0164cbb985b900b4b3136061a2609987a2c06e9f",class:"icon-start"},this.iconStart),n("input",{key:"6d68b764f45d61b7dd4ffe435bd9e9da04c4d87a",id:this.name,type:"number",name:this.name,placeholder:this.placeholder,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled,readOnly:this.readonly,required:this.required,onInput:this.handleInput,onChange:this.handleChange,onKeyDown:this.handleKeyDown,onWheel:this.handleWheel}),this.showSpinners&&n("div",{key:"7ed04341c0c27a7d37afd4baf9698ea7776702f6",class:"le-input-controls"},n("le-button",{key:"80c96f7cbee40efd2b79f33e8401a13f187092a6",mode:"default",variant:"clear",size:"small","icon-only":true,class:"le-input-control-btn",onClick:this.increment,disabled:this.disabled||this.readonly||this.max!==undefined&&this.value>=this.max,tabindex:"-1"},n("span",{key:"d56b463073ce8174c668138179f1bbc16c700d9f",slot:"icon-only"},"↑")),n("le-button",{key:"74e70e65d6668cc1cee7abfaf464a60a29efa3f9",mode:"default",variant:"clear",size:"small","icon-only":true,class:"le-input-control-btn",onClick:this.decrement,disabled:this.disabled||this.readonly||this.min!==undefined&&this.value<=this.min,tabindex:"-1"},n("span",{key:"e2330cdf9f431b2c9f0953e42f71e897879d10fe",slot:"icon-only"},"↓")))),!this.isValid&&n("div",{key:"ba9bb8af8c4814b4316c1f0947c50a99fd24634c",class:"le-input-error"},this.validationMessage),n("div",{key:"30e43ac088f995fe24ab47678ca70fe771b6f1ab",class:"le-input-description"},n("le-slot",{key:"94f4bd21e32595470781eb6b004c9acbee72b81a",name:"description",type:"text",tag:"p",label:"Description"},n("slot",{key:"def94a79248d1887c5416ff95b2c625df85c68d0",name:"description"})))))}static get watchers(){return{value:["valueChanged"]}}};l.style=s;export{l as le_number_input};
|
|
2
|
+
//# sourceMappingURL=p-b8122ad6.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,j as e,k as s}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,j as e,k as s}from"./p-CwNQ1GTa.js";import{c as a}from"./p-y3FECAx9.js";const i=":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";const n=class{constructor(e){t(this,e)}get el(){return e(this)}direction="horizontal";gap;align="stretch";justify="start";wrap=false;alignContent="stretch";reverse=false;maxItems;fullWidth=false;fullHeight=false;padding;getFlexDirection(){const t=this.direction==="vertical"?"column":"row";return this.reverse?`${t}-reverse`:t}getAlignItems(){const t={start:"flex-start",center:"center",end:"flex-end",stretch:"stretch",baseline:"baseline"};return t[this.align]||"stretch"}getJustifyContent(){const t={start:"flex-start",center:"center",end:"flex-end","space-between":"space-between","space-around":"space-around","space-evenly":"space-evenly"};return t[this.justify]||"flex-start"}getAlignContent(){const t={start:"flex-start",center:"center",end:"flex-end",stretch:"stretch","space-between":"space-between","space-around":"space-around"};return t[this.alignContent]||"stretch"}render(){const t={display:"flex",flexDirection:this.getFlexDirection(),alignItems:this.getAlignItems(),justifyContent:this.getJustifyContent(),flexWrap:this.wrap?"wrap":"nowrap"};if(this.wrap){t.alignContent=this.getAlignContent()}if(this.gap){t.gap=this.gap}if(this.padding){t.padding=this.padding}const e=a(`direction-${this.direction}`,{wrap:this.wrap,reverse:this.reverse,"full-width":this.fullWidth,"full-height":this.fullHeight});const i=`display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap||"var(--le-space-md)"}; flex-wrap: ${this.wrap?"wrap":"nowrap"}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;return s("le-component",{key:"e1547512915e47e4c5ddbcbcbd3971579e45a140",component:"le-stack",hostClass:e},s("div",{key:"61a4fd57c61c56a8abac0ae2348e6e48034efc4d",class:"stack",part:"stack",style:t},s("le-slot",{key:"0ef0f996ce0efcb20a47171197d82e5b326c7e8c",name:"",description:`Items arranged ${this.direction}ly${this.maxItems?` (max ${this.maxItems})`:""}`,type:"slot","allowed-components":"le-text,le-box,le-card,le-button,le-stack",slotStyle:i},s("slot",{key:"f41f351d8b6dbdaf20756e9bc317a35a0424fc6c"}))))}};n.style=i;export{n as le_stack};
|
|
2
|
+
//# sourceMappingURL=p-f9008505.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as t}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{a as t}from"./p-CwNQ1GTa.js";function e(t="le"){return`${t}-${Math.random().toString(36).substring(2,9)}`}function r(t){if(!t)return[];return t.split(",").map((t=>t.trim())).filter(Boolean)}function o(t,e=""){const r=e?`[slot="${e}"]`:":not([slot])";return t.querySelector(r)!==null}function i(e,r){r(t(e));const o=new MutationObserver((()=>{r(t(e))}));o.observe(e,{attributes:true,attributeFilter:["mode"]});o.observe(document.documentElement,{attributes:true,attributeFilter:["mode"]});let i=e;while(i){if(i instanceof Element&&i.parentElement){i=i.parentElement;o.observe(i,{attributes:true,attributeFilter:["mode"]});if(i.hasAttribute("mode")){break}}else{const t=i.getRootNode();if(t instanceof ShadowRoot){i=t.host;o.observe(i,{attributes:true,attributeFilter:["mode"]});if(i.hasAttribute("mode")){break}}else{break}}}return()=>o.disconnect()}function n(...t){const e=[];t.forEach((t=>{if(!t)return;if(typeof t==="string"){e.push(t)}else if(Array.isArray(t)){e.push(n(...t))}else if(typeof t==="object"){Object.entries(t).forEach((([t,r])=>{if(r){e.push(t)}}))}}));return e.join(" ")}export{n as c,e as g,i as o,r as p,o as s};
|
|
2
|
+
//# sourceMappingURL=p-y3FECAx9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-
|
|
1
|
+
{"version":3,"file":"p-y3FECAx9.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n if (!value) return [];\n return value\n .split(',')\n .map(s => s.trim())\n .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n * @Element() el: HTMLElement;\n * @State() adminMode: boolean = false;\n * private disconnectModeObserver?: () => void;\n * \n * connectedCallback() {\n * this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n * this.adminMode = mode === 'admin';\n * });\n * }\n * \n * disconnectedCallback() {\n * this.disconnectModeObserver?.();\n * }\n * }\n * ```\n */\nexport function observeModeChanges(\n el: HTMLElement,\n callback: (mode: string) => void\n): () => void {\n // Call immediately with current mode\n callback(getMode(el));\n\n // Set up observer for mode attribute changes\n const observer = new MutationObserver(() => {\n callback(getMode(el));\n });\n\n // Observe the element itself (for mode boundary changes)\n observer.observe(el, {\n attributes: true,\n attributeFilter: ['mode'],\n });\n\n // Observe document root\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['mode'],\n });\n\n // Traverse up, crossing shadow boundaries, and observe each element\n let current: Node | null = el;\n while (current) {\n if (current instanceof Element && current.parentElement) {\n current = current.parentElement;\n observer.observe(current, {\n attributes: true,\n attributeFilter: ['mode'],\n });\n // If this element has an explicit mode, it's a boundary\n if ((current as Element).hasAttribute('mode')) {\n break;\n }\n } else {\n // Check if we're in a shadow root\n const root = current.getRootNode();\n if (root instanceof ShadowRoot) {\n // Cross the shadow boundary and observe the host\n current = root.host;\n observer.observe(current, {\n attributes: true,\n attributeFilter: ['mode'],\n });\n // If the host has an explicit mode, it's a boundary\n if ((current as Element).hasAttribute('mode')) {\n break;\n }\n } else {\n break;\n }\n }\n }\n\n // Return cleanup function\n return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n const result: string[] = [];\n\n classes.forEach(cls => {\n if (!cls) return;\n\n if (typeof cls === 'string') {\n result.push(cls);\n } else if (Array.isArray(cls)) {\n result.push(classnames(...cls));\n } else if (typeof cls === 'object') {\n Object.entries(cls).forEach(([key, value]) => {\n if (value) {\n result.push(key);\n }\n });\n }\n });\n\n return result.join(' ');\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Le-Kit Base Design Tokens
|
|
3
|
+
*
|
|
4
|
+
* Structural tokens that rarely change between themes:
|
|
5
|
+
* - Spacing scale
|
|
6
|
+
* - Typography (font families, sizes, weights, line heights)
|
|
7
|
+
* - Transitions
|
|
8
|
+
* - Z-index layers
|
|
9
|
+
*
|
|
10
|
+
* Import this file along with a theme file (default.css, dark.css, etc.)
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
|
|
17
|
+
/* ============================================
|
|
18
|
+
* SPACING SCALE
|
|
19
|
+
* ============================================ */
|
|
20
|
+
--le-spacing-0: 0;
|
|
21
|
+
--le-spacing-1: 0.25rem; /* 4px */
|
|
22
|
+
--le-spacing-2: 0.5rem; /* 8px */
|
|
23
|
+
--le-spacing-3: 0.75rem; /* 12px */
|
|
24
|
+
--le-spacing-4: 1rem; /* 16px */
|
|
25
|
+
--le-spacing-5: 1.25rem; /* 20px */
|
|
26
|
+
--le-spacing-6: 1.5rem; /* 24px */
|
|
27
|
+
--le-spacing-8: 2rem; /* 32px */
|
|
28
|
+
--le-spacing-10: 2.5rem; /* 40px */
|
|
29
|
+
--le-spacing-12: 3rem; /* 48px */
|
|
30
|
+
--le-spacing-16: 4rem; /* 64px */
|
|
31
|
+
|
|
32
|
+
/* ============================================
|
|
33
|
+
* TYPOGRAPHY
|
|
34
|
+
* ============================================ */
|
|
35
|
+
--le-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
36
|
+
--le-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
|
37
|
+
|
|
38
|
+
/* Font sizes */
|
|
39
|
+
--le-font-size-xs: 0.75rem; /* 12px */
|
|
40
|
+
--le-font-size-sm: 0.875rem; /* 14px */
|
|
41
|
+
--le-font-size-md: 1rem; /* 16px */
|
|
42
|
+
--le-font-size-lg: 1.125rem; /* 18px */
|
|
43
|
+
--le-font-size-xl: 1.25rem; /* 20px */
|
|
44
|
+
--le-font-size-2xl: 1.5rem; /* 24px */
|
|
45
|
+
--le-font-size-3xl: 1.875rem; /* 30px */
|
|
46
|
+
--le-font-size-4xl: 2.25rem; /* 36px */
|
|
47
|
+
|
|
48
|
+
/* Font weights */
|
|
49
|
+
--le-font-weight-normal: 400;
|
|
50
|
+
--le-font-weight-medium: 500;
|
|
51
|
+
--le-font-weight-semibold: 600;
|
|
52
|
+
--le-font-weight-bold: 700;
|
|
53
|
+
|
|
54
|
+
/* Line heights */
|
|
55
|
+
--le-line-height-tight: 1.25;
|
|
56
|
+
--le-line-height-normal: 1.5;
|
|
57
|
+
--le-line-height-relaxed: 1.75;
|
|
58
|
+
|
|
59
|
+
/* ============================================
|
|
60
|
+
* RADIUSES
|
|
61
|
+
* ============================================ */
|
|
62
|
+
--le-radius-none: 0;
|
|
63
|
+
--le-radius-xs: 0.066rem; /* 1px */
|
|
64
|
+
--le-radius-sm: 0.125rem; /* 2px */
|
|
65
|
+
--le-radius-md: 0.25rem; /* 4px */
|
|
66
|
+
--le-radius-lg: 0.5rem; /* 8px */
|
|
67
|
+
--le-radius-xl: 0.75rem; /* 12px */
|
|
68
|
+
--le-radius-2xl: 1rem; /* 16px */
|
|
69
|
+
--le-radius-full: 9999px;
|
|
70
|
+
|
|
71
|
+
/* ============================================
|
|
72
|
+
* TRANSITIONS
|
|
73
|
+
* ============================================ */
|
|
74
|
+
--le-transition-fast: 100ms;
|
|
75
|
+
--le-transition-normal: 200ms;
|
|
76
|
+
--le-transition-slow: 300ms;
|
|
77
|
+
--le-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
78
|
+
|
|
79
|
+
/* ============================================
|
|
80
|
+
* Z-INDEX LAYERS
|
|
81
|
+
* ============================================ */
|
|
82
|
+
--le-z-dropdown: 1000;
|
|
83
|
+
--le-z-sticky: 1020;
|
|
84
|
+
--le-z-fixed: 1030;
|
|
85
|
+
--le-z-modal-backdrop: 1040;
|
|
86
|
+
--le-z-modal: 1050;
|
|
87
|
+
--le-z-popover: 1060;
|
|
88
|
+
--le-z-tooltip: 1070;
|
|
89
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Le-Kit Dark Theme
|
|
3
|
+
*
|
|
4
|
+
* Dark mode with light text on dark backgrounds.
|
|
5
|
+
*
|
|
6
|
+
* Usage: set theme="dark" on any element, or import as your default.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
[theme="dark"] {
|
|
10
|
+
/* Primary brand color - lighter for dark backgrounds */
|
|
11
|
+
--le-color-primary: #4da6ff;
|
|
12
|
+
--le-color-primary-light: #80c1ff;
|
|
13
|
+
--le-color-primary-dark: #0088ff;
|
|
14
|
+
--le-color-primary-contrast: #000000;
|
|
15
|
+
|
|
16
|
+
/* Secondary accent color */
|
|
17
|
+
--le-color-secondary: #868e96;
|
|
18
|
+
--le-color-secondary-light: #adb5bd;
|
|
19
|
+
--le-color-secondary-dark: #6c757d;
|
|
20
|
+
--le-color-secondary-contrast: #000000;
|
|
21
|
+
|
|
22
|
+
/* Semantic colors - adjusted for dark mode */
|
|
23
|
+
--le-color-success: #48c764;
|
|
24
|
+
--le-color-success-light: #6dd587;
|
|
25
|
+
--le-color-success-dark: #28a745;
|
|
26
|
+
--le-color-success-contrast: #000000;
|
|
27
|
+
|
|
28
|
+
--le-color-warning: #ffcd39;
|
|
29
|
+
--le-color-warning-light: #ffda6a;
|
|
30
|
+
--le-color-warning-dark: #ffc107;
|
|
31
|
+
--le-color-warning-contrast: #000000;
|
|
32
|
+
|
|
33
|
+
--le-color-danger: #e4606d;
|
|
34
|
+
--le-color-danger-light: #ea868f;
|
|
35
|
+
--le-color-danger-dark: #dc3545;
|
|
36
|
+
--le-color-danger-contrast: #000000;
|
|
37
|
+
|
|
38
|
+
--le-color-info: #3ab0c3;
|
|
39
|
+
--le-color-info-light: #6dc4d3;
|
|
40
|
+
--le-color-info-dark: #17a2b8;
|
|
41
|
+
--le-color-info-contrast: #000000;
|
|
42
|
+
|
|
43
|
+
/* Neutral colors - inverted */
|
|
44
|
+
--le-color-white: #ffffff;
|
|
45
|
+
--le-color-black: #000000;
|
|
46
|
+
--le-color-gray-50: #212121;
|
|
47
|
+
--le-color-gray-100: #424242;
|
|
48
|
+
--le-color-gray-200: #616161;
|
|
49
|
+
--le-color-gray-300: #757575;
|
|
50
|
+
--le-color-gray-400: #9e9e9e;
|
|
51
|
+
--le-color-gray-500: #bdbdbd;
|
|
52
|
+
--le-color-gray-600: #e0e0e0;
|
|
53
|
+
--le-color-gray-700: #eeeeee;
|
|
54
|
+
--le-color-gray-800: #f5f5f5;
|
|
55
|
+
--le-color-gray-900: #fafafa;
|
|
56
|
+
|
|
57
|
+
/* Background colors */
|
|
58
|
+
--le-color-background: #121212;
|
|
59
|
+
--le-color-background-secondary: #1e1e1e;
|
|
60
|
+
--le-color-background-tertiary: #2d2d2d;
|
|
61
|
+
|
|
62
|
+
/* Surface colors */
|
|
63
|
+
--le-color-surface: #1e1e1e;
|
|
64
|
+
--le-color-surface-elevated: #2d2d2d;
|
|
65
|
+
|
|
66
|
+
/* Text colors */
|
|
67
|
+
--le-color-text-primary: #ffffff;
|
|
68
|
+
--le-color-text-secondary: #b3b3b3;
|
|
69
|
+
--le-color-text-disabled: #666666;
|
|
70
|
+
--le-color-text-inverse: #121212;
|
|
71
|
+
|
|
72
|
+
/* Border colors */
|
|
73
|
+
--le-color-border: #333333;
|
|
74
|
+
--le-color-border-light: #2d2d2d;
|
|
75
|
+
--le-color-border-dark: #444444;
|
|
76
|
+
|
|
77
|
+
/** Input borders */
|
|
78
|
+
--le-border-width: 2px;
|
|
79
|
+
--le-color-border-input: #515c6b;
|
|
80
|
+
|
|
81
|
+
/* Focus ring */
|
|
82
|
+
--le-color-focus: rgba(77, 166, 255, 0.5);
|
|
83
|
+
|
|
84
|
+
/* Border radius - same as default */
|
|
85
|
+
--le-radius-none: 0;
|
|
86
|
+
--le-radius-sm: 0.125rem;
|
|
87
|
+
--le-radius-md: 0.25rem;
|
|
88
|
+
--le-radius-lg: 0.5rem;
|
|
89
|
+
--le-radius-xl: 0.75rem;
|
|
90
|
+
--le-radius-2xl: 1rem;
|
|
91
|
+
--le-radius-full: 9999px;
|
|
92
|
+
|
|
93
|
+
/* Shadows - darker for dark mode */
|
|
94
|
+
--le-shadow-none: none;
|
|
95
|
+
--le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
96
|
+
--le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
97
|
+
--le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
98
|
+
--le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
99
|
+
--le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
|
|
100
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Le-Kit Default Theme
|
|
3
|
+
*
|
|
4
|
+
* Clean, professional light theme with blue primary color.
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* 1. As default: import alongside base.css
|
|
8
|
+
* 2. For switching: set theme="default" on any element
|
|
9
|
+
*
|
|
10
|
+
* To create a custom theme:
|
|
11
|
+
* 1. Copy this file
|
|
12
|
+
* 2. Change selector to :root or [theme="your-theme"]
|
|
13
|
+
* 3. Modify the variables you need
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
:root,
|
|
17
|
+
[theme="default"] {
|
|
18
|
+
/* Primary brand color */
|
|
19
|
+
--le-color-primary: #0088ff;
|
|
20
|
+
--le-color-primary-light: #4da6ff;
|
|
21
|
+
--le-color-primary-dark: #0066cc;
|
|
22
|
+
--le-color-primary-contrast: #ffffff;
|
|
23
|
+
|
|
24
|
+
/* Secondary accent color */
|
|
25
|
+
--le-color-secondary: #6c757d;
|
|
26
|
+
--le-color-secondary-light: #868e96;
|
|
27
|
+
--le-color-secondary-dark: #545b62;
|
|
28
|
+
--le-color-secondary-contrast: #ffffff;
|
|
29
|
+
|
|
30
|
+
/* Semantic colors */
|
|
31
|
+
--le-color-success: #28a745;
|
|
32
|
+
--le-color-success-light: #48c764;
|
|
33
|
+
--le-color-success-dark: #1e7e34;
|
|
34
|
+
--le-color-success-contrast: #ffffff;
|
|
35
|
+
|
|
36
|
+
--le-color-warning: #ffc107;
|
|
37
|
+
--le-color-warning-light: #ffcd39;
|
|
38
|
+
--le-color-warning-dark: #d39e00;
|
|
39
|
+
--le-color-warning-contrast: #212529;
|
|
40
|
+
|
|
41
|
+
--le-color-danger: #dc3545;
|
|
42
|
+
--le-color-danger-light: #e4606d;
|
|
43
|
+
--le-color-danger-dark: #bd2130;
|
|
44
|
+
--le-color-danger-contrast: #ffffff;
|
|
45
|
+
|
|
46
|
+
--le-color-info: #17a2b8;
|
|
47
|
+
--le-color-info-light: #3ab0c3;
|
|
48
|
+
--le-color-info-dark: #117a8b;
|
|
49
|
+
--le-color-info-contrast: #ffffff;
|
|
50
|
+
|
|
51
|
+
/* Neutral colors */
|
|
52
|
+
--le-color-white: #ffffff;
|
|
53
|
+
--le-color-black: #000000;
|
|
54
|
+
--le-color-gray-50: #fafafa;
|
|
55
|
+
--le-color-gray-100: #f5f5f5;
|
|
56
|
+
--le-color-gray-200: #eeeeee;
|
|
57
|
+
--le-color-gray-300: #e0e0e0;
|
|
58
|
+
--le-color-gray-400: #bdbdbd;
|
|
59
|
+
--le-color-gray-500: #9e9e9e;
|
|
60
|
+
--le-color-gray-600: #757575;
|
|
61
|
+
--le-color-gray-700: #616161;
|
|
62
|
+
--le-color-gray-800: #424242;
|
|
63
|
+
--le-color-gray-900: #212121;
|
|
64
|
+
|
|
65
|
+
/* Background colors */
|
|
66
|
+
--le-color-background: #ffffff;
|
|
67
|
+
--le-color-background-secondary: #f5f5f5;
|
|
68
|
+
--le-color-background-tertiary: #eeeeee;
|
|
69
|
+
|
|
70
|
+
/* Surface colors (cards, modals, etc.) */
|
|
71
|
+
--le-color-surface: #ffffff;
|
|
72
|
+
--le-color-surface-elevated: #ffffff;
|
|
73
|
+
|
|
74
|
+
/* Text colors */
|
|
75
|
+
--le-color-text-primary: #212121;
|
|
76
|
+
--le-color-text-secondary: #757575;
|
|
77
|
+
--le-color-text-disabled: #9e9e9e;
|
|
78
|
+
--le-color-text-inverse: #ffffff;
|
|
79
|
+
|
|
80
|
+
/* Border colors */
|
|
81
|
+
--le-color-border: #e0e0e0;
|
|
82
|
+
--le-color-border-light: #eeeeee;
|
|
83
|
+
--le-color-border-dark: #bdbdbd;
|
|
84
|
+
|
|
85
|
+
/** Input borders */
|
|
86
|
+
--le-border-width: 2px;
|
|
87
|
+
--le-color-border-input: #c4d6e6;
|
|
88
|
+
|
|
89
|
+
/* Focus ring */
|
|
90
|
+
--le-color-focus: rgba(0, 136, 255, 0.5);
|
|
91
|
+
|
|
92
|
+
/* Border radius */
|
|
93
|
+
--le-radius-none: 0;
|
|
94
|
+
--le-radius-sm: 0.125rem; /* 2px */
|
|
95
|
+
--le-radius-md: 0.25rem; /* 4px */
|
|
96
|
+
--le-radius-lg: 0.5rem; /* 8px */
|
|
97
|
+
--le-radius-xl: 0.75rem; /* 12px */
|
|
98
|
+
--le-radius-2xl: 1rem; /* 16px */
|
|
99
|
+
--le-radius-full: 9999px;
|
|
100
|
+
|
|
101
|
+
/* Shadows */
|
|
102
|
+
--le-shadow-none: none;
|
|
103
|
+
--le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
104
|
+
--le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
105
|
+
--le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
106
|
+
--le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
107
|
+
--le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
|
|
108
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Le-Kit Gradient Theme
|
|
3
|
+
*
|
|
4
|
+
* Modern gradient style with purple accents and rounded corners.
|
|
5
|
+
*
|
|
6
|
+
* Usage: set theme="gradient" on any element, or import as your default.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
[theme="gradient"] {
|
|
10
|
+
/* Primary brand color - purple */
|
|
11
|
+
--le-color-primary: #8b5cf6;
|
|
12
|
+
--le-color-primary-light: #a78bfa;
|
|
13
|
+
--le-color-primary-dark: #7c3aed;
|
|
14
|
+
--le-color-primary-contrast: #ffffff;
|
|
15
|
+
|
|
16
|
+
/* Secondary accent color - pink */
|
|
17
|
+
--le-color-secondary: #ec4899;
|
|
18
|
+
--le-color-secondary-light: #f472b6;
|
|
19
|
+
--le-color-secondary-dark: #db2777;
|
|
20
|
+
--le-color-secondary-contrast: #ffffff;
|
|
21
|
+
|
|
22
|
+
/* Semantic colors */
|
|
23
|
+
--le-color-success: #10b981;
|
|
24
|
+
--le-color-success-light: #34d399;
|
|
25
|
+
--le-color-success-dark: #059669;
|
|
26
|
+
--le-color-success-contrast: #ffffff;
|
|
27
|
+
|
|
28
|
+
--le-color-warning: #f59e0b;
|
|
29
|
+
--le-color-warning-light: #fbbf24;
|
|
30
|
+
--le-color-warning-dark: #d97706;
|
|
31
|
+
--le-color-warning-contrast: #000000;
|
|
32
|
+
|
|
33
|
+
--le-color-danger: #ef4444;
|
|
34
|
+
--le-color-danger-light: #f87171;
|
|
35
|
+
--le-color-danger-dark: #dc2626;
|
|
36
|
+
--le-color-danger-contrast: #ffffff;
|
|
37
|
+
|
|
38
|
+
--le-color-info: #06b6d4;
|
|
39
|
+
--le-color-info-light: #22d3ee;
|
|
40
|
+
--le-color-info-dark: #0891b2;
|
|
41
|
+
--le-color-info-contrast: #ffffff;
|
|
42
|
+
|
|
43
|
+
/* Neutral colors */
|
|
44
|
+
--le-color-white: #ffffff;
|
|
45
|
+
--le-color-black: #000000;
|
|
46
|
+
--le-color-gray-50: #faf5ff;
|
|
47
|
+
--le-color-gray-100: #f3e8ff;
|
|
48
|
+
--le-color-gray-200: #e9d5ff;
|
|
49
|
+
--le-color-gray-300: #d8b4fe;
|
|
50
|
+
--le-color-gray-400: #c084fc;
|
|
51
|
+
--le-color-gray-500: #a855f7;
|
|
52
|
+
--le-color-gray-600: #9333ea;
|
|
53
|
+
--le-color-gray-700: #7e22ce;
|
|
54
|
+
--le-color-gray-800: #6b21a8;
|
|
55
|
+
--le-color-gray-900: #581c87;
|
|
56
|
+
|
|
57
|
+
/* Background colors */
|
|
58
|
+
--le-color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
59
|
+
--le-color-background-secondary: rgba(255, 255, 255, 0.1);
|
|
60
|
+
--le-color-background-tertiary: rgba(255, 255, 255, 0.05);
|
|
61
|
+
|
|
62
|
+
/* Surface colors */
|
|
63
|
+
--le-color-surface: rgba(255, 255, 255, 0.95);
|
|
64
|
+
--le-color-surface-elevated: #ffffff;
|
|
65
|
+
|
|
66
|
+
/* Text colors */
|
|
67
|
+
--le-color-text-primary: #1f2937;
|
|
68
|
+
--le-color-text-secondary: #6b7280;
|
|
69
|
+
--le-color-text-disabled: #9ca3af;
|
|
70
|
+
--le-color-text-inverse: #ffffff;
|
|
71
|
+
|
|
72
|
+
/* Border colors */
|
|
73
|
+
--le-color-border: rgba(139, 92, 246, 0.3);
|
|
74
|
+
--le-color-border-light: rgba(139, 92, 246, 0.1);
|
|
75
|
+
--le-color-border-dark: rgba(139, 92, 246, 0.5);
|
|
76
|
+
|
|
77
|
+
/** Input borders */
|
|
78
|
+
--le-border-width: 2px;
|
|
79
|
+
--le-color-border-input: #eccddd;
|
|
80
|
+
|
|
81
|
+
/* Focus ring */
|
|
82
|
+
--le-color-focus: rgba(139, 92, 246, 0.5);
|
|
83
|
+
|
|
84
|
+
/* Border radius - more rounded */
|
|
85
|
+
--le-radius-none: 0;
|
|
86
|
+
--le-radius-sm: 0.25rem;
|
|
87
|
+
--le-radius-md: 0.5rem;
|
|
88
|
+
--le-radius-lg: 1rem;
|
|
89
|
+
--le-radius-xl: 1.5rem;
|
|
90
|
+
--le-radius-2xl: 2rem;
|
|
91
|
+
--le-radius-full: 9999px;
|
|
92
|
+
|
|
93
|
+
/* Shadows - purple tinted */
|
|
94
|
+
--le-shadow-none: none;
|
|
95
|
+
--le-shadow-sm: 0 1px 2px rgba(139, 92, 246, 0.1);
|
|
96
|
+
--le-shadow-md: 0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);
|
|
97
|
+
--le-shadow-lg: 0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);
|
|
98
|
+
--le-shadow-xl: 0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);
|
|
99
|
+
--le-shadow-2xl: 0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2);
|
|
100
|
+
}
|