le-kit 0.0.2 → 0.1.0

package/readme.md

@@ -1,76 +1,207 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+# Le-Kit
 
-# Le Kit
-## Unusual Web Components
+[![npm version](https://img.shields.io/npm/v/le-kit.svg)](https://www.npmjs.com/package/le-kit)
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-I'm creating a kit of web components built using [Stencil.js](https://stenciljs.com/).
+A themeable web component library built with Stencil, featuring a dual-mode system for production and CMS editing.
 
-The idea is not to have another set of inputs, checkboxes, buttons, tabs and unique grid, but some rarely met components like the first two initial ones:
+## Features
 
-## Le Round Progress
+- 🎨 **Themeable** — CSS custom properties for complete styling control
+- 🔧 **Dual Mode** — Production (`default`) and CMS editing (`admin`) modes
+- 📦 **Multiple Builds** — Lazy-loaded, standalone, or admin-enabled bundles
+- 🌐 **Framework Agnostic** — Works with any framework or vanilla JS
+- 🪶 **Lightweight** — Tree-shakeable with minimal runtime overhead
 
-The round progress component is used more and more often after Apple announced the [Activity rings](https://www.apple.com/watch/close-your-rings/) for the Watch.
+## Installation
 
-With this component you can create almost the same look and feel as Apples rings and even more:
+```bash
+npm install le-kit
+```
+
+## Quick Start
+
+### Option 1: Lazy Loading (Recommended)
+
+The easiest way to use Le-Kit. Components are automatically loaded on-demand.
+
+```html
+<!-- In your HTML -->
+<script type="module">
+  import 'le-kit';
+</script>
+
+<!-- Include a theme -->
+<link rel="stylesheet" href="node_modules/le-kit/dist/themes/default.css" />
+
+<!-- Use components -->
+<le-card>
+  <span slot="header">Welcome</span>
+  <p>Your content here</p>
+  <le-button slot="footer">Get Started</le-button>
+</le-card>
+```
+
+### Option 2: Standalone Components (Tree-shakeable)
+
+Import only the components you need for smaller bundle sizes.
+
+```tsx
+// Import specific components
+import { defineCustomElement as defineCard } from 'le-kit/components/le-card';
+import { defineCustomElement as defineButton } from 'le-kit/components/le-button';
 
-**Circle Size** — the cirle size is taken from the elements width — you have to put the element inside a container with a fixed width to get the results
+// Register them
+defineCard();
+defineButton();
+```
 
-**Value** — the only attribute you can set is `value` it takes a value in percentage (0—100) and fills the progress accordingly.
+### Option 3: Core Build (No Admin Code)
 
-```<le-round-progress value="66"></le-round-progress>```
+The core build has all CMS editing functionality stripped out at build time for the smallest possible bundle.
 
-**Content** — everything you put inside the component will be shown over the round progress, so be carefull.
+```tsx
+import 'le-kit/core';
+```
 
-**Colors and bar width** — you should color the progress using css variables:
+### Option 4: Admin Build (CMS Editing)
 
-  * `--progress-width` (default: `4px`) — width of the progress bar;
-  * `--progress-color` (default: `#999`) — color of the progress bar (no gradients yet, sorry);
-  * `--progress-linecap` (default: `round`): `butt | round | square` — shape of the progress bar's end (see [stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap));
-  * `--progress-shadow`: `x y spread color` — shadow of the progress bar.
+Includes full CMS editing capabilities with inline editing and property panels.
 
-**Additional paths** — you can set two more paths for the progress bar — a backgrounds, visible even when the progress is 0. It can help to build the bar you want to build:
+```tsx
+import 'le-kit/admin';
+```
 
-  * `--progress-path-color` — color of the path, required to make the path visible;
-  * `--progress-path-width` (default: `--progress-width`) — width of the path (can be wider than the progress bar);
-  * `--progress-path-dasharray`: `dash length, space between` — settings if you want to have dotted of dashed stoke;
-  * `--progress-path-linecap` (default: `round`) — if it's dashed stroke, which end to use for dashes.
+```html
+<!-- Enable admin mode -->
+<html mode="admin">
+  <!-- Components now show editing UI -->
+</html>
+```
 
-  * `--progress-path2-color` — same as the above;
-  * `--progress-path2-width`;
-  * `--progress-path2-dasharray`;
-  * `--progress-path2-linecap`.
+## Theming
 
+Le-Kit ships with several built-in themes. Import the base styles plus your preferred theme:
 
+```html
+<!-- Base tokens (required) -->
+<link rel="stylesheet" href="le-kit/dist/themes/base.css" />
 
-## Le Turntable
+<!-- Choose a theme -->
+<link rel="stylesheet" href="le-kit/dist/themes/default.css" />
+<!-- or -->
+<link rel="stylesheet" href="le-kit/dist/themes/dark.css" />
+<link rel="stylesheet" href="le-kit/dist/themes/minimal.css" />
+<link rel="stylesheet" href="le-kit/dist/themes/warm.css" />
+<link rel="stylesheet" href="le-kit/dist/themes/gradient.css" />
+```
 
-Turntable component let's you turn the element initially, set the center point for the rotation and, most importantly, let's you... turn the element using mouse or fingers (on touch devices). And returns the new angle value.
+Or import in JavaScript:
 
-Usage:
+```tsx
+import 'le-kit/themes/base';
+import 'le-kit/themes/default';
 ```
-<le-turntable value="90" center="0 50%">
-  Contents...
-</le-turntable>
+
+### Custom Theming
+
+Override CSS custom properties to match your brand:
+
+```css
+:root {
+  --le-color-primary: #6366f1;
+  --le-color-secondary: #8b5cf6;
+  --le-radius-md: 12px;
+  --le-space-md: 1rem;
+}
 ```
 
-**Value** — `value`: `number` (0–360) initial degree to turn the component.
+## Components
+
+### Layout
+
+- **`<le-stack>`** — Flexbox layout with gap, alignment, and direction control
+- **`<le-box>`** — Flexible container with padding and background options
+- **`<le-card>`** — Card container with header, content, and footer slots
+
+### Actions
+
+- **`<le-button>`** — Button with variants (solid, outlined, clear) and colors
+
+### Content
+
+- **`<le-text>`** — Typography component with semantic variants
+
+### Feedback
+
+- **`<le-popup>`** — Toast notifications and alerts
+
+## Usage Examples
+
+### Card with Actions
+
+```html
+<le-card variant="elevated">
+  <h3 slot="header">Product Name</h3>
+  <p>Product description goes here with all the details.</p>
+  <le-stack slot="footer" justify="end" gap="8px">
+    <le-button variant="outlined">Cancel</le-button>
+    <le-button color="primary">Buy Now</le-button>
+  </le-stack>
+</le-card>
+```
+
+### Responsive Stack Layout
+
+```html
+<le-stack direction="horizontal" wrap gap="16px" align="stretch">
+  <le-box>Item 1</le-box>
+  <le-box>Item 2</le-box>
+  <le-box>Item 3</le-box>
+</le-stack>
+```
+
+### Button Variants
+
+```html
+<le-button variant="solid" color="primary">Primary</le-button>
+<le-button variant="outlined" color="secondary">Secondary</le-button>
+<le-button variant="clear" color="danger">Delete</le-button>
+```
+
+## Admin Mode
+
+Le-Kit includes a CMS editing mode that enables inline content editing and component configuration. This is useful for building visual editors and CMS interfaces.
+
+```html
+<!-- Enable on the entire page -->
+<html mode="admin">
+  <!-- Or on specific sections -->
+  <le-card mode="admin">
+    <!-- This card is now editable -->
+  </le-card>
+</html>
+```
+
+In admin mode, components display:
+
+- Inline text editing for content slots
+- Settings popovers for component properties
+- Drop zones for adding new components
 
-**Center point for rotation** — `center`: `horizontalValue verticalValue` same values as for the css-property `transformOrigin`.
+## Browser Support
 
-The component is a Work In Progress yet.
+Le-Kit supports all modern browsers:
 
+- Chrome 79+
+- Firefox 70+
+- Safari 14+
+- Edge 79+
 
-# Usage
+## License
 
-- Put a script tag similar to this `<script src='https://unpkg.com/le-kit@0.0.1/dist/le-kit.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+MIT License — see [LICENSE](./LICENSE) for details.
 
-### Node Modules
-- Run `npm install le-kit --save`
-- Put a script tag similar to this `<script src='node_modules/le-kit/dist/le-kit.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+## Contributing
 
-### In a stencil-starter app
-- Run `npm install le-kit --save`
-- Add an import to the npm packages `import le-kit;`
-- Then you can use the element anywhere in your template, JSX, html etc
+Contributions welcome! Please read our contributing guidelines before submitting a PR.

package/dist/cjs/es5/build/novg0vs0.entry.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var le_kit_core_js_1 = require("../le-kit.core.js");
-var LeTurntable = function () { function e() { this.center = "center", this.value = 0, this.rotating = !1, this.currentAngle = 0; } return e.prototype.updateValue = function (e) { this.rotating || (this.currentAngle = parseFloat(e), this.setAngle(this.currentAngle)); }, e.prototype.handleMouseDown = function (e) { return this.rotating = !0, this.startAngle = this.getAngle(e.pageX, e.pageY), e.preventDefault(), e.cancelBubble = !0, !1; }, e.prototype.handleMouseMove = function (e) { if (this.rotating)
-    return this.setAngle(this.currentAngle + (this.getAngle(e.pageX, e.pageY) - this.startAngle)), !1; }, e.prototype.handleMouseUp = function (e) { if (this.rotating) {
-    var t = this.currentAngle + (this.getAngle(e.pageX, e.pageY) - this.startAngle);
-    return this.setAngle(t), this.currentAngle = t, this.rotating = !1, !1;
-} }, e.prototype.handleWindowResize = function () { this.getTransformOrigin(); }, e.prototype.componentDidLoad = function () { this.el.style.transformOrigin = this.center, this.currentAngle = this.value, this.getTransformOrigin(), this.setAngle(this.currentAngle); }, e.prototype.componentDidUpdate = function () { this.getTransformOrigin(); }, e.prototype.getTransformOrigin = function () { var e; e = window.getComputedStyle(this.el, null).transformOrigin.split(" ").map(function (e) { return Math.round(parseFloat(e)); }), this.centerX = e[0], this.centerY = e[1]; var t = null, n = ((t = document.documentElement) || (t = document.body.parentNode)) && "number" == typeof t.scrollLeft ? t : document.body, r = this.el.getBoundingClientRect(); this.pageX = Math.round(r.left + n.scrollLeft), this.pageY = Math.round(r.top + n.scrollTop); }, e.prototype.getAngle = function (e, t) { return Math.round(180 * Math.atan2(t - this.pageY - this.centerY, e - this.pageX - this.centerX) / Math.PI * 100) / 100; }, e.prototype.setAngle = function (e) { this.el.style.transform = "rotate(" + e + "deg)"; }, e.prototype.render = function () { return le_kit_core_js_1.h("div", { class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, le_kit_core_js_1.h("slot", null)); }, Object.defineProperty(e, "is", { get: function () { return "le-turntable"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "encapsulation", { get: function () { return "shadow"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "properties", { get: function () { return { center: { type: String, attr: "center" }, el: { elementRef: !0 }, value: { type: Number, attr: "value", watchCallbacks: ["updateValue"] } }; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "listeners", { get: function () { return [{ name: "window:mousemove", method: "handleMouseMove", passive: !0 }, { name: "window:mouseup", method: "handleMouseUp", passive: !0 }, { name: "window:resize", method: "handleWindowResize", passive: !0 }]; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "style", { get: function () { return ":host{display:block;cursor:-webkit-grab;cursor:grab}div.turntable{width:100%;height:100%;padding:1px}"; }, enumerable: !0, configurable: !0 }), e; }();
-exports.LeTurntable = LeTurntable;

package/dist/cjs/es5/build/novg0vs0.sc.entry.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var le_kit_core_js_1 = require("../le-kit.core.js");
-var LeTurntable = function () { function e() { this.center = "center", this.value = 0, this.rotating = !1, this.currentAngle = 0; } return e.prototype.updateValue = function (e) { this.rotating || (this.currentAngle = parseFloat(e), this.setAngle(this.currentAngle)); }, e.prototype.handleMouseDown = function (e) { return this.rotating = !0, this.startAngle = this.getAngle(e.pageX, e.pageY), e.preventDefault(), e.cancelBubble = !0, !1; }, e.prototype.handleMouseMove = function (e) { if (this.rotating)
-    return this.setAngle(this.currentAngle + (this.getAngle(e.pageX, e.pageY) - this.startAngle)), !1; }, e.prototype.handleMouseUp = function (e) { if (this.rotating) {
-    var t = this.currentAngle + (this.getAngle(e.pageX, e.pageY) - this.startAngle);
-    return this.setAngle(t), this.currentAngle = t, this.rotating = !1, !1;
-} }, e.prototype.handleWindowResize = function () { this.getTransformOrigin(); }, e.prototype.componentDidLoad = function () { this.el.style.transformOrigin = this.center, this.currentAngle = this.value, this.getTransformOrigin(), this.setAngle(this.currentAngle); }, e.prototype.componentDidUpdate = function () { this.getTransformOrigin(); }, e.prototype.getTransformOrigin = function () { var e; e = window.getComputedStyle(this.el, null).transformOrigin.split(" ").map(function (e) { return Math.round(parseFloat(e)); }), this.centerX = e[0], this.centerY = e[1]; var t = null, n = ((t = document.documentElement) || (t = document.body.parentNode)) && "number" == typeof t.scrollLeft ? t : document.body, r = this.el.getBoundingClientRect(); this.pageX = Math.round(r.left + n.scrollLeft), this.pageY = Math.round(r.top + n.scrollTop); }, e.prototype.getAngle = function (e, t) { return Math.round(180 * Math.atan2(t - this.pageY - this.centerY, e - this.pageX - this.centerX) / Math.PI * 100) / 100; }, e.prototype.setAngle = function (e) { this.el.style.transform = "rotate(" + e + "deg)"; }, e.prototype.render = function () { return le_kit_core_js_1.h("div", { class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, le_kit_core_js_1.h("slot", null)); }, Object.defineProperty(e, "is", { get: function () { return "le-turntable"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "encapsulation", { get: function () { return "shadow"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "properties", { get: function () { return { center: { type: String, attr: "center" }, el: { elementRef: !0 }, value: { type: Number, attr: "value", watchCallbacks: ["updateValue"] } }; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "listeners", { get: function () { return [{ name: "window:mousemove", method: "handleMouseMove", passive: !0 }, { name: "window:mouseup", method: "handleMouseUp", passive: !0 }, { name: "window:resize", method: "handleWindowResize", passive: !0 }]; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "style", { get: function () { return ".sc-le-turntable-h{display:block;cursor:-webkit-grab;cursor:grab}div.turntable.sc-le-turntable{width:100%;height:100%;padding:1px}"; }, enumerable: !0, configurable: !0 }), e; }();
-exports.LeTurntable = LeTurntable;

package/dist/cjs/es5/build/ptx6i6hn.entry.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var le_kit_core_js_1 = require("../le-kit.core.js");
-var LeRoundProgress = function () { function e() { this.value = 0; } return e.prototype.updateValue = function (e) { this.value = parseFloat(e); }, e.prototype.componentWillLoad = function () { var e = this.el.getBoundingClientRect().width, t = this.valToPx(this.getCSSVar("--progress-width") || "0"), r = this.valToPx(this.getCSSVar("--progress-path-width") || "0"), s = this.valToPx(this.getCSSVar("--progress-path2-width") || "0"), a = e - Math.max(t, r, s), o = Math.PI * a; this.params = { width: e, diameter: a, circumference: o }; }, e.prototype.getCSSVar = function (e) { return this.el.style.getPropertyValue(e); }, e.prototype.valToPx = function (e) { var t = e.match(/(\d*\.*\d+)([a-z]+|%)?/i), r = parseFloat(t[1]) || 4; switch (t[2]) {
-    case "%": return r / 100 * this.params.width;
-    case "em": return r * parseFloat(getComputedStyle(this.el).fontSize);
-    case "rem": return r * parseFloat(getComputedStyle(document.documentElement).fontSize);
-    case "px":
-    default: return r;
-} }, e.prototype.getViewBox = function () { return "0 0 " + this.params.width + " " + this.params.width; }, e.prototype.getPath = function () { return "M" + this.params.width / 2 + " " + (this.params.width - this.params.diameter) / 2 + " a " + this.params.diameter / 2 + " " + this.params.diameter / 2 + " 0 0 1 0 " + this.params.diameter + " a " + this.params.diameter / 2 + " " + this.params.diameter / 2 + " 0 0 1 0 -" + this.params.diameter; }, e.prototype.getStrokeDashArray = function () { return this.value / 100 * this.params.circumference + ", " + this.params.circumference; }, e.prototype.getPaths = function () { var e = []; return this.el.style.getPropertyValue("--progress-path-color") && e.push(le_kit_core_js_1.h("path", { class: "round-progress--path", d: this.getPath() })), this.el.style.getPropertyValue("--progress-path2-color") && e.push(le_kit_core_js_1.h("path", { class: "round-progress--path2", d: this.getPath() })), le_kit_core_js_1.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, e); }, e.prototype.render = function () { return le_kit_core_js_1.h("div", { class: "round-progress--container" }, this.getPaths(), le_kit_core_js_1.h("svg", { viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, le_kit_core_js_1.h("path", { class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), le_kit_core_js_1.h("div", { class: "round-progress--contents" }, le_kit_core_js_1.h("slot", null))); }, Object.defineProperty(e, "is", { get: function () { return "le-round-progress"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "encapsulation", { get: function () { return "shadow"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "properties", { get: function () { return { el: { elementRef: !0 }, params: { state: !0 }, value: { type: Number, attr: "value", watchCallbacks: ["updateValue"] } }; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "style", { get: function () { return ".round-progress--container,.round-progress--contents{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{-webkit-filter:drop-shadow(var(--progress-shadow));filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color,#999);stroke-width:var(--progress-width,4);stroke-linecap:var(--progress-linecap,round);-webkit-animation:progress--circle .5s ease-out forwards;animation:progress--circle .5s ease-out forwards;-webkit-transition:stroke-dasharray .5s ease-out;transition:stroke-dasharray .5s ease-out}\@-webkit-keyframes progress--circle{0%{stroke-dasharray:0 1000}}\@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke:var(--progress-path-color);stroke-width:var(--progress-path-width,var(--progress-width));stroke-dasharray:var(--progress-path-dasharray);stroke-linecap:var(--progress-path-linecap,round)}.round-progress--path2{fill:none;stroke:var(--progress-path2-color);stroke-width:var(--progress-path2-width,var(--progress-width));stroke-dasharray:var(--progress-path2-dasharray);stroke-linecap:var(--progress-path2-linecap,round)}"; }, enumerable: !0, configurable: !0 }), e; }();
-exports.LeRoundProgress = LeRoundProgress;

package/dist/cjs/es5/build/ptx6i6hn.sc.entry.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var le_kit_core_js_1 = require("../le-kit.core.js");
-var LeRoundProgress = function () { function e() { this.value = 0; } return e.prototype.updateValue = function (e) { this.value = parseFloat(e); }, e.prototype.componentWillLoad = function () { var e = this.el.getBoundingClientRect().width, t = this.valToPx(this.getCSSVar("--progress-width") || "0"), r = this.valToPx(this.getCSSVar("--progress-path-width") || "0"), s = this.valToPx(this.getCSSVar("--progress-path2-width") || "0"), a = e - Math.max(t, r, s), o = Math.PI * a; this.params = { width: e, diameter: a, circumference: o }; }, e.prototype.getCSSVar = function (e) { return this.el.style.getPropertyValue(e); }, e.prototype.valToPx = function (e) { var t = e.match(/(\d*\.*\d+)([a-z]+|%)?/i), r = parseFloat(t[1]) || 4; switch (t[2]) {
-    case "%": return r / 100 * this.params.width;
-    case "em": return r * parseFloat(getComputedStyle(this.el).fontSize);
-    case "rem": return r * parseFloat(getComputedStyle(document.documentElement).fontSize);
-    case "px":
-    default: return r;
-} }, e.prototype.getViewBox = function () { return "0 0 " + this.params.width + " " + this.params.width; }, e.prototype.getPath = function () { return "M" + this.params.width / 2 + " " + (this.params.width - this.params.diameter) / 2 + " a " + this.params.diameter / 2 + " " + this.params.diameter / 2 + " 0 0 1 0 " + this.params.diameter + " a " + this.params.diameter / 2 + " " + this.params.diameter / 2 + " 0 0 1 0 -" + this.params.diameter; }, e.prototype.getStrokeDashArray = function () { return this.value / 100 * this.params.circumference + ", " + this.params.circumference; }, e.prototype.getPaths = function () { var e = []; return this.el.style.getPropertyValue("--progress-path-color") && e.push(le_kit_core_js_1.h("path", { class: "round-progress--path", d: this.getPath() })), this.el.style.getPropertyValue("--progress-path2-color") && e.push(le_kit_core_js_1.h("path", { class: "round-progress--path2", d: this.getPath() })), le_kit_core_js_1.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, e); }, e.prototype.render = function () { return le_kit_core_js_1.h("div", { class: "round-progress--container" }, this.getPaths(), le_kit_core_js_1.h("svg", { viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, le_kit_core_js_1.h("path", { class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), le_kit_core_js_1.h("div", { class: "round-progress--contents" }, le_kit_core_js_1.h("slot", null))); }, Object.defineProperty(e, "is", { get: function () { return "le-round-progress"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "encapsulation", { get: function () { return "shadow"; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "properties", { get: function () { return { el: { elementRef: !0 }, params: { state: !0 }, value: { type: Number, attr: "value", watchCallbacks: ["updateValue"] } }; }, enumerable: !0, configurable: !0 }), Object.defineProperty(e, "style", { get: function () { return ".round-progress--container.sc-le-round-progress, .round-progress--contents.sc-le-round-progress{position:relative}.round-progress.sc-le-round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress.sc-le-round-progress{-webkit-filter:drop-shadow(var(--progress-shadow));filter:drop-shadow(var(--progress-shadow))}.round-progress--circle.sc-le-round-progress{fill:none;stroke:var(--progress-color,#999);stroke-width:var(--progress-width,4);stroke-linecap:var(--progress-linecap,round);-webkit-animation:progress--circle .5s ease-out forwards;animation:progress--circle .5s ease-out forwards;-webkit-transition:stroke-dasharray .5s ease-out;transition:stroke-dasharray .5s ease-out}\@-webkit-keyframes progress--circle{0%{stroke-dasharray:0 1000}}\@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path.sc-le-round-progress{fill:none;stroke:var(--progress-path-color);stroke-width:var(--progress-path-width,var(--progress-width));stroke-dasharray:var(--progress-path-dasharray);stroke-linecap:var(--progress-path-linecap,round)}.round-progress--path2.sc-le-round-progress{fill:none;stroke:var(--progress-path2-color);stroke-width:var(--progress-path2-width,var(--progress-width));stroke-dasharray:var(--progress-path2-dasharray);stroke-linecap:var(--progress-path2-linecap,round)}"; }, enumerable: !0, configurable: !0 }), e; }();
-exports.LeRoundProgress = LeRoundProgress;

package/dist/cjs/es5/index.js

@@ -1 +0,0 @@
-// LeKit: ES Module

package/dist/cjs/es5/le-kit.components.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// LeKit: Host Data, ES Module/es5 Target
-exports.COMPONENTS = [["le-round-progress", "ptx6i6hn", 1, [["el", 64], ["params", 16], ["value", 1, 0, 1, 8]], 1], ["le-turntable", "novg0vs0", 1, [["center", 1, 0, 1, 2], ["el", 64], ["value", 1, 0, 1, 8]], 1, [["window:mousemove", "handleMouseMove", 0, 1], ["window:mouseup", "handleMouseUp", 0, 1], ["window:resize", "handleWindowResize", 0, 1]]]];