@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.0 → 0.0.0-pr1457.1

package/components/input/demo/demo-support.js

@@ -1,60 +1 @@
-import {unified} from 'unified';
-import remarkParse from 'remark-parse';
-import remarkGfm from 'remark-gfm';
-import remarkRehype from 'remark-rehype';
-import rehypeRaw from 'rehype-raw';
-import rehypeHighlight from 'rehype-highlight';
-import rehypeStringify from 'rehype-stringify';
-
-export async function renderPage(mdPath) {
-  const response = await fetch(mdPath);
-  const text = await response.text();
-  const result = await unified()
-    .use(remarkParse)
-    .use(remarkGfm)
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(rehypeRaw)
-    .use(rehypeHighlight)
-    .use(rehypeStringify)
-    .process(text);
-
-  document.querySelector('main').innerHTML = String(result);
-  addCopyButtons();
-}
-
-function addCopyButtons() {
-  document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
-    const pre = code.parentElement;
-    const wrapper = document.createElement('div');
-    wrapper.className = 'pre-wrapper';
-    pre.parentNode.insertBefore(wrapper, pre);
-    wrapper.appendChild(pre);
-    const btn = document.createElement('button');
-    btn.className = 'copy-btn';
-    btn.textContent = 'Copy';
-    btn.addEventListener('click', () => {
-      const raw = code.textContent;
-      const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
-      navigator.clipboard.writeText(text).then(() => {
-        btn.textContent = 'Copied!';
-        setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
-      });
-    });
-    wrapper.appendChild(btn);
-  });
-}
-
-export function openAccordion(id) {
-  document.querySelectorAll('auro-accordion').forEach((accordion) => {
-    accordion.removeAttribute('expanded');
-  });
-  const target = document.getElementById(id);
-  if (target) {
-    target.setAttribute('expanded', '');
-    setTimeout(() => {
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }, 550);
-  }
-}
-
-window.openAccordion = openAccordion;
+export { renderPage, openAccordion } from '@aurodesignsystem/utils/demo-support';

package/components/input/demo/getting-started.md

@@ -43,7 +43,7 @@
 <auro-header level="3">Install</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
-<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="3">Implementation</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
@@ -77,7 +77,7 @@ AuroInput.register('[custom]-input');</code></pre>
 <auro-header level="3">Install</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
-<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="3">Implementation</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->

package/components/input/demo/readme.md

@@ -43,7 +43,7 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
-<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/</code></pre>
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -67,7 +67,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- 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.
 
-<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/@latest/auro-input/+esm"&gt;&lt;/script&gt;</code></pre>
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development

package/components/input/dist/index.js

@@ -6613,7 +6613,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605041857';
+var formkitVersion = '202605042114';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/dist/registered.js

@@ -6613,7 +6613,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605041857';
+var formkitVersion = '202605042114';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/demo/accessibility.html

@@ -31,8 +31,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
 
     <!-- Demo Specific Styles -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/radio/demo/api.html

@@ -30,8 +30,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
 
     <!-- Demo Specific Styles -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="./styles.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
   </head>
   <body class="auro-markdown">
     <main></main>

package/components/radio/demo/api.md

@@ -8,42 +8,42 @@ The `auro-radio-group` element is used to group a set `auro-radio` elements.
 ## Properties
 
 | Property                        | Attribute                       | Type                     | Default     | Description                                      |
