@rcarls/rc-switch 0.5.0 → 0.7.0
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/CHANGELOG.md +41 -0
- package/dist/{rc-switch-98TbWbUy.js → rc-switch-BcW_U44w.js} +2 -139
- package/dist/rc-switch-BcW_U44w.js.map +1 -0
- package/dist/rc-switch-define.js +1 -1
- package/dist/rc-switch.js +1 -1
- package/dist/types/packages/rc-switch/src/rc-switch.d.ts +1 -1
- package/package.json +1 -1
- package/dist/rc-switch-98TbWbUy.js.map +0 -1
- package/dist/types/packages/rc-switch/src/rc-switch.test.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# @rcarls/rc-switch
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 6e548d9: Several components handle `prefers-reduced-motion: reduce` in their own
|
|
8
|
+
shadow styles, outside a theme's reach, and refine it the same way the theme
|
|
9
|
+
layer already does: spatial motion (`translate`, `scale`, `transform`,
|
|
10
|
+
`inline-size`, `block-size`) goes fully to zero, while effects motion (color,
|
|
11
|
+
opacity) shortens instead of disappearing.
|
|
12
|
+
|
|
13
|
+
`rc-app-bar` zeros its host's hide/show `translate` but shortens the
|
|
14
|
+
expanded title's fade-in. `rc-disclosure` keeps its panel's expand/collapse
|
|
15
|
+
zeroed, but its summary/content backstop for a theme-added transition now
|
|
16
|
+
shortens instead of zeroing it outright. `rc-list-item`'s row and
|
|
17
|
+
state-layer transition only color and opacity, so the whole sweep shortens.
|
|
18
|
+
`rc-fab-menu`'s popup mixes `scale` with opacity/overlay/display under one
|
|
19
|
+
shared duration; reduced motion now zeros the scale and shortens the rest.
|
|
20
|
+
`rc-switch`'s thumb mixes background-color with inline-size/block-size/
|
|
21
|
+
transform the same way; the icons and track, which each transition only one
|
|
22
|
+
kind of property, needed only the zero-or-shorten call. `rc-fab`'s
|
|
23
|
+
scroll-reveal is opacity/visibility only with no time-based duration to
|
|
24
|
+
shorten in its scroll-linked path, so reduced motion narrows the scroll
|
|
25
|
+
window instead of collapsing it to zero; its JS-transition fallback path
|
|
26
|
+
shortens the same fade rather than removing it. `rc-progress`'s determinate
|
|
27
|
+
fill transition, previously unguarded under reduced motion, is now zeroed;
|
|
28
|
+
its indeterminate loop, a continuous sweep with no meaningful shortened
|
|
29
|
+
form, stays fully stopped rather than shortened.
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
34
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
35
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
36
|
+
styles are unchanged.
|
|
37
|
+
|
|
38
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
39
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
40
|
+
depend on `@rcarls/rc-common` for it.
|
|
41
|
+
|
|
42
|
+
## 0.6.0
|
|
43
|
+
|
|
3
44
|
## 0.5.0
|
|
4
45
|
|
|
5
46
|
## 0.4.2
|
|
@@ -1,143 +1,6 @@
|
|
|
1
1
|
import { css as l, LitElement as u, html as p } from "lit";
|
|
2
2
|
import { property as r } from "lit/decorators.js";
|
|
3
|
-
const v = l
|
|
4
|
-
:host {
|
|
5
|
-
display: inline-grid;
|
|
6
|
-
inline-size: var(--rc-switch-track-inline-size);
|
|
7
|
-
block-size: var(--rc-switch-track-block-size);
|
|
8
|
-
position: relative;
|
|
9
|
-
color-scheme: inherit;
|
|
10
|
-
vertical-align: middle;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
::slotted(input[type='checkbox']) {
|
|
18
|
-
appearance: var(--rc-switch-native-appearance, revert);
|
|
19
|
-
grid-area: 1 / 1;
|
|
20
|
-
inline-size: var(--rc-switch-native-inline-size, revert);
|
|
21
|
-
block-size: var(--rc-switch-native-block-size, revert);
|
|
22
|
-
margin: var(--rc-switch-native-margin, revert);
|
|
23
|
-
opacity: var(--rc-switch-native-opacity, revert);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[part='track'],
|
|
27
|
-
[part='thumb'],
|
|
28
|
-
[part='selected-icon'],
|
|
29
|
-
[part='deselected-icon'] {
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
grid-area: 1 / 1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
[part='track'] {
|
|
35
|
-
display: var(--rc-switch-decoration-display, none);
|
|
36
|
-
border: var(--rc-switch-track-border, 2px solid ButtonBorder);
|
|
37
|
-
border-radius: var(--rc-switch-track-radius, 9999px);
|
|
38
|
-
background: var(--rc-switch-track-bg, ButtonFace);
|
|
39
|
-
transition:
|
|
40
|
-
background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
|
|
41
|
-
border-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
[part='thumb'] {
|
|
45
|
-
display: var(--rc-switch-decoration-display, none);
|
|
46
|
-
align-self: center;
|
|
47
|
-
justify-self: start;
|
|
48
|
-
inline-size: var(--rc-switch-thumb-size, 1rem);
|
|
49
|
-
block-size: var(--rc-switch-thumb-size, 1rem);
|
|
50
|
-
margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);
|
|
51
|
-
border-radius: var(--rc-switch-thumb-radius, 9999px);
|
|
52
|
-
background: var(--rc-switch-thumb-bg, ButtonText);
|
|
53
|
-
transform: translateX(0);
|
|
54
|
-
transition:
|
|
55
|
-
background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
|
|
56
|
-
inline-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
|
|
57
|
-
block-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
|
|
58
|
-
transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
[part='selected-icon'],
|
|
62
|
-
[part='deselected-icon'] {
|
|
63
|
-
place-self: center start;
|
|
64
|
-
display: none;
|
|
65
|
-
inline-size: var(--rc-switch-icon-size, 1rem);
|
|
66
|
-
block-size: var(--rc-switch-icon-size, 1rem);
|
|
67
|
-
margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);
|
|
68
|
-
color: var(--rc-switch-icon-color, Canvas);
|
|
69
|
-
transform: translateX(0);
|
|
70
|
-
transition: transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([icons]) [part='deselected-icon'],
|
|
74
|
-
:host([icons][checked]) [part='selected-icon'],
|
|
75
|
-
:host([show-only-selected-icon][checked]) [part='selected-icon'] {
|
|
76
|
-
display: var(--rc-switch-icon-display, none);
|
|
77
|
-
place-items: center;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([icons][checked]) [part='deselected-icon'],
|
|
81
|
-
:host([show-only-selected-icon]) [part='deselected-icon'] {
|
|
82
|
-
display: none;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
:host([checked]) [part='track'] {
|
|
86
|
-
border-color: var(--rc-switch-selected-track-border-color, Highlight);
|
|
87
|
-
background: var(--rc-switch-selected-track-bg, Highlight);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
:host([checked]) [part='thumb'] {
|
|
91
|
-
inline-size: var(--rc-switch-selected-thumb-size, 1.5rem);
|
|
92
|
-
block-size: var(--rc-switch-selected-thumb-size, 1.5rem);
|
|
93
|
-
background: var(--rc-switch-selected-thumb-bg, HighlightText);
|
|
94
|
-
transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
:host([checked]) [part='selected-icon'],
|
|
98
|
-
:host([checked]) [part='deselected-icon'] {
|
|
99
|
-
transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
:host(:focus-within) [part='track'] {
|
|
103
|
-
outline: var(--rc-switch-focus-ring, 2px solid Highlight);
|
|
104
|
-
outline-offset: var(--rc-switch-focus-ring-offset, 2px);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
:host([disabled]) {
|
|
108
|
-
opacity: var(--rc-switch-disabled-opacity, 0.5);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
@media (prefers-reduced-motion: reduce) {
|
|
112
|
-
[part='track'],
|
|
113
|
-
[part='thumb'],
|
|
114
|
-
[part='selected-icon'],
|
|
115
|
-
[part='deselected-icon'] {
|
|
116
|
-
transition-duration: 0ms;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
@media (forced-colors: active) {
|
|
121
|
-
[part='track'] {
|
|
122
|
-
forced-color-adjust: none;
|
|
123
|
-
border-color: ButtonText;
|
|
124
|
-
background: ButtonFace;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
:host([checked]) [part='track'] {
|
|
128
|
-
border-color: Highlight;
|
|
129
|
-
background: Highlight;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
[part='thumb'] {
|
|
133
|
-
background: ButtonText;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
:host([checked]) [part='thumb'] {
|
|
137
|
-
background: HighlightText;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
`;
|
|
3
|
+
const v = l`:host{inline-size:var(--rc-switch-track-inline-size);block-size:var(--rc-switch-track-block-size);color-scheme:inherit;vertical-align:middle;display:inline-grid;position:relative}:host([hidden]){display:none}::slotted(input[type=checkbox]){appearance:var(--rc-switch-native-appearance,revert);inline-size:var(--rc-switch-native-inline-size,revert);block-size:var(--rc-switch-native-block-size,revert);margin:var(--rc-switch-native-margin,revert);opacity:var(--rc-switch-native-opacity,revert);grid-area:1/1}[part=track],[part=thumb],[part=selected-icon],[part=deselected-icon]{pointer-events:none;grid-area:1/1}[part=track]{display:var(--rc-switch-decoration-display,none);border:var(--rc-switch-track-border,2px solid ButtonBorder);border-radius:var(--rc-switch-track-radius,9999px);background:var(--rc-switch-track-bg,ButtonFace);transition:background-color var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease), border-color var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease)}[part=thumb]{display:var(--rc-switch-decoration-display,none);inline-size:var(--rc-switch-thumb-size,1rem);block-size:var(--rc-switch-thumb-size,1rem);border-radius:var(--rc-switch-thumb-radius,9999px);background:var(--rc-switch-thumb-bg,ButtonText);transition:background-color var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease), inline-size var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease), block-size var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease), transform var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease);place-self:center start;margin-inline-start:var(--rc-switch-thumb-offset,.375rem);transform:translate(0)}[part=selected-icon],[part=deselected-icon]{inline-size:var(--rc-switch-icon-size,1rem);block-size:var(--rc-switch-icon-size,1rem);color:var(--rc-switch-icon-color,Canvas);transition:transform var(--rc-switch-duration,.15s) var(--rc-switch-easing,ease);place-self:center start;margin-inline-start:var(--rc-switch-thumb-offset,.375rem);display:none;transform:translate(0)}:host([icons]) [part=deselected-icon],:host([icons][checked]) [part=selected-icon],:host([show-only-selected-icon][checked]) [part=selected-icon]{display:var(--rc-switch-icon-display,none);place-items:center}:host([icons][checked]) [part=deselected-icon],:host([show-only-selected-icon]) [part=deselected-icon]{display:none}:host([checked]) [part=track]{border-color:var(--rc-switch-selected-track-border-color,Highlight);background:var(--rc-switch-selected-track-bg,Highlight)}:host([checked]) [part=thumb]{inline-size:var(--rc-switch-selected-thumb-size,1.5rem);block-size:var(--rc-switch-selected-thumb-size,1.5rem);background:var(--rc-switch-selected-thumb-bg,HighlightText);transform:translateX(var(--rc-switch-thumb-translate,1.125rem))}:host([checked]) [part=selected-icon],:host([checked]) [part=deselected-icon]{transform:translateX(var(--rc-switch-thumb-translate,1.125rem))}:host(:focus-within) [part=track]{outline:var(--rc-switch-focus-ring,2px solid Highlight);outline-offset:var(--rc-switch-focus-ring-offset,2px)}:host([disabled]){opacity:var(--rc-switch-disabled-opacity,.5)}@media (prefers-reduced-motion:reduce){[part=track]{transition-duration:50ms}[part=thumb]{transition:background-color 50ms var(--rc-switch-easing,ease), inline-size 0s var(--rc-switch-easing,ease), block-size 0s var(--rc-switch-easing,ease), transform 0s var(--rc-switch-easing,ease)}[part=selected-icon],[part=deselected-icon]{transition-duration:0s}}@media (forced-colors:active){[part=track]{forced-color-adjust:none;background:buttonface;border-color:buttontext}:host([checked]) [part=track]{background:highlight;border-color:highlight}[part=thumb]{background:buttontext}:host([checked]) [part=thumb]{background:highlighttext}}`;
|
|
141
4
|
var k = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (d, e, t, a) => {
|
|
142
5
|
for (var i = a > 1 ? void 0 : a ? b(e, t) : e, n = d.length - 1, h; n >= 0; n--)
|
|
143
6
|
(h = d[n]) && (i = (a ? h(e, t, i) : h(i)) || i);
|
|
@@ -253,4 +116,4 @@ c([
|
|
|
253
116
|
export {
|
|
254
117
|
s as R
|
|
255
118
|
};
|
|
256
|
-
//# sourceMappingURL=rc-switch-
|
|
119
|
+
//# sourceMappingURL=rc-switch-BcW_U44w.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-switch-BcW_U44w.js","sources":["../src/rc-switch.styles.ts","../src/rc-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n :host {\n display: inline-grid;\n inline-size: var(--rc-switch-track-inline-size);\n block-size: var(--rc-switch-track-block-size);\n position: relative;\n color-scheme: inherit;\n vertical-align: middle;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n ::slotted(input[type='checkbox']) {\n appearance: var(--rc-switch-native-appearance, revert);\n grid-area: 1 / 1;\n inline-size: var(--rc-switch-native-inline-size, revert);\n block-size: var(--rc-switch-native-block-size, revert);\n margin: var(--rc-switch-native-margin, revert);\n opacity: var(--rc-switch-native-opacity, revert);\n }\n\n [part='track'],\n [part='thumb'],\n [part='selected-icon'],\n [part='deselected-icon'] {\n pointer-events: none;\n grid-area: 1 / 1;\n }\n\n [part='track'] {\n display: var(--rc-switch-decoration-display, none);\n border: var(--rc-switch-track-border, 2px solid ButtonBorder);\n border-radius: var(--rc-switch-track-radius, 9999px);\n background: var(--rc-switch-track-bg, ButtonFace);\n transition:\n background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n border-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n [part='thumb'] {\n display: var(--rc-switch-decoration-display, none);\n align-self: center;\n justify-self: start;\n inline-size: var(--rc-switch-thumb-size, 1rem);\n block-size: var(--rc-switch-thumb-size, 1rem);\n margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n border-radius: var(--rc-switch-thumb-radius, 9999px);\n background: var(--rc-switch-thumb-bg, ButtonText);\n transform: translateX(0);\n transition:\n background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n inline-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n block-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n [part='selected-icon'],\n [part='deselected-icon'] {\n place-self: center start;\n display: none;\n inline-size: var(--rc-switch-icon-size, 1rem);\n block-size: var(--rc-switch-icon-size, 1rem);\n margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n color: var(--rc-switch-icon-color, Canvas);\n transform: translateX(0);\n transition: transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n :host([icons]) [part='deselected-icon'],\n :host([icons][checked]) [part='selected-icon'],\n :host([show-only-selected-icon][checked]) [part='selected-icon'] {\n display: var(--rc-switch-icon-display, none);\n place-items: center;\n }\n\n :host([icons][checked]) [part='deselected-icon'],\n :host([show-only-selected-icon]) [part='deselected-icon'] {\n display: none;\n }\n\n :host([checked]) [part='track'] {\n border-color: var(--rc-switch-selected-track-border-color, Highlight);\n background: var(--rc-switch-selected-track-bg, Highlight);\n }\n\n :host([checked]) [part='thumb'] {\n inline-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n block-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n background: var(--rc-switch-selected-thumb-bg, HighlightText);\n transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n }\n\n :host([checked]) [part='selected-icon'],\n :host([checked]) [part='deselected-icon'] {\n transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n }\n\n :host(:focus-within) [part='track'] {\n outline: var(--rc-switch-focus-ring, 2px solid Highlight);\n outline-offset: var(--rc-switch-focus-ring-offset, 2px);\n }\n\n :host([disabled]) {\n opacity: var(--rc-switch-disabled-opacity, 0.5);\n }\n\n /*\n * track only ever transitions background-color/border-color (effects), so\n * it shortens rather than zeroes. thumb mixes effects (background-color)\n * with spatial movement (inline-size, block-size, transform) under one\n * shared --rc-switch-duration, so its reduced-motion override restates\n * the transition list instead: background-color shortens, the spatial\n * trio drops to 0ms. The icons only ever transition transform (spatial),\n * so they stay fully zeroed.\n */\n @media (prefers-reduced-motion: reduce) {\n [part='track'] {\n transition-duration: 50ms;\n }\n\n [part='thumb'] {\n transition:\n background-color 50ms var(--rc-switch-easing, ease),\n inline-size 0ms var(--rc-switch-easing, ease),\n block-size 0ms var(--rc-switch-easing, ease),\n transform 0ms var(--rc-switch-easing, ease);\n }\n\n [part='selected-icon'],\n [part='deselected-icon'] {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n [part='track'] {\n forced-color-adjust: none;\n border-color: ButtonText;\n background: ButtonFace;\n }\n\n :host([checked]) [part='track'] {\n border-color: Highlight;\n background: Highlight;\n }\n\n [part='thumb'] {\n background: ButtonText;\n }\n\n :host([checked]) [part='thumb'] {\n background: HighlightText;\n }\n }\n`;\n\nexport default switchStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport switchStyles from './rc-switch.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-switch': RCSwitch;\n }\n\n interface HTMLElementEventMap {\n 'rc-switch-change': CustomEvent<RCSwitchChangeDetail>;\n }\n}\n\n/** Detail payload for `rc-switch-change`. */\nexport interface RCSwitchChangeDetail {\n /** Current checked state after user interaction. */\n checked: boolean;\n}\n\n/**\n * Switch wrapper that enhances a direct native checkbox input.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-switch rc-switch docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/switch/ WAI-ARIA switch pattern}\n *\n * @slot - A direct native `<input type=\"checkbox\">` child.\n *\n * @fires rc-switch-change - Fired after user interaction changes the checked state.\n *\n * @csspart track - Visual switch track.\n * @csspart thumb - Visual switch thumb.\n * @csspart selected-icon - Optional selected-state icon container.\n * @csspart deselected-icon - Optional deselected-state icon container.\n *\n * @attr checked - Current checked state. Host writes are silent.\n * @attr default-checked - Initial checked state for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native checkbox.\n * @attr icons - Shows both selected and deselected icon containers.\n * @attr show-only-selected-icon - Shows only the selected icon container.\n *\n * @cssprop [--rc-switch-track-inline-size] - Track inline size. No built-in default; a theme\n * must set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-track-block-size] - Track block size. No built-in default; a theme must\n * set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-native-appearance=revert] - Slotted native checkbox `appearance`.\n * @cssprop [--rc-switch-native-inline-size=revert] - Slotted native checkbox inline size.\n * @cssprop [--rc-switch-native-block-size=revert] - Slotted native checkbox block size.\n * @cssprop [--rc-switch-native-margin=revert] - Slotted native checkbox margin.\n * @cssprop [--rc-switch-native-opacity=revert] - Slotted native checkbox opacity.\n * @cssprop [--rc-switch-decoration-display=none] - Display of the track/thumb/icon decoration.\n * Themes set this to `block` (or similar) to opt into the decorated switch look.\n * @cssprop [--rc-switch-track-border=2px solid ButtonBorder] - Track border.\n * @cssprop [--rc-switch-track-radius=9999px] - Track and thumb border radius.\n * @cssprop [--rc-switch-track-bg=ButtonFace] - Unselected track background.\n * @cssprop [--rc-switch-duration=150ms] - Track/thumb/icon transition duration.\n * @cssprop [--rc-switch-easing=ease] - Track/thumb/icon transition easing.\n * @cssprop [--rc-switch-thumb-size=1rem] - Unselected thumb inline and block size.\n * @cssprop [--rc-switch-thumb-offset=0.375rem] - Thumb and icon inline start offset within the\n * track.\n * @cssprop [--rc-switch-thumb-radius=9999px] - Thumb border radius.\n * @cssprop [--rc-switch-thumb-bg=ButtonText] - Unselected thumb background.\n * @cssprop [--rc-switch-icon-size=1rem] - Selected/deselected icon container size.\n * @cssprop [--rc-switch-icon-color=Canvas] - Icon color.\n * @cssprop [--rc-switch-icon-display=none] - Display of the active icon container when `icons`\n * or `show-only-selected-icon` is set.\n * @cssprop [--rc-switch-selected-track-border-color=Highlight] - Selected track border color.\n * @cssprop [--rc-switch-selected-track-bg=Highlight] - Selected track background.\n * @cssprop [--rc-switch-selected-thumb-size=1.5rem] - Selected thumb inline and block size.\n * @cssprop [--rc-switch-selected-thumb-bg=HighlightText] - Selected thumb background.\n * @cssprop [--rc-switch-thumb-translate=1.125rem] - Inline-axis translation applied to the thumb\n * and icons when selected.\n * @cssprop [--rc-switch-focus-ring=2px solid Highlight] - Track focus ring, shown on\n * focus-within.\n * @cssprop [--rc-switch-focus-ring-offset=2px] - Track focus ring offset.\n * @cssprop [--rc-switch-disabled-opacity=0.5] - Host opacity while `disabled`.\n */\nexport class RCSwitch extends LitElement {\n static override styles = switchStyles;\n\n private _checked: boolean | undefined;\n private _defaultChecked = false;\n private _checkedInitialized = false;\n private _$input: HTMLInputElement | null = null;\n private _inputObserver: MutationObserver | null = null;\n private _$form: HTMLFormElement | null = null;\n private _roleOwned = false;\n private _disabledOwned = false;\n private _slotMicrotaskQueued = false;\n\n /** Current checked state. Host writes are silent. */\n @property({ type: Boolean, reflect: true })\n get checked(): boolean {\n return this._checked ?? this._defaultChecked;\n }\n\n set checked(value: boolean | undefined) {\n const oldValue = this.checked;\n\n this._checked = value;\n this._checkedInitialized = true;\n this._applyChecked(false);\n this.requestUpdate('checked', oldValue);\n }\n\n /** Initial checked state for uncontrolled usage. */\n @property({ type: Boolean, attribute: 'default-checked' })\n get defaultChecked(): boolean {\n return this._defaultChecked;\n }\n\n set defaultChecked(value: boolean) {\n const oldValue = this._defaultChecked;\n\n this._defaultChecked = value;\n\n if (!this._checkedInitialized && this._checked === undefined) {\n this._applyChecked(false);\n this.requestUpdate('checked', oldValue);\n }\n\n this.requestUpdate('defaultChecked', oldValue);\n }\n\n /** Mirror disabled state to the native checkbox. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Show selected and deselected icon affordance containers. */\n @property({ type: Boolean, reflect: true })\n icons = false;\n\n /** Show only the selected icon affordance container. */\n @property({ type: Boolean, attribute: 'show-only-selected-icon', reflect: true })\n showOnlySelectedIcon = false;\n\n override disconnectedCallback(): void {\n this._inputObserver?.disconnect();\n this._inputObserver = null;\n this._setForm(null);\n super.disconnectedCallback();\n }\n\n protected override firstUpdated(): void {\n this._syncNativeInput();\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (changed.has('disabled')) {\n this._applyDisabled();\n }\n }\n\n protected override render() {\n return html`\n <span part=\"track\" aria-hidden=\"true\"></span>\n <span part=\"thumb\" aria-hidden=\"true\"></span>\n <span part=\"selected-icon\" aria-hidden=\"true\"><slot name=\"selected-icon\">✓</slot></span>\n <span part=\"deselected-icon\" aria-hidden=\"true\"><slot name=\"deselected-icon\">–</slot></span>\n <slot @slotchange=${this._handleSlotChange}></slot>\n `;\n }\n\n private _handleSlotChange(): void {\n if (this._slotMicrotaskQueued) {\n return;\n }\n\n this._slotMicrotaskQueued = true;\n\n queueMicrotask(() => {\n this._slotMicrotaskQueued = false;\n\n if (this.isConnected) {\n this._syncNativeInput();\n }\n });\n }\n\n private _syncNativeInput(): void {\n const $nextInput = this.querySelector<HTMLInputElement>(':scope > input[type=\"checkbox\"]');\n\n if (!$nextInput && import.meta.env.DEV) {\n console.warn(\n '[rc-switch] No direct child <input type=\"checkbox\"> found. Place a native checkbox inside <rc-switch>.',\n this,\n );\n }\n\n if ($nextInput === this._$input) {\n this._applyNativeSemantics();\n this._applyChecked(false);\n this._applyDisabled();\n\n return;\n }\n\n this._$input?.removeEventListener('change', this._handleNativeChange);\n this._inputObserver?.disconnect();\n this._inputObserver = null;\n this._$input = $nextInput;\n this._roleOwned = false;\n this._disabledOwned = false;\n this._setForm($nextInput?.form ?? null);\n\n if ($nextInput) {\n if (!this._checkedInitialized && this._checked === undefined) {\n this._defaultChecked = $nextInput.defaultChecked || $nextInput.checked;\n this._checked = $nextInput.checked;\n }\n\n $nextInput.addEventListener('change', this._handleNativeChange);\n\n this._inputObserver = new MutationObserver(() => {\n this._applyNativeSemantics();\n this._syncFromNative();\n });\n\n this._inputObserver.observe($nextInput, {\n attributeFilter: ['checked', 'disabled', 'role'],\n });\n }\n\n this._applyNativeSemantics();\n this._applyChecked(false);\n this._applyDisabled();\n }\n\n private readonly _handleNativeChange = (): void => {\n this._syncFromNative();\n\n this.dispatchEvent(\n new CustomEvent<RCSwitchChangeDetail>('rc-switch-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked },\n }),\n );\n };\n\n private _syncFromNative(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n const oldValue = this.checked;\n\n this._checked = $input.checked;\n this._checkedInitialized = true;\n this.toggleAttribute('checked', $input.checked);\n this.requestUpdate('checked', oldValue);\n }\n\n private _applyNativeSemantics(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n if (!$input.hasAttribute('role')) {\n $input.setAttribute('role', 'switch');\n this._roleOwned = true;\n } else if (this._roleOwned && $input.getAttribute('role') !== 'switch') {\n this._roleOwned = false;\n }\n }\n\n private _applyChecked(writeDefault: boolean): void {\n const $input = this._$input;\n\n if (!$input) {\n this.toggleAttribute('checked', this.checked);\n\n return;\n }\n\n $input.checked = this.checked;\n\n if (writeDefault) {\n $input.defaultChecked = this._defaultChecked;\n }\n\n this.toggleAttribute('checked', $input.checked);\n }\n\n private _applyDisabled(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n if (this.disabled) {\n if (!$input.disabled) {\n this._disabledOwned = true;\n }\n\n $input.disabled = true;\n } else if (this._disabledOwned) {\n $input.disabled = false;\n this._disabledOwned = false;\n }\n }\n\n private _setForm($form: HTMLFormElement | null): void {\n this._$form?.removeEventListener('reset', this._handleFormReset);\n this._$form = $form;\n this._$form?.addEventListener('reset', this._handleFormReset);\n }\n\n private readonly _handleFormReset = (): void => {\n queueMicrotask(() => this._syncFromNative());\n };\n}\n\nexport default RCSwitch;\n"],"names":["switchStyles","css","_RCSwitch","LitElement","value","oldValue","changed","html","$nextInput","$input","writeDefault","$form","RCSwitch","__decorateClass","property"],"mappings":"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"}
|
package/dist/rc-switch-define.js
CHANGED
package/dist/rc-switch.js
CHANGED
|
@@ -95,7 +95,7 @@ export declare class RCSwitch extends LitElement {
|
|
|
95
95
|
disconnectedCallback(): void;
|
|
96
96
|
protected firstUpdated(): void;
|
|
97
97
|
protected updated(changed: PropertyValues<this>): void;
|
|
98
|
-
protected render(): import('lit').TemplateResult<1>;
|
|
98
|
+
protected render(): import('lit-html').TemplateResult<1>;
|
|
99
99
|
private _handleSlotChange;
|
|
100
100
|
private _syncNativeInput;
|
|
101
101
|
private readonly _handleNativeChange;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"rc-switch-98TbWbUy.js","sources":["../src/rc-switch.styles.ts","../src/rc-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n :host {\n display: inline-grid;\n inline-size: var(--rc-switch-track-inline-size);\n block-size: var(--rc-switch-track-block-size);\n position: relative;\n color-scheme: inherit;\n vertical-align: middle;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n ::slotted(input[type='checkbox']) {\n appearance: var(--rc-switch-native-appearance, revert);\n grid-area: 1 / 1;\n inline-size: var(--rc-switch-native-inline-size, revert);\n block-size: var(--rc-switch-native-block-size, revert);\n margin: var(--rc-switch-native-margin, revert);\n opacity: var(--rc-switch-native-opacity, revert);\n }\n\n [part='track'],\n [part='thumb'],\n [part='selected-icon'],\n [part='deselected-icon'] {\n pointer-events: none;\n grid-area: 1 / 1;\n }\n\n [part='track'] {\n display: var(--rc-switch-decoration-display, none);\n border: var(--rc-switch-track-border, 2px solid ButtonBorder);\n border-radius: var(--rc-switch-track-radius, 9999px);\n background: var(--rc-switch-track-bg, ButtonFace);\n transition:\n background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n border-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n [part='thumb'] {\n display: var(--rc-switch-decoration-display, none);\n align-self: center;\n justify-self: start;\n inline-size: var(--rc-switch-thumb-size, 1rem);\n block-size: var(--rc-switch-thumb-size, 1rem);\n margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n border-radius: var(--rc-switch-thumb-radius, 9999px);\n background: var(--rc-switch-thumb-bg, ButtonText);\n transform: translateX(0);\n transition:\n background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n inline-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n block-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n [part='selected-icon'],\n [part='deselected-icon'] {\n place-self: center start;\n display: none;\n inline-size: var(--rc-switch-icon-size, 1rem);\n block-size: var(--rc-switch-icon-size, 1rem);\n margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n color: var(--rc-switch-icon-color, Canvas);\n transform: translateX(0);\n transition: transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n }\n\n :host([icons]) [part='deselected-icon'],\n :host([icons][checked]) [part='selected-icon'],\n :host([show-only-selected-icon][checked]) [part='selected-icon'] {\n display: var(--rc-switch-icon-display, none);\n place-items: center;\n }\n\n :host([icons][checked]) [part='deselected-icon'],\n :host([show-only-selected-icon]) [part='deselected-icon'] {\n display: none;\n }\n\n :host([checked]) [part='track'] {\n border-color: var(--rc-switch-selected-track-border-color, Highlight);\n background: var(--rc-switch-selected-track-bg, Highlight);\n }\n\n :host([checked]) [part='thumb'] {\n inline-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n block-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n background: var(--rc-switch-selected-thumb-bg, HighlightText);\n transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n }\n\n :host([checked]) [part='selected-icon'],\n :host([checked]) [part='deselected-icon'] {\n transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n }\n\n :host(:focus-within) [part='track'] {\n outline: var(--rc-switch-focus-ring, 2px solid Highlight);\n outline-offset: var(--rc-switch-focus-ring-offset, 2px);\n }\n\n :host([disabled]) {\n opacity: var(--rc-switch-disabled-opacity, 0.5);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='track'],\n [part='thumb'],\n [part='selected-icon'],\n [part='deselected-icon'] {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n [part='track'] {\n forced-color-adjust: none;\n border-color: ButtonText;\n background: ButtonFace;\n }\n\n :host([checked]) [part='track'] {\n border-color: Highlight;\n background: Highlight;\n }\n\n [part='thumb'] {\n background: ButtonText;\n }\n\n :host([checked]) [part='thumb'] {\n background: HighlightText;\n }\n }\n`;\n\nexport default switchStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport switchStyles from './rc-switch.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-switch': RCSwitch;\n }\n\n interface HTMLElementEventMap {\n 'rc-switch-change': CustomEvent<RCSwitchChangeDetail>;\n }\n}\n\n/** Detail payload for `rc-switch-change`. */\nexport interface RCSwitchChangeDetail {\n /** Current checked state after user interaction. */\n checked: boolean;\n}\n\n/**\n * Switch wrapper that enhances a direct native checkbox input.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-switch rc-switch docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/switch/ WAI-ARIA switch pattern}\n *\n * @slot - A direct native `<input type=\"checkbox\">` child.\n *\n * @fires rc-switch-change - Fired after user interaction changes the checked state.\n *\n * @csspart track - Visual switch track.\n * @csspart thumb - Visual switch thumb.\n * @csspart selected-icon - Optional selected-state icon container.\n * @csspart deselected-icon - Optional deselected-state icon container.\n *\n * @attr checked - Current checked state. Host writes are silent.\n * @attr default-checked - Initial checked state for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native checkbox.\n * @attr icons - Shows both selected and deselected icon containers.\n * @attr show-only-selected-icon - Shows only the selected icon container.\n *\n * @cssprop [--rc-switch-track-inline-size] - Track inline size. No built-in default; a theme\n * must set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-track-block-size] - Track block size. No built-in default; a theme must\n * set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-native-appearance=revert] - Slotted native checkbox `appearance`.\n * @cssprop [--rc-switch-native-inline-size=revert] - Slotted native checkbox inline size.\n * @cssprop [--rc-switch-native-block-size=revert] - Slotted native checkbox block size.\n * @cssprop [--rc-switch-native-margin=revert] - Slotted native checkbox margin.\n * @cssprop [--rc-switch-native-opacity=revert] - Slotted native checkbox opacity.\n * @cssprop [--rc-switch-decoration-display=none] - Display of the track/thumb/icon decoration.\n * Themes set this to `block` (or similar) to opt into the decorated switch look.\n * @cssprop [--rc-switch-track-border=2px solid ButtonBorder] - Track border.\n * @cssprop [--rc-switch-track-radius=9999px] - Track and thumb border radius.\n * @cssprop [--rc-switch-track-bg=ButtonFace] - Unselected track background.\n * @cssprop [--rc-switch-duration=150ms] - Track/thumb/icon transition duration.\n * @cssprop [--rc-switch-easing=ease] - Track/thumb/icon transition easing.\n * @cssprop [--rc-switch-thumb-size=1rem] - Unselected thumb inline and block size.\n * @cssprop [--rc-switch-thumb-offset=0.375rem] - Thumb and icon inline start offset within the\n * track.\n * @cssprop [--rc-switch-thumb-radius=9999px] - Thumb border radius.\n * @cssprop [--rc-switch-thumb-bg=ButtonText] - Unselected thumb background.\n * @cssprop [--rc-switch-icon-size=1rem] - Selected/deselected icon container size.\n * @cssprop [--rc-switch-icon-color=Canvas] - Icon color.\n * @cssprop [--rc-switch-icon-display=none] - Display of the active icon container when `icons`\n * or `show-only-selected-icon` is set.\n * @cssprop [--rc-switch-selected-track-border-color=Highlight] - Selected track border color.\n * @cssprop [--rc-switch-selected-track-bg=Highlight] - Selected track background.\n * @cssprop [--rc-switch-selected-thumb-size=1.5rem] - Selected thumb inline and block size.\n * @cssprop [--rc-switch-selected-thumb-bg=HighlightText] - Selected thumb background.\n * @cssprop [--rc-switch-thumb-translate=1.125rem] - Inline-axis translation applied to the thumb\n * and icons when selected.\n * @cssprop [--rc-switch-focus-ring=2px solid Highlight] - Track focus ring, shown on\n * focus-within.\n * @cssprop [--rc-switch-focus-ring-offset=2px] - Track focus ring offset.\n * @cssprop [--rc-switch-disabled-opacity=0.5] - Host opacity while `disabled`.\n */\nexport class RCSwitch extends LitElement {\n static override styles = switchStyles;\n\n private _checked: boolean | undefined;\n private _defaultChecked = false;\n private _checkedInitialized = false;\n private _$input: HTMLInputElement | null = null;\n private _inputObserver: MutationObserver | null = null;\n private _$form: HTMLFormElement | null = null;\n private _roleOwned = false;\n private _disabledOwned = false;\n private _slotMicrotaskQueued = false;\n\n /** Current checked state. Host writes are silent. */\n @property({ type: Boolean, reflect: true })\n get checked(): boolean {\n return this._checked ?? this._defaultChecked;\n }\n\n set checked(value: boolean | undefined) {\n const oldValue = this.checked;\n\n this._checked = value;\n this._checkedInitialized = true;\n this._applyChecked(false);\n this.requestUpdate('checked', oldValue);\n }\n\n /** Initial checked state for uncontrolled usage. */\n @property({ type: Boolean, attribute: 'default-checked' })\n get defaultChecked(): boolean {\n return this._defaultChecked;\n }\n\n set defaultChecked(value: boolean) {\n const oldValue = this._defaultChecked;\n\n this._defaultChecked = value;\n\n if (!this._checkedInitialized && this._checked === undefined) {\n this._applyChecked(false);\n this.requestUpdate('checked', oldValue);\n }\n\n this.requestUpdate('defaultChecked', oldValue);\n }\n\n /** Mirror disabled state to the native checkbox. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Show selected and deselected icon affordance containers. */\n @property({ type: Boolean, reflect: true })\n icons = false;\n\n /** Show only the selected icon affordance container. */\n @property({ type: Boolean, attribute: 'show-only-selected-icon', reflect: true })\n showOnlySelectedIcon = false;\n\n override disconnectedCallback(): void {\n this._inputObserver?.disconnect();\n this._inputObserver = null;\n this._setForm(null);\n super.disconnectedCallback();\n }\n\n protected override firstUpdated(): void {\n this._syncNativeInput();\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (changed.has('disabled')) {\n this._applyDisabled();\n }\n }\n\n protected override render() {\n return html`\n <span part=\"track\" aria-hidden=\"true\"></span>\n <span part=\"thumb\" aria-hidden=\"true\"></span>\n <span part=\"selected-icon\" aria-hidden=\"true\"><slot name=\"selected-icon\">✓</slot></span>\n <span part=\"deselected-icon\" aria-hidden=\"true\"><slot name=\"deselected-icon\">–</slot></span>\n <slot @slotchange=${this._handleSlotChange}></slot>\n `;\n }\n\n private _handleSlotChange(): void {\n if (this._slotMicrotaskQueued) {\n return;\n }\n\n this._slotMicrotaskQueued = true;\n\n queueMicrotask(() => {\n this._slotMicrotaskQueued = false;\n\n if (this.isConnected) {\n this._syncNativeInput();\n }\n });\n }\n\n private _syncNativeInput(): void {\n const $nextInput = this.querySelector<HTMLInputElement>(':scope > input[type=\"checkbox\"]');\n\n if (!$nextInput && import.meta.env.DEV) {\n console.warn(\n '[rc-switch] No direct child <input type=\"checkbox\"> found. Place a native checkbox inside <rc-switch>.',\n this,\n );\n }\n\n if ($nextInput === this._$input) {\n this._applyNativeSemantics();\n this._applyChecked(false);\n this._applyDisabled();\n\n return;\n }\n\n this._$input?.removeEventListener('change', this._handleNativeChange);\n this._inputObserver?.disconnect();\n this._inputObserver = null;\n this._$input = $nextInput;\n this._roleOwned = false;\n this._disabledOwned = false;\n this._setForm($nextInput?.form ?? null);\n\n if ($nextInput) {\n if (!this._checkedInitialized && this._checked === undefined) {\n this._defaultChecked = $nextInput.defaultChecked || $nextInput.checked;\n this._checked = $nextInput.checked;\n }\n\n $nextInput.addEventListener('change', this._handleNativeChange);\n\n this._inputObserver = new MutationObserver(() => {\n this._applyNativeSemantics();\n this._syncFromNative();\n });\n\n this._inputObserver.observe($nextInput, {\n attributeFilter: ['checked', 'disabled', 'role'],\n });\n }\n\n this._applyNativeSemantics();\n this._applyChecked(false);\n this._applyDisabled();\n }\n\n private readonly _handleNativeChange = (): void => {\n this._syncFromNative();\n\n this.dispatchEvent(\n new CustomEvent<RCSwitchChangeDetail>('rc-switch-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked },\n }),\n );\n };\n\n private _syncFromNative(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n const oldValue = this.checked;\n\n this._checked = $input.checked;\n this._checkedInitialized = true;\n this.toggleAttribute('checked', $input.checked);\n this.requestUpdate('checked', oldValue);\n }\n\n private _applyNativeSemantics(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n if (!$input.hasAttribute('role')) {\n $input.setAttribute('role', 'switch');\n this._roleOwned = true;\n } else if (this._roleOwned && $input.getAttribute('role') !== 'switch') {\n this._roleOwned = false;\n }\n }\n\n private _applyChecked(writeDefault: boolean): void {\n const $input = this._$input;\n\n if (!$input) {\n this.toggleAttribute('checked', this.checked);\n\n return;\n }\n\n $input.checked = this.checked;\n\n if (writeDefault) {\n $input.defaultChecked = this._defaultChecked;\n }\n\n this.toggleAttribute('checked', $input.checked);\n }\n\n private _applyDisabled(): void {\n const $input = this._$input;\n\n if (!$input) {\n return;\n }\n\n if (this.disabled) {\n if (!$input.disabled) {\n this._disabledOwned = true;\n }\n\n $input.disabled = true;\n } else if (this._disabledOwned) {\n $input.disabled = false;\n this._disabledOwned = false;\n }\n }\n\n private _setForm($form: HTMLFormElement | null): void {\n this._$form?.removeEventListener('reset', this._handleFormReset);\n this._$form = $form;\n this._$form?.addEventListener('reset', this._handleFormReset);\n }\n\n private readonly _handleFormReset = (): void => {\n queueMicrotask(() => this._syncFromNative());\n };\n}\n\nexport default RCSwitch;\n"],"names":["switchStyles","css","_RCSwitch","LitElement","value","oldValue","changed","html","$nextInput","$input","writeDefault","$form","RCSwitch","__decorateClass","property"],"mappings":"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"}
|
|
File without changes
|