@scattered-light/loomiere-mojave 0.5.3 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/dist/exports/AGENTS.md +2 -2
  2. package/dist/exports/design-system/README.md +2 -2
  3. package/dist/exports/design-system/components/Accordion/README.md +20 -20
  4. package/dist/exports/design-system/components/Accordion/preview.html +1 -1
  5. package/dist/exports/design-system/components/AlertDialog/README.md +8 -8
  6. package/dist/exports/design-system/components/AlertDialog/preview.html +1 -1
  7. package/dist/exports/design-system/components/Autocomplete/README.md +9 -9
  8. package/dist/exports/design-system/components/Autocomplete/preview.html +1 -1
  9. package/dist/exports/design-system/components/Avatar/README.md +3 -4
  10. package/dist/exports/design-system/components/Avatar/preview.html +1 -1
  11. package/dist/exports/design-system/components/Checkbox/README.md +5 -5
  12. package/dist/exports/design-system/components/Checkbox/preview.html +1 -1
  13. package/dist/exports/design-system/components/CheckboxGroup/README.md +14 -14
  14. package/dist/exports/design-system/components/CheckboxGroup/preview.html +1 -1
  15. package/dist/exports/design-system/components/Collapsible/README.md +6 -6
  16. package/dist/exports/design-system/components/Collapsible/preview.html +1 -1
  17. package/dist/exports/design-system/components/Combobox/README.md +11 -11
  18. package/dist/exports/design-system/components/Combobox/preview.html +1 -1
  19. package/dist/exports/design-system/components/ContextMenu/README.md +9 -9
  20. package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
  21. package/dist/exports/design-system/components/Dialog/README.md +6 -6
  22. package/dist/exports/design-system/components/Dialog/preview.html +1 -1
  23. package/dist/exports/design-system/components/Drawer/README.md +1 -1
  24. package/dist/exports/design-system/components/Drawer/preview.html +1 -1
  25. package/dist/exports/design-system/components/Menu/README.md +11 -11
  26. package/dist/exports/design-system/components/Menu/preview.html +1 -1
  27. package/dist/exports/design-system/components/Menubar/README.md +32 -32
  28. package/dist/exports/design-system/components/Menubar/preview.html +1 -1
  29. package/dist/exports/design-system/components/Meter/README.md +9 -8
  30. package/dist/exports/design-system/components/Meter/preview.html +1 -1
  31. package/dist/exports/design-system/components/NumberField/README.md +10 -10
  32. package/dist/exports/design-system/components/NumberField/preview.html +1 -1
  33. package/dist/exports/design-system/components/OTPField/README.md +5 -5
  34. package/dist/exports/design-system/components/OTPField/preview.html +1 -1
  35. package/dist/exports/design-system/components/Popover/README.md +7 -7
  36. package/dist/exports/design-system/components/Popover/preview.html +1 -1
  37. package/dist/exports/design-system/components/PreviewCard/README.md +9 -11
  38. package/dist/exports/design-system/components/PreviewCard/preview.html +1 -1
  39. package/dist/exports/design-system/components/Progress/README.md +8 -8
  40. package/dist/exports/design-system/components/Progress/preview.html +1 -1
  41. package/dist/exports/design-system/components/Radio/README.md +16 -23
  42. package/dist/exports/design-system/components/Radio/preview.html +1 -1
  43. package/dist/exports/design-system/components/ScrollArea/README.md +6 -6
  44. package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
  45. package/dist/exports/design-system/components/Select/README.md +13 -12
  46. package/dist/exports/design-system/components/Select/preview.html +1 -1
  47. package/dist/exports/design-system/components/Separator/README.md +2 -2
  48. package/dist/exports/design-system/components/Separator/preview.html +1 -1
  49. package/dist/exports/design-system/components/Slider/README.md +6 -6
  50. package/dist/exports/design-system/components/Slider/preview.html +1 -1
  51. package/dist/exports/design-system/components/Switch/README.md +3 -3
  52. package/dist/exports/design-system/components/Switch/preview.html +1 -1
  53. package/dist/exports/design-system/components/Tabs/README.md +9 -9
  54. package/dist/exports/design-system/components/Tabs/preview.html +1 -1
  55. package/dist/exports/design-system/components/Toast/README.md +7 -7
  56. package/dist/exports/design-system/components/Toast/preview.html +1 -1
  57. package/dist/exports/design-system/components/Toggle/README.md +2 -2
  58. package/dist/exports/design-system/components/Toggle/preview.html +1 -1
  59. package/dist/exports/design-system/components/ToggleGroup/README.md +5 -5
  60. package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
  61. package/dist/exports/design-system/components/Toolbar/README.md +11 -11
  62. package/dist/exports/design-system/components/Toolbar/preview.html +1 -1
  63. package/dist/exports/design-system/components/Tooltip/README.md +4 -4
  64. package/dist/exports/design-system/components/Tooltip/preview.html +1 -1
  65. package/dist/exports/design-system/components/bundle.css +59 -45
  66. package/dist/exports/design-system/components/bundle.js +4 -4
  67. package/dist/exports/design-system/components/index.d.ts +645 -29
  68. package/package.json +2 -2
