@ctrl-ui/react 0.8.5 → 0.8.6
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
//#region src/knob-contracts/page-layout-knobs.d.ts
|
|
2
|
-
export declare const pageLayoutKnobs: readonly ["--cui-page-layout-article-size", "--cui-page-layout-aside-size", "--cui-page-layout-padding-inline", "--cui-page-layout-padding-block", "--cui-page-layout-column-gap", "--cui-page-layout-header-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap"];
|
|
2
|
+
export declare const pageLayoutKnobs: readonly ["--cui-page-layout-article-size", "--cui-page-layout-aside-size", "--cui-page-layout-padding-inline", "--cui-page-layout-padding-block", "--cui-page-layout-column-gap", "--cui-page-layout-header-start-gap", "--cui-page-layout-header-gap", "--cui-page-layout-header-column-gap", "--cui-page-layout-header-row-gap", "--cui-page-layout-size", "--cui-page-layout-sticky-gap"];
|
|
3
3
|
export type PageLayoutKnobStyle = Partial<Record<(typeof pageLayoutKnobs)[number], string>>;
|
|
4
4
|
//#endregion
|
|
@@ -5,6 +5,7 @@ const pageLayoutKnobs = [
|
|
|
5
5
|
"--cui-page-layout-padding-inline",
|
|
6
6
|
"--cui-page-layout-padding-block",
|
|
7
7
|
"--cui-page-layout-column-gap",
|
|
8
|
+
"--cui-page-layout-header-start-gap",
|
|
8
9
|
"--cui-page-layout-header-gap",
|
|
9
10
|
"--cui-page-layout-header-column-gap",
|
|
10
11
|
"--cui-page-layout-header-row-gap",
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--cui-page-layout-padding-inline: calc(var(--spacing) * 5);
|
|
6
6
|
--cui-page-layout-padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 24);
|
|
7
7
|
--cui-page-layout-column-gap: calc(var(--spacing) * 5);
|
|
8
|
+
--cui-page-layout-header-start-gap: calc(var(--spacing) * 10);
|
|
8
9
|
--cui-page-layout-header-gap: calc(var(--spacing) * 8);
|
|
9
10
|
--cui-page-layout-header-column-gap: calc(var(--spacing) * 4);
|
|
10
11
|
--cui-page-layout-header-row-gap: calc(var(--spacing) * 2);
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
column-gap: var(--cui-page-layout-header-column-gap);
|
|
39
40
|
row-gap: var(--cui-page-layout-header-row-gap);
|
|
40
41
|
padding-inline: var(--cui-page-layout-padding-inline);
|
|
41
|
-
padding-block
|
|
42
|
+
padding-block: var(--cui-page-layout-header-start-gap) var(--cui-page-layout-header-gap);
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
:where([data-control-family="page-layout"][data-slot="body"]) {
|
|
@@ -52,6 +53,15 @@
|
|
|
52
53
|
padding-block: var(--cui-page-layout-padding-block);
|
|
53
54
|
}
|
|
54
55
|
|
|
56
|
+
/* A flow or sticky header owns the leading space, so header-gap stays the only gap above the body.
|
|
57
|
+
A floating header is zero-height and overlays the body, so the body keeps its own lead. */
|
|
58
|
+
:where(
|
|
59
|
+
[data-control-family="page-layout"][data-slot="header"]:not([data-variant="floating"])
|
|
60
|
+
+ [data-control-family="page-layout"][data-slot="body"]
|
|
61
|
+
) {
|
|
62
|
+
padding-block-start: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
55
65
|
:where([data-control-family="page-layout"][data-slot="title"]) {
|
|
56
66
|
grid-area: title;
|
|
57
67
|
font-size: var(--text-heading-1);
|
|
@@ -96,7 +106,7 @@
|
|
|
96
106
|
z-index: 20;
|
|
97
107
|
align-items: start;
|
|
98
108
|
height: 0;
|
|
99
|
-
padding-block
|
|
109
|
+
padding-block: 0;
|
|
100
110
|
pointer-events: none;
|
|
101
111
|
}
|
|
102
112
|
|
|
@@ -173,6 +183,12 @@
|
|
|
173
183
|
initial-value: 0px;
|
|
174
184
|
}
|
|
175
185
|
|
|
186
|
+
@property --cui-page-layout-header-start-gap {
|
|
187
|
+
syntax: "<length>";
|
|
188
|
+
inherits: true;
|
|
189
|
+
initial-value: 0px;
|
|
190
|
+
}
|
|
191
|
+
|
|
176
192
|
@property --cui-page-layout-header-gap {
|
|
177
193
|
syntax: "<length>";
|
|
178
194
|
inherits: true;
|
package/dist/ui/color-picker.js
CHANGED
|
@@ -4,9 +4,9 @@ import { controlEffectsAttribute } from "../skin.js";
|
|
|
4
4
|
import { useSkin } from "../skin-provider.js";
|
|
5
5
|
import { Button } from "./button.js";
|
|
6
6
|
import { Input } from "./input.js";
|
|
7
|
+
import { useColorArea } from "../hooks/use-color-area.js";
|
|
7
8
|
import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
|
|
8
9
|
import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
|
|
9
|
-
import { useColorArea } from "../hooks/use-color-area.js";
|
|
10
10
|
import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
|
|
11
11
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
|
|
12
12
|
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
|