@instruments/materia-ui 0.3.1 → 0.4.1

package/agent-docs.md

@@ -14,7 +14,7 @@ Do and don't guidance for coding agents, one section per component, taken from `
 - Import icons through `Icon` and primitives through these components, never from `lucide-react` or `@base-ui/react` directly.
 - Check your work with the `materia-ui-lint` class scanner (`--all` for every rule). The Oxlint preset is `@instruments/materia-ui/lint/oxlint`.
 
-Documented components: 196
+Documented components: 197
 
 ## AccordionRoot
 
@@ -997,6 +997,17 @@ Brand mark. Renders the Material Bank logo by default; pass `mark` (and `label`)
 - Don't add your own `aria-label`/`role` - `Logo` already ships `role="img"` + "Material Bank" (change the name with `label`); wrap it in a link only when you need a click target.
 - To use your own brand, pass `mark` as SVG shapes in a 48x48 viewBox filled with `currentColor`, and a matching `label` - don't wrap or overlay the default mark.
 
+## Logotype
+
+`@instruments/materia-ui/components/logotype`
+
+Brand logotype: the Material Bank mark with the name beside it, "Material" over "Bank" in Inter Bold, as one lockup. Uses currentColor for fill, so colour can be controlled via text-* classes.
+
+- Recolour the lockup with a `text-*` class - it fills from `currentColor`; passing `fill`/a hex defeats the single-source colour and breaks dark-mode inheritance.
+- Size with the `size` preset (`sm`–`xl`), which sets the height, not a `className` width/height - presets keep the lockup on the shared `ComponentSize` scale and in proportion.
+- Don't add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.
+- Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.
+
 ## MarqueeText
 
 `@instruments/materia-ui/components/marquee-text`

package/brand/material-bank-logotype-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.58 5.69 134.85 36.03"><title>Material Bank</title><path d="M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z" fill-rule="evenodd" fill="#ffffff"/><path d="M60.01 21.24L60.01 6.5L64.64 6.5L67.04 13.27Q67.18 13.74 67.38 14.49Q67.57 15.25 67.77 16.12Q67.97 16.99 68.14 17.81Q68.31 18.63 68.42 19.23L67.84 19.23Q67.95 18.64 68.12 17.82Q68.29 17.01 68.49 16.14Q68.69 15.26 68.88 14.5Q69.07 13.74 69.22 13.27L71.58 6.5L76.23 6.5L76.23 21.24L73.19 21.24L73.19 14.29Q73.19 13.81 73.21 13.09Q73.23 12.37 73.25 11.53Q73.27 10.69 73.29 9.85Q73.31 9 73.32 8.25L73.51 8.25Q73.32 9.07 73.09 9.95Q72.86 10.82 72.63 11.64Q72.4 12.47 72.19 13.15Q71.98 13.84 71.83 14.29L69.39 21.24L66.85 21.24L64.36 14.29Q64.22 13.84 64.01 13.16Q63.8 12.49 63.57 11.66Q63.34 10.84 63.1 9.97Q62.86 9.09 62.64 8.25L62.88 8.25Q62.89 8.96 62.91 9.8Q62.93 10.64 62.96 11.49Q62.98 12.34 62.99 13.06Q63.01 13.79 63.01 14.29L63.01 21.24ZM81.9 21.46Q80.86 21.46 80.02 21.09Q79.18 20.72 78.7 19.98Q78.22 19.24 78.22 18.14Q78.22 17.22 78.57 16.6Q78.91 15.98 79.5 15.6Q80.08 15.23 80.83 15.03Q81.58 14.83 82.4 14.75Q83.36 14.65 83.95 14.57Q84.54 14.48 84.81 14.3Q85.08 14.12 85.08 13.76L85.08 13.71Q85.08 13.24 84.88 12.91Q84.68 12.58 84.3 12.41Q83.91 12.24 83.35 12.24Q82.78 12.24 82.35 12.41Q81.92 12.58 81.66 12.87Q81.39 13.16 81.26 13.51L78.54 13.06Q78.83 12.1 79.49 11.43Q80.15 10.75 81.14 10.4Q82.12 10.04 83.35 10.04Q84.25 10.04 85.09 10.25Q85.93 10.47 86.6 10.91Q87.27 11.36 87.66 12.07Q88.05 12.78 88.05 13.79L88.05 21.24L85.24 21.24L85.24 19.71L85.14 19.71Q84.87 20.22 84.43 20.61Q83.98 21 83.35 21.23Q82.73 21.46 81.9 21.46ZM82.75 19.37Q83.45 19.37 83.98 19.09Q84.51 18.82 84.8 18.34Q85.1 17.87 85.1 17.28L85.1 16.09Q84.97 16.18 84.7 16.26Q84.44 16.34 84.11 16.4Q83.78 16.46 83.47 16.51Q83.15 16.56 82.9 16.59Q82.36 16.67 81.94 16.85Q81.53 17.03 81.3 17.32Q81.07 17.61 81.07 18.06Q81.07 18.49 81.29 18.78Q81.51 19.07 81.88 19.22Q82.25 19.37 82.75 19.37ZM96.07 10.18L96.07 12.45L89.51 12.45L89.51 10.18ZM91.04 7.55L94 7.55L94 18.01Q94 18.53 94.24 18.78Q94.47 19.03 95.01 19.03Q95.18 19.03 95.49 18.99Q95.79 18.94 95.95 18.91L96.38 21.13Q95.88 21.28 95.39 21.34Q94.9 21.4 94.46 21.4Q92.8 21.4 91.92 20.59Q91.04 19.78 91.04 18.26ZM102.8 21.46Q101.11 21.46 99.88 20.77Q98.65 20.07 97.99 18.8Q97.34 17.52 97.34 15.77Q97.34 14.06 97.99 12.77Q98.64 11.49 99.84 10.76Q101.04 10.04 102.65 10.04Q103.74 10.04 104.68 10.39Q105.62 10.73 106.33 11.43Q107.04 12.13 107.44 13.18Q107.84 14.23 107.84 15.65L107.84 16.48L98.55 16.48L98.55 14.62L106.39 14.62L105 15.12Q105 14.26 104.74 13.62Q104.48 12.98 103.96 12.63Q103.44 12.28 102.67 12.28Q101.91 12.28 101.37 12.63Q100.83 12.99 100.55 13.6Q100.28 14.21 100.28 14.99L100.28 16.3Q100.28 17.26 100.6 17.92Q100.92 18.57 101.5 18.9Q102.08 19.22 102.85 19.22Q103.37 19.22 103.8 19.07Q104.22 18.93 104.52 18.63Q104.83 18.34 104.98 17.92L107.67 18.42Q107.41 19.33 106.74 20.02Q106.08 20.71 105.09 21.08Q104.09 21.46 102.8 21.46ZM109.87 21.24L109.87 10.18L112.74 10.18L112.74 12.11L112.86 12.11Q113.17 11.08 113.88 10.56Q114.6 10.03 115.53 10.03Q115.76 10.03 116.02 10.06Q116.28 10.08 116.49 10.13L116.49 12.78Q116.29 12.71 115.92 12.67Q115.54 12.63 115.2 12.63Q114.53 12.63 113.99 12.93Q113.44 13.22 113.14 13.74Q112.84 14.26 112.84 14.95L112.84 21.24ZM118.21 21.24L118.21 10.18L121.18 10.18L121.18 21.24ZM119.69 8.74Q119.02 8.74 118.55 8.29Q118.07 7.85 118.07 7.21Q118.07 6.58 118.55 6.13Q119.02 5.69 119.69 5.69Q120.37 5.69 120.85 6.13Q121.33 6.57 121.33 7.21Q121.33 7.85 120.85 8.29Q120.37 8.74 119.69 8.74ZM126.79 21.46Q125.74 21.46 124.9 21.09Q124.07 20.72 123.59 19.98Q123.11 19.24 123.11 18.14Q123.11 17.22 123.45 16.6Q123.79 15.98 124.38 15.6Q124.97 15.23 125.71 15.03Q126.46 14.83 127.28 14.75Q128.24 14.65 128.83 14.57Q129.42 14.48 129.69 14.3Q129.96 14.12 129.96 13.76L129.96 13.71Q129.96 13.24 129.76 12.91Q129.57 12.58 129.18 12.41Q128.8 12.24 128.23 12.24Q127.66 12.24 127.23 12.41Q126.81 12.58 126.54 12.87Q126.27 13.16 126.14 13.51L123.42 13.06Q123.71 12.1 124.37 11.43Q125.04 10.75 126.02 10.4Q127 10.04 128.23 10.04Q129.13 10.04 129.97 10.25Q130.81 10.47 131.48 10.91Q132.15 11.36 132.54 12.07Q132.93 12.78 132.93 13.79L132.93 21.24L130.12 21.24L130.12 19.71L130.02 19.71Q129.76 20.22 129.31 20.61Q128.86 21 128.24 21.23Q127.61 21.46 126.79 21.46ZM127.63 19.37Q128.33 19.37 128.86 19.09Q129.39 18.82 129.69 18.34Q129.98 17.87 129.98 17.28L129.98 16.09Q129.85 16.18 129.59 16.26Q129.32 16.34 128.99 16.4Q128.67 16.46 128.35 16.51Q128.03 16.56 127.79 16.59Q127.24 16.67 126.83 16.85Q126.41 17.03 126.18 17.32Q125.96 17.61 125.96 18.06Q125.96 18.49 126.17 18.78Q126.39 19.07 126.76 19.22Q127.13 19.37 127.63 19.37ZM138.43 6.5L138.43 21.24L135.46 21.24L135.46 6.5ZM60.01 41.5L60.01 26.76L65.86 26.76Q67.48 26.76 68.56 27.25Q69.65 27.74 70.19 28.59Q70.73 29.44 70.73 30.55Q70.73 31.42 70.38 32.07Q70.03 32.72 69.43 33.13Q68.84 33.54 68.07 33.71L68.07 33.86Q68.91 33.89 69.64 34.33Q70.38 34.77 70.84 35.56Q71.3 36.35 71.3 37.44Q71.3 38.6 70.73 39.52Q70.15 40.44 69.03 40.97Q67.91 41.5 66.23 41.5ZM63.03 39.02L65.64 39.02Q66.97 39.02 67.58 38.5Q68.19 37.99 68.19 37.16Q68.19 36.52 67.89 36.04Q67.59 35.56 67.04 35.29Q66.48 35.02 65.72 35.02L63.03 35.02ZM63.03 32.95L65.41 32.95Q66.06 32.95 66.57 32.72Q67.09 32.49 67.38 32.06Q67.67 31.63 67.67 31.03Q67.67 30.23 67.1 29.73Q66.53 29.22 65.47 29.22L63.03 29.22ZM76.43 41.72Q75.39 41.72 74.55 41.35Q73.71 40.98 73.23 40.24Q72.75 39.5 72.75 38.4Q72.75 37.48 73.1 36.86Q73.44 36.24 74.03 35.86Q74.61 35.49 75.36 35.29Q76.11 35.09 76.93 35.01Q77.89 34.91 78.48 34.83Q79.07 34.74 79.34 34.56Q79.61 34.38 79.61 34.02L79.61 33.97Q79.61 33.5 79.41 33.17Q79.21 32.84 78.83 32.67Q78.44 32.5 77.88 32.5Q77.3 32.5 76.88 32.67Q76.45 32.84 76.19 33.13Q75.92 33.42 75.79 33.77L73.07 33.32Q73.36 32.36 74.02 31.69Q74.68 31.01 75.67 30.66Q76.65 30.3 77.88 30.3Q78.78 30.3 79.62 30.51Q80.46 30.73 81.13 31.17Q81.8 31.62 82.19 32.33Q82.58 33.04 82.58 34.05L82.58 41.5L79.77 41.5L79.77 39.97L79.67 39.97Q79.4 40.48 78.96 40.87Q78.51 41.26 77.88 41.49Q77.26 41.72 76.43 41.72ZM77.27 39.63Q77.98 39.63 78.51 39.35Q79.04 39.08 79.33 38.6Q79.63 38.13 79.63 37.54L79.63 36.35Q79.5 36.44 79.23 36.52Q78.97 36.6 78.64 36.66Q78.31 36.72 78 36.77Q77.68 36.82 77.43 36.85Q76.89 36.93 76.47 37.11Q76.06 37.29 75.83 37.58Q75.6 37.87 75.6 38.32Q75.6 38.75 75.82 39.04Q76.04 39.33 76.41 39.48Q76.78 39.63 77.27 39.63ZM88.08 35.1L88.08 41.5L85.11 41.5L85.11 30.44L87.91 30.44L87.96 33.2L87.78 33.2Q88.22 31.82 89.1 31.06Q89.99 30.3 91.39 30.3Q92.54 30.3 93.39 30.8Q94.24 31.3 94.72 32.24Q95.19 33.17 95.19 34.47L95.19 41.5L92.22 41.5L92.22 34.98Q92.22 33.95 91.69 33.37Q91.16 32.78 90.22 32.78Q89.6 32.78 89.11 33.06Q88.62 33.33 88.35 33.84Q88.08 34.36 88.08 35.1ZM100.41 38.27L100.41 34.69L100.86 34.69L104.48 30.44L107.91 30.44L103.13 35.99L102.43 35.99ZM97.72 41.5L97.72 26.76L100.69 26.76L100.69 41.5ZM104.63 41.5L101.3 36.65L103.29 34.55L108.12 41.5Z" fill="#ffffff"/></svg>

