From 872a2e424f1f674c4b724824c513e743af22d4a1 Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Sat, 30 Nov 2024 19:42:31 +0900
Subject: [PATCH 1/3] =?UTF-8?q?patterns=E3=82=92=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E7=89=88=E3=81=AB=E8=BF=BD=E5=BE=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/patterns.html      |  243 +++--
 content/shared/css/core.css         |    1 +
 content/shared/js/app.js            |   16 +-
 content/shared/js/examples.js       |   28 +-
 content/shared/js/filterBySearch.js |  175 ++++
 content/shared/js/highlight.pack.js |  339 ++++++-
 content/shared/js/skipto.js         | 1462 +++++++++++++++------------
 7 files changed, 1501 insertions(+), 763 deletions(-)
 create mode 100644 content/shared/js/filterBySearch.js
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index 23bc38bf..8a7b59fe 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -11,370 +11,429 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
-    <script src="../shared/js/skipto.js"></script>
+    <script src="../shared/js/filterBySearch.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <h1>Patterns</h1>
-    <ul class="tiles">
-      <li class="tile">
+    <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/2d60c413ec23875a30162364a7e715b26875d9db -->
+    <section class="pattern-filter-section">
+      <h2>Filter Patterns</h2>
+      <div class="pattern-filter-flex-container">
+      <form
+        action="javascript:void(0);"
+        role="search"
+      >
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20">
+          <g transform="translate(-3.5 -3.5)" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M20.5,12.5a8,8,0,1,1-8-8,8,8,0,0,1,8,8Z" />
+            <path d="M29.325,29.325l-4.35-4.35" transform="translate(-6.825 -6.825)"/>
+          </g>
+        </svg>
+        <input
+          type="text"
+          id="pattern-filter-input"
+          placeholder="Filter patterns"
+          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name', 'no-patterns-found')"
+          aria-label="Filter patterns"
+        >
+        <button
+          id="clear-pattern-filter"
+          aria-label="Clear pattern filter"
+          onclick="aria.Filter.clearInput(document.getElementById('pattern-filter-input'), '#patterns', 'pattern-name', 'no-patterns-found')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+            <path d="M17.5,8.507,16.493,7.5,12.5,11.493,8.507,7.5,7.5,8.507,11.493,12.5,7.5,16.493,8.507,17.5,12.5,13.507,16.493,17.5,17.5,16.493,13.507,12.5Z" transform="translate(-7.5 -7.5)"/>
+          </svg>
+        </button>
+      </form>
+      <fieldset class="view-toggle">
+        <button id="listViewButton" onclick="aria.Filter.onViewButtonClicked(this)"  aria-pressed="false" aria-label="Show list view">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 25 21">
+            <g transform="translate(0 -0.4)" fill="currentColor">
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -20.375)" />
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -12.375)"/>
+              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -4.375)"/>
+            </g>
+          </svg>
+        </button>
+        <button id="tilesViewButton" onclick="aria.Filter.onViewButtonClicked(this)" aria-pressed="true" aria-label="Show tiles view" class="active">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 22 22" >
+            <g transform="translate(0 -0.5)" fill="currentColor">
+              <rect width="9" height="9" rx="1" transform="translate(0 0.5)"/>
+              <rect width="9" height="9" rx="1" transform="translate(0 13.5)"/>
+              <rect width="9" height="9" rx="1" transform="translate(13 0.5)"/>
+              <rect width="9" height="9" rx="1" transform="translate(13 13.5)"/>
+            </g>
+          </svg>
+        </button>
+      </fieldset>
+      </div>
+    </section>
+    <ul id="patterns" class="tiles">
+      <li class="pattern">
         <a href="accordion/accordion-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-accordion.svg">
             <span>Accordion (Sections With Show/Hide Functionality)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="alert/alert-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-alert.svg">
             <span>Alert</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="alertdialog/alertdialog-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-alertdialog.svg">
             <span>Alert and Message Dialogs</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="breadcrumb/breadcrumb-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-breadcrumb.svg">
             <span>Breadcrumb</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="button/button-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-button.svg">
             <span>Button</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="carousel/carousel-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-carousel.svg">
             <span>Carousel (Slide Show or Image Rotator)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="checkbox/checkbox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-checkbox.svg">
             <span>Checkbox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="combobox/combobox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-combobox.svg">
             <span>Combobox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A combobox is an input widget that has an associated popup.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="dialog-modal/dialog-modal-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-dialog-modal.svg">
             <span>Dialog (Modal)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A dialog is a window overlaid on either the primary window or another dialog window.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="disclosure/disclosure-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-disclosure.svg">
             <span>Disclosure (Show/Hide)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="feed/feed-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-feed.svg">
             <span>Feed</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A feed is a section of a page that automatically loads new sections of content as the user scrolls.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="grid/grid-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-grid.svg">
             <span>Grid (Interactive Tabular Data and Layout Containers)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="landmarks/landmarks-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-landmarks.svg">
             <span>Landmarks</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Landmarks are a set of eight roles that identify the major sections of a page.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="link/link-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-link.svg">
             <span>Link</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A link widget provides an interactive reference to a resource.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="listbox/listbox-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-listbox.svg">
             <span>Listbox</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A listbox widget presents a list of options and allows a user to select one or more of them.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="menubar/menu-and-menubar-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-menubar.svg">
             <span>Menu and Menubar</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="menu-button/menu-button-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-menu-button.svg">
             <span>Menu Button</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="meter/meter-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-meter.svg">
             <span>Meter</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A meter is a graphical display of a numeric value that varies within a defined range.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="radio/radio-group-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-radio.svg">
             <span>Radio Group</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="slider/slider-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-slider.svg">
             <span>Slider</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A slider is an input where the user selects a value from within a given range.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="slider-multithumb/slider-multithumb-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-slider-multithumb.svg">
             <span>Slider (Multi-Thumb)</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="spinbutton/spinbutton-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-spinbutton.svg">
             <span>Spinbutton</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A spinbutton is an input widget that restricts its value to a set or range of discrete values.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="switch/switch-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-switch.svg">
             <span>Switch</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A switch is an input widget that allows users to choose one of two values: on or off.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="table/table-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-table.svg">
             <span>Table</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="tabs/tabs-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-tabs.svg">
             <span>Tabs</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="toolbar/toolbar-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-toolbar.svg">
             <span>Toolbar</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="tooltip/tooltip-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-tooltip.svg">
             <span>Tooltip</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="treeview/treeview-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-treeview.svg">
             <span>Tree View</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A tree view widget presents a hierarchical list.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="treegrid/treegrid-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-treegrid.svg">
             <span>Treegrid</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
         </div>
       </li>
 
-      <li class="tile">
+      <li class="pattern">
         <a href="windowsplitter/windowsplitter-pattern.html">
-          <h2 class="tile-name">
+          <h2 class="pattern-name">
             <img alt="" src="../images/pattern-windowsplitter.svg">
             <span>Window Splitter</span>
           </h2>
         </a>
-        <div class="tile-introduction">
+        <div class="pattern-introduction">
           A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
         </div>
       </li>
+
+      <li id="no-patterns-found" aria-hidden="true" style="display: none">
+        <h2>No results found.</h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/content/shared/css/core.css b/content/shared/css/core.css
index ab1619cd..f6b1f106 100644
--- a/content/shared/css/core.css
+++ b/content/shared/css/core.css
@@ -69,6 +69,7 @@ th .example-header {
   margin-left: 1em;
 }
 
