@kerfjs/ui 5.0.0-beta.13 → 5.0.0-beta.14
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/ai/component-catalog.json +2 -2
- package/ai/public-api-signatures-v1.md +1 -1
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/styles/foundation.css +7 -0
- package/dist/styles/select.css +3 -1
- package/dist/styles/state-banner.css +1 -1
- package/docs/design/templates/state-banner/info.svg +1 -1
- package/docs/design/templates/state-banner.svg +1 -1
- package/package.json +1 -1
|
@@ -1764,7 +1764,7 @@
|
|
|
1764
1764
|
],
|
|
1765
1765
|
"publicTokens": [
|
|
1766
1766
|
"--kui-color-brand-fill-normal",
|
|
1767
|
-
"--kui-color-brand-on-
|
|
1767
|
+
"--kui-color-brand-on-fill",
|
|
1768
1768
|
"--kui-color-neutral-border-quiet",
|
|
1769
1769
|
"--kui-color-neutral-on-quiet",
|
|
1770
1770
|
"--kui-disclosure-icon-scale",
|
|
@@ -1912,7 +1912,7 @@
|
|
|
1912
1912
|
"publicTokens": [
|
|
1913
1913
|
"--kui-color-brand-border-quiet",
|
|
1914
1914
|
"--kui-color-brand-fill-quiet",
|
|
1915
|
-
"--kui-color-brand-on-
|
|
1915
|
+
"--kui-color-brand-on-fill",
|
|
1916
1916
|
"--kui-color-danger-border-quiet",
|
|
1917
1917
|
"--kui-color-danger-fill-quiet",
|
|
1918
1918
|
"--kui-color-danger-on-quiet",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Public API signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.14` and `kerfjs@5.0.0-beta.14`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
|
|
4
4
|
|
|
5
5
|
## `@kerfjs/ui/disclosure-arrow`
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Web Awesome JSX signatures for the UI authoring corpus
|
|
2
2
|
|
|
3
|
-
Generated from the emitted `@kerfjs/ui@5.0.0-beta.
|
|
3
|
+
Generated from the emitted `@kerfjs/ui@5.0.0-beta.14` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
6
|
import { KerfCustomElement } from 'kerfjs/jsx-runtime';
|
|
@@ -178,6 +178,13 @@
|
|
|
178
178
|
var(--kui-color-brand-on-quiet)
|
|
179
179
|
);
|
|
180
180
|
--kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
|
|
181
|
+
/* Brand accent text placed directly ON a brand fill (quiet or normal), such as
|
|
182
|
+
the info StateBanner and Select's current option. Darker than brand-on-quiet
|
|
183
|
+
so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
|
|
184
|
+
3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
|
|
185
|
+
(#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
|
|
186
|
+
value matches brand-on-quiet, which already passes over the dark fills. */
|
|
187
|
+
--kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
|
|
181
188
|
|
|
182
189
|
--kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
|
|
183
190
|
--kui-color-success-fill-quiet: var(
|
package/dist/styles/select.css
CHANGED
|
@@ -32,7 +32,9 @@
|
|
|
32
32
|
}
|
|
33
33
|
.kui-select wa-option {
|
|
34
34
|
--wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
|
|
35
|
-
|
|
35
|
+
/* Current option text sits on the activated brand fill; use the darker on-fill
|
|
36
|
+
accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
|
|
37
|
+
--current-text-color: var(--kui-color-brand-on-fill);
|
|
36
38
|
}
|
|
37
39
|
.kui-select wa-option::part(start) {
|
|
38
40
|
align-self: center;
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
);
|
|
53
53
|
--_kui-state-banner-foreground: var(
|
|
54
54
|
--kui-state-banner-foreground,
|
|
55
|
-
var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-
|
|
55
|
+
var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
|
|
56
56
|
);
|
|
57
57
|
}
|
|
58
58
|
.kui-state-banner[data-tone="success"] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 35.4)" color="rgb(
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 35.4)" color="rgb(26, 93, 207)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g opacity="0.78" clip-path="url(#cp2)" style="isolation:isolate"><g clip-path="url(#ct3)"><text x="61" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, "-apple-system", sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<svg xmlns="http://www.w3.org/2000/svg" width="592" height="632" viewBox="0 0 592 632">
|
|
2
2
|
<rect width="592" height="632" fill="#ffffff"/>
|
|
3
3
|
<text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Info</text>
|
|
4
|
-
<svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v0-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v0-ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 35.4)" color="rgb(
|
|
4
|
+
<svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v0-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v0-ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 35.4)" color="rgb(26, 93, 207)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g opacity="0.78" clip-path="url(#v0-cp2)" style="isolation:isolate"><g clip-path="url(#v0-ct3)"><text x="61" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, "-apple-system", sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></svg>
|
|
5
5
|
<text x="16" y="184" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Success</text>
|
|
6
6
|
<svg x="16" y="192" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v1-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v1-ct1"><rect x="61" y="29" width="434" height="15"/></clipPath><clipPath id="v1-cp2"><rect x="61" y="44.8" width="434" height="13"/></clipPath><clipPath id="v1-ct3"><rect x="61" y="44.8" width="434" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(227,247,232)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(154,227,172)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 35.4)" color="rgb(0, 137, 50)"><svg data-lucide="circle-check" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, "-apple-system", sans-serif" font-size="12" font-weight="700" fill="rgb(0,137,50)">Deployment complete</text><g opacity="0.78" clip-path="url(#v1-cp2)" style="isolation:isolate"><g clip-path="url(#v1-ct3)"><text x="61" y="55.8" font-family="system-ui, "-apple-system", sans-serif" font-size="11" fill="rgb(0,137,50)">production.example.com is serving the new build.</text></g></g></svg>
|
|
7
7
|
<text x="16" y="338" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Warning</text>
|