@cratis/components 4.6.0 → 4.7.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 (86) hide show
  1. package/compat-manifest.json +18 -18
  2. package/dist/esm/Canvas/CanvasOverlay.d.ts.map +1 -1
  3. package/dist/esm/Canvas/canvasGesture.d.ts.map +1 -1
  4. package/dist/esm/Canvas/canvasTransformActivity.d.ts.map +1 -1
  5. package/dist/esm/Canvas/selfSuspendingFrameLoop.d.ts.map +1 -1
  6. package/dist/esm/Canvas/shapes/Note/NoteTextChanged.d.ts.map +1 -1
  7. package/dist/esm/Canvas/shapes/Region/ItemAddedToRegion.d.ts.map +1 -1
  8. package/dist/esm/Canvas/shapes/Region/ItemRemovedFromRegion.d.ts.map +1 -1
  9. package/dist/esm/Canvas/shapes/Region/Region.d.ts.map +1 -1
  10. package/dist/esm/Chat/ChatIdentifier.d.ts.map +1 -1
  11. package/dist/esm/Chat/Kit/Avatar/PersonAvatarCircle.d.ts.map +1 -1
  12. package/dist/esm/Chat/Kit/Avatar/getAvatarColor.d.ts.map +1 -1
  13. package/dist/esm/Chat/Kit/Avatar/getInitials.d.ts.map +1 -1
  14. package/dist/esm/Chat/Kit/ChatMessageAdded.d.ts.map +1 -1
  15. package/dist/esm/Chat/Kit/Mentions/MentionSuggestions.d.ts +1 -1
  16. package/dist/esm/Chat/Kit/Mentions/extractMentions.d.ts.map +1 -1
  17. package/dist/esm/Chat/Kit/Mentions/findMentionRanges.d.ts.map +1 -1
  18. package/dist/esm/Chat/Kit/Mentions/mentionSegments.d.ts.map +1 -1
  19. package/dist/esm/Chat/relativeTimestamp.d.ts.map +1 -1
  20. package/dist/esm/Chat/shouldRequestTopicName.d.ts.map +1 -1
  21. package/dist/esm/CommandDialog/CommandDialog.d.ts +124 -5
  22. package/dist/esm/CommandDialog/StepperCommandDialog.d.ts +88 -1
  23. package/dist/esm/CommandDialog/StepperPanel.d.ts +4 -24
  24. package/dist/esm/CommandDialog/StepperPanel.d.ts.map +1 -1
  25. package/dist/esm/CommandForm/AutoCommandForm.d.ts.map +1 -1
  26. package/dist/esm/CommandForm/AutoCommandForm.js +1 -1
  27. package/dist/esm/CommandForm/AutoCommandForm.js.map +1 -1
  28. package/dist/esm/CommandForm/fields/chipValues.d.ts.map +1 -1
  29. package/dist/esm/CommandForm/fields/fieldAccessibility.d.ts.map +1 -1
  30. package/dist/esm/Common/ActionMenubar.d.ts +1 -1
  31. package/dist/esm/Common/ComboBox.d.ts +4 -10
  32. package/dist/esm/Common/ComboBox.d.ts.map +1 -1
  33. package/dist/esm/Common/DatePickerInputImplementation.d.ts +1 -1
  34. package/dist/esm/Common/ErrorBoundary.d.ts +1 -1
  35. package/dist/esm/Common/ErrorBoundary.d.ts.map +1 -1
  36. package/dist/esm/Common/FormElement.d.ts.map +1 -1
  37. package/dist/esm/Common/Icon.d.ts.map +1 -1
  38. package/dist/esm/Common/NumberInput.d.ts +1 -1
  39. package/dist/esm/Common/Page.d.ts.map +1 -1
  40. package/dist/esm/Common/Tooltip.d.ts.map +1 -1
  41. package/dist/esm/Common/reactAriaProps.d.ts.map +1 -1
  42. package/dist/esm/Common/useNativeCheckedState.d.ts.map +1 -1
  43. package/dist/esm/DataPage/DataPage.d.ts +6 -114
  44. package/dist/esm/DataPage/DataPageLayout.d.ts.map +1 -1
  45. package/dist/esm/DataTables/Column.d.ts +4 -20
  46. package/dist/esm/DataTables/DataTableFilterMeta.d.ts +16 -16
  47. package/dist/esm/DataTables/DataTableFilterMeta.d.ts.map +1 -1
  48. package/dist/esm/Dialogs/BusyIndicatorDialog.d.ts.map +1 -1
  49. package/dist/esm/Dialogs/Dialog.d.ts +20 -0
  50. package/dist/esm/Dialogs/Dialog.js.map +1 -1
  51. package/dist/esm/Dialogs/DialogImplementation.d.ts +1 -1
  52. package/dist/esm/Dialogs/DialogImplementation.js +7 -5
  53. package/dist/esm/Dialogs/DialogImplementation.js.map +1 -1
  54. package/dist/esm/Display/Avatar.d.ts.map +1 -1
  55. package/dist/esm/Display/Badge.d.ts.map +1 -1
  56. package/dist/esm/Display/Chip.d.ts.map +1 -1
  57. package/dist/esm/Display/Message.d.ts.map +1 -1
  58. package/dist/esm/Display/ProgressBar.d.ts.map +1 -1
  59. package/dist/esm/Display/ProgressBarImplementation.d.ts +1 -1
  60. package/dist/esm/Display/ProgressSpinner.d.ts +1 -1
  61. package/dist/esm/Display/ProgressSpinner.d.ts.map +1 -1
  62. package/dist/esm/Display/Skeleton.d.ts.map +1 -1
  63. package/dist/esm/Display/Tag.d.ts.map +1 -1
  64. package/dist/esm/Dropdown/Dropdown.d.ts +4 -5
  65. package/dist/esm/Dropdown/DropdownImplementation.d.ts +4 -5
  66. package/dist/esm/Notifications/Toaster.d.ts.map +1 -1
  67. package/dist/esm/Notifications/toast.d.ts.map +1 -1
  68. package/dist/esm/PivotViewer/components/pivot/constants.d.ts.map +1 -1
  69. package/dist/esm/Toolbar/Toolbar.d.ts +1 -1
  70. package/dist/esm/Toolbar/Toolbar.d.ts.map +1 -1
  71. package/dist/esm/Toolbar/ToolbarGroup.d.ts.map +1 -1
  72. package/dist/esm/Toolbar/ToolbarLayout.d.ts.map +1 -1
  73. package/dist/esm/Toolbar/ToolbarSection.d.ts.map +1 -1
  74. package/dist/esm/Toolbar/ToolbarSeparator.d.ts.map +1 -1
  75. package/dist/esm/Toolbar/ToolbarSlot.d.ts.map +1 -1
  76. package/dist/esm/renderer/RendererScope.d.ts +1 -1
  77. package/dist/esm/renderer/coreSlots.d.ts +14 -14
  78. package/dist/esm/renderer/dialogStack.d.ts.map +1 -1
  79. package/dist/esm/renderer/errors.d.ts +9 -9
  80. package/dist/esm/renderer/presentation.d.ts +1 -1
  81. package/dist/esm/styles.css +62 -373
  82. package/dist/esm/types/parts.d.ts +60 -58
  83. package/dist/esm/types/parts.d.ts.map +1 -1
  84. package/dist/esm/types/parts.js +4 -2
  85. package/dist/esm/types/parts.js.map +1 -1
  86. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AA0Bf,yDAAyD;AACzD,MAAM,WAAW,mBAAmB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gFAAgF;IAChF,QAAQ,EAAE,SAAS,CAAC;IAEpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAExC,6CAA6C;IAC7C,EAAE,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,+CAK5B,mBAAmB,gCAiJrB,CAAC"}
