@designcrowd/library.brand-page 6.0.19-ast-btns → 6.0.19-ast-btns-2

package/lib/src/css/library.brand-page-designCom.min.css

@@ -1136,6 +1136,9 @@ a:not(.tw-lowercase) {
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.tw-min-w-full {
+    min-width: 100%
+}
 .tw-max-w-0 {
     max-width: 0px
 }
@@ -5687,40 +5690,56 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
    margin on the button itself shifts it out of alignment with the decoration. The
    top gap is instead applied to the wrapper (tw-mt-4 above) so the whole decorated
    unit moves together and stays flush at the container's bottom edge (BP-5800). */
-.bp-style-wrapper--no-margin[data-v-c2533ae5] button {
+.bp-style-wrapper--no-margin[data-v-255edfd5] button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-/* The brushstroke ends are transformed over the button's left/right edges, so
-   they must not capture clicks (BP-5882). */
-.bp-icon-brush-left[data-v-c2533ae5],
-.bp-icon-brush-right[data-v-c2533ae5] {
+/* Brushstroke: flanking brush-end icons are transformed over the button's
+   left/right edges, so they must not capture clicks (BP-5882). */
+.bp-icon-brush-left[data-v-255edfd5],
+.bp-icon-brush-right[data-v-255edfd5] {
   pointer-events: none;
 }
-
-/* Torn-paper: clip the button itself to a torn silhouette via a CSS alpha mask
-   (the button keeps its own fill). The mask stretches to the button box, so the
-   torn shape always matches the button — it can't overhang neighbours, stretch
-   past the button, or block clicks the way the old absolute overlay did
-   (BP-5882/BP-5883). */
-.bp-button-paper[data-v-c2533ae5] button,
-.bp-button-paper[data-v-c2533ae5] a {
-  -webkit-mask: var(--paper-mask) no-repeat center / 100% 100%;
-  mask: var(--paper-mask) no-repeat center / 100% 100%;
-  -webkit-mask-mode: alpha;
-  mask-mode: alpha;
-}
-.bp-icon-brush-left[data-v-c2533ae5] svg {
+.bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-c2533ae5] svg {
+.bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-c2533ae5],
-.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+
+/* Torn-paper: the button-paper icon sits BEHIND the button as its shape. The
+   wrapper is the positioning context; the icon is an inert inset layer that fills
+   the button box exactly (inset:0 + preserveAspectRatio none) without inflating
+   its size or capturing clicks (BP-5882/BP-5883). The button's own fill is made
+   transparent so the icon's colour shows through. */
+.bp-button-shape[data-v-255edfd5] {
+  position: relative;
+}
+.bp-icon-shape[data-v-255edfd5] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bp-button-shape[data-v-255edfd5] button,
+.bp-button-shape[data-v-255edfd5] a {
+  position: relative; /* sit above the inert background */
+  /* !important to override the host button's inline background-color. */
+  background-color: transparent !important;
+}
+/* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS
+   fill overrides the presentation attribute; clip-path rects are geometric so
+   recolouring them is harmless. */
+.bp-icon-shape[data-v-255edfd5] path,
+.bp-icon-shape[data-v-255edfd5] rect {
+  fill: currentColor;
+}
+.bp-button-arrow[data-v-255edfd5],
+.device-wrapper--mobile .bp-button-arrow[data-v-255edfd5] {
   /* Fixed-px arrowhead (not %) so the chevron is equally sharp at any button
      width — a %-based point collapses on narrow buttons (e.g. the 120px contact
      form submit) and only reads as an arrow on wide ones. */
@@ -6199,53 +6218,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-a6dab4ce] {
+.form-error[data-v-04e03cb2] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-a6dab4ce] {
+.contact-container[data-v-04e03cb2] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full[data-v-a6dab4ce] {
+.c-button-full[data-v-04e03cb2] {
+    width: 100%;
+}
+  /* Match the button's full-width on published mobile. The maker uses the
+     isMobileDevice prop for this; the renderer has no such state, so the
+     decorative-button wrapper is widened here via the real viewport instead. */
+[data-v-04e03cb2] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-a6dab4ce] {
+.c-col-span-2[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-a6dab4ce] {
+.c-mobile-padding[data-v-04e03cb2] {
     padding: 1rem;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6253,16 +6278,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-a6dab4ce] {
+.c-aspect-square[data-v-04e03cb2] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

package/lib/src/css/library.brand-page-preview.min.css

@@ -1106,6 +1106,9 @@ a.maker-anchor {
 .bp .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.bp .tw-min-w-full {
+    min-width: 100%
+}
 .bp .tw-max-w-0 {
     max-width: 0px
 }
@@ -5657,40 +5660,56 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
    margin on the button itself shifts it out of alignment with the decoration. The
    top gap is instead applied to the wrapper (tw-mt-4 above) so the whole decorated
    unit moves together and stays flush at the container's bottom edge (BP-5800). */
-.bp .bp-style-wrapper--no-margin[data-v-c2533ae5] button {
+.bp .bp-style-wrapper--no-margin[data-v-255edfd5] button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-/* The brushstroke ends are transformed over the button's left/right edges, so
-   they must not capture clicks (BP-5882). */
-.bp .bp-icon-brush-left[data-v-c2533ae5],
-.bp .bp-icon-brush-right[data-v-c2533ae5] {
+/* Brushstroke: flanking brush-end icons are transformed over the button's
+   left/right edges, so they must not capture clicks (BP-5882). */
+.bp .bp-icon-brush-left[data-v-255edfd5],
+.bp .bp-icon-brush-right[data-v-255edfd5] {
   pointer-events: none;
 }
-
-/* Torn-paper: clip the button itself to a torn silhouette via a CSS alpha mask
-   (the button keeps its own fill). The mask stretches to the button box, so the
-   torn shape always matches the button — it can't overhang neighbours, stretch
-   past the button, or block clicks the way the old absolute overlay did
-   (BP-5882/BP-5883). */
-.bp .bp-button-paper[data-v-c2533ae5] button,
-.bp .bp-button-paper[data-v-c2533ae5] a {
-  -webkit-mask: var(--paper-mask) no-repeat center / 100% 100%;
-  mask: var(--paper-mask) no-repeat center / 100% 100%;
-  -webkit-mask-mode: alpha;
-  mask-mode: alpha;
-}
-.bp .bp-icon-brush-left[data-v-c2533ae5] svg {
+.bp .bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp .bp-icon-brush-right[data-v-c2533ae5] svg {
+.bp .bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp .bp-button-arrow[data-v-c2533ae5],
-.bp .device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+
+/* Torn-paper: the button-paper icon sits BEHIND the button as its shape. The
+   wrapper is the positioning context; the icon is an inert inset layer that fills
+   the button box exactly (inset:0 + preserveAspectRatio none) without inflating
+   its size or capturing clicks (BP-5882/BP-5883). The button's own fill is made
+   transparent so the icon's colour shows through. */
+.bp .bp-button-shape[data-v-255edfd5] {
+  position: relative;
+}
+.bp .bp-icon-shape[data-v-255edfd5] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bp .bp-button-shape[data-v-255edfd5] button,
+.bp .bp-button-shape[data-v-255edfd5] a {
+  position: relative; /* sit above the inert background */
+  /* !important to override the host button's inline background-color. */
+  background-color: transparent !important;
+}
+/* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS
+   fill overrides the presentation attribute; clip-path rects are geometric so
+   recolouring them is harmless. */
+.bp .bp-icon-shape[data-v-255edfd5] path,
+.bp .bp-icon-shape[data-v-255edfd5] rect {
+  fill: currentColor;
+}
+.bp .bp-button-arrow[data-v-255edfd5],
+.bp .device-wrapper--mobile .bp-button-arrow[data-v-255edfd5] {
   /* Fixed-px arrowhead (not %) so the chevron is equally sharp at any button
      width — a %-based point collapses on narrow buttons (e.g. the 120px contact
      form submit) and only reads as an arrow on wide ones. */
@@ -6169,53 +6188,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.bp .form-error[data-v-a6dab4ce] {
+.bp .form-error[data-v-04e03cb2] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.bp .contact-container[data-v-a6dab4ce] {
+.bp .contact-container[data-v-04e03cb2] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .c-text-padding[data-v-a6dab4ce] {
+.bp .c-text-padding[data-v-04e03cb2] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.bp .device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
+.bp .device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
+.bp .device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.bp .c-button-full[data-v-a6dab4ce] {
+.bp .c-button-full[data-v-04e03cb2] {
+    width: 100%;
+}
+  /* Match the button's full-width on published mobile. The maker uses the
+     isMobileDevice prop for this; the renderer has no such state, so the
+     decorative-button wrapper is widened here via the real viewport instead. */
+[data-v-04e03cb2] .bp-style-wrapper {
     width: 100%;
 }
-.bp .c-col-span-2[data-v-a6dab4ce] {
+.bp .c-col-span-2[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
 }
-.bp .c-mobile-padding[data-v-a6dab4ce] {
+.bp .c-mobile-padding[data-v-04e03cb2] {
     padding: 1rem;
 }
-.bp .c-text-padding[data-v-a6dab4ce] {
+.bp .c-text-padding[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.bp .c-divided-container[data-v-a6dab4ce] {
+.bp .c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c-divided-container-reverse[data-v-a6dab4ce] {
+.bp .c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6223,16 +6248,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.bp .c-aspect-square[data-v-a6dab4ce] {
+.bp .c-aspect-square[data-v-04e03cb2] {
     aspect-ratio: 1 / 1;
 }
-.bp .c-divided-container[data-v-a6dab4ce] {
+.bp .c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.bp .c-divided-container-reverse[data-v-a6dab4ce] {
+.bp .c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { A as T, a as E, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as t, j as G, k as D, l as P, m as R, n as o, o as L, p as M, q as r, r as n, s as b, t as l, u as F, v as i, w as g, x as c, y as B, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as m, J as K, K as k, L as V, M as X, N as v, O as h, P as f, Q as x, R as W, S as z, T as w, U as Z, V as j, W as q, X as J, Y as Q, Z as $, $ as aa, a0 as _a, a1 as Ta, a2 as Ea, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as ta, ac as Ga, ad as Da, ae as Pa, af as Ra, ag as oa, ah as La, ai as Ma, aj as ra, ak as na, al as ba, am as la, an as Fa, ao as ia, ap as ga, aq as ca, ar as Ba, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as ma, aA as Ka, aB as ka, aC as Va, aD as Xa, aE as va, aF as ha, aG as fa, aH as xa, aI as Wa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Ja, aP as Qa, aQ as $a, aR as a_, aS as __, aT as T_, aU as E_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as t_, b2 as G_, b3 as D_, b4 as P_, b5 as R_, b6 as o_, b7 as L_, b8 as M_, b9 as r_, ba as n_, bb as b_, bc as l_, bd as F_, be as i_, bf as g_, bg as c_, bh as B_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as m_, bq as K_, br as k_, bs as V_, bt as X_, bu as v_, bv as h_, bw as f_, bx as x_, by as W_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as J_, bF as Q_, bG as $_, bH as aT, bI as _T, bJ as TT, bK as ET, bL as sT, bM as IT, bN as ST, bO as NT, bP as eT, bQ as AT, bR as OT, bS as CT, bT as tT, bU as GT, bV as DT, bW as PT, bX as RT, bY as oT, bZ as LT, b_ as MT, b$ as rT, c0 as nT, c1 as bT, c2 as lT, c3 as FT, c4 as iT, c5 as gT, c6 as cT, c7 as BT, c8 as YT, c9 as UT, ca as dT, cb as uT, cc as HT, cd as pT, ce as yT, cf as mT, cg as KT, ch as kT, ci as VT, cj as XT, ck as vT, cl as hT, cm as fT, cn as xT, co as WT, cp as zT, cq as wT, cr as ZT, cs as jT } from "./lib-ce4Vsuiu.js";
+import { A as T, a as E, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as t, j as G, k as D, l as P, m as R, n as o, o as L, p as M, q as r, r as n, s as b, t as l, u as F, v as i, w as g, x as c, y as B, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as m, J as K, K as k, L as V, M as X, N as v, O as h, P as f, Q as x, R as W, S as z, T as w, U as Z, V as j, W as q, X as J, Y as Q, Z as $, $ as aa, a0 as _a, a1 as Ta, a2 as Ea, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as ta, ac as Ga, ad as Da, ae as Pa, af as Ra, ag as oa, ah as La, ai as Ma, aj as ra, ak as na, al as ba, am as la, an as Fa, ao as ia, ap as ga, aq as ca, ar as Ba, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as ma, aA as Ka, aB as ka, aC as Va, aD as Xa, aE as va, aF as ha, aG as fa, aH as xa, aI as Wa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Ja, aP as Qa, aQ as $a, aR as a_, aS as __, aT as T_, aU as E_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as t_, b2 as G_, b3 as D_, b4 as P_, b5 as R_, b6 as o_, b7 as L_, b8 as M_, b9 as r_, ba as n_, bb as b_, bc as l_, bd as F_, be as i_, bf as g_, bg as c_, bh as B_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as m_, bq as K_, br as k_, bs as V_, bt as X_, bu as v_, bv as h_, bw as f_, bx as x_, by as W_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as J_, bF as Q_, bG as $_, bH as aT, bI as _T, bJ as TT, bK as ET, bL as sT, bM as IT, bN as ST, bO as NT, bP as eT, bQ as AT, bR as OT, bS as CT, bT as tT, bU as GT, bV as DT, bW as PT, bX as RT, bY as oT, bZ as LT, b_ as MT, b$ as rT, c0 as nT, c1 as bT, c2 as lT, c3 as FT, c4 as iT, c5 as gT, c6 as cT, c7 as BT, c8 as YT, c9 as UT, ca as dT, cb as uT, cc as HT, cd as pT, ce as yT, cf as mT, cg as KT, ch as kT, ci as VT, cj as XT, ck as vT, cl as hT, cm as fT, cn as xT, co as WT, cp as zT, cq as wT, cr as ZT, cs as jT } from "./lib-CfENvLvt.js";
 import { U as JT, u as QT } from "./useEventTracker-DmQ6AkNn.js";
 import { createPinia as aE, setActivePinia as _E } from "pinia";
 export {