@scattered-light/loomiere-base-ui 0.14.1 → 0.15.1

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 (78) hide show
  1. package/README.md +13 -1
  2. package/dist/{chunk-HPUI5FIO.js → chunk-RLXKWWZG.js} +18 -3
  3. package/dist/chunk-RLXKWWZG.js.map +1 -0
  4. package/dist/custom/index.d.ts +1 -1
  5. package/dist/custom/index.js +1 -1
  6. package/dist/design-system/components/PickerButton/preview.html +1 -1
  7. package/dist/design-system/components/PickerSplit/README.md +18 -0
  8. package/dist/design-system/components/bundle.js +7 -7
  9. package/dist/design-system/components/index.d.ts +1 -1
  10. package/dist/design-system/components/styles.css +173 -60
  11. package/dist/{index-kV9TCCxP.d.ts → index-BlPgd6jW.d.ts} +26 -1
  12. package/dist/index.d.ts +1 -1
  13. package/dist/index.js +1 -1
  14. package/dist/styles/components/Accordion.css +1 -1
  15. package/dist/styles/components/AlertDialog.css +1 -1
  16. package/dist/styles/components/Autocomplete.css +1 -1
  17. package/dist/styles/components/Avatar.css +1 -1
  18. package/dist/styles/components/Button.css +1 -1
  19. package/dist/styles/components/Checkbox.css +1 -1
  20. package/dist/styles/components/CheckboxGroup.css +1 -1
  21. package/dist/styles/components/Collapsible.css +1 -1
  22. package/dist/styles/components/Combobox.css +1 -1
  23. package/dist/styles/components/ContextMenu.css +1 -1
  24. package/dist/styles/components/Dialog.css +1 -1
  25. package/dist/styles/components/Drawer.css +1 -1
  26. package/dist/styles/components/Field.css +1 -1
  27. package/dist/styles/components/Fieldset.css +1 -1
  28. package/dist/styles/components/Form.css +1 -1
  29. package/dist/styles/components/Input.css +1 -1
  30. package/dist/styles/components/Menu.css +1 -1
  31. package/dist/styles/components/Menubar.css +1 -1
  32. package/dist/styles/components/Meter.css +1 -1
  33. package/dist/styles/components/NavigationMenu.css +1 -1
  34. package/dist/styles/components/NumberField.css +1 -1
  35. package/dist/styles/components/OTPField.css +1 -1
  36. package/dist/styles/components/Popover.css +1 -1
  37. package/dist/styles/components/PreviewCard.css +1 -1
  38. package/dist/styles/components/Progress.css +1 -1
  39. package/dist/styles/components/Radio.css +1 -1
  40. package/dist/styles/components/ScrollArea.css +1 -1
  41. package/dist/styles/components/Select.css +1 -1
  42. package/dist/styles/components/Separator.css +1 -1
  43. package/dist/styles/components/Slider.css +1 -1
  44. package/dist/styles/components/Switch.css +1 -1
  45. package/dist/styles/components/Tabs.css +1 -1
  46. package/dist/styles/components/Toast.css +1 -1
  47. package/dist/styles/components/Toggle.css +1 -1
  48. package/dist/styles/components/ToggleGroup.css +1 -1
  49. package/dist/styles/components/Toolbar.css +1 -1
  50. package/dist/styles/components/Tooltip.css +1 -1
  51. package/dist/styles/custom/AppBar.css +1 -1
  52. package/dist/styles/custom/Badge.css +1 -1
  53. package/dist/styles/custom/Collection.css +1 -1
  54. package/dist/styles/custom/CollectionPagination.css +1 -1
  55. package/dist/styles/custom/CollectionToolbar.css +1 -1
  56. package/dist/styles/custom/DataList.css +1 -1
  57. package/dist/styles/custom/DataTable.css +1 -1
  58. package/dist/styles/custom/DatePicker.css +1 -1
  59. package/dist/styles/custom/DescriptionList.css +1 -1
  60. package/dist/styles/custom/EditableList.css +1 -1
  61. package/dist/styles/custom/EmptyState.css +1 -1
  62. package/dist/styles/custom/ListDetail.css +1 -1
  63. package/dist/styles/custom/MoneyField.css +1 -1
  64. package/dist/styles/custom/PickerButton.css +1 -1
  65. package/dist/styles/custom/PickerSplit.css +97 -0
  66. package/dist/styles/custom/Sheet.css +7 -1
  67. package/dist/styles/custom/SideNav.css +1 -1
  68. package/dist/styles/custom/Splitter.css +1 -1
  69. package/dist/styles/custom/StatFigure.css +1 -1
  70. package/dist/styles/custom/Table.css +10 -1
  71. package/dist/styles/index.css +2 -1
  72. package/dist/styles/reset/accessibility.css +1 -1
  73. package/dist/styles/reset/reset-accessibility.css +1 -1
  74. package/dist/styles/reset/reset-tailwind.css +1 -1
  75. package/dist/styles/reset/reset.css +1 -1
  76. package/dist/styles/tailwind.css +2 -1
  77. package/package.json +2 -2
  78. package/dist/chunk-HPUI5FIO.js.map +0 -1
