@synergy-design-system/components 1.7.0 → 1.9.0

package/dist/events/events.d.ts

@@ -6,9 +6,11 @@ export type * from './syn-clear.ts';
 export type * from './syn-error.ts';
 export type * from './syn-focus.ts';
 export type * from './syn-hide.ts';
+export type * from './syn-initial-focus.ts';
 export type * from './syn-input.ts';
 export type * from './syn-invalid.ts';
 export type * from './syn-load.ts';
 export type * from './syn-remove.ts';
 export type * from './syn-reposition.ts';
+export type * from './syn-request-close.ts';
 export type * from './syn-show.ts';

package/dist/events/syn-initial-focus.d.ts

@@ -0,0 +1,6 @@
+export type SynInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-initial-focus': SynInitialFocusEvent;
+    }
+}

package/dist/events/syn-request-close.d.ts

@@ -0,0 +1,8 @@
+export type SynRequestCloseEvent = CustomEvent<{
+    source: 'close-button' | 'keyboard' | 'overlay';
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-request-close': SynRequestCloseEvent;
+    }
+}

package/dist/internal/active-elements.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

package/dist/internal/longpress.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="node" />
+/// <reference types="node" resolution-mode="require"/>
 import { type ElementPart, noChange, nothing } from 'lit';
 import { AsyncDirective, type DirectiveParameters, type Part } from 'lit/async-directive.js';
 type Callbacks = {
@@ -38,5 +38,5 @@ declare class LongPressDirective extends AsyncDirective {
      */
     private stopSpinningAndCleanUp;
 }
-export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
+export declare const longPress: (_callback: Callbacks) => import("lit/async-directive.js").DirectiveResult<typeof LongPressDirective>;
 export type { LongPressDirective };

package/dist/internal/modal.d.ts

@@ -0,0 +1,24 @@
+export default class Modal {
+    element: HTMLElement;
+    isExternalActivated: boolean;
+    tabDirection: 'forward' | 'backward';
+    currentFocus: HTMLElement | null;
+    previousFocus: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+    constructor(element: HTMLElement);
+    /** Activates focus trapping. */
+    activate(): void;
+    /** Deactivates focus trapping. */
+    deactivate(): void;
+    /** Determines if this modal element is currently active or not. */
+    isActive(): boolean;
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal(): void;
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
+}

package/dist/internal/string.d.ts

@@ -0,0 +1,2 @@
+/** Converts the first letter of a string to uppercase */
+export declare function uppercaseFirstLetter(string: string): string;

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/synergy-autoloader.js

@@ -1,7 +1,7 @@
 import {
   getBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import "./chunks/chunk.DJOAQ4JU.js";
+import "./chunks/chunk.QNDC5KWA.js";
 
 // src/synergy-autoloader.ts
 var observer = new MutationObserver((mutations) => {

package/dist/synergy.d.ts

@@ -2,6 +2,7 @@ export { default as SynButtonGroup } from './components/button-group/button-grou
 export { default as SynButton } from './components/button/button.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.js';
 export { default as SynDivider } from './components/divider/divider.js';
+export { default as SynDrawer } from './components/drawer/drawer.js';
 export { default as SynIconButton } from './components/icon-button/icon-button.js';
 export { default as SynIcon } from './components/icon/icon.js';
 export { default as SynInput } from './components/input/input.js';

package/dist/synergy.js

@@ -1,131 +1,138 @@
+import {
+  textarea_default
+} from "./chunks/chunk.IR2PZHC7.js";
 import {
   getFormControls,
   serialize
-} from "./chunks/chunk.HG5QC5EW.js";
+} from "./chunks/chunk.KUO3KJOC.js";
 import "./chunks/chunk.NKIYFJN2.js";
-import {
-  tag_default
-} from "./chunks/chunk.SMSP5C6C.js";
-import {
-  textarea_default
-} from "./chunks/chunk.5THN2K5Q.js";
-import "./chunks/chunk.JAKJHV44.js";
-import "./chunks/chunk.23HTU3YE.js";
-import "./chunks/chunk.YBIBWRKC.js";
 import {
   switch_default
-} from "./chunks/chunk.VQWUZKDS.js";
-import "./chunks/chunk.TUYEX4KP.js";
-import "./chunks/chunk.MNMITYTH.js";
-import "./chunks/chunk.AFEABUNX.js";
+} from "./chunks/chunk.RMQZMRVP.js";
 import {
-  radio_group_default
-} from "./chunks/chunk.7VOPIPHW.js";
-import "./chunks/chunk.OJREQD2D.js";
-import "./chunks/chunk.4I6M5V6O.js";
-import "./chunks/chunk.F4MRQLNL.js";
+  tag_default
+} from "./chunks/chunk.5CB3CVZ7.js";
+import "./chunks/chunk.HF75YRVS.js";
+import "./chunks/chunk.2EI3TNL7.js";
+import "./chunks/chunk.YBIBWRKC.js";
 import {
   select_default
-} from "./chunks/chunk.KP7SYG4K.js";
-import "./chunks/chunk.XXF35USM.js";
-import "./chunks/chunk.BQG5LF7J.js";
-import "./chunks/chunk.NAX6WP3D.js";
-import "./chunks/chunk.QHFGD6WW.js";
+} from "./chunks/chunk.LZE7OXKV.js";
+import "./chunks/chunk.RMZBSKRR.js";
+import "./chunks/chunk.GBOII6N4.js";
 import "./chunks/chunk.7W73A57K.js";
