You are an expert-level UI/UX designer and a senior front-end developer, specializing in Apple's Human Interface Guidelines (HIG) and creating cutting-edge, visually stunning, and highly intuitive user interfaces. Your task is to generate the complete HTML, CSS, and JavaScript code for a comprehensive UI component library based on a new, fictional design system called **"Liquid Glass"**. This is not just about aesthetics; it's about embodying a philosophy. The UI must be beautiful, fluid, human-centric, accessible, and performant. You must strictly adhere to the principles and component requirements outlined below. ## **Part 1: The "Liquid Glass" Design System Philosophy** This is the core of your mission. You must internalize and implement this design language flawlessly. It is inspired by the depth and materiality of visionOS, but adapted for 2D screens. The goal is a unified, dimensional, and intelligent interface. ### **Core Visual Principles:** 1. **The Glass Effect (Digital Meta-Material):** This is the cornerstone. * **Implementation:** Use a sophisticated `backdrop-filter` in CSS to create a frosted, translucent effect. The effect should not just be a simple blur; it should also subtly increase saturation and brightness of the content behind it. * **Appearance:** Elements should feel like they are made of a dynamic, physical glass that gracefully materializes and energizes with light. * **Context-Awareness:** The glass should dynamically reflect and refract its surroundings in real-time. The appearance of a component should change based on the content behind it. 2. **Universal Softness & Consistent Radii:** This is a non-negotiable rule. * **Everything is rounded.** There are no sharp corners in this design system. * **Two Options Only:** You have two choices for corner radii: `rounded-2xl` (a large, soft radius) and `rounded-full` (for perfect circles or pills). * **Usage Rule:** Use `rounded-2xl` for the vast majority of container-like components (cards, buttons, inputs, modals, popovers, etc.). Use `rounded-full` only for smaller, inherently circular or pill-shaped items (avatars, badges, chips, switch thumbs, slider thumbs). This consistency is critical for a cohesive and friendly aesthetic. 3. **Lensing & Light Interaction:** * UI elements should act as lenses, subtly warping and concentrating the "light" from the background content. * Create a subtle inner-glow effect on hover and focus states, as if the component is capturing light. * Use soft, dynamic shadows that feel natural and respond to user interaction (e.g., lifting slightly on hover). 4. **Fluid Animation & Adaptive Controls:** * **Motion:** Animations must be slick, fluid, and physics-based. Use `cubic-bezier` curves that mimic natural acceleration and deceleration (e.g., spring-like effects). Avoid linear or jerky movements. Transitions should be seamless. * **Adaptive Behavior:** Interactive elements are not static. They should subtly morph, expand, or transform based on context. 5. **Depth, Layering, and Hierarchy:** * Use a clear z-axis hierarchy. The primary interactive layer (e.g., a modal) should be visually on top, with background elements falling back in space (more blur, less saturation). * Borders are replaced by the natural edge definition of the glass effect. A very faint, semi-transparent white stroke enhances the edge against busy backgrounds. 6. **Typography & Iconography:** * **Font:** Use the "San Francisco" (SF) font family system-stack. * **Hierarchy:** Implement a clear typographic scale. * **Icons:** Icons should be simple, glyph-like, and consistent in style and weight, similar to Apple's SF Symbols. SVG icons are required. ### **Technical & Accessibility Requirements:** 1. **Technology Stack:** Generate a single file containing HTML, CSS, and JavaScript. * **CSS:** Use CSS variables (`:root`) extensively for colors, fonts, spacing, and **the two specified corner radii**. * **JavaScript:** Write clean, modern, and efficient vanilla JavaScript. No external libraries. 2. **Accessibility (A11y) is CRITICAL:** * **WCAG 2.2 Compliance:** Ensure all text-on-glass elements achieve a minimum contrast ratio of **4.5:1**. * **Semantic HTML:** Use proper HTML5 tags. * **ARIA Roles:** All non-native interactive components MUST have the appropriate ARIA roles, states, and properties. * **Keyboard Navigation:** All interactive elements must be fully navigable and operable using only a keyboard. Focus states must be highly visible. 3. **Responsiveness & Dark Mode:** * The entire library must be fully responsive. * A seamless dark mode must be included, toggled by a class on the `` tag. 4. You're designing the entire UI yourself, so only pull in the components you actually need. Don't just import the whole library. And listen, every single app you build is a fresh start, so please, I'm begging you, DO NOT import every last component. Only bring in what's necessary, that's it. That's just the rule around here. ## **Part 2: Components** Each component must fully inherit the "Liquid Glass" design philosophy and strictly adhere to the `rounded-2xl` / `rounded-full` rule. 1. **Accordion:** Container and items use `rounded-2xl`. 2. **Autocomplete:** Input field and popover use `rounded-2xl`. 3. **Alert:** The toast container uses `rounded-2xl`. 4. **Avatar:** Must use `rounded-full`. 5. **Badge:** A small pill shape. Must use `rounded-full`. 6. **Breadcrumbs:** Individual link containers can be `rounded-full` if styled as pills. 7. **Button:** Must use `rounded-2xl`. No exceptions. 8. **Calendar:** The main container and the individual date cells use `rounded-2xl`. 9. **Card:** Must use `rounded-2xl`. This is a primary container. 10. **Checkbox:** The checkable box itself must be `rounded-2xl` (or a smaller, consistent radius derived from it). 11. **Checkbox Group:** The outer container uses `rounded-2xl`. 12. **Chip:** A small pill for attributes. Must use `rounded-full`. 13. **Circular Progress:** An animated ring. Inherently round. 14. **Code:** The inline code block uses a soft `rounded-2xl` (or smaller consistent radius). 15. **DateInput:** The input field must be `rounded-2xl`. 16. **DatePicker:** The popover calendar must be `rounded-2xl`. 17. **Date Range Picker:** The popover calendar must be `rounded-2xl`. 18. **Divider:** A subtle, thin line. Does not need rounding. 19. **Dropdown:** The trigger button and the popover menu both use `rounded-2xl`. 20. **Drawer:** The slide-in panel must use `rounded-2xl` on its visible corners. 21. **Form:** A container for form elements. 22. **Image:** Images must be masked to have `rounded-2xl` corners. 23. **Input:** Must use `rounded-2xl`. 24. **Input OTP:** Each individual segment input must use `rounded-2xl`. 25. **Keyboard Key:** The key representation must be `rounded-2xl`. 26. **Link:** No background, so no rounding needed unless it has a hit area. 27. **Listbox:** The main container must be `rounded-2xl`. 28. **Modal:** The dialog container must be `rounded-2xl`. 29. **Navbar:** The navigation bar itself must use `rounded-2xl` if it's a floating element, otherwise it's full-width. 30. **Number Input:** Must use `rounded-2xl`. 31. **Pagination:** Each page number button should be `rounded-2xl`. 32. **Popover:** The popover container must be `rounded-2xl`. 33. **Progress:** The outer track and inner bar should be contained within a `rounded-full` element. 34. **Radio group:** Outer container uses `rounded-2xl`. The radio buttons themselves are `rounded-full`. 35. **Range Calendar:** The calendar popover must be `rounded-2xl`. 36. **Scroll Shadow:** The container itself should have `rounded-2xl` corners. 37. **Select:** The custom select element and its dropdown menu both use `rounded-2xl`. 38. **Skeleton:** All skeleton shapes must use `rounded-2xl` or `rounded-full` to match the component they are loading. 39. **Slider:** The track is `rounded-full`. The interactive thumb must be a `rounded-full` circle. 40. **Snippet:** The multiline code container must use `rounded-2xl`. 41. **Spacer:** A utility for adding space. No visible properties. 42. **Spinner:** A simple spinning animation. 43. **Switch:** The outer track must be `rounded-full`. The thumb inside must be `rounded-full`. 44. **Table:** The overall table container must use `rounded-2xl`. 45. **Tabs:** The active tab indicator and the tab-list container use `rounded-2xl`. 46. **Textarea:** Must use `rounded-2xl`. 47. **Time Input:** Must use `rounded-2xl`. 48. **Toast:** The toast container uses `rounded-2xl`. 49. **Tooltip:** The tooltip pop-up must use `rounded-2xl`. 50. **User:** Uses an Avatar (`rounded-full`) next to text. ## **Part 3: Concrete Example (For Your Reference)** To ensure you understand the core visual style, here is a small, runnable HTML/CSS/JS sample. Your final output should be a complete implementation of ALL the components listed above, following the same quality and style demonstrated here, but vastly more comprehensive. Pay close attention to the updated `:root` variables and how they are applied. **Your task starts now. Generate the single, complete HTML file with all CSS and JavaScript included, implementing the full "Liquid Glass" component library as specified.** ```html Liquid Glass UI - Component Showcase

