@muibook/components 17.0.0 → 18.0.1

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 (4) hide show
  1. package/dist/esm/components/mui-slide-frame/index.js +83 -102
  2. package/dist/esm/css/mui-brand.css +1 -1
  3. package/dist/esm/custom-elements.json +745 -791
  4. package/package.json +1 -1
package/dist/esm/custom-elements.json CHANGED
@@ -2,6 +2,36 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/components/mui-accordion/doc.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "variable",
11
+ "name": "muiDocs",
12
+ "type": {
13
+ "text": "MuiDocs"
14
+ },
15
+ "default": "{ Accordion: { title: \"Accordion\", description: \"A collapsible container used to reveal sections of related content. Useful for progressive disclosure, especially when space is limited or the content is secondary. On smaller viewports, accordions can replace tables to group and reveal related rows of data.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1TykTEhPNTJlZdyzqAayEH/b5293336f033020bbcef964db811cdd3/Accordion_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8558&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-accordion--docs\"], website: [\"https://muibook.com/#/accordion\"], guides: [\"https://guides.muibook.com/accordion\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-accordion/index.ts\"], usage: { list: [ \"Use to progressively reveal grouped or secondary content.\", \"Can replace tables on small viewports when content is grouped by row.\", \"Ideal for mobile or narrow layouts where space is constrained.\", \"Stack, slat, or grid layouts can be used inside an accordion for custom structures.\", ], }, accessibility: { designerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], engineerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], }, anatomy: { list: [ \"Heading: Provides the accordion with a heading\", \"Icon: A chevron icon that indicates the state of the Accordion\", \"Detail: Define the detail content for the expanded section within the Accordion.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/4JgAhsxwz3YOt28fLTVgDB/b404f3407eb06e2f26a196da04f7d217/Accordion_-_Anatomy.png\", }, variants: { items: [ { key: \"accordion-block\", title: \"Accordion Block\", description: \"The block accordion is typically used within a page layout full-width to the parent container.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1L2XfteVwNBQcFlddTYmfi/c791eb538285e2cfb919342e84228811/accordion-block_-_Variants.png\", }, { key: \"accordion-inline\", title: \"Accordion Inline\", description: \"The inline accordion is typically used within a block layout as a secondary UI element to a block element.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/RMnvBLRsW3Vvq9V3yaTcW/86afba39ed0b7ffc00d0033b1b1bfd07/accordion_inline_-_Variants.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"menu-groups\", name: \"Menu Groups\", description: \"Accordions can be used in menus to collapse and expand groups of related items, helping keep navigation organized and reducing visual clutter.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zFHrSdH3CYbZXOv8WFKkL/90cad70c32b40fca61a875263d4cc366/accordion_menu_-_composition.png\", }, { key: \"code-snippets\", name: \"Code snippets\", description: \"An accordion in a card footer allows code snippets or supporting details to be revealed on demand, keeping the card compact while still providing access to additional information.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7FKVgkCxv3UenOQTC9Tr4R/25c357aceea16b169c48775d7363df1d/accordion_card_footer_-_composition.png\", }, { key: \"account-activity\", name: \"Account Activity (Accordion + Card)\", description: \"Accordions can split account activity into segments, such as by year, with the ability to expand each section for detailed transactions. This makes large sets of data easier to scan and navigate.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4PEUUHgxpuDM6nDgdGOotY/bf078e07bc3fbabf07f03b99800e5306/accordion_card_body_-_composition.png\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, related: { items: [ { name: \"Card\", link: \"https://guides.muibook.com/card\" }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\" }, ], }, }, }"
16
+ }
17
+ ],
18
+ "exports": [
19
+ {
20
+ "kind": "js",
21
+ "name": "muiDocs",
22
+ "declaration": {
23
+ "name": "muiDocs",
24
+ "module": "src/components/mui-accordion/doc.ts"
25
+ }
26
+ }
27
+ ]
28
+ },
29
+ {
30
+ "kind": "javascript-module",
31
+ "path": "src/components/mui-accordion/index.ts",
32
+ "declarations": [],
33
+ "exports": []
34
+ },
5
35
  {
6
36
  "kind": "javascript-module",
7
37
  "path": "src/components/mui-addon/doc.ts",
@@ -73,37 +103,7 @@
73
103
  },
74
104
  {
75
105
  "kind": "javascript-module",
76
- "path": "src/components/mui-accordion/doc.ts",
77
- "declarations": [
78
- {
79
- "kind": "variable",
80
- "name": "muiDocs",
81
- "type": {
82
- "text": "MuiDocs"
83
- },
84
- "default": "{ Accordion: { title: \"Accordion\", description: \"A collapsible container used to reveal sections of related content. Useful for progressive disclosure, especially when space is limited or the content is secondary. On smaller viewports, accordions can replace tables to group and reveal related rows of data.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1TykTEhPNTJlZdyzqAayEH/b5293336f033020bbcef964db811cdd3/Accordion_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8558&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-accordion--docs\"], website: [\"https://muibook.com/#/accordion\"], guides: [\"https://guides.muibook.com/accordion\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-accordion/index.ts\"], usage: { list: [ \"Use to progressively reveal grouped or secondary content.\", \"Can replace tables on small viewports when content is grouped by row.\", \"Ideal for mobile or narrow layouts where space is constrained.\", \"Stack, slat, or grid layouts can be used inside an accordion for custom structures.\", ], }, accessibility: { designerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], engineerList: [ \"Accordion summary uses role='button' and tabindex='0' for keyboard access.\", \"Supports Enter and Space keys for toggling.\", \"aria-expanded reflects open/closed state.\", \"aria-controls links summary to detail with a unique ID.\", \"mui-heading applies semantic heading with role='heading' and aria-level.\", \"Chevron icon rotates visually and the state is conveyed via aria-expanded.\", ], }, anatomy: { list: [ \"Heading: Provides the accordion with a heading\", \"Icon: A chevron icon that indicates the state of the Accordion\", \"Detail: Define the detail content for the expanded section within the Accordion.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/4JgAhsxwz3YOt28fLTVgDB/b404f3407eb06e2f26a196da04f7d217/Accordion_-_Anatomy.png\", }, variants: { items: [ { key: \"accordion-block\", title: \"Accordion Block\", description: \"The block accordion is typically used within a page layout full-width to the parent container.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1L2XfteVwNBQcFlddTYmfi/c791eb538285e2cfb919342e84228811/accordion-block_-_Variants.png\", }, { key: \"accordion-inline\", title: \"Accordion Inline\", description: \"The inline accordion is typically used within a block layout as a secondary UI element to a block element.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/RMnvBLRsW3Vvq9V3yaTcW/86afba39ed0b7ffc00d0033b1b1bfd07/accordion_inline_-_Variants.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"menu-groups\", name: \"Menu Groups\", description: \"Accordions can be used in menus to collapse and expand groups of related items, helping keep navigation organized and reducing visual clutter.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zFHrSdH3CYbZXOv8WFKkL/90cad70c32b40fca61a875263d4cc366/accordion_menu_-_composition.png\", }, { key: \"code-snippets\", name: \"Code snippets\", description: \"An accordion in a card footer allows code snippets or supporting details to be revealed on demand, keeping the card compact while still providing access to additional information.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/7FKVgkCxv3UenOQTC9Tr4R/25c357aceea16b169c48775d7363df1d/accordion_card_footer_-_composition.png\", }, { key: \"account-activity\", name: \"Account Activity (Accordion + Card)\", description: \"Accordions can split account activity into segments, such as by year, with the ability to expand each section for detailed transactions. This makes large sets of data easier to scan and navigate.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4PEUUHgxpuDM6nDgdGOotY/bf078e07bc3fbabf07f03b99800e5306/accordion_card_body_-_composition.png\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, related: { items: [ { name: \"Card\", link: \"https://guides.muibook.com/card\" }, { name: \"Slat\", link: \"https://guides.muibook.com/slat\" }, ], }, }, }"
85
- }
86
- ],
87
- "exports": [
88
- {
89
- "kind": "js",
90
- "name": "muiDocs",
91
- "declaration": {
92
- "name": "muiDocs",
93
- "module": "src/components/mui-accordion/doc.ts"
94
- }
95
- }
96
- ]
97
- },
98
- {
99
- "kind": "javascript-module",
100
- "path": "src/components/mui-accordion/index.ts",
101
- "declarations": [],
102
- "exports": []
103
- },
104
- {
105
- "kind": "javascript-module",
106
- "path": "src/components/mui-alert/doc.ts",
106
+ "path": "src/components/mui-badge/doc.ts",
107
107
  "declarations": [
108
108
  {
109
109
  "kind": "variable",
@@ -111,7 +111,7 @@
111
111
  "type": {
112
112
  "text": "MuiDocs"
113
113
  },
114
- "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
114
+ "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications – E.g. '4' unread messages\", \"Indicate the status of a user – E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
115
115
  }
116
116
  ],
117
117
  "exports": [
@@ -120,107 +120,29 @@
120
120
  "name": "muiDocs",
121
121
  "declaration": {
122
122
  "name": "muiDocs",
123
- "module": "src/components/mui-alert/doc.ts"
123
+ "module": "src/components/mui-badge/doc.ts"
124
124
  }
125
125
  }
126
126
  ]
127
127
  },
