@lazhus/kg-ui 0.9.0 → 0.9.1
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 +1 -1
- package/dist/components/kg-switch.js +16 -2
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -5346,7 +5346,7 @@
|
|
|
5346
5346
|
"kind": "field",
|
|
5347
5347
|
"name": "styles",
|
|
5348
5348
|
"static": true,
|
|
5349
|
-
"default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition:
|
|
5349
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
5350
5350
|
},
|
|
5351
5351
|
{
|
|
5352
5352
|
"kind": "method",
|
|
@@ -39,7 +39,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
39
39
|
height: 24px;
|
|
40
40
|
background: var(--kg-border);
|
|
41
41
|
border-radius: 24px;
|
|
42
|
-
transition:
|
|
42
|
+
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
43
43
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -52,7 +52,16 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
52
52
|
background: white;
|
|
53
53
|
border-radius: 50%;
|
|
54
54
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
55
|
-
|
|
55
|
+
transform: translateX(0);
|
|
56
|
+
will-change: transform;
|
|
57
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
58
|
+
width 0.2s ease,
|
|
59
|
+
background-color 0.3s ease;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Micro-animation: stretch effect on click */
|
|
63
|
+
.kg-switch-wrapper:active .kg-switch-thumb {
|
|
64
|
+
width: 26px;
|
|
56
65
|
}
|
|
57
66
|
|
|
58
67
|
/* Checked State */
|
|
@@ -64,10 +73,15 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
|
|
|
64
73
|
transform: translateX(20px);
|
|
65
74
|
}
|
|
66
75
|
|
|
76
|
+
:host([checked]) .kg-switch-wrapper:active .kg-switch-thumb {
|
|
77
|
+
transform: translateX(14px); /* Adjust position when stretched */
|
|
78
|
+
}
|
|
79
|
+
|
|
67
80
|
.label {
|
|
68
81
|
font-size: 0.95rem;
|
|
69
82
|
font-weight: 500;
|
|
70
83
|
color: var(--kg-text);
|
|
84
|
+
transition: color 0.3s ease;
|
|
71
85
|
}
|
|
72
86
|
|
|
73
87
|
.error-text {
|