@synergy-design-system/components 1.0.0-main.13 → 1.0.0-main.14

package/dist/synergy.d.ts

@@ -1,7 +1,11 @@
+export { default as SynButtonGroup } from './components/button-group/button-group.js';
 export { default as SynButton } from './components/button/button.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.js';
 export { default as SynIcon } from './components/icon/icon.js';
 export { default as SynInput } from './components/input/input.js';
+export { default as SynRadioButton } from './components/radio-button/radio-button.js';
+export { default as SynRadioGroup } from './components/radio-group/radio-group.js';
+export { default as SynRadio } from './components/radio/radio.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export * from './utilities/form.js';
 export * from './events/events.js';

package/dist/synergy.js

@@ -1,57 +1,83 @@
-import {
-  textarea_default
-} from "./chunks/chunk.T5JJNDG6.js";
 import {
   getFormControls,
   serialize
-} from "./chunks/chunk.WTCUSH7V.js";
+} from "./chunks/chunk.Z3RZUTQU.js";
+import {
+  radio_group_default
+} from "./chunks/chunk.FOASOAQU.js";
+import {
+  textarea_default
+} from "./chunks/chunk.N7RYRY7D.js";
+import "./chunks/chunk.2MPTR6IQ.js";
+import "./chunks/chunk.23HTU3YE.js";
+import "./chunks/chunk.YBIBWRKC.js";
+import {
+  radio_default
+} from "./chunks/chunk.UYGJ3ZOA.js";
+import {
+  radio_button_default
+} from "./chunks/chunk.Q55ULCHV.js";
+import "./chunks/chunk.FUY24CRJ.js";
+import "./chunks/chunk.OVVMSN4D.js";
+import "./chunks/chunk.JVQAUENN.js";
+import "./chunks/chunk.4I6M5V6O.js";
+import "./chunks/chunk.F4MRQLNL.js";
 import {
   input_default
-} from "./chunks/chunk.FKB4BI2F.js";
-import "./chunks/chunk.SQTGI355.js";
-import "./chunks/chunk.WANL6A7U.js";
+} from "./chunks/chunk.KWKQLGGC.js";
+import "./chunks/chunk.7UOMTJPT.js";
+import "./chunks/chunk.OXUFFH57.js";
+import "./chunks/chunk.JHXCBOUD.js";
 import "./chunks/chunk.W46CFM2R.js";
-import "./chunks/chunk.FLF2E2W4.js";
-import "./chunks/chunk.J44T4LO6.js";
-import "./chunks/chunk.VNC7HKGP.js";
-import "./chunks/chunk.YBIBWRKC.js";
+import "./chunks/chunk.PS3OVBUX.js";
+import "./chunks/chunk.JBYBQ5TQ.js";
+import "./chunks/chunk.V6VND4OF.js";
+import {
+  button_group_default
+} from "./chunks/chunk.ZXJWGKP4.js";
 import {
   checkbox_default
-} from "./chunks/chunk.MMNWMRST.js";
+} from "./chunks/chunk.AULPKG2K.js";
+import "./chunks/chunk.NUQ6NORO.js";
+import "./chunks/chunk.WFAJR3FN.js";
+import "./chunks/chunk.4CBN5LPQ.js";
+import "./chunks/chunk.2XZKXVMR.js";
 import {
   icon_default
-} from "./chunks/chunk.NXKZDAMQ.js";
+} from "./chunks/chunk.LWBUJBAK.js";
 import {
   button_default
-} from "./chunks/chunk.TKXG7VM3.js";
-import "./chunks/chunk.7QGGFKPO.js";
-import "./chunks/chunk.KALIQJUH.js";
+} from "./chunks/chunk.X3XOXXN3.js";
+import "./chunks/chunk.4OPZ7M2M.js";
+import "./chunks/chunk.USYEVNFG.js";
+import "./chunks/chunk.N2I6HVX3.js";
 import "./chunks/chunk.R6VNLE6N.js";
 import "./chunks/chunk.A3SKDWCT.js";
-import "./chunks/chunk.N2I6HVX3.js";
 import "./chunks/chunk.XGXFE6IF.js";
