@muibook/components 18.0.1 → 18.1.0

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.
@@ -103,7 +103,7 @@
103
103
  },
104
104
  {
105
105
  "kind": "javascript-module",
106
- "path": "src/components/mui-badge/doc.ts",
106
+ "path": "src/components/mui-alert/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": "{ 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: [\"\"], }, }, }"
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: [\"\"], }, }, }"
115
115
  }
116
116
  ],
117
117
  "exports": [
@@ -120,29 +120,107 @@
120
120
  "name": "muiDocs",
121
121
  "declaration": {
122
122
  "name": "muiDocs",
123
- "module": "src/components/mui-badge/doc.ts"
123
+ "module": "src/components/mui-alert/doc.ts"
124
124
  }
125
125
  }
126
126
  ]
127
127
  },
128
128
  {
129
129
  "kind": "javascript-module",
130
- "path": "src/components/mui-badge/index.ts",
130
+ "path": "src/components/mui-alert/index.ts",
131
131
  "declarations": [
132
132
  {
133
133
  "kind": "class",
134
134
  "description": "",
135
- "name": "MuiBadge",
135
+ "name": "MuiAlert",
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
+ },
137
155
  {
138
156
  "kind": "method",
139
157
  "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"
140
212
  }
141
213
  ],
142
214
  "attributes": [
143
215
  {
144
216
  "name": "variant"
145
217
  },
218
+ {
219
+ "name": "label"
220
+ },
221
+ {
222
+ "name": "hide-label"
223
+ },
146
224
  {
147
225
  "name": "size"
148
226
  }
@@ -150,17 +228,17 @@
150
228
  "superclass": {
151
229
  "name": "HTMLElement"
152
230
  },
153
- "tagName": "mui-badge",
231
+ "tagName": "mui-alert",
154
232
  "customElement": true
155
233
  }
156
234
  ],
157
235
  "exports": [
158
236
  {
159
237
  "kind": "custom-element-definition",
160
- "name": "mui-badge",
238
+ "name": "mui-alert",
161
239
  "declaration": {
162
- "name": "MuiBadge",
163
- "module": "src/components/mui-badge/index.ts"
240
+ "name": "MuiAlert",
241
+ "module": "src/components/mui-alert/index.ts"
164
242
  }
165
243
  }
166
244
  ]
@@ -268,7 +346,7 @@
268
346
  },
269
347
  {
270
348
  "kind": "javascript-module",
271
- "path": "src/components/mui-alert/doc.ts",
349
+ "path": "src/components/mui-body/doc.ts",
272
350
  "declarations": [
273
351
  {
274
352
  "kind": "variable",
@@ -276,7 +354,7 @@
276
354
  "type": {
277
355
  "text": "MuiDocs"
278
356
  },
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: [\"\"], }, }, }"
357
+ "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-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\", }, { 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: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
280
358
  }
281
359
  ],
282
360
  "exports": [
@@ -285,132 +363,84 @@
285
363
  "name": "muiDocs",
286
364
  "declaration": {
287
365
  "name": "muiDocs",
288
- "module": "src/components/mui-alert/doc.ts"
366
+ "module": "src/components/mui-body/doc.ts"
289
367
  }
290
368
  }
291
369
  ]
292
370
  },
293
371
  {
294
372
  "kind": "javascript-module",
295
- "path": "src/components/mui-alert/index.ts",
373
+ "path": "src/components/mui-body/index.ts",
296
374
  "declarations": [
297
375
  {
298
376
  "kind": "class",
299
377
  "description": "",
300
- "name": "MuiAlert",
378
+ "name": "MuiBody",
301
379
  "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
- },
320
380
  {
321
381
  "kind": "method",
322
382
  "name": "render"
323
383
  },
324
384
  {
325
385
  "kind": "method",
326
- "name": "getAlertSize",
327
- "privacy": "private",
328
- "return": {
329
- "type": {
330
- "text": "AlertSize"
331
- }
332
- }
386
+ "name": "setupSlotBehavior",
387
+ "privacy": "private"
333
388
  },
334
389
  {
335
390
  "kind": "method",
336
- "name": "getInlineContentSize",
391
+ "name": "syncInlineSlotSizes",
337
392
  "privacy": "private",
338
- "return": {
339
- "type": {
340
- "text": "string"
341
- }
342
- },
343
393
  "parameters": [
344
394
  {
345
- "name": "size",
395
+ "name": "elements",
346
396
  "type": {
347
- "text": "AlertSize"
397
+ "text": "Element[]"
348
398
  }
349
399
  }
350
400
  ]
351
401
  },
352
402
  {
353
403
  "kind": "method",
354
- "name": "getActionControlSize",
355
- "privacy": "private",
404
+ "name": "waitForPartMap",
356
405
  "return": {
357
406
  "type": {
358
- "text": "string"
359
- }
360
- },
361
- "parameters": [
362
- {
363
- "name": "size",
364
- "type": {
365
- "text": "AlertSize"
366
- }
407
+ "text": "Promise<void>"
367
408
  }
368
- ]
369
- },
370
- {
371
- "kind": "method",
372
- "name": "setupActionSlot"
373
- },
374
- {
375
- "kind": "method",
376
- "name": "setupContentSlot"
409
+ }
377
410
  }
378
411
  ],
