@scattered-light/loomiere-base-ui 0.2.0 → 0.4.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.
- package/dist/design-system/components/Accordion/README.md +1 -1
- package/dist/design-system/components/Accordion/preview.html +1 -1
- package/dist/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/design-system/components/Avatar/README.md +1 -1
- package/dist/design-system/components/Avatar/preview.html +1 -1
- package/dist/design-system/components/Button/README.md +1 -1
- package/dist/design-system/components/Button/preview.html +3 -3
- package/dist/design-system/components/Checkbox/preview.html +1 -1
- package/dist/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/design-system/components/Collapsible/preview.html +1 -1
- package/dist/design-system/components/Combobox/preview.html +1 -1
- package/dist/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/design-system/components/Dialog/README.md +1 -1
- package/dist/design-system/components/Dialog/preview.html +1 -1
- package/dist/design-system/components/Drawer/preview.html +1 -1
- package/dist/design-system/components/Field/preview.html +1 -1
- package/dist/design-system/components/Fieldset/preview.html +1 -1
- package/dist/design-system/components/Form/preview.html +1 -1
- package/dist/design-system/components/Input/preview.html +1 -1
- package/dist/design-system/components/Menu/preview.html +1 -1
- package/dist/design-system/components/Menubar/preview.html +1 -1
- package/dist/design-system/components/Meter/preview.html +1 -1
- package/dist/design-system/components/NavigationMenu/preview.html +1 -1
- package/dist/design-system/components/NumberField/preview.html +1 -1
- package/dist/design-system/components/OTPField/preview.html +1 -1
- package/dist/design-system/components/Popover/README.md +2 -2
- package/dist/design-system/components/Popover/preview.html +2 -2
- package/dist/design-system/components/PreviewCard/README.md +1 -1
- package/dist/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/design-system/components/Progress/preview.html +1 -1
- package/dist/design-system/components/Radio/preview.html +1 -1
- package/dist/design-system/components/ScrollArea/preview.html +1 -1
- package/dist/design-system/components/Select/preview.html +1 -1
- package/dist/design-system/components/Separator/preview.html +1 -1
- package/dist/design-system/components/Slider/preview.html +1 -1
- package/dist/design-system/components/Switch/preview.html +1 -1
- package/dist/design-system/components/Table/README.md +50 -0
- package/dist/design-system/components/Table/preview.html +19 -0
- package/dist/design-system/components/Tabs/preview.html +1 -1
- package/dist/design-system/components/Toast/preview.html +1 -1
- package/dist/design-system/components/Toggle/README.md +1 -1
- package/dist/design-system/components/Toggle/preview.html +1 -1
- package/dist/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/design-system/components/Toolbar/preview.html +1 -1
- package/dist/design-system/components/Tooltip/preview.html +1 -1
- package/dist/design-system/components/bundle.js +5 -5
- package/dist/design-system/components/index.d.ts +2 -1
- package/dist/design-system/components/styles.css +687 -544
- package/dist/index.d.ts +2 -1
- package/dist/index.js +8 -2
- package/dist/index.js.map +1 -1
- package/dist/styles/components/Accordion.css +12 -12
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +22 -22
- package/dist/styles/components/Avatar.css +15 -42
- package/dist/styles/components/Button.css +45 -25
- package/dist/styles/components/Checkbox.css +16 -16
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +16 -16
- package/dist/styles/components/Combobox.css +62 -62
- package/dist/styles/components/ContextMenu.css +12 -12
- package/dist/styles/components/Dialog.css +12 -12
- package/dist/styles/components/Drawer.css +11 -11
- package/dist/styles/components/Field.css +16 -16
- package/dist/styles/components/Fieldset.css +11 -11
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +21 -21
- package/dist/styles/components/Menu.css +12 -12
- package/dist/styles/components/Menubar.css +17 -17
- package/dist/styles/components/Meter.css +11 -11
- package/dist/styles/components/NavigationMenu.css +22 -22
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +11 -11
- package/dist/styles/components/Popover.css +15 -12
- package/dist/styles/components/PreviewCard.css +12 -12
- package/dist/styles/components/Progress.css +11 -11
- package/dist/styles/components/Radio.css +16 -16
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +22 -22
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +11 -11
- package/dist/styles/components/Switch.css +22 -22
- package/dist/styles/components/Table.css +144 -0
- package/dist/styles/components/Tabs.css +31 -31
- package/dist/styles/components/Toast.css +11 -11
- package/dist/styles/components/Toggle.css +24 -22
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +6 -6
- package/dist/styles/components/Tooltip.css +6 -6
- package/dist/styles/index.css +2 -1
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +2 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Accordion
|
|
2
2
|
|
|
3
|
-
The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the
|
|
3
|
+
The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and the panel is base text. The accordion sits on whatever surface holds it.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Accordion` (`import { Accordion } from '@base-ui/react/accordion'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Avatar
|
|
2
2
|
|
|
3
|
-
The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials
|
|
3
|
+
The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Avatar` (`import { Avatar } from '@base-ui/react/avatar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -10,7 +10,7 @@ Base UI docs: https://base-ui.com/react/components/button
|
|
|
10
10
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
|
-
| `Button` | `data-size`: `xs`, `sm`, `lg` |
|
|
13
|
+
| `Button` | `data-icon-only`; `data-size`: `xs`, `sm`, `lg` |
|
|
14
14
|
|
|
15
15
|
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
16
|
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var v=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),S=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},E=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of f(a))!w.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=g(a,r))||s.enumerable});return e};var I=(e,a,n)=>(n=e!=null?v(h(e)):{},E(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=B((q,c)=>{c.exports=window.Loomiere});var y={};S(y,{Default:()=>A,Disabled:()=>O,Emphasis:()=>k,IconOnly:()=>W,Loading:()=>M,QuietIconOnly:()=>L,Sizes:()=>D,Variants:()=>R,WithIcon:()=>C,default:()=>u});var o=I(m(),1);var d=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var F=d.Fragment;var z={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=z,l=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),A={render:()=>t(o.Button,{type:"button",children:"Button"})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},D={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(l,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(l,{})})]})},x=({flip:e,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",style:e?{transform:"scaleX(-1)"}:void 0,...a,children:t("path",{d:"M7.2 14.8a.75.75 0 010-1.06L10.94 10 7.2 6.26a.75.75 0 011.06-1.06l4.27 4.27a.75.75 0 010 1.06L8.26 14.8a.75.75 0 01-1.06 0z"})}),L={render:()=>t("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Previous month",children:t(x,{flip:!0})}),t("span",{className:"text-style-subtitle-base",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Next month",children:t(x,{})})]})},O={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},M={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
|
|
16
16
|
@keyframes spin {
|
|
17
17
|
to { transform: rotate(360deg); }
|
|
18
18
|
}
|
|
19
|
-
`})]})},
|
|
19
|
+
`})]})},k={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var i=window.React,b=u||{},N=["Default","Variants","Sizes","WithIcon"];function j({id:e}){let a=y[e],n={...b.args||{},...a.args||{}};return(a.render||(r=>i.createElement(b.component,r)))(n,{args:n,id:e,name:e})}var P=N.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
|
|
20
20
|
|
|
21
21
|
</script>
|
|
22
22
|
</body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Dialog
|
|
2
2
|
|
|
3
|
-
The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the
|
|
3
|
+
The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Dialog` (`import { Dialog } from '@base-ui/react/dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -32,8 +32,8 @@ From the Popover stories (`Default`):
|
|
|
32
32
|
export const Default: Story = {
|
|
33
33
|
render: () => (
|
|
34
34
|
<Popover.Root>
|
|
35
|
-
<Popover.Trigger className="PopoverTrigger Button">
|
|
36
|
-
<BellIcon aria-
|
|
35
|
+
<Popover.Trigger className="PopoverTrigger Button" aria-label="Notifications">
|
|
36
|
+
<BellIcon aria-hidden="true" />
|
|
37
37
|
</Popover.Trigger>
|
|
38
38
|
<Popover.Portal>
|
|
39
39
|
<Popover.Positioner className="PopoverPositioner" sideOffset={8}>
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:o(D,{"aria-
|
|
15
|
+
(()=>{var y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button","aria-label":"Notifications",children:o(D,{"aria-hidden":"true"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Notifications"}),o(e.Popover.Description,{className:"PopoverDescription",children:"You are all caught up. Good job!"})]})})})]})},S={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Close,{className:"PopoverClose","aria-label":"Close",children:o(k,{})}),o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Settings"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let r=P.useId(),t=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Get in touch"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:r,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:t,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(r=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:r}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",side:r,sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Description,{className:"PopoverDescription",children:["Popover on the ",r]})]})})})]},r))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{className:"PopoverBackdrop",style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Modal-like popover"}),o(e.Popover.Description,{className:"PopoverDescription",children:"This popover has a backdrop to focus attention."})]})})]})]})};var i=window.React,N=v||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:r}){let t=m[r],s={...N.args||{},...t.args||{}};return(t.render||(a=>i.createElement(N.component,a)))(s,{args:s,id:r,name:r})}var j=I.map(r=>i.createElement("section",{key:r,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PreviewCard
|
|
2
2
|
|
|
3
|
-
The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a
|
|
3
|
+
The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Table
|
|
2
|
+
|
|
3
|
+
Plain HTML styled by the theme. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or data-selected) for selection; cells take data-align="end" for numbers.
|
|
4
|
+
|
|
5
|
+
Base UI has no Table: use the native element with the class below (`<table className="Table">`).
|
|
6
|
+
|
|
7
|
+
Tokens: the table concept (--sl-table-*).
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Table` | `data-sticky-header` |
|
|
14
|
+
|
|
15
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
|
+
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
From the Table stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
render: () => (
|
|
24
|
+
<table className="Table">
|
|
25
|
+
<thead>
|
|
26
|
+
<tr>
|
|
27
|
+
<th scope="col">Site</th>
|
|
28
|
+
<th scope="col">Park</th>
|
|
29
|
+
<th scope="col" data-align="end">
|
|
30
|
+
Nights
|
|
31
|
+
</th>
|
|
32
|
+
<th scope="col">Status</th>
|
|
33
|
+
</tr>
|
|
34
|
+
</thead>
|
|
35
|
+
<tbody>
|
|
36
|
+
{trips.map((t) => (
|
|
37
|
+
<tr key={t.site}>
|
|
38
|
+
<td>{t.site}</td>
|
|
39
|
+
<td data-subtle="">{t.park}</td>
|
|
40
|
+
<td data-align="end">{t.nights}</td>
|
|
41
|
+
<td>{t.status}</td>
|
|
42
|
+
</tr>
|
|
43
|
+
))}
|
|
44
|
+
</tbody>
|
|
45
|
+
</table>
|
|
46
|
+
),
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The preview also shows `SortableAndSelected`, `Empty`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Display" height=360 subtitle="Default / SortableAndSelected / Empty" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var p=Object.defineProperty;var m=(e,a)=>{for(var o in a)p(e,o,{get:a[o],enumerable:!0})};var i={};m(i,{Default:()=>u,Empty:()=>b,SortableAndSelected:()=>g,default:()=>l});var d=window.React;function t(e,a,o){let{children:n,...r}=a||{};return o!==void 0&&(r.key=o),n===void 0?d.createElement(e,r):Array.isArray(n)?d.createElement(e,r,...n):d.createElement(e,r,n)}var N=d.Fragment;var y={title:"Components/Table",parameters:{layout:"padded"},tags:["autodocs"]},l=y,c=[{site:"Jumbo Rocks 42",park:"Joshua Tree",nights:3,status:"Booked"},{site:"Hole-in-the-Wall 7",park:"Mojave Preserve",nights:2,status:"Waitlist"},{site:"Furnace Creek 118",park:"Death Valley",nights:4,status:"Booked"},{site:"Cottonwood 15",park:"Joshua Tree",nights:1,status:"Cancelled"}],u={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:c.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))})]})},g={render:()=>t("table",{className:"Table",children:[t("caption",{children:"Sorted by nights. Hover a header to sort by it."}),t("thead",{children:t("tr",{children:[t("th",{scope:"col","aria-sort":"none",children:"Site"}),t("th",{scope:"col","aria-sort":"none",children:"Park"}),t("th",{scope:"col","aria-sort":"descending","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:[...c].sort((e,a)=>a.nights-e.nights).map((e,a)=>t("tr",{"aria-selected":a===1?"true":void 0,children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))}),t("tfoot",{children:t("tr",{children:[t("td",{colSpan:2,children:"Total"}),t("td",{"data-align":"end",children:c.reduce((e,a)=>e+a.nights,0)}),t("td",{})]})})]})},b={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:t("tr",{children:t("td",{colSpan:3,"data-empty":"",children:"No trips yet"})})})]})};var s=window.React,h=l||{},S=["Default","SortableAndSelected","Empty"];function k({id:e}){let a=i[e],o={...h.args||{},...a.args||{}};return(a.render||(r=>s.createElement(h.component,r)))(o,{args:o,id:e,name:e})}var f=S.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(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,f));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Toggle
|
|
2
2
|
|
|
3
|
-
The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size.
|
|
3
|
+
The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Toggle` (`import { Toggle } from '@base-ui/react/toggle'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|