@verbb/formie-browser 1.0.5 → 1.0.7

package/dist/css/theme/_buttons.css

@@ -156,6 +156,14 @@
         --formie-button-icon-mask: var(--formie-icon-mask-arrow-right);
     }
 
+    .formie-button-icon[data-formie-icon="arrow-up"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-up);
+    }
+
+    .formie-button-icon[data-formie-icon="arrow-down"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-down);
+    }
+
     .formie-button-icon[data-formie-icon="close"] {
         --formie-button-icon-mask: var(--formie-icon-mask-close);
     }
@@ -187,6 +195,14 @@
         --formie-button-icon-mask: var(--formie-icon-mask-arrow-right);
     }
 
+    .formie-button-text-icon[data-formie-icon="arrow-up"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-up);
+    }
+
+    .formie-button-text-icon[data-formie-icon="arrow-down"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-down);
+    }
+
     .formie-button-text-icon[data-formie-icon="close"] {
         --formie-button-icon-mask: var(--formie-icon-mask-close);
     }

package/dist/css/theme/_tokens.css

@@ -168,6 +168,8 @@
         --formie-icon-mask-plus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");
         --formie-icon-mask-arrow-left: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
         --formie-icon-mask-arrow-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23000' d='M278.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
+        --formie-icon-mask-arrow-up: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E");
+        --formie-icon-mask-arrow-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
         --formie-icon-mask-close: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
 
         --formie-button-primary-background: var(--formie-color-primary);

package/dist/css/theme/fields/_signature.css

@@ -36,4 +36,23 @@
         font-size: 0;
         line-height: 0;
     }
+
+    [data-formie-field-type="signature"] .formie-signature-pad {
+        position: relative;
+    }
+
+    [data-formie-field-type="signature"] .formie-signature-message {
+        margin: 0;
+        padding: var(--formie-space-3);
+        border: var(--formie-signature-border);
+        border-radius: var(--formie-signature-border-radius);
+        background: var(--formie-signature-background);
+        color: var(--formie-color-text-muted);
+        font-size: var(--formie-font-size-sm);
+        line-height: var(--formie-line-height-base);
+    }
+
+    [data-formie-field-type="signature"].formie-signature-has-message .formie-signature-canvas {
+        display: none;
+    }
 }

package/dist/css/theme/fields/_upload-manager.css