@@ -1,4 +1,4 @@
1
- export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aC as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aD as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aE as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aF as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aG as ListDetailList, aH as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aI as MAX_MINOR_UNITS, aJ as MoneyChangeDetails, aK as MoneyDisplay, M as MoneyField, aL as MoneyFieldAffix, aM as MoneyFieldGroup, aN as MoneyFieldInput, z as MoneyFieldProps, aO as MoneyFieldRoot, F as MoneyFieldRootProps, aP as MoneyFieldSteps, aQ as NormalizedPaste, aR as PanelSpec, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, aS as RuntimePanel, S as Sheet, K as SheetProps, O as SideNav, Q as SideNavGroup, R as SideNavGroupProps, T as SideNavItem, U as SideNavItemProps, V as SideNavProps, W as SideNavToggle, X as SideNavToggleProps, aT as Size, aU as SizeInput, Y as Splitter, aV as SplitterHandle, Z as SplitterHandleProps, aW as SplitterKey, aX as SplitterPanel, _ as SplitterPanelProps, aY as SplitterRoot, $ as SplitterRootProps, a0 as StatFigure, a1 as StatFigureProps, aZ as StoredLayout, a_ as StoredPanel, a2 as addDays, a3 as addMonths, a$ as affixSide, b0 as applyKey, b1 as applyStored, b2 as ariaPercents, a4 as builtinPresets, a5 as clampDate, b3 as createPanels, b4 as cssSize, b5 as currencyName, b6 as currencySymbol, a6 as daysInMonth, a7 as defaultPresets, a8 as defaultWeekStartsOn, a9 as endOfWeek, b7 as formatDay, b8 as formatFull, aa as formatMoney, ab as fromMinorUnits, ac as getCurrencyDigits, b9 as handleTarget, ad as inclusiveDays, ae as isValidCurrency, af as isoWeek, ag as last30Days, ah as last7Days, ai as lastMonth, aj as lastWeek, ba as layoutOf, ak as lengthBlockReason, bb as measure, bc as monthCells, bd as moveFocusDate, al as nextMonth, am as nextWeek, be as normalizePaste, an as orderRange, bf as parseDate, ao as parseDecimalString, bg as parseSize, bh as presetInBounds, bi as resetToDefault, bj as resizeByDelta, ap as resolvePreset, bk as roundHalfExpand, bl as roundingChangesValue, bm as sameSelection, bn as serializeSize, bo as settle, bp as sizeText, aq as startOfWeek, bq as syncPanels, ar as thisMonth, as as thisQuarter, at as thisWeek, au as toDecimalString, av as toMinorUnits, aw as today, ax as todayDate, br as toggleCollapsed, ay as tomorrow, az as useListDetail, bs as valueText, aA as yearToDate, aB as yesterday } from '../index-kV9TCCxP.js';
1
+ export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, aI as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, aJ as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aK as KeyOptions, L as ListDetail, u as ListDetailCloseReason, aL as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, aM as ListDetailList, aN as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aO as MAX_MINOR_UNITS, aP as MoneyChangeDetails, aQ as MoneyDisplay, M as MoneyField, aR as MoneyFieldAffix, aS as MoneyFieldGroup, aT as MoneyFieldInput, z as MoneyFieldProps, aU as MoneyFieldRoot, F as MoneyFieldRootProps, aV as MoneyFieldSteps, aW as NormalizedPaste, aX as PanelSpec, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, aY as RuntimePanel, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, aZ as Size, a_ as SizeInput, a2 as Splitter, a$ as SplitterHandle, a3 as SplitterHandleProps, b0 as SplitterKey, b1 as SplitterPanel, a4 as SplitterPanelProps, b2 as SplitterRoot, a5 as SplitterRootProps, a6 as StatFigure, a7 as StatFigureProps, b3 as StoredLayout, b4 as StoredPanel, a8 as addDays, a9 as addMonths, b5 as affixSide, b6 as applyKey, b7 as applyStored, b8 as ariaPercents, aa as builtinPresets, ab as clampDate, b9 as createPanels, ba as cssSize, bb as currencyName, bc as currencySymbol, ac as daysInMonth, ad as defaultPresets, ae as defaultWeekStartsOn, af as endOfWeek, bd as formatDay, be as formatFull, ag as formatMoney, ah as fromMinorUnits, ai as getCurrencyDigits, bf as handleTarget, aj as inclusiveDays, ak as isValidCurrency, al as isoWeek, am as last30Days, an as last7Days, ao as lastMonth, ap as lastWeek, bg as layoutOf, aq as lengthBlockReason, bh as measure, bi as monthCells, bj as moveFocusDate, ar as nextMonth, as as nextWeek, bk as normalizePaste, at as orderRange, bl as parseDate, au as parseDecimalString, bm as parseSize, bn as presetInBounds, bo as resetToDefault, bp as resizeByDelta, av as resolvePreset, bq as roundHalfExpand, br as roundingChangesValue, bs as sameSelection, bt as serializeSize, bu as settle, bv as sizeText, aw as startOfWeek, bw as syncPanels, ax as thisMonth, ay as thisQuarter, az as thisWeek, aA as toDecimalString, aB as toMinorUnits, aC as today, aD as todayDate, bx as toggleCollapsed, aE as tomorrow, aF as useListDetail, by as valueText, aG as yearToDate, aH as yesterday } from '../index-BlPgd6jW.js';
2
2
  import 'react';