379
412
  "attributes": [
380
413
  {
381
- "name": "variant"
382
- },
383
- {
384
- "name": "label"
414
+ "name": "size"
385
415
  },
386
416
  {
387
- "name": "hide-label"
417
+ "name": "weight"
388
418
  },
389
419
  {
390
- "name": "size"
420
+ "name": "variant"
391
421
  }
392
422
  ],
393
423
  "superclass": {
394
424
  "name": "HTMLElement"
395
425
  },
396
- "tagName": "mui-alert",
426
+ "tagName": "mui-body",
397
427
  "customElement": true
398
428
  }
399
429
  ],
400
430
  "exports": [
401
431
  {
402
432
  "kind": "custom-element-definition",
403
- "name": "mui-alert",
433
+ "name": "mui-body",
404
434
  "declaration": {
405
- "name": "MuiAlert",
406
- "module": "src/components/mui-alert/index.ts"
435
+ "name": "MuiBody",
436
+ "module": "src/components/mui-body/index.ts"
407
437
  }
408
438
  }
409
439
  ]
410
440
  },
411
441
  {
412
442
  "kind": "javascript-module",
413
- "path": "src/components/mui-body/doc.ts",
443
+ "path": "src/components/mui-badge/doc.ts",
414
444
  "declarations": [
415
445
  {
416
446
  "kind": "variable",
@@ -418,7 +448,7 @@
418
448
  "type": {
419
449
  "text": "MuiDocs"
420
450
  },
421
- "default": "{ Body: { title: \"Body\", description: \"Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/GGmtyOnGHBMGMrvkPTWSL/2c6ff12702d76c1393b2315b19728aa3/Body_-_Home_Image.png\", ], figma: [\"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1\"], storybook: [\"https://stories.muibook.com/?path=/docs/content-body--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-body/index.ts\"], website: [\"https://muibook.com/#/button\"], guides: [\"https://guides.muibook.com/body\"], usage: { list: [ \"Use for supporting content or descriptions.\", \"Use states like Default, Success, Warning and Error to align with feedback or messaging contexts.\", \"Match the body size to the layout’s overall design and readability.\", \"Adjust the size by selecting x-small, small, medium or large.\", \"Use before/after slots to compose inline icons, badges, or helper UI with body text.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"default\", title: \"Default\", description: \"Standard body text with x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2NAalFsBAkeBz69hO093eb/b9390132c50df11749aaa47dafdb2b93/default.png\", }, { key: \"optional\", title: \"Optional\", description: \"Optional text is visually lighter, providing subtle contrast to Standard body text. It comes in four sizes—x-small, small, medium, and large—for tailored readability. Font weights of regular and bold are also available, giving flexibility for emphasis or hierarchy.\", image: \"\", }, { key: \"success\", title: \"Success\", description: \"Indicates positive feedback with the option of x-small, small, medium and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/8RChklU9yHSY7PTJH0JLD/c72f630006f2be4e7f1d850d7510c92f/success.png\", }, { key: \"warning\", title: \"Warning\", description: \"Highlights warning messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/2UJaVEXU2fbKPi3L7afjt/e82b06ef54e92cf2d6f6e984d8a27079/warning.png\", }, { key: \"error\", title: \"Error\", description: \"Highlights error messages with the option of x-small, small, medium, and large for tailored readability. In addition to the size, font weight of regular and bold is available.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/egb4l4ubM0A6T44xAxDgz/5d94fa59f0069b689da537710650e22b/error.png\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { key: \"muibook-resource\", name: \"Muibook Resource\", description: \"The Muibook documentation site uses MUI components to compose its layout, including headings, text, lists, buttons, icons, and image components.\", image: \"https://images.ctfassets.net/i5uwscj4pkk2/3LVvuYDZWRnMhxNy6GMLNd/c5074a05eacb2c22c50ea172b3567c48/Muibook-List-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\", }, { 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: \"Heading\", link: \"https://guides.muibook.com/heading\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
451
+ "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: [\"\"], }, }, }"
422
452
  }
423
453
  ],
424
454
  "exports": [
@@ -427,77 +457,47 @@
427
457
  "name": "muiDocs",
428
458
  "declaration": {
429
459
  "name": "muiDocs",
430
- "module": "src/components/mui-body/doc.ts"
460
+ "module": "src/components/mui-badge/doc.ts"
431
461
  }
432
462
  }
433
463
  ]
