@duskmoon-dev/core 1.4.0 → 1.5.0
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/components/appbar.css +186 -1
- package/dist/components/cascader.css +418 -0
- package/dist/components/checkbox.css +2 -1
- package/dist/components/index.css +4203 -2768
- package/dist/components/popover.css +329 -3
- package/dist/components/textarea.css +212 -16
- package/dist/components/tree-select.css +36 -3
- package/dist/esm/components/appbar.js +186 -1
- package/dist/esm/components/cascader.js +425 -0
- package/dist/esm/components/checkbox.js +2 -1
- package/dist/esm/components/popover.js +329 -3
- package/dist/esm/components/textarea.js +212 -16
- package/dist/esm/components/tree-select.js +36 -3
- package/dist/index.css +4397 -2907
- package/dist/themes/moonlight.css +96 -68
- package/dist/themes/sunshine.css +95 -68
- package/package.json +1 -1
|
@@ -40,12 +40,24 @@ export const css = `/**
|
|
|
40
40
|
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.tree-select-trigger:disabled
|
|
43
|
+
.tree-select-trigger:disabled,
|
|
44
|
+
.tree-select-trigger[aria-disabled="true"] {
|
|
44
45
|
cursor: not-allowed;
|
|
45
46
|
opacity: 0.5;
|
|
46
47
|
background-color: var(--color-surface-container);
|
|
47
48
|
}
|
|
48
49
|
|
|
50
|
+
/* Support for div-based trigger (when using clear button) */
|
|
51
|
+
div.tree-select-trigger {
|
|
52
|
+
user-select: none;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
div.tree-select-trigger:focus-visible {
|
|
56
|
+
outline: none;
|
|
57
|
+
border-color: var(--color-primary);
|
|
58
|
+
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 10%, transparent);
|
|
59
|
+
}
|
|
60
|
+
|
|
49
61
|
/* Value Display */
|
|
50
62
|
.tree-select-value {
|
|
51
63
|
flex: 1;
|
|
@@ -106,6 +118,11 @@ export const css = `/**
|
|
|
106
118
|
background-color: var(--color-surface-container-high);
|
|
107
119
|
}
|
|
108
120
|
|
|
121
|
+
.tree-select-clear svg {
|
|
122
|
+
width: 1rem;
|
|
123
|
+
height: 1rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
109
126
|
/* Tree Select Dropdown */
|
|
110
127
|
.tree-select-dropdown {
|
|
111
128
|
position: absolute;
|
|
@@ -128,9 +145,10 @@ export const css = `/**
|
|
|
128
145
|
display: block;
|
|
129
146
|
}
|
|
130
147
|
|
|
131
|
-
/* Popover API Support
|
|
148
|
+
/* Popover API Support */
|
|
132
149
|
.tree-select-dropdown[popover] {
|
|
133
|
-
/* Reset browser defaults
|
|
150
|
+
/* Reset browser defaults for proper positioning */
|
|
151
|
+
position: absolute;
|
|
134
152
|
inset: unset;
|
|
135
153
|
margin: 0;
|
|
136
154
|
border: 1px solid var(--color-outline-variant);
|
|
@@ -140,6 +158,21 @@ export const css = `/**
|
|
|
140
158
|
display: block;
|
|
141
159
|
}
|
|
142
160
|
|
|
161
|
+
/* CSS Anchor Positioning for modern browsers */
|
|
162
|
+
@supports (anchor-name: --tree-select) {
|
|
163
|
+
.tree-select {
|
|
164
|
+
anchor-name: --tree-select;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.tree-select-dropdown[popover] {
|
|
168
|
+
position-anchor: --tree-select;
|
|
169
|
+
top: anchor(bottom);
|
|
170
|
+
left: anchor(left);
|
|
171
|
+
right: anchor(right);
|
|
172
|
+
position-try-fallbacks: flip-block;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
143
176
|
/* Search Input in Dropdown */
|
|
144
177
|
.tree-select-search {
|
|
145
178
|
display: flex;
|