@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2

package/components/datepicker/README.md

@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Datepicker
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
@@ -27,7 +28,18 @@ The `<auro-datepicker>` element allows users to select a date, or a pair of date
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
+## Datepicker Use Cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-datepicker>` element should be used in situations where users may:
+
+* select a single date
+* select a pair of dates which identify a calendar range
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -40,30 +52,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-datepicker> automatically
-import '@aurodesignsystem/auro-formkit/auro-datepicker';
-```
-
-#### Custom Registration
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDatepicker.register('custom-datepicker')` method on the component class and pass in a unique name.
-
-```javascript
-// Import the class only
-import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
-
-// Register with a custom name if desired
-AuroDatepicker.register('custom-datepicker');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -76,30 +65,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- AURO-GENERATED-CONTENT:END -->
-**Reference component in HTML**
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-datepicker required="">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install from CDN
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -109,22 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## auro-datepicker use cases
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The `<auro-datepicker>` element should be used in situations where users may:
-
-* select a single date
-* select a pair of dates which identify a calendar range
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -138,4 +92,46 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
+
+// Register with a custom name if desired
+AuroDatepicker.register('custom-datepicker');
+```
+
+This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-datepicker>
+    <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </custom-datepicker>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-datepicker>
+    <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </custom-datepicker>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/datepicker/demo/api.js

@@ -1,13 +1,13 @@
-import { alertValueExample } from './../apiExamples/alertValue.js';
+import { alertValueExample } from './../apiExamples/alert-value';
 import { errorExample } from './../apiExamples/error';
-import { focusExample } from './../apiExamples/focus.js';
-import { populateSlotContentExample } from './../apiExamples/dynamicSlot.js';
-import { updateMaxDateExample } from './../apiExamples/updateMaxDate';
-import { updateMinDateExample } from './../apiExamples/updateMinDate';
+import { focusExample } from './../apiExamples/focus';
+import { populateSlotContentExample } from './../apiExamples/dynamic-slot';
+import { updateMaxDateExample } from './../apiExamples/update-max-date';
+import { updateMinDateExample } from './../apiExamples/update-min-date';
 import { validityExample } from './../apiExamples/validity';
-import { inDialogExample } from '../apiExamples/inDialog.js';
-import { localizationExample } from '../apiExamples/localization.js';
-import { resetStateExample } from '../apiExamples/resetState.js';
+import { inDialogExample } from '../apiExamples/in-dialog';
+import { localizationExample } from '../apiExamples/localization';
+import { resetStateExample } from '../apiExamples/reset-state';
 import '../src/registered.js';
 
 export function initExamples(initCount) {