@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-skeleton/dropi-skeleton.js

@@ -7,16 +7,22 @@ export class DropiSkeleton {
     /** Shape variant: 'text' | 'circle' | 'rect' */
     variant = 'text';
     /** Width (CSS value, e.g. "100%", "200px") */
-    width = '100%';
+    width = '';
     /** Height (CSS value, e.g. "16px", "48px") */
-    height = '16px';
+    height = '';
     /** Border radius override */
-    borderRadius = '';
+    radius = '8px';
     /** Number of lines to repeat (text variant only) */
     lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
     getRadius() {
-        if (this.borderRadius)
-            return this.borderRadius;
+        if (this.radius)
+            return this.radius;
         if (this.variant === 'circle')
             return '50%';
         if (this.variant === 'text')
@@ -29,12 +35,16 @@ export class DropiSkeleton {
                     width: i === this.lines - 1 ? '70%' : this.width,
                     height: this.height,
                     borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
                 } })))));
         }
         return (h("div", { class: "skeleton", style: {
                 width: this.width,
                 height: this.height,
                 borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
             } }));
     }
     static get is() { return "dropi-skeleton"; }
@@ -95,7 +105,7 @@ export class DropiSkeleton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width",
-                "defaultValue": "'100%'"
+                "defaultValue": "''"
             },
             "height": {
                 "type": "string",
@@ -115,9 +125,9 @@ export class DropiSkeleton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "height",
-                "defaultValue": "'16px'"
+                "defaultValue": "''"
             },
-            "borderRadius": {
+            "radius": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -134,8 +144,8 @@ export class DropiSkeleton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "border-radius",
-                "defaultValue": "''"
+                "attribute": "radius",
+                "defaultValue": "'8px'"
             },
             "lines": {
                 "type": "number",
@@ -156,6 +166,26 @@ export class DropiSkeleton {
                 "reflect": false,
                 "attribute": "lines",
                 "defaultValue": "1"
+            },
+            "baseColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-color",
+                "defaultValue": "'#f6f7f8'"
             }
         };
     }

package/dist/collection/components/dropi-steps/dropi-steps.css

@@ -43,13 +43,13 @@
 }
 
 .stepper__circle--pending {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Gray-Gray-200, #c3c9d9);
   color: var(--Gray-Gray-400, #858ea6);
 }
 
 .stepper__circle--focus {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
   color: var(--Primary-Primary-500, #f49a3d);
 }
@@ -57,7 +57,7 @@
 .stepper__circle--completed {
   background: var(--Primary-Primary-500, #f49a3d);
   border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
 }
 
 /* ── Connecting line ────────────────────────────────────── */

package/dist/collection/components/dropi-steps/dropi-steps.js

@@ -9,9 +9,11 @@ export class DropiSteps {
     /** Show step number inside the circle */
     showNumberOfStep = true;
     /** Active/current step index (1-based) */
-    currentStep = 1;
+    currentStep = 0;
     /** Labels for each step. Pass as JSON string or array */
     stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
     get parsedLabels() {
         if (typeof this.stepLabels === 'string') {
             try {
@@ -33,7 +35,7 @@ export class DropiSteps {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
+        return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;
@@ -112,7 +114,7 @@ export class DropiSteps {
                 "setter": false,
                 "reflect": false,
                 "attribute": "current-step",
-                "defaultValue": "1"
+                "defaultValue": "0"
             },
             "stepLabels": {
                 "type": "string",
@@ -139,6 +141,32 @@ export class DropiSteps {
                 "reflect": false,
                 "attribute": "step-labels",
                 "defaultValue": "[]"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepState",
+                    "resolved": "\"completed\" | \"focus\" | \"pending\"",
+                    "references": {
+                        "StepState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual state applied to the active step (matches Angular `state`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'pending'"
             }
         };
     }

package/dist/collection/components/dropi-switch/dropi-switch.js

@@ -9,14 +9,14 @@ export class DropiSwitch {
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
-    dropiChange;
+    onChange;
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
-        this.dropiChange.emit(this.isChecked);
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
+        return (h("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, h("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -77,8 +77,8 @@ export class DropiSwitch {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,