use-wc 1.0.0-pre.87 → 1.0.0-pre.89
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/design-system.css +17 -16
- package/package.json +1 -1
package/dist/design-system.css
CHANGED
|
@@ -765,10 +765,11 @@
|
|
|
765
765
|
in the cascade. Rather than enumerating every control family (which would leave out any custom
|
|
766
766
|
input component this file doesn't know about) and reading each one's own radius token by name
|
|
767
767
|
(which would leave out any component using a token this file has never heard of), the rule
|
|
768
|
-
below matches every direct child indiscriminately and
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
768
|
+
below matches every direct child indiscriminately and only overrides the corners that touch a
|
|
769
|
+
neighbor. The outer corners are never set here, so they keep the exact radius button.css,
|
|
770
|
+
input.css, select.css, or a future custom element's own theme file already gave them, with no
|
|
771
|
+
name to keep in sync here. (Squaring every corner and restoring the outer ones with
|
|
772
|
+
`revert-layer` on the logical longhands left them square in Firefox.)
|
|
772
773
|
|
|
773
774
|
This still needs `[type="file"]` and `.appearance-native` excluded: a file input gets a
|
|
774
775
|
completely different treatment in input.css, and `.appearance-native` is this system's opt-out
|
|
@@ -779,9 +780,7 @@
|
|
|
779
780
|
plain, ordinary-specificity selector: cascade layers are compared before specificity, so a
|
|
780
781
|
later layer wins over an earlier one regardless of how each rule's own selector weighs in — no
|
|
781
782
|
need to fight any control's own selector list for a specificity win the way an override nested
|
|
782
|
-
inside one of them would.
|
|
783
|
-
back to the *previous* layer's value, so it only reaches button.css/input.css's own radius
|
|
784
|
-
because this file's layer comes after theirs.
|
|
783
|
+
inside one of them would.
|
|
785
784
|
|
|
786
785
|
The container only sets `display` and `isolation` — `isolation: isolate` scopes the hover
|
|
787
786
|
`z-index` below to just this set's own children, so a lifted border can't bleed into stacking
|
|
@@ -799,18 +798,20 @@
|
|
|
799
798
|
|
|
800
799
|
use-control-set > *:not([type="file"], .appearance-native) {
|
|
801
800
|
margin-inline-start: var(--usewc-layout-control-set-gap);
|
|
802
|
-
border-radius: var(--usewc-effect-control-set-border-radius-sequential);
|
|
803
801
|
|
|
804
|
-
/*
|
|
805
|
-
&:first-child {
|
|
806
|
-
|
|
807
|
-
border-
|
|
808
|
-
|
|
802
|
+
/* A lone child matches neither rule below, so it keeps its full radius. */
|
|
803
|
+
&:not(:first-child) {
|
|
804
|
+
border-start-start-radius: var(--usewc-effect-control-set-border-radius-sequential);
|
|
805
|
+
border-end-start-radius: var(--usewc-effect-control-set-border-radius-sequential);
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
&:not(:last-child) {
|
|
809
|
+
border-start-end-radius: var(--usewc-effect-control-set-border-radius-sequential);
|
|
810
|
+
border-end-end-radius: var(--usewc-effect-control-set-border-radius-sequential);
|
|
809
811
|
}
|
|
810
812
|
|
|
811
|
-
&:
|
|
812
|
-
|
|
813
|
-
border-end-end-radius: revert-layer;
|
|
813
|
+
&:first-child {
|
|
814
|
+
margin-inline-start: 0;
|
|
814
815
|
}
|
|
815
816
|
|
|
816
817
|
&:where(:hover, :focus-visible, :focus-within) {
|