@tylertech/forge 3.6.0-dev.0 → 3.6.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.
Files changed (22) hide show
  1. package/custom-elements.json +1551 -1505
  2. package/dist/lib.js +6 -6
  3. package/dist/lib.js.map +2 -2
  4. package/dist/vscode.html-custom-data.json +75 -65
  5. package/esm/dialog/dialog-core.js +1 -1
  6. package/esm/dialog/dialog.d.ts +1 -0
  7. package/esm/dialog/dialog.js +1 -0
  8. package/esm/icon-button/icon-button.js +1 -1
  9. package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
  10. package/esm/switch/switch-adapter.d.ts +4 -4
  11. package/esm/switch/switch-adapter.js +5 -5
  12. package/esm/switch/switch-component-delegate.d.ts +7 -0
  13. package/esm/switch/switch-component-delegate.js +15 -0
  14. package/esm/switch/switch-constants.d.ts +10 -0
  15. package/esm/switch/switch-constants.js +5 -0
  16. package/esm/switch/switch-core.d.ts +9 -9
  17. package/esm/switch/switch-core.js +26 -25
  18. package/esm/switch/switch.d.ts +22 -7
  19. package/esm/switch/switch.js +25 -17
  20. package/package.json +2 -2
  21. package/sass/icon-button/icon-button.scss +10 -10
  22. package/sass/switch/switch.scss +2 -2
package/esm/switch/switch-core.js CHANGED
@@ -6,13 +6,13 @@
6
6
  import { SWITCH_CONSTANTS } from './switch-constants';
7
7
  export class SwitchCore {
8
8
  get _submittedValue() {
9
- return this._on ? this._value : null;
9
+ return this._checked ? this._value : null;
10
10
  }
11
11
  constructor(_adapter) {
12
12
  this._adapter = _adapter;
13
13
  // State
14
- this._on = false;
15
- this._defaultOn = false;
14
+ this._checked = false;
15
+ this._defaultChecked = false;
16
16
  this._value = 'on';
17
17
  this._dense = false;
18
18
  this._disabled = false;
@@ -46,9 +46,9 @@ export class SwitchCore {
46
46
  if (this._readonly) {
47
47
  return;
48
48
  }
49
- const oldValue = this._on;
50
- const newValue = !this._on;
51
- this._on = newValue;
49
+ const oldValue = this._checked;
50
+ const newValue = !this._checked;
51
+ this._checked = newValue;
52
52
  const event = new Event('change', { cancelable: true, bubbles: true });
53
53
  const forgeEvent = new CustomEvent(SWITCH_CONSTANTS.events.CHANGE, {
54
54
  detail: newValue,
@@ -57,35 +57,36 @@ export class SwitchCore {
57
57
  });
58
58
  this._adapter.dispatchHostEvent(event);
59
59
  this._adapter.dispatchHostEvent(forgeEvent);
60
- this._on = oldValue;
60
+ this._checked = oldValue;
61
61
  if (event.defaultPrevented || forgeEvent.defaultPrevented) {
62
62
  return;
63
63
  }
64
- this.on = newValue;
64
+ this.checked = newValue;
65
65
  }
66
- _setOnAttribute() {
67
- this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._on);
68
- // Also set selected for backwards compatibility
69
- this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.SELECTED, this._on);
66
+ _setCheckedAttribute() {
67
+ this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.CHECKED, this._checked);
68
+ // Also set the following for backwards compatibility
69
+ this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._checked);
70
+ this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.SELECTED, this._checked);
70
71
  }
