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

package/components/checkbox/demo/accessibility.md

@@ -4,7 +4,7 @@
 <div class="scrollWrapper">
 The `auro-checkbox` component follows native HTML checkbox semantics. This page documents the ARIA attributes, screen reader behavior, and other accessibility features built into the component.
 
-For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+For keyboard interaction details, see the <auro-hyperlink href="keyboard-behavior">Keyboard Behavior</auro-hyperlink> page.
 
 <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
 <auro-header level="3" id="checkboxGroup">Checkbox Group</auro-header>

package/components/checkbox/demo/customize.min.js

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607072023';
+var formkitVersion = '202607102214';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/getting-started.min.js

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607072023';
+var formkitVersion = '202607102214';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/index.min.js

@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202607072023';
+var formkitVersion = '202607102214';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607072023';
+var formkitVersion = '202607102214';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202607072023';
+var formkitVersion = '202607102214';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/demo/accessibility.md

@@ -4,7 +4,7 @@
 <div class="scrollWrapper">
 The `auro-combobox` component follows the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank">W3C APG Combobox</a> pattern. This page documents the ARIA semantics, screen reader announcements, and other accessibility behaviors built into the component.
 
-For keyboard interaction details, see the <a href="./keyboard-behavior.html">Keyboard Behavior</a> page.
+For keyboard interaction details, see the <auro-hyperlink href="keyboard-behavior">Keyboard Behavior</auro-hyperlink> page.
 
 <auro-header level="2" id="ariaRolesAndAttributes">ARIA Roles and Attributes</auro-header>
 <auro-header level="3" id="trigger">Trigger</auro-header>

package/components/combobox/demo/api.md

@@ -38,11 +38,11 @@ The `auro-combobox` element provides users with a way to select an option from a
 | `setCustomValidityValueMissing`       | `setCustomValidityValueMissing`       |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing`. |
 | `setCustomValidityValueMissingFilter` | `setCustomValidityValueMissingFilter` |           | `string`                                         |                  | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
 | `shift`                               | `shift`                               |           | `boolean`                                        |                  | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| `triggerIcon`                         | `triggerIcon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| `triggerIcon`                         | `triggerIcon`                         |           | `boolean`                                        |                  | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
 | `type`                                | `type`                                |           | `string`                                         |                  | Applies the defined value as the type attribute on `auro-input`. |
 | `typedValue`                          | `typedValue`                          |           | `string`                                         |                  | Specifies the value of the input element within the combobox. |
 | `validity`                            | `validity`                            |           | `string`                                         |                  | Specifies the `validityState` this element is in. |
-| `value`                               | `value`                               |           | `string`                                         |                  | Value selected for the dropdown menu.            |
+| `value`                               | `value`                               |           | `string`                                         |                  | Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value. |
 
 ## Methods
 

package/components/combobox/demo/customize.md

@@ -11,6 +11,7 @@
 <auro-anchorlink fluid href="#checkmarks" class="level2 body-xs">Checkmarks</auro-anchorlink>
 <auro-anchorlink fluid href="#placement" class="level2 body-xs">Bib Placement</auro-anchorlink>
 <auro-anchorlink fluid href="#noFlip" class="level2 body-xs">No Flip</auro-anchorlink>
+<auro-anchorlink fluid href="#customBibWidth" class="level2 body-xs">Custom Bib Width</auro-anchorlink>
 <auro-anchorlink fluid href="#breakpoint" class="level2 body-xs">Fullscreen Breakpoint</auro-anchorlink>
 <auro-anchorlink fluid href="#cssTokens" class="level2 body-xs">Tokens</auro-anchorlink>
 <auro-anchorlink fluid href="#cssParts" class="level2 body-xs">CSS Shadow Parts</auro-anchorlink>
@@ -35,7 +36,7 @@
 <auro-header level="2" id="appearance">Appearance</auro-header>
 <auro-header level="3" id="layout">Shape, Size & Layout</auro-header>
 <p>The <code>shape</code>, <code>size</code> and <code>layout</code> attributes work in collaboration to control the overall architecture of the component.</p>
-<p>See the <a href="./design.html">Design page</a> for a detailed breakdown.</p>
+<p>See the <auro-hyperlink href="design">Design page</auro-hyperlink> for a detailed breakdown.</p>
 <auro-header level="3" id="background">Light vs. Dark Background</auro-header>
 <p>The <code>appearance</code> attribute defines whether the component renders on lighter or darker backgrounds. Supported values are <code>default</code> and <code>inverse</code>. The default value is <code>default</code>.</p>
 <div class="exampleWrapper">
@@ -379,6 +380,57 @@
 &lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="customBibWidth">Custom Bib Width</auro-header>
+<p>By default the bib's width matches the trigger. To set a specific width, style the <code>dropdownSize</code> CSS shadow part.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-bib-width.html) -->
+<!-- The below content is automatically added from ./../apiExamples/custom-bib-width.html -->
+<auro-combobox id="customBibWidthExample">
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<span slot="bib.fullscreen.headline">Departure Airport</span>
+<span slot="label">From</span>
+<auro-menu>
+<auro-menuoption value="SEA">Seattle, WA (SEA-Seattle/Tacoma Intl.)</auro-menuoption>
+<auro-menuoption value="PDX">Portland, OR (PDX-Portland Intl.)</auro-menuoption>
+<auro-menuoption value="SFO">San Francisco, CA (SFO-San Francisco Intl.)</auro-menuoption>
+<auro-menuoption value="LAX">Los Angeles, CA (LAX-Los Angeles Intl.)</auro-menuoption>
+<auro-menuoption value="JFK">New York, NY (JFK-John F. Kennedy Intl.)</auro-menuoption>
+<auro-menuoption value="ORD">Chicago, IL (ORD-Chicago O'Hare Intl.)</auro-menuoption>
+</auro-menu>
+</auro-combobox>
+<style>
+            #customBibWidthExample::part(dropdownSize) {
+              width: 400px;
+            }
+</style>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-bib-width.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom-bib-width.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox id="customBibWidthExample"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
+  &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Departure Airport&lt;/span&gt;
+  &lt;span slot="label"&gt;From&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="SEA"&gt;Seattle, WA (SEA-Seattle/Tacoma Intl.)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="PDX"&gt;Portland, OR (PDX-Portland Intl.)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="SFO"&gt;San Francisco, CA (SFO-San Francisco Intl.)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="LAX"&gt;Los Angeles, CA (LAX-Los Angeles Intl.)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="JFK"&gt;New York, NY (JFK-John F. Kennedy Intl.)&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="ORD"&gt;Chicago, IL (ORD-Chicago O'Hare Intl.)&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;
+&lt;style&gt;
+  #customBibWidthExample::part(dropdownSize) {
+    width: 400px;
+  }
+&lt;/style&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 <auro-header level="3" id="breakpoint">Fullscreen Breakpoint</auro-header>
 <p>The <code>fullscreenBreakpoint</code> attribute defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. Supported values are <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>disabled</code>. The default value is <code>sm</code>.</p>
 <p>When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. Setting the value to <code>disabled</code> prevents the dropdown from ever entering fullscreen mode.</p>
@@ -669,7 +721,7 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="inputType">Input Type</auro-header>
-<p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type.</p>
+<p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type. Icon rendering is currently limited to <code>type="credit-card"</code>; <code>triggerIcon</code> without a supported type propagates the attribute but does not render a visible icon.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type_credit-card.html) -->
 <!-- The below content is automatically added from ./../apiExamples/type_credit-card.html -->