package/dist/exports/design-system/components/Toolbar/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var P=Object.create;var T=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var u=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),V=(o,a)=>{for(var r in a)T(o,r,{get:a[r],enumerable:!0})},H=(o,a,r,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of E(a))!z.call(o,n)&&n!==r&&T(o,n,{get:()=>a[n],enumerable:!(c=W(a,n))||c.enumerable});return o};var h=(o,a,r)=>(r=o!=null?P(L(o)):{},H(a||!o||!o.__esModule?T(r,"default",{value:o,enumerable:!0}):r,o));var B=u((X,I)=>{I.exports=window.Loomiere.Base});var w=u((Y,x)=>{x.exports=window.Loomiere.Base});var y=u((_,f)=>{f.exports=window.Loomiere.Base});var C=u((ee,R)=>{R.exports=window.Loomiere.Base});var S={};V(S,{Compact:()=>Z,Default:()=>O,WithGroups:()=>$,WithLink:()=>F,WithSelect:()=>U,default:()=>v});var t=h(B(),1),s=h(w(),1),m=h(y(),1),l=h(C(),1);var d=window.React;function e(o,a,r){let{children:c,...n}=a||{};return r!==void 0&&(n.key=r),c===void 0?d.createElement(o,n):Array.isArray(c)?d.createElement(o,n,...c):d.createElement(o,n,c)}var oe=d.Fragment;var D={title:"Components/Toolbar",component:t.Toolbar.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=D,g=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),N=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),M=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),G=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),k=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),j=o=>e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...o,children:e("path",{d:"M2 4l4 4 4-4"})}),b=o=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 8l3 3 7-7"})}),O={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})}),e(s.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",children:e(N,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(m.ToggleGroup,{className:"ToolbarGroup",defaultValue:["left"],children:[e(s.Toggle,{value:"left",className:"Toggle","aria-label":"Align left",children:e(M,{})}),e(s.Toggle,{value:"center",className:"Toggle","aria-label":"Align center",children:e(G,{})}),e(s.Toggle,{value:"right",className:"Toggle","aria-label":"Align right",children:e(k,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button",children:"Save"})]})},U={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(l.Select.Root,{defaultValue:"helvetica",children:[e(l.Select.Trigger,{className:"Button",style:{minWidth:"140px"},children:[e(l.Select.Value,{}),e(l.Select.Icon,{children:e(j,{})})]}),e(l.Select.Portal,{children:e(l.Select.Positioner,{sideOffset:8,children:e(l.Select.Popup,{className:"SelectPopup",children:[e(l.Select.Item,{className:"SelectItem",value:"helvetica",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Helvetica"})]}),e(l.Select.Item,{className:"SelectItem",value:"arial",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Arial"})]}),e(l.Select.Item,{className:"SelectItem",value:"times",children:[e(l.Select.ItemIndicator,{className:"SelectItemIndicator",children:e(b,{})}),e(l.Select.ItemText,{children:"Times New Roman"})]})]})})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button",children:"Apply"})]})},F={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",children:e(g,{})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",children:e(p,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Link,{className:"ToolbarLink",href:"#",children:"Last edited 2h ago"})]})},$={render:()=>e(t.Toolbar.Root,{className:"Toolbar",children:[e(t.Toolbar.Group,{className:"ToolbarGroup","aria-label":"Text formatting",children:[e(t.Toolbar.Button,{className:"Button","aria-label":"Bold",children:e(g,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Italic",children:e(p,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Underline",children:e(N,{})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Group,{className:"ToolbarGroup","aria-label":"Alignment",children:[e(t.Toolbar.Button,{className:"Button","aria-label":"Align left",children:e(M,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Align center",children:e(G,{})}),e(t.Toolbar.Button,{className:"Button","aria-label":"Align right",children:e(k,{})})]})]})},Z={render:()=>e(t.Toolbar.Root,{className:"Toolbar",style:{padding:"var(--sl-space-1)",gap:"var(--sl-space-1)"},children:[e(m.ToggleGroup,{className:"ToolbarGroup",multiple:!0,style:{gap:"2px"},children:[e(s.Toggle,{value:"bold",className:"Toggle","aria-label":"Bold",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(g,{style:{width:"16px",height:"16px"}})}),e(s.Toggle,{value:"italic",className:"Toggle","aria-label":"Italic",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(p,{style:{width:"16px",height:"16px"}})}),e(s.Toggle,{value:"underline",className:"Toggle","aria-label":"Underline",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(N,{style:{width:"16px",height:"16px"}})})]}),e(t.Toolbar.Separator,{className:"ToolbarSeparator"}),e(t.Toolbar.Button,{className:"Button","data-size":"xs",children:"Save"})]})};var i=window.React,A=v||{},q=["Default","WithSelect","WithLink","WithGroups"];function J({id:o}){let a=S[o],r={...A.args||{},...a.args||{}};return(a.render||(n=>i.createElement(A.component,n)))(r,{args:r,id:o,name:o})}var K=q.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(J,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,K));})();
15
+ (()=>{var f=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var C=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),M=(o,a)=>{for(var l in a)p(o,l,{get:a[l],enumerable:!0})},k=(o,a,l,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of w(a))!R.call(o,r)&&r!==l&&p(o,r,{get:()=>a[r],enumerable:!(n=B(a,r))||n.enumerable});return o};var G=(o,a,l)=>(l=o!=null?f(y(o)):{},k(a||!o||!o.__esModule?p(l,"default",{value:o,enumerable:!0}):l,o));var b=C((O,v)=>{v.exports=window.Loomiere});var m={};M(m,{Compact:()=>L,Default:()=>W,WithGroups:()=>z,WithLink:()=>N,WithSelect:()=>E,default:()=>d});var t=G(b(),1);var g=window.React;function e(o,a,l){let{children:n,...r}=a||{};return l!==void 0&&(r.key=l),n===void 0?g.createElement(o,r):Array.isArray(n)?g.createElement(o,r,...n):g.createElement(o,r,n)}var U=g.Fragment;var A={title:"Components/Lib/Toolbar",component:t.Toolbar.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=A,s=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),c=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),u=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...o,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),T=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),x=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),I=o=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),P=o=>e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...o,children:e("path",{d:"M2 4l4 4 4-4"})}),h=o=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",...o,children:e("path",{d:"M3 8l3 3 7-7"})}),W={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})}),e(t.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]}),e(t.Toolbar.Separator,{}),e(t.ToggleGroup,{className:"ToolbarGroup",defaultValue:["left"],children:[e(t.Toggle,{value:"left","aria-label":"Align left",children:e(T,{})}),e(t.Toggle,{value:"center","aria-label":"Align center",children:e(x,{})}),e(t.Toggle,{value:"right","aria-label":"Align right",children:e(I,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{children:"Save"})]})},E={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})})]}),e(t.Toolbar.Separator,{}),e(t.Select.Root,{defaultValue:"helvetica",children:[e(t.Select.Trigger,{className:"Button",style:{minWidth:"140px"},children:[e(t.Select.Value,{}),e(t.Select.Icon,{children:e(P,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.Item,{value:"helvetica",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Helvetica"})]}),e(t.Select.Item,{value:"arial",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Arial"})]}),e(t.Select.Item,{value:"times",children:[e(t.Select.ItemIndicator,{children:e(h,{})}),e(t.Select.ItemText,{children:"Times New Roman"})]})]})})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{children:"Apply"})]})},N={render:()=>e(t.Toolbar.Root,{children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,children:[e(t.Toggle,{value:"bold","aria-label":"Bold",children:e(s,{})}),e(t.Toggle,{value:"italic","aria-label":"Italic",children:e(c,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Link,{href:"#",children:"Last edited 2h ago"})]})},z={render:()=>e(t.Toolbar.Root,{children:[e(t.Toolbar.Group,{"aria-label":"Text formatting",children:[e(t.Toolbar.Button,{"aria-label":"Bold",children:e(s,{})}),e(t.Toolbar.Button,{"aria-label":"Italic",children:e(c,{})}),e(t.Toolbar.Button,{"aria-label":"Underline",children:e(u,{})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Group,{"aria-label":"Alignment",children:[e(t.Toolbar.Button,{"aria-label":"Align left",children:e(T,{})}),e(t.Toolbar.Button,{"aria-label":"Align center",children:e(x,{})}),e(t.Toolbar.Button,{"aria-label":"Align right",children:e(I,{})})]})]})},L={render:()=>e(t.Toolbar.Root,{style:{padding:"var(--sl-space-1)",gap:"var(--sl-space-1)"},children:[e(t.ToggleGroup,{className:"ToolbarGroup",multiple:!0,style:{gap:"2px"},children:[e(t.Toggle,{value:"bold","aria-label":"Bold",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(s,{style:{width:"16px",height:"16px"}})}),e(t.Toggle,{value:"italic","aria-label":"Italic",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(c,{style:{width:"16px",height:"16px"}})}),e(t.Toggle,{value:"underline","aria-label":"Underline",style:{padding:"var(--sl-space-1)",width:"28px",height:"28px"},children:e(u,{style:{width:"16px",height:"16px"}})})]}),e(t.Toolbar.Separator,{}),e(t.Toolbar.Button,{"data-size":"xs",children:"Save"})]})};var i=window.React,S=d||{},V=["Default","WithSelect","WithLink","WithGroups"];function H({id:o}){let a=m[o],l={...S.args||{},...a.args||{}};return(a.render||(r=>i.createElement(S.component,r)))(l,{args:l,id:o,name:o})}var D=V.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(H,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/Tooltip/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  The Base UI Tooltip styled by the theme. The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip reads as a label laid over the page. Motion is the popup's; only the width limit is the tooltip's own (tokens/component/tooltip.json).
4
4
 
5
- Use `Loomiere.Tooltip` (`import { Tooltip } from '@base-ui/react/tooltip'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
5
+ Use `Loomiere.Tooltip`, this package's wrapper: it puts the class names on for you (`import { Tooltip } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Tooltip`.
6
6
 
7
7
  Base UI docs: https://base-ui.com/react/components/tooltip
8
8
 
@@ -29,9 +29,9 @@ export const Default: Story = {
29
29
  Hover me
30
30
  </Tooltip.Trigger>
31
31
  <Tooltip.Portal>
32
- <Tooltip.Positioner className="TooltipPositioner" sideOffset={8}>
33
- <Tooltip.Popup className="TooltipPopup">
34
- <Tooltip.Arrow className="TooltipArrow">
32
+ <Tooltip.Positioner sideOffset={8}>
33
+ <Tooltip.Popup>
34
+ <Tooltip.Arrow>
35
35
  <TooltipArrow />
36
36
  </Tooltip.Arrow>
37
37
  This is a helpful tooltip
package/dist/exports/design-system/components/Tooltip/preview.html CHANGED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var A=(e,i)=>()=>(i||e((i={exports:{}}).exports,i),i.exports),h=(e,i)=>{for(var r in i)T(e,r,{get:i[r],enumerable:!0})},R=(e,i,r,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of w(i))!y.call(e,l)&&l!==r&&T(e,l,{get:()=>i[l],enumerable:!(p=f(i,l))||p.enumerable});return e};var v=(e,i,r)=>(r=e!=null?u(N(e)):{},R(i||!e||!e.__esModule?T(r,"default",{value:e,enumerable:!0}):r,e));var P=A((M,d)=>{d.exports=window.Loomiere.Base});var c={};h(c,{Default:()=>B,LongContent:()=>S,OnText:()=>E,Placement:()=>C,WithDelay:()=>b,WithIcon:()=>O,WithoutArrow:()=>D,default:()=>m});var t=v(P(),1);var n=window.React;function o(e,i,r){let{children:p,...l}=i||{};return r!==void 0&&(l.key=r),p===void 0?n.createElement(e,l):Array.isArray(p)?n.createElement(e,l,...p):n.createElement(e,l,p)}var W=n.Fragment;var x={title:"Components/Tooltip",component:t.Tooltip.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=x;function s(e){return o("svg",{width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",...e,children:o("path",{d:"M0 6L6 0L12 6H0Z"})})}var q=e=>o("svg",{width:"20",height:"20",viewBox:"0 -960 960 960",fill:"currentColor",...e,children:o("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),B={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a helpful tooltip"]})})})]})},O={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button","data-variant":"ghost","aria-label":"More information",style:{padding:"var(--sl-space-2)",minWidth:"40px",display:"flex",alignItems:"center",justifyContent:"center"},children:o(q,{})}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Additional information about this feature"]})})})]})},S={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover for details"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This is a longer tooltip with more detailed information. It will wrap to multiple lines when it exceeds the maximum width."]})})})]})},C={render:()=>o("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"80px",padding:"80px"},children:[o("div",{style:{gridColumn:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Top"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"top",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on top"]})})})]})}),o("div",{style:{gridColumn:"1",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Left"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"left",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on left"]})})})]})}),o("div",{style:{gridColumn:"3",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Right"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"right",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on right"]})})})]})}),o("div",{style:{gridColumn:"2",gridRow:"3"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Bottom"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",side:"bottom",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Tooltip on bottom"]})})})]})})]})},b={render:()=>o("div",{style:{display:"flex",gap:"16px"},children:[o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:0,children:"No delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears immediately"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:500,children:"500ms delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 500ms"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:1e3,children:"1s delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"Appears after 1 second"]})})})]})]})},E={render:()=>o("div",{style:{maxWidth:"400px",fontSize:"16px",lineHeight:"1.6"},children:o("p",{children:["Tooltips can be attached to inline text elements."," ",o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{style:{textDecoration:"underline",textDecorationStyle:"dotted",cursor:"help",background:"none",border:"none",padding:0,font:"inherit",color:"var(--sl-text-accent)"},children:"Hover this text"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:[o(t.Tooltip.Arrow,{className:"TooltipArrow",children:o(s,{})}),"This provides additional context"]})})})]})," ","to see more information without leaving the page."]})})},D={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{className:"TooltipPositioner",sideOffset:8,children:o(t.Tooltip.Popup,{className:"TooltipPopup",children:"Tooltip without an arrow"})})})]})};var a=window.React,g=m||{},I=["Default","WithIcon","LongContent","Placement"];function Z({id:e}){let i=c[e],r={...g.args||{},...i.args||{}};return(i.render||(l=>a.createElement(g.component,l)))(r,{args:r,id:e,name:e})}var H=I.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(Z,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,H));})();
15
+ (()=>{var u=Object.create;var T=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var R=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),v=(e,r)=>{for(var i in r)T(e,i,{get:r[i],enumerable:!0})},x=(e,r,i,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of w(r))!h.call(e,l)&&l!==i&&T(e,l,{get:()=>r[l],enumerable:!(n=f(r,l))||n.enumerable});return e};var A=(e,r,i)=>(i=e!=null?u(y(e)):{},x(r||!e||!e.__esModule?T(i,"default",{value:e,enumerable:!0}):i,e));var c=R((M,m)=>{m.exports=window.Loomiere});var g={};v(g,{Default:()=>B,LongContent:()=>S,OnText:()=>E,Placement:()=>b,WithDelay:()=>C,WithIcon:()=>N,WithoutArrow:()=>D,default:()=>d});var t=A(c(),1);var a=window.React;function o(e,r,i){let{children:n,...l}=r||{};return i!==void 0&&(l.key=i),n===void 0?a.createElement(e,l):Array.isArray(n)?a.createElement(e,l,...n):a.createElement(e,l,n)}var W=a.Fragment;var q={title:"Components/Lib/Tooltip",component:t.Tooltip.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=q;function p(e){return o("svg",{width:"12",height:"6",viewBox:"0 0 12 6",fill:"none",...e,children:o("path",{d:"M0 6L6 0L12 6H0Z"})})}var O=e=>o("svg",{width:"20",height:"20",viewBox:"0 -960 960 960",fill:"currentColor",...e,children:o("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),B={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This is a helpful tooltip"]})})})]})},N={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button","data-variant":"ghost","aria-label":"More information",style:{padding:"var(--sl-space-2)",minWidth:"40px",display:"flex",alignItems:"center",justifyContent:"center"},children:o(O,{})}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Additional information about this feature"]})})})]})},S={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover for details"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This is a longer tooltip with more detailed information. It will wrap to multiple lines when it exceeds the maximum width."]})})})]})},b={render:()=>o("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"80px",padding:"80px"},children:[o("div",{style:{gridColumn:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Top"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"top",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on top"]})})})]})}),o("div",{style:{gridColumn:"1",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Left"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"left",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on left"]})})})]})}),o("div",{style:{gridColumn:"3",gridRow:"2"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Right"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"right",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on right"]})})})]})}),o("div",{style:{gridColumn:"2",gridRow:"3"},children:o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Bottom"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{side:"bottom",sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Tooltip on bottom"]})})})]})})]})},C={render:()=>o("div",{style:{display:"flex",gap:"16px"},children:[o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:0,children:"No delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears immediately"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:500,children:"500ms delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears after 500ms"]})})})]}),o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",delay:1e3,children:"1s delay"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"Appears after 1 second"]})})})]})]})},E={render:()=>o("div",{style:{maxWidth:"400px",fontSize:"16px",lineHeight:"1.6"},children:o("p",{children:["Tooltips can be attached to inline text elements."," ",o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{style:{textDecoration:"underline",textDecorationStyle:"dotted",cursor:"help",background:"none",border:"none",padding:0,font:"inherit",color:"var(--sl-text-accent)"},children:"Hover this text"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:[o(t.Tooltip.Arrow,{children:o(p,{})}),"This provides additional context"]})})})]})," ","to see more information without leaving the page."]})})},D={render:()=>o(t.Tooltip.Root,{children:[o(t.Tooltip.Trigger,{className:"Button",children:"Hover me"}),o(t.Tooltip.Portal,{children:o(t.Tooltip.Positioner,{sideOffset:8,children:o(t.Tooltip.Popup,{children:"Tooltip without an arrow"})})})]})};var s=window.React,P=d||{},I=["Default","WithIcon","LongContent","Placement"];function L({id:e}){let r=g[e],i={...P.args||{},...r.args||{}};return(r.render||(l=>s.createElement(P.component,l)))(i,{args:i,id:e,name:e})}var Z=I.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(L,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,Z));})();
16
16
 
17
17
  </script>
18
18
  </body>
package/dist/exports/design-system/components/bundle.css CHANGED
@@ -6306,7 +6306,7 @@
6306
6306
  }
6307
6307
 
6308
6308
 
6309
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
6309
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
6310
6310
  /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
6311
6311
  Loomiere theme. Load the theme first:
6312
6312
  @import '<your theme>/tokens.css';
@@ -6316,7 +6316,7 @@
6316
6316
  /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
6317
6317
  frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
6318
6318
  @layer reset {
6319
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
6319
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
6320
6320
  /* CSS Reset - Mojave Theme */
6321
6321
 
6322
6322
  /* ============================================
@@ -6760,7 +6760,7 @@ hr {
6760
6760
  }
6761
6761
  }
6762
6762
  @layer reset {
6763
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
6763
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
6764
6764
  /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
6765
6765
 
6766
6766
  /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -6873,7 +6873,7 @@ main:focus {
6873
6873
 
6874
6874
  }
6875
6875
  @layer reset {
6876
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
6876
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
6877
6877
  /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
6878
6878
 
6879
6879
  :focus-visible {
@@ -6941,7 +6941,7 @@ button,
6941
6941
 
6942
6942
  }
6943
6943
  /* Component styles */
6944
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
6944
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
6945
6945
  /* Accordion - Mojave Theme
6946
6946
  *
6947
6947
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7062,7 +7062,7 @@ button,
7062
7062
  overflow: hidden;
7063
7063
  }
7064
7064
 
7065
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7065
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7066
7066
  /* Alert Dialog - Mojave Theme
7067
7067
  *
7068
7068
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7071,7 +7071,7 @@ button,
7071
7071
  * cancel quiet, and a destructive one bold with data-color="error".
7072
7072
  */
7073
7073
 
7074
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7074
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7075
7075
  /* Autocomplete - Mojave Theme
7076
7076
  *
7077
7077
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7273,7 +7273,7 @@ button,
7273
7273
  (reset-accessibility.css).
7274
7274
  ============================================ */
7275
7275
 
7276
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7276
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7277
7277
  /* Avatar - Mojave Theme
7278
7278
  *
7279
7279
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7381,7 +7381,7 @@ button,
7381
7381
  }
7382
7382
  }
7383
7383
 
7384
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7384
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7385
7385
  /* Button - Mojave Theme
7386
7386
  *
7387
7387
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7531,7 +7531,7 @@ button,
7531
7531
  font-size: var(--sl-icon-size-maximize);
7532
7532
  }
7533
7533
 
7534
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7534
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7535
7535
  /* Checkbox - Mojave Theme
7536
7536
  * Sizes follow the label: the box is the icon size one tier above the label's text
7537
7537
  * tier (like a button's icon) and the check mark one tier below it.
@@ -7688,7 +7688,7 @@ button,
7688
7688
  border-radius: var(--sl-radius-pill);
7689
7689
  }
7690
7690
 
7691
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7691
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7692
7692
  /* Checkbox Group - Mojave Theme */
7693
7693
 
7694
7694
  /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -7704,7 +7704,7 @@ button,
7704
7704
  pointer-events: none;
7705
7705
  }
7706
7706
 
7707
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7707
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7708
7708
  /* Collapsible - Mojave Theme
7709
7709
  *
7710
7710
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -7820,7 +7820,7 @@ button,
7820
7820
  background: var(--sl-surface-raised);
7821
7821
  }
7822
7822
 
7823
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
7823
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
7824
7824
  /* Combobox - Mojave Theme
7825
7825
  *
7826
7826
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8305,7 +8305,7 @@ button,
8305
8305
  color: var(--sl-text-tertiary);
8306
8306
  }
8307
8307
 
8308
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8308
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8309
8309
  /* Context Menu - Mojave Theme
8310
8310
  *
8311
8311
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8474,7 +8474,7 @@ button,
8474
8474
  stroke-width: var(--sl-stroke-default);
8475
8475
  }
8476
8476
 
8477
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8477
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8478
8478
  /* Dialog and Alert dialog - Mojave Theme
8479
8479
  *
8480
8480
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -8620,7 +8620,7 @@ button,
8620
8620
  margin-top: var(--sl-modal-actions-spacing);
8621
8621
  }
8622
8622
 
8623
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8623
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8624
8624
  /* Drawer - a panel that slides in from an edge and can be swiped away.
8625
8625
  The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
8626
8626
  drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -8747,7 +8747,7 @@ button,
8747
8747
  color: var(--sl-modal-description-color);
8748
8748
  }
8749
8749
 
8750
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8750
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8751
8751
  /* Field - Mojave Theme
8752
8752
  *
8753
8753
  * Label, control, description and error. No component tokens: spacing is the field
@@ -8808,7 +8808,7 @@ textarea.FieldControl {
8808
8808
  height: auto;
8809
8809
  }
8810
8810
 
8811
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8811
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8812
8812
  /* Fieldset - Mojave Theme
8813
8813
  *
8814
8814
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -8850,7 +8850,7 @@ textarea.FieldControl {
8850
8850
  color: var(--sl-text-secondary);
8851
8851
  }
8852
8852
 
8853
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8853
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8854
8854
  /* Form - Mojave Theme
8855
8855
  *
8856
8856
  * No component tokens: fields stack with the large block space, and the action
@@ -8870,7 +8870,7 @@ textarea.FieldControl {
8870
8870
  margin-top: var(--sl-space-block-md);
8871
8871
  }
8872
8872
 
8873
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
8873
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
8874
8874
  /* Input - Mojave Theme
8875
8875
  *
8876
8876
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9007,7 +9007,7 @@ textarea.FieldControl {
9007
9007
  padding-inline: var(--sl-control-padding-inline-lg);
9008
9008
  }
9009
9009
 
9010
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9010
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9011
9011
  /* Menu - Mojave Theme
9012
9012
  *
9013
9013
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9156,7 +9156,7 @@ textarea.FieldControl {
9156
9156
  color: var(--sl-text-tertiary);
9157
9157
  }
9158
9158
 
9159
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9159
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9160
9160
  /* Menubar - Mojave Theme
9161
9161
  *
9162
9162
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9349,7 +9349,7 @@ textarea.FieldControl {
9349
9349
  color: var(--sl-text-tertiary);
9350
9350
  }
9351
9351
 
9352
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9352
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9353
9353
  /* Meter - Mojave Theme
9354
9354
  *
9355
9355
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9364,6 +9364,12 @@ textarea.FieldControl {
9364
9364
  width: 100%;
9365
9365
  }
9366
9366
 
9367
+ .MeterHeader {
9368
+ display: flex;
9369
+ justify-content: space-between;
9370
+ align-items: center;
9371
+ }
9372
+
9367
9373
  .MeterLabel {
9368
9374
  font-family: var(--sl-font-label-base-font-family);
9369
9375
  font-size: var(--sl-font-label-base-font-size);
@@ -9371,9 +9377,6 @@ textarea.FieldControl {
9371
9377
  line-height: var(--sl-font-label-base-line-height);
9372
9378
  letter-spacing: var(--sl-font-label-base-letter-spacing);
9373
9379
  color: var(--sl-gauge-label-color);
9374
- display: flex;
9375
- justify-content: space-between;
9376
- align-items: center;
9377
9380
  }
9378
9381
 
9379
9382
  .MeterTrack {
@@ -9409,7 +9412,7 @@ textarea.FieldControl {
9409
9412
  height: var(--sl-gauge-height-lg);
9410
9413
  }
9411
9414
 
9412
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9415
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9413
9416
  /* Navigation Menu - Mojave Theme
9414
9417
  *
9415
9418
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -9829,7 +9832,7 @@ textarea.FieldControl {
9829
9832
  width: 100%;
9830
9833
  }
9831
9834
 
9832
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9835
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9833
9836
  /* Number Field - Mojave Theme
9834
9837
  *
9835
9838
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -9920,7 +9923,7 @@ textarea.FieldControl {
9920
9923
  user-select: none;
9921
9924
  }
9922
9925
 
9923
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9926
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9924
9927
  /* OTP Field - Mojave Theme
9925
9928
  *
9926
9929
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -9983,7 +9986,7 @@ textarea.FieldControl {
9983
9986
  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
9984
9987
  }
9985
9988
 
9986
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
9989
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
9987
9990
  /* Popover - Mojave Theme */
9988
9991
 
9989
9992
  /* ============================================
@@ -10148,7 +10151,7 @@ textarea.FieldControl {
10148
10151
  fill: var(--sl-popup-arrow-stroke);
10149
10152
  }
10150
10153
 
10151
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10154
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10152
10155
  /* Preview Card - Mojave Theme
10153
10156
  *
10154
10157
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10265,7 +10268,7 @@ textarea.FieldControl {
10265
10268
  fill: var(--sl-popup-arrow-stroke);
10266
10269
  }
10267
10270
 
10268
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10271
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10269
10272
  /* Progress - Mojave Theme
10270
10273
  *
10271
10274
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10342,7 +10345,7 @@ textarea.FieldControl {
10342
10345
  height: var(--sl-gauge-height-lg);
10343
10346
  }
10344
10347
 
10345
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10348
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10346
10349
  /* Radio - Mojave Theme
10347
10350
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
10348
10351
  * dot is a share of the circle (check.dot-scale).
@@ -10494,7 +10497,7 @@ textarea.FieldControl {
10494
10497
  gap: var(--sl-gap-stack-sm);
10495
10498
  }
10496
10499
 
10497
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10500
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10498
10501
  /* Scroll Area - Mojave Theme
10499
10502
  *
10500
10503
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10576,7 +10579,7 @@ textarea.FieldControl {
10576
10579
  background: transparent;
10577
10580
  }
10578
10581
 
10579
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10582
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10580
10583
  /* Select - Mojave Theme
10581
10584
  *
10582
10585
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -10657,6 +10660,17 @@ textarea.FieldControl {
10657
10660
  transform: rotate(180deg);
10658
10661
  }
10659
10662
 
10663
+ /* A Select.Trigger drawn as a Button (in a toolbar) takes the Button's text color and sizing. */
10664
+ .Button > .SelectValue,
10665
+ .Button > .SelectIcon {
10666
+ flex: none;
10667
+ color: inherit;
10668
+ }
10669
+
10670
+ .Button[aria-expanded='true'] > .SelectIcon {
10671
+ transform: rotate(180deg);
10672
+ }
10673
+
10660
10674
  /* ============================================
10661
10675
  BACKDROP, POSITIONER, POPUP
10662
10676
  ============================================ */
@@ -10850,7 +10864,7 @@ textarea.FieldControl {
10850
10864
  stroke-width: var(--sl-stroke-default);
10851
10865
  }
10852
10866
 
10853
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10867
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10854
10868
  /* Separator - Mojave Theme
10855
10869
  *
10856
10870
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -10878,7 +10892,7 @@ textarea.FieldControl {
10878
10892
  margin-inline: var(--sl-space-4);
10879
10893
  }
10880
10894
 
10881
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
10895
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
10882
10896
  /* Slider - Mojave Theme
10883
10897
  *
10884
10898
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11044,7 +11058,7 @@ textarea.FieldControl {
11044
11058
  transform: translate(-50%, 50%);
11045
11059
  }
11046
11060
 
11047
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11061
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11048
11062
  /* Switch - Mojave Theme
11049
11063
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
11050
11064
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11210,7 +11224,7 @@ textarea.FieldControl {
11210
11224
  color: var(--sl-text-disabled);
11211
11225
  }
11212
11226
 
11213
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11227
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11214
11228
  /* Table - Mojave Theme
11215
11229
  *
11216
11230
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -11355,7 +11369,7 @@ textarea.FieldControl {
11355
11369
  color: var(--sl-text-tertiary);
11356
11370
  }
11357
11371
 
11358
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11372
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11359
11373
  /* Tabs - Mojave Theme
11360
11374
  *
11361
11375
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11491,7 +11505,7 @@ textarea.FieldControl {
11491
11505
  padding: var(--sl-space-6);
11492
11506
  }
11493
11507
 
11494
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11508
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11495
11509
  /* Toast - Mojave Theme
11496
11510
  *
11497
11511
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11727,7 +11741,7 @@ textarea.FieldControl {
11727
11741
  flex-shrink: 0;
11728
11742
  }
11729
11743
 
11730
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11744
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11731
11745
  /* Toggle - Mojave Theme
11732
11746
  * A toggle is a button that stays pressed: the same heights, padding, gap and
11733
11747
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -11839,7 +11853,7 @@ textarea.FieldControl {
11839
11853
  height: var(--sl-icon-size-maximize);
11840
11854
  }
11841
11855
 
11842
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11856
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11843
11857
  /* Toggle Group - Mojave Theme
11844
11858
  *
11845
11859
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -11860,7 +11874,7 @@ textarea.FieldControl {
11860
11874
  border-radius: var(--sl-radius-item);
11861
11875
  }
11862
11876
 
11863
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11877
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11864
11878
  /* Toolbar - Mojave Theme
11865
11879
  *
11866
11880
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -11922,7 +11936,7 @@ textarea.FieldControl {
11922
11936
  max-width: var(--sl-toolbar-input-max-width);
11923
11937
  }
11924
11938
 
11925
- /* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
11939
+ /* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
11926
11940
  /* Tooltip - Mojave Theme
11927
11941
  *
11928
11942
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip