@usefillo/react 0.5.3 → 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,15 +126,21 @@
   .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: 18rem; max-width: 84vw; padding: 0.4rem;
+    width: min(18rem, calc(100vw - 1rem));
+    max-width: var(--fillo-phone-popover-max-width, 84vw);
+    max-height: min(var(--fillo-phone-popover-max-height, 20rem), calc(100vh - 1rem));
+    padding: 0.4rem;
+    box-sizing: border-box; overflow: hidden;
+    transform: translateX(var(--fillo-phone-popover-offset-x, 0px));
     display: flex; flex-direction: column; gap: 0.35rem;
     background: var(--fillo-control-bg);
     border: 1px solid var(--fillo-border); border-radius: var(--fillo-radius);
     box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35);
   }
+  .fillo-phone-popover--above { top: auto; bottom: calc(100% + 0.3rem); }
   .fillo-phone-search {
     appearance: none; font: inherit; width: 100%; box-sizing: border-box;
     color: var(--fillo-text); background: var(--fillo-bg);
@@ -139,7 +148,10 @@
     border-radius: calc(var(--fillo-radius) - 3px); padding: 0.45rem 0.6rem;
   }
   .fillo-phone-search:focus-visible { outline: none; border-color: var(--fillo-primary); }
-  .fillo-phone-list { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
+  .fillo-phone-list {
+    flex: 1 1 auto; min-height: 0;
+    list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto;
+  }
   .fillo-phone-option {
     display: flex; align-items: center; gap: 0.5rem;
     padding: 0.45rem 0.5rem; border-radius: calc(var(--fillo-radius) - 3px);
@@ -170,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; }
@@ -203,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;
@@ -218,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 {
@@ -232,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;
   }
 
@@ -282,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));
   }
@@ -412,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);
@@ -571,6 +583,7 @@
     overflow: hidden;
   }
   .fillo-progress-fill {
+    width: var(--fillo-progress-value, 0%);
     height: 100%;
     background: var(--fillo-primary);
     border-radius: inherit;