@klodd/ds 5.4.0 → 5.4.1
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/package.json +1 -1
- package/references/02-components.md +51 -0
package/package.json
CHANGED
|
@@ -71,6 +71,57 @@ För varje entry gäller:
|
|
|
71
71
|
- **Anvand:** Native `<dialog>` (centrerad modal) eller `<dialog class="sheet">` (bottom-attached)
|
|
72
72
|
- **INTE:** Tooltip eller dropdown (egna komponenter)
|
|
73
73
|
- **Tokens:** `--surface-raised/-overlay`, `--border-subtle`, `--shadow-float`, `--z-overlay`, `--safe-bottom`
|
|
74
|
+
- **Centrering:** `dialog.dialog:modal`-regeln (5.2.5) override:ar UA-stylesheet
|
|
75
|
+
med `!important` pa position/inset/margin/transform. Doumenterat undantag fran
|
|
76
|
+
kvalitetsbar regel 7 - UA's `dialog:modal` har implicit prioritering bortom
|
|
77
|
+
standard specificity-cascading.
|
|
78
|
+
|
|
79
|
+
#### Completion-dialog (async-operation done)
|
|
80
|
+
|
|
81
|
+
Vanlig instans: visa "X ar klart" + primar-action efter att en
|
|
82
|
+
asynkron operation (AsyncProgress) slagit `done`. Anvands av Jubb's
|
|
83
|
+
bolagsanalys + brevgenerering, och planerat for Ekonom bank-synk.
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<dialog class="dialog" id="my-complete-dialog">
|
|
87
|
+
<div class="dialog__header">
|
|
88
|
+
<h2 class="heading-3">Operationen ar klar</h2>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="dialog__body">
|
|
91
|
+
<p>Beskrivande text + ev. CTA-kontext.</p>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="dialog__footer">
|
|
94
|
+
<button class="btn btn--primary" id="view-btn">Visa resultat</button>
|
|
95
|
+
</div>
|
|
96
|
+
</dialog>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
JS-monster:
|
|
100
|
+
|
|
101
|
+
```javascript
|
|
102
|
+
const dlg = document.getElementById("my-complete-dialog");
|
|
103
|
+
|
|
104
|
+
// Oppna via showModal() - native focus-trap + ESC + ::backdrop
|
|
105
|
+
dlg.showModal();
|
|
106
|
+
|
|
107
|
+
// Stang via backdrop-klick (event.target == dialog-elementet)
|
|
108
|
+
dlg.addEventListener("click", (e) => {
|
|
109
|
+
if (e.target === dlg) dlg.close();
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
// Primar action - app-specifik (oftast navigation + reload)
|
|
113
|
+
document.getElementById("view-btn").addEventListener("click", () => {
|
|
114
|
+
window.location.href = "/result#anchor";
|
|
115
|
+
window.location.reload();
|
|
116
|
+
});
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Footer-varianter:
|
|
120
|
+
- En primar knapp (Visa resultat / Bekrafta) - default
|
|
121
|
+
- Sekundar + primar (Avbryt + Bekrafta) - destruktiva eller reversibla actions
|
|
122
|
+
- `.btn--danger` som primar - actions som tar bort/forstor data
|
|
123
|
+
|
|
124
|
+
Se /design-sidan "Completion Dialog"-sektionen for visuella exempel.
|
|
74
125
|
|
|
75
126
|
### icon (`icon.css`)
|
|
76
127
|
- **Blocks:** `.icon`, `.icon-custom` (sibling - wrapper for handritade SVG som Lucide saknar)
|