3
3
  import 'react/jsx-runtime';
4
4
  import '@base-ui/react';
@@ -1,4 +1,4 @@
1
- export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-HPUI5FIO.js';
1
+ export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-RLXKWWZG.js';
2
2
  export { EmptyState } from '../chunk-M7KJASGK.js';
3
3
  //# sourceMappingURL=index.js.map
4
4
  //# sourceMappingURL=index.js.map
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <div id="root"></div>
14
14
  <script>
15
- (()=>{var S=Object.create;var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),M=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!h.call(e,s)&&s!==o&&c(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var p=(e,t,o)=>(o=e!=null?S(P(e)):{},C(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e));var f=m((N,y)=>{y.exports=window.React});var b=m((V,g)=>{g.exports=window.Loomiere});var u={};M(u,{Default:()=>k,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,default:()=>d});var R=p(f(),1),n=p(b(),1);var i=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?i.createElement(e,s):Array.isArray(r)?i.createElement(e,s,...r):i.createElement(e,s,r)}var H=i.Fragment;var I={title:"Components/Lib/PickerButton",component:n.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=I,E=["North Company","South Company","Harbor Holdings LLC"],k={render:function(){let[t,o]=R.useState(E[0]);return a("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[a(n.PickerButton,{label:"Client",value:"Alpha Services"}),a(n.Menu.Root,{children:[a(n.Menu.Trigger,{render:r=>a(n.PickerButton,{...r,label:"Entity",value:t})}),a(n.Menu.Portal,{children:a(n.Menu.Positioner,{align:"start",sideOffset:6,children:a(n.Menu.Popup,{"aria-label":"Entity",children:a(n.Menu.RadioGroup,{value:t,onValueChange:r=>o(r),children:E.map(r=>a(n.Menu.RadioItem,{value:r,children:[a(n.Menu.RadioItemIndicator,{}),r]},r))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}};var l=window.React,x=d||{},O=["Default","LongValue","Placeholder","Disabled"];function j({id:e}){let t=u[e],o={...x.args||{},...t.args||{}};return(t.render||(s=>l.createElement(x.component,s)))(o,{args:o,id:e,name:e})}var B=O.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
15
+ (()=>{var v=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),C=(e,t)=>{for(var a in t)u(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of M(t))!x.call(e,n)&&n!==a&&u(e,n,{get:()=>t[n],enumerable:!(i=E(t,n))||i.enumerable});return e};var y=(e,t,a)=>(a=e!=null?v(h(e)):{},k(t||!e||!e.__esModule?u(a,"default",{value:e,enumerable:!0}):a,e));var f=m((j,g)=>{g.exports=window.React});var S=m((F,R)=>{R.exports=window.Loomiere});var p={};C(p,{Default:()=>I,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,Split:()=>O,default:()=>d});var s=y(f(),1),o=y(S(),1);var c=window.React;function r(e,t,a){let{children:i,...n}=t||{};return a!==void 0&&(n.key=a),i===void 0?c.createElement(e,n):Array.isArray(i)?c.createElement(e,n,...i):c.createElement(e,n,i)}var G=c.Fragment;var w={title:"Components/Lib/PickerButton",component:o.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=w,P=["North Company","South Company","Harbor Holdings LLC"],I={render:function(){let[t,a]=s.useState(P[0]);return r("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[r(o.PickerButton,{label:"Client",value:"Alpha Services"}),r(o.Menu.Root,{children:[r(o.Menu.Trigger,{render:i=>r(o.PickerButton,{...i,label:"Entity",value:t})}),r(o.Menu.Portal,{children:r(o.Menu.Positioner,{align:"start",sideOffset:6,children:r(o.Menu.Popup,{"aria-label":"Entity",children:r(o.Menu.RadioGroup,{value:t,onValueChange:i=>a(i),children:P.map(i=>r(o.Menu.RadioItem,{value:i,children:[r(o.Menu.RadioItemIndicator,{}),i]},i))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}},O={render:function(){let t=s.useRef(null),[a,i]=s.useState("Alpha Services");return r(o.PickerSplit,{ref:t,children:[r(o.PickerSplitMain,{label:"Client",value:a,onClick:()=>{}}),r(o.Menu.Root,{children:[r(o.Menu.Trigger,{render:n=>r(o.PickerSplitTrigger,{...n,"aria-label":"Choose client"})}),r(o.Menu.Portal,{children:r(o.Menu.Positioner,{anchor:t,align:"start",sideOffset:6,children:r(o.Menu.Popup,{"aria-label":"Client",children:r(o.Menu.RadioGroup,{value:a,onValueChange:n=>i(n),children:["Alpha Services","Beacon Partners","Cedar Holdings"].map(n=>r(o.Menu.RadioItem,{value:n,children:[r(o.Menu.RadioItemIndicator,{}),n]},n))})})})})]})]})}};var l=window.React,b=d||{},B=["Default","LongValue","Placeholder","Disabled"];function H({id:e}){let t=p[e],a={...b.args||{},...t.args||{}};return(t.render||(n=>l.createElement(b.component,n)))(a,{args:a,id:e,name:e})}var T=B.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(H,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,T));})();
16
16
 
17
17
  </script>
18
18
  </body>
@@ -0,0 +1,18 @@
1
+ # PickerSplit
2
+
3
+ Loomiere component, not part of Base UI. A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts, and a square trigger beside it, divided by a hairline, opens the list. The root carries the field look so a popup anchors to the whole control; each part fills on hover and the border darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and tokens (picker-button.*), so the two read as one family.
4
+
5
+ Use `Loomiere.PickerSplit`, this package's component: it puts the class names on for you (`import { PickerSplit } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
6
+
7
+ Not a Base UI part, so there is no base-ui.com page for it.
8
+
9
+ ## Classes
10
+
11
+ | Class | Data attributes it answers to |
12
+ |---|---|
13
+ | `PickerSplit` | |
14
+ | `PickerSplitMain` | |
15
+ | `PickerSplitTrigger` | `data-popup-open` |
16
+ | `PickerButtonIcon` | |
17
+
18
+ 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.