128
128
  {
129
129
  "kind": "javascript-module",
130
- "path": "src/components/mui-alert/index.ts",
130
+ "path": "src/components/mui-badge/index.ts",
131
131
  "declarations": [
132
132
  {
133
133
  "kind": "class",
134
134
  "description": "",
135
- "name": "MuiAlert",
135
+ "name": "MuiBadge",
136
136
  "members": [
137
- {
138
- "kind": "field",
139
- "name": "actionSlotListener",
140
- "type": {
141
- "text": "(() => void) | null"
142
- },
143
- "privacy": "private",
144
- "default": "null"
145
- },
146
- {
147
- "kind": "field",
148
- "name": "contentSlotListener",
149
- "type": {
150
- "text": "(() => void) | null"
151
- },
152
- "privacy": "private",
153
- "default": "null"
154
- },
155
137
  {
156
138
  "kind": "method",
157
139
  "name": "render"
158
- },
159
- {
160
- "kind": "method",
161
- "name": "getAlertSize",
162
- "privacy": "private",
163
- "return": {
164
- "type": {
165
- "text": "AlertSize"
166
- }
167
- }
168
- },
169
- {
170
- "kind": "method",
171
- "name": "getInlineContentSize",
172
- "privacy": "private",
173
- "return": {
174
- "type": {
175
- "text": "string"
176
- }
177
- },
178
- "parameters": [
179
- {
180
- "name": "size",
181
- "type": {
182
- "text": "AlertSize"
183
- }
184
- }
185
- ]
186
- },
187
- {
188
- "kind": "method",
189
- "name": "getActionControlSize",
190
- "privacy": "private",
191
- "return": {
192
- "type": {
193
- "text": "string"
194
- }
195
- },
196
- "parameters": [
197
- {
198
- "name": "size",
199
- "type": {
200
- "text": "AlertSize"
201
- }
202
- }
203
- ]
204
- },
205
- {
206
- "kind": "method",
207
- "name": "setupActionSlot"
208
- },
209
- {
210
- "kind": "method",
211
- "name": "setupContentSlot"
212
140
  }
213
141
  ],
214
142
  "attributes": [
215
143
  {
216
144
  "name": "variant"
217
145
  },
218
- {
219
- "name": "label"
220
- },
221
- {
222
- "name": "hide-label"
223
- },
224
146
  {
225
147
  "name": "size"
226
148
  }
@@ -228,17 +150,17 @@
228
150
  "superclass": {
229
151
  "name": "HTMLElement"
230
152
  },
231
- "tagName": "mui-alert",
153
+ "tagName": "mui-badge",
232
154
  "customElement": true
233
155
  }
234
156
  ],
235
157
  "exports": [
236
158
  {
237
159
  "kind": "custom-element-definition",
238
- "name": "mui-alert",
160
+ "name": "mui-badge",
239
161
  "declaration": {
240
- "name": "MuiAlert",
241
- "module": "src/components/mui-alert/index.ts"
162
+ "name": "MuiBadge",
163
+ "module": "src/components/mui-badge/index.ts"
242
164
  }
243
165
  }
244
166
  ]
@@ -346,7 +268,7 @@
346
268
  },
347
269
  {
348
270
  "kind": "javascript-module",
349
- "path": "src/components/mui-badge/doc.ts",
271
+ "path": "src/components/mui-alert/doc.ts",
350
272
  "declarations": [
351
273
  {
352
274
  "kind": "variable",
@@ -354,7 +276,7 @@
354
276
  "type": {
355
277
  "text": "MuiDocs"
356
278
  },
357
- "default": "{ Badge: { title: \"Badge\", description: \"Badges are non-interactive and indicate counts or statuses.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/3uhL6lnJTEY4LtVyMA3og5/7844fa7e691b9f97e3c335e1a978e881/Badge_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1108&t=FSv3FEahG8VQW1FZ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-badge--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-badge/index.ts\"], website: [\"https://muibook.com/#/badge\"], guides: [\"https://guides.muibook.com/badge\"], usage: { list: [ \"Show the number of unread notifications – E.g. '4' unread messages\", \"Indicate the status of a user – E.g. Online, Busy, or Away\", \"Use size variants (xx-small, x-small, small, medium, large) to match surrounding component scale.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"default\", description: \"Used for data that is visually in the foreground.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3Xgz2qoLs8NACel4fRr9iC/52699b5763f1efd4853a9ffb991b3ff3/badge-default.png\", }, { key: \"positive\", title: \"positive\", description: \"For positive or completed statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/65RMIuUEUIzusbSAwqLQcI/63edb290041c708fc69d0d27fc49e25d/badge-positive.png\", }, { key: \"warning\", title: \"warning\", description: \"For urgent or important statuses.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5AFfOShVyTEKO1wgIe6rYv/e809c76ddabdfd9789adc31a26becf83/badge-warning.png\", }, { key: \"error\", title: \"error\", description: \"Represents an error, issue or critical state.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/E0jtn7WSTwYligMqSNl0k/c3c041e025c3725682ec12eb3ab98400/badge-error.png\", }, { key: \"overlay\", title: \"overlay\", description: \"For labels placed on media/image surfaces with stronger contrast.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, { key: \"outcomes-roadmap-dashboard\", name: \"Outcomes Roadmap Dashboard\", description: \"Example of the responsive component in the Outcomes Roadmap Dashboard, demonstrating layout, title, and padding adjustments across breakpoints.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3FsXandRr1Z9BAKv33twxT/b0d0e4a8b6237bf7d38660111bceb8ab/responsive-composition.gif\", }, ], }, related: { items: [ { name: \"Button\", link: \"https://guides.muibook.com/button\", }, { name: \"Link\", link: \"https://guides.muibook.com/link\", }, { name: \"Tab Bar\", link: \"https://guides.muibook.com/tab-bar\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
279
+ "default": "{ Alert: { title: \"Alert\", description: \"Alerts surface meaningful system messages related to the users' current task or action.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/7GnGBCbpMF3wyjCDC06hX7/24739b86a907d15400fe8e9e240a9619/Alert_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1\", ], guides: [\"https://guides.muibook.com/alert\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-alert/index.ts\"], storybook: [\"https://stories.muibook.com/?path=/docs/feedback-alert--docs\"], website: [\"https://muibook.com/#/alert\"], usage: { list: [ \"Success: Confirm completed actions such as form submissions, data saves, or task completion.\", \"Info: For sharing new features, updates, contextual tips, or non-urgent system statuses.\", \"Warning: Alert users to unsaved changes, deprecated features, or risky actions.\", \"Error: Alert users of form validation issues, system failures, or tasks that need attention.\", ], }, accessibility: { designerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], engineerList: [ \"ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.\", \"The role is set to ALERT for immediate screen reader feedback.\", ], }, anatomy: { list: [ \"Preset icon: Communicates the type of alert visually. E.g. info, success, warning, error.\", \"Preset title: Provides a clear, predefined heading that reflects the alert’s purpose.\", \"Customisable text: Allows for specific details or guidance relevant to the situation.\", ], image: \"https://images.ctfassets.net/i5uwscj4pkk2/17j3DxAFlne6rvMi6QUXqZ/aedab2c349c8f8b0a8414b41132cda51/Alert_-_Anatomy.png\", }, variants: { items: [ { key: \"success\", title: \"Success\", description: \"Indicates that an operation or action has been completed successfully. Use this variant for scenarios such as form submissions processed without errors, successful data updates or saves, and confirmations of completed tasks or actions. For accessibility, this variant uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2EbJsP3GZ98WPOiF4PbGh2/bc3e020b37b73f949be745e4e26b6e5a/alert-success.png\", }, { key: \"info\", title: \"Info\", description: \"Provides general information or updates that are helpful but not critical. This variant is used for announcing new features or updates, offering contextual information or tips, and informing users about non-urgent system statuses. For accessibility, it uses an aria-live value of polite.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1SDh1JVNouysPHylu9lTUj/6793dd8aa854d08045c2159b450b762c/alert-info.png\", }, { key: \"warning\", title: \"Warning\", description: \"Alerts users to potential issues or situations that require caution. Common use cases include notifying about unsaved changes, indicating deprecated features or upcoming changes, and highlighting actions that may have unintended consequences. For accessibility, this variant uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2zympGRb3wlU5P36FsKWsL/dd9bde33646345e65d5bff505d512e22/alert-warning.png\", }, { key: \"error\", title: \"Error\", description: \"Indicates that an error has occurred, requiring user attention or action. This variant is typically used for form validation errors, system failures or exceptions, and failed operations or transactions. For accessibility, it uses an aria-live value of assertive.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/zOH2Xinum4ZjIv3qp6LJM/180a2306dd624b6bc2fa55c0ad81ea0e/alert-error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"ai-playground-error-1\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, { key: \"ai-playground-error-2\", name: \"AI Playground (Error)\", description: \"Demonstrates the Muiplay AI Playground showing a floating error positioned close to the field where a prompt is required to generate a task.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/40RfRPVAN9dvWO7UFuIiUC/52de3cffd69a5bcc2e457f8de03bb9cf/Play-Alert-Composition.png\", }, ], }, related: { items: [ { name: \"Message\", link: \"https://guides.muibook.com/message\" }, { name: \"Link\", link: \"https://guides.muibook.com/link\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [ { description: \"\", image: \"\" }, { description: \"\", image: \"\" }, ], dontContent: [{ description: \"\" }, { description: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
358
280
  }
359
281
  ],
360
282
  "exports": [
@@ -363,29 +285,107 @@
363
285
  "name": "muiDocs",
364
286
  "declaration": {
365
287
  "name": "muiDocs",
366
- "module": "src/components/mui-badge/doc.ts"
288
+ "module": "src/components/mui-alert/doc.ts"
367
289
  }
368
290
  }
369
291
  ]
370
292
  },
371
293
  {
372
294
  "kind": "javascript-module",
373
- "path": "src/components/mui-badge/index.ts",
295
+ "path": "src/components/mui-alert/index.ts",
374
296
  "declarations": [
375
297
  {
376
298
  "kind": "class",
377
299
  "description": "",
378
- "name": "MuiBadge",
300
+ "name": "MuiAlert",
379
301
  "members": [
302
+ {
303
+ "kind": "field",
304
+ "name": "actionSlotListener",
305
+ "type": {
306
+ "text": "(() => void) | null"
307
+ },
308
+ "privacy": "private",
309
+ "default": "null"
310
+ },
311
+ {
312
+ "kind": "field",
313
+ "name": "contentSlotListener",
314
+ "type": {
315
+ "text": "(() => void) | null"
316
+ },
317
+ "privacy": "private",
318
+ "default": "null"
319
+ },
380
320
  {
381
321
  "kind": "method",
382
322
  "name": "render"
323
+ },
324
+ {
325
+ "kind": "method",
326
+ "name": "getAlertSize",
327
+ "privacy": "private",
328
+ "return": {
329
+ "type": {
330
+ "text": "AlertSize"
331
+ }
332
+ }
333
+ },
334
+ {
335
+ "kind": "method",
336
+ "name": "getInlineContentSize",
337
+ "privacy": "private",
338
+ "return": {
339
+ "type": {
340
+ "text": "string"
341
+ }
342
+ },
343
+ "parameters": [
344
+ {
345
+ "name": "size",
346
+ "type": {
347
+ "text": "AlertSize"
348
+ }
349
+ }
350
+ ]
351
+ },
352
+ {
353
+ "kind": "method",
354
+ "name": "getActionControlSize",
355
+ "privacy": "private",
356
+ "return": {
357
+ "type": {
358
+ "text": "string"
359
+ }
360
+ },
361
+ "parameters": [
362
+ {
363
+ "name": "size",
364
+ "type": {
365
+ "text": "AlertSize"
366
+ }
367
+ }
368
+ ]
369
+ },
370
+ {
371
+ "kind": "method",
372
+ "name": "setupActionSlot"
373
+ },
374
+ {
375
+ "kind": "method",
376
+ "name": "setupContentSlot"
383
377
  }
384
378
  ],
385
379
  "attributes": [
386
380
  {
387
381
  "name": "variant"
388
382
  },
383
+ {
384
+ "name": "label"
385
+ },
386
+ {
387
+ "name": "hide-label"
388
+ },
389
389
  {
390
390
  "name": "size"
391
391
  }
@@ -393,17 +393,17 @@
393
393
  "superclass": {
394
394
  "name": "HTMLElement"
395
395
  },
396
- "tagName": "mui-badge",
396
+ "tagName": "mui-alert",
397
397
  "customElement": true
398
398
  }
399
399
  ],
400
400
  "exports": [
401
401
  {
402
402
  "kind": "custom-element-definition",
403
- "name": "mui-badge",
403
+ "name": "mui-alert",
404
404
  "declaration": {
405
- "name": "MuiBadge",
406
- "module": "src/components/mui-badge/index.ts"
405
+ "name": "MuiAlert",
406
+ "module": "src/components/mui-alert/index.ts"
407
407
  }
408
408
  }
409
409
  ]
@@ -6365,7 +6365,7 @@
6365
6365
  },
6366
6366
  {
6367
6367
  "kind": "javascript-module",
6368
- "path": "src/components/mui-prompt/doc.ts",
6368
+ "path": "src/components/mui-progress/doc.ts",
6369
6369
  "declarations": [
6370
6370
  {
6371
6371
  "kind": "variable",
@@ -6373,7 +6373,71 @@
6373
6373
  "type": {
6374
6374
  "text": "MuiDocs"
6375
6375
  },
6376
- "default": "{ Prompt: { title: \"Prompt\", description: \"Prompt provides a reusable prompt surface with floating actions and Enter-to-submit behavior.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt/index.ts\"], website: [\"https://muibook.com/#/prompt\"], guides: [\"https://guides.muibook.com/input\"], usage: { list: [ \"Use for AI/chat prompt entry surfaces with action controls.\", \"In Muibook stories, use the Interactive Prompt story at the top of the page as the primary end-to-end reference (paste/upload/context/submit).\", \"This component is extracted from composition patterns to standardize prompt behavior across experiences.\", \"Keep prompt as a controlled input in app state: write value via attribute/property and sync from input events.\", \"Use Enter submit for fast send flows; keep Shift+Enter for multiline authoring.\", \"Press Enter to submit and Shift+Enter to add a newline.\", \"Set enter-submit='false' to disable Enter submit behavior.\", \"Use slot='actions' for utility actions (attach, source, tools).\", \"Prompt includes a default submit control in actions-right; override by slotting your own actions-right control when needed.\", \"All utility actions are intended to be slotted so product teams can wire behavior from app state.\", \"A default fan trigger is included out-of-the-box for action fan behavior.\", \"Use slot='actions-right' when you need a custom submit/toggle action instead of the default.\", \"Prompt no longer renders a built-in action divider; slot your own <mui-rule slot='actions'> when needed (for example with inline margin style).\", \"Set loading to show built-in async feedback spinner beside actions-right while requests are in flight.\", \"Use loading-label to provide accessible status text for the spinner.\", \"Fan behavior derives from slotted actions by default; use fan-open when you want the fan open by default.\", \"fan-open normalizes fan behavior in composed trees by enabling fan mode when needed.\", \"Use context-mode='icon|chip' with slotted <mui-prompt-toggle> for app-driven context state.\", \"Fan spread, speed, and amplitude are fixed to system defaults; tune through component tokens/CSS where needed.\", \"Built-in preview dialog handling is enabled for prompt-preview-open events.\", \"Set preview-threshold-chars to control when pasted text is converted into preview attachments.\", \"Set preview-overflow-to-preview='false' to always paste text directly into the textarea.\", \"When internal preview dialog handling is enabled, slotted prompt previews are auto-clickable by default.\", \"Set preview-auto-clickable='false' to keep previews non-clickable unless explicitly configured.\", \"Set preview-loading to force slotted previews into loading state while async metadata resolves.\", \"Set preview-loading='auto' to mirror prompt loading state onto slotted previews.\", \"Use preview-loading-label to provide accessible loading text for preview spinners.\", \"Use error-message for direct prompt-level error feedback rendered below the input.\", \"Set debug to render built-in submit debug telemetry (status + JSON payload) below the prompt.\", \"Use slot='error' to render fully custom error content when product needs bespoke treatment.\", \"Use setError(message) and clearError() for app-driven validation and transport error handling.\", \"Use prompt-paste to ingest user clipboard payloads and convert them into prompt-preview items.\", \"Use prompt-preview-open to react to preview activation and update app-level analytics/state.\", \"For native media previews, use direct .mp4/.mp3 values so the built-in dialog opens with native media controls.\", \"Prefer system/semantic tokens for color-top-* values when theming prompt color surfaces.\", \"For React wrappers, map CustomEvent handlers to props (onSubmit, onPromptPaste, onPromptPreviewOpen, onEscape).\", \"Mark the trigger action with fan-trigger; if omitted, the first action is used.\", \"Prefer this component instead of ad hoc prompt wrappers when the same interaction model is needed.\", ], }, accessibility: { designerList: [ \"Provide clear prompt intent through nearby heading/body context; placeholder alone should not carry all instruction.\", \"Ensure action icons are understandable and consistently positioned (utility actions left, submit/state action right).\", \"Keep status text low-emphasis visually, but persistent enough to communicate send state changes.\", ], engineerList: [ \"Support keyboard parity: Enter submits, Shift+Enter adds newline.\", \"If showing send status, use an aria-live region so updates are announced to assistive tech.\", \"Do not trap focus; users must be able to tab into and out of the prompt and actions naturally.\", \"Ensure a clear placeholder or label context for prompt intent.\", \"Provide aria-label values for icon-only action buttons slotted into actions.\", \"When authoring themes, rely on public --prompt-* tokens and attributes rather than internal prompt CSS variables.\", ], }, anatomy: { image: \"\", list: [\"Prompt surface\", \"Input area\", \"Action slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt as the shared prompt-surface primitive; keep product-specific flows in compositions.\", doContent: [ { description: \"Reuse this component when Enter submit + floating actions are expected.\", image: \"\" }, ], dontContent: [ { description: \"Do not rebuild the prompt shell in each composition with custom wrappers.\", image: \"\" }, ], }, ], behaviour: { list: [ \"Enter emits a submit event with current value.\", \"Shift+Enter inserts a newline.\", \"Pasting emits prompt-paste with detected payload metadata for consumers to store and render previews.\", \"Short text paste remains in the textarea; long text and binary paste can be converted to preview items based on threshold settings.\", \"Clicking a preview emits prompt-preview-open with normalized preview payload (badge, value, image metadata).\", \"Escape emits escape and closes fan actions when open.\", \"Error feedback supports dismiss and optional expand/collapse for long copy.\", \"Clicking content inside a slotted <mui-prompt-toggle> emits prompt-context-change and switches to context chip mode.\", \"Dismissing content marked with [context-chip] emits prompt-context-dismiss and returns to icon mode.\", \"Actions remain anchored at the prompt edge while text grows.\", \"Action behavior should be equivalent whether triggered by keyboard submit or click.\", \"When loading is set, prompt shows async spinner feedback near submit and blocks additional submits.\", ], }, writing: { list: [\"Use clear placeholder prompts that describe expected user input.\"], }, }, }"
6376
+ "default": "{ Progress: { title: \"Progress\", description: \"A Progress Bar visually represents completion status by filling a bar based on a percentage value. It gives users a clear indication of progress for a given task or process.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2NPcL7tA0zGUWFLShr66fS/23d0050dce8c8379afc6deb8e351d049/Progress_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4161&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-progress--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-progress/index.ts\"], website: [\"https://muibook.com/#/progress\"], guides: [\"https://guides.muibook.com/progress\"], usage: { list: [ \"Show task progress – Indicate how much of a task or process has been completed.\", \"Display loading states – Represent the progress of a background operation, such as file uploads.\", \"Track step completion – Show progress in multi-step workflows or onboarding processes.\", \"Tune visual density and motion with component tokens such as --progress-radius, --progress-syncing-width, and --progress-pending-stripe-size.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/1iPll53Pmtgjh50qYwhsgY/908da9c51dd605895bd6306290fc6bd9/Progress_-_Anatomy.png\", list: [ \"Fill (Indicator) – The colored portion inside the track that represents the progress percentage.\", \"Track – The background of the progress bar, providing the visual boundary for progress.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
6377
+ }
6378
+ ],
6379
+ "exports": [
6380
+ {
6381
+ "kind": "js",
6382
+ "name": "muiDocs",
6383
+ "declaration": {
6384
+ "name": "muiDocs",
6385
+ "module": "src/components/mui-progress/doc.ts"
6386
+ }
6387
+ }
6388
+ ]
6389
+ },
6390
+ {
6391
+ "kind": "javascript-module",
6392
+ "path": "src/components/mui-progress/index.ts",
6393
+ "declarations": [
6394
+ {
6395
+ "kind": "class",
6396
+ "description": "",
6397
+ "name": "MuiProgress",
6398
+ "members": [
6399
+ {
6400
+ "kind": "method",
6401
+ "name": "render"
6402
+ }
6403
+ ],
6404
+ "attributes": [
6405
+ {
6406
+ "name": "progress"
6407
+ },
6408
+ {
6409
+ "name": "state"
6410
+ }
6411
+ ],
6412
+ "superclass": {
6413
+ "name": "HTMLElement"
6414
+ },
6415
+ "tagName": "mui-progress",
6416
+ "customElement": true
6417
+ }
6418
+ ],
6419
+ "exports": [
6420
+ {
6421
+ "kind": "custom-element-definition",
6422
+ "name": "mui-progress",
6423
+ "declaration": {
6424
+ "name": "MuiProgress",
6425
+ "module": "src/components/mui-progress/index.ts"
6426
+ }
6427
+ }
6428
+ ]
6429
+ },
6430
+ {
6431
+ "kind": "javascript-module",
6432
+ "path": "src/components/mui-prompt/doc.ts",
6433
+ "declarations": [
6434
+ {
6435
+ "kind": "variable",
6436
+ "name": "muiDocs",
6437
+ "type": {
6438
+ "text": "MuiDocs"
6439
+ },
6440
+ "default": "{ Prompt: { title: \"Prompt\", description: \"Prompt provides a reusable prompt surface with floating actions and Enter-to-submit behavior.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-prompt/index.ts\"], website: [\"https://muibook.com/#/prompt\"], guides: [\"https://guides.muibook.com/input\"], usage: { list: [ \"Use for AI/chat prompt entry surfaces with action controls.\", \"In Muibook stories, use the Interactive Prompt story at the top of the page as the primary end-to-end reference (paste/upload/context/submit).\", \"This component is extracted from composition patterns to standardize prompt behavior across experiences.\", \"Keep prompt as a controlled input in app state: write value via attribute/property and sync from input events.\", \"Use Enter submit for fast send flows; keep Shift+Enter for multiline authoring.\", \"Press Enter to submit and Shift+Enter to add a newline.\", \"Set enter-submit='false' to disable Enter submit behavior.\", \"Use slot='actions' for utility actions (attach, source, tools).\", \"Prompt includes a default submit control in actions-right; override by slotting your own actions-right control when needed.\", \"All utility actions are intended to be slotted so product teams can wire behavior from app state.\", \"A default fan trigger is included out-of-the-box for action fan behavior.\", \"Use slot='actions-right' when you need a custom submit/toggle action instead of the default.\", \"Prompt no longer renders a built-in action divider; slot your own <mui-rule slot='actions'> when needed (for example with inline margin style).\", \"Set loading to show built-in async feedback spinner beside actions-right while requests are in flight.\", \"Use loading-label to provide accessible status text for the spinner.\", \"Fan behavior derives from slotted actions by default; use fan-open when you want the fan open by default.\", \"fan-open normalizes fan behavior in composed trees by enabling fan mode when needed.\", \"Use context-mode='icon|chip' with slotted <mui-prompt-toggle> for app-driven context state.\", \"Fan spread, speed, and amplitude are fixed to system defaults; tune through component tokens/CSS where needed.\", \"Built-in preview dialog handling is enabled for prompt-preview-open events.\", \"Set preview-threshold-chars to control when pasted text is converted into preview attachments.\", \"Set preview-overflow-to-preview='false' to always paste text directly into the textarea.\", \"When internal preview dialog handling is enabled, slotted prompt previews are auto-clickable by default.\", \"Set preview-auto-clickable='false' to keep previews non-clickable unless explicitly configured.\", \"Set preview-loading to force slotted previews into loading state while async metadata resolves.\", \"Set preview-loading='auto' to mirror prompt loading state onto slotted previews.\", \"Use preview-loading-label to provide accessible loading text for preview spinners.\", \"Use error-message for direct prompt-level error feedback rendered below the input.\", \"Set debug to render built-in submit debug telemetry (status + JSON payload) below the prompt.\", \"Use slot='error' to render fully custom error content when product needs bespoke treatment.\", \"Use setError(message) and clearError() for app-driven validation and transport error handling.\", \"Use prompt-paste to ingest user clipboard payloads and convert them into prompt-preview items.\", \"Use prompt-preview-open to react to preview activation and update app-level analytics/state.\", \"For native media previews, use direct .mp4/.mp3 values so the built-in dialog opens with native media controls.\", \"Prefer system/semantic tokens for color-top-* values when theming prompt color surfaces.\", \"For React wrappers, map CustomEvent handlers to props (onSubmit, onPromptPaste, onPromptPreviewOpen, onEscape).\", \"Mark the trigger action with fan-trigger; if omitted, the first action is used.\", \"Prefer this component instead of ad hoc prompt wrappers when the same interaction model is needed.\", ], }, accessibility: { designerList: [ \"Provide clear prompt intent through nearby heading/body context; placeholder alone should not carry all instruction.\", \"Ensure action icons are understandable and consistently positioned (utility actions left, submit/state action right).\", \"Keep status text low-emphasis visually, but persistent enough to communicate send state changes.\", ], engineerList: [ \"Support keyboard parity: Enter submits, Shift+Enter adds newline.\", \"If showing send status, use an aria-live region so updates are announced to assistive tech.\", \"Do not trap focus; users must be able to tab into and out of the prompt and actions naturally.\", \"Ensure a clear placeholder or label context for prompt intent.\", \"Provide aria-label values for icon-only action buttons slotted into actions.\", \"When authoring themes, rely on public --prompt-* tokens and attributes rather than internal prompt CSS variables.\", ], }, anatomy: { image: \"\", list: [\"Prompt surface\", \"Input area\", \"Action slot\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [ { name: \"Input\", link: \"https://guides.muibook.com/input\" }, { name: \"Button\", link: \"https://guides.muibook.com/button\" }, ], }, rules: [ { heading: \"Pattern Rule\", description: \"Use Prompt as the shared prompt-surface primitive; keep product-specific flows in compositions.\", doContent: [ { description: \"Reuse this component when Enter submit + floating actions are expected.\", image: \"\" }, ], dontContent: [ { description: \"Do not rebuild the prompt shell in each composition with custom wrappers.\", image: \"\" }, ], }, ], behaviour: { list: [ \"Enter emits a submit event with current value.\", \"Shift+Enter inserts a newline.\", \"Pasting emits prompt-paste with detected payload metadata for consumers to store and render previews.\", \"Short text paste remains in the textarea; long text and binary paste can be converted to preview items based on threshold settings.\", \"Clicking a preview emits prompt-preview-open with normalized preview payload (badge, value, image metadata).\", \"Escape emits escape and closes fan actions when open.\", \"Error feedback supports dismiss and optional expand/collapse for long copy.\", \"Clicking content inside a slotted <mui-prompt-toggle> emits prompt-context-change and switches to context chip mode.\", \"Dismissing content marked with [context-chip] emits prompt-context-dismiss and returns to icon mode.\", \"Actions remain anchored at the prompt edge while text grows.\", \"Action behavior should be equivalent whether triggered by keyboard submit or click.\", \"When loading is set, prompt shows async spinner feedback near submit and blocks additional submits.\", ], }, writing: { list: [\"Use clear placeholder prompts that describe expected user input.\"], }, }, }"
6377
6441
  }
6378
6442
  ],
6379
6443
  "exports": [
@@ -7065,70 +7129,6 @@
7065
7129
  }
7066
7130
  ]
7067
7131
  },
7068
- {
7069
- "kind": "javascript-module",
7070
- "path": "src/components/mui-progress/doc.ts",
7071
- "declarations": [
7072
- {
7073
- "kind": "variable",
7074
- "name": "muiDocs",
7075
- "type": {
7076
- "text": "MuiDocs"
7077
- },
7078
- "default": "{ Progress: { title: \"Progress\", description: \"A Progress Bar visually represents completion status by filling a bar based on a percentage value. It gives users a clear indication of progress for a given task or process.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/2NPcL7tA0zGUWFLShr66fS/23d0050dce8c8379afc6deb8e351d049/Progress_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4161&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/inputs-progress--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-progress/index.ts\"], website: [\"https://muibook.com/#/progress\"], guides: [\"https://guides.muibook.com/progress\"], usage: { list: [ \"Show task progress – Indicate how much of a task or process has been completed.\", \"Display loading states – Represent the progress of a background operation, such as file uploads.\", \"Track step completion – Show progress in multi-step workflows or onboarding processes.\", \"Tune visual density and motion with component tokens such as --progress-radius, --progress-syncing-width, and --progress-pending-stripe-size.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/1iPll53Pmtgjh50qYwhsgY/908da9c51dd605895bd6306290fc6bd9/Progress_-_Anatomy.png\", list: [ \"Fill (Indicator) – The colored portion inside the track that represents the progress percentage.\", \"Track – The background of the progress bar, providing the visual boundary for progress.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"outcome-based-roadmap\", name: \"Outcome-Based Roadmap\", description: \"Example of an Outcome-Based Roadmap page showing objectives organised into Upcoming, Doing, and Finished columns. Progress bars indicate the completion status of each task, providing a clear view of overall progress.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3w5htPtfEz7QMCH9alVcwf/de35725fb4542b891bd695b900195291/Outcomes-Progress-Composition.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7079
- }
7080
- ],
7081
- "exports": [
7082
- {
7083
- "kind": "js",
7084
- "name": "muiDocs",
7085
- "declaration": {
7086
- "name": "muiDocs",
7087
- "module": "src/components/mui-progress/doc.ts"
7088
- }
7089
- }
7090
- ]
7091
- },
7092
- {
7093
- "kind": "javascript-module",
7094
- "path": "src/components/mui-progress/index.ts",
7095
- "declarations": [
7096
- {
7097
- "kind": "class",
7098
- "description": "",
7099
- "name": "MuiProgress",
7100
- "members": [
7101
- {
7102
- "kind": "method",
7103
- "name": "render"
7104
- }
7105
- ],
7106
- "attributes": [
7107
- {
7108
- "name": "progress"
7109
- },
7110
- {
7111
- "name": "state"
7112
- }
7113
- ],
7114
- "superclass": {
7115
- "name": "HTMLElement"
7116
- },
7117
- "tagName": "mui-progress",
7118
- "customElement": true
7119
- }
7120
- ],
7121
- "exports": [
7122
- {
7123
- "kind": "custom-element-definition",
7124
- "name": "mui-progress",
7125
- "declaration": {
7126
- "name": "MuiProgress",
7127
- "module": "src/components/mui-progress/index.ts"
7128
- }
7129
- }
7130
- ]
7131
- },
7132
7132
  {
7133
7133
  "kind": "javascript-module",
7134
7134
  "path": "src/components/mui-prompt-message/doc.ts",
@@ -7437,56 +7437,6 @@
7437
7437
  }
7438
7438
  ]
