@agent-ui-kit/web-components 0.0.16 → 0.0.17

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.
Files changed (99) hide show
  1. package/dist/agent-ui.css +1 -1
  2. package/dist/api.colors.json +2 -2
  3. package/dist/api.colors.yaml +2 -2
  4. package/dist/api.components.json +1246 -220
  5. package/dist/api.tokens.json +2 -2
  6. package/dist/api.tokens.yaml +2 -2
  7. package/dist/blocks/action-toolbar/action-toolbar.d.ts +0 -0
  8. package/dist/blocks/agent-artifact-card/agent-artifact-card.d.ts +0 -0
  9. package/dist/blocks/agent-chat-response/agent-chat-response.d.ts +0 -0
  10. package/dist/blocks/agent-code-result/agent-code-result.d.ts +0 -0
  11. package/dist/blocks/agent-context-panel/agent-context-panel.d.ts +0 -0
  12. package/dist/blocks/agent-feedback-controls/agent-feedback-controls.d.ts +0 -0
  13. package/dist/blocks/agent-follow-up-chips/agent-follow-up-chips.d.ts +0 -0
  14. package/dist/blocks/agent-model-selector/agent-model-selector.d.ts +0 -0
  15. package/dist/blocks/agent-prompt-input/agent-prompt-input.d.ts +0 -0
  16. package/dist/blocks/agent-streaming-message/agent-streaming-message.d.ts +0 -0
  17. package/dist/blocks/agent-suggestion-card/agent-suggestion-card.d.ts +0 -0
  18. package/dist/blocks/agent-task-card/agent-task-card.d.ts +0 -0
  19. package/dist/blocks/agent-thinking-state/agent-thinking-state.d.ts +0 -0
  20. package/dist/blocks/agent-tool-use-card/agent-tool-use-card.d.ts +0 -0
  21. package/dist/blocks/auth-card/auth-card.d.ts +0 -0
  22. package/dist/blocks/commerce-pricing-table/commerce-pricing-table.d.ts +0 -0
  23. package/dist/blocks/comms-chat-thread/comms-chat-thread.d.ts +0 -0
  24. package/dist/blocks/comms-notification-list/comms-notification-list.d.ts +0 -0
  25. package/dist/blocks/content-article-card/content-article-card.d.ts +0 -0
  26. package/dist/blocks/dashboard-kpi-grid/dashboard-kpi-grid.d.ts +0 -0
  27. package/dist/blocks/data-activity-log/data-activity-log.d.ts +0 -0
  28. package/dist/blocks/data-metric-card/data-metric-card.d.ts +0 -0
  29. package/dist/blocks/data-table/data-table.d.ts +0 -0
  30. package/dist/blocks/data-timeline/data-timeline.d.ts +0 -0
  31. package/dist/blocks/feedback-alert-banner/feedback-alert-banner.d.ts +0 -0
  32. package/dist/blocks/feedback-empty-state/feedback-empty-state.d.ts +0 -0
  33. package/dist/blocks/feedback-progress-stepper/feedback-progress-stepper.d.ts +0 -0
  34. package/dist/blocks/form-settings-section/form-settings-section.d.ts +0 -0
  35. package/dist/blocks/game-battleship/game-battleship.d.ts +0 -0
  36. package/dist/blocks/game-chess/game-chess.d.ts +0 -0
  37. package/dist/blocks/game-connect-four/game-connect-four.d.ts +0 -0
  38. package/dist/blocks/game-tic-tac-toe/game-tic-tac-toe.d.ts +0 -0
  39. package/dist/blocks/list-kanban-board/list-kanban-board.d.ts +0 -0
  40. package/dist/blocks/media-image-gallery/media-image-gallery.d.ts +0 -0
  41. package/dist/blocks/nav-sidebar/nav-sidebar.d.ts +0 -0
  42. package/dist/blocks/onboard-stepper/onboard-stepper.d.ts +0 -0
  43. package/dist/blocks/overlay-confirmation-modal/overlay-confirmation-modal.d.ts +0 -0
  44. package/dist/blocks/overlay-dropdown-menu/overlay-dropdown-menu.d.ts +0 -0
  45. package/dist/blocks/user-profile-card/user-profile-card.d.ts +0 -0
  46. package/dist/blocks/user-team-list/user-team-list.d.ts +0 -0
  47. package/dist/docs/blocks/action-toolbar.yaml +73 -0
  48. package/dist/docs/blocks/agent-artifact-card.yaml +67 -0
  49. package/dist/docs/blocks/agent-chat-response.yaml +65 -0
  50. package/dist/docs/blocks/agent-code-result.yaml +41 -0
  51. package/dist/docs/blocks/agent-context-panel.yaml +96 -0
  52. package/dist/docs/blocks/agent-feedback-controls.yaml +101 -0
  53. package/dist/docs/blocks/agent-follow-up-chips.yaml +37 -0
  54. package/dist/docs/blocks/agent-model-selector.yaml +83 -0
  55. package/dist/docs/blocks/agent-prompt-input.yaml +49 -0
  56. package/dist/docs/blocks/agent-streaming-message.yaml +46 -0
  57. package/dist/docs/blocks/agent-suggestion-card.yaml +68 -0
  58. package/dist/docs/blocks/agent-task-card.yaml +112 -0
  59. package/dist/docs/blocks/agent-thinking-state.yaml +56 -0
  60. package/dist/docs/blocks/agent-tool-use-card.yaml +142 -0
  61. package/dist/docs/blocks/auth-card.yaml +74 -0
  62. package/dist/docs/blocks/chart-grouped.yaml +1 -1
  63. package/dist/docs/blocks/chart-interactive.yaml +1 -1
  64. package/dist/docs/blocks/chart-labeled.yaml +1 -1
  65. package/dist/docs/blocks/commerce-pricing-table.yaml +142 -0
  66. package/dist/docs/blocks/comms-chat-thread.yaml +88 -0
  67. package/dist/docs/blocks/comms-notification-list.yaml +88 -0
  68. package/dist/docs/blocks/content-article-card.yaml +47 -0
  69. package/dist/docs/blocks/dashboard-kpi-grid.yaml +72 -0
  70. package/dist/docs/blocks/dashboard-layout.yaml +0 -1
  71. package/dist/docs/blocks/data-activity-log.yaml +99 -0
  72. package/dist/docs/blocks/data-metric-card.yaml +50 -0
  73. package/dist/docs/blocks/data-table.yaml +106 -0
  74. package/dist/docs/blocks/data-timeline.yaml +103 -0
  75. package/dist/docs/blocks/feedback-alert-banner.yaml +42 -0
  76. package/dist/docs/blocks/feedback-empty-state.yaml +18 -0
  77. package/dist/docs/blocks/feedback-progress-stepper.yaml +82 -0
  78. package/dist/docs/blocks/form-settings-section.yaml +129 -0
  79. package/dist/docs/blocks/game-battleship.yaml +184 -0
  80. package/dist/docs/blocks/game-chess.yaml +83 -0
  81. package/dist/docs/blocks/game-connect-four.yaml +80 -0
  82. package/dist/docs/blocks/game-tic-tac-toe.yaml +51 -0
  83. package/dist/docs/blocks/issue-assign.yaml +2 -2
  84. package/dist/docs/blocks/list-kanban-board.yaml +158 -0
  85. package/dist/docs/blocks/media-image-gallery.yaml +39 -0
  86. package/dist/docs/blocks/nav-sidebar.yaml +84 -0
  87. package/dist/docs/blocks/onboard-stepper.yaml +111 -0
  88. package/dist/docs/blocks/overlay-confirmation-modal.yaml +60 -0
  89. package/dist/docs/blocks/overlay-dropdown-menu.yaml +72 -0
  90. package/dist/docs/blocks/profile-card.yaml +1 -3
  91. package/dist/docs/blocks/settings-panel.yaml +1 -2
  92. package/dist/docs/blocks/sidebar-nav.yaml +0 -2
  93. package/dist/docs/blocks/user-profile-card.yaml +52 -0
  94. package/dist/docs/blocks/user-team-list.yaml +116 -0
  95. package/dist/docs/components/agent-feed.yaml +2 -2
  96. package/dist/docs/components/button.yaml +3 -2
  97. package/dist/icons.js +137 -128
  98. package/dist/icons.js.map +1 -1
  99. package/package.json +1 -1
