@dfgk/hoverla-checkout 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// \0hoverla-css
|
|
2
|
-
var e = ":host{display:block;container:hv-checkout/inline-size}\n.hv-summary{position:static!important}\n/*\n * Default look of the checkout components. Everything is in @layer hoverla, so\n * any unlayered CSS of the landing wins without a specificity fight. The 18\n * --hv-* tokens are the contract (docs/components.md); set them on :root or\n * any ancestor. Dark is opt-in: data-hv-theme=\"dark\" or \"auto\" on an ancestor.\n */\n@layer hoverla {\n \n\n :where([data-hv-theme='dark']) {\n --hv-color-bg: #14181c;\n --hv-color-surface: #1d2227;\n --hv-color-text: #e8eaed;\n --hv-color-muted: #a9b1b8;\n --hv-color-primary: #5fd49a;\n --hv-color-on-primary: #14181c;\n --hv-color-border: #7b868e;\n --hv-color-error: #ff8a80;\n --hv-color-success: #6fd49a;\n --hv-color-warning: #f2b84b;\n --hv-color-focus: #8ab4f8;\n }\n\n @media (prefers-color-scheme: dark) {\n :where([data-hv-theme='auto']) {\n --hv-color-bg: #14181c;\n --hv-color-surface: #1d2227;\n --hv-color-text: #e8eaed;\n --hv-color-muted: #a9b1b8;\n --hv-color-primary: #5fd49a;\n --hv-color-on-primary: #14181c;\n --hv-color-border: #7b868e;\n --hv-color-error: #ff8a80;\n --hv-color-success: #6fd49a;\n --hv-color-warning: #f2b84b;\n --hv-color-focus: #8ab4f8;\n }\n }\n\n .hv-root,\n .hv-result {\n box-sizing: border-box;\n max-width: var(--hv-max-width, 1040px);\n margin-inline: auto;\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n font-family: var(--hv-font, inherit);\n font-size: var(--hv-font-size, 1rem);\n line-height: 1.5;\n }\n .hv-root *,\n .hv-result * {\n box-sizing: border-box;\n }\n .hv-root {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 3);\n padding: calc(var(--hv-space, 8px) * 2);\n }\n .hv-main {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 3);\n min-width: 0;\n }\n .hv-summary {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n align-content: start;\n min-width: 0;\n }\n @container (min-width: 1024px) {\n .hv-root {\n grid-template-columns: minmax(0, 1fr) 360px;\n align-items: start;\n }\n .hv-root > .hv-error-summary,\n .hv-root > .hv-notice {\n grid-column: 1 / -1;\n }\n .hv-summary {\n position: sticky;\n top: calc(var(--hv-space, 8px) * 2);\n }\n }\n @media (min-width: 1024px) and (max-height: 640px) {\n .hv-summary {\n position: static;\n }\n }\n\n .hv-section {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n min-width: 0;\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-section-title {\n padding-inline: var(--hv-space, 8px);\n font-weight: 600;\n }\n\n .hv-field {\n display: grid;\n gap: calc(var(--hv-space, 8px) / 2);\n min-width: 0;\n }\n .hv-label {\n font-weight: 500;\n }\n .hv-input,\n .hv-select,\n .hv-textarea {\n width: 100%;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: max(16px, var(--hv-font-size, 1rem));\n }\n .hv-textarea {\n min-height: calc(var(--hv-control-height, 44px) * 2);\n resize: vertical;\n }\n .hv-input[aria-invalid='true'],\n .hv-select[aria-invalid='true'] {\n border-color: var(--hv-color-error, #b3261e);\n border-width: calc(var(--hv-border-width, 1px) + 1px);\n }\n .hv-hint {\n margin: 0;\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-error {\n margin: 0;\n color: var(--hv-color-error, #b3261e);\n font-size: 0.875em;\n font-weight: 500;\n }\n .hv-error::before {\n content: '! ';\n font-weight: 700;\n }\n\n .hv-error-summary,\n .hv-notice {\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 1.5) calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-error, #b3261e);\n border-radius: var(--hv-radius, 8px);\n background: var(--hv-color-surface, #f4f5f3);\n }\n .hv-error-summary ul {\n margin: var(--hv-space, 8px) 0 0;\n padding-inline-start: calc(var(--hv-space, 8px) * 2.5);\n }\n .hv-root a:not(.hv-button) {\n color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-error-summary-link {\n color: var(--hv-color-error, #b3261e);\n text-decoration: underline;\n }\n .hv-notice {\n border-color: var(--hv-color-warning, #8a5a00);\n }\n .hv-notice[data-kind='info'] {\n border-color: var(--hv-color-border, #80898f);\n }\n\n .hv-choices {\n display: grid;\n gap: var(--hv-space, 8px);\n }\n @container (min-width: 1024px) {\n .hv-choices {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .hv-choice {\n display: grid;\n grid-template-columns: auto 1fr;\n column-gap: calc(var(--hv-space, 8px) * 1.5);\n align-items: start;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: calc(var(--hv-space, 8px) * 1.5);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n cursor: pointer;\n }\n .hv-choice:has(input:checked) {\n border-color: var(--hv-color-primary, #1f6f4a);\n box-shadow: inset 0 0 0 1px var(--hv-color-primary, #1f6f4a);\n }\n .hv-choice[aria-disabled='true'] {\n color: var(--hv-color-muted, #505a63);\n cursor: not-allowed;\n }\n .hv-choice input {\n width: 24px;\n height: 24px;\n margin: 0;\n accent-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-choice-title {\n font-weight: 500;\n }\n .hv-choice-help {\n grid-column: 2;\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-choice-flag {\n grid-column: 2;\n color: var(--hv-color-warning, #8a5a00);\n font-size: 0.875em;\n font-weight: 600;\n }\n\n .hv-line {\n display: grid;\n gap: var(--hv-space, 8px);\n padding: calc(var(--hv-space, 8px) * 1.5);\n background: var(--hv-color-surface, #f4f5f3);\n border: var(--hv-border-width, 1px) solid transparent;\n border-radius: var(--hv-radius, 8px);\n }\n .hv-line[data-gone='true'] {\n border-color: var(--hv-color-error, #b3261e);\n }\n .hv-line-name {\n font-weight: 600;\n }\n .hv-line-price {\n color: var(--hv-color-muted, #505a63);\n }\n .hv-line-actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hv-space, 8px);\n align-items: center;\n justify-content: space-between;\n }\n @container (min-width: 1024px) {\n .hv-line {\n grid-template-columns: 1fr auto auto;\n align-items: center;\n }\n }\n .hv-stepper {\n display: inline-flex;\n gap: var(--hv-space, 8px);\n align-items: center;\n }\n .hv-stepper-button {\n min-width: max(44px, var(--hv-control-height, 44px));\n min-height: max(44px, var(--hv-control-height, 44px));\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: 1.25em;\n cursor: pointer;\n }\n .hv-stepper-input {\n width: 4.5em;\n min-height: max(44px, var(--hv-control-height, 44px));\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: max(16px, var(--hv-font-size, 1rem));\n text-align: center;\n }\n\n .hv-combobox {\n position: relative;\n display: grid;\n gap: calc(var(--hv-space, 8px) / 2);\n }\n /* In flow, never a floating overlay: the keyboard and an error stay visible. */\n .hv-combobox-list {\n max-height: 16rem;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-combobox-list[hidden] {\n display: none;\n }\n .hv-combobox-option {\n display: grid;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n align-content: center;\n cursor: pointer;\n }\n .hv-combobox-option small {\n color: var(--hv-color-muted, #505a63);\n }\n .hv-combobox-option[data-active='true'] {\n outline: 2px solid var(--hv-color-focus, #0b57d0);\n outline-offset: -2px;\n }\n .hv-combobox-option[aria-selected='true'] {\n background: var(--hv-color-surface, #f4f5f3);\n }\n\n .hv-consent {\n display: flex;\n gap: calc(var(--hv-space, 8px) * 1.5);\n align-items: flex-start;\n min-height: max(44px, var(--hv-control-height, 44px));\n cursor: pointer;\n }\n .hv-consent input {\n flex: none;\n width: 24px;\n height: 24px;\n margin: 10px 0 0;\n accent-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-consent a {\n color: var(--hv-color-primary, #1f6f4a);\n text-decoration: underline;\n }\n\n .hv-totals {\n padding: calc(var(--hv-space, 8px) * 2);\n background: var(--hv-color-surface, #f4f5f3);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-totals > dl {\n display: grid;\n gap: var(--hv-space, 8px);\n margin: 0;\n }\n .hv-totals-row {\n display: flex;\n gap: var(--hv-space, 8px);\n justify-content: space-between;\n }\n .hv-totals-row dt,\n .hv-totals-row dd {\n margin: 0;\n }\n .hv-totals-total {\n font-size: 1.25em;\n font-weight: 700;\n }\n\n .hv-button {\n display: inline-flex;\n gap: var(--hv-space, 8px);\n align-items: center;\n justify-content: center;\n min-width: max(44px, var(--hv-control-height, 44px));\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n }\n .hv-button-primary {\n width: 100%;\n color: var(--hv-color-on-primary, #ffffff);\n background: var(--hv-color-primary, #1f6f4a);\n border-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-button-secondary {\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n }\n .hv-button[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.65;\n }\n .hv-button[aria-busy='true']::before {\n content: '';\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: hv-spin 0.8s linear infinite;\n }\n @keyframes hv-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .hv-button[aria-busy='true']::before {\n animation: none;\n border-top-color: currentcolor;\n }\n }\n\n /* The focus ring: its colour is a token, it is never removed. */\n .hv-root :focus-visible,\n .hv-result :focus-visible {\n outline: 3px solid var(--hv-color-focus, #0b57d0);\n outline-offset: 2px;\n }\n\n .hv-result {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n padding: calc(var(--hv-space, 8px) * 2);\n }\n .hv-result-state {\n margin: 0;\n font-weight: 600;\n }\n .hv-result-state[data-kind='paid'] {\n color: var(--hv-color-success, #1b6e3c);\n }\n .hv-iban {\n display: grid;\n gap: var(--hv-space, 8px);\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 2);\n background: var(--hv-color-surface, #f4f5f3);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-iban-row {\n display: grid;\n gap: calc(var(--hv-space, 8px) / 2);\n }\n .hv-iban-row dt {\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-iban-row dd {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hv-space, 8px);\n align-items: center;\n margin: 0;\n }\n .hv-iban-value {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n user-select: all;\n overflow-wrap: anywhere;\n }\n .hv-copy-button {\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n cursor: pointer;\n }\n .hv-copy-button[data-copied='true'] {\n color: var(--hv-color-success, #1b6e3c);\n border-color: var(--hv-color-success, #1b6e3c);\n }\n\n /* Honeypot and screen-reader text: part of the structure, not restylable. */\n .hv-hp {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n .hv-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n";
|
|
2
|
+
var e = ":host{display:block;container:hv-checkout/inline-size}\n.hv-summary{position:static!important}\n/*\n * Default look of the checkout components. Everything is in @layer hoverla, so\n * any unlayered CSS of the landing wins without a specificity fight. The 18\n * --hv-* tokens are the contract (docs/components.md); set them on :root or\n * any ancestor. Dark is opt-in: data-hv-theme=\"dark\" or \"auto\" on an ancestor.\n */\n@layer hoverla {\n \n\n :where([data-hv-theme='dark']) {\n --hv-color-bg: #14181c;\n --hv-color-surface: #1d2227;\n --hv-color-text: #e8eaed;\n --hv-color-muted: #a9b1b8;\n --hv-color-primary: #5fd49a;\n --hv-color-on-primary: #14181c;\n --hv-color-border: #7b868e;\n --hv-color-error: #ff8a80;\n --hv-color-success: #6fd49a;\n --hv-color-warning: #f2b84b;\n --hv-color-focus: #8ab4f8;\n }\n\n @media (prefers-color-scheme: dark) {\n :where([data-hv-theme='auto']) {\n --hv-color-bg: #14181c;\n --hv-color-surface: #1d2227;\n --hv-color-text: #e8eaed;\n --hv-color-muted: #a9b1b8;\n --hv-color-primary: #5fd49a;\n --hv-color-on-primary: #14181c;\n --hv-color-border: #7b868e;\n --hv-color-error: #ff8a80;\n --hv-color-success: #6fd49a;\n --hv-color-warning: #f2b84b;\n --hv-color-focus: #8ab4f8;\n }\n }\n\n .hv-root,\n .hv-result {\n box-sizing: border-box;\n max-width: var(--hv-max-width, 1040px);\n margin-inline: auto;\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n font-family: var(--hv-font, inherit);\n font-size: var(--hv-font-size, 1rem);\n line-height: 1.5;\n }\n .hv-root *,\n .hv-result * {\n box-sizing: border-box;\n }\n .hv-root {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 3);\n padding: calc(var(--hv-space, 8px) * 2);\n }\n .hv-main {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 3);\n min-width: 0;\n }\n .hv-summary {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n align-content: start;\n min-width: 0;\n }\n @container (min-width: 1024px) {\n .hv-root {\n grid-template-columns: minmax(0, 1fr) 360px;\n align-items: start;\n }\n .hv-root > .hv-error-summary,\n .hv-root > .hv-notice {\n grid-column: 1 / -1;\n }\n .hv-summary {\n position: sticky;\n top: calc(var(--hv-space, 8px) * 2);\n }\n }\n @media (min-width: 1024px) and (max-height: 640px) {\n .hv-summary {\n position: static;\n }\n }\n\n .hv-section {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n min-width: 0;\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-section-title {\n padding-inline: var(--hv-space, 8px);\n font-weight: 600;\n }\n\n .hv-field {\n display: grid;\n gap: calc(var(--hv-space, 8px) / 2);\n min-width: 0;\n }\n .hv-label {\n font-weight: 500;\n }\n .hv-input,\n .hv-select,\n .hv-textarea {\n width: 100%;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: max(16px, var(--hv-font-size, 1rem));\n }\n .hv-textarea {\n min-height: calc(var(--hv-control-height, 44px) * 2);\n resize: vertical;\n }\n .hv-input[aria-invalid='true'],\n .hv-select[aria-invalid='true'] {\n border-color: var(--hv-color-error, #b3261e);\n border-width: calc(var(--hv-border-width, 1px) + 1px);\n }\n .hv-hint {\n margin: 0;\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-error {\n margin: 0;\n color: var(--hv-color-error, #b3261e);\n font-size: 0.875em;\n font-weight: 500;\n }\n .hv-error::before {\n content: '! ';\n font-weight: 700;\n }\n\n .hv-error-summary,\n .hv-notice {\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 1.5) calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-error, #b3261e);\n border-radius: var(--hv-radius, 8px);\n background: var(--hv-color-surface, #f4f5f3);\n }\n .hv-error-summary ul {\n margin: var(--hv-space, 8px) 0 0;\n padding-inline-start: calc(var(--hv-space, 8px) * 2.5);\n }\n .hv-root a:not(.hv-button) {\n color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-error-summary-link {\n color: var(--hv-color-error, #b3261e);\n text-decoration: underline;\n }\n .hv-notice {\n border-color: var(--hv-color-warning, #8a5a00);\n }\n .hv-notice[data-kind='info'] {\n border-color: var(--hv-color-border, #80898f);\n }\n\n .hv-choices {\n display: grid;\n gap: var(--hv-space, 8px);\n }\n @container (min-width: 1024px) {\n .hv-choices {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .hv-choice {\n display: grid;\n grid-template-columns: auto 1fr;\n column-gap: calc(var(--hv-space, 8px) * 1.5);\n align-items: start;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: calc(var(--hv-space, 8px) * 1.5);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n cursor: pointer;\n }\n .hv-choice:has(input:checked) {\n border-color: var(--hv-color-primary, #1f6f4a);\n box-shadow: inset 0 0 0 1px var(--hv-color-primary, #1f6f4a);\n }\n .hv-choice[aria-disabled='true'] {\n color: var(--hv-color-muted, #505a63);\n cursor: not-allowed;\n }\n .hv-choice input {\n width: 24px;\n height: 24px;\n margin: 0;\n accent-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-choice-title {\n font-weight: 500;\n }\n .hv-choice-help {\n grid-column: 2;\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-choice-single {\n grid-template-columns: minmax(0, 1fr);\n }\n .hv-choice-single .hv-choice-help {\n grid-column: 1;\n margin-top: calc(var(--hv-space, 8px) / 2);\n }\n .hv-choice-flag {\n grid-column: 2;\n color: var(--hv-color-warning, #8a5a00);\n font-size: 0.875em;\n font-weight: 600;\n }\n\n .hv-line {\n display: grid;\n gap: var(--hv-space, 8px);\n padding: calc(var(--hv-space, 8px) * 1.5);\n background: var(--hv-color-surface, #f4f5f3);\n border: var(--hv-border-width, 1px) solid transparent;\n border-radius: var(--hv-radius, 8px);\n }\n .hv-line[data-gone='true'] {\n border-color: var(--hv-color-error, #b3261e);\n }\n .hv-line-name {\n font-weight: 600;\n }\n .hv-line-price {\n color: var(--hv-color-muted, #505a63);\n }\n .hv-line-actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hv-space, 8px);\n align-items: center;\n justify-content: space-between;\n }\n @container (min-width: 1024px) {\n .hv-line {\n grid-template-columns: 1fr auto auto;\n align-items: center;\n }\n }\n .hv-stepper {\n display: inline-flex;\n gap: var(--hv-space, 8px);\n align-items: center;\n }\n .hv-stepper-button {\n min-width: max(44px, var(--hv-control-height, 44px));\n min-height: max(44px, var(--hv-control-height, 44px));\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: 1.25em;\n cursor: pointer;\n }\n .hv-stepper-input {\n width: 4.5em;\n min-height: max(44px, var(--hv-control-height, 44px));\n color: inherit;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-size: max(16px, var(--hv-font-size, 1rem));\n text-align: center;\n }\n\n .hv-combobox {\n position: relative;\n display: grid;\n gap: calc(var(--hv-space, 8px) / 2);\n }\n /* In flow, never a floating overlay: the keyboard and an error stay visible. */\n .hv-combobox-list {\n max-height: 16rem;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-combobox-list[hidden] {\n display: none;\n }\n .hv-combobox-option {\n display: grid;\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n align-content: center;\n cursor: pointer;\n }\n .hv-combobox-option small {\n color: var(--hv-color-muted, #505a63);\n }\n .hv-combobox-option[data-active='true'] {\n outline: 2px solid var(--hv-color-focus, #0b57d0);\n outline-offset: -2px;\n }\n .hv-combobox-option[aria-selected='true'] {\n background: var(--hv-color-surface, #f4f5f3);\n }\n\n .hv-consent {\n display: flex;\n gap: calc(var(--hv-space, 8px) * 1.5);\n align-items: flex-start;\n min-height: max(44px, var(--hv-control-height, 44px));\n cursor: pointer;\n }\n .hv-consent input {\n flex: none;\n width: 24px;\n height: 24px;\n margin: 10px 0 0;\n accent-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-consent a {\n color: var(--hv-color-primary, #1f6f4a);\n text-decoration: underline;\n }\n\n .hv-totals {\n padding: calc(var(--hv-space, 8px) * 2);\n background: var(--hv-color-surface, #f4f5f3);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-totals > dl {\n display: grid;\n gap: var(--hv-space, 8px);\n margin: 0;\n }\n .hv-totals-row {\n display: flex;\n gap: var(--hv-space, 8px);\n justify-content: space-between;\n }\n .hv-totals-row dt,\n .hv-totals-row dd {\n margin: 0;\n }\n .hv-totals-note {\n flex-direction: column;\n gap: calc(var(--hv-space, 8px) / 2);\n align-items: flex-start;\n }\n .hv-totals-note dd {\n overflow-wrap: anywhere;\n }\n @container (min-width: 480px) {\n .hv-totals-note {\n flex-direction: row;\n gap: var(--hv-space, 8px);\n align-items: baseline;\n }\n .hv-totals-note dd {\n text-align: right;\n }\n }\n .hv-totals-total {\n font-size: 1.25em;\n font-weight: 700;\n }\n\n .hv-result-items ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .hv-result-item {\n display: flex;\n flex-wrap: wrap;\n column-gap: calc(var(--hv-space, 8px) * 2);\n row-gap: calc(var(--hv-space, 8px) / 2);\n align-items: baseline;\n justify-content: space-between;\n padding-block: var(--hv-space, 8px);\n border-bottom: 1px solid var(--hv-color-border, #80898f);\n }\n .hv-result-item:last-child {\n border-bottom: 0;\n }\n .hv-result-name {\n flex: 1 1 12ch;\n min-width: 0;\n overflow-wrap: anywhere;\n }\n .hv-result-qty {\n white-space: nowrap;\n }\n .hv-result-price {\n flex: 0 0 auto;\n margin-left: auto;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n\n .hv-button {\n display: inline-flex;\n gap: var(--hv-space, 8px);\n align-items: center;\n justify-content: center;\n min-width: max(44px, var(--hv-control-height, 44px));\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 2);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n }\n .hv-button-primary {\n width: 100%;\n color: var(--hv-color-on-primary, #ffffff);\n background: var(--hv-color-primary, #1f6f4a);\n border-color: var(--hv-color-primary, #1f6f4a);\n }\n .hv-button-secondary {\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n }\n .hv-button[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.65;\n }\n .hv-button[aria-busy='true']::before {\n content: '';\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: hv-spin 0.8s linear infinite;\n }\n @keyframes hv-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .hv-button[aria-busy='true']::before {\n animation: none;\n border-top-color: currentcolor;\n }\n }\n\n /* The focus ring: its colour is a token, it is never removed. */\n .hv-root :focus-visible,\n .hv-result :focus-visible {\n outline: 3px solid var(--hv-color-focus, #0b57d0);\n outline-offset: 2px;\n }\n\n .hv-result {\n display: grid;\n gap: calc(var(--hv-space, 8px) * 2);\n padding: calc(var(--hv-space, 8px) * 2);\n }\n .hv-result-state {\n margin: 0;\n font-weight: 600;\n }\n .hv-result-state[data-kind='paid'] {\n color: var(--hv-color-success, #1b6e3c);\n }\n .hv-iban {\n display: grid;\n gap: var(--hv-space, 8px);\n margin: 0;\n padding: calc(var(--hv-space, 8px) * 2);\n background: var(--hv-color-surface, #f4f5f3);\n border-radius: var(--hv-radius, 8px);\n }\n .hv-iban-row {\n display: block;\n padding-block: calc(var(--hv-space, 8px) * 1.5);\n border-bottom: 1px solid var(--hv-color-border, #80898f);\n }\n .hv-iban-row:last-child {\n border-bottom: 0;\n }\n .hv-iban-row dt {\n display: block;\n margin: 0 0 calc(var(--hv-space, 8px) / 2);\n color: var(--hv-color-muted, #505a63);\n font-size: 0.875em;\n }\n .hv-iban-row dd {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--hv-space, 8px);\n margin: 0;\n }\n .hv-iban-text {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9375em;\n user-select: all;\n overflow-wrap: anywhere;\n }\n .hv-iban-row .hv-copy-button {\n width: 100%;\n }\n @container (min-width: 480px) {\n .hv-iban-row .hv-copy-button {\n width: auto;\n min-width: 160px;\n justify-self: start;\n }\n }\n .hv-copy-button {\n min-height: max(44px, var(--hv-control-height, 44px));\n padding: var(--hv-space, 8px) calc(var(--hv-space, 8px) * 1.5);\n color: var(--hv-color-text, #1b1f23);\n background: var(--hv-color-bg, #ffffff);\n border: var(--hv-border-width, 1px) solid var(--hv-color-border, #80898f);\n border-radius: var(--hv-radius, 8px);\n font: inherit;\n cursor: pointer;\n }\n .hv-copy-button[data-copied='true'] {\n color: var(--hv-color-success, #1b6e3c);\n border-color: var(--hv-color-success, #1b6e3c);\n }\n\n /* Honeypot and screen-reader text: part of the structure, not restylable. */\n .hv-hp {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n .hv-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n}\n";
|
|
3
3
|
// node_modules/@vue/shared/dist/shared.esm-bundler.js
|
|
4
4
|
// @__NO_SIDE_EFFECTS__
|
|
5
5
|
function t(e) {
|
|
@@ -3489,11 +3489,12 @@ var So = (e, t, n, r = {}) => z("fieldset", {
|
|
|
3489
3489
|
z("ul", f.items.map((t, n) => z("li", {
|
|
3490
3490
|
key: n,
|
|
3491
3491
|
class: "hv-result-item"
|
|
3492
|
-
}, [z("span", [
|
|
3492
|
+
}, [z("span", { class: "hv-result-name" }, [
|
|
3493
3493
|
t.name,
|
|
3494
3494
|
t.variant_name ? `, ${t.variant_name}` : "",
|
|
3495
|
-
|
|
3496
|
-
|
|
3495
|
+
"\xA0",
|
|
3496
|
+
z("span", { class: "hv-result-qty" }, `× ${t.quantity}`)
|
|
3497
|
+
]), z("span", { class: "hv-result-price" }, Ja(t.unit_price_minor * t.quantity, f.currency, e.lang))]))),
|
|
3497
3498
|
z("p", { class: "hv-result-total" }, [`${n.value.total}: `, Ja(f.total_minor, f.currency, e.lang)])
|
|
3498
3499
|
]) : null, _ = l === "paid" ? n.value.paymentPaid : l === "pending" ? c.value ? n.value.paymentPendingLong : n.value.paymentPending : l === "failed" ? n.value.paymentFailed : l === "cod" ? n.value.paymentCod : "";
|
|
3499
3500
|
return z("div", i, [
|
|
@@ -8917,7 +8918,7 @@ var Vh = /* @__PURE__ */ P({
|
|
|
8917
8918
|
return () => {
|
|
8918
8919
|
let { payment: r, paymentMethods: i, errors: a, setPayment: o } = e.checkout, s = [...i.value].sort((e, t) => Bm.indexOf(e) - Bm.indexOf(t)), c = a.value.payment, l = s.length === 1 ? s[0] : void 0;
|
|
8919
8920
|
return So(n.value.paymentTitle, "hv-payment", [
|
|
8920
|
-
l ? z("div", { class: "hv-choice" }, [z("span", { class: "hv-choice-title" }, n.value.pay[l]), z("span", { class: "hv-choice-help" }, n.value.payHelp[l])]) : z("div", {
|
|
8921
|
+
l ? z("div", { class: "hv-choice hv-choice-single" }, [z("span", { class: "hv-choice-title" }, n.value.pay[l]), z("span", { class: "hv-choice-help" }, n.value.payHelp[l])]) : z("div", {
|
|
8921
8922
|
id: "hv-payment-group",
|
|
8922
8923
|
class: "hv-choices",
|
|
8923
8924
|
role: "radiogroup",
|
|
@@ -9065,14 +9066,14 @@ var Vh = /* @__PURE__ */ P({
|
|
|
9065
9066
|
setup(e, { slots: t }) {
|
|
9066
9067
|
let n = H(e);
|
|
9067
9068
|
return () => {
|
|
9068
|
-
let { lines: r, options: i, unavailableIds: a } = e.cart, o = (t) => Ja(t, e.catalog.landing.currency, e.lang), s = r.value.filter((e) => !a.value.includes(e.variantId)), c = s.reduce((e, t) => e + (i.value.find((e) => e.id === t.variantId)?.unitPriceMinor ?? 0) * t.quantity, 0), l = s.reduce((e, t) => e + t.quantity, 0), u = (e, t) => z("div", { class: "hv-totals-row" }, [z("dt", e), z("dd", t)]), d = ho(t, "totals-discount"), f = ho(t, "totals-delivery");
|
|
9069
|
+
let { lines: r, options: i, unavailableIds: a } = e.cart, o = (t) => Ja(t, e.catalog.landing.currency, e.lang), s = r.value.filter((e) => !a.value.includes(e.variantId)), c = s.reduce((e, t) => e + (i.value.find((e) => e.id === t.variantId)?.unitPriceMinor ?? 0) * t.quantity, 0), l = s.reduce((e, t) => e + t.quantity, 0), u = (e, t, n = !1) => z("div", { class: n ? "hv-totals-row hv-totals-note" : "hv-totals-row" }, [z("dt", e), z("dd", t)]), d = ho(t, "totals-discount"), f = ho(t, "totals-delivery");
|
|
9069
9070
|
return z("section", {
|
|
9070
9071
|
class: "hv-totals",
|
|
9071
9072
|
"aria-label": n.value.total
|
|
9072
9073
|
}, [z("dl", [
|
|
9073
9074
|
u(V(n.value.subtotal, { n: l }), o(c)),
|
|
9074
|
-
d ? u(n.value.discount, d) : null,
|
|
9075
|
-
f ? u(n.value.deliveryFee, f) : null,
|
|
9075
|
+
d ? u(n.value.discount, d, !0) : null,
|
|
9076
|
+
f ? u(n.value.deliveryFee, f, !0) : null,
|
|
9076
9077
|
z("div", { class: "hv-totals-row hv-totals-total" }, [z("dt", n.value.total), z("dd", { "aria-live": "polite" }, o(c))])
|
|
9077
9078
|
])]);
|
|
9078
9079
|
};
|
|
@@ -9466,7 +9467,7 @@ var sg = /* @__PURE__ */ P({
|
|
|
9466
9467
|
}, f(ag.filter((e) => e !== "success-extra")));
|
|
9467
9468
|
};
|
|
9468
9469
|
}
|
|
9469
|
-
}), cg = "1.0.
|
|
9470
|
+
}), cg = "1.0.2", lg = "hoverla-checkout";
|
|
9470
9471
|
function ug(e) {
|
|
9471
9472
|
return Array.from(e.classList).filter((e) => e.startsWith("hv-") && e !== "hv-sr-only").map((e) => e.slice(3)).join(" ");
|
|
9472
9473
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
hoverla-checkout.js sha384-
|
|
2
|
-
hoverla-checkout.mjs sha384-
|
|
1
|
+
hoverla-checkout.js sha384-J8UqIBkz8igWpqgGAZofzXcv0ckE6g/k+HOE+4GjW4bZVS13moIwyOWvZoK6b8Kj
|
|
2
|
+
hoverla-checkout.mjs sha384-nH6qiMmvUC0UgUkZ7OY85xA0WamdVgYMRrv7DbsWjsaJUlsH5LZWgrFyoS9ktzag
|