@persona/design-system 0.10.12 → 0.10.13

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 (152) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/{CheckboxGroupField-XSVAmESI.d.mts → CheckboxGroupField-BW_BcW3L.d.mts} +2 -2
  3. package/dist/CheckboxGroupField.d.mts +1 -1
  4. package/dist/{Combobox-DbcSss15.d.mts → Combobox-DgYwerwd.d.mts} +3 -3
  5. package/dist/{Combobox-BNjYEAmv.mjs → Combobox-DmFQ5cAy.mjs} +63 -51
  6. package/dist/Combobox-DmFQ5cAy.mjs.map +1 -0
  7. package/dist/Combobox.d.mts +2 -2
  8. package/dist/{ComboboxBase-CrFweFGi.d.mts → ComboboxBase-DoKiRjgS.d.mts} +2 -2
  9. package/dist/ComboboxBase.d.mts +1 -1
  10. package/dist/{ComboboxMultiSelect-Cp5GBGQj.d.mts → ComboboxMultiSelect-DsoIMJiZ.d.mts} +2 -2
  11. package/dist/ComboboxMultiSelect.d.mts +1 -1
  12. package/dist/{ComboboxSingleSelect-u7fK3Yvy.d.mts → ComboboxSingleSelect-CKsqOAGB.d.mts} +3 -3
  13. package/dist/ComboboxSingleSelect.d.mts +1 -1
  14. package/dist/{CompactBar-BLZZWtIE.d.mts → CompactBar-tNtY2EhN.d.mts} +2 -2
  15. package/dist/CompactBar.d.mts +1 -1
  16. package/dist/{ControlBar-B3Jn8G0k.d.mts → ControlBar-CDb6b1_6.d.mts} +5 -3
  17. package/dist/ControlBar.d.mts +1 -1
  18. package/dist/{DataTable-DdSY9mzT.mjs → DataTable-DZ0B2Zm9.mjs} +146 -77
  19. package/dist/DataTable-DZ0B2Zm9.mjs.map +1 -0
  20. package/dist/{DataTable-C1mdfmQa.d.mts → DataTable-on3vGhyi.d.mts} +31 -7
  21. package/dist/DataTable.d.mts +1 -1
  22. package/dist/{DatePicker-DiilpYQg.mjs → DatePicker-CHVYVKB-.mjs} +2 -2
  23. package/dist/{DatePicker-DiilpYQg.mjs.map → DatePicker-CHVYVKB-.mjs.map} +1 -1
  24. package/dist/DropdownButton.d.mts +1 -1
  25. package/dist/{DropdownMenu-CQR0U-zM.d.mts → DropdownMenu-eVY-Yjpq.d.mts} +2 -2
  26. package/dist/DropdownMenu.d.mts +1 -1
  27. package/dist/{FloatingActionBar-BUgSKimy.d.mts → FloatingActionBar-CfgjHs81.d.mts} +5 -1
  28. package/dist/FloatingActionBar.d.mts +1 -1
  29. package/dist/{FormField-yYJFkJ6R.mjs → FormField-BfVrDOY0.mjs} +4 -4
  30. package/dist/{FormField-yYJFkJ6R.mjs.map → FormField-BfVrDOY0.mjs.map} +1 -1
  31. package/dist/{HoverCopyableField-X2XfKTTh.mjs → HoverCopyableField-CJ_p3llp.mjs} +2 -2
  32. package/dist/{HoverCopyableField-X2XfKTTh.mjs.map → HoverCopyableField-CJ_p3llp.mjs.map} +1 -1
  33. package/dist/IndexTableLayout.d.mts +3 -3
  34. package/dist/InlineCombobox.d.mts +1 -1
  35. package/dist/InlineInput.d.mts +1 -1
  36. package/dist/{Link-B29ZMN6m.mjs → Link-Df3zJrj2.mjs} +1 -1
  37. package/dist/{Link-B29ZMN6m.mjs.map → Link-Df3zJrj2.mjs.map} +1 -1
  38. package/dist/{ListBox-4rTgr3IJ.mjs → ListBox-BRgjgUSp.mjs} +2 -2
  39. package/dist/{ListBox-4rTgr3IJ.mjs.map → ListBox-BRgjgUSp.mjs.map} +1 -1
  40. package/dist/{ListBox-ZDaitaXR.d.mts → ListBox-Bgug8YZF.d.mts} +2 -2
  41. package/dist/ListBox.d.mts +1 -1
  42. package/dist/{ListBoxField-CGvVWKyL.d.mts → ListBoxField-Cc1sX2bo.d.mts} +4 -4
  43. package/dist/ListBoxField.d.mts +1 -1
  44. package/dist/{LogicRow-Bzp5o1sL.d.mts → LogicRow-B1_35ZJT.d.mts} +2 -2
  45. package/dist/LogicRow.d.mts +1 -1
  46. package/dist/{Menu-DviYNrFd.d.mts → Menu-keVl-eKm.d.mts} +2 -2
  47. package/dist/Menu.d.mts +1 -1
  48. package/dist/{Modal-CiPFqr0L.mjs → Modal-SnCo7ecm.mjs} +3 -2
  49. package/dist/Modal-SnCo7ecm.mjs.map +1 -0
  50. package/dist/{Pii-jSYND7Cn.mjs → Pii-BYPkrBuT.mjs} +1 -1
  51. package/dist/{Pii-jSYND7Cn.mjs.map → Pii-BYPkrBuT.mjs.map} +1 -1
  52. package/dist/{Popover-CVX-dfYb.mjs → Popover-DP9DXReH.mjs} +1 -1
  53. package/dist/{Popover-CVX-dfYb.mjs.map → Popover-DP9DXReH.mjs.map} +1 -1
  54. package/dist/{Select-DsVeAyZy.d.mts → Select-CiofH5-f.d.mts} +2 -2
  55. package/dist/Select.d.mts +1 -1
  56. package/dist/SmartTextInputField.d.mts +2 -2
  57. package/dist/SmartTextInputListbox.d.mts +8 -3
  58. package/dist/{TableBox-D9NA-s9l.mjs → TableBox-RxpwflEb.mjs} +3 -3
  59. package/dist/{TableBox-D9NA-s9l.mjs.map → TableBox-RxpwflEb.mjs.map} +1 -1
  60. package/dist/TableBox.d.mts +1 -1
  61. package/dist/{TableBoxCell-CQOL30et.d.mts → TableBoxCell-C65YFYqj.d.mts} +4 -4
  62. package/dist/TableBoxCell.d.mts +1 -1
  63. package/dist/{TableBoxField-z0GIFeQw.d.mts → TableBoxField-CHpClgsE.d.mts} +5 -5
  64. package/dist/TableBoxField.d.mts +1 -1
  65. package/dist/{TableBoxRow-tb9-KMr9.d.mts → TableBoxRow-CK-b79uD.d.mts} +2 -2
  66. package/dist/TableBoxRow.d.mts +1 -1
  67. package/dist/{TableBoxRowActions-BZwulsFP.d.mts → TableBoxRowActions-CRaabjaY.d.mts} +2 -2
  68. package/dist/TableBoxRowActions.d.mts +1 -1
  69. package/dist/{TableControls-BXykbUBf.mjs → TableControls-DM4RddQ_.mjs} +31 -12
  70. package/dist/TableControls-DM4RddQ_.mjs.map +1 -0
  71. package/dist/{TableControls-DE6eHq8h.d.mts → TableControls-v1NmlFTW.d.mts} +4 -4
  72. package/dist/TableControls.d.mts +1 -1
  73. package/dist/{TableControlsContext-C2_2EuMh.d.mts → TableControlsContext-DHYICXxy.d.mts} +2 -2
  74. package/dist/TableControlsContext.d.mts +1 -1
  75. package/dist/{TableViewConfigurationDropdown-DE9HFXYY.d.mts → TableViewConfigurationDropdown-1nT8wneI.d.mts} +2 -2
  76. package/dist/TableViewConfigurationDropdown.d.mts +1 -1
  77. package/dist/{clientFilterUtils-2TBUC31K.d.mts → clientFilterUtils-CaF2QZBy.d.mts} +2 -2
  78. package/dist/clientFilterUtils.d.mts +1 -1
  79. package/dist/components/Combobox/index.d.mts +4 -4
  80. package/dist/components/Combobox/index.mjs +1 -1
  81. package/dist/components/DataTable/TableControls/index.d.mts +7 -7
  82. package/dist/components/DataTable/TableControls/index.mjs +1 -1
  83. package/dist/components/DataTable/index.d.mts +6 -6
  84. package/dist/components/DataTable/index.mjs +1 -1
  85. package/dist/components/DataTable/types.d.mts +1 -1
  86. package/dist/components/DatePicker/index.mjs +1 -1
  87. package/dist/components/DropdownMenu/index.d.mts +1 -1
  88. package/dist/components/FormField/index.d.mts +4 -4
  89. package/dist/components/FormField/index.mjs +1 -1
  90. package/dist/components/HoverCopyableField/index.mjs +1 -1
  91. package/dist/components/Link/index.mjs +1 -1
  92. package/dist/components/ListBox/index.d.mts +3 -3
  93. package/dist/components/ListBox/index.mjs +1 -1
  94. package/dist/components/Menu/index.d.mts +1 -1
  95. package/dist/components/Modal/index.mjs +1 -1
  96. package/dist/components/Pii/index.mjs +1 -1
  97. package/dist/components/Popover/index.mjs +1 -1
  98. package/dist/components/RichTextEditor/index.mjs +2 -2
  99. package/dist/components/Select/index.d.mts +1 -1
  100. package/dist/components/SmartTextInput/index.mjs +104 -48
  101. package/dist/components/SmartTextInput/index.mjs.map +1 -1
  102. package/dist/components/TableBox/index.d.mts +1 -1
  103. package/dist/components/TableBox/index.mjs +1 -1
  104. package/dist/components/VersionHistory/index.mjs +1 -1
  105. package/dist/fieldPickerOptions.d.mts +1 -1
  106. package/dist/{filters-DW7pqWv3.d.mts → filters-CShP0Jag.d.mts} +2 -2
  107. package/dist/filters.d.mts +1 -1
  108. package/dist/{helpers-BTD2kXLs.d.mts → helpers-Bbi1LyMW.d.mts} +5 -3
  109. package/dist/helpers.d.mts +1 -1
  110. package/dist/{index-B4tE0RxY.d.mts → index-3-eDlpcj.d.mts} +3 -3
  111. package/dist/{inputFields-DnBb3NhK.d.mts → inputFields-Dobwb4kT.d.mts} +4 -4
  112. package/dist/inputFields.d.mts +1 -1
  113. package/dist/lib/PDSProvider.d.mts +2 -1
  114. package/dist/lib/PDSProvider.mjs +8 -3
  115. package/dist/lib/PDSProvider.mjs.map +1 -1
  116. package/dist/lib/colorMode.d.mts +18 -7
  117. package/dist/lib/colorMode.mjs +47 -13
  118. package/dist/lib/colorMode.mjs.map +1 -1
  119. package/dist/lib/schemaOptions.mjs +1 -1
  120. package/dist/lib/schemaOptions.mjs.map +1 -1
  121. package/dist/patterns/IndexTableLayout/index.mjs +1 -1
  122. package/dist/patterns/WizardModal/index.mjs +1 -1
  123. package/dist/{types-NO2GRlM-.d.mts → types-BTaKBrxG.d.mts} +2 -2
  124. package/dist/{types-Dws2XDz2.d.mts → types-CUnL8JJj.d.mts} +6 -4
  125. package/dist/types5.d.mts +1 -1
  126. package/dist/useColumnConfiguration.d.mts +2 -2
  127. package/dist/useComboboxFooterAction.d.mts +1 -1
  128. package/dist/{useTableColumns-tITjHasE.d.mts → useTableColumns-BuxN7Usm.d.mts} +17 -2
  129. package/dist/useTableColumns.d.mts +1 -1
  130. package/dist/useTruncation.d.mts +1 -1
  131. package/dist/utils4.d.mts +1 -1
  132. package/dist/withDisabledReason.d.mts +19 -0
  133. package/llms.txt +4 -3
  134. package/package.json +4 -12
  135. package/skills/ui-authoring/COMPONENTS.md +0 -1
  136. package/skills/ui-authoring/PATTERNS.md +0 -64
  137. package/skills/ui-authoring/TOKENS.md +14 -25
  138. package/dist/ChartFrame.d.mts +0 -61
  139. package/dist/ChartLegend.d.mts +0 -60
  140. package/dist/ChartPopover.d.mts +0 -155
  141. package/dist/Combobox-BNjYEAmv.mjs.map +0 -1
  142. package/dist/DataTable-DdSY9mzT.mjs.map +0 -1
  143. package/dist/Modal-CiPFqr0L.mjs.map +0 -1
  144. package/dist/TableControls-BXykbUBf.mjs.map +0 -1
  145. package/dist/chartColors.d.mts +0 -92
  146. package/dist/chartFrameLayout.d.mts +0 -46
  147. package/dist/components/Chart/index.d.mts +0 -9
  148. package/dist/components/Chart/index.mjs +0 -680
  149. package/dist/components/Chart/index.mjs.map +0 -1
  150. package/dist/useChartColors.d.mts +0 -30
  151. package/dist/useChartSeriesVisibility.d.mts +0 -22
  152. package/dist/useChartStyles.d.mts +0 -108