-import "./chunks/chunk.6XU6OLZ3.js";
+import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
+import "./chunks/chunk.QNQNR3RY.js";
+import "./chunks/chunk.KDDTDU4B.js";
+import "./chunks/chunk.ADRKUQGR.js";
+import "./chunks/chunk.W5JK7V7K.js";
 import {
   radio_default
-} from "./chunks/chunk.PMTVLWNZ.js";
-import "./chunks/chunk.CYN675Z6.js";
-import "./chunks/chunk.JBYBQ5TQ.js";
-import "./chunks/chunk.V6VND4OF.js";
+} from "./chunks/chunk.FUNZW7ES.js";
 import {
   radio_button_default
-} from "./chunks/chunk.SXW2KV3B.js";
-import "./chunks/chunk.7EGCXNF2.js";
-import "./chunks/chunk.IKKMWFWH.js";
+} from "./chunks/chunk.VATYXV2O.js";
+import "./chunks/chunk.UZFPGR6M.js";
+import "./chunks/chunk.ZIQXX272.js";
 import {
-  optgroup_default
-} from "./chunks/chunk.5OPODPPZ.js";
-import "./chunks/chunk.LWXCBEHD.js";
-import "./chunks/chunk.KG52EHDB.js";
+  radio_group_default
+} from "./chunks/chunk.IOPUYG6Q.js";
+import "./chunks/chunk.GAPQVJGQ.js";
+import "./chunks/chunk.F4MRQLNL.js";
+import "./chunks/chunk.XIUSSERX.js";
 import {
   option_default
-} from "./chunks/chunk.6V3HOZNE.js";
-import "./chunks/chunk.GMUVD5B2.js";
-import "./chunks/chunk.W6V7TPGK.js";
-import "./chunks/chunk.3B24TYVN.js";
-import "./chunks/chunk.3ZHSSMBL.js";
-import "./chunks/chunk.JN7CLMQZ.js";
-import {
-  icon_button_default
-} from "./chunks/chunk.GOVLCQY5.js";
-import "./chunks/chunk.XSXBQCWN.js";
-import "./chunks/chunk.2FN5DTS6.js";
-import "./chunks/chunk.OJF7KL44.js";
+} from "./chunks/chunk.Y72MIUNI.js";
+import "./chunks/chunk.BJYVLDYR.js";
+import "./chunks/chunk.MIMALEWP.js";
+import "./chunks/chunk.MDZ22YWD.js";
+import "./chunks/chunk.V6VND4OF.js";
+import "./chunks/chunk.PKO6FEOM.js";
 import {
   input_default
-} from "./chunks/chunk.ULMZHWWW.js";
-import "./chunks/chunk.IRT2DA6R.js";
-import "./chunks/chunk.EKOK7YPB.js";
-import "./chunks/chunk.JHXCBOUD.js";
+} from "./chunks/chunk.5BMNRZ7L.js";
+import "./chunks/chunk.WC5SV4TV.js";
 import "./chunks/chunk.2OLVTQ5P.js";