package/dist/docs/blocks/game-battleship.yaml ADDED
@@ -0,0 +1,184 @@
1
+ name: game-battleship
2
+ type: block
3
+ summary: Battleship game with dual 8x8 grids, hits/misses, fleet status, and turn indicator.
4
+ description: |
5
+ A Battleship game card with header (title with spacer + accent turn badge), two side-by-side aui-grid cols="8" rows="8" gap="1" square boards in a flex-wrap row with gap="6". Each grid section is an aui-stack with spacer, min-width="12", and aui-heading group label. Cells are aui-button size="fill" hide-label with label for accessibility and CSS classes for state: .aui-battleship-water, .aui-battleship-ship, .aui-battleship-hit (with icon-leading="x"), .aui-battleship-miss (with icon-leading="circle"). Footer shows muted hit/miss stats with spacer and scrim new game button.
6
+ components:
7
+ - aui-container
8
+ - aui-header
9
+ - aui-content
10
+ - aui-footer
11
+ - aui-inset
12
+ - aui-stack
13
+ - aui-grid
14
+ - aui-heading
15
+ - aui-text
16
+ - aui-badge
17
+ - aui-button
18
+ kind: card
19
+ examples:
20
+ - description: Battleship game with dual 8x8 grids, hits/misses, fleet status, and turn indicator.
21
+ html: |-
22
+ <aui-container kind="card" bordered max-width="xl">
23
+ <aui-header>
24
+ <aui-stack direction="row" gap="3" align-items="center">
25
+ <aui-heading size="lg" spacer>Battleship</aui-heading>
26
+ <aui-badge accent>Your turn</aui-badge>
27
+ </aui-stack>
28
+ </aui-header>
29
+ <aui-content>
30
+ <aui-inset>
31
+ <aui-stack direction="row" gap="6" wrap>
32
+
33
+ <!-- Enemy waters -->
34
+ <aui-stack gap="2" spacer min-width="12">
35
+ <aui-heading group>Enemy Waters</aui-heading>
36
+ <aui-grid cols="8" rows="8" gap="1" square>
37
+ <aui-button size="fill" hide-label label="A1" class="aui-battleship-water"></aui-button>
38
+ <aui-button size="fill" hide-label label="A2" class="aui-battleship-water"></aui-button>
39
+ <aui-button size="fill" hide-label label="A3" class="aui-battleship-water"></aui-button>
40
+ <aui-button size="fill" hide-label label="A4" class="aui-battleship-hit" icon-leading="x"></aui-button>
41
+ <aui-button size="fill" hide-label label="A5" class="aui-battleship-water"></aui-button>
42
+ <aui-button size="fill" hide-label label="A6" class="aui-battleship-water"></aui-button>
43
+ <aui-button size="fill" hide-label label="A7" class="aui-battleship-water"></aui-button>
44
+ <aui-button size="fill" hide-label label="A8" class="aui-battleship-water"></aui-button>
45
+ <aui-button size="fill" hide-label label="B1" class="aui-battleship-water"></aui-button>
46
+ <aui-button size="fill" hide-label label="B2" class="aui-battleship-miss" icon-leading="circle"></aui-button>
47
+ <aui-button size="fill" hide-label label="B3" class="aui-battleship-water"></aui-button>
48
+ <aui-button size="fill" hide-label label="B4" class="aui-battleship-water"></aui-button>
49
+ <aui-button size="fill" hide-label label="B5" class="aui-battleship-hit" icon-leading="x"></aui-button>
50
+ <aui-button size="fill" hide-label label="B6" class="aui-battleship-water"></aui-button>
51
+ <aui-button size="fill" hide-label label="B7" class="aui-battleship-water"></aui-button>
52
+ <aui-button size="fill" hide-label label="B8" class="aui-battleship-miss" icon-leading="circle"></aui-button>
53
+ <aui-button size="fill" hide-label label="C1" class="aui-battleship-water"></aui-button>
54
+ <aui-button size="fill" hide-label label="C2" class="aui-battleship-water"></aui-button>
55
+ <aui-button size="fill" hide-label label="C3" class="aui-battleship-water"></aui-button>
56
+ <aui-button size="fill" hide-label label="C4" class="aui-battleship-water"></aui-button>
57
+ <aui-button size="fill" hide-label label="C5" class="aui-battleship-water"></aui-button>
58
+ <aui-button size="fill" hide-label label="C6" class="aui-battleship-hit" icon-leading="x"></aui-button>
59
+ <aui-button size="fill" hide-label label="C7" class="aui-battleship-water"></aui-button>
60
+ <aui-button size="fill" hide-label label="C8" class="aui-battleship-water"></aui-button>
61
+ <aui-button size="fill" hide-label label="D1" class="aui-battleship-miss" icon-leading="circle"></aui-button>
62
+ <aui-button size="fill" hide-label label="D2" class="aui-battleship-water"></aui-button>
63
+ <aui-button size="fill" hide-label label="D3" class="aui-battleship-water"></aui-button>
64
+ <aui-button size="fill" hide-label label="D4" class="aui-battleship-water"></aui-button>
65
+ <aui-button size="fill" hide-label label="D5" class="aui-battleship-water"></aui-button>
66
+ <aui-button size="fill" hide-label label="D6" class="aui-battleship-water"></aui-button>
67
+ <aui-button size="fill" hide-label label="D7" class="aui-battleship-water"></aui-button>
68
+ <aui-button size="fill" hide-label label="D8" class="aui-battleship-water"></aui-button>
69
+ <aui-button size="fill" hide-label label="E1" class="aui-battleship-water"></aui-button>
70
+ <aui-button size="fill" hide-label label="E2" class="aui-battleship-water"></aui-button>
71
+ <aui-button size="fill" hide-label label="E3" class="aui-battleship-water"></aui-button>
72
+ <aui-button size="fill" hide-label label="E4" class="aui-battleship-water"></aui-button>
73
+ <aui-button size="fill" hide-label label="E5" class="aui-battleship-water"></aui-button>
74
+ <aui-button size="fill" hide-label label="E6" class="aui-battleship-water"></aui-button>
75
+ <aui-button size="fill" hide-label label="E7" class="aui-battleship-water"></aui-button>
76
+ <aui-button size="fill" hide-label label="E8" class="aui-battleship-water"></aui-button>
77
+ <aui-button size="fill" hide-label label="F1" class="aui-battleship-water"></aui-button>
78
+ <aui-button size="fill" hide-label label="F2" class="aui-battleship-water"></aui-button>
79
+ <aui-button size="fill" hide-label label="F3" class="aui-battleship-miss" icon-leading="circle"></aui-button>
80
+ <aui-button size="fill" hide-label label="F4" class="aui-battleship-water"></aui-button>
81
+ <aui-button size="fill" hide-label label="F5" class="aui-battleship-water"></aui-button>
82
+ <aui-button size="fill" hide-label label="F6" class="aui-battleship-water"></aui-button>
83
+ <aui-button size="fill" hide-label label="F7" class="aui-battleship-water"></aui-button>
84
+ <aui-button size="fill" hide-label label="F8" class="aui-battleship-water"></aui-button>
85
+ <aui-button size="fill" hide-label label="G1" class="aui-battleship-water"></aui-button>
86
+ <aui-button size="fill" hide-label label="G2" class="aui-battleship-water"></aui-button>
87
+ <aui-button size="fill" hide-label label="G3" class="aui-battleship-water"></aui-button>
88
+ <aui-button size="fill" hide-label label="G4" class="aui-battleship-water"></aui-button>
89
+ <aui-button size="fill" hide-label label="G5" class="aui-battleship-water"></aui-button>
90
+ <aui-button size="fill" hide-label label="G6" class="aui-battleship-water"></aui-button>
91
+ <aui-button size="fill" hide-label label="G7" class="aui-battleship-water"></aui-button>
92
+ <aui-button size="fill" hide-label label="G8" class="aui-battleship-water"></aui-button>
93
+ <aui-button size="fill" hide-label label="H1" class="aui-battleship-water"></aui-button>
94
+ <aui-button size="fill" hide-label label="H2" class="aui-battleship-water"></aui-button>
95
+ <aui-button size="fill" hide-label label="H3" class="aui-battleship-water"></aui-button>
96
+ <aui-button size="fill" hide-label label="H4" class="aui-battleship-water"></aui-button>
97
+ <aui-button size="fill" hide-label label="H5" class="aui-battleship-water"></aui-button>
98
+ <aui-button size="fill" hide-label label="H6" class="aui-battleship-water"></aui-button>
99
+ <aui-button size="fill" hide-label label="H7" class="aui-battleship-water"></aui-button>
100
+ <aui-button size="fill" hide-label label="H8" class="aui-battleship-water"></aui-button>
101
+ </aui-grid>
102
+ </aui-stack>
103
+
104
+ <!-- Your fleet -->
105
+ <aui-stack gap="2" spacer min-width="12">
106
+ <aui-heading group>Your Fleet</aui-heading>
107
+ <aui-grid cols="8" rows="8" gap="1" square>
108
+ <aui-button size="fill" hide-label label="A1" class="aui-battleship-water"></aui-button>
109
+ <aui-button size="fill" hide-label label="A2" class="aui-battleship-water"></aui-button>
110
+ <aui-button size="fill" hide-label label="A3" class="aui-battleship-ship"></aui-button>
111
+ <aui-button size="fill" hide-label label="A4" class="aui-battleship-ship"></aui-button>
112
+ <aui-button size="fill" hide-label label="A5" class="aui-battleship-ship"></aui-button>
113
+ <aui-button size="fill" hide-label label="A6" class="aui-battleship-water"></aui-button>
114
+ <aui-button size="fill" hide-label label="A7" class="aui-battleship-water"></aui-button>
115
+ <aui-button size="fill" hide-label label="A8" class="aui-battleship-water"></aui-button>
116
+ <aui-button size="fill" hide-label label="B1" class="aui-battleship-water"></aui-button>
117
+ <aui-button size="fill" hide-label label="B2" class="aui-battleship-water"></aui-button>
118
+ <aui-button size="fill" hide-label label="B3" class="aui-battleship-water"></aui-button>
119
+ <aui-button size="fill" hide-label label="B4" class="aui-battleship-water"></aui-button>
120
+ <aui-button size="fill" hide-label label="B5" class="aui-battleship-water"></aui-button>
121
+ <aui-button size="fill" hide-label label="B6" class="aui-battleship-water"></aui-button>
122
+ <aui-button size="fill" hide-label label="B7" class="aui-battleship-water"></aui-button>
123
+ <aui-button size="fill" hide-label label="B8" class="aui-battleship-water"></aui-button>
124
+ <aui-button size="fill" hide-label label="C1" class="aui-battleship-water"></aui-button>
125
+ <aui-button size="fill" hide-label label="C2" class="aui-battleship-water"></aui-button>
126
+ <aui-button size="fill" hide-label label="C3" class="aui-battleship-water"></aui-button>
127
+ <aui-button size="fill" hide-label label="C4" class="aui-battleship-water"></aui-button>
128
+ <aui-button size="fill" hide-label label="C5" class="aui-battleship-water"></aui-button>
129
+ <aui-button size="fill" hide-label label="C6" class="aui-battleship-ship"></aui-button>
130
+ <aui-button size="fill" hide-label label="C7" class="aui-battleship-water"></aui-button>
131
+ <aui-button size="fill" hide-label label="C8" class="aui-battleship-water"></aui-button>
132
+ <aui-button size="fill" hide-label label="D1" class="aui-battleship-water"></aui-button>
133
+ <aui-button size="fill" hide-label label="D2" class="aui-battleship-water"></aui-button>
134
+ <aui-button size="fill" hide-label label="D3" class="aui-battleship-water"></aui-button>
135
+ <aui-button size="fill" hide-label label="D4" class="aui-battleship-water"></aui-button>
136
+ <aui-button size="fill" hide-label label="D5" class="aui-battleship-water"></aui-button>
137
+ <aui-button size="fill" hide-label label="D6" class="aui-battleship-ship"></aui-button>
138
+ <aui-button size="fill" hide-label label="D7" class="aui-battleship-water"></aui-button>
139
+ <aui-button size="fill" hide-label label="D8" class="aui-battleship-water"></aui-button>
140
+ <aui-button size="fill" hide-label label="E1" class="aui-battleship-ship"></aui-button>
141
+ <aui-button size="fill" hide-label label="E2" class="aui-battleship-ship"></aui-button>
142
+ <aui-button size="fill" hide-label label="E3" class="aui-battleship-water"></aui-button>
143
+ <aui-button size="fill" hide-label label="E4" class="aui-battleship-water"></aui-button>
144
+ <aui-button size="fill" hide-label label="E5" class="aui-battleship-water"></aui-button>
145
+ <aui-button size="fill" hide-label label="E6" class="aui-battleship-water"></aui-button>
146
+ <aui-button size="fill" hide-label label="E7" class="aui-battleship-water"></aui-button>
147
+ <aui-button size="fill" hide-label label="E8" class="aui-battleship-water"></aui-button>
148
+ <aui-button size="fill" hide-label label="F1" class="aui-battleship-water"></aui-button>
149
+ <aui-button size="fill" hide-label label="F2" class="aui-battleship-water"></aui-button>
150
+ <aui-button size="fill" hide-label label="F3" class="aui-battleship-water"></aui-button>
151
+ <aui-button size="fill" hide-label label="F4" class="aui-battleship-water"></aui-button>
152
+ <aui-button size="fill" hide-label label="F5" class="aui-battleship-water"></aui-button>
153
+ <aui-button size="fill" hide-label label="F6" class="aui-battleship-water"></aui-button>
154
+ <aui-button size="fill" hide-label label="F7" class="aui-battleship-water"></aui-button>
155
+ <aui-button size="fill" hide-label label="F8" class="aui-battleship-water"></aui-button>
156
+ <aui-button size="fill" hide-label label="G1" class="aui-battleship-water"></aui-button>
157
+ <aui-button size="fill" hide-label label="G2" class="aui-battleship-water"></aui-button>
158
+ <aui-button size="fill" hide-label label="G3" class="aui-battleship-water"></aui-button>
159
+ <aui-button size="fill" hide-label label="G4" class="aui-battleship-water"></aui-button>
160
+ <aui-button size="fill" hide-label label="G5" class="aui-battleship-water"></aui-button>
161
+ <aui-button size="fill" hide-label label="G6" class="aui-battleship-water"></aui-button>
162
+ <aui-button size="fill" hide-label label="G7" class="aui-battleship-water"></aui-button>
163
+ <aui-button size="fill" hide-label label="G8" class="aui-battleship-water"></aui-button>
164
+ <aui-button size="fill" hide-label label="H1" class="aui-battleship-water"></aui-button>
165
+ <aui-button size="fill" hide-label label="H2" class="aui-battleship-water"></aui-button>
166
+ <aui-button size="fill" hide-label label="H3" class="aui-battleship-water"></aui-button>
167
+ <aui-button size="fill" hide-label label="H4" class="aui-battleship-water"></aui-button>
168
+ <aui-button size="fill" hide-label label="H5" class="aui-battleship-water"></aui-button>
169
+ <aui-button size="fill" hide-label label="H6" class="aui-battleship-water"></aui-button>
170
+ <aui-button size="fill" hide-label label="H7" class="aui-battleship-water"></aui-button>
171
+ <aui-button size="fill" hide-label label="H8" class="aui-battleship-water"></aui-button>
172
+ </aui-grid>
173
+ </aui-stack>
174
+
175
+ </aui-stack>
176
+ </aui-inset>
177
+ </aui-content>
178
+ <aui-footer>
179
+ <aui-stack direction="row" gap="3" align-items="center">
180
+ <aui-text muted size="xs" spacer>Hits: 3 · Misses: 4</aui-text>
181
+ <aui-button scrim size="sm">New Game</aui-button>
182
+ </aui-stack>
183
+ </aui-footer>
184
+ </aui-container>
package/dist/docs/blocks/game-chess.yaml ADDED
@@ -0,0 +1,83 @@
1
+ name: game-chess
2
+ type: block
3
+ summary: Chess board with 8x8 grid, Unicode pieces, player bars with clocks.
4
+ description: |
5
+ A chess game card with opponent bar in header (avatar, name with spacer, mono clock) and player bar in footer (same layout). Avatars use default size (no size="xs"). The board is an aui-grid cols="8" rows="8" gap="0" square with .aui-chess-board class (border-radius and overflow). Square cells use .aui-chess-cell class for flex centering, aspect-ratio: 1, and nth-child-based alternating var(--aui-control) / var(--aui-neutral-3) backgrounds — no inline styles needed. Empty squares have no content.
6
+ components:
7
+ - aui-container
8
+ - aui-header
9
+ - aui-content
10
+ - aui-footer
11
+ - aui-inset
12
+ - aui-grid
13
+ - aui-stack
14
+ - aui-heading
15
+ - aui-text
16
+ - aui-avatar
17
+ kind: card
18
+ examples:
19
+ - description: Chess board with 8x8 grid, Unicode pieces, player bars with clocks.
20
+ html: |-
21
+ <aui-container kind="card" bordered max-width="sm">
22
+ <aui-header>
23
+ <aui-stack direction="row" gap="3" align-items="center">
24
+ <aui-avatar>OP</aui-avatar>
25
+ <aui-heading size="sm" spacer>Opponent</aui-heading>
26
+ <aui-text size="sm" font="mono">12:34</aui-text>
27
+ </aui-stack>
28
+ </aui-header>
29
+ <aui-content>
30
+ <aui-inset>
31
+ <aui-grid cols="8" rows="8" gap="0" square class="aui-chess-board">
32
+ <!-- Row 8 -->
33
+ <div class="aui-chess-cell">♜</div>
34
+ <div class="aui-chess-cell">♞</div>
35
+ <div class="aui-chess-cell">♝</div>
36
+ <div class="aui-chess-cell">♛</div>
37
+ <div class="aui-chess-cell">♚</div>
38
+ <div class="aui-chess-cell">♝</div>
39
+ <div class="aui-chess-cell">♞</div>
40
+ <div class="aui-chess-cell">♜</div>
41
+ <!-- Row 7 (pawns) -->
42
+ <div class="aui-chess-cell">♟</div>
43
+ <div class="aui-chess-cell">♟</div>
44
+ <div class="aui-chess-cell">♟</div>
45
+ <div class="aui-chess-cell">♟</div>
46
+ <div class="aui-chess-cell">♟</div>
47
+ <div class="aui-chess-cell">♟</div>
48
+ <div class="aui-chess-cell">♟</div>
49
+ <div class="aui-chess-cell">♟</div>
50
+ <!-- Rows 6-3 (empty) -->
51
+ <div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div>
52
+ <div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div>
53
+ <div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div>
54
+ <div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div><div class="aui-chess-cell"></div>
55
+ <!-- Row 2 (white pawns) -->
56
+ <div class="aui-chess-cell">♙</div>
57
+ <div class="aui-chess-cell">♙</div>
58
+ <div class="aui-chess-cell">♙</div>
59
+ <div class="aui-chess-cell">♙</div>
60
+ <div class="aui-chess-cell">♙</div>
61
+ <div class="aui-chess-cell">♙</div>
62
+ <div class="aui-chess-cell">♙</div>
63
+ <div class="aui-chess-cell">♙</div>
64
+ <!-- Row 1 -->
65
+ <div class="aui-chess-cell">♖</div>
66
+ <div class="aui-chess-cell">♘</div>
67
+ <div class="aui-chess-cell">♗</div>
68
+ <div class="aui-chess-cell">♕</div>
69
+ <div class="aui-chess-cell">♔</div>
70
+ <div class="aui-chess-cell">♗</div>
71
+ <div class="aui-chess-cell">♘</div>
72
+ <div class="aui-chess-cell">♖</div>
73
+ </aui-grid>
74
+ </aui-inset>
75
+ </aui-content>
76
+ <aui-footer>
77
+ <aui-stack direction="row" gap="3" align-items="center">
78
+ <aui-avatar>YO</aui-avatar>
79
+ <aui-heading size="sm" spacer>You</aui-heading>
80
+ <aui-text size="sm" font="mono">14:22</aui-text>
81
+ </aui-stack>
82
+ </aui-footer>
83
+ </aui-container>
package/dist/docs/blocks/game-connect-four.yaml ADDED
@@ -0,0 +1,80 @@
1
+ name: game-connect-four
2
+ type: block
3
+ summary: Connect Four game with 7-column board, colored discs, score header, and new game button.
4
+ description: |
5
+ A Connect Four game card (max-width="md") with score badges (Red danger / Yellow warning) in header with spacers centering turn text. The board is an aui-grid cols="7" gap="1" with .aui-connect-four-board class (accent background, padding, border-radius). Disc slots are aui-button size="fill" round hide-label with icon-leading="circle" and aspect-ratio: 1 via CSS. Empty holes use .aui-connect-four-empty class (neutral-2 background, color matched to hide the icon), red pieces use .aui-connect-four-red with danger attr, yellow pieces use .aui-connect-four-yellow with warning attr. Footer has a scrim full-width new game button.
6
+ components:
7
+ - aui-container
8
+ - aui-header
9
+ - aui-content
10
+ - aui-footer
11
+ - aui-inset
12
+ - aui-grid
13
+ - aui-stack
14
+ - aui-text
15
+ - aui-badge
16
+ - aui-button
17
+ kind: card
18
+ examples:
19
+ - description: Connect Four game with 7-column board, colored discs, score header, and new game button.
20
+ html: |-
21
+ <aui-container kind="card" bordered max-width="md">
22
+ <aui-header>
23
+ <aui-stack direction="row" gap="3" align-items="center">
24
+ <aui-badge danger>Red: 2</aui-badge>
25
+ <aui-text spacer></aui-text>
26
+ <aui-text size="sm" weight="medium">Red's turn</aui-text>
27
+ <aui-text spacer></aui-text>
28
+ <aui-badge warning>Yellow: 1</aui-badge>
29
+ </aui-stack>
30
+ </aui-header>
31
+ <aui-content>
32
+ <aui-inset>
33
+ <aui-grid cols="7" gap="1" class="aui-connect-four-board">
34
+ <!-- Row 1 (empty) -->
35
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
36
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
37
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
38
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
39
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
40
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
41
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
42
+ <!-- Row 2 -->
43
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
44
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
45
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
46
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
47
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
48
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
49
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
50
+ <!-- Row 3 -->
51
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
52
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
53
+ <aui-button size="fill" round hide-label label="Yellow" icon-leading="circle" warning class="aui-connect-four-yellow"></aui-button>
54
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
55
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
56
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
57
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
58
+ <!-- Row 4 -->
59
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
60
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
61
+ <aui-button size="fill" round hide-label label="Yellow" icon-leading="circle" warning class="aui-connect-four-yellow"></aui-button>
62
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
63
+ <aui-button size="fill" round hide-label label="Yellow" icon-leading="circle" warning class="aui-connect-four-yellow"></aui-button>
64
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
65
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
66
+ <!-- Row 5 -->
67
+ <aui-button size="fill" round hide-label label="Drop" icon-leading="circle" class="aui-connect-four-empty"></aui-button>
68
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
69
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
70
+ <aui-button size="fill" round hide-label label="Yellow" icon-leading="circle" warning class="aui-connect-four-yellow"></aui-button>
71
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
72
+ <aui-button size="fill" round hide-label label="Yellow" icon-leading="circle" warning class="aui-connect-four-yellow"></aui-button>
73
+ <aui-button size="fill" round hide-label label="Red" icon-leading="circle" danger class="aui-connect-four-red"></aui-button>
74
+ </aui-grid>
75
+ </aui-inset>
76
+ </aui-content>
77
+ <aui-footer>
78
+ <aui-button scrim width="full">New Game</aui-button>
79
+ </aui-footer>
80
+ </aui-container>
package/dist/docs/blocks/game-tic-tac-toe.yaml ADDED
@@ -0,0 +1,51 @@
1
+ name: game-tic-tac-toe
2
+ type: block
3
+ summary: Tic-tac-toe game board with score header, 3x3 grid, and new game button.
4
+ description: |
5
+ A game card (max-width="sm") with score badges in the header (X accent vs O, spacers centering turn text), a 3x3 aui-grid (cols="3" rows="3" gap="1" square) constrained to max-width: 16rem. Cells are aui-button size="fill" icon-size="half" hide-label with .aui-ttt-cell class for control background, transparent border, and aspect-ratio: 1. X pieces add .aui-ttt-cell-x for --aui-button-color: var(--aui-solid) plus accent attr. O pieces use icon-leading="circle", empty cells have no icon. Footer has a scrim full-width new game button.
6
+ components:
7
+ - aui-container
8
+ - aui-header
9
+ - aui-content
10
+ - aui-footer
11
+ - aui-inset
12
+ - aui-stack
13
+ - aui-grid
14
+ - aui-text
15
+ - aui-badge
16
+ - aui-button
17
+ kind: card
18
+ examples:
19
+ - description: Tic-tac-toe game board with score header, 3x3 grid, and new game button.
20
+ html: |-
21
+ <aui-container kind="card" bordered max-width="sm">
22
+ <aui-header>
23
+ <aui-stack direction="row" gap="3" align-items="center">
24
+ <aui-badge accent>X: 3</aui-badge>
25
+ <aui-text spacer></aui-text>
26
+ <aui-text size="sm" weight="medium">X's turn</aui-text>
27
+ <aui-text spacer></aui-text>
28
+ <aui-badge>O: 2</aui-badge>
29
+ </aui-stack>
30
+ </aui-header>
31
+ <aui-content>
32
+ <aui-inset>
33
+ <aui-stack gap="2" align-items="center">
34
+ <aui-grid cols="3" rows="3" gap="1" square style="width: 100%; max-width: 16rem;">
35
+ <aui-button size="fill" icon-size="half" hide-label label="X" icon-leading="x" accent class="aui-ttt-cell aui-ttt-cell-x"></aui-button>
36
+ <aui-button size="fill" icon-size="half" hide-label label="O" icon-leading="circle" class="aui-ttt-cell"></aui-button>
37
+ <aui-button size="fill" icon-size="half" hide-label label="Empty" class="aui-ttt-cell"></aui-button>
38
+ <aui-button size="fill" icon-size="half" hide-label label="Empty" class="aui-ttt-cell"></aui-button>
39
+ <aui-button size="fill" icon-size="half" hide-label label="X" icon-leading="x" accent class="aui-ttt-cell aui-ttt-cell-x"></aui-button>
40
+ <aui-button size="fill" icon-size="half" hide-label label="O" icon-leading="circle" class="aui-ttt-cell"></aui-button>
41
+ <aui-button size="fill" icon-size="half" hide-label label="O" icon-leading="circle" class="aui-ttt-cell"></aui-button>
42
+ <aui-button size="fill" icon-size="half" hide-label label="Empty" class="aui-ttt-cell"></aui-button>
43
+ <aui-button size="fill" icon-size="half" hide-label label="X" icon-leading="x" accent class="aui-ttt-cell aui-ttt-cell-x"></aui-button>
44
+ </aui-grid>
45
+ </aui-stack>
46
+ </aui-inset>
47
+ </aui-content>
48
+ <aui-footer>
49
+ <aui-button scrim width="full">New Game</aui-button>
50
+ </aui-footer>
51
+ </aui-container>
package/dist/docs/blocks/issue-assign.yaml CHANGED
@@ -13,8 +13,8 @@ components:
13
13
  - aui-text