7439
7439
  },
7440
- {
7441
- "kind": "javascript-module",
7442
- "path": "src/components/mui-quote/doc.ts",
7443
- "declarations": [
7444
- {
7445
- "kind": "variable",
7446
- "name": "muiDocs",
7447
- "type": {
7448
- "text": "MuiDocs"
7449
- },
7450
- "default": "{ Quote: { title: \"Quote\", description: \"Used to highlight a piece of text, typically a statement or excerpt, that adds emphasis or authority. Quotes help break up content and draw attention to important or inspirational messages.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/K68wChzSMiLUojTMGoDcY/9de538ad493e36cb14afa388ecadbf47/Quote_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1069-15815&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-quote--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-quote/index.ts\"], website: [\"https://muibook.com/#/quote\"], guides: [\"https://guides.muibook.com/quote\"], usage: { list: [ \"Use to emphasise key statements or citations within content.\", \"Ideal for highlighting testimonials, excerpts, or impactful text.\", \"Keep quotes concise and visually distinct from body text.\", \"Avoid overusing to maintain impact and clarity.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7451
- }
7452
- ],
7453
- "exports": [
7454
- {
7455
- "kind": "js",
7456
- "name": "muiDocs",
7457
- "declaration": {
7458
- "name": "muiDocs",
7459
- "module": "src/components/mui-quote/doc.ts"
7460
- }
7461
- }
7462
- ]
7463
- },
7464
- {
7465
- "kind": "javascript-module",
7466
- "path": "src/components/mui-quote/index.ts",
7467
- "declarations": [
7468
- {
7469
- "kind": "class",
7470
- "description": "",
7471
- "name": "MuiQuote",
7472
- "superclass": {
7473
- "name": "HTMLElement"
7474
- },
7475
- "tagName": "mui-quote",
7476
- "customElement": true
7477
- }
7478
- ],
7479
- "exports": [
7480
- {
7481
- "kind": "custom-element-definition",
7482
- "name": "mui-quote",
7483
- "declaration": {
7484
- "name": "MuiQuote",
7485
- "module": "src/components/mui-quote/index.ts"
7486
- }
7487
- }
7488
- ]
7489
- },
7490
7440
  {
7491
7441
  "kind": "javascript-module",
7492
7442
  "path": "src/components/mui-prompt-toggle/index.ts",
@@ -7543,6 +7493,56 @@
7543
7493
  }