-|---------------------------------|---------------------------------|--------------------------|-------------|--------------------------------------------------|
-| `appearance`                    | `appearance`                    | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| `disabled`                      | `disabled`                      | `boolean`                |             | If true, all radio buttons will be disabled.     |
-| `error`                         | `error`                         | `string`                 |             | If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| `horizontal`                    | `horizontal`                    | `boolean`                |             | If true, displays radio buttons horizontally.    |
-| `noValidate`                    | `noValidate`                    | `boolean`                |             | If true, disables auto-validation on blur.       |
-| `onDark`                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| `optionSelected`                | `optionSelected`                | `object`                 |             | Specifies the current selected radio button.     |
-| `required`                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
-| `setCustomValidity`             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
-| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
-| `validity`                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
-| `value`                         | `value`                         | `string`                 |             | Specifies the current value of the selected radio button. |
+|---------------------------------|---------------------------------|--------------------------|-------------|--------------------------------------------------|
+| [appearance](#appearance)                    | `appearance`                    | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`                |             | If true, all radio buttons will be disabled.     |
+| [error](#error)                         | `error`                         | `string`                 |             | If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [horizontal](#horizontal)                    | `horizontal`                    | `boolean`                |             | If true, displays radio buttons horizontally.    |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                |             | If true, disables auto-validation on blur.       |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `object`                 |             | Specifies the current selected radio button.     |
+| [required](#required)                      | `required`                      | `boolean`                |             | Populates the `required` attribute on the element. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                 |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                 |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                 |             | Custom help text message to display when validity = `valueMissing`. |
+| [validity](#validity)                      | `validity`                      | `string`                 |             | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `string`                 |             | Specifies the current value of the selected radio button. |
 
 ## Methods
 
 | Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| `reset`    | `(): void`                             | Resets component to initial state.               |
-| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
 | Event                       | Type               | Description                                      |
 |-----------------------------|--------------------|--------------------------------------------------|
-| `auroFormElement-validated` |                    | Notifies that the element has been validated.    |
-| `input`                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
+| `auroFormElement-validated` |                    | Notifies that the element has been validated.    |
+| [input](#input)                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
 
 ## Slots
 
 | Name            | Description                                      |
-|-----------------|--------------------------------------------------|
-| `helpText`      | Allows for the helper text to be overridden.     |
-| `legend`        | Allows for the legend to be overridden.          |
-| `optionalLabel` | Allows overriding the optional display text "(optional)", which appears next to the label. |
+|-----------------|--------------------------------------------------|
+| [helpText](#helpText)      | Allows for the helper text to be overridden.     |
+| [legend](#legend)        | Allows for the legend to be overridden.          |
+| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 
@@ -58,41 +58,41 @@ The `auro-radio` element is used to a button that allows the user to select one
 ## Properties
 
 | Property     | Attribute    | Type                     | Default     | Description                                      |
-|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
-| `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| `checked`    | `checked`    | `boolean`                |             | If set to true, the radio button will be filled. |
-| `disabled`   | `disabled`   | `boolean`                |             | If set to true, the radio button will be non-clickable. |
-| `error`      | `error`      | `boolean`                |             | If set to true, sets an error state on the radio button. |
-| `id`         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| `label`      | `label`      | `string`                 |             | Label for the radio button.                      |
-| `name`       | `name`       | `string`                 |             | Name for the radio button group.                 |
-| `onDark`     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| `required`   | `required`   | `boolean`                |             | Defines element as required.                     |
-| `value`      | `value`      | `string`                 |             | The value of the radio button.                   |
+|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
+| [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| [checked](#checked)    | `checked`    | `boolean`                |             | If set to true, the radio button will be filled. |
+| [disabled](#disabled)   | `disabled`   | `boolean`                |             | If set to true, the radio button will be non-clickable. |
+| [error](#error)      | `error`      | `boolean`                |             | If set to true, sets an error state on the radio button. |
+| [id](#id)         | `id`         | `string`                 |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [label](#label)      | `label`      | `string`                 |             | Label for the radio button.                      |
+| [name](#name)       | `name`       | `string`                 |             | Name for the radio button group.                 |
+| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| [required](#required)   | `required`   | `boolean`                |             | Defines element as required.                     |
+| [value](#value)      | `value`      | `string`                 |             | The value of the radio button.                   |
 
 ## Methods
 
 | Method  | Type       | Description                        |
-|---------|------------|------------------------------------|
-| `reset` | `(): void` | Resets component to initial state. |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
 
 ## Events
 
 | Event                | Type               | Description                                      |
 |----------------------|--------------------|--------------------------------------------------|
 | `auroRadio-blur`     | `CustomEvent<any>` | Notifies that the component has lost focus.      |
-| `auroRadio-selected` | `CustomEvent<any>` | Notifies that the component has been marked as checked/selected. |
-| `change`             | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
-| `focusSelected`      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
-| `input`              | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
-| `resetRadio`         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
-| `toggleSelected`     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
+| `auroRadio-selected` | `CustomEvent<any>` | Notifies that the component has been marked as checked/selected. |
+| [change](#change)             | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
+| [focusSelected](#focusSelected)      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
+| [input](#input)              | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
+| [resetRadio](#resetRadio)         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
+| [toggleSelected](#toggleSelected)     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
 
 ## CSS Shadow Parts
 
 | Part          | Description                               |
-|---------------|-------------------------------------------|
-| `radio`       | apply css to a specific checkbox.         |
+|---------------|-------------------------------------------|
+| [radio](#radio)       | apply css to a specific checkbox.         |
 | `radio-input` | apply css to a specific checkbox's input. |
 | `radio-label` | apply css to a specific checkbox's label. |
 <!-- AURO-GENERATED-CONTENT:END -->