fernandes-ui 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ui.esm.js +0 -1
- data/app/assets/javascripts/ui.js +0 -1
- data/app/behaviors/ui/button_behavior.rb +7 -5
- data/app/behaviors/ui/button_group_behavior.rb +6 -4
- data/app/behaviors/ui/input_group_button_behavior.rb +5 -3
- data/app/components/ui/slider.rb +80 -0
- data/app/components/ui/slider_range.rb +33 -0
- data/app/components/ui/slider_thumb.rb +47 -0
- data/app/components/ui/slider_track.rb +35 -0
- data/app/javascript/ui/common.js +0 -1
- data/app/views/ui/_item.html.erb +6 -1
- data/app/views/ui/field/_label.html.erb +2 -1
- data/app/views/ui/field/_separator.html.erb +7 -1
- data/docs/components/ANNOTATIONS.md +220 -0
- data/docs/components/accordion.yml +109 -0
- data/docs/components/alert.yml +47 -0
- data/docs/components/alert_dialog.yml +151 -0
- data/docs/components/aspect_ratio.yml +37 -0
- data/docs/components/avatar.yml +55 -0
- data/docs/components/badge.yml +24 -0
- data/docs/components/breadcrumb.yml +76 -0
- data/docs/components/button.yml +56 -0
- data/docs/components/button_group.yml +67 -0
- data/docs/components/calendar.yml +166 -0
- data/docs/components/card.yml +99 -0
- data/docs/components/carousel.yml +100 -0
- data/docs/components/checkbox.yml +59 -0
- data/docs/components/collapsible.yml +74 -0
- data/docs/components/combobox.yml +21 -0
- data/docs/components/command.yml +144 -0
- data/docs/components/context_menu.yml +124 -0
- data/docs/components/dialog.yml +155 -0
- data/docs/components/drawer.yml +219 -0
- data/docs/components/dropdown_menu.yml +151 -0
- data/docs/components/empty.yml +88 -0
- data/docs/components/field.yml +81 -0
- data/docs/components/hover_card.yml +75 -0
- data/docs/components/input.yml +51 -0
- data/docs/components/input_group.yml +37 -0
- data/docs/components/input_group_addon.yml +24 -0
- data/docs/components/input_group_button.yml +30 -0
- data/docs/components/input_otp.yml +80 -0
- data/docs/components/input_otp_slot.yml +39 -0
- data/docs/components/item.yml +84 -0
- data/docs/components/kbd.yml +26 -0
- data/docs/components/label.yml +26 -0
- data/docs/components/menubar.yml +201 -0
- data/docs/components/menubar_menu.yml +21 -0
- data/docs/components/navigation_menu.yml +161 -0
- data/docs/components/pagination.yml +86 -0
- data/docs/components/popover.yml +105 -0
- data/docs/components/progress.yml +37 -0
- data/docs/components/radio_button.yml +52 -0
- data/docs/components/resizable.yml +44 -0
- data/docs/components/scroll_area.yml +76 -0
- data/docs/components/select.yml +195 -0
- data/docs/components/separator.yml +26 -0
- data/docs/components/sheet.yml +133 -0
- data/docs/components/sidebar.yml +138 -0
- data/docs/components/skeleton.yml +17 -0
- data/docs/components/sonner.yml +46 -0
- data/docs/components/spinner.yml +22 -0
- data/docs/components/switch.yml +72 -0
- data/docs/components/table.yml +32 -0
- data/docs/components/tabs.yml +126 -0
- data/docs/components/textarea.yml +41 -0
- data/docs/components/toggle.yml +92 -0
- data/docs/components/toggle_group.yml +106 -0
- data/docs/components/tooltip.yml +75 -0
- data/lib/ui/version.rb +1 -1
- metadata +61 -1
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Accordion
|
|
3
|
+
slug: accordion
|
|
4
|
+
category: data
|
|
5
|
+
description: Accordion container component (Phlex) Wraps collapsible accordion items
|
|
6
|
+
with Stimulus controller
|
|
7
|
+
anatomy:
|
|
8
|
+
- name: Accordion
|
|
9
|
+
description: Root container with state management
|
|
10
|
+
required: true
|
|
11
|
+
- name: Content
|
|
12
|
+
description: Main content container
|
|
13
|
+
required: true
|
|
14
|
+
- name: Item
|
|
15
|
+
description: Individual item element
|
|
16
|
+
required: false
|
|
17
|
+
- name: Trigger
|
|
18
|
+
description: Button or element that activates the component
|
|
19
|
+
required: true
|
|
20
|
+
features:
|
|
21
|
+
- Keyboard navigation with arrow keys
|
|
22
|
+
- Animation support
|
|
23
|
+
api:
|
|
24
|
+
Accordion:
|
|
25
|
+
description: ''
|
|
26
|
+
parameters:
|
|
27
|
+
- name: type
|
|
28
|
+
type: String
|
|
29
|
+
default: single
|
|
30
|
+
description: The type
|
|
31
|
+
- name: collapsible
|
|
32
|
+
type: Boolean
|
|
33
|
+
default: 'false'
|
|
34
|
+
description: The collapsible
|
|
35
|
+
data_attributes: []
|
|
36
|
+
css_variables: []
|
|
37
|
+
Content:
|
|
38
|
+
description: ''
|
|
39
|
+
parameters:
|
|
40
|
+
- name: item_value
|
|
41
|
+
type: String
|
|
42
|
+
default: nil
|
|
43
|
+
description: The item value
|
|
44
|
+
- name: initial_open
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'false'
|
|
47
|
+
description: The initial open
|
|
48
|
+
data_attributes: []
|
|
49
|
+
css_variables: []
|
|
50
|
+
Item:
|
|
51
|
+
description: ''
|
|
52
|
+
parameters:
|
|
53
|
+
- name: value
|
|
54
|
+
type: String
|
|
55
|
+
default: ''
|
|
56
|
+
description: The current value
|
|
57
|
+
- name: initial_open
|
|
58
|
+
type: Boolean
|
|
59
|
+
default: 'false'
|
|
60
|
+
description: The initial open
|
|
61
|
+
data_attributes: []
|
|
62
|
+
css_variables: []
|
|
63
|
+
Trigger:
|
|
64
|
+
description: ''
|
|
65
|
+
parameters:
|
|
66
|
+
- name: item_value
|
|
67
|
+
type: String
|
|
68
|
+
default: nil
|
|
69
|
+
description: The item value
|
|
70
|
+
- name: initial_open
|
|
71
|
+
type: Boolean
|
|
72
|
+
default: 'false'
|
|
73
|
+
description: The initial open
|
|
74
|
+
data_attributes: []
|
|
75
|
+
css_variables: []
|
|
76
|
+
accessibility:
|
|
77
|
+
aria_pattern: Accordion
|
|
78
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
|
|
79
|
+
description: Implements the WAI-ARIA Accordion pattern with proper roles, states,
|
|
80
|
+
and keyboard navigation.
|
|
81
|
+
aria_attributes: []
|
|
82
|
+
keyboard:
|
|
83
|
+
- key: Enter
|
|
84
|
+
description: Activates the focused element
|
|
85
|
+
- key: ArrowDown
|
|
86
|
+
description: Moves focus to next item
|
|
87
|
+
- key: ArrowUp
|
|
88
|
+
description: Moves focus to previous item
|
|
89
|
+
- key: Home
|
|
90
|
+
description: Moves focus to first item
|
|
91
|
+
- key: End
|
|
92
|
+
description: Moves focus to last item
|
|
93
|
+
javascript:
|
|
94
|
+
controller: ui--accordion
|
|
95
|
+
targets:
|
|
96
|
+
- item
|
|
97
|
+
- trigger
|
|
98
|
+
- content
|
|
99
|
+
values:
|
|
100
|
+
- name: type
|
|
101
|
+
type: String
|
|
102
|
+
description: The type
|
|
103
|
+
actions:
|
|
104
|
+
- removeKeyboardNavigation
|
|
105
|
+
- toggle
|
|
106
|
+
events: []
|
|
107
|
+
related:
|
|
108
|
+
- collapsible
|
|
109
|
+
- tabs
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Alert
|
|
3
|
+
slug: alert
|
|
4
|
+
category: feedback
|
|
5
|
+
description: Alert - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Alert
|
|
8
|
+
description: A callout component for displaying important information to users.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Description
|
|
11
|
+
description: Description text for an alert component.
|
|
12
|
+
required: false
|
|
13
|
+
- name: Title
|
|
14
|
+
description: Title text for an alert component.
|
|
15
|
+
required: false
|
|
16
|
+
features:
|
|
17
|
+
- Custom styling with Tailwind classes
|
|
18
|
+
api:
|
|
19
|
+
Alert:
|
|
20
|
+
description: A callout component for displaying important information to users.
|
|
21
|
+
parameters:
|
|
22
|
+
- name: variant
|
|
23
|
+
type: Symbol
|
|
24
|
+
default: ":default"
|
|
25
|
+
description: Visual style variant
|
|
26
|
+
data_attributes: []
|
|
27
|
+
css_variables: []
|
|
28
|
+
Description:
|
|
29
|
+
description: Description text for an alert component.
|
|
30
|
+
parameters: []
|
|
31
|
+
data_attributes: []
|
|
32
|
+
css_variables: []
|
|
33
|
+
Title:
|
|
34
|
+
description: Title text for an alert component.
|
|
35
|
+
parameters: []
|
|
36
|
+
data_attributes: []
|
|
37
|
+
css_variables: []
|
|
38
|
+
accessibility:
|
|
39
|
+
aria_pattern: Alert
|
|
40
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
|
|
41
|
+
description: Implements the WAI-ARIA Alert pattern with proper roles, states, and
|
|
42
|
+
keyboard navigation.
|
|
43
|
+
aria_attributes:
|
|
44
|
+
- role="alert"
|
|
45
|
+
related:
|
|
46
|
+
- alert_dialog
|
|
47
|
+
- toast
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Alert Dialog
|
|
3
|
+
slug: alert_dialog
|
|
4
|
+
category: feedback
|
|
5
|
+
description: AlertDialog - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Alert Dialog
|
|
8
|
+
description: A modal alert dialog component for important confirmations and alerts.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Action
|
|
11
|
+
description: Primary action button for the alert dialog.
|
|
12
|
+
required: false
|
|
13
|
+
- name: Cancel
|
|
14
|
+
description: Cancel button for the alert dialog.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Content
|
|
17
|
+
description: Main alert dialog content area with proper ARIA attributes.
|
|
18
|
+
required: true
|
|
19
|
+
- name: Description
|
|
20
|
+
description: Description text for the alert dialog.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Footer
|
|
23
|
+
description: Footer section with action buttons for the alert dialog.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Header
|
|
26
|
+
description: Header section of the alert dialog.
|
|
27
|
+
required: false
|
|
28
|
+
- name: Overlay
|
|
29
|
+
description: Container wrapper with backdrop and content for the alert dialog overlay.
|
|
30
|
+
required: false
|
|
31
|
+
- name: Title
|
|
32
|
+
description: Title text for the alert dialog.
|
|
33
|
+
required: false
|
|
34
|
+
- name: Trigger
|
|
35
|
+
description: A wrapper that adds the alert dialog open action to its child element.
|
|
36
|
+
required: true
|
|
37
|
+
features:
|
|
38
|
+
- Custom styling with Tailwind classes
|
|
39
|
+
- Focus management
|
|
40
|
+
api:
|
|
41
|
+
Alert Dialog:
|
|
42
|
+
description: A modal alert dialog component for important confirmations and alerts.
|
|
43
|
+
parameters:
|
|
44
|
+
- name: open
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'false'
|
|
47
|
+
description: Whether the element is open
|
|
48
|
+
- name: close_on_escape
|
|
49
|
+
type: Boolean
|
|
50
|
+
default: 'true'
|
|
51
|
+
description: The close on escape
|
|
52
|
+
data_attributes: []
|
|
53
|
+
css_variables: []
|
|
54
|
+
Action:
|
|
55
|
+
description: Primary action button for the alert dialog.
|
|
56
|
+
parameters:
|
|
57
|
+
- name: variant
|
|
58
|
+
type: Symbol
|
|
59
|
+
default: ":default"
|
|
60
|
+
description: Visual style variant
|
|
61
|
+
- name: size
|
|
62
|
+
type: Symbol
|
|
63
|
+
default: ":default"
|
|
64
|
+
description: Size of the element
|
|
65
|
+
data_attributes: []
|
|
66
|
+
css_variables: []
|
|
67
|
+
Cancel:
|
|
68
|
+
description: Cancel button for the alert dialog.
|
|
69
|
+
parameters:
|
|
70
|
+
- name: variant
|
|
71
|
+
type: Symbol
|
|
72
|
+
default: ":outline"
|
|
73
|
+
description: Visual style variant
|
|
74
|
+
- name: size
|
|
75
|
+
type: Symbol
|
|
76
|
+
default: ":default"
|
|
77
|
+
description: Size of the element
|
|
78
|
+
data_attributes: []
|
|
79
|
+
css_variables: []
|
|
80
|
+
Content:
|
|
81
|
+
description: Main alert dialog content area with proper ARIA attributes.
|
|
82
|
+
parameters: []
|
|
83
|
+
data_attributes: []
|
|
84
|
+
css_variables: []
|
|
85
|
+
Description:
|
|
86
|
+
description: Description text for the alert dialog.
|
|
87
|
+
parameters: []
|
|
88
|
+
data_attributes: []
|
|
89
|
+
css_variables: []
|
|
90
|
+
Footer:
|
|
91
|
+
description: Footer section with action buttons for the alert dialog.
|
|
92
|
+
parameters: []
|
|
93
|
+
data_attributes: []
|
|
94
|
+
css_variables: []
|
|
95
|
+
Header:
|
|
96
|
+
description: Header section of the alert dialog.
|
|
97
|
+
parameters: []
|
|
98
|
+
data_attributes: []
|
|
99
|
+
css_variables: []
|
|
100
|
+
Overlay:
|
|
101
|
+
description: Container wrapper with backdrop and content for the alert dialog
|
|
102
|
+
overlay.
|
|
103
|
+
parameters:
|
|
104
|
+
- name: open
|
|
105
|
+
type: Boolean
|
|
106
|
+
default: 'false'
|
|
107
|
+
description: Whether the element is open
|
|
108
|
+
data_attributes: []
|
|
109
|
+
css_variables: []
|
|
110
|
+
Title:
|
|
111
|
+
description: Title text for the alert dialog.
|
|
112
|
+
parameters: []
|
|
113
|
+
data_attributes: []
|
|
114
|
+
css_variables: []
|
|
115
|
+
Trigger:
|
|
116
|
+
description: A wrapper that adds the alert dialog open action to its child element.
|
|
117
|
+
parameters: []
|
|
118
|
+
data_attributes: []
|
|
119
|
+
css_variables: []
|
|
120
|
+
accessibility:
|
|
121
|
+
aria_pattern: Alert Dialog
|
|
122
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
|
|
123
|
+
description: Implements the WAI-ARIA Alert Dialog pattern with proper roles, states,
|
|
124
|
+
and keyboard navigation.
|
|
125
|
+
aria_attributes: []
|
|
126
|
+
keyboard:
|
|
127
|
+
- key: Escape
|
|
128
|
+
description: Closes the component
|
|
129
|
+
javascript:
|
|
130
|
+
controller: ui--alert-dialog
|
|
131
|
+
targets:
|
|
132
|
+
- container
|
|
133
|
+
- overlay
|
|
134
|
+
- content
|
|
135
|
+
values:
|
|
136
|
+
- name: open
|
|
137
|
+
type: Boolean
|
|
138
|
+
description: Controls open state
|
|
139
|
+
actions:
|
|
140
|
+
- open
|
|
141
|
+
- close
|
|
142
|
+
- show
|
|
143
|
+
- hide
|
|
144
|
+
- preventOverlayClose
|
|
145
|
+
events:
|
|
146
|
+
- name: alertdialog:open
|
|
147
|
+
description: Fired when alertdialog open
|
|
148
|
+
- name: alertdialog:close
|
|
149
|
+
description: Fired when alertdialog close
|
|
150
|
+
related:
|
|
151
|
+
- dialog
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Aspect Ratio
|
|
3
|
+
slug: aspect_ratio
|
|
4
|
+
category: layout
|
|
5
|
+
description: AspectRatio - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Aspect Ratio
|
|
8
|
+
description: Displays content within a desired aspect ratio.
|
|
9
|
+
required: true
|
|
10
|
+
features:
|
|
11
|
+
- Custom styling with Tailwind classes
|
|
12
|
+
common_ratios:
|
|
13
|
+
- ratio: "16:9"
|
|
14
|
+
calculation: "16.0/9.0"
|
|
15
|
+
use_case: "Widescreen videos, modern displays"
|
|
16
|
+
- ratio: "4:3"
|
|
17
|
+
calculation: "4.0/3.0"
|
|
18
|
+
use_case: "Traditional TV, older content"
|
|
19
|
+
- ratio: "1:1"
|
|
20
|
+
calculation: "1.0"
|
|
21
|
+
use_case: "Square images, avatars"
|
|
22
|
+
- ratio: "21:9"
|
|
23
|
+
calculation: "21.0/9.0"
|
|
24
|
+
use_case: "Ultrawide displays, cinematic"
|
|
25
|
+
- ratio: "9:16"
|
|
26
|
+
calculation: "9.0/16.0"
|
|
27
|
+
use_case: "Portrait/mobile, stories"
|
|
28
|
+
api:
|
|
29
|
+
Aspect Ratio:
|
|
30
|
+
description: Displays content within a desired aspect ratio.
|
|
31
|
+
parameters:
|
|
32
|
+
- name: ratio
|
|
33
|
+
type: Float
|
|
34
|
+
default: '1.0'
|
|
35
|
+
description: The ratio
|
|
36
|
+
data_attributes: []
|
|
37
|
+
css_variables: []
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Avatar
|
|
3
|
+
slug: avatar
|
|
4
|
+
category: data
|
|
5
|
+
description: Avatar - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Avatar
|
|
8
|
+
description: Displays an image element with a fallback for representing users.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Fallback
|
|
11
|
+
description: Displays fallback content when the image hasn't loaded or fails to
|
|
12
|
+
load.
|
|
13
|
+
required: false
|
|
14
|
+
- name: Image
|
|
15
|
+
description: Displays the avatar image. Only renders when it has loaded successfully.
|
|
16
|
+
required: false
|
|
17
|
+
features:
|
|
18
|
+
- Custom styling with Tailwind classes
|
|
19
|
+
api:
|
|
20
|
+
Avatar:
|
|
21
|
+
description: Displays an image element with a fallback for representing users.
|
|
22
|
+
parameters: []
|
|
23
|
+
data_attributes: []
|
|
24
|
+
css_variables: []
|
|
25
|
+
Fallback:
|
|
26
|
+
description: Displays fallback content when the image hasn't loaded or fails to
|
|
27
|
+
load.
|
|
28
|
+
parameters: []
|
|
29
|
+
data_attributes: []
|
|
30
|
+
css_variables: []
|
|
31
|
+
Image:
|
|
32
|
+
description: Displays the avatar image. Only renders when it has loaded successfully.
|
|
33
|
+
parameters:
|
|
34
|
+
- name: alt
|
|
35
|
+
type: String
|
|
36
|
+
default: ''
|
|
37
|
+
description: The alt
|
|
38
|
+
data_attributes: []
|
|
39
|
+
css_variables: []
|
|
40
|
+
javascript:
|
|
41
|
+
controller: ui--avatar
|
|
42
|
+
targets:
|
|
43
|
+
- image
|
|
44
|
+
- fallback
|
|
45
|
+
values: []
|
|
46
|
+
actions:
|
|
47
|
+
- onImageLoad
|
|
48
|
+
- onImageError
|
|
49
|
+
- showImage
|
|
50
|
+
- hideImage
|
|
51
|
+
- hideFallback
|
|
52
|
+
- showFallback
|
|
53
|
+
events: []
|
|
54
|
+
related:
|
|
55
|
+
- badge
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Badge
|
|
3
|
+
slug: badge
|
|
4
|
+
category: data
|
|
5
|
+
description: Badge - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Badge
|
|
8
|
+
description: Displays a badge or a component that looks like a badge.
|
|
9
|
+
required: true
|
|
10
|
+
features:
|
|
11
|
+
- Custom styling with Tailwind classes
|
|
12
|
+
- ARIA attributes for accessibility
|
|
13
|
+
api:
|
|
14
|
+
Badge:
|
|
15
|
+
description: Displays a badge or a component that looks like a badge.
|
|
16
|
+
parameters:
|
|
17
|
+
- name: variant
|
|
18
|
+
type: Symbol
|
|
19
|
+
default: ":default"
|
|
20
|
+
description: Visual style variant
|
|
21
|
+
data_attributes: []
|
|
22
|
+
css_variables: []
|
|
23
|
+
related:
|
|
24
|
+
- avatar
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Breadcrumb
|
|
3
|
+
slug: breadcrumb
|
|
4
|
+
category: navigation
|
|
5
|
+
description: Breadcrumb - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Breadcrumb
|
|
8
|
+
description: A navigation breadcrumb component for displaying hierarchical navigation.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Ellipsis
|
|
11
|
+
description: Indicator for collapsed/hidden breadcrumb items.
|
|
12
|
+
required: false
|
|
13
|
+
- name: Item
|
|
14
|
+
description: Individual breadcrumb entry within the breadcrumb list.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Link
|
|
17
|
+
description: Clickable breadcrumb link for navigation.
|
|
18
|
+
required: false
|
|
19
|
+
- name: List
|
|
20
|
+
description: Container for breadcrumb items, rendered as an ordered list.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Page
|
|
23
|
+
description: Current page indicator (non-clickable) for breadcrumbs.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Separator
|
|
26
|
+
description: Visual divider between breadcrumb items with default chevron icon.
|
|
27
|
+
required: false
|
|
28
|
+
features:
|
|
29
|
+
- ARIA attributes for accessibility
|
|
30
|
+
api:
|
|
31
|
+
Breadcrumb:
|
|
32
|
+
description: A navigation breadcrumb component for displaying hierarchical navigation.
|
|
33
|
+
parameters: []
|
|
34
|
+
data_attributes: []
|
|
35
|
+
css_variables: []
|
|
36
|
+
Ellipsis:
|
|
37
|
+
description: Indicator for collapsed/hidden breadcrumb items.
|
|
38
|
+
parameters: []
|
|
39
|
+
data_attributes: []
|
|
40
|
+
css_variables: []
|
|
41
|
+
Item:
|
|
42
|
+
description: Individual breadcrumb entry within the breadcrumb list.
|
|
43
|
+
parameters: []
|
|
44
|
+
data_attributes: []
|
|
45
|
+
css_variables: []
|
|
46
|
+
Link:
|
|
47
|
+
description: Clickable breadcrumb link for navigation.
|
|
48
|
+
parameters:
|
|
49
|
+
- name: href
|
|
50
|
+
type: String
|
|
51
|
+
default: "#"
|
|
52
|
+
description: The href
|
|
53
|
+
data_attributes: []
|
|
54
|
+
css_variables: []
|
|
55
|
+
List:
|
|
56
|
+
description: Container for breadcrumb items, rendered as an ordered list.
|
|
57
|
+
parameters: []
|
|
58
|
+
data_attributes: []
|
|
59
|
+
css_variables: []
|
|
60
|
+
Page:
|
|
61
|
+
description: Current page indicator (non-clickable) for breadcrumbs.
|
|
62
|
+
parameters: []
|
|
63
|
+
data_attributes: []
|
|
64
|
+
css_variables: []
|
|
65
|
+
Separator:
|
|
66
|
+
description: Visual divider between breadcrumb items with default chevron icon.
|
|
67
|
+
parameters: []
|
|
68
|
+
data_attributes: []
|
|
69
|
+
css_variables: []
|
|
70
|
+
accessibility:
|
|
71
|
+
aria_pattern: Breadcrumb
|
|
72
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
|
|
73
|
+
description: Implements the WAI-ARIA Breadcrumb pattern with proper roles, states,
|
|
74
|
+
and keyboard navigation.
|
|
75
|
+
aria_attributes:
|
|
76
|
+
- aria-label
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Button
|
|
3
|
+
slug: button
|
|
4
|
+
category: forms
|
|
5
|
+
description: Button - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Button
|
|
8
|
+
description: A versatile button component with multiple variants and sizes.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Group
|
|
11
|
+
description: A container that groups related buttons together with consistent styling.
|
|
12
|
+
required: false
|
|
13
|
+
features:
|
|
14
|
+
- Custom styling with Tailwind classes
|
|
15
|
+
- Disabled state support
|
|
16
|
+
- ARIA attributes for accessibility
|
|
17
|
+
api:
|
|
18
|
+
Button:
|
|
19
|
+
description: A versatile button component with multiple variants and sizes.
|
|
20
|
+
parameters:
|
|
21
|
+
- name: variant
|
|
22
|
+
type: String
|
|
23
|
+
default: default
|
|
24
|
+
description: Visual style variant
|
|
25
|
+
- name: size
|
|
26
|
+
type: String
|
|
27
|
+
default: default
|
|
28
|
+
description: Size of the element
|
|
29
|
+
- name: type
|
|
30
|
+
type: String
|
|
31
|
+
default: button
|
|
32
|
+
description: The type
|
|
33
|
+
- name: disabled
|
|
34
|
+
type: Boolean
|
|
35
|
+
default: 'false'
|
|
36
|
+
description: Whether the element is disabled
|
|
37
|
+
data_attributes: []
|
|
38
|
+
css_variables: []
|
|
39
|
+
Group:
|
|
40
|
+
description: A container that groups related buttons together with consistent
|
|
41
|
+
styling.
|
|
42
|
+
parameters:
|
|
43
|
+
- name: orientation
|
|
44
|
+
type: Symbol
|
|
45
|
+
default: ":horizontal"
|
|
46
|
+
description: Orientation (horizontal or vertical)
|
|
47
|
+
data_attributes: []
|
|
48
|
+
css_variables: []
|
|
49
|
+
accessibility:
|
|
50
|
+
aria_pattern: Button
|
|
51
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/button/
|
|
52
|
+
description: Implements the WAI-ARIA Button pattern with proper roles, states, and
|
|
53
|
+
keyboard navigation.
|
|
54
|
+
aria_attributes: []
|
|
55
|
+
related:
|
|
56
|
+
- toggle
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Button Group
|
|
3
|
+
slug: button_group
|
|
4
|
+
category: forms
|
|
5
|
+
description: A container that groups related buttons together with consistent styling and shared borders.
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Button Group
|
|
8
|
+
description: A container that groups related buttons together with consistent styling.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Separator
|
|
11
|
+
description: A visual separator between buttons within the group.
|
|
12
|
+
required: false
|
|
13
|
+
- name: Text
|
|
14
|
+
description: A styled text element for use within button groups.
|
|
15
|
+
required: false
|
|
16
|
+
features:
|
|
17
|
+
- Custom styling with Tailwind classes
|
|
18
|
+
- Horizontal and vertical orientations
|
|
19
|
+
- Automatic border radius handling for grouped elements
|
|
20
|
+
- ARIA group role for accessibility
|
|
21
|
+
api:
|
|
22
|
+
Button Group:
|
|
23
|
+
description: A container that groups related buttons together with consistent styling.
|
|
24
|
+
parameters:
|
|
25
|
+
- name: orientation
|
|
26
|
+
type: Symbol
|
|
27
|
+
default: ":horizontal"
|
|
28
|
+
description: Orientation of the group (horizontal or vertical)
|
|
29
|
+
data_attributes:
|
|
30
|
+
- name: data-slot
|
|
31
|
+
value: button-group
|
|
32
|
+
description: Identifies this element as a button group
|
|
33
|
+
- name: data-orientation
|
|
34
|
+
value: horizontal | vertical
|
|
35
|
+
description: The current orientation of the group
|
|
36
|
+
css_variables: []
|
|
37
|
+
Separator:
|
|
38
|
+
description: A visual separator between buttons within the group.
|
|
39
|
+
parameters:
|
|
40
|
+
- name: orientation
|
|
41
|
+
type: Symbol
|
|
42
|
+
default: ":horizontal"
|
|
43
|
+
description: Orientation of the separator (horizontal or vertical)
|
|
44
|
+
data_attributes:
|
|
45
|
+
- name: data-slot
|
|
46
|
+
value: button-group-separator
|
|
47
|
+
description: Identifies this element as a button group separator
|
|
48
|
+
- name: data-orientation
|
|
49
|
+
value: horizontal | vertical
|
|
50
|
+
description: The current orientation of the separator
|
|
51
|
+
css_variables: []
|
|
52
|
+
Text:
|
|
53
|
+
description: A styled text element for use within button groups.
|
|
54
|
+
parameters: []
|
|
55
|
+
data_attributes: []
|
|
56
|
+
css_variables: []
|
|
57
|
+
accessibility:
|
|
58
|
+
aria_pattern: Group
|
|
59
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
|
|
60
|
+
description: Uses role="group" to semantically group related buttons together.
|
|
61
|
+
aria_attributes:
|
|
62
|
+
- name: role
|
|
63
|
+
value: group
|
|
64
|
+
description: Indicates this is a group of related elements
|
|
65
|
+
related:
|
|
66
|
+
- button
|
|
67
|
+
- toggle
|