@aurodesignsystem-dev/auro-formkit 0.0.0-pr1396.2 → 0.0.0-pr1397.1

package/components/select/demo/layout.md

@@ -0,0 +1,290 @@
+# Select - Layout
+
+## Shape | Size | Layout Support
+
+The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`.
+
+### Classic Layout (Legacy)
+
+The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-select>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- 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 -->
+
+```html
+<auro-select>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Emphasized Layout
+
+The `emphasized` layout is only supported on light backgrounds.
+
+The `emphasized` layout supports the following shapes:
+- `pill`
+- `pill-left`
+- `pill-right`
+
+The `emphasized` layout supports the following sizes:
+- `xl`
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+  <div style="display: flex; flex-direction: row; gap: 10px;">
+    <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
+      <span slot="ariaLabel.bib.close">Close Popup</span>
+      <span slot="label">Select Example</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+    <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
+      <span slot="label">Select Example</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+          <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+    <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
+      <span slot="label">Select Example</span>
+      <span slot="helpText">no displayValue in menuoptions</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+  <!-- 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 -->
+
+```html
+<div style="display: flex; flex-direction: row; gap: 10px;">
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="label">Select Example</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
+    <span slot="label">Select Example</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
+    <span slot="label">Select Example</span>
+    <span slot="helpText">no displayValue in menuoptions</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Snowflake Layout
+
+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.
+
+The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.
+
+<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-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- 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 -->
+
+```html
+<auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <span slot="label">Label</span>
+  <span slot="helpText">Help Text</span>
+  <auro-menu nocheckmark>
+    <auro-menuoption value="flights">
+      <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+    </auro-menuoption>
+    <auro-menuoption value="cars">
+      <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+    </auro-menuoption>
+    <auro-menuoption value="hotels">
+      <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+    </auro-menuoption>
+    <auro-menuoption value="packages">
+      <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+    </auro-menuoption>
+    <auro-menuoption value="cruises">
+      <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+    </auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

package/components/select/demo/ux.html