434
464
  },
435
465
  {
436
466
  "kind": "javascript-module",
437
- "path": "src/components/mui-body/index.ts",
467
+ "path": "src/components/mui-badge/index.ts",
438
468
  "declarations": [
439
469
  {
440
470
  "kind": "class",
441
471
  "description": "",
442
- "name": "MuiBody",
472
+ "name": "MuiBadge",
443
473
  "members": [
444
474
  {
445
475
  "kind": "method",
446
476
  "name": "render"
447
- },
448
- {
449
- "kind": "method",
450
- "name": "setupSlotBehavior",
451
- "privacy": "private"
452
- },
453
- {
454
- "kind": "method",
455
- "name": "syncInlineSlotSizes",
456
- "privacy": "private",
457
- "parameters": [
458
- {
459
- "name": "elements",
460
- "type": {
461
- "text": "Element[]"
462
- }
463
- }
464
- ]
465
- },
466
- {
467
- "kind": "method",
468
- "name": "waitForPartMap",
469
- "return": {
470
- "type": {
471
- "text": "Promise<void>"
472
- }
473
- }
474
477
  }
475
478
  ],
476
479
  "attributes": [
477
480
  {
478
- "name": "size"
479
- },
480
- {
481
- "name": "weight"
481
+ "name": "variant"
482
482
  },
483
483
  {
484
- "name": "variant"
484
+ "name": "size"
485
485
  }
486
486
  ],
487
487
  "superclass": {
488
488
  "name": "HTMLElement"
489
489
  },
490
- "tagName": "mui-body",
490
+ "tagName": "mui-badge",
491
491
  "customElement": true
492
492
  }
493
493
  ],
494
494
  "exports": [
495
495
  {
496
496
  "kind": "custom-element-definition",
497
- "name": "mui-body",
497
+ "name": "mui-badge",
498
498
  "declaration": {
499
- "name": "MuiBody",
500
- "module": "src/components/mui-body/index.ts"
499
+ "name": "MuiBadge",
500
+ "module": "src/components/mui-badge/index.ts"
501
501
  }
502
502
  }
503
503
  ]
@@ -6365,7 +6365,7 @@
6365
6365
  },
6366
6366
  {
6367
6367
  "kind": "javascript-module",
6368
- "path": "src/components/mui-progress/doc.ts",
6368
+ "path": "src/components/mui-prompt/doc.ts",
6369
6369
  "declarations": [
6370
6370
  {
6371
6371
  "kind": "variable",
@@ -6373,7 +6373,7 @@
6373
6373
  "type": {
6374
6374
  "text": "MuiDocs"
6375
6375
  },
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: [\"\"], }, }, }"
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.\"], }, }, }"
6377
6377
  }
6378
6378
  ],
6379
6379
  "exports": [
@@ -6382,83 +6382,19 @@
6382
6382
  "name": "muiDocs",
6383
6383
  "declaration": {
6384
6384
  "name": "muiDocs",
6385
- "module": "src/components/mui-progress/doc.ts"
6385
+ "module": "src/components/mui-prompt/doc.ts"
6386
6386
  }
6387
6387
  }
6388
6388
  ]
6389
6389
  },
6390
6390
  {
6391
6391
  "kind": "javascript-module",
6392
- "path": "src/components/mui-progress/index.ts",
6392
+ "path": "src/components/mui-prompt/index.ts",
6393
6393
  "declarations": [
6394
6394
  {
6395
6395
  "kind": "class",
6396
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.\"], }, }, }"
6441
- }
6442
- ],
6443
- "exports": [
6444
- {
6445
- "kind": "js",
6446
- "name": "muiDocs",
6447
- "declaration": {
6448
- "name": "muiDocs",
6449
- "module": "src/components/mui-prompt/doc.ts"
6450
- }
6451
- }
6452
- ]
6453
- },
6454
- {
6455
- "kind": "javascript-module",
6456
- "path": "src/components/mui-prompt/index.ts",
6457
- "declarations": [
6458
- {
6459
- "kind": "class",
6460
- "description": "",
6461
- "name": "MuiPrompt",
6397
+ "name": "MuiPrompt",
6462
6398
  "members": [
6463
6399
  {
6464
6400
  "kind": "field",
@@ -7129,6 +7065,70 @@
7129
7065
  }
7130
7066
  ]
7131
7067
  },
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",
@@ -7733,6 +7733,110 @@
7733
7733
  }
7734
7734
  ]
7735
7735
  },
