Bugs, accessibility, new input types, Minimal Design tier

CLAUDE.md

@@ -127,7 +127,8 @@ Replace the dynamic skip-link generator with a **static, always-visible `<nav>`*
 ```
 
 - Give every `<fieldset>` or section a stable, semantic `id`.
-- The nav should be compact (e.g. `font-size: smaller`, horizontal list on desktop, collapsed or scrollable on mobile).
+- The nav should be **collapsed by default** (e.g. a `<details>`/`<summary>` or a disclosure button) to preserve maximum space for the examples. It expands on demand.
+- On mobile a collapsed nav is essential; on desktop it can remain collapsed but should be easy to open.
 - This replaces the JS-generated skip link mechanism entirely and removes the Cash dependency for that feature.
 
 ---

behaviour.js

@@ -1,94 +1,28 @@
 /*
  * It looks like jQuery but it's Cash 💰
- * You'll find the documentation on GitHub: https://github.com/fabiospampinato/cash#readme
- *
- * Thanks to Stephan M. for helping me out with JS
+ * https://github.com/fabiospampinato/cash#readme
  */
 
-
-/*
- * Helper Functions
- * - find an attribute
- */
-    $.fn.hasAttr = function (name) {
-        return this.attr(name) !== undefined;
-    };
-
-    //  https://stackoverflow.com/questions/26203453/jquery-generate-unique-ids
-    function Generator() {}
-        Generator.prototype.rand =  Math.floor(Math.random() * 26) + Date.now();
-        Generator.prototype.getId = function() {
-            return this.rand++;
-        };
-
-    var idGen = new Generator();
-
-    /* TODO: Convert skipt links to function
-    $.fn.dynamicSkiplinks = function (name) {
-        // 
-    };
-    */
-
-
-// Skip link function
 $(function () {
-
-    // Basics
+
     $('html').removeClass('no-js');
-
-    // DEBUG
-    //if(window.location.href.includes('github')) {
-    if (document.location.href.indexOf('github') === -1) {
-        $('#design-01').attr('checked', true);
-        // $('#design-02').attr('checked', true);
-        // $('#design-03').attr('checked', true);
+
+    // Enable Streamline typography by default on local builds
+    if (window.location.hostname !== 'nativeformelements.com') {
+        $('#design-01').prop('checked', true);
+        $('body').addClass('design-01');
     }
-
-    /*
-     * Dynamic Skip Links
-     *  looks for specific elements and built a list (select)
-     */
-
-    $('legend,h1,h2')
-    .attr('tabindex', '-1')
-    .removeAttr('title')
-    .each(function () {
-        var elementName = $(this).get(0).tagName.toLowerCase();
-        var getElementAriaLabel = $(this).attr('aria-label');
-        var getElementText = $(this).text();
-
-        var noContent = 'No label';
-
-        if ($(this).hasAttr('aria-label')) {
-            var elementAriaLabel = getElementAriaLabel;
-        } else {
-            var elementText = getElementText;
-        }
-
-        if ($(this).hasAttr('id')) {
-            // console.log("true");
-        } else {
-            var elementUniqueId = idGen.getId();
-
-            $(this).attr('id', elementUniqueId);
-            $('#js-nav-skip-links').append(
-                '<li><a href="#' + elementUniqueId + '">Go to ' + (typeof elementAriaLabel !== 'undefined' ? elementAriaLabel : (elementText != '' ? elementText : noContent)) + " (" + elementName + ")" + "</a></li>"
-            );
-        }
-    });
-
-    /*
-     * Design options
-     * optional styles based on checkboxes
-     */
-
-    $('.design-option').on('change', function() {
-        var elementId = this.id;
-
-        if(this.checked) {
-            $('body').addClass(elementId);
+
+    // Indeterminate checkbox — must be set via JS, cannot be done in HTML
+    const checkIndeterminate = document.getElementById('check-indeterminate');
+    if (checkIndeterminate) checkIndeterminate.indeterminate = true;
+
+    // Design tier toggles — apply/remove body class matching checkbox id
+    $('.design-option').on('change', function () {
+        if (this.checked) {
+            $('body').addClass(this.id);
         } else {
-            $('body').removeClass(elementId);
+            $('body').removeClass(this.id);
         }
     });
 

design-basic.css

@@ -1,8 +1,9 @@
- fieldset {
-        border: 1px solid var(--text-color-pos)
-    }
-
+fieldset {
+    border: 1px solid var(--color-text);
+}
 
 @media (prefers-color-scheme: dark) {
-    border-color: var(--text-color-pos)
-}
+    fieldset {
+        border-color: var(--color-text);
+    }
+}