@@ -0,0 +1,338 @@
+<!--
+  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/index.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-select</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-select'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"
+    />
+
+    <style>
+      pre[class*="language-"] {
+        /* padding: 1em; */
+        /* margin: .5em 0; */
+        overflow: unset !important;
+      }
+
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+
+      sup {
+        font-size: 60%;
+        font-style: italic;
+        /* opacity: 0.6; */
+        top: -0.5rem;
+      }
+
+      sup a {
+        text-decoration: none !important;
+      }
+
+      body {
+        padding: 0;
+      }
+
+      main {
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        flex: 1;
+        /* background-color: aquamarine; */
+      }
+
+      .contentWrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: row-reverse;
+      }
+
+      .mainContent {
+        flex: 1;
+        /* height: 100%; */
+        overflow: auto;
+        padding-right: 25px;
+        /* background-color: aqua; */
+        display: flex;
+        flex-direction: column;
+        flex-basis: 0;
+      }
+
+      .scrollWrapper {
+        flex: 1;
+        flex-basis: 0;
+        min-height: 0;
+        overflow: auto;
+        /* background-color: burlywood; */
+      }
+
+      nav {
+        max-width: 200px;
+      }
+
+      .stepDetails {
+        margin: 10px 0;
+        padding: 10px;
+        border-radius: 6px;
+        font-style: italic;
+        color: var(--ds-basic-color-texticon-muted);
+        background-color: var(--ds-basic-color-surface-neutral-subtle);
+      }
+
+      .indent1 {
+        margin-left: 40px;
+      }
+
+      auro-header {
+        margin: 10px 0;
+      }
+
+      .authorTodo {
+        color: red;
+        background-color: pink;
+        font-weight: bold;
+        padding: 5px 10px;
+        border-radius: 6px;
+        margin-bottom: 2px !important;
+      }
+
+      .footnotes {
+        /* background-color: aqua; */
+        padding-bottom: 20px;
+      }
+
+      auro-anchorlink.level2 {
+        padding-left: var(--ds-size-200);
+      }
+
+      table.compressed {
+        width: unset !important;
+        margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
+      }
+
+      table.compressed th,
+      table.compressed td {
+        padding: var(--ds-size-50) !important;
+      }
+
+      .tabList {
+        /* box-shadow: inset 0 -2px 0 var(--ds-color-brand-gray-300); */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        margin-bottom: 20px;
+      }
+
+      .tab {
+        color: var(--ds-advanced-color-hyperlink-text);
+        transition: border 0.3s ease-out;
+        padding: var(--ds-size-200);
+        border-width: 0px 0px 2px;
+        border-style: solid;
+        border-bottom-color: var(--ds-color-brand-gray-300);
+        text-decoration: none;
+        white-space: nowrap;
+        display: block;
+      }
+
+      .tab:hover {
+        cursor: pointer;
+        color: var(--ds-advanced-color-hyperlink-text-hover);
+        border-bottom-color: rgb(1, 66, 106);
+      }
+
+      .tab {
+        text-decoration: none !important;
+      }
+
+      /* .link.active {
+        color: rgb(5, 70, 135) !important;;
+        padding-bottom: calc(-1px + 1rem);
+        cursor: default !important;
+        text-decoration: none;
+        border-bottom: 2px solid currentcolor;
+      } */
+
+      /* .tab {
+        color: var(--ds-advanced-color-hyperlink-text);
+        transition: border 0.3s ease-out;
+        padding: var(--ds-size-200);
+        border-width: 0px 0px 2px;
+        border-style: solid;
+        border-color: transparent;
+        text-decoration: none;
+        white-space: nowrap;
+      } */
+
+      .tab.active {
+        cursor: pointer;
+        color: var(--ds-basic-color-texticon-default);
+        text-decoration: none;
+        border-color: currentcolor;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <div role="tablist" class="tabList">
+      <a role="tab" id="componentTab" class="tab active">Select</a>
+      <a role="tab" id="layoutTab" class="tab">Layout</a>
+      <a role="tab" id="keyboardTab" class="tab">Keyboard Behavior</a>
+      <a role="tab" id="a11yTab" class="tab">A11Y</a>
+      <a role="tab" id="apiTab" class="tab">API</a>
+      <a role="tab" id="installTab" class="tab">Install</a>
+      <a role="tab" id="contributeTab" class="tab">Contribute</a>
+      <a role="tab" id="releasesTab" class="tab">Releases</a>
+    </div>
+    <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-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";
+
+      function loadMd(path) {
+        fetch(path)
+          .then((response) => response.text())
+          .then((text) => {
+            const rawHtml = marked.parse(text);
+            document.querySelector("main").innerHTML = rawHtml;
+            Prism.highlightAll();
+          });
+      }
+
+      loadMd("./ux.md");
+
+      const tabs = document.querySelectorAll(".tabList .tab");
+
+      tabs.forEach((tab) => {
+        tab.addEventListener("click", (event) => {
+          const selectedTab = event.target;
+          const selectedTabId = selectedTab.id;
+
+          // Remove active class from all tabs
+          tabs.forEach((t) => t.classList.remove("active"));
+
+          // Add active class to the clicked tab
+          selectedTab.classList.add("active");
+
+          // Load corresponding markdown content based on the clicked tab
+          switch (selectedTabId) {
+            case "componentTab":
+              loadMd("./ux.md");
+              break;
+            case "layoutTab":
+              loadMd("./layout.md");
+              break;
+            case "keyboardTab":
+              loadMd("./keyboardBehavior.md");
+              break;
+            case "a11yTab":
+              loadMd("./a11y.md");
+              break;
+            case "installTab":
+              loadMd("./install.md");
+              break;
+            case "installTab":
+              loadMd("./install.md");
+              break;
+            case "contributeTab":
+              loadMd("./contribute.md");
+              break;
+            case "apiTab":
+              loadMd("./api.md");
+              break;
+            case "releasesTab":
+              loadMd("./releases.md");
+              break;
+            default:
+              loadMd("./ux.md");
+          }
+        });
+      });
+    </script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>