7736
+ {
7737
+ "kind": "javascript-module",
7738
+ "path": "src/components/mui-responsive/doc.ts",
7739
+ "declarations": [
7740
+ {
7741
+ "kind": "variable",
7742
+ "name": "muiDocs",
7743
+ "type": {
7744
+ "text": "MuiDocs"
7745
+ },
7746
+ "default": "{ Responsive: { title: \"Responsive\", description: \"Dynamically render UI based on viewport size\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/4UgRd1YdJAAZTThk4U97qE/8a322a53f71dc8b288385b5dd16b3469/Responsive_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12704&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-responsive--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-responsive/index.ts\"], website: [\"https://muibook.com/#/responsive\"], guides: [\"https://guides.muibook.com/responsive\"], usage: { list: [ \"Use to adjust or swap UI components according to screen size for optimal experience.\", \"Ideal for tailoring layouts, navigation, or content density on different devices.\", \"Supports breakpoint-driven rendering to maintain clarity and usability.\", \"Avoid overly complex responsive behaviours that may confuse users or complicate maintenance.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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: \"Stack\", link: \"https://guides.muibook.com/stack\", }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7747
+ }
7748
+ ],
7749
+ "exports": [
7750
+ {
7751
+ "kind": "js",
7752
+ "name": "muiDocs",
7753
+ "declaration": {
7754
+ "name": "muiDocs",
7755
+ "module": "src/components/mui-responsive/doc.ts"
7756
+ }
7757
+ }
7758
+ ]
7759
+ },
7760
+ {
7761
+ "kind": "javascript-module",
7762
+ "path": "src/components/mui-responsive/index.ts",
7763
+ "declarations": [
7764
+ {
7765
+ "kind": "class",
7766
+ "description": "",
7767
+ "name": "MuiR",
7768
+ "members": [
7769
+ {
7770
+ "kind": "field",
7771
+ "name": "slotEl",
7772
+ "type": {
7773
+ "text": "HTMLSlotElement | null"
7774
+ },
7775
+ "privacy": "private",
7776
+ "default": "null"
7777
+ },
7778
+ {
7779
+ "kind": "field",
7780
+ "name": "mqlLow",
7781
+ "type": {
7782
+ "text": "MediaQueryList | null"
7783
+ },
7784
+ "privacy": "private",
7785
+ "default": "null"
7786
+ },
7787
+ {
7788
+ "kind": "field",
7789
+ "name": "mqlHigh",
7790
+ "type": {
7791
+ "text": "MediaQueryList | null"
7792
+ },
7793
+ "privacy": "private",
7794
+ "default": "null"
7795
+ },
7796
+ {
7797
+ "kind": "field",
7798
+ "name": "mqlSingle",
7799
+ "type": {
7800
+ "text": "MediaQueryList | null"
7801
+ },
7802
+ "privacy": "private",
7803
+ "default": "null"
7804
+ },
7805
+ {
7806
+ "kind": "field",
7807
+ "name": "innerHTML",
7808
+ "default": "` <style>${styles}</style> <slot></slot> `"
7809
+ }
7810
+ ],
7811
+ "attributes": [
7812
+ {
7813
+ "name": "breakpoint"
7814
+ },
7815
+ {
7816
+ "name": "breakpoint-low"
7817
+ },
7818
+ {
7819
+ "name": "breakpoint-high"
7820
+ }
7821
+ ],
7822
+ "superclass": {
7823
+ "name": "HTMLElement"
7824
+ },
7825
+ "tagName": "mui-responsive",
7826
+ "customElement": true
7827
+ }
7828
+ ],
7829
+ "exports": [
7830
+ {
7831
+ "kind": "custom-element-definition",
7832
+ "name": "mui-responsive",
7833
+ "declaration": {
7834
+ "name": "MuiR",
7835
+ "module": "src/components/mui-responsive/index.ts"
7836
+ }
7837
+ }
7838
+ ]
7839
+ },
7736
7840
  {
7737
7841
  "kind": "javascript-module",
7738
7842
  "path": "src/components/mui-range-input/doc.ts",
@@ -7873,7 +7977,7 @@
7873
7977
  },