+import "./chunks/chunk.4QS5IWYB.js";
 import {
-  divider_default
-} from "./chunks/chunk.B6AKFQJS.js";
+  optgroup_default
+} from "./chunks/chunk.AJU6C4KC.js";
+import "./chunks/chunk.BGKFRWWO.js";
+import "./chunks/chunk.KG52EHDB.js";
+import "./chunks/chunk.5R3OVMH2.js";
+import "./chunks/chunk.3B24TYVN.js";
+import "./chunks/chunk.CFIQXXMW.js";
 import {
   icon_default
-} from "./chunks/chunk.USYR7G7Z.js";
+} from "./chunks/chunk.BTZX6ZFZ.js";
 import {
-  checkbox_default
-} from "./chunks/chunk.7KSU2SUD.js";
+  icon_button_default
+} from "./chunks/chunk.ZT5DUKVA.js";
+import {
+  divider_default
+} from "./chunks/chunk.LF2XSSHD.js";
+import {
+  drawer_default
+} from "./chunks/chunk.3O5WTWSN.js";
+import "./chunks/chunk.BLOH2ZNU.js";
+import "./chunks/chunk.GTSRMEPE.js";
+import "./chunks/chunk.QAUTITK3.js";
+import "./chunks/chunk.O6AXKVFJ.js";
+import "./chunks/chunk.OJF7KL44.js";
+import "./chunks/chunk.LJQ7LEPV.js";
+import "./chunks/chunk.UYD2OVFV.js";
+import "./chunks/chunk.PHSJD47V.js";
 import {
   button_group_default
-} from "./chunks/chunk.RA2WSKQT.js";
-import "./chunks/chunk.EI34C7LC.js";
-import "./chunks/chunk.4ZURABYO.js";
-import "./chunks/chunk.HKCTVD3U.js";
-import "./chunks/chunk.PGCXJ2PT.js";
+} from "./chunks/chunk.F4THECWA.js";
+import {
+  checkbox_default
+} from "./chunks/chunk.PRZRH7SN.js";
+import "./chunks/chunk.KNXO2FGQ.js";
+import "./chunks/chunk.WFAJR3FN.js";
+import "./chunks/chunk.TTL762VF.js";
+import "./chunks/chunk.2XZKXVMR.js";
+import "./chunks/chunk.3STW62TA.js";
+import "./chunks/chunk.XEI5ZP7Y.js";
 import "./chunks/chunk.FA6V2WD6.js";
+import "./chunks/chunk.ACTJFDNK.js";
 import {
   button_default
-} from "./chunks/chunk.Q7X5NOPZ.js";
-import "./chunks/chunk.Z4NKFCKY.js";
-import "./chunks/chunk.SBEIXLRW.js";
-import "./chunks/chunk.N2I6HVX3.js";
-import "./chunks/chunk.XGXFE6IF.js";
+} from "./chunks/chunk.QY6MKIMK.js";
+import "./chunks/chunk.FSONLJTT.js";
+import "./chunks/chunk.K3O2PP7X.js";
+import "./chunks/chunk.OSBC36KQ.js";
 import "./chunks/chunk.LAB4YJYE.js";
 import "./chunks/chunk.A3SKDWCT.js";
-import "./chunks/chunk.OJ4KOC7R.js";
-import "./chunks/chunk.K55MKNUR.js";
-import "./chunks/chunk.5BOEKFIJ.js";
-import "./chunks/chunk.WFAJR3FN.js";
-import "./chunks/chunk.MFFJYORB.js";
-import "./chunks/chunk.AMTCNRDE.js";
-import "./chunks/chunk.4MYR27GF.js";
-import "./chunks/chunk.RSONAU45.js";
-import "./chunks/chunk.PJO6TM3T.js";
+import "./chunks/chunk.SZCGMXW5.js";
+import "./chunks/chunk.XGXFE6IF.js";
+import "./chunks/chunk.PWMSNMDF.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
 } from "./chunks/chunk.JRXQK6LG.js";
 import "./chunks/chunk.6C4JXZZN.js";
 import "./chunks/chunk.5AAIHRMI.js";
