### Clone Repository and Setup Project Dependencies Source: https://design.haiilo.com/7a807c8eb/p/97f791-project This snippet shows how to clone the project repository from GitHub and install project dependencies using pnpm. It assumes Node.js and pnpm are already installed. The pnpm install command also sets up husky commit hooks. ```shell git clone https://github.com/haiilo/catalyst.git cd catalyst nvm use pnpm install ``` -------------------------------- ### Run Stencil Development Server Source: https://design.haiilo.com/7a807c8eb/p/97f791-project/b/22232f This command starts the Stencil integrated dev server in the 'core' directory, which automatically opens the local dev URL in your default browser. It requires the 'tokens' project to be built first. ```shell pnpm run start ``` -------------------------------- ### Generate New Stencil Component Source: https://design.haiilo.com/7a807c8eb/p/97f791-project/b/22232f This command uses the Stencil CLI to start an interactive generator for creating new components within the 'core' project. It requires the Stencil CLI to be installed. ```shell pnpm generate ``` -------------------------------- ### Run Angular Wrapper Development Server Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command navigates to the 'angular' directory and starts the Angular live development server. This is used for developing and testing the Angular wrapper library. Ensure the 'core' project is built first. ```shell cd angular pnpm run start ``` -------------------------------- ### Setup Node.js Version with NVM Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command uses the Node Version Manager (NVM) to switch to the Node.js version specified in the project's .nvmrc file. This ensures consistent development environments. Make sure NVM is installed. ```shell nvm use ``` -------------------------------- ### Install Catalyst React with npm or Yarn Source: https://design.haiilo.com/7a807c8eb/p/813753-framework-setups/b/20e3aa Installs the Haiilo Catalyst React wrapper and its dependencies. This command adds `@haiilo/catalyst-react`, `@haiilo/catalyst-tokens`, and `@haiilo/catalyst-core` to your project. You must also explicitly add `@haiilo/catalyst-icons` if you intend to use the standard icon set. ```bash npm install @haiilo/catalyst-react ``` ```bash yarn add @haiilo/catalyst-react ``` -------------------------------- ### Install pnpm Package Manager Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command installs the pnpm package manager, which is used for managing project dependencies. Follow the official pnpm installation guide if you do not have it installed. ```shell pnpm install ``` -------------------------------- ### Run Haiilo Core Development Server Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command navigates to the 'core' directory and starts Stencil's integrated development server. This server simplifies the development of core components. Ensure the 'tokens' project is built first. ```shell cd core pnpm run start ``` -------------------------------- ### Build Haiilo Core Project Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command builds the 'core' project from the root directory. This is a prerequisite for starting the Angular live development server. ```shell pnpm run build:core ``` -------------------------------- ### Build Haiilo Tokens Project Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command builds the 'tokens' project from the root directory. This is a prerequisite for starting the Stencil development server for the core project. ```shell pnpm run build:tokens ``` -------------------------------- ### Basic Input Component Usage Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/94564d-input Demonstrates the basic instantiation of the Input component in HTML. This serves as the foundational example for using the component. ```html ``` -------------------------------- ### Clone Haiilo Catalyst Project Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command clones the Haiilo Catalyst project repository from GitHub. Ensure you have Git installed and configured on your system. ```shell git clone https://github.com/haiilo/catalyst.git ``` -------------------------------- ### Style Dictionary Configuration Example Source: https://design.haiilo.com/7a807c8eb/p/17cd2d-what-are-tokens This snippet demonstrates a typical configuration file for Style Dictionary, showing how to define input files, custom transformations, and output formats for generating design tokens. ```javascript module.exports = { source: [ 'tokens/**/*.@(json|yaml|yml)' ], platforms: { scss: { transformGroup: 'custom/transform-group', buildPath: 'output/scss/', files: [{ destination: '_variables.scss', format: 'scss/variables' }] }, css: { transformGroup: 'custom/transform-group', buildPath: 'output/css/', files: [{ destination: 'variables.css', format: 'css/variables' }] } } }; ``` -------------------------------- ### Run Haiilo Core Watch Build Task Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command enables a watch mode for building the 'core' project, which automatically recompiles components as changes are detected, simplifying the development workflow. ```shell pnpm run build:watch ``` -------------------------------- ### Primary Button Examples (HTML) Source: https://design.haiilo.com/7a807c8eb/p/50f9a7-theming/b/65bf23 Shows different variants of the primary button component in HTML. These examples illustrate how the `cat-button` component renders with the `primary` color variant across `filled`, `outlined`, `text`, and `link` styles. ```html Button Button Button Button ``` -------------------------------- ### Timepicker Component Basic Usage Source: https://design.haiilo.com/7a807c8eb/p/71ec46 This example demonstrates the basic usage of the timepicker component with a label and placeholder. ```APIDOC ## Timepicker Component Basic Usage ### Description The time picker lets users pick a time using a dropdown interface. The value of the control must be given in HH:mm format. ### Method N/A (Component Usage) ### Endpoint N/A (Component Usage) ### Parameters #### Attributes - **label** (string) - Optional - Defines the label for the time picker. - **placeholder** (string) - Optional - Provides a placeholder text for the input field, e.g. "e.g. 20:10". - **clearable** (boolean) - Optional - If present, allows the user to clear the selected time. ### Request Example ```html ``` ### Response N/A (Component Usage) ### Response Example N/A (Component Usage) ``` -------------------------------- ### Manual Version Creation and Publishing with pnpm Source: https://design.haiilo.com/7a807c8eb/p/97f791-project/b/83cafe This details the manual steps for creating a new release bundle for all projects in the repository. It involves using pnpm utility scripts for version bumping, building, dependency installation, publishing to npm, and pushing tags to the main branch. ```bash # Create a new version (patch, minor, or major) pnpm run release:patch # Build all projects pnpm run build # Install dependencies for every project pnpm install # Publish every project to npmjs.com pnpm run publish # Push your changes with tags git push --follow-tags origin main ``` -------------------------------- ### Conventional Commits Structure Example Source: https://design.haiilo.com/7a807c8eb/p/97f791-project/b/033431 Illustrates the standard structure for commit messages following the Conventional Commits specification. It includes placeholders for type, scope, description, and optional body/footers. This helps in creating a clear and machine-readable commit history. ```plaintext (): [optional body] [optional footer(s)] ``` -------------------------------- ### Show Notifications using catNotificationService Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/90aaaa-notification Demonstrates how to trigger a notification using the `catNotificationService.show()` method. This involves calling the service and passing a configuration object which can include message, icon, and action button. The example HTML shows a button to trigger the notification. ```html Show Notifications ``` -------------------------------- ### Tooltip Sizing Examples (HTML) Source: https://design.haiilo.com/7a807c8eb/p/26d3a7-tooltip/b/113e0f Illustrates how to control the size of the Tooltip component using the 'size' attribute. Accepted values are 's', 'm' (default), and 'l'. This example uses HTML. ```html Hover me! (S) Hover me! (M) Hover me! (L) ``` -------------------------------- ### Generate New Stencil Component Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/97f791-project This command uses the Stencil CLI to generate new components interactively within the 'core' project. It prompts the user for necessary details to create a new component. ```shell cd core pnpm generate ``` -------------------------------- ### HTML Examples of Visibility Utilities Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/842d00-visibility Demonstrates the practical application of Haiilo's visibility utility classes in HTML. These classes help hide content from visual rendering while ensuring it remains accessible to assistive technologies like screen readers or accessible via keyboard focus. ```html