7874
7978
  {
7875
7979
  "kind": "javascript-module",
7876
- "path": "src/components/mui-responsive/doc.ts",
7980
+ "path": "src/components/mui-rule/doc.ts",
7877
7981
  "declarations": [
7878
7982
  {
7879
7983
  "kind": "variable",
@@ -7881,7 +7985,7 @@
7881
7985
  "type": {
7882
7986
  "text": "MuiDocs"
7883
7987
  },
7884
- "default": "{ Responsive: { title: \"Responsive\", description: \"Dynamically render UI based on viewport size\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/4UgRd1YdJAAZTThk4U97qE/8a322a53f71dc8b288385b5dd16b3469/Responsive_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12704&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-responsive--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-responsive/index.ts\"], website: [\"https://muibook.com/#/responsive\"], guides: [\"https://guides.muibook.com/responsive\"], usage: { list: [ \"Use to adjust or swap UI components according to screen size for optimal experience.\", \"Ideal for tailoring layouts, navigation, or content density on different devices.\", \"Supports breakpoint-driven rendering to maintain clarity and usability.\", \"Avoid overly complex responsive behaviours that may confuse users or complicate maintenance.\", ], }, accessibility: { designerList: [\"\"], engineerList: [\"\"], }, anatomy: { image: \"\", list: [\"\"], }, variants: { items: [ { key: \"\", title: \"\", description: \"\", image: \"\", }, ], }, compositions: { description: \"Showcases actual use cases, demonstrating how the component fits into real-world UI scenarios.\", items: [ { 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: \"Stack\", link: \"https://guides.muibook.com/stack\", }, { name: \"Grid\", link: \"https://guides.muibook.com/grid\", }, ], }, rules: [ { heading: \"\", description: \"\", doContent: [{ description: \"\", image: \"\" }], dontContent: [{ description: \"\", image: \"\" }], }, ], behaviour: { list: [\"\"], }, writing: { list: [\"\"], }, }, }"
7988
+ "default": "{ Rule: { title: \"Rule\", description: \"A styling rule that visually separates or divides page elements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1MLQoDYuXhKOBDZQRZtBH7/6cd51d6b04fb62f1e04b0383c38d4cce/Rule_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12617&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-rule--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-rule/index.ts\"], website: [\"https://muibook.com/#/rule\"], guides: [\"https://guides.muibook.com/rule\"], usage: { list: [ \"Use horizontal rules to separate sections or create visual breaks in flows.\", \"Use vertical rules to divide elements within a row or dense layout.\", \"Align with spacing and layout conventions to maintain visual rhythm.\", \"Avoid using as decoration—rules should support clarity and structure.\", ], }, 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: [\"\"], }, }, }"
7885
7989
  }
7886
7990
  ],
7887
7991
  "exports": [
@@ -7890,137 +7994,33 @@
7890
7994
  "name": "muiDocs",
7891
7995
  "declaration": {
7892
7996
  "name": "muiDocs",
7893
- "module": "src/components/mui-responsive/doc.ts"
7997
+ "module": "src/components/mui-rule/doc.ts"
7894
7998
  }
7895
7999
  }
7896
8000
  ]
7897
8001
  },
