@tanishqkancharla/maui 0.0.46 → 0.0.48

package/dist/components/Code.js

@@ -8,9 +8,10 @@ const codeClass = style(monospace, radius.sm, spacing.padding({ x: 2, y: 1 }), {
     backgroundColor: colors.gray[3],
     color: colors.gray[12],
     display: "inline",
-    boxDecorationBreak: "clone",
+    boxDecorationBreak: "slice",
     fontSize: "0.875em",
-    whiteSpace: "nowrap",
+    whiteSpace: "normal",
+    overflowWrap: "anywhere",
 });
 const kbdClass = style(text({ size: "xs", fontWeight: 400, color: "lowContrast" }), radius.sm, {
     backgroundColor: colors.gray[3],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.46",
+	"version": "0.0.48",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/references/design_conventions.md

@@ -6,6 +6,7 @@ Patterns, demo apps, and the gallery `Panel` preview frame are not package compo
 
 ## Composition
 
+- Use Maui's `Text` component instead of raw `<span>` elements for inline text. Set typography through its `size`, `fontWeight`, `color`, `monospace`, and `tabular` props; see [Text](components/text.md). Keep semantic elements such as headings, paragraphs, labels, and links for their respective roles.
 - Hover backgrounds have no transitions. Hover fills such as `backgroundColor.elementHover`, quiet-button washes, and list or row highlights snap instantly. Do not animate `background` or `background-color` on hover with `motion.standard(...)` or a CSS `transition`. Other motion, including tooltips and transforms, is allowed.
 - Simple apps default to a prose column: `style(proseContainerStyle, { width: "100%", marginInline: "auto" })`. `sizing.contentWidth` is that same style. Use it for single-column tools, settings, forms, and reading layouts. Multi-pane or full-bleed apps such as inboxes, calendars, and IDEs are exceptions.
 - Design an intentional empty composition for every list, inbox, search result, or collection. Include copy and, when useful, an action. Do not leave a blank panel.

package/src/components/Code.tsx

@@ -21,9 +21,10 @@ const codeClass = style(
 		backgroundColor: colors.gray[3],
 		color: colors.gray[12],
 		display: "inline",
-		boxDecorationBreak: "clone",
+		boxDecorationBreak: "slice",
 		fontSize: "0.875em",
-		whiteSpace: "nowrap",
+		whiteSpace: "normal",
+		overflowWrap: "anywhere",
 	},
 )