-import "./chunks/chunk.YTS5TRJZ.js";
-import "./chunks/chunk.FVSP4LXX.js";
-import "./chunks/chunk.HOGDOKQS.js";
-import "./chunks/chunk.WFAJR3FN.js";
-import "./chunks/chunk.MFFJYORB.js";
-import "./chunks/chunk.WDCAHRYG.js";
-import "./chunks/chunk.LJVC6UEV.js";
+import "./chunks/chunk.P2LNG2PZ.js";
+import "./chunks/chunk.JBK2MO2R.js";
 import "./chunks/chunk.VZ7S7YYN.js";
-import "./chunks/chunk.UFEBKPYW.js";
-import "./chunks/chunk.BREU4ILT.js";
 import "./chunks/chunk.5OIEI73E.js";
 import "./chunks/chunk.6C4JXZZN.js";
 import "./chunks/chunk.U7ZJ22QM.js";
+import "./chunks/chunk.BREU4ILT.js";
 import "./chunks/chunk.C7624ITA.js";
+import "./chunks/chunk.YTS5TRJZ.js";
+import "./chunks/chunk.FVSP4LXX.js";
+import "./chunks/chunk.FVF5BUAX.js";
+import "./chunks/chunk.4CPH57PN.js";
+import "./chunks/chunk.4ZURABYO.js";
 import "./chunks/chunk.O7USYXBT.js";
-import "./chunks/chunk.2XZKXVMR.js";
 import "./chunks/chunk.DJOAQ4JU.js";
 export {
   button_default as SynButton,
+  button_group_default as SynButtonGroup,
   checkbox_default as SynCheckbox,
   icon_default as SynIcon,
   input_default as SynInput,
+  radio_default as SynRadio,
+  radio_button_default as SynRadioButton,
+  radio_group_default as SynRadioGroup,
   textarea_default as SynTextarea,
   getFormControls,
   serialize

package/dist/utilities/form.js

@@ -1,8 +1,8 @@
 import {
   getFormControls,
   serialize
-} from "../chunks/chunk.WTCUSH7V.js";
-import "../chunks/chunk.WDCAHRYG.js";
+} from "../chunks/chunk.Z3RZUTQU.js";
+import "../chunks/chunk.P2LNG2PZ.js";
 import "../chunks/chunk.DJOAQ4JU.js";
 export {
   getFormControls,

package/dist/vscode.html-custom-data.json

@@ -131,38 +131,6 @@
         }
       ]
     },
-    {
-      "name": "syn-icon",
-      "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **syn-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **syn-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-          "values": []
-        },
-        {
-          "name": "src",
-          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-          "values": []
-        },
-        {
-          "name": "library",
-          "description": "The name of a registered custom icon library.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/icon"
-        }
-      ]
-    },
     {
       "name": "syn-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the checkbox loses focus.\n- **syn-change** - Emitted when the checked state changes.\n- **syn-focus** - Emitted when the checkbox gains focus.\n- **syn-input** - Emitted when the checkbox receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<syn-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
@@ -220,6 +188,55 @@
         }
       ]
     },
+    {
+      "name": "syn-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/button-group"
+        }
+      ]
+    },
+    {
+      "name": "syn-icon",
+      "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **syn-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **syn-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+          "values": []
+        },
+        {
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/icon"
+        }
+      ]
+    },
     {
       "name": "syn-input",
       "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-clear** - Emitted when the clear button is activated.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
@@ -413,6 +430,119 @@
         }
       ]
     },
+    {
+      "name": "syn-radio",
+      "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **label** - The container that wraps the radio's label.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The radio's value. When selected, the radio group will receive this value.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the radio.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/radio"
+        }
+      ]
+    },
+    {
+      "name": "syn-radio-button",
+      "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The radio's value. When selected, the radio group will receive this value.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the radio button.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/radio-button"
+        }
+      ]
+    },
+    {
+      "name": "syn-radio-group",
+      "description": "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---\n\n\n### **Events:**\n - **syn-change** - Emitted when the radio group's selected value changes.\n- **syn-input** - Emitted when the radio group receives user input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the radio group, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/radio-group"
+        }
+      ]
+    },
     {
       "name": "syn-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",