@aurodesignsystem/auro-formkit 2.0.0-beta.41 → 2.0.0-beta.42

package/components/bibtemplate/node_modules/chalk/source/vendor/supports-color/index.js

@@ -0,0 +1,182 @@
+import process from 'node:process';
+import os from 'node:os';
+import tty from 'node:tty';
+
+// From: https://github.com/sindresorhus/has-flag/blob/main/index.js
+/// function hasFlag(flag, argv = globalThis.Deno?.args ?? process.argv) {
+function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : process.argv) {
+	const prefix = flag.startsWith('-') ? '' : (flag.length === 1 ? '-' : '--');
+	const position = argv.indexOf(prefix + flag);
+	const terminatorPosition = argv.indexOf('--');
+	return position !== -1 && (terminatorPosition === -1 || position < terminatorPosition);
+}
+
+const {env} = process;
+
+let flagForceColor;
+if (
+	hasFlag('no-color')
+	|| hasFlag('no-colors')
+	|| hasFlag('color=false')
+	|| hasFlag('color=never')
+) {
+	flagForceColor = 0;
+} else if (
+	hasFlag('color')
+	|| hasFlag('colors')
+	|| hasFlag('color=true')
+	|| hasFlag('color=always')
+) {
+	flagForceColor = 1;
+}
+
+function envForceColor() {
+	if ('FORCE_COLOR' in env) {
+		if (env.FORCE_COLOR === 'true') {
+			return 1;
+		}
+
+		if (env.FORCE_COLOR === 'false') {
+			return 0;
+		}
+
+		return env.FORCE_COLOR.length === 0 ? 1 : Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
+	}
+}
+
+function translateLevel(level) {
+	if (level === 0) {
+		return false;
+	}
+
+	return {
+		level,
+		hasBasic: true,
+		has256: level >= 2,
+		has16m: level >= 3,
+	};
+}
+
+function _supportsColor(haveStream, {streamIsTTY, sniffFlags = true} = {}) {
+	const noFlagForceColor = envForceColor();
+	if (noFlagForceColor !== undefined) {
+		flagForceColor = noFlagForceColor;
+	}
+
+	const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
+
+	if (forceColor === 0) {
+		return 0;
+	}
+
+	if (sniffFlags) {
+		if (hasFlag('color=16m')
+			|| hasFlag('color=full')
+			|| hasFlag('color=truecolor')) {
+			return 3;
+		}
+
+		if (hasFlag('color=256')) {
+			return 2;
+		}
+	}
+
+	// Check for Azure DevOps pipelines.
+	// Has to be above the `!streamIsTTY` check.
+	if ('TF_BUILD' in env && 'AGENT_NAME' in env) {
+		return 1;
+	}
+
+	if (haveStream && !streamIsTTY && forceColor === undefined) {
+		return 0;
+	}
+
+	const min = forceColor || 0;
+
+	if (env.TERM === 'dumb') {
+		return min;
+	}
+
+	if (process.platform === 'win32') {
+		// Windows 10 build 10586 is the first Windows release that supports 256 colors.
+		// Windows 10 build 14931 is the first release that supports 16m/TrueColor.
+		const osRelease = os.release().split('.');
+		if (
+			Number(osRelease[0]) >= 10
+			&& Number(osRelease[2]) >= 10_586
+		) {
+			return Number(osRelease[2]) >= 14_931 ? 3 : 2;
+		}
+
+		return 1;
+	}
+
+	if ('CI' in env) {
+		if (['GITHUB_ACTIONS', 'GITEA_ACTIONS', 'CIRCLECI'].some(key => key in env)) {
+			return 3;
+		}
+
+		if (['TRAVIS', 'APPVEYOR', 'GITLAB_CI', 'BUILDKITE', 'DRONE'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
+			return 1;
+		}
+
+		return min;
+	}
+
+	if ('TEAMCITY_VERSION' in env) {
+		return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
+	}
+
+	if (env.COLORTERM === 'truecolor') {
+		return 3;
+	}
+
+	if (env.TERM === 'xterm-kitty') {
+		return 3;
+	}
+
+	if ('TERM_PROGRAM' in env) {
+		const version = Number.parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
+
+		switch (env.TERM_PROGRAM) {
+			case 'iTerm.app': {
+				return version >= 3 ? 3 : 2;
+			}
+
+			case 'Apple_Terminal': {
+				return 2;
+			}
+			// No default
+		}
+	}
+
+	if (/-256(color)?$/i.test(env.TERM)) {
+		return 2;
+	}
+
+	if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
+		return 1;
+	}
+
+	if ('COLORTERM' in env) {
+		return 1;
+	}
+
+	return min;
+}
+
+export function createSupportsColor(stream, options = {}) {
+	const level = _supportsColor(stream, {
+		streamIsTTY: stream && stream.isTTY,
+		...options,
+	});
+
+	return translateLevel(level);
+}
+
+const supportsColor = {
+	stdout: createSupportsColor({isTTY: tty.isatty(1)}),
+	stderr: createSupportsColor({isTTY: tty.isatty(2)}),
+};
+
+export default supportsColor;

