@antadesign/anta 0.3.25 → 0.3.26
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/anta_helpers.js +3 -3
- package/dist/box-types.d.ts +161 -0
- package/dist/box-types.js +0 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +25 -25
- package/dist/components/Box.d.ts +37 -0
- package/dist/components/Box.js +63 -0
- package/dist/elements/a-avatar.css +1 -1
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-banner.js +4 -4
- package/dist/elements/a-box.css +1 -0
- package/dist/elements/a-box.d.ts +41 -0
- package/dist/elements/a-box.js +576 -0
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-calendar.js +2 -2
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.js +2 -2
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.js +3 -3
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.js +6 -6
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu-item.js +3 -3
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-menu.js +2 -2
- package/dist/elements/a-radio-group.js +3 -3
- package/dist/elements/a-radio.css +1 -1
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-switch.js +2 -2
- package/dist/elements/a-tabpanel.js +2 -2
- package/dist/elements/a-tabs.css +1 -1
- package/dist/elements/a-tabs.js +6 -6
- package/dist/elements/a-tag.css +1 -1
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-toast.js +2 -2
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +4 -3
- package/dist/elements/a-tooltip.js +9 -5
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +3 -0
- package/dist/general_types.d.ts +36 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/jsx-runtime.d.ts +2 -1
- package/docs/changelog.md +23 -3
- package/docs/components/avatar.md +368 -0
- package/docs/components/box.md +282 -0
- package/docs/index.md +4 -3
- package/package.json +1 -1
package/dist/anta_helpers.js
CHANGED
|
@@ -119,7 +119,7 @@ class SelectableChildElement extends HTMLElementBase {
|
|
|
119
119
|
if (name === "selected") this.applyState(this.hasAttribute("selected"));
|
|
120
120
|
}
|
|
121
121
|
get selected() {
|
|
122
|
-
return this.internals?.states
|
|
122
|
+
return this.internals?.states?.has("selected") ?? false;
|
|
123
123
|
}
|
|
124
124
|
/**
|
|
125
125
|
* Live selection, held off the DOM as `:state(selected)` (mirrored to `ariaProp`).
|
|
@@ -147,8 +147,8 @@ class SelectableChildElement extends HTMLElementBase {
|
|
|
147
147
|
}
|
|
148
148
|
applyState(on) {
|
|
149
149
|
if (!this.internals) return;
|
|
150
|
-
if (on) this.internals
|
|
151
|
-
else this.internals
|
|
150
|
+
if (on) this.internals?.states?.add("selected");
|
|
151
|
+
else this.internals?.states?.delete("selected");
|
|
152
152
|
this.internals[this.ariaProp] = on ? "true" : "false";
|
|
153
153
|
}
|
|
154
154
|
}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/** Display modes supplied by `Box`. The element is a real light-DOM CSS box,
|
|
2
|
+
* so every other layout property remains ordinary CSS on the host. */
|
|
3
|
+
export type BoxDisplay = 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
|
|
4
|
+
/** Color mode resolved from the closest `.light` or `.dark` ancestor. */
|
|
5
|
+
export type BoxMode = 'light' | 'dark';
|
|
6
|
+
/** Operating-system family. Anta deliberately does not expose a user-agent string. */
|
|
7
|
+
export type BoxOS = 'android' | 'ios' | 'linux' | 'macos' | 'windows' | 'unknown';
|
|
8
|
+
/** Browser family. */
|
|
9
|
+
export type BoxBrowser = 'chrome' | 'edge' | 'firefox' | 'opera' | 'safari' | 'unknown';
|
|
10
|
+
/** Primary pointing-device capability reported by the browser. */
|
|
11
|
+
export type BoxPointer = 'fine' | 'coarse' | 'none';
|
|
12
|
+
/** Current state that affects a box's rendering or interaction decisions. */
|
|
13
|
+
/**
|
|
14
|
+
* Distance from the box's border edge to its content edge, in CSS pixels.
|
|
15
|
+
*
|
|
16
|
+
* Not derivable from `BoxMeasurement`: `width` / `height` are the border box and
|
|
17
|
+
* `clientWidth` / `clientHeight` are the padding box, so neither the padding nor
|
|
18
|
+
* the border thickness can be recovered from them. Add a padding and its border
|
|
19
|
+
* to place content relative to the border box.
|
|
20
|
+
*/
|
|
21
|
+
export interface BoxInset {
|
|
22
|
+
paddingTop: number;
|
|
23
|
+
paddingRight: number;
|
|
24
|
+
paddingBottom: number;
|
|
25
|
+
paddingLeft: number;
|
|
26
|
+
borderTop: number;
|
|
27
|
+
borderRight: number;
|
|
28
|
+
borderBottom: number;
|
|
29
|
+
borderLeft: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The box's resolved text style, shaped to configure a canvas 2D context.
|
|
33
|
+
*
|
|
34
|
+
* Assign `shorthand` to `ctx.font` **first**: Chromium and Firefox reset
|
|
35
|
+
* `fontStretch`, `fontVariantCaps`, `fontKerning` and `textRendering` when
|
|
36
|
+
* `font` is assigned, so setting those before it loses them.
|
|
37
|
+
*/
|
|
38
|
+
export interface BoxFont {
|
|
39
|
+
/** CSS `font` shorthand, assembled here because every engine returns an empty
|
|
40
|
+
* string for the computed shorthand. `stretch` and `variantCaps` are left out
|
|
41
|
+
* of it deliberately: a percentage `font-stretch` makes every engine reject
|
|
42
|
+
* the whole string and fall back to `10px sans-serif`. Apply those through
|
|
43
|
+
* `ctx.fontStretch` / `ctx.fontVariantCaps` after setting `ctx.font`. */
|
|
44
|
+
shorthand: string;
|
|
45
|
+
/** Resolved family list, quoted as the engine reports it. */
|
|
46
|
+
family: string;
|
|
47
|
+
/** Font size in CSS pixels. */
|
|
48
|
+
size: number;
|
|
49
|
+
/** Numeric weight, 1-1000. */
|
|
50
|
+
weight: number;
|
|
51
|
+
/** `normal`, `italic`, or an `oblique <angle>`. */
|
|
52
|
+
style: string;
|
|
53
|
+
/** Computed `font-stretch`, a percentage such as `88%`. Canvas: `ctx.fontStretch`. */
|
|
54
|
+
stretch: string;
|
|
55
|
+
/** Line height in CSS pixels, or `null` when it computes to `normal`. Canvas
|
|
56
|
+
* ignores line height in `ctx.font`; this is for laying text out yourself. */
|
|
57
|
+
lineHeight: number | null;
|
|
58
|
+
/** A length, never `normal` - `normal` is reported as `0px`, which is what
|
|
59
|
+
* `ctx.letterSpacing` accepts. */
|
|
60
|
+
letterSpacing: string;
|
|
61
|
+
/** Same normalization as `letterSpacing`. Canvas: `ctx.wordSpacing`. */
|
|
62
|
+
wordSpacing: string;
|
|
63
|
+
/** Resolved text color. Canvas: `ctx.fillStyle`. */
|
|
64
|
+
color: string;
|
|
65
|
+
/** Canvas 2D consumes neither of these. They are here for text you measure or
|
|
66
|
+
* draw some other way. */
|
|
67
|
+
featureSettings: string;
|
|
68
|
+
variationSettings: string;
|
|
69
|
+
/** Canvas: `ctx.fontKerning`. */
|
|
70
|
+
kerning: string;
|
|
71
|
+
/** Canvas: `ctx.fontVariantCaps`. */
|
|
72
|
+
variantCaps: string;
|
|
73
|
+
/** Canvas: `ctx.textRendering`, which WebKit does not implement. */
|
|
74
|
+
textRendering: string;
|
|
75
|
+
/** Canvas: `ctx.direction`. */
|
|
76
|
+
direction: string;
|
|
77
|
+
}
|
|
78
|
+
export interface BoxContext {
|
|
79
|
+
/** Closest scoped Anta mode. A local `.light` can override a dark document. */
|
|
80
|
+
mode: BoxMode;
|
|
81
|
+
/** Mode on `<html>`, independent of an enclosing local scope. */
|
|
82
|
+
globalMode: BoxMode;
|
|
83
|
+
/** Browser / operating-system color preference, independent of Anta classes. */
|
|
84
|
+
systemAppearance: BoxMode;
|
|
85
|
+
/** Whether focus is on the box or any of its descendants, read from the
|
|
86
|
+
* native `:focus-within`. For CSS, use that pseudo-class directly; this field
|
|
87
|
+
* is for logic that cannot query the DOM. */
|
|
88
|
+
focusWithin: boolean;
|
|
89
|
+
/** Operating-system family. */
|
|
90
|
+
os: BoxOS;
|
|
91
|
+
/** Operating-system major version, or `0` when the browser withholds it.
|
|
92
|
+
* Browsers freeze this: every engine reports macOS as `10.15.7` and Windows 11
|
|
93
|
+
* as `10.0`, so only Android and iOS carry a real number. Treat it as a hint,
|
|
94
|
+
* never as a gate. */
|
|
95
|
+
osVersion: number;
|
|
96
|
+
/** Browser family. */
|
|
97
|
+
browser: BoxBrowser;
|
|
98
|
+
/** Browser major version, or `0` when unknown. Minor and patch digits are
|
|
99
|
+
* frozen by every engine, so only the major number is reported. */
|
|
100
|
+
browserVersion: number;
|
|
101
|
+
/** Whether the browser reports a mobile device. */
|
|
102
|
+
mobile: boolean;
|
|
103
|
+
/** Most precise available primary pointer. */
|
|
104
|
+
pointer: BoxPointer;
|
|
105
|
+
/** Whether ordinary hover interaction is available. */
|
|
106
|
+
hover: boolean;
|
|
107
|
+
/** Whether the reader asks for reduced motion. */
|
|
108
|
+
reducedMotion: boolean;
|
|
109
|
+
/** `window.devicePixelRatio`: CSS pixels per device pixel. `1` on a standard
|
|
110
|
+
* display, `2` on most Retina screens, and a fraction under OS or browser
|
|
111
|
+
* zoom. Live — it re-reports on zoom and when the window moves to a monitor
|
|
112
|
+
* with a different density. */
|
|
113
|
+
devicePixelRatio: number;
|
|
114
|
+
/** Resolved text style, ready to hand to a canvas 2D context. */
|
|
115
|
+
font: BoxFont;
|
|
116
|
+
/** Padding and border widths, for placing content inside the border box. */
|
|
117
|
+
inset: BoxInset;
|
|
118
|
+
/** Resolved `background-color`. Needed when the box's content is drawn
|
|
119
|
+
* somewhere else — an offscreen canvas, a worker, an export — where the box's
|
|
120
|
+
* own background is not behind it. */
|
|
121
|
+
backgroundColor: string;
|
|
122
|
+
}
|
|
123
|
+
/** Current box dimensions and its content-overflow state. */
|
|
124
|
+
export interface BoxMeasurement {
|
|
125
|
+
/** Border-box width and height in CSS pixels. */
|
|
126
|
+
width: number;
|
|
127
|
+
height: number;
|
|
128
|
+
/** Padding-box dimensions, matching the browser's `clientWidth` / `clientHeight`. */
|
|
129
|
+
clientWidth: number;
|
|
130
|
+
clientHeight: number;
|
|
131
|
+
/** Full scrollable-content dimensions, matching `scrollWidth` / `scrollHeight`. */
|
|
132
|
+
scrollWidth: number;
|
|
133
|
+
scrollHeight: number;
|
|
134
|
+
/** Content exceeds the padding box on this axis, regardless of CSS overflow. */
|
|
135
|
+
overflowX: boolean;
|
|
136
|
+
overflowY: boolean;
|
|
137
|
+
/** The exceeded content is visually clipped on this axis. */
|
|
138
|
+
clippedX: boolean;
|
|
139
|
+
clippedY: boolean;
|
|
140
|
+
/** The exceeded content can be scrolled by the reader on this axis. */
|
|
141
|
+
scrollableX: boolean;
|
|
142
|
+
scrollableY: boolean;
|
|
143
|
+
/** Current scroll offset, matching `scrollLeft` / `scrollTop`. */
|
|
144
|
+
scrollLeft: number;
|
|
145
|
+
scrollTop: number;
|
|
146
|
+
/** Clipped content sits past this specific edge, in logical writing-mode
|
|
147
|
+
* terms. A clipped box that has not been scrolled hides content past its end
|
|
148
|
+
* edge only; scroll it to the end and the hidden content moves to the start.
|
|
149
|
+
* These drive the `fade` mask. */
|
|
150
|
+
hiddenStartX: boolean;
|
|
151
|
+
hiddenEndX: boolean;
|
|
152
|
+
hiddenStartY: boolean;
|
|
153
|
+
hiddenEndY: boolean;
|
|
154
|
+
}
|
|
155
|
+
/** Every Box event includes just the changed fields and a complete current snapshot. */
|
|
156
|
+
export interface BoxChange<T> {
|
|
157
|
+
changed: Partial<T>;
|
|
158
|
+
current: T;
|
|
159
|
+
}
|
|
160
|
+
export type BoxContextChange = BoxChange<BoxContext>;
|
|
161
|
+
export type BoxMeasurementChange = BoxChange<BoxMeasurement>;
|
|
File without changes
|