-import "./chunks/chunk.VZ7S7YYN.js";
-import "./chunks/chunk.GHMKOVA3.js";
+import "./chunks/chunk.PJO6TM3T.js";
+import "./chunks/chunk.2RF7KO5I.js";
+import "./chunks/chunk.AVTU2BGE.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import "./chunks/chunk.O7USYXBT.js";
-import "./chunks/chunk.2XZKXVMR.js";
-import "./chunks/chunk.DJOAQ4JU.js";
+import "./chunks/chunk.K55MKNUR.js";
+import "./chunks/chunk.SJMMPKWP.js";
+import "./chunks/chunk.6MS3WNDW.js";
+import "./chunks/chunk.3DE5ARIC.js";
+import "./chunks/chunk.A7IIJ2LL.js";
+import "./chunks/chunk.QNDC5KWA.js";
 export {
   button_default as SynButton,
   button_group_default as SynButtonGroup,
   checkbox_default as SynCheckbox,
   divider_default as SynDivider,
+  drawer_default as SynDrawer,
   icon_default as SynIcon,
   icon_button_default as SynIconButton,
   input_default as SynInput,

package/dist/themes/utility.css

@@ -0,0 +1,29 @@
+/*
+ * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
+ * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".syn-"
+ * to reduce the possibility of collisions.
+ */
+
+.syn-scroll-lock {
+  overflow: hidden !important;
+  padding-right: var(--syn-scroll-lock-size) !important;
+}
+
+.syn-toast-stack {
+  inset-inline-end: 0;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 28rem;
+  z-index: var(--syn-z-index-toast);
+}
+
+.syn-toast-stack syn-alert {
+  margin: var(--syn-spacing-medium);
+}
+
+.syn-toast-stack syn-alert::part(base) {
+  box-shadow: var(--syn-shadow-large);
+}

package/dist/translations/de.js

@@ -2,7 +2,7 @@ import {
   registerTranslation
 } from "../chunks/chunk.LAB4YJYE.js";
 import "../chunks/chunk.A3SKDWCT.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+import "../chunks/chunk.QNDC5KWA.js";
 
 // src/translations/de.ts
 var translation = {

package/dist/translations/en.js

@@ -1,7 +1,7 @@
 import {
   en_default
 } from "../chunks/chunk.A3SKDWCT.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   en_default as default
 };

package/dist/utilities/animation-registry.js

@@ -2,8 +2,8 @@ import {
   getAnimation,
   setAnimation,
   setDefaultAnimation
-} from "../chunks/chunk.BQG5LF7J.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+} from "../chunks/chunk.QAUTITK3.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   getAnimation,
   setAnimation,

package/dist/utilities/base-path.js

@@ -2,7 +2,7 @@ import {
   getBasePath,
   setBasePath
 } from "../chunks/chunk.C7624ITA.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   getBasePath,
   setBasePath

package/dist/utilities/form.js

@@ -1,9 +1,9 @@
 import {
   getFormControls,
   serialize
-} from "../chunks/chunk.HG5QC5EW.js";
-import "../chunks/chunk.AMTCNRDE.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+} from "../chunks/chunk.KUO3KJOC.js";
+import "../chunks/chunk.SZCGMXW5.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   getFormControls,
   serialize

package/dist/utilities/icon-library.js

@@ -6,7 +6,7 @@ import {
 import "../chunks/chunk.6C4JXZZN.js";
 import "../chunks/chunk.5AAIHRMI.js";
 import "../chunks/chunk.C7624ITA.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   registerIconLibrary,
   unregisterIconLibrary

package/dist/utilities/localize.js

@@ -3,7 +3,7 @@ import {
   registerTranslation
 } from "../chunks/chunk.LAB4YJYE.js";
 import "../chunks/chunk.A3SKDWCT.js";
-import "../chunks/chunk.DJOAQ4JU.js";
+import "../chunks/chunk.QNDC5KWA.js";
 export {
   LocalizeController,
   registerTranslation

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

@@ -2,6 +2,23 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "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-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\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 button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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 - _default_ - The 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- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<syn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -131,26 +148,9 @@
         }
       ]
     },
-    {
-      "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-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.",
+      "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- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\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.\n- **form-control-help-text** - The help text's wrapper.",
       "attributes": [
         { "name": "title", "values": [] },
         {
@@ -196,6 +196,11 @@
           "name": "required",
           "description": "Makes the checkbox a required field.",
           "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
         }
       ],
       "references": [
@@ -222,6 +227,48 @@
         }
       ]
     },
+    {
+      "name": "syn-drawer",
+      "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the drawer opens.\n- **syn-after-show** - Emitted after the drawer opens and all animations are complete.\n- **syn-hide** - Emitted when the drawer closes.\n- **syn-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **syn-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **syn-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The direction from which the drawer will open.",
+          "values": [
+            { "name": "top" },
+            { "name": "end" },
+            { "name": "bottom" },
+            { "name": "start" }
+          ]
+        },
+        {
+          "name": "contained",
+          "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+          "values": []
+        },
+        {
+          "name": "no-header",
+          "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/drawer"
+        }
+      ]
+    },
     {
       "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`",
@@ -569,7 +616,7 @@
     },
     {
       "name": "syn-popup",
-      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **syn-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--syn-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.",
+      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **syn-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--syn-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
       "attributes": [
         {
           "name": "anchor",
@@ -702,6 +749,11 @@
           "name": "auto-size-padding",
           "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
           "values": []
+        },
+        {
+          "name": "hover-bridge",
+          "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+          "values": []
         }
       ],
       "references": [
@@ -775,7 +827,7 @@
     },
     {
       "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.",
+      "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- **help-text** - Text that describes how to use the radio group. 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- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
       "attributes": [
         {
           "name": "label",
@@ -936,7 +988,7 @@
     },
     {
       "name": "syn-switch",
-      "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when the control's checked state changes.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\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 switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.",
+      "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when the control's checked state changes.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\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 switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",
       "attributes": [
         { "name": "title", "values": [] },
         {
@@ -977,6 +1029,11 @@
           "name": "required",
           "description": "Makes the switch a required field.",
           "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
         }
       ],
       "references": [