vireuikit 0.6.0 → 0.7.0

package/dist/web.d.cts

@@ -11,12 +11,22 @@ interface VireControlElement extends HTMLElement {
     a11y: A11yOverride;
     sample: BackdropSample | null;
     setMorph(morph: GlassMorph | null): void;
+    /** A menu growing out of this control carries its body: no lens and no body of its own, the glyph in
+     *  focus by `ink` (1 sharp, 0 gone). `null` takes the body back. */
+    setCarried(ink: number | null): void;
 }
 
-declare const STYLES = "\nvire-button,vire-icon-button{display:inline-flex;vertical-align:middle}\n:is(vire-button,vire-icon-button)[data-vk]{position:relative;--vk-press:0;--vk-hover:0;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}\n:is(vire-button,vire-icon-button)[data-vk]::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}\n:is(vire-button,vire-icon-button)[data-vk]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;\n font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;\n display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;\n height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);\n -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*100%),transparent);\n text-shadow:0 0 calc(var(--vk-press)*var(--vk-defocus)*1px) currentColor;\n background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;\n transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}\nvire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;\n opacity:calc(1 - var(--vk-press)*.45);filter:blur(calc(var(--vk-press)*var(--vk-defocus)*1px))}\n:is(vire-button,vire-icon-button)[data-vk]>button:disabled{cursor:default}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button>svg{opacity:.4}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline:2px solid currentColor;outline-offset:2px}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=frosted]>button{\n background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\n box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}\n\n@supports not (color:oklab(from red l a b)){\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}\n}\n\n:is(vire-button,vire-icon-button)[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=frosted]>button{background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=glass]>button{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\n\n@media (forced-colors:active){\n:is(vire-button,vire-icon-button)[data-vk]>button{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{opacity:1;filter:none}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline-color:Highlight}\n}\n";
+interface VireMenuElement extends HTMLElement {
+    a11y: A11yOverride;
+    sample: BackdropSample | null;
+    readonly open: boolean;
+}
+
+declare const STYLES = "\nvire-button,vire-icon-button,vire-menu{display:inline-flex;vertical-align:middle}\n:is(vire-button,vire-icon-button)[data-vk]{position:relative;--vk-press:0;--vk-hover:0;--vk-carry:1;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}\n:is(vire-button,vire-icon-button)[data-vk]::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}\n:is(vire-button,vire-icon-button)[data-vk]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;\n font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;\n display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;\n height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);\n -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*var(--vk-carry)*100%),transparent);\n text-shadow:0 0 calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px) color-mix(in srgb,currentColor calc(var(--vk-carry)*100%),transparent);\n background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;\n transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}\nvire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;\n opacity:calc((1 - var(--vk-press)*.45)*var(--vk-carry));filter:blur(calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px))}\n:is(vire-button,vire-icon-button)[data-vk]>button:disabled{cursor:default}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button>svg{opacity:.4}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline:2px solid currentColor;outline-offset:2px}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=frosted]>button{\n background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\n box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}\n\nvire-menu[data-vk]{position:relative;--vk-ink-in:1;--vk-cx:0px;--vk-cy:0px}\nvire-menu[data-vk]>[popover]{position:fixed;inset:auto;left:var(--vk-x,0);top:var(--vk-y,0);width:var(--vk-w,auto);height:var(--vk-h,auto);\n margin:0;padding:var(--vk-menu-pad);border:0;border-radius:var(--vk-r,var(--vk-menu-radius));box-sizing:border-box;\n overflow:clip;color:inherit;font:inherit;background:transparent;outline:none;\n --vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0}\nvire-menu[data-vk]>[popover]:popover-open{display:flex;flex-direction:column;align-items:flex-start}\nvire-menu[data-vk][data-phase=open]>[popover][data-scroll]{overflow-y:auto}\nvire-menu[data-vk]>[popover]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;flex:none;position:relative;\n font:inherit;line-height:1.2;color:inherit;text-align:start;white-space:nowrap;\n display:flex;align-items:center;width:var(--vk-content-w,auto);height:var(--vk-menu-row);\n padding-block:0;padding-inline:var(--vk-label-pad) var(--vk-menu-row);border-radius:var(--vk-item-radius);\n background:color-mix(in srgb,currentColor calc(var(--vk-fill,0)*100%),transparent);\n cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}\nvire-menu[data-vk]>[popover]:has(>button>svg)>button{padding-inline-start:var(--vk-menu-row)}\nvire-menu[data-vk]>[popover]>button>svg{position:absolute;inset-inline-start:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);top:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);\n width:var(--vk-menu-icon);height:var(--vk-menu-icon)}\nvire-menu[data-vk]>[popover]>button:is(:focus,[data-vire-force-state=hover]){--vk-fill:var(--vk-fill-active)}\nvire-menu[data-vk]>[popover]>button:is([data-pressed],[data-vire-force-state=pressed]){--vk-fill:var(--vk-fill-pressed)}\nvire-menu[data-vk]>[popover]>button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true]){cursor:default;--vk-fill:0;-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true])>svg{opacity:.4}\nvire-menu[data-vk][data-phase=moving]>[popover]{padding:0}\nvire-menu[data-vk][data-phase=moving]>[popover]>*{transform:translate(calc(var(--vk-cx) + var(--vk-menu-pad)),calc(var(--vk-cy) + var(--vk-menu-pad)));\n opacity:min(1,calc(var(--vk-ink-in)*2));filter:blur(calc((1 - var(--vk-ink-in))*8px))}\nvire-menu[data-vk][data-measure]>[popover]{width:max-content!important;height:auto!important;left:0!important;top:0!important;padding:var(--vk-menu-pad)!important;visibility:hidden}\nvire-menu[data-vk][data-measure]>[popover]>*{width:auto!important;transform:none!important}\n\nvire-menu[data-vk][data-surface=glass]>[popover]{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\nvire-menu[data-vk][data-frost][data-surface=glass]>[popover]{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\nvire-menu[data-vk][data-surface=plain]>[popover]{background:Canvas;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 10px 30px color-mix(in srgb,currentColor 18%,transparent)}\nvire-menu[data-vk][data-surface=frosted]>[popover]{background:color-mix(in srgb,Canvas 88%,currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 10px 30px color-mix(in srgb,currentColor 18%,transparent)}\n\n@supports not (color:oklab(from red l a b)){\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button,vire-menu[data-vk][data-frost][data-surface=glass]>[popover]{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}\n}\n\n:is(vire-button,vire-icon-button)[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=frosted]>button{background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=glass]>button{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\nvire-menu[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>[popover]{background:Canvas;box-shadow:inset 0 0 0 2px currentColor}\nvire-menu[data-vk][data-contrast][data-surface=glass]>[popover]{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;pointer-events:none}\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button::after{visibility:hidden}\n\n@media (forced-colors:active){\n:is(vire-button,vire-icon-button)[data-vk]>button{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{opacity:1;filter:none}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline-color:Highlight}\nvire-menu[data-vk]>[popover]{color:CanvasText!important;background:Canvas!important;border:1px solid CanvasText;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}\nvire-menu[data-vk]>[popover]>*{filter:none!important;opacity:1!important}\nvire-menu[data-vk]>[popover]>button{-webkit-text-fill-color:currentColor!important;color:CanvasText;background:Canvas}\nvire-menu[data-vk]>[popover]>button:is(:focus,[data-vire-force-state=hover],[data-pressed]){color:HighlightText;background:Highlight}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true]){color:GrayText;background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button{opacity:var(--vk-carry)}\n}\n";
 
 declare const BUTTON_TAG = "vire-button";
 declare const ICON_BUTTON_TAG = "vire-icon-button";