package/brand/material-bank-logotype.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.58 5.69 134.85 36.03"><title>Material Bank</title><path d="M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z" fill-rule="evenodd" fill="#000000"/><path d="M60.01 21.24L60.01 6.5L64.64 6.5L67.04 13.27Q67.18 13.74 67.38 14.49Q67.57 15.25 67.77 16.12Q67.97 16.99 68.14 17.81Q68.31 18.63 68.42 19.23L67.84 19.23Q67.95 18.64 68.12 17.82Q68.29 17.01 68.49 16.14Q68.69 15.26 68.88 14.5Q69.07 13.74 69.22 13.27L71.58 6.5L76.23 6.5L76.23 21.24L73.19 21.24L73.19 14.29Q73.19 13.81 73.21 13.09Q73.23 12.37 73.25 11.53Q73.27 10.69 73.29 9.85Q73.31 9 73.32 8.25L73.51 8.25Q73.32 9.07 73.09 9.95Q72.86 10.82 72.63 11.64Q72.4 12.47 72.19 13.15Q71.98 13.84 71.83 14.29L69.39 21.24L66.85 21.24L64.36 14.29Q64.22 13.84 64.01 13.16Q63.8 12.49 63.57 11.66Q63.34 10.84 63.1 9.97Q62.86 9.09 62.64 8.25L62.88 8.25Q62.89 8.96 62.91 9.8Q62.93 10.64 62.96 11.49Q62.98 12.34 62.99 13.06Q63.01 13.79 63.01 14.29L63.01 21.24ZM81.9 21.46Q80.86 21.46 80.02 21.09Q79.18 20.72 78.7 19.98Q78.22 19.24 78.22 18.14Q78.22 17.22 78.57 16.6Q78.91 15.98 79.5 15.6Q80.08 15.23 80.83 15.03Q81.58 14.83 82.4 14.75Q83.36 14.65 83.95 14.57Q84.54 14.48 84.81 14.3Q85.08 14.12 85.08 13.76L85.08 13.71Q85.08 13.24 84.88 12.91Q84.68 12.58 84.3 12.41Q83.91 12.24 83.35 12.24Q82.78 12.24 82.35 12.41Q81.92 12.58 81.66 12.87Q81.39 13.16 81.26 13.51L78.54 13.06Q78.83 12.1 79.49 11.43Q80.15 10.75 81.14 10.4Q82.12 10.04 83.35 10.04Q84.25 10.04 85.09 10.25Q85.93 10.47 86.6 10.91Q87.27 11.36 87.66 12.07Q88.05 12.78 88.05 13.79L88.05 21.24L85.24 21.24L85.24 19.71L85.14 19.71Q84.87 20.22 84.43 20.61Q83.98 21 83.35 21.23Q82.73 21.46 81.9 21.46ZM82.75 19.37Q83.45 19.37 83.98 19.09Q84.51 18.82 84.8 18.34Q85.1 17.87 85.1 17.28L85.1 16.09Q84.97 16.18 84.7 16.26Q84.44 16.34 84.11 16.4Q83.78 16.46 83.47 16.51Q83.15 16.56 82.9 16.59Q82.36 16.67 81.94 16.85Q81.53 17.03 81.3 17.32Q81.07 17.61 81.07 18.06Q81.07 18.49 81.29 18.78Q81.51 19.07 81.88 19.22Q82.25 19.37 82.75 19.37ZM96.07 10.18L96.07 12.45L89.51 12.45L89.51 10.18ZM91.04 7.55L94 7.55L94 18.01Q94 18.53 94.24 18.78Q94.47 19.03 95.01 19.03Q95.18 19.03 95.49 18.99Q95.79 18.94 95.95 18.91L96.38 21.13Q95.88 21.28 95.39 21.34Q94.9 21.4 94.46 21.4Q92.8 21.4 91.92 20.59Q91.04 19.78 91.04 18.26ZM102.8 21.46Q101.11 21.46 99.88 20.77Q98.65 20.07 97.99 18.8Q97.34 17.52 97.34 15.77Q97.34 14.06 97.99 12.77Q98.64 11.49 99.84 10.76Q101.04 10.04 102.65 10.04Q103.74 10.04 104.68 10.39Q105.62 10.73 106.33 11.43Q107.04 12.13 107.44 13.18Q107.84 14.23 107.84 15.65L107.84 16.48L98.55 16.48L98.55 14.62L106.39 14.62L105 15.12Q105 14.26 104.74 13.62Q104.48 12.98 103.96 12.63Q103.44 12.28 102.67 12.28Q101.91 12.28 101.37 12.63Q100.83 12.99 100.55 13.6Q100.28 14.21 100.28 14.99L100.28 16.3Q100.28 17.26 100.6 17.92Q100.92 18.57 101.5 18.9Q102.08 19.22 102.85 19.22Q103.37 19.22 103.8 19.07Q104.22 18.93 104.52 18.63Q104.83 18.34 104.98 17.92L107.67 18.42Q107.41 19.33 106.74 20.02Q106.08 20.71 105.09 21.08Q104.09 21.46 102.8 21.46ZM109.87 21.24L109.87 10.18L112.74 10.18L112.74 12.11L112.86 12.11Q113.17 11.08 113.88 10.56Q114.6 10.03 115.53 10.03Q115.76 10.03 116.02 10.06Q116.28 10.08 116.49 10.13L116.49 12.78Q116.29 12.71 115.92 12.67Q115.54 12.63 115.2 12.63Q114.53 12.63 113.99 12.93Q113.44 13.22 113.14 13.74Q112.84 14.26 112.84 14.95L112.84 21.24ZM118.21 21.24L118.21 10.18L121.18 10.18L121.18 21.24ZM119.69 8.74Q119.02 8.74 118.55 8.29Q118.07 7.85 118.07 7.21Q118.07 6.58 118.55 6.13Q119.02 5.69 119.69 5.69Q120.37 5.69 120.85 6.13Q121.33 6.57 121.33 7.21Q121.33 7.85 120.85 8.29Q120.37 8.74 119.69 8.74ZM126.79 21.46Q125.74 21.46 124.9 21.09Q124.07 20.72 123.59 19.98Q123.11 19.24 123.11 18.14Q123.11 17.22 123.45 16.6Q123.79 15.98 124.38 15.6Q124.97 15.23 125.71 15.03Q126.46 14.83 127.28 14.75Q128.24 14.65 128.83 14.57Q129.42 14.48 129.69 14.3Q129.96 14.12 129.96 13.76L129.96 13.71Q129.96 13.24 129.76 12.91Q129.57 12.58 129.18 12.41Q128.8 12.24 128.23 12.24Q127.66 12.24 127.23 12.41Q126.81 12.58 126.54 12.87Q126.27 13.16 126.14 13.51L123.42 13.06Q123.71 12.1 124.37 11.43Q125.04 10.75 126.02 10.4Q127 10.04 128.23 10.04Q129.13 10.04 129.97 10.25Q130.81 10.47 131.48 10.91Q132.15 11.36 132.54 12.07Q132.93 12.78 132.93 13.79L132.93 21.24L130.12 21.24L130.12 19.71L130.02 19.71Q129.76 20.22 129.31 20.61Q128.86 21 128.24 21.23Q127.61 21.46 126.79 21.46ZM127.63 19.37Q128.33 19.37 128.86 19.09Q129.39 18.82 129.69 18.34Q129.98 17.87 129.98 17.28L129.98 16.09Q129.85 16.18 129.59 16.26Q129.32 16.34 128.99 16.4Q128.67 16.46 128.35 16.51Q128.03 16.56 127.79 16.59Q127.24 16.67 126.83 16.85Q126.41 17.03 126.18 17.32Q125.96 17.61 125.96 18.06Q125.96 18.49 126.17 18.78Q126.39 19.07 126.76 19.22Q127.13 19.37 127.63 19.37ZM138.43 6.5L138.43 21.24L135.46 21.24L135.46 6.5ZM60.01 41.5L60.01 26.76L65.86 26.76Q67.48 26.76 68.56 27.25Q69.65 27.74 70.19 28.59Q70.73 29.44 70.73 30.55Q70.73 31.42 70.38 32.07Q70.03 32.72 69.43 33.13Q68.84 33.54 68.07 33.71L68.07 33.86Q68.91 33.89 69.64 34.33Q70.38 34.77 70.84 35.56Q71.3 36.35 71.3 37.44Q71.3 38.6 70.73 39.52Q70.15 40.44 69.03 40.97Q67.91 41.5 66.23 41.5ZM63.03 39.02L65.64 39.02Q66.97 39.02 67.58 38.5Q68.19 37.99 68.19 37.16Q68.19 36.52 67.89 36.04Q67.59 35.56 67.04 35.29Q66.48 35.02 65.72 35.02L63.03 35.02ZM63.03 32.95L65.41 32.95Q66.06 32.95 66.57 32.72Q67.09 32.49 67.38 32.06Q67.67 31.63 67.67 31.03Q67.67 30.23 67.1 29.73Q66.53 29.22 65.47 29.22L63.03 29.22ZM76.43 41.72Q75.39 41.72 74.55 41.35Q73.71 40.98 73.23 40.24Q72.75 39.5 72.75 38.4Q72.75 37.48 73.1 36.86Q73.44 36.24 74.03 35.86Q74.61 35.49 75.36 35.29Q76.11 35.09 76.93 35.01Q77.89 34.91 78.48 34.83Q79.07 34.74 79.34 34.56Q79.61 34.38 79.61 34.02L79.61 33.97Q79.61 33.5 79.41 33.17Q79.21 32.84 78.83 32.67Q78.44 32.5 77.88 32.5Q77.3 32.5 76.88 32.67Q76.45 32.84 76.19 33.13Q75.92 33.42 75.79 33.77L73.07 33.32Q73.36 32.36 74.02 31.69Q74.68 31.01 75.67 30.66Q76.65 30.3 77.88 30.3Q78.78 30.3 79.62 30.51Q80.46 30.73 81.13 31.17Q81.8 31.62 82.19 32.33Q82.58 33.04 82.58 34.05L82.58 41.5L79.77 41.5L79.77 39.97L79.67 39.97Q79.4 40.48 78.96 40.87Q78.51 41.26 77.88 41.49Q77.26 41.72 76.43 41.72ZM77.27 39.63Q77.98 39.63 78.51 39.35Q79.04 39.08 79.33 38.6Q79.63 38.13 79.63 37.54L79.63 36.35Q79.5 36.44 79.23 36.52Q78.97 36.6 78.64 36.66Q78.31 36.72 78 36.77Q77.68 36.82 77.43 36.85Q76.89 36.93 76.47 37.11Q76.06 37.29 75.83 37.58Q75.6 37.87 75.6 38.32Q75.6 38.75 75.82 39.04Q76.04 39.33 76.41 39.48Q76.78 39.63 77.27 39.63ZM88.08 35.1L88.08 41.5L85.11 41.5L85.11 30.44L87.91 30.44L87.96 33.2L87.78 33.2Q88.22 31.82 89.1 31.06Q89.99 30.3 91.39 30.3Q92.54 30.3 93.39 30.8Q94.24 31.3 94.72 32.24Q95.19 33.17 95.19 34.47L95.19 41.5L92.22 41.5L92.22 34.98Q92.22 33.95 91.69 33.37Q91.16 32.78 90.22 32.78Q89.6 32.78 89.11 33.06Q88.62 33.33 88.35 33.84Q88.08 34.36 88.08 35.1ZM100.41 38.27L100.41 34.69L100.86 34.69L104.48 30.44L107.91 30.44L103.13 35.99L102.43 35.99ZM97.72 41.5L97.72 26.76L100.69 26.76L100.69 41.5ZM104.63 41.5L101.3 36.65L103.29 34.55L108.12 41.5Z" fill="#000000"/></svg>

