@usefillo/react 0.5.4 → 0.6.0

package/dist/styles.css

@@ -5,6 +5,9 @@
  * style from scratch.
  */
 
+/* Specificity contract: every rule stays at single-class specificity —
+ * qualifiers are wrapped in :where() so one consumer class always wins.
+ * A lint test (packages/react/test) fails the build on regressions. */
 /* Cascade layers: these defaults live in the `components` layer so that, in
  * apps using Tailwind (or any utility CSS in the `utilities` layer), YOUR
  * classes always win over ours — className="bg-red-50" on an option just
@@ -100,7 +103,7 @@
     border-color: var(--fillo-primary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
-  .fillo-field--error .fillo-input { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-input { border-color: var(--fillo-error); }
   .fillo-textarea { resize: vertical; min-height: 6rem; }
 
   /* Phone field: country picker + national input */
@@ -123,7 +126,7 @@
   .fillo-phone-dial { font-variant-numeric: tabular-nums; color: var(--fillo-muted); }
   .fillo-phone-caret { font-size: 0.65em; color: var(--fillo-muted); }
   .fillo-phone-input { flex: 1 1 auto; min-width: 0; }
-  .fillo-field--error .fillo-phone-flag { border-color: var(--fillo-error); }
+  :where(.fillo-field--error) .fillo-phone-flag { border-color: var(--fillo-error); }
   .fillo-phone-popover {
     position: absolute; z-index: 30; top: calc(100% + 0.3rem); left: 0;
     width: min(18rem, calc(100vw - 1rem));
@@ -179,7 +182,7 @@
     transform: translateY(-65%) rotate(45deg);
     transition: color 120ms ease;
   }
-  .fillo-select-wrap:focus-within .fillo-select-icon { color: var(--fillo-primary); }
+  :where(.fillo-select-wrap:focus-within) .fillo-select-icon { color: var(--fillo-primary); }
 
   /* ---------- Choices ---------- */
   .fillo-options { display: flex; flex-direction: column; gap: 0.5rem; }
@@ -212,7 +215,7 @@
     margin: 0;
   }
   .fillo-option-input:focus-visible { outline: none; }
-  .fillo-option--has-icon .fillo-option-input {
+  :where(.fillo-option--has-icon) .fillo-option-input {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -227,7 +230,7 @@
     color: var(--fillo-muted);
     transition: color 120ms ease;
   }
-  .fillo-option--selected .fillo-option-icon { color: var(--fillo-primary); }
+  :where(.fillo-option--selected) .fillo-option-icon { color: var(--fillo-primary); }
   .fillo-option-label { font-size: 0.95rem; }
 
   .fillo-option-main {
@@ -241,7 +244,7 @@
     flex-direction: column;
     gap: 0.55rem;
   }
-  .fillo-option--with-other .fillo-option-label {
+  :where(.fillo-option--with-other) .fillo-option-label {
     font-weight: 550;
   }
 
@@ -291,20 +294,20 @@
     box-shadow: 0 1px 2px color-mix(in srgb, var(--fillo-text) 18%, transparent);
     transition: transform 160ms ease, background 160ms ease;
   }
-  .fillo-toggle-input:checked + .fillo-toggle-track {
+  :where(.fillo-toggle-input:checked) + .fillo-toggle-track {
     background: var(--fillo-primary);
     box-shadow: inset 0 0 0 1px var(--fillo-primary);
   }
-  .fillo-toggle-input:checked + .fillo-toggle-track .fillo-toggle-thumb {
+  :where(.fillo-toggle-input:checked) + :where(.fillo-toggle-track) .fillo-toggle-thumb {
     transform: translateX(1rem);
     background: var(--fillo-primary-contrast);
   }
-  .fillo-toggle-input:focus-visible + .fillo-toggle-track {
+  :where(.fillo-toggle-input:focus-visible) + .fillo-toggle-track {
     box-shadow:
       inset 0 0 0 1px var(--fillo-primary),
       0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
   }
-  .fillo-toggle:has(.fillo-toggle-input:checked) {
+  .fillo-toggle:where(:has(.fillo-toggle-input:checked)) {
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 5%, var(--fillo-control-bg));
   }
@@ -421,7 +424,7 @@
   /* ---------- Matrix ---------- */
   .fillo-matrix-wrap { overflow-x: auto; }
   .fillo-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
-  .fillo-matrix th, .fillo-matrix td {
+  :where(.fillo-matrix) th, :where(.fillo-matrix) td {
     padding: 0.55rem 0.7rem;
     text-align: center;
     border-bottom: 1px solid var(--fillo-border);
@@ -580,6 +583,7 @@
     overflow: hidden;
   }
   .fillo-progress-fill {
+    width: var(--fillo-progress-value, 0%);
     height: 100%;
     background: var(--fillo-primary);
     border-radius: inherit;