7898
8002
  {
7899
8003
  "kind": "javascript-module",
7900
- "path": "src/components/mui-responsive/index.ts",
8004
+ "path": "src/components/mui-rule/index.ts",
7901
8005
  "declarations": [
7902
8006
  {
7903
8007
  "kind": "class",
7904
8008
  "description": "",
7905
- "name": "MuiR",
8009
+ "name": "MuiRule",
7906
8010
  "members": [
7907
8011
  {
7908
- "kind": "field",
7909
- "name": "slotEl",
7910
- "type": {
7911
- "text": "HTMLSlotElement | null"
7912
- },
7913
- "privacy": "private",
7914
- "default": "null"
8012
+ "kind": "method",
8013
+ "name": "syncContextAttributes",
8014
+ "privacy": "private"
7915
8015
  },
7916
8016
  {
7917
- "kind": "field",
7918
- "name": "mqlLow",
7919
- "type": {
7920
- "text": "MediaQueryList | null"
7921
- },
7922
- "privacy": "private",
7923
- "default": "null"
7924
- },
7925
- {
7926
- "kind": "field",
7927
- "name": "mqlHigh",
7928
- "type": {
7929
- "text": "MediaQueryList | null"
7930
- },
7931
- "privacy": "private",
7932
- "default": "null"
7933
- },
7934
- {
7935
- "kind": "field",
7936
- "name": "mqlSingle",
7937
- "type": {
7938
- "text": "MediaQueryList | null"
7939
- },
7940
- "privacy": "private",
7941
- "default": "null"
7942
- },
7943
- {
7944
- "kind": "field",
7945
- "name": "innerHTML",
7946
- "default": "` <style>${styles}</style> <slot></slot> `"
7947
- }
7948
- ],
7949
- "attributes": [
7950
- {
7951
- "name": "breakpoint"
7952
- },
7953
- {
7954
- "name": "breakpoint-low"
7955
- },
7956
- {
7957
- "name": "breakpoint-high"
7958
- }
7959
- ],
7960
- "superclass": {
7961
- "name": "HTMLElement"
7962
- },
7963
- "tagName": "mui-responsive",
7964
- "customElement": true
7965
- }
7966
- ],
7967
- "exports": [
7968
- {
7969
- "kind": "custom-element-definition",
7970
- "name": "mui-responsive",
7971
- "declaration": {
7972
- "name": "MuiR",
7973
- "module": "src/components/mui-responsive/index.ts"
7974
- }
7975
- }
7976
- ]
7977
- },
7978
- {
7979
- "kind": "javascript-module",
7980
- "path": "src/components/mui-rule/doc.ts",
7981
- "declarations": [
7982
- {
7983
- "kind": "variable",
7984
- "name": "muiDocs",
7985
- "type": {
7986
- "text": "MuiDocs"
7987
- },
7988
- "default": "{ Rule: { title: \"Rule\", description: \"A styling rule that visually separates or divides page elements.\", hero: [ \"https://images.ctfassets.net/i5uwscj4pkk2/1MLQoDYuXhKOBDZQRZtBH7/6cd51d6b04fb62f1e04b0383c38d4cce/Rule_-_Home_Image.png\", ], figma: [ \"https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=1059-12617&t=BwezUSymTClm00wJ-1\", ], storybook: [\"https://stories.muibook.com/?path=/docs/layout-rule--docs\"], github: [\"https://github.com/michaeltrilford/muibook/blob/main/src/components/mui-rule/index.ts\"], website: [\"https://muibook.com/#/rule\"], guides: [\"https://guides.muibook.com/rule\"], usage: { list: [ \"Use horizontal rules to separate sections or create visual breaks in flows.\", \"Use vertical rules to divide elements within a row or dense layout.\", \"Align with spacing and layout conventions to maintain visual rhythm.\", \"Avoid using as decoration—rules should support clarity and structure.\", ], }, 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: [\"\"], }, }, }"
7989
- }
7990
- ],
7991
- "exports": [
7992
- {
7993
- "kind": "js",
7994
- "name": "muiDocs",
7995
- "declaration": {
7996
- "name": "muiDocs",
7997
- "module": "src/components/mui-rule/doc.ts"
7998
- }
7999
- }
8000
- ]
8001
- },
8002
- {
8003
- "kind": "javascript-module",
8004
- "path": "src/components/mui-rule/index.ts",
8005
- "declarations": [
8006
- {
8007
- "kind": "class",
8008
- "description": "",
8009
- "name": "MuiRule",
8010
- "members": [
8011
- {
8012
- "kind": "method",
8013
- "name": "syncContextAttributes",
8014
- "privacy": "private"
8015
- },
8016
- {
8017
- "kind": "method",
8018
- "name": "updateStyles"
8019
- }
8020
- ],
8021
- "attributes": [
8022
- {
8023
- "name": "length"
8017
+ "kind": "method",
8018
+ "name": "updateStyles"
8019
+ }
8020
+ ],
8021
+ "attributes": [
8022
+ {
8023
+ "name": "length"
8024
8024
  },
8025
8025
  {
8026
8026
  "name": "weight"
@@ -9987,6 +9987,71 @@
9987
9987
  }
9988
9988
  ]
9989
9989
  },
9990
+ {
9991
+ "kind": "javascript-module",
9992
+ "path": "src/components/mui-slat/group/index.ts",
9993
+ "declarations": [
9994
+ {
9995
+ "kind": "class",
9996
+ "description": "",
9997
+ "name": "MuiSlatGroup",
9998
+ "members": [
9999
+ {
10000
+ "kind": "field",
10001
+ "name": "usage",
10002
+ "type": {
10003
+ "text": "string"
10004
+ },
10005
+ "privacy": "private",
10006
+ "default": "\"\""
10007
+ },
10008
+ {
10009
+ "kind": "field",
10010
+ "name": "mutationObserver",
10011
+ "type": {
10012
+ "text": "MutationObserver | null"
10013
+ },
10014
+ "privacy": "private",
10015
+ "default": "null"
10016
+ },
10017
+ {
10018
+ "kind": "method",
10019
+ "name": "observeSlotChanges",
10020
+ "privacy": "private"
10021
+ },
10022
+ {
10023
+ "kind": "method",
10024
+ "name": "setLastInGroup",
10025
+ "privacy": "private"
10026
+ },
10027
+ {
10028
+ "kind": "method",
10029
+ "name": "render"
10030
+ }
10031
+ ],
10032
+ "attributes": [
10033
+ {
10034
+ "name": "usage"
10035
+ }
10036
+ ],
10037
+ "superclass": {
10038
+ "name": "HTMLElement"
10039
+ },
10040
+ "tagName": "mui-slat-group",
10041
+ "customElement": true
10042
+ }
10043
+ ],
10044
+ "exports": [
10045
+ {
10046
+ "kind": "custom-element-definition",
10047
+ "name": "mui-slat-group",
10048
+ "declaration": {
10049
+ "name": "MuiSlatGroup",
10050
+ "module": "src/components/mui-slat/group/index.ts"
10051
+ }
10052
+ }
10053
+ ]
10054
+ },
9990
10055
  {
9991
10056
  "kind": "javascript-module",
9992
10057
  "path": "src/components/mui-slat/slat/index.ts",
@@ -10142,65 +10207,52 @@
10142
10207
  },
10143
10208
  {
10144
10209
  "kind": "javascript-module",
10145
- "path": "src/components/mui-slat/group/index.ts",
10210
+ "path": "src/components/mui-stepper/step/index.ts",
10146
10211
  "declarations": [
10147
10212
  {
10148
10213
  "kind": "class",
10149
10214
  "description": "",
10150
- "name": "MuiSlatGroup",
10215
+ "name": "MuiStep",
10151
10216
  "members": [
10152
10217
  {
10153
- "kind": "field",
10154
- "name": "usage",
10155
- "type": {
10156
- "text": "string"
10157
- },
10158
- "privacy": "private",
10159
- "default": "\"\""
10218
+ "kind": "method",
10219
+ "name": "render"
10220
+ }
10221
+ ],
10222
+ "attributes": [
10223
+ {
10224
+ "name": "state"
10160
10225
  },
10161
10226
  {
10162
- "kind": "field",
10163
- "name": "mutationObserver",
10164
- "type": {
10165
- "text": "MutationObserver | null"
10166
- },
10167
- "privacy": "private",
10168
- "default": "null"
10227
+ "name": "resolved-state"
10169
10228
  },
10170
10229
  {
10171
- "kind": "method",
10172
- "name": "observeSlotChanges",
10173
- "privacy": "private"
10230
+ "name": "title"
10174
10231
  },
10175
10232
  {
10176
- "kind": "method",
10177
- "name": "setLastInGroup",
10178
- "privacy": "private"
10233
+ "name": "direction"
10179
10234
  },
10180
10235
  {
10181
- "kind": "method",
10182
- "name": "render"
10183
- }
10184
- ],
10185
- "attributes": [
10236
+ "name": "hide-icon"
10237
+ },
10186
10238
  {
10187
- "name": "usage"
10239
+ "name": "size"
10188
10240
  }
10189
10241
  ],
10190
10242
  "superclass": {
10191
10243
  "name": "HTMLElement"
10192
10244
  },
10193
- "tagName": "mui-slat-group",
10245
+ "tagName": "mui-step",
10194
10246
  "customElement": true
10195
10247
  }
10196
10248
  ],
10197
10249
  "exports": [
10198
10250
  {
10199
10251
  "kind": "custom-element-definition",
10200
- "name": "mui-slat-group",
10252
+ "name": "mui-step",
10201
10253
  "declaration": {
10202
- "name": "MuiSlatGroup",
10203
- "module": "src/components/mui-slat/group/index.ts"
10254
+ "name": "MuiStep",
10255
+ "module": "src/components/mui-stepper/step/index.ts"
10204
10256
  }
10205
10257
  }
10206
10258
  ]
@@ -10464,12 +10516,12 @@
10464
10516
  },
10465
10517
  {
10466
10518
  "kind": "javascript-module",
10467
- "path": "src/components/mui-stepper/step/index.ts",
10519
+ "path": "src/components/mui-table/cell/index.ts",
10468
10520
  "declarations": [
10469
10521
  {
10470
10522
  "kind": "class",
10471
10523
  "description": "",
10472
- "name": "MuiStep",
10524
+ "name": "MuiCell",
10473
10525
  "members": [
10474
10526
  {
10475
10527
  "kind": "method",
@@ -10478,75 +10530,49 @@
10478
10530
  ],
10479
10531
  "attributes": [
10480
10532
  {
10481
- "name": "state"
10482
- },
10483
- {
10484
- "name": "resolved-state"
10485
- },
10486
- {
10487
- "name": "title"
10488
- },
10489
- {
10490
- "name": "direction"
10491
- },
10492
- {
10493
- "name": "hide-icon"
10494
- },
10495
- {
10496
- "name": "size"
10533
+ "name": "align-y"
10497
10534
  }
10498
10535
  ],
10499
10536
  "superclass": {
10500
10537
  "name": "HTMLElement"
10501
10538
  },
10502
- "tagName": "mui-step",
10539
+ "tagName": "mui-cell",
10503
10540
  "customElement": true
10504
10541
  }
10505
10542
  ],
10506
10543
  "exports": [
10507
10544
  {
10508
10545
  "kind": "custom-element-definition",
10509
- "name": "mui-step",
10546
+ "name": "mui-cell",
10510
10547
  "declaration": {
10511
- "name": "MuiStep",
10512
- "module": "src/components/mui-stepper/step/index.ts"
10548
+ "name": "MuiCell",
10549
+ "module": "src/components/mui-table/cell/index.ts"
10513
10550
  }
10514
10551
  }
10515
10552
  ]
10516
10553
  },
10517
10554
  {
10518
10555
  "kind": "javascript-module",
10519
- "path": "src/components/mui-table/cell/index.ts",
10556
+ "path": "src/components/mui-table/row-group/index.ts",
10520
10557
  "declarations": [
10521
10558
  {
10522
10559
  "kind": "class",
10523
10560
  "description": "",
10524
- "name": "MuiCell",
10525
- "members": [
10526
- {
10527
- "kind": "method",
10528
- "name": "render"
10529
- }
10530
- ],
10531
- "attributes": [
10532
- {
10533
- "name": "align-y"
10534
- }
10535
- ],
10561
+ "name": "MuiRowGroup",
10536
10562
  "superclass": {
10537
10563
  "name": "HTMLElement"
10538
10564
  },
10539
- "tagName": "mui-cell",
10565
+ "tagName": "mui-row-group",
10540
10566
  "customElement": true
10541
10567
  }
10542
10568
  ],
10543
10569
  "exports": [
10544
10570
  {
10545
10571
  "kind": "custom-element-definition",
10546
- "name": "mui-cell",
10572
+ "name": "mui-row-group",
10547
10573
  "declaration": {
10548
- "name": "MuiCell",
10549
- "module": "src/components/mui-table/cell/index.ts"
10574
+ "name": "MuiRowGroup",
10575
+ "module": "src/components/mui-table/row-group/index.ts"
10550
10576
  }
10551
10577
  }
10552
10578
  ]
@@ -10594,32 +10620,6 @@
10594
10620
  }
10595
10621
  ]
10596
10622
  },
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
10623
  {
10624
10624
  "kind": "javascript-module",
10625
10625
  "path": "src/components/mui-table/table/index.ts",
@@ -10823,6 +10823,51 @@
10823
10823
  }