Title for screen readers

Skip to main content
A container with a focusable element.
parent child
``` -------------------------------- ### CSS Custom Properties: Component Customization Example Source: https://design.haiilo.com/7a807c8eb/p/35985d Illustrates how consumers of a component can customize its appearance from the light DOM by overriding CSS custom properties. This example shows changing the `--cat-icon-ratio` property of a `cat-icon` component. ```css cat-icon { --cat-icon-ratio: 3; } ``` -------------------------------- ### SCSS Mixins for Visibility Utilities Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/842d00-visibility Provides SCSS examples showcasing how to use the mixins equivalent to the CSS utility classes. This allows for more integrated styling within SCSS files, offering flexibility in targeting parents or combining with other media queries. ```scss .visually-hidden-title { @include cat-visually-hidden; } .skip-navigation { @include cat-visually-hidden-focusable; } .hover-menu { /* Show on hover of direct parent */ @include cat-visually-hidden-hoverable; } .hover-menu { /* Show on hover of .card parent */ @include cat-visually-hidden-hoverable(.card); } .card { .hover-menu { /* Not working due to duplicate .card selector in generated CSS */ @include cat-visually-hidden-hoverable(.card); } } ``` -------------------------------- ### HTML: Apply Text Colors with Utility Classes Source: https://design.haiilo.com/7a807c8eb/p/386eeb-color Shows how to apply text colors using `.cat-text-*` utility classes. It includes examples for hover states (`.cat-text-*-hover`) and link styles (`.cat-link-*`), which also handle hover and active states. Hover and link utilities feature a transition effect. ```html