+declare const MENU_TAG = "vire-menu";
 type DefineOptions = {
     /** CSP nonce for the stylesheet the elements inject. Alternatively, ship `STYLES` yourself. */
     nonce?: string | undefined;
@@ -24,4 +34,4 @@ type DefineOptions = {
 };
 declare function defineVireElements(options?: DefineOptions): void;
 
-export { BUTTON_TAG, type DefineOptions, ICON_BUTTON_TAG, STYLES, type VireControlElement, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };
+export { BUTTON_TAG, type DefineOptions, ICON_BUTTON_TAG, MENU_TAG, STYLES, type VireControlElement, type VireMenuElement, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };

package/dist/web.d.ts

@@ -11,12 +11,22 @@ interface VireControlElement extends HTMLElement {
     a11y: A11yOverride;
     sample: BackdropSample | null;
     setMorph(morph: GlassMorph | null): void;
+    /** A menu growing out of this control carries its body: no lens and no body of its own, the glyph in
+     *  focus by `ink` (1 sharp, 0 gone). `null` takes the body back. */
+    setCarried(ink: number | null): void;
 }
 
-declare const STYLES = "\nvire-button,vire-icon-button{display:inline-flex;vertical-align:middle}\n:is(vire-button,vire-icon-button)[data-vk]{position:relative;--vk-press:0;--vk-hover:0;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}\n:is(vire-button,vire-icon-button)[data-vk]::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}\n:is(vire-button,vire-icon-button)[data-vk]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;\n font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;\n display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;\n height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);\n -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*100%),transparent);\n text-shadow:0 0 calc(var(--vk-press)*var(--vk-defocus)*1px) currentColor;\n background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;\n transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}\nvire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;\n opacity:calc(1 - var(--vk-press)*.45);filter:blur(calc(var(--vk-press)*var(--vk-defocus)*1px))}\n:is(vire-button,vire-icon-button)[data-vk]>button:disabled{cursor:default}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button>svg{opacity:.4}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline:2px solid currentColor;outline-offset:2px}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=frosted]>button{\n background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\n box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}\n\n@supports not (color:oklab(from red l a b)){\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}\n}\n\n:is(vire-button,vire-icon-button)[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=frosted]>button{background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=glass]>button{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\n\n@media (forced-colors:active){\n:is(vire-button,vire-icon-button)[data-vk]>button{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{opacity:1;filter:none}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline-color:Highlight}\n}\n";
+interface VireMenuElement extends HTMLElement {
+    a11y: A11yOverride;
+    sample: BackdropSample | null;
+    readonly open: boolean;
+}
+
+declare const STYLES = "\nvire-button,vire-icon-button,vire-menu{display:inline-flex;vertical-align:middle}\n:is(vire-button,vire-icon-button)[data-vk]{position:relative;--vk-press:0;--vk-hover:0;--vk-carry:1;--vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0;--vk-grow:0;--vk-defocus:0;--vk-slop-x:0;--vk-slop-y:0}\n:is(vire-button,vire-icon-button)[data-vk]::before{content:'';position:absolute;inset:calc(var(--vk-slop-y)*-1px) calc(var(--vk-slop-x)*-1px)}\n:is(vire-button,vire-icon-button)[data-vk]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;\n font:inherit;font-weight:500;line-height:1;white-space:nowrap;color:inherit;\n display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;\n height:var(--vk-height);min-width:var(--vk-height);padding:0 var(--vk-pad-x);border-radius:var(--vk-radius);\n -webkit-text-fill-color:color-mix(in srgb,currentColor calc((1 - var(--vk-press)*.55)*var(--vk-carry)*100%),transparent);\n text-shadow:0 0 calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px) color-mix(in srgb,currentColor calc(var(--vk-carry)*100%),transparent);\n background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;\n transform:scale(calc(1 + var(--vk-press)*var(--vk-grow)))}\nvire-icon-button[data-vk]>button{padding:0;width:var(--vk-height)}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{width:var(--vk-icon);height:var(--vk-icon);flex:none;\n opacity:calc((1 - var(--vk-press)*.45)*var(--vk-carry));filter:blur(calc((var(--vk-press)*var(--vk-defocus) + (1 - var(--vk-carry))*4)*1px))}\n:is(vire-button,vire-icon-button)[data-vk]>button:disabled{cursor:default}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button>svg{opacity:.4}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline:2px solid currentColor;outline-offset:2px}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=glass]>button{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=plain]>button{background:color-mix(in srgb,currentColor calc(10% + var(--vk-hover)*6% + var(--vk-press)*14%),transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-surface=frosted]>button{\n background:color-mix(in srgb,Canvas calc(88% - var(--vk-hover)*4% - var(--vk-press)*10%),currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\n box-shadow:0 1px 3px color-mix(in srgb,currentColor 22%,transparent)}\n\nvire-menu[data-vk]{position:relative;--vk-ink-in:1;--vk-cx:0px;--vk-cy:0px}\nvire-menu[data-vk]>[popover]{position:fixed;inset:auto;left:var(--vk-x,0);top:var(--vk-y,0);width:var(--vk-w,auto);height:var(--vk-h,auto);\n margin:0;padding:var(--vk-menu-pad);border:0;border-radius:var(--vk-r,var(--vk-menu-radius));box-sizing:border-box;\n overflow:clip;color:inherit;font:inherit;background:transparent;outline:none;\n --vk-body-alpha:0;--vk-body-white:0;--vk-body-lift:0}\nvire-menu[data-vk]>[popover]:popover-open{display:flex;flex-direction:column;align-items:flex-start}\nvire-menu[data-vk][data-phase=open]>[popover][data-scroll]{overflow-y:auto}\nvire-menu[data-vk]>[popover]>button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;border:0;outline:none;flex:none;position:relative;\n font:inherit;line-height:1.2;color:inherit;text-align:start;white-space:nowrap;\n display:flex;align-items:center;width:var(--vk-content-w,auto);height:var(--vk-menu-row);\n padding-block:0;padding-inline:var(--vk-label-pad) var(--vk-menu-row);border-radius:var(--vk-item-radius);\n background:color-mix(in srgb,currentColor calc(var(--vk-fill,0)*100%),transparent);\n cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}\nvire-menu[data-vk]>[popover]:has(>button>svg)>button{padding-inline-start:var(--vk-menu-row)}\nvire-menu[data-vk]>[popover]>button>svg{position:absolute;inset-inline-start:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);top:calc((var(--vk-menu-row) - var(--vk-menu-icon))/2);\n width:var(--vk-menu-icon);height:var(--vk-menu-icon)}\nvire-menu[data-vk]>[popover]>button:is(:focus,[data-vire-force-state=hover]){--vk-fill:var(--vk-fill-active)}\nvire-menu[data-vk]>[popover]>button:is([data-pressed],[data-vire-force-state=pressed]){--vk-fill:var(--vk-fill-pressed)}\nvire-menu[data-vk]>[popover]>button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true]){cursor:default;--vk-fill:0;-webkit-text-fill-color:color-mix(in srgb,currentColor 40%,transparent)}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true])>svg{opacity:.4}\nvire-menu[data-vk][data-phase=moving]>[popover]{padding:0}\nvire-menu[data-vk][data-phase=moving]>[popover]>*{transform:translate(calc(var(--vk-cx) + var(--vk-menu-pad)),calc(var(--vk-cy) + var(--vk-menu-pad)));\n opacity:min(1,calc(var(--vk-ink-in)*2));filter:blur(calc((1 - var(--vk-ink-in))*8px))}\nvire-menu[data-vk][data-measure]>[popover]{width:max-content!important;height:auto!important;left:0!important;top:0!important;padding:var(--vk-menu-pad)!important;visibility:hidden}\nvire-menu[data-vk][data-measure]>[popover]>*{width:auto!important;transform:none!important}\n\nvire-menu[data-vk][data-surface=glass]>[popover]{color:var(--vireglass-ink-color,inherit);\n background:color-mix(in srgb,color-mix(in srgb,#fff calc((var(--vk-body-white) + var(--vk-body-lift)*2)*100%),var(--vireglass-tint-color,#fff)) calc(var(--vk-body-alpha)*100%),transparent);\n background:oklab(from color-mix(in srgb,#fff calc(var(--vk-body-white)*100%),var(--vireglass-tint-color,#fff)) calc(l + var(--vk-body-lift)) a b / var(--vk-body-alpha))}\nvire-menu[data-vk][data-frost][data-surface=glass]>[popover]{color:oklab(from var(--vireglass-tint-color,#fff) calc(.95 - .87*clamp(0,(l + var(--vk-body-lift) - .6)*20,1)) 0 0)}\nvire-menu[data-vk][data-surface=plain]>[popover]{background:Canvas;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 10px 30px color-mix(in srgb,currentColor 18%,transparent)}\nvire-menu[data-vk][data-surface=frosted]>[popover]{background:color-mix(in srgb,Canvas 88%,currentColor);\n backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent),0 10px 30px color-mix(in srgb,currentColor 18%,transparent)}\n\n@supports not (color:oklab(from red l a b)){\n:is(vire-button,vire-icon-button)[data-vk][data-frost][data-surface=glass]>button,vire-menu[data-vk][data-frost][data-surface=glass]>[popover]{color:inherit;background:color-mix(in srgb,Canvas 82%,currentColor)}\n}\n\n:is(vire-button,vire-icon-button)[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>button{box-shadow:inset 0 0 0 2px currentColor}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=frosted]>button{background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-contrast][data-surface=glass]>button{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\nvire-menu[data-vk][data-contrast]:is([data-surface=plain],[data-surface=frosted])>[popover]{background:Canvas;box-shadow:inset 0 0 0 2px currentColor}\nvire-menu[data-vk][data-contrast][data-surface=glass]>[popover]{background:color-mix(in srgb,color-mix(in srgb,#fff calc((1 - var(--vireglass-ink,0))*100%),#000) 88%,transparent)}\n\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;pointer-events:none}\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button::after{visibility:hidden}\n\n@media (forced-colors:active){\n:is(vire-button,vire-icon-button)[data-vk]>button{-webkit-text-fill-color:currentColor;text-shadow:none;color:ButtonText;background:ButtonFace;border:1px solid ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}\n:is(vire-button,vire-icon-button)[data-vk]>button>svg{opacity:1;filter:none}\n:is(vire-button,vire-icon-button)[data-vk][data-disabled]>button{-webkit-text-fill-color:currentColor;color:GrayText;border-color:GrayText}\n:is(vire-button,vire-icon-button)[data-vk][data-focus]>button{outline-color:Highlight}\nvire-menu[data-vk]>[popover]{color:CanvasText!important;background:Canvas!important;border:1px solid CanvasText;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}\nvire-menu[data-vk]>[popover]>*{filter:none!important;opacity:1!important}\nvire-menu[data-vk]>[popover]>button{-webkit-text-fill-color:currentColor!important;color:CanvasText;background:Canvas}\nvire-menu[data-vk]>[popover]>button:is(:focus,[data-vire-force-state=hover],[data-pressed]){color:HighlightText;background:Highlight}\nvire-menu[data-vk]>[popover]>button:is(:disabled,[aria-disabled=true]){color:GrayText;background:Canvas}\n:is(vire-button,vire-icon-button)[data-vk][data-carried]>button{opacity:var(--vk-carry)}\n}\n";
 
 declare const BUTTON_TAG = "vire-button";
 declare const ICON_BUTTON_TAG = "vire-icon-button";
+declare const MENU_TAG = "vire-menu";
 type DefineOptions = {
     /** CSP nonce for the stylesheet the elements inject. Alternatively, ship `STYLES` yourself. */
     nonce?: string | undefined;
@@ -24,4 +34,4 @@ type DefineOptions = {
 };
 declare function defineVireElements(options?: DefineOptions): void;
 
-export { BUTTON_TAG, type DefineOptions, ICON_BUTTON_TAG, STYLES, type VireControlElement, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };
+export { BUTTON_TAG, type DefineOptions, ICON_BUTTON_TAG, MENU_TAG, STYLES, type VireControlElement, type VireMenuElement, defineVireElements, getA11yOverride, setA11yOverride, systemA11y };