10824
10824
  ]
10825
10825
  },
10826
+ {
10827
+ "kind": "javascript-module",
10828
+ "path": "src/components/mui-tabs/panel/index.ts",
10829
+ "declarations": [
10830
+ {
10831
+ "kind": "class",
10832
+ "description": "",
10833
+ "name": "MuiTabPanel",
10834
+ "members": [
10835
+ {
10836
+ "kind": "field",
10837
+ "name": "item",
10838
+ "type": {
10839
+ "text": "string | null"
10840
+ }
10841
+ },
10842
+ {
10843
+ "kind": "field",
10844
+ "name": "innerHTML",
10845
+ "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
10846
+ }
10847
+ ],
10848
+ "attributes": [
10849
+ {
10850
+ "name": "item"
10851
+ }
10852
+ ],
10853
+ "superclass": {
10854
+ "name": "HTMLElement"
10855
+ },
10856
+ "tagName": "mui-tab-panel",
10857
+ "customElement": true
10858
+ }
10859
+ ],
10860
+ "exports": [
10861
+ {
10862
+ "kind": "custom-element-definition",
10863
+ "name": "mui-tab-panel",
10864
+ "declaration": {
10865
+ "name": "MuiTabPanel",
10866
+ "module": "src/components/mui-tabs/panel/index.ts"
10867
+ }
10868
+ }
10869
+ ]
10870
+ },
10826
10871
  {
10827
10872
  "kind": "javascript-module",
10828
10873
  "path": "src/components/mui-tabs/tab-bar/index.ts",
@@ -10982,51 +11027,6 @@
10982
11027
  }
