# List of available UI components

Below is a list of Vue 3 components available in the UI. These components are available immediately and do not need to be imported.
All
D1Accordion
D1ActionSheet
D1Actions
D1Anchor
D1Area
D1Arrow
D1Badge
D1Bars
D1Block
D1Button
D1Cell
D1Checkbox
D1Chip
D1ChipGroup
D1ClientOnly
D1Container
D1Dialog
D1Dummy
D1Field
D1FieldCounter
D1FieldLabel
D1FieldMessage
D1Grid
D1GridItem
D1Group
D1Header
D1HorizontalScroll
D1Icon
D1Image
D1Input
D1List
D1ListGroup
D1ListItem
D1ListMenu
D1Mask
D1Menu
D1Modal
D1MotionAxis
D1MotionTransform
D1Page
D1PageArea
D1Progress
D1Ripple
D1Scrollbar
D1Section
D1Select
D1SelectValue
D1Skeleton
D1Snackbar
D1SnackbarItem
D1TabItem
D1Tabs
D1TabsNavigation
D1Textarea
D1TextareaAutosize
D1Tooltip
D1Window

### D1Accordion

#### Demo

    <div :class="classDemo.item">
      <D1Accordion :open="true" :auto-close="false" v-bind="args">
        <div class="wiki-storybook-item--padding">
          Hidden content
        </div>
      </D1Accordion>
    </div>

#### Description

Collapsible container for progressive disclosure. Toggles content visibility to manage space and cognitive load. Use for FAQs, grouped settings, hiding secondary info, or compact dashboards. Header is based on a Cell component and supports label, description, and icon. Features an auto-rotating arrow indicator and smooth height transitions via MotionTransform. Built-in ARIA support and keyboard navigation (Space/Enter). Controlled primarily via v-model:open. Customizable with divider and header attributes through cellAttrs.
`
<D1Accordion
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home keyboard_arrow_down
Label
Here is a detailed description of the component
Hidden content

#### Emits `type AccordionEmits`

#### Expose `interface AccordionExpose`

#### Slots `interface AccordionSlots`

#### Props `type AccordionProps`

Enumeration of some properties
divider:`boolean | undefined`
Enables visual divider between elements
default value: true
auto-close:`boolean | undefined`
Closes the window/menu when clicking inside the content area
default value: true
click-open:`boolean | undefined`
Enable opening on click
default value: true

### D1ActionSheet

#### Demo

    <div :class="classDemo.item" style="min-width: 800px;">
      <D1ActionSheet embedded open v-bind="args">
        <template #control="{ binds }">
          <button v-bind="binds">Open Menu</button>
        </template>
        <template #default>Content goes here...</template>
      </D1ActionSheet>
    </div>

#### Description

Mobile-optimized modal component (Bottom Sheet) that slides up from the bottom for actions, choices, or secondary content. Follows standard mobile interface patterns (iOS/Material). Features touch-gestures (swipe-down to close), backdrop dismissal, and keyboard accessibility. Includes primary/secondary action lists and automatic height adjustment based on content. Highly flexible with slots (#control, #title, #default, #footer) and controlled primarily via v-model:open. Use for mobile-focused menus, sharing options, or contextual actions.
`
<D1ActionSheet
actionsList="[{"icon":"edit","label":"Edit"},{"icon":"delete","label":"Delete"},{"icon":"share","label":"Share"}]"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
/>
`
Hello friend
Welcome to the application!
Content goes here...

#### Emits `type ActionSheetEmits`

#### Expose `interface ActionSheetExpose`

#### Slots `interface ActionSheetSlots`

#### Props `type ActionSheetProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1ActionSheet disabled />
`
Hello friend
Welcome to the application!
Content goes here...
bars-back-hide:`boolean | undefined`
Hides the back button in the bars
default value: true
width:`sm | md | lg | auto`
Sets component width
default value: md
`
<D1ActionSheet width="sm" />
`
Hello friend
Welcome to the application!
Content goes here...
`
<D1ActionSheet width="md" />
`
Hello friend
Welcome to the application!
Content goes here...
`
<D1ActionSheet width="lg" />
`
Hello friend
Welcome to the application!
Content goes here...
`
<D1ActionSheet width="auto" />
`
Hello friend
Welcome to the application!
Content goes here...
auto-close:`boolean | undefined`
Closes the window/menu when clicking inside the content area
touch-close:`boolean | undefined`
Enables closing the component by a swipe-down gesture on mobile devices
default value: true

### D1Actions

#### Description

Layout container for action button groups, typically used in dialog footers, cards, or forms. Manages spacing, alignment, and separation between primary (main) and secondary action sets. Supports multiple alignments (left, center, right, block) and takes arrays of button props (list, listSecondary) to automatically render Button components. Features both array-based and slot-based rendering for maximum flexibility. Use for standardizing button layouts and ensuring consistent spacing.
`
<D1Actions
list="[{"label":"Ok"},{"label":"Cancel"}]"
listSecondary="[{"icon":"edit"},{"icon":"photo_camera"},{"icon":"image"},{"icon":"tune"}]"
/>
`

#### Emits `type ActionsEmits`

#### Expose `interface ActionsExpose`

#### Slots `interface ActionsSlots`

#### Props `type ActionsProps`

Enumeration of some properties
align:`none | center | left | right | block | auto`
General alignment depending on component semantics
default value: right
`
<D1Actions align="none" />
`
`
<D1Actions align="center" />
`
`
<D1Actions align="left" />
`
`
<D1Actions align="right" />
`
`
<D1Actions align="block" />
`
`
<D1Actions align="auto" />
`
flexible:`adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl | containerSm | containerMd | containerLg | containerXl | container2xl`
Enables flexible layout behavior that automatically adapts to available space
padding:`sm | md | lg | ySm | yMd | yLg | none`
Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
`
<D1Actions padding="sm" paddingByIndent="false" />
`
`
<D1Actions padding="md" paddingByIndent="false" />
`
`
<D1Actions padding="lg" paddingByIndent="false" />
`
`
<D1Actions padding="ySm" paddingByIndent="false" />
`
`
<D1Actions padding="yMd" paddingByIndent="false" />
`
`
<D1Actions padding="yLg" paddingByIndent="false" />
`
`
<D1Actions padding="none" paddingByIndent="false" />
`
padding-by-indent:`boolean | undefined`
Applies horizontal padding based on grid indent values
default value: true
wrap:`boolean`
Controls text wrapping behavior
default value: false
`
<D1Actions wrap />
`

### D1Anchor

#### Description

Navigation component for creating hyperlinks, internal page anchors, and interactive links. Wraps the native <a> tag with additional support for smooth scrolling and clipboard operations. Features automated scroll-to-id behavior with custom offsets and a built-in copy-to-clipboard function (isCopy). Supports icon integration for different link types and success feedback. Controlled primarily through href or name props. Use for table of contents, permalinks, external resource links, or quick-copy action buttons for IDs and URLs.
`
<D1Anchor
name="name-example"
label="Label"
/>
`
link Label

#### Emits `type AnchorEmits`

#### Expose `interface AnchorExpose`

#### Slots `interface AnchorSlots`

#### Props `type AnchorProps`

Enumeration of some properties
is-copy:`boolean | undefined`
Enables copy-to-clipboard functionality
`
<D1Anchor is-copy />
`
tag content_copy Label

### D1Area

#### Description

A utility component that acts as a dynamic slot switcher based on an "area" context. It retrieves the current area value from the injection context (UI_AREA_VALUE) or uses the 'areaDefault' prop. It then renders the slot that matches the area name. If no matching slot is found, it falls back to the 'default' slot. This is particularly useful for building layouts where different components need to render different content depending on where they are placed (e.g., in a header, footer, or side panel).
`
<D1Area
areaDefault="default"
/>
`

#### Emits `type AreaEmits`

#### Expose `interface AreaExpose`

#### Slots `interface AreaSlots`

#### Props `type AreaProps`

Enumeration of some properties

### D1Arrow

#### Demo

    <div :class="classDemo.item" style="position: relative; width: 48px; height: 48px; background-color: oklch(93.2% 0.032 255.585);">
        <D1Arrow position="top" v-bind="args"/>
    </div>

#### Description

Functional directional indicator (pointer) designed to connect floating containers like tooltips, popovers, or menus with their target elements. Automatically calculates positioning and orientation to create a seamless speech-bubble or callout effect. Features smart auto-positioning logic, support for inverse directions, and automated style inheritance. It inherits background and border properties from its parent container (Window or custom wrapper) to ensure visual consistency without manual configuration. Ideal for enhanced spatial context in complex UIs. Use within floating components to clearly indicate the source of a message or action. Controlled via position and elementTarget props, with an exposed update method for manual synchronization.
`
<D1Arrow
elementTarget="#id-arrow-target"
/>
`

#### Emits `type ArrowEmits`

#### Expose `interface ArrowExpose`

#### Slots `interface ArrowSlots`

#### Props `type ArrowProps`

Enumeration of some properties
inverse:`boolean | undefined`
Inverts component colors
`
<D1Arrow inverse />
`
position:`auto | top | bottom | left | right`
Sets the positioning method for the element
default value: auto
`
<D1Arrow position="auto" />
`
`
<D1Arrow position="top" />
`
`
<D1Arrow position="bottom" />
`
`
<D1Arrow position="left" />
`
`
<D1Arrow position="right" />
`
size:`sm | md | lg`
Sets component size
default value: md
`
<D1Arrow size="sm" />
`
`
<D1Arrow size="md" />
`
`
<D1Arrow size="lg" />
`

### D1Badge

#### Demo

    <div :class="classDemo.item" style="min-width: 48px; min-height: 48px;">
      <D1Badge overlap="static" v-bind="args"/>
    </div>

#### Description

Small visual indicator used to display status, counts, notifications, or short labels (tags). Typically positioned over the corner of another element (like an icon or avatar) or used inline. Features numeric handling with label-max cap (e.g., "99+"), dot-only mode for status indication, and support for icons. Includes flexible positioning (overlap: rectangular or circular) and various color variants. Controlled primarily through the label, icon, and dot props. Use for unread counts, online status indicators, or marking items as "New" or "Sale" in e-commerce contexts.
`
<D1Badge
label="Label"
icon="home"
/>
`
Label home

#### Emits `type BadgeEmits`

#### Expose `interface BadgeExpose`

#### Slots `interface BadgeSlots`

#### Props `type BadgeProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Badge selected />
`
Label home
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Badge icon-turn />
`
Label home
dot:`boolean | undefined`
Displays the component as a dot indicator
`
<D1Badge dot />
`
outline:`boolean | undefined`
Outline variant of the badge with a transparent background and border
`
<D1Badge outline />
`
Label home
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1Badge palette="red" />
`
Label home
`
<D1Badge palette="orange" />
`
Label home
`
<D1Badge palette="amber" />
`
Label home
`
<D1Badge palette="yellow" />
`
Label home
`
<D1Badge palette="lime" />
`
Label home
`
<D1Badge palette="green" />
`
Label home
`
<D1Badge palette="emerald" />
`
Label home
`
<D1Badge palette="teal" />
`
Label home
`
<D1Badge palette="cyan" />
`
Label home
`
<D1Badge palette="sky" />
`
Label home
`
<D1Badge palette="blue" />
`
Label home
`
<D1Badge palette="indigo" />
`
Label home
`
<D1Badge palette="violet" />
`
Label home
`
<D1Badge palette="purple" />
`
Label home
`
<D1Badge palette="fuchsia" />
`
Label home
`
<D1Badge palette="pink" />
`
Label home
`
<D1Badge palette="rose" />
`
Label home
`
<D1Badge palette="slate" />
`
Label home
`
<D1Badge palette="gray" />
`
Label home
`
<D1Badge palette="zinc" />
`
Label home
`
<D1Badge palette="neutral" />
`
Label home
`
<D1Badge palette="stone" />
`
Label home
`
<D1Badge palette="black" />
`
Label home
`
<D1Badge palette="white" />
`
Label home
primary:`boolean | undefined`
Primary color variant for the badge with high contrast and emphasis
default value: true
`
<D1Badge primary />
`
Label home
secondary:`boolean | undefined`
Secondary color variant for the badge with moderate contrast
`
<D1Badge secondary />
`
Label home
size:`sm | md | lg | none`
Sets component size
default value: md
`
<D1Badge size="sm" />
`
Label home
`
<D1Badge size="md" />
`
Label home
`
<D1Badge size="lg" />
`
Label home
`
<D1Badge size="none" />
`
Label home
formatting:`boolean | undefined`
Whether to format values before displaying
`
<D1Badge formatting label="1234567" />
`
1,234,567 home
horizontal:`right | center | left`
Sets horizontal alignment of elements
default value: right
`
<D1Badge horizontal="right" overlap="rectangular" />
`
Label home
`
<D1Badge horizontal="center" overlap="rectangular" />
`
Label home
`
<D1Badge horizontal="left" overlap="rectangular" />
`
Label home
label-max:`number`
Maximum length of the label text before truncation
`
<D1Badge label-max="1000" label="1234567" />
`
1000+home
overlap:`rectangular | circular | static`
Defines element positioning relative to other elements
default value: rectangular
`
<D1Badge overlap="rectangular" />
`
Label home
`
<D1Badge overlap="circular" />
`
Label home
`
<D1Badge overlap="static" />
`
Label home
vertical:`top | center | bottom`
Sets vertical alignment of elements
default value: top
`
<D1Badge vertical="top" overlap="rectangular" />
`
Label home
`
<D1Badge vertical="center" overlap="rectangular" />
`
Label home
`
<D1Badge vertical="bottom" overlap="rectangular" />
`
Label home

### D1Bars

#### Description

Structural header or toolbar component for pages, cards, and windows. Provides a consistent layout for titles, descriptions, and interactive action buttons. Features a built-in back navigation button, primary action button list (bars), and a specialized "action mode" for contextual states (e.g., selection). Supports skeleton loading and full button customization. Controlled via label/description props and action boolean for state switching. Use for top-level page headers, modal toolbars, or dynamic action bars that appear after item selection.
`
<D1Bars
actionBars="[{"icon":"share"},{"icon":"edit"},{"icon":"delete"}]"
bars="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
actionDescription="Select items to perform actions"
actionLabel="Action"
description="Here is a detailed description of the component"
label="Label"
/>
`
Label
Here is a detailed description of the component

#### Emits `type BarsEmits`

#### Expose `interface BarsExpose`

#### Slots `interface BarsSlots`

#### Props `type BarsProps`

Enumeration of some properties
action:`boolean | undefined`
Enables action mode
`
<D1Bars action />
`
Action
Select items to perform actions
back-button:`ConstrBind<ButtonProps> | undefined`
Provides configuration for the back button
padding:`sm | md | lg | ySm | yMd | yLg | none`
Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
`
<D1Bars padding="sm" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="md" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="lg" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="ySm" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="yMd" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="yLg" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
`
<D1Bars padding="none" paddingByIndent="false" />
`
Label
Here is a detailed description of the component
padding-by-indent:`boolean | undefined`
Applies horizontal padding based on grid indent values
default value: true
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Block