@@ -1,3 +1,3 @@
1
1
  import { t as DragDirection } from "../../useTableBoxDragAndDrop-MwbXWWDQ.mjs";
2
- import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-CQOL30et.mjs";
2
+ import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-C65YFYqj.mjs";
3
3
  export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };
@@ -1,2 +1,2 @@
1
- import { n as TableBoxContext, t as TableBox } from "../../TableBox-D9NA-s9l.mjs";
1
+ import { n as TableBoxContext, t as TableBox } from "../../TableBox-RxpwflEb.mjs";
2
2
  export { TableBoxContext, TableBox as default };
@@ -7,7 +7,7 @@ import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
7
7
  import { n as Button, t as IconButton } from "../../IconButton-Bj1fry_K.mjs";
8
8
  import { n as DropdownMenu_default } from "../../DropdownMenu-Ip75l4Th.mjs";
9
9
  import { t as Spinner } from "../../Spinner-k9ZiOdTr.mjs";
10
- import { i as Modal_default } from "../../Modal-CiPFqr0L.mjs";
10
+ import { i as Modal_default } from "../../Modal-SnCo7ecm.mjs";
11
11
  import { t as TextAreaWithStyle } from "../../TextArea-CQ1YNi2b.mjs";
12
12
  import { n as StatusIndicator } from "../../StatusIndicator-CzRaEFSz.mjs";