7544
7494
  ]
7545
7495
  },
7496
+ {
7497
+ "kind": "javascript-module",
7498
+ "path": "src/components/mui-quote/doc.ts",
7499
+ "declarations": [
7500
+ {
7501
+ "kind": "variable",
7502
+ "name": "muiDocs",
7503
+ "type": {
7504
+ "text": "MuiDocs"
7505
+ },
7506
+ "default": "{ Quote: { title: \"Quote\", description: \"Used to highlight a piece of text, typically a statement or excerpt, that adds emphasis or authority. Quotes help break up content and draw attention to important or inspirational messages.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/K68wChzSMiLUojTMGoDcY/9de538ad493e36cb14afa388ecadbf47/Quote_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1069-15815&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-quote--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-quote/index.ts\"], website: [\"https://muibook.com/#/quote\"], guides: [\"https://guides.muibook.com/quote\"], usage: { list: [ \"Use to emphasise key statements or citations within content.\", \"Ideal for highlighting testimonials, excerpts, or impactful text.\", \"Keep quotes concise and visually distinct from body text.\", \"Avoid overusing to maintain impact and clarity.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"\", items: [ { key: \"\", name: \"\", description: \"\", image: \"\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7507
+ }
7508
+ ],
7509
+ "exports": [
7510
+ {
7511
+ "kind": "js",
7512
+ "name": "muiDocs",
7513
+ "declaration": {
7514
+ "name": "muiDocs",
7515
+ "module": "src/components/mui-quote/doc.ts"
7516
+ }
7517
+ }
7518
+ ]
7519
+ },
7520
+ {
7521
+ "kind": "javascript-module",
7522
+ "path": "src/components/mui-quote/index.ts",
7523
+ "declarations": [
7524
+ {
7525
+ "kind": "class",
7526
+ "description": "",
7527
+ "name": "MuiQuote",
7528
+ "superclass": {
7529
+ "name": "HTMLElement"
7530
+ },
7531
+ "tagName": "mui-quote",
7532
+ "customElement": true
7533
+ }
7534
+ ],
7535
+ "exports": [
7536
+ {
7537
+ "kind": "custom-element-definition",
7538
+ "name": "mui-quote",
7539
+ "declaration": {
7540
+ "name": "MuiQuote",
7541
+ "module": "src/components/mui-quote/index.ts"
7542
+ }
7543
+ }
7544
+ ]
7545
+ },
7546
7546
  {
7547
7547
  "kind": "javascript-module",
7548
7548
  "path": "src/components/mui-radio/doc.ts",
@@ -8354,7 +8354,7 @@
8354
8354
  "type": {
8355
8355
  "text": "MuiDocs"
8356
8356
  },
8357
- "default": "{ SlideFrame: { title: \"Slide Frame\", description: \"Slide Frame is a composable presentation surface for UI-builder workflows. It supports configurable ratio, variants, radius, image composition, and overflow handling.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slide-frame/index.ts\"], website: [\"https://muibook.com/#/slide-frame\"], guides: [\"https://guides.muibook.com/slide-frame\"], usage: { list: [ \"Use as a presentation shell and compose page content with existing components like Stack, Grid, Card, and Media.\", \"Prefer one <mui-slide-section> per page in the default slot for scalable composition.\", \"Use ratio='16:9|4:3|1:1|3:2|9:16' (or any valid W:H string) for presentation formats.\", \"Use title for built-in header text and footer-text for built-in footer copy.\", \"Section counter is built into the footer and updates with active-section.\", \"Use slot='header-after' and slot='footer-after' for trailing actions.\", \"Use slot='header-description' for secondary lines.\", \"Use variant='default|plain' to control frame chrome.\", \"Use radius='default | none | small | medium | large' to align with your layout language.\", \"Use scroll to opt into surface scrolling when content exceeds the frame.\", \"When multiple sections exist, users can navigate with Left/Right arrows.\", \"Use section-add-request to intercept Add Section and inject app-specific section content.\", \"In present mode, press Esc to exit quickly.\", \"Use header/footer slots for frame-level controls, metadata, or actions.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"The surface is focusable in present mode and supports keyboard section navigation with Left/Right arrows.\", \"Esc exits present mode.\", \"Use hide-counter when you need to suppress the built-in Section X/Y footer counter.\", \"Expose external controls for next/previous actions when building guided presentation flows.\", ], }, anatomy: { image: \"\", list: [\"Header Slot\", \"Surface\", \"Image Slot\", \"Default Slot Content\", \"Notes Slot\", \"Footer Slot\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard frame with ratio and padding control.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\" }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\" }, { name: \"Card\", link: \"https://guides.muibook.com/card\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
8357
+ "default": "{ SlideFrame: { title: \"Slide Frame\", description: \"Slide Frame is a composable presentation surface for UI-builder workflows. It supports configurable ratio, variants, image composition, and overflow handling.\", hero: [\"\"], figma: [\"\"], storybook: [\"\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-slide-frame/index.ts\"], website: [\"https://muibook.com/#/slide-frame\"], guides: [\"https://guides.muibook.com/slide-frame\"], usage: { list: [ \"Use as a presentation shell and compose page content with existing components like Stack, Grid, Card, and Media.\", \"Prefer one <mui-slide-section> per page in the default slot for scalable composition.\", \"Use ratio='16:9|4:3|1:1|3:2|9:16' (or any valid W:H string) for presentation formats.\", \"Use title for built-in header text and footer-text for built-in footer copy.\", \"Section counter is built into the footer and updates with active-section.\", \"Use slot='header-after' and slot='footer-after' for trailing actions.\", \"Use slot='header-description' for secondary lines.\", \"Use variant='default|plain' to control frame chrome.\", \"Use scroll to opt into surface scrolling when content exceeds the frame.\", \"When multiple sections exist, users can navigate with Left/Right arrows.\", \"In present mode, press Esc to exit quickly.\", \"Use header/footer slots for frame-level controls, metadata, or actions.\", ], }, accessibility: { designerList: [\"\"], engineerList: [ \"The surface is focusable in present mode and supports keyboard section navigation with Left/Right arrows.\", \"Esc exits present mode.\", \"Expose external controls for next/previous actions when building guided presentation flows.\", ], }, anatomy: { image: \"\", list: [\"Header Slot\", \"Surface\", \"Image Slot\", \"Default Slot Content\", \"Notes Slot\", \"Footer Slot\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard frame with ratio and padding control.\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [], }, related: { items: [ { name: \"Stack\", link: \"https://guides.muibook.com/stack\" }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\" }, { name: \"Card\", link: \"https://guides.muibook.com/card\" }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
8358
8358
  }
8359
8359
  ],
8360
8360
  "exports": [
@@ -8568,37 +8568,6 @@
8568
8568
  "kind": "method",
8569
8569
  "name": "prevSection"
8570
8570
  },
8571
- {
8572
- "kind": "method",
8573
- "name": "createDefaultSection",
8574
- "privacy": "private",
8575
- "parameters": [
8576
- {
8577
- "name": "label",
8578
- "type": {
8579
- "text": "string"
8580
- }
8581
- }
8582
- ]
8583
- },
8584
- {
8585
- "kind": "method",
8586
- "name": "addSection",
8587
- "parameters": [
8588
- {
8589
- "name": "content",
8590
- "optional": true,
8591
- "type": {
8592
- "text": "HTMLElement | string"
8593
- }
8594
- }
8595
- ]
8596
- },
8597
- {
8598
- "kind": "method",
8599
- "name": "requestAddSection",
8600
- "privacy": "private"
8601
- },
8602
8571
  {
8603
8572
  "kind": "method",
8604
8573
  "name": "toggleNotes",
@@ -8719,13 +8688,7 @@
8719
8688
  }
8720
8689
  },
8721
8690
  {
8722
- "name": "section-add",
8723
- "type": {
8724
- "text": "CustomEvent"
8725
- }
8726
- },
8727
- {
8728
- "name": "notes-toggle",
8691
+ "name": "notes-toggle",
8729
8692
  "type": {
8730
8693
  "text": "CustomEvent"
8731
8694
  }
@@ -8756,9 +8719,6 @@
8756
8719
  {
8757
8720
  "name": "variant"
8758
8721
  },
8759
- {
8760
- "name": "radius"
8761
- },
8762
8722
  {
8763
8723
  "name": "title"
8764
8724
  },
@@ -8771,12 +8731,6 @@
8771
8731
  {
8772
8732
  "name": "hide-footer"
8773
8733
  },
8774
- {
8775
- "name": "hide-counter"
8776
- },
8777
- {
8778
- "name": "allow-add-section"
8779
- },
8780
8734
  {
8781
8735
  "name": "scroll"
8782
8736
  },
@@ -8928,7 +8882,7 @@
8928
8882
  },
8929
8883
  {
8930
8884
  "kind": "javascript-module",
8931
- "path": "src/components/mui-stepper/doc.ts",
8885
+ "path": "src/components/mui-spinner/doc.ts",
8932
8886
  "declarations": [
8933
8887
  {
8934
8888
  "kind": "variable",
@@ -8936,7 +8890,7 @@
8936
8890
  "type": {
8937
8891
  "text": "MuiDocs"
8938
8892
  },
8939
- "default": "{ Stepper: { title: \"Stepper\", description: \"A Stepper component visually represents a sequence of steps in a process. It helps users understand progress and navigate through multi-step workflows. This component supports both horizontal and vertical orientations.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/423YAEfIeoDzzsK9ClbTkP/485c6c4f637080247caa150afed0ef14/Stepper_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4195&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-stepper--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-stepper\"], website: [\"https://muibook.com/#/stepper\"], guides: [\"https://guides.muibook.com/stepper\"], usage: { list: [ \"Use active-step to control the current step in a multi-step flow.\", \"Use size='x-small|small|medium' to match the density of the surrounding layout.\", \"Use interactive when users should be able to click and keyboard-navigate steps.\", \"Use linear with interactive to limit forward progression to the next available step while still allowing users to move backwards.\", \"Use explicit step states (success, pending, error, disabled) for async and validation workflows.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { description: \"The stepper uses two simple styles: active and inactive. Their meaning changes based on position in the sequence, representing progress through different states.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6Y5iyISdhK7PX8d1cHJxWv/761efb630c924af42ebf8d8bd5fabfb2/Stepper_-_Anatomy.png\", list: [ \"Active / Completed / Success: Indicates the current step or a task that has been successfully finished.\", \"Pending / Error / Disabled: Communicates processing, validation failure, or temporarily unavailable steps.\", \"Upcoming: Represents a step or task that has not yet started.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"review-items-task\", name: \"Review Items Task\", description: \"A permanent drawer remains visible at all times and is typically used for core navigation or tools that support the main content. It doesn’t open or close, and is always part of the current layout or workflow.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/rHTSU9sPUdmwrmGETRLcC/fa444ff8d8a72a28e8f10537324bbca3/drawer-composition-smart-bills.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
8893
+ "default": "{ Spinner: { title: \"Spinner\", description: \"Spinner provides compact loading feedback for short async states.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-spinner/index.ts\"], website: [\"https://muibook.com/#/loader\"], guides: [\"https://guides.muibook.com/loader\"], usage: { list: [ \"Use when content is loading and progress percentage is unavailable.\", \"Use size variants (xx-small to large) to match surrounding density.\", \"Set label for assistive technology context.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Provide a meaningful label when context is unclear.\"] }, anatomy: { image: \"\", list: [\"Animated ring\", \"Accessible label\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [{ name: \"Loader\", link: \"https://guides.muibook.com/loader\" }] }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
8940
8894
  }
8941
8895
  ],
8942
8896
  "exports": [
@@ -8945,16 +8899,56 @@
8945
8899
  "name": "muiDocs",
8946
8900
  "declaration": {
8947
8901
  "name": "muiDocs",
8948
- "module": "src/components/mui-stepper/doc.ts"
8902
+ "module": "src/components/mui-spinner/doc.ts"
8949
8903
  }
8950
8904
  }
8951
8905
  ]