71
- get on() {
72
- return this._on;
72
+ get checked() {
73
+ return this._checked;
73
74
  }
74
- set on(value) {
75
- if (this._on !== value) {
76
- this._on = value;
77
- this._adapter.setOn(this._on);
75
+ set checked(value) {
76
+ if (this._checked !== value) {
77
+ this._checked = value;
78
+ this._adapter.setChecked(this._checked);
78
79
  this._adapter.syncValue(this._submittedValue);
79
- this._setOnAttribute();
80
+ this._setCheckedAttribute();
80
81
  }
81
82
  }
82
- get defaultOn() {
83
- return this._defaultOn;
83
+ get defaultChecked() {
84
+ return this._defaultChecked;
84
85
  }
85
- set defaultOn(value) {
86
- if (this._defaultOn !== value) {
87
- this._defaultOn = value;
88
- this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_ON, this._defaultOn);
86
+ set defaultChecked(value) {
87
+ if (this._defaultChecked !== value) {
88
+ this._defaultChecked = value;
89
+ this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_CHECKED, this._defaultChecked);
89
90
  }
90
91
  }
91
92
  get value() {
package/esm/switch/switch.d.ts CHANGED
@@ -13,11 +13,13 @@ import { IWithLabelAwareness } from '../core/mixins/label/with-label-aware';
13
13
  import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
14
14
  export interface ISwitchComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
15
15
  value: string;
16
+ checked: boolean;
17
+ /** @deprecated use `checked` instead */
16
18
  on: boolean;
17
- /**
18
- * @deprecated use `on` instead
19
- */
19
+ /** @deprecated use `on` instead */
20
20
  selected: boolean;
21
+ defaultChecked: boolean;
22
+ /** @deprecated use `defaultChecked` instead */
21
23
  defaultOn: boolean;
22
24
  required: boolean;
23
25
  dense: boolean;
@@ -150,20 +152,33 @@ export declare class SwitchComponent extends SwitchComponent_base implements ISw
150
152
  /** @ignore */
151
153
  setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
152
154
  /**
153
- * Gets/sets whether the switch is on or off.
155
+ * Gets/sets whether the switch is checked or not.
156
+ * @default false
157
+ * @attribute
158
+ */
159
+ checked: boolean;
160
+ /**
161
+ * Alias for `checked` _(deprecated)_. Gets/sets whether the switch is checked or not.
162
+ * @deprecated use `checked` instead.
154
163
  * @default false
155
164
  * @attribute
156
165
  */
157
166
  on: boolean;
158
167
  /**
159
- * Alias for `on` _(deprecated)_.
160
- * @deprecated use `on` instead
168
+ * Alias for `checked` _(deprecated)_.
169
+ * @deprecated use `checked` instead
161
170
  * @default false
162
171
  * @attribute
163
172
  */
164
173
  selected: boolean;
165
174
  /**
166
- * Gets/sets whether the switch is on or off by default.
175
+ * Gets/sets whether the switch is checked by default.
176
+ * @default false
177
+ * @attribute default-checked
178
+ */
179
+ defaultChecked: boolean;
180
+ /**
181
+ * Alias for `defaultChecked` _(deprecated)_. Gets/sets whether the switch is checked by default.
167
182
  * @default false
168
183
  * @attribute default-on
169
184
  */
package/esm/switch/switch.js CHANGED
@@ -18,7 +18,7 @@ import { SwitchAdapter } from './switch-adapter';
18
18
  import { SWITCH_CONSTANTS } from './switch-constants';
19
19
  import { SwitchCore } from './switch-core';
20
20
  const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
21
- const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-align:var(--forge-switch-align, center);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);align-items:var(--_switch-align);justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;flex-shrink:0;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
21
+ const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-align:var(--forge-switch-align, center);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);align-items:var(--_switch-align);justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;flex-shrink:0;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([checked]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([checked]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([checked]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([checked]) .handle .icon__off{opacity:0;scale:0.4}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
22
22
  /**
23
23
  * @tag forge-switch
24
24
  *
@@ -131,7 +131,7 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
131
131
  super.connectedCallback();
132
132
  this[setDefaultAria]({
133
133
  role: 'switch',
134
- ariaChecked: this.on ? 'true' : 'false',
134
+ ariaChecked: this.checked ? 'true' : 'false',
135
135
  ariaDisabled: this.disabled ? 'true' : 'false',
136
136
  ariaRequired: this.required ? 'true' : 'false'
137
137
  });
@@ -139,12 +139,14 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
139
139
  }
140
140
  attributeChangedCallback(name, oldValue, newValue) {
141
141
  switch (name) {
142
+ case SWITCH_CONSTANTS.observedAttributes.CHECKED:
142
143
  case SWITCH_CONSTANTS.observedAttributes.ON:
143
144
  case SWITCH_CONSTANTS.observedAttributes.SELECTED:
144
- this.on = coerceBoolean(newValue);
145
+ this.checked = coerceBoolean(newValue);
145
146
  break;
147
+ case SWITCH_CONSTANTS.observedAttributes.DEFAULT_CHECKED:
146
148
  case SWITCH_CONSTANTS.observedAttributes.DEFAULT_ON:
147
- this.defaultOn = coerceBoolean(newValue);
149
+ this.defaultChecked = coerceBoolean(newValue);
148
150
  break;
149
151
  case SWITCH_CONSTANTS.observedAttributes.VALUE:
150
152
  this.value = newValue;
@@ -171,22 +173,22 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
171
173
  super.attributeChangedCallback(name, oldValue, newValue);
172
174
  }
173
175
  [getFormValue]() {
174
- return this.on ? this.value : null;
176
+ return this.checked ? this.value : null;
175
177
  }
176
178
  [getFormState]() {
177
- return this.on ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
179
+ return this.checked ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
178
180
  }
179
181
  [setValidity]() {
180
- this[internals].setValidity({ valueMissing: this.required && !this.on }, this[getValidationMessage]({
181
- checked: this.on,
182
+ this[internals].setValidity({ valueMissing: this.required && !this.checked }, this[getValidationMessage]({
183
+ checked: this.checked,
182
184
  required: this.required
183
185
  }));
184
186
  }
185
187
  formResetCallback() {
186
- this.on = this.defaultOn;
188
+ this.checked = this.defaultChecked;
187
189
  }
188
190
  formStateRestoreCallback(state) {
189
- this.on = state === SWITCH_CONSTANTS.state.ON;
191
+ this.checked = state === SWITCH_CONSTANTS.state.ON;
190
192
  }
191
193
  labelClickedCallback() {
192
194
  this.click();
@@ -201,17 +203,17 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
201
203
  this[internals].setFormValue(value, state);
202
204
  if (state) {
203
205
  const stateValue = isString(state) ? state : state[this.name];
204
- this.on = stateValue === SWITCH_CONSTANTS.state.ON;
206
+ this.checked = stateValue === SWITCH_CONSTANTS.state.ON;
205
207
  return;
206
208
  }
207
209
  if (isString(value)) {
208
- this.on = !!value;
210
+ this.checked = !!value;
209
211
  }
210
212
  else if (value?.[this.name]) {
211
- this.on = !!value[this.name];
213
+ this.checked = !!value[this.name];
212
214
  }
213
215
  else {
214
- this.on = false;
216
+ this.checked = false;
215
217
  }
216
218
  }
217
219
  /**
@@ -220,21 +222,27 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
220
222
  */
221
223
  toggle(force) {
222
224
  if (isDefined(force)) {
223
- this._core.on = force;
225
+ this._core.checked = force;
224
226
  }
225
227
  else {
226
- this._core.on = !this._core.on;
228
+ this._core.checked = !this._core.checked;
227
229
  }
228
230
  }
229
231
  };
230
232
  __decorate([
231
233
  coreProperty()
234
+ ], SwitchComponent.prototype, "checked", void 0);
235
+ __decorate([
236
+ coreProperty({ name: 'checked' })
232
237
  ], SwitchComponent.prototype, "on", void 0);
233
238
  __decorate([
234
- coreProperty({ name: 'on' })
239
+ coreProperty({ name: 'checked' })
235
240
  ], SwitchComponent.prototype, "selected", void 0);
236
241
  __decorate([
237
242
  coreProperty()
243
+ ], SwitchComponent.prototype, "defaultChecked", void 0);
244
+ __decorate([
245
+ coreProperty({ name: 'defaultChecked' })
238
246
  ], SwitchComponent.prototype, "defaultOn", void 0);
239
247
  __decorate([
240
248
  coreProperty()
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tylertech/forge",
3
3
  "description": "Tyler Forge™ Web Components library",
4
- "version": "3.6.0-dev.0",
4
+ "version": "3.6.0",
5
5
  "author": "Tyler Technologies, Inc.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -21,4 +21,4 @@
21
21
  "tslib": "^2.8.1"
22
22
  },
23
23
  "customElements": "custom-elements.json"
24
- }
24
+ }
package/sass/icon-button/icon-button.scss CHANGED
@@ -131,49 +131,49 @@ forge-state-layer {
131
131
  // Toggle
132
132
  //
133
133
 
134
- :host(:is(:not([toggle]), [toggle]:not([on]))) {
134
+ :host(:is(:not([toggle]), [toggle]:not([pressed]))) {
135
135
  slot[name='on'] {
136
136
  display: none;
137
137
  }
138
138
  }
139
139
 
140
- :host([toggle][on]) {
140
+ :host([toggle][pressed]) {
141
141
  slot:not([name]) {
142
142
  display: none;
143
143
  }
144
144
  }
145
145
 
146
- :host([toggle][on]:is(:not([variant]), [variant='icon'])) {
146
+ :host([toggle][pressed]:is(:not([variant]), [variant='icon'])) {
147
147
  .forge-icon-button {
148
148
  @include toggle-on-icon;
149
149
  }
150
150
  }
151
151
 
152
- :host([toggle][on][variant='outlined']) {
152
+ :host([toggle][pressed][variant='outlined']) {
153
153
  .forge-icon-button {
154
154
  @include toggle-on-outlined;
155
155
  }
156
156
  }
157
157
 
158
- :host([toggle]:not([on])[variant='tonal']) {
158
+ :host([toggle]:not([pressed])[variant='tonal']) {
159
159
  .forge-icon-button {
160
160
  @include toggle-tonal;
161
161
  }
162
162
  }
163
163
 
164
- :host([toggle][on][variant='tonal']) {
164
+ :host([toggle][pressed][variant='tonal']) {
165
165
  .forge-icon-button {
166
166
  @include toggle-on-tonal;
167
167
  }
168
168
  }
169
169
 
170
- :host([toggle]:not([on]):is([variant='filled'], [variant='raised'])) {
170
+ :host([toggle]:not([pressed]):is([variant='filled'], [variant='raised'])) {
171
171
  .forge-icon-button {
172
172
  @include toggle-filled;
173
173
  }
174
174
  }
175
175
 
176
- :host([toggle][on]:is([variant='filled'], [variant='raised'])) {
176
+ :host([toggle][pressed]:is([variant='filled'], [variant='raised'])) {
177
177
  .forge-icon-button {
178
178
  @include toggle-on-filled;
179
179
  }
@@ -323,7 +323,7 @@ forge-state-layer {
323
323
  }
324
324
 
325
325
  // Toggle + tonal variant
326
- :host([toggle]:not([on])[theme='#{$theme}'][variant='tonal']) {
326
+ :host([toggle]:not([pressed])[theme='#{$theme}'][variant='tonal']) {
327
327
  .forge-icon-button {
328
328
  @include override(background-color, theme.variable(#{$theme}-container), value);
329
329
  }
@@ -346,7 +346,7 @@ forge-state-layer {
346
346
  }
347
347
 
348
348
  // Toggle + filled & raised variants
349
- :host([toggle]:not([on])[theme='#{$theme}']:is([variant='filled'], [variant='raised'])) {
349
+ :host([toggle]:not([pressed])[theme='#{$theme}']:is([variant='filled'], [variant='raised'])) {
350
350
  .forge-icon-button {
351
351
  @include override(icon-color, theme.variable($theme), value);
352
352
  @include override(background-color, theme.variable(#{$theme}-container), value);
package/sass/switch/switch.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  // On
84
- :host([on]) {
84
+ :host([checked]) {
85
85
  .track {
86
86
  @include track-on;
87
87
  }
@@ -127,7 +127,7 @@
127
127
  }
128
128
  }
129
129
  }
130
- :host(:not([disabled]):not([readonly])[on]) {
130
+ :host(:not([disabled]):not([readonly])[checked]) {
131
131
  .forge-switch {
132
132
  .container:active {
133
133
  .track {