@dezkareid/components 1.0.1 → 1.0.3

package/dist/components.min.css

@@ -1 +1 @@
-.button-module_button__-i1WR{align-items:center;border:none;border-radius:var(--spacing-4);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);justify-content:center;line-height:var(--font-line-height-none);text-decoration:none;transition:opacity .15s ease;white-space:nowrap}.button-module_button--sm__oyPIp,.button-module_button--small__seN6c{font-size:var(--font-size-200);padding:var(--spacing-4) var(--spacing-12)}.button-module_button--md__KsJg5,.button-module_button--medium__4vh1u{font-size:var(--font-size-300);padding:var(--spacing-8) var(--spacing-24)}.button-module_button--large__g15uD,.button-module_button--lg__kuuR5{font-size:var(--font-size-400);padding:var(--spacing-12) var(--spacing-32)}.button-module_button--primary__5NKaZ{background-color:var(--color-primary);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--primary__5NKaZ:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--outline__inPG2,.button-module_button--secondary__7CZqp{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.button-module_button--outline__inPG2:hover:not(.button-module_button--disabled__5X7It),.button-module_button--secondary__7CZqp:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--success__Y-GUS{background-color:var(--color-success);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--success__Y-GUS:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--ghost__7k3yA{background-color:transparent;border:1px solid transparent;color:var(--color-text-primary)}.button-module_button--ghost__7k3yA:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--disabled__5X7It{cursor:not-allowed;opacity:.4;pointer-events:none}.tag-module_tag__DqU0X{align-items:center;border-radius:var(--spacing-4);display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-100);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-none);padding:var(--spacing-4) var(--spacing-8)}.tag-module_tag--default__s9pfU{background-color:var(--color-background-secondary);color:var(--color-text-primary)}.tag-module_tag--success__e8fMj{background-color:var(--color-success);color:var(--color-text-inverse)}.tag-module_tag--danger__9b-l4{background-color:var(--color-danger);color:var(--color-text-inverse)}.card-module_card__KEaH3{background-color:var(--color-background-secondary);border-radius:var(--spacing-8);color:var(--color-text-primary);display:block;padding:var(--spacing-24);width:100%}.card-module_card--raised__hBodH{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card-module_card--flat__vLG1l{box-shadow:none}.theme-toggle-module_theme-toggle__pBmqG{align-items:center;background-color:transparent;border:none;border:1px solid var(--color-background-secondary);border-radius:var(--spacing-4);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-200);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;line-height:var(--font-line-height-none);padding:var(--spacing-8) var(--spacing-12)}.theme-toggle-module_theme-toggle__pBmqG:hover{background-color:var(--color-background-secondary)}.theme-toggle-module_theme-toggle--dark__9yf3H{border-color:var(--color-primary);color:var(--color-primary)}
+.button-module_button__-i1WR{align-items:center;border:none;border-radius:var(--border-radius-medium);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-300);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;letter-spacing:var(--font-letter-spacing-wide);line-height:var(--font-line-height-none);text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;white-space:nowrap}.button-module_button__-i1WR:focus-visible{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-primary);outline:none}.button-module_button--sm__oyPIp,.button-module_button--small__seN6c{border-radius:var(--border-radius-small);font-size:var(--font-size-200);padding:var(--spacing-4) var(--spacing-12)}.button-module_button--md__KsJg5,.button-module_button--medium__4vh1u{font-size:var(--font-size-300);padding:var(--spacing-8) var(--spacing-24)}.button-module_button--large__g15uD,.button-module_button--lg__kuuR5{border-radius:var(--border-radius-large);font-size:var(--font-size-400);padding:var(--spacing-12) var(--spacing-32)}.button-module_button--primary__5NKaZ{--button-primary-color-background:var(--color-primary);--button-primary-color-text:var(--color-text-inverse);background-color:var(--button-primary-color-background);border:1px solid transparent;color:var(--button-primary-color-text)}.button-module_button--primary__5NKaZ:hover:not(.button-module_button--disabled__5X7It){box-shadow:var(--shadow-card-hover);opacity:.92}.button-module_button--outline__inPG2,.button-module_button--secondary__7CZqp{--button-secondary-color-background:transparent;--button-secondary-color-text:var(--color-primary);--button-secondary-color-border:var(--color-primary);background-color:var(--button-secondary-color-background);border:1px solid var(--button-secondary-color-border);color:var(--button-secondary-color-text)}.button-module_button--outline__inPG2:hover:not(.button-module_button--disabled__5X7It),.button-module_button--secondary__7CZqp:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary);box-shadow:var(--shadow-subtle)}.button-module_button--success__Y-GUS{--button-success-color-background:var(--color-success);--button-success-color-text:var(--color-text-primary);background-color:var(--button-success-color-background);border:1px solid transparent;color:var(--button-success-color-text)}.button-module_button--success__Y-GUS:hover:not(.button-module_button--disabled__5X7It){box-shadow:var(--shadow-card-hover);opacity:.92}.button-module_button--ghost__7k3yA{--button-ghost-color-background:transparent;--button-ghost-color-text:var(--color-text-primary);background-color:var(--button-ghost-color-background);border:1px solid transparent;color:var(--button-ghost-color-text)}.button-module_button--ghost__7k3yA:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary);border-color:var(--color-background-secondary)}.button-module_button--disabled__5X7It{cursor:not-allowed;opacity:.4;pointer-events:none}.tag-module_tag__DqU0X{align-items:center;border-radius:var(--spacing-12);display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-100);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-none);padding:var(--spacing-4) var(--spacing-8)}.tag-module_tag--default__s9pfU{--tag-default-color-background:var(--color-background-secondary);--tag-default-color-text:var(--color-text-primary);background-color:var(--tag-default-color-background);color:var(--tag-default-color-text)}.tag-module_tag--success__e8fMj{--tag-success-color-background:var(--color-success);--tag-success-color-text:var(--color-text-primary);background-color:var(--tag-success-color-background);color:var(--tag-success-color-text)}.tag-module_tag--danger__9b-l4{--tag-danger-color-background:var(--color-danger);--tag-danger-color-text:var(--color-text-primary);background-color:var(--tag-danger-color-background);color:var(--tag-danger-color-text)}.tag-module_tag--warning__aHbOj{--tag-warning-color-background:var(--color-warning);--tag-warning-color-text:var(--color-text-primary);background-color:var(--tag-warning-color-background);color:var(--tag-warning-color-text)}.card-module_card__KEaH3{background-color:var(--color-background-secondary);border-radius:var(--spacing-8);color:var(--color-text-primary);display:block;padding:var(--spacing-24);width:100%}.card-module_card--raised__hBodH{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card-module_card--flat__vLG1l{border:1px solid var(--color-background-secondary);box-shadow:none}.theme-toggle-module_theme-toggle__pBmqG{align-items:center;background-color:transparent;border:none;border:1px solid var(--color-background-secondary);border-radius:var(--spacing-4);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-200);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;line-height:var(--font-line-height-none);padding:var(--spacing-8) var(--spacing-12)}.theme-toggle-module_theme-toggle__pBmqG:hover{background-color:var(--color-background-secondary)}.theme-toggle-module_theme-toggle--dark__9yf3H{border-color:var(--color-primary);color:var(--color-primary)}.theme-toggle-module_theme-toggle__icon__YJaUi{flex-shrink:0;height:1em;width:1em}.theme-toggle-module_theme-toggle__wrapper__Q0frz{display:inline-flex;position:relative}.theme-toggle-module_sr-only__OgD4W{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/css/tag.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"tag":"tag-module_tag__DqU0X","tag--default":"tag-module_tag--default__s9pfU","tag--success":"tag-module_tag--success__e8fMj","tag--danger":"tag-module_tag--danger__9b-l4"};
+var styles = {"tag":"tag-module_tag__DqU0X","tag--default":"tag-module_tag--default__s9pfU","tag--success":"tag-module_tag--success__e8fMj","tag--danger":"tag-module_tag--danger__9b-l4","tag--warning":"tag-module_tag--warning__aHbOj"};
 
 export { styles as default };
 //# sourceMappingURL=tag.module.css.js.map

