@orianatech/pire 0.12.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/core/Icon.d.ts.map +1 -1
- package/dist/components/core/Kbd.d.cts +17 -0
- package/dist/components/core/Kbd.d.ts +18 -0
- package/dist/components/core/Kbd.d.ts.map +1 -0
- package/dist/components/core/icon-data.generated.d.ts.map +1 -1
- package/dist/components/core/icon-map.d.cts +9 -0
- package/dist/components/core/icon-map.d.ts +9 -0
- package/dist/components/core/icon-map.d.ts.map +1 -1
- package/dist/components/data/LinkList.d.cts +10 -1
- package/dist/components/data/LinkList.d.ts +10 -1
- package/dist/components/data/LinkList.d.ts.map +1 -1
- package/dist/components/feedback/Dialog.d.ts.map +1 -1
- package/dist/components/forms/ComboBox.d.cts +10 -1
- package/dist/components/forms/ComboBox.d.ts +10 -1
- package/dist/components/forms/ComboBox.d.ts.map +1 -1
- package/dist/components/forms/Select.d.cts +7 -1
- package/dist/components/forms/Select.d.ts +7 -1
- package/dist/components/forms/Select.d.ts.map +1 -1
- package/dist/components/forms/ValueHelpField.d.cts +12 -1
- package/dist/components/forms/ValueHelpField.d.ts +12 -1
- package/dist/components/forms/ValueHelpField.d.ts.map +1 -1
- package/dist/components/navigation/Menu.d.cts +7 -2
- package/dist/components/navigation/Menu.d.ts +7 -2
- package/dist/components/navigation/Menu.d.ts.map +1 -1
- package/dist/components/navigation/ShellBar.d.cts +13 -1
- package/dist/components/navigation/ShellBar.d.ts +13 -1
- package/dist/components/navigation/ShellBar.d.ts.map +1 -1
- package/dist/components/patterns/CommandPalette.d.cts +97 -0
- package/dist/components/patterns/CommandPalette.d.ts +98 -0
- package/dist/components/patterns/CommandPalette.d.ts.map +1 -0
- package/dist/components/patterns/ValueHelpDialog.d.cts +22 -1
- package/dist/components/patterns/ValueHelpDialog.d.ts +22 -1
- package/dist/components/patterns/ValueHelpDialog.d.ts.map +1 -1
- package/dist/components.css +96 -2
- package/dist/i18n/messages.d.cts +29 -0
- package/dist/i18n/messages.d.ts +29 -0
- package/dist/i18n/messages.d.ts.map +1 -1
- package/dist/index.cjs +1001 -593
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +920 -505
- package/dist/index.js.map +1 -1
- package/dist/tokens/base.css +10 -8
- package/package.json +1 -1
|
@@ -10,6 +10,27 @@ export interface ValueHelpDialogProps<T extends {
|
|
|
10
10
|
rows?: T[];
|
|
11
11
|
searchPlaceholder?: string;
|
|
12
12
|
emptyLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* The query on every keystroke. **Debounce before calling the server.**
|
|
15
|
+
*
|
|
16
|
+
* On its own this only observes; it does not change how `rows` is treated. Pair it with
|
|
17
|
+
* `isFilteredExternally` to actually hand filtering to the server.
|
|
18
|
+
*/
|
|
19
|
+
onSearch?: (query: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* `rows` is the final list and the dialog filters nothing locally. Required for server search:
|
|
22
|
+
* fuzzy matches, synonyms, code-to-description and server ranking do not survive a local
|
|
23
|
+
* "contains" pass over the fields that happen to be in the row.
|
|
24
|
+
*
|
|
25
|
+
* Named to match `ComboBox`, deliberately. The same idea under two names is worse than either
|
|
26
|
+
* name — the ERP's supplier, customer, product and purchase-order pickers all need this, and
|
|
27
|
+
* they already know the ComboBox spelling.
|
|
28
|
+
*/
|
|
29
|
+
isFilteredExternally?: boolean;
|
|
30
|
+
/** Keeps the table's skeleton up instead of showing "no records" while a request is in flight. */
|
|
31
|
+
isLoading?: boolean;
|
|
32
|
+
/** Called when the table is scrolled near its end, for paginated results. */
|
|
33
|
+
onLoadMore?: () => void;
|
|
13
34
|
/** Receives the picked row. */
|
|
14
35
|
onSelect?: (row: T) => void;
|
|
15
36
|
onClose?: () => void;
|
|
@@ -17,4 +38,4 @@ export interface ValueHelpDialogProps<T extends {
|
|
|
17
38
|
/** The ERP value help: search a master-data list and pick one record back into a field. */
|
|
18
39
|
export declare function ValueHelpDialog<T extends {
|
|
19
40
|
id: string | number;
|
|
20
|
-
}>({ isOpen, title, columns, rows, searchPlaceholder, emptyLabel, onSelect, onClose }: ValueHelpDialogProps<T>): React.JSX.Element;
|
|
41
|
+
}>({ isOpen, title, columns, rows, searchPlaceholder, emptyLabel, onSearch, isFilteredExternally, isLoading, onLoadMore, onSelect, onClose }: ValueHelpDialogProps<T>): React.JSX.Element;
|
|
@@ -10,6 +10,27 @@ export interface ValueHelpDialogProps<T extends {
|
|
|
10
10
|
rows?: T[];
|
|
11
11
|
searchPlaceholder?: string;
|
|
12
12
|
emptyLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* The query on every keystroke. **Debounce before calling the server.**
|
|
15
|
+
*
|
|
16
|
+
* On its own this only observes; it does not change how `rows` is treated. Pair it with
|
|
17
|
+
* `isFilteredExternally` to actually hand filtering to the server.
|
|
18
|
+
*/
|
|
19
|
+
onSearch?: (query: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* `rows` is the final list and the dialog filters nothing locally. Required for server search:
|
|
22
|
+
* fuzzy matches, synonyms, code-to-description and server ranking do not survive a local
|
|
23
|
+
* "contains" pass over the fields that happen to be in the row.
|
|
24
|
+
*
|
|
25
|
+
* Named to match `ComboBox`, deliberately. The same idea under two names is worse than either
|
|
26
|
+
* name — the ERP's supplier, customer, product and purchase-order pickers all need this, and
|
|
27
|
+
* they already know the ComboBox spelling.
|
|
28
|
+
*/
|
|
29
|
+
isFilteredExternally?: boolean;
|
|
30
|
+
/** Keeps the table's skeleton up instead of showing "no records" while a request is in flight. */
|
|
31
|
+
isLoading?: boolean;
|
|
32
|
+
/** Called when the table is scrolled near its end, for paginated results. */
|
|
33
|
+
onLoadMore?: () => void;
|
|
13
34
|
/** Receives the picked row. */
|
|
14
35
|
onSelect?: (row: T) => void;
|
|
15
36
|
onClose?: () => void;
|
|
@@ -17,5 +38,5 @@ export interface ValueHelpDialogProps<T extends {
|
|
|
17
38
|
/** The ERP value help: search a master-data list and pick one record back into a field. */
|
|
18
39
|
export declare function ValueHelpDialog<T extends {
|
|
19
40
|
id: string | number;
|
|
20
|
-
}>({ isOpen, title, columns, rows, searchPlaceholder, emptyLabel, onSelect, onClose }: ValueHelpDialogProps<T>): React.JSX.Element;
|
|
41
|
+
}>({ isOpen, title, columns, rows, searchPlaceholder, emptyLabel, onSearch, isFilteredExternally, isLoading, onLoadMore, onSelect, onClose }: ValueHelpDialogProps<T>): React.JSX.Element;
|
|
21
42
|
//# sourceMappingURL=ValueHelpDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValueHelpDialog.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/ValueHelpDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,GAAG;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sDAAsD;IACtD,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"ValueHelpDialog.d.ts","sourceRoot":"","sources":["../../../src/components/patterns/ValueHelpDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,GAAG;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sDAAsD;IACtD,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kGAAkG;IAClG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAChF,OAAY,EAAE,IAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,oBAAoB,EACtF,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,qBAkCpE"}
|
package/dist/components.css
CHANGED
|
@@ -6,6 +6,20 @@
|
|
|
6
6
|
/* ---- focus ---------------------------------------------------------- */
|
|
7
7
|
.pire [data-focus-visible],.pire[data-focus-visible],.pire-focusable[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
|
|
8
8
|
|
|
9
|
+
/* ---- shared utilities ------------------------------------------------
|
|
10
|
+
Classes referenced from component code, and keyframes referenced from the rules below. They
|
|
11
|
+
live here rather than in tokens/base.css because base.css is element resets a consumer
|
|
12
|
+
migrating off Tailwind has to skip, and a skipped reset must not take part of the class
|
|
13
|
+
contract with it. `styles.css.test.ts` enforces that. */
|
|
14
|
+
/* Announced but not drawn. Clip rather than display:none or visibility:hidden, both of which
|
|
15
|
+
remove the node from the accessibility tree along with the pixels. */
|
|
16
|
+
.pire-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
|
|
17
|
+
.pire-numeric{font:var(--type-numeric);letter-spacing:var(--ls-numeric);font-variant-numeric:tabular-nums}
|
|
18
|
+
.pire-eyebrow{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
|
|
19
|
+
@keyframes pire-toast-in{from{opacity:0;transform:translate(var(--pire-toast-tx,-50%),8px)}to{opacity:1}}
|
|
20
|
+
@keyframes pire-dialog-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
|
|
21
|
+
@keyframes pire-fade-in{from{opacity:0}to{opacity:1}}
|
|
22
|
+
|
|
9
23
|
/* ---- Button --------------------------------------------------------- */
|
|
10
24
|
.pire-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--control-h-md);padding:0 var(--control-pad-x);font:var(--type-body-strong);letter-spacing:var(--ls-body);border-radius:var(--radius-1);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition-control);appearance:none}
|
|
11
25
|
.pire-btn[data-size="sm"]{height:var(--control-h-sm)}
|
|
@@ -181,6 +195,13 @@
|
|
|
181
195
|
.pire-shellbar-title{font:var(--type-body-strong)}
|
|
182
196
|
.pire-shellbar-spacer{flex:1}
|
|
183
197
|
.pire-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--blue-60);color:var(--text-inverse);font:var(--type-label)}
|
|
198
|
+
/* The avatar as a real button, once ShellBar is given a userMenu. Resets the UA button styling the
|
|
199
|
+
span never carried, and adds what a span cannot: a pointer, interaction states, and a focus ring
|
|
200
|
+
that reads against the dark shell instead of against the page. */
|
|
201
|
+
.pire-avatar-trigger{border:0;padding:0;cursor:pointer;transition:var(--transition-control)}
|
|
202
|
+
.pire-avatar-trigger[data-hovered]{background:var(--blue-50)}
|
|
203
|
+
.pire-avatar-trigger[data-pressed]{background:var(--blue-70)}
|
|
204
|
+
.pire-avatar-trigger[data-focus-visible]{outline:var(--focus-w) solid var(--text-inverse);outline-offset:2px}
|
|
184
205
|
.pire-sidenav{display:flex;flex-direction:column;width:var(--sidenav-w);flex:0 0 auto;background:var(--surface-nav);border-right:1px solid var(--border-subtle);overflow:auto}
|
|
185
206
|
.pire-sidenav[data-collapsed="true"]{width:var(--sidenav-w-collapsed)}
|
|
186
207
|
.pire-sidenav-group{padding:var(--sp-3) 0}
|
|
@@ -379,6 +400,12 @@
|
|
|
379
400
|
.pire-linklist-item[data-hovered]{background:var(--surface-hover)}
|
|
380
401
|
.pire-linklist-key{font:var(--type-code)}
|
|
381
402
|
.pire-linklist-text{flex:1;min-width:0;font:var(--type-caption);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
403
|
+
/* emphasis="text": the name is what gets scanned and the code qualifies it — a supplier or
|
|
404
|
+
customer list. Only the treatment moves; the slots keep their meanings, and the component
|
|
405
|
+
reorders the markup so the reading order matches. The name takes over the truncation, because
|
|
406
|
+
whichever slot is primary is the one that should absorb a narrow row. */
|
|
407
|
+
.pire-linklist[data-emphasis="text"] .pire-linklist-text{flex:1;font:var(--type-body);color:var(--text-primary)}
|
|
408
|
+
.pire-linklist[data-emphasis="text"] .pire-linklist-key{flex:0 0 auto;font:var(--type-caption);color:var(--text-secondary)}
|
|
382
409
|
|
|
383
410
|
/* ---- PageHeader / SectionHeader ---------------------------------------- */
|
|
384
411
|
.pire-pageheader{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
|
|
@@ -484,7 +511,9 @@
|
|
|
484
511
|
.pire-menu-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
485
512
|
.pire-menu-item-desc{font:var(--type-caption);color:var(--text-secondary)}
|
|
486
513
|
.pire-menu-item[data-disabled] .pire-menu-item-desc{color:var(--text-disabled)}
|
|
487
|
-
|
|
514
|
+
/* A row of Kbd caps rather than a run of mono text, so a shortcut is drawn the same way
|
|
515
|
+
everywhere — including beside the command palette's key hints, in the same panel. */
|
|
516
|
+
.pire-menu-item-shortcut{flex:0 0 auto;align-self:center;display:flex;align-items:center;gap:2px}
|
|
488
517
|
.pire-menu-section-title{display:block;padding:var(--sp-1) var(--sp-3);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
|
|
489
518
|
.pire-menu-separator{border:0;border-top:var(--border-w-hairline) solid var(--border-subtle);margin:var(--sp-1) 0}
|
|
490
519
|
|
|
@@ -645,8 +674,73 @@
|
|
|
645
674
|
.pire-chart-table th,.pire-chart-table td{padding:var(--sp-1) var(--sp-2);border-block-end:1px solid var(--border-subtle);text-align:left;color:var(--text-primary)}
|
|
646
675
|
.pire-chart-table td{font-variant-numeric:tabular-nums}
|
|
647
676
|
|
|
677
|
+
/* ---- ValueHelpField ------------------------------------------------------ */
|
|
678
|
+
/* The triggers sit inside .pire-control, flush with its trailing edge. `stretch` makes them the
|
|
679
|
+
control's full height whatever the size, and the negative margins cancel the control's own
|
|
680
|
+
padding and gap so there is no seam between the input and the first button. */
|
|
681
|
+
.pire-valuehelp-actions{display:flex;align-items:stretch;align-self:stretch;margin-inline-start:calc(var(--sp-2) * -1);margin-inline-end:calc(var(--control-pad-x) * -1)}
|
|
682
|
+
.pire-valuehelp-actions .pire-iconbtn{height:auto;border-radius:0;border-inline-start:1px solid var(--border-field)}
|
|
683
|
+
/* Only the last button rounds, so the group follows the control's own corner instead of cutting it. */
|
|
684
|
+
.pire-valuehelp-actions .pire-iconbtn:last-child{border-start-end-radius:var(--radius-1);border-end-end-radius:var(--radius-1)}
|
|
685
|
+
/* `.pire-control :focus-visible` clears inner rings so the whole control shows one. That is right
|
|
686
|
+
with a single input, but here two buttons share the control and the outer ring cannot say which
|
|
687
|
+
is focused — so each gets its own, drawn inside its own box. */
|
|
688
|
+
.pire-valuehelp-actions .pire-iconbtn[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:calc(var(--focus-w) * -1)}
|
|
689
|
+
|
|
690
|
+
/* ---- Icon --------------------------------------------------------------- */
|
|
691
|
+
/* Development-only marker for a name that resolved to no glyph. Rendered by Icon in dev builds
|
|
692
|
+
only, so it never reaches a user; it exists so a typo is visible on the page rather than only in
|
|
693
|
+
a console warning. Sized from the host span, so the box a typo leaves stays the icon's size. */
|
|
694
|
+
.pire-icon-missing{display:block;width:100%;height:100%;box-sizing:border-box;border:1px dashed var(--status-negative-fg);border-radius:2px}
|
|
695
|
+
|
|
696
|
+
/* ---- Kbd ---------------------------------------------------------------- */
|
|
697
|
+
/* min-width equals the height, so a single character is a square cap and a word like "esc" grows
|
|
698
|
+
sideways from it rather than every cap being sized for the longest one. */
|
|
699
|
+
.pire-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--sp-1);border:1px solid var(--border-default);border-radius:var(--radius-1);background:var(--surface-card);font:var(--type-code);color:var(--text-secondary);white-space:nowrap}
|
|
700
|
+
.pire-kbd[data-size="sm"]{min-width:16px;height:16px;font-size:11px}
|
|
701
|
+
/* Lives here rather than in the Menu section so it follows the base rule it refines. A disabled
|
|
702
|
+
row must fade its caps too, or the shortcut is the one part of the row still looking live on a
|
|
703
|
+
command the user cannot run. */
|
|
704
|
+
.pire-menu-item[data-disabled] .pire-kbd{color:var(--text-disabled);border-color:var(--border-subtle)}
|
|
705
|
+
|
|
706
|
+
/* ---- CommandPalette ----------------------------------------------------- */
|
|
707
|
+
/* Anchored near the top rather than centred: the list grows downwards as it fills, and a centred
|
|
708
|
+
palette would shift its own input under the caret while the user is still typing. */
|
|
709
|
+
.pire-cp-overlay{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-6);padding-block-start:12vh;background:var(--surface-overlay);animation:pire-fade-in var(--dur-fast) var(--ease-entrance)}
|
|
710
|
+
.pire-cp-modal{display:flex;flex-direction:column;width:min(640px,100%);max-height:min(60vh,480px);background:var(--surface-raised);border-radius:var(--radius-2);box-shadow:var(--shadow-3);animation:pire-dialog-in var(--dur-base) var(--ease-entrance);outline:none;overflow:hidden}
|
|
711
|
+
.pire-cp-dialog{display:flex;flex-direction:column;min-height:0;outline:none}
|
|
712
|
+
.pire-cp-search{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);border-block-end:1px solid var(--border-subtle);flex:0 0 auto}
|
|
713
|
+
.pire-cp-search-icon{flex:0 0 auto;color:var(--text-tertiary)}
|
|
714
|
+
/* Borderless by design: the modal edge is the field's boundary, and a second border inside it
|
|
715
|
+
would read as a control within a control. */
|
|
716
|
+
.pire-cp-input{flex:1;min-width:0;height:var(--control-h-lg);border:0;background:transparent;font:var(--type-h4);color:var(--text-primary)}
|
|
717
|
+
/* No ring here, deliberately overriding base.css's global input outline. The palette takes the
|
|
718
|
+
caret on open, and the input is the only focusable thing in it — the list is navigated by
|
|
719
|
+
virtual focus, which never moves real focus off the input. So focus cannot be anywhere else
|
|
720
|
+
while this is on screen, the caret is the indicator, and a ring around a full-width borderless
|
|
721
|
+
field reads as a stray box rather than as focus. This reasoning does not transfer: on any field
|
|
722
|
+
sitting among other controls, the ring is what says which one is live. */
|
|
723
|
+
.pire-cp-input:focus-visible{outline:none}
|
|
724
|
+
.pire-cp-input::placeholder{font:var(--type-body);color:var(--text-tertiary)}
|
|
725
|
+
/* React Aria's SearchField renders type="search", which Chrome decorates with its own clear
|
|
726
|
+
affordance. It cannot be styled, does not exist in Firefox, and ignores every token here, so a
|
|
727
|
+
design system is better off without it. Escape closes the palette. */
|
|
728
|
+
.pire-cp-input::-webkit-search-cancel-button{display:none}
|
|
729
|
+
.pire-cp-list{flex:1;min-height:0;overflow:auto;padding:var(--sp-1) 0;outline:none;display:flex;flex-direction:column}
|
|
730
|
+
/* Explicitly a column: the section is a flex child of .pire-cp-list, and leaving it as a block
|
|
731
|
+
makes its rows depend on the default layout of whatever React Aria renders for a section. */
|
|
732
|
+
.pire-cp-section{display:flex;flex-direction:column}
|
|
733
|
+
.pire-cp-section-title{display:block;padding:var(--sp-1) var(--sp-4);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
|
|
734
|
+
/* The rows are Menu's, so they inherit its focus, tone and disabled treatment; only the gutter
|
|
735
|
+
widens to match the palette's larger input. */
|
|
736
|
+
.pire-cp-list .pire-menu-item{padding-inline:var(--sp-4)}
|
|
737
|
+
.pire-cp-status{padding:var(--sp-4);text-align:center;font:var(--type-body);color:var(--text-secondary)}
|
|
738
|
+
.pire-cp-foot{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-4);border-block-start:1px solid var(--border-subtle);background:var(--surface-sunken)}
|
|
739
|
+
.pire-cp-hint{display:flex;align-items:center;gap:var(--sp-1);font:var(--type-caption);color:var(--text-secondary)}
|
|
740
|
+
.pire-cp-loading{padding:var(--sp-1) var(--sp-4);font:var(--type-caption);color:var(--text-secondary);border-block-end:1px solid var(--border-subtle)}
|
|
741
|
+
|
|
648
742
|
/* ---- Reduced motion --------------------------------------------------- */
|
|
649
|
-
@media (prefers-reduced-motion: reduce){.pire-modal,.pire-toast,.pire-popover,.pire-tooltip,.pire-sidepanel{animation:none}
|
|
743
|
+
@media (prefers-reduced-motion: reduce){.pire-modal,.pire-toast,.pire-popover,.pire-tooltip,.pire-sidepanel,.pire-cp-overlay,.pire-cp-modal{animation:none}
|
|
650
744
|
/* The skeleton also drops its background sweep, not just the animation: an infinite shimmer is
|
|
651
745
|
exactly the "large, repeated motion" the preference is asking us to stop, and the placeholder
|
|
652
746
|
still reads from its shape and surface contrast alone. */
|
package/dist/i18n/messages.d.cts
CHANGED
|
@@ -32,6 +32,9 @@ export interface PireMessages {
|
|
|
32
32
|
/** Landmark name of the toast live region. */
|
|
33
33
|
toastRegionLabel: string;
|
|
34
34
|
/** Accessible name of the button that opens a ComboBox's list. */
|
|
35
|
+
/** Shown inside the popover when a Select has no options at all. A Select whose list is empty
|
|
36
|
+
* used not to open, so the field read as broken; this is the text that explains it instead. */
|
|
37
|
+
selectEmpty: string;
|
|
35
38
|
comboBoxShowSuggestions: string;
|
|
36
39
|
/** Row shown in the popover while a server search is in flight. */
|
|
37
40
|
comboBoxLoading: string;
|
|
@@ -45,6 +48,8 @@ export interface PireMessages {
|
|
|
45
48
|
numberFieldIncrease: string;
|
|
46
49
|
numberFieldDecrease: string;
|
|
47
50
|
/** Accessible name of the button that clears a ValueHelpField. */
|
|
51
|
+
/** Placeholder in the closed value-help field when nothing is picked. */
|
|
52
|
+
valueHelpFieldPlaceholder: string;
|
|
48
53
|
valueHelpFieldClear: string;
|
|
49
54
|
/** Opens the value-help dialog. `{label}` is replaced with the field's own label. */
|
|
50
55
|
valueHelpFieldOpenNamed: string;
|
|
@@ -52,6 +57,12 @@ export interface PireMessages {
|
|
|
52
57
|
valueHelpFieldOpen: string;
|
|
53
58
|
/** Accessible name of ValueHelpDialog's search field. */
|
|
54
59
|
valueHelpDialogSearch: string;
|
|
60
|
+
/** Default dialog heading when the field does not supply one. */
|
|
61
|
+
valueHelpDialogTitle: string;
|
|
62
|
+
/** Placeholder in the value-help search box. */
|
|
63
|
+
valueHelpDialogSearchPlaceholder: string;
|
|
64
|
+
/** Shown when the search returns nothing. */
|
|
65
|
+
valueHelpDialogEmpty: string;
|
|
55
66
|
/** Visible text of ValueHelpDialog's cancel button. */
|
|
56
67
|
valueHelpDialogCancel: string;
|
|
57
68
|
/** Pagination's landmark name and its controls. */
|
|
@@ -73,6 +84,24 @@ export interface PireMessages {
|
|
|
73
84
|
fileUploadUploading: string;
|
|
74
85
|
/** Instruction inside the drop surface. */
|
|
75
86
|
fileDropZonePrompt: string;
|
|
87
|
+
/** Accessible name of the ShellBar avatar once it opens a menu. `{user}` is the person's name. */
|
|
88
|
+
shellBarUserMenu: string;
|
|
89
|
+
/** Names the command palette dialog. */
|
|
90
|
+
commandPaletteLabel: string;
|
|
91
|
+
/** Accessible name of the palette's search input. */
|
|
92
|
+
commandPaletteSearchLabel: string;
|
|
93
|
+
/** Placeholder in the palette's input. */
|
|
94
|
+
commandPalettePlaceholder: string;
|
|
95
|
+
/** Shown when nothing matches what was typed. */
|
|
96
|
+
commandPaletteEmpty: string;
|
|
97
|
+
/** Shown while a server-backed search is in flight. */
|
|
98
|
+
commandPaletteLoading: string;
|
|
99
|
+
/** Footer hint beside the arrow-key glyphs. */
|
|
100
|
+
commandPaletteHintNavigate: string;
|
|
101
|
+
/** Footer hint beside the Enter glyph. */
|
|
102
|
+
commandPaletteHintSelect: string;
|
|
103
|
+
/** Footer hint beside the Esc glyph. */
|
|
104
|
+
commandPaletteHintClose: string;
|
|
76
105
|
/** Heading of the category column in a chart's data table. */
|
|
77
106
|
chartCategoryHeader: string;
|
|
78
107
|
/** Cell text where a chart series has no reading for a category. Never "0" — a gap is not a zero. */
|
package/dist/i18n/messages.d.ts
CHANGED
|
@@ -32,6 +32,9 @@ export interface PireMessages {
|
|
|
32
32
|
/** Landmark name of the toast live region. */
|
|
33
33
|
toastRegionLabel: string;
|
|
34
34
|
/** Accessible name of the button that opens a ComboBox's list. */
|
|
35
|
+
/** Shown inside the popover when a Select has no options at all. A Select whose list is empty
|
|
36
|
+
* used not to open, so the field read as broken; this is the text that explains it instead. */
|
|
37
|
+
selectEmpty: string;
|
|
35
38
|
comboBoxShowSuggestions: string;
|
|
36
39
|
/** Row shown in the popover while a server search is in flight. */
|
|
37
40
|
comboBoxLoading: string;
|
|
@@ -45,6 +48,8 @@ export interface PireMessages {
|
|
|
45
48
|
numberFieldIncrease: string;
|
|
46
49
|
numberFieldDecrease: string;
|
|
47
50
|
/** Accessible name of the button that clears a ValueHelpField. */
|
|
51
|
+
/** Placeholder in the closed value-help field when nothing is picked. */
|
|
52
|
+
valueHelpFieldPlaceholder: string;
|
|
48
53
|
valueHelpFieldClear: string;
|
|
49
54
|
/** Opens the value-help dialog. `{label}` is replaced with the field's own label. */
|
|
50
55
|
valueHelpFieldOpenNamed: string;
|
|
@@ -52,6 +57,12 @@ export interface PireMessages {
|
|
|
52
57
|
valueHelpFieldOpen: string;
|
|
53
58
|
/** Accessible name of ValueHelpDialog's search field. */
|
|
54
59
|
valueHelpDialogSearch: string;
|
|
60
|
+
/** Default dialog heading when the field does not supply one. */
|
|
61
|
+
valueHelpDialogTitle: string;
|
|
62
|
+
/** Placeholder in the value-help search box. */
|
|
63
|
+
valueHelpDialogSearchPlaceholder: string;
|
|
64
|
+
/** Shown when the search returns nothing. */
|
|
65
|
+
valueHelpDialogEmpty: string;
|
|
55
66
|
/** Visible text of ValueHelpDialog's cancel button. */
|
|
56
67
|
valueHelpDialogCancel: string;
|
|
57
68
|
/** Pagination's landmark name and its controls. */
|
|
@@ -73,6 +84,24 @@ export interface PireMessages {
|
|
|
73
84
|
fileUploadUploading: string;
|
|
74
85
|
/** Instruction inside the drop surface. */
|
|
75
86
|
fileDropZonePrompt: string;
|
|
87
|
+
/** Accessible name of the ShellBar avatar once it opens a menu. `{user}` is the person's name. */
|
|
88
|
+
shellBarUserMenu: string;
|
|
89
|
+
/** Names the command palette dialog. */
|
|
90
|
+
commandPaletteLabel: string;
|
|
91
|
+
/** Accessible name of the palette's search input. */
|
|
92
|
+
commandPaletteSearchLabel: string;
|
|
93
|
+
/** Placeholder in the palette's input. */
|
|
94
|
+
commandPalettePlaceholder: string;
|
|
95
|
+
/** Shown when nothing matches what was typed. */
|
|
96
|
+
commandPaletteEmpty: string;
|
|
97
|
+
/** Shown while a server-backed search is in flight. */
|
|
98
|
+
commandPaletteLoading: string;
|
|
99
|
+
/** Footer hint beside the arrow-key glyphs. */
|
|
100
|
+
commandPaletteHintNavigate: string;
|
|
101
|
+
/** Footer hint beside the Enter glyph. */
|
|
102
|
+
commandPaletteHintSelect: string;
|
|
103
|
+
/** Footer hint beside the Esc glyph. */
|
|
104
|
+
commandPaletteHintClose: string;
|
|
76
105
|
/** Heading of the category column in a chart's data table. */
|
|
77
106
|
chartCategoryHeader: string;
|
|
78
107
|
/** Cell text where a chart series has no reading for a category. Never "0" — a gap is not a zero. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAE1B,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IAEzB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC;IAEvB,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IAEzB,kEAAkE;IAClE,uBAAuB,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IAExB,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,qBAAqB,EAAE,MAAM,CAAC;IAE9B,oDAAoD;IACpD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAE5B,kEAAkE;IAClE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qFAAqF;IACrF,uBAAuB,EAAE,MAAM,CAAC;IAChC,uEAAuE;IACvE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,qBAAqB,EAAE,MAAM,CAAC;IAE9B,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAE9B,0FAA0F;IAC1F,YAAY,EAAE,MAAM,CAAC;IAErB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAE3B,8DAA8D;IAC9D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qGAAqG;IACrG,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"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"}
|