@umbraco-ui/uui-toggle 1.12.2 → 1.13.0-rc.2

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.
Files changed (2) hide show
  1. package/lib/index.js +23 -23
  2. package/package.json +4 -4
package/lib/index.js CHANGED
@@ -20,7 +20,7 @@ let UUIToggleElement = class extends UUIBooleanInputElement {
20
20
  }
21
21
  renderCheckbox() {
22
22
  return html`
23
- <div id="slider">
23
+ <div id="toggle">
24
24
  <div id="icon-checked">${iconCheck}</div>
25
25
  <div id="icon-unchecked">${iconRemove}</div>
26
26
  </div>
@@ -41,7 +41,7 @@ UUIToggleElement.styles = [
41
41
  --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));
42
42
  }
43
43
 
44
- #slider {
44
+ #toggle {
45
45
  position: relative;
46
46
  grid-area: 'input';
47
47
  display: flex;
@@ -62,7 +62,7 @@ UUIToggleElement.styles = [
62
62
  font-size: calc(var(--uui-toggle-size) * 0.6);
63
63
  }
64
64
 
65
- label:hover input:not([disabled]) ~ #slider {
65
+ label:hover input:not([disabled]) ~ #toggle {
66
66
  border-color: var(
67
67
  --uui-toggle-border-color-hover,
68
68
  var(--uui-color-border-emphasis,#a1a1a1)
@@ -73,7 +73,7 @@ UUIToggleElement.styles = [
73
73
  );
74
74
  }
75
75
 
76
- label:focus #slider {
76
+ label:focus #toggle {
77
77
  border-color: var(
78
78
  --uui-toggle-border-color-focus,
79
79
  var(--uui-color-focus,#3879ff)
@@ -84,15 +84,15 @@ UUIToggleElement.styles = [
84
84
  );
85
85
  }
86
86
 
87
- input:checked ~ #slider {
87
+ input:checked ~ #toggle {
88
88
  background-color: var(--uui-color-selected,#3544b1);
89
89
  }
90
90
 
91
- label:hover input:checked:not([disabled]) ~ #slider {
91
+ label:hover input:checked:not([disabled]) ~ #toggle {
92
92
  background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
93
93
  }
94
94
 
95
- label:focus input:checked ~ #slider {
95
+ label:focus input:checked ~ #toggle {
96
96
  background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
97
97
  }
98
98
 
@@ -118,11 +118,11 @@ UUIToggleElement.styles = [
118
118
  color: var(--uui-color-interactive,#1b264f);
119
119
  }
120
120
 
121
- input:checked ~ #slider #icon-checked {
121
+ input:checked ~ #toggle #icon-checked {
122
122
  color: var(--uui-color-selected-contrast,#fff);
123
123
  }
124
124
 
125
- #slider::after {
125
+ #toggle::after {
126
126
  content: '';
127
127
  position: absolute;
128
128
  top: 2px;
@@ -138,46 +138,46 @@ UUIToggleElement.styles = [
138
138
  background-color 120ms;
139
139
  }
140
140
 
141
- input:checked ~ #slider::after {
141
+ input:checked ~ #toggle::after {
142
142
  left: calc(100% - 2px);
143
143
  transform: translateX(-100%);
144
144
  }
145
145
 
146
- input:focus ~ #slider {
146
+ input:focus ~ #toggle {
147
147
  outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
148
148
  var(--uui-color-focus,#3879ff);
149
149
  }
150
150
 
151
- :host(:not([disabled], [readonly])) label:active #slider::after {
151
+ :host(:not([disabled], [readonly])) label:active #toggle::after {
152
152
  /** Stretch when mouse down */
153
153
  width: calc(1.06 * var(--uui-toggle-size));
154
154
  }
155
155
 
156
- :host([disabled]) #slider {
156
+ :host([disabled]) #toggle {
157
157
  background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
158
158
  }
159
- :host([disabled]) input:checked ~ #slider {
159
+ :host([disabled]) input:checked ~ #toggle {
160
160
  background-color: var(--uui-color-disabled-contrast,#c4c4c4);
161
161
  }
162
- :host([disabled]) #slider::after {
162
+ :host([disabled]) #toggle::after {
163
163
  background-color: var(--uui-color-disabled,#f3f3f5);
164
164
  }
165
- :host([disabled]) #slider #icon-unchecked {
165
+ :host([disabled]) #toggle #icon-unchecked {
166
166
  color: var(--uui-color-disabled-contrast,#c4c4c4);
167
167
  }
168
- :host([disabled]) label:active #slider {
168
+ :host([disabled]) label:active #toggle {
169
169
  animation: ${UUIHorizontalShakeAnimationValue};
170
170
  }
171
- :host([disabled]) input:checked #slider #icon-checked {
171
+ :host([disabled]) input:checked #toggle #icon-checked {
172
172
  color: var(--uui-color-disabled-contrast,#c4c4c4);
173
173
  }
174
174
 
175
- :host(:not([pristine]):invalid) #slider,
176
- :host(:not([pristine]):invalid) label:hover #slider,
175
+ :host(:not([pristine]):invalid) #toggle,
176
+ :host(:not([pristine]):invalid) label:hover #toggle,
177
177
  /* polyfill support */
178
- :host(:not([pristine])[internals-invalid]) #slider,
179
- :host(:not([pristine])[internals-invalid]) label:hover #slider {
180
- border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
178
+ :host(:not([pristine])[internals-invalid]) #toggle,
179
+ :host(:not([pristine])[internals-invalid]) label:hover #toggle {
180
+ border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
181
181
  }
182
182
  `
183
183
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-toggle",
3
- "version": "1.12.2",
3
+ "version": "1.13.0-rc.2",
4
4
  "license": "MIT",
5
5
  "keywords": [
6
6
  "Umbraco",
@@ -30,8 +30,8 @@
30
30
  "custom-elements.json"
31
31
  ],
32
32
  "dependencies": {
33
- "@umbraco-ui/uui-base": "1.12.2",
34
- "@umbraco-ui/uui-boolean-input": "1.12.2"
33
+ "@umbraco-ui/uui-base": "1.13.0-rc.2",
34
+ "@umbraco-ui/uui-boolean-input": "1.13.0-rc.2"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
42
42
  "access": "public"
43
43
  },
44
44
  "homepage": "https://uui.umbraco.com/?path=/story/uui-toggle",
45
- "gitHead": "207119ec53a655eeddfa1d626155490490336753"
45
+ "gitHead": "b7efeca91b64cfb5b59e1fcacafcfee23b861b79"
46
46
  }