package/brand/material-bank-mark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.58 6.5 40.83 35"><title>Material Bank</title><path d="M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z" fill-rule="evenodd" fill="#ffffff"/></svg>

package/brand/material-bank-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.58 6.5 40.83 35"><title>Material Bank</title><path d="M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z" fill-rule="evenodd" fill="#000000"/></svg>

package/dist/components/command/command-dialog.d.ts

@@ -10,7 +10,11 @@ export type CommandDialogProps<Item> = Omit<React.ComponentProps<typeof Dialog>,
     description?: string;
     /** Extra class names applied to the `DialogContent` wrapper. */
     className?: string;
-    /** Whether to show the dialog close button. */
+    /**
+     * Whether to show the dialog close button. Off by default: the button sits
+     * over the search field, and Escape or a click outside closes the palette.
+     * @default false
+     */
     showCloseButton?: boolean;
     /** Extra props applied to the rendered dialog content element. */
     contentProps?: Omit<React.ComponentProps<typeof DialogContent>, "children"> & React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/command/command-dialog.js

@@ -14,7 +14,7 @@ import { Command } from "../command/command-root.js";
  * @bestPractice Pass `filter={null}` to list the entries unfiltered, for example when the application filters them itself.
  */
 export const CommandDialog = (props) => {
-    const { title = "Command Palette", description = "Search for a command to run…", children, className, showCloseButton = true, contentProps, filter, groups: _groups, items: _items, limit, mode, ...dialogProps } = props;
+    const { title = "Command Palette", description = "Search for a command to run…", children, className, showCloseButton = false, contentProps, filter, groups: _groups, items: _items, limit, mode, ...dialogProps } = props;
     // Narrow on `props` so the palette receives exactly one of items or groups.
     const source = props.groups === undefined
         ? { items: props.items }

package/dist/components/command/command-input.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
-import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { Search } from "lucide-react";
 import { Icon } from "../icon.js";
@@ -9,4 +8,8 @@ import { Icon } from "../icon.js";
  * CommandInput renders the search field for a Command; typing filters the list.
  * Import from "@instruments/materia-ui/components/command".
  */
-export const CommandInput = ({ className, ...props }) => (_jsxs(AutocompletePrimitive.InputGroup, { className: "flex h-9 items-center gap-2 border-b px-3", "data-component": "command-input-wrapper", "data-slot": "command-input-wrapper", children: [_jsx(Icon, { className: "shrink-0 opacity-50", icon: Search, size: "xs" }), _jsx(AutocompletePrimitive.Input, { className: cn(focusRing(), "placeholder:text-muted-foreground text-paragraph-sm flex h-10 w-full rounded-lg bg-transparent py-3 disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-inset", className), "data-component": "command-input", "data-slot": "command-input", ...props })] }));
+export const CommandInput = ({ className, ...props }) => (_jsxs(AutocompletePrimitive.InputGroup, { className: "flex h-9 items-center gap-2 border-b px-3", "data-component": "command-input-wrapper", "data-slot": "command-input-wrapper", children: [_jsx(Icon, { className: "shrink-0 opacity-50", icon: Search, size: "xs" }), _jsx(AutocompletePrimitive.Input, { className: cn(
+            // No ring: the field is the palette's only input and always holds
+            // focus, so the caret marks it; a ring would collide with the
+            // dialog's rounded top edge.
+            "placeholder:text-muted-foreground text-paragraph-sm flex h-full w-full bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "command-input", "data-slot": "command-input", ...props })] }));

package/dist/components/logo/logo-mark.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The Material Bank mark's geometry, in one place: `Logo` draws it and
+ * `scripts/generate-brand-assets.mjs` writes the shipped SVG files from it.
+ * Plain constants with no imports, so a Node script can load this file
+ * directly.
+ */
+/** The mark, drawn in a 48x48 box. */
+export declare const LOGO_MARK_PATH = "M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z";
+/**
+ * The box that hugs the mark inside the 48x48 drawing, for standalone files:
+ * x 3.58 to 44.41, y 6.5 to 41.5.
+ */
+export declare const LOGO_MARK_TIGHT_VIEWBOX = "3.58 6.5 40.83 35";

package/dist/components/logo/logo-mark.js

@@ -0,0 +1,13 @@
+/**
+ * The Material Bank mark's geometry, in one place: `Logo` draws it and
+ * `scripts/generate-brand-assets.mjs` writes the shipped SVG files from it.
+ * Plain constants with no imports, so a Node script can load this file
+ * directly.
+ */
+/** The mark, drawn in a 48x48 box. */
+export const LOGO_MARK_PATH = "M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z";
+/**
+ * The box that hugs the mark inside the 48x48 drawing, for standalone files:
+ * x 3.58 to 44.41, y 6.5 to 41.5.
+ */
+export const LOGO_MARK_TIGHT_VIEWBOX = "3.58 6.5 40.83 35";

package/dist/components/logo/logo-root.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { LOGO_MARK_PATH } from "./logo-mark.js";
 const SIZE_MAP = {
     base: { height: 32, width: 32 },
     lg: { height: 40, width: 40 },
     sm: { height: 24, width: 24 },
     xl: { height: 48, width: 48 },
 };
-const DEFAULT_MARK = (_jsx("path", { clipRule: "evenodd", d: "M33.52 6.5H44.28C44.35 6.5 44.41 6.56 44.41 6.64V41.36C44.41 41.44 44.35 41.5 44.28 41.5H33.52C33.44 41.5 33.38 41.44 33.38 41.36V6.64C33.38 6.56 33.44 6.5 33.52 6.5ZM31.68 21.1C31.71 21.12 31.72 21.16 31.72 21.19C31.72 21.23 31.71 21.26 31.68 21.29L24.08 28.83C24.05 28.86 24.01 28.87 23.98 28.87C23.94 28.87 23.91 28.86 23.88 28.83L9.25 14.33C9.23 14.3 9.21 14.27 9.21 14.23C9.21 14.2 9.23 14.16 9.25 14.14L16.86 6.6C16.87 6.58 16.89 6.57 16.9 6.57C16.92 6.56 16.94 6.56 16.96 6.56C16.97 6.56 16.99 6.56 17.01 6.57C17.03 6.57 17.04 6.58 17.05 6.6L31.68 21.1ZM3.72 20.72H14.48C14.51 20.72 14.55 20.73 14.58 20.76C14.6 20.78 14.62 20.82 14.62 20.85V41.36C14.62 41.4 14.6 41.43 14.58 41.46C14.55 41.48 14.52 41.5 14.48 41.5H3.72C3.68 41.5 3.65 41.48 3.62 41.46C3.59 41.43 3.58 41.4 3.58 41.36V20.85C3.58 20.82 3.59 20.78 3.62 20.76C3.65 20.73 3.68 20.72 3.72 20.72V20.72Z", fill: "currentColor", fillRule: "evenodd" }));
+const DEFAULT_MARK = (_jsx("path", { clipRule: "evenodd", d: LOGO_MARK_PATH, fill: "currentColor", fillRule: "evenodd" }));
 /**
  * Brand mark. Renders the Material Bank logo by default; pass `mark` (and
  * `label`) to show your own. Uses currentColor for fill, so colour can be

package/dist/components/logotype/logotype-paths.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The Material Bank logotype geometry, in one place: the `Logotype` component
+ * draws it and `scripts/generate-brand-assets.mjs` writes the shipped SVG files
+ * from it. Plain constants with no imports, so a Node script can load this file
+ * directly.
+ *
+ * The lockup is the `Logo` mark with the name beside it, as Material Bank's
+ * own apps set it: "Material" over "Bank" in Inter Bold, one line advance per
+ * font size, the cap height of the first line level with the top of the mark
+ * and the second baseline level with its foot. The letters are Inter Variable
+ * at wght 700 and opsz 14, outlined, so the lockup needs no font to render.
+ */
+/** The component's drawing box: the mark's 48x48 box, widened to take the name. */
+export declare const LOGOTYPE_VIEWBOX = "0 0 142 48";
+/** Width over height of the drawing box. */
+export declare const LOGOTYPE_ASPECT_RATIO: number;
+/**
+ * The box that hugs the ink, for standalone files. The ascender of the "l"
+ * rises above the mark to y 5.69, and round letters overshoot the
+ * baseline to y 41.72.
+ */
+export declare const LOGOTYPE_TIGHT_VIEWBOX = "3.58 5.69 134.85 36.03";
+/** "Material" over "Bank", set to the right of the mark. */
+export declare const LOGOTYPE_NAME_PATH: string;

package/dist/components/logotype/logotype-paths.js

@@ -0,0 +1,49 @@
+/**
+ * The Material Bank logotype geometry, in one place: the `Logotype` component
+ * draws it and `scripts/generate-brand-assets.mjs` writes the shipped SVG files
+ * from it. Plain constants with no imports, so a Node script can load this file
+ * directly.
+ *
+ * The lockup is the `Logo` mark with the name beside it, as Material Bank's
+ * own apps set it: "Material" over "Bank" in Inter Bold, one line advance per
+ * font size, the cap height of the first line level with the top of the mark
+ * and the second baseline level with its foot. The letters are Inter Variable
+ * at wght 700 and opsz 14, outlined, so the lockup needs no font to render.
+ */
+/** The component's drawing box: the mark's 48x48 box, widened to take the name. */
+export const LOGOTYPE_VIEWBOX = "0 0 142 48";
+/** Width over height of the drawing box. */
+export const LOGOTYPE_ASPECT_RATIO = 142 / 48;
+/**
+ * The box that hugs the ink, for standalone files. The ascender of the "l"
+ * rises above the mark to y 5.69, and round letters overshoot the
+ * baseline to y 41.72.
+ */
+export const LOGOTYPE_TIGHT_VIEWBOX = "3.58 5.69 134.85 36.03";
+/** "Material" over "Bank", set to the right of the mark. */
+export const LOGOTYPE_NAME_PATH = [
+    // M
+    "M60.01 21.24L60.01 6.5L64.64 6.5L67.04 13.27Q67.18 13.74 67.38 14.49Q67.57 15.25 67.77 16.12Q67.97 16.99 68.14 17.81Q68.31 18.63 68.42 19.23L67.84 19.23Q67.95 18.64 68.12 17.82Q68.29 17.01 68.49 16.14Q68.69 15.26 68.88 14.5Q69.07 13.74 69.22 13.27L71.58 6.5L76.23 6.5L76.23 21.24L73.19 21.24L73.19 14.29Q73.19 13.81 73.21 13.09Q73.23 12.37 73.25 11.53Q73.27 10.69 73.29 9.85Q73.31 9 73.32 8.25L73.51 8.25Q73.32 9.07 73.09 9.95Q72.86 10.82 72.63 11.64Q72.4 12.47 72.19 13.15Q71.98 13.84 71.83 14.29L69.39 21.24L66.85 21.24L64.36 14.29Q64.22 13.84 64.01 13.16Q63.8 12.49 63.57 11.66Q63.34 10.84 63.1 9.97Q62.86 9.09 62.64 8.25L62.88 8.25Q62.89 8.96 62.91 9.8Q62.93 10.64 62.96 11.49Q62.98 12.34 62.99 13.06Q63.01 13.79 63.01 14.29L63.01 21.24Z",
+    // a
+    "M81.9 21.46Q80.86 21.46 80.02 21.09Q79.18 20.72 78.7 19.98Q78.22 19.24 78.22 18.14Q78.22 17.22 78.57 16.6Q78.91 15.98 79.5 15.6Q80.08 15.23 80.83 15.03Q81.58 14.83 82.4 14.75Q83.36 14.65 83.95 14.57Q84.54 14.48 84.81 14.3Q85.08 14.12 85.08 13.76L85.08 13.71Q85.08 13.24 84.88 12.91Q84.68 12.58 84.3 12.41Q83.91 12.24 83.35 12.24Q82.78 12.24 82.35 12.41Q81.92 12.58 81.66 12.87Q81.39 13.16 81.26 13.51L78.54 13.06Q78.83 12.1 79.49 11.43Q80.15 10.75 81.14 10.4Q82.12 10.04 83.35 10.04Q84.25 10.04 85.09 10.25Q85.93 10.47 86.6 10.91Q87.27 11.36 87.66 12.07Q88.05 12.78 88.05 13.79L88.05 21.24L85.24 21.24L85.24 19.71L85.14 19.71Q84.87 20.22 84.43 20.61Q83.98 21 83.35 21.23Q82.73 21.46 81.9 21.46ZM82.75 19.37Q83.45 19.37 83.98 19.09Q84.51 18.82 84.8 18.34Q85.1 17.87 85.1 17.28L85.1 16.09Q84.97 16.18 84.7 16.26Q84.44 16.34 84.11 16.4Q83.78 16.46 83.47 16.51Q83.15 16.56 82.9 16.59Q82.36 16.67 81.94 16.85Q81.53 17.03 81.3 17.32Q81.07 17.61 81.07 18.06Q81.07 18.49 81.29 18.78Q81.51 19.07 81.88 19.22Q82.25 19.37 82.75 19.37Z",
+    // t
+    "M96.07 10.18L96.07 12.45L89.51 12.45L89.51 10.18ZM91.04 7.55L94 7.55L94 18.01Q94 18.53 94.24 18.78Q94.47 19.03 95.01 19.03Q95.18 19.03 95.49 18.99Q95.79 18.94 95.95 18.91L96.38 21.13Q95.88 21.28 95.39 21.34Q94.9 21.4 94.46 21.4Q92.8 21.4 91.92 20.59Q91.04 19.78 91.04 18.26Z",
+    // e
+    "M102.8 21.46Q101.11 21.46 99.88 20.77Q98.65 20.07 97.99 18.8Q97.34 17.52 97.34 15.77Q97.34 14.06 97.99 12.77Q98.64 11.49 99.84 10.76Q101.04 10.04 102.65 10.04Q103.74 10.04 104.68 10.39Q105.62 10.73 106.33 11.43Q107.04 12.13 107.44 13.18Q107.84 14.23 107.84 15.65L107.84 16.48L98.55 16.48L98.55 14.62L106.39 14.62L105 15.12Q105 14.26 104.74 13.62Q104.48 12.98 103.96 12.63Q103.44 12.28 102.67 12.28Q101.91 12.28 101.37 12.63Q100.83 12.99 100.55 13.6Q100.28 14.21 100.28 14.99L100.28 16.3Q100.28 17.26 100.6 17.92Q100.92 18.57 101.5 18.9Q102.08 19.22 102.85 19.22Q103.37 19.22 103.8 19.07Q104.22 18.93 104.52 18.63Q104.83 18.34 104.98 17.92L107.67 18.42Q107.41 19.33 106.74 20.02Q106.08 20.71 105.09 21.08Q104.09 21.46 102.8 21.46Z",
+    // r
+    "M109.87 21.24L109.87 10.18L112.74 10.18L112.74 12.11L112.86 12.11Q113.17 11.08 113.88 10.56Q114.6 10.03 115.53 10.03Q115.76 10.03 116.02 10.06Q116.28 10.08 116.49 10.13L116.49 12.78Q116.29 12.71 115.92 12.67Q115.54 12.63 115.2 12.63Q114.53 12.63 113.99 12.93Q113.44 13.22 113.14 13.74Q112.84 14.26 112.84 14.95L112.84 21.24Z",
+    // i
+    "M118.21 21.24L118.21 10.18L121.18 10.18L121.18 21.24ZM119.69 8.74Q119.02 8.74 118.55 8.29Q118.07 7.85 118.07 7.21Q118.07 6.58 118.55 6.13Q119.02 5.69 119.69 5.69Q120.37 5.69 120.85 6.13Q121.33 6.57 121.33 7.21Q121.33 7.85 120.85 8.29Q120.37 8.74 119.69 8.74Z",
+    // a
+    "M126.79 21.46Q125.74 21.46 124.9 21.09Q124.07 20.72 123.59 19.98Q123.11 19.24 123.11 18.14Q123.11 17.22 123.45 16.6Q123.79 15.98 124.38 15.6Q124.97 15.23 125.71 15.03Q126.46 14.83 127.28 14.75Q128.24 14.65 128.83 14.57Q129.42 14.48 129.69 14.3Q129.96 14.12 129.96 13.76L129.96 13.71Q129.96 13.24 129.76 12.91Q129.57 12.58 129.18 12.41Q128.8 12.24 128.23 12.24Q127.66 12.24 127.23 12.41Q126.81 12.58 126.54 12.87Q126.27 13.16 126.14 13.51L123.42 13.06Q123.71 12.1 124.37 11.43Q125.04 10.75 126.02 10.4Q127 10.04 128.23 10.04Q129.13 10.04 129.97 10.25Q130.81 10.47 131.48 10.91Q132.15 11.36 132.54 12.07Q132.93 12.78 132.93 13.79L132.93 21.24L130.12 21.24L130.12 19.71L130.02 19.71Q129.76 20.22 129.31 20.61Q128.86 21 128.24 21.23Q127.61 21.46 126.79 21.46ZM127.63 19.37Q128.33 19.37 128.86 19.09Q129.39 18.82 129.69 18.34Q129.98 17.87 129.98 17.28L129.98 16.09Q129.85 16.18 129.59 16.26Q129.32 16.34 128.99 16.4Q128.67 16.46 128.35 16.51Q128.03 16.56 127.79 16.59Q127.24 16.67 126.83 16.85Q126.41 17.03 126.18 17.32Q125.96 17.61 125.96 18.06Q125.96 18.49 126.17 18.78Q126.39 19.07 126.76 19.22Q127.13 19.37 127.63 19.37Z",
+    // l
+    "M138.43 6.5L138.43 21.24L135.46 21.24L135.46 6.5Z",
+    // B
+    "M60.01 41.5L60.01 26.76L65.86 26.76Q67.48 26.76 68.56 27.25Q69.65 27.74 70.19 28.59Q70.73 29.44 70.73 30.55Q70.73 31.42 70.38 32.07Q70.03 32.72 69.43 33.13Q68.84 33.54 68.07 33.71L68.07 33.86Q68.91 33.89 69.64 34.33Q70.38 34.77 70.84 35.56Q71.3 36.35 71.3 37.44Q71.3 38.6 70.73 39.52Q70.15 40.44 69.03 40.97Q67.91 41.5 66.23 41.5ZM63.03 39.02L65.64 39.02Q66.97 39.02 67.58 38.5Q68.19 37.99 68.19 37.16Q68.19 36.52 67.89 36.04Q67.59 35.56 67.04 35.29Q66.48 35.02 65.72 35.02L63.03 35.02ZM63.03 32.95L65.41 32.95Q66.06 32.95 66.57 32.72Q67.09 32.49 67.38 32.06Q67.67 31.63 67.67 31.03Q67.67 30.23 67.1 29.73Q66.53 29.22 65.47 29.22L63.03 29.22Z",
+    // a
+    "M76.43 41.72Q75.39 41.72 74.55 41.35Q73.71 40.98 73.23 40.24Q72.75 39.5 72.75 38.4Q72.75 37.48 73.1 36.86Q73.44 36.24 74.03 35.86Q74.61 35.49 75.36 35.29Q76.11 35.09 76.93 35.01Q77.89 34.91 78.48 34.83Q79.07 34.74 79.34 34.56Q79.61 34.38 79.61 34.02L79.61 33.97Q79.61 33.5 79.41 33.17Q79.21 32.84 78.83 32.67Q78.44 32.5 77.88 32.5Q77.3 32.5 76.88 32.67Q76.45 32.84 76.19 33.13Q75.92 33.42 75.79 33.77L73.07 33.32Q73.36 32.36 74.02 31.69Q74.68 31.01 75.67 30.66Q76.65 30.3 77.88 30.3Q78.78 30.3 79.62 30.51Q80.46 30.73 81.13 31.17Q81.8 31.62 82.19 32.33Q82.58 33.04 82.58 34.05L82.58 41.5L79.77 41.5L79.77 39.97L79.67 39.97Q79.4 40.48 78.96 40.87Q78.51 41.26 77.88 41.49Q77.26 41.72 76.43 41.72ZM77.27 39.63Q77.98 39.63 78.51 39.35Q79.04 39.08 79.33 38.6Q79.63 38.13 79.63 37.54L79.63 36.35Q79.5 36.44 79.23 36.52Q78.97 36.6 78.64 36.66Q78.31 36.72 78 36.77Q77.68 36.82 77.43 36.85Q76.89 36.93 76.47 37.11Q76.06 37.29 75.83 37.58Q75.6 37.87 75.6 38.32Q75.6 38.75 75.82 39.04Q76.04 39.33 76.41 39.48Q76.78 39.63 77.27 39.63Z",
+    // n
+    "M88.08 35.1L88.08 41.5L85.11 41.5L85.11 30.44L87.91 30.44L87.96 33.2L87.78 33.2Q88.22 31.82 89.1 31.06Q89.99 30.3 91.39 30.3Q92.54 30.3 93.39 30.8Q94.24 31.3 94.72 32.24Q95.19 33.17 95.19 34.47L95.19 41.5L92.22 41.5L92.22 34.98Q92.22 33.95 91.69 33.37Q91.16 32.78 90.22 32.78Q89.6 32.78 89.11 33.06Q88.62 33.33 88.35 33.84Q88.08 34.36 88.08 35.1Z",
+    // k
+    "M100.41 38.27L100.41 34.69L100.86 34.69L104.48 30.44L107.91 30.44L103.13 35.99L102.43 35.99ZM97.72 41.5L97.72 26.76L100.69 26.76L100.69 41.5ZM104.63 41.5L101.3 36.65L103.29 34.55L108.12 41.5Z",
+].join("");

package/dist/components/logotype/logotype-root.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentSize } from "../../tokens/size.js";
+export type LogotypeSize = Extract<ComponentSize, "sm" | "base" | "lg" | "xl">;
+interface LogotypeProps extends React.SVGProps<SVGSVGElement> {
+    /**
+     * Accessible name announced for the logotype. Pass an empty string when the
+     * name is already visible beside it, and it is hidden from assistive tech.
+     * @default "Material Bank"
+     */
+    label?: string;
+    /** Size preset, which sets the height; the width follows the artwork's proportions. */
+    size?: LogotypeSize;
+}
+/**
+ * Brand logotype: the Material Bank mark with the name beside it, "Material"
+ * over "Bank" in Inter Bold, as one lockup. Uses currentColor for fill, so
+ * colour can be controlled via text-* classes.
+ *
+ * @bestPractice Recolour the lockup with a `text-*` class - it fills from `currentColor`; passing `fill`/a hex defeats the single-source colour and breaks dark-mode inheritance.
+ * @bestPractice Size with the `size` preset (`sm`–`xl`), which sets the height, not a `className` width/height - presets keep the lockup on the shared `ComponentSize` scale and in proportion.
+ * @bestPractice Don't add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.
+ * @bestPractice Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.
+ * @example
+ * ```tsx
+ * <Logotype className="text-foreground" size="base" />
+ * ```
+ * @category color
+ */
+export declare const Logotype: ({ className, label, size, ...props }: LogotypeProps) => import("react").JSX.Element;
+export {};

package/dist/components/logotype/logotype-root.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { LOGO_MARK_PATH } from "../logo/logo-mark.js";
+import { LOGOTYPE_NAME_PATH, LOGOTYPE_VIEWBOX } from "./logotype-paths.js";
+// Heights match `Logo`, so the mark draws at the same size in both; widths are
+// height x 142 / 48.
+const SIZE_MAP = {
+    base: { height: 32, width: 94.67 },
+    lg: { height: 40, width: 118.33 },
+    sm: { height: 24, width: 71 },
+    xl: { height: 48, width: 142 },
+};
+/**
+ * Brand logotype: the Material Bank mark with the name beside it, "Material"
+ * over "Bank" in Inter Bold, as one lockup. Uses currentColor for fill, so
+ * colour can be controlled via text-* classes.
+ *
+ * @bestPractice Recolour the lockup with a `text-*` class - it fills from `currentColor`; passing `fill`/a hex defeats the single-source colour and breaks dark-mode inheritance.
+ * @bestPractice Size with the `size` preset (`sm`–`xl`), which sets the height, not a `className` width/height - presets keep the lockup on the shared `ComponentSize` scale and in proportion.
+ * @bestPractice Don't add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.
+ * @bestPractice Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.
+ * @example
+ * ```tsx
+ * <Logotype className="text-foreground" size="base" />
+ * ```
+ * @category color
+ */
+export const Logotype = ({ className, label = "Material Bank", size = "lg", ...props }) => {
+    const dimensions = SIZE_MAP[size];
+    const decorative = label === "";
+    return (_jsxs("svg", { "aria-hidden": decorative ? true : undefined, "aria-label": decorative ? undefined : label, className: cn("shrink-0", className), fill: "none", height: dimensions.height, role: decorative ? undefined : "img", viewBox: LOGOTYPE_VIEWBOX, width: dimensions.width, xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { clipRule: "evenodd", d: LOGO_MARK_PATH, fill: "currentColor", fillRule: "evenodd" }), _jsx("path", { d: LOGOTYPE_NAME_PATH, fill: "currentColor" })] }));
+};

package/dist/components/logotype.d.ts

@@ -0,0 +1 @@
+export { Logotype } from "./logotype/logotype-root.js";

package/dist/components/logotype.js

@@ -0,0 +1 @@
+export { Logotype } from "./logotype/logotype-root.js";

package/dist/components/segmented-control/segmented-control-root.js

@@ -6,7 +6,7 @@ import { ScrollFade } from "@instruments/materia-ui/components/scroll-fade";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../../tokens/segmented.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING_X, SEGMENTED_SHELL_PADDING_Y, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
 import { SegmentedControlContext } from "./segmented-control-context.js";
 import { useSingleSelection } from "./use-single-selection.js";
@@ -65,10 +65,13 @@ const SegmentedControl = ({ className, size = "sm", fullWidth = false, value, de
             viewport?.removeEventListener("scroll", checkScroll);
         };
     }, []);
-    return (_jsx(ToggleGroup, { className: cn(SEGMENTED_SHELL_BASE, "group/segmented-control inline-flex h-auto max-w-full items-center overflow-hidden", SEGMENTED_SHELL_PADDING[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING), fullWidth && "flex w-full", className), "data-component": "segmented-control", "data-size": resolvedSize, "data-slot": "segmented-control", onValueChange: (groupValue) => {
+    return (_jsx(ToggleGroup, { className: cn(SEGMENTED_SHELL_BASE, "group/segmented-control inline-flex h-auto max-w-full items-center overflow-hidden", SEGMENTED_SHELL_PADDING_X[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING_X), fullWidth && "flex w-full", className), "data-component": "segmented-control", "data-size": resolvedSize, "data-slot": "segmented-control", onValueChange: (groupValue) => {
             // Single-select group: Base UI sends `[]` when the active item is
             // re-clicked; the selection hook swallows that deselect.
             selection.onValueChange(groupValue[0] ?? "");
-        }, value: [selection.value], ...props, children: _jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs("div", { className: "relative min-w-0 flex-1", ref: containerRef, children: [_jsx(ScrollArea, { hideScrollbar: true, orientation: "horizontal", children: _jsx(Flex, { align: "center", className: cn(SEGMENTED_GAP[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_GAP), fullWidth && "w-full"), inline: true, children: children }) }), showEndFade && (_jsx(ScrollFade, { className: "rounded-r-full", orientation: "horizontal", position: "end", size: "sm", theme: "gray" }))] }) }) }));
+        }, value: [selection.value], ...props, children: _jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsxs("div", { className: "relative min-w-0 flex-1", ref: containerRef, children: [_jsx(ScrollArea, { hideScrollbar: true, orientation: "horizontal", children: _jsx(Flex, { align: "center", className: cn(
+                            // Vertical padding sits inside the scroll area, which clips,
+                            // so each item's hit area reaches the shell's full height.
+                            SEGMENTED_SHELL_PADDING_Y[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_SHELL_PADDING_Y), SEGMENTED_GAP[resolvedSize], getResponsiveSizeOverrides(size, SEGMENTED_GAP), fullWidth && "w-full"), inline: true, children: children }) }), showEndFade && (_jsx(ScrollFade, { className: "rounded-r-full", orientation: "horizontal", position: "end", size: "sm", theme: "gray" }))] }) }) }));
 };
 export { SegmentedControl };

