@verbb/formie-browser 1.0.0

package/dist/css/formie-base.css

@@ -0,0 +1,78 @@
+@layer formie-base, formie-theme-base, formie-theme;
+
+@layer formie-base {
+
+    .formie-form,
+    .formie-form fieldset,
+    .formie-form legend,
+    .formie-form h1,
+    .formie-form h2,
+    .formie-form h3,
+    .formie-form h4,
+    .formie-form h5,
+    .formie-form h6,
+    .formie-form p,
+    .formie-form ul,
+    .formie-form ol,
+    .formie-form menu,
+    .formie-form dl,
+    .formie-form dd,
+    .formie-form blockquote,
+    .formie-form figure {
+        margin: 0;
+        padding: 0;
+    }
+
+    .formie-form,
+    .formie-form *,
+    .formie-form *::before,
+    .formie-form *::after {
+        box-sizing: border-box;
+    }
+
+    .formie-page-container,
+    .formie-field-layout,
+    .formie-form fieldset,
+    .formie-form legend {
+        border: 0;
+        min-inline-size: 0;
+    }
+
+    /* Fix for Firefox display issue in fieldset */
+    body:not(:-moz-handler-blocked) .formie-form fieldset {
+        display: table-cell;
+    }
+
+    .formie-form legend {
+        /* legend should be `display: contents` to work with grid */
+        display: contents;
+    }
+
+    .formie-form legend * {
+        /* legend should be `display: contents` to work with grid */
+        display: contents;
+    }
+
+    .formie-sr-only {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0, 0, 0, 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+        display: block !important;
+    }
+
+    [data-formie-conditionally-hidden],
+    [data-formie-page-hidden],
+    [data-formie-row-hidden],
+    .formie-conditionally-hidden,
+    .formie-page-hidden,
+    .formie-row-hidden,
+    [hidden] {
+        display: none !important;
+    }
+}

package/dist/css/formie-theme.css

@@ -0,0 +1,19 @@
+@import "./theme-base/_primitives.css";
+@import "./theme-base/_controls.css";
+
+@import "./theme/_tokens.css";
+@import "./theme/_typography.css";
+@import "./theme/_messages.css";
+@import "./theme/_buttons.css";
+@import "./theme/_loading.css";
+@import "./theme/_progress.css";
+@import "./theme/forms/_form.css";
+@import "./theme/forms/_field.css";
+@import "./theme/fields/_group.css";
+@import "./theme/fields/_nested.css";
+@import "./theme/fields/_input.css";
+@import "./theme/fields/_select.css";
+@import "./theme/fields/_check-radio.css";
+@import "./theme/fields/_address.css";
+@import "./theme/integrations/_payment-modal.css";
+@import "./theme/utilities/_accessibility.css";

package/dist/css/formie.css

@@ -0,0 +1,2 @@
+@import "./formie-base.css";
+@import "./formie-theme.css";

package/dist/css/theme/_buttons.css

