@agent-ui-kit/web-components 0.0.15 → 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 (183) 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 +1700 -361
  5. package/dist/api.tokens.json +3 -3
  6. package/dist/api.tokens.yaml +3 -3
  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/chunks/{agent-BF_R_HJk.js → agent-XMhz_6OA.js} +27 -22
  48. package/dist/chunks/{agent-BF_R_HJk.js.map → agent-XMhz_6OA.js.map} +1 -1
  49. package/dist/chunks/{meter-Dju8ik6C.js → form-oekEhwja.js} +402 -188
  50. package/dist/chunks/form-oekEhwja.js.map +1 -0
  51. package/dist/components/agent.js +1 -1
  52. package/dist/components/checkbox-group/checkbox-group.d.ts +14 -0
  53. package/dist/components/checkbox-group/index.d.ts +1 -0
  54. package/dist/components/editor.js +1 -1
  55. package/dist/components/form/form.d.ts +12 -0
  56. package/dist/components/form/index.d.ts +1 -0
  57. package/dist/components/graph.js +1 -1
  58. package/dist/components/index.d.ts +2 -0
  59. package/dist/components/noodles/noodle-controller.d.ts +1 -1
  60. package/dist/components.js +89 -87
  61. package/dist/docs/blocks/action-toolbar.yaml +73 -0
  62. package/dist/docs/blocks/agent-artifact-card.yaml +67 -0
  63. package/dist/docs/blocks/agent-chat-response.yaml +65 -0
  64. package/dist/docs/blocks/agent-chat.yaml +33 -25
  65. package/dist/docs/blocks/agent-code-result.yaml +41 -0
  66. package/dist/docs/blocks/agent-context-panel.yaml +96 -0
  67. package/dist/docs/blocks/agent-feedback-controls.yaml +101 -0
  68. package/dist/docs/blocks/agent-follow-up-chips.yaml +37 -0
  69. package/dist/docs/blocks/agent-model-selector.yaml +83 -0
  70. package/dist/docs/blocks/agent-prompt-input.yaml +49 -0
  71. package/dist/docs/blocks/agent-streaming-message.yaml +46 -0
  72. package/dist/docs/blocks/agent-suggestion-card.yaml +68 -0
  73. package/dist/docs/blocks/agent-task-card.yaml +112 -0
  74. package/dist/docs/blocks/agent-thinking-state.yaml +56 -0
  75. package/dist/docs/blocks/agent-tool-use-card.yaml +142 -0
  76. package/dist/docs/blocks/announcement-card.yaml +14 -10
  77. package/dist/docs/blocks/auth-card.yaml +74 -0
  78. package/dist/docs/blocks/bpm-process.yaml +216 -4
  79. package/dist/docs/blocks/chart-activity.yaml +12 -10
  80. package/dist/docs/blocks/chart-card.yaml +14 -11
  81. package/dist/docs/blocks/chart-donut.yaml +27 -23
  82. package/dist/docs/blocks/chart-grouped.yaml +14 -11
  83. package/dist/docs/blocks/chart-horizontal.yaml +13 -10
  84. package/dist/docs/blocks/chart-interactive.yaml +20 -17
  85. package/dist/docs/blocks/chart-labeled.yaml +14 -11
  86. package/dist/docs/blocks/checkout-form.yaml +26 -16
  87. package/dist/docs/blocks/clinical-trial.yaml +180 -4
  88. package/dist/docs/blocks/commerce-pricing-table.yaml +142 -0
  89. package/dist/docs/blocks/comms-chat-thread.yaml +88 -0
  90. package/dist/docs/blocks/comms-notification-list.yaml +88 -0
  91. package/dist/docs/blocks/content-article-card.yaml +47 -0
  92. package/dist/docs/blocks/contributors.yaml +17 -11
  93. package/dist/docs/blocks/cyber-threat.yaml +158 -4
  94. package/dist/docs/blocks/dashboard-kpi-grid.yaml +72 -0
  95. package/dist/docs/blocks/dashboard-layout.yaml +24 -18
  96. package/dist/docs/blocks/data-activity-log.yaml +99 -0
  97. package/dist/docs/blocks/data-eng-dag.yaml +222 -6
  98. package/dist/docs/blocks/data-metric-card.yaml +50 -0
  99. package/dist/docs/blocks/data-table.yaml +106 -0
  100. package/dist/docs/blocks/data-timeline.yaml +103 -0
  101. package/dist/docs/blocks/date-picker.yaml +11 -10
  102. package/dist/docs/blocks/ddx-workflow.yaml +202 -6
  103. package/dist/docs/blocks/empty-state.yaml +8 -11
  104. package/dist/docs/blocks/env-variables.yaml +29 -20
  105. package/dist/docs/blocks/feature-upgrade.yaml +25 -18
  106. package/dist/docs/blocks/feedback-alert-banner.yaml +42 -0
  107. package/dist/docs/blocks/feedback-empty-state.yaml +18 -0
  108. package/dist/docs/blocks/feedback-progress-stepper.yaml +82 -0
  109. package/dist/docs/blocks/financial-risk.yaml +161 -4
  110. package/dist/docs/blocks/flow-editor.yaml +27 -18
  111. package/dist/docs/blocks/form-settings-section.yaml +129 -0
  112. package/dist/docs/blocks/game-battleship.yaml +184 -0
  113. package/dist/docs/blocks/game-chess.yaml +83 -0
  114. package/dist/docs/blocks/game-connect-four.yaml +80 -0
  115. package/dist/docs/blocks/game-tic-tac-toe.yaml +51 -0
  116. package/dist/docs/blocks/gen-ai-pipeline.yaml +232 -5
  117. package/dist/docs/blocks/issue-assign.yaml +25 -14
  118. package/dist/docs/blocks/keyboard-shortcuts.yaml +14 -9
  119. package/dist/docs/blocks/list-kanban-board.yaml +158 -0
  120. package/dist/docs/blocks/login-branded.yaml +62 -23
  121. package/dist/docs/blocks/login-email-only.yaml +14 -13
  122. package/dist/docs/blocks/login-form.yaml +17 -11
  123. package/dist/docs/blocks/login-simple.yaml +18 -12
  124. package/dist/docs/blocks/login-social.yaml +21 -14
  125. package/dist/docs/blocks/login-two-column.yaml +37 -17
  126. package/dist/docs/blocks/marketing-automation.yaml +209 -4
  127. package/dist/docs/blocks/media-image-gallery.yaml +39 -0
  128. package/dist/docs/blocks/member-list.yaml +23 -18
  129. package/dist/docs/blocks/ml-pipeline.yaml +163 -4
  130. package/dist/docs/blocks/nav-card.yaml +13 -11
  131. package/dist/docs/blocks/nav-sidebar.yaml +84 -0
  132. package/dist/docs/blocks/notification-list.yaml +18 -13
  133. package/dist/docs/blocks/onboard-stepper.yaml +111 -0
  134. package/dist/docs/blocks/oncology-pathway.yaml +227 -4
  135. package/dist/docs/blocks/overlay-confirmation-modal.yaml +60 -0
  136. package/dist/docs/blocks/overlay-dropdown-menu.yaml +72 -0
  137. package/dist/docs/blocks/pricing-card.yaml +20 -13
  138. package/dist/docs/blocks/processing-state.yaml +14 -11
  139. package/dist/docs/blocks/profile-card.yaml +16 -12
  140. package/dist/docs/blocks/saas-onboarding.yaml +222 -4
  141. package/dist/docs/blocks/settings-form.yaml +20 -11
  142. package/dist/docs/blocks/settings-panel.yaml +22 -22
  143. package/dist/docs/blocks/sidebar-nav.yaml +21 -15
  144. package/dist/docs/blocks/signup-form.yaml +17 -11
  145. package/dist/docs/blocks/stat-cards.yaml +12 -13
  146. package/dist/docs/blocks/status-card.yaml +20 -17
  147. package/dist/docs/blocks/suggested-labs.yaml +20 -13
  148. package/dist/docs/blocks/supply-chain.yaml +160 -4
  149. package/dist/docs/blocks/survey-card.yaml +21 -13
  150. package/dist/docs/blocks/tabbed-panel.yaml +21 -15
  151. package/dist/docs/blocks/team-empty.yaml +8 -9
  152. package/dist/docs/blocks/usage-billing.yaml +20 -16
  153. package/dist/docs/blocks/user-profile-card.yaml +52 -0
  154. package/dist/docs/blocks/user-team-list.yaml +116 -0
  155. package/dist/docs/components/agent-activity.yaml +27 -7
  156. package/dist/docs/components/agent-feed.yaml +2 -2
  157. package/dist/docs/components/agent-prompt.yaml +1 -1
  158. package/dist/docs/components/agent-seeds.yaml +1 -1
  159. package/dist/docs/components/breadcrumb.yaml +35 -8
  160. package/dist/docs/components/button.yaml +14 -2
  161. package/dist/docs/components/calendar-picker.yaml +3 -2
  162. package/dist/docs/components/chip.yaml +1 -1
  163. package/dist/docs/components/color-picker.yaml +33 -7
  164. package/dist/docs/components/color-slider.yaml +7 -7
  165. package/dist/docs/components/container.yaml +2 -1
  166. package/dist/docs/components/heading.yaml +4 -0
  167. package/dist/docs/components/index.yaml +11 -1
  168. package/dist/docs/components/input.yaml +10 -9
  169. package/dist/docs/components/meter.yaml +37 -14
  170. package/dist/docs/components/nav-item.yaml +7 -7
  171. package/dist/docs/components/stat.yaml +164 -0
  172. package/dist/docs/components/stepper.yaml +23 -23
  173. package/dist/docs/components/time-field.yaml +35 -2
  174. package/dist/element.js +1 -1
  175. package/dist/icons.js +137 -128
  176. package/dist/icons.js.map +1 -1
  177. package/dist/reactivity.js +1 -1
  178. package/dist/register.js +299 -297
  179. package/dist/register.js.map +1 -1
  180. package/dist/store.js +1 -1
  181. package/dist/traits.js +2 -2
  182. package/package.json +1 -1
  183. package/dist/chunks/meter-Dju8ik6C.js.map +0 -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>