8952
8906
  },
8953
8907
  {
8954
8908
  "kind": "javascript-module",
8955
- "path": "src/components/mui-stepper/index.ts",
8956
- "declarations": [],
8957
- "exports": []
8909
+ "path": "src/components/mui-spinner/index.ts",
8910
+ "declarations": [
8911
+ {
8912
+ "kind": "class",
8913
+ "description": "",
8914
+ "name": "MuiSpinner",
8915
+ "members": [
8916
+ {
8917
+ "kind": "method",
8918
+ "name": "render"
8919
+ }
8920
+ ],
8921
+ "attributes": [
8922
+ {
8923
+ "name": "size"
8924
+ },
8925
+ {
8926
+ "name": "color"
8927
+ },
8928
+ {
8929
+ "name": "duration"
8930
+ },
8931
+ {
8932
+ "name": "label"
8933
+ }
8934
+ ],
8935
+ "superclass": {
8936
+ "name": "HTMLElement"
8937
+ },
8938
+ "tagName": "mui-spinner",
8939
+ "customElement": true
8940
+ }
8941
+ ],
8942
+ "exports": [
8943
+ {
8944
+ "kind": "custom-element-definition",
8945
+ "name": "mui-spinner",
8946
+ "declaration": {
8947
+ "name": "MuiSpinner",
8948
+ "module": "src/components/mui-spinner/index.ts"
8949
+ }
8950
+ }
8951
+ ]
8958
8952
  },
8959
8953
  {
8960
8954
  "kind": "javascript-module",
@@ -8988,7 +8982,7 @@
8988
8982
  },
8989
8983
  {
8990
8984
  "kind": "javascript-module",
8991
- "path": "src/components/mui-spinner/doc.ts",
8985
+ "path": "src/components/mui-stepper/doc.ts",
8992
8986
  "declarations": [
8993
8987
  {
8994
8988
  "kind": "variable",
@@ -8996,7 +8990,7 @@
8996
8990
  "type": {
8997
8991
  "text": "MuiDocs"
8998
8992
  },
8999
- "default": "{ Spinner: { title: \"Spinner\", description: \"Spinner provides compact loading feedback for short async states.\", hero: [\"\"], figma: [\"\"], storybook: [\"https://stories.muibook.com\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-spinner/index.ts\"], website: [\"https://muibook.com/#/loader\"], guides: [\"https://guides.muibook.com/loader\"], usage: { list: [ \"Use when content is loading and progress percentage is unavailable.\", \"Use size variants (xx-small to large) to match surrounding density.\", \"Set label for assistive technology context.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"Provide a meaningful label when context is unclear.\"] }, anatomy: { image: \"\", list: [\"Animated ring\", \"Accessible label\"] }, variants: { items: [{ key: \"\", title: \"\", description: \"\", image: \"\" }] }, compositions: { description: \"\", items: [] }, related: { items: [{ name: \"Loader\", link: \"https://guides.muibook.com/loader\" }] }, rules: [{ heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }] }], behaviour: { list: [\"\"] }, writing: { list: [\"\"] }, }, }"
8993
+ "default": "{ Stepper: { title: \"Stepper\", description: \"A Stepper component visually represents a sequence of steps in a process. It helps users understand progress and navigate through multi-step workflows. This component supports both horizontal and vertical orientations.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/423YAEfIeoDzzsK9ClbTkP/485c6c4f637080247caa150afed0ef14/Stepper_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=948-4195&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-stepper--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-stepper\"], website: [\"https://muibook.com/#/stepper\"], guides: [\"https://guides.muibook.com/stepper\"], usage: { list: [ \"Use active-step to control the current step in a multi-step flow.\", \"Use size='x-small|small|medium' to match the density of the surrounding layout.\", \"Use interactive when users should be able to click and keyboard-navigate steps.\", \"Use linear with interactive to limit forward progression to the next available step while still allowing users to move backwards.\", \"Use explicit step states (success, pending, error, disabled) for async and validation workflows.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { description: \"The stepper uses two simple styles: active and inactive. Their meaning changes based on position in the sequence, representing progress through different states.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6Y5iyISdhK7PX8d1cHJxWv/761efb630c924af42ebf8d8bd5fabfb2/Stepper_-_Anatomy.png\", list: [ \"Active / Completed / Success: Indicates the current step or a task that has been successfully finished.\", \"Pending / Error / Disabled: Communicates processing, validation failure, or temporarily unavailable steps.\", \"Upcoming: Represents a step or task that has not yet started.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"review-items-task\", name: \"Review Items Task\", description: \"A permanent drawer remains visible at all times and is typically used for core navigation or tools that support the main content. It doesn’t open or close, and is always part of the current layout or workflow.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/rHTSU9sPUdmwrmGETRLcC/fa444ff8d8a72a28e8f10537324bbca3/drawer-composition-smart-bills.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9000
8994
  }
9001
8995
  ],
9002
8996
  "exports": [
@@ -9005,56 +8999,16 @@
9005
8999
  "name": "muiDocs",
9006
9000
  "declaration": {
9007
9001
  "name": "muiDocs",
9008
- "module": "src/components/mui-spinner/doc.ts"
9002
+ "module": "src/components/mui-stepper/doc.ts"
9009
9003
  }
9010
9004
  }
9011
9005
  ]
9012
9006
  },
9013
9007
  {
9014
9008
  "kind": "javascript-module",
9015
- "path": "src/components/mui-spinner/index.ts",
9016
- "declarations": [
9017
- {
9018
- "kind": "class",
9019
- "description": "",
9020
- "name": "MuiSpinner",
9021
- "members": [
9022
- {
9023
- "kind": "method",
9024
- "name": "render"
9025
- }
9026
- ],
9027
- "attributes": [
9028
- {
9029
- "name": "size"
9030
- },
9031
- {
9032
- "name": "color"
9033
- },
9034
- {
9035
- "name": "duration"
9036
- },
9037
- {
9038
- "name": "label"
9039
- }
9040
- ],
9041
- "superclass": {
9042
- "name": "HTMLElement"
9043
- },
9044
- "tagName": "mui-spinner",
9045
- "customElement": true
9046
- }
9047
- ],
9048
- "exports": [
9049
- {
9050
- "kind": "custom-element-definition",
9051
- "name": "mui-spinner",
9052
- "declaration": {
9053
- "name": "MuiSpinner",
9054
- "module": "src/components/mui-spinner/index.ts"
9055
- }
9056
- }
9057
- ]
9009
+ "path": "src/components/mui-stepper/index.ts",
9010
+ "declarations": [],
9011
+ "exports": []
9058
9012
  },
9059
9013
  {
9060
9014
  "kind": "javascript-module",
@@ -9194,7 +9148,7 @@
9194
9148
  },
9195
9149
  {
9196
9150
  "kind": "javascript-module",
9197
- "path": "src/components/mui-tabs/doc.ts",
9151
+ "path": "src/components/mui-table/doc.ts",
9198
9152
  "declarations": [
9199
9153
  {
9200
9154
  "kind": "variable",
@@ -9202,7 +9156,7 @@
9202
9156
  "type": {
9203
9157
  "text": "MuiDocs"
9204
9158
  },
9205
- "default": "{ Tabs: { title: \"Tabs\", description: \"Allows users to switch between views or content sections by selecting from a group of tabs. Tabs keep related content within a single surface, reducing the need for navigation and maintaining context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5EC8Uj4pMaQGe2UcNntYLX/040eb1feec8def04504dfa3729494b52/Tab_bar_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=126-560&t=ZfvVjZFxH7mQ72pi-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-tabbar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-tabs\"], website: [\"https://muibook.com/#/tab-bar\"], guides: [\"https://guides.muibook.com/tab-bar\"], usage: { list: [ \"Use to organise related content or views at the same level of hierarchy.\", \"Ideal for toggling between sections without navigating away from the page.\", \"Use the size API (x-small, small, medium, large) to align tabs with adjacent buttons.\", \"Use named slots (before/after) to compose icons and badges in tab items.\", \"Use variant='dots' for compact pagination controls such as carousel navigation.\", \"Use variant='ghost' when you want only active-tab emphasis without outer tab bar chrome.\", \"Keep labels short, clear, and consistently styled.\", \"Avoid using when content is unrelated or exceeds a manageable number of tabs.\", ], }, accessibility: { designerList: [ \"Keyboard users can navigate across tabs using the left/right arrow keys, as well as Home and End keys to jump to the first or last tab.\", \"The active tab always shows a clear focus outline and can be navigated to using the keyboard.\", \"Tabs are grouped in a way that assistive technologies can understand, using standard roles and attributes.\", \"The system keeps track of which tab is active behind the scenes, so screen readers and keyboard users always stay in sync.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between tab-items.\", \"aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.\", \"Each active tab-item can receive focus and shows a focus-visible outline.\", \"tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/koeu63xbKYOWZgs8i0eev/983e09362714a2dcdcc7262889ba1236/Tabs_-_Anatomy.png\", list: [ \"Active: Indicates the currently selected tab.\", \"Inactive: Indicates a tab that is not selected and is waiting for user interaction.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"wallet\", name: \"Wallet\", description: \"This example shows a wallet view featuring a digital card, transaction and statement tabs. It demonstrates how foundational components like tabs, slats, and buttons can be composed to create flexible, real-world layouts.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6RoGBcahh63o16PAcEsgyX/36f5c8d9bf0e8754a574955b32ee6eda/Tab_Bar_-_Composition.png\", }, { key: \"product-carousel\", name: \"Product Carousel\", description: \"Demonstrates how to add custom compositions and layouts within the carousel panels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4NRMfGil4AcMUh7FDhYyHz/7c4636822eba6d3ae15e684f50d10fdd/Carousel_-_Composition.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, ], }, related: { items: [ { name: \"Carousel\", link: \"https://guides.muibook.com/carousel\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9159
+ "default": "{ Table: { title: \"Table\", description: \"Displays data in a grid layout to support scanability and comparison across rows and columns. Best suited for structured, repeatable content.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/34Yd6uWrfM5Ihv4rdniHYy/9e1698ce2c23d6c74006bf3f2ae93066/Table_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8696&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-table--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-table\"], website: [\"https://muibook.com/#/table\"], guides: [\"https://guides.muibook.com/table\"], usage: { list: [ \"Use for structured content that benefits from a grid format.\", \"Ideal for comparing data across multiple rows and columns.\", \"Supports sorting, filtering, or action buttons if needed.\", \"Avoid for unstructured, visual, or narrative-based content.\", \"Tables should adapt for smaller viewports by switching to the Slat component.\", \"Prioritise key content and simplify structure when transitioning to mobile views.\", ], }, accessibility: { designerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], engineerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2KHxAyGbYW7qwySwCLYrbo/0ffc98c3eef07098afaf64bebc6afd4a/Table_-_Anatomy.png\", list: [ \"Heading: The header row of the table accepts headings and other arrangements as needed.\", \"Data: The row contains standard data as well as other arrangements, such as grouped content.\", \"Actions: The main actions for each table row can be included in a dedicated column or slot.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"prop-types-table\", name: \"Prop Types Table\", description: \"Attached is a standard example demonstrating how to use the table to present general data for component prop types.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1JeUHjbeqVNgTvlVZkeHjw/7f652efbea5cc6aa436449905e2ae48e/table_-_composition.png\", }, { key: \"simple-table-dropdown\", name: \"Simple Table w/ Dropdown\", description: \"Example of a simple table with a dropdown action positioned on the far right, following the content. Demonstrates the table used within a card layout, as it might appear on a page or settings view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3IIRPg0pdQB66NJniCZvlo/2600a8bee4ad1c79a63dc48d3032ee34/table-composition-design-pricing.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9206
9160
  }
9207
9161
  ],
9208
9162
  "exports": [
@@ -9211,20 +9165,20 @@
9211
9165
  "name": "muiDocs",
9212
9166
  "declaration": {
9213
9167
  "name": "muiDocs",
9214
- "module": "src/components/mui-tabs/doc.ts"
9168
+ "module": "src/components/mui-table/doc.ts"
9215
9169
  }
9216
9170
  }
9217
9171
  ]
9218
9172
  },
9219
9173
  {
9220
9174
  "kind": "javascript-module",
9221
- "path": "src/components/mui-tabs/index.ts",
9175
+ "path": "src/components/mui-table/index.ts",
9222
9176
  "declarations": [],
9223
9177
  "exports": []
9224
9178
  },
