@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

package/components/combobox/demo/readme.md

@@ -101,18 +101,15 @@ 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 -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
+<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
+<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
+<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
+<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
+<p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
+<!-- AURO-GENERATED-CONTENT:END -->
 
-## 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:
-
 <pre class="language-js"><code class="language-js">// Import the class only
 import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
 ​
@@ -121,23 +118,6 @@ AuroCombobox.register('custom-combobox');</code></pre>
 
 This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
 
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-combobox>
-<span slot="bib.fullscreen.headline">Bib Header</span>
-<span slot="label">Name</span>
-<auro-menu>
-<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
-<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
-<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
-<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
-<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
-<auro-menuoption static nomatch>No matching option</auro-menuoption>
-</auro-menu>
-</custom-combobox>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
 <pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -150,5 +130,4 @@ This will create a new custom element `<custom-combobox>` that behaves exactly l
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
 &lt;/custom-combobox&gt;</code></pre>
-</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/demo/styles.css

@@ -1,66 +1,4 @@
-.grid {
-  display: grid;
-  max-width: 1232px;
-  margin-left: auto;
-  margin-right: auto;
-  gap: 0.5rem;
-}
-@media screen and (min-width: 576px) {
-  .grid {
-    gap: var(--ds-grid-gutter-sm, 1rem);
-  }
-}
-@media screen and (min-width: 768px) {
-  .grid {
-    gap: var(--ds-grid-gutter-md, 1.5rem);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .grid {
-    gap: var(--ds-grid-gutter-lg, 1.5rem);
-  }
-}
-@media screen and (min-width: 1232px) {
-  .grid {
-    gap: var(--ds-grid-gutter-xl, 2rem);
-  }
-}
-.grid.two-column, .grid.fixed-anchor, .grid.fixed-nav {
-  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
-  grid-template-areas: "col1" "col2";
-}
-.grid.two-column > :nth-child(1), .grid.fixed-anchor > :nth-child(1), .grid.fixed-nav > :nth-child(1) {
-  grid-area: col1;
-}
-.grid.two-column > :nth-child(2), .grid.fixed-anchor > :nth-child(2), .grid.fixed-nav > :nth-child(2) {
-  grid-area: col2;
-}
-@media screen and (min-width: 768px) {
-  .grid.two-column, .grid.fixed-anchor, .grid.fixed-nav {
-    grid-template-areas: "col1 col2";
-  }
-}
-.grid.fixed-nav > :nth-child(1) {
-  position: sticky;
-  top: 0;
-  --align-self: stretch;
-  align-self: var(--align-self);
-}
-@media screen and (min-width: 768px) {
-  .grid.fixed-nav {
-    grid-template-columns: var(--fixed-nav-width, 280px) auto;
-  }
-}
-.grid.fixed-anchor {
-  grid-template-areas: "col2" "col1";
-}
-@media screen and (min-width: 768px) {
-  .grid.fixed-anchor {
-    grid-template-areas: "col1 col2";
-    grid-template-columns: auto var(--fixed-nav-width, 280px);
-  }
-}
-
+/* stylelint-disable no-invalid-position-at-import-rule */
 .container {
   display: grid;
   margin-left: auto;
@@ -243,7 +181,7 @@
 }
 .pageLayout-2colSideNav .sidenav {
   grid-area: sidenav;
-  background-color: var(--ds-color-base-white, #ffffff);
+  background-color: var(--ds-color-container-primary-default, #ffffff);
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -333,7 +271,7 @@
 .pageLayout-3col .sidenav {
   grid-area: sidenav;
   z-index: 1;
-  background-color: var(--ds-color-base-white, #ffffff);
+  background-color: var(--ds-color-container-primary-default, #ffffff);
   padding-left: 1rem;
   padding-right: 1rem;
   position: sticky;
@@ -387,21 +325,21 @@
   font-weight: var(--ds-text-heading-display-weight, 100);
   font-style: normal;
   font-display: fallback;
-  src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff");
 }
 @font-face {
   font-family: "AS Circular";
   font-weight: var(--ds-text-heading-medium-weight, 300);
   font-style: normal;
   font-display: fallback;
-  src: url("https://resource.alaskaair.net/-/media/A5558137DB0F4B818D85EBE44FDC542E.woff2") format("woff2"), url("https://resource.alaskaair.net/-/media/F4E82B6C6CBA46B4A322B4B99B2CBC63.woff") format("woff");
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
 }
 @font-face {
   font-family: "AS Circular";
   font-weight: var(--ds-text-body-default-weight, 500);
   font-style: normal;
   font-display: fallback;
-  src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"), url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff");
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff");
 }
 /* Document
    ========================================================================== */
@@ -691,10 +629,10 @@ template {
 
 blockquote {
   margin-left: 0;
-  border-left: 1px solid var(--ds-color-border-active-default, #0074c8);
+  border-left: 1px solid var(--ds-color-border-ui-active-default, #225296);
   padding: var(--ds-size-100, 0.5rem);
   padding-left: var(--ds-size-400, 2rem);
-  color: var(--ds-color-text-secondary-default, #626b79);
+  color: var(--ds-color-text-secondary-default, #525252);
   font-weight: 200;
   margin-top: var(--ds-size-300, 1.5rem);
   margin-bottom: var(--ds-size-300, 1.5rem);
@@ -719,7 +657,7 @@ blockquote + p, .auro-markdown blockquote + p {
   font-weight: var(--ds-text-heading-display-weight, 100);
 }
 .auro_table tr:nth-child(even), .auro-markdown table tr:nth-child(even) {
-  background-color: var(--ds-color-brand-gray-100, #f8f8f8);
+  background-color: var(--ds-color-container-secondary-default, #f7f7f7);
 }
 .auro_table th, .auro-markdown table th {
   text-align: left;
@@ -733,7 +671,7 @@ blockquote + p, .auro-markdown blockquote + p {
 }
 .auro_table thead, .auro-markdown table thead {
   border-collapse: collapse;
-  border-bottom: 1px solid var(--ds-color-brand-gray-200, #dbdbdb);
+  border-bottom: 1px solid var(--ds-color-border-tertiary-default, #dddddd);
 }
 .auro_table th, .auro-markdown table th,
 .auro_table td,
@@ -741,23 +679,13 @@ blockquote + p, .auro-markdown blockquote + p {
   padding: var(--ds-size-200, 1rem);
 }
 
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
 *:focus-visible {
-  outline: 0;
-}
-*:focus-visible {
-  outline: 0;
+  outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
 }
 
+/*
+  Essentials for Auro Classic theme
+*/
 :focus:not(:focus-visible) {
   outline: 3px solid transparent;
 }
@@ -772,8 +700,8 @@ html {
 body,
 .baseType {
   margin: 0;
-  color: var(--ds-color-text-primary-default, #222222);
-  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  color: var(--ds-color-text-primary-default, #2a2a2a);
+  font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
   font-variant-ligatures: no-common-ligatures;
   font-size: var(--ds-text-body-size-default, 1rem);
   font-weight: var(--ds-text-body-default-weight, 500);
@@ -790,10 +718,10 @@ body,
 
 .hyperlink, .auro-markdown a {
   text-decoration: underline;
-  color: var(--ds-color-ui-default-default, #0074c8);
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
 }
 .hyperlink:visited, .auro-markdown a:visited {
-  color: var(--ds-color-ui-default-default, #0074c8);
+  color: var(--ds-color-text-ui-default-default, #2c67b5);
 }
 .hyperlink--nav {
   display: block;
@@ -803,17 +731,17 @@ body,
   text-decoration: underline !important;
 }
 .hyperlink--ondark {
-  color: var(--ds-color-ui-default-inverse, #00cff0);
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
 }
 .hyperlink--ondark:not(.is-touching):hover {
-  color: var(--ds-color-ui-hover-inverse, #5de3f7);
+  color: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
 }
 .hyperlink--ondark:visited {
-  color: var(--ds-color-ui-default-inverse, #00cff0);
+  color: var(--ds-color-text-ui-default-inverse, #56bbde);
 }
 .hyperlink:not(.is-touching):hover, .auro-markdown a:not(.is-touching):hover {
   text-decoration: none;
-  color: var(--ds-color-ui-hover-default, #054687);
+  color: var(--ds-color-text-ui-hover-default, #193d73);
 }
 
 img {
@@ -828,18 +756,23 @@ small,
 
 /* stylelint-disable-line scss/dollar-variable-first-in-block */
 .fineprint {
-  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
+  font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   line-height: var(--ds-text-body-height-xs, 1rem);
-  color: var(--ds-color-text-secondary-default, #626b79);
+  color: var(--ds-color-text-secondary-default, #525252);
 }
 
 /* stylelint-disable selector-type-no-unknown */
 .auro-markdown p:last-child {
   margin-bottom: 0;
 }
+.hljs {
+  background-color: unset !important;
+  padding: unset !important;
+}
+
 pre {
-  background: var(--ds-color-brand-gray-100, #f8f8f8) !important;
+  background: var(--ds-color-brand-gray-100, #f7f7f7) !important;
   border: unset !important;
   padding: var(--ds-size-200) !important;
   margin-bottom: var(--ds-size-300, 1.5rem) !important;
@@ -857,15 +790,42 @@ pre code {
   text-shadow: none;
 }
 
+.pre-wrapper:last-of-type pre {
+  margin-bottom: 0 !important;
+}
+
 code:not(.html):not(.css):not(.js):not([class*=language-]) {
   color: var(--ds-color-brand-flamingo-500, #b82b47);
+  margin-bottom: 0 !important;
 }
 
 .token.operator {
   background-color: unset !important;
 }
 
-auro-accordion {
+auro-accordion:not(.section) {
+  margin-top: 1rem !important;
+  display: block;
+}
+
+auro-accordion:not(.section):nth-child(2) {
+  margin-block-start: 0;
+}
+
+auro-accordion[class~=section]::part(accordion) {
+  padding-right: 2px;
+  display: block;
+}
+
+.accordion-content {
+  padding-top: 1rem;
+}
+
+.token.operator {
+  background-color: unset !important;
+}
+
+auro-accordion:not(auro-accordion-group *) {
   margin-top: 1rem !important;
   display: block;
 }
@@ -902,18 +862,19 @@ auro-accordion {
   background-color: var(--ds-basic-color-surface-default);
   padding: 1rem;
   border-radius: 0.5rem;
+  margin-top: 1rem;
 }
 
 .exampleWrapper--ondark {
   background-color: var(--ds-basic-color-surface-inverse);
   padding: 1rem;
   border-radius: 0.5rem;
+  margin-top: 1rem;
 }
 
 table {
   --ds-color-container-secondary-default: transparent;
 }
-
 table.compressed {
   width: unset !important;
   margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
@@ -942,10 +903,21 @@ main {
 }
 
 .contentWrapper {
-  flex: 1;
   display: flex;
   flex-direction: row-reverse;
   gap: 25px;
+  align-items: flex-start;
+}
+.contentWrapper > nav {
+  width: 200px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+.contentWrapper > nav auro-nav {
+  display: block;
 }
 
 .mainContent {
@@ -959,23 +931,44 @@ main {
 
 .scrollWrapper {
   flex: 1;
-  flex-basis: 0;
   min-height: 0;
 }
 
-nav {
+auro-nav {
   max-width: 200px;
+  position: sticky;
+  top: 2rem;
+  align-self: flex-start;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
 }
 
-auro-anchorlink.level2 {
+auro-anchorlink[class~=level2] {
   padding-left: var(--ds-size-200);
 }
 
-.note {
+p:first-of-type {
+  margin-top: 0;
+}
+
+.note,
+.warning {
   margin: 10px 0;
   padding: 10px;
   border-radius: 6px;
   font-style: italic;
-  color: var(--ds-basic-color-texticon-muted);
+}
+
+.note {
   background-color: var(--ds-basic-color-surface-neutral-subtle);
+  color: var(--ds-basic-color-texticon-muted);
+}
+
+.warning {
+  background-color: var(--ds-basic-color-status-error-subtle);
+  color: var(--ds-basic-color-status-error);
+}
+
+auro-header {
+  margin-top: 1rem;
 }

package/components/combobox/demo/voiceover.html

@@ -48,26 +48,8 @@
     <main></main>
 
     <script type="module">
-      import {unified} from 'https://esm.sh/unified';
-      import remarkParse from 'https://esm.sh/remark-parse';
-      import remarkGfm from 'https://esm.sh/remark-gfm';
-      import remarkRehype from 'https://esm.sh/remark-rehype';
-      import rehypeRaw from 'https://esm.sh/rehype-raw';
-      import rehypeHighlight from 'https://esm.sh/rehype-highlight';
-      import rehypeStringify from 'https://esm.sh/rehype-stringify';
-
-      const response = await fetch('./voiceover.md');
-      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);
+      import { renderPage } from './demo-support.js';
+      await renderPage('./voiceover.md');
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

package/components/combobox/demo/voiceover.md

@@ -100,7 +100,7 @@
 </ul>
 <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
 <auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
-<p><strong>What VoiceOver does:</strong></p>
+<p>What VoiceOver does:</p>
 <ul>
 <li>Focuses the element and announces it (e.g., <em>"[label], dimmed, combo box"</em> on macOS / <em>"[label], dimmed"</em> on iOS).</li>
 <li>The word <strong>"dimmed"</strong> is VoiceOver's way of indicating disabled.</li>