npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.5 → 2.0.0-beta.51 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (857) hide show

package/components/select/demo/index.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/demo.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 Generator | auro-select custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <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>
+  <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('./index.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" src="./index.min.js"></script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+  </body>
+</html>

package/components/select/demo/index.js CHANGED Viewed

@@ -3,7 +3,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
-import '../../menu/src/index.js';
+import '../../menu/src/registered.js';
 AuroSelect.register(); // registering to `auro-select`
 AuroSelect.register('custom-select');

package/components/select/demo/index.md CHANGED Viewed

@@ -10,22 +10,7 @@ This file is generated based on a template fetched from `./docs/partials/demo.md
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.
-## About auro-select
-The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
-## Install instructions
-The `<auro-select>` custom element is a combo-element using independent primitives for the most flexibility. To allow consumers the most control over the versioning their dependencies, `<auro-select>` requires the following peer dependencies along with `<auro-select>`.
-```shell
-$ npm i @aurodesignsystem/auro-select
-$ npm i @aurodesignsystem/auro-dropdown
-$ npm i @aurodesignsystem/auro-menu
-```
+`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
 <!-- AURO-GENERATED-CONTENT:END -->
 ## Default example
@@ -36,6 +21,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -54,6 +40,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -75,6 +62,7 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
   <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Please select your preferred option</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -94,6 +82,7 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Please select your preferred option</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -116,6 +105,7 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
   <!-- The below content is automatically added from ./../apiExamples/slots.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Please choose a preference</span>
     <span slot="helpText">Preferences are maintained for future use</span>
@@ -137,6 +127,7 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Please choose a preference</span>
   <span slot="helpText">Preferences are maintained for future use</span>
@@ -161,6 +152,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withIcons.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="air">
@@ -189,6 +181,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="air">
@@ -220,6 +213,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withSubmenus.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -262,6 +256,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -307,6 +302,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
   <auro-select nocheckmark>
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
       <label slot="placeholder">Placeholder Text</label>
       <auro-menu>
           <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -326,6 +322,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 ```html
 <auro-select nocheckmark>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -350,6 +347,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
   <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
   <auro-select id="customBibHeightExample">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -374,6 +372,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 ```html
 <auro-select id="customBibHeightExample">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -401,6 +400,7 @@ Use the `error` boolean attribute to toggle the error UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
   <auro-select error="Custom error message">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -420,6 +420,7 @@ Use the `error` boolean attribute to toggle the error UI.
 ```html
 <auro-select error="Custom error message">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -442,6 +443,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-select disabled>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -461,6 +463,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 ```html
 <auro-select disabled>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -493,6 +496,7 @@ This will create a new custom element that you can use in your HTML that will fu
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/custom.html -->
   <custom-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -512,6 +516,7 @@ This will create a new custom element that you can use in your HTML that will fu
 ```html
 <custom-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>