@instruments/materia-ui 0.3.0 → 0.4.0

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/button/button-variants.d.ts

@@ -34,7 +34,8 @@ declare const getBaseSize: (size: ButtonSize) => ComponentSize;
  *   - neutral + outline     → the bordered button (old `outline` variant)
  *   - neutral + ghost       → the transparent button (old `ghost` variant)
  *   - neutral + link        → the inline link button (old `link` variant)
- *   - neutral + transparent → the blurred translucent button
+ *   - neutral + transparent → the blurred translucent button, for content
+ *     over images only (see `tokens/emphasis`)
  */
 declare const buttonVariants: (props?: ({
     tone?: "brand" | "danger" | "neutral" | null | undefined;

package/dist/components/button/button-variants.js

@@ -156,7 +156,8 @@ const BRAND_TRANSPARENT = "transform-gpu border-transparent bg-brand/50 backdrop
  *   - neutral + outline     → the bordered button (old `outline` variant)
  *   - neutral + ghost       → the transparent button (old `ghost` variant)
  *   - neutral + link        → the inline link button (old `link` variant)
- *   - neutral + transparent → the blurred translucent button
+ *   - neutral + transparent → the blurred translucent button, for content
+ *     over images only (see `tokens/emphasis`)
  */
 const buttonVariants = cva([
     "duration-quick text-paragraph-sm isolate inline-flex shrink-0 cursor-pointer items-center gap-2 border font-medium whitespace-nowrap transition ease-out",

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/pill/pill-variants.d.ts

@@ -22,6 +22,9 @@ export declare const DEFAULT_PILL_SIZE: ComponentSize;
  *   - `neutral` + `solid`   → the dark primary pill (old default/solid)
  *   - `neutral` + `soft`    → the grey secondary pill (old secondary/solid)
  *   - `neutral` + `outline` → the bordered transparent pill (old `outline` variant)
+ *
+ * `neutral` + `transparent` is glass for content over images only (see
+ * `tokens/emphasis`).
  */
 export declare const pillVariants: (props?: ({
     tone?: "brand" | "danger" | "info" | "neutral" | "success" | "warning" | null | undefined;

package/dist/components/pill/pill-variants.js

@@ -30,8 +30,15 @@ export const DEFAULT_PILL_SIZE = "base";
  *   - `neutral` + `solid`   → the dark primary pill (old default/solid)
  *   - `neutral` + `soft`    → the grey secondary pill (old secondary/solid)
  *   - `neutral` + `outline` → the bordered transparent pill (old `outline` variant)
+ *
+ * `neutral` + `transparent` is glass for content over images only (see
+ * `tokens/emphasis`).
  */
-export const pillVariants = cva(cn("inline-flex items-center justify-center border border-transparent font-normal whitespace-nowrap [&_svg]:-ms-px [&_svg]:shrink-0", focusRing(), "data-[hovered=true]:opacity-90"), {
+export const pillVariants = cva(cn("inline-flex items-center justify-center border border-transparent font-normal whitespace-nowrap [&_svg]:-ms-px [&_svg]:shrink-0", focusRing(), 
+// Hover tints the fill with a 4% foreground wash laid over it as an image,
+// so the text keeps its colour. 4% is the most every tone and emphasis takes
+// and still reaches AA (styles/tone-contrast.test.ts, PILL_HOVER_WASH).
+"data-[hovered=true]:from-foreground/4 data-[hovered=true]:to-foreground/4 data-[hovered=true]:bg-linear-to-b"), {
     compoundVariants: [
         /* ── Focus ring colours by tone ────────────────────────── */
         {

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

@@ -6732,7 +6732,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 +23046,7 @@ export const docsManifest = {
     storybook: {
         addons: ["@storybook/addon-docs", "@storybook/react-vite"],
         anatomyFiles: 31,
-        storyFiles: 171,
+        storyFiles: 172,
         storiesWithPlay: 63,
     },
 };

package/dist/data/token-gallery.js

@@ -65,7 +65,7 @@ export const SEMANTIC_COLORS = [
         class: "bg-brand-soft",
         key: "brand-soft",
         name: "Brand Soft",
-        value: "#fffef5",
+        value: "#fffbd9",
     },
     {
         class: "bg-brand-accent",

package/dist/styles/index.css

@@ -233,7 +233,13 @@
   --color-info-foreground: #1e3a5f; /* blue-900 */
 
   --color-brand: #ffe600; /* Brand yellow, per the Figma base/brand token */
-  --color-brand-soft: #fffef5; /* very soft brand yellow (code-only) */
+  /* Pale brand yellow (code-only), mixed from --color-brand so a re-brand
+     carries its soft fill with it: #fffbd9 for the default yellow. */
+  --color-brand-soft: color-mix(
+    in srgb,
+    var(--color-brand) 15%,
+    var(--color-white)
+  );
   --color-brand-accent: #dda600; /* per Figma base/brand accent - consumed at /40 for borders/accents */
   --color-brand-foreground: var(--color-gray-800); /* #1F2937 - per Figma */
   /* Brand-hued text on the page background, for brand buttons without a fill.

package/dist/tokens/emphasis.d.ts

@@ -10,6 +10,11 @@
  * cva-backed components anchor their variant map `satisfies Record<Emphasis, …>`
  * so the fill vocabulary stays in lockstep with the canon.
  *
+ * `transparent` is a blurred half fill of the tone. Its brand and status tones
+ * are tuned to read on the page. Neutral transparent is glass for
+ * content over images: its white text reaches AA over a mid-to-dark photo or a
+ * Scrim, but not on the page or a pale image, so keep it to media.
+ *
  * `link` is deliberately NOT a member: it is a Button-only extension expressed
  * as `ButtonEmphasis = Emphasis | "link"`, so no other component inherits an
  * inline-link treatment it has no styling for.

package/dist/tokens/emphasis.js

@@ -10,6 +10,11 @@
  * cva-backed components anchor their variant map `satisfies Record<Emphasis, …>`
  * so the fill vocabulary stays in lockstep with the canon.
  *
+ * `transparent` is a blurred half fill of the tone. Its brand and status tones
+ * are tuned to read on the page. Neutral transparent is glass for
+ * content over images: its white text reaches AA over a mid-to-dark photo or a
+ * Scrim, but not on the page or a pale image, so keep it to media.
+ *
  * `link` is deliberately NOT a member: it is a Button-only extension expressed
  * as `ButtonEmphasis = Emphasis | "link"`, so no other component inherits an
  * inline-link treatment it has no styling for.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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",