.cat-text-primary

.cat-text-secondary

.cat-text-danger

.cat-text-warning

.cat-text-success

.cat-text-primary-hover

.cat-text-secondary-hover

.cat-text-danger-hover

.cat-text-warning-hover

.cat-text-success-hover

.cat-link-primary

.cat-link-secondary

.cat-link-danger

.cat-link-warning

.cat-link-success

``` -------------------------------- ### Tooltip Placement Configuration (HTML) Source: https://design.haiilo.com/7a807c8eb/p/26d3a7-tooltip/b/113e0f Shows how to specify the position of the Tooltip using the 'placement' attribute. Options include 'top', 'left', 'right', 'bottom', and their '-start'/'-end' variants. The component can auto-adjust placement. This example uses HTML. ```html Hover me! ``` -------------------------------- ### Basic Radio Group Example (HTML) Source: https://design.haiilo.com/7a807c8eb/p/10c72f-radio-group Demonstrates a simple radio group with three options, where one is pre-selected and another is disabled. This showcases the fundamental structure and common attributes. ```html
Selected value: none
``` -------------------------------- ### Timepicker Component with Min/Max Time Source: https://design.haiilo.com/7a807c8eb/p/71ec46 This example shows how to set minimum and maximum selectable times for the timepicker. ```APIDOC ## Timepicker Component with Min/Max Time ### Description Users can adjust the minimum and maximum time that can be picked using the `min` and `max` attributes, provided in HH:mm format. ### Method N/A (Component Usage) ### Endpoint N/A (Component Usage) ### Parameters #### Attributes - **label** (string) - Optional - Defines the label for the time picker. - **value** (string) - Optional - Sets the initial value of the time picker in HH:mm format. - **min** (string) - Optional - Sets the minimum selectable time in HH:mm format. - **max** (string) - Optional - Sets the maximum selectable time in HH:mm format. ### Request Example ```html ``` ### Response N/A (Component Usage) ### Response Example N/A (Component Usage) ``` -------------------------------- ### Include Catalyst Styles and Fonts in SCSS Source: https://design.haiilo.com/7a807c8eb/p/813753-framework-setups/b/20e3aa Imports Catalyst styles and sets the font path for your SCSS build. This ensures Catalyst's design tokens and base styles are applied correctly. Adjust the `$cat-font-path` variable to match your project's asset serving configuration. ```scss // Load Catalyst styles $cat-font-path: '../../assets/fonts'; @import "@haiilo/catalyst/dist/catalyst/scss"; ``` -------------------------------- ### Basic Datepicker Usage Source: https://design.haiilo.com/7a807c8eb/p/0723b8-datepicker-old Demonstrates the basic structure and common attributes for the `cat-datepicker` component, including an icon, label, placeholder, and clearable option. This serves as a starting point for integrating the date picker. ```html ``` -------------------------------- ### Configure ESLint for TypeScript Source: https://design.haiilo.com/7a807c8eb/p/240591-code-style/b/7475b6 This snippet shows the configuration for ESLint to enforce TypeScript style guidelines. It extends recommended ESLint rules, TypeScript-specific rules, and integrates with Prettier for formatting consistency. Ensure you have the necessary ESLint and TypeScript plugins installed. ```javascript // .eslintrc.js module.exports = { // ... extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier' ], // ... }; ``` -------------------------------- ### Adjusting Alert and Link Styles (HTML) Source: https://design.haiilo.com/7a807c8eb/p/50f9a7-theming/b/65bf23 An example demonstrating the adjustment of styles for an alert component and its internal link. This snippet showcases how to achieve sharp edges for the alert and underlined links by overriding default CSS properties. ```html

We love sharp edges and underlined links.

 ``` -------------------------------- ### HTML Example: Apply .cat-article for Editorial Typography Source: https://design.haiilo.com/7a807c8eb/p/377e33-typography/b/10d834 This HTML snippet demonstrates the application of the `.cat-article` class to a `cat-card` component. The `.cat-article` class is used to apply specific typography styles for editorial content, influencing spacing and layout compared to a card without the class. It highlights how global typography styles and margin management are implemented. ```html