package/dist/components/segmented-control/segmented-control-variants.js

@@ -20,7 +20,10 @@ const triggerPaddingCompoundVariants = typedEntries(SEGMENTED_TRIGGER_PADDING).m
  * Structure mirrors `tabsTriggerVariants` (pill): the `size` variant only sets
  * text size; ALL padding is applied through size-keyed compound variants.
  */
-export const segmentedControlItemVariants = cva(cn(focusRing(), "text-muted-foreground relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-medium whitespace-nowrap", `transition-color-shadow-border ${DISABLED}`, "data-pressed:text-foreground dark:text-gray-500 dark:data-pressed:text-gray-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"), {
+export const segmentedControlItemVariants = cva(cn(focusRing(), "text-muted-foreground relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-medium whitespace-nowrap", 
+// An invisible hit area overhanging the segment; the root's scroll area
+// trims it to the track, so a tap anywhere in the track's height lands.
+"after:absolute after:inset-x-0 after:-inset-y-3", `transition-color-shadow-border ${DISABLED}`, "data-pressed:text-foreground dark:text-gray-500 dark:data-pressed:text-gray-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"), {
     compoundVariants: triggerPaddingCompoundVariants,
     defaultVariants: {
         size: "sm",

package/dist/components/swatch-selector/swatch-selector-item.js

@@ -24,7 +24,10 @@ export const SwatchSelectorItem = ({ value, color, children, size: sizeOverride,
     const isSelected = selectedValue === value;
     const button = (_jsx(TogglePrimitive, { "aria-label": props["aria-label"] ?? `Select ${value}`, className: cn(
         // Focus styles only - visual handled by Swatch
-        "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full", focusRing(), "disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "swatch-selector-item", "data-slot": "swatch-selector-item", onClick: (event) => {
+        "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full", 
+        // An invisible hit area at least 44px tall and 5px wider each side, so
+        // a small swatch fills its slot in a 10px-gapped row.
+        "after:absolute after:-inset-x-[5px] after:top-1/2 after:h-full after:min-h-11 after:-translate-y-1/2", focusRing(), "disabled:cursor-not-allowed disabled:opacity-50", className), "data-component": "swatch-selector-item", "data-slot": "swatch-selector-item", onClick: (event) => {
             event.stopPropagation();
         }, value: value, ...props, children: _jsx(Swatch, { ...(color === undefined ? {} : { color }), selected: isSelected, size: resolvedSize, unavailable: unavailable, children: children }) }));
     if (unavailable) {

package/dist/data/docs-manifest.d.ts

@@ -72,5 +72,5 @@ export interface DocsManifest {
     storybook: DocsStorybookInventory;
 }
 /** The slug of every documented component and composition. */
-export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
+export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "logotype" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
 export declare const docsManifest: DocsManifest;

package/dist/data/docs-manifest.js

@@ -2638,7 +2638,8 @@ export const docsManifest = {
                             name: "showCloseButton",
                             type: "boolean",
                             required: false,
-                            description: "Whether to show the dialog close button.",
+                            defaultValue: "false",
+                            description: "Whether to show the dialog close button. Off by default: the button sits\nover the search field, and Escape or a click outside closes the palette.",
                         },
                         {
                             name: "contentProps",
@@ -6732,7 +6733,43 @@ export const docsManifest = {
                 "To use your own brand, pass `mark` as SVG shapes in a 48x48 viewBox filled with `currentColor`, and a matching `label` - don't wrap or overlay the default mark.",
             ],
             uses: [],
-            usedBy: ["mobile-navigation"],
+            usedBy: ["logotype", "mobile-navigation"],
+        },
+        {
+            slug: "logotype",
+            module: "components/logotype",
+            title: "Logotype",
+            category: "color",
+            description: 'Brand logotype: the Material Bank mark with the name beside it, "Material"\nover "Bank" in Inter Bold, as one lockup. Uses currentColor for fill, so\ncolour can be controlled via text-* classes.',
+            exports: [
+                {
+                    name: "Logotype",
+                    kind: "component",
+                    props: [
+                        {
+                            name: "label",
+                            type: "string",
+                            required: false,
+                            defaultValue: '"Material Bank"',
+                            description: "Accessible name announced for the logotype. Pass an empty string when the\nname is already visible beside it, and it is hidden from assistive tech.",
+                        },
+                        {
+                            name: "size",
+                            type: "LogotypeSize",
+                            required: false,
+                            description: "Size preset, which sets the height; the width follows the artwork's proportions.",
+                        },
+                    ],
+                },
+            ],
+            bestPractices: [
+                "Recolour the lockup with a `text-*` class - it fills from `currentColor`; passing `fill`/a hex defeats the single-source colour and breaks dark-mode inheritance.",
+                "Size with the `size` preset (`sm`–`xl`), which sets the height, not a `className` width/height - presets keep the lockup on the shared `ComponentSize` scale and in proportion.",
+                'Don\'t add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.',
+                "Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.",
+            ],
+            uses: ["logo"],
+            usedBy: [],
         },
         {
             slug: "marquee-text",
@@ -23010,7 +23047,7 @@ export const docsManifest = {
     storybook: {
         addons: ["@storybook/addon-docs", "@storybook/react-vite"],
         anatomyFiles: 31,
-        storyFiles: 171,
+        storyFiles: 172,
         storiesWithPlay: 63,
     },
 };

package/dist/tokens/segmented.d.ts

@@ -20,6 +20,14 @@ import type { ComponentSize } from "./size.js";
 export declare const SEGMENTED_SHELL_BASE = "rounded-full bg-surface-inset text-muted-foreground";
 /** Shared shell padding scale by size. */
 export declare const SEGMENTED_SHELL_PADDING: Record<ComponentSize, string>;
+/**
+ * The horizontal half of `SEGMENTED_SHELL_PADDING`. SegmentedControl puts this
+ * on the shell and the vertical half inside its scroll area, so each item's
+ * hit area can fill the shell's full height.
+ */
+export declare const SEGMENTED_SHELL_PADDING_X: Record<ComponentSize, string>;
+/** The vertical half of `SEGMENTED_SHELL_PADDING`. */
+export declare const SEGMENTED_SHELL_PADDING_Y: Record<ComponentSize, string>;
 /**
  * Shared trigger/item text-size scale by size. `SegmentedControl` items,
  * `TabsTrigger` and `TabNavigationLink` all read it, so they render identical

package/dist/tokens/segmented.js

@@ -28,6 +28,32 @@ export const SEGMENTED_SHELL_PADDING = {
     xl: "p-1",
     xs: "p-0.5",
 };
+/**
+ * The horizontal half of `SEGMENTED_SHELL_PADDING`. SegmentedControl puts this
+ * on the shell and the vertical half inside its scroll area, so each item's
+ * hit area can fill the shell's full height.
+ */
+export const SEGMENTED_SHELL_PADDING_X = {
+    "2xl": "px-1.5",
+    "2xs": "px-0.5",
+    "3xl": "px-1.5",
+    base: "px-0.5",
+    lg: "px-1",
+    sm: "px-0.5",
+    xl: "px-1",
+    xs: "px-0.5",
+};
+/** The vertical half of `SEGMENTED_SHELL_PADDING`. */
+export const SEGMENTED_SHELL_PADDING_Y = {
+    "2xl": "py-1.5",
+    "2xs": "py-0.5",
+    "3xl": "py-1.5",
+    base: "py-0.5",
+    lg: "py-1",
+    sm: "py-0.5",
+    xl: "py-1",
+    xs: "py-0.5",
+};
 /**
  * Shared trigger/item text-size scale by size. `SegmentedControl` items,
  * `TabsTrigger` and `TabNavigationLink` all read it, so they render identical

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -13,6 +13,7 @@
   },
   "files": [
     "agent-docs.md",
+    "brand",
     "dist",
     "lint",
     "README.md",
@@ -24,6 +25,10 @@
   ],
   "exports": {
     "./agent-docs.md": "./agent-docs.md",
+    "./brand/material-bank-logotype-white.svg": "./brand/material-bank-logotype-white.svg",
+    "./brand/material-bank-logotype.svg": "./brand/material-bank-logotype.svg",
+    "./brand/material-bank-mark-white.svg": "./brand/material-bank-mark-white.svg",
+    "./brand/material-bank-mark.svg": "./brand/material-bank-mark.svg",
     "./components/accordion": {
       "types": "./dist/components/accordion.d.ts",
       "default": "./dist/components/accordion.js"
@@ -280,6 +285,10 @@
       "types": "./dist/components/logo.d.ts",
       "default": "./dist/components/logo.js"
     },
+    "./components/logotype": {
+      "types": "./dist/components/logotype.d.ts",
+      "default": "./dist/components/logotype.js"
+    },
     "./components/marquee-text": {
       "types": "./dist/components/marquee-text.d.ts",
       "default": "./dist/components/marquee-text.js"
@@ -884,6 +893,7 @@
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/finish-dist.mjs",
     "generate:agent-docs": "node scripts/generate-agent-docs.mjs",
     "generate:api": "node scripts/generate-api-report.mjs",
+    "generate:brand-assets": "tsx scripts/generate-brand-assets.mjs",
     "generate:cn-theme": "node scripts/generate-cn-theme.mjs",
     "generate:docs-manifest": "node scripts/generate-docs-manifest.mjs",
     "generate:exports": "node scripts/generate-exports.mjs",