package/components/bibtemplate/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@aurodesignsystem/auro-bibtemplate",
+  "version": "1.0.0",
+  "description": "auro-bibtemplate HTML custom element",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "dependencies": {
+    "@aurodesignsystem/auro-header": "3.0.0",
+    "@aurodesignsystem/auro-icon": "^6.1.2",
+    "chalk": "^5.3.0",
+    "lit": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@aurodesignsystem/design-tokens": "^4.13.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+  },
+  "devDependencies": {
+    "@auro-formkit/build-tools": "*",
+    "@auro-formkit/config": "*",
+    "@auro-formkit/typescript": "*",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-serve": "^2.0.3",
+    "wc-sass-render": "^1.4.0"
+  },
+  "overrides": {
+    "wc-sass-render": {
+      "sass": "$sass"
+    }
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "*-css.js",
+      "*.css"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "run-s build:version build:sass bundler types",
+    "build:version": "node ./src/scripts/version.mjs",
+    "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"",
+    "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"",
+    "bundler": "rollup -c node:@auro-formkit/config/internal.rollup",
+    "clean": "rm -rf dist build",
+    "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
+    "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
+    "types": "tsc --project tsconfig.json",
+    "lint": "npm-run-all scssLint esLint",
+    "scssLint": "stylelint \"./src/**/*.scss\"",
+    "esLint": "eslint \"./src/**/*.js\""
+  }
+}

package/components/bibtemplate/src/auro-bibtemplate.js

@@ -0,0 +1,137 @@
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+
+/* eslint-disable lit/no-invalid-html, lit/binding-positions */
+
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+
+import colorCss from "./styles/color-css.js";
+import styleCss from "./styles/style-css.js";
+import tokenCss from "./styles/tokens-css.js";
+
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion.js';
+
+import { AuroHeader } from '@aurodesignsystem/auro-header/src/auro-header.js';
+import headerVersion from './headerVersion.js';
+
+export class AuroBibtemplate extends LitElement {
+
+  constructor() {
+    super();
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+    this.headerTag = versioning.generateTag('auro-header', headerVersion, AuroHeader);
+  }
+
+  static get styles() {
+    return [
+      colorCss,
+      styleCss,
+      tokenCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      isFullscreen: {
+        type: Boolean,
+        reflect: true,
+      },
+      large: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
+  // function to define props used within the scope of this component
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-bibtemplate"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-bibtemplate") // this will register this element to <custom-bibtemplate/>
+   *
+   */
+  static register(name = "auro-bibtemplate") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBibtemplate);
+  }
+
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    if (event.target === this) {
+      event.preventDefault();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+  }
+
+  onCloseButtonClick() {
+    this.dispatchEvent(new Event("close-click", { bubbles: true,
+      composed: true }));
+  }
+
+  /**
+   * Exposes CSS parts for styling from parent components.
+   * @returns {void}
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div id="bibTemplate" part="bibtemplate">
+      ${this.isFullscreen ? html`
+        <div id="headerContainer">
+          <button id="closeButton" @click="${this.onCloseButtonClick}">
+            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+          </button>
+          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header">
+            <slot name="header"></slot>
+          </${this.headerTag}>
+          <span id="subheader">
+            <slot name="subheader"></slot>
+          </span>
+        </div>` : null}
+
+        <div id="bodyContainer">
+          <slot></slot>
+        </div>
+
+      ${this.isFullscreen ? html`
+        <div id="footerContainer">
+          <slot name="footer"></slot>
+        </div>` : null}
+      </div>
+      `;
+  }
+}

package/components/bibtemplate/src/headerVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/bibtemplate/src/iconVersion.js

@@ -0,0 +1 @@
+export default '6.1.2';

package/components/bibtemplate/src/index.js

@@ -0,0 +1,6 @@
+import { AuroBibtemplate } from './auro-bibtemplate.js';
+
+AuroBibtemplate.register();
+
+// Enable TypeScript support
+export { AuroBibtemplate };

package/components/bibtemplate/src/styles/color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css``;

package/components/bibtemplate/src/styles/color.css

@@ -0,0 +1 @@
+

package/components/bibtemplate/src/styles/style-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;

package/components/bibtemplate/src/styles/style.css

@@ -0,0 +1,58 @@
+#bibTemplate {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  max-height: 100%;
+  flex-direction: column;
+}
+
+#headerContainer {
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--ds-auro-dropdownbib-header-boxshadow-color);
+}
+
+#header {
+  display: flex;
+  width: 100%;
+  min-height: var(--ds-size-1000, 5rem);
+  box-sizing: border-box;
+  align-items: end;
+  padding-top: var(--ds-size-400, 2rem);
+  padding-right: var(--ds-size-700, 3.5rem);
+  padding-left: var(--ds-size-200, 1rem);
+  pointer-events: none;
+}
+
+#subheader {
+  width: 100%;
+}
+#subheader ::slotted([auro-input]) {
+  padding: 0 var(--ds-size-200, 1rem);
+}
+
+#closeButton {
+  position: absolute;
+  top: var(--ds-size-400, 2rem);
+  right: var(--ds-size-200, 1rem);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+#closeButton [auro-icon] {
+  --ds-auro-icon-size: var(--ds-size-500, $ds-size-500);
+}
+
+#bodyContainer {
+  overflow: auto;
+  flex: 1 1 100%;
+  padding-top: var(--ds-size-100, 0.5rem);
+}
+
+#footerContainer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--ds-size-200, 1rem);
+}

package/components/bibtemplate/src/styles/style.scss

@@ -0,0 +1,62 @@
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+#bibTemplate {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  max-height: 100%;;
+  flex-direction: column;
+}
+
+#headerContainer {
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--ds-auro-dropdownbib-header-boxshadow-color);
+}
+
+#header {
+  display: flex;
+  width: 100%;
+  min-height: var(--ds-size-1000, $ds-size-1000);
+  box-sizing: border-box;
+  align-items: end;
+  padding-top: var(--ds-size-400, $ds-size-400);
+  padding-right: var(--ds-size-700, $ds-size-700);
+  padding-left: var(--ds-size-200, $ds-size-200);
+  pointer-events: none;
+}
+
+#subheader {
+  width: 100%;
+
+  ::slotted([auro-input]) {
+    padding: 0 var(--ds-size-200, $ds-size-200);
+  }
+}
+
+#closeButton{
+  position: absolute;
+  top: var(--ds-size-400, $ds-size-400);
+  right: var(--ds-size-200, $ds-size-200);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  [auro-icon] {
+    --ds-auro-icon-size: var(--ds-size-500, $ds-size-500);
+  }
+}
+
+#bodyContainer {
+  overflow: auto;
+  flex: 1 1 100%;
+  padding-top: var(--ds-size-100, $ds-size-100);
+}
+
+#footerContainer{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--ds-size-200, $ds-size-200);
+}

package/components/bibtemplate/src/styles/tokens-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15))}`;

package/components/bibtemplate/src/styles/tokens.css

@@ -0,0 +1,3 @@
+:host {
+  --ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));
+}

package/components/bibtemplate/src/styles/tokens.scss

@@ -0,0 +1,5 @@
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200}); // same as --ds-auro-dropdownbib-boxshadow-color
+}

package/components/checkbox/.turbo/turbo-build.log

@@ -106,13 +106,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 568ms
+created dist in 608ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 474ms
+created ./demo/ in 520ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 485ms
+created ./demo/ in 492ms
 
 > @aurodesignsystem/auro-checkbox@4.1.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component checkbox

package/components/checkbox/README.md

@@ -96,7 +96,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.40/dist/auro-checkbox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.41/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-checkbox use cases

package/components/combobox/.turbo/turbo-build.log

@@ -6,6 +6,9 @@
 > @aurodesignsystem/auro-combobox@2.1.4 build:version
 > node ./src/scripts/version.mjs
 
+Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-bibtemplate/package.json
+Writing version file to: ./src/bibtemplateVersion.js
+Successfully wrote version file for @aurodesignsystem/auro-bibtemplate
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-dropdown/package.json
 Writing version file to: ./src/dropdownVersion.js
 Successfully wrote version file for @aurodesignsystem/auro-dropdown
@@ -64,10 +67,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.5s
+created dist in 1.7s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.2s
+created ./demo/ in 1.3s
 
 ./demo/api.js → ./demo/...
 created ./demo/ in 1s
@@ -132,6 +135,7 @@ Web Component Analyzer analyzing 1 file...
   ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
   ⁕ FILE:src=./../apiExamples/loading.html 
+  ⁕ FILE:src=./../apiExamples/fullscreenBreakpoint.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/dynamicMenu.html 
@@ -152,6 +156,7 @@ Web Component Analyzer analyzing 1 file...
   ⁕ CODE:src=./../apiExamples/helpText.html 
   ⁕ CODE:src=./../apiExamples/loading.js 
   ⁕ CODE:src=./../apiExamples/loading.html 
+  ⁕ CODE:src=./../apiExamples/fullscreenBreakpoint.html 
   ⁕ CODE:src=./../apiExamples/inDialog.html 
   ⁕ CODE:src=./../apiExamples/inDialog.js 
 

package/components/combobox/README.md

@@ -72,6 +72,7 @@ import "@aurodesignsystem/auro-formkit/auro-combobox";
 
 ```html
 <auro-combobox>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
@@ -100,10 +101,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.40/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.40/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.40/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.40/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.41/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.41/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.41/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.41/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases
@@ -130,6 +131,7 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox>
+  <span slot="bib.mobile.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>