9225
9179
  {
9226
9180
  "kind": "javascript-module",
9227
- "path": "src/components/mui-table/doc.ts",
9181
+ "path": "src/components/mui-tabs/doc.ts",
9228
9182
  "declarations": [
9229
9183
  {
9230
9184
  "kind": "variable",
@@ -9232,7 +9186,7 @@
9232
9186
  "type": {
9233
9187
  "text": "MuiDocs"
9234
9188
  },
9235
- "default": "{ Table: { title: \"Table\", description: \"Displays data in a grid layout to support scanability and comparison across rows and columns. Best suited for structured, repeatable content.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/34Yd6uWrfM5Ihv4rdniHYy/9e1698ce2c23d6c74006bf3f2ae93066/Table_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=958-8696&t=0ytskb8cxriEmdz2-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/content-table--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-table\"], website: [\"https://muibook.com/#/table\"], guides: [\"https://guides.muibook.com/table\"], usage: { list: [ \"Use for structured content that benefits from a grid format.\", \"Ideal for comparing data across multiple rows and columns.\", \"Supports sorting, filtering, or action buttons if needed.\", \"Avoid for unstructured, visual, or narrative-based content.\", \"Tables should adapt for smaller viewports by switching to the Slat component.\", \"Prioritise key content and simplify structure when transitioning to mobile views.\", ], }, accessibility: { designerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], engineerList: [ \"mui-table uses role='table'.\", \"mui-row-group uses role='rowgroup'.\", \"mui-row uses role='row'.\", \"mui-cell uses role='cell'.\", \"Follows table semantics for screen reader support.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/2KHxAyGbYW7qwySwCLYrbo/0ffc98c3eef07098afaf64bebc6afd4a/Table_-_Anatomy.png\", list: [ \"Heading: The header row of the table accepts headings and other arrangements as needed.\", \"Data: The row contains standard data as well as other arrangements, such as grouped content.\", \"Actions: The main actions for each table row can be included in a dedicated column or slot.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"prop-types-table\", name: \"Prop Types Table\", description: \"Attached is a standard example demonstrating how to use the table to present general data for component prop types.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/1JeUHjbeqVNgTvlVZkeHjw/7f652efbea5cc6aa436449905e2ae48e/table_-_composition.png\", }, { key: \"simple-table-dropdown\", name: \"Simple Table w/ Dropdown\", description: \"Example of a simple table with a dropdown action positioned on the far right, following the content. Demonstrates the table used within a card layout, as it might appear on a page or settings view.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3IIRPg0pdQB66NJniCZvlo/2600a8bee4ad1c79a63dc48d3032ee34/table-composition-design-pricing.png\", }, { key: \"compliance-dashboard-table\", name: \"Compliance Dashboard Table\", description: \"This example shows a desktop view of a table used within an accounting compliance dashboard.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3vUKA5C5iJ3LvjLwf2WiO9/274ffe423dbe828244294f6809172ce1/table-composition-compliance-dashboard.png\", }, ], }, related: { items: [ { name: \"\", link: \"\", }, ], }, rules: [ { heading: \"Icon-Only Actions\", description: \"\", doContent: [ { description: \"Use a 'medium' size icon when using an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3syzrNBEXbBjp5hGEUvF4M/0471f4b16939d8ee54deaf48997ff455/action-icon-do.png\", }, ], dontContent: [ { description: \"Avoid 'x-small', 'medium' or 'large' size icons within an icon-only medium sized action\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/5V2TE85dY848jz1dP6Y0lC/b8e433c8abad5a4402ff1f86ddb8c848/action-icon-dont.png\", }, ], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9189
+ "default": "{ Tabs: { title: \"Tabs\", description: \"Allows users to switch between views or content sections by selecting from a group of tabs. Tabs keep related content within a single surface, reducing the need for navigation and maintaining context.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/5EC8Uj4pMaQGe2UcNntYLX/040eb1feec8def04504dfa3729494b52/Tab_bar_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=126-560&t=ZfvVjZFxH7mQ72pi-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/navigation-tabbar--docs\"], github: [\"https://github.com/michaeltrilford/muibook/tree/main/src/components/mui-tabs\"], website: [\"https://muibook.com/#/tab-bar\"], guides: [\"https://guides.muibook.com/tab-bar\"], usage: { list: [ \"Use to organise related content or views at the same level of hierarchy.\", \"Ideal for toggling between sections without navigating away from the page.\", \"Use the size API (x-small, small, medium, large) to align tabs with adjacent buttons.\", \"Use named slots (before/after) to compose icons and badges in tab items.\", \"Use variant='dots' for compact pagination controls such as carousel navigation.\", \"Use variant='ghost' when you want only active-tab emphasis without outer tab bar chrome.\", \"Keep labels short, clear, and consistently styled.\", \"Avoid using when content is unrelated or exceeds a manageable number of tabs.\", ], }, accessibility: { designerList: [ \"Keyboard users can navigate across tabs using the left/right arrow keys, as well as Home and End keys to jump to the first or last tab.\", \"The active tab always shows a clear focus outline and can be navigated to using the keyboard.\", \"Tabs are grouped in a way that assistive technologies can understand, using standard roles and attributes.\", \"The system keeps track of which tab is active behind the scenes, so screen readers and keyboard users always stay in sync.\", ], engineerList: [ \"Left/Right arrows, Home and End keys let keyboard users navigate between tab-items.\", \"aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.\", \"Each active tab-item can receive focus and shows a focus-visible outline.\", \"tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.\", ], }, anatomy: { image: \"https://images.ctfassets.net/i5uwscj4pkk2/koeu63xbKYOWZgs8i0eev/983e09362714a2dcdcc7262889ba1236/Tabs_-_Anatomy.png\", list: [ \"Active: Indicates the currently selected tab.\", \"Inactive: Indicates a tab that is not selected and is waiting for user interaction.\", ], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"wallet\", name: \"Wallet\", description: \"This example shows a wallet view featuring a digital card, transaction and statement tabs. It demonstrates how foundational components like tabs, slats, and buttons can be composed to create flexible, real-world layouts.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/6RoGBcahh63o16PAcEsgyX/36f5c8d9bf0e8754a574955b32ee6eda/Tab_Bar_-_Composition.png\", }, { key: \"product-carousel\", name: \"Product Carousel\", description: \"Demonstrates how to add custom compositions and layouts within the carousel panels.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/4NRMfGil4AcMUh7FDhYyHz/7c4636822eba6d3ae15e684f50d10fdd/Carousel_-_Composition.png\", }, { key: \"carousel-showcase\", name: \"Carousel Showcase\", description: \"This example from the GuruSuite website demonstrates the carousel used to showcase two of the products on offer.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2TaRRm351HyujF9mT2w1wH/3958f69e939d20618751742130dc5f06/GuruSuite-Carousel-Composition.png\", }, ], }, related: { items: [ { name: \"Carousel\", link: \"https://guides.muibook.com/carousel\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
9236
9190
  }
9237
9191
  ],
9238
9192
  "exports": [
@@ -9241,14 +9195,14 @@
9241
9195
  "name": "muiDocs",
9242
9196
  "declaration": {
9243
9197
  "name": "muiDocs",
9244
- "module": "src/components/mui-table/doc.ts"
9198
+ "module": "src/components/mui-tabs/doc.ts"
9245
9199
  }
9246
9200
  }
9247
9201
  ]
9248
9202
  },
9249
9203
  {
9250
9204
  "kind": "javascript-module",
9251
- "path": "src/components/mui-table/index.ts",
9205
+ "path": "src/components/mui-tabs/index.ts",
9252
9206
  "declarations": [],
9253
9207
  "exports": []
9254
9208
  },
@@ -9788,48 +9742,6 @@
9788
9742
  }
9789
9743
  ]
9790
9744
  },
9791
- {
9792
- "kind": "javascript-module",
9793
- "path": "src/components/mui-carousel/panel/index.ts",
9794
- "declarations": [
9795
- {
9796
- "kind": "class",
9797
- "description": "",
9798
- "name": "MuiCarouselPanel",
9799
- "members": [
9800
- {
9801
- "kind": "field",
9802
- "name": "item"
9803
- },
9804
- {
9805
- "kind": "field",
9806
- "name": "innerHTML",
9807
- "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
9808
- }
9809
- ],
9810
- "attributes": [
9811
- {
9812
- "name": "item"
9813
- }
9814
- ],
9815
- "superclass": {
9816
- "name": "HTMLElement"
9817
- },
9818
- "tagName": "mui-carousel-panel",
9819
- "customElement": true
9820
- }
9821
- ],
9822
- "exports": [
9823
- {
9824
- "kind": "custom-element-definition",
9825
- "name": "mui-carousel-panel",
9826
- "declaration": {
9827
- "name": "MuiCarouselPanel",
9828
- "module": "src/components/mui-carousel/panel/index.ts"
9829
- }
9830
- }
9831
- ]
9832
- },
9833
9745
  {
9834
9746
  "kind": "javascript-module",
9835
9747
  "path": "src/components/mui-carousel/controller/index.ts",
@@ -9964,6 +9876,48 @@
9964
9876
  }
9965
9877
  ]
9966
9878
  },
9879
+ {
9880
+ "kind": "javascript-module",
9881
+ "path": "src/components/mui-carousel/panel/index.ts",
9882
+ "declarations": [
9883
+ {
9884
+ "kind": "class",
9885
+ "description": "",
9886
+ "name": "MuiCarouselPanel",
9887
+ "members": [
9888
+ {
9889
+ "kind": "field",
9890
+ "name": "item"
9891
+ },
9892
+ {
9893
+ "kind": "field",
9894
+ "name": "innerHTML",
9895
+ "default": "` <style> :host { display: block; box-sizing: border-box; overflow: hidden; } </style> <slot></slot> `"
9896
+ }
9897
+ ],
9898
+ "attributes": [
9899
+ {
9900
+ "name": "item"
9901
+ }
9902
+ ],
9903
+ "superclass": {
9904
+ "name": "HTMLElement"
9905
+ },
9906
+ "tagName": "mui-carousel-panel",
9907
+ "customElement": true
9908
+ }
9909
+ ],
9910
+ "exports": [
9911
+ {
9912
+ "kind": "custom-element-definition",
9913
+ "name": "mui-carousel-panel",
9914
+ "declaration": {
9915
+ "name": "MuiCarouselPanel",
9916
+ "module": "src/components/mui-carousel/panel/index.ts"
9917
+ }
9918
+ }
9919
+ ]
9920
+ },
9967
9921
  {
9968
9922
  "kind": "javascript-module",
9969
9923
  "path": "src/components/mui-list/item/index.ts",
@@ -10035,16 +9989,16 @@
10035
9989
  },