14
14
  - aui-avatar
15
15
  - aui-chip
16
- - aui-button
17
- - aui-icon
16
+ - aui-dropdown-menu
17
+ - aui-option
18
18
  kind: card
19
19
  examples:
20
20
  - description: Issue assignment card with user search and selected token chips.
package/dist/docs/blocks/list-kanban-board.yaml ADDED
@@ -0,0 +1,158 @@
1
+ name: list-kanban-board
2
+ type: block
3
+ summary: Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.
4
+ description: |
5
+ A product roadmap kanban board with header containing title heading with spacer, a Board/List segmented control, and a primary accent "New" button with plus icon. Content is an inset with horizontally scrolling row of columns using aui-stack with min-width="14" and a .aui-kanban-column CSS class for control background, border-radius, and padding. Each column has a header row with a colored dot badge (plain=Planned, accent=In Progress, success=Complete), column heading with spacer, and muted xs item count. Cards are plain divs with .aui-kanban-card class containing a heading, muted xs description text, and a footer row with a category badge (Feature, Enhancement, Refactor, QA, Done), spacer, and either upvote button + vote count, avatar-group assignees, or a completion date. Vote rows use ghost hide-label caret-up buttons with xs muted count text.
6
+ components:
7
+ - aui-container
8
+ - aui-header
9
+ - aui-content
10
+ - aui-inset
11
+ - aui-stack
12
+ - aui-heading
13
+ - aui-text
14
+ - aui-avatar
15
+ - aui-avatar-group
16
+ - aui-badge
17
+ - aui-button
18
+ - aui-segmented-control
19
+ - aui-segment
20
+ kind: card
21
+ examples:
22
+ - description: Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.
23
+ html: |-
24
+ <aui-container kind="card" bordered>
25
+ <aui-header>
26
+ <aui-stack direction="row" gap="3" align-items="center">
27
+ <aui-heading size="lg" spacer>Roadmap</aui-heading>
28
+ <aui-segmented-control value="board" size="sm">
29
+ <aui-segment value="board" selected>Board</aui-segment>
30
+ <aui-segment value="list">List</aui-segment>
31
+ </aui-segmented-control>
32
+ <aui-button primary accent size="sm" icon-leading="plus">New</aui-button>
33
+ </aui-stack>
34
+ </aui-header>
35
+ <aui-content>
36
+ <aui-inset>
37
+ <aui-stack direction="row" gap="3" style="overflow-x: auto; align-items: start;">
38
+
39
+ <!-- Planned column -->
40
+ <aui-stack gap="3" min-width="14" class="aui-kanban-column">
41
+ <aui-stack direction="row" gap="2" align-items="center">
42
+ <aui-badge dot></aui-badge>
43
+ <aui-heading size="sm" spacer>Planned</aui-heading>
44
+ <aui-text muted size="xs">4</aui-text>
45
+ </aui-stack>
46
+ <aui-stack gap="2">
47
+ <div class="aui-kanban-card">
48
+ <aui-stack gap="2">
49
+ <aui-heading size="sm">Keyboard shortcuts panel</aui-heading>
50
+ <aui-text muted size="xs">Global shortcut viewer with search and customization support.</aui-text>
51
+ <aui-stack direction="row" gap="1" align-items="center">
52
+ <aui-badge>Feature</aui-badge>
53
+ <aui-text spacer></aui-text>
54
+ <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
55
+ <aui-text size="xs" muted>24</aui-text>
56
+ </aui-stack>
57
+ </aui-stack>
58
+ </div>
59
+ <div class="aui-kanban-card">
60
+ <aui-stack gap="2">
61
+ <aui-heading size="sm">Color picker OKLCH rework</aui-heading>
62
+ <aui-text muted size="xs">Native OKLCH color model with L/C/H/A sliders.</aui-text>
63
+ <aui-stack direction="row" gap="1" align-items="center">
64
+ <aui-badge accent>Enhancement</aui-badge>
65
+ <aui-text spacer></aui-text>
66
+ <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
67
+ <aui-text size="xs" muted>18</aui-text>
68
+ </aui-stack>
69
+ </aui-stack>
70
+ </div>
71
+ <div class="aui-kanban-card">
72
+ <aui-stack gap="2">
73
+ <aui-heading size="sm">Notification center rebuild</aui-heading>
74
+ <aui-text muted size="xs">Use aui-select popover pattern instead of custom panel.</aui-text>
75
+ <aui-stack direction="row" gap="1" align-items="center">
76
+ <aui-badge warning>Refactor</aui-badge>
77
+ <aui-text spacer></aui-text>
78
+ <aui-button ghost hide-label label="Upvote" icon-leading="caret-up" size="sm"></aui-button>
79
+ <aui-text size="xs" muted>12</aui-text>
80
+ </aui-stack>
81
+ </aui-stack>
82
+ </div>
83
+ </aui-stack>
84
+ </aui-stack>
85
+
86
+ <!-- In Progress column -->
87
+ <aui-stack gap="3" min-width="14" class="aui-kanban-column">
88
+ <aui-stack direction="row" gap="2" align-items="center">
89
+ <aui-badge accent dot></aui-badge>
90
+ <aui-heading size="sm" spacer>In Progress</aui-heading>
91
+ <aui-text muted size="xs">2</aui-text>
92
+ </aui-stack>
93
+ <aui-stack gap="2">
94
+ <div class="aui-kanban-card">
95
+ <aui-stack gap="2">
96
+ <aui-heading size="sm">Token pipeline v2</aui-heading>
97
+ <aui-text muted size="xs">Build-time transforms for CSS, Swift, and Android outputs.</aui-text>
98
+ <aui-stack direction="row" gap="1" align-items="center">
99
+ <aui-badge accent>Enhancement</aui-badge>
100
+ <aui-text spacer></aui-text>
101
+ <aui-avatar-group>
102
+ <aui-avatar size="xs">SC</aui-avatar>
103
+ <aui-avatar size="xs">JW</aui-avatar>
104
+ </aui-avatar-group>
105
+ </aui-stack>
106
+ </aui-stack>
107
+ </div>
108
+ <div class="aui-kanban-card">
109
+ <aui-stack gap="2">
110
+ <aui-heading size="sm">Dark mode QA</aui-heading>
111
+ <aui-text muted size="xs">Verify all components render correctly in dark theme.</aui-text>
112
+ <aui-stack direction="row" gap="1" align-items="center">
113
+ <aui-badge>QA</aui-badge>
114
+ <aui-text spacer></aui-text>
115
+ <aui-avatar size="xs">MR</aui-avatar>
116
+ </aui-stack>
117
+ </aui-stack>
118
+ </div>
119
+ </aui-stack>
120
+ </aui-stack>
121
+
122
+ <!-- Complete column -->
123
+ <aui-stack gap="3" min-width="14" class="aui-kanban-column">
124
+ <aui-stack direction="row" gap="2" align-items="center">
125
+ <aui-badge success dot></aui-badge>
126
+ <aui-heading size="sm" spacer>Complete</aui-heading>
127
+ <aui-text muted size="xs">3</aui-text>
128
+ </aui-stack>
129
+ <aui-stack gap="2">
130
+ <div class="aui-kanban-card">
131
+ <aui-stack gap="2">
132
+ <aui-heading size="sm">40 blocks ported</aui-heading>
133
+ <aui-text muted size="xs">All training source blocks converted to agent-ui patterns.</aui-text>
134
+ <aui-stack direction="row" gap="1" align-items="center">
135
+ <aui-badge success>Done</aui-badge>
136
+ <aui-text spacer></aui-text>
137
+ <aui-text size="xs" muted>Mar 21</aui-text>
138
+ </aui-stack>
139
+ </aui-stack>
140
+ </div>
141
+ <div class="aui-kanban-card">
142
+ <aui-stack gap="2">
143
+ <aui-heading size="sm">Component token audit</aui-heading>
144
+ <aui-text muted size="xs">8 tokens added, toast/tabs/select cleaned up.</aui-text>
145
+ <aui-stack direction="row" gap="1" align-items="center">
146
+ <aui-badge success>Done</aui-badge>
147
+ <aui-text spacer></aui-text>
148
+ <aui-text size="xs" muted>Mar 21</aui-text>
149
+ </aui-stack>
150
+ </aui-stack>
151
+ </div>
152
+ </aui-stack>
153
+ </aui-stack>
154
+
155
+ </aui-stack>
156
+ </aui-inset>
157
+ </aui-content>
158
+ </aui-container>