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

package/components/counter/README.md

@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
+The <code>auro-counter</code> component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the <code>auro-counter-group</code> to facilitate a collection of counters to add passenger types to a flight.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -84,11 +84,9 @@ To only develop a single component, use the `--filter` flag:
 <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- 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.
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<auro-header level="4">Custom Component Registration for Version Management</auro-header>
+There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</auro-hyperlink> 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.
 
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
@@ -99,45 +97,21 @@ import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/au
 AuroCounter.register('custom-counter');
 AuroCounterGroup.register('custom-counter-group');</code></pre>
 
-This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-counter-group>
-<div slot="bib.fullscreen.headline">Passengers</div>
-<div slot="label">Passengers</div>
-<custom-counter>
-      Adults
-<span slot="description">18 years or older</span>
-</custom-counter>
-<custom-counter>
-      Children
-<span slot="description">2-17 years</span>
-</custom-counter>
-</custom-counter-group>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
-<pre class="language-html"><code class="language-html">  &lt;custom-counter-group&gt;
-    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
-    &lt;div slot="label"&gt;Passengers&lt;/div&gt;
-    &lt;custom-counter&gt;
-      Adults
-      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
-    &lt;/custom-counter&gt;
-    &lt;custom-counter&gt;
-      Children
-      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
-    &lt;/custom-counter&gt;
-  &lt;/custom-counter-group&gt;
-​
-```html
-  &lt;custom-checkbox-group&gt;
-    &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-    &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-    &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-    &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-    &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;/custom-checkbox-group&gt;</code></pre>
-</auro-accordion>
+This will create a new custom element <code>&lt;custom-counter&gt;</code> and <code>&lt;custom-counter-group&gt;</code> that behaves exactly like <code>&lt;auro-counter&gt;</code> and <code>&lt;auro-counter-group&gt;</code>, allowing both to coexist on the same page without interfering with each other.
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
+<pre class="language-html"><code class="language-html">&lt;custom-counter-group&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;custom-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/custom-counter&gt;
+  &lt;custom-counter&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/custom-counter&gt;
+&lt;/custom-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/counter/demo/accessibility.html

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/accessibility.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-counter | Accessibility</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <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="./styles.min.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./accessibility.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/counter/demo/accessibility.md

@@ -0,0 +1,34 @@
+<auro-header level="1" id="overview">Counter - Accessibility</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<auro-header level="2" id="ariaRoles">ARIA Roles and Attributes</auro-header>
+<p>The <code>auro-counter</code> component uses the <code>spinbutton</code> role to convey its purpose to assistive technologies. Key ARIA attributes include:</p>
+<ul>
+<li><code>role="spinbutton"</code> — Identifies the element as a numeric spinner control.</li>
+<li><code>aria-valuenow</code> — Reflects the current counter value.</li>
+<li><code>aria-valuemin</code> — Reflects the minimum allowed value.</li>
+<li><code>aria-valuemax</code> — Reflects the maximum allowed value.</li>
+<li><code>aria-label</code> — Derived from the default slot content (counter label).</li>
+</ul>
+</section>
+<section>
+<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
+<p>The increment and decrement buttons include accessible labels. Custom labels can be provided using the <code>ariaLabel.minus</code> and <code>ariaLabel.plus</code> slots to override the default button descriptions.</p>
+</section>
+<section>
+<auro-header level="2" id="screenReader">Screen Reader Announcements</auro-header>
+<p>When a user interacts with the counter, the updated value is announced via the <code>aria-valuenow</code> attribute. Screen readers will announce the counter label and current value when the element receives focus.</p>
+</section>
+<section>
+<auro-header level="2" id="disabledState">Disabled State</auro-header>
+<p>When a counter is disabled, the <code>aria-disabled</code> attribute is set, and the increment/decrement buttons become inoperable. Screen readers will announce the disabled state to the user.</p>
+</section>
+<section>
+<auro-header level="2" id="dropdownA11y">Dropdown Accessibility</auro-header>
+<p>When used as a dropdown (<code>isDropdown</code>), the counter group inherits dropdown accessibility patterns. The <code>ariaLabel.bib.close</code> slot provides an accessible label for the close button in fullscreen mode.</p>
+</section>
+</div>
+</div>
+</div>

package/components/counter/demo/api.html

@@ -18,45 +18,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-counter</title>
 
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
 
     <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
 
     <!-- Design Token Alaska Theme -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
+
     <!-- Webcore Stylesheet Alaska Theme -->
     <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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./api.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
-    </script>
-    <script type="module">
-      import { initExamples } from "./api.min.js";
-
+      import { renderPage } from './demo-support.min.js';
+      import { initExamples } from './api.min.js';
+      await renderPage('./api.md');
       initExamples();
     </script>
-    
+
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
   </body>