10036
9990
  {
10037
9991
  "kind": "javascript-module",
10038
- "path": "src/components/mui-slat/group/index.ts",
9992
+ "path": "src/components/mui-slat/slat/index.ts",
10039
9993
  "declarations": [
10040
9994
  {
10041
9995
  "kind": "class",
10042
9996
  "description": "",
10043
- "name": "MuiSlatGroup",
9997
+ "name": "MuiSlat",
10044
9998
  "members": [
10045
9999
  {
10046
10000
  "kind": "field",
10047
- "name": "usage",
10001
+ "name": "variant",
10048
10002
  "type": {
10049
10003
  "text": "string"
10050
10004
  },
@@ -10052,23 +10006,21 @@
10052
10006
  "default": "\"\""
10053
10007
  },
10054
10008
  {
10055
- "kind": "field",
10056
- "name": "mutationObserver",
10057
- "type": {
10058
- "text": "MutationObserver | null"
10059
- },
10060
- "privacy": "private",
10061
- "default": "null"
10009
+ "kind": "method",
10010
+ "name": "enforceAvatarSizes"
10062
10011
  },
10063
10012
  {
10064
10013
  "kind": "method",
10065
- "name": "observeSlotChanges",
10066
- "privacy": "private"
10014
+ "name": "applyCellRoles"
10067
10015
  },
10068
10016
  {
10069
10017
  "kind": "method",
10070
- "name": "setLastInGroup",
10071
- "privacy": "private"
10018
+ "name": "hasAccessorySlot",
10019
+ "return": {
10020
+ "type": {
10021
+ "text": "boolean"
10022
+ }
10023
+ }
10072
10024
  },
10073
10025
  {
10074
10026
  "kind": "method",
@@ -10077,61 +10029,153 @@
10077
10029
  ],
10078
10030
  "attributes": [
10079
10031
  {
10080
- "name": "usage"
10032
+ "name": "variant"
10033
+ },
10034
+ {
10035
+ "name": "col"
10036
+ },
10037
+ {
10038
+ "name": "space"
10081
10039
  }
10082
10040
  ],
10083
10041
  "superclass": {
10084
10042
  "name": "HTMLElement"
10085
10043
  },
10086
- "tagName": "mui-slat-group",
10044
+ "tagName": "mui-slat",
10087
10045
  "customElement": true
10088
10046
  }
10089
10047
  ],
10090
10048
  "exports": [
10091
10049
  {
10092
10050
  "kind": "custom-element-definition",
10093
- "name": "mui-slat-group",
10051
+ "name": "mui-slat",
10094
10052
  "declaration": {
10095
- "name": "MuiSlatGroup",
10096
- "module": "src/components/mui-slat/group/index.ts"
10053
+ "name": "MuiSlat",
10054
+ "module": "src/components/mui-slat/slat/index.ts"
10097
10055
  }
10098
10056
  }
10099
10057
  ]
10100
10058
  },
10101
10059
  {
10102
10060
  "kind": "javascript-module",
10103
- "path": "src/components/mui-slat/slat/index.ts",
10061
+ "path": "src/components/mui-stack/hstack/index.ts",
10104
10062
  "declarations": [
10105
10063
  {
10106
10064
  "kind": "class",
10107
10065
  "description": "",
10108
- "name": "MuiSlat",
10066
+ "name": "MuiHStack",
10109
10067
  "members": [
10110
10068
  {
10111
10069
  "kind": "field",
10112
- "name": "variant",
10070
+ "name": "space",
10113
10071
  "type": {
10114
10072
  "text": "string"
10115
10073
  },
10116
10074
  "privacy": "private",
10117
- "default": "\"\""
10075
+ "default": "`var(--space-500)`"
10118
10076
  },
10119
10077
  {
10120
- "kind": "method",
10121
- "name": "enforceAvatarSizes"
10078
+ "kind": "field",
10079
+ "name": "alignX",
10080
+ "type": {
10081
+ "text": "string"
10082
+ },
10083
+ "privacy": "private",
10084
+ "default": "`flex-start`"
10122
10085
  },
10123
10086
  {
10124
- "kind": "method",
10125
- "name": "applyCellRoles"
10087
+ "kind": "field",
10088
+ "name": "alignY",
10089
+ "type": {
10090
+ "text": "string"
10091
+ },
10092
+ "privacy": "private",
10093
+ "default": "`flex-start`"
10094
+ },
10095
+ {
10096
+ "kind": "field",
10097
+ "name": "styles",
10098
+ "type": {
10099
+ "text": "string"
10100
+ },
10101
+ "privacy": "private",
10102
+ "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
10126
10103
  },
10127
10104
  {
10128
10105
  "kind": "method",
10129
- "name": "hasAccessorySlot",
10106
+ "name": "waitForPartMap",
10130
10107
  "return": {
10131
10108
  "type": {
10132
- "text": "boolean"
10109
+ "text": "Promise<void>"
10133
10110
  }
10134
10111
  }
10112
+ }
10113
+ ],
10114
+ "attributes": [
10115
+ {
10116
+ "name": "space"
10117
+ },
10118
+ {
10119
+ "name": "aligny"
10120
+ },
10121
+ {
10122
+ "name": "alignx"
10123
+ }
10124
+ ],
10125
+ "superclass": {
10126
+ "name": "HTMLElement"
10127
+ },
10128
+ "tagName": "mui-h-stack",
10129
+ "customElement": true
10130
+ }
10131
+ ],
10132
+ "exports": [
10133
+ {
10134
+ "kind": "custom-element-definition",
10135
+ "name": "mui-h-stack",
10136
+ "declaration": {
10137
+ "name": "MuiHStack",
10138
+ "module": "src/components/mui-stack/hstack/index.ts"
10139
+ }
10140
+ }
10141
+ ]
10142
+ },
10143
+ {
10144
+ "kind": "javascript-module",
10145
+ "path": "src/components/mui-slat/group/index.ts",
10146
+ "declarations": [
10147
+ {
10148
+ "kind": "class",
10149
+ "description": "",
10150
+ "name": "MuiSlatGroup",
10151
+ "members": [
10152
+ {
10153
+ "kind": "field",
10154
+ "name": "usage",
10155
+ "type": {
10156
+ "text": "string"
10157
+ },
10158
+ "privacy": "private",
10159
+ "default": "\"\""
10160
+ },
10161
+ {
10162
+ "kind": "field",
10163
+ "name": "mutationObserver",
10164
+ "type": {
10165
+ "text": "MutationObserver | null"
10166
+ },
10167
+ "privacy": "private",
10168
+ "default": "null"
10169
+ },
10170
+ {
10171
+ "kind": "method",
10172
+ "name": "observeSlotChanges",
10173
+ "privacy": "private"
10174
+ },
10175
+ {
10176
+ "kind": "method",
10177
+ "name": "setLastInGroup",
10178
+ "privacy": "private"
10135
10179
  },
10136
10180
  {
10137
10181
  "kind": "method",
@@ -10140,29 +10184,107 @@
10140
10184
  ],
10141
10185
  "attributes": [
10142
10186
  {
10143
- "name": "variant"
10187
+ "name": "usage"
10188
+ }
10189
+ ],
10190
+ "superclass": {
10191
+ "name": "HTMLElement"
10192
+ },
10193
+ "tagName": "mui-slat-group",
10194
+ "customElement": true
10195
+ }
10196
+ ],
10197
+ "exports": [
10198
+ {
10199
+ "kind": "custom-element-definition",
10200
+ "name": "mui-slat-group",
10201
+ "declaration": {
10202
+ "name": "MuiSlatGroup",
10203
+ "module": "src/components/mui-slat/group/index.ts"
10204
+ }
10205
+ }
10206
+ ]
10207
+ },
10208
+ {
10209
+ "kind": "javascript-module",
10210
+ "path": "src/components/mui-stack/vstack/index.ts",
10211
+ "declarations": [
10212
+ {
10213
+ "kind": "class",
10214
+ "description": "",
10215
+ "name": "MuiVStack",
10216
+ "members": [
10217
+ {
10218
+ "kind": "field",
10219
+ "name": "space",
10220
+ "type": {
10221
+ "text": "string"
10222
+ },
10223
+ "privacy": "private",
10224
+ "default": "`var(--space-500)`"
10144
10225
  },
10145
10226
  {
10146
- "name": "col"
10227
+ "kind": "field",
10228
+ "name": "alignX",
10229
+ "type": {
10230
+ "text": "string"
10231
+ },
10232
+ "privacy": "private",
10233
+ "default": "`normal`"
10234
+ },
10235
+ {
10236
+ "kind": "field",
10237
+ "name": "alignY",
10238
+ "type": {
10239
+ "text": "string"
10240
+ },
10241
+ "privacy": "private",
10242
+ "default": "`normal`"
10243
+ },
10244
+ {
10245
+ "kind": "field",
10246
+ "name": "styles",
10247
+ "type": {
10248
+ "text": "string"
10249
+ },
10250
+ "privacy": "private",
10251
+ "default": "` :host { display: block; } slot { display: grid; gap: var(--space); justify-items: var(--alignX); align-items: var(--alignY); } `"
10147
10252
  },
10253
+ {
10254
+ "kind": "method",
10255
+ "name": "waitForPartMap",
10256
+ "return": {
10257
+ "type": {
10258
+ "text": "Promise<void>"
10259
+ }
10260
+ }
10261
+ }
10262
+ ],
10263
+ "attributes": [
10148
10264
  {
10149
10265
  "name": "space"
10266
+ },
10267
+ {
10268
+ "name": "alignx"
10269
+ },
10270
+ {
10271
+ "name": "aligny"
10150
10272
  }
10151
10273
  ],
10152
10274
  "superclass": {
10153
10275
  "name": "HTMLElement"
10154
10276
  },
10155
- "tagName": "mui-slat",
10277
+ "tagName": "mui-v-stack",
10156
10278
  "customElement": true
10157
10279
  }
10158
10280
  ],
10159
10281
  "exports": [
10160
10282
  {
10161
10283
  "kind": "custom-element-definition",
10162
- "name": "mui-slat",
10284
+ "name": "mui-v-stack",
10163
10285
  "declaration": {
10164
- "name": "MuiSlat",
10165
- "module": "src/components/mui-slat/slat/index.ts"
10286
+ "name": "MuiVStack",
10287
+ "module": "src/components/mui-stack/vstack/index.ts"
10166
10288
  }
10167
10289
  }
10168
10290
  ]
@@ -10342,220 +10464,184 @@
10342
10464
  },
10343
10465
  {
10344
10466
  "kind": "javascript-module",
10345
- "path": "src/components/mui-stack/vstack/index.ts",
10467
+ "path": "src/components/mui-stepper/step/index.ts",
10346
10468
  "declarations": [
10347
10469
  {
10348
10470
  "kind": "class",
10349
10471
  "description": "",
10350
- "name": "MuiVStack",
10472
+ "name": "MuiStep",
10351
10473
  "members": [
10352
10474
  {
10353
- "kind": "field",
10354
- "name": "space",
10355
- "type": {
10356
- "text": "string"
10357
- },
10358
- "privacy": "private",
10359
- "default": "`var(--space-500)`"
10360
- },
10475
+ "kind": "method",
10476
+ "name": "render"
10477
+ }
10478
+ ],
10479
+ "attributes": [
10361
10480
  {
10362
- "kind": "field",
10363
- "name": "alignX",
10364
- "type": {
10365
- "text": "string"
10366
- },
10367
- "privacy": "private",
10368
- "default": "`normal`"
10481
+ "name": "state"
10369
10482
  },
10370
10483
  {
10371
- "kind": "field",
10372
- "name": "alignY",
10373
- "type": {
10374
- "text": "string"
10375
- },
10376
- "privacy": "private",
10377
- "default": "`normal`"
10484
+ "name": "resolved-state"
10378
10485
  },
10379
10486
  {
10380
- "kind": "field",
10381
- "name": "styles",
10382
- "type": {
10383
- "text": "string"
10384
- },
10385
- "privacy": "private",
10386
- "default": "` :host { display: block; } slot { display: grid; gap: var(--space); justify-items: var(--alignX); align-items: var(--alignY); } `"
10487
+ "name": "title"
10387
10488
  },
10388
10489
  {
10389
- "kind": "method",
10390
- "name": "waitForPartMap",
10391
- "return": {
10392
- "type": {
10393
- "text": "Promise<void>"
10394
- }
10395
- }
10396
- }
10397
- ],
10398
- "attributes": [
10399
- {
10400
- "name": "space"
10490
+ "name": "direction"
10401
10491
  },
10402
10492
  {
10403
- "name": "alignx"
10493
+ "name": "hide-icon"
10404
10494
  },
10405
10495
  {
10406
- "name": "aligny"
10496
+ "name": "size"
10407
10497
  }
10408
10498
  ],
10409
10499
  "superclass": {
10410
10500
  "name": "HTMLElement"
10411
10501
  },
10412
- "tagName": "mui-v-stack",
10502
+ "tagName": "mui-step",
10413
10503
  "customElement": true
10414
10504
  }
10415
10505
  ],
10416
10506
  "exports": [
10417
10507
  {
10418
10508
  "kind": "custom-element-definition",
10419
- "name": "mui-v-stack",
10509
+ "name": "mui-step",
10420
10510
  "declaration": {
10421
- "name": "MuiVStack",
10422
- "module": "src/components/mui-stack/vstack/index.ts"
10511
+ "name": "MuiStep",
10512
+ "module": "src/components/mui-stepper/step/index.ts"
10423
10513
  }
10424
10514
  }
10425
10515
  ]
10426
10516
  },
10427
10517
  {
10428
10518
  "kind": "javascript-module",
10429
- "path": "src/components/mui-stack/hstack/index.ts",
10519
+ "path": "src/components/mui-table/cell/index.ts",
10430
10520
  "declarations": [
10431
10521
  {
10432
10522
  "kind": "class",
10433
10523
  "description": "",
10434
- "name": "MuiHStack",
10524
+ "name": "MuiCell",
10435
10525
  "members": [
10436
- {
10437
- "kind": "field",
10438
- "name": "space",
10439
- "type": {
10440
- "text": "string"
10441
- },
10442
- "privacy": "private",
10443
- "default": "`var(--space-500)`"
10444
- },
10445
- {
10446
- "kind": "field",
10447
- "name": "alignX",
10448
- "type": {
10449
- "text": "string"
10450
- },
10451
- "privacy": "private",
10452
- "default": "`flex-start`"
10453
- },
10454
- {
10455
- "kind": "field",
10456
- "name": "alignY",
10457
- "type": {
10458
- "text": "string"
10459
- },
10460
- "privacy": "private",
10461
- "default": "`flex-start`"
10462
- },
10463
- {
10464
- "kind": "field",
10465
- "name": "styles",
10466
- "type": {
10467
- "text": "string"
10468
- },
10469
- "privacy": "private",
10470
- "default": "` :host { display: block; } slot { display: flex; gap: var(--space); align-items: var(--alignY); justify-content: var(--alignX); } `"
10471
- },
10472
10526
  {
10473
10527
  "kind": "method",
10474
- "name": "waitForPartMap",
10475
- "return": {
10476
- "type": {
10477
- "text": "Promise<void>"
10478
- }
10479
- }
10528
+ "name": "render"
10480
10529
  }
10481
10530
  ],
10482
10531
  "attributes": [
10483
10532
  {
10484
- "name": "space"
10485
- },
10486
- {
10487
- "name": "aligny"
10488
- },
10489
- {
10490
- "name": "alignx"
10533
+ "name": "align-y"
10491
10534
  }
10492
10535
  ],
10493
10536
  "superclass": {
10494
10537
  "name": "HTMLElement"
10495
10538
  },
10496
- "tagName": "mui-h-stack",
10539
+ "tagName": "mui-cell",
10497
10540
  "customElement": true
10498
10541
  }
10499
10542
  ],
10500
10543
  "exports": [
10501
10544
  {
10502
10545
  "kind": "custom-element-definition",
10503
- "name": "mui-h-stack",
10546
+ "name": "mui-cell",
10504
10547
  "declaration": {
10505
- "name": "MuiHStack",
10506
- "module": "src/components/mui-stack/hstack/index.ts"
10548
+ "name": "MuiCell",
10549
+ "module": "src/components/mui-table/cell/index.ts"
10507
10550
  }
10508
10551
  }
10509
10552
  ]
10510
10553
  },
10511
10554
  {
10512
10555
  "kind": "javascript-module",
10513
- "path": "src/components/mui-stepper/step/index.ts",
10556
+ "path": "src/components/mui-table/row/index.ts",
10514
10557
  "declarations": [
10515
10558
  {
10516
10559
  "kind": "class",
10517
10560
  "description": "",
10518
- "name": "MuiStep",
10561
+ "name": "MuiRow",
10519
10562
  "members": [
10520
10563
  {
10521
10564
  "kind": "method",
10522
- "name": "render"
10565
+ "name": "syncContextAttributes",
10566
+ "privacy": "private"
10567
+ },
10568
+ {
10569
+ "kind": "method",
10570
+ "name": "render",
10571
+ "privacy": "private"
10523
10572
  }
10524
10573
  ],
10525
10574
  "attributes": [
10526
10575
  {
10527
- "name": "state"
10528
- },
10529
- {
10530
- "name": "resolved-state"
10531
- },
10532
- {
10533
- "name": "title"
10534
- },
10535
- {
10536
- "name": "direction"
10537
- },
10538
- {
10539
- "name": "hide-icon"
10540
- },
10541
- {
10542
- "name": "size"
10576
+ "name": "columns"
10543
10577
  }
10544
10578
  ],
10545
10579
  "superclass": {
10546
10580
  "name": "HTMLElement"
10547
10581
  },
10548
- "tagName": "mui-step",
10582
+ "tagName": "mui-row",
10549
10583
  "customElement": true
10550
10584
  }
10551
10585
  ],
10552
10586
  "exports": [
10553
10587
  {
10554
10588
  "kind": "custom-element-definition",
10555
- "name": "mui-step",
10589
+ "name": "mui-row",
10556
10590
  "declaration": {
10557
- "name": "MuiStep",
10558
- "module": "src/components/mui-stepper/step/index.ts"
10591
+ "name": "MuiRow",
10592
+ "module": "src/components/mui-table/row/index.ts"
10593
+ }
10594
+ }
10595
+ ]
10596
+ },
10597
+ {
10598
+ "kind": "javascript-module",
10599
+ "path": "src/components/mui-table/row-group/index.ts",
10600
+ "declarations": [
10601
+ {
10602
+ "kind": "class",
10603
+ "description": "",
10604
+ "name": "MuiRowGroup",
10605
+ "superclass": {
10606
+ "name": "HTMLElement"
10607
+ },
10608
+ "tagName": "mui-row-group",
10609
+ "customElement": true
10610
+ }
10611
+ ],
10612
+ "exports": [
10613
+ {
10614
+ "kind": "custom-element-definition",
10615
+ "name": "mui-row-group",
10616
+ "declaration": {
10617
+ "name": "MuiRowGroup",
10618
+ "module": "src/components/mui-table/row-group/index.ts"
10619
+ }
10620
+ }
10621
+ ]
10622
+ },
10623
+ {
10624
+ "kind": "javascript-module",
10625
+ "path": "src/components/mui-table/table/index.ts",
10626
+ "declarations": [
10627
+ {
10628
+ "kind": "class",
10629
+ "description": "",
10630
+ "name": "MuiTable",
10631
+ "superclass": {
10632
+ "name": "HTMLElement"
10633
+ },
10634
+ "tagName": "mui-table",
10635
+ "customElement": true
10636
+ }
10637
+ ],
10638
+ "exports": [
10639
+ {
10640
+ "kind": "custom-element-definition",
10641
+ "name": "mui-table",
10642
+ "declaration": {
10643
+ "name": "MuiTable",
10644
+ "module": "src/components/mui-table/table/index.ts"
10559
10645
  }
10560
10646
  }
10561
10647
  ]
@@ -10632,6 +10718,111 @@
10632
10718
  }
10633
10719
  ]
