@synergy-design-system/react 1.8.0 → 1.9.0

package/dist/chunks/{chunk.TOR523VV.js → chunk.7IZW5FRR.js}

@@ -21,4 +21,4 @@ var SynSwitch = createComponent({
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.TOR523VV.js.map
+//# sourceMappingURL=chunk.7IZW5FRR.js.map

package/dist/chunks/chunk.7IZW5FRR.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/switch.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/switch/switch.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-switch';\nComponent.define('syn-switch');\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\nexport const SynSwitch = createComponent({\n  displayName: 'SynSwitch',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AA2BtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/{chunk.UVFFLBXG.js → chunk.PCXGVEBP.js}

@@ -19,4 +19,4 @@ var SynRadioGroup = createComponent({
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.UVFFLBXG.js.map
+//# sourceMappingURL=chunk.PCXGVEBP.js.map

package/dist/chunks/{chunk.UVFFLBXG.js.map → chunk.PCXGVEBP.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/radio-group.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-radio-group';\nComponent.define('syn-radio-group');\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport const SynRadioGroup = createComponent({\n  displayName: 'SynRadioGroup',\n  elementClass: Component,\n  events: {\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,iBAAiB;AAyB3B,IAAM,gBAAgB,gBAAgB;AAAA,EAC3C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-radio-group';\nComponent.define('syn-radio-group');\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport const SynRadioGroup = createComponent({\n  displayName: 'SynRadioGroup',\n  elementClass: Component,\n  events: {\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,iBAAiB;AA0B3B,IAAM,gBAAgB,gBAAgB;AAAA,EAC3C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/chunks/{chunk.FYIBHAO4.js → chunk.RU33PYCK.js}

@@ -21,4 +21,4 @@ var SynCheckbox = createComponent({
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.FYIBHAO4.js.map
+//# sourceMappingURL=chunk.RU33PYCK.js.map

package/dist/chunks/chunk.RU33PYCK.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/checkbox/checkbox.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-checkbox';\nComponent.define('syn-checkbox');\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\nexport const SynCheckbox = createComponent({\n  displayName: 'SynCheckbox',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA4BxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/checkbox.d.ts

@@ -10,6 +10,7 @@ import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInv
  * @dependency syn-icon
  *
  * @slot - The checkbox's label.
+ * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
  *
  * @event syn-blur - Emitted when the checkbox loses focus.
  * @event syn-change - Emitted when the checked state changes.
@@ -24,6 +25,7 @@ import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInv
  * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
  * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
+ * @csspart form-control-help-text - The help text's wrapper.
  */
 export declare const SynCheckbox: import("@lit/react").ReactWebComponent<Component, {
     onSynBlur: EventName<SynBlurEvent>;

package/dist/components/checkbox.js

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "../chunks/chunk.FYIBHAO4.js";
+} from "../chunks/chunk.RU33PYCK.js";
 export {
   SynCheckbox
 };

package/dist/components/radio-group.d.ts

@@ -12,6 +12,7 @@ import type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-de
  * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
  * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
  *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
  *
  * @event syn-change - Emitted when the radio group's selected value changes.
  * @event syn-input - Emitted when the radio group receives user input.

package/dist/components/radio-group.js

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "../chunks/chunk.UVFFLBXG.js";
+} from "../chunks/chunk.PCXGVEBP.js";
 export {
   SynRadioGroup
 };

package/dist/components/switch.d.ts

@@ -8,6 +8,7 @@ import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInv
  * @since 2.0
  *
  * @slot - The switch's label.
+ * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
  *
  * @event syn-blur - Emitted when the control loses focus.
  * @event syn-change - Emitted when the control's checked state changes.
@@ -19,6 +20,7 @@ import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInv
  * @csspart control - The control that houses the switch's thumb.
  * @csspart thumb - The switch's thumb.
  * @csspart label - The switch's label.
+ * @csspart form-control-help-text - The help text's wrapper.
  *
  * @cssproperty --width - The width of the switch.
  * @cssproperty --height - The height of the switch.

package/dist/components/switch.js

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "../chunks/chunk.TOR523VV.js";
+} from "../chunks/chunk.7IZW5FRR.js";
 export {
   SynSwitch
 };

package/dist/index.js

@@ -18,7 +18,7 @@ import {
 } from "./chunks/chunk.QBD4EIK5.js";
 import {
   SynRadioGroup
-} from "./chunks/chunk.UVFFLBXG.js";
+} from "./chunks/chunk.PCXGVEBP.js";
 import {
   SynRadio
 } from "./chunks/chunk.AFCMSVBY.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunks/chunk.FB24BPQZ.js";
 import {
   SynSwitch
-} from "./chunks/chunk.TOR523VV.js";
+} from "./chunks/chunk.7IZW5FRR.js";
 import {
   SynButtonGroup
 } from "./chunks/chunk.6OTEQXZW.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunks/chunk.TTUPZLN7.js";
 import {
   SynCheckbox
-} from "./chunks/chunk.FYIBHAO4.js";
+} from "./chunks/chunk.RU33PYCK.js";
 import {
   SynDivider
 } from "./chunks/chunk.HKOGDFA5.js";

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@synergy-design-system/components": "^1.8.0"
+    "@synergy-design-system/components": "^1.9.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "devDependencies": {
     "@types/react": "^18.2.55",
     "react": "^18.2.0"

package/dist/chunks/chunk.FYIBHAO4.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/checkbox.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/checkbox/checkbox.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-checkbox';\nComponent.define('syn-checkbox');\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\nexport const SynCheckbox = createComponent({\n  displayName: 'SynCheckbox',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA0BxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
-  "names": []
-}

package/dist/chunks/chunk.TOR523VV.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/switch.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/switch/switch.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-switch';\nComponent.define('syn-switch');\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\nexport const SynSwitch = createComponent({\n  displayName: 'SynSwitch',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAyBtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
-  "names": []
-}