13
13
  import { useCallback, useMemo, useState } from "react";
@@ -1,4 +1,4 @@
1
- import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-CrFweFGi.mjs";
1
+ import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-DoKiRjgS.mjs";
2
2
  import { t as FieldRegistry } from "./FieldRegistry-CJwGpUVK.mjs";
3
3
 
4
4
  //#region src/components/DataTable/TableControls/FiltersV2/fieldPickerOptions.d.ts
@@ -1,4 +1,4 @@
1
- import { i as BaseFilterConfig, l as FilterTypeDefinition, t as ActiveFilter, u as FilterTypeResolver } from "./types-NO2GRlM-.mjs";
1
+ import { i as BaseFilterConfig, l as FilterTypeDefinition, t as ActiveFilter, u as FilterTypeResolver } from "./types-BTaKBrxG.mjs";
2
2
  import { ComponentProps } from "react";
3
3
  import * as _$styled_components0 from "styled-components";
4
4
  import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -19,4 +19,4 @@ declare const Filters: <TFilter extends BaseFilterConfig>({
19
19
  }) => _$react_jsx_runtime0.JSX.Element;
20
20
  //#endregion
21
21
  export { resolveFilterTypeDefinition as a, isFilterActive as i, FiltersContainer as n, synchronizeActiveFilters as o, getActiveFilters as r, Filters as t };
22
- //# sourceMappingURL=filters-DW7pqWv3.d.mts.map
22
+ //# sourceMappingURL=filters-CShP0Jag.d.mts.map
@@ -1,2 +1,2 @@
1
- import { a as resolveFilterTypeDefinition, i as isFilterActive, n as FiltersContainer, o as synchronizeActiveFilters, r as getActiveFilters, t as Filters } from "./filters-DW7pqWv3.mjs";
1
+ import { a as resolveFilterTypeDefinition, i as isFilterActive, n as FiltersContainer, o as synchronizeActiveFilters, r as getActiveFilters, t as Filters } from "./filters-CShP0Jag.mjs";
2
2
  export { Filters, FiltersContainer, getActiveFilters, isFilterActive, resolveFilterTypeDefinition, synchronizeActiveFilters };
@@ -1,11 +1,12 @@
1
1
  import { n as CheckboxProps } from "./Checkbox-Clt9mCTk.mjs";
2
2
  import { i as CommonStrings } from "./strings-DQZIO-n7.mjs";
3
- import { S as RenderValueStickerFormatConfig, b as DatetimeConfig, d as DataTableColumnImageFormat, h as DataTableColumnStringFormat, l as DataTableColumnFormat, p as DataTableColumnPiiFormat, y as DateConfig } from "./types-Dws2XDz2.mjs";
3
+ import { S as RenderValueStickerFormatConfig, b as DatetimeConfig, d as DataTableColumnImageFormat, h as DataTableColumnStringFormat, l as DataTableColumnFormat, p as DataTableColumnPiiFormat, y as DateConfig } from "./types-CUnL8JJj.mjs";
4
4
  import { ReactNode } from "react";
5
5
 
6
6
  //#region src/components/DataTable/helpers.d.ts