+.example-code button,
 .example-header button {
   display: inline-block;
   position: relative;
diff --git a/content/shared/js/app.js b/content/shared/js/app.js
index 7612696d..89a0c302 100644
--- a/content/shared/js/app.js
+++ b/content/shared/js/app.js
@@ -4,7 +4,7 @@
 
 (function () {
   // Load syntax highlighting
-  hljs.initHighlightingOnLoad();
+  hljs.highlightAll();
 
   // Add usage warning to all examples
   window.addEventListener('DOMContentLoaded', addExampleUsageWarning, false);
@@ -20,14 +20,20 @@
     // Determine we are on an example page
     if (!document.location.href.match(/examples\/[^/]+\.html/)) return;
 
+    const isExperimental =
+      document.querySelector('main')?.getAttribute('data-content-phase') ===
+      'experimental';
+
+    const usageWarningLink = isExperimental
+      ? '/templates/experimental-example-usage-warning.html'
+      : '/templates/example-usage-warning.html';
+
     // Generate the usage warning link using app.js link as a starting point
     const scriptSource = document
       .querySelector('[src$="app.js"]')
       .getAttribute('src');
-    const fetchSource = scriptSource.replace(
-      '/js/app.js',
-      '/templates/example-usage-warning.html'
-    );
+
+    const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink);
 
     // Load and parse the usage warning and insert it before the h1
     const html = await (await fetch(fetchSource)).text();
diff --git a/content/shared/js/examples.js b/content/shared/js/examples.js
index fdf3781b..ac03b91d 100644
--- a/content/shared/js/examples.js
+++ b/content/shared/js/examples.js
@@ -54,6 +54,7 @@ aria.widget.SourceCode = function () {
   this.code = new Array();
   this.exampleHeader = new Array();
   this.resources = new Array();
+  this.HTMLDescription = new Array();
 };
 
 /**
@@ -63,6 +64,7 @@ aria.widget.SourceCode = function () {
  * @param {string} codeId          - ID of element containing only and all of the html used to render the example widget
  * @param {string} exampleHeaderId - ID of header element under which the "Open in Codepen" button belongs
  * @param {string} cssJsFilesId    - ID of element containing links to all the relevant js and css files used for the example widget
+ * @param {string} HTMLDescriptionId - ID of the separator element under the HTML Source Code which the "Open in Codepen" button belongs
  * @function add
  * @memberof aria.widget.SourceCode
  */
@@ -70,11 +72,13 @@ aria.widget.SourceCode.prototype.add = function (
   locationId,
   codeId,
   exampleHeaderId,
-  cssJsFilesId
+  cssJsFilesId,
+  HTMLDescriptionId
 ) {
   this.location[this.location.length] = locationId;
   this.code[this.code.length] = codeId;
   this.exampleHeader[this.exampleHeader.length] = exampleHeaderId;
+  this.HTMLDescription[this.HTMLDescription.length] = HTMLDescriptionId;
   this.resources[this.resources.length] = cssJsFilesId;
 };
 
@@ -88,10 +92,20 @@ aria.widget.SourceCode.prototype.make = function () {
   for (var i = 0; i < this.location.length; i++) {
     var sourceCodeNode = document.getElementById(this.location[i]);
     var nodeCode = document.getElementById(this.code[i]);
+    var exampleAmount = document.querySelectorAll('[id^="ex"]');
 
     sourceCodeNode.className = 'sourcecode';
     this.createCode(sourceCodeNode, nodeCode, 0, true);
 
+    if (this.HTMLDescription[i]) {
+      addOpenInCodePenForm(
+        i + exampleAmount,
+        this.HTMLDescription[i],
+        this.code[i],
+        this.resources[i]
+      );
+    }
+
     // Remove unnecessary `<br>` element.
     if (sourceCodeNode.innerHTML.startsWith('<br>')) {
       sourceCodeNode.innerHTML = sourceCodeNode.innerHTML.replace('<br>', '');
@@ -129,7 +143,7 @@ aria.widget.SourceCode.prototype.createCode = function (
     var openTag = '';
     var nodeNameStr = node.nodeName.toLowerCase();
 
-    openTag += '<br/>' + indentation(indentLevel) + '&lt;' + nodeNameStr;
+    openTag += '\n' + indentation(indentLevel) + '&lt;' + nodeNameStr;
 
     var wrapAttributes = node.attributes.length > 2;
 
@@ -143,7 +157,7 @@ aria.widget.SourceCode.prototype.createCode = function (
         node.attributes[attrPos].nodeName + '="' + attributeValue + '"';
 
       if (wrapAttributes && attrPos !== node.attributes.length - 1) {
-        openTag += '<br/>' + indentation(indentLevel);
+        openTag += '\n' + indentation(indentLevel);
         openTag += '&nbsp;'.repeat(nodeNameStr.length + 2);
       }
     }
@@ -173,7 +187,7 @@ aria.widget.SourceCode.prototype.createCode = function (
             indentation(indentLevel)
           );
 
-          sourceCodeNode.innerHTML += '<br/>' + textNodeContent;
+          sourceCodeNode.innerHTML += '\n' + textNodeContent;
         }
         break;
 
@@ -186,7 +200,7 @@ aria.widget.SourceCode.prototype.createCode = function (
             indentation(indentLevel)
           );
 
-          sourceCodeNode.innerHTML += '<br/>' + commentNodeContent;
+          sourceCodeNode.innerHTML += '\n' + commentNodeContent;
         }
         break;
     }
@@ -198,7 +212,7 @@ aria.widget.SourceCode.prototype.createCode = function (
     var closeTag = '&lt;/' + node.nodeName.toLowerCase() + '&gt;';
 
     if (node.childNodes.length > 0) {
-      sourceCodeNode.innerHTML += '<br/>' + indentation(indentLevel);
+      sourceCodeNode.innerHTML += '\n' + indentation(indentLevel);
     }
 
     sourceCodeNode.innerHTML += closeTag;
@@ -369,7 +383,7 @@ function addOpenInCodePenForm(
   exampleFilesId
 ) {
   var jsonInputId = 'codepen-data-ex-' + exampleIndex;
-  var buttonId = exampleCodeId + '-codepenbutton';
+  var buttonId = exampleHeaderId + '-codepenbutton';
 
   var form = document.createElement('form');
   form.setAttribute('action', 'https://codepen.io/pen/define');
diff --git a/content/shared/js/filterBySearch.js b/content/shared/js/filterBySearch.js
new file mode 100644
index 00000000..38b3e14a
--- /dev/null
+++ b/content/shared/js/filterBySearch.js
@@ -0,0 +1,175 @@
+'use strict';
+
+/**
+ * @namespace aria
+ */
+
+var aria = aria || {};
+
+/* ---------------------------------------------------------------- */
+/*                  ARIA Filter Namespace                           */
+/* ---------------------------------------------------------------- */
+
+aria.Filter = aria.Filter || {};
+
+/**
+ * Filters list items within a container based on a search term.
+ *
+ * @function
+ * @memberof aria.Filter
+ * @param {string} searchTerm - The term to filter the list items by.
+ * @param {string} containerSelector - The CSS selector for the container holding the list items.
+ * @param {string} className - The class name of the elements within each list item to be checked against the search term.
+ * @param {string} noResultsElementId - The id of the element to show when no results are found.
+ * @description
+ * This function filters the list items within a specified container by comparing the text content
+ * of elements with a given class name to the provided search term. List items that do not match
+ * the search term will be hidden.
+ */
+aria.Filter.filterListItems = function (
+  searchTerm,
+  containerSelector,
+  className,
+  noResultsElementId
+) {
+  const container = document.querySelector(containerSelector);
+  const listItems = container.getElementsByTagName('li');
+  const filter = searchTerm.toUpperCase();
+  let hasResults = false;
+  Array.from(listItems).forEach((element) => {
+    const isMatch = aria.Filter.applyFilterToElement(
+      element,
+      filter,
+      className
+    );
+    if (isMatch) {
+      hasResults = true;
+    }
+  });
+  aria.Filter.updateVisibility(noResultsElementId, !hasResults);
+};
+
+/**
+ * Updates the visibility of an element based on the search results.
+ *
+ * @function updateVisibility
+ * @param {string} id - The id of the element to update.
+ * @param {boolean} isVisible - True if the element should be visible, false otherwise.
+ */
+aria.Filter.updateVisibility = function (id, isVisible) {
+  const el = document.getElementById(id);
+  el.style.display = isVisible ? '' : 'none';
+  el.setAttribute('aria-hidden', String(!isVisible));
+};
+
+/**
+ * This function checks if the text content of the child element with the specified class name contains the filter term.
+ * If the text content matches the filter, th
+ *
+ * @function applyFilterToElement
+ * @param {HTMLElement} element - The element to which the visibility filter will be applied.
+ * @param {string} filter - The text filter term, already converted to uppercase.
+ * @param {string} className - The class name of the child element whose text content is checked against the filter.
+ * @returns {boolean} True if the filter term is found in the text value, false otherwise.
+ */
+aria.Filter.applyFilterToElement = function (element, filter, className) {
+  const targetElement = element.getElementsByClassName(className)[0];
+  if (targetElement) {
+    const textValue = targetElement.textContent || targetElement.innerText;
+    const isMatch = aria.Filter.isTextMatch(textValue, filter);
+    element.style.display = isMatch ? '' : 'none';
+    return isMatch;
+  }
+  return false;
+};
+
+/**
+ * Clears the input element and filters the list items based on the empty string.
+ * Sets focus back to the input element.
+ *
+ * @param {HTMLElement} inputElement - The input element to clear.
+ * @param {string} containerSelector - The CSS selector for the container holding the list items.
+ * @param {string} className - The class name of the elements within each list item to be checked against the search term.
+ * @param {string} noResultsElementId - The id of the element to show when no results are found.
+ */
+aria.Filter.clearInput = function (
+  inputElement,
+  containerSelector,
+  className,
+  noResultsElementId
+) {
+  inputElement.value = '';
+  aria.Filter.filterListItems(
+    '',
+    containerSelector,
+    className,
+    noResultsElementId
+  );
+  inputElement.focus();
+};
+
+/**
+ * Determines if the provided text value contains the filter term, ignoring case.
+ *
+ * @function isTextMatch
+ * @param {string} textValue - The text to search within.
+ * @param {string} filter - The term to search for, which should already be in uppercase.
+ * @returns {boolean} True if the filter term is found in the text value, false otherwise.
+ */
+aria.Filter.isTextMatch = function (textValue, filter) {
+  return textValue.toUpperCase().indexOf(filter) > -1;
+};
+
+/**
+ * Handles the click event for a pattern results view button.
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ */
+aria.Filter.onViewButtonClicked = function (selectedViewButton) {
+  aria.Filter.deactivateAllViewButtons();
+  aria.Filter.updateActiveViewButton(selectedViewButton);
+
+  const newViewClassName = aria.Filter.getNewViewClassName(selectedViewButton);
+  aria.Filter.setResultsViewClass(newViewClassName);
+};
+
+/**
+ * Deactivates all view buttons by setting aria-pressed attribute and removing 'active' class
+ */
+aria.Filter.deactivateAllViewButtons = function () {
+  const buttons = document.querySelectorAll('.view-toggle button');
+  buttons.forEach((btn) => {
+    btn.setAttribute('aria-pressed', 'false');
+    btn.classList.remove('active');
+  });
+};
+
+/**
+ * Determines the new view class name based on the selected view button.
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ * @returns {string} The new view class name.
+ */
+aria.Filter.getNewViewClassName = function (selectedViewButton) {
+  return selectedViewButton.id === 'listViewButton' ? 'list' : 'tiles';
+};
+
+/**
+ * Updates the active view button by setting aria-pressed attribute and adding 'active' class
+ *
+ * @param {HTMLElement} selectedViewButton - The view button that was clicked.
+ */
+aria.Filter.updateActiveViewButton = function (selectedViewButton) {
+  selectedViewButton.setAttribute('aria-pressed', 'true');
+  selectedViewButton.classList.add('active');
+};
+
+/**
+ * Sets the class name of the patterns result container to either 'list' or 'tiles' based on the selected view button
+ *
+ * @param {string} viewClass - The class name of the patterns result container.
+ */
+aria.Filter.setResultsViewClass = function (viewClass) {
+  const patternsContainer = document.getElementById('patterns');
+  patternsContainer.className = viewClass;
+};
diff --git a/content/shared/js/highlight.pack.js b/content/shared/js/highlight.pack.js
index 21b82fb6..07614664 100644
--- a/content/shared/js/highlight.pack.js
+++ b/content/shared/js/highlight.pack.js
@@ -1,2 +1,337 @@
-/*! highlight.js v9.9.0 | BSD3 License | git.io/hljslicense */
-!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/[&<>]/gm,function(e){return I[e]})}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function i(e){return k.test(e)}function a(e){var n,t,r,a,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return R(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(a=o[n],i(a)||R(a))return a}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,i){for(var a=e.firstChild;a;a=a.nextSibling)3===a.nodeType?i+=a.nodeValue.length:1===a.nodeType&&(n.push({event:"start",offset:i,node:a}),i=r(a,i),t(a).match(/br|hr|img|input/)||n.push({event:"stop",offset:i,node:a}));return i}(e,0),n}function c(e,r,i){function a(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}l+="<"+t(e)+w.map.call(e.attributes,r).join("")+">"}function u(e){l+="</"+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=a();if(l+=n(i.substring(s,g[0].offset)),s=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=a();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(i.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(i,a){if(!i.compiled){if(i.compiled=!0,i.k=i.k||i.bK,i.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof i.k?c("keyword",i.k):E(i.k).forEach(function(e){c(e,i.k[e])}),i.k=u}i.lR=t(i.l||/\w+/,!0),a&&(i.bK&&(i.b="\\b("+i.bK.split(" ").join("|")+")\\b"),i.b||(i.b=/\B|\b/),i.bR=t(i.b),i.e||i.eW||(i.e=/\B|\b/),i.e&&(i.eR=t(i.e)),i.tE=n(i.e)||"",i.eW&&a.tE&&(i.tE+=(i.e?"|":"")+a.tE)),i.i&&(i.iR=t(i.i)),null==i.r&&(i.r=1),i.c||(i.c=[]);var s=[];i.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"===e?i:e)}),i.c=s,i.c.forEach(function(e){r(e,i)}),i.starts&&r(i.starts,a);var l=i.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([i.tE,i.i]).map(n).filter(Boolean);i.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,i,a){function o(e,n){var t,i;for(t=0,i=n.c.length;i>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!i&&r(n.iR,e)}function g(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function h(e,n,t,r){var i=r?"":y.classPrefix,a='<span class="'+i,o=t?"":C;return a+=e+'">',a+n+o}function p(){var e,t,r,i;if(!E.k)return n(B);for(i="",t=0,E.lR.lastIndex=0,r=E.lR.exec(B);r;)i+=n(B.substring(t,r.index)),e=g(E,r),e?(M+=e[1],i+=h(e[0],n(r[0]))):i+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(B);return i+n(B.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!x[E.sL])return n(B);var t=e?l(E.sL,B,!0,L[E.sL]):f(B,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(L[E.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){k+=null!=E.sL?d():p(),B=""}function v(e){k+=e.cN?h(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(B+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?B+=n:(t.eB&&(B+=n),b(),t.rB||t.eB||(B=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var i=E;i.skip?B+=n:(i.rE||i.eE||(B+=n),b(),i.eE&&(B=n));do E.cN&&(k+=C),E.skip||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),i.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return B+=n,n.length||1}var N=R(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var w,E=a||N,L={},k="";for(w=E;w!==N;w=w.parent)w.cN&&(k=h(w.cN,"",!0)+k);var B="",M=0;try{for(var I,j,O=0;;){if(E.t.lastIndex=O,I=E.t.exec(t),!I)break;j=m(t.substring(O,I.index),I[0]),O=I.index+j}for(m(t.substr(O)),w=E;w.parent;w=w.parent)w.cN&&(k+=C);return{r:M,value:k,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function f(e,t){t=t||y.languages||E(x);var r={r:0,value:n(e)},i=r;return t.filter(R).forEach(function(n){var t=l(n,e,!1);t.language=n,t.r>i.r&&(i=t),t.r>r.r&&(i=r,r=t)}),i.language&&(r.second_best=i),r}function g(e){return y.tabReplace||y.useBR?e.replace(M,function(e,n){return y.useBR&&"\n"===e?"<br>":y.tabReplace?n.replace(/\t/g,y.tabReplace):void 0}):e}function h(e,n,t){var r=n?L[n]:t,i=[e.trim()];return e.match(/\bhljs\b/)||i.push("hljs"),-1===e.indexOf(r)&&i.push(r),i.join(" ").trim()}function p(e){var n,t,r,o,s,p=a(e);i(p)||(y.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,s=n.textContent,r=p?l(p,s,!0):f(s),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),s)),r.value=g(r.value),e.innerHTML=r.value,e.className=h(e.className,p,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function d(e){y=o(y,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");w.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function N(){return E(x)}function R(e){return e=(e||"").toLowerCase(),x[e]||x[L[e]]}var w=[],E=Object.keys,x={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="</span>",y={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},I={"&":"&amp;","<":"&lt;",">":"&gt;"};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=R,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var i=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return i.c.push(e.PWM),i.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),i},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});
\ No newline at end of file
+/*!
+  Highlight.js v11.9.0 (git: b7ec4bfafc)
+  (c) 2006-2023 undefined and other contributors
+  License: BSD-3-Clause
+ */
+var hljs=function(){"use strict";function e(t){
+return t instanceof Map?t.clear=t.delete=t.set=()=>{
+throw Error("map is read-only")}:t instanceof Set&&(t.add=t.clear=t.delete=()=>{
+throw Error("set is read-only")
+}),Object.freeze(t),Object.getOwnPropertyNames(t).forEach((n=>{
+const i=t[n],s=typeof i;"object"!==s&&"function"!==s||Object.isFrozen(i)||e(i)
+})),t}class t{constructor(e){
+void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+ignoreMatch(){this.isMatchIgnored=!0}}function n(e){
+return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+}function i(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
+;return t.forEach((e=>{for(const t in e)n[t]=e[t]})),n}const s=e=>!!e.scope
+;class o{constructor(e,t){
+this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){
+this.buffer+=n(e)}openNode(e){if(!s(e))return;const t=((e,{prefix:t})=>{
+if(e.startsWith("language:"))return e.replace("language:","language-")
+;if(e.includes(".")){const n=e.split(".")
+;return[`${t}${n.shift()}`,...n.map(((e,t)=>`${e}${"_".repeat(t+1)}`))].join(" ")
+}return`${t}${e}`})(e.scope,{prefix:this.classPrefix});this.span(t)}
+closeNode(e){s(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+this.buffer+=`<span class="${e}">`}}const r=(e={})=>{const t={children:[]}
+;return Object.assign(t,e),t};class a{constructor(){
+this.rootNode=r(),this.stack=[this.rootNode]}get top(){
+return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+this.top.children.push(e)}openNode(e){const t=r({scope:e})
+;this.add(t),this.stack.push(t)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){
+return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),
+t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){
+"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+a._collapse(e)})))}}class c extends a{constructor(e){super(),this.options=e}
+addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+this.closeNode()}__addSublanguage(e,t){const n=e.root
+;t&&(n.scope="language:"+t),this.add(n)}toHTML(){
+return new o(this,this.options).value()}finalize(){
+return this.closeAllNodes(),!0}}function l(e){
+return e?"string"==typeof e?e:e.source:null}function g(e){return h("(?=",e,")")}
+function u(e){return h("(?:",e,")*")}function d(e){return h("(?:",e,")?")}
+function h(...e){return e.map((e=>l(e))).join("")}function f(...e){const t=(e=>{
+const t=e[e.length-1]
+;return"object"==typeof t&&t.constructor===Object?(e.splice(e.length-1,1),t):{}
+})(e);return"("+(t.capture?"":"?:")+e.map((e=>l(e))).join("|")+")"}
+function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+const b=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+;function m(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
+;let i=l(e),s="";for(;i.length>0;){const e=b.exec(i);if(!e){s+=i;break}
+s+=i.substring(0,e.index),
+i=i.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?s+="\\"+(Number(e[1])+t):(s+=e[0],
+"("===e[0]&&n++)}return s})).map((e=>`(${e})`)).join(t)}
+const E="[a-zA-Z]\\w*",x="[a-zA-Z_]\\w*",w="\\b\\d+(\\.\\d+)?",y="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",_="\\b(0b[01]+)",O={
+begin:"\\\\[\\s\\S]",relevance:0},v={scope:"string",begin:"'",end:"'",
+illegal:"\\n",contains:[O]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
+contains:[O]},N=(e,t,n={})=>{const s=i({scope:"comment",begin:e,end:t,
+contains:[]},n);s.contains.push({scope:"doctag",
+begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+;const o=f("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+;return s.contains.push({begin:h(/[ ]+/,"(",o,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),s
+},S=N("//","$"),M=N("/\\*","\\*/"),R=N("#","$");var j=Object.freeze({
+__proto__:null,APOS_STRING_MODE:v,BACKSLASH_ESCAPE:O,BINARY_NUMBER_MODE:{
+scope:"number",begin:_,relevance:0},BINARY_NUMBER_RE:_,COMMENT:N,
+C_BLOCK_COMMENT_MODE:M,C_LINE_COMMENT_MODE:S,C_NUMBER_MODE:{scope:"number",
+begin:y,relevance:0},C_NUMBER_RE:y,END_SAME_AS_BEGIN:e=>Object.assign(e,{
+"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{
+t.data._beginMatch!==e[1]&&t.ignoreMatch()}}),HASH_COMMENT_MODE:R,IDENT_RE:E,
+MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+x,relevance:0},
+NUMBER_MODE:{scope:"number",begin:w,relevance:0},NUMBER_RE:w,
+PHRASAL_WORDS_MODE:{
+begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+},QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
+end:/\/[gimuy]*/,contains:[O,{begin:/\[/,end:/\]/,relevance:0,contains:[O]}]},
+RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+SHEBANG:(e={})=>{const t=/^#![ ]*\//
+;return e.binary&&(e.begin=h(t,/.*\b/,e.binary,/\b.*/)),i({scope:"meta",begin:t,
+end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},
+TITLE_MODE:{scope:"title",begin:E,relevance:0},UNDERSCORE_IDENT_RE:x,
+UNDERSCORE_TITLE_MODE:{scope:"title",begin:x,relevance:0}});function A(e,t){
+"."===e.input[e.index-1]&&t.ignoreMatch()}function I(e,t){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function T(e,t){
+t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+e.__beforeBegin=A,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+void 0===e.relevance&&(e.relevance=0))}function L(e,t){
+Array.isArray(e.illegal)&&(e.illegal=f(...e.illegal))}function B(e,t){
+if(e.match){
+if(e.begin||e.end)throw Error("begin & end are not supported with match")
+;e.begin=e.match,delete e.match}}function P(e,t){
+void 0===e.relevance&&(e.relevance=1)}const D=(e,t)=>{if(!e.beforeMatch)return
+;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+;const n=Object.assign({},e);Object.keys(e).forEach((t=>{delete e[t]
+})),e.keywords=n.keywords,e.begin=h(n.beforeMatch,g(n.begin)),e.starts={
+relevance:0,contains:[Object.assign(n,{endsParent:!0})]
+},e.relevance=0,delete n.beforeMatch
+},H=["of","and","for","in","not","or","if","then","parent","list","value"],C="keyword"
+;function $(e,t,n=C){const i=Object.create(null)
+;return"string"==typeof e?s(n,e.split(" ")):Array.isArray(e)?s(n,e):Object.keys(e).forEach((n=>{
+Object.assign(i,$(e[n],t,n))})),i;function s(e,n){
+t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((t=>{const n=t.split("|")
+;i[n[0]]=[e,U(n[0],n[1])]}))}}function U(e,t){
+return t?Number(t):(e=>H.includes(e.toLowerCase()))(e)?0:1}const z={},W=e=>{
+console.error(e)},X=(e,...t)=>{console.log("WARN: "+e,...t)},G=(e,t)=>{
+z[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),z[`${e}/${t}`]=!0)
+},K=Error();function F(e,t,{key:n}){let i=0;const s=e[n],o={},r={}
+;for(let e=1;e<=t.length;e++)r[e+i]=s[e],o[e+i]=!0,i+=p(t[e-1])
+;e[n]=r,e[n]._emit=o,e[n]._multi=!0}function Z(e){(e=>{
+e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+}),(e=>{if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw W("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+K
+;if("object"!=typeof e.beginScope||null===e.beginScope)throw W("beginScope must be object"),
+K;F(e,e.begin,{key:"beginScope"}),e.begin=m(e.begin,{joinWith:""})}})(e),(e=>{
+if(Array.isArray(e.end)){
+if(e.skip||e.excludeEnd||e.returnEnd)throw W("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+K
+;if("object"!=typeof e.endScope||null===e.endScope)throw W("endScope must be object"),
+K;F(e,e.end,{key:"endScope"}),e.end=m(e.end,{joinWith:""})}})(e)}function V(e){
+function t(t,n){
+return RegExp(l(t),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(n?"g":""))
+}class n{constructor(){
+this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+addRule(e,t){
+t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),
+this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+;const e=this.regexes.map((e=>e[1]));this.matcherRe=t(m(e,{joinWith:"|"
+}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+;const t=this.matcherRe.exec(e);if(!t)return null
+;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),i=this.matchIndexes[n]
+;return t.splice(0,n),Object.assign(t,i)}}class s{constructor(){
+this.rules=[],this.multiRegexes=[],
+this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n
+;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),
+t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){
+return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){
+this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){
+const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex
+;let n=t.exec(e)
+;if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{
+const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}
+return n&&(this.regexIndex+=n.position+1,
+this.regexIndex===this.count&&this.considerAll()),n}}
+if(e.compilerExtensions||(e.compilerExtensions=[]),
+e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+;return e.classNameAliases=i(e.classNameAliases||{}),function n(o,r){const a=o
+;if(o.isCompiled)return a
+;[I,B,Z,D].forEach((e=>e(o,r))),e.compilerExtensions.forEach((e=>e(o,r))),
+o.__beforeBegin=null,[T,L,P].forEach((e=>e(o,r))),o.isCompiled=!0;let c=null
+;return"object"==typeof o.keywords&&o.keywords.$pattern&&(o.keywords=Object.assign({},o.keywords),
+c=o.keywords.$pattern,
+delete o.keywords.$pattern),c=c||/\w+/,o.keywords&&(o.keywords=$(o.keywords,e.case_insensitive)),
+a.keywordPatternRe=t(c,!0),
+r&&(o.begin||(o.begin=/\B|\b/),a.beginRe=t(a.begin),o.end||o.endsWithParent||(o.end=/\B|\b/),
+o.end&&(a.endRe=t(a.end)),
+a.terminatorEnd=l(a.end)||"",o.endsWithParent&&r.terminatorEnd&&(a.terminatorEnd+=(o.end?"|":"")+r.terminatorEnd)),
+o.illegal&&(a.illegalRe=t(o.illegal)),
+o.contains||(o.contains=[]),o.contains=[].concat(...o.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((t=>i(e,{
+variants:null},t)))),e.cachedVariants?e.cachedVariants:q(e)?i(e,{
+starts:e.starts?i(e.starts):null
+}):Object.isFrozen(e)?i(e):e))("self"===e?o:e)))),o.contains.forEach((e=>{n(e,a)
+})),o.starts&&n(o.starts,r),a.matcher=(e=>{const t=new s
+;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"
+}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"
+}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t})(a),a}(e)}function q(e){
+return!!e&&(e.endsWithParent||q(e.starts))}class J extends Error{
+constructor(e,t){super(e),this.name="HTMLInjectionError",this.html=t}}
+const Y=n,Q=i,ee=Symbol("nomatch"),te=n=>{
+const i=Object.create(null),s=Object.create(null),o=[];let r=!0
+;const a="Could not find the language '{}', did you forget to load/include a language module?",l={
+disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+cssSelector:"pre code",languages:null,__emitter:c};function b(e){
+return p.noHighlightRe.test(e)}function m(e,t,n){let i="",s=""
+;"object"==typeof t?(i=e,
+n=t.ignoreIllegals,s=t.language):(G("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+G("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+s=e,i=t),void 0===n&&(n=!0);const o={code:i,language:s};N("before:highlight",o)
+;const r=o.result?o.result:E(o.language,o.code,n)
+;return r.code=o.code,N("after:highlight",r),r}function E(e,n,s,o){
+const c=Object.create(null);function l(){if(!N.keywords)return void M.addText(R)
+;let e=0;N.keywordPatternRe.lastIndex=0;let t=N.keywordPatternRe.exec(R),n=""
+;for(;t;){n+=R.substring(e,t.index)
+;const s=_.case_insensitive?t[0].toLowerCase():t[0],o=(i=s,N.keywords[i]);if(o){
+const[e,i]=o
+;if(M.addText(n),n="",c[s]=(c[s]||0)+1,c[s]<=7&&(j+=i),e.startsWith("_"))n+=t[0];else{
+const n=_.classNameAliases[e]||e;u(t[0],n)}}else n+=t[0]
+;e=N.keywordPatternRe.lastIndex,t=N.keywordPatternRe.exec(R)}var i
+;n+=R.substring(e),M.addText(n)}function g(){null!=N.subLanguage?(()=>{
+if(""===R)return;let e=null;if("string"==typeof N.subLanguage){
+if(!i[N.subLanguage])return void M.addText(R)
+;e=E(N.subLanguage,R,!0,S[N.subLanguage]),S[N.subLanguage]=e._top
+}else e=x(R,N.subLanguage.length?N.subLanguage:null)
+;N.relevance>0&&(j+=e.relevance),M.__addSublanguage(e._emitter,e.language)
+})():l(),R=""}function u(e,t){
+""!==e&&(M.startScope(t),M.addText(e),M.endScope())}function d(e,t){let n=1
+;const i=t.length-1;for(;n<=i;){if(!e._emit[n]){n++;continue}
+const i=_.classNameAliases[e[n]]||e[n],s=t[n];i?u(s,i):(R=s,l(),R=""),n++}}
+function h(e,t){
+return e.scope&&"string"==typeof e.scope&&M.openNode(_.classNameAliases[e.scope]||e.scope),
+e.beginScope&&(e.beginScope._wrap?(u(R,_.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+R=""):e.beginScope._multi&&(d(e.beginScope,t),R="")),N=Object.create(e,{parent:{
+value:N}}),N}function f(e,n,i){let s=((e,t)=>{const n=e&&e.exec(t)
+;return n&&0===n.index})(e.endRe,i);if(s){if(e["on:end"]){const i=new t(e)
+;e["on:end"](n,i),i.isMatchIgnored&&(s=!1)}if(s){
+for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+if(e.endsWithParent)return f(e.parent,n,i)}function b(e){
+return 0===N.matcher.regexIndex?(R+=e[0],1):(T=!0,0)}function m(e){
+const t=e[0],i=n.substring(e.index),s=f(N,e,i);if(!s)return ee;const o=N
+;N.endScope&&N.endScope._wrap?(g(),
+u(t,N.endScope._wrap)):N.endScope&&N.endScope._multi?(g(),
+d(N.endScope,e)):o.skip?R+=t:(o.returnEnd||o.excludeEnd||(R+=t),
+g(),o.excludeEnd&&(R=t));do{
+N.scope&&M.closeNode(),N.skip||N.subLanguage||(j+=N.relevance),N=N.parent
+}while(N!==s.parent);return s.starts&&h(s.starts,e),o.returnEnd?0:t.length}
+let w={};function y(i,o){const a=o&&o[0];if(R+=i,null==a)return g(),0
+;if("begin"===w.type&&"end"===o.type&&w.index===o.index&&""===a){
+if(R+=n.slice(o.index,o.index+1),!r){const t=Error(`0 width match regex (${e})`)
+;throw t.languageName=e,t.badRule=w.rule,t}return 1}
+if(w=o,"begin"===o.type)return(e=>{
+const n=e[0],i=e.rule,s=new t(i),o=[i.__beforeBegin,i["on:begin"]]
+;for(const t of o)if(t&&(t(e,s),s.isMatchIgnored))return b(n)
+;return i.skip?R+=n:(i.excludeBegin&&(R+=n),
+g(),i.returnBegin||i.excludeBegin||(R=n)),h(i,e),i.returnBegin?0:n.length})(o)
+;if("illegal"===o.type&&!s){
+const e=Error('Illegal lexeme "'+a+'" for mode "'+(N.scope||"<unnamed>")+'"')
+;throw e.mode=N,e}if("end"===o.type){const e=m(o);if(e!==ee)return e}
+if("illegal"===o.type&&""===a)return 1
+;if(I>1e5&&I>3*o.index)throw Error("potential infinite loop, way more iterations than matches")
+;return R+=a,a.length}const _=O(e)
+;if(!_)throw W(a.replace("{}",e)),Error('Unknown language: "'+e+'"')
+;const v=V(_);let k="",N=o||v;const S={},M=new p.__emitter(p);(()=>{const e=[]
+;for(let t=N;t!==_;t=t.parent)t.scope&&e.unshift(t.scope)
+;e.forEach((e=>M.openNode(e)))})();let R="",j=0,A=0,I=0,T=!1;try{
+if(_.__emitTokens)_.__emitTokens(n,M);else{for(N.matcher.considerAll();;){
+I++,T?T=!1:N.matcher.considerAll(),N.matcher.lastIndex=A
+;const e=N.matcher.exec(n);if(!e)break;const t=y(n.substring(A,e.index),e)
+;A=e.index+t}y(n.substring(A))}return M.finalize(),k=M.toHTML(),{language:e,
+value:k,relevance:j,illegal:!1,_emitter:M,_top:N}}catch(t){
+if(t.message&&t.message.includes("Illegal"))return{language:e,value:Y(n),
+illegal:!0,relevance:0,_illegalBy:{message:t.message,index:A,
+context:n.slice(A-100,A+100),mode:t.mode,resultSoFar:k},_emitter:M};if(r)return{
+language:e,value:Y(n),illegal:!1,relevance:0,errorRaised:t,_emitter:M,_top:N}
+;throw t}}function x(e,t){t=t||p.languages||Object.keys(i);const n=(e=>{
+const t={value:Y(e),illegal:!1,relevance:0,_top:l,_emitter:new p.__emitter(p)}
+;return t._emitter.addText(e),t})(e),s=t.filter(O).filter(k).map((t=>E(t,e,!1)))
+;s.unshift(n);const o=s.sort(((e,t)=>{
+if(e.relevance!==t.relevance)return t.relevance-e.relevance
+;if(e.language&&t.language){if(O(e.language).supersetOf===t.language)return 1
+;if(O(t.language).supersetOf===e.language)return-1}return 0})),[r,a]=o,c=r
+;return c.secondBest=a,c}function w(e){let t=null;const n=(e=>{
+let t=e.className+" ";t+=e.parentNode?e.parentNode.className:""
+;const n=p.languageDetectRe.exec(t);if(n){const t=O(n[1])
+;return t||(X(a.replace("{}",n[1])),
+X("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}
+return t.split(/\s+/).find((e=>b(e)||O(e)))})(e);if(b(n))return
+;if(N("before:highlightElement",{el:e,language:n
+}),e.dataset.highlighted)return void console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",e)
+;if(e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
+console.warn("The element with unescaped HTML:"),
+console.warn(e)),p.throwUnescapedHTML))throw new J("One of your code blocks includes unescaped HTML.",e.innerHTML)
+;t=e;const i=t.textContent,o=n?m(i,{language:n,ignoreIllegals:!0}):x(i)
+;e.innerHTML=o.value,e.dataset.highlighted="yes",((e,t,n)=>{const i=t&&s[t]||n
+;e.classList.add("hljs"),e.classList.add("language-"+i)
+})(e,n,o.language),e.result={language:o.language,re:o.relevance,
+relevance:o.relevance},o.secondBest&&(e.secondBest={
+language:o.secondBest.language,relevance:o.secondBest.relevance
+}),N("after:highlightElement",{el:e,result:o,text:i})}let y=!1;function _(){
+"loading"!==document.readyState?document.querySelectorAll(p.cssSelector).forEach(w):y=!0
+}function O(e){return e=(e||"").toLowerCase(),i[e]||i[s[e]]}
+function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+s[e.toLowerCase()]=t}))}function k(e){const t=O(e)
+;return t&&!t.disableAutodetect}function N(e,t){const n=e;o.forEach((e=>{
+e[n]&&e[n](t)}))}
+"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(()=>{
+y&&_()}),!1),Object.assign(n,{highlight:m,highlightAuto:x,highlightAll:_,
+highlightElement:w,
+highlightBlock:e=>(G("10.7.0","highlightBlock will be removed entirely in v12.0"),
+G("10.7.0","Please use highlightElement now."),w(e)),configure:e=>{p=Q(p,e)},
+initHighlighting:()=>{
+_(),G("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+initHighlightingOnLoad:()=>{
+_(),G("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+},registerLanguage:(e,t)=>{let s=null;try{s=t(n)}catch(t){
+if(W("Language definition for '{}' could not be registered.".replace("{}",e)),
+!r)throw t;W(t),s=l}
+s.name||(s.name=e),i[e]=s,s.rawDefinition=t.bind(null,n),s.aliases&&v(s.aliases,{
+languageName:e})},unregisterLanguage:e=>{delete i[e]
+;for(const t of Object.keys(s))s[t]===e&&delete s[t]},
+listLanguages:()=>Object.keys(i),getLanguage:O,registerAliases:v,
+autoDetection:k,inherit:Q,addPlugin:e=>{(e=>{
+e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{
+e["before:highlightBlock"](Object.assign({block:t.el},t))
+}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{
+e["after:highlightBlock"](Object.assign({block:t.el},t))})})(e),o.push(e)},
+removePlugin:e=>{const t=o.indexOf(e);-1!==t&&o.splice(t,1)}}),n.debugMode=()=>{
+r=!1},n.safeMode=()=>{r=!0},n.versionString="11.9.0",n.regex={concat:h,
+lookahead:g,either:f,optional:d,anyNumberOfTimes:u}
+;for(const t in j)"object"==typeof j[t]&&e(j[t]);return Object.assign(n,j),n
+},ne=te({});return ne.newInstance=()=>te({}),ne}()
+;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);/*! `xml` grammar compiled for Highlight.js 11.9.0 */
+(()=>{var e=(()=>{"use strict";return e=>{
+const a=e.regex,n=a.concat(/[\p{L}_]/u,a.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),s={
+className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},t={begin:/\s/,
+contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]
+},i=e.inherit(t,{begin:/\(/,end:/\)/}),c=e.inherit(e.APOS_STRING_MODE,{
+className:"string"}),l=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),r={
+endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",
+begin:/[\p{L}0-9._:-]+/u,relevance:0},{begin:/=\s*/,relevance:0,contains:[{
+className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[s]},{
+begin:/'/,end:/'/,contains:[s]},{begin:/[^\s"'=<>`]+/}]}]}]};return{
+name:"HTML, XML",
+aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],
+case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,
+end:/>/,relevance:10,contains:[t,l,c,i,{begin:/\[/,end:/\]/,contains:[{
+className:"meta",begin:/<![a-z]/,end:/>/,contains:[t,i,l,c]}]}]
+},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,
+relevance:10},s,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,
+relevance:10,contains:[l]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",
+begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[r],starts:{
+end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",
+begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[r],starts:{
+end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{
+className:"tag",begin:/<>|<\/>/},{className:"tag",
+begin:a.concat(/</,a.lookahead(a.concat(n,a.either(/\/>/,/>/,/\s/)))),
+end:/\/?>/,contains:[{className:"name",begin:n,relevance:0,starts:r}]},{
+className:"tag",begin:a.concat(/<\//,a.lookahead(a.concat(n,/>/))),contains:[{
+className:"name",begin:n,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}}
+})();hljs.registerLanguage("xml",e)})();
\ No newline at end of file
diff --git a/content/shared/js/skipto.js b/content/shared/js/skipto.js
index 29134ff4..d65ab3c7 100644
--- a/content/shared/js/skipto.js
+++ b/content/shared/js/skipto.js
@@ -1,117 +1,118 @@
-/* ========================================================================
- * Version: 5.1.6
- * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
- * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
- * All rights reserved.
- * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
- * Code: https://github.com/skipto-landmarks-headings/page-script-5
- * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
- * ======================================================================== */
-
-(function () {
-  'use strict';
-
-  /*
-  *   debug.js
-  *
-  *   Usage
-  *     import DebugLogging from './debug.js';
-  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
-  *     ...
-  *     if (debug.flag) debug.log('myMessage');
-  *
-  *   Notes
-  *     new DebugLogging() - calling the constructor with no arguments results
-  *                   in debug.flag set to false and debug.label set to 'debug';
-  *                   constructor accepts 0, 1 or 2 arguments in any order
-  *                   @param flag [optional] {boolean} - sets debug.flag
-  *                   @param label [optional] {string} - sets debug.label
-  *   Properties
-  *     debug.flag    {boolean} allows you to switch debug logging on or off;
-  *                   default value is false
-  *     debug.label   {string} rendered as a prefix to each log message;
-  *                   default value is 'debug'
-  *   Methods
-  *     debug.log        calls console.log with label prefix and message
-  *                      @param message {object} - console.log calls toString()
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.tag        outputs tagName and textContent of DOM element
-  *                      @param node {DOM node reference} - usually an HTMLElement
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.separator  outputs only debug.label and a series of hyphens
-  *                      @param spaceAbove [optional] {boolean}
-  */
-
-  class DebugLogging {
-    constructor (...args) {
-      // Default values for cases where fewer than two arguments are provided
-      this._flag = false;
-      this._label = 'debug';
-
-      // The constructor may be called with zero, one or two arguments. If two
-      // arguments, they can be in any order: one is assumed to be the boolean
-      // value for '_flag' and the other one the string value for '_label'.
-      for (const [index, arg] of args.entries()) {
-        if (index < 2) {
-          switch (typeof arg) {
-            case 'boolean':
-              this._flag = arg;
-              break;
-            case 'string':
-              this._label = arg;
-              break;
-          }
-        }
-      }
-    }
-
-    get flag () { return this._flag; }
-
-    set flag (value) {
-      if (typeof value === 'boolean') {
-        this._flag = value;
-      }
-    }
-
-    get label () { return this._label; }
-
-    set label (value) {
-      if (typeof value === 'string') {
-        this._label = value;
-      }
-    }
-
-    log (message, spaceAbove) {
-      const newline = spaceAbove ? '\n' : '';
-      console.log(`${newline}[${this._label}] ${message}`);
-    }
-
-    tag (node, spaceAbove) {
-      if (node && node.tagName) {
-        const text = node.textContent.trim().replace(/\s+/g, ' ');
-        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
-      }
-    }
-
-    separator (spaceAbove) {
-      this.log('-----------------------------', spaceAbove);
-    }
-
-  }
-
+/* ========================================================================
+ * Version: 5.3.2
+ * Copyright (c) 2022, 2023, 2024 Jon Gunderson; Licensed BSD
+ * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
+ * All rights reserved.
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * CDN: https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js
+ * Documentation: https://skipto-landmarks-headings.github.io/page-script-5
+ * Code: https://github.com/skipto-landmarks-headings/page-script-5
+ * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
+ * ======================================================================== */
+
+(function () {
+  'use strict';
+
+  /*
+  *   debug.js
+  *
+  *   Usage
+  *     import DebugLogging from './debug.js';
+  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
+  *     ...
+  *     if (debug.flag) debug.log('myMessage');
+  *
+  *   Notes
+  *     new DebugLogging() - calling the constructor with no arguments results
+  *                   in debug.flag set to false and debug.label set to 'debug';
+  *                   constructor accepts 0, 1 or 2 arguments in any order
+  *                   @param flag [optional] {boolean} - sets debug.flag
+  *                   @param label [optional] {string} - sets debug.label
+  *   Properties
+  *     debug.flag    {boolean} allows you to switch debug logging on or off;
+  *                   default value is false
+  *     debug.label   {string} rendered as a prefix to each log message;
+  *                   default value is 'debug'
+  *   Methods
+  *     debug.log        calls console.log with label prefix and message
+  *                      @param message {object} - console.log calls toString()
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.tag        outputs tagName and textContent of DOM element
+  *                      @param node {DOM node reference} - usually an HTMLElement
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.separator  outputs only debug.label and a series of hyphens
+  *                      @param spaceAbove [optional] {boolean}
+  */
+
+  class DebugLogging {
+    constructor (...args) {
+      // Default values for cases where fewer than two arguments are provided
+      this._flag = false;
+      this._label = 'debug';
+
+      // The constructor may be called with zero, one or two arguments. If two
+      // arguments, they can be in any order: one is assumed to be the boolean
+      // value for '_flag' and the other one the string value for '_label'.
+      for (const [index, arg] of args.entries()) {
+        if (index < 2) {
+          switch (typeof arg) {
+            case 'boolean':
+              this._flag = arg;
+              break;
+            case 'string':
+              this._label = arg;
+              break;
+          }
+        }
+      }
+    }
+
+    get flag () { return this._flag; }
+
+    set flag (value) {
+      if (typeof value === 'boolean') {
+        this._flag = value;
+      }
+    }
+
+    get label () { return this._label; }
+
+    set label (value) {
+      if (typeof value === 'string') {
+        this._label = value;
+      }
+    }
+
+    log (message, spaceAbove) {
+      const newline = spaceAbove ? '\n' : '';
+      console.log(`${newline}[${this._label}] ${message}`);
+    }
+
+    tag (node, spaceAbove) {
+      if (node && node.tagName) {
+        const text = node.textContent.trim().replace(/\s+/g, ' ');
+        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
+      }
+    }
+
+    separator (spaceAbove) {
+      this.log('-----------------------------', spaceAbove);
+    }
+
+  }
+
   /* style.js */
 
   /* Constants */
-  const debug$5 = new DebugLogging('style', false);
-  debug$5.flag = false;
+  const debug$6 = new DebugLogging('style', false);
+  debug$6.flag = false;
 
   const styleTemplate = document.createElement('template');
   styleTemplate.innerHTML = `
@@ -122,16 +123,19 @@ $skipToId.popup {
   transition: top 0.35s ease;
 }
 
-$skipToId button .text {
+$skipToId button .skipto-text {
   padding: 6px 8px 6px 8px;
   display: inline-block;
 }
 
-$skipToId button img {
-  height: 24px;
-  padding: 2px 4px 2px 4px;
+$skipToId button .skipto-small {
+  padding: 6px 8px 6px 8px;
+  display: none;
+}
+
+$skipToId button .skipto-medium {
+  padding: 6px 8px 6px 8px;
   display: none;
-  background-color: #e8e9ea;
 }
 
 $skipToId,
@@ -165,18 +169,54 @@ $skipToId button {
   z-index: $zIndex !important;
 }
 
-@media screen and (max-width: $mediaBreakPointpx) {
-  $skipToId button img {
-    display: block;
+@media screen and (max-width: $smallBreakPointpx) {
+  $skipToId:not(.popup) button .skipto-small {
+    transition: top 0.35s ease;
+    display: inline-block;
   }
 
-  $skipToId button {
-    border-color: #e8e9ea;
+  $skipToId:not(.popup) button .skipto-text,
+  $skipToId:not(.popup) button .skipto-medium {
+    transition: top 0.35s ease;
+    display: none;
   }
 
-  $skipToId button .text {
+  $skipToId:not(.popup).focus button .skipto-text {
+    transition: top 0.35s ease;
+    display: inline-block;
+  }
+
+  $skipToId:not(.popup).focus button .skipto-small,
+  $skipToId:not(.popup).focus button .skipto-medium {
+    transition: top 0.35s ease;
     display: none;
   }
+
+}
+
+@media screen and (min-width: $smallBreakPointpx) and (max-width: $mediumBreakPointpx) {
+  $skipToId:not(.popup) button .skipto-medium {
+    transition: top 0.35s ease;
+    display: inline-block;
+  }
+
+  $skipToId:not(.popup) button .skipto-text,
+  $skipToId:not(.popup) button .skipto-small {
+    transition: top 0.35s ease;
+    display: none;
+  }
+
+  $skipToId:not(.popup).focus button .skipto-text {
+    transition: top 0.35s ease;
+    display: inline-block;
+  }
+
+  $skipToId:not(.popup).focus button .skipto-small,
+  $skipToId:not(.popup).focus button .skipto-medium {
+    transition: top 0.35s ease;
+    display: none;
+  }
+
 }
 
 $skipToId.fixed {
@@ -229,10 +269,11 @@ $skipToId [role="menuitem"] .label {
   font-size: 100%;
   font-weight: normal;
   color: $menuTextColor;
-  display: inline-block;
   background-color: $menuBackgroundColor;
+  display: inline-block;
   line-height: inherit;
   display: inline-block;
+  white-space: nowrap;
 }
 
 $skipToId [role="menuitem"] .level {
@@ -244,7 +285,6 @@ $skipToId [role="menuitem"] .label {
   text-align: left;
   margin: 0;
   padding: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -329,37 +369,31 @@ $skipToId button:hover {
   background-color: $menuBackgroundColor;
   color: $menuTextColor;
   outline: none;
-}
-
-$skipToId button:focus,
-$skipToId button:hover {
   border-width: 0px 2px 2px 2px;
   border-color: $focusBorderColor;
 }
 
-$skipToId button:focus .text,
-$skipToId button:hover .text {
-  padding: 6px 7px 5px 7px;
-}
 
-$skipToId button:focus img,
-$skipToId button:hover img {
-  padding: 2px 3px 4px 3px;
+$skipToId button:focus .skipto-text,
+$skipToId button:hover .skipto-text,
+$skipToId button:focus .skipto-small,
+$skipToId button:hover .skipto-small,
+$skipToId button:focus .skipto-medium,
+$skipToId button:hover .skipto-medium {
+  padding: 6px 7px 5px 7px;
 }
 
-
 $skipToId [role="menuitem"]:focus {
   padding: 1px;
   border-width: 2px;
   border-style: solid;
   border-color: $focusBorderColor;
-  background-color: $menuitemFocusBackgroundColor;
-  color: $menuitemFocusTextColor;
   outline: none;
 }
 
-$skipToId [role="menuitem"]:focus .level,
-$skipToId [role="menuitem"]:focus .label {
+$skipToId [role="menuitem"].hover,
+$skipToId [role="menuitem"].hover .level,
+$skipToId [role="menuitem"].hover .label {
   background-color: $menuitemFocusBackgroundColor;
   color: $menuitemFocusTextColor;
 }
@@ -499,7 +533,8 @@ $skipToId [role="menuitem"]:focus .label {
     updateStyle('$fontSize', config.fontSize, theme.fontSize, defaultTheme.fontSize);
 
     updateStyle('$positionLeft', config.positionLeft, theme.positionLeft, defaultTheme.positionLeft);
-    updateStyle('$mediaBreakPoint', config.mediaBreakPoint, theme.mediaBreakPoint, defaultTheme.mediaBreakPoint);
+    updateStyle('$smallBreakPoint', config.smallBreakPoint, theme.smallBreakPoint, defaultTheme.smallBreakPoint);
+    updateStyle('$mediumBreakPoint', config.mediumBreakPoint, theme.mediumBreakPoint, defaultTheme.mediumBreakPoint);
 
     updateStyle('$menuTextColor', config.menuTextColor, theme.menuTextColor, defaultTheme.menuTextColor);
     updateStyle('$menuBackgroundColor', config.menuBackgroundColor, theme.menuBackgroundColor, defaultTheme.menuBackgroundColor);
@@ -532,452 +567,452 @@ $skipToId [role="menuitem"]:focus .label {
     styleNode.id = `${skipToId}-style`;
     const headNode = document.getElementsByTagName('head')[0];
     headNode.appendChild(styleNode);
-  }
-
-  /* utils.js */
-
-  /* Constants */
-  const debug$4 = new DebugLogging('Utils', false);
-  debug$4.flag = false;
-
-
-  /*
-   * @function getAttributeValue
-   * 
-   * @desc Return attribute value if present on element,
-   *       otherwise return empty string.
-   *
-   * @returns {String} see @desc
-   */
-  function getAttributeValue (element, attribute) {
-    let value = element.getAttribute(attribute);
-    return (value === null) ? '' : normalize(value);
-  }
-
-  /*
-   * @function normalize
-   *
-   * @desc Trim leading and trailing whitespace and condense all
-   *       internal sequences of whitespace to a single space. Adapted from
-   *       Mozilla documentation on String.prototype.trim polyfill. Handles
-   *       BOM and NBSP characters.
-   *
-   * @return {String}  see @desc
-   */
-  function normalize (s) {
-    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
-    return s.replace(rtrim, '').replace(/\s+/g, ' ');
-  }
-
-  /**
-   * @fuction isNotEmptyString
-   *
-   * @desc Returns true if the string has content, otherwise false
-   *
-   * @param {Boolean}  see @desc
-   */
-  function isNotEmptyString (str) {
-    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
-  }
-
-  /**
-   * @fuction isVisible
-   *
-   * @desc Returns true if the element is visible in the graphical rendering 
-   *
-   * @param {node}  elem  - DOM element node of a labelable element
-   */
-  function isVisible (element) {
-
-    function isDisplayNone(el) {
-      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
-        return false;
-      }
-
-      if (el.hasAttribute('hidden')) {
-        return true;
-      }
-
-      const style = window.getComputedStyle(el, null);
-      const display = style.getPropertyValue("display");
-      if (display === 'none') { 
-        return true;
-      }
-
-      // check ancestors for display none
-      if (el.parentNode) {
-        return isDisplayNone(el.parentNode);
-      }
-
-      return false;
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    let visibility = computedStyle.getPropertyValue('visibility');
-    if ((visibility === 'hidden') || (visibility === 'collapse')) {
-      return false;
-    }
-
-    return !isDisplayNone(element);
-  }
-
-  /*
-  *   namefrom.js
-  */
-
-  /* constants */
-
-  const debug$3 = new DebugLogging('nameFrom', false);
-  debug$3.flag = false;
-
-  //
-  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
-
-  /*
-  *   @function  isDisplayNone 
-  *
-  *   @desc Returns true if the element or parent element has set the CSS
-  *         display property to none or has the hidden attribute,
-  *         otherwise false
-  *
-  *   @param  {Object}  node  - a DOM node
-  *
-  *   @returns  {Boolean} see @desc 
-  */
-
-  function isDisplayNone (node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-
-      if (node.hasAttribute('hidden')) {
-        return true;
-      }
-
-      // aria-hidden attribute with the value "true" is an same as 
-      // setting the hidden attribute for name calcuation
-      if (node.hasAttribute('aria-hidden')) {
-        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
-          return true;
-        }
-      }
-
-      const style = window.getComputedStyle(node, null);
-
-      const display = style.getPropertyValue("display");
-
-      if (display) {
-        return display === 'none';
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isVisibilityHidden 
-  *   
-  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
-  *         property set to "hidden" or "collapse", otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isVisibilityHidden(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const style = window.getComputedStyle(node, null);
-
-      const visibility = style.getPropertyValue("visibility");
-      if (visibility) {
-        return (visibility === 'hidden') || (visibility === 'collapse');
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isAriaHiddenFalse 
-  *   
-  *   @desc Returns true if the node has the aria-hidden property set to
-  *         "false", otherwise false.  
-  *         NOTE: This function is important in the accessible namce 
-  *               calculation, since content hidden with a CSS technique 
-  *               can be included in the accessible name calculation when 
-  *               aria-hidden is set to false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isAriaHIddenFalse(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return (node.hasAttribute('aria-hidden') && 
-          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function includeContentInName 
-  *   
-  *   @desc Checks the CSS display and hidden properties, and
-  *         the aria-hidden property to see if the content
-  *         should be included in the accessible name
-  *        calculation.  Returns true if it should be 
-  *         included, otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function includeContentInName(node) {
-    const flag = isAriaHIddenFalse(node) || 
-      (!isVisibilityHidden(node) && 
-      !isDisplayNone(node));
-    return flag;
-  }
-
-  /*
-  *   @function getNodeContents
-  *
-  *   @desc  Recursively process element and text nodes by aggregating
-  *          their text values for an ARIA accessible name or description
-  *          calculation.
-  *
-  *          NOTE: This includes special handling of elements with 'alt' 
-  *                text and embedded controls.
-  *  
-  *  @param {Object}  node  - A DOM node
-  * 
-  *  @return {String}  The text content for an accessible name or description
-  */
-  function getNodeContents (node) {
-    let contents = '';
-    let nc;
-    let arr = [];
-
-    switch (node.nodeType) {
-      case Node.ELEMENT_NODE:
-        // If aria-label is present, node recursion stops and
-        // aria-label value is returned
-        if (node.hasAttribute('aria-label')) {
-          if (includeContentInName(node)) {
-            contents = node.getAttribute('aria-label');
-          }
-        }
-        else {
-          if (node instanceof HTMLSlotElement) {
-            // if no slotted elements, check for default slotted content
-            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
-            assignedNodes.forEach( assignedNode => {
-              nc = getNodeContents(assignedNode);
-              if (nc.length) arr.push(nc);
-            });
-            contents = (arr.length) ? arr.join(' ') : '';
-          } else {
-            if (couldHaveAltText(node) && includeContentInName(node)) {
-              contents = getAttributeValue(node, 'alt');
-            }
-            else {
-              if (node.hasChildNodes()) {
-                let children = Array.from(node.childNodes);
-                children.forEach( child => {
-                  nc = getNodeContents(child);
-                  if (nc.length) arr.push(nc);
-                });
-                contents = (arr.length) ? arr.join(' ') : '';
-              }
-            }
-            // For all branches of the ELEMENT_NODE case...
-          }
-        }
-        contents = addCssGeneratedContent(node, contents);
-        break;
-
-      case Node.TEXT_NODE:
-        if (includeContentInName(node)) {
-          contents = normalize(node.textContent);
-        }
-        break;
-    }
-
-    return contents;
-  }
-
-  /*
-  *   @function couldHaveAltText
-  *   
-  *   @desc  Based on HTML5 specification, returns true if 
-  *          the element could have an 'alt' attribute,
-  *          otherwise false.
-  * 
-  *   @param  {Object}  element  - DOM eleemnt node
-  *
-  *   @return {Boolean}  see @desc
-  */
-  function couldHaveAltText (element) {
-    let tagName = element.tagName.toLowerCase();
-
-    switch (tagName) {
-      case 'img':
-      case 'area':
-        return true;
-      case 'input':
-        return (element.type && element.type === 'image');
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function addCssGeneratedContent
-  *
-  *   @desc Adds CSS-generated content for pseudo-elements
-  *         :before and :after. According to the CSS spec, test that content 
-  *         value is other than the default computed value of 'none'.
-  * 
-  *         Note: Even if an author specifies content: 'none', because browsers 
-  *               add the double-quote character to the beginning and end of 
-  *               computed string values, the result cannot and will not be 
-  *               equal to 'none'.
-  *
-  *
-  *   @param {Object}  element   - DOM node element
-  *   @param {String}  contents  - Text content for DOM node
-  *
-  *   @returns  {String}  see @desc
-  *
-  */
-  function addCssGeneratedContent (element, contents) {
-
-    let result = contents,
-        prefix = getComputedStyle(element, ':before').content,
-        suffix = getComputedStyle(element, ':after').content;
-
-    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
-      result = prefix.substring(1, (prefix.length-1)) + result;
-    }
-
-    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
-      result = result + suffix.substring(1, (suffix.length-1)) ;
-    }
-
-    return result;
-  }
-
-  /* accName.js */
-
-  /* Constants */
-  const debug$2 = new DebugLogging('accName', false);
-  debug$2.flag = false;
-
-  /**
-   *   @fuction getAccessibleName
-   *
-   *   @desc Returns the accessible name for an heading or landamrk 
-   *
-   *   @paramn {Object}   dom      - Document of the current element
-   *   @param  {node}     element  - DOM element node for either a heading or
-   *                               landmark
-   *   @param  {Boolean}  fromContent  - if true will compute name from content
-   * 
-   *   @return {String} The accessible name for the landmark or heading element
-   */
-
-  function getAccessibleName (doc, element, fromContent=false) {
-    let accName = '';
-
-    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
-
-    if (accName === '' && element.hasAttribute('aria-label')) {
-      accName =  element.getAttribute('aria-label').trim();
-    }
-
-    if (accName === '' && fromContent) {
-      accName =  getNodeContents(element);
-    }
-
-    if (accName === '' && element.title.trim() !== '') {
-      accName = element.title.trim();
-    }
-
-    return accName;
-  }
-
-  /*
-  *   @function nameFromAttributeIdRefs
-  *
-  *   @desc Get the value of attrName on element (a space-
-  *         separated list of IDREFs), visit each referenced element in the order it
-  *         appears in the list and obtain its accessible name (skipping recursive
-  *         aria-labelledby or aria-describedby calculations), and return an object
-  *         with name property set to a string that is a space-separated concatena-
-  *         tion of those results if any, otherwise return empty string.
-  *
-  *   @param {Object}  doc       -  Browser document object
-  *   @param {Object}  element   -  DOM element node
-  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
-  *                                 or "aria-errormessage")
-  *
-  *   @returns {String} see @desc 
-  */
-  function nameFromAttributeIdRefs (doc, element, attribute) {
-    const value = getAttributeValue(element, attribute);
-    const arr = [];
-
-    if (value.length) {
-      const idRefs = value.split(' ');
-
-      for (let i = 0; i < idRefs.length; i++) {
-        const refElement = doc.getElementById(idRefs[i]);
-        if (refElement) {
-          const accName = getNodeContents(refElement);
-          if (accName && accName.length) arr.push(accName);
-        }
-      }
-    }
-
-    if (arr.length) {
-      return arr.join(' ');
-    }
-
-    return '';
-  }
-
+  }
+
+  /* utils.js */
+
+  /* Constants */
+  const debug$5 = new DebugLogging('Utils', false);
+  debug$5.flag = false;
+
+
+  /*
+   * @function getAttributeValue
+   * 
+   * @desc Return attribute value if present on element,
+   *       otherwise return empty string.
+   *
+   * @returns {String} see @desc
+   */
+  function getAttributeValue (element, attribute) {
+    let value = element.getAttribute(attribute);
+    return (value === null) ? '' : normalize(value);
+  }
+
+  /*
+   * @function normalize
+   *
+   * @desc Trim leading and trailing whitespace and condense all
+   *       internal sequences of whitespace to a single space. Adapted from
+   *       Mozilla documentation on String.prototype.trim polyfill. Handles
+   *       BOM and NBSP characters.
+   *
+   * @return {String}  see @desc
+   */
+  function normalize (s) {
+    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+    return s.replace(rtrim, '').replace(/\s+/g, ' ');
+  }
+
+  /**
+   * @fuction isNotEmptyString
+   *
+   * @desc Returns true if the string has content, otherwise false
+   *
+   * @param {Boolean}  see @desc
+   */
+  function isNotEmptyString (str) {
+    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
+  }
+
+  /**
+   * @fuction isVisible
+   *
+   * @desc Returns true if the element is visible in the graphical rendering 
+   *
+   * @param {node}  elem  - DOM element node of a labelable element
+   */
+  function isVisible (element) {
+
+    function isDisplayNone(el) {
+      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
+        return false;
+      }
+
+      if (el.hasAttribute('hidden')) {
+        return true;
+      }
+
+      const style = window.getComputedStyle(el, null);
+      const display = style.getPropertyValue("display");
+      if (display === 'none') { 
+        return true;
+      }
+
+      // check ancestors for display none
+      if (el.parentNode) {
+        return isDisplayNone(el.parentNode);
+      }
+
+      return false;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    let visibility = computedStyle.getPropertyValue('visibility');
+    if ((visibility === 'hidden') || (visibility === 'collapse')) {
+      return false;
+    }
+
+    return !isDisplayNone(element);
+  }
+
+  /*
+  *   namefrom.js
+  */
+
+  /* constants */
+
+  const debug$4 = new DebugLogging('nameFrom', false);
+  debug$4.flag = false;
+
+  //
+  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
+
+  /*
+  *   @function  isDisplayNone 
+  *
+  *   @desc Returns true if the element or parent element has set the CSS
+  *         display property to none or has the hidden attribute,
+  *         otherwise false
+  *
+  *   @param  {Object}  node  - a DOM node
+  *
+  *   @returns  {Boolean} see @desc 
+  */
+
+  function isDisplayNone (node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+
+      if (node.hasAttribute('hidden')) {
+        return true;
+      }
+
+      // aria-hidden attribute with the value "true" is an same as 
+      // setting the hidden attribute for name calcuation
+      if (node.hasAttribute('aria-hidden')) {
+        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
+          return true;
+        }
+      }
+
+      const style = window.getComputedStyle(node, null);
+
+      const display = style.getPropertyValue("display");
+
+      if (display) {
+        return display === 'none';
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isVisibilityHidden 
+  *   
+  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
+  *         property set to "hidden" or "collapse", otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isVisibilityHidden(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const style = window.getComputedStyle(node, null);
+
+      const visibility = style.getPropertyValue("visibility");
+      if (visibility) {
+        return (visibility === 'hidden') || (visibility === 'collapse');
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isAriaHiddenFalse 
+  *   
+  *   @desc Returns true if the node has the aria-hidden property set to
+  *         "false", otherwise false.  
+  *         NOTE: This function is important in the accessible namce 
+  *               calculation, since content hidden with a CSS technique 
+  *               can be included in the accessible name calculation when 
+  *               aria-hidden is set to false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isAriaHIddenFalse(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return (node.hasAttribute('aria-hidden') && 
+          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function includeContentInName 
+  *   
+  *   @desc Checks the CSS display and hidden properties, and
+  *         the aria-hidden property to see if the content
+  *         should be included in the accessible name
+  *        calculation.  Returns true if it should be 
+  *         included, otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function includeContentInName(node) {
+    const flag = isAriaHIddenFalse(node) || 
+      (!isVisibilityHidden(node) && 
+      !isDisplayNone(node));
+    return flag;
+  }
+
+  /*
+  *   @function getNodeContents
+  *
+  *   @desc  Recursively process element and text nodes by aggregating
+  *          their text values for an ARIA accessible name or description
+  *          calculation.
+  *
+  *          NOTE: This includes special handling of elements with 'alt' 
+  *                text and embedded controls.
+  *  
+  *  @param {Object}  node  - A DOM node
+  * 
+  *  @return {String}  The text content for an accessible name or description
+  */
+  function getNodeContents (node) {
+    let contents = '';
+    let nc;
+    let arr = [];
+
+    switch (node.nodeType) {
+      case Node.ELEMENT_NODE:
+        // If aria-label is present, node recursion stops and
+        // aria-label value is returned
+        if (node.hasAttribute('aria-label')) {
+          if (includeContentInName(node)) {
+            contents = node.getAttribute('aria-label');
+          }
+        }
+        else {
+          if (node instanceof HTMLSlotElement) {
+            // if no slotted elements, check for default slotted content
+            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
+            assignedNodes.forEach( assignedNode => {
+              nc = getNodeContents(assignedNode);
+              if (nc.length) arr.push(nc);
+            });
+            contents = (arr.length) ? arr.join(' ') : '';
+          } else {
+            if (couldHaveAltText(node) && includeContentInName(node)) {
+              contents = getAttributeValue(node, 'alt');
+            }
+            else {
+              if (node.hasChildNodes()) {
+                let children = Array.from(node.childNodes);
+                children.forEach( child => {
+                  nc = getNodeContents(child);
+                  if (nc.length) arr.push(nc);
+                });
+                contents = (arr.length) ? arr.join(' ') : '';
+              }
+            }
+            // For all branches of the ELEMENT_NODE case...
+          }
+        }
+        contents = addCssGeneratedContent(node, contents);
+        break;
+
+      case Node.TEXT_NODE:
+        if (includeContentInName(node)) {
+          contents = normalize(node.textContent);
+        }
+        break;
+    }
+
+    return contents;
+  }
+
+  /*
+  *   @function couldHaveAltText
+  *   
+  *   @desc  Based on HTML5 specification, returns true if 
+  *          the element could have an 'alt' attribute,
+  *          otherwise false.
+  * 
+  *   @param  {Object}  element  - DOM eleemnt node
+  *
+  *   @return {Boolean}  see @desc
+  */
+  function couldHaveAltText (element) {
+    let tagName = element.tagName.toLowerCase();
+
+    switch (tagName) {
+      case 'img':
+      case 'area':
+        return true;
+      case 'input':
+        return (element.type && element.type === 'image');
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function addCssGeneratedContent
+  *
+  *   @desc Adds CSS-generated content for pseudo-elements
+  *         :before and :after. According to the CSS spec, test that content 
+  *         value is other than the default computed value of 'none'.
+  * 
+  *         Note: Even if an author specifies content: 'none', because browsers 
+  *               add the double-quote character to the beginning and end of 
+  *               computed string values, the result cannot and will not be 
+  *               equal to 'none'.
+  *
+  *
+  *   @param {Object}  element   - DOM node element
+  *   @param {String}  contents  - Text content for DOM node
+  *
+  *   @returns  {String}  see @desc
+  *
+  */
+  function addCssGeneratedContent (element, contents) {
+
+    let result = contents,
+        prefix = getComputedStyle(element, ':before').content,
+        suffix = getComputedStyle(element, ':after').content;
+
+    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
+      result = prefix.substring(1, (prefix.length-1)) + result;
+    }
+
+    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
+      result = result + suffix.substring(1, (suffix.length-1)) ;
+    }
+
+    return result;
+  }
+
+  /* accName.js */
+
+  /* Constants */
+  const debug$3 = new DebugLogging('accName', false);
+  debug$3.flag = false;
+
+  /**
+   *   @fuction getAccessibleName
+   *
+   *   @desc Returns the accessible name for an heading or landamrk 
+   *
+   *   @paramn {Object}   dom      - Document of the current element
+   *   @param  {node}     element  - DOM element node for either a heading or
+   *                               landmark
+   *   @param  {Boolean}  fromContent  - if true will compute name from content
+   * 
+   *   @return {String} The accessible name for the landmark or heading element
+   */
+
+  function getAccessibleName (doc, element, fromContent=false) {
+    let accName = '';
+
+    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
+
+    if (accName === '' && element.hasAttribute('aria-label')) {
+      accName =  element.getAttribute('aria-label').trim();
+    }
+
+    if (accName === '' && fromContent) {
+      accName =  getNodeContents(element);
+    }
+
+    if (accName === '' && element.title.trim() !== '') {
+      accName = element.title.trim();
+    }
+
+    return accName;
+  }
+
+  /*
+  *   @function nameFromAttributeIdRefs
+  *
+  *   @desc Get the value of attrName on element (a space-
+  *         separated list of IDREFs), visit each referenced element in the order it
+  *         appears in the list and obtain its accessible name (skipping recursive
+  *         aria-labelledby or aria-describedby calculations), and return an object
+  *         with name property set to a string that is a space-separated concatena-
+  *         tion of those results if any, otherwise return empty string.
+  *
+  *   @param {Object}  doc       -  Browser document object
+  *   @param {Object}  element   -  DOM element node
+  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
+  *                                 or "aria-errormessage")
+  *
+  *   @returns {String} see @desc 
+  */
+  function nameFromAttributeIdRefs (doc, element, attribute) {
+    const value = getAttributeValue(element, attribute);
+    const arr = [];
+
+    if (value.length) {
+      const idRefs = value.split(' ');
+
+      for (let i = 0; i < idRefs.length; i++) {
+        const refElement = doc.getElementById(idRefs[i]);
+        if (refElement) {
+          const accName = getNodeContents(refElement);
+          if (accName && accName.length) arr.push(accName);
+        }
+      }
+    }
+
+    if (arr.length) {
+      return arr.join(' ');
+    }
+
+    return '';
+  }
+
   /* landmarksHeadings.js */
 
   /* Constants */
-  const debug$1 = new DebugLogging('landmarksHeadings', false);
-  debug$1.flag = false;
+  const debug$2 = new DebugLogging('landmarksHeadings', false);
+  debug$2.flag = false;
 
   const skipableElements = [
     'base',
@@ -1789,13 +1824,13 @@ $skipToId [role="menuitem"]:focus .label {
       }
     }
     return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
-  }
-
+  }
+
   /* skiptoMenuButton.js */
 
   /* Constants */
-  const debug = new DebugLogging('SkipToButton', false);
-  debug.flag = false;
+  const debug$1 = new DebugLogging('SkipToButton', false);
+  debug$1.flag = false;
 
   /**
    * @class SkiptoMenuButton
@@ -1851,14 +1886,19 @@ $skipToId [role="menuitem"]:focus .label {
         this.containerNode.appendChild(this.buttonNode);
 
         this.buttonTextNode = document.createElement('span');
-        this.buttonTextNode.classList.add('text');
+        this.buttonTextNode.classList.add('skipto-text');
         this.buttonTextNode.textContent = buttonVisibleLabel;
         this.buttonNode.appendChild(this.buttonTextNode);
 
-        const imageNode = document.createElement('img');
-        imageNode.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABP5JREFUWAm9V11MXEUUnjN7KbuwKD/L8qOp2kpbWCSFpkZN2qIxjQYWaC2JD/4kxsTE1MQHeedBY6K+mPSpJsakhcSgFaQk+qCh1DZRQmioSypVa0q1IKC1bFlw753jN5e9txfobmkBJ1nm3DPnb87fHEhkWGWVBx9QYqFCkSxk4nuFYMpA7jkilkIsMHNCGnI8m9VPl8/3/e0hcMEVAosjTc+wsl5iomcFc75LuTYA4ug7IajDZ+Qfnxw5dsMR5xoQqm0qF/OqgwXXO4cbscOQCwb5npuI9Yxq+bYBJTUHwqaZHMSNN99USjNE4jQoxuD5KeBnBSm+eZ4BYglWsQkhCzKLLWB6DHC1wwEj4j6DaiZHei8ZGmklkx+CwFZOgqalT772+qG67vb2duUwrXUPVzfVKMv6GMbsQm4ETVO8D5mHqHxXNLSQUFcFC23MdSmz9k3Fus+tVeGt+IsjrUFWc2MwokyfS5lTZiQTYndKuY5H33LlYCplv+Xmyq0Ep8PRvI+nYl0TzjngeKiqoQP63lrEzT9sIK5hIFKLhh1I76HKxjal5t4Tc17s6mEtNlQVbZse7f3A5SJx0dWn+D5DsbwmhBvqCpcQQDDb+ChuKmTrauvfy61h4qAhz0x70JJ8PYpUm5aZFaBvRElN9KGiyga2f1UN46W1rcUe+g0BkdwSiWiH1f4TqmocAGKP1oYqGPEZfGDyfN+vG6J9mVDbgNKqaMRkHkQTCtjnTBa8960U8hRyZAxljT4g44IsN1uWyVn6SRJ0dEP4xOzh5rqJTOXsZnf4kcbHlcUn0DhKl0pb2xc8mkC8R5nk11lCdE6M9sa8El0DNFLXqVCJN+GJF3GFbV7CdYK1Z45RoTw8febLWS1ziQFeJeHqlq2CrZ2WEBUkuBBt+p5M9F5eJDgJKfwot3xcBnJoB7yAB3JxoRUPEwX26r6Q1gCHeD32+yOthfNi/mVc4m0ke44tk+jIzOjJN/4XA5xLhKuj+y3FvTBkE7ww5zMKwrYBoUj0VSAr/RR450qs6y+HYSN2tOJuJHpzygtPG7oRmUl1FAhaEAndtN51FBdVNp5A/PGU3uXCs5uKtfseoCq+R14sGsBUbiAmuuxsT6Ahl3tV+SR1YAIY8eLuDObZzf6CGT1MOIsFwcOL7QTtwm/PA87h8j2nuKgvPnv97HL8ar+DlkoMDR1NZqLPaED8z+mz8FBtJgGZzvQIVV7d/OAfP/aMp6PLaABmtxdMqbakY749nuOZlGt+tzncXtjGUBiWItNNCko9RildJlvHWd19CJDbK0NAnOsMJKiIpJFNcmLBGUiY6rz3DIZDTyAJC7y4O4F1Ev52rhsDz5L1qPNFQl0lPRwc+XTwCgqjDD3bkpKfnBrtO+0QredeHGnZycocQB/IQ+EnA5RT6uvv7+dAeHsRFO0BUj/kB3NLtsfmpsbG1lN5KNIYFUp9DuW2R0lS50Ssu9NuQBjNc/5N8BBKDq9WahFdRhccQBx/JhbX8MDNI6SLHcShSbdjggFtALEuwA9zJu2DYrfJ4fBSdl7W7t9/+GLGfYz0LGguzH2GPr03ndz1wEP5KZKB551x3TXAEV5UGW0h4lfwOO3HdbMd/Fp2/fLBu1/B7Z9Mx072emWtMMA5rK9vNy5MDW8zhbUVLsxDqebil5be4VvcETQ9ExL9g3/rf3lqh/9iV1cXZpuV6z8QFu9El3GwrAAAAABJRU5ErkJggg==";
-        imageNode.setAttribute('alt', '');
-        this.buttonNode.appendChild(imageNode);
+        const smallButtonNode = document.createElement('span');
+        smallButtonNode.classList.add('skipto-small');
+        smallButtonNode.textContent = config.smallButtonLabel;
+        this.buttonNode.appendChild(smallButtonNode);
+
+        const mediumButtonNode = document.createElement('span');
+        mediumButtonNode.classList.add('skipto-medium');
+        mediumButtonNode.textContent = config.buttonLabel;
+        this.buttonNode.appendChild(mediumButtonNode);
 
         // Create menu container
 
@@ -1906,6 +1946,8 @@ $skipToId [role="menuitem"]:focus .label {
 
         attachNode.insertBefore(this.containerNode, attachNode.firstElementChild);
 
+        this.focusMenuitem = null;
+
         return this.containerNode;
 
       }
@@ -2019,8 +2061,8 @@ $skipToId [role="menuitem"]:focus .label {
       /*
        * @method updateMenuitems
        *
-       * @desc  Updates the menu information with the current manu items
-       *        used for menu navgation commands
+       * @desc  Updates the menu information with the current menu items
+       *        used for menu navigation commands
        */
       updateMenuitems () {
         let menuitemNodes = this.menuNode.querySelectorAll('[role=menuitem');
@@ -2063,7 +2105,7 @@ $skipToId [role="menuitem"]:focus .label {
         menuitemNode.addEventListener('keydown', this.handleMenuitemKeydown.bind(this));
         menuitemNode.addEventListener('click', this.handleMenuitemClick.bind(this));
         menuitemNode.addEventListener('pointerenter', this.handleMenuitemPointerenter.bind(this));
-
+        menuitemNode.addEventListener('pointerleave', this.handleMenuitemPointerleave.bind(this));
         groupNode.appendChild(menuitemNode);
 
         // add heading level and label
@@ -2172,7 +2214,10 @@ $skipToId [role="menuitem"]:focus .label {
        */
       setFocusToMenuitem(menuitem) {
         if (menuitem) {
+          this.removeHoverClass();
+          menuitem.classList.add('hover');
           menuitem.focus();
+          this.focusMenuitem = menuitem;
         }
       }
 
@@ -2341,7 +2386,18 @@ $skipToId [role="menuitem"]:focus .label {
       isOpen() {
         return this.buttonNode.getAttribute('aria-expanded') === 'true';
       }
-      
+
+      /*
+       * @method removeHoverClass
+       *
+       * @desc Removes hover class for menuitems
+       */
+      removeHoverClass() {
+        this.menuitemNodes.forEach( node => {
+          node.classList.remove('hover');
+        });
+      }
+
       // Menu event handlers
       
       handleFocusin() {
@@ -2396,34 +2452,51 @@ $skipToId [role="menuitem"]:focus .label {
       }
 
       handleDocumentKeydown (event) {
-        let key = event.key,
-          flag = false;
 
-        let altPressed =
-          this.usesAltKey &&
-          event.altKey &&
-          !event.ctrlKey &&
-          !event.shiftKey &&
-          !event.metaKey;
-
-        let optionPressed =
-          this.usesOptionKey &&
-          event.altKey &&
-          !event.ctrlKey &&
-          !event.shiftKey &&
-          !event.metaKey;
-
-        if (
-          (optionPressed && this.config.optionShortcut === key) ||
-          (altPressed && this.config.altShortcut === key)
-        ) {
-          this.openPopup();
-          this.setFocusToFirstMenuitem();
-          flag = true;
-        }
-        if (flag) {
-          event.stopPropagation();
-          event.preventDefault();
+        const enabledInputTypes = [
+          'button',
+          'checkbox',
+          'color',
+          'file',
+          'image',
+          'radio',
+          'range',
+          'reset',
+          'submit'
+        ];
+
+        const target = event.target;
+        const tagName = target.tagName ? target.tagName.toLowerCase() : '';
+        const type = tagName === 'input' ? target.type.toLowerCase() : '';
+
+        if ((tagName !== 'textarea') &&
+            ((tagName !== 'input') ||
+             ((tagName === 'input') && enabledInputTypes.includes(type))
+            )) {
+
+          const altPressed =
+            this.usesAltKey &&
+            event.altKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            !event.metaKey;
+
+          const optionPressed =
+            this.usesOptionKey &&
+            event.altKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            !event.metaKey;
+
+          if ((optionPressed && this.config.optionShortcut === event.key) ||
+              (altPressed && this.config.altShortcut === event.key) ||
+              ((optionPressed || altPressed) && (48 === event.keyCode))
+          ) {
+            this.openPopup();
+            this.setFocusToFirstMenuitem();
+            event.stopPropagation();
+            event.preventDefault();
+          }
         }
       }    
 
@@ -2519,7 +2592,13 @@ $skipToId [role="menuitem"]:focus .label {
 
       handleMenuitemPointerenter(event) {
         let tgt = event.currentTarget;
-        tgt.focus();
+        this.removeHoverClass();
+        tgt.classList.add('hover');
+      }
+
+      handleMenuitemPointerleave(event) {
+        let tgt = event.currentTarget;
+        tgt.classList.remove('hover');
       }
 
       handleBackgroundPointerdown(event) {
@@ -2530,7 +2609,11 @@ $skipToId [role="menuitem"]:focus .label {
           }
         }
       }
-  }
+  }
+
+  /* constants */
+  const debug = new DebugLogging('skipto', false);
+  debug.flag = true;
 
   (function() {
 
@@ -2554,14 +2637,15 @@ $skipToId [role="menuitem"]:focus .label {
         altShortcut: '0', // default shortcut key is the number zero
         optionShortcut: 'º', // default shortcut key character associated with option+0 on mac 
         attachElement: 'body',
-        displayOption: 'popup', // options: static (default), popup, fixed
+        displayOption: 'static', // options: static (default), popup, fixed
         // container element, use containerClass for custom styling
-        containerElement: 'div',
+        containerElement: 'nav',
         containerRole: '',
         customClass: '',
 
         // Button labels and messages
         buttonLabel: 'Skip To Content',
+        smallButtonLabel: 'SkipTo',
         altLabel: 'Alt',
         optionLabel: 'Option',
         buttonShortcut: ' ($modifier+$key)',
@@ -2589,11 +2673,12 @@ $skipToId [role="menuitem"]:focus .label {
         headings: 'main h1 h2',
 
         // Place holders for configuration
-        colorTheme: 'aria',
+        colorTheme: '',
         fontFamily: '',
         fontSize: '',
         positionLeft: '',
-        mediaBreakPoint: '',
+        smallBreakPoint: '',
+        mediumBreakPoint: '',
         menuTextColor: '',
         menuBackgroundColor: '',
         menuitemFocusTextColor: '',
@@ -2608,7 +2693,8 @@ $skipToId [role="menuitem"]:focus .label {
           fontFamily: 'inherit',
           fontSize: 'inherit',
           positionLeft: '46%',
-          mediaBreakPoint: '540',
+          smallBreakPoint: '576',
+          mediumBreakPoint: '992',
           menuTextColor: '#1a1a1a',
           menuBackgroundColor: '#dcdcdc',
           menuitemFocusTextColor: '#eeeeee',
@@ -2682,6 +2768,17 @@ $skipToId [role="menuitem"]:focus .label {
           focusBorderColor: '#dd3444',
           buttonTextColor: '#fff',
           buttonBackgroundColor: '#036',
+        },
+        'openweba11y': {
+          hostnameSelector: 'openweba11y.com',
+          buttonTextColor: '#13294B',
+          buttonBackgroundColor: '#dddddd',
+          focusBorderColor: '#C5050C',
+          menuTextColor: '#13294B',
+          menuBackgroundColor: '#dddddd',
+          menuitemFocusTextColor: '#dddddd',
+          menuitemFocusBackgroundColor: '#13294B',
+          fontSize: '90%'
         }
       },
 
@@ -2694,7 +2791,7 @@ $skipToId [role="menuitem"]:focus .label {
        * @param  {object} config - Reference to configuration object
        *                           can be undefined
        */
-      init: function(config) {
+      init: function(globalConfig) {
         let node;
 
         // Check if skipto is already loaded
@@ -2706,9 +2803,13 @@ $skipToId [role="menuitem"]:focus .label {
         document.skipToHasBeenLoaded = true;
 
         let attachElement = document.body;
-        if (config) {
-          this.setupConfig(config);
+
+        if (globalConfig) {
+          this.config = this.setupConfigFromGlobal(this.config, globalConfig);
         }
+
+        this.config = this.setupConfigFromDataAttribute(this.config);
+
         if (typeof this.config.attachElement === 'string') {
           node = document.querySelector(this.config.attachElement);
           if (node && node.nodeType === Node.ELEMENT_NODE) {
@@ -2722,45 +2823,92 @@ $skipToId [role="menuitem"]:focus .label {
       },
 
       /*
-       * @method setupConfig
+       * @method setupConfigFromGlobal
        *
-       * @desc Get configuration information from user configuration to change 
+       * @desc Get configuration information from author configuration to change
        *       default settings 
        *
-       * @param  {object}  appConfig - Javascript object with configuration information
+       * @param  {object}  config       - Javascript object with default configuration information
+       * @param  {object}  globalConfig - Javascript object with configuration information oin a global variable
        */
-      setupConfig: function(appConfig) {
-        let appConfigSettings;
+      setupConfigFromGlobal: function(config, globalConfig) {
+        let authorConfig = {};
         // Support version 4.1 configuration object structure 
         // If found use it
-        if ((typeof appConfig.settings === 'object') && 
-            (typeof appConfig.settings.skipTo === 'object')) {
-          appConfigSettings = appConfig.settings.skipTo;
+        if ((typeof globalConfig.settings === 'object') &&
+            (typeof globalConfig.settings.skipTo === 'object')) {
+          authorConfig = globalConfig.settings.skipTo;
         }
         else {
           // Version 5.0 removes the requirement for the "settings" and "skipto" properties
           // to reduce the complexity of configuring skipto
-          if ((typeof appConfig === 'undefined') || 
-               (typeof appConfig !== 'object')) {
-            appConfigSettings = {};
+          if (typeof globalConfig === 'object') {
+            authorConfig = globalConfig;
           }
-          else {
-            appConfigSettings = appConfig;
+        }
+
+        for (const name in authorConfig) {
+          //overwrite values of our local config, based on the external config
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof authorConfig[name] === 'string') &&
+              (authorConfig[name].length > 0 ) ||
+             typeof authorConfig[name] === 'boolean')
+            ) {
+            config[name] = authorConfig[name];
+          } else {
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in global configuration object: ' + name);
+          }
+        }
+
+        return config;
+      },
+
+      /*
+       * @method setupConfigFromDataAttribute
+       *
+       * @desc Get configuration information from author configuration to change
+       *       default settings
+       *
+       * @param  {object}  config - Javascript object with default configuration information
+       */
+      setupConfigFromDataAttribute: function(config) {
+        let dataConfig = {};
+
+        // Check for data-skipto attribute values for configuration
+        const configElem = document.querySelector('[data-skipto]');
+        if (configElem) {
+          const dataSkiptoValue = configElem.getAttribute('data-skipto');
+          if (dataSkiptoValue) {
+            const values = dataSkiptoValue.split(';');
+            values.forEach( v => {
+              let [prop, value] = v.split(':');
+              if (prop) {
+                prop = prop.trim();
+              }
+              if (value) {
+                value = value.trim();
+              }
+              if (prop && value) {
+                dataConfig[prop] = value;
+              }
+            });
           }
         }
 
-        for (const name in appConfigSettings) {
+        for (const name in dataConfig) {
           //overwrite values of our local config, based on the external config
-          if ((typeof this.config[name] !== 'undefined') &&
-             ((typeof appConfigSettings[name] === 'string') &&
-              (appConfigSettings[name].length > 0 ) ||
-             typeof appConfigSettings[name] === 'boolean')
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof dataConfig[name] === 'string') &&
+              (dataConfig[name].length > 0 ) ||
+             typeof dataConfig[name] === 'boolean')
             ) {
-            this.config[name] = appConfigSettings[name];
+            config[name] = dataConfig[name];
           } else {
-            console.warn('[SkipTo]: Unsuported or deprecated configuration option "' + name + '".');
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in data-skipto attribute: ' + name);
           }
         }
+        return config;
+
       }
     };
 
@@ -2768,6 +2916,6 @@ $skipToId [role="menuitem"]:focus .label {
     window.addEventListener('load', function() {
       SkipTo.init(window.SkipToConfig);
     });
-  })();
-
-})();
+  })();
+
+})();

From 1c8eaae42802a649faebf5b8c27805736d007a84 Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Sat, 30 Nov 2024 19:48:56 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BB=AE=E3=83=AA=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=82=B9=E3=81=AE=E3=81=9F=E3=82=81=E3=80=81Alert=E3=83=91?=
 =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=83=B3=E4=BB=A5=E5=A4=96=E3=82=92=E6=B6=88?=
 =?UTF-8?q?=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/patterns.html | 407 +--------------------------------
 1 file changed, 1 insertion(+), 406 deletions(-)

diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index 8a7b59fe..96fde559 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -17,72 +17,7 @@
   <body>
     <h1>Patterns</h1>
     <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/2d60c413ec23875a30162364a7e715b26875d9db -->
-    <section class="pattern-filter-section">
-      <h2>Filter Patterns</h2>
-      <div class="pattern-filter-flex-container">
-      <form
-        action="javascript:void(0);"
-        role="search"
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20">
-          <g transform="translate(-3.5 -3.5)" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-            <path d="M20.5,12.5a8,8,0,1,1-8-8,8,8,0,0,1,8,8Z" />
-            <path d="M29.325,29.325l-4.35-4.35" transform="translate(-6.825 -6.825)"/>
-          </g>
-        </svg>
-        <input
-          type="text"
-          id="pattern-filter-input"
-          placeholder="Filter patterns"
-          oninput="aria.Filter.filterListItems(this.value, '#patterns', 'pattern-name', 'no-patterns-found')"
-          aria-label="Filter patterns"
-        >
-        <button
-          id="clear-pattern-filter"
-          aria-label="Clear pattern filter"
-          onclick="aria.Filter.clearInput(document.getElementById('pattern-filter-input'), '#patterns', 'pattern-name', 'no-patterns-found')"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
-            <path d="M17.5,8.507,16.493,7.5,12.5,11.493,8.507,7.5,7.5,8.507,11.493,12.5,7.5,16.493,8.507,17.5,12.5,13.507,16.493,17.5,17.5,16.493,13.507,12.5Z" transform="translate(-7.5 -7.5)"/>
-          </svg>
-        </button>
-      </form>
-      <fieldset class="view-toggle">
-        <button id="listViewButton" onclick="aria.Filter.onViewButtonClicked(this)"  aria-pressed="false" aria-label="Show list view">
-          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 25 21">
-            <g transform="translate(0 -0.4)" fill="currentColor">
-              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -20.375)" />
-              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -12.375)"/>
-              <path d="M4,20.775H1a1.135,1.135,0,0,0-1,1v3a1.135,1.135,0,0,0,1,1H4a1.135,1.135,0,0,0,1-1v-3A1.135,1.135,0,0,0,4,20.775Zm20,1H9a1.135,1.135,0,0,0-1,1v1a1.135,1.135,0,0,0,1,1H24a1.135,1.135,0,0,0,1-1v-1A1.135,1.135,0,0,0,24,21.775Z" transform="translate(0 -4.375)"/>
-            </g>
-          </svg>
-        </button>
-        <button id="tilesViewButton" onclick="aria.Filter.onViewButtonClicked(this)" aria-pressed="true" aria-label="Show tiles view" class="active">
-          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 22 22" >
-            <g transform="translate(0 -0.5)" fill="currentColor">
-              <rect width="9" height="9" rx="1" transform="translate(0 0.5)"/>
-              <rect width="9" height="9" rx="1" transform="translate(0 13.5)"/>
-              <rect width="9" height="9" rx="1" transform="translate(13 0.5)"/>
-              <rect width="9" height="9" rx="1" transform="translate(13 13.5)"/>
-            </g>
-          </svg>
-        </button>
-      </fieldset>
-      </div>
-    </section>
-    <ul id="patterns" class="tiles">
-      <li class="pattern">
-        <a href="accordion/accordion-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-accordion.svg">
-            <span>Accordion (Sections With Show/Hide Functionality)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
-        </div>
-      </li>
-
+    <ul id="patterns" class="list">
       <li class="pattern">
         <a href="alert/alert-pattern.html">
           <h2 class="pattern-name">
@@ -94,346 +29,6 @@ <h2 class="pattern-name">
           An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
         </div>
       </li>
-
-      <li class="pattern">
-        <a href="alertdialog/alertdialog-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-alertdialog.svg">
-            <span>Alert and Message Dialogs</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="breadcrumb/breadcrumb-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-breadcrumb.svg">
-            <span>Breadcrumb</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="button/button-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-button.svg">
-            <span>Button</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="carousel/carousel-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-carousel.svg">
-            <span>Carousel (Slide Show or Image Rotator)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="checkbox/checkbox-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-checkbox.svg">
-            <span>Checkbox</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          WAI-ARIA supports two types of checkbox widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which allow an additional third state known as partially checked.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="combobox/combobox-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-combobox.svg">
-            <span>Combobox</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A combobox is an input widget that has an associated popup.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="dialog-modal/dialog-modal-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-dialog-modal.svg">
-            <span>Dialog (Modal)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A dialog is a window overlaid on either the primary window or another dialog window.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="disclosure/disclosure-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-disclosure.svg">
-            <span>Disclosure (Show/Hide)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="feed/feed-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-feed.svg">
-            <span>Feed</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A feed is a section of a page that automatically loads new sections of content as the user scrolls.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="grid/grid-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-grid.svg">
-            <span>Grid (Interactive Tabular Data and Layout Containers)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="landmarks/landmarks-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-landmarks.svg">
-            <span>Landmarks</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          Landmarks are a set of eight roles that identify the major sections of a page.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="link/link-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-link.svg">
-            <span>Link</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A link widget provides an interactive reference to a resource.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="listbox/listbox-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-listbox.svg">
-            <span>Listbox</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A listbox widget presents a list of options and allows a user to select one or more of them.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="menubar/menu-and-menubar-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-menubar.svg">
-            <span>Menu and Menubar</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="menu-button/menu-button-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-menu-button.svg">
-            <span>Menu Button</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A menu button is a button that opens a menu as described in the Menu and Menubar Pattern.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="meter/meter-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-meter.svg">
-            <span>Meter</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A meter is a graphical display of a numeric value that varies within a defined range.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="radio/radio-group-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-radio.svg">
-            <span>Radio Group</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="slider/slider-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-slider.svg">
-            <span>Slider</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A slider is an input where the user selects a value from within a given range.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="slider-multithumb/slider-multithumb-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-slider-multithumb.svg">
-            <span>Slider (Multi-Thumb)</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A multi-thumb slider implements the Slider Pattern but includes two or more thumbs, often on a single rail.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="spinbutton/spinbutton-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-spinbutton.svg">
-            <span>Spinbutton</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A spinbutton is an input widget that restricts its value to a set or range of discrete values.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="switch/switch-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-switch.svg">
-            <span>Switch</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A switch is an input widget that allows users to choose one of two values: on or off.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="table/table-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-table.svg">
-            <span>Table</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="tabs/tabs-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-tabs.svg">
-            <span>Tabs</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="toolbar/toolbar-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-toolbar.svg">
-            <span>Toolbar</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="tooltip/tooltip-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-tooltip.svg">
-            <span>Tooltip</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="treeview/treeview-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-treeview.svg">
-            <span>Tree View</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A tree view widget presents a hierarchical list.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="treegrid/treegrid-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-treegrid.svg">
-            <span>Treegrid</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive.
-        </div>
-      </li>
-
-      <li class="pattern">
-        <a href="windowsplitter/windowsplitter-pattern.html">
-          <h2 class="pattern-name">
-            <img alt="" src="../images/pattern-windowsplitter.svg">
-            <span>Window Splitter</span>
-          </h2>
-        </a>
-        <div class="pattern-introduction">
-          A window splitter is a moveable separator between two sections, or panes, of a window that enables users to change the relative size of the panes.
-        </div>
-      </li>
-
-      <li id="no-patterns-found" aria-hidden="true" style="display: none">
-        <h2>No results found.</h2>
-      </li>
     </ul>
   </body>
 </html>

From ee2d1c657749d0cd3d02f79b1c8e0099c9d01b41 Mon Sep 17 00:00:00 2001
From: p_craft <ef81sp@gmail.com>
Date: Sat, 30 Nov 2024 20:03:51 +0900
Subject: [PATCH 3/3] =?UTF-8?q?patterns.html=20=E3=81=AE=E3=82=A2=E3=83=A9?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E3=82=92=E7=BF=BB=E8=A8=B3=EF=BC=88=E3=82=A2?=
 =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=83=88=E3=83=91=E3=82=BF=E3=83=BC=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=8B=E3=82=89=E3=82=B3?=
 =?UTF-8?q?=E3=83=94=E3=83=9A=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/patterns/patterns.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index 96fde559..6ee21279 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Patterns</title>
+    <title>パターン</title>
 
     <!-- Core JS and CSS for the patterns page -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -15,18 +15,18 @@
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
-    <h1>Patterns</h1>
+    <h1>パターン</h1>
     <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/2d60c413ec23875a30162364a7e715b26875d9db -->
     <ul id="patterns" class="list">
       <li class="pattern">
         <a href="alert/alert-pattern.html">
           <h2 class="pattern-name">
             <img alt="" src="../images/pattern-alert.svg">
-            <span>Alert</span>
+            <span>アラート</span>
           </h2>
         </a>
         <div class="pattern-introduction">
-          An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
+          アラートは、利用者のタスクを中断することなく、利用者の注意を引くように、簡潔で重要なメッセージを表示する要素です。
         </div>
       </li>
     </ul>
