@a11ypros/a11y-ui-components 1.0.0

package/dist/components/Form/Select.css

@@ -0,0 +1,69 @@
+.form-select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-select {
+  width: 100%;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  padding-right: var(--spacing-10, 2.5rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  color: var(--color-text-primary, #171717);
+  background-color: var(--color-background-default, #ffffff);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23525252' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-3, 0.75rem) center;
+  background-size: 12px;
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  appearance: none;
+  cursor: pointer;
+  transition: border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .form-select {
+    transition: none;
+  }
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-border-focus, #0ea5e9);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.form-select:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+.form-select--error {
+  border-color: var(--color-error-500, #ef4444);
+}
+
+.form-select--error:focus {
+  border-color: var(--color-error-500, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-select--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-background-secondary, #fafafa);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-select {
+    border-width: 2px;
+  }
+  
+  .form-select:focus-visible {
+    outline-width: 3px;
+  }
+}
+

package/dist/components/Form/Select.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './Select.css';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+    /**
+     * Options for the select
+     */
+    options: SelectOption[];
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the select
+     */
+    helperText?: string;
+    /**
+     * Label for the select
+     */
+    label?: string;
+    /**
+     * Placeholder option text
+     */
+    placeholder?: string;
+}
+/**
+ * Accessible Select component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-select association
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="country"
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Form/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAClG;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAA;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,uFAgGlB,CAAA"}

package/dist/components/Form/Select.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Select.css';
+/**
+ * Accessible Select component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-select association
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="country"
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ * />
+ * ```
+ */
+export const Select = React.forwardRef(({ id, options, error, helperText, label, placeholder, className = '', 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const selectId = React.useId();
+    const finalId = id || `select-${selectId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId);
+    const handleKeyDown = React.useCallback((event) => {
+        // Arrow keys are handled natively by select
+        // But we can add custom handling if needed
+        if (props.onKeyDown) {
+            props.onKeyDown(event);
+        }
+    }, [props.onKeyDown]);
+    const classes = [
+        'form-select',
+        error && 'form-select--error',
+        props.disabled && 'form-select--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-select-wrapper", children: [label && (_jsxs("label", { htmlFor: finalId, className: "form-label", children: [label, props.required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsxs("select", { ref: ref, id: finalId, className: classes, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, onKeyDown: handleKeyDown, required: props.required ? true : undefined, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), helperText && !error && (_jsx("span", { id: helperId, className: "form-helper-text", children: helperText })), error && (_jsx("span", { id: errorId, className: "form-error-text", role: "alert", children: error }))] }));
+});
+Select.displayName = 'Select';

package/dist/components/Form/Textarea.css

@@ -0,0 +1,79 @@
+.form-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-textarea {
+  width: 100%;
+  min-height: 6rem;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  color: var(--color-text-primary, #171717);
+  background-color: var(--color-background-default, #ffffff);
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  resize: vertical;
+  transition: border-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .form-textarea {
+    transition: none;
+  }
+}
+
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--color-border-focus, #0ea5e9);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.form-textarea:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+.form-textarea--error {
+  border-color: var(--color-error-500, #ef4444);
+}
+
+.form-textarea--error:focus {
+  border-color: var(--color-error-500, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-textarea--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-background-secondary, #fafafa);
+  resize: none;
+}
+
+.form-textarea-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-character-count {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-secondary, #525252);
+  margin-left: auto;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-textarea {
+    border-width: 2px;
+  }
+  
+  .form-textarea:focus-visible {
+    outline-width: 3px;
+  }
+}
+

package/dist/components/Form/Textarea.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import './Textarea.css';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the textarea
+     */
+    helperText?: string;
+    /**
+     * Label for the textarea
+     */
+    label?: string;
+    /**
+     * Maximum character count (shows counter)
+     */
+    maxLength?: number;
+    /**
+     * Whether to show character count
+     */
+    showCount?: boolean;
+}
+/**
+ * Accessible Textarea component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-textarea association
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   id="message"
+ *   label="Message"
+ *   maxLength={500}
+ *   showCount
+ * />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Form/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,2FA0FpB,CAAA"}

package/dist/components/Form/Textarea.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Textarea.css';
+/**
+ * Accessible Textarea component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-textarea association
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   id="message"
+ *   label="Message"
+ *   maxLength={500}
+ *   showCount
+ * />
+ * ```
+ */
+export const Textarea = React.forwardRef(({ id, error, helperText, label, maxLength, showCount = false, className = '', value, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const textareaId = React.useId();
+    const finalId = id || `textarea-${textareaId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const countId = showCount ? `${finalId}-count` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId, countId);
+    const currentLength = typeof value === 'string' ? value.length : 0;
+    const remainingChars = maxLength ? maxLength - currentLength : undefined;
+    const classes = [
+        'form-textarea',
+        error && 'form-textarea--error',
+        props.disabled && 'form-textarea--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-textarea-wrapper", children: [label && (_jsxs("label", { htmlFor: finalId, className: "form-label", children: [label, props.required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsx("textarea", { ref: ref, id: finalId, className: classes, maxLength: maxLength, value: value, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: props.required ? true : undefined, ...props }), (showCount || helperText) && (_jsxs("div", { className: "form-textarea-footer", children: [helperText && !error && (_jsx("span", { id: helperId, className: "form-helper-text", children: helperText })), error && (_jsx("span", { id: errorId, className: "form-error-text", role: "alert", children: error })), showCount && maxLength && (_jsxs("span", { id: countId, className: "form-character-count", "aria-live": "polite", children: [currentLength, " / ", maxLength] }))] }))] }));
+});
+Textarea.displayName = 'Textarea';

package/dist/components/Form/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Fieldset';
+export * from './Label';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/components/Form/index.js

@@ -0,0 +1,7 @@
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Fieldset';
+export * from './Label';

package/dist/components/Link/Link.css

@@ -0,0 +1,70 @@
+/* Link component styles */
+.link {
+  color: var(--color-primary-700, #0369a1);
+  text-decoration: underline;
+  text-underline-offset: 0.125em;
+  transition: color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .link {
+    transition: none;
+  }
+}
+
+/* Focus styles - WCAG 2.4.7 Focus Visible */
+.link:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.link:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Hover state */
+.link:hover:not(:disabled) {
+  color: var(--color-primary-800, #075985);
+  text-decoration-thickness: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .link {
+    text-decoration-thickness: 2px;
+  }
+  
+  .link:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Skip link styles (for keyboard navigation) */
+.link--skip {
+  position: absolute;
+  top: -100px;
+  left: 0;
+  z-index: 1000;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  background-color: var(--color-background-default, #ffffff);
+  color: var(--color-text-primary, #171717);
+  border: 2px solid var(--color-border-focus, #0ea5e9);
+  border-radius: 0.375rem;
+  font-weight: var(--font-weight-semibold, 600);
+  text-decoration: none;
+}
+
+.link--skip:focus {
+  top: var(--spacing-4, 1rem);
+}
+
+/* External link icon */
+.link__external-icon {
+  display: inline-block;
+  margin-left: 0.25em;
+  font-size: 0.875em;
+  vertical-align: baseline;
+}
+

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Link.css';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Whether this is an external link
+     * Automatically adds rel="noopener noreferrer" for security
+     */
+    external?: boolean;
+    /**
+     * Whether this is a skip link (for keyboard navigation)
+     */
+    skip?: boolean;
+    /**
+     * ARIA label for the link (required if no visible text)
+     */
+    'aria-label'?: string;
+}
+/**
+ * Accessible Link component
+ *
+ * WCAG Compliance:
+ * - 2.4.4 Link Purpose: Clear link text or aria-label
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about" external>
+ *   Learn more
+ * </Link>
+ * ```
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,qFA2EhB,CAAA"}

package/dist/components/Link/Link.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './Link.css';
+/**
+ * Accessible Link component
+ *
+ * WCAG Compliance:
+ * - 2.4.4 Link Purpose: Clear link text or aria-label
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about" external>
+ *   Learn more
+ * </Link>
+ * ```
+ */
+export const Link = React.forwardRef(({ external = false, skip = false, href, rel, target, className = '', children, 'aria-label': ariaLabel, ...props }, ref) => {
+    // Determine if link is external based on href or explicit prop
+    const isExternal = external ||
+        (href && (href.startsWith('http') || href.startsWith('//')));
+    // Build rel attribute
+    const relAttributes = React.useMemo(() => {
+        const attrs = new Set(rel?.split(' ') || []);
+        if (isExternal) {
+            attrs.add('noopener');
+            attrs.add('noreferrer');
+        }
+        return Array.from(attrs).join(' ');
+    }, [isExternal, rel]);
+    // Set target for external links
+    const linkTarget = isExternal && !target ? '_blank' : target;
+    const classes = [
+        'link',
+        skip && 'link--skip',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Skip links should use button semantics if no href
+    if (skip && !href) {
+        return (_jsx("button", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: children }));
+    }
+    return (_jsxs("a", { ref: ref, href: href, rel: relAttributes || undefined, target: linkTarget, className: classes, "aria-label": ariaLabel, ...props, children: [children, isExternal && (_jsxs("span", { className: "link__external-icon", "aria-hidden": "true", children: [' ', _jsx("span", { "aria-label": "(opens in new tab)", children: "\u2197" })] }))] }));
+});
+Link.displayName = 'Link';

package/dist/components/Link/index.d.ts

@@ -0,0 +1,3 @@
+export { Link } from './Link';
+export type { LinkProps } from './Link';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/Link/index.js

@@ -0,0 +1 @@
+export { Link } from './Link';

package/dist/components/Modal/Modal.css

@@ -0,0 +1,118 @@
+/* Dialog backdrop (native HTML5 dialog element) */
+.modal::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.modal {
+  background-color: var(--color-background-default, #ffffff);
+  border-radius: 0.5rem;
+  border: none;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  max-width: 90vw;
+  width: 100%;
+  padding: 0;
+  margin: auto;
+  position: fixed;
+  inset: 0;
+}
+
+.modal:not([open]) {
+  display: none;
+}
+
+.modal--sm {
+  max-width: 24rem; /* 384px */
+}
+
+.modal--md {
+  max-width: 32rem; /* 512px */
+}
+
+.modal--lg {
+  max-width: 48rem; /* 768px */
+}
+
+.modal--full {
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--color-border-default, #bbbbbb);
+}
+
+.modal-title {
+  margin: 0;
+  font-size: var(--font-size-xl, 1.25rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-primary, #171717);
+  line-height: var(--line-height-tight, 1.25);
+}
+
+.modal-close {
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--font-size-2xl, 1.5rem);
+  line-height: 1;
+  padding: var(--spacing-1, 0.25rem);
+  min-width: auto;
+  width: 2rem;
+  height: 2rem;
+}
+
+.modal-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  width: 100%;
+}
+
+.modal-content {
+  padding: var(--spacing-6, 1.5rem);
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Focus styles */
+.modal:focus {
+  outline: none;
+}
+
+.modal:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .modal::backdrop {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .modal {
+    border: 2px solid var(--color-text-primary, #171717);
+  }
+  
+  .modal:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .modal {
+    animation: none;
+  }
+  
+  .modal::backdrop {
+    animation: none;
+  }
+}
+