7
7
  declare const renderAsCheckbox: ({
8
8
  rowId,
9
+ rowLabel,
9
10
  isChecked,
10
11
  onChange,
11
12
  onValueChange,
@@ -14,7 +15,8 @@ declare const renderAsCheckbox: ({
14
15
  indeterminate,
15
16
  strings
16
17
  }: {
17
- rowId: string;
18
+ rowId: string; /** Names the row in the checkbox's accessible label; the row id when omitted. */
19
+ rowLabel?: string;
18
20
  isChecked: boolean;
19
21
  /**
20
22
  * Called when the checkbox is clicked
@@ -87,4 +89,4 @@ declare const renderAsLightweightImage: (value: unknown, config?: DataTableColum
87
89
  declare const renderAsPDSFormat: <TData = unknown>(value: unknown, format?: DataTableColumnFormat<TData>, row?: TData, options?: PDSFormatOptions) => string | ReactNode;
88
90
  //#endregion
89
91
  export { renderAsDate as a, renderAsNumber as c, renderAsSticker as d, renderAsString as f, renderAsCopyableString as i, renderAsPDSFormat as l, renderAsCheckbox as n, renderAsDatetime as o, renderAsURL as p, renderAsCheckboxHeader as r, renderAsLightweightImage as s, PDSFormatOptions as t, renderAsPii as u };
90
- //# sourceMappingURL=helpers-BTD2kXLs.d.mts.map
92
+ //# sourceMappingURL=helpers-Bbi1LyMW.d.mts.map
@@ -1,2 +1,2 @@
1
- import { a as renderAsDate, c as renderAsNumber, d as renderAsSticker, f as renderAsString, i as renderAsCopyableString, l as renderAsPDSFormat, n as renderAsCheckbox, o as renderAsDatetime, p as renderAsURL, r as renderAsCheckboxHeader, s as renderAsLightweightImage, t as PDSFormatOptions, u as renderAsPii } from "./helpers-BTD2kXLs.mjs";
1
+ import { a as renderAsDate, c as renderAsNumber, d as renderAsSticker, f as renderAsString, i as renderAsCopyableString, l as renderAsPDSFormat, n as renderAsCheckbox, o as renderAsDatetime, p as renderAsURL, r as renderAsCheckboxHeader, s as renderAsLightweightImage, t as PDSFormatOptions, u as renderAsPii } from "./helpers-Bbi1LyMW.mjs";
2
2
  export { PDSFormatOptions, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL };
@@ -1,5 +1,5 @@
1
- import { n as ListBoxItemProps, r as ListBoxProps$1 } from "./ListBox-ZDaitaXR.mjs";
2
- import { n as LogicRowProps } from "./LogicRow-Bzp5o1sL.mjs";
1
+ import { n as ListBoxItemProps, r as ListBoxProps$1 } from "./ListBox-Bgug8YZF.mjs";
2
+ import { n as LogicRowProps } from "./LogicRow-B1_35ZJT.mjs";
3
3
  import * as _$react from "react";
4
4
  import * as _$react_aria_components0 from "react-aria-components";
5
5
  import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -52,4 +52,4 @@ declare const ListBox: {
52
52
  };
53
53
  //#endregion
54
54
  export { ListBox as t };
55
- //# sourceMappingURL=index-B4tE0RxY.d.mts.map
55
+ //# sourceMappingURL=index-3-eDlpcj.d.mts.map
@@ -1,11 +1,11 @@
1
1
  import { n as CheckboxProps } from "./Checkbox-Clt9mCTk.mjs";
2
- import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-Cp5GBGQj.mjs";
3
- import { r as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-u7fK3Yvy.mjs";
2
+ import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DsoIMJiZ.mjs";
3
+ import { r as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CKsqOAGB.mjs";
4
4
  import { n as FormFieldBaseProps } from "./FormField-BW5uMzId.mjs";
5
5
  import { a as InputProps } from "./Input-DH-5dKor.mjs";
6
6
  import { n as RadioGroupProps } from "./RadioGroup-D_z37ZOU.mjs";
7
7
  import { i as SegmentedControlProps } from "./SegmentedControl-yVK6kkcx.mjs";
8
- import { i as SelectProps } from "./Select-DsVeAyZy.mjs";
8
+ import { i as SelectProps } from "./Select-CiofH5-f.mjs";
9
9
  import { t as TextAreaProps } from "./TextArea-BJWEaURJ.mjs";
10
10
  import { n as ToggleProps } from "./Toggle-CeIDF9yS.mjs";
11
11
  import * as _$react from "react";
@@ -68,4 +68,4 @@ type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField & ComboboxM
68
68
  declare const ComboboxField: (props: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => _$react_jsx_runtime0.JSX.Element;
69
69
  //#endregion
70
70
  export { ToggleField as _, ComboboxSingleSelectFieldProps as a, RadioGroupFieldProps as c, SelectField as d, SelectFieldProps as f, TextFieldProps as g, TextField as h, ComboboxMultiSelectFieldProps as i, SegmentedControlField as l, TextAreaFieldProps as m, CheckboxFieldProps as n, ImplementsFormField as o, TextAreaField as p, ComboboxField as r, RadioGroupField as s, CheckboxField as t, SegmentedControlFieldProps as u, ToggleFieldProps as v, splitOutFormFieldProps as y };
71
- //# sourceMappingURL=inputFields-DnBb3NhK.d.mts.map
71
+ //# sourceMappingURL=inputFields-Dobwb4kT.d.mts.map
@@ -1,2 +1,2 @@
1
- import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "./inputFields-DnBb3NhK.mjs";
1
+ import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "./inputFields-Dobwb4kT.mjs";
2
2
  export { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };
@@ -21,7 +21,8 @@ interface PDSProviderProps {
21
21
  locale?: string;
22
22
  /**
23
23
  * Installs the semantic palette for this mode on `theme` (`withPdsTheming(theme, colorMode)`) and
24
- * publishes it as `--pds-*` variables on `:root`. Omit it to keep today's behaviour. Pass
24
+ * publishes it as `--pds-*` variables and `color-scheme` on `:root`; `useColorMode()` returns it.
25
+ * Omit it to keep today's behaviour. Pass
25
26
  * `readDocumentColorMode()` from `@persona/design-system/lib/colorMode` to follow the host
26
27
  * dashboard.
27
28
  */
@@ -1,18 +1,19 @@
1
1
  import { t as ThemeProvider } from "../styledComponentsInterop-Cs5CCPRy.mjs";
2
2
  import defaultTheme, { withPdsTheming } from "../theme.mjs";
3
- import { SemanticCssVariables } from "./colorMode.mjs";
3
+ import { ColorModeContext, SemanticCssVariables } from "./colorMode.mjs";
4
4
  import { s as PDSI18nProvider } from "../i18n-DaOKaFc2.mjs";
5
5
  import { n as RouterProvider } from "../RouterContext-DAQHKOv6.mjs";
6
- import { useMemo } from "react";
6
+ import { useContext, useMemo } from "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region src/lib/PDSProvider.tsx
9
9
  const PDSProvider = ({ children, theme = defaultTheme, router, strings, locale, colorMode }) => {
10
10
  const providedTheme = useMemo(() => colorMode ? withPdsTheming(theme, colorMode) : theme, [theme, colorMode]);
11
+ const outerColorMode = useContext(ColorModeContext);
11
12
  const routed = router ? /* @__PURE__ */ jsx(RouterProvider, {
12
13
  ...router,
13
14
  children
14
15
  }) : children;
15
- return /* @__PURE__ */ jsxs(ThemeProvider, {
16
+ const provided = /* @__PURE__ */ jsxs(ThemeProvider, {
16
17
  theme: providedTheme,
17
18
  children: [colorMode && /* @__PURE__ */ jsx(SemanticCssVariables, { mode: colorMode }), /* @__PURE__ */ jsx(PDSI18nProvider, {
18
19
  strings,
@@ -20,6 +21,10 @@ const PDSProvider = ({ children, theme = defaultTheme, router, strings, locale,
20
21
  children: routed
21
22
  })]
22
23
  });
24
+ return /* @__PURE__ */ jsx(ColorModeContext.Provider, {
25
+ value: colorMode ?? outerColorMode,
26
+ children: provided
27
+ });
23
28
  };
24
29
  //#endregion
25
30
  export { PDSProvider as default };
@@ -1 +1 @@
1
- {"version":3,"file":"PDSProvider.mjs","names":[],"sources":["../../src/lib/PDSProvider.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useMemo } from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport defaultTheme, { type PersonaTheme, withPdsTheming } from '@persona/design-system/theme';\n\nimport { type ColorMode, SemanticCssVariables } from '#src/lib/colorMode';\nimport { PDSI18nProvider, type CommonStringOverrides } from '#src/lib/i18n';\nimport { RouterProvider, type RouterAdapter } from '#src/lib/router';\n\ninterface PDSProviderProps {\n theme?: PersonaTheme;\n router?: RouterAdapter;\n /**\n * Translations for built-in component copy (table footer, column configuration, saved-view\n * tabs, filters). Keys you omit keep their English defaults. See `CommonStrings` in\n * `@persona/design-system/lib/i18n` for the keys.\n */\n strings?: CommonStringOverrides;\n /**\n * BCP 47 locale (e.g. `'fr-CA'`). Table dates and times follow it; omitted or `'en-US'` keeps\n * the historical English format.\n */\n locale?: string;\n /**\n * Installs the semantic palette for this mode on `theme` (`withPdsTheming(theme, colorMode)`) and\n * publishes it as `--pds-*` variables on `:root`. Omit it to keep today's behaviour. Pass\n * `readDocumentColorMode()` from `@persona/design-system/lib/colorMode` to follow the host\n * dashboard.\n */\n colorMode?: ColorMode;\n}\n\nconst PDSProvider: FC<PropsWithChildren<PDSProviderProps>> = ({\n children,\n theme = defaultTheme,\n router,\n strings,\n locale,\n colorMode,\n}) => {\n const providedTheme = useMemo(\n () => (colorMode ? withPdsTheming(theme, colorMode) : theme),\n [theme, colorMode],\n );\n const routed = router ? <RouterProvider {...router}>{children}</RouterProvider> : children;\n // Always mounted, even without `strings`/`locale` (it then inherits the outer values), so a host\n // that turns localization on or off later updates context instead of remounting the subtree.\n return (\n <ThemeProvider theme={providedTheme}>\n {colorMode && <SemanticCssVariables mode={colorMode} />}\n <PDSI18nProvider strings={strings} locale={locale}>\n {routed}\n </PDSI18nProvider>\n </ThemeProvider>\n );\n};\n\nexport default PDSProvider;\n"],"mappings":";;;;;;;;AAgCA,MAAM,eAAwD,EAC5D,UACA,QAAQ,cACR,QACA,SACA,QACA,gBACI;CACJ,MAAM,gBAAgB,cACb,YAAY,eAAe,OAAO,UAAU,GAAG,OACtD,CAAC,OAAO,UAAU,CACnB;CACD,MAAM,SAAS,SAAS,oBAAC,gBAAD;EAAgB,GAAI;EAAS;EAA0B,CAAA,GAAG;AAGlF,QACE,qBAAC,eAAD;EAAe,OAAO;YAAtB,CACG,aAAa,oBAAC,sBAAD,EAAsB,MAAM,WAAa,CAAA,EACvD,oBAAC,iBAAD;GAA0B;GAAiB;aACxC;GACe,CAAA,CACJ"}
1
+ {"version":3,"file":"PDSProvider.mjs","names":[],"sources":["../../src/lib/PDSProvider.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useContext, useMemo } from 'react';\nimport { ThemeProvider } from 'styled-components';\n\nimport defaultTheme, { type PersonaTheme, withPdsTheming } from '@persona/design-system/theme';\n\nimport { type ColorMode, ColorModeContext, SemanticCssVariables } from '#src/lib/colorMode';\nimport { PDSI18nProvider, type CommonStringOverrides } from '#src/lib/i18n';\nimport { RouterProvider, type RouterAdapter } from '#src/lib/router';\n\ninterface PDSProviderProps {\n theme?: PersonaTheme;\n router?: RouterAdapter;\n /**\n * Translations for built-in component copy (table footer, column configuration, saved-view\n * tabs, filters). Keys you omit keep their English defaults. See `CommonStrings` in\n * `@persona/design-system/lib/i18n` for the keys.\n */\n strings?: CommonStringOverrides;\n /**\n * BCP 47 locale (e.g. `'fr-CA'`). Table dates and times follow it; omitted or `'en-US'` keeps\n * the historical English format.\n */\n locale?: string;\n /**\n * Installs the semantic palette for this mode on `theme` (`withPdsTheming(theme, colorMode)`) and\n * publishes it as `--pds-*` variables and `color-scheme` on `:root`; `useColorMode()` returns it.\n * Omit it to keep today's behaviour. Pass\n * `readDocumentColorMode()` from `@persona/design-system/lib/colorMode` to follow the host\n * dashboard.\n */\n colorMode?: ColorMode;\n}\n\nconst PDSProvider: FC<PropsWithChildren<PDSProviderProps>> = ({\n children,\n theme = defaultTheme,\n router,\n strings,\n locale,\n colorMode,\n}) => {\n const providedTheme = useMemo(\n () => (colorMode ? withPdsTheming(theme, colorMode) : theme),\n [theme, colorMode],\n );\n const outerColorMode = useContext(ColorModeContext);\n const routed = router ? <RouterProvider {...router}>{children}</RouterProvider> : children;\n // Always mounted, even without `strings`/`locale` (it then inherits the outer values), so a host\n // that turns localization on or off later updates context instead of remounting the subtree.\n const provided = (\n <ThemeProvider theme={providedTheme}>\n {colorMode && <SemanticCssVariables mode={colorMode} />}\n <PDSI18nProvider strings={strings} locale={locale}>\n {routed}\n </PDSI18nProvider>\n </ThemeProvider>\n );\n return (\n <ColorModeContext.Provider value={colorMode ?? outerColorMode}>\n {provided}\n </ColorModeContext.Provider>\n );\n};\n\nexport default PDSProvider;\n"],"mappings":";;;;;;;;AAiCA,MAAM,eAAwD,EAC5D,UACA,QAAQ,cACR,QACA,SACA,QACA,gBACI;CACJ,MAAM,gBAAgB,cACb,YAAY,eAAe,OAAO,UAAU,GAAG,OACtD,CAAC,OAAO,UAAU,CACnB;CACD,MAAM,iBAAiB,WAAW,iBAAiB;CACnD,MAAM,SAAS,SAAS,oBAAC,gBAAD;EAAgB,GAAI;EAAS;EAA0B,CAAA,GAAG;CAGlF,MAAM,WACJ,qBAAC,eAAD;EAAe,OAAO;YAAtB,CACG,aAAa,oBAAC,sBAAD,EAAsB,MAAM,WAAa,CAAA,EACvD,oBAAC,iBAAD;GAA0B;GAAiB;aACxC;GACe,CAAA,CACJ;;AAElB,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,aAAa;YAC5C;EACyB,CAAA"}
@@ -1,5 +1,6 @@
1
1
  import { n as SemanticTokens } from "../semantic-BZbvb3LV.mjs";
2
2
  import { i as PersonaTheme, r as PdsThemingMode } from "../theme-CeA8jBRG.mjs";
3
+ import * as _$react from "react";
3
4
  import { FC, PropsWithChildren } from "react";
4
5
  import * as _$styled_components0 from "styled-components";
5
6
 
@@ -13,18 +14,28 @@ declare function createPdsTheme(mode: ColorMode, baseTheme?: PersonaTheme): Pers
13
14
  declare function semanticCssVariable(token: keyof SemanticTokens): string;
14
15
  /** `--pds-*: value;` for every semantic token. */
15
16
  declare function semanticCssDeclarations(semantic: SemanticTokens): string;
16
- /** Global style: publishes the palette for `mode` on `:root`. */
17
+ declare const ColorModeContext: _$react.Context<ColorMode | undefined>;
18
+ /** The mode of the nearest `PDSProvider colorMode` or `ColorModeScope`; `'light'` outside both. */
19
+ declare function useColorMode(): ColorMode;
20
+ /**
21
+ * Global style: publishes the palette and `color-scheme` for `mode` on `:root`. Print always uses
22
+ * the light palette.
23
+ */
17
24
  declare const SemanticCssVariables: _$styled_components0.GlobalStyleComponent<{
18
25
  mode: ColorMode;
19
26
  }, _$styled_components0.DefaultTheme>;
27
+ interface ColorModeScopeProps {
28
+ mode: ColorMode;
29
+ theme?: PersonaTheme;
30
+ }
20
31
  /**
21
32
  * Renders `children` in `mode`, whatever the surrounding mode is: a nested `ThemeProvider` with
22
- * `withPdsTheming(outerTheme, mode)` and a `display: contents` wrapper carrying `data-color-mode`
23
- * and the `--pds-*` declarations for `mode`.
33
+ * `withPdsTheming(theme ?? outerTheme, mode)` and a `display: contents` wrapper carrying
34
+ * `data-color-mode`, `color-scheme`, the mode's `FgPrimary` text colour and the `--pds-*`
35
+ * declarations for `mode`. Changing `mode` re-themes the subtree without remounting it. Print always
36
+ * uses the light palette.
24
37
  */
25
- declare const ColorModeScope: FC<PropsWithChildren<{
26
- mode: ColorMode;
27
- }>>;
38
+ declare const ColorModeScope: FC<PropsWithChildren<ColorModeScopeProps>>;
28
39
  //#endregion
29
- export { ColorMode, ColorModeScope, SemanticCssVariables, createPdsTheme, readDocumentColorMode, semanticCssDeclarations, semanticCssVariable };
40
+ export { ColorMode, ColorModeContext, ColorModeScope, SemanticCssVariables, createPdsTheme, readDocumentColorMode, semanticCssDeclarations, semanticCssVariable, useColorMode };
30
41
  //# sourceMappingURL=colorMode.d.mts.map
@@ -1,7 +1,7 @@
1
1
  import { a as styled, n as createGlobalStyle, o as useTheme, t as ThemeProvider } from "../styledComponentsInterop-Cs5CCPRy.mjs";
2
2
  import { semanticDark, semanticLight } from "../variables/semantic.mjs";
3
3
  import defaultTheme, { withPdsTheming } from "../theme.mjs";
4
- import { useMemo } from "react";
4
+ import { createContext, useContext, useMemo } from "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region src/lib/colorMode.tsx
7
7
  /**
@@ -13,7 +13,7 @@ import { jsx } from "react/jsx-runtime";
13
13
  * plain stylesheets resolve the same colours as PDS components.
14
14
  *
15
15
  * Most apps only need `PDSProvider colorMode={readDocumentColorMode()}`. `ColorModeScope` renders
16
- * part of a page in the other mode.
16
+ * part of a page in the other mode, and `useColorMode()` reads the mode in effect.
17
17
  *
18
18
  * Portals: PDS overlays portal to `document.body`. styled-components context crosses the portal, so
19
19
  * a PDS overlay opened inside a `ColorModeScope` renders in the scope's mode. CSS custom properties
@@ -39,33 +39,67 @@ const semanticCss = {
39
39
  light: semanticCssDeclarations(semanticLight),
40
40
  dark: semanticCssDeclarations(semanticDark)
41
41
  };
42
- /** Global style: publishes the palette for `mode` on `:root`. */
42
+ const semanticPalettes = {
43
+ light: semanticLight,
44
+ dark: semanticDark
45
+ };
46
+ const ColorModeContext = createContext(void 0);
47
+ /** The mode of the nearest `PDSProvider colorMode` or `ColorModeScope`; `'light'` outside both. */
48
+ function useColorMode() {
49
+ return useContext(ColorModeContext) ?? "light";
50
+ }
51
+ const printAsLight = `
52
+ @media print {
53
+ color-scheme: light;
54
+ ${semanticCss.light}
55
+ }
56
+ `;
57
+ /**
58
+ * Global style: publishes the palette and `color-scheme` for `mode` on `:root`. Print always uses
59
+ * the light palette.
60
+ */
43
61
  const SemanticCssVariables = createGlobalStyle`
44
62
  :root {
63
+ color-scheme: ${({ mode }) => mode};
45
64
  ${({ mode }) => semanticCss[mode]}
65
+ ${printAsLight}
46
66
  }
47
67
  `;
48
68
  const ColorModeScopeRoot = styled.div`
49
69
  display: contents;
70
+ color-scheme: ${({ $mode }) => $mode};
71
+ color: ${({ $mode }) => semanticPalettes[$mode].FgPrimary};
50
72
  ${({ $mode }) => semanticCss[$mode]}
73
+ ${printAsLight}
74
+
75
+ @media print {
76
+ color: ${semanticLight.FgPrimary};
77
+ }
51
78
  `;
52
79
  /**
53
80
  * Renders `children` in `mode`, whatever the surrounding mode is: a nested `ThemeProvider` with
54
- * `withPdsTheming(outerTheme, mode)` and a `display: contents` wrapper carrying `data-color-mode`
55
- * and the `--pds-*` declarations for `mode`.
81
+ * `withPdsTheming(theme ?? outerTheme, mode)` and a `display: contents` wrapper carrying
82
+ * `data-color-mode`, `color-scheme`, the mode's `FgPrimary` text colour and the `--pds-*`
83
+ * declarations for `mode`. Changing `mode` re-themes the subtree without remounting it. Print always
84
+ * uses the light palette.
56
85
  */
57
- const ColorModeScope = ({ children, mode }) => {
86
+ const ColorModeScope = ({ children, mode, theme }) => {
58
87
  const outerTheme = useTheme();
59
- return /* @__PURE__ */ jsx(ThemeProvider, {
60
- theme: useMemo(() => withPdsTheming(outerTheme ?? defaultTheme, mode), [outerTheme, mode]),
61
- children: /* @__PURE__ */ jsx(ColorModeScopeRoot, {
62
- $mode: mode,
63
- "data-color-mode": mode,
64
- children
88
+ const baseTheme = theme ?? outerTheme ?? defaultTheme;
89
+ const scopedTheme = useMemo(() => withPdsTheming(baseTheme, mode), [baseTheme, mode]);
90
+ return /* @__PURE__ */ jsx(ColorModeContext.Provider, {
91
+ value: mode,
92
+ children: /* @__PURE__ */ jsx(ThemeProvider, {
93
+ theme: scopedTheme,
94
+ children: /* @__PURE__ */ jsx(ColorModeScopeRoot, {
95
+ $mode: mode,
96
+ "data-color-mode": mode,
97
+ children
98
+ })
65
99
  })
66
100
  });
67
101
  };
68
102
  //#endregion
69
- export { ColorModeScope, SemanticCssVariables, createPdsTheme, readDocumentColorMode, semanticCssDeclarations, semanticCssVariable };
103
+ export { ColorModeContext, ColorModeScope, SemanticCssVariables, createPdsTheme, readDocumentColorMode, semanticCssDeclarations, semanticCssVariable, useColorMode };
70
104
 
71
105
  //# sourceMappingURL=colorMode.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"colorMode.mjs","names":[],"sources":["../../src/lib/colorMode.tsx"],"sourcesContent":["/**\n * Colour-mode helpers for apps embedded in the Persona dashboard.\n *\n * The host stamps the dashboard's mode on `<html data-color-mode>` before first paint (an inline\n * script in each app's `index.html`). These helpers read it, install the matching semantic palette\n * on the styled-components theme, and publish that palette as `--pds-*` CSS custom properties so\n * plain stylesheets resolve the same colours as PDS components.\n *\n * Most apps only need `PDSProvider colorMode={readDocumentColorMode()}`. `ColorModeScope` renders\n * part of a page in the other mode.\n *\n * Portals: PDS overlays portal to `document.body`. styled-components context crosses the portal, so\n * a PDS overlay opened inside a `ColorModeScope` renders in the scope's mode. CSS custom properties\n * don't: plain CSS inside a portaled overlay resolves the `:root` palette, not the scope's.\n */\nimport { type FC, type PropsWithChildren, useMemo } from 'react';\nimport styled, { createGlobalStyle, ThemeProvider, useTheme } from 'styled-components';\n\nimport defaultTheme, { type PdsThemingMode, type PersonaTheme, withPdsTheming } from '#src/theme';\nimport { semanticDark, semanticLight, type SemanticTokens } from '#src/variables/semantic';\n\nexport type ColorMode = Exclude<PdsThemingMode, 'off'>;\n\n/** `'dark'` only when `<html data-color-mode=\"dark\">`; anything else (absent, `DARK`, junk) is light. */\nexport function readDocumentColorMode(doc: Document = document): ColorMode {\n return doc.documentElement.dataset.colorMode === 'dark' ? 'dark' : 'light';\n}\n\n/** `withPdsTheming(baseTheme, mode)`; `baseTheme` defaults to the PDS default theme. */\nexport function createPdsTheme(\n mode: ColorMode,\n baseTheme: PersonaTheme = defaultTheme,\n): PersonaTheme {\n return withPdsTheming(baseTheme, mode);\n}\n\n/** `FgPrimary` -> `--pds-fg-primary`, `FeedbackDanger1` -> `--pds-feedback-danger-1`. */\nexport function semanticCssVariable(token: keyof SemanticTokens): string {\n return `--pds-${token\n .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n .replace(/([0-9])([A-Z])/g, '$1-$2')\n .toLowerCase()}`;\n}\n\n/** `--pds-*: value;` for every semantic token. */\nexport function semanticCssDeclarations(semantic: SemanticTokens): string {\n return (Object.keys(semantic) as (keyof SemanticTokens)[])\n .map((token) => `${semanticCssVariable(token)}: ${semantic[token]};`)\n .join('\\n');\n}\n\nconst semanticCss: Record<ColorMode, string> = {\n light: semanticCssDeclarations(semanticLight),\n dark: semanticCssDeclarations(semanticDark),\n};\n\n/** Global style: publishes the palette for `mode` on `:root`. */\nexport const SemanticCssVariables = createGlobalStyle<{ mode: ColorMode }>`\n :root {\n ${({ mode }) => semanticCss[mode]}\n }\n`;\n\nconst ColorModeScopeRoot = styled.div<{ $mode: ColorMode }>`\n display: contents;\n ${({ $mode }) => semanticCss[$mode]}\n`;\n\n/**\n * Renders `children` in `mode`, whatever the surrounding mode is: a nested `ThemeProvider` with\n * `withPdsTheming(outerTheme, mode)` and a `display: contents` wrapper carrying `data-color-mode`\n * and the `--pds-*` declarations for `mode`.\n */\nexport const ColorModeScope: FC<PropsWithChildren<{ mode: ColorMode }>> = ({ children, mode }) => {\n const outerTheme = useTheme() as PersonaTheme | undefined;\n const scopedTheme = useMemo(\n () => withPdsTheming(outerTheme ?? defaultTheme, mode),\n [outerTheme, mode],\n );\n\n return (\n <ThemeProvider theme={scopedTheme}>\n <ColorModeScopeRoot $mode={mode} data-color-mode={mode}>\n {children}\n </ColorModeScopeRoot>\n </ThemeProvider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,sBAAsB,MAAgB,UAAqB;AACzE,QAAO,IAAI,gBAAgB,QAAQ,cAAc,SAAS,SAAS;;;AAIrE,SAAgB,eACd,MACA,YAA0B,cACZ;AACd,QAAO,eAAe,WAAW,KAAK;;;AAIxC,SAAgB,oBAAoB,OAAqC;AACvE,QAAO,SAAS,MACb,QAAQ,sBAAsB,QAAQ,CACtC,QAAQ,mBAAmB,QAAQ,CACnC,aAAa;;;AAIlB,SAAgB,wBAAwB,UAAkC;AACxE,QAAQ,OAAO,KAAK,SAAS,CAC1B,KAAK,UAAU,GAAG,oBAAoB,MAAM,CAAC,IAAI,SAAS,OAAO,GAAG,CACpE,KAAK,KAAK;;AAGf,MAAM,cAAyC;CAC7C,OAAO,wBAAwB,cAAc;CAC7C,MAAM,wBAAwB,aAAa;CAC5C;;AAGD,MAAa,uBAAuB,iBAAsC;;OAEnE,EAAE,WAAW,YAAY,MAAM;;;AAItC,MAAM,qBAAqB,OAAO,GAAyB;;KAEtD,EAAE,YAAY,YAAY,OAAO;;;;;;;AAQtC,MAAa,kBAA8D,EAAE,UAAU,WAAW;CAChG,MAAM,aAAa,UAAU;AAM7B,QACE,oBAAC,eAAD;EAAe,OANG,cACZ,eAAe,cAAc,cAAc,KAAK,EACtD,CAAC,YAAY,KAAK,CAIe;YAC/B,oBAAC,oBAAD;GAAoB,OAAO;GAAM,mBAAiB;GAC/C;GACkB,CAAA;EACP,CAAA"}
1
+ {"version":3,"file":"colorMode.mjs","names":[],"sources":["../../src/lib/colorMode.tsx"],"sourcesContent":["/**\n * Colour-mode helpers for apps embedded in the Persona dashboard.\n *\n * The host stamps the dashboard's mode on `<html data-color-mode>` before first paint (an inline\n * script in each app's `index.html`). These helpers read it, install the matching semantic palette\n * on the styled-components theme, and publish that palette as `--pds-*` CSS custom properties so\n * plain stylesheets resolve the same colours as PDS components.\n *\n * Most apps only need `PDSProvider colorMode={readDocumentColorMode()}`. `ColorModeScope` renders\n * part of a page in the other mode, and `useColorMode()` reads the mode in effect.\n *\n * Portals: PDS overlays portal to `document.body`. styled-components context crosses the portal, so\n * a PDS overlay opened inside a `ColorModeScope` renders in the scope's mode. CSS custom properties\n * don't: plain CSS inside a portaled overlay resolves the `:root` palette, not the scope's.\n */\nimport { createContext, type FC, type PropsWithChildren, useContext, useMemo } from 'react';\nimport styled, { createGlobalStyle, ThemeProvider, useTheme } from 'styled-components';\n\nimport defaultTheme, { type PdsThemingMode, type PersonaTheme, withPdsTheming } from '#src/theme';\nimport { semanticDark, semanticLight, type SemanticTokens } from '#src/variables/semantic';\n\nexport type ColorMode = Exclude<PdsThemingMode, 'off'>;\n\n/** `'dark'` only when `<html data-color-mode=\"dark\">`; anything else (absent, `DARK`, junk) is light. */\nexport function readDocumentColorMode(doc: Document = document): ColorMode {\n return doc.documentElement.dataset.colorMode === 'dark' ? 'dark' : 'light';\n}\n\n/** `withPdsTheming(baseTheme, mode)`; `baseTheme` defaults to the PDS default theme. */\nexport function createPdsTheme(\n mode: ColorMode,\n baseTheme: PersonaTheme = defaultTheme,\n): PersonaTheme {\n return withPdsTheming(baseTheme, mode);\n}\n\n/** `FgPrimary` -> `--pds-fg-primary`, `FeedbackDanger1` -> `--pds-feedback-danger-1`. */\nexport function semanticCssVariable(token: keyof SemanticTokens): string {\n return `--pds-${token\n .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n .replace(/([0-9])([A-Z])/g, '$1-$2')\n .toLowerCase()}`;\n}\n\n/** `--pds-*: value;` for every semantic token. */\nexport function semanticCssDeclarations(semantic: SemanticTokens): string {\n return (Object.keys(semantic) as (keyof SemanticTokens)[])\n .map((token) => `${semanticCssVariable(token)}: ${semantic[token]};`)\n .join('\\n');\n}\n\nconst semanticCss: Record<ColorMode, string> = {\n light: semanticCssDeclarations(semanticLight),\n dark: semanticCssDeclarations(semanticDark),\n};\n\nconst semanticPalettes: Record<ColorMode, SemanticTokens> = {\n light: semanticLight,\n dark: semanticDark,\n};\n\nexport const ColorModeContext = createContext<ColorMode | undefined>(undefined);\n\n/** The mode of the nearest `PDSProvider colorMode` or `ColorModeScope`; `'light'` outside both. */\nexport function useColorMode(): ColorMode {\n return useContext(ColorModeContext) ?? 'light';\n}\n\nconst printAsLight = `\n @media print {\n color-scheme: light;\n ${semanticCss.light}\n }\n`;\n\n/**\n * Global style: publishes the palette and `color-scheme` for `mode` on `:root`. Print always uses\n * the light palette.\n */\nexport const SemanticCssVariables = createGlobalStyle<{ mode: ColorMode }>`\n :root {\n color-scheme: ${({ mode }) => mode};\n ${({ mode }) => semanticCss[mode]}\n ${printAsLight}\n }\n`;\n\nconst ColorModeScopeRoot = styled.div<{ $mode: ColorMode }>`\n display: contents;\n color-scheme: ${({ $mode }) => $mode};\n color: ${({ $mode }) => semanticPalettes[$mode].FgPrimary};\n ${({ $mode }) => semanticCss[$mode]}\n ${printAsLight}\n\n @media print {\n color: ${semanticLight.FgPrimary};\n }\n`;\n\ninterface ColorModeScopeProps {\n mode: ColorMode;\n theme?: PersonaTheme;\n}\n\n/**\n * Renders `children` in `mode`, whatever the surrounding mode is: a nested `ThemeProvider` with\n * `withPdsTheming(theme ?? outerTheme, mode)` and a `display: contents` wrapper carrying\n * `data-color-mode`, `color-scheme`, the mode's `FgPrimary` text colour and the `--pds-*`\n * declarations for `mode`. Changing `mode` re-themes the subtree without remounting it. Print always\n * uses the light palette.\n */\nexport const ColorModeScope: FC<PropsWithChildren<ColorModeScopeProps>> = ({\n children,\n mode,\n theme,\n}) => {\n const outerTheme = useTheme() as PersonaTheme | undefined;\n const baseTheme = theme ?? outerTheme ?? defaultTheme;\n const scopedTheme = useMemo(() => withPdsTheming(baseTheme, mode), [baseTheme, mode]);\n\n return (\n <ColorModeContext.Provider value={mode}>\n <ThemeProvider theme={scopedTheme}>\n <ColorModeScopeRoot $mode={mode} data-color-mode={mode}>\n {children}\n </ColorModeScopeRoot>\n </ThemeProvider>\n </ColorModeContext.Provider>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,sBAAsB,MAAgB,UAAqB;AACzE,QAAO,IAAI,gBAAgB,QAAQ,cAAc,SAAS,SAAS;;;AAIrE,SAAgB,eACd,MACA,YAA0B,cACZ;AACd,QAAO,eAAe,WAAW,KAAK;;;AAIxC,SAAgB,oBAAoB,OAAqC;AACvE,QAAO,SAAS,MACb,QAAQ,sBAAsB,QAAQ,CACtC,QAAQ,mBAAmB,QAAQ,CACnC,aAAa;;;AAIlB,SAAgB,wBAAwB,UAAkC;AACxE,QAAQ,OAAO,KAAK,SAAS,CAC1B,KAAK,UAAU,GAAG,oBAAoB,MAAM,CAAC,IAAI,SAAS,OAAO,GAAG,CACpE,KAAK,KAAK;;AAGf,MAAM,cAAyC;CAC7C,OAAO,wBAAwB,cAAc;CAC7C,MAAM,wBAAwB,aAAa;CAC5C;AAED,MAAM,mBAAsD;CAC1D,OAAO;CACP,MAAM;CACP;AAED,MAAa,mBAAmB,cAAqC,KAAA,EAAU;;AAG/E,SAAgB,eAA0B;AACxC,QAAO,WAAW,iBAAiB,IAAI;;AAGzC,MAAM,eAAe;;;MAGf,YAAY,MAAM;;;;;;;AAQxB,MAAa,uBAAuB,iBAAsC;;qBAErD,EAAE,WAAW,KAAK;OAChC,EAAE,WAAW,YAAY,MAAM;MAChC,aAAa;;;AAInB,MAAM,qBAAqB,OAAO,GAAyB;;mBAExC,EAAE,YAAY,MAAM;YAC3B,EAAE,YAAY,iBAAiB,OAAO,UAAU;KACvD,EAAE,YAAY,YAAY,OAAO;IAClC,aAAa;;;aAGJ,cAAc,UAAU;;;;;;;;;;AAgBrC,MAAa,kBAA8D,EACzE,UACA,MACA,YACI;CACJ,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,SAAS,cAAc;CACzC,MAAM,cAAc,cAAc,eAAe,WAAW,KAAK,EAAE,CAAC,WAAW,KAAK,CAAC;AAErF,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,eAAD;GAAe,OAAO;aACpB,oBAAC,oBAAD;IAAoB,OAAO;IAAM,mBAAiB;IAC/C;IACkB,CAAA;GACP,CAAA;EACU,CAAA"}
@@ -425,7 +425,7 @@ const validatePath = ({ path, jsonSchema, platformObjectJsonSchema = {}, primiti
425
425
  const { methodChain, partial } = parseWithPartialOption(path);
426
426
  const optionsWithPartiallyMatchedFinalLink = methodChain.links.reduce((currentSchema, link) => {
427
427
  if (currentSchema.length === 0) return [];
428
- const optionMatch = currentSchema.find((option) => option.property === link.name);
428
+ const optionMatch = currentSchema.find((option) => option.property === fullNodeName(link));
429
429
  if (optionMatch) return getSchemaOptions({
430
430
  option: optionMatch,
431
431
  optionFilters,