#### Demo

    <div :class="classDemo.item">
      <D1Block v-bind="args">
          Main content goes here.
      </D1Block>
    </div>

#### Description

Versatile structural container for organizing content with a standardized layout. Automatically arranges headlines, icons, labels, captions, and body content within a unified block element. Features support for custom HTML tags (e.g., section, article) and flexible slot-based content organization. Includes a dedicated headline area for section titles and a trailing slot for actions. Controlled primarily through content props (label, headline, description) or various slots (#default, #headline, #trailing). Use for card headers, complex list items, or clearly defined page sections.
`
<D1Block
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home

### Label

Here is a detailed description of the component
Main content goes here.

#### Emits `type BlockEmits`

#### Expose `interface BlockExpose`

#### Slots `interface BlockSlots`

#### Props `type BlockProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Block selected />
`
home

### Label

Here is a detailed description of the component
Main content goes here.
caption:`string`
Caption text for additional information
`
<D1Block caption="Caption text" />
`
home

### Label

Caption text
Here is a detailed description of the component
Main content goes here.
headline:`string`
Headline text
`
<D1Block headline="Headline text" />
`
Headline text
home

### Label

Here is a detailed description of the component
Main content goes here.
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Block icon-turn />
`
home

### Label

Here is a detailed description of the component
Main content goes here.

### D1Button

#### Description

Fundamental interactive component for user actions, navigation, and form submission. Supports various visual styles (primary, secondary, outline, text), states, and content configurations. Features built-in support for icons (Material Symbols), loading spinners, and disabled/selected states. Includes native-like navigation via "to" (Vue Router) or "href" (external) props and supports skeleton loading. Highly customizable through design tokens and adaptive layout options. Controlled primarily via click events and various styling props. Use for call-to-actions, navigation links, or icon-only toggle buttons.
`
<D1Button
label="Label"
icon="home"
/>
`

#### Emits `type ButtonEmits`

#### Expose `interface ButtonExpose`

#### Slots `interface ButtonSlots`

#### Props `type ButtonProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Button disabled />
`
focus:`boolean | undefined`
Visual focus state
`
<D1Button focus />
`
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Button loading />
`
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Button selected />
`
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Button icon-trailing="settings" />
`
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Button icon-turn />
`
adaptive:`iconAlways | block | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls adaptive display behavior for different screen sizes and media queries
container:`iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls container‑based layout behavior with adaptive width constraints
has-label-min-width:`boolean | undefined`
Indicates whether a minimum width should be applied to the label
default value: true
inverse:`boolean | undefined`
Inverts component colors
`
<D1Button inverse />
`
outline:`boolean | undefined`
Outline button style
`
<D1Button outline />
`
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1Button palette="red" />
`
`
<D1Button palette="orange" />
`
`
<D1Button palette="amber" />
`
`
<D1Button palette="yellow" />
`
`
<D1Button palette="lime" />
`
`
<D1Button palette="green" />
`
`
<D1Button palette="emerald" />
`
`
<D1Button palette="teal" />
`
`
<D1Button palette="cyan" />
`
`
<D1Button palette="sky" />
`
`
<D1Button palette="blue" />
`
`
<D1Button palette="indigo" />
`
`
<D1Button palette="violet" />
`
`
<D1Button palette="purple" />
`
`
<D1Button palette="fuchsia" />
`
`
<D1Button palette="pink" />
`
`
<D1Button palette="rose" />
`
`
<D1Button palette="slate" />
`
`
<D1Button palette="gray" />
`
`
<D1Button palette="zinc" />
`
`
<D1Button palette="neutral" />
`
`
<D1Button palette="stone" />
`
`
<D1Button palette="black" />
`
`
<D1Button palette="white" />
`
primary:`boolean | undefined`
Primary button style
default value: true
`
<D1Button primary />
`
rounded-full:`boolean | undefined`
Makes the component fully rounded (circular)
`
<D1Button rounded-full />
`
secondary:`boolean | undefined`
Secondary button style
`
<D1Button secondary />
`
size:`xs | sm | md | lg | xl`
Sets component size
default value: md
`
<D1Button size="xs" />
`
`
<D1Button size="sm" />
`
`
<D1Button size="md" />
`
`
<D1Button size="lg" />
`
`
<D1Button size="xl" />
`
text:`boolean | undefined`
Text button style
`
<D1Button text />
`
text-align:`left | center | right`
Sets text alignment within the element
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Cell

#### Description

Universal list item component for building structured interfaces like menus, settings, and data lists. Provides a standardized row layout with dedicated areas for icons, text, and actions. Features a composable structure with label, description, and caption support. Includes interactive states (hover, focus, selected, loading), built-in Ripple effect, and skeleton loading integration. Highly flexible via slots (#default, #trailing, #body) and controlled through content props and navigation attributes (to/href). Use for clickable rows, menu items, or complex data entities in lists.
`
<D1Cell
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home
Label
Here is a detailed description of the component

#### Emits `type CellEmits`

#### Expose `interface CellExpose`

#### Slots `interface CellSlots`

#### Props `type CellProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Cell disabled />
`
home
Label
Here is a detailed description of the component
focus:`boolean | undefined`
Visual focus state
`
<D1Cell focus />
`
home
Label
Here is a detailed description of the component
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Cell loading />
`
home
Label
Here is a detailed description of the component
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Cell selected />
`
home
Label
Here is a detailed description of the component
caption:`string`
Caption text for additional information
`
<D1Cell caption="Caption text" />
`
home
Label
Caption text
Here is a detailed description of the component
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-top:`boolean | undefined`
Aligns icon to the top of the container
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Cell icon-trailing="settings" />
`
home settings
Label
Here is a detailed description of the component
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Cell icon-turn />
`
home
Label
Here is a detailed description of the component
divider:`boolean | undefined`
Enables visual divider between elements
default value: true
divider-label:`always | none | adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl | containerSm | containerMd | containerLg | containerXl | container2xl`
Adds divider only under the label
padding:`sm | md | lg | ySm | yMd | yLg | none`
Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
default value: none
`
<D1Cell padding="sm" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="md" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="lg" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="ySm" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="yMd" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="yLg" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
`
<D1Cell padding="none" paddingByIndent="false" />
`
home
Label
Here is a detailed description of the component
padding-by-indent:`boolean | undefined`
Applies horizontal padding based on grid indent values
default value: true
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Checkbox

#### Description

Form control component for binary (yes/no) or indeterminate state selection. Allows users to toggle specific options or select multiple items from a list with visual feedback. Features support for primary label, secondary description, and custom icons for checked/indeterminate states. Includes built-in validation, loading indicators, and adaptive layout options. Controlled via v-model or value prop and emits @input/@change events. Use for terms agreement, feature toggles, or parent-child coordinated selections (via indeterminate state).
`
<D1Checkbox
description="Here is a detailed description of the component"
helperMessage="This is a helpful message"
label="Label"
counter="25"
maxlength="100"
name="name"
/>
`
Label
Here is a detailed description of the component
This is a helpful message

#### Emits `type CheckboxEmits`

#### Expose `interface CheckboxExpose`

#### Slots `interface CheckboxSlots`

#### Props `type CheckboxProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Checkbox disabled />
`
Label
Here is a detailed description of the component
focus:`boolean | undefined`
Visual focus state
`
<D1Checkbox focus />
`
Label
Here is a detailed description of the component
This is a helpful message
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Checkbox loading />
`
Label
Here is a detailed description of the component
This is a helpful message
readonly:`boolean | undefined`
Read-only state of the element
indeterminate:`boolean | undefined`
Sets the indeterminate state
`
<D1Checkbox indeterminate value />
`
remove Label
Here is a detailed description of the component
This is a helpful message
value:`any`
Value of the checkbox
`
<D1Checkbox value />
`
check Label
Here is a detailed description of the component
This is a helpful message
placeholder:`string`
Placeholder text shown when the input is empty
`
<D1Checkbox placeholder="Placeholder text" />
`
Label
Here is a detailed description of the component
This is a helpful message
validation-message:`string`
Error or validation message text
`
<D1Checkbox validation-message="Validation message" />
`
Label
Here is a detailed description of the component
This is a helpful message
Validation message
counter:`number | string`
Current character count
counter-show:`boolean | undefined`
Shows the counter-element
`
<D1Checkbox counter-show />
`
Label
Here is a detailed description of the component
This is a helpful message
counter-template:`string`
Custom display template for the counter-component
`
<D1Checkbox counter-template="counter: [c], max: [m]" counterShow />
`
Label
Here is a detailed description of the component
This is a helpful message
required:`boolean | undefined`
Marks the field as required and shows the required indicator
`
<D1Checkbox required />
`
Label
Here is a detailed description of the component
This is a helpful message
adaptive:`rightAlways | rightSm | rightMd | rightLg | rightXl | right2xl`
Controls adaptive display behavior for different screen sizes and media queries
block:`boolean | undefined`
Enables block mode (component expands to full width)
default value: true
container:`rightSm | rightMd | rightLg | rightXl | right2xl`
Controls container‑based layout behavior with adaptive width constraints
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode
item-center:`boolean | undefined`
Centers items inside the component
default value: true
`
<D1Checkbox item-center itemCenter="false" />
`
Label
Here is a detailed description of the component
This is a helpful message

### D1Chip

#### Description

Compact interactive element representing an input, attribute, or action. Used for entering information, making selections, filtering content, or triggering immediate actions in a space-efficient way. Features multiple functional variants (Action, Input, Assistive, Filter) with support for leading icons and selection states. Includes built-in support for disabled/selected states and adaptive layout options. Controlled via value/label props and emits @click events with detailed data. Use for filter tags, choice groups (like radio buttons), or representing entities like contacts in input fields.
`
<D1Chip
label="Label"
icon="home"
/>
`
Label home

#### Emits `type ChipEmits`

#### Expose `interface ChipExpose`

#### Slots `interface ChipSlots`

#### Props `type ChipProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Chip disabled />
`
Label home
focus:`boolean | undefined`
Visual focus state
`
<D1Chip focus />
`
Label home
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Chip loading />
`
Label home
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Chip selected />
`
Label home
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Chip icon-trailing="settings" />
`
Label home settings
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Chip icon-turn />
`
Label home
adaptive:`iconAlways | block | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls adaptive display behavior for different screen sizes and media queries
assistive:`boolean | undefined`
Alternative visual appearance style
`
<D1Chip assistive />
`
Label home
container:`iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls container‑based layout behavior with adaptive width constraints
input:`boolean | undefined`
Input-style visual appearance
default value: true
`
<D1Chip input />
`
Label home
inverse:`boolean | undefined`
Inverts component colors
`
<D1Chip inverse />
`
Label home
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1Chip palette="red" />
`
Label home
`
<D1Chip palette="orange" />
`
Label home
`
<D1Chip palette="amber" />
`
Label home
`
<D1Chip palette="yellow" />
`
Label home
`
<D1Chip palette="lime" />
`
Label home
`
<D1Chip palette="green" />
`
Label home
`
<D1Chip palette="emerald" />
`
Label home
`
<D1Chip palette="teal" />
`
Label home
`
<D1Chip palette="cyan" />
`
Label home
`
<D1Chip palette="sky" />
`
Label home
`
<D1Chip palette="blue" />
`
Label home
`
<D1Chip palette="indigo" />
`
Label home
`
<D1Chip palette="violet" />
`
Label home
`
<D1Chip palette="purple" />
`
Label home
`
<D1Chip palette="fuchsia" />
`
Label home
`
<D1Chip palette="pink" />
`
Label home
`
<D1Chip palette="rose" />
`
Label home
`
<D1Chip palette="slate" />
`
Label home
`
<D1Chip palette="gray" />
`
Label home
`
<D1Chip palette="zinc" />
`
Label home
`
<D1Chip palette="neutral" />
`
Label home
`
<D1Chip palette="stone" />
`
Label home
`
<D1Chip palette="black" />
`
Label home
`
<D1Chip palette="white" />
`
Label home
rounded-full:`boolean | undefined`
Makes the component fully rounded (circular)
`
<D1Chip rounded-full />
`
Label home
size:`sm | md | lg`
Sets component size
default value: md
`
<D1Chip size="sm" />
`
Label home
`
<D1Chip size="md" />
`
Label home
`
<D1Chip size="lg" />
`
Label home
text-align:`left | center | right`
Sets text alignment within the element
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1ChipGroup

#### Description

Wrapper component for managing collections of Chip elements based on an array of data. Streamlines the creation of filter sets, choice groups, and tag lists by automating iteration and selection logic. Features support for single and multiple selection modes, shared chip attributes (via chipAttrs), and icon visibility control. Includes built-in data binding for selected values and @click event propagation. Controlled via the list prop for data and v-model:selected for state. Use for dynamic filtering interfaces, selecting multiple categories, or building interactive tag lists from API data.
`
<D1ChipGroup
list="[{"label":"Apple","value":"apple"},{"label":"Banana","value":"banana"},{"label":"Orange","value":"orange"}]"
/>
`
Apple Banana Orange

#### Emits `type ChipGroupEmits`

#### Expose `interface ChipGroupExpose`

#### Slots `interface ChipGroupSlots`

#### Props `type ChipGroupProps`

Enumeration of some properties
readonly:`boolean | undefined`
Read-only state of the element
default value: true
selected:`string | number | boolean | array`
Currently selected item(s) - can be a single value or an array of values
list:`ChipGroupData | undefined`
Array of chip items data. Contains the data for all chips to be rendered in the group.
icon-when-selected:`boolean | undefined`
Shows the icon only when the element is selected

### D1ClientOnly

#### Demo

    <div :class="classDemo.item">
      <D1ClientOnly v-bind="args">
        <h4>Client-Side Content</h4>
        <p>This block is only visible when the component is mounted in the browser.</p>
        <p>Use it for components that depend on window, document, or other browser-specific APIs.</p>
      </D1ClientOnly>
    </div>

#### Description

The ClientOnly component is a utility designed to ensure that its children are only rendered on the client side. This is particularly useful in Server-Side Rendering (SSR) or Static Site Generation (SSG) contexts where certain components (like those relying on browser-only APIs like 'window' or 'document', or complex visualizations) should not be executed or rendered on the server. It works by waiting until the component is mounted in the browser before rendering its content. Controlled by the 'clientOnly' boolean property (default is true).
`
<D1ClientOnly
/>
`

#### Client-Side Content

This block is only visible when the component is mounted in the browser.

Use it for components that depend on window, document, or other browser-specific APIs.

#### Emits `type ClientOnlyEmits`

#### Expose `interface ClientOnlyExpose`

#### Slots `interface ClientOnlySlots`

#### Props `type ClientOnlyProps`

Enumeration of some properties

### D1Container

#### Demo

    <div :class="classDemo.item">
      <D1Container v-bind="args">
        Main content goes here.
      </D1Container>
    </div>

#### Description

Layout wrapper used to constrain content width and manage horizontal spacing in a predictable way. Supports alignment options (left, center, right), width tokens, and side margins so page content keeps consistent rhythm across breakpoints. Use as a foundational container around sections, forms, and text-heavy blocks to improve readability and layout consistency.
`
<D1Container
/>
`
Main content goes here.

#### Emits `type ContainerEmits`

#### Expose `interface ContainerExpose`

#### Slots `interface ContainerSlots`

#### Props `type ContainerProps`

Enumeration of some properties
align:`left | center | right`
General alignment depending on component semantics
default value: center
`
<D1Container align="left" />
`
Main content goes here.
`
<D1Container align="center" />
`
Main content goes here.
`
<D1Container align="right" />
`
Main content goes here.

### D1Dialog

#### Demo

    <div :class="classDemo.item">
      <D1Dialog embedded open label="Dialog Title" description="This is a description text." v-bind="args"/>
    </div>

#### Description

Specialized modal component for standardized user interactions such as alerts, confirmations, and status messages. Extends the Modal component with a predefined layout for icons, titles, and action buttons. Features built-in success/error states with automatic icon switching and content styling. Supports flexible positioning of images (top/left) and integrates with Window, Bars, and Actions for a consistent footer. Controlled via v-model:open and various content props (label, description). Use for critical operations requiring user confirmation, operation success/fail alerts, or informative system messages.
`
<D1Dialog
description="Here is a detailed description of the component"
label="Label"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
icon="home"
/>
`
home Label
Here is a detailed description of the component

#### Emits `type DialogEmits`

#### Expose `interface DialogExpose`

#### Slots `interface DialogSlots`

#### Props `type DialogProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Dialog disabled />
`
home Label
Here is a detailed description of the component
error:`boolean | undefined`
Sets the element to an error state
`
<D1Dialog error />
`
Label
Here is a detailed description of the component
success:`boolean | undefined`
Sets the element to a success state
`
<D1Dialog success />
`
Label
Here is a detailed description of the component
button-close:`string | ConstrBind<ButtonPropsBasic> | null`
Close button configuration (string for label or full button props object, null to hide)
`
<D1Dialog button-close="is close" />
`
home Label
Here is a detailed description of the component
button-ok:`string | ConstrBind<ButtonPropsBasic> | null`
OK button configuration (string for label or full button props object, null to hide)
`
<D1Dialog button-ok="Confirm" />
`
home Label
Here is a detailed description of the component
image:`string | File | ImageProps`
Specifies the image value for the component
`
<D1Dialog image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
home Label
Here is a detailed description of the component
bars-back-hide:`boolean | undefined`
Hides the back button in the bars
default value: true
close-button:`boolean | undefined`
Shows a close button in the header
`
<D1Dialog close-button />
`
home Label
Here is a detailed description of the component
image-position:`top | left`
Defines image placement within the window layout
default value: top
`
<D1Dialog image-position="top" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
home Label
Here is a detailed description of the component
`
<D1Dialog image-position="left" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
home Label
Here is a detailed description of the component
width:`sm | md | lg | auto`
Sets component width
default value: md
`
<D1Dialog width="sm" />
`
home Label
Here is a detailed description of the component
`
<D1Dialog width="md" />
`
home Label
Here is a detailed description of the component
`
<D1Dialog width="lg" />
`
home Label
Here is a detailed description of the component
`
<D1Dialog width="auto" />
`
home Label
Here is a detailed description of the component
auto-close:`boolean | undefined`
Closes the window/menu when clicking inside the content area
click-ok-and-close:`boolean | undefined`
Automatically closes the dialog when the OK button is clicked
default value: true

### D1Grid

#### Demo

    <div :class="classDemo.item">
            <D1Grid v-bind="args">
              <div style="grid-column: span 4;">1</div>
              <div style="grid-column: span 4;">2</div>
              <div style="grid-column: span 4;">3</div>
            </D1Grid>
          </div>

#### Description

Layout utility designed to manage the arrangement of items in a flexible, column-based system. Provides a standardized way to create responsive multi-column layouts across different screen sizes. Features a default 12-column grid structure with customizable gaps and responsive breakpoint support. Works in tandem with GridItem to provide precise control over column spans and alignment. Controlled primarily via CSS variables for columns and gaps. Use as a top-level container for dashboard widgets, form layouts, or any content requiring a structured multi-column arrangement.
`
<D1Grid
/>
`
1
2
3

#### Emits `type GridEmits`

#### Expose `interface GridExpose`

#### Slots `interface GridSlots`

#### Props `type GridProps`

Enumeration of some properties

### D1GridItem

#### Demo

    <div :class="classDemo.item" style="min-height: 48px;">
      <div style="display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;">
        <D1GridItem v-bind="args">Item</D1GridItem>
      </div>
    </div>

#### Description

Individual cell unit within a Grid layout, providing granular control over column spanning across various screen resolutions. Enables building complex, responsive layouts with minimal CSS. Features responsive span settings for all major breakpoints (base, sm, md, lg, xl, 2xl). Allows items to occupy different widths on mobile vs desktop, ensuring optimal use of screen space. Controlled via the base prop for default span and breakpoint-specific props (e.g., md="6"). Use inside a Grid container to define local widths for UI elements, widgets, or form fields.
`
<D1GridItem
/>
`
Item

#### Emits `type GridItemEmits`

#### Expose `interface GridItemExpose`

#### Slots `interface GridItemSlots`

#### Props `type GridItemProps`

Enumeration of some properties
base:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span by default
default value: 1
lg:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span on large screens (media: lg)
md:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span on medium screens (media: md)
sm:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span on small screens (media: sm)
xl:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span on extra large screens (media: xl)
xl2:`1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`
Number of columns to span on 2xl screens (media: 2xl)

### D1Group

#### Demo

    <div :class="classDemo.item">
      <D1Group v-bind="args">
          Content of the group.
      </D1Group>
    </div>

#### Description

Structural component for organizing related content with a standardized header hierarchy. Acts as a semantic wrapper for subsections or grouping elements within a larger section or card. Features support for headlines (h4 by default), labels, icons, and descriptions. Inherits all capabilities of the Block component, providing a consistent layout for titles and body content. Controlled via headline, label, and description props. Use for grouping settings, categorizing information, or breaking down complex forms into logical, titled segments.
`
<D1Group
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home

#### Label

Here is a detailed description of the component
Content of the group.

#### Emits `type GroupEmits`

#### Expose `interface GroupExpose`

#### Slots `interface GroupSlots`

#### Props `type GroupProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Group selected />
`
home

#### Label

Here is a detailed description of the component
Content of the group.
caption:`string`
Caption text for additional information
`
<D1Group caption="Caption text" />
`
home

#### Label

Caption text
Here is a detailed description of the component
Content of the group.
headline:`string`
Headline text
`
<D1Group headline="Headline text" />
`
Headline text
home

#### Label

Here is a detailed description of the component
Content of the group.
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Group icon-turn />
`
home

#### Label

Here is a detailed description of the component
Content of the group.

### D1Header

#### Description

Component for creating structured headers with integrated support for icons and captions. Allows flexible control over the HTML tag (h1-h6, div) to maintain proper document hierarchy. Includes automatic area management and support for custom trailing content. Ideal for section titles, page headers, or grouped content labeling.
`
<D1Header
label="Label"
icon="home"
/>
`
home

### Label

#### Emits `type HeaderEmits`

#### Expose `interface HeaderExpose`

#### Slots `interface HeaderSlots`

#### Props `type HeaderProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Header selected />
`
home

### Label

caption:`string`
Caption text for additional information
`
<D1Header caption="Caption text" />
`
home

### Label

Caption text
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Header icon-turn />
`
home

### Label

### D1HorizontalScroll

#### Description

Container component that enables horizontal scrolling for large content sets like galleries, item lists, or tab bars. Ensures smooth navigation when the body exceeds the viewport width. Features automated scroll-to-selected behavior on mount and exposes a programmatic method (toSelected) for navigation. Provides scoped slot bindings to ensure correct item styling and selection tracking. Controlled via the tag prop for root element customization. Use for product carousels, category filters, or any horizontally-oriented navigation menus in space-constrained layouts.
`
<D1HorizontalScroll
/>
`

#### Emits `type HorizontalScrollEmits`

#### Expose `interface HorizontalScrollExpose`

#### Slots `interface HorizontalScrollSlots`

#### Props `type HorizontalScrollProps`

Enumeration of some properties
align:`block | center | left | right`
General alignment depending on component semantics
default value: stretch
`
<D1HorizontalScroll align="block" />
`
`
<D1HorizontalScroll align="center" />
`
`
<D1HorizontalScroll align="left" />
`
`
<D1HorizontalScroll align="right" />
`
flush:`boolean | undefined`
Removes borders and rounded corners to render the component flush with its container
default value: true

### D1Icon

#### Description

Vector icon component, typically utilizing the Material Symbols library. Supports dynamic state management, automatic mirroring for RTL languages, and deep integration with the design system's palette. Features toggle-able states (active/inactive) with specific icons for each, built-in skeleton loading (isSkeleton), and directionality adaptation. Customizing via size, palette, and inverse props ensures visual consistency across all themes. Controlled via the icon and iconActive props and various styling flags. Use for navigation links, action buttons, status indicators, or any UI element requiring concise visual representation.
`
<D1Icon
icon="visibility"
iconActive="visibility_off"
/>
`
visibility visibility_off

#### Emits `type IconEmits`

#### Expose `interface IconExpose`

#### Slots `interface IconSlots`

#### Props `type IconProps`

Enumeration of some properties
active:`boolean | undefined`
Sets the icon to an active state
`
<D1Icon active />
`
visibility visibility_off
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Icon disabled />
`
visibility visibility_off
turn:`boolean | undefined`
Rotates the element by 180 degrees
`
<D1Icon turn />
`
visibility visibility_off
icon:`string | File`
Value of the main icon
icon-active:`string | File`
Value of the active icon
as-palette:`boolean | undefined`
Sets color based on palette class; otherwise uses default color
circle:`boolean | undefined`
Makes the element circular
`
<D1Icon circle overlay />
`
visibility visibility_off
inverse:`boolean | undefined`
Inverts component colors
`
<D1Icon inverse />
`
visibility visibility_off
overlay:`boolean | undefined`
Adds background overlay to the component
`
<D1Icon overlay />
`
visibility visibility_off
rect:`boolean | undefined`
Makes the element rectangular
`
<D1Icon rect overlay />
`
visibility visibility_off
rounded:`auto | sm | md | lg | xl | full`
Adds rounded corners to the component
default value: auto
size:`auto | x | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl | 9xl`
Sets component size
default value: auto
`
<D1Icon size="auto" />
`
visibility visibility_off
`
<D1Icon size="x" />
`
visibility visibility_off
`
<D1Icon size="xs" />
`
visibility visibility_off
`
<D1Icon size="sm" />
`
visibility visibility_off
`
<D1Icon size="md" />
`
visibility visibility_off
`
<D1Icon size="lg" />
`
visibility visibility_off
`
<D1Icon size="xl" />
`
visibility visibility_off
`
<D1Icon size="2xl" />
`
visibility visibility_off
`
<D1Icon size="3xl" />
`
visibility visibility_off
`
<D1Icon size="4xl" />
`
visibility visibility_off
`
<D1Icon size="5xl" />
`
visibility visibility_off
`
<D1Icon size="6xl" />
`
visibility visibility_off
`
<D1Icon size="7xl" />
`
visibility visibility_off
`
<D1Icon size="8xl" />
`
visibility visibility_off
`
<D1Icon size="9xl" />
`
visibility visibility_off
square:`boolean | undefined`
Makes the element square
default value: true
`
<D1Icon square overlay />
`
visibility visibility_off
dir:`boolean | undefined`
Mirrors the component depending on a site direction (RTL/LTR)
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Image

#### Demo

    <div
      :class="classDemo.item"
      style="position: relative; width: 48px; height: 48px;"
    >
      <D1Image v-bind="args"/>
    </div>

#### Description

Universal component for displaying graphic content, including images, Material icons, and PDF files. Automatically detects the content type based on the value string or File object provided. Features multiple display modes (contain, cover, auto), adaptive scaling (objectWidth/Height), and standard img tag support for SEO and lazy loading. Includes advanced positioning via coordinator and x/y props. Controlled via the value prop and various sizing/rendering flags. Use for avatars, product photos, system icons, or embedded PDF documents requiring specific cropping and aspect ratio control.
`
<D1Image
value="rocket_launch"
/>
`
rocket_launch

#### Emits `type ImageEmits`

#### Expose `interface ImageExpose`

#### Slots `interface ImageSlots`

#### Props `type ImageProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Image disabled />
`
rocket_launch
turn:`boolean | undefined`
Rotates the element by 180 degrees
`
<D1Image turn />
`
rocket_launch
picture:`Record<string, string> | ImagePictureList`
Sources for different display conditions using the picture tag with media queries
srcset:`string | Record<string, string>`
Set of image sources for different screen resolutions and pixel densities
coordinator:`number[]`
Defines the crop area of the image, accepting an array of values for top, right, bottom, and left
size:`auto | contain | cover`
Sets component size
`
<D1Image size="auto" />
`
rocket_launch
`
<D1Image size="contain" />
`
rocket_launch
`
<D1Image size="cover" />
`
rocket_launch
x:`string | number | undefined`
Moves the image along the X-axis, accepts a string in % or px format
y:`string | number | undefined`
Moves the image along the Y-axis, accepts a string in % or px format
tag-img:`boolean | undefined`
Use the img tag instead of background image for better accessibility and SEO

### D1Input

#### Description

Primary component for user data entry, wrapping the native <D1Input> element with enhanced functionality. Supports floating labels, validation, masking, and multiple formatting modes (numeric, currency, password). Features built-in support for input masks (e.g., phone numbers), automatic currency/number formatting, and password visibility toggles. Includes field affixes (prefix/suffix), leading/trailing icons, and a character counter. Controlled via v-model and type props, emitting standard input/change events. Use for all text-based data collection, from simple names to complex formatted financial or identification data.
`
<D1Input
helperMessage="This is a helpful message"
label="Label"
icon="home"
maxlength="100"
name="name"
/>
`
Label Label home
This is a helpful message

#### Emits `type InputEmits`

#### Expose `interface InputExpose`

#### Slots `interface InputSlots`

#### Props `type InputProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Input disabled />
`
Label Label home
focus:`boolean | undefined`
Visual focus state
`
<D1Input focus />
`
Label Label home
This is a helpful message
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Input loading />
`
Label Label home
This is a helpful message
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Input selected />
`
Label Label home
This is a helpful message
currency:`string`
Currency code for formatting monetary values
`
<D1Input currency="USD" type="currency" />
`
Label$0.0 0 Label home
This is a helpful message
fraction:`string | number | boolean`
Fraction configuration for numeric masks (digits count or special mode)
caption:`string`
Caption text for additional information
`
<D1Input caption="Caption text" />
`
Label Label home
Caption text
This is a helpful message
placeholder:`string`
Placeholder text shown when the input is empty
`
<D1Input placeholder="Placeholder text" />
`
Label Label home
This is a helpful message
prefix:`string`
Prefix text displayed before the main content
`
<D1Input prefix="Prefix text" />
`
Label Label home
Prefix text
This is a helpful message
suffix:`string`
Suffix text displayed after the main content
`
<D1Input suffix="Suffix text" value="Value" />
`
Label Label home close_small
Suffix text
This is a helpful message
validation-message:`string`
Error or validation message text
`
<D1Input validation-message="Validation message" />
`
Label Label home
This is a helpful message
Validation message
counter-show:`boolean | undefined`
Shows the counter-element
`
<D1Input counter-show />
`
Label Label home
This is a helpful message
0 / 100
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Input icon-trailing="settings" />
`
Label Label home settings
This is a helpful message
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Input icon-turn />
`
Label Label home
This is a helpful message
arrow:`auto | none | carousel | stepper`
Arrow controls type for numeric input (auto, carousel, stepper, none)
default value: auto
`
<D1Input arrow="auto" />
`
Label Label home
This is a helpful message
`
<D1Input arrow="none" />
`
Label Label home
This is a helpful message
`
<D1Input arrow="carousel" />
`
Label Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Input arrow="stepper" />
`
Label Label home remove add
This is a helpful message
arrow-align:`center | right | left`
Sets alignment position of arrow buttons within the field
`
<D1Input arrow-align="center" arrow="carousel" arrowCarousel />
`
Label Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Input arrow-align="right" arrow="carousel" arrowCarousel />
`
Label Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Input arrow-align="left" arrow="carousel" arrowCarousel />
`
Label Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
arrow-step:`number | string`
Step size for input arrows (type="number" only) when using increment/decrement buttons
required:`boolean | undefined`
Marks the field as required and shows the required indicator
`
<D1Input required />
`
Label*Label home
This is a helpful message
type:`number | text | search | number-format | currency | email | password | datetime | date | year-month | time | hour-minute | tel | url | checkbox | radio`
Input type that determines the behavior and validation of the field
default value: text
align:`center | right | left`
General alignment depending on component semantics
`
<D1Input align="center" />
`
Label Label home
This is a helpful message
`
<D1Input align="right" />
`
Label Label home
This is a helpful message
`
<D1Input align="left" />
`
Label Label home
This is a helpful message
cancel:`auto | always | none`
Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
`
<D1Input cancel="auto" value="Value" />
`
Label Label home close_small
This is a helpful message
`
<D1Input cancel="always" value="Value" />
`
Label Label home close_small
This is a helpful message
`
<D1Input cancel="none" value="Value" />
`
Label Label home
This is a helpful message
currency-hide:`boolean | undefined`
Hide the currency symbol in the formatted value
`
<D1Input currency-hide currency="USD" type="currency" />
`
Label 0.0 0 Label home
This is a helpful message
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1List

#### Description

Core engine for rendering interactive, searchable, and hierarchical lists. Serves as the foundation for complex components like Selects, Dropdowns, and multi-level Navigation Menus. Features support for multiple item types (group, menu, line, html), real-time search highlighting, and full keyboard navigation. Includes automatic focus management, ARIA accessibility roles, and a "lite" rendering mode for performance optimization with large datasets. Controlled via the list prop for data and v-model:selected for state tracking. Use as the primary building block for any interface requiring item selection, structured data display, or interactive command menus.
`
<D1List
list="[{"label":"Запустить проект (Label)","value":"launch-project","icon":"play_arrow"},{"label":"Управление задачами","value":"task-management","icon":"assignment"},{"type":"space"},{"label":"Команда","value":"team","icon":"group","badge":"12"},{"label":"Аналитика и отчеты","value":"analytics","icon":"analytics","description":"Просмотр статистики"},{"type":"subtitle","label":"Инструменты"},{"label":"Настройки системы","value":"settings","icon":"settings","disabled":true},{"label":"Файловый менеджер","value":"file-manager","icon":"folder","suffix":245},{"type":"group","index":"g1","label":"Маркетинг","value":[{"label":"Email рассылки","value":"email-campaigns","icon":"email"},{"label":"Социальные сети","value":"social-media","icon":"share"},{"label":"Реклама","value":"ads","icon":"ads_click"}],"icon":"campaign"},{"type":"group","index":"g2","label":"Разработка","value":[{"label":"Репозиторий кода","value":"repository","icon":"code"},{"label":"Система сборки","value":"build-system","icon":"build"},{"type":"group","index":"g2-1","label":"Тестирование","value":[{"label":"Unit тесты","value":"unit-tests","icon":"science"},{"label":"Интеграционные тесты","value":"integration-tests","icon":"integration_instructions"},{"label":"E2E тесты","value":"e2e-tests","icon":"web"}],"icon":"bug_report"},{"label":"Документация API","value":"api-docs","icon":"description"}],"icon":"developer_mode"},{"type":"menu","index":"m1","label":"Администрирование","value":[{"label":"Управление пользователями","value":"user-management","icon":"people"},{"label":"Права доступа","value":"permissions","icon":"security"},{"type":"menu","index":"m1-1","label":"Системные настройки","value":[{"label":"Конфигурация сервера","value":"server-config","icon":"dns"},{"label":"База данных","value":"database-config","icon":"storage"},{"label":"Резервное копирование","value":"backup","icon":"backup"}],"icon":"tune"},{"label":"Мониторинг системы","value":"monitoring","icon":"monitor_heart"}],"icon":"admin_panel_settings"},{"type":"line"},{"label":"Уведомления","value":"notifications","icon":"notifications","badge":"Новое"},{"label":"Избранное","value":"favorites","icon":"star"}]"
/>
`
Запустить проект (Label)
play_arrow
Управление задачами
assignment
Команда 12
group
Аналитика и отчеты
Просмотр статистики
analytics
Инструменты
Настройки системы
settings
Файловый менеджер
245
folder
Маркетинг
campaign keyboard_arrow_down
Разработка
developer_mode keyboard_arrow_down
Администрирование
admin_panel_settings keyboard_arrow_right
Уведомления Новое
notifications
Избранное
star

#### Emits `type ListEmits`

#### Expose `interface ListExpose`

#### Slots `interface ListSlots`

#### Props `type ListProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1List disabled />
`
Запустить проект (Label)
play_arrow
Управление задачами
assignment
Команда 12
group
Аналитика и отчеты
Просмотр статистики
analytics
Инструменты
Настройки системы
settings
Файловый менеджер
245
folder
Маркетинг
campaign keyboard_arrow_down
Разработка
developer_mode keyboard_arrow_down
Администрирование
admin_panel_settings keyboard_arrow_right
Уведомления Новое
notifications
Избранное
star
focus:`NumberOrStringOrBoolean | undefined`
Selected item for focus state. Defines which item should be visually focused in the list.
lite:`boolean | undefined`
Enable lightweight display mode. Reduces visual complexity by showing simplified item styling with minimal decorative elements.
`
<D1List lite liteThreshold="4" />
`
Запустить проект (Label)
Управление задачами
Команда
Аналитика и отчеты
Просмотр статистики
Инструменты
Настройки системы
Файловый менеджер
Маркетинг
keyboard_arrow_down
Разработка
keyboard_arrow_down
Администрирование
keyboard_arrow_right
Уведомления
Избранное
selected:`ListSelectedList | undefined`
List of selected items. Contains all currently selected items in the list for multi-selection scenarios.
`
<D1List selected="task-management" />
`
Запустить проект (Label)
play_arrow
Управление задачами
assignment
Команда 12
group
Аналитика и отчеты
Просмотр статистики
analytics
Инструменты
Настройки системы
settings
Файловый менеджер
245
folder
Маркетинг
campaign keyboard_arrow_down
Разработка
developer_mode keyboard_arrow_down
Администрирование
admin_panel_settings keyboard_arrow_right
Уведомления Новое
notifications
Избранное
star
highlight:`string`
Text to highlight within the component content
`
<D1List highlight="abe" />
`
Запустить проект (Label)
play_arrow
Управление задачами
assignment
Команда 12
group
Аналитика и отчеты
Просмотр статистики
analytics
Инструменты
Настройки системы
settings
Файловый менеджер
245
folder
Маркетинг
campaign keyboard_arrow_down
Разработка
developer_mode keyboard_arrow_down
Администрирование
admin_panel_settings keyboard_arrow_right
Уведомления Новое
notifications
Избранное
star
highlight-length-start:`number`
Minimum length of highlight value to start highlighting
list:`ListRecord<ListItemProps> | undefined`
Array of list items data. Contains the data for all items to be rendered in the list.
divider:`boolean | undefined`
Enables visual divider between elements
filter-mode:`boolean | undefined`
Enables filter mode for search (hides non-matching items)
lite-threshold:`number | undefined`
Threshold value that works when lite mode is enabled (lite: true). Defines the maximum number of items before additional optimizations are applied in lite mode.

### D1ListItem

#### Description

Versatile structural component for rendering items within lists, menus, or navigation bars. Provides a standardized layout with high-density content support for labels, descriptions, and metadata. Features dedicated slots for prefix (leading), content (central), suffix (trailing metadata), and trailing (action indicators). Includes built-in support for icons, badges, selected states, and interactive feedback like ripple effects. Controlled via label, description, and href/to props; renders as an <a> tag when navigating. Use for building navigation menus, data-rich list rows, or simple clickable interactive elements.
`
<D1ListItem
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
Label
Here is a detailed description of the component
home

#### Emits `type ListItemEmits`

#### Expose `interface ListItemExpose`

#### Slots `interface ListItemSlots`

#### Props `type ListItemProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1ListItem disabled />
`
Label
Here is a detailed description of the component
home
focus:`boolean | undefined`
Visual focus state
`
<D1ListItem focus />
`
Label
Here is a detailed description of the component
home
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1ListItem loading />
`
Label
Here is a detailed description of the component
home
open:`boolean | undefined`
Visual open state of the list item
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1ListItem selected />
`
Label
Here is a detailed description of the component
home
badge:`string`
Badge text or value to display
`
<D1ListItem badge="123" />
`
Label 123
Here is a detailed description of the component
home
badge-dot:`boolean | undefined`
Display badge as a dot indicator
`
<D1ListItem badge-dot />
`
Label
Here is a detailed description of the component
home
highlight:`string`
Text to highlight within the component content
`
<D1ListItem highlight="abe" />
`
Label
Here is a detailed description of the component
home
highlight-length-start:`number`
Minimum length of highlight value to start highlighting
caption:`string`
Caption text for additional information
`
<D1ListItem caption="Caption text" />
`
Label
Caption text
Here is a detailed description of the component
home
prefix:`string`
Prefix text displayed before the main content
`
<D1ListItem prefix="Prefix text" />
`
Prefix text
Label
Here is a detailed description of the component
home
suffix:`string`
Suffix text displayed after the main content
`
<D1ListItem suffix="Suffix text" value="Value" />
`
Label
Suffix text
Here is a detailed description of the component
home
icon-align:`center | edge`
Sets icon alignment within the component
default value: edge
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-top:`boolean | undefined`
Aligns icon to the top of the container
icon-trailing:`string | File`
Value of the trailing icon
`
<D1ListItem icon-trailing="settings" />
`
Label
Here is a detailed description of the component
home settings
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1ListItem icon-turn />
`
Label
Here is a detailed description of the component
home
dense:`boolean | undefined`
Enables compact display variant
`
<D1ListItem dense />
`
Label
Here is a detailed description of the component
home
divider:`boolean | undefined`
Enables visual divider between elements
fill:`custom`
Sets fill color for the component
`
<D1ListItem fill="custom" />
`
Label
Here is a detailed description of the component
home
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1ListItem palette="red" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="orange" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="amber" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="yellow" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="lime" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="green" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="emerald" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="teal" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="cyan" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="sky" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="blue" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="indigo" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="violet" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="purple" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="fuchsia" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="pink" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="rose" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="slate" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="gray" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="zinc" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="neutral" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="stone" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="black" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem palette="white" />
`
Label
Here is a detailed description of the component
home
size:`sm | md | lg`
Sets component size
default value: md
`
<D1ListItem size="sm" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem size="md" />
`
Label
Here is a detailed description of the component
home
`
<D1ListItem size="lg" />
`
Label
Here is a detailed description of the component
home
filter-mode:`boolean | undefined`
Enables filter mode for search (hides non-matching items)
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Modal

#### Demo

    <div :class="classDemo.item">
      <D1Modal embedded open v-bind="args">
        <template #default>
          <p>This is a modal dialog.</p>
        </template>
      </D1Modal>
    </div>

#### Description

Simplified wrapper over the Window component pre-configured for centered modal dialogs. Provides a high-level API for typical interaction patterns like confirmation prompts, info alerts, and data entry forms. Features automatic overlay management, background interaction blocking, and body scroll locking. Includes built-in focus trapping, Esc key dismissal, and responsive layout optimization (adaptive="modal") for consistent mobile and desktop UX. Controlled via the v-model:open prop and utilizes #control, #title, and #footer slots for modular layout. Use for critical user notifications, blocking confirmation steps, or focused sub-tasks requiring immediate attention.
`
<D1Modal
actionsList="[{"icon":"edit","label":"Edit"},{"icon":"delete","label":"Delete"},{"icon":"share","label":"Share"}]"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
/>
`
Hello friend
Welcome to the application!

This is a modal dialog.

#### Emits `type ModalEmits`

#### Expose `interface ModalExpose`

#### Slots `interface ModalSlots`

#### Props `type ModalProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Modal disabled />
`
Hello friend
Welcome to the application!

This is a modal dialog.

image:`string | File | ImageProps`
Specifies the image value for the component
`
<D1Modal image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

bars-back-hide:`boolean | undefined`
Hides the back button in the bars
default value: true
image-position:`top | left`
Defines image placement within the window layout
default value: top
`
<D1Modal image-position="top" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

`
<D1Modal image-position="left" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

width:`sm | md | lg | xl | auto`
Sets component width
default value: md
`
<D1Modal width="sm" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

`
<D1Modal width="md" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

`
<D1Modal width="lg" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

`
<D1Modal width="xl" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

`
<D1Modal width="auto" />
`
Hello friend
Welcome to the application!

This is a modal dialog.

auto-close:`boolean | undefined`
Closes the window/menu when clicking inside the content area

### D1MotionAxis

#### Description

Low-level layout component for animating transitions between multiple content areas (slides) along X, Y, or Z axes. Ideal for multi-step wizards, tabbed content, and gallery-like interfaces requiring direction-aware motion. Features automated animation direction detection (next/back), smooth container height transitions, and lazy loading support to manage slide life-cycles in the DOM. Supports horizontal slide, vertical flip, and depth-based transitions with customizable speed and easing. Controlled via the selected prop or v-model:selected, utilizing numbered slide slots (#slide1, #slide2, etc.) for content distribution. Use when content needs to transition within a fixed or dynamic container while maintaining high visual polish and spatial orientation.
`
<D1MotionAxis
selected="slide2"
/>
`

#### Emits `type MotionAxisEmits`

#### Expose `interface MotionAxisExpose`

#### Slots `interface MotionAxisSlots`

#### Props `type MotionAxisProps`

Enumeration of some properties
selected:`MotionAxisSelectedValue`
Selected element
animation-height:`boolean | undefined`
Enables height animation
in-dom:`boolean | undefined`
Indicates whether the window is in the DOM
in-dom-slide:`string[] | undefined`
List of slides that should remain in the DOM

### D1MotionTransform

#### Demo

    <div :class="classDemo.item">
      <D1MotionTransform :auto-close="false" v-bind="args">
        <template #head>
          <button class="wiki-storybook-button">Toggle Content</button>
        </template>
        <template #body>
          <div class="wiki-storybook-item--padding">
            <p>Expandable content goes here.</p>
          </div>
        </template>
      </D1MotionTransform>
    </div>

#### Description

Low-level motion engine designed for complex component transitions like windows, dropdowns, and collapsible sections. Provides a unified system for managing element transforms, off-DOM teleportation, and interaction patterns (click-outside, etc.). Features dynamic size measurement with automatic CSS variable updates for smooth hardware-accelerated animations. Includes a robust state manager (open/show/teleport), focus trapping, and customizable interaction ignoring areas for triggers. Controlled via the v-model:open prop and utilizes #head and #body slots for layout. Use as a foundational utility when building custom interactive components requiring sophisticated motion, state transitions, and high-performance DOM manipulation.
`
<D1MotionTransform
/>
`

#### Emits `type MotionTransformEmits`

#### Expose `interface MotionTransformExpose`

#### Slots `interface MotionTransformSlots`

#### Props `type MotionTransformProps`

Enumeration of some properties
adaptive:`planeAlways | planeSm | planeMd | planeLg | planeXl | plane2xl`
Controls adaptive display behavior for different screen sizes and media queries
default value: planeMd
animation-head-position:`top | toBottom`
Head behavior during animations
default value: top
auto-close:`boolean | undefined`
Automatically close on the outside click
default value: true
click-open:`boolean | undefined`
Enable opening on click
default value: true
in-dom:`boolean | undefined`
Indicates whether the window is in the DOM
section:`boolean | undefined`
Enable section styling mode
`
<D1MotionTransform section open />
`

Expandable content goes here.

### D1Page

#### Demo

    <div :class="classDemo.item">
      <D1Page v-bind="args">
          Main page content.
      </D1Page>
    </div>

#### Description

Top-level structural container designed to wrap the primary content of a view or document. Serves as a semantic root (typically rendering a <main> tag) and establishes the high-level document hierarchy with standardized headers. Features a comprehensive header structure inherited from the Block component, including support for headlines (h1), labels (page titles), descriptions, and trailing action areas. Automatically manages spacing and layout consistency for page-level navigation and identity. Controlled via headline, label, and icon props, with dedicated slots for content and actions (#default, #trailing). Use as the foundational wrapper for any route or unique screen to ensure accessibility and consistent information architecture.
`
<D1Page
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home

# Label

Here is a detailed description of the component
Main page content.

#### Emits `type PageEmits`

#### Expose `interface PageExpose`

#### Slots `interface PageSlots`

#### Props `type PageProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Page selected />
`
home

# Label

Here is a detailed description of the component
Main page content.
caption:`string`
Caption text for additional information
`
<D1Page caption="Caption text" />
`
home

# Label

Caption text
Here is a detailed description of the component
Main page content.
headline:`string`
Headline text
`
<D1Page headline="Headline text" />
`
Headline text
home

# Label

Here is a detailed description of the component
Main page content.
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Page icon-turn />
`
home

# Label

Here is a detailed description of the component
Main page content.

### D1PageArea

#### Description

The PageArea component serves as a foundational structural unit for application pages. It helps define the main content zones and ensures consistent layout management across different views. Typically used as a root-level container within a specific page or sub-section to organize content blocks and handle area-specific logic.
`
<D1PageArea
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home

#### Label

Here is a detailed description of the component

#### Emits `type PageAreaEmits`

#### Expose `interface PageAreaExpose`

#### Slots `interface PageAreaSlots`

#### Props `type PageAreaProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1PageArea selected />
`
home

#### Label

Here is a detailed description of the component
caption:`string`
Caption text for additional information
`
<D1PageArea caption="Caption text" />
`
home

#### Label

Caption text
Here is a detailed description of the component
headline:`string`
Headline text
`
<D1PageArea headline="Headline text" />
`
Headline text
home

#### Label

Here is a detailed description of the component
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1PageArea icon-turn />
`
home

#### Label

Here is a detailed description of the component

### D1Progress

#### Demo

    <div
      :class="classDemo.item"
      style="position: relative; width: 64px; height: 40px;"
    >
      <D1Progress v-bind="args"/>
    </div>

#### Description

Status indicator for ongoing processes, supporting both linear and circular visual styles. Capable of representing determinate (known percentage) and indeterminate (loading) states with customizable delays for showing/hiding. Features horizontal bars (linear) and spinner rings (circular) with multiple indeterminate animation types. Includes advanced positioning (top, bottom, static), dense styling for compact UIs, and a point mode for minimal pulsating indicators. Controlled via the visible, value, and indeterminate props, with support for custom min/max bounds. Use for page-level loading bars, button action feedback, or inline file upload progress.
`
<D1Progress
visible
/>
`

#### Emits `type ProgressEmits`

#### Expose `interface ProgressExpose`

#### Slots `interface ProgressSlots`

#### Props `type ProgressProps`

Enumeration of some properties
visible:`boolean | undefined`
Controls the visibility of the progress indicator
circular:`boolean | undefined`
Enables circular progress indicator display
`
<D1Progress circular />
`
dense:`boolean | undefined`
Enables compact display variant
`
<D1Progress dense />
`
indeterminate:`type1 | type2 | type3`
Type of indeterminate progress animation
default value: type1
inverse:`boolean | undefined`
Inverts component colors
`
<D1Progress inverse />
`
linear:`boolean | undefined`
Enables linear progress bar display
default value: true
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1Progress palette="red" />
`
`
<D1Progress palette="orange" />
`
`
<D1Progress palette="amber" />
`
`
<D1Progress palette="yellow" />
`
`
<D1Progress palette="lime" />
`
`
<D1Progress palette="green" />
`
`
<D1Progress palette="emerald" />
`
`
<D1Progress palette="teal" />
`
`
<D1Progress palette="cyan" />
`
`
<D1Progress palette="sky" />
`
`
<D1Progress palette="blue" />
`
`
<D1Progress palette="indigo" />
`
`
<D1Progress palette="violet" />
`
`
<D1Progress palette="purple" />
`
`
<D1Progress palette="fuchsia" />
`
`
<D1Progress palette="pink" />
`
`
<D1Progress palette="rose" />
`
`
<D1Progress palette="slate" />
`
`
<D1Progress palette="gray" />
`
`
<D1Progress palette="zinc" />
`
`
<D1Progress palette="neutral" />
`
`
<D1Progress palette="stone" />
`
`
<D1Progress palette="black" />
`
`
<D1Progress palette="white" />
`
point:`boolean | undefined`
Adds a point at the end of the progress indicator
`
<D1Progress point />
`
position:`top | bottom | static`
Position of the progress indicator
default value: top
`
<D1Progress position="top" />
`
`
<D1Progress position="bottom" />
`
`
<D1Progress position="static" />
`
size:`sm | md | lg`
Sets component size
default value: md
`
<D1Progress size="sm" />
`
`
<D1Progress size="md" />
`
`
<D1Progress size="lg" />
`

### D1Ripple

#### Demo

    <div
      :class="classDemo.item"
      style="position: relative; width: 64px; height: 48px;"
    >
      <D1Ripple v-bind="args"/>
    </div>

#### Description

Low-level decorative utility that provides Material Design-style visual feedback on user interactions. Automatically generates a dynamic wave effect at the exact coordinates of a pointerdown event within its parent container. Features automated animation lifecycle management, including expansion, fade-out, and DOM cleanup. Inherits visual styling directly from the host element via currentColor and requires the parent to have relative positioning and hidden overflow to function correctly. Primarily integrated within interactive components like Buttons, ListItems, and Cards; should generally not be manually implemented. Controlled via the disabled prop, serving as a subtle but high-polish affordance for touch and click actions.
`
<D1Ripple
/>
`

#### Emits `type RippleEmits`

#### Expose `interface RippleExpose`

#### Slots `interface RippleSlots`

#### Props `type RippleProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Ripple disabled />
`

### D1Scrollbar

#### Demo

    <div :class="classDemo.item">
      <D1Scrollbar v-bind="args" style="height: 128px">
        <h3>Modern Web Interfaces and User Experience Design</h3>
        <p>In today's digital landscape, creating high-quality user
        interfaces has become a critical aspect of web application development.
        User interface components must not only be functional but also provide
        intuitive interaction patterns that enhance the overall user experience.
        The evolution of web technologies has enabled developers to create more
        sophisticated and engaging interfaces.</p>

        <p>Scrollbars play a particularly important role in content navigation
        and information architecture. They allow users to easily navigate through
        large volumes of information while maintaining context and orientation within
        the document structure. Modern scrollbars should be adaptive, responsive,
        and visually appealing while providing consistent behavior across different
        platforms and devices.</p>

        <h4>Principles of Effective Design Implementation</h4>
        <p>Effective scrollbar design takes into account multiple factors ranging
        from performance optimization to accessibility compliance. It's essential
        to ensure smooth animations, proper handling of various input devices, and
        comprehensive keyboard navigation support. Cross-browser compatibility remains
        a top priority, especially when dealing with custom scrollbar implementations
        that need to work consistently across different rendering engines.</p>

        <p>Users expect scrollbars to work predictably and uniformly throughout
        all parts of an application. This requires thorough testing and optimization
        for various usage scenarios, including mobile devices, desktop computers,
        and touch-enabled interfaces. The component must handle edge cases gracefully
        and provide appropriate feedback for user interactions.</p>
      </D1Scrollbar>
    </div>

#### Description

Structural container that provides custom scrolling behavior and visual status indicators (borders/dividers) based on content overflow. Essential for maintaining spatial context in fixed-height areas like menus, modals, and sidebars. Features dynamic scroll position detection to show/hide top and bottom dividers based on visibility of content edges. Supports custom border styling, inverse divider logic, and specialized visibility controls for different scroll states. Controlled via the tag and divider props, requiring a defined height or max-height to enable active scrolling. Use as a base wrapper for any dense content block requiring clear visual cues that more data is available above or below.
`
<D1Scrollbar
/>
`

### Modern Web Interfaces and User Experience Design

In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.

Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.

#### Principles of Effective Design Implementation

Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.

Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.

#### Emits `type ScrollbarEmits`

#### Expose `interface ScrollbarExpose`

#### Slots `interface ScrollbarSlots`

#### Props `type ScrollbarProps`

Enumeration of some properties
divider:`boolean | undefined`
Show divider lines at top and bottom depending on scroll position
divider-bottom:`boolean | undefined`
Show the divider line at the bottom
divider-hide:`boolean | undefined`
Hide divider lines
divider-top:`boolean | undefined`
Show the divider line at the top
inverse:`boolean | undefined`
Invert divider line behavior - show lines when the scroll is at beginning/end
standard:`boolean | undefined`
Use standard browser scrollbar
visible:`boolean | undefined`
Controls element visibility and scrolling behavior (overflow: visible)

### D1Section

#### Demo

    <div :class="classDemo.item">
      <D1Section v-bind="args">
          Content of the section.
      </D1Section>
    </div>

#### Description

Structural component used to divide a page into distinct thematic areas, serving as a semantic alias for the Block component. Provides a standardized header structure for grouping related content within a coherent layout. Features a flexible header with support for icons, labels (titles), captions, and trailing action areas. Inherits all layout and styling capabilities from the Block component, including support for custom semantic tags (defaulting to <D1Section>) and high-level category headlines. Controlled via headline, label, and icon props, with dedicated slots for primary content and secondary actions. Use to logically organize and category-label information within the flow of a Page or complex Dashboard.
`
<D1Section
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>
`
home

## Label

Here is a detailed description of the component
Content of the section.

#### Emits `type SectionEmits`

#### Expose `interface SectionExpose`

#### Slots `interface SectionSlots`

#### Props `type SectionProps`

Enumeration of some properties
selected:`boolean | undefined`
Selected state of the element
`
<D1Section selected />
`
home

## Label

Here is a detailed description of the component
Content of the section.
caption:`string`
Caption text for additional information
`
<D1Section caption="Caption text" />
`
home

## Label

Caption text
Here is a detailed description of the component
Content of the section.
headline:`string`
Headline text
`
<D1Section headline="Headline text" />
`
Headline text
home

## Label

Here is a detailed description of the component
Content of the section.
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Section icon-turn />
`
home

## Label

Here is a detailed description of the component
Content of the section.

### D1Select

#### Description

High-level form control that combines a trigger field, a dropdown menu, and a structured value display (Chips or text). Designed for choosing single or multiple items from static lists or dynamic datasets with built-in search and filtering. Features support for AJAX data loading with caching, multiple selection with chips, and an editable combobox mode (editValue). Includes integrated validation, keyboard navigation, and full Field component functionality (labels, icons, and state messages). Controlled via the option prop for data and v-model for state tracking, supporting custom key mapping (keyLabel/keyValue). Use for user selection, category filtering, or complex multi-select interfaces requiring real-time search.
`
<D1Select
option="[{"label":"Home","value":"home","icon":"home"},{"label":"Dashboard","value":"dashboard","icon":"dashboard"},{"label":"Profile","value":"profile","icon":"person"},{"label":"Settings","value":"settings","icon":"settings"},{"label":"Notifications","value":"notifications","icon":"notifications"},{"label":"Messages","value":"messages","icon":"message"},{"label":"Calendar","value":"calendar","icon":"calendar_today"},{"label":"Tasks","value":"tasks","icon":"task"},{"label":"Projects","value":"projects","icon":"work"},{"label":"Team","value":"team","icon":"group"},{"label":"Documents","value":"documents","icon":"description"}]"
helperMessage="This is a helpful message"
label="Label"
icon="home"
iconSearch="search"
name="name"
/>
`
Label
Label home keyboard_arrow_down
This is a helpful message

#### Emits `type SelectEmits`

#### Expose `interface SelectExpose`

#### Slots `interface SelectSlots`

#### Props `type SelectProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Select disabled />
`
Label
Label home
focus:`boolean | undefined`
Visual focus state
`
<D1Select focus />
`
Label
Label home keyboard_arrow_down
This is a helpful message
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Select loading />
`
Label
Label home keyboard_arrow_down
This is a helpful message
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Select selected />
`
Label
Label home keyboard_arrow_down
This is a helpful message
option:`array | object | function`
List of options to display in the dropdown - accepts array, object, or function returning options
caption:`string`
Caption text for additional information
`
<D1Select caption="Caption text" />
`
Label
Label home keyboard_arrow_down
Caption text
This is a helpful message
placeholder:`string`
Placeholder text shown when the input is empty
`
<D1Select placeholder="Placeholder text" />
`
Label
Placeholder text
Label home keyboard_arrow_down
This is a helpful message
prefix:`string`
Prefix text displayed before the main content
`
<D1Select prefix="Prefix text" />
`
Label
Label home keyboard_arrow_down
Prefix text
This is a helpful message
suffix:`string`
Suffix text displayed after the main content
`
<D1Select suffix="Suffix text" value="Value" />
`
Label
Label home keyboard_arrow_down
Suffix text
This is a helpful message
validation-message:`string`
Error or validation message text
`
<D1Select validation-message="Validation message" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
Validation message
counter-show:`boolean | undefined`
Shows the counter-element
`
<D1Select counter-show />
`
Label
Label home keyboard_arrow_down
This is a helpful message
0
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Select icon-trailing="settings" />
`
Label
Label home settings
This is a helpful message
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Select icon-turn />
`
Label
Label home keyboard_arrow_down
This is a helpful message
arrow:`none | auto | carousel | stepper`
Arrow controls type for numeric input (auto, carousel, stepper, none)
`
<D1Select arrow="none" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
`
<D1Select arrow="auto" />
`
Label
Label home
This is a helpful message
`
<D1Select arrow="carousel" />
`
Label
Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Select arrow="stepper" />
`
Label
Label home remove add
This is a helpful message
arrow-align:`center | right | left`
Sets alignment position of arrow buttons within the field
`
<D1Select arrow-align="center" arrow="carousel" arrowCarousel />
`
Label
Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Select arrow-align="right" arrow="carousel" arrowCarousel />
`
Label
Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
`
<D1Select arrow-align="left" arrow="carousel" arrowCarousel />
`
Label
Label home keyboard_arrow_left keyboard_arrow_right
This is a helpful message
arrow-step:`number | string`
Step size for input arrows (type="number" only) when using increment/decrement buttons
edit-value:`boolean | undefined`
Allows editing the selected value directly inside the input when not in multiple mode
multiple:`boolean | undefined`
Enables multiple selection mode
`
<D1Select multiple />
`
Label
Label home keyboard_arrow_down
This is a helpful message
required:`boolean | undefined`
Marks the field as required and shows the required indicator
`
<D1Select required />
`
Label*
Label home keyboard_arrow_down
This is a helpful message
align:`center | right | left`
General alignment depending on component semantics
`
<D1Select align="center" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
`
<D1Select align="right" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
`
<D1Select align="left" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
cancel:`none | auto | always`
Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
`
<D1Select cancel="none" value="Value" />
`
Label
Label home keyboard_arrow_down
This is a helpful message
`
<D1Select cancel="auto" value="Value" />
`
Label
Label home keyboard_arrow_down close_small
This is a helpful message
`
<D1Select cancel="always" value="Value" />
`
Label
Label home keyboard_arrow_down close_small
This is a helpful message
filter-mode:`boolean | undefined`
Enables filter mode for search (hides non-matching items)
hide-list:`boolean | undefined`
Hides the internal List part of the Menu; shows only header/toolbar and other slots.
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode
show-search:`boolean | undefined`
Shows a search/filter field inside the dropdown menu
input-search-attrs:`object | function`
Additional bindings or attributes for the search input inside the dropdown

### D1SelectValue

#### Description

Specialized display engine used within Select, Combobox, or Autocomplete controls to render selected state. Dynamically switches between a simple text label for single selection and a group of Chips for multiple selection. Features automated Chip management, including removal event handling and integration with the Select data model. Supports empty state placeholders, custom Chip attributes (icons, outlines), and handles disabled/readonly states to prevent interaction. Controlled via the multiple and value props, requiring an array of objects even for single selection. Use as a foundational element when building custom selection fields requiring standardized token-based or text-based value representation.
`
<D1SelectValue
value="[{"label":"JavaScript","value":"js","icon":"code","index":"1"},{"label":"TypeScript","value":"ts","icon":"verified","index":"2","detail":"Recommended"},{"label":"React","value":"react","icon":"favorite","index":"3"},{"label":"Vue.js","value":"vue","icon":"star","index":"4","detail":"Popular framework"}]"
/>
`
JavaScript

#### Emits `type SelectValueEmits`

#### Expose `interface SelectValueExpose`

#### Slots `interface SelectValueSlots`

#### Props `type SelectValueProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1SelectValue disabled />
`
JavaScript
readonly:`boolean | undefined`
Read-only state of the element
value:`array`
Array of selected values to display - each item should contain label, value, and optional index, icon, and detail properties
placeholder:`string`
Placeholder text shown when the input is empty
`
<D1SelectValue placeholder="Placeholder text" />
`
JavaScript
multiple:`boolean | undefined`
Enables multiple selection mode
`
<D1SelectValue multiple />
`
JavaScript close_small TypeScript close_small React close_small Vue.js close_small
icon-show:`boolean | undefined`
Controls visibility of icons in displayed items

### D1Skeleton

#### Description

Structural layout utility designed to display animated loading placeholders (ghost versions) for UI elements. Improves perceived performance and prevents Cumulative Layout Shift (CLS) by reserving space for incoming content. Features a logic-sharing mechanism via provide/inject that allows child components (Field, Image, Chip) to automatically switch to their skeleton states without individual props. Exposes specialized CSS classes through slot props for styling raw HTML elements as text lines, backgrounds, or borders. Controlled via the active prop to toggle the global loading state and accessibility Busy/Live attributes. Use as a wrapper for sections or entire pages during data fetching to maintain structural integrity and a high-quality user experience.
`
<D1Skeleton
/>
`

#### Emits `type SkeletonEmits`

#### Expose `interface SkeletonExpose`

#### Slots `interface SkeletonSlots`

#### Props `type SkeletonProps`

Enumeration of some properties
active:`boolean | undefined`
Sets the element to an active state

### D1Snackbar

#### Description

Centralized notification management system (orchestrator) that coordinates the lifecycle and queue of temporary messages. Ideal for global system alerts, user feedback, and asynchronous status updates across the application. Features an intelligent queue manager with support for priority containers, automatic lifecycle hooks (show/hide), and flexible screen anchoring (vertical/horizontal positioning). Includes programmatic control over message stack, custom auto-hide delays, and teleport-based rendering to ensure overlay priority over all content. Controlled via an exposed API (add, remove, clear) and configurable global settings like delay and origin. Place a single instance at the root of the application (e.g., App.vue) to manage consistent notification patterns throughout the entire user session.
`
<D1Snackbar
/>
`

#### Emits `type SnackbarEmits`

#### Expose `interface SnackbarExpose`

#### Slots `interface SnackbarSlots`

#### Props `type SnackbarProps`

Enumeration of some properties
horizontal:`right | left | block`
Sets horizontal alignment of elements
`
<D1Snackbar horizontal="right" overlap="rectangular" />
`
`
<D1Snackbar horizontal="left" overlap="rectangular" />
`
`
<D1Snackbar horizontal="block" overlap="rectangular" />
`
limit:`1 | 2 | 4 | 6 | 8`
Limits the number of simultaneously visible items
vertical:`top | bottom`
Sets vertical alignment of elements
`
<D1Snackbar vertical="top" overlap="rectangular" />
`
`
<D1Snackbar vertical="bottom" overlap="rectangular" />
`

### D1SnackbarItem

#### Description

Visual representation element for a single notification message, typically orchestrated by the Snackbar component. Designed for concise informational alerts, success messages, or quick-action prompts. Features a flexible internal structure with support for labels, detailed descriptions, and material-symbol icons (leading/trailing). Includes integrated action button support, a mandatory close button, and support for rendering custom HTML or Vue components as message bodies. Controlled via simple content props or an actions-list array for complex button configurations. Use as the base message unit for all system feedback, ensuring high visibility and accessibility through automatic ARIA status role implementation.
`
<D1SnackbarItem
button="Go"
description="Here is a detailed description of the component"
label="Label"
actionsList="[{"label":"Undo"}]"
actionsSecondary="[{"icon":"edit"}]"
icon="home"
/>
`
home
Label
Here is a detailed description of the component

#### Emits `type SnackbarItemEmits`

#### Expose `interface SnackbarItemExpose`

#### Slots `interface SnackbarItemSlots`

#### Props `type SnackbarItemProps`

Enumeration of some properties
error:`boolean | undefined`
Sets the element to an error state
`
<D1SnackbarItem error />
`
home
Label
Here is a detailed description of the component
selected:`boolean | undefined`
Selected state of the element
`
<D1SnackbarItem selected />
`
home
Label
Here is a detailed description of the component
success:`boolean | undefined`
Sets the element to a success state
`
<D1SnackbarItem success />
`
home
Label
Here is a detailed description of the component
button:`string | number | ConstrBind<ButtonPropsBasic> | null`
Button configuration (string for label, number, or full button props object)
html:`string`
HTML content to be rendered
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1SnackbarItem icon-trailing="settings" />
`
home settings
Label
Here is a detailed description of the component
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1SnackbarItem icon-turn />
`
home
Label
Here is a detailed description of the component
close-button:`boolean | undefined`
Shows a close button in the header
default value: true
`
<D1SnackbarItem close-button />
`
home
Label
Here is a detailed description of the component
palette:`red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white`
Sets a color palette for the element
`
<D1SnackbarItem palette="red" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="orange" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="amber" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="yellow" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="lime" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="green" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="emerald" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="teal" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="cyan" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="sky" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="blue" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="indigo" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="violet" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="purple" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="fuchsia" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="pink" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="rose" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="slate" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="gray" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="zinc" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="neutral" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="stone" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="black" />
`
home
Label
Here is a detailed description of the component
`
<D1SnackbarItem palette="white" />
`
home
Label
Here is a detailed description of the component

### D1TabItem

#### Description

Foundational interactive building block for multi-item navigation structures like tabs, list menus, and sidebars. Encapsulates a label, optional icons, and status indicators (badges) into a single semantic unit with integrated state management. Features built-in support for selected, disabled, and loading (skeleton) states, along with automated navigation logic for href and router-link. Includes a Material-style ripple effect for high-polish click feedback and flexible tag rendering to support various HTML roles (button, a, li). Controlled via label, icon, and badge props, with v-model or selected prop integration. Use within Tabs or List components to create cohesive, accessible navigation interfaces with consistent visual affordance and spatial organization.
`
<D1TabItem
label="Label"
icon="home"
/>
`

#### Emits `type TabItemEmits`

#### Expose `interface TabItemExpose`

#### Slots `interface TabItemSlots`

#### Props `type TabItemProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1TabItem disabled />
`
focus:`boolean | undefined`
Visual focus state
`
<D1TabItem focus />
`
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1TabItem selected />
`
badge:`string`
Badge text or value to display
`
<D1TabItem badge="123" />
`
badge-dot:`boolean | undefined`
Display badge as a dot indicator
`
<D1TabItem badge-dot />
`
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1TabItem icon-turn />
`
adaptive:`iconAlways | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls adaptive display behavior for different screen sizes and media queries
container:`iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl`
Controls container‑based layout behavior with adaptive width constraints
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1Tabs

#### Description

High-level compound component that integrates TabsNavigation and MotionAxis to provide a complete, animated tabbed interface. Simplifies the creation of multi-view layouts where each section is logically separated and visually transitioned. Features automated coordination between the navigation bar and the content area, including direction-aware sliding animations and lazy loading. Supports dynamic tab lists, centralized state management via v-model, and modular content distribution through named slots matching tab values. Controlled via the tabs prop for structure and v-model:selected for active state. Use for main dashboard views, complex settings panels, or any multi-step interface requiring a polished, interactive navigation experience with high performance.
`
<D1Tabs
selected="home"
tabs="[{"label":"Home","value":"home"},{"label":"Profile","value":"profile"},{"label":"Messages","value":"messages"},{"label":"Settings","value":"settings"},{"label":"Dashboard","value":"dashboard"},{"label":"Notifications","value":"notifications"}]"
/>
`

#### Emits `type TabsEmits`

#### Expose `interface TabsExpose`

#### Slots `interface TabsSlots`

#### Props `type TabsProps`

Enumeration of some properties
selected:`string | number`
Selected value
tabs:`ListRecord<TabItemProps> | ConstrBind<TabsNavigationProps> | undefined`
Tabs list or TabsNavigation properties

### D1Textarea

#### Description

Versatile multi-line text input control with automated spatial management and comprehensive validation support. Designed for feedback forms, detailed descriptions, and any scenario requiring a flexible, high-volume data entry area. Features an intelligent autosize engine that grows/shrinks dynamically based on content, along with character counter integration and Material symbol icons (leading/trailing). Inherits full Field component functionality including floating labels, helper messages, and reactive error states. Controlled via the v-model for content and autosize prop for height behavior. Use for user biographies, multi-row comments, or complex data entry views where standard single-line inputs lack sufficient capacity.
`
<D1Textarea
helperMessage="This is a helpful message"
label="Label"
icon="home"
maxlength="100"
name="name"
/>
`
Label
Label home
This is a helpful message

#### Emits `type TextareaEmits`

#### Expose `interface TextareaExpose`

#### Slots `interface TextareaSlots`

#### Props `type TextareaProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Textarea disabled />
`
Label
Label home
focus:`boolean | undefined`
Visual focus state
`
<D1Textarea focus />
`
Label
Label home
This is a helpful message
loading:`boolean | ConstrBind<ProgressProps> | undefined`
Sets the element to a loading state
`
<D1Textarea loading />
`
Label
Label home
This is a helpful message
readonly:`boolean | undefined`
Read-only state of the element
selected:`boolean | undefined`
Selected state of the element
`
<D1Textarea selected />
`
Label
Label home
This is a helpful message
caption:`string`
Caption text for additional information
`
<D1Textarea caption="Caption text" />
`
Label
Label home
Caption text
This is a helpful message
placeholder:`string`
Placeholder text shown when the input is empty
`
<D1Textarea placeholder="Placeholder text" />
`
Label
Label home
This is a helpful message
prefix:`string`
Prefix text displayed before the main content
`
<D1Textarea prefix="Prefix text" />
`
Label
Label home
Prefix text
This is a helpful message
suffix:`string`
Suffix text displayed after the main content
`
<D1Textarea suffix="Suffix text" value="Value" />
`
Label
Label home
Suffix text
This is a helpful message
validation-message:`string`
Error or validation message text
`
<D1Textarea validation-message="Validation message" />
`
Label
Label home
This is a helpful message
Validation message
counter-show:`boolean | undefined`
Shows the counter-element
`
<D1Textarea counter-show />
`
Label
Label home
This is a helpful message
0 / 100
icon-palette:`boolean | undefined`
Sets icon color based on palette class
icon-trailing:`string | File`
Value of the trailing icon
`
<D1Textarea icon-trailing="settings" />
`
Label
Label home settings
This is a helpful message
icon-trailing-palette:`boolean | undefined`
Sets trailing icon color based on palette class
icon-turn:`boolean | undefined`
Turns the icon
`
<D1Textarea icon-turn />
`
Label
Label home
This is a helpful message
required:`boolean | undefined`
Marks the field as required and shows the required indicator
`
<D1Textarea required />
`
Label*
Label home
This is a helpful message
align:`center | right | left`
General alignment depending on component semantics
`
<D1Textarea align="center" />
`
Label
Label home
This is a helpful message
`
<D1Textarea align="right" />
`
Label
Label home
This is a helpful message
`
<D1Textarea align="left" />
`
Label
Label home
This is a helpful message
autosize:`boolean | undefined`
Automatically adjusts the component size based on content
default value: true
cancel:`auto | always | none`
Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
default value: none
`
<D1Textarea cancel="auto" value="Value" />
`
Label
Label home close_small
This is a helpful message
`
<D1Textarea cancel="always" value="Value" />
`
Label
Label home close_small
This is a helpful message
`
<D1Textarea cancel="none" value="Value" />
`
Label
Label home
This is a helpful message
is-skeleton:`boolean | undefined`
Displays the component in skeleton mode

### D1TextareaAutosize

#### Description

Low-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles. Features automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow. Primarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.
`
<D1TextareaAutosize
/>
`

#### Emits `type TextareaAutosizeEmits`

#### Expose `interface TextareaAutosizeExpose`

#### Slots `interface TextareaAutosizeSlots`

#### Props `type TextareaAutosizeProps`

Enumeration of some properties
height:`xs | sm | md | lg | xl`
Sets component height
default value: md
autosize:`boolean | undefined`
Automatically adjusts the component size based on content
default value: true

### D1Tooltip

#### Demo

    <div :class="classDemo.item">
      <D1Tooltip open embedded v-bind="args">
        <template #control="{ binds }">
          <button v-bind="binds">Hover me</button>
        </template>
      </D1Tooltip>
    </div>

#### Description

Contextual informational overlay that appears when a user interacts with a trigger element via hover or focus. Designed for auxiliary labels, helper text, and secondary descriptive titles that enhance functional awareness without crowding the UI. Features automated high-precision positioning (top, bottom, left, right) with viewport collision detection and customizable delay/interactive behaviors. Includes a built-in arrow indicator and requires trigger binding via the #control slot's binds object for proper event synchronization. Controlled via simple content props (label, description) and supports complex HTML structures within the #default slot. Use to provide non-critical supplemental information, keyboard shortcuts, or detailed affordance for icon-only buttons.
`
<D1Tooltip
description="Here is a detailed description of the component"
label="Label"
/>
`
Label
Here is a detailed description of the component

#### Emits `type TooltipEmits`

#### Expose `interface TooltipExpose`

#### Slots `interface TooltipSlots`

#### Props `type TooltipProps`

Enumeration of some properties
disabled:`boolean | undefined`
Sets the element to an inactive state
`
<D1Tooltip disabled />
`
delay:`number | undefined`
Delay before showing the tooltip
default value: 64
delay-hide:`number | undefined`
Delay before hiding the tooltip
default value: 0
indent:`number | undefined`
Indent from the element
default value: 4
max-width:`sm | md | lg`
Sets the maximum width of the component
default value: md
`
<D1Tooltip max-width="sm" />
`
Label
Here is a detailed description of the component
`
<D1Tooltip max-width="md" />
`
Label
Here is a detailed description of the component
`
<D1Tooltip max-width="lg" />
`
Label
Here is a detailed description of the component
top:`boolean | undefined`
Displaying the tooltip on top of the element
in-dom:`boolean | undefined`
Indicates whether the window is in the DOM
interactive:`boolean | undefined`
Enables interactive mode for the component
default value: true