@@ -0,0 +1,279 @@
+@layer formie-theme {
+    .formie-upload-manager {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-gap-field);
+    }
+
+    .formie-upload-manager-dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-4);
+        min-height: calc(var(--formie-control-height) * 3);
+        border: var(--formie-border-width) dashed var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface-subtle);
+        color: var(--formie-color-text);
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .formie-upload-manager-dropzone:hover,
+    .formie-upload-manager-dropzone.formie-upload-manager-dropzone-active {
+        border-color: var(--formie-color-focus-ring);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-upload-manager-dropzone:focus {
+        outline: 0;
+    }
+
+    .formie-upload-manager-dropzone:focus-visible {
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-field-has-error .formie-upload-manager-dropzone {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-prompt {
+        margin: 0;
+        font-size: var(--formie-font-size-sm);
+        color: var(--formie-color-text-muted);
+    }
+
+    .formie-upload-manager-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--formie-space-2);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .formie-upload-manager-item {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8rem) auto;
+        align-items: center;
+        gap: var(--formie-space-2);
+        padding: var(--formie-space-2) var(--formie-space-3);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+    }
+
+    .formie-upload-manager-item.is-error {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-item.is-complete .formie-upload-manager-progress {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+
+    .formie-upload-manager-filename {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--formie-font-size-sm);
+    }
+
+    .formie-upload-manager-progress {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--formie-space-1);
+        min-height: var(--formie-button-icon-button-size);
+        align-self: center;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 200ms ease, visibility 200ms ease;
+    }
+
+    .formie-upload-manager-progress-track {
+        position: relative;
+        height: 0.375rem;
+        border-radius: var(--formie-radius-full);
+        background: var(--formie-color-surface-muted);
+        overflow: hidden;
+    }
+
+    .formie-upload-manager-progress-bar {
+        height: 100%;
+        width: 0;
+        border-radius: inherit;
+        background: var(--formie-color-primary);
+        transition: width 180ms ease-out, background-color 200ms ease;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-bar {
+        width: 100% !important;
+        background: var(--formie-color-success, var(--formie-color-primary));
+    }
+
+    .formie-upload-manager-item.is-uploading:not(.is-upload-complete) .formie-upload-manager-progress-track[data-indeterminate="true"] .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-preparing .formie-upload-manager-progress-bar,
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        width: 35%;
+        animation: formie-upload-manager-progress-indeterminate 1.1s ease-in-out infinite;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-bar {
+        opacity: 0.85;
+    }
+
+    .formie-upload-manager-item.is-processing .formie-upload-manager-progress-label {
+        color: var(--formie-color-text);
+    }
+
+    @keyframes formie-upload-manager-progress-indeterminate {
+        0% {
+            transform: translateX(-120%);
+        }
+
+        100% {
+            transform: translateX(320%);
+        }
+    }
+
+    .formie-upload-manager-progress-label {
+        font-size: var(--formie-font-size-xs);
+        line-height: 1.2;
+        color: var(--formie-color-text-muted);
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    .formie-upload-manager-item.is-upload-complete .formie-upload-manager-progress-label {
+        color: var(--formie-color-success, var(--formie-color-primary));
+        font-weight: var(--formie-font-weight-medium);
+    }
+
+    .formie-upload-manager-error {
+        grid-column: 1 / -1;
+        font-size: var(--formie-font-size-xs);
+        color: var(--formie-color-danger);
+    }
+
+    .formie-upload-manager-browse-button {
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-upload-manager-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--formie-space-2);
+        align-self: center;
+        flex-shrink: 0;
+    }
+
+    .formie-upload-manager-sort-controls {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.0625rem;
+        padding: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+    }
+
+    .formie-upload-manager-sort-controls[hidden] {
+        display: none;
+    }
+
+    .formie-upload-manager-sort-button,
+    .formie-upload-manager-action-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.375rem;
+        height: 1.375rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+        color: var(--formie-color-text-muted);
+        cursor: pointer;
+        font-size: 0;
+        line-height: 0;
+        text-indent: -9999px;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
+    }
+
+    .formie-upload-manager-sort-button {
+        width: 1.375rem;
+        height: 1.375rem;
+    }
+
+    .formie-upload-manager-sort-button:hover:not(:disabled),
+    .formie-upload-manager-action-button:hover {
+        background: var(--formie-color-surface-muted);
+        color: var(--formie-color-text);
+    }
+
+    .formie-upload-manager-sort-button:focus-visible,
+    .formie-upload-manager-action-button:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 var(--formie-focus-ring-width) var(--formie-color-focus-ring);
+    }
+
+    .formie-upload-manager-sort-button:disabled {
+        opacity: 0.28;
+        cursor: not-allowed;
+    }
+
+    .formie-upload-manager-sort-button::after,
+    .formie-upload-manager-action-button::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        content: '';
+        transform: translate(-50%, -50%);
+        background-color: currentColor;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-up"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-up);
+    }
+
+    .formie-upload-manager-sort-button[data-formie-icon="arrow-down"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-arrow-down);
+    }
+
+    .formie-upload-manager-action-button[data-formie-icon="close"] {
+        --formie-upload-manager-icon-mask: var(--formie-icon-mask-close);
+    }
+
+    .formie-upload-manager-sort-button::after {
+        width: 0.75rem;
+        height: 0.75rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-action-button::after {
+        width: 0.825rem;
+        height: 0.825rem;
+        -webkit-mask-image: var(--formie-upload-manager-icon-mask);
+        mask-image: var(--formie-upload-manager-icon-mask);
+    }
+
+    .formie-upload-manager-remove-button {
+        flex-shrink: 0;
+    }
+}