@verbb/formie-browser 1.0.0

package/src/css/theme/fields/_check-radio.css

@@ -0,0 +1,108 @@
+@layer formie-theme {
+
+    .formie-checkboxes-options,
+    .formie-radio-options,
+    .formie-agree-options {
+        gap: var(--formie-check-margin-bottom) var(--formie-check-margin-right);
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-checkbox-option,
+    .formie-radio-option {
+        position: relative;
+        margin: 0;
+        font-size: var(--formie-check-font-size);
+        line-height: var(--formie-check-line-height);
+    }
+
+    .formie-checkbox-input,
+    .formie-radio-input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .formie-checkbox-option-label,
+    .formie-radio-option-label {
+        position: relative;
+        display: inline-block;
+        padding-left: var(--formie-check-label-padding-left);
+        font-size: var(--formie-check-font-size);
+        font-weight: var(--formie-font-weight-normal);
+        line-height: var(--formie-check-size);
+        user-select: none;
+        transition: var(--formie-check-label-transition);
+    }
+
+    .formie-checkbox-option-label::before,
+    .formie-radio-option-label::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: var(--formie-check-size);
+        height: var(--formie-check-size);
+        content: "";
+        cursor: pointer;
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        background-color: var(--formie-check-label-background-color);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 50% 50%;
+        transition: var(--formie-check-label-transition);
+    }
+
+    .formie-checkbox-option-label::before {
+        border-radius: var(--formie-check-check-border-radius);
+    }
+
+    .formie-radio-option-label::before {
+        border-radius: var(--formie-check-radio-border-radius);
+    }
+
+    .formie-checkbox-input:focus-visible+.formie-checkbox-option-label::before,
+    .formie-radio-input:focus-visible+.formie-radio-option-label::before {
+        border-color: var(--formie-color-focus-ring);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-checkbox-input:checked+.formie-checkbox-option-label::before,
+    .formie-radio-input:checked+.formie-radio-option-label::before {
+        background-color: var(--formie-color-primary);
+        border-color: var(--formie-color-primary);
+    }
+
+    .formie-checkbox-input:checked+.formie-checkbox-option-label::before {
+        background-image: var(--formie-check-check-background-image);
+        background-size: var(--formie-check-check-background-size);
+    }
+
+    .formie-radio-input:checked+.formie-radio-option-label::before {
+        background-image: var(--formie-check-radio-background-image);
+        background-size: var(--formie-check-radio-background-size);
+    }
+
+    .formie-checkbox-input:disabled+.formie-checkbox-option-label,
+    .formie-radio-input:disabled+.formie-radio-option-label {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    .formie-checkbox-input:disabled+.formie-checkbox-option-label::before,
+    .formie-radio-input:disabled+.formie-radio-option-label::before {
+        background-color: var(--formie-check-background-color);
+        cursor: not-allowed;
+    }
+
+    .formie-field-has-error .formie-checkbox-input:focus-visible+.formie-checkbox-option-label::before,
+    .formie-field-has-error .formie-radio-input:focus-visible+.formie-radio-option-label::before {
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+}

package/src/css/theme/fields/_file.css

@@ -0,0 +1,58 @@
+@layer formie-theme {
+    .formie-file-input {
+        padding: var(--formie-space-1);
+        line-height: var(--formie-line-height-base);
+        cursor: pointer;
+    }
+
+    .formie-file-input::file-selector-button,
+    .formie-file-input::-webkit-file-upload-button {
+        appearance: none;
+        -webkit-appearance: none;
+        margin-inline-end: var(--formie-space-2);
+        padding: calc(var(--formie-control-padding-y) - 1px) var(--formie-space-2);
+        min-height: calc(var(--formie-control-height) - (var(--formie-space-1) * 2));
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: calc(var(--formie-radius-sm) - 1px);
+        background: var(--formie-color-surface-subtle);
+        color: var(--formie-color-heading);
+        font-weight: var(--formie-font-weight-normal);
+        font-size: var(--formie-font-size-xs);
+        line-height: 1.1;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .formie-file-input:hover::file-selector-button,
+    .formie-file-input:hover::-webkit-file-upload-button {
+        border-color: color-mix(in srgb, var(--formie-color-border) 70%, var(--formie-color-heading) 30%);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-file-input:focus {
+        outline: 0;
+    }
+
+    .formie-file-input:focus-visible::file-selector-button,
+    .formie-file-input:focus-visible::-webkit-file-upload-button {
+        border-color: var(--formie-color-focus-ring);
+    }
+
+    .formie-field-has-error .formie-file-input::file-selector-button,
+    .formie-field-has-error .formie-file-input::-webkit-file-upload-button {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-file-summary {
+        padding: var(--formie-file-summary-padding);
+        gap: var(--formie-gap-file-summary);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+    }
+
+    .formie-file-summary-container {
+        margin: 0;
+        padding-left: var(--formie-list-indent);
+    }
+}

package/src/css/theme/fields/_group.css

@@ -0,0 +1,13 @@
+@layer formie-theme {
+    .formie-subfield-rows {
+        display: grid;
+        gap: var(--formie-gap-subfield-rows);
+    }
+
+    .formie-subfield-row {
+        display: grid;
+        gap: var(--formie-gap-subfield-row);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--formie-subfield-row-column-min-width)), 1fr));
+        align-items: start;
+    }
+}

package/src/css/theme/fields/_input.css

@@ -0,0 +1,48 @@
+@layer formie-theme {
+
+    .formie-input,
+    .formie-textarea {
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    }
+
+    .formie-input-error,
+    .formie-field-has-error .formie-input,
+    .formie-field-has-error .formie-select,
+    .formie-field-has-error .formie-textarea {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-input:focus,
+    .formie-textarea:focus {
+        outline: 0;
+    }
+
+    .formie-input:focus-visible,
+    .formie-textarea:focus-visible {
+        outline: 0;
+        border-color: var(--formie-color-focus-ring);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-input-error:focus-visible,
+    .formie-field-has-error .formie-input:focus-visible,
+    .formie-field-has-error .formie-textarea:focus-visible {
+        border-color: var(--formie-color-danger);
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+
+    /* Fix Safari date/time input inner control height quirks. */
+    input::-webkit-datetime-edit {
+        display: block;
+        padding: 0;
+        margin-bottom: -2px;
+    }
+
+    /* Fix mobile Safari date/time values appearing vertically shrunk. */
+    input::-webkit-date-and-time-value {
+        height: 1.5em;
+    }
+}

package/src/css/theme/fields/_nested.css

@@ -0,0 +1,19 @@
+@layer formie-theme {
+    .formie-group-field-layout>.formie-field-content {
+        border: var(--formie-group-border);
+        border-radius: var(--formie-group-border-radius);
+        padding: var(--formie-group-padding);
+    }
+
+    .formie-nested-field-rows {
+        display: grid;
+        gap: var(--formie-gap-nested-field-rows);
+    }
+
+    .formie-nested-field-row {
+        display: grid;
+        gap: var(--formie-gap-nested-field-row);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--formie-nested-field-row-column-min-width)), 1fr));
+        align-items: start;
+    }
+}

package/src/css/theme/fields/_repeater.css

@@ -0,0 +1,69 @@
+@layer formie-theme {
+    .formie-repeater-container {
+        display: grid;
+        gap: var(--formie-space-4);
+    }
+
+    .formie-repeater-item-wrapper {
+        position: relative;
+        display: grid;
+        gap: var(--formie-space-4);
+        padding: var(--formie-space-4);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-md);
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    }
+
+    .formie-repeater-item-wrapper:focus-within {
+        border-color: var(--formie-focus-ring-border-color);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-field-has-error .formie-repeater-item-wrapper {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-field-has-error .formie-repeater-item-wrapper:focus-within {
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+
+    .formie-repeater-item-wrapper>.formie-repeater-remove-button {
+        position: absolute;
+        top: var(--formie-repeater-remove-button-top);
+        right: var(--formie-repeater-remove-button-right);
+        transform: var(--formie-repeater-remove-button-transform);
+        font-size: 0;
+        line-height: 0;
+    }
+
+    .formie-button.formie-repeater-add-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        max-width: 100%;
+        justify-self: start;
+        padding-left: var(--formie-repeater-add-button-padding-left);
+    }
+
+    .formie-button.formie-repeater-add-button::before {
+        position: absolute;
+        content: "";
+        display: block;
+        width: var(--formie-repeater-add-button-width);
+        height: var(--formie-repeater-add-button-height);
+        left: var(--formie-repeater-add-button-left);
+        top: 50%;
+        transform: translate(0, -50%);
+        background-color: currentColor;
+        -webkit-mask-image: var(--formie-repeater-add-button-icon-mask);
+        mask-image: var(--formie-repeater-add-button-icon-mask);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+}

package/src/css/theme/fields/_rich-text.css

@@ -0,0 +1,201 @@
+@layer formie-theme {
+    .formie-rich-text {
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 0;
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    }
+
+    .formie-rich-text:focus-within {
+        border-color: var(--formie-color-focus-ring);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-field-has-error .formie-rich-text {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-field-has-error .formie-rich-text:focus-within {
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+
+    .formie-rich-text-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0;
+        padding: var(--formie-space-1);
+        border-bottom: var(--formie-border-width) solid var(--formie-color-border);
+        background: #fff;
+        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
+    }
+
+    .formie-rich-text .formie-rich-text-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--formie-space-8);
+        height: var(--formie-space-8);
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: var(--formie-radius-sm);
+        background: transparent;
+        color: var(--formie-color-heading);
+        font-size: var(--formie-font-size-sm);
+        line-height: 1;
+        cursor: pointer;
+        box-shadow: none;
+        transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .formie-rich-text .formie-rich-text-button:hover,
+    .formie-rich-text .formie-rich-text-button.formie-rich-text-selected {
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-rich-text .formie-rich-text-button:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 2px var(--formie-color-surface), 0 0 0 4px color-mix(in srgb, var(--formie-color-focus-ring) 60%, transparent);
+    }
+
+    .formie-rich-text [contenteditable="true"] {
+        min-height: var(--formie-rich-text-min-height);
+        padding: var(--formie-space-3) calc(var(--formie-space-3) + var(--formie-space-1) / 2);
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        outline: 0;
+        overflow-wrap: anywhere;
+        line-height: var(--formie-line-height-base);
+        color: var(--formie-color-text);
+    }
+
+    .formie-rich-text [contenteditable="true"]> :first-child {
+        margin-top: 0;
+    }
+
+    .formie-rich-text [contenteditable="true"]> :last-child {
+        margin-bottom: 0;
+    }
+
+    .formie-rich-text-content p,
+    .formie-rich-text-content ul,
+    .formie-rich-text-content ol,
+    .formie-rich-text-content blockquote,
+    .formie-rich-text-content dl,
+    .formie-rich-text-content dd,
+    .formie-rich-text-content figure,
+    .formie-rich-text-content hr,
+    .formie-rich-text-content pre {
+        margin: 0 0 var(--formie-space-4);
+    }
+
+    .formie-rich-text-content h1,
+    .formie-rich-text-content h2,
+    .formie-rich-text-content h3,
+    .formie-rich-text-content h4,
+    .formie-rich-text-content h5,
+    .formie-rich-text-content h6 {
+        margin: 0 0 var(--formie-space-3);
+        color: var(--formie-color-heading);
+        font-weight: var(--formie-font-weight-semibold);
+        line-height: var(--formie-line-height-tight);
+    }
+
+    .formie-rich-text-content h1 {
+        font-size: var(--formie-font-size-2xl);
+    }
+
+    .formie-rich-text-content h2 {
+        font-size: var(--formie-font-size-xl);
+    }
+
+    .formie-rich-text-content h3 {
+        font-size: var(--formie-font-size-lg);
+    }
+
+    .formie-rich-text-content h4 {
+        font-size: var(--formie-font-size-base);
+    }
+
+    .formie-rich-text-content h5,
+    .formie-rich-text-content h6 {
+        font-size: var(--formie-font-size-sm);
+    }
+
+    .formie-rich-text-content ul,
+    .formie-rich-text-content ol {
+        padding-inline-start: var(--formie-list-indent);
+    }
+
+    .formie-rich-text-content ul {
+        list-style: disc;
+    }
+
+    .formie-rich-text-content ol {
+        list-style: decimal;
+    }
+
+    .formie-rich-text-content li+li {
+        margin-top: var(--formie-space-1);
+    }
+
+    .formie-rich-text-content a {
+        color: var(--formie-color-primary);
+        text-decoration: underline;
+        text-underline-offset: var(--formie-link-underline-offset);
+    }
+
+    .formie-rich-text-content blockquote {
+        padding-inline-start: var(--formie-space-4);
+        color: var(--formie-color-text-muted);
+        border-inline-start: 4px solid var(--formie-color-border-soft);
+    }
+
+    .formie-rich-text-content pre {
+        padding: var(--formie-space-4);
+        overflow-x: auto;
+        border-radius: var(--formie-radius-md);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-rich-text-content code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.95em;
+    }
+
+    .formie-rich-text-content :not(pre)>code {
+        padding: 0.12em 0.35em;
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface-muted);
+    }
+
+    .formie-rich-text-content pre code {
+        padding: 0;
+        border-radius: 0;
+        background: transparent;
+    }
+
+    .formie-rich-text-content hr {
+        height: 0;
+        border: 0;
+        border-top: var(--formie-border-width) solid var(--formie-color-border);
+    }
+
+    .formie-rich-text-content img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .formie-rich-text-content[data-placeholder]:empty::before {
+        content: attr(data-placeholder);
+        color: var(--formie-color-text-muted);
+        pointer-events: none;
+    }
+}

package/src/css/theme/fields/_select.css

@@ -0,0 +1,37 @@
+@layer formie-theme {
+    .formie-select {
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+        background: var(--formie-color-surface);
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+        appearance: none;
+    }
+
+    .formie-select:not([multiple]):not([size]),
+    .formie-select[size="1"] {
+        padding-right: calc(var(--formie-control-padding-x) * 3);
+        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-select:focus {
+        outline: 0;
+    }
+
+    .formie-select:focus-visible {
+        outline: 0;
+        border-color: var(--formie-color-focus-ring);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-field-has-error .formie-select {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-field-has-error .formie-select:focus-visible {
+        border-color: var(--formie-color-danger);
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+}

package/src/css/theme/fields/_signature.css

@@ -0,0 +1,39 @@
+@layer formie-theme {
+    [data-formie-field-type="signature"] .formie-field-control {
+        position: relative;
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    }
+
+    [data-formie-field-type="signature"] .formie-field-control:focus-within .formie-signature-canvas {
+        border-color: var(--formie-focus-ring-border-color);
+        box-shadow: var(--formie-shadow-focus);
+    }
+
+    .formie-field-has-error[data-formie-field-type="signature"] .formie-signature-canvas {
+        border-color: var(--formie-color-danger);
+    }
+
+    .formie-field-has-error[data-formie-field-type="signature"] .formie-field-control:focus-within .formie-signature-canvas {
+        box-shadow: var(--formie-shadow-danger-focus);
+    }
+
+    [data-formie-field-type="signature"] .formie-signature-canvas {
+        display: block;
+        width: var(--formie-signature-width);
+        height: var(--formie-signature-height);
+        border: var(--formie-signature-border);
+        background: var(--formie-signature-background);
+        border-radius: var(--formie-signature-border-radius);
+        touch-action: none;
+        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    }
+
+    [data-formie-field-type="signature"] .formie-signature-remove-button {
+        position: absolute;
+        top: var(--formie-signature-remove-button-top);
+        right: var(--formie-signature-remove-button-right);
+        transform: var(--formie-signature-remove-button-transform);
+        font-size: 0;
+        line-height: 0;
+    }
+}

package/src/css/theme/fields/_summary.css

@@ -0,0 +1,53 @@
+@layer formie-theme {
+    .formie-summary-container {
+        padding: var(--formie-summary-padding);
+        border: var(--formie-border-width) solid var(--formie-color-border);
+        border-radius: var(--formie-radius-sm);
+    }
+
+    .formie-summary-heading {
+        color: var(--formie-color-heading);
+    }
+
+    .formie-summary-blocks {
+        display: grid;
+        gap: var(--formie-gap-summary);
+    }
+
+    .formie-summary-blocks[data-formie-loading="true"] {
+        position: relative;
+        min-height: calc(var(--formie-loading-size) + var(--formie-space-4));
+    }
+
+    .formie-summary-blocks[data-formie-loading="true"] > * {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .formie-summary-blocks[data-formie-loading="true"]::before {
+        position: absolute;
+        inset: 0;
+        content: "";
+        display: block;
+        background: var(--formie-color-bg);
+        border-radius: inherit;
+        z-index: 1;
+    }
+
+    .formie-summary-blocks[data-formie-loading="true"]::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: var(--formie-loading-size);
+        height: var(--formie-loading-size);
+        content: "";
+        display: block;
+        border: var(--formie-loading-border-width) solid var(--formie-loading-color);
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-radius: var(--formie-radius-full);
+        transform: translate(-50%, -50%);
+        z-index: 2;
+        animation: formie-loading-spin var(--formie-loading-speed) linear infinite;
+    }
+}