1
+ {"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOjB,MAAM,OAAO,CAAC;AA0Bf,yDAAyD;AACzD,MAAM,WAAW,mBAAmB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACtC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gFAAgF;IAChF,QAAQ,EAAE,SAAS,CAAC;IAEpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAExC,6CAA6C;IAC7C,EAAE,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,kDAKxB,mBAAmB,gCAiJrB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarSeparator.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,2DAA2D;AAC3D,MAAM,WAAW,qBAAqB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,wDAAwD;AACxD,MAAM,WAAW,qBAAqB;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mCAAmC;IACnC,EAAE,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,gCASvB,CAAC"}
1
+ {"version":3,"file":"ToolbarSeparator.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSeparator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,2DAA2D;AAC3D,MAAM,WAAW,qBAAqB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACzC;AAED,wDAAwD;AACxD,MAAM,WAAW,qBAAqB;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mCAAmC;IACnC,EAAE,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,yBAG1B,qBAAqB,gCASvB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarSlot.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSlot.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,SAAS,EAA8F,MAAM,OAAO,CAAC;AAiF7I,2DAA2D;AAC3D,MAAM,WAAW,wBAAwB;IACrC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,cAAc,wBAAwB,gCAGzE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,KAAG,SAAS,EAQ1D,CAAC;AAEF,mDAAmD;AACnD,MAAM,WAAW,gBAAgB;IAC7B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,GAAI,+BAAmC,gBAAgB,SAa9E,CAAC"}
1
+ {"version":3,"file":"ToolbarSlot.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSlot.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,SAAS,EAA8F,MAAM,OAAO,CAAC;AAiF7I,2DAA2D;AAC3D,MAAM,WAAW,wBAAwB;IACrC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,gCAGzE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,aAAc,MAAM,KAAG,SAAS,EAQ1D,CAAC;AAEF,mDAAmD;AACnD,MAAM,WAAW,gBAAgB;IAC7B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,kCAAuC,gBAAgB,SAa9E,CAAC"}
@@ -16,4 +16,4 @@ export interface unstable_RendererScopeProps {
16
16
  *
17
17
  * @unstable Consumer contract. Expect changes until renderer conformance gates promote it.
18
18
  */
19
- export declare const unstable_RendererScope: ({ use, only, children, }: unstable_RendererScopeProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
19
+ export declare const unstable_RendererScope: ({ use, only, children, }: unstable_RendererScopeProps) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
@@ -9,72 +9,72 @@ import type { unstable_BehaviorMode } from './slots.js';
9
9
  export declare const unstable_coreSlots: Readonly<{
10
10
  'common.button': Readonly<{
11
11
  mode: unstable_BehaviorMode;
12
- fidelity: "native";
12
+ fidelity: 'native';
13
13
  render: ComponentType<import("../Common/index.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
14
14
  }>;
15
15
  'common.iconButton': Readonly<{
16
16
  mode: unstable_BehaviorMode;
17
- fidelity: "native";
17
+ fidelity: 'native';
18
18
  render: ComponentType<import("../Common/index.js").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
19
19
  }>;
20
20
  'common.textInput': Readonly<{
21
21
  mode: unstable_BehaviorMode;
22
- fidelity: "native";
22
+ fidelity: 'native';
23
23
  render: ComponentType<import("../Common/index.js").TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
24
24
  }>;
25
25
  'common.textArea': Readonly<{
26
26
  mode: unstable_BehaviorMode;
27
- fidelity: "native";
27
+ fidelity: 'native';
28
28
  render: ComponentType<import("../Common/index.js").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
29
29
  }>;
30
30
  'common.checkbox': Readonly<{
31
31
  mode: unstable_BehaviorMode;
32
- fidelity: "native";
32
+ fidelity: 'native';
33
33
  render: ComponentType<import("../Common/index.js").CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
34
34
  }>;
35
35
  'common.radio': Readonly<{
36
36
  mode: unstable_BehaviorMode;
37
- fidelity: "native";
37
+ fidelity: 'native';
38
38
  render: ComponentType<import("../Common/index.js").RadioProps & import("react").RefAttributes<HTMLInputElement>>;
39
39
  }>;
40
40
  'common.switch': Readonly<{
41
41
  mode: unstable_BehaviorMode;
42
- fidelity: "native";
42
+ fidelity: 'native';
43
43
  render: ComponentType<import("../Common/index.js").SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
44
44
  }>;
45
45
  'common.progress': Readonly<{
46
46
  mode: unstable_BehaviorMode;
47
- fidelity: "native";
47
+ fidelity: 'native';
48
48
  render: ComponentType<import("../Display/index.js").ProgressBarProps>;
49
49
  }>;
50
50
  'common.surface': Readonly<{
51
51
  mode: unstable_BehaviorMode;
52
- fidelity: "native";
52
+ fidelity: 'native';
53
53
  render: ComponentType<import("../Common/index.js").SurfaceProps & import("react").RefAttributes<HTMLElement>>;
54
54
  }>;
55
55
  'common.tooltip': Readonly<{
56
56
  mode: unstable_BehaviorMode;
57
- fidelity: "native";
57
+ fidelity: 'native';
58
58
  render: ComponentType<import("../Common/index.js").TooltipProps>;
59
59
  }>;
60
60
  'dropdown.select': Readonly<{
61
61
  mode: unstable_BehaviorMode;
62
- fidelity: "native";
62
+ fidelity: 'native';
63
63
  render: ComponentType<import("../Dropdown/index.js").DropdownProps<unknown>>;
64
64
  }>;
65
65
  'dialogs.dialog': Readonly<{
66
66
  mode: unstable_BehaviorMode;
67
- fidelity: "native";
67
+ fidelity: 'native';
68
68
  render: ComponentType<import("../Dialogs/index.js").DialogProps>;
69
69
  }>;
70
70
  'display.datePicker': Readonly<{
71
71
  mode: unstable_BehaviorMode;
72
- fidelity: "native";
72
+ fidelity: 'native';
73
73
  render: ComponentType<import("../Common/index.js").DatePickerInputProps>;
74
74
  }>;
75
75
  'datatables.paginator': Readonly<{
76
76
  mode: unstable_BehaviorMode;
77
- fidelity: "native";
77
+ fidelity: 'native';
78
78
  render: ComponentType<import("../DataTables/index.js").TablePaginatorProps>;
79
79
  }>;
80
80
  }>;
@@ -1 +1 @@
1
- {"version":3,"file":"dialogStack.d.ts","sourceRoot":"","sources":["../../../renderer/dialogStack.ts"],"names":[],"mappings":"AAcA,+FAA+F;AAC/F,eAAO,MAAM,cAAc,QAAO,MAKjC,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,KAAG,IAG9C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,iCAAiC,CAAC;AAElE,kGAAkG;AAClG,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,iHAAiH;AACjH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,sGAAsG;AACtG,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,4FAA4F;AAC5F,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,KAAG,MAC+C,CAAC;AAEnG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,cAAc,MAAM,EAAE,QAAQ,MAAM,KAAG,MAClC,CAAC"}
1
+ {"version":3,"file":"dialogStack.d.ts","sourceRoot":"","sources":["../../../renderer/dialogStack.ts"],"names":[],"mappings":"AAcA,+FAA+F;AAC/F,eAAO,MAAM,cAAc,QAAO,MAKjC,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,eAAe,SAAU,MAAM,KAAG,IAG9C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,iCAAiC,CAAC;AAElE,kGAAkG;AAClG,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,iHAAiH;AACjH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,sGAAsG;AACtG,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,4FAA4F;AAC5F,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,SAAU,MAAM,KAAG,MAC+C,CAAC;AAEnG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,UAAU,MAAM,KAAG,MAClC,CAAC"}
@@ -5,15 +5,15 @@ import type { unstable_SlotId } from './slots.js';
5
5
  * @unstable Adapter-author contract. Expect changes until renderer conformance gates promote it.
6
6
  */
7
7
  export declare const unstable_adapterErrorCodes: Readonly<{
8
- readonly abiMismatch: "CRATIS-UI-1001";
9
- readonly missingRequirement: "CRATIS-UI-1002";
10
- readonly strictProfileFallback: "CRATIS-UI-1003";
11
- readonly missingUpstreamPeer: "CRATIS-UI-1004";
12
- readonly missingLicenseKey: "CRATIS-UI-1005";
13
- readonly nestedLibraries: "CRATIS-UI-1006";
14
- readonly ssrContractViolation: "CRATIS-UI-1007";
15
- readonly duplicateResolution: "CRATIS-UI-1008";
16
- readonly deprecatedSlot: "CRATIS-UI-1009";
8
+ readonly abiMismatch: 'CRATIS-UI-1001';
9
+ readonly missingRequirement: 'CRATIS-UI-1002';
10
+ readonly strictProfileFallback: 'CRATIS-UI-1003';
11
+ readonly missingUpstreamPeer: 'CRATIS-UI-1004';
12
+ readonly missingLicenseKey: 'CRATIS-UI-1005';
13
+ readonly nestedLibraries: 'CRATIS-UI-1006';
14
+ readonly ssrContractViolation: 'CRATIS-UI-1007';
15
+ readonly duplicateResolution: 'CRATIS-UI-1008';
16
+ readonly deprecatedSlot: 'CRATIS-UI-1009';
17
17
  }>;
18
18
  /**
19
19
  * Renderer diagnostic code from `CRATIS-UI-1001` through `CRATIS-UI-1009`.
@@ -10,7 +10,7 @@ import type { TextInputProps } from '../Common/TextInput.js';
10
10
  import type { ProgressBarProps } from '../Display/ProgressBar.js';
11
11
  import type { CratisPresentationUiLibraryProviderProps } from './manifest.js';
12
12
  /** Stable renderer profile implemented by certified presentation adapters. */
13
- export declare const CRATIS_PRESENTATION_PROFILE: "stable-presentation/v1";
13
+ export declare const CRATIS_PRESENTATION_PROFILE: 'stable-presentation/v1';
14
14
  /** Renderer ABI major for the stable presentation profile. */
15
15
  export declare const CRATIS_PRESENTATION_ABI_VERSION: 1;
16
16
  /** Immutable, canonical slot order for the stable presentation profile. */
@@ -3861,6 +3861,17 @@
3861
3861
  .cratis-dialog__backdrop[data-exiting] {
3862
3862
  animation: cratis-dialog-fade 120ms reverse ease-in;
3863
3863
  }
3864
+ .cratis-dialog__backdrop[data-placement='start'],
3865
+ .cratis-dialog__backdrop[data-placement='end'] {
3866
+ padding: 0;
3867
+ align-items: stretch;
3868
+ }
3869
+ .cratis-dialog__backdrop[data-placement='start'] {
3870
+ justify-content: flex-start;
3871
+ }
3872
+ .cratis-dialog__backdrop[data-placement='end'] {
3873
+ justify-content: flex-end;
3874
+ }
3864
3875
  .cratis-dialog__positioner {
3865
3876
  display: flex;
3866
3877
  max-width: 100%;
@@ -3881,6 +3892,36 @@
3881
3892
  box-shadow: var(--cratis-shadow-dialog);
3882
3893
  outline: none;
3883
3894
  }
3895
+ .cratis-dialog[data-placement='start'],
3896
+ .cratis-dialog[data-placement='end'] {
3897
+ height: 100%;
3898
+ max-width: 100%;
3899
+ max-height: 100%;
3900
+ border-radius: 0;
3901
+ border-block-width: 0;
3902
+ }
3903
+ .cratis-dialog[data-placement='start'] {
3904
+ --cratis-dialog-slide-from: -100%;
3905
+ border-inline-start-width: 0;
3906
+ }
3907
+ .cratis-dialog[data-placement='end'] {
3908
+ --cratis-dialog-slide-from: 100%;
3909
+ border-inline-end-width: 0;
3910
+ }
3911
+ .cratis-dialog[data-placement='start']:dir(rtl) {
3912
+ --cratis-dialog-slide-from: 100%;
3913
+ }
3914
+ .cratis-dialog[data-placement='end']:dir(rtl) {
3915
+ --cratis-dialog-slide-from: -100%;
3916
+ }
3917
+ .cratis-dialog[data-placement='start'][data-entering],
3918
+ .cratis-dialog[data-placement='end'][data-entering] {
3919
+ animation: cratis-dialog-slide 200ms ease-out;
3920
+ }
3921
+ .cratis-dialog[data-placement='start'][data-exiting],
3922
+ .cratis-dialog[data-placement='end'][data-exiting] {
3923
+ animation: cratis-dialog-slide 150ms reverse ease-in;
3924
+ }
3884
3925
  .cratis-dialog__document {
3885
3926
  display: flex;
3886
3927
  min-height: 0;
@@ -3889,26 +3930,35 @@
3889
3930
  outline: none;
3890
3931
  }
3891
3932
  .cratis-dialog__header {
3892
- display: flex;
3933
+ display: grid;
3934
+ grid-template-columns: minmax(0, 1fr) auto;
3893
3935
  padding: 1rem 1.25rem;
3894
3936
  align-items: center;
3895
- justify-content: space-between;
3896
- gap: 1rem;
3937
+ column-gap: 1rem;
3897
3938
  flex: 0 0 auto;
3898
3939
  border-bottom: 1px solid var(--cratis-surface-border);
3899
3940
  }
3900
3941
  .cratis-dialog__title {
3942
+ grid-column: 1;
3943
+ justify-self: start;
3901
3944
  margin: 0;
3902
3945
  font-size: 1.1rem;
3903
3946
  font-weight: 700;
3904
3947
  outline: none;
3905
3948
  }
3949
+ .cratis-dialog__subtitle {
3950
+ grid-column: 1;
3951
+ margin: 0.25rem 0 0;
3952
+ color: var(--cratis-text-color-secondary);
3953
+ font-size: 0.9rem;
3954
+ }
3906
3955
  .cratis-dialog__title:focus-visible {
3907
3956
  border-radius: var(--cratis-border-radius);
3908
- box-shadow: var(--cratis-focus-ring);
3909
3957
  }
3910
3958
  .cratis-dialog__close {
3911
3959
  display: inline-flex;
3960
+ grid-column: 2;
3961
+ grid-row: 1;
3912
3962
  width: 2rem;
3913
3963
  height: 2rem;
3914
3964
  padding: 0;
@@ -3925,10 +3975,6 @@
3925
3975
  background: var(--cratis-surface-hover);
3926
3976
  color: var(--cratis-text-color);
3927
3977
  }
3928
- .cratis-dialog__close:focus-visible {
3929
- outline: none;
3930
- box-shadow: var(--cratis-focus-ring);
3931
- }
3932
3978
  .cratis-dialog__content {
3933
3979
  min-height: 0;
3934
3980
  padding: 1.25rem;
@@ -3987,6 +4033,8 @@
3987
4033
  .cratis-dialog__button--secondary:active:not(:disabled) {
3988
4034
  background: color-mix(in srgb, var(--cratis-action-background) 16%, transparent);
3989
4035
  }
4036
+ .cratis-dialog__title:focus-visible,
4037
+ .cratis-dialog__close:focus-visible,
3990
4038
  .cratis-dialog__button:focus-visible {
3991
4039
  outline: none;
3992
4040
  box-shadow: var(--cratis-focus-ring);
@@ -4017,9 +4065,15 @@
4017
4065
  transform: rotate(360deg);
4018
4066
  }
4019
4067
  }
4068
+ @keyframes cratis-dialog-slide {
4069
+ from {
4070
+ translate: var(--cratis-dialog-slide-from) 0;
4071
+ }
4072
+ }
4020
4073
 
4021
4074
  @media (prefers-reduced-motion: reduce) {
4022
4075
  .cratis-dialog__backdrop,
4076
+ .cratis-dialog[data-placement],
4023
4077
  .cratis-dialog__spinner {
4024
4078
  animation: none;
4025
4079
  }
@@ -5193,257 +5247,6 @@
5193
5247
  flex: 1 1 0%;
5194
5248
  }
5195
5249
 
5196
- .pv-filter-panel {
5197
- position: fixed;
5198
- width: min(280px, calc(100% - 2rem));
5199
- max-height: calc(100vh - 6.5rem);
5200
- background: linear-gradient(
5201
- 180deg,
5202
- var(--cratis-surface-card),
5203
- var(--cratis-surface-ground)
5204
- );
5205
- border: 1px solid var(--cratis-surface-border);
5206
- border-radius: 1rem;
5207
- box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
5208
- backdrop-filter: blur(14px);
5209
- overflow: hidden;
5210
- z-index: 12;
5211
- display: flex;
5212
- flex-direction: column;
5213
- }
5214
-
5215
- .pv-filter-panel.dragging {
5216
- cursor: grabbing;
5217
- user-select: none;
5218
- }
5219
-
5220
- .pv-filter-panel.minimized {
5221
- max-height: none;
5222
- }
5223
-
5224
- .pv-filter-panel-header {
5225
- display: flex;
5226
- align-items: center;
5227
- gap: 0.5rem;
5228
- padding: 0.75rem 1rem;
5229
- cursor: grab;
5230
- background: var(--cratis-surface-section);
5231
- border-bottom: 1px solid var(--cratis-surface-border);
5232
- flex-shrink: 0;
5233
- }
5234
-
5235
- .pv-filter-panel.dragging .pv-filter-panel-header {
5236
- cursor: grabbing;
5237
- }
5238
-
5239
- .pv-filter-panel-header h2 {
5240
- margin: 0;
5241
- font-size: 0.85rem;
5242
- letter-spacing: 0.04em;
5243
- text-transform: uppercase;
5244
- color: var(--cratis-text-color);
5245
- flex: 1;
5246
- pointer-events: none;
5247
- }
5248
-
5249
- .pv-minimize-btn,
5250
- .pv-close-btn {
5251
- appearance: none;
5252
- border: none;
5253
- border-radius: 0.4rem;
5254
- width: 1.5rem;
5255
- height: 1.5rem;
5256
- display: flex;
5257
- align-items: center;
5258
- justify-content: center;
5259
- background: var(--cratis-highlight-bg);
5260
- color: var(--cratis-text-color);
5261
- font-size: 1rem;
5262
- font-weight: 500;
5263
- cursor: pointer;
5264
- transition: background 120ms ease;
5265
- }
5266
-
5267
- .pv-minimize-btn:hover,
5268
- .pv-close-btn:hover {
5269
- background: var(--cratis-surface-hover);
5270
- }
5271
-
5272
- .pv-close-btn {
5273
- font-size: 1.2rem;
5274
- }
5275
-
5276
- .pv-filter-panel-content {
5277
- overflow: hidden;
5278
- max-height: 0;
5279
- opacity: 0;
5280
- padding: 0 1.25rem;
5281
- transition:
5282
- max-height 150ms ease-out,
5283
- opacity 100ms ease-out,
5284
- padding 150ms ease-out;
5285
- }
5286
-
5287
- .pv-filter-panel-content.expanded {
5288
- overflow-y: auto;
5289
- flex: 1;
5290
- max-height: 600px;
5291
- opacity: 1;
5292
- padding: 1rem 1.25rem 1.25rem;
5293
- }
5294
-
5295
- .pv-search {
5296
- padding-bottom: 1rem;
5297
- }
5298
-
5299
- .pv-search input {
5300
- width: 100%;
5301
- padding: 0.65rem 0.85rem;
5302
- border-radius: 0.75rem;
5303
- border: 1px solid var(--cratis-surface-border);
5304
- background: var(--cratis-surface-ground);
5305
- color: inherit;
5306
- font-size: 0.95rem;
5307
- box-shadow: inset 0 1px 0 var(--cratis-surface-border);
5308
- }
5309
-
5310
- .pv-search input:focus {
5311
- outline: none;
5312
- border-color: var(--cratis-primary-color);
5313
- box-shadow: var(--cratis-focus-ring);
5314
- }
5315
-
5316
- .pv-filter-groups {
5317
- display: flex;
5318
- flex-direction: column;
5319
- gap: 0.85rem;
5320
- }
5321
-
5322
- .pv-filter {
5323
- background: var(--cratis-surface-overlay);
5324
- border: 1px solid var(--cratis-surface-border);
5325
- border-radius: 0.85rem;
5326
- padding: 0.75rem 0.85rem;
5327
- transition:
5328
- border-color 180ms ease,
5329
- box-shadow 180ms ease;
5330
- }
5331
-
5332
- .pv-filter.expanded {
5333
- border-color: var(--cratis-primary-color);
5334
- box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
5335
- }
5336
-
5337
- .pv-filter-label {
5338
- display: flex;
5339
- align-items: center;
5340
- gap: 0.4rem;
5341
- }
5342
-
5343
- .pv-filter-trigger-meta {
5344
- display: inline-flex;
5345
- align-items: center;
5346
- gap: 0.5rem;
5347
- }
5348
-
5349
- .pv-filter-count {
5350
- display: inline-flex;
5351
- align-items: center;
5352
- justify-content: center;
5353
- min-width: 1.5rem;
5354
- padding: 0.15rem 0.45rem;
5355
- border-radius: 999px;
5356
- background: var(--cratis-highlight-bg);
5357
- color: var(--cratis-text-color);
5358
- font-size: 0.7rem;
5359
- }
5360
-
5361
- .pv-filter-chevron {
5362
- width: 0.65rem;
5363
- height: 0.65rem;
5364
- border-right: 2px solid var(--cratis-text-color);
5365
- border-bottom: 2px solid var(--cratis-text-color);
5366
- transform: rotate(45deg);
5367
- transition: transform 180ms ease;
5368
- }
5369
-
5370
- .pv-filter.expanded .pv-filter-chevron {
5371
- transform: rotate(225deg);
5372
- }
5373
-
5374
- .pv-filter-content {
5375
- overflow: hidden;
5376
- max-height: 0;
5377
- opacity: 0;
5378
- margin-top: 0;
5379
- padding-top: 0;
5380
- border-top: 1px solid transparent;
5381
- transition:
5382
- max-height 120ms ease-out,
5383
- opacity 80ms ease-out,
5384
- margin-top 120ms ease-out,
5385
- padding-top 120ms ease-out,
5386
- border-color 120ms ease-out;
5387
- }
5388
-
5389
- .pv-filter-content.expanded {
5390
- max-height: 350px;
5391
- opacity: 1;
5392
- margin-top: 0.75rem;
5393
- padding-top: 0.75rem;
5394
- border-top-color: var(--cratis-surface-border);
5395
- overflow-y: auto;
5396
- }
5397
-
5398
- .pv-filter-content ul {
5399
- list-style: none;
5400
- margin: 0;
5401
- padding: 0;
5402
- display: grid;
5403
- gap: 0.45rem;
5404
- }
5405
-
5406
- .pv-filter-content li label {
5407
- display: grid;
5408
- grid-template-columns: auto 1fr auto;
5409
- gap: 0.6rem;
5410
- align-items: center;
5411
- padding: 0.45rem 0.5rem;
5412
- border-radius: 0.55rem;
5413
- border: 1px solid transparent;
5414
- cursor: pointer;
5415
- transition:
5416
- background 160ms ease,
5417
- border-color 160ms ease;
5418
- }
5419
-
5420
- .pv-filter-content li label:hover {
5421
- background: var(--cratis-surface-hover);
5422
- }
5423
-
5424
- .pv-filter-content input[type='checkbox'],
5425
- .pv-filter-content input[type='radio'] {
5426
- accent-color: var(--cratis-primary-color);
5427
- }
5428
-
5429
- .pv-filter-content li label span {
5430
- font-size: 0.85rem;
5431
- }
5432
-
5433
- .pv-filter-clear {
5434
- margin-top: 0.75rem;
5435
- appearance: none;
5436
- border: none;
5437
- border-radius: 0.55rem;
5438
- padding: 0.4rem 0.75rem;
5439
- background: var(--cratis-highlight-bg);
5440
- color: var(--cratis-text-color);
5441
- font-size: 0.72rem;
5442
- text-transform: uppercase;
5443
- letter-spacing: 0.08em;
5444
- cursor: pointer;
5445
- }
5446
-
5447
5250
  .pv-main {
5448
5251
  position: relative;
5449
5252
  display: flex;
@@ -5579,11 +5382,6 @@
5579
5382
  }
5580
5383
 
5581
5384
  /* Filter Dropdown */
5582
- .pv-filter-dropdown-content {
5583
- padding: 1rem;
5584
- overflow-y: auto;
5585
- flex: 1;
5586
- }
5587
5385
 
5588
5386
  .pv-view-toggle {
5589
5387
  display: inline-flex;
@@ -6376,115 +6174,6 @@
6376
6174
  }
6377
6175
 
6378
6176
  /* Range Histogram Filter */
6379
- .pv-range-histogram {
6380
- padding: 0.5rem 0;
6381
- }
6382
-
6383
- .pv-histogram-bars {
6384
- display: flex;
6385
- align-items: flex-end;
6386
- gap: 2px;
6387
- height: 80px;
6388
- padding: 0 2px;
6389
- margin-bottom: 0.5rem;
6390
- }
6391
-
6392
- .pv-histogram-bar {
6393
- flex: 1;
6394
- min-width: 8px;
6395
- background: var(--cratis-highlight-bg);
6396
- border: none;
6397
- border-radius: 2px 2px 0 0;
6398
- cursor: pointer;
6399
- transition:
6400
- background 160ms ease,
6401
- transform 120ms ease;
6402
- padding: 0;
6403
- }
6404
-
6405
- .pv-histogram-bar:hover {
6406
- background: var(--cratis-surface-hover);
6407
- transform: scaleY(1.02);
6408
- }
6409
-
6410
- .pv-histogram-bar.in-range {
6411
- background: var(--cratis-primary-color);
6412
- }
6413
-
6414
- .pv-histogram-bar.partial {
6415
- background: var(--cratis-highlight-bg);
6416
- }
6417
-
6418
- .pv-range-slider {
6419
- position: relative;
6420
- height: 24px;
6421
- margin: 0.5rem 0;
6422
- }
6423
-
6424
- .pv-range-track {
6425
- position: absolute;
6426
- top: 50%;
6427
- left: 0;
6428
- right: 0;
6429
- height: 4px;
6430
- background: var(--cratis-surface-border);
6431
- border-radius: 2px;
6432
- transform: translateY(-50%);
6433
- }
6434
-
6435
- .pv-range-selection {
6436
- position: absolute;
6437
- top: 50%;
6438
- height: 4px;
6439
- background: var(--cratis-primary-color);
6440
- border-radius: 2px;
6441
- transform: translateY(-50%);
6442
- cursor: grab;
6443
- }
6444
-
6445
- .pv-range-selection:active {
6446
- cursor: grabbing;
6447
- }
6448
-
6449
- .pv-range-handle {
6450
- position: absolute;
6451
- top: 50%;
6452
- width: 16px;
6453
- height: 16px;
6454
- background: var(--cratis-primary-color);
6455
- border: 2px solid var(--cratis-text-color);
6456
- border-radius: 50%;
6457
- transform: translate(-50%, -50%);
6458
- cursor: ew-resize;
6459
- transition:
6460
- transform 120ms ease,
6461
- box-shadow 120ms ease;
6462
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
6463
- }
6464
-
6465
- .pv-range-handle:hover {
6466
- transform: translate(-50%, -50%) scale(1.15);
6467
- box-shadow: 0 4px 12px var(--cratis-primary-color);
6468
- }
6469
-
6470
- .pv-range-clear {
6471
- margin-top: 0.75rem;
6472
- appearance: none;
6473
- border: none;
6474
- border-radius: 0.55rem;
6475
- padding: 0.4rem 0.75rem;
6476
- background: var(--cratis-highlight-bg);
6477
- color: var(--cratis-text-color);
6478
- font-size: 0.72rem;
6479
- text-transform: uppercase;
6480
- letter-spacing: 0.08em;
6481
- cursor: pointer;
6482
- width: 100%;
6483
- }
6484
-
6485
- .pv-range-clear:hover {
6486
- background: var(--cratis-surface-hover);
6487
- }
6488
6177
 
6489
6178
  @media (max-width: 900px) {
6490
6179
  .pv-toolbar {