### CSS Styling for Wave Design System Elements Source: https://wave-design-system.vercel.app/components/app-bar This snippet provides example CSS rules for various Wave Design System elements, defining their layout, appearance, and responsiveness. It includes styles for containers, tables, and text elements, utilizing design tokens for consistent theming across the application. ```CSS .c-PJLV-ibqqKnE-css{margin-top:var(--space-spacingS);position:relative;overflow:auto}.c-PJLV-ibqqKnE-css:focus{outline:0}.c-PJLV-ihhvgim-css{width:100%;text-align:left;border-collapse:collapse}.c-PJLV-idkZRAh-css{display:none}@media screen and ( min-width: 31.25em ){.c-PJLV-idkZRAh-css{display:block}}.c-PJLV-ijRXkDt-css{color:var(--colors-foregroundNeutralSubtle)}.c-PJLV-ikxOSpM-css{color:var(--colors-foregroundDangerModerate);font-weight:600}} ``` -------------------------------- ### CSS Flex Gap and Responsive Grid Styles Source: https://wave-design-system.vercel.app/components/label This snippet includes a utility class for defining gaps in flex containers and a media query example for applying a 2-column grid layout on larger screens. It demonstrates responsive design patterns within the system. ```CSS .c-cTGDjY-iHSQXN-gap-spacingXs{--flex-gap:var(--space-spacingXs)}@media screen and ( min-width: 48.75em ){.c-gLRGMx-ioOdwF-columns-2{---gridColumns:repeat(2, minmax(0, 1fr))}} ``` -------------------------------- ### API Reference for Label and LabelDot Components Source: https://wave-design-system.vercel.app/components/label This section provides a detailed API reference for the `Label` and `LabelDot` components, outlining their available props, types, and default values. It serves as a comprehensive guide for developers integrating these components into their applications. ```APIDOC Component: Label Props: - as: Type: enum Default: span - css: Type: StitchesCss Default: No default value - color: Type: enum Default: "neutral" - variant: Type: enum Default: "strong" - circular: Type: boolean Default: No default value - size: Type: enum Default: medium - startElement: Type: React.ReactElement Default: No default value - endElement: Type: React.ReactElement Default: No default value - isDisabled: Type: boolean Default: No default value - onRemove: Type: function Default: No default value - showOutlineRing: Type: boolean Default: No default value - margin: Type: SpacingToken Default: No default value - marginX: Type: SpacingToken Default: No default value - marginY: Type: SpacingToken Default: No default value - marginBottom: Type: SpacingToken Default: No default value - marginLeft: Type: SpacingToken Default: No default value - marginRight: Type: SpacingToken Default: No default value - marginTop: Type: SpacingToken Default: No default value Component: LabelDot Props: - css: Type: StitchesCss Default: No default value - color: Type: ColorToken Default: No default value ``` -------------------------------- ### Wave Design System Content Map and Component API Overview Source: https://wave-design-system.vercel.app/components/hint-dot This section provides a hierarchical overview of the Wave Design System's documentation, including core sections like 'Introduction', 'Get Started', 'Tokens', 'Components', and 'UX Patterns'. It lists all available components, design tokens, and UX patterns with their respective documentation paths, serving as a high-level API reference for the system's structure and available modules. ```APIDOC Wave Design System Documentation Structure: - Introduction: / - Get started: - Developing: /get-started/developing - Contributing to Wave: /get-started/contributing-to-wave - Composition: /get-started/composition - How to work with Figma?: /get-started/how-to-work-with-figma - Site contribution 101: /get-started/site-contribution-101 - Tokens: - Colors: /tokens/colors - Typography: /tokens/typography - Icons: /tokens/icons - Elevation: /tokens/elevation - Spacing and size: /tokens/spacing-and-size - Breakpoints: /tokens/breakpoints - Components: - Layout: - Box: /components/layout/box - Flex: /components/layout/flex - Grid: /components/layout/grid - Auto Grid: /components/layout/auto-grid - Switcher: /components/layout/switcher - Sidebar: /components/layout/sidebar - Anchor: /components/layout/anchor - Content Block: /components/layout/content-block - Aspect Ratio: /components/layout/aspect-ratio - Separator: /components/layout/separator - Forms: - Form Field: /components/forms/form-field - Text Input: /components/forms/text-input - Textarea: /components/forms/textarea - Checkbox: /components/forms/checkbox - Radio: /components/forms/radio - Select: /components/forms/select - Select menu: - Select Menu: /components/forms/select-menu/select-menu - Single Select Menu: /components/forms/select-menu/single-select-menu - Multi Select Menu: /components/forms/select-menu/multi-select-menu - Combobox: /components/forms/combobox - Date Picker: /components/forms/date-picker - Time Picker: /components/forms/time-picker - Typography: - Text: /components/typography/text - Heading: /components/typography/heading - Avatar: /components/avatar - Action Bar: /components/action-bar - App Bar: /components/app-bar - App Frame: /components/app-frame - App Frame With Sidebar: /components/app-frame-with-sidebar - App Header: /components/app-header - Button: /components/button - Button Group: /components/button-group - Calendar: /components/calendar - Card: /components/card - Collapsible Card: /components/collapsible-card - Collapsible: /components/collapsible - Data Item: /components/data-item - Data List: /components/data-list - Dialog: /components/dialog - Drawer: /components/drawer - Hint Dot: /components/hint-dot - Keyboard Key (Kbd): /components/kbd - Label: /components/label - Link: /components/link - Logo: /components/logo - Menu: /components/menu - Nav Bar: /components/nav-bar - Notification: /components/notification - Pagination: /components/pagination - Popover: /components/popover - Sidebar Navigation: /components/sidebar-navigation - Skeleton: /components/skeleton - Spinner: /components/spinner - SVG Icon: /components/svg-icon - Switch: /components/switch - Table: /components/table - Tabs: /components/tabs - Toaster: /components/toaster - Tooltip: /components/tooltip - Tree View: /components/tree-view - Utility: - Dismissable Layer: /components/utility/dismissable-layer - Hidden: /components/utility/hidden - Motion box: /components/utility/motion-box - Portal: /components/utility/portal - Positioner: /components/utility/positioner - Roving Focus Group: /components/utility/roving-focus-group - Slot: /components/utility/slot - Visually Hidden: /components/utility/visually-hidden - UX patterns: - Introduction: /UX-patterns/introduction - Framework: - App layouts: /UX-patterns/framework/app-layouts - Page layouts: /UX-patterns/framework/page-layouts - Navigation: /UX-patterns/framework/navigation - Style: - Branding: /UX-patterns/style/branding - Sizing: /UX-patterns/style/sizing - Basic user interaction: - Authentication: /UX-patterns/basic-user-interaction/authentication - User Menu: /UX-patterns/basic-user-interaction/user-menu - Settings: /UX-patterns/basic-user-interaction/settings - Data entry: - Forms: /UX-patterns/data-entry/forms - Input: /UX-patterns/data-entry/input - Selection: /UX-patterns/data-entry/selection - Data visualization: - Key indicators: /UX-patterns/data-visualization/key-indicators - Tables and lists: /UX-patterns/data-visualization/tables - System feedback: - Empty States: /UX-patterns/system-feedback/empty-states - Loading: /UX-patterns/system-feedback/loading - Notification: /UX-patterns/system-feedback/notification ``` -------------------------------- ### Tabbed Interface Example References Source: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/ References to external examples demonstrating different activation behaviors for tab widgets. ```APIDOC [ { "name": "Tabs With Automatic Activation", "description": "A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.", "link": "examples/tabs-automatic/" }, { "name": "Tabs With Manual Activation", "description": "A tabs widget where users activate a tab and display its panel by pressing Space or Enter.", "link": "examples/tabs-manual/" } ] ``` -------------------------------- ### Import applySizes Utility for Responsive Sizing in React Source: https://wave-design-system.vercel.app/components/button/ This snippet shows how to import the `applySizes` utility from `@volue/wave-react`. This utility enables defining size 'scopes' within an application, allowing buttons within a scope to share a consistent size unless individually overridden. ```JavaScript import { applySizes } from '@volue/wave-react'; ``` -------------------------------- ### Install a Package from GitHub Packages Source: https://docs.github.com/packages Detailed guide on installing packages from GitHub Packages into your projects, covering various registry types. ```APIDOC Topic: Installing a package. Content: Steps to consume packages. ``` -------------------------------- ### AppBar Component API Reference Source: https://wave-design-system.vercel.app/components/app-bar Detailed API documentation for the AppBar compound component and its sub-components, outlining their purpose, properties, and usage within the Wave Design System. ```APIDOC interface AppBar { Root: React.FC; Logo: React.FC; Items: React.FC; Item: React.FC; } interface AppBarRootProps { // The root component that wraps the entire app bar. children?: React.ReactNode; } interface AppBarLogoProps { // The logo component that displays the logo of the application. children?: React.ReactNode; } interface AppBarItemsProps { // The component that wraps the items in the app bar. children?: React.ReactNode; } interface AppBarItemProps { // The individual item component that represents a single item in the app bar. // Accepts subset of SVG Icon props (e.g., iconName, pathData). isActive?: boolean; // If true, the app bar automatically scrolls to bring this item into view. iconName?: string; // Name of an icon from the Wave Design System icon set. pathData?: string; // Custom SVG path data for displaying a unique icon. label?: string; // The text label displayed alongside the icon. as?: React.ElementType; // Allows composition with other components, e.g., React Router's Link. to?: string; // Target path for navigation when 'as' is a routing component. children?: React.ReactNode; // Can be used to pass a custom SVG element directly. } ``` -------------------------------- ### Install GitHub Packages as Project Dependencies Source: https://docs.github.com/packages This guide outlines the process for installing packages directly from GitHub Packages. It demonstrates how to integrate these packages as dependencies within your own development projects, streamlining your workflow. ```APIDOC API Reference: Installing a package Endpoint: /en/packages/learn-github-packages/installing-a-package Description: Install packages from GitHub Packages and use them as dependencies in your projects. ``` -------------------------------- ### Implement Basic TanStack Table Setup Source: https://wave-design-system.vercel.app/components/table This snippet demonstrates the fundamental imports required to set up a basic data table using TanStack Table, including `flexRender`, `getCoreRowModel`, `useReactTable`, and `createColumnHelper`. ```JavaScript import { flexRender, getCoreRowModel, useReactTable, createColumnHelper } from '@tanstack/react-table'; ``` -------------------------------- ### Combobox Implementation Examples Source: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ This section provides an overview of various combobox implementations, showcasing different autocomplete behaviors and specialized uses. Each example demonstrates a distinct functional or visual characteristic of the combobox component. ```APIDOC Select-Only Combobox: A single-select combobox with no text input that is functionally similar to an HTML `select` element. Editable Combobox with Both List and Inline Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete. Editable Combobox with List Autocomplete: An editable combobox that demonstrates the autocomplete behavior known as list with manual selection. Editable Combobox Without Autocomplete: An editable combobox that demonstrates the behavior associated with `aria-autocomplete=none`. Editable Combobox with Grid Popup: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion. Date Picker Combobox: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year. ``` -------------------------------- ### Set Default Values for MultiSelectMenu in React Source: https://context7_llms Illustrates how to initialize a MultiSelectMenu with pre-selected options using the 'defaultValue' property in an uncontrolled mode. This example sets 'white' and 'green' as initial selections, providing a starting state for the component. ```JSX {'White'} {'Red'} {'Green'} {'Purple'} ``` -------------------------------- ### Define Initial Font Faces with CSS Source: https://wave-design-system.vercel.app/components/label This CSS snippet defines the initial `@font-face` rules for 'Source Sans Pro' and 'FK Display' fonts. It specifies the font files and uses `font-display: swap` to prevent invisible text during font loading, ensuring a better user experience. ```CSS @font-face { font-family: 'Source Sans Pro'; src: url(/fonts/SourceSansPro-Regular-initial.woff2) format("woff2"), url(/fonts/SourceSansPro-Regular-initial.woff) format("woff"); font-display: swap; } @font-face { font-family: 'FK Display'; src: url(/fonts/FKDisplay-Regular-initial.woff2) format("woff2"), url(/fonts/FKDisplay-Regular-initial.woff) format("woff"); font-display: swap; } ``` -------------------------------- ### Button Component API Reference Source: https://wave-design-system.vercel.app/components/button/ Detailed API reference for the Button component, listing all available props, their types, and default values. This section outlines the configurable properties for customizing button behavior and appearance. ```APIDOC Class/Component: Button Description: A versatile UI component for user interaction within the Wave Design System. Props: - name: as type: enum default: button description: Allows changing the component to a different HTML tag or custom component (polymorphism). - name: css type: StitchesCss default: No default value description: Stitches CSS properties for styling. - name: variant type: enum default: "strong" description: Defines the visual style of the button (e.g., primary, secondary, ghost, danger, success). - name: size type: enum default: No default value description: Defines the size of the button (e.g., large, medium, small). - name: color type: enum default: "accent" description: Defines the color scheme of the button. - name: leftIcon type: React.ReactElement default: No default value description: An icon to display on the left side of the button text. - name: rightIcon type: React.ReactElement default: No default value description: An icon to display on the right side of the button text. - name: withLoneIcon type: boolean default: false description: Indicates if the button contains only an icon without text. - name: shape type: enum default: "default" description: Defines the shape of the button. - name: isLoading type: boolean default: false description: Indicates if the button is in a loading state. - name: loadingText type: string default: No default value description: Text to display when the button is in a loading state. - name: isDisabled type: boolean default: false description: Indicates if the button is disabled. - name: isActive type: boolean default: false description: Indicates if the button is in an active state. - name: isNarrow type: boolean default: false description: Indicates if the button should have a narrow width. ``` -------------------------------- ### Example AppFrame with NavBar and AppHeader in JSX Source: https://context7_llms This JSX code demonstrates a complete application frame setup using `AppFrame.Root`, `AppFrame.AppHeader`, and `AppFrame.NavBar`. It showcases how to integrate `AppHeader.Logo`, `AppHeader.Title`, `AppHeader.ActionList` with various interactive elements like `SvgIcon`, `Tooltip`, `Anchor`, `Menu`, and `Avatar`. The `NavBar.Root` is configured with multiple `NavBar.Item`s for primary navigation, and `AppFrame.Main` holds the main content area. This example is suitable for applications with a limited number of top-level navigation items. ```jsx {'Product name'} }> {'User Guide'} {'2'} {'Max Mustermann'} {'max.mustermann@volue.com'} }> {'Activate MFA'} {'Log Out'} {'Home'} {'Dashboard'} {'Bidding'} {'Results'} {'App view'} ``` -------------------------------- ### Basic Combobox Implementation in JSX Source: https://context7_llms The Combobox component allows users to select an item from a dropdown list, with Combobox.TextInput providing typeahead search. This example demonstrates a fundamental Combobox setup, showing how to define selectable items and use a placeholder for the input field. ```jsx {'Apple'} {'Banana'} {'Grape'} {'Orange'} {'Strawberry'} {'Mango'} ``` -------------------------------- ### Guidance for Location Icon Usage in Mobile Solutions Source: https://wave-design-system.vercel.app/components/button/ Provides a specific guideline for when to apply the `location` icon, emphasizing its use in mobile applications that feature GPS navigation capabilities. ```APIDOC Use the `location` icon for **mobile solutions**, where the GPS navigation is available. ``` -------------------------------- ### Textarea Integration with Form Field in React Source: https://context7_llms This example demonstrates how to integrate the Textarea component with the FormField component for consistent labeling, helper text, and validation feedback. It showcases both a basic form field setup and a required field with an error message, enhancing accessibility and user experience. ```JSX {'Message'} {'Help or instruction text goes here.'}