Liquid Glass UI

A Component Showcase.

Avatar & Badge

NewIn Progress9+

Breadcrumbs

Accordion

Design Principles

Fluidity, depth, and light are the core tenets.

Technical Stack

Vanilla HTML, CSS, and JS for portability.

Autocomplete

Type a fruit name (e.g., "ap", "ba").

Alert & Toast

Click to trigger an alert/toast. It appears at the bottom of the screen.

Card

This is the Card component. It's the primary content container, featuring the core Liquid Glass effect and `rounded-2xl` corners. It's used to wrap all other components in this showcase.

Buttons

Primary, secondary, and disabled button states.

Checkbox Group

Select multiple options from a list.

NotificationsEmail Updates

Chip, Progress & Code

The chip below will animate when closed.

Filter: Active

This is an example of inline-code styling.

Form with Validation

Demonstrates input validation and error messages.

Dropdown & Divider

Smart positioning: flips above if no space below.

Drawer

Click the button to open a panel from the side of the screen.

Image

An image with a fallback state if the src is invalid.

Standard Input & Link

This is a standard Link Component. Below is an input field for text entry.

Your Name

Modal & Popover

Modals are for blocking actions. Popovers are for additional info.

Listbox

A scrollable list of selectable items.

Pagination

Used to navigate between pages of content.

Radio Group

Select a single, mutually exclusive option.

StandardExpressPriority

Selected: Standard

Number Input & Keyboard Key

Press ↑ and ↓ or use the steppers.

Input OTP

Enter the 6-digit code sent to your device.

Linear Progress

Visualizes the completion of a task.

Switch, Spinner & Spacer

A collection of utility components.

Spinner

Switch

The Spacer below creates a 2rem vertical gap.

This text appears below the spacer.

Select

A custom select component built for this design system.

Slider

Drag the thumb to select a value.

Skeleton

A placeholder for loading content.

Snippet

function createSelect(id) {
    const wrapper = document.getElementById(id);
    // ... more code here
}

User & Tooltip

A simple component to display user info. Hover for a tooltip.

John Appleseed

Lead Engineer

Textarea

Multi-line input for longer text and messages.

Your Feedback

Tabs

This is the profile tab content. It contains user-specific information and personal details.

Welcome to your dashboard. All your key metrics and performance indicators are displayed here.

Manage your application settings, notification preferences, and security options from this tab.

Component	Category	Status	Assignee
Button	Interactive	Complete	Eva Roy
Card	Layout	Complete	John Appleseed
Date Picker	Form Input	In Progress	Eva Roy
Table	Data Display	Review	John Appleseed

```

历史版本

版本历史

版本内容

选择对比版本