package/dist/css/theme-toggle.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"theme-toggle":"theme-toggle-module_theme-toggle__pBmqG","theme-toggle--dark":"theme-toggle-module_theme-toggle--dark__9yf3H"};
+var styles = {"theme-toggle":"theme-toggle-module_theme-toggle__pBmqG","theme-toggle--dark":"theme-toggle-module_theme-toggle--dark__9yf3H","theme-toggle__icon":"theme-toggle-module_theme-toggle__icon__YJaUi","theme-toggle__wrapper":"theme-toggle-module_theme-toggle__wrapper__Q0frz","sr-only":"theme-toggle-module_sr-only__OgD4W"};
 
 export { styles as default };
 //# sourceMappingURL=theme-toggle.module.css.js.map

package/dist/react/Button/index.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react';
-import type { ButtonProps } from '../../shared/types/button';
-type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare function Button({ variant, size, disabled, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { ButtonProperties } from '../../shared/types/button';
+type Properties = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function Button({ variant, size, disabled, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,KAAK,KAAK,GAAG,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEnE,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAgBP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,KAAK,UAAU,GAAG,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE7E,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,2CAiBZ"}

package/dist/react/Button/index.js

@@ -3,7 +3,7 @@ import cx from '../../_virtual/index.js';
 import styles from '../../css/button.module.css.js';
 
 function Button({ variant = 'primary', size = 'md', disabled = false, children, className, ...rest }) {
-    return (jsx("button", { className: cx(styles.button, styles[`button--${variant}`], styles[`button--${size}`], disabled && styles['button--disabled'], className), disabled: disabled, ...rest, children: children }));
+    return (jsx("button", { className: cx(styles.button, styles[`button--${variant}`], styles[`button--${size}`], disabled && styles['button--disabled'], className), disabled: disabled, "aria-disabled": disabled, ...rest, children: children }));
 }
 
 export { Button };

package/dist/react/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Button/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACD,EAAA;AACN,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,WAAW,OAAO,CAAA,CAAE,CAAC,EAC5B,MAAM,CAAC,CAAA,QAAA,EAAW,IAAI,EAAE,CAAC,EACzB,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACtC,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAAA,GACd,IAAI,YAEP,QAAQ,EAAA,CACF;AAEb;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Button/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACI,EAAA;IACX,QACEA,gBACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC,EAC5B,MAAM,CAAC,WAAW,IAAI,CAAA,CAAE,CAAC,EACzB,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACtC,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,mBACH,QAAQ,EAAA,GACnB,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACF;AAEb;;;;"}

package/dist/react/Card/index.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import type { CardProps } from '../../shared/types/card';
-type Props = CardProps & HTMLAttributes<HTMLDivElement>;
-export declare function Card({ elevation, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { CardProperties } from '../../shared/types/card';
+type Properties = CardProperties & HTMLAttributes<HTMLDivElement>;
+export declare function Card({ elevation, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,KAAK,KAAK,GAAG,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD,wBAAgB,IAAI,CAAC,EAAE,SAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAMjF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,KAAK,UAAU,GAAG,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,IAAI,CAAC,EAAE,SAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAMtF"}

package/dist/react/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Card/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAS,EAAA;IAChF,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,SAAS,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC/E,QAAQ,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Card/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAc,EAAA;IACrF,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,SAAS,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC/E,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/react/Tag/index.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import type { TagProps } from '../../shared/types/tag';
-type Props = TagProps & HTMLAttributes<HTMLSpanElement>;
-export declare function Tag({ variant, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { TagProperties } from '../../shared/types/tag';
+type Properties = TagProperties & HTMLAttributes<HTMLSpanElement>;
+export declare function Tag({ variant, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGvD,KAAK,KAAK,GAAG,QAAQ,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAExD,wBAAgB,GAAG,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAM/E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,KAAK,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAElE,wBAAgB,GAAG,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAMpF"}

package/dist/react/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Tag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAS,EAAA;IAC9E,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,OAAO,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5E,QAAQ,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Tag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAc,EAAA;IACnF,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,OAAO,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5E,QAAQ,EAAA,CACJ;AAEX;;;;"}

package/dist/react/ThemeToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/ThemeToggle/index.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,4CA6B1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/ThemeToggle/index.tsx"],"names":[],"mappings":"AA8CA,wBAAgB,WAAW,4CAqC1B"}

package/dist/react/ThemeToggle/index.js

@@ -1,13 +1,16 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import cx from '../../_virtual/index.js';
 import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme.js';
 import styles from '../../css/theme-toggle.module.css.js';
 
+const SunIcon = (jsxs("svg", { "aria-hidden": "true", className: styles['theme-toggle__icon'], xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] }));
+const MoonIcon = (jsx("svg", { "aria-hidden": "true", className: styles['theme-toggle__icon'], xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 function ThemeToggle() {
     const [theme, setTheme] = useState('light');
     useEffect(() => {
         const initial = getInitialTheme();
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
         setTheme(initial);
         applyTheme(initial);
     }, []);
@@ -18,7 +21,8 @@ function ThemeToggle() {
         persistTheme(next);
     }
     const isDark = theme === 'dark';
-    return (jsx("button", { type: "button", className: cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark']), onClick: toggle, "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', "aria-pressed": isDark, children: isDark ? 'Dark' : 'Light' }));
+    const label = isDark ? 'Dark' : 'Light';
+    return (jsxs("span", { className: styles['theme-toggle__wrapper'], children: [jsxs("button", { type: "button", className: cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark']), onClick: toggle, "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', "aria-pressed": isDark, children: [isDark ? MoonIcon : SunIcon, label] }), jsxs("span", { "aria-live": "polite", className: styles['sr-only'], children: [label, " mode active"] })] }));
 }
 
 export { ThemeToggle };

package/dist/react/ThemeToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/ThemeToggle/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;SAMgB,WAAW,GAAA;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,OAAO,CAAC;IAElD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,eAAe,EAAE;QACjC,QAAQ,CAAC,OAAO,CAAC;QACjB,UAAU,CAAC,OAAO,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,MAAM,GAAA;AACb,QAAA,MAAM,IAAI,GAAU,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;QACxD,QAAQ,CAAC,IAAI,CAAC;QACd,UAAU,CAAC,IAAI,CAAC;QAChB,YAAY,CAAC,IAAI,CAAC;IACpB;AAEA,IAAA,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM;IAE/B,QACEA,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAC7E,OAAO,EAAE,MAAM,EAAA,YAAA,EACH,MAAM,GAAG,sBAAsB,GAAG,qBAAqB,EAAA,cAAA,EACrD,MAAM,YAEnB,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,CACnB;AAEb;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/ThemeToggle/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,IACXA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EACvC,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,QAAA,EAAA,CAEtBC,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAA,CAAG,EAChCA,cAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAA,CAAG,EACtCA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACxCA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAA,CAAG,EAChDA,cAAM,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,EACpDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACtCA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACxCA,cAAM,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,GAAG,EAClDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,EAAA,CAAG,CAAA,EAAA,CAC9C,CACP;AAED,MAAM,QAAQ,IACZA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EACvC,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,YAEtBA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,iDAAiD,EAAA,CAAG,EAAA,CACxD,CACP;SAEe,WAAW,GAAA;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,OAAO,CAAC;IAElD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,eAAe,EAAE;;QAEjC,QAAQ,CAAC,OAAO,CAAC;QACjB,UAAU,CAAC,OAAO,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,MAAM,GAAA;AACb,QAAA,MAAM,IAAI,GAAU,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;QACxD,QAAQ,CAAC,IAAI,CAAC;QACd,UAAU,CAAC,IAAI,CAAC;QAChB,YAAY,CAAC,IAAI,CAAC;IACpB;AAEA,IAAA,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM;IAC/B,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;AAEvC,IAAA,QACED,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAA,QAAA,EAAA,CAC9CA,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAC7E,OAAO,EAAE,MAAM,gBACH,MAAM,GAAG,sBAAsB,GAAG,qBAAqB,EAAA,cAAA,EACrD,MAAM,EAAA,QAAA,EAAA,CAEnB,MAAM,GAAG,QAAQ,GAAG,OAAO,EAC3B,KAAK,IACC,EACTA,IAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAgB,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,CAClD,KAAK,EAAA,cAAA,CAAA,EAAA,CACD,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/shared/js/theme.js

@@ -1,19 +1,19 @@
 const STORAGE_KEY = 'color-scheme';
 function getInitialTheme() {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return 'light';
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored === 'light' || stored === 'dark')
         return stored;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 function applyTheme(theme) {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return;
     document.documentElement.setAttribute('color-scheme', theme);
 }
 function persistTheme(theme) {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return;
     localStorage.setItem(STORAGE_KEY, theme);
 }

package/dist/shared/js/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/shared/js/theme.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,cAAc;SAElB,eAAe,GAAA;IAC7B,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;IAEjD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;AAChD,IAAA,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;AAAE,QAAA,OAAO,MAAM;AAE1D,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF;AAEM,SAAU,UAAU,CAAC,KAAY,EAAA;IACrC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE;IACnC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC;AAC9D;AAEM,SAAU,YAAY,CAAC,KAAY,EAAA;IACvC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE;AACnC,IAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;AAC1C;;;;"}
+{"version":3,"file":"theme.js","sources":["../../../src/shared/js/theme.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,cAAc;SAElB,eAAe,GAAA;AAC7B,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;AAAE,QAAA,OAAO,OAAO;IAEnD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;AAChD,IAAA,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;AAAE,QAAA,OAAO,MAAM;AAE1D,IAAA,OAAO,UAAU,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACzF;AAEM,SAAU,UAAU,CAAC,KAAY,EAAA;AACrC,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE;IACrC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC;AAC9D;AAEM,SAAU,YAAY,CAAC,KAAY,EAAA;AACvC,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE;AACrC,IAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;AAC1C;;;;"}

package/dist/shared/types/button.d.ts

@@ -1,6 +1,6 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
-export interface ButtonProps {
+export interface ButtonProperties {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;

package/dist/shared/types/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/shared/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/shared/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/shared/types/card.d.ts

@@ -1,5 +1,6 @@
 export type CardElevation = 'flat' | 'raised';
-export interface CardProps {
+export interface CardProperties {
     elevation?: CardElevation;
+    role?: string;
 }
 //# sourceMappingURL=card.d.ts.map

package/dist/shared/types/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/shared/types/card.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/shared/types/card.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/shared/types/tag.d.ts

@@ -1,5 +1,5 @@
-export type TagVariant = 'default' | 'success' | 'danger';
-export interface TagProps {
+export type TagVariant = 'default' | 'success' | 'danger' | 'warning';
+export interface TagProperties {
     variant?: TagVariant;
 }
 //# sourceMappingURL=tag.d.ts.map

package/dist/shared/types/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/shared/types/tag.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,QAAQ;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/shared/types/tag.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}

package/dist/shared/types/theme-toggle.d.ts

@@ -1,4 +1,3 @@
 export type Theme = 'light' | 'dark';
-export interface ThemeToggleProps {
-}
+export type ThemeToggleProperties = Record<never, never>;
 //# sourceMappingURL=theme-toggle.d.ts.map

package/dist/shared/types/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme-toggle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,gBAAgB;CAEhC"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme-toggle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dezkareid/components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "A package to export UI components in formats like React, Astro, Vue, etc.",
   "files": [
@@ -48,7 +48,7 @@
     "vue"
   ],
   "peerDependencies": {
-    "astro": ">=4.0.0",
+    "astro": ">=6.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "vue": "^3.0.0"
@@ -72,26 +72,35 @@
     "@dezkareid/design-tokens": "0.0.0"
   },
   "devDependencies": {
+    "astro": "6.0.6",
+    "@dezkareid/eslint-config-ts-base": "1.0.0",
+    "@eslint-react/eslint-plugin": "2.13.0",
+    "@eslint/js": "9.39.2",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/classnames": "^2.3.4",
+    "@types/classnames": "2.3.4",
     "@types/react": "19.2.9",
     "@vitejs/plugin-react": "5.1.4",
+    "eslint": "9.39.2",
     "jsdom": "27.4.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "rollup": "4.56.0",
     "rollup-plugin-postcss": "4.0.2",
     "typescript": "5.9.3",
+    "typescript-eslint": "8.57.0",
     "vite": "7.3.1",
-    "vitest": "4.0.18"
+    "vitest": "4.0.18",
+    "@dezkareid/eslint-plugin-web": "^0.0.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
-    "test": "vitest --run"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest --run --config vitest.config.ts"
   }
 }

package/src/astro/Button/index.astro

@@ -30,6 +30,6 @@ const classes = [
   .join(' ');
 ---
 
-<Tag class={classes} href={href} disabled={!href && disabled} {...rest}>
+<Tag class={classes} href={href} disabled={!href && disabled} aria-disabled={!href && disabled} {...rest}>
   <slot />
 </Tag>

package/src/astro/ThemeToggle/index.astro

@@ -8,6 +8,9 @@ type Props = {
 const { class: className } = Astro.props;
 
 const classes = [styles['theme-toggle'], className ?? ''].filter(Boolean).join(' ');
+const wrapperClass = styles['theme-toggle__wrapper'];
+const iconClass = styles['theme-toggle__icon'];
+const srOnlyClass = styles['sr-only'];
 ---
 
 <!--
@@ -27,28 +30,63 @@ const classes = [styles['theme-toggle'], className ?? ''].filter(Boolean).join('
   })();
 </script>
 
-<button
-  type="button"
-  class={classes}
-  data-theme-toggle
-  aria-label="Toggle colour scheme"
->
-  <span data-theme-label>Light</span>
-</button>
+<span class={wrapperClass}>
+  <button
+    type="button"
+    class={classes}
+    data-theme-toggle
+    aria-label="Toggle colour scheme"
+    aria-pressed="false"
+  >
+    <!-- Sun icon (light mode default) -->
+    <svg
+      aria-hidden="true"
+      class={iconClass}
+      data-theme-icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+    <span data-theme-label>Light</span>
+  </button>
+  <span aria-live="polite" class={srOnlyClass} data-theme-live>Light mode active</span>
+</span>
 
 <script>
   import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
 
   const btn = document.querySelector('[data-theme-toggle]') as HTMLButtonElement | null;
   const label = document.querySelector('[data-theme-label]') as HTMLElement | null;
+  const liveRegion = document.querySelector('[data-theme-live]') as HTMLElement | null;
+  const iconEl = document.querySelector('[data-theme-icon]') as SVGElement | null;
+
+  const sunPath = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
+  const moonPath = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
 
   if (btn && label) {
     let current = getInitialTheme();
 
     function update(theme: 'light' | 'dark') {
-      label!.textContent = theme === 'dark' ? 'Dark' : 'Light';
-      btn!.setAttribute('aria-pressed', String(theme === 'dark'));
-      btn!.classList.toggle('theme-toggle--dark', theme === 'dark');
+      const isDark = theme === 'dark';
+      label!.textContent = isDark ? 'Dark' : 'Light';
+      btn!.setAttribute('aria-pressed', String(isDark));
+      btn!.classList.toggle('theme-toggle--dark', isDark);
+      if (iconEl) iconEl.innerHTML = isDark ? moonPath : sunPath;
+      if (liveRegion) liveRegion.textContent = `${isDark ? 'Dark' : 'Light'} mode active`;
     }
 
     update(current);

package/src/css/button.module.css

@@ -9,15 +9,31 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-8);
   cursor: pointer;
   border: none;
-  border-radius: var(--spacing-4);
+  border-radius: var(--border-radius-medium);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-300);
   line-height: var(--font-line-height-none);
+  letter-spacing: var(--font-letter-spacing-wide);
   text-decoration: none;
   white-space: nowrap;
-  transition: opacity 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+/* --- Structure: focus ring --- */
+.button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--color-background-primary),
+    0 0 0 4px var(--color-primary);
 }
 
 /* --- Structure: size modifiers --- */
@@ -25,6 +41,7 @@
 .button--small {
   padding: var(--spacing-4) var(--spacing-12);
   font-size: var(--font-size-200);
+  border-radius: var(--border-radius-small);
 }
 
 .button--md,
@@ -37,49 +54,67 @@
 .button--large {
   padding: var(--spacing-12) var(--spacing-32);
   font-size: var(--font-size-400);
+  border-radius: var(--border-radius-large);
 }
 
 /* --- Skin: variant modifiers --- */
 .button--primary {
-  background-color: var(--color-primary);
-  color: var(--color-text-inverse);
+  --button-primary-color-background: var(--color-primary);
+  --button-primary-color-text: var(--color-text-inverse);
+  background-color: var(--button-primary-color-background);
+  color: var(--button-primary-color-text);
   border: 1px solid transparent;
 }
 
 .button--primary:hover:not(.button--disabled) {
-  opacity: 0.88;
+  box-shadow: var(--shadow-card-hover);
+  opacity: 0.92;
 }
 
 .button--secondary,
 .button--outline {
-  background-color: transparent;
-  color: var(--color-primary);
-  border: 1px solid var(--color-primary);
+  --button-secondary-color-background: transparent;
+  --button-secondary-color-text: var(--color-primary);
+  --button-secondary-color-border: var(--color-primary);
+  background-color: var(--button-secondary-color-background);
+  color: var(--button-secondary-color-text);
+  border: 1px solid var(--button-secondary-color-border);
 }
 
 .button--secondary:hover:not(.button--disabled),
 .button--outline:hover:not(.button--disabled) {
   background-color: var(--color-background-secondary);
+  box-shadow: var(--shadow-subtle);
 }
 
+/* Success button: uses text-primary for text to meet WCAG AA 4.5:1
+   Light: #22c55e bg + #111827 text = 7.79:1 ✅
+   Dark:  #14532d bg + #ffffff text = 9.11:1 ✅ */
+
 .button--success {
-  background-color: var(--color-success);
-  color: var(--color-text-inverse);
+  --button-success-color-background: var(--color-success);
+  --button-success-color-text: var(--color-text-primary);
+  background-color: var(--button-success-color-background);
+  color: var(--button-success-color-text);
   border: 1px solid transparent;
 }
 
 .button--success:hover:not(.button--disabled) {
-  opacity: 0.88;
+  box-shadow: var(--shadow-card-hover);
+  opacity: 0.92;
 }
 
 .button--ghost {
-  background-color: transparent;
-  color: var(--color-text-primary);
+  --button-ghost-color-background: transparent;
+  --button-ghost-color-text: var(--color-text-primary);
+  background-color: var(--button-ghost-color-background);
+  color: var(--button-ghost-color-text);
   border: 1px solid transparent;
 }
 
 .button--ghost:hover:not(.button--disabled) {
   background-color: var(--color-background-secondary);
+  border-color: var(--color-background-secondary);
 }
 
 /* --- Skin: state modifier --- */
@@ -87,4 +122,4 @@
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
-}
+}

package/src/css/card.module.css

@@ -20,11 +20,13 @@
 
 /* --- Skin: elevation modifiers --- */
 
-/* TODO: Propose --shadow-raised token to the design-tokens package. */
+/* TODO(design-system): needs token --shadow-raised (suggest 0 2px 8px rgba(0,0,0,0.12)) */
 .card--raised {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
+/* TODO(design-system): needs token --color-border (suggest var(--color-background-secondary)) */
 .card--flat {
   box-shadow: none;
+  border: 1px solid var(--color-background-secondary);
 }

package/src/css/tag.module.css

@@ -8,7 +8,7 @@
 .tag {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--spacing-4);
+  border-radius: var(--spacing-12);
   padding: var(--spacing-4) var(--spacing-8);
   font-family: var(--font-family-base);
   font-size: var(--font-size-100);
@@ -18,16 +18,31 @@
 
 /* --- Skin: variant modifiers --- */
 .tag--default {
-  background-color: var(--color-background-secondary);
-  color: var(--color-text-primary);
+  --tag-default-color-background: var(--color-background-secondary);
+  --tag-default-color-text: var(--color-text-primary);
+  background-color: var(--tag-default-color-background);
+  color: var(--tag-default-color-text);
 }
 
+/* Success: text-primary gives 7.79:1 light (#22c55e) and 9.11:1 dark (#14532d) ✅ */
 .tag--success {
-  background-color: var(--color-success);
-  color: var(--color-text-inverse);
+  --tag-success-color-background: var(--color-success);
+  --tag-success-color-text: var(--color-text-primary);
+  background-color: var(--tag-success-color-background);
+  color: var(--tag-success-color-text);
 }
 
+/* Danger: text-primary gives 4.71:1 light (#ef4444) and 10.02:1 dark (#7f1d1d) ✅ */
 .tag--danger {
-  background-color: var(--color-danger);
-  color: var(--color-text-inverse);
+  --tag-danger-color-background: var(--color-danger);
+  --tag-danger-color-text: var(--color-text-primary);
+  background-color: var(--tag-danger-color-background);
+  color: var(--tag-danger-color-text);
+}
+
+.tag--warning {
+  --tag-warning-color-background: var(--color-warning);
+  --tag-warning-color-text: var(--color-text-primary);
+  background-color: var(--tag-warning-color-background);
+  color: var(--tag-warning-color-text);
 }

package/src/css/theme-toggle.module.css

@@ -36,3 +36,29 @@
   color: var(--color-primary);
   border-color: var(--color-primary);
 }
+
+/* --- Structure: icon --- */
+.theme-toggle__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+
+/* --- Structure: wrapper --- */
+.theme-toggle__wrapper {
+  display: inline-flex;
+  position: relative;
+}
+
+/* --- Utility: visually hidden live region --- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/react/Button/index.test.tsx

@@ -11,14 +11,14 @@ describe('Button', () => {
 
   it('renders primary variant', () => {
     render(<Button variant="primary">Primary</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn.className).toMatch(/button--primary/);
+    const button = screen.getByRole('button');
+    expect(button.className).toMatch(/button--primary/);
   });
 
   it('renders secondary variant', () => {
     render(<Button variant="secondary">Secondary</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn.className).toMatch(/button--secondary/);
+    const button = screen.getByRole('button');
+    expect(button.className).toMatch(/button--secondary/);
   });
 
   it('renders sm size', () => {
@@ -38,9 +38,9 @@ describe('Button', () => {
 
   it('is disabled when disabled prop is set', () => {
     render(<Button disabled>Disabled</Button>);
-    const btn = screen.getByRole('button');
-    expect(btn).toBeDisabled();
-    expect(btn.className).toMatch(/button--disabled/);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button.className).toMatch(/button--disabled/);
   });
 
   it('does not fire onClick when disabled', async () => {
@@ -56,4 +56,14 @@ describe('Button', () => {
     await userEvent.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledOnce();
   });
+
+  it('has aria-disabled when disabled', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('does not have aria-disabled when enabled', () => {
+    render(<Button>Enabled</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
+  });
 });

package/src/react/Button/index.tsx

@@ -1,9 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { ButtonProps } from '../../shared/types/button';
+import type { ButtonProperties } from '../../shared/types/button';
 import styles from '../../css/button.module.css';
 
-type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type Properties = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function Button({
   variant = 'primary',
@@ -12,7 +12,7 @@ export function Button({
   children,
   className,
   ...rest
-}: Props) {
+}: Properties) {
   return (
     <button
       className={cx(
@@ -23,6 +23,7 @@ export function Button({
         className,
       )}
       disabled={disabled}
+      aria-disabled={disabled}
       {...rest}
     >
       {children}

package/src/react/Card/index.test.tsx

@@ -26,13 +26,23 @@ describe('Card', () => {
 
   it('applies flat elevation when set', () => {
     const { container } = render(<Card elevation="flat">Content</Card>);
-    const el = container.firstChild as HTMLElement;
-    expect(el.className).toMatch(/card--flat/);
-    expect(el.className).not.toMatch(/card--raised/);
+    const element = container.firstChild as HTMLElement;
+    expect(element.className).toMatch(/card--flat/);
+    expect(element.className).not.toMatch(/card--raised/);
   });
 
   it('applies raised elevation when explicitly set', () => {
     const { container } = render(<Card elevation="raised">Content</Card>);
     expect((container.firstChild as HTMLElement).className).toMatch(/card--raised/);
   });
+
+  it('forwards role prop to root element', () => {
+    render(<Card role="article">Content</Card>);
+    expect(screen.getByRole('article')).toBeInTheDocument();
+  });
+
+  it('applies card--flat class when elevation is flat', () => {
+    const { container } = render(<Card elevation="flat">Content</Card>);
+    expect((container.firstChild as HTMLElement).className).toMatch(/card--flat/);
+  });
 });

package/src/react/Card/index.tsx

@@ -1,11 +1,11 @@
 import type { HTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { CardProps } from '../../shared/types/card';
+import type { CardProperties } from '../../shared/types/card';
 import styles from '../../css/card.module.css';
 
-type Props = CardProps & HTMLAttributes<HTMLDivElement>;
+type Properties = CardProperties & HTMLAttributes<HTMLDivElement>;
 
-export function Card({ elevation = 'raised', children, className, ...rest }: Props) {
+export function Card({ elevation = 'raised', children, className, ...rest }: Properties) {
   return (
     <div className={cx(styles.card, styles[`card--${elevation}`], className)} {...rest}>
       {children}

package/src/react/Tag/index.test.tsx

@@ -32,4 +32,14 @@ describe('Tag', () => {
     render(<Tag>No variant</Tag>);
     expect(screen.getByText('No variant').className).toMatch(/tag--default/);
   });
+
+  it('renders warning variant', () => {
+    render(<Tag variant="warning">Warning</Tag>);
+    expect(screen.getByText('Warning').className).toMatch(/tag--warning/);
+  });
+
+  it('forwards aria-label to root span', () => {
+    render(<Tag variant="success" aria-label="Success status">Active</Tag>);
+    expect(screen.getByLabelText('Success status')).toBeInTheDocument();
+  });
 });

package/src/react/Tag/index.tsx

@@ -1,11 +1,11 @@
 import type { HTMLAttributes } from 'react';
 import cx from 'classnames';
-import type { TagProps } from '../../shared/types/tag';
+import type { TagProperties } from '../../shared/types/tag';
 import styles from '../../css/tag.module.css';
 
-type Props = TagProps & HTMLAttributes<HTMLSpanElement>;
+type Properties = TagProperties & HTMLAttributes<HTMLSpanElement>;
 
-export function Tag({ variant = 'default', children, className, ...rest }: Props) {
+export function Tag({ variant = 'default', children, className, ...rest }: Properties) {
   return (
     <span className={cx(styles.tag, styles[`tag--${variant}`], className)} {...rest}>
       {children}

package/src/react/ThemeToggle/index.test.tsx

@@ -4,12 +4,12 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { ThemeToggle } from './index';
 
 function mockMatchMedia(prefersDark: boolean) {
-  Object.defineProperty(window, 'matchMedia', {
+  Object.defineProperty(globalThis, 'matchMedia', {
     writable: true,
     value: vi.fn((query: string) => ({
       matches: query === '(prefers-color-scheme: dark)' ? prefersDark : false,
       media: query,
-      onchange: null,
+      onchange: undefined,
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
       dispatchEvent: vi.fn(),
@@ -81,4 +81,27 @@ describe('ThemeToggle', () => {
     await act(async () => { render(<ThemeToggle />); });
     expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
   });
+
+  it('has aria-label "Switch to dark mode" when in light mode', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Switch to dark mode');
+  });
+
+  it('has aria-label "Switch to light mode" after toggling to dark', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Switch to light mode');
+  });
+
+  it('renders an aria-live polite region', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeInTheDocument();
+  });
+
+  it('renders an SVG icon with aria-hidden', async () => {
+    await act(async () => { render(<ThemeToggle />); });
+    const svg = document.querySelector('svg[aria-hidden="true"]');
+    expect(svg).toBeInTheDocument();
+  });
 });

package/src/react/ThemeToggle/index.tsx

@@ -4,11 +4,52 @@ import type { Theme } from '../../shared/types/theme-toggle';
 import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
 import styles from '../../css/theme-toggle.module.css';
 
+const SunIcon = (
+  <svg
+    aria-hidden="true"
+    className={styles['theme-toggle__icon']}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+);
+
+const MoonIcon = (
+  <svg
+    aria-hidden="true"
+    className={styles['theme-toggle__icon']}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
 export function ThemeToggle() {
   const [theme, setTheme] = useState<Theme>('light');
 
   useEffect(() => {
     const initial = getInitialTheme();
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setTheme(initial);
     applyTheme(initial);
   }, []);
@@ -21,16 +62,23 @@ export function ThemeToggle() {
   }
 
   const isDark = theme === 'dark';
+  const label = isDark ? 'Dark' : 'Light';
 
   return (
-    <button
-      type="button"
-      className={cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark'])}
-      onClick={toggle}
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-      aria-pressed={isDark}
-    >
-      {isDark ? 'Dark' : 'Light'}
-    </button>
+    <span className={styles['theme-toggle__wrapper']}>
+      <button
+        type="button"
+        className={cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark'])}
+        onClick={toggle}
+        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        aria-pressed={isDark}
+      >
+        {isDark ? MoonIcon : SunIcon}
+        {label}
+      </button>
+      <span aria-live="polite" className={styles['sr-only']}>
+        {label} mode active
+      </span>
+    </span>
   );
 }

package/src/shared/js/theme.ts

@@ -3,20 +3,20 @@ import type { Theme } from '../types/theme-toggle';
 const STORAGE_KEY = 'color-scheme';
 
 export function getInitialTheme(): Theme {
-  if (typeof window === 'undefined') return 'light';
+  if (globalThis.window === undefined) return 'light';
 
   const stored = localStorage.getItem(STORAGE_KEY);
   if (stored === 'light' || stored === 'dark') return stored;
 
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
 export function applyTheme(theme: Theme): void {
-  if (typeof window === 'undefined') return;
+  if (globalThis.window === undefined) return;
   document.documentElement.setAttribute('color-scheme', theme);
 }
 
 export function persistTheme(theme: Theme): void {
-  if (typeof window === 'undefined') return;
+  if (globalThis.window === undefined) return;
   localStorage.setItem(STORAGE_KEY, theme);
 }

package/src/shared/types/button.ts

@@ -1,7 +1,7 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
 
-export interface ButtonProps {
+export interface ButtonProperties {
   variant?: ButtonVariant;
   size?: ButtonSize;
   disabled?: boolean;

package/src/shared/types/card.ts

@@ -1,5 +1,6 @@
 export type CardElevation = 'flat' | 'raised';
 
-export interface CardProps {
+export interface CardProperties {
   elevation?: CardElevation;
+  role?: string;
 }

package/src/shared/types/tag.ts

@@ -1,5 +1,5 @@
-export type TagVariant = 'default' | 'success' | 'danger';
+export type TagVariant = 'default' | 'success' | 'danger' | 'warning';
 
-export interface TagProps {
+export interface TagProperties {
   variant?: TagVariant;
 }

package/src/shared/types/theme-toggle.ts

@@ -1,5 +1,3 @@
 export type Theme = 'light' | 'dark';
 
-export interface ThemeToggleProps {
-  // No required props — self-contained stateful component
-}
+export type ThemeToggleProperties = Record<never, never>;

package/src/vue/Button/index.vue

@@ -21,7 +21,7 @@ const classes = computed(() =>
 </script>
 
 <template>
-  <button :class="classes" :disabled="disabled">
+  <button :class="classes" :disabled="disabled" :aria-disabled="disabled">
     <slot />
   </button>
 </template>

package/src/vue/ThemeToggle/index.vue

@@ -27,13 +27,56 @@ const classes = () =>
 </script>
 
 <template>
-  <button
-    type="button"
-    :class="classes()"
-    :aria-label="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
-    :aria-pressed="isDark()"
-    @click="toggle"
-  >
-    {{ isDark() ? 'Dark' : 'Light' }}
-  </button>
+  <span :class="styles['theme-toggle__wrapper']">
+    <button
+      type="button"
+      :class="classes()"
+      :aria-label="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
+      :aria-pressed="isDark()"
+      @click="toggle"
+    >
+      <!-- Moon icon (dark mode) -->
+      <svg
+        v-if="isDark()"
+        aria-hidden="true"
+        :class="styles['theme-toggle__icon']"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+      <!-- Sun icon (light mode) -->
+      <svg
+        v-else
+        aria-hidden="true"
+        :class="styles['theme-toggle__icon']"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+      </svg>
+      {{ isDark() ? 'Dark' : 'Light' }}
+    </button>
+    <span aria-live="polite" :class="styles['sr-only']">
+      {{ isDark() ? 'Dark' : 'Light' }} mode active
+    </span>
+  </span>
 </template>