@verbb/formie-browser 1.0.4 → 1.0.5

package/dist/css/formie-theme.css

@@ -13,7 +13,9 @@
 @import "./theme/fields/_nested.css";
 @import "./theme/fields/_input.css";
 @import "./theme/fields/_select.css";
+@import "./theme/fields/_combobox.css";
 @import "./theme/fields/_check-radio.css";
 @import "./theme/fields/_address.css";
+@import "./theme/fields/_address-state.css";
 @import "./theme/integrations/_payment-modal.css";
 @import "./theme/utilities/_accessibility.css";

package/dist/css/theme/fields/_address-state.css

@@ -0,0 +1,94 @@
+@layer formie-theme {
+    @keyframes formie-address-autofill-start {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    [data-formie-field-type="address"] input[data-formie-address-state-autofill-anchor] {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    [data-formie-field-type="address"] input:-webkit-autofill,
+    [data-formie-field-type="address"] select:-webkit-autofill {
+        animation-name: formie-address-autofill-start;
+        animation-duration: 0.01s;
+    }
+
+    [data-formie-address-state-fetching] [data-formie-field]:has([data-formie-address-country-input]) [data-formie-field-control] {
+        position: relative;
+    }
+
+    [data-formie-address-state-fetching] [data-formie-address-country-input],
+    [data-formie-address-state-fetching] [data-formie-field]:has([data-formie-address-country-input]) .ts-wrapper.formie-combobox .ts-control {
+        opacity: 0.7;
+    }
+
+    [data-formie-address-state-fetching] [data-formie-field]:has([data-formie-address-country-input]) [data-formie-field-control]::after {
+        position: absolute;
+        top: 50%;
+        right: var(--formie-space-2);
+        z-index: 2;
+        display: block;
+        width: var(--formie-loading-size);
+        height: var(--formie-loading-size);
+        border: var(--formie-loading-border-width) solid var(--formie-loading-color, var(--formie-color-primary));
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-radius: var(--formie-radius-full);
+        transform: translateY(-50%);
+        animation: loading 0.5s infinite linear;
+        pointer-events: none;
+        content: "";
+    }
+
+    [data-formie-field][data-formie-address-state-skeleton-active] {
+        visibility: visible;
+    }
+
+    [data-formie-field][data-formie-address-state-skeleton-active] [data-formie-field-control] > :not([data-formie-address-state-skeleton]) {
+        display: none;
+    }
+
+    .formie-address-state-skeleton {
+        display: block;
+        width: 100%;
+    }
+
+    .formie-address-state-skeleton-input {
+        width: 100%;
+        min-height: var(--formie-control-height);
+        border-radius: var(--formie-radius-sm);
+        background-color: var(--formie-color-border);
+        background-image: linear-gradient(
+            90deg,
+            transparent 0%,
+            color-mix(in srgb, var(--formie-color-surface) 65%, transparent) 50%,
+            transparent 100%
+        );
+        background-size: 200% 100%;
+        animation: formie-address-state-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+
+    @keyframes formie-address-state-skeleton-shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+
+        100% {
+            background-position: -200% 0;
+        }
+    }
+}

package/dist/css/theme/fields/_combobox.css

@@ -0,0 +1,246 @@
+/*
+ * Combobox styles are intentionally unlayered. The combobox module injects this
+ * sheet at runtime, and unlayered third-party CSS would otherwise win over
+ * @layer formie-theme rules.
+ *
+ * Tom Select default CSS is not imported; these rules provide the minimum
+ * structure plus Formie theme styling for searchable dropdowns.
+ */
+
+.formie-field .ts-wrapper.formie-combobox {
+    width: 100%;
+    display: block;
+    position: relative;
+    min-height: 0;
+    border: 0;
+    padding: 0;
+    background: none;
+    box-shadow: none;
+}
+
+.formie-field select[data-formie-combobox-input].tomselected,
+.formie-field select[data-formie-combobox-input].ts-hidden-accessible {
+    display: none !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    width: 100%;
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    background-color: var(--formie-color-surface);
+    background-image: none;
+    min-height: var(--formie-control-height);
+    padding: calc(var(--formie-control-padding-y) - 1px) var(--formie-control-padding-x);
+    box-shadow: none;
+    font-size: var(--formie-control-font-size);
+    line-height: var(--formie-line-height-tight);
+    color: var(--formie-color-text);
+    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    gap: var(--formie-space-1);
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control {
+    --ts-pr-min: var(--formie-control-padding-x);
+    --ts-pr-caret: calc(var(--formie-select-indicator-size) + var(--formie-space-1));
+    padding-right: calc(var(--formie-control-padding-x) + var(--formie-select-indicator-size) + var(--formie-space-2)) !important;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-position: right var(--formie-space-2) center;
+    background-repeat: no-repeat;
+    background-size: var(--formie-select-indicator-size) var(--formie-select-indicator-size);
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control::after {
+    display: none;
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control {
+    padding: calc(var(--formie-control-padding-y) - 2px) var(--formie-control-padding-x) calc(var(--formie-control-padding-y) - 4px);
+    --ts-pr-min: var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi.has-items .ts-control {
+    padding-left: var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input {
+    flex: 1 1 auto;
+    min-width: 7rem;
+    max-width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    border: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+    color: var(--formie-color-text);
+    font: inherit;
+    font-size: var(--formie-control-font-size);
+    line-height: inherit;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input:focus {
+    outline: none !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.has-items .ts-control > input {
+    margin: 0 var(--formie-space-1) !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.input-hidden .ts-control > input {
+    opacity: 0;
+    position: absolute;
+    left: -10000px;
+}
+
+.formie-field .ts-wrapper.formie-combobox.single .ts-control,
+.formie-field .ts-wrapper.formie-combobox.single .ts-control > input {
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox.single.input-active .ts-control,
+.formie-field .ts-wrapper.formie-combobox.single.input-active .ts-control > input {
+    cursor: text;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control .items-placeholder {
+    color: var(--formie-color-text-muted);
+    font: inherit;
+    font-size: var(--formie-control-font-size);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-control > input::placeholder {
+    color: var(--formie-color-text-muted);
+}
+
+.formie-field .ts-wrapper.formie-combobox.focus .ts-control,
+.formie-field .ts-wrapper.formie-combobox .ts-control:focus-within,
+.formie-field .ts-wrapper.formie-combobox.dropdown-active .ts-control {
+    outline: 0;
+    border-color: var(--formie-color-focus-ring);
+    box-shadow: var(--formie-shadow-focus);
+    border-radius: var(--formie-radius-sm);
+}
+
+.formie-field-has-error .ts-wrapper.formie-combobox .ts-control {
+    border-color: var(--formie-color-danger);
+}
+
+.formie-field-has-error .ts-wrapper.formie-combobox.focus .ts-control,
+.formie-field-has-error .ts-wrapper.formie-combobox .ts-control:focus-within,
+.formie-field-has-error .ts-wrapper.formie-combobox.dropdown-active .ts-control {
+    border-color: var(--formie-color-danger);
+    box-shadow: var(--formie-shadow-danger-focus);
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control > .item,
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control [data-value] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--formie-space-1);
+    margin: 0 var(--formie-space-1) var(--formie-space-1) 0;
+    padding: 0 var(--formie-space-2);
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.06));
+    background-image: none;
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    box-shadow: none;
+    color: var(--formie-color-text);
+    text-shadow: none;
+    line-height: calc(var(--formie-control-height) - var(--formie-space-3));
+}
+
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control > .item.active,
+.formie-field .ts-wrapper.formie-combobox.multi .ts-control [data-value].active {
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.06));
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--formie-space-1);
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button:not(.rtl) .item {
+    padding-right: var(--formie-space-2) !important;
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    text-decoration: none;
+    color: var(--formie-color-text-muted);
+    font-size: 1.125em;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove:hover,
+.formie-field .ts-wrapper.formie-combobox.plugin-remove_button .item .remove:focus {
+    background: none;
+    text-decoration: none;
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    z-index: var(--formie-z-popover, 30);
+    border: var(--formie-border-width) solid var(--formie-color-border);
+    border-radius: var(--formie-radius-sm);
+    background: var(--formie-color-surface);
+    box-shadow: var(--formie-shadow-popover, 0 8px 24px rgba(15, 23, 42, 0.12));
+    margin-top: var(--formie-space-1);
+    box-sizing: border-box;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown-content {
+    overflow: hidden auto;
+    max-height: 200px;
+    scroll-behavior: smooth;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .optgroup-header,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .no-results {
+    color: var(--formie-color-text);
+    padding: var(--formie-space-2) var(--formie-control-padding-x);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown [data-selectable] {
+    cursor: pointer;
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option.active,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .option:hover,
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .active {
+    background: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.05));
+    color: var(--formie-color-text);
+}
+
+.formie-field .ts-wrapper.formie-combobox .ts-dropdown .highlight {
+    background: rgba(59, 130, 246, 0.18);
+    border-radius: 2px;
+}
+
+.formie-field .ts-wrapper.formie-combobox.disabled .ts-control {
+    opacity: 0.6;
+    background-color: var(--formie-color-surface-muted, rgba(15, 23, 42, 0.04));
+    cursor: not-allowed;
+}

package/dist/css/theme/fields/_select.css

@@ -34,4 +34,17 @@
         border-color: var(--formie-color-danger);
         box-shadow: var(--formie-shadow-danger-focus);
     }
+
+    /* Tom Select copies native select classes onto its wrapper; keep combobox chrome on .ts-control only. */
+    .formie-field .ts-wrapper.formie-combobox,
+    .formie-field .ts-wrapper.formie-combobox.formie-select,
+    .formie-field .ts-wrapper.formie-combobox.formie-dropdown-input {
+        border: 0;
+        padding: 0;
+        min-height: 0;
+        background: none;
+        background-image: none;
+        box-shadow: none;
+        appearance: none;
+    }
 }