@patternmode/aperto 2.0.0 → 3.0.1

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-leading:initial;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}[data-slot=aperto-trigger]{border-radius:var(--aperto-radius,.5rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 0);text-align:left;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;cursor:zoom-in;transition-property:filter,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.2s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));background-color:#0000;border-width:0;outline-style:none;display:block;position:relative;overflow:hidden}[data-slot=aperto-trigger]:hover{--tw-brightness:brightness(.96);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}[data-slot=aperto-trigger]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#fffc}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-trigger]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-white,#fff) 80%, transparent)}}[data-slot=aperto-trigger]:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--color-black,#000)}[data-slot=aperto-trigger]>img,[data-slot=aperto-trigger]>video{object-fit:cover;width:100%;height:100%;display:block}[data-slot=aperto-trigger][data-aperto-active] img,[data-slot=aperto-trigger][data-aperto-active] video{visibility:hidden}[data-slot=aperto-overlay]{inset:calc(var(--spacing,.25rem) * 0);z-index:1000;background-color:#000c;position:fixed}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-overlay]{background-color:color-mix(in oklab, var(--color-black,#000) 80%, transparent)}}[data-slot=aperto-content]{--aperto-panel-max-h:min(90vh, 920px);z-index:1001;height:fit-content;max-height:var(--aperto-panel-max-h);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--aperto-radius,.5rem);width:fit-content;max-width:min(92vw,1200px);padding:calc(var(--spacing,.25rem) * 0);color:var(--color-white,#fff);--tw-outline-style:none;overscroll-behavior:contain;outline-style:none;flex-direction:column;display:flex;position:fixed;overflow:visible}[data-slot=aperto-content]>img,[data-slot=aperto-content]>video,[data-slot=aperto-content]>[data-slot=aperto-media]{--aperto-media-max-h:min(calc(100dvh - 8rem), calc(var(--aperto-panel-max-h,min(90vh, 920px)) - var(--aperto-caption-allowance,6rem)));border-radius:var(--aperto-radius,.5rem);aspect-ratio:var(--aperto-expanded-aspect-ratio,3 / 2);height:auto;max-height:var(--aperto-media-max-h);max-width:90vw;width:min(var(--aperto-expanded-width,76vw), calc(var(--aperto-media-max-h) * ( var(--aperto-expanded-aspect-ratio-width,3) / var(--aperto-expanded-aspect-ratio-height,2) )), 1000px, 90vw);flex-shrink:0;display:block}[data-slot=aperto-media]{position:relative;overflow:hidden}[data-slot=aperto-media]>img,[data-slot=aperto-media]>video,[data-slot=aperto-media-stage]>img,[data-slot=aperto-media-stage]>video,[data-slot=aperto-transition-media]>img,[data-slot=aperto-transition-media]>video{width:100%;height:100%;display:block}[data-slot=aperto-media-stage]{inset:calc(var(--spacing,.25rem) * 0);position:absolute}[data-slot=aperto-content][data-aperto-transition] [data-slot=aperto-media-stage],[data-slot=aperto-transition-media]{will-change:opacity, transform}[data-slot=aperto-content][data-aperto-transition]>*{pointer-events:none;opacity:0}@keyframes aperto-control-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-close],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-media]>[data-slot=aperto-previous-button],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-media]>[data-slot=aperto-next-button]{animation:.35s cubic-bezier(.25,.1,.12,1) 80ms both aperto-control-in}[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-title],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-description],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-counter]{animation:.4s cubic-bezier(.25,.1,.12,1) .18s both aperto-control-in}[data-slot=aperto-title]{text-align:center;--tw-leading:var(--leading-snug,1.375);max-width:60ch;font-size:13px;line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-title]{color:color-mix(in oklab, var(--color-white,#fff) 90%, transparent)}}[data-slot=aperto-description]{margin-top:calc(var(--spacing,.25rem) * -1.5);text-align:center;--tw-leading:var(--leading-snug,1.375);max-width:60ch;font-size:13px;line-height:var(--leading-snug,1.375);color:#fff9}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-description]{color:color-mix(in oklab, var(--color-white,#fff) 60%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{z-index:10;width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);background-color:#ffffff1a;border-width:0;border-radius:3.40282e38px;place-items:center;display:grid;position:absolute}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{background-color:color-mix(in oklab, var(--color-white,#fff) 10%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{color:color-mix(in oklab, var(--color-white,#fff) 70%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{transition-property:background,color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1))}@media (hover:hover) and (pointer:fine){[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{background-color:color-mix(in oklab, var(--color-white,#fff) 20%, transparent)}}[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{color:var(--color-white,#fff)}}[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#fff9}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-white,#fff) 60%, transparent)}}[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-outline-style:none;outline-style:none}[data-slot=aperto-close]{top:calc(var(--spacing,.25rem) * 3);right:calc(var(--spacing,.25rem) * 3)}[data-slot=aperto-previous-button]{top:50%;left:calc(var(--spacing,.25rem) * 3);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}[data-slot=aperto-next-button]{top:50%;right:calc(var(--spacing,.25rem) * 3);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}[data-slot=aperto-close]>svg,[data-slot=aperto-previous-button]>svg,[data-slot=aperto-next-button]>svg{pointer-events:none;width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}[data-slot=aperto-counter]{background-color:#ffffff1a;border-radius:3.40282e38px}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-counter]{background-color:color-mix(in oklab, var(--color-white,#fff) 10%, transparent)}}[data-slot=aperto-counter]{padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * .5);--tw-font-weight:var(--font-weight-medium,500);font-size:11px;font-weight:var(--font-weight-medium,500);color:#ffffff80}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-counter]{color:color-mix(in oklab, var(--color-white,#fff) 50%, transparent)}}@media (max-width:560px){[data-slot=aperto-content]{gap:calc(var(--spacing,.25rem) * 2);max-width:calc(100vw - 1rem)}[data-slot=aperto-content]>img,[data-slot=aperto-content]>video,[data-slot=aperto-content]>[data-slot=aperto-media]{--aperto-media-max-h:min(calc(100dvh - 12rem), calc(var(--aperto-panel-max-h,min(90vh, 920px)) - var(--aperto-caption-allowance,6rem)));max-height:var(--aperto-media-max-h);max-width:calc(100vw - 2rem);width:min(calc(100vw - 2rem), calc(var(--aperto-media-max-h) * ( var(--aperto-expanded-aspect-ratio-width,3) / var(--aperto-expanded-aspect-ratio-height,2) )))}[data-slot=aperto-title],[data-slot=aperto-description]{max-width:calc(100vw - 2rem)}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{width:calc(var(--spacing,.25rem) * 11);height:calc(var(--spacing,.25rem) * 11);touch-action:manipulation}[data-slot=aperto-close]{top:calc(var(--spacing,.25rem) * 2);right:calc(var(--spacing,.25rem) * 2)}[data-slot=aperto-previous-button]{left:calc(var(--spacing,.25rem) * 2)}[data-slot=aperto-next-button]{right:calc(var(--spacing,.25rem) * 2)}}@media (prefers-reduced-motion:reduce){[data-slot=aperto-content]:not([data-aperto-transition])>*{animation:none!important}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-leading:initial;--tw-font-weight:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme,base;@layer components{[data-slot=aperto-trigger]{border-radius:var(--aperto-radius,.5rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 0);text-align:left;--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;cursor:zoom-in;transition-property:filter,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.2s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1));background-color:#0000;border-width:0;outline-style:none;display:block;position:relative;overflow:hidden}[data-slot=aperto-trigger]:hover{--tw-brightness:brightness(.96);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}[data-slot=aperto-trigger]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#fffc}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-trigger]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-white,#fff) 80%, transparent)}}[data-slot=aperto-trigger]:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--color-black,#000)}[data-slot=aperto-trigger]>img,[data-slot=aperto-trigger]>video{object-fit:cover;width:100%;height:100%;display:block}[data-slot=aperto-trigger][data-aperto-active] img,[data-slot=aperto-trigger][data-aperto-active] video{visibility:hidden}[data-slot=aperto-overlay]{inset:calc(var(--spacing,.25rem) * 0);z-index:1000;background-color:#000c;position:fixed}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-overlay]{background-color:color-mix(in oklab, var(--color-black,#000) 80%, transparent)}}[data-slot=aperto-content]{--aperto-panel-max-h:min(90vh, 920px);z-index:1001;height:fit-content;max-height:var(--aperto-panel-max-h);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--aperto-radius,.5rem);width:fit-content;max-width:min(92vw,1200px);padding:calc(var(--spacing,.25rem) * 0);color:var(--color-white,#fff);--tw-outline-style:none;overscroll-behavior:contain;outline-style:none;flex-direction:column;display:flex;position:fixed;overflow:visible}[data-slot=aperto-content]>img,[data-slot=aperto-content]>video,[data-slot=aperto-content]>[data-slot=aperto-media]{--aperto-media-max-h:min(calc(100dvh - 8rem), calc(var(--aperto-panel-max-h,min(90vh, 920px)) - var(--aperto-caption-allowance,6rem)));border-radius:var(--aperto-radius,.5rem);aspect-ratio:var(--aperto-expanded-aspect-ratio,3 / 2);height:auto;max-height:var(--aperto-media-max-h);max-width:90vw;width:min(var(--aperto-expanded-width,76vw), calc(var(--aperto-media-max-h) * ( var(--aperto-expanded-aspect-ratio-width,3) / var(--aperto-expanded-aspect-ratio-height,2) )), 1000px, 90vw);flex-shrink:0;display:block}[data-slot=aperto-media]{position:relative;overflow:hidden}[data-slot=aperto-media]>img,[data-slot=aperto-media]>video,[data-slot=aperto-media-stage]>img,[data-slot=aperto-media-stage]>video,[data-slot=aperto-transition-media]>img,[data-slot=aperto-transition-media]>video{width:100%;height:100%;display:block}[data-slot=aperto-media-stage]{inset:calc(var(--spacing,.25rem) * 0);position:absolute}[data-slot=aperto-content][data-aperto-transition] [data-slot=aperto-media-stage],[data-slot=aperto-transition-media]{will-change:opacity, transform}[data-slot=aperto-content][data-aperto-transition]>*{pointer-events:none;opacity:0}@keyframes aperto-control-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-close],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-media]>[data-slot=aperto-previous-button],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-media]>[data-slot=aperto-next-button]{animation:.35s cubic-bezier(.25,.1,.12,1) 80ms both aperto-control-in}[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-title],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-description],[data-slot=aperto-content]:not([data-aperto-transition])>[data-slot=aperto-counter]{animation:.4s cubic-bezier(.25,.1,.12,1) .18s both aperto-control-in}[data-slot=aperto-title]{text-align:center;--tw-leading:var(--leading-snug,1.375);max-width:60ch;font-size:13px;line-height:var(--leading-snug,1.375);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-title]{color:color-mix(in oklab, var(--color-white,#fff) 90%, transparent)}}[data-slot=aperto-description]{margin-top:calc(var(--spacing,.25rem) * -1.5);text-align:center;--tw-leading:var(--leading-snug,1.375);max-width:60ch;font-size:13px;line-height:var(--leading-snug,1.375);color:#fff9}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-description]{color:color-mix(in oklab, var(--color-white,#fff) 60%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{z-index:10;width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);background-color:#ffffff1a;border-width:0;border-radius:3.40282e38px;place-items:center;display:grid;position:absolute}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{background-color:color-mix(in oklab, var(--color-white,#fff) 10%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{color:color-mix(in oklab, var(--color-white,#fff) 70%, transparent)}}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{transition-property:background,color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-duration:.15s;transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1))}@media (hover:hover) and (pointer:fine){[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{background-color:color-mix(in oklab, var(--color-white,#fff) 20%, transparent)}}[data-slot=aperto-close]:hover,[data-slot=aperto-previous-button]:hover,[data-slot=aperto-next-button]:hover{color:var(--color-white,#fff)}}[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#fff9}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-white,#fff) 60%, transparent)}}[data-slot=aperto-close]:focus-visible,[data-slot=aperto-previous-button]:focus-visible,[data-slot=aperto-next-button]:focus-visible{--tw-outline-style:none;outline-style:none}[data-slot=aperto-close]{top:calc(var(--spacing,.25rem) * 3);right:calc(var(--spacing,.25rem) * 3)}[data-slot=aperto-previous-button]{top:50%;left:calc(var(--spacing,.25rem) * 3);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}[data-slot=aperto-next-button]{top:50%;right:calc(var(--spacing,.25rem) * 3);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}[data-slot=aperto-close]>svg,[data-slot=aperto-previous-button]>svg,[data-slot=aperto-next-button]>svg{pointer-events:none;width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}[data-slot=aperto-counter]{background-color:#ffffff1a;border-radius:3.40282e38px}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-counter]{background-color:color-mix(in oklab, var(--color-white,#fff) 10%, transparent)}}[data-slot=aperto-counter]{padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * .5);--tw-font-weight:var(--font-weight-medium,500);font-size:11px;font-weight:var(--font-weight-medium,500);color:#ffffff80}@supports (color:color-mix(in lab, red, red)){[data-slot=aperto-counter]{color:color-mix(in oklab, var(--color-white,#fff) 50%, transparent)}}@media (max-width:560px){[data-slot=aperto-content]{gap:calc(var(--spacing,.25rem) * 2);max-width:calc(100vw - 1rem)}[data-slot=aperto-content]>img,[data-slot=aperto-content]>video,[data-slot=aperto-content]>[data-slot=aperto-media]{--aperto-media-max-h:min(calc(100dvh - 12rem), calc(var(--aperto-panel-max-h,min(90vh, 920px)) - var(--aperto-caption-allowance,6rem)));max-height:var(--aperto-media-max-h);max-width:calc(100vw - 2rem);width:min(calc(100vw - 2rem), calc(var(--aperto-media-max-h) * ( var(--aperto-expanded-aspect-ratio-width,3) / var(--aperto-expanded-aspect-ratio-height,2) )))}[data-slot=aperto-title],[data-slot=aperto-description]{max-width:calc(100vw - 2rem)}[data-slot=aperto-close],[data-slot=aperto-previous-button],[data-slot=aperto-next-button]{width:calc(var(--spacing,.25rem) * 11);height:calc(var(--spacing,.25rem) * 11);touch-action:manipulation}[data-slot=aperto-close]{top:calc(var(--spacing,.25rem) * 2);right:calc(var(--spacing,.25rem) * 2)}[data-slot=aperto-previous-button]{left:calc(var(--spacing,.25rem) * 2)}[data-slot=aperto-next-button]{right:calc(var(--spacing,.25rem) * 2)}}@media (prefers-reduced-motion:reduce){[data-slot=aperto-content]:not([data-aperto-transition])>*{animation:none!important}}}@layer utilities;@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternmode/aperto",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "Opinionated, styled thumbnail-to-expanded media transitions for React.",
   "homepage": "https://github.com/howells/patternmode/tree/main/packages/aperto#readme",
   "bugs": {
@@ -34,7 +34,6 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "motion": "^12.40.0",
     "@howells/motion": "0.2.0"
   },
   "devDependencies": {
@@ -49,15 +48,17 @@
     "concurrently": "^9.2.1",
     "jsdom": "^29.1.1",
     "lucide-react": "^1.17.0",
+    "motion": "^12.40.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwindcss": "^4.3.0",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "lucide-react": "^1.17.0",
+    "motion": "^12.40.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },