@praxisui/core 9.0.0-beta.85 → 9.0.0-beta.86
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/README.md +75 -1
- package/ai/component-registry.json +2 -2
- package/fesm2022/praxisui-core.mjs +283 -238
- package/package.json +1 -1
- package/types/praxisui-core.d.ts +28 -3
package/README.md
CHANGED
|
@@ -58,6 +58,80 @@ export class IconsComponent {}
|
|
|
58
58
|
|
|
59
59
|
Hosts should load the icon fonts they use. Without the classic Material Icons font, ligature names such as `clear` can render as visible text.
|
|
60
60
|
|
|
61
|
+
Use `PraxisIconButtonComponent` for icon-only actions. It keeps the native
|
|
62
|
+
`button` contract, centers the glyph, and preserves a 44px pointer target even
|
|
63
|
+
when the visible surface is compact. It accepts the same `mi:`, `mso:`, `msr:`
|
|
64
|
+
and `mss:` icon-family prefixes as `PraxisIconDirective`; unprefixed names keep
|
|
65
|
+
the legacy Material Icons behavior.
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import { Component, signal } from '@angular/core';
|
|
69
|
+
import { PraxisIconButtonComponent } from '@praxisui/core';
|
|
70
|
+
|
|
71
|
+
@Component({
|
|
72
|
+
imports: [PraxisIconButtonComponent],
|
|
73
|
+
template: `
|
|
74
|
+
<button
|
|
75
|
+
type="button"
|
|
76
|
+
[praxisIconButton]="'mic'"
|
|
77
|
+
size="compact"
|
|
78
|
+
[pressed]="isListening()"
|
|
79
|
+
aria-label="Ditar pedido"
|
|
80
|
+
></button>
|
|
81
|
+
`,
|
|
82
|
+
})
|
|
83
|
+
export class ComposerActionsComponent {
|
|
84
|
+
readonly isListening = signal(false);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Public inputs:
|
|
89
|
+
|
|
90
|
+
| Input | Values | Default | Purpose |
|
|
91
|
+
| --- | --- | --- | --- |
|
|
92
|
+
| `praxisIconButton` | icon name or canonical family-prefixed icon | required | Glyph materialized inside the button |
|
|
93
|
+
| `size` | `dense`, `compact`, `standard` | `standard` | Governed target, visible surface and glyph density |
|
|
94
|
+
| `appearance` | `plain`, `filled` | `plain` | Transparent or emphasized action surface |
|
|
95
|
+
| `presentation` | `icon`, `projected` | `icon` | Uses the named glyph or host-projected governed presentation |
|
|
96
|
+
| `pressed` | `true`, `false`, `null` | `null` | Persistent toggle/listening state and native `aria-pressed`; `null` omits the attribute |
|
|
97
|
+
| `busy` | boolean | `false` | Replaces the glyph with the canonical progress indicator and publishes `aria-busy` |
|
|
98
|
+
|
|
99
|
+
The component defaults the native host to `type="button"`; an explicit host
|
|
100
|
+
attribute still documents intent and prevents accidental form submission in
|
|
101
|
+
templates that are later refactored. Every icon-only action must have an
|
|
102
|
+
accessible name, normally `aria-label`, supplied by the host or its i18n layer.
|
|
103
|
+
The consumer remains responsible for `[disabled]` while busy when repeated
|
|
104
|
+
activation must be blocked.
|
|
105
|
+
Use `presentation="projected"` when an icon-only action is presented by a
|
|
106
|
+
governed component such as `PraxisRichContent`; the canonical button continues
|
|
107
|
+
to own interaction geometry while the projected renderer owns content semantics.
|
|
108
|
+
|
|
109
|
+
The component owns target, surface and glyph alignment. Consumers may set
|
|
110
|
+
`--praxis-icon-button-filled-background` and
|
|
111
|
+
`--praxis-icon-button-filled-foreground` to materialize a governed semantic
|
|
112
|
+
tone, but should not override the target, surface or icon size variables.
|
|
113
|
+
Hosts must load the font family selected by the icon prefix and provide the
|
|
114
|
+
Praxis Material 3 semantic color tokens.
|
|
115
|
+
|
|
116
|
+
Governed density matrix:
|
|
117
|
+
|
|
118
|
+
| Size | Pointer target | Visible surface | Glyph | Intended use |
|
|
119
|
+
| --- | ---: | ---: | ---: | --- |
|
|
120
|
+
| `standard` | 44px | 40px | 22px | Primary and standalone icon actions |
|
|
121
|
+
| `compact` | 44px | 36px | 20px | Composers, headers and frequent application actions |
|
|
122
|
+
| `dense` | 36px | 32px | 18px | Secondary actions inside constrained editorial toolbars |
|
|
123
|
+
|
|
124
|
+
On coarse pointers, `dense` automatically restores a 44px pointer target while
|
|
125
|
+
keeping its 32px visible surface. Do not use `dense` for a primary action, an
|
|
126
|
+
isolated destructive action, pagination, or a control that must remain easy to
|
|
127
|
+
acquire under operational pressure. Density changes presentation only; it must
|
|
128
|
+
not encode authorization, importance or business state.
|
|
129
|
+
|
|
130
|
+
Migration from `mat-icon-button` should remove local MDC/Material internal
|
|
131
|
+
variables and local width, height, padding or icon-margin fixes. Keep
|
|
132
|
+
domain-specific state, labels and action authorization in the owning component;
|
|
133
|
+
the Core primitive owns presentation and native interaction only.
|
|
134
|
+
|
|
61
135
|
### Semantic theme surfaces
|
|
62
136
|
|
|
63
137
|
`PraxisThemeSurfaceTokens` is the public semantic bridge for runtime surfaces. It deliberately avoids Material or MDC selectors, so a host can theme Praxis overlays, borders and focus states without patching component internals.
|
|
@@ -225,7 +299,7 @@ Core exports:
|
|
|
225
299
|
- models for table config, fields, forms, rich content, editorial content, widget pages, global actions, resource discovery, domain knowledge/rules, analytics, query context, loading, and collection export
|
|
226
300
|
- helpers for schema ids, ETag fetch, field mapping, config merge, validation, IDs, inline filter controls, global action refs, and form hooks
|
|
227
301
|
- dynamic widget/page runtime components and metadata
|
|
228
|
-
- UI helpers such as icon picker, empty state card, resource quick connect, schema viewer, and `
|
|
302
|
+
- UI helpers such as icon picker, empty state card, resource quick connect, schema viewer, `PraxisIconDirective`, and `PraxisIconButtonComponent`
|
|
229
303
|
|
|
230
304
|
See the package `public-api.ts` for the full export list.
|
|
231
305
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
|
-
"generatedAt": "2026-07-
|
|
3
|
+
"generatedAt": "2026-07-22T03:01:56.888Z",
|
|
4
4
|
"packageName": "@praxisui/core",
|
|
5
|
-
"packageVersion": "9.0.0-beta.
|
|
5
|
+
"packageVersion": "9.0.0-beta.86",
|
|
6
6
|
"sourceRegistry": "praxis-component-registry-ingestion",
|
|
7
7
|
"sourceRegistryVersion": "1.0.0",
|
|
8
8
|
"componentCount": 4,
|