@@ -0,0 +1,249 @@
+@layer formie-theme {
+    .formie-page-buttons {
+        display: grid;
+        gap: var(--formie-gap-field);
+    }
+
+    .formie-button-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--formie-gap-field);
+        width: 100%;
+        align-items: center;
+        position: relative;
+    }
+
+    .formie-button {
+        --formie-loading-color: var(--formie-button-color);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--formie-button-gap);
+        min-height: var(--formie-button-min-height);
+        flex-shrink: 0;
+        border: var(--formie-button-border);
+        border-radius: var(--formie-button-border-radius);
+        background-color: var(--formie-button-background);
+        color: var(--formie-button-color);
+        padding: var(--formie-button-padding-y) var(--formie-button-padding-x);
+        font-size: var(--formie-button-font-size);
+        line-height: var(--formie-button-line-height);
+        font-weight: var(--formie-button-font-weight);
+        position: relative;
+        white-space: nowrap;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, opacity 150ms ease;
+    }
+
+    .formie-button:hover {
+        background-color: var(--formie-button-background-hover);
+        border: var(--formie-button-border-hover);
+    }
+
+    .formie-button:focus {
+        outline: 0;
+    }
+
+    .formie-button:focus-visible {
+        outline: 0;
+        box-shadow: var(--formie-button-shadow-focus);
+    }
+
+    .formie-button:disabled {
+        opacity: var(--formie-button-opacity-disabled);
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
+    .formie-button-primary {
+        --formie-button-color: var(--formie-button-primary-text-color);
+        background-color: var(--formie-button-primary-background);
+        border: var(--formie-button-primary-border);
+    }
+
+    .formie-button-primary:hover {
+        background-color: var(--formie-button-primary-background-hover);
+        border: var(--formie-button-primary-border-hover);
+    }
+
+    .formie-button-primary:focus-visible {
+        box-shadow: var(--formie-button-primary-shadow-focus);
+    }
+
+    .formie-button-secondary {
+        --formie-button-color: var(--formie-button-secondary-text-color);
+        background-color: var(--formie-button-secondary-background);
+        border: var(--formie-button-secondary-border);
+    }
+
+    .formie-button-secondary:hover {
+        background-color: var(--formie-button-secondary-background-hover);
+        border: var(--formie-button-secondary-border-hover);
+    }
+
+    .formie-button-secondary:focus-visible {
+        box-shadow: var(--formie-button-shadow-focus);
+    }
+
+    .formie-button-ghost {
+        --formie-button-color: var(--formie-button-ghost-text-color);
+        background-color: var(--formie-button-ghost-background);
+        border: var(--formie-button-ghost-border);
+    }
+
+    .formie-button-ghost:hover {
+        background-color: var(--formie-button-ghost-background-hover);
+        border: var(--formie-button-ghost-border-hover);
+    }
+
+    .formie-button-ghost:focus-visible {
+        box-shadow: var(--formie-button-ghost-shadow-focus);
+    }
+
+    .formie-button-icon {
+        --formie-button-color: var(--formie-button-icon-color);
+        width: var(--formie-button-icon-button-size);
+        min-width: var(--formie-button-icon-button-size);
+        height: var(--formie-button-icon-button-size);
+        min-height: var(--formie-button-icon-button-size);
+        padding: 0;
+        border: var(--formie-button-icon-border);
+        border-radius: var(--formie-button-icon-border-radius);
+        background-color: var(--formie-button-icon-background);
+        font-size: 0;
+        line-height: 0;
+        text-indent: -9999px;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .formie-button-icon:hover {
+        background-color: var(--formie-button-icon-background-hover);
+        border: var(--formie-button-icon-border-hover);
+    }
+
+    .formie-button-icon::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        content: '';
+        width: var(--formie-button-icon-size);
+        height: var(--formie-button-icon-size);
+        transform: translate(-50%, -50%);
+        background-color: currentColor;
+        -webkit-mask-image: var(--formie-button-icon-mask);
+        mask-image: var(--formie-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;
+    }
+
+    .formie-button-icon[data-formie-icon="plus"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-plus);
+    }
+
+    .formie-button-icon[data-formie-icon="arrow-left"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-left);
+    }
+
+    .formie-button-icon[data-formie-icon="arrow-right"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-right);
+    }
+
+    .formie-button-icon[data-formie-icon="close"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-close);
+    }
+
+    .formie-button-text-icon {
+        width: var(--formie-button-icon-size);
+        height: var(--formie-button-icon-size);
+        flex-shrink: 0;
+        background-color: currentColor;
+        -webkit-mask-image: var(--formie-button-icon-mask);
+        mask-image: var(--formie-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;
+    }
+
+    .formie-button-text-icon[data-formie-icon="plus"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-plus);
+    }
+
+    .formie-button-text-icon[data-formie-icon="arrow-left"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-left);
+    }
+
+    .formie-button-text-icon[data-formie-icon="arrow-right"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-arrow-right);
+    }
+
+    .formie-button-text-icon[data-formie-icon="close"] {
+        --formie-button-icon-mask: var(--formie-icon-mask-close);
+    }
+
+    .formie-button-back {
+        order: 0;
+    }
+
+    .formie-button-submit {
+        order: 10;
+    }
+
+    .formie-button-save {
+        order: 20;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="left"] .formie-button-container {
+        justify-content: flex-start;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="right"] .formie-button-container {
+        justify-content: flex-end;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="center"] .formie-button-container {
+        justify-content: center;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="left-right"] .formie-button-back {
+        margin-inline-end: auto;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="save-right"] .formie-button-save {
+        margin-inline-start: auto;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="save-left"] .formie-button-save {
+        order: -10;
+        margin-inline-end: auto;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="right-save-left"] .formie-button-save,
+    .formie-page-buttons[data-formie-buttons-position="center-save-left"] .formie-button-save {
+        order: -10;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="right-save-left"] .formie-button-container {
+        justify-content: flex-end;
+    }
+
+    .formie-page-buttons[data-formie-buttons-position="center-save-left"] .formie-button-container,
+    .formie-page-buttons[data-formie-buttons-position="center-save-right"] .formie-button-container {
+        justify-content: center;
+    }
+
+    .formie-button[data-formie-loading="true"] {
+        pointer-events: none;
+    }
+
+}

