From b457163dbf122c87e5cab2c0154e43945427958f Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 20 Apr 2026 05:46:54 +0000 Subject: [PATCH 1/3] Fix four immediate bugs - Remove empty

(no content, debug attribute) - Fix slider oninput: hyphenated names are not valid JS identifiers - Fix pattern title: said 'uppercase letters' but pattern is [0-9]{3} - Fix design-basic.css: add missing semicolon, wrap bare property in a selector, replace undefined --text-color-pos with --color-text - Update CLAUDE.md: nav should be collapsed by default https://claude.ai/code/session_01JwsuyxwfMZfKQhT9twfkRY --- CLAUDE.md | 3 ++- design-basic.css | 13 +++++++------ index.html | 5 ++--- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8513f61..5151644 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -127,7 +127,8 @@ Replace the dynamic skip-link generator with a **static, always-visible ` @@ -49,10 +60,7 @@

Design

- - - - +

For more details please visit MDN The native form widgets

@@ -192,6 +200,14 @@

Variants

+ +

Indeterminate

+
+
+ + +
+
@@ -745,58 +761,146 @@

Variants

-
-

Checkbox Group

- -

What do you wanna do today?

-

Choose

+
+ Email
- - + +
- - + +
-
- Not available +
+ +
-
- Not available +
+ +
- - + +
- -

Choose (required)

+
+ +
+ Telephone
- - + +
- - + + +
+
+ + +
+
+ + +
+
+ +
-
+ -
-

Checkbox Group

 - -

What do you wanna do today?

-

Choose

+
+ URL
- - + + +
+
+ + +
+
+ +
- - + + +
+
+ + +
+
+
+ +
+ Number +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + +
+ Color +
+
+ + +
+
+ +
Not available @@ -805,24 +909,173 @@

Checkbox Group

Not available
- - + +
- -

Choose (required)

+
+ +
+ File +
+
+ + +
+
+ Not available +
+
+ + +
+
+ Not available +
+
+ + +
+
+
+ +
+ Date +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ Time +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ Buttons + +

Default

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Disabled

- - + +
+
+ +
+
+ +
+
+
- - +
+
+

Grouping: ARIA role="group"

+

An alternative to <fieldset> + <legend>. The group label is provided by an element referenced with aria-labelledby.

+
+

Activities

+ +

What do you wanna do today?

+

Choose

+
+
+ + +
+
+ + +
+
+ Not available +
+
+ Not available +
+
+ + +
+
+ +

Choose (required)

+
+
+ + +
+
+ + +
+
+
+
+ diff --git a/style.css b/style.css index a9e420e..6f30ed8 100644 --- a/style.css +++ b/style.css @@ -133,8 +133,37 @@ body.design-01 button { font-family: inherit; } -body.design-02 label { - display: inline-block; - width: 12rem; +/* Minimal Design — Allianz Blue accent */ +body.design-02 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), +body.design-02 textarea, +body.design-02 select { + border: 1px solid var(--color-link); + border-radius: 4px; + padding: .375rem .5rem; font-size: 100%; + font-family: inherit; + width: 100%; + box-sizing: border-box; +} + +body.design-02 input:focus-visible, +body.design-02 textarea:focus-visible, +body.design-02 select:focus-visible, +body.design-02 button:focus-visible { + outline: 2px solid var(--color-link); + outline-offset: 2px; +} + +body.design-02 button, +body.design-02 input[type="submit"], +body.design-02 input[type="reset"], +body.design-02 input[type="button"] { + background-color: var(--color-link); + color: var(--color-bg-01); + border: none; + border-radius: 4px; + padding: .375rem .75rem; + cursor: pointer; + font-size: 100%; + font-family: inherit; }