10634
10720
  },
10721
+ {
10722
+ "kind": "javascript-module",
10723
+ "path": "src/components/mui-tabs/item/index.ts",
10724
+ "declarations": [
10725
+ {
10726
+ "kind": "class",
10727
+ "description": "",
10728
+ "name": "MuiTabItem",
10729
+ "members": [
10730
+ {
10731
+ "kind": "field",
10732
+ "name": "beforeSlot",
10733
+ "type": {
10734
+ "text": "HTMLSlotElement | null | undefined"
10735
+ },
10736
+ "privacy": "private"
10737
+ },
10738
+ {
10739
+ "kind": "field",
10740
+ "name": "afterSlot",
10741
+ "type": {
10742
+ "text": "HTMLSlotElement | null | undefined"
10743
+ },
10744
+ "privacy": "private"
10745
+ },
10746
+ {
10747
+ "kind": "method",
10748
+ "name": "getIconSizeFromTabSize",
10749
+ "privacy": "private"
10750
+ },
10751
+ {
10752
+ "kind": "method",
10753
+ "name": "getBadgeSizeFromTabSize",
10754
+ "privacy": "private"
10755
+ },
10756
+ {
10757
+ "kind": "method",
10758
+ "name": "hasAssignedContent",
10759
+ "privacy": "private",
10760
+ "return": {
10761
+ "type": {
10762
+ "text": "boolean"
10763
+ }
10764
+ },
10765
+ "parameters": [
10766
+ {
10767
+ "name": "slot",
10768
+ "type": {
10769
+ "text": "HTMLSlotElement | null | undefined"
10770
+ }
10771
+ }
10772
+ ]
10773
+ },
10774
+ {
10775
+ "kind": "method",
10776
+ "name": "syncSlottedAffordances",
10777
+ "privacy": "private",
10778
+ "parameters": [
10779
+ {
10780
+ "name": "slot",
10781
+ "type": {
10782
+ "text": "HTMLSlotElement | null | undefined"
10783
+ }
10784
+ }
10785
+ ]
10786
+ },
10787
+ {
10788
+ "kind": "method",
10789
+ "name": "updateSlotState",
10790
+ "privacy": "private"
10791
+ },
10792
+ {
10793
+ "kind": "method",
10794
+ "name": "updateActiveState"
10795
+ }
10796
+ ],
10797
+ "attributes": [
10798
+ {
10799
+ "name": "active"
10800
+ },
10801
+ {
10802
+ "name": "size"
10803
+ },
10804
+ {
10805
+ "name": "variant"
10806
+ }
10807
+ ],
10808
+ "superclass": {
10809
+ "name": "HTMLElement"
10810
+ },
10811
+ "tagName": "mui-tab-item",
10812
+ "customElement": true
10813
+ }
10814
+ ],
10815
+ "exports": [
10816
+ {
10817
+ "kind": "custom-element-definition",
10818
+ "name": "mui-tab-item",
10819
+ "declaration": {
10820
+ "name": "MuiTabItem",
10821
+ "module": "src/components/mui-tabs/item/index.ts"
10822
+ }
10823
+ }
10824
+ ]
10825
+ },
10635
10826
  {
10636
10827
  "kind": "javascript-module",
10637
10828
  "path": "src/components/mui-tabs/tab-bar/index.ts",
@@ -10792,111 +10983,6 @@
10792
10983
  }
10793
10984
  ]
10794
10985
  },
10795
- {
10796
- "kind": "javascript-module",
10797
- "path": "src/components/mui-tabs/item/index.ts",
10798
- "declarations": [
10799
- {
10800
- "kind": "class",
10801
- "description": "",
10802
- "name": "MuiTabItem",
10803
- "members": [
10804
- {
10805
- "kind": "field",
10806
- "name": "beforeSlot",
10807
- "type": {
10808
- "text": "HTMLSlotElement | null | undefined"
10809
- },
10810
- "privacy": "private"
10811
- },
10812
- {
10813
- "kind": "field",
10814
- "name": "afterSlot",
10815
- "type": {
10816
- "text": "HTMLSlotElement | null | undefined"
10817
- },
10818
- "privacy": "private"
10819
- },
10820
- {
10821
- "kind": "method",
10822
- "name": "getIconSizeFromTabSize",
10823
- "privacy": "private"
10824
- },
10825
- {
10826
- "kind": "method",
10827
- "name": "getBadgeSizeFromTabSize",
10828
- "privacy": "private"
10829
- },
10830
- {
10831
- "kind": "method",
10832
- "name": "hasAssignedContent",
10833
- "privacy": "private",
10834
- "return": {
10835
- "type": {
10836
- "text": "boolean"
10837
- }
10838
- },
10839
- "parameters": [
10840
- {
10841
- "name": "slot",
10842
- "type": {
10843
- "text": "HTMLSlotElement | null | undefined"
10844
- }
10845
- }
10846
- ]
10847
- },
10848
- {
10849
- "kind": "method",
10850
- "name": "syncSlottedAffordances",
10851
- "privacy": "private",
10852
- "parameters": [
10853
- {
10854
- "name": "slot",
10855
- "type": {
10856
- "text": "HTMLSlotElement | null | undefined"
10857
- }
10858
- }
10859
- ]
10860
- },
10861
- {
10862
- "kind": "method",
10863
- "name": "updateSlotState",
10864
- "privacy": "private"
10865
- },
10866
- {
10867
- "kind": "method",
10868
- "name": "updateActiveState"
10869
- }
10870
- ],
10871
- "attributes": [
10872
- {
10873
- "name": "active"
10874
- },
10875
- {
10876
- "name": "size"
10877
- },
10878
- {
10879
- "name": "variant"
10880
- }
10881
- ],
10882
- "superclass": {
10883
- "name": "HTMLElement"
10884
- },
10885
- "tagName": "mui-tab-item",
10886
- "customElement": true
10887
- }
10888
- ],
10889
- "exports": [
10890
- {
10891
- "kind": "custom-element-definition",
10892
- "name": "mui-tab-item",
10893
- "declaration": {
10894
- "name": "MuiTabItem",
10895
- "module": "src/components/mui-tabs/item/index.ts"
10896
- }
10897
- }
10898
- ]
10899
- },
10900
10986
  {
10901
10987
  "kind": "javascript-module",
10902
10988
  "path": "src/components/mui-tabs/panel/index.ts",
@@ -10941,138 +11027,6 @@
10941
11027
  }
10942
11028
  }
10943
11029
  ]
10944
- },
10945
- {
10946
- "kind": "javascript-module",
10947
- "path": "src/components/mui-table/row/index.ts",
10948
- "declarations": [
10949
- {
10950
- "kind": "class",
10951
- "description": "",
10952
- "name": "MuiRow",
10953
- "members": [
10954
- {
10955
- "kind": "method",
10956
- "name": "syncContextAttributes",
10957
- "privacy": "private"
10958
- },
10959
- {
10960
- "kind": "method",
10961
- "name": "render",
10962
- "privacy": "private"
10963
- }
10964
- ],
10965
- "attributes": [
10966
- {
10967
- "name": "columns"
10968
- }
10969
- ],
10970
- "superclass": {
10971
- "name": "HTMLElement"
10972
- },
10973
- "tagName": "mui-row",
10974
- "customElement": true
10975
- }
10976
- ],
10977
- "exports": [
10978
- {
10979
- "kind": "custom-element-definition",
10980
- "name": "mui-row",
10981
- "declaration": {
10982
- "name": "MuiRow",
10983
- "module": "src/components/mui-table/row/index.ts"
10984
- }
10985
- }
10986
- ]
10987
- },
10988
- {
10989
- "kind": "javascript-module",
10990
- "path": "src/components/mui-table/cell/index.ts",
10991
- "declarations": [
10992
- {
10993
- "kind": "class",
10994
- "description": "",
10995
- "name": "MuiCell",
10996
- "members": [
10997
- {
10998
- "kind": "method",
10999
- "name": "render"
11000
- }
11001
- ],
11002
- "attributes": [
11003
- {
11004
- "name": "align-y"
11005
- }
11006
- ],
11007
- "superclass": {
11008
- "name": "HTMLElement"
11009
- },
11010
- "tagName": "mui-cell",
11011
- "customElement": true
11012
- }
11013
- ],
11014
- "exports": [
11015
- {
11016
- "kind": "custom-element-definition",
11017
- "name": "mui-cell",
11018
- "declaration": {
11019
- "name": "MuiCell",
11020
- "module": "src/components/mui-table/cell/index.ts"
11021
- }
11022
- }
11023
- ]
11024
- },
11025
- {
11026
- "kind": "javascript-module",
11027
- "path": "src/components/mui-table/row-group/index.ts",
11028
- "declarations": [
11029
- {
11030
- "kind": "class",
11031
- "description": "",
11032
- "name": "MuiRowGroup",
11033
- "superclass": {
11034
- "name": "HTMLElement"
11035
- },
11036
- "tagName": "mui-row-group",
11037
- "customElement": true
11038
- }
11039
- ],
11040
- "exports": [
11041
- {
11042
- "kind": "custom-element-definition",
11043
- "name": "mui-row-group",
11044
- "declaration": {
11045
- "name": "MuiRowGroup",
11046
- "module": "src/components/mui-table/row-group/index.ts"
11047
- }
11048
- }
11049
- ]
11050
- },
11051
- {
11052
- "kind": "javascript-module",
11053
- "path": "src/components/mui-table/table/index.ts",
11054
- "declarations": [
11055
- {
11056
- "kind": "class",
11057
- "description": "",
11058
- "name": "MuiTable",
11059
- "superclass": {
11060
- "name": "HTMLElement"
11061
- },
11062
- "tagName": "mui-table",
11063
- "customElement": true
11064
- }
11065
- ],
11066
- "exports": [
11067
- {
11068
- "kind": "custom-element-definition",
11069
- "name": "mui-table",
11070
- "declaration": {
11071
- "name": "MuiTable",
11072
- "module": "src/components/mui-table/table/index.ts"
11073
- }
11074
- }
11075
- ]
11076
11030
  }
11077
11031
  ]
11078
11032
  }