package/dist/css/theme/_loading.css

@@ -0,0 +1,37 @@
+@layer formie-theme {
+    .formie-loading {
+        position: relative;
+        pointer-events: none;
+        color: transparent !important;
+    }
+
+    .formie-loading::after {
+        position: absolute;
+        display: block;
+        height: var(--formie-loading-size);
+        width: var(--formie-loading-size);
+        margin-top: var(--formie-loading-margin-top);
+        margin-left: var(--formie-loading-margin-left);
+        border-width: var(--formie-loading-border-width);
+        border-style: solid;
+        border-radius: 9999px;
+        border-color: var(--formie-loading-color, var(--formie-color-primary));
+        animation: var(--formie-loading-animation);
+        border-right-color: transparent;
+        border-top-color: transparent;
+        content: "";
+        left: var(--formie-loading-left);
+        top: var(--formie-loading-top);
+        z-index: var(--formie-loading-z-index);
+    }
+
+    @keyframes loading {
+        0% {
+            transform: rotate(0)
+        }
+
+        100% {
+            transform: rotate(360deg)
+        }
+    }
+}

package/dist/css/theme/_messages.css

@@ -0,0 +1,39 @@
+@layer formie-theme {
+    .formie-field-required {
+        color: var(--formie-color-danger);
+    }
+
+    .formie-errors {
+        margin-bottom: var(--formie-space-4);
+    }
+
+    .formie-field-error,
+    .formie-error {
+        display: block;
+        color: var(--formie-color-danger);
+        font-size: var(--formie-meta-size);
+    }
+
+    .formie-message {
+        margin-bottom: var(--formie-message-margin-bottom);
+        padding: var(--formie-message-padding);
+        border-radius: var(--formie-radius-sm);
+        font-size: var(--formie-message-size);
+        font-weight: var(--formie-font-weight-medium);
+        line-height: var(--formie-message-line-height);
+    }
+
+    .formie-message-error {
+        background: var(--formie-color-danger-soft);
+        color: var(--formie-color-danger-dark);
+    }
+
+    .formie-message-error .formie-error {
+        color: var(--formie-color-danger-dark);
+    }
+
+    .formie-message-success {
+        background: var(--formie-color-success-soft);
+        color: var(--formie-color-success-dark);
+    }
+}

package/dist/css/theme/_progress.css

@@ -0,0 +1,62 @@
+@layer formie-theme {
+    .formie-progress-wrapper[data-formie-progress-position="start"] {
+        padding-bottom: var(--formie-progress-padding);
+    }
+
+    .formie-progress-wrapper[data-formie-progress-position="end"] {
+        padding-top: var(--formie-progress-padding);
+    }
+
+    .formie-progress {
+        display: flex;
+        align-items: center;
+        position: relative;
+        background: var(--formie-color-surface-muted);
+        border-radius: var(--formie-radius-full);
+        min-height: var(--formie-progress-height);
+        overflow: hidden;
+    }
+
+    .formie-progress-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        background: var(--formie-color-primary);
+        color: var(--formie-color-button-text);
+        font-size: var(--formie-progress-size);
+        font-weight: var(--formie-font-weight-medium);
+        min-height: var(--formie-progress-height);
+        transition: width 0.3s ease;
+    }
+
+    .formie-progress-value {
+        line-height: 1;
+    }
+
+    .formie-progress-bar > .formie-progress-value {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(50%, -50%);
+        white-space: nowrap;
+        padding: 0 var(--formie-space-2);
+        min-height: var(--formie-progress-height);
+        display: inline-flex;
+        align-items: center;
+        border-radius: var(--formie-radius-full);
+        background: var(--formie-color-primary);
+        color: var(--formie-color-button-text);
+    }
+
+    .formie-progress-bar[data-formie-progress-state="start"] > .formie-progress-value {
+        left: 0;
+        right: auto;
+        transform: translate(0, -50%);
+    }
+
+    .formie-progress-bar[data-formie-progress-state="end"] > .formie-progress-value {
+        right: 0;
+        transform: translate(0, -50%);
+    }
+}