From 6fa674339ed0c89591c1bafec93417173e135d05 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Tue, 26 Aug 2025 17:37:21 +0200
Subject: [PATCH 01/17] Begin A11y improvements

---
 src/demos.md                       |  2 +-
 src/lib/containers/ListItem.svelte | 53 ++++++++++++------------------
 src/routes/5.svelte                |  2 +-
 static/llms.txt                    |  2 +-
 4 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/demos.md b/src/demos.md
index 8edd70c9..1238d902 100644
--- a/src/demos.md
+++ b/src/demos.md
@@ -328,7 +328,7 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
diff --git a/src/lib/containers/ListItem.svelte b/src/lib/containers/ListItem.svelte
index 57b7e21d..0ef58465 100644
--- a/src/lib/containers/ListItem.svelte
+++ b/src/lib/containers/ListItem.svelte
@@ -10,7 +10,15 @@
     | ({ label: true } & NotButton<HTMLLabelAttributes>)
     | ({ href: string } & NotButton<HTMLAnchorAttributes>);
 
-  let props: {
+  let {
+    leading,
+    overline = "",
+    headline = "",
+    supporting = "",
+    trailing,
+    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    ..._props
+  }: {
     leading?: Snippet;
     overline?: string;
     headline?: string;
@@ -18,19 +26,11 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
-  let _lines = $derived(
-    props.lines ||
-      (props.overline && props.supporting ? 3 : props.overline || props.supporting ? 2 : 1),
-  );
+
+  let props = $derived({ role: "listitem", "aria-label": headline, ..._props });
 </script>
 
-{#snippet content(
-  leading: Snippet | undefined,
-  overline: string,
-  headline: string,
-  supporting: string,
-  trailing: Snippet | undefined,
-)}
+{#snippet content()}
   {#if leading}
     <div class="leading">
       {@render leading()}
@@ -54,35 +54,24 @@
 {/snippet}
 
 {#if "label" in props}
-  {@const {
-    leading,
-    overline = "",
-    headline = "",
-    supporting = "",
-    trailing,
-    label: _,
-    ...extra
-  } = props}
-  <label class="m3-container focus-inset lines-{_lines}" {...extra}>
+  {@const { label: _, ...extra } = props}
+  <label class="m3-container focus-inset lines-{lines}" {...extra}>
     <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
+    {@render content()}
   </label>
 {:else if "onclick" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <button type="button" class="m3-container focus-inset lines-{_lines}" {...extra}>
+  <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
     <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
+    {@render content()}
   </button>
 {:else if "href" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <a class="m3-container focus-inset lines-{_lines}" {...extra}>
+  <a class="m3-container focus-inset lines-{lines}" {...props}>
     <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
+    {@render content()}
   </a>
 {:else}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <div class="m3-container lines-{_lines}" {...extra}>
-    {@render content(leading, overline, headline, supporting, trailing)}
+  <div class="m3-container lines-{lines}" {...props}>
+    {@render content()}
   </div>
 {/if}
 
diff --git a/src/routes/5.svelte b/src/routes/5.svelte
index 94801b19..bd559e18 100644
--- a/src/routes/5.svelte
+++ b/src/routes/5.svelte
@@ -46,7 +46,7 @@ const relevantLinks = [{"title":"ListItem.sv","link":"https://github.com/KTibow/
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
diff --git a/static/llms.txt b/static/llms.txt
index 482163e9..9d70d660 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -819,7 +819,7 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">

From 49118b814de6a07daf56ce3ef6c94619ee7f1bc5 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Tue, 26 Aug 2025 17:52:13 +0200
Subject: [PATCH 02/17] Wrap in li

---
 src/lib/containers/ListItem.svelte | 48 +++++++++++++++---------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/containers/ListItem.svelte b/src/lib/containers/ListItem.svelte
index 0ef58465..27fe6619 100644
--- a/src/lib/containers/ListItem.svelte
+++ b/src/lib/containers/ListItem.svelte
@@ -17,7 +17,7 @@
     supporting = "",
     trailing,
     lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
-    ..._props
+    ...props
   }: {
     leading?: Snippet;
     overline?: string;
@@ -26,8 +26,6 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
-
-  let props = $derived({ role: "listitem", "aria-label": headline, ..._props });
 </script>
 
 {#snippet content()}
@@ -53,27 +51,29 @@
   {/if}
 {/snippet}
 
-{#if "label" in props}
-  {@const { label: _, ...extra } = props}
-  <label class="m3-container focus-inset lines-{lines}" {...extra}>
-    <Layer />
-    {@render content()}
-  </label>
-{:else if "onclick" in props}
-  <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
-    <Layer />
-    {@render content()}
-  </button>
-{:else if "href" in props}
-  <a class="m3-container focus-inset lines-{lines}" {...props}>
-    <Layer />
-    {@render content()}
-  </a>
-{:else}
-  <div class="m3-container lines-{lines}" {...props}>
-    {@render content()}
-  </div>
-{/if}
+<li style:display="contents" aria-label={headline}>
+  {#if "label" in props}
+    {@const { label: _, ...extra } = props}
+    <label class="m3-container focus-inset lines-{lines}" {...extra}>
+      <Layer />
+      {@render content()}
+    </label>
+  {:else if "onclick" in props}
+    <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </button>
+  {:else if "href" in props}
+    <a class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </a>
+  {:else}
+    <div class="m3-container lines-{lines}" {...props}>
+      {@render content()}
+    </div>
+  {/if}
+</li>
 
 <style>
   .m3-container {

From 0469820ca7abcc5805485a9e9766027b929c739b Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Tue, 26 Aug 2025 18:25:29 +0200
Subject: [PATCH 03/17] Loading stuff

---
 src/demos.md                            | 28 ++++++++++++-------------
 src/lib/forms/CircularProgress.svelte   | 10 +++++++--
 src/lib/forms/LinearProgress.svelte     | 19 +++++++++++++++--
 src/lib/forms/LoadingIndicator.svelte   |  7 +++++--
 src/lib/forms/WavyLinearProgress.svelte |  9 ++++++--
 src/lib/misc/typing-utils.ts            |  3 +++
 src/routes/12.svelte                    | 24 ++++++++++-----------
 src/routes/13.svelte                    |  4 ++--
 static/llms.txt                         | 28 ++++++++++++-------------
 9 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/src/demos.md b/src/demos.md
index 1238d902..8596517a 100644
--- a/src/demos.md
+++ b/src/demos.md
@@ -628,12 +628,12 @@ let selected = $state(false);
 Minimal demo:
 
 ```svelte
-<LinearProgress percent={60} />
-<LinearProgressEstimate sToHalfway={2} />
-<WavyLinearProgress percent={60} />
-<WavyLinearProgressEstimate sToHalfway={2} />
-<CircularProgress percent={60} />
-<CircularProgressEstimate sToHalfway={2} />
+<LinearProgress percent={60} aria-label="Loading episodes" />
+<LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<WavyLinearProgress percent={60} aria-label="Loading episodes" />
+<WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<CircularProgress percent={60} aria-label="Loading episodes" />
+<CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -673,17 +673,17 @@ let percent = $state(10);
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -699,7 +699,7 @@ let percent = $state(10);
 Minimal demo:
 
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -719,7 +719,7 @@ let container = $state(false);
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 ```
 
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index e72d3f51..8bf767d1 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { OneOf } from "$lib/misc/typing-utils";
 
   let {
     percent,
     size = 48,
     thickness = 4,
-  }: { percent: number; size?: number; thickness?: number } & HTMLAttributes<SVGElement> = $props();
+    ...props
+  }: { percent: number; size?: number; thickness?: number } & OneOf<{
+    "aria-label": string;
+    "aria-labelledby": string;
+  }> = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -18,6 +22,8 @@
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
   role="progressbar"
+  aria-valuenow={percent}
+  {...props}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
index 68e527a9..e839f447 100644
--- a/src/lib/forms/LinearProgress.svelte
+++ b/src/lib/forms/LinearProgress.svelte
@@ -1,8 +1,23 @@
 <script lang="ts">
-  let { percent, height = 4 }: { percent: number; height?: number } = $props();
+  import type { OneOf } from "$lib/misc/typing-utils";
+
+  let {
+    percent,
+    height = 4,
+    ...props
+  }: { percent: number; height?: number } & OneOf<{
+    "aria-label": string;
+    "aria-labelledby": string;
+  }> = $props();
 </script>
 
-<div class="m3-container" role="progressbar" style:height="{height / 16}rem">
+<div
+  class="m3-container"
+  role="progressbar"
+  aria-valuenow={percent}
+  style:height="{height / 16}rem"
+  {...props}
+>
   <div class="percent" style:width="{percent}%"></div>
   <div class="track"></div>
 </div>
diff --git a/src/lib/forms/LoadingIndicator.svelte b/src/lib/forms/LoadingIndicator.svelte
index 792ad4aa..4d0d7f1f 100644
--- a/src/lib/forms/LoadingIndicator.svelte
+++ b/src/lib/forms/LoadingIndicator.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+  import type { OneOf } from "$lib/misc/typing-utils";
+
   // for more weird loaders check out https://www.npmjs.com/package/kreations
   let {
     size = 48,
     container = false,
     center = true,
+    ...props
   }: {
     size?: number;
     container?: boolean;
     center?: boolean;
-  } = $props();
+  } & OneOf<{ "aria-label": string; "aria-labelledby": string }> = $props();
 </script>
 
-<svg width={size} height={size} class:container class:center>
+<svg width={size} height={size} class:container class:center role="progressbar" {...props}>
   <path fill="currentColor">
     <animate
       attributeName="d"
diff --git a/src/lib/forms/WavyLinearProgress.svelte b/src/lib/forms/WavyLinearProgress.svelte
index 2b32af0e..0fb0b916 100644
--- a/src/lib/forms/WavyLinearProgress.svelte
+++ b/src/lib/forms/WavyLinearProgress.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { linear, trackOpacity } from "./_wavy";
+  import type { OneOf } from "$lib/misc/typing-utils";
 
   let {
     width = 600,
     height = 10,
     thickness = 4,
     percent,
-  }: { width?: number; height?: number; thickness?: number; percent: number } = $props();
+    ...props
+  }: { width?: number; height?: number; thickness?: number; percent: number } & OneOf<{
+    "aria-label": string;
+    "aria-labelledby": string;
+  }> = $props();
 
   let time = $state(0);
 
@@ -39,7 +44,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...props}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/misc/typing-utils.ts b/src/lib/misc/typing-utils.ts
index 35c2bd27..70f92a51 100644
--- a/src/lib/misc/typing-utils.ts
+++ b/src/lib/misc/typing-utils.ts
@@ -2,3 +2,6 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 
 export type NotButton<T> = Omit<T, "onclick">;
 export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;
+// thanks to https://stackoverflow.com/a/52140738/15557835
+export type OneOf<T, TKey extends keyof T = keyof T> =
+    TKey extends keyof T ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>> : never
diff --git a/src/routes/12.svelte b/src/routes/12.svelte
index b723c235..23fa2025 100644
--- a/src/routes/12.svelte
+++ b/src/routes/12.svelte
@@ -25,12 +25,12 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}LinearProgress percent={60} />
-${"<"}LinearProgressEstimate sToHalfway={2} />
-${"<"}WavyLinearProgress percent={60} />
-${"<"}WavyLinearProgressEstimate sToHalfway={2} />
-${"<"}CircularProgress percent={60} />
-${"<"}CircularProgressEstimate sToHalfway={2} />`;
+const minimalDemo = `${"<"}LinearProgress percent={60} aria-label="Loading episodes" />
+${"<"}LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+${"<"}WavyLinearProgress percent={60} aria-label="Loading episodes" />
+${"<"}WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+${"<"}CircularProgress percent={60} aria-label="Loading episodes" />
+${"<"}CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />`;
 const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgress.svelte"},{"title":"LinearProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgressEstimate.svelte"},{"title":"WavyLinearProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/WavyLinearProgress.svelte"},{"title":"WavyLinearProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/WavyLinearProgressEstimate.svelte"},{"title":"CircularProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgress.svelte"},{"title":"CircularProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgressEstimate.svelte"},{"title":"Slider.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/Slider.svelte"}];
 </script>
 
@@ -51,17 +51,17 @@ const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/K
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
diff --git a/src/routes/13.svelte b/src/routes/13.svelte
index 45e8ce7a..6865b842 100644
--- a/src/routes/13.svelte
+++ b/src/routes/13.svelte
@@ -15,7 +15,7 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}LoadingIndicator />`;
+const minimalDemo = `${"<"}LoadingIndicator aria-label="Loading episodes" />`;
 const relevantLinks = [{"title":"LoadingIndicator.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LoadingIndicator.svelte"}];
 </script>
 
@@ -26,6 +26,6 @@ const relevantLinks = [{"title":"LoadingIndicator.sv","link":"https://github.com
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 </InternalCard>
diff --git a/static/llms.txt b/static/llms.txt
index 9d70d660..c8849557 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -1054,12 +1054,12 @@ let selected = $state(false);` to make this demo:
 
 Minimal demo:
 ```svelte
-<LinearProgress percent={60} />
-<LinearProgressEstimate sToHalfway={2} />
-<WavyLinearProgress percent={60} />
-<WavyLinearProgressEstimate sToHalfway={2} />
-<CircularProgress percent={60} />
-<CircularProgressEstimate sToHalfway={2} />
+<LinearProgress percent={60} aria-label="Loading episodes" />
+<LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<WavyLinearProgress percent={60} aria-label="Loading episodes" />
+<WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<CircularProgress percent={60} aria-label="Loading episodes" />
+<CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
 ```
 
 The M3 Svelte interactive demo for this component uses LinearProgress, LinearProgressEstimate, WavyLinearProgress, WavyLinearProgressEstimate, CircularProgress, CircularProgressEstimate, Button, Slider with the TS `let type: "linear" | "linear-wavy" | "circular" = $state("linear");
@@ -1083,17 +1083,17 @@ let percent = $state(10);` to make this demo:
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -1108,7 +1108,7 @@ let percent = $state(10);` to make this demo:
 
 Minimal demo:
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 The M3 Svelte interactive demo for this component uses LoadingIndicator with the TS `let container = $state(false);` to make this demo:
@@ -1119,7 +1119,7 @@ The M3 Svelte interactive demo for this component uses LoadingIndicator with the
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 ```
 

From 16b970ef969b9c46af69bc78a3d07bec8e61bfb5 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Tue, 26 Aug 2025 18:32:45 +0200
Subject: [PATCH 04/17] Add to estimates too

---
 src/lib/forms/CircularProgress.svelte           |  7 ++-----
 src/lib/forms/CircularProgressEstimate.svelte   |  6 +++++-
 src/lib/forms/LinearProgress.svelte             |  7 ++-----
 src/lib/forms/LinearProgressEstimate.svelte     |  9 ++++++++-
 src/lib/forms/WavyLinearProgress.svelte         | 12 +++++++-----
 src/lib/forms/WavyLinearProgressEstimate.svelte | 11 +++++++++--
 src/lib/misc/typing-utils.ts                    |  1 +
 7 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index 8bf767d1..536e6f5e 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import type { OneOf } from "$lib/misc/typing-utils";
+  import type { OneOf, ProgressAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     size = 48,
     thickness = 4,
     ...props
-  }: { percent: number; size?: number; thickness?: number } & OneOf<{
-    "aria-label": string;
-    "aria-labelledby": string;
-  }> = $props();
+  }: { percent: number; size?: number; thickness?: number } & ProgressAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
diff --git a/src/lib/forms/CircularProgressEstimate.svelte b/src/lib/forms/CircularProgressEstimate.svelte
index aede4604..8b85a154 100644
--- a/src/lib/forms/CircularProgressEstimate.svelte
+++ b/src/lib/forms/CircularProgressEstimate.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+  import type { ProgressAria } from "$lib/misc/typing-utils";
+
   let {
     sToHalfway = 1,
     size = 48,
     thickness = 2,
+    ...props
   }: {
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-  } = $props();
+  } & ProgressAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -23,6 +26,7 @@
   role="progressbar"
   style:--speed="{sToHalfway * 8}s"
   style:--circumference={circumference}
+  {...props}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
index e839f447..ce83c8b7 100644
--- a/src/lib/forms/LinearProgress.svelte
+++ b/src/lib/forms/LinearProgress.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import type { OneOf } from "$lib/misc/typing-utils";
+  import type { ProgressAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     height = 4,
     ...props
-  }: { percent: number; height?: number } & OneOf<{
-    "aria-label": string;
-    "aria-labelledby": string;
-  }> = $props();
+  }: { percent: number; height?: number } & ProgressAria = $props();
 </script>
 
 <div
diff --git a/src/lib/forms/LinearProgressEstimate.svelte b/src/lib/forms/LinearProgressEstimate.svelte
index 6908805d..fc65e80a 100644
--- a/src/lib/forms/LinearProgressEstimate.svelte
+++ b/src/lib/forms/LinearProgressEstimate.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  let { sToHalfway = 1, height = 4 }: { sToHalfway?: number; height?: number } = $props();
+  import type { ProgressAria } from "$lib/misc/typing-utils";
+
+  let {
+    sToHalfway = 1,
+    height = 4,
+    ...props
+  }: { sToHalfway?: number; height?: number } & ProgressAria = $props();
   /*
   Easing calculated with
   // 1) define the original mapping f(y)=time-%, capped at 100% for y=1
@@ -72,6 +78,7 @@
   role="progressbar"
   style:height="{height / 16}rem"
   style:--speed="{sToHalfway * 8}s"
+  {...props}
 >
   <div class="percent"></div>
   <div class="track"></div>
diff --git a/src/lib/forms/WavyLinearProgress.svelte b/src/lib/forms/WavyLinearProgress.svelte
index 0fb0b916..6f124cb6 100644
--- a/src/lib/forms/WavyLinearProgress.svelte
+++ b/src/lib/forms/WavyLinearProgress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { linear, trackOpacity } from "./_wavy";
-  import type { OneOf } from "$lib/misc/typing-utils";
+  import type { ProgressAria } from "$lib/misc/typing-utils";
 
   let {
     width = 600,
@@ -9,10 +9,12 @@
     thickness = 4,
     percent,
     ...props
-  }: { width?: number; height?: number; thickness?: number; percent: number } & OneOf<{
-    "aria-label": string;
-    "aria-labelledby": string;
-  }> = $props();
+  }: {
+    width?: number;
+    height?: number;
+    thickness?: number;
+    percent: number;
+  } & ProgressAria = $props();
 
   let time = $state(0);
 
diff --git a/src/lib/forms/WavyLinearProgressEstimate.svelte b/src/lib/forms/WavyLinearProgressEstimate.svelte
index 88d6ab3f..845def3d 100644
--- a/src/lib/forms/WavyLinearProgressEstimate.svelte
+++ b/src/lib/forms/WavyLinearProgressEstimate.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ProgressAria } from "$lib/misc/typing-utils";
   import { linear, trackOpacity } from "./_wavy";
 
   let {
@@ -6,7 +7,13 @@
     width = 600,
     height = 10,
     thickness = 4,
-  }: { sToHalfway?: number; width?: number; height?: number; thickness?: number } = $props();
+    ...props
+  }: {
+    sToHalfway?: number;
+    width?: number;
+    height?: number;
+    thickness?: number;
+  } & ProgressAria = $props();
 
   let top = $derived(thickness * 0.5);
   let bottom = $derived(height - thickness * 0.5);
@@ -51,7 +58,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" {...props}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/misc/typing-utils.ts b/src/lib/misc/typing-utils.ts
index 70f92a51..409aba14 100644
--- a/src/lib/misc/typing-utils.ts
+++ b/src/lib/misc/typing-utils.ts
@@ -5,3 +5,4 @@ export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttribu
 // thanks to https://stackoverflow.com/a/52140738/15557835
 export type OneOf<T, TKey extends keyof T = keyof T> =
     TKey extends keyof T ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>> : never
+export type ProgressAria = OneOf<{ "aria-label": string; "aria-labelledby": string }>
\ No newline at end of file

From 74d66853190858a6cd7b05f89786f401e346ab6d Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 14:01:29 +0200
Subject: [PATCH 05/17] Dialogs

---
 src/lib/containers/Dialog.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/containers/Dialog.svelte b/src/lib/containers/Dialog.svelte
index 410673a5..bd851ff3 100644
--- a/src/lib/containers/Dialog.svelte
+++ b/src/lib/containers/Dialog.svelte
@@ -34,6 +34,8 @@
     if (open) dialog.showModal();
     else dialog.close();
   });
+
+  const id = $props.id();
 </script>
 
 <dialog
@@ -61,12 +63,13 @@
         ? "closerequest"
         : "any")}
   role="alertdialog"
+  aria-labelledby="{id}headline"
   {...extra}
 >
   {#if icon}
     <Icon {icon} width="1.5rem" height="1.5rem" />
   {/if}
-  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
+  <h2 class="headline m3-font-headline-small" class:center={icon} id="{id}headline">{headline}</h2>
   <div class="content m3-font-body-medium">
     {@render children()}
   </div>

From 32ae072981ce59d3c77f4f201e314c143cc25997 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 14:08:43 +0200
Subject: [PATCH 06/17] Snackbars

---
 src/lib/containers/SnackbarItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/containers/SnackbarItem.svelte b/src/lib/containers/SnackbarItem.svelte
index 28d870d2..9c55d3e6 100644
--- a/src/lib/containers/SnackbarItem.svelte
+++ b/src/lib/containers/SnackbarItem.svelte
@@ -5,7 +5,7 @@
   let { children, ...extra }: { children: Snippet } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" {...extra}>
+<div class="m3-container" role="status" {...extra}>
   {@render children()}
 </div>
 

From 0bbe4b259a9bc8c641d9c4f123b5c8d281baf0db Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 16:19:58 +0200
Subject: [PATCH 07/17] Remove aria-label

---
 src/lib/containers/ListItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/containers/ListItem.svelte b/src/lib/containers/ListItem.svelte
index 27fe6619..4950dff3 100644
--- a/src/lib/containers/ListItem.svelte
+++ b/src/lib/containers/ListItem.svelte
@@ -51,7 +51,7 @@
   {/if}
 {/snippet}
 
-<li style:display="contents" aria-label={headline}>
+<li style:display="contents">
   {#if "label" in props}
     {@const { label: _, ...extra } = props}
     <label class="m3-container focus-inset lines-{lines}" {...extra}>

From bace5762d6e6787c7666932ce7932e68df2e555b Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 18:38:44 +0200
Subject: [PATCH 08/17] Date picker

---
 src/lib/forms/_picker/CalendarPicker.svelte | 64 ++++++++++++++-------
 src/lib/forms/_picker/Header.svelte         | 10 +++-
 src/lib/forms/_picker/Item.svelte           | 13 +----
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/lib/forms/_picker/CalendarPicker.svelte b/src/lib/forms/_picker/CalendarPicker.svelte
index 3dda81c4..40353d81 100644
--- a/src/lib/forms/_picker/CalendarPicker.svelte
+++ b/src/lib/forms/_picker/CalendarPicker.svelte
@@ -15,38 +15,62 @@
 
   const makeCalendar = (year: number, month: number) => {
     const firstDay = new Date(year, month, 1);
-    return Array.from({ length: 42 }, (_, i: number) => {
+    const days = Array.from({ length: 42 }, (_, i: number) => {
       const date = new Date(year, month, i - firstDay.getDay() + 1);
       const day = date.getDate();
       const iso =
-        year.toString().padStart(4, "0") +
+        date.getFullYear().toString().padStart(4, "0") +
         "-" +
-        (month + 1).toString().padStart(2, "0") +
+        (date.getMonth() + 1).toString().padStart(2, "0") +
         "-" +
-        date.getDate().toString().padStart(2, "0");
-      return { disabled: date.getMonth() != month, day, iso };
+        day.toString().padStart(2, "0");
+      const label = date.toLocaleDateString(undefined, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+      return { disabled: date.getMonth() != month, day, iso, label };
     });
+
+    const rows = [];
+    for (let r = 0; r < 6; r++) {
+      rows.push(days.slice(r * 7, (r + 1) * 7));
+    }
+
+    return rows;
   };
 
   let today = $state(new Date());
   setInterval(() => (today = new Date()), 1000 * 60);
 </script>
 
-<div class="m3-container">
-  {#each "SMTWTFS" as day}
-    <div class="day m3-font-body-small">{day}</div>
-  {/each}
-  {#each makeCalendar(focusedYear, focusedMonth) as day (day.iso + (day.disabled ? "-disabled" : ""))}
-    <Item
-      disabled={day.disabled || !dateValidator(day.iso)}
-      today={!day.disabled &&
-        focusedYear == today.getFullYear() &&
-        focusedMonth == today.getMonth() &&
-        day.day == today.getDate()}
-      selected={!day.disabled && day.iso == chosenDate}
-      label={day.day.toString()}
-      onclick={() => (chosenDate = day.iso)}
-    />
+<div class="m3-container" role="grid">
+  <div style:display="contents" role="row">
+    {#each ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] as day}
+      <!-- TODO: use a tooltip -->
+      <div class="day m3-font-body-small" role="columnheader" aria-label={day}>{day.at(0)}</div>
+    {/each}
+  </div>
+  {#each makeCalendar(focusedYear, focusedMonth) as row}
+    <div style:display="contents" role="row">
+      {#each row as day (day.iso + (day.disabled ? "-disabled" : ""))}
+        {@const disabled = day.disabled || !dateValidator(day.iso)}
+        <div style:display="contents" role={disabled ? undefined : "gridcell"}>
+          <Item
+            {disabled}
+            today={!day.disabled &&
+              focusedYear == today.getFullYear() &&
+              focusedMonth == today.getMonth() &&
+              day.day == today.getDate()}
+            selected={!day.disabled && day.iso == chosenDate}
+            label={day.day.toString()}
+            onclick={() => (chosenDate = day.iso)}
+            aria-label={day.label}
+          />
+        </div>
+      {/each}
+    </div>
   {/each}
 </div>
 
diff --git a/src/lib/forms/_picker/Header.svelte b/src/lib/forms/_picker/Header.svelte
index 7253c467..ae7ffa2d 100644
--- a/src/lib/forms/_picker/Header.svelte
+++ b/src/lib/forms/_picker/Header.svelte
@@ -31,6 +31,7 @@
       type="button"
       class="arrow"
       onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
+      aria-label={getShortMonth((focusedMonth - 1 + 12) % 12)}
     >
       <Layer />
       <Icon icon={iconLeft} />
@@ -45,7 +46,12 @@
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
-    <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+    <button
+      type="button"
+      class="arrow"
+      onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}
+      aria-label={getShortMonth((focusedMonth + 1) % 12)}
+    >
       <Layer />
       <Icon icon={iconRight} />
     </button>
@@ -56,6 +62,7 @@
       class="arrow"
       disabled={focusedYear <= startYear}
       onclick={() => focusedYear--}
+      aria-label={(focusedYear - 1).toString()}
     >
       <Layer />
       <Icon icon={iconLeft} />
@@ -75,6 +82,7 @@
       class="arrow"
       disabled={focusedYear >= endYear}
       onclick={() => focusedYear++}
+      aria-label={(focusedYear + 1).toString()}
     >
       <Layer />
       <Icon icon={iconRight} />
diff --git a/src/lib/forms/_picker/Item.svelte b/src/lib/forms/_picker/Item.svelte
index efa80b5f..f938bcc8 100644
--- a/src/lib/forms/_picker/Item.svelte
+++ b/src/lib/forms/_picker/Item.svelte
@@ -2,28 +2,21 @@
   import Layer from "$lib/misc/Layer.svelte";
 
   let {
-    disabled,
     today,
     selected,
     label,
-    onclick,
+    ...props
   }: {
     disabled: boolean;
     today: boolean;
     selected: boolean;
     label: string;
     onclick: () => void;
+    "aria-label": string;
   } = $props();
 </script>
 
-<button
-  type="button"
-  class="item m3-font-body-small"
-  {disabled}
-  class:today
-  class:selected
-  {onclick}
->
+<button type="button" class="item m3-font-body-small" class:today class:selected {...props}>
   <Layer />
   {label}
 </button>

From 5b9f1905d82d8c8d8b67510e27319fc7e3532dfb Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 18:45:41 +0200
Subject: [PATCH 09/17] Icons

---
 src/lib/misc/_icon.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/misc/_icon.svelte b/src/lib/misc/_icon.svelte
index 75750414..da15858e 100644
--- a/src/lib/misc/_icon.svelte
+++ b/src/lib/misc/_icon.svelte
@@ -6,14 +6,22 @@
     width = "1em",
     height = "1em",
     class: clazz,
+    ...props
   }: {
     icon: IconifyIcon;
     width?: string;
     height?: string;
     class?: string;
-  } = $props();
+  } & Partial<{ "aria-label": string; "aria-labelledby": string }> = $props();
 </script>
 
-<svg {width} {height} class={clazz} viewBox="0 0 {icon.width} {icon.height}">
+<svg
+  {width}
+  {height}
+  class={clazz}
+  viewBox="0 0 {icon.width} {icon.height}"
+  aria-hidden={!props["aria-label"] && !props["aria-labelledby"]}
+  {...props}
+>
   {@html icon.body}
 </svg>

From 39763fa6321d7ffbf2b46934531fe74ba2547707 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 18:52:35 +0200
Subject: [PATCH 10/17] Menus

---
 src/lib/containers/Menu.svelte     | 2 +-
 src/lib/containers/MenuItem.svelte | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/containers/Menu.svelte b/src/lib/containers/Menu.svelte
index 6b2ab057..1c86fb5d 100644
--- a/src/lib/containers/Menu.svelte
+++ b/src/lib/containers/Menu.svelte
@@ -4,7 +4,7 @@
   let { children }: { children: Snippet } = $props();
 </script>
 
-<div class="m3-container">
+<div class="m3-container" role="menu">
   {@render children()}
 </div>
 
diff --git a/src/lib/containers/MenuItem.svelte b/src/lib/containers/MenuItem.svelte
index 767523fd..f2f61e8b 100644
--- a/src/lib/containers/MenuItem.svelte
+++ b/src/lib/containers/MenuItem.svelte
@@ -17,7 +17,13 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset m3-font-label-large" {disabled} {onclick}>
+<button
+  type="button"
+  class="item focus-inset m3-font-label-large"
+  role="menuitem"
+  {disabled}
+  {onclick}
+>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>

From 91dc65509c56329dcd68322f0fb71792eeafd20c Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 19:21:40 +0200
Subject: [PATCH 11/17] Tabs

---
 src/lib/nav/Tabs.svelte             | 17 +++++++++++++----
 src/lib/nav/TabsLink.svelte         | 16 +++++++++++-----
 src/lib/nav/VariableTabs.svelte     |  9 ++++++---
 src/lib/nav/VariableTabsLink.svelte | 15 ++++++++++-----
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/lib/nav/Tabs.svelte b/src/lib/nav/Tabs.svelte
index 05e0e742..32dfb413 100644
--- a/src/lib/nav/Tabs.svelte
+++ b/src/lib/nav/Tabs.svelte
@@ -21,11 +21,20 @@
   const name = $props.id();
 </script>
 
-<div class="m3-container" class:primary={!secondary} style:--items={items.length}>
-  <div class="divider"></div>
+<div class="m3-container" class:primary={!secondary} style:--items={items.length} role="tablist">
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
     {@const id = name + item.value}
-    <input type="radio" {name} {id} value={item.value} bind:group={tab} {...extra} />
+    <input
+      type="radio"
+      {name}
+      {id}
+      value={item.value}
+      bind:group={tab}
+      role="tab"
+      aria-selected={item.value === tab}
+      {...extra}
+    />
     <label for={id} class:tall={item.icon}>
       <Layer />
       {#if item.icon}
@@ -34,7 +43,7 @@
       <span class="m3-font-title-small">{item.name}</span>
     </label>
   {/each}
-  <div class="bar"></div>
+  <div class="bar" aria-hidden="true"></div>
 </div>
 
 <style>
diff --git a/src/lib/nav/TabsLink.svelte b/src/lib/nav/TabsLink.svelte
index 2689c4b8..a7a90589 100644
--- a/src/lib/nav/TabsLink.svelte
+++ b/src/lib/nav/TabsLink.svelte
@@ -21,15 +21,21 @@
   } & HTMLAnchorAttributes = $props();
 </script>
 
-<div
+<nav
   class="m3-container"
   class:primary={!secondary}
   style:--items={items.length}
   style:--i={items.findIndex((i) => i.value == tab)}
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
-    <a href={item.href} class:tall={item.icon} class:selected={item.value == tab} {...extra}>
+    <a
+      href={item.href}
+      class:tall={item.icon}
+      class:selected={item.value == tab}
+      aria-current={item.value == tab ? "page" : "false"}
+      {...extra}
+    >
       <Layer />
       {#if item.icon}
         <Icon icon={item.icon} />
@@ -37,8 +43,8 @@
       <span class="m3-font-title-small">{item.name}</span>
     </a>
   {/each}
-  <div class="bar"></div>
-</div>
+  <div class="bar" aria-hidden="true"></div>
+</nav>
 
 <style>
   .m3-container {
diff --git a/src/lib/nav/VariableTabs.svelte b/src/lib/nav/VariableTabs.svelte
index 3a601293..06c6e4e6 100644
--- a/src/lib/nav/VariableTabs.svelte
+++ b/src/lib/nav/VariableTabs.svelte
@@ -20,7 +20,7 @@
   } & HTMLInputAttributes = $props();
 
   const name = $props.id();
-  let wrapper: HTMLDivElement | undefined = $state();
+  let wrapper: HTMLElement | undefined = $state();
   const handleInput = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
     const before = tab;
     const after = e.currentTarget.value;
@@ -72,8 +72,9 @@
   class:primary={!secondary}
   style:--items={items.length}
   bind:this={wrapper}
+  role="tablist"
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
     {@const id = name + item.value}
     <input
@@ -83,6 +84,8 @@
       value={item.value}
       bind:group={tab}
       oninput={handleInput}
+      role="tab"
+      aria-selected={item.value === tab}
       {...extra}
     />
     <label for={id} class:tall={item.icon}>
@@ -93,7 +96,7 @@
       <span class="m3-font-title-small">{item.name}</span>
     </label>
   {/each}
-  <div class="bar"></div>
+  <div class="bar" aria-hidden="true"></div>
 </div>
 
 <style>
diff --git a/src/lib/nav/VariableTabsLink.svelte b/src/lib/nav/VariableTabsLink.svelte
index f47bb21c..5ae9977a 100644
--- a/src/lib/nav/VariableTabsLink.svelte
+++ b/src/lib/nav/VariableTabsLink.svelte
@@ -21,7 +21,7 @@
   } & HTMLAnchorAttributes = $props();
 
   let prevTab = $state(tab);
-  let wrapper: HTMLDivElement | undefined = $state();
+  let wrapper: HTMLElement | undefined = $state();
   $effect(() => {
     if (!wrapper) return;
 
@@ -74,19 +74,20 @@
   });
 </script>
 
-<div
+<nav
   class="m3-container"
   class:primary={!secondary}
   style:--items={items.length}
   bind:this={wrapper}
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item, i}
     <a
       href={item.href}
       class:tall={item.icon}
       class:selected={item.value == tab}
       style:grid-column={i + 1}
+      aria-current={item.value == tab ? "page" : "false"}
       {...extra}
     >
       <Layer />
@@ -96,8 +97,12 @@
       <span class="m3-font-title-small">{item.name}</span>
     </a>
   {/each}
-  <div class="bar" style="grid-column: {items.findIndex((i) => i.value == tab) + 1}"></div>
-</div>
+  <div
+    class="bar"
+    aria-hidden="true"
+    style="grid-column: {items.findIndex((i) => i.value == tab) + 1}"
+  ></div>
+</nav>
 
 <style>
   .m3-container {

From a7d774b1e3d528427d51f441a503deebc76dd859 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 19:36:55 +0200
Subject: [PATCH 12/17] Buttons

---
 src/lib/buttons/ConnectedButtons.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/buttons/ConnectedButtons.svelte b/src/lib/buttons/ConnectedButtons.svelte
index cbc188e0..352e71c7 100644
--- a/src/lib/buttons/ConnectedButtons.svelte
+++ b/src/lib/buttons/ConnectedButtons.svelte
@@ -4,7 +4,7 @@
   let { round = false, children }: { round?: boolean; children: Snippet } = $props();
 </script>
 
-<div class="m3-container" class:round>
+<div class="m3-container" role="group" class:round>
   {@render children()}
 </div>
 

From a62fd0d9c26ad5978d42bfcfb5f9780c742a4cc7 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 19:40:52 +0200
Subject: [PATCH 13/17] Menu labels

---
 src/lib/containers/Menu.svelte                  | 5 +++--
 src/lib/forms/CircularProgress.svelte           | 4 ++--
 src/lib/forms/CircularProgressEstimate.svelte   | 4 ++--
 src/lib/forms/LinearProgress.svelte             | 4 ++--
 src/lib/forms/LinearProgressEstimate.svelte     | 4 ++--
 src/lib/forms/WavyLinearProgress.svelte         | 4 ++--
 src/lib/forms/WavyLinearProgressEstimate.svelte | 4 ++--
 src/lib/misc/typing-utils.ts                    | 4 ++--
 8 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/lib/containers/Menu.svelte b/src/lib/containers/Menu.svelte
index 1c86fb5d..b362448d 100644
--- a/src/lib/containers/Menu.svelte
+++ b/src/lib/containers/Menu.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import type { Snippet } from "svelte";
 
-  let { children }: { children: Snippet } = $props();
+  let { children, ...props }: { children: Snippet } & LabelledAria = $props();
 </script>
 
-<div class="m3-container" role="menu">
+<div class="m3-container" role="menu" {...props}>
   {@render children()}
 </div>
 
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index 536e6f5e..f51dbf7e 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { OneOf, ProgressAria } from "$lib/misc/typing-utils";
+  import type { OneOf, LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     size = 48,
     thickness = 4,
     ...props
-  }: { percent: number; size?: number; thickness?: number } & ProgressAria = $props();
+  }: { percent: number; size?: number; thickness?: number } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
diff --git a/src/lib/forms/CircularProgressEstimate.svelte b/src/lib/forms/CircularProgressEstimate.svelte
index 8b85a154..7b39062c 100644
--- a/src/lib/forms/CircularProgressEstimate.svelte
+++ b/src/lib/forms/CircularProgressEstimate.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ProgressAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     sToHalfway = 1,
@@ -10,7 +10,7 @@
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-  } & ProgressAria = $props();
+  } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
index ce83c8b7..0670bbdb 100644
--- a/src/lib/forms/LinearProgress.svelte
+++ b/src/lib/forms/LinearProgress.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ProgressAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     height = 4,
     ...props
-  }: { percent: number; height?: number } & ProgressAria = $props();
+  }: { percent: number; height?: number } & LabelledAria = $props();
 </script>
 
 <div
diff --git a/src/lib/forms/LinearProgressEstimate.svelte b/src/lib/forms/LinearProgressEstimate.svelte
index fc65e80a..8ab1e089 100644
--- a/src/lib/forms/LinearProgressEstimate.svelte
+++ b/src/lib/forms/LinearProgressEstimate.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ProgressAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     sToHalfway = 1,
     height = 4,
     ...props
-  }: { sToHalfway?: number; height?: number } & ProgressAria = $props();
+  }: { sToHalfway?: number; height?: number } & LabelledAria = $props();
   /*
   Easing calculated with
   // 1) define the original mapping f(y)=time-%, capped at 100% for y=1
diff --git a/src/lib/forms/WavyLinearProgress.svelte b/src/lib/forms/WavyLinearProgress.svelte
index 6f124cb6..d7f2e757 100644
--- a/src/lib/forms/WavyLinearProgress.svelte
+++ b/src/lib/forms/WavyLinearProgress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { linear, trackOpacity } from "./_wavy";
-  import type { ProgressAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     width = 600,
@@ -14,7 +14,7 @@
     height?: number;
     thickness?: number;
     percent: number;
-  } & ProgressAria = $props();
+  } & LabelledAria = $props();
 
   let time = $state(0);
 
diff --git a/src/lib/forms/WavyLinearProgressEstimate.svelte b/src/lib/forms/WavyLinearProgressEstimate.svelte
index 845def3d..639f3331 100644
--- a/src/lib/forms/WavyLinearProgressEstimate.svelte
+++ b/src/lib/forms/WavyLinearProgressEstimate.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ProgressAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import { linear, trackOpacity } from "./_wavy";
 
   let {
@@ -13,7 +13,7 @@
     width?: number;
     height?: number;
     thickness?: number;
-  } & ProgressAria = $props();
+  } & LabelledAria = $props();
 
   let top = $derived(thickness * 0.5);
   let bottom = $derived(height - thickness * 0.5);
diff --git a/src/lib/misc/typing-utils.ts b/src/lib/misc/typing-utils.ts
index 2ae4a34b..5569f2e3 100644
--- a/src/lib/misc/typing-utils.ts
+++ b/src/lib/misc/typing-utils.ts
@@ -12,5 +12,5 @@ export type NotButton<T> = Omit<T, "onclick">;
 export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;
 // thanks to https://stackoverflow.com/a/52140738/15557835
 export type OneOf<T, TKey extends keyof T = keyof T> =
-    TKey extends keyof T ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>> : never
-export type ProgressAria = OneOf<{ "aria-label": string; "aria-labelledby": string }>
\ No newline at end of file
+  TKey extends keyof T ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>> : never
+export type LabelledAria = OneOf<{ "aria-label": string; "aria-labelledby": string }>
\ No newline at end of file

From cc64a5bf5838137e54cc88f2943b3fed2a7ef6ba Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Wed, 27 Aug 2025 20:32:26 +0200
Subject: [PATCH 14/17] Add Menu labels

---
 src/demos.md                          | 7 ++++---
 src/lib/buttons/SplitButton.svelte    | 8 ++++----
 src/lib/forms/CircularProgress.svelte | 2 +-
 src/routes/2.svelte                   | 3 ++-
 src/routes/6.svelte                   | 4 ++--
 static/llms.txt                       | 7 ++++---
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/demos.md b/src/demos.md
index 1f8afb72..449077ae 100644
--- a/src/demos.md
+++ b/src/demos.md
@@ -173,6 +173,7 @@ let iconType: "none" | "left" | "full" = $state("none");
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -182,7 +183,7 @@ let iconType: "none" | "left" | "full" = $state("none");
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
@@ -389,7 +390,7 @@ let supporting = $derived(
 Minimal demo:
 
 ```svelte
-<Menu>
+<Menu aria-label="Template Menu">
   <MenuItem icon={iconCircle}>Undo</MenuItem>
   <MenuItem icon={iconSquare}>Redo</MenuItem>
   <MenuItem icon={iconTriangle}>Cut</MenuItem>
@@ -413,7 +414,7 @@ let icons = $state(false);
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
diff --git a/src/lib/buttons/SplitButton.svelte b/src/lib/buttons/SplitButton.svelte
index 65e653c8..f5f437c6 100644
--- a/src/lib/buttons/SplitButton.svelte
+++ b/src/lib/buttons/SplitButton.svelte
@@ -3,6 +3,7 @@
   import type { Snippet } from "svelte";
   import Layer from "$lib/misc/Layer.svelte";
   import Icon from "$lib/misc/_icon.svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
 
   let {
     variant,
@@ -10,15 +11,14 @@
     y = "down",
     children,
     menu,
-    onclick,
+    ...props
   }: {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    onclick: () => void;
-  } = $props();
+  } & HTMLButtonAttributes = $props();
 
   const autoclose = (node: HTMLDetailsElement) => {
     const close = (e: Event) => {
@@ -36,7 +36,7 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button type="button" class="split m3-font-label-large" {onclick}>
+  <button type="button" class="split m3-font-label-large" {...props}>
     <Layer />
     {@render children()}
   </button>
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index f51dbf7e..541af4e5 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { OneOf, LabelledAria } from "$lib/misc/typing-utils";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
diff --git a/src/routes/2.svelte b/src/routes/2.svelte
index 9f980ed5..43007a3d 100644
--- a/src/routes/2.svelte
+++ b/src/routes/2.svelte
@@ -49,6 +49,7 @@ const relevantLinks = [{"title":"SplitButton.sv","link":"https://github.com/KTib
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -58,7 +59,7 @@ const relevantLinks = [{"title":"SplitButton.sv","link":"https://github.com/KTib
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
diff --git a/src/routes/6.svelte b/src/routes/6.svelte
index 143e4f2e..ea32d646 100644
--- a/src/routes/6.svelte
+++ b/src/routes/6.svelte
@@ -16,7 +16,7 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}Menu>
+const minimalDemo = `${"<"}Menu aria-label="Template Menu">
   ${"<"}MenuItem icon={iconCircle}>Undo${"<"}/MenuItem>
   ${"<"}MenuItem icon={iconSquare}>Redo${"<"}/MenuItem>
   ${"<"}MenuItem icon={iconTriangle}>Cut${"<"}/MenuItem>
@@ -30,7 +30,7 @@ const relevantLinks = [{"title":"Menu.sv","link":"https://github.com/KTibow/m3-s
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
diff --git a/static/llms.txt b/static/llms.txt
index 8f94e01b..20efec87 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -696,6 +696,7 @@ let iconType: "none" | "left" | "full" = $state("none");` to make this demo:
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -705,7 +706,7 @@ let iconType: "none" | "left" | "full" = $state("none");` to make this demo:
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
@@ -879,7 +880,7 @@ let supporting = $derived(
 
 Minimal demo:
 ```svelte
-<Menu>
+<Menu aria-label="Template Menu">
   <MenuItem icon={iconCircle}>Undo</MenuItem>
   <MenuItem icon={iconSquare}>Redo</MenuItem>
   <MenuItem icon={iconTriangle}>Cut</MenuItem>
@@ -893,7 +894,7 @@ The M3 Svelte interactive demo for this component uses Menu, MenuItem with the T
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>

From 337272539c90ea1caa7100bb14a93c82f1f7a009 Mon Sep 17 00:00:00 2001
From: KTibow <KTibow@users.noreply.github.com>
Date: Fri, 29 Aug 2025 14:59:50 -0700
Subject: [PATCH 15/17] reformat code

---
 src/demos.md                 | 25 +++++++++++++++++++++----
 src/lib/misc/typing-utils.ts |  5 +++--
 src/routes/12.svelte         | 25 +++++++++++++++++++++----
 static/llms.txt              | 25 +++++++++++++++++++++----
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/demos.md b/src/demos.md
index 803c8675..d3d36e07 100644
--- a/src/demos.md
+++ b/src/demos.md
@@ -674,15 +674,32 @@ let percent = $state(10);
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
     <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
     <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
diff --git a/src/lib/misc/typing-utils.ts b/src/lib/misc/typing-utils.ts
index dffc13cb..e4ba6ac8 100644
--- a/src/lib/misc/typing-utils.ts
+++ b/src/lib/misc/typing-utils.ts
@@ -15,6 +15,7 @@ export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttribu
 export type DivAttrs = NotButton<HTMLAttributes<HTMLDivElement>>;
 
 // thanks to https://stackoverflow.com/a/52140738/15557835
-export type OneOf<T, TKey extends keyof T = keyof T> =
-  TKey extends keyof T ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>> : never;
+export type OneOf<T, TKey extends keyof T = keyof T> = TKey extends keyof T
+  ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>>
+  : never;
 export type LabelledAria = OneOf<{ "aria-label": string; "aria-labelledby": string }>;
diff --git a/src/routes/12.svelte b/src/routes/12.svelte
index 23fa2025..77007381 100644
--- a/src/routes/12.svelte
+++ b/src/routes/12.svelte
@@ -51,15 +51,32 @@ const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/K
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
     <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
     <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
diff --git a/static/llms.txt b/static/llms.txt
index 5e11ce40..749c8583 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -1084,15 +1084,32 @@ let percent = $state(10);` to make this demo:
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} aria-label="LinearProgressEstimate" />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgressEstimate" />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} aria-label="CircularProgressEstimate" />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
     <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} aria-label="WavyLinearProgress" />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
     <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}

From 793e6ce24a8c3bf682c246a270ea0d07d863868b Mon Sep 17 00:00:00 2001
From: KTibow <KTibow@users.noreply.github.com>
Date: Fri, 29 Aug 2025 15:14:55 -0700
Subject: [PATCH 16/17] call it extra

---
 src/lib/containers/Menu.svelte                  | 4 ++--
 src/lib/forms/CircularProgress.svelte           | 4 ++--
 src/lib/forms/CircularProgressEstimate.svelte   | 4 ++--
 src/lib/forms/LinearProgress.svelte             | 4 ++--
 src/lib/forms/LinearProgressEstimate.svelte     | 4 ++--
 src/lib/forms/LoadingIndicator.svelte           | 4 ++--
 src/lib/forms/WavyLinearProgress.svelte         | 4 ++--
 src/lib/forms/WavyLinearProgressEstimate.svelte | 4 ++--
 src/lib/forms/_picker/Item.svelte               | 4 ++--
 src/lib/misc/_icon.svelte                       | 6 +++---
 10 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/lib/containers/Menu.svelte b/src/lib/containers/Menu.svelte
index b362448d..8a298130 100644
--- a/src/lib/containers/Menu.svelte
+++ b/src/lib/containers/Menu.svelte
@@ -2,10 +2,10 @@
   import type { LabelledAria } from "$lib/misc/typing-utils";
   import type { Snippet } from "svelte";
 
-  let { children, ...props }: { children: Snippet } & LabelledAria = $props();
+  let { children, ...extra }: { children: Snippet } & LabelledAria = $props();
 </script>
 
-<div class="m3-container" role="menu" {...props}>
+<div class="m3-container" role="menu" {...extra}>
   {@render children()}
 </div>
 
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index 541af4e5..7e7bde9d 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -5,7 +5,7 @@
     percent,
     size = 48,
     thickness = 4,
-    ...props
+    ...extra
   }: { percent: number; size?: number; thickness?: number } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
@@ -20,7 +20,7 @@
   class="m3-container"
   role="progressbar"
   aria-valuenow={percent}
-  {...props}
+  {...extra}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/CircularProgressEstimate.svelte b/src/lib/forms/CircularProgressEstimate.svelte
index 7b39062c..cf61c37f 100644
--- a/src/lib/forms/CircularProgressEstimate.svelte
+++ b/src/lib/forms/CircularProgressEstimate.svelte
@@ -5,7 +5,7 @@
     sToHalfway = 1,
     size = 48,
     thickness = 2,
-    ...props
+    ...extra
   }: {
     sToHalfway?: number;
     size?: number;
@@ -26,7 +26,7 @@
   role="progressbar"
   style:--speed="{sToHalfway * 8}s"
   style:--circumference={circumference}
-  {...props}
+  {...extra}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
index 0670bbdb..c003e27c 100644
--- a/src/lib/forms/LinearProgress.svelte
+++ b/src/lib/forms/LinearProgress.svelte
@@ -4,7 +4,7 @@
   let {
     percent,
     height = 4,
-    ...props
+    ...extra
   }: { percent: number; height?: number } & LabelledAria = $props();
 </script>
 
@@ -13,7 +13,7 @@
   role="progressbar"
   aria-valuenow={percent}
   style:height="{height / 16}rem"
-  {...props}
+  {...extra}
 >
   <div class="percent" style:width="{percent}%"></div>
   <div class="track"></div>
diff --git a/src/lib/forms/LinearProgressEstimate.svelte b/src/lib/forms/LinearProgressEstimate.svelte
index 8ab1e089..c6383eb4 100644
--- a/src/lib/forms/LinearProgressEstimate.svelte
+++ b/src/lib/forms/LinearProgressEstimate.svelte
@@ -4,7 +4,7 @@
   let {
     sToHalfway = 1,
     height = 4,
-    ...props
+    ...extra
   }: { sToHalfway?: number; height?: number } & LabelledAria = $props();
   /*
   Easing calculated with
@@ -78,7 +78,7 @@
   role="progressbar"
   style:height="{height / 16}rem"
   style:--speed="{sToHalfway * 8}s"
-  {...props}
+  {...extra}
 >
   <div class="percent"></div>
   <div class="track"></div>
diff --git a/src/lib/forms/LoadingIndicator.svelte b/src/lib/forms/LoadingIndicator.svelte
index 4d0d7f1f..dd877383 100644
--- a/src/lib/forms/LoadingIndicator.svelte
+++ b/src/lib/forms/LoadingIndicator.svelte
@@ -6,7 +6,7 @@
     size = 48,
     container = false,
     center = true,
-    ...props
+    ...extra
   }: {
     size?: number;
     container?: boolean;
@@ -14,7 +14,7 @@
   } & OneOf<{ "aria-label": string; "aria-labelledby": string }> = $props();
 </script>
 
-<svg width={size} height={size} class:container class:center role="progressbar" {...props}>
+<svg width={size} height={size} class:container class:center role="progressbar" {...extra}>
   <path fill="currentColor">
     <animate
       attributeName="d"
diff --git a/src/lib/forms/WavyLinearProgress.svelte b/src/lib/forms/WavyLinearProgress.svelte
index d7f2e757..a3537f7c 100644
--- a/src/lib/forms/WavyLinearProgress.svelte
+++ b/src/lib/forms/WavyLinearProgress.svelte
@@ -8,7 +8,7 @@
     height = 10,
     thickness = 4,
     percent,
-    ...props
+    ...extra
   }: {
     width?: number;
     height?: number;
@@ -46,7 +46,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...props}>
+<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/forms/WavyLinearProgressEstimate.svelte b/src/lib/forms/WavyLinearProgressEstimate.svelte
index 639f3331..50b086da 100644
--- a/src/lib/forms/WavyLinearProgressEstimate.svelte
+++ b/src/lib/forms/WavyLinearProgressEstimate.svelte
@@ -7,7 +7,7 @@
     width = 600,
     height = 10,
     thickness = 4,
-    ...props
+    ...extra
   }: {
     sToHalfway?: number;
     width?: number;
@@ -58,7 +58,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}" role="progressbar" {...props}>
+<svg viewBox="0 0 {width} {height}" role="progressbar" {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/forms/_picker/Item.svelte b/src/lib/forms/_picker/Item.svelte
index f938bcc8..f89655b8 100644
--- a/src/lib/forms/_picker/Item.svelte
+++ b/src/lib/forms/_picker/Item.svelte
@@ -5,7 +5,7 @@
     today,
     selected,
     label,
-    ...props
+    ...extra
   }: {
     disabled: boolean;
     today: boolean;
@@ -16,7 +16,7 @@
   } = $props();
 </script>
 
-<button type="button" class="item m3-font-body-small" class:today class:selected {...props}>
+<button type="button" class="item m3-font-body-small" class:today class:selected {...extra}>
   <Layer />
   {label}
 </button>
diff --git a/src/lib/misc/_icon.svelte b/src/lib/misc/_icon.svelte
index 3c951741..ec0ff2a8 100644
--- a/src/lib/misc/_icon.svelte
+++ b/src/lib/misc/_icon.svelte
@@ -6,7 +6,7 @@
     width = "1em",
     height = "1em",
     class: clazz,
-    ...props
+    ...extra
   }: {
     icon: IconifyIcon;
     width?: string;
@@ -20,9 +20,9 @@
   {height}
   class={clazz}
   viewBox="0 0 {icon.width} {icon.height}"
-  aria-hidden={!props["aria-label"] && !props["aria-labelledby"]}
+  aria-hidden={!extra["aria-label"] && !extra["aria-labelledby"]}
   data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
-  {...props}
+  {...extra}
 >
   {@html icon.body}
 </svg>

From 25d36e4758b44d17738c14408dc348815c301705 Mon Sep 17 00:00:00 2001
From: daimond113 <contact@daimond113.com>
Date: Sat, 30 Aug 2025 00:22:45 +0200
Subject: [PATCH 17/17] Use title

---
 src/lib/forms/_picker/CalendarPicker.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/forms/_picker/CalendarPicker.svelte b/src/lib/forms/_picker/CalendarPicker.svelte
index 40353d81..78389797 100644
--- a/src/lib/forms/_picker/CalendarPicker.svelte
+++ b/src/lib/forms/_picker/CalendarPicker.svelte
@@ -49,7 +49,7 @@
   <div style:display="contents" role="row">
     {#each ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] as day}
       <!-- TODO: use a tooltip -->
-      <div class="day m3-font-body-small" role="columnheader" aria-label={day}>{day.at(0)}</div>
+      <div class="day m3-font-body-small" role="columnheader" title={day}>{day.at(0)}</div>
     {/each}
   </div>
   {#each makeCalendar(focusedYear, focusedMonth) as row}