Without .cat-article

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  • Ut wisi enim ad minim veniam
  • Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
  • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Without .cat-article

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  • Ut wisi enim ad minim veniam
  • Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
  • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
``` -------------------------------- ### Register Catalyst Custom Elements in React Source: https://design.haiilo.com/7a807c8eb/p/813753-framework-setups/b/20e3aa Registers all Catalyst web components for use within your React application. This function should be called once during your application's initialization to make Stencil components available as first-class React components. ```typescript import { defineCustomElements } from '@haiilo/catalyst/loader'; defineCustomElements(); ``` -------------------------------- ### SCSS: Import Catalyst Design Tokens Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/827d43-development This snippet shows how to import Catalyst design tokens into your SCSS stylesheet using the `@use` rule. This is the primary method to access SCSS variables provided by the Catalyst library, enabling consistent styling across your project. ```scss @use '@haiilo/catalyst/dist/catalyst/scss/variables'; ``` -------------------------------- ### Single Selection Example with Local Data (TypeScript) Source: https://design.haiilo.com/7a807c8eb/p/1959da-select/b/129708/t/page-1959da-75585140-129708-2 Demonstrates how to create a Catalyst Select component for single selection using local data. It imports necessary RxJS operators and defines a local array of country objects, which would be used to build a connector for the select component. ```typescript import "./styles"; import { of, delay } from 'rxjs'; const countries = [ { id: '0', country: 'Afghanistan', capital: 'Kabul' }, { id: '1', country: 'Albania', capital: 'Tirana' }, { id: '2', country: 'Algeria', capital: 'Alger' }, { id: '3', country: 'American Samoa', capital: 'Fagatogo' }, { id: '4', country: 'Andorra', capital: 'Andorra la Vella' }, { id: '5', country: 'Angola', capital: 'Luanda' }, { id: '6', ``` -------------------------------- ### Screen Reader Label for Buttons Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/50fa07-button This example shows how to use the `a11yLabel` property to provide a descriptive label for screen readers. This is crucial when the visible button text is insufficient or needs to be adapted for users of assistive technologies. The `a11yLabel` ensures that the button's purpose is clearly communicated. ```javascript { // 'a11yLabel' provides a screen-reader-only label a11yLabel: "Submit form data", // ... other properties } ``` -------------------------------- ### Use Elevation as Sass Mixins (CSS/SCSS) Source: https://design.haiilo.com/7a807c8eb/p/04e28b-elevation Illustrates how to utilize the `cat-elevation` and `cat-elevation-transition` Sass mixins within CSS. This allows for more flexible and maintainable styling, enabling custom classes to incorporate elevation effects and hover transitions programmatically. The example shows applying an elevation on load and a different elevation with a transition on hover. ```scss .with-shadow { @include cat-elevation(1); &:hover { @include cat-elevation(2); @include cat-elevation-transition; } } ``` -------------------------------- ### Input Component with Labels and Hints Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/94564d-input Shows how to add standard labels and hints to the Input component, as well as how to use slotted content for rich text formatting within labels and hints. This enhances user guidance and provides richer contextual information. ```html Label with rich content. This is an additional hint for the input. ``` -------------------------------- ### Input Component with Icon and Text Prefix/Suffix Source: https://design.haiilo.com/7a807c8eb/p/94564d-input/b/129708 Demonstrates adding icon prefixes and suffixes, as well as textual prefixes and suffixes to the Input component. ```html ``` ```html ``` -------------------------------- ### Input Component Types and Variations Source: https://design.haiilo.com/7a807c8eb/p/94564d-input/b/129708 Illustrates different input types and variations, including password input, search input, number, file, and range inputs. ```html ``` ```html ``` -------------------------------- ### Rounded Tooltip Style (HTML) Source: https://design.haiilo.com/7a807c8eb/p/26d3a7-tooltip/b/113e0f Demonstrates how to apply rounded edges to the Tooltip component by setting the 'round' attribute to 'true'. This example uses HTML. ```html Hover me! ``` -------------------------------- ### Date and Time Selection (Angular) Source: https://design.haiilo.com/7a807c8eb/p/313805-datepicker-new/t/829e9d Provides an example of combining date and time selection using separate components, with a note about an Angular wrapper that handles the conversion to a JS Date object. ```html ``` -------------------------------- ### Controlling Icon Size Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/88aa49-icon This example shows how to control the size of icons using the 'size' attribute, with options ranging from 'xs' to 'xl', including 'inline' for font-size based sizing. ```html ``` -------------------------------- ### Basic Skeleton Component Usage Source: https://design.haiilo.com/7a807c8eb/p/30ba09-skeleton/b/129708 Demonstrates the basic implementation of the cat-skeleton component. This is typically used as a simple placeholder where content will eventually be loaded. It requires no attributes for basic functionality. ```html ``` -------------------------------- ### Default Form Group Layout (HTML) Source: https://design.haiilo.com/7a807c8eb/p/337b21-form-group Demonstrates the basic usage of the cat-form-group component with default vertical alignment for its child input elements. No special properties are required for this basic setup. ```html ``` -------------------------------- ### Apply Margin Utilities (HTML) Source: https://design.haiilo.com/7a807c8eb/p/49aa8d-spacing Demonstrates the usage of margin utility classes to apply different margin sizes to elements. These classes follow the `.cat-{property}{side}-{size}` notation, where 'm' signifies margin. ```HTML
XS
S
M
L
XL
``` -------------------------------- ### Using Catalyst Angular DialogService and DialogComponent (Angular) Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/76efe7-dialog This snippet demonstrates how to use the `CatDialogService` and `DialogComponent` provided by Catalyst Angular for implementing dialogs in Angular applications. Ensure you have Catalyst Angular installed and configured in your project. ```typescript import { Component } from '@angular/core'; import { CatDialogService } from '@catalyst/angular'; @Component({ selector: 'app-my-component', templateUrl: './my-component.html', }) export class MyComponent { constructor(private dialogService: CatDialogService) {} openDialog(): void { this.dialogService.open(MyDialogComponent, { data: { message: 'Hello from my component!' }, }); } } ``` ```typescript import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ selector: 'app-my-dialog', template: '{{ data.message }}', }) export class MyDialogComponent { constructor(@Inject(MAT_DIALOG_DATA) public data: { message: string }) {} } ``` -------------------------------- ### Basic Button Usage (HTML) Source: https://design.haiilo.com/7a807c8eb/p/50fa07-button/b/79ea62 Demonstrates the basic implementation of a button component using the custom element ''. This serves as the foundational structure for all button variations. ```html Button ``` -------------------------------- ### HTML: Apply Background Colors with Utility Classes Source: https://design.haiilo.com/7a807c8eb/p/386eeb-color Demonstrates how to use `.cat-bg-*` classes to set background colors and `.cat-bg-*-hover` for hover states. These classes also automatically adjust text color for contrast. Hover utilities include a transition effect. ```html

.cat-bg-primary

.cat-bg-secondary

.cat-bg-danger

.cat-bg-warning

.cat-bg-success

.cat-bg-primary-hover

.cat-bg-secondary-hover

.cat-bg-danger-hover

.cat-bg-warning-hover

.cat-bg-success-hover

``` -------------------------------- ### Basic Alert Component Usage (HTML) Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/849cf8-alert Demonstrates the fundamental implementation of the alert component using a simple HTML structure. No external libraries are required for this basic usage. ```html

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

 ``` -------------------------------- ### Form Group with Auto Marker Behavior (HTML) Source: https://design.haiilo.com/7a807c8eb/p/337b21-form-group Demonstrates the default 'auto' behavior of the `required-marker` property, where markers are displayed based on the proportion of required versus optional fields. This example shows two different distributions. ```html ``` -------------------------------- ### Basic Tooltip Implementation (HTML) Source: https://design.haiilo.com/7a807c8eb/p/26d3a7-tooltip/b/113e0f Demonstrates the fundamental usage of the Tooltip component by wrapping an element with the custom 'cat-tooltip' tag and providing content. It uses HTML for markup. ```html Hover me! ``` -------------------------------- ### Text Ellipsis Utilities Source: https://design.haiilo.com/7a807c8eb/p/396792-typography Demonstrates the implementation of text ellipsis to prevent content overflow. It includes examples for single-line ellipsis (`cat-ellipsis`) and multi-line ellipsis (`cat-ellipsis-{n}` where n is 1 to 5). This functionality depends on CSS rules. ```html

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

``` -------------------------------- ### Input Component with Text Prefixes and Suffixes Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/94564d-input Demonstrates how to append textual prefixes and suffixes to the Input component using the `text-prefix` and `text-suffix` properties. These can also be combined with icon prefixes for more complex input designs. ```html ``` -------------------------------- ### Disabling Buttons for Accessibility Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/50fa07-button This code illustrates the use of the `disabled` property to indicate that a button is currently inactive. Properly disabling a button ensures that assistive technologies communicate its non-interactive state to users, preventing confusion and guiding the user experience. ```javascript { // 'disabled' property correctly conveys non-interactive state disabled: true, // ... other properties } ``` -------------------------------- ### Select Component Initialization - JavaScript Source: https://design.haiilo.com/7a807c8eb/p/1959da-select/b/129708/t/page-1959da-75585140-129708-2 Demonstrates how to initialize and connect the custom select component with the country data connector. It shows basic connection and extended configurations for avatar and initials. ```javascript setTimeout(() => { const select = document.getElementById('select'); const selectAvatar = document.getElementById('select-avatar'); const selectInitials = document.getElementById('select-initials'); const selectIcons = document.getElementById('select-icons'); if (select) { select.connect(countryConnector); } if (selectAvatar) { selectAvatar.connect({ ...countryConnector, render: (country) => ({ label: country.country, description: country.capital || 'No capital', avatar: { src: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200`, round: true } }) }); } if (selectInitials) { selectInitials.connect({ ...countryConnector, render: (country) => ({ label: country.country, description: country.capital || 'No capital', ``` -------------------------------- ### Basic Icon Usage Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/88aa49-icon This snippet demonstrates the basic usage of the cat-icon component, displaying a predefined icon. ```html ``` -------------------------------- ### Auto Repeating Grid Columns Utilities (HTML) Source: https://design.haiilo.com/7a807c8eb/p/069dc7 Demonstrates creating responsive grid layouts with auto-repeating columns using `.cat-grid-auto`. The `--grid-min` CSS property on the container allows customization of the minimum column width, ensuring responsiveness. ```html
01 02 03 04 05 06 07
``` -------------------------------- ### Basic Dropdown Structure (HTML) Source: https://design.haiilo.com/7a807c8eb/p/78f5bd Defines a basic dropdown component using native HTML elements within a custom 'cat-dropdown' element. It consists of a 'trigger' slot for the button and a 'content' slot for the navigation menu, with example list items. ```html Open Menu ``` -------------------------------- ### Apply Box-Shadows with Elevation Utility Classes (HTML) Source: https://design.haiilo.com/7a807c8eb/p/04e28b-elevation Demonstrates how to apply different levels of box-shadows to elements using the `cat-elevation-#` utility classes. These classes provide pre-defined shadow styles. Note that these shadows are not stackable and applying a new elevation class will override existing ones. ```html
1
2
3
4
5
6
7
``` -------------------------------- ### User Text Selection Control Source: https://design.haiilo.com/7a807c8eb/p/396792-typography Illustrates the use of utility classes to manage user text selection options. The examples show how to enable (`cat-select`) and disable (`cat-no-select`) text selection on paragraph elements. This relies on corresponding CSS definitions. ```html

This text can be selected.

This text can not be selected.

``` -------------------------------- ### Toggle with Hints (HTML) Source: https://design.haiilo.com/7a807c8eb/p/21af6e-toggle Illustrates how to add hints to the `cat-toggle` component, both as a simple string property and as slotted rich content for more complex information. ```html This is an additional hint for the toggle. ``` -------------------------------- ### HTML: Custom Aspect Ratio with CSS Variable Source: https://design.haiilo.com/7a807c8eb/p/72fc4e-aspect-ratio Shows how to create a custom aspect ratio by overriding the '--cat-aspect-ratio' CSS variable directly on the element. This allows for on-the-fly adjustments to the ratio, for example, a 2x1 ratio. ```html
2x1
``` -------------------------------- ### Input Component with Icon Prefixes Source: https://design.haiilo.com/7a807c8eb/p/7a807c8eb/p/94564d-input Shows how to add an icon as a prefix to the Input component using the `icon` property. The `icon-right` property can be used to position the icon on the right side instead. ```html ``` -------------------------------- ### Customizing Avatar with CSS Variables (HTML) Source: https://design.haiilo.com/7a807c8eb/p/19d3f7-avatar/b/129708/t/81b53c Provides an example of customizing the avatar's appearance using CSS variables for background color, text color, size, and font size. These CSS properties allow for fine-grained control over the avatar's look. ```html ``` -------------------------------- ### User Input Indication with kbd Tag Source: https://design.haiilo.com/7a807c8eb/p/396792-typography Demonstrates how to use the `` HTML tag to indicate user input typically entered via keyboard. This is useful for showing commands or shortcuts. No specific external dependencies are required. ```html To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , ```