@itenthusiasm/custom-elements 0.9.0 → 1.0.0

package/CheckboxGroup/CheckboxGroup.js

@@ -283,7 +283,9 @@ class CheckboxGroup extends HTMLElement {
     else if (rangeUnderflow) message = this.rangeUnderflowError;
     else if (valueMissing) message = this.valueMissingError;
     else if (rangeOverflow) message = this.rangeOverflowError;
-    this.#internals.setValidity({ valueMissing, rangeUnderflow, rangeOverflow, customError }, message);
+
+    const anchor = message ? /** @type {HTMLInputElement} */ (this.fieldset.elements[0]) : undefined;
+    this.#internals.setValidity({ valueMissing, rangeUnderflow, rangeOverflow, customError }, message, anchor);
   }
 
   /* ------------------------------ Form Control Callbacks ------------------------------ */

package/CheckboxGroup/README.md

@@ -147,8 +147,8 @@ Some JS frameworks (such as React) may get confused if you remove elements from
 
 ```tsx
 import { useState, useEffect } from "react";
-import type {} from "@itenthusiasm/custom-elements/react";
-// Or import type {} from "@itenthusiasm/custom-elements/CheckboxGroup/react";
+import type {} from "@itenthusiasm/custom-elements/types/react";
+// Or import type {} from "@itenthusiasm/custom-elements/CheckboxGroup/types/react";
 
 interface CheckboxGroupProps extends React.ComponentProps<"checkbox-group"> {
   label?: string;
@@ -172,6 +172,8 @@ export default function CheckboxGroup({ label, children, ...rest }: CheckboxGrou
 
 Notice the [`manual`](#attributes-manual) attribute that was applied to the `<checkbox-group>`. This tells the component _not_ to remove or add any children on its own, giving developers the freedom to make such modifications themselves. Note that the `CheckboxGroup` will still perform other automated actions unrelated to DOM insertion/removal in this mode, such as altering the `name` and `form` attributes of every `checkbox` inserted into it. These other actions are all safe for JS frameworks.
 
+If your application is a SPA, then you don't need to be concerned about progressive enhancement, and you can just structure your code in a manner similar to what was shown at the [beginning](#quickstart) of this document.
+
 ## TypeScript Usage in JS Frameworks
 
 Many JS frameworks, such as Svelte and React, often define their own "Element Namespaces". Because of this, most frameworks are not able (on their own) to recognize the correct attributes, properties, and event listeners that belong to the Custom Elements which you use. Thankfully, our library ships with TypeScript types that tell the various JS Frameworks about the existence and shape of our Custom Elements. To define _all_ of our library's Custom Elements within a Framework's "Element Namespace", simply import the appropriate type definition file:
@@ -544,3 +546,7 @@ As a Custom Element, the <code>CheckboxGroup</code> supports all of the events f
     <p>Identical to the <a href="#events-input"><code>input</code></a> event, but fired <em>after</em> the <code>input</code> event.</p>
   </dd>
 </dl>
+
+## What's Next?
+
+You've learned everything that you need to know about the `CheckboxGroup` component. Now, it's time for you to try it out in one of your own applications! We've provided a [StackBlitz Demo](https://stackblitz.com/edit/custom-elements-checkbox-group?file=register-custom-elements.js,index.html) to help you get more familiar with the component as well if needed.

package/README.md

@@ -44,5 +44,8 @@ Below are the components that this library currently provides. Each component ha
     <p>
       Wraps a semantic group of checkbox <code>&lt;input&gt;</code> elements, progressively enhancing them with convenient features like group-level form validation and value management. The <code>CheckboxGroup</code> component behaves just like the native form controls, meaning that it dispatches the standard <code>input</code>/<code>change</code> events, is <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements">associated</a> with its owning form, and automatically participates in all form activity, <a href="https://web.dev/articles/more-capable-form-controls">including form submission</a>.
     </p>
+    <p>
+      <a href="https://stackblitz.com/edit/custom-elements-checkbox-group?file=register-custom-elements.js,index.html">Stackblitz Demo</a>
+    </p>
   </dd>
 </dl>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@itenthusiasm/custom-elements",
   "type": "module",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "sideEffects": false,
   "license": "MIT",
   "description": "Robust, accessible, and progressively-enhanceable Web Components for common developer needs",