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

package/components/combobox/demo/api.min.js

@@ -5228,7 +5228,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604231640';
+var formkitVersion$2 = '202604232250';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -6377,7 +6377,7 @@ var styleCss$1$1 = i$7`.util_displayInline{display:inline}.util_displayInlineBlo
 
 var styleDefaultCss = i$7`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
 
-var colorBaseCss = i$7`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
+var colorBaseCss = i$7`.wrapper{border-color:red;background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
 var tokensCss$1$1 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
 
@@ -12980,7 +12980,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604231640';
+var formkitVersion$1 = '202604232250';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14045,7 +14045,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14442,6 +14442,7 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
+    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -15054,10 +15055,6 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
-      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
-        this.setMenuValue(this.value);
-      }
-
       this.syncValuesAndStates();
     }
 
@@ -15668,6 +15665,10 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
+    // Set the initial value in auro-menu if defined
+    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
+      this.menu.value = this.value;
+    }
   }
 
   /**
@@ -15748,16 +15749,10 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
-      if (this.menu && this.hasValue && this.menu.options) {
-        this.menu.options.forEach((opt) => {
-          if (!opt.hasAttribute('static')) {
-            opt.removeAttribute('hidden');
-          }
-        });
-      }
-
       if (this.behavior === 'suggestion') {
-        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        // if menu has an option that has matched value, then select it,
+        // otherwise clear the menu value since the input value doesn't match any option
+        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
@@ -16987,13 +16982,10 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
-    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    if (this.selectedOptions.length < previousCount) {
-      this.stageUpdate();
-    }
+    this.stageUpdate();
   }
 
   /**
@@ -17413,6 +17405,8 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
+    // Value of the selected options
+    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/combobox/demo/design.html

@@ -0,0 +1,83 @@
+<!--
+  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/design.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-combobox | Design</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-combobox'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" />
+    <link rel="stylesheet" type="text/css" href="./styles.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('./design.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+          addCopyButtons();
+        });
+
+      function addCopyButtons() {
+        document.querySelectorAll('auro-accordion pre[class*="language-"]').forEach((pre) => {
+          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 code = pre.querySelector('code');
+            const raw = code ? code.textContent : pre.textContent;
+            const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n');
+            navigator.clipboard.writeText(text).then(() => {
+              btn.textContent = 'Copied!';
+              setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
+            });
+          });
+          wrapper.appendChild(btn);
+        });
+      }
+    </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-icon@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>

package/components/combobox/demo/design.md

@@ -0,0 +1,283 @@
+<auro-header level="1" id="overview">Combobox - Design</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="3" id="anatomy">Component Anatomy</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout.md) -->
+<!-- The below content is automatically added from ./../docs/partials/layout.md -->
+<p>The component consists of the following elements:</p>
+<ul>
+<li>
+<strong>trigger:</strong> shows the component label, current value and will render to reflect state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>), and a flag marking instances that are required. The trigger includes a text input that allows the user to type and filter the available options.
+</li>
+<li>
+<strong>options list:</strong> a list of options that may be selected which are rendered in an element which can be expanded/collapsed by interacting with the trigger. The list is filtered based on user input.
+</li>
+<li>
+<strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
+</li>
+</ul>
+<auro-header level="4" id="trigger">Trigger</auro-header>
+<p>The trigger includes the component label, a flag marking the component optional/required and the current value. This label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities. The invalid state will also announce to accessibility tools when applied.</p>
+<p>The optional/required flag content may be customized.</p>
+<p>When rendering the value of a selected option, the text content of the option will render in the input field.</p>
+<p>The trigger is a focusable element and will visually respond to common UI states - <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
+<auro-header level="4" id="options">List Options</auro-header>
+<p>The component will render a list of options that may be selected. Options are filtered as the user types in the input. Each option may be in one of the following states when rendered:</p>
+<ul>
+<li>
+<code>selected</code> - One option may be selected at a time and identifies the current value of the component.
+</li>
+<li>
+<code>active</code> - One option may be active at a time. The active option indicates the item that will become selected if the user chooses.
+</li>
+<li>
+<code>disabled</code> - One or more options may be disabled. Disabled options are not interactive and cannot be marked as active or selected.
+</li>
+</ul>
+<auro-header level="4" id="helpText">Help Text</auro-header>
+<p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers. In certain cases, a component label alone may be confusing.</p>
+<p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
+<auro-header level="3" id="helpText">Colors</auro-header>
+<auro-header level="4" id="defaultColor">Default Color</auro-header>
+<p>When the component is used on a light background.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-combobox>
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<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>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&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;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="inverseColor">Inverse Color</auro-header>
+<p>When the component is used on a darker background, set `appearance="inverse"` to invert the component colors for proper contrast and visibility.</p>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-combobox appearance="inverse">
+<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>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox appearance="inverse"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
+<p>The `auro-combobox` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`.</p>
+<auro-header level="4" id="classicLayout">Classic Layout</auro-header>
+<p>The `classic` layout is default for `auro-combobox`. No customization is needed to achieve this look.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-combobox>
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<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>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox&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;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="emphasizedLayout">Emphasized Layout</auro-header>
+<p>The `emphasized` layout is only supported on light backgrounds.</p>
+<p>The <code>emphasized</code> layout supports the following shapes:</p>
+<ul>
+<li><code>pill</code></li>
+<li><code>pill-left</code></li>
+<li><code>pill-right</code></li>
+</ul>
+<p>The <code>emphasized</code> layout supports the following sizes:</p>
+<ul>
+<li><code>xl</code></li>
+</ul>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+<auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;">
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<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>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+<span slot="displayValue">
+<div>
+<div class="mainText">Apples</div>
+<div class="subText">Fruit</div>
+</div>
+</span>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;"&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;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+  &lt;span slot="helpText"&gt;
+    Help text - Lorem ipsum solar lorem ipsum solar
+  &lt;/span&gt;
+  &lt;span slot="displayValue"&gt;
+    &lt;div&gt;
+      &lt;div class="mainText"&gt;Apples&lt;/div&gt;
+      &lt;div class="subText"&gt;Fruit&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/span&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="snowflakeLayout">Snowflake Layout</auro-header>
+<p>The `snowflake` layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.</p>
+<p>The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.</p>
+<div class="exampleWrapper--ondark">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
+<auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;">
+<span slot="ariaLabel.bib.close">Close combobox</span>
+<span slot="ariaLabel.input.clear">Clear All</span>
+<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>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+</auro-combobox>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;"&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;Bib Header&lt;/span&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;auro-menu&gt;
+    &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
+    &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
+  &lt;/auro-menu&gt;
+  &lt;span slot="helpText"&gt;
+    Help text - Lorem ipsum solar lorem ipsum solar
+  &lt;/span&gt;
+&lt;/auro-combobox&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</div>
+</div>
+</div>

package/components/combobox/demo/index.html

@@ -3,7 +3,7 @@
   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/demo.md
+  All demo code should be added/edited in ./demo/index.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -26,35 +26,68 @@
 
     <!-- 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.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 
+    <!-- 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-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@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-icon@latest/+esm" type="module"></script>
+
     <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('./index.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        });
-    </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>
+      function addCopyButtons() {
+        document.querySelectorAll('auro-accordion pre[class*="language-"]').forEach((pre) => {
+          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 code = pre.querySelector('code');
+            const raw = code ? code.textContent : pre.textContent;
+            const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n');
+            navigator.clipboard.writeText(text).then(() => {
+              btn.textContent = 'Copied!';
+              setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
+            });
+          });
+          wrapper.appendChild(btn);
+        });
+      }
 
-    <script type="module" data-demo-script="true">
-      import { initExamples } from "./index.min.js";
+      function loadMd(path) {
+        fetch(path)
+          .then((response) => response.text())
+          .then((text) => {
+            const rawHtml = marked.parse(text);
+            document.querySelector('main').innerHTML = rawHtml;
+            Prism.highlightAll();
+            addCopyButtons();
+          });
+      }
 
+      loadMd('./index.md');
+    </script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+        <script type="module" data-demo-script="true">
+      import { initExamples } from "./index.min.js"
       initExamples();
     </script>
   </body>

package/components/combobox/demo/index.js

@@ -1,16 +1,17 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
+import { swapValueExample } from '../apiExamples/swap-value';
+
 import { AuroCombobox } from '../src/auro-combobox.js';
 import '../../menu/src/registered.js';
 
 AuroCombobox.register();
-AuroCombobox.register('custom-combobox');
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    // example();
+    swapValueExample();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called