10983
11028
  }
10984
11029
  ]
10985
- },
10986
- {
10987
- "kind": "javascript-module",
10988
- "path": "src/components/mui-tabs/panel/index.ts",
10989
- "declarations": [
10990
- {
10991
- "kind": "class",
10992
- "description": "",
10993
- "name": "MuiTabPanel",
10994
- "members": [
10995
- {
10996
- "kind": "field",
10997
- "name": "item",
10998
- "type": {
10999
- "text": "string | null"
11000
- }
11001
- },
11002
- {
11003
- "kind": "field",
11004
- "name": "innerHTML",
11005
- "default": "` <style> :host { display: block; } :host([hidden]) { display: none !important; } .inner { padding: var(--tab-panel-padding, 0); } </style> <div class=\"inner\"> <slot></slot> </div> `"
11006
- }
11007
- ],
11008
- "attributes": [
11009
- {
11010
- "name": "item"
11011
- }
11012
- ],
11013
- "superclass": {
11014
- "name": "HTMLElement"
11015
- },
11016
- "tagName": "mui-tab-panel",
11017
- "customElement": true
11018
- }
11019
- ],
11020
- "exports": [
11021
- {
11022
- "kind": "custom-element-definition",
11023
- "name": "mui-tab-panel",
11024
- "declaration": {
11025
- "name": "MuiTabPanel",
11026
- "module": "src/components/mui-tabs/panel/index.ts"
11027
- }
11028
- }
11029
- ]
11030
11030
  }
11031
11031
  ]
11032
11032
  }