@mkbabb/glass-ui 10.1.3 → 11.0.0
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.
- package/MIGRATION.md +1024 -1461
- package/README.md +2 -2
- package/dist/DialogContent-DG5kseRQ.js +159 -0
- package/dist/DropdownMenuTrigger-uhSXgEfK.js +76 -0
- package/dist/{Surface-1nPoabc3.js → Surface-C7wq2j0A.js} +3 -0
- package/dist/aurora.css +1 -0
- package/dist/aurora.js +246 -2472
- package/dist/auroraImageSource-xNLDUjcy.js +30 -0
- package/dist/axes.js +8 -8
- package/dist/blob.css +1 -0
- package/dist/blob.js +57 -54
- package/dist/budget-CJfhLIIV.js +13 -0
- package/dist/button-CAKhiOZy.js +113 -0
- package/dist/button.js +1 -1
- package/dist/{card-ByyqRBvK.js → card-D_uXphvL.js} +4 -1
- package/dist/card.js +1 -1
- package/dist/carousel.js +3 -2
- package/dist/{checkbox-B1qn65se.js → checkbox-COLnvULu.js} +1 -0
- package/dist/checkbox.css +1 -0
- package/dist/checkbox.js +1 -1
- package/dist/{collapsible-DFzK29Oh.js → collapsible-Bd4Et730.js} +1 -0
- package/dist/collapsible.css +1 -0
- package/dist/collapsible.js +1 -1
- package/dist/color-HkUaTAJj.js +270 -0
- package/dist/{color.glsl-DTJhdekG.js → color.glsl-bFJm8k5R.js} +4 -16
- package/dist/color.wgsl-B-qDJ_OM.js +4 -0
- package/dist/{command-CatrAsrl.js → command-BsFOGZwB.js} +3 -2
- package/dist/command.css +1 -0
- package/dist/command.js +1 -1
- package/dist/component-styles.css +0 -1
- package/dist/components/_shared/axes.d.ts +7 -0
- package/dist/components/_shared/feedback/dot-ring.css +1 -1
- package/dist/components/_shared/overlay/focus-return.d.ts +9 -0
- package/dist/components/_shared/overlay/index.d.ts +3 -0
- package/dist/components/_shared/overlay/root-scroll-lock.d.ts +4 -0
- package/dist/components/_shared/overlay/sheet-width.d.ts +2 -0
- package/dist/components/_shared/shape/useBarShape.d.ts +4 -0
- package/dist/components/aurora/composables/auroraFallbackGround.d.ts +12 -0
- package/dist/components/aurora/constants/presets.d.ts +21 -0
- package/dist/components/aurora/index.d.ts +2 -2
- package/dist/components/button/styles.css +1 -1
- package/dist/components/dark-mode-toggle/dark-mode-toggle.css +1 -1
- package/dist/components/data-table/composables/useDataTableResponsive.d.ts +2 -0
- package/dist/components/deck/styles/capture.css +1 -1
- package/dist/components/dialog/DialogContent.vue.d.ts +2 -2
- package/dist/components/dialog/ModalOverlay.vue.d.ts +2 -2
- package/dist/components/dialog/ModalScrim.vue.d.ts +26 -0
- package/dist/components/dialog/styles.css +1 -1
- package/dist/components/dock/GlassDock.vue.d.ts +4 -1
- package/dist/components/dock/composables/useDockClickIntegrity.d.ts +4 -0
- package/dist/components/dock/composables/useDockShellProps.d.ts +34 -2
- package/dist/components/dock/composables/useDockState.d.ts +5 -0
- package/dist/components/dock/index.d.ts +1 -2
- package/dist/components/dock/styles/controls/icon-button.css +1 -1
- package/dist/components/dock/styles/controls/tab-button.css +1 -1
- package/dist/components/dock/styles/morph.css +1 -1
- package/dist/components/dock/styles/run.css +1 -1
- package/dist/components/dock/trigger.d.ts +1 -0
- package/dist/components/expandable-container/ExpandableContainer.vue.d.ts +30 -29
- package/dist/components/menu/ContextMenu.vue.d.ts +27 -0
- package/dist/components/menu/DropdownMenu.vue.d.ts +5 -23
- package/dist/components/menu/context.d.ts +18 -5
- package/dist/components/menu/family-click.d.ts +2 -0
- package/dist/components/menu/family-context.d.ts +2 -0
- package/dist/components/menu/index.d.ts +1 -1
- package/dist/components/sheet/SheetContent.vue.d.ts +2 -2
- package/dist/components/sortable-list/styles.css +1 -0
- package/dist/components/surface/Surface.vue.d.ts +4 -1
- package/dist/components/tabs/composables/useTabDragMorph.d.ts +4 -7
- package/dist/components/tabs/styles/segmented.css +1 -1
- package/dist/components/tabs/types.d.ts +7 -8
- package/dist/composables/dom/useResizeObserver.d.ts +3 -1
- package/dist/composables/glass/fieldPaint.d.ts +4 -0
- package/dist/composables/glass/useGlassBackdropLuminance.d.ts +7 -6
- package/dist/composables/glass/webgpu/useGpuSubstrate.d.ts +8 -0
- package/dist/composables/motion/core/motionTempo.d.ts +2 -1
- package/dist/composables/motion/morph/useDragMorph.d.ts +2 -2
- package/dist/composables/motion/morph/useSelectionGroup.d.ts +6 -25
- package/dist/composables/motion/morph/useSelectionIndicator.d.ts +8 -54
- package/dist/composables/motion/spring/useLiquidFlex.d.ts +3 -5
- package/dist/composables/motion/spring/useSpringMount.d.ts +0 -9
- package/dist/{configurator-CPxIo3q2.js → configurator-C1ZKEf1b.js} +7 -5
- package/dist/configurator.css +1 -0
- package/dist/configurator.js +1 -1
- package/dist/constants-DfrO-IaH.js +8 -0
- package/dist/constellation.css +1 -0
- package/dist/constellation.js +2 -1
- package/dist/control.css +1 -0
- package/dist/{control.css_vue_type_style_index_0_src_true_lang-BIdufaDG.js → control.css_vue_type_style_index_0_src_true_lang-D2hdtjs4.js} +1 -0
- package/dist/{createCanvasLifecycle-hJHobVTn.js → createCanvasLifecycle-DS0vEs_G.js} +76 -75
- package/dist/dark-mode-toggle.js +1 -1
- package/dist/{data-table-Cs93-uY7.js → data-table-lDykVYuo.js} +113 -107
- package/dist/data-table.css +1 -0
- package/dist/data-table.js +1 -1
- package/dist/{deck-Cm_VmyNL.js → deck-Bc-2mEKE.js} +1 -0
- package/dist/deck.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/dock-trigger.d.ts +1 -0
- package/dist/dock-trigger.js +88 -0
- package/dist/dock.js +677 -689
- package/dist/dom.js +1 -1
- package/dist/easing.js +4 -4
- package/dist/expandable-container-wS1awXGd.js +135 -0
- package/dist/expandable-container.css +1 -0
- package/dist/expandable-container.js +1 -1
- package/dist/{fading-scroll-CTeW3KNS.js → fading-scroll-D3Y20ibL.js} +2 -2
- package/dist/fading-scroll.js +1 -1
- package/dist/fieldPaint-Ci77oajZ.js +7 -0
- package/dist/fourier-field.css +1 -0
- package/dist/fourier-field.js +15 -13
- package/dist/glSetup-DMaDgrEj.js +577 -0
- package/dist/glass-ui.js +67 -66
- package/dist/handmark.css +1 -0
- package/dist/handmark.js +82 -71
- package/dist/index.css +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/{input-eLZ_AU7l.js → input-BLF2pMHE.js} +1 -1
- package/dist/input.js +1 -1
- package/dist/{label-CE03H1KL.js → label-ryNPL7e6.js} +1 -0
- package/dist/label.css +1 -0
- package/dist/label.js +1 -1
- package/dist/labeled-field.css +1 -0
- package/dist/labeled-field.js +5 -4
- package/dist/{menu-DaYAZiVW.js → menu-C_l2Sslf.js} +162 -112
- package/dist/menu.js +3 -3
- package/dist/metric.js +1 -0
- package/dist/motion-core.js +138 -44
- package/dist/motion-lHDAQHEE.js +91 -0
- package/dist/motion.js +5 -5
- package/dist/motionTempo-DXdVbCWr.js +13 -0
- package/dist/music-staff.js +1 -0
- package/dist/{number-field-RP89046a.js → number-field-BXFUP49Z.js} +3 -2
- package/dist/number-field.css +1 -0
- package/dist/number-field.js +1 -1
- package/dist/pager-dots.css +1 -0
- package/dist/pager-dots.js +4 -3
- package/dist/participation-C5y5VZTN.js +52 -0
- package/dist/{popover-BdpoE4Ar.js → popover-DQUmwuAa.js} +3 -2
- package/dist/popover.js +1 -1
- package/dist/{progress-eVa-mc7J.js → progress-BUn0Bw7Z.js} +1 -0
- package/dist/progress.css +1 -0
- package/dist/progress.js +1 -1
- package/dist/{radio-group-B58Bz16F.js → radio-group-xdEy2tdi.js} +1 -0
- package/dist/radio-group.css +1 -0
- package/dist/radio-group.js +1 -1
- package/dist/root-scroll-lock-DJFrQhMa.js +22 -0
- package/dist/select-Dt5dXm87.js +309 -0
- package/dist/select.js +1 -1
- package/dist/{separator-D4EZM10u.js → separator-C4y9p_ky.js} +1 -0
- package/dist/separator.css +1 -0
- package/dist/separator.js +1 -1
- package/dist/sheet-DLqNUIZl.js +347 -0
- package/dist/sheet-width-DgXgJNa5.js +18 -0
- package/dist/sheet.js +2 -2
- package/dist/{slider-5uoY-cLG.js → slider-CZiKrWGg.js} +8 -8
- package/dist/slider.js +1 -1
- package/dist/sortable-list.js +2 -1
- package/dist/{status-dot-W4LFiJps.js → status-dot-BDZKcRxy.js} +2 -1
- package/dist/status-dot.css +1 -0
- package/dist/status-dot.js +1 -1
- package/dist/styles/components.css +1 -1
- package/dist/styles/glass/glass-capsule.css +1 -1
- package/dist/styles/glass/glass-chip.css +1 -1
- package/dist/styles/glass/mark.css +1 -1
- package/dist/styles/glass/overlay-plate.css +1 -1
- package/dist/styles/glass/surface-axis.css +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/styles/theme/radius.css +1 -1
- package/dist/styles/tokens/color-radius.css +1 -1
- package/dist/styles/tokens/manifest.d.ts +1 -1
- package/dist/styles/tokens/scale-paper.css +1 -1
- package/dist/styles/utilities/base-misc.css +1 -1
- package/dist/surface.js +1 -1
- package/dist/{switch-BYUZ6g9G.js → switch-DLfGYU35.js} +1 -0
- package/dist/switch.css +1 -0
- package/dist/switch.js +1 -1
- package/dist/tabs-NgTRPGZx.js +229 -0
- package/dist/tabs.js +1 -1
- package/dist/textarea.js +1 -1
- package/dist/timeline.css +1 -0
- package/dist/timeline.js +4 -3
- package/dist/toggle-group-DgXcJGD6.js +129 -0
- package/dist/toggle-group.css +1 -0
- package/dist/toggle-group.js +1 -1
- package/dist/tokens.js +2 -0
- package/dist/{tooltip-CZVubnJf.js → tooltip-Do3qCw0r.js} +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/typewriter.css +1 -0
- package/dist/typewriter.js +1 -0
- package/dist/uniformBridge-CJyy7NOn.js +150 -0
- package/dist/useBarShape-CmP35Z8o.js +24 -0
- package/dist/{useCanvas2D-CQRElMyE.js → useCanvas2D-Bhpwua98.js} +1 -1
- package/dist/{useDockCtaReceive-BSSgD6mu.js → useDockCtaReceive-Dn_-paqP.js} +1 -1
- package/dist/{useDragMorph-B363RUbF.js → useDragMorph-BEI74U0t.js} +51 -40
- package/dist/{color.wgsl-BTszLY39.js → useGpuSubstrate-Y5XAdU8d.js} +7 -7
- package/dist/{useLiquidPress-h1scrPtP.js → useLiquidPress-D5mjZC6U.js} +2 -2
- package/dist/{useResizeObserver-CdUlm2QZ.js → useResizeObserver-Bv3nN46q.js} +4 -7
- package/dist/useScrollChrome-DMP6kDI9.js +67 -0
- package/dist/useSelectionGroup-DAQv5Lb5.js +186 -0
- package/dist/{useSpring-9u2_shxV.js → useSpring-Aof0nTRt.js} +1 -1
- package/dist/useSpringMount-jgNkymRl.js +73 -0
- package/dist/wgpuSetup-CFuqd_RP.js +1278 -0
- package/package.json +8 -1
- package/dist/DialogContent-CwIBvou_.js +0 -157
- package/dist/DropdownMenuTrigger-CKRnhDSQ.js +0 -93
- package/dist/button-BOFTUPyU.js +0 -110
- package/dist/composables/motion/morph/eyeglass.d.ts +0 -141
- package/dist/expandable-container-CZUj9BzY.js +0 -142
- package/dist/glass-ui.css +0 -2
- package/dist/motion-BvV1_24p.js +0 -61
- package/dist/motionTempo-tscp92Nm.js +0 -7
- package/dist/participation-B7UFdgXB.js +0 -55
- package/dist/select-BiF0FCZf.js +0 -292
- package/dist/sheet-DmJxgAHc.js +0 -345
- package/dist/tabs-C5sC0fBE.js +0 -269
- package/dist/toggle-group-CC5b3o1R.js +0 -125
- package/dist/useScrollChrome-BJbWV32F.js +0 -162
- package/dist/useSelectionGroup-zsEwitF6.js +0 -291
- package/dist/useSpringMount-OA-0mTNv.js +0 -73
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{:where([data-slot="dialog-content"]){border-radius: var(--radius-3xl);display: grid;gap: var(--space-body);inline-size: min(100% - 2 * var(--space-section),32rem);padding-inline: var(--space-family);padding-block: var(--space-family);translate: -50% -50%;}:where([data-slot="dialog-header"]){display: flex;flex-direction: column;gap: var(--space-atom);text-align: start;}:where([data-slot="dialog-content"]:has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="dialog-title"]){font-size: calc(var(--type-body) * 1.272);line-height: var(--type-leading-body);letter-spacing: var(--type-tracking-tight);}:where([data-slot="dialog-description"]){font-size: var(--type-body);line-height: var(--type-leading-body);color: var(--foreground);}:where([data-slot="dialog-footer"]){display: flex;flex-direction: row;justify-content: flex-end;gap: var(--space-body);}:where([data-slot="dialog-close"]){position: absolute;inset-block-start: var(--space-family);inset-inline-end: var(--space-family);display: inline-flex;align-items: center;justify-content: center;inline-size: var(--touch-target);block-size: var(--touch-target);border-radius: var(--radius-
|
|
1
|
+
@layer components{:where([data-slot="dialog-content"]){border-radius: var(--radius-3xl);display: grid;gap: var(--space-body);inline-size: min(100% - 2 * var(--space-section),32rem);padding-inline: var(--space-family);padding-block: var(--space-family);translate: -50% -50%;}:where([data-slot="dialog-header"]){display: flex;flex-direction: column;gap: var(--space-atom);text-align: start;}:where([data-slot="dialog-content"]:has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="dialog-title"]){font-size: calc(var(--type-body) * 1.272);line-height: var(--type-leading-body);letter-spacing: var(--type-tracking-tight);}:where([data-slot="dialog-description"]){font-size: var(--type-body);line-height: var(--type-leading-body);color: var(--foreground);}:where([data-slot="dialog-footer"]){display: flex;flex-direction: row;justify-content: flex-end;gap: var(--space-body);}:where([data-slot="dialog-close"]){position: absolute;inset-block-start: var(--space-family);inset-inline-end: var(--space-family);display: inline-flex;align-items: center;justify-content: center;inline-size: var(--touch-target);block-size: var(--touch-target);border-radius: var(--radius-circle);color: var(--foreground);cursor: pointer;isolation: isolate;}:where([data-slot="dialog-close"])::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;background: transparent;transition: background-color var(--spring-press-duration) var(--spring-press),scale var(--spring-press-duration) var(--spring-press);}@media (hover: hover){:where([data-slot="dialog-close"]):hover::before{background: color-mix(in oklab,var(--foreground) 5%,transparent);scale: var(--scale-hover);}}:where([data-slot="dialog-close"]):active::before{background: color-mix(in oklab,var(--foreground) 12%,transparent);scale: var(--scale-press);}:where([data-slot="dialog-close"]):focus-visible{outline: 2px solid color-mix(in oklab,var(--foreground) 48%,transparent);outline-offset: 2px;}}@property --rebuff-x{syntax: "<length>";inherits: false;initial-value: 0px;}@keyframes glass-dialog-rebuff-a{0%{--rebuff-x: 0px;}22%{--rebuff-x: -4px;}48%{--rebuff-x: 3px;}72%{--rebuff-x: -1.6px;}88%{--rebuff-x: 0.6px;}100%{--rebuff-x: 0px;}}@keyframes glass-dialog-rebuff-b{0%{--rebuff-x: 0px;}22%{--rebuff-x: -4px;}48%{--rebuff-x: 3px;}72%{--rebuff-x: -1.6px;}88%{--rebuff-x: 0.6px;}100%{--rebuff-x: 0px;}}@layer components{:where([data-slot="dialog-content"][data-rebuff]){translate: calc(-50% + var(--rebuff-x)) -50%;}:where([data-slot="dialog-content"][data-rebuff="a"]){animation: glass-dialog-rebuff-a var(--spring-press-duration) var(--spring-press);}:where([data-slot="dialog-content"][data-rebuff="b"]){animation: glass-dialog-rebuff-b var(--spring-press-duration) var(--spring-press);}}@keyframes glass-dialog-rebuff-flash{0%,100%{outline-color: transparent;}50%{outline-color: color-mix(in oklab,var(--foreground) 48%,transparent);}}@layer components{@media (prefers-reduced-motion: reduce){:where([data-slot="dialog-content"][data-rebuff]){outline: 2px solid transparent;outline-offset: 0;animation: glass-dialog-rebuff-flash var(--spring-press-duration) linear;}}}
|
|
@@ -22,8 +22,11 @@ declare const __VLS_base: import("vue").DefineComponent<DockProps, {
|
|
|
22
22
|
keepOpen: (kind?: import("./composables/dockContext.js").DockHoldKind) => void;
|
|
23
23
|
release: (kind?: import("./composables/dockContext.js").DockHoldKind) => void;
|
|
24
24
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DockProps> & Readonly<{}>, {
|
|
25
|
+
anchor: import(".").DockAnchor;
|
|
25
26
|
collapse: import(".").DockCollapse;
|
|
26
|
-
backdropMode: import(".").
|
|
27
|
+
backdropMode: import("../_shared/axes.js").BackdropMode;
|
|
28
|
+
expandOn: import(".").DockExpandOn;
|
|
29
|
+
collapsedLabel: string;
|
|
27
30
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
31
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
32
|
declare const _default: typeof __VLS_export;
|
|
@@ -8,6 +8,10 @@ export interface DockClickIntegrity {
|
|
|
8
8
|
onClickCapture: (event: MouseEvent) => void;
|
|
9
9
|
/** Mark the collapsed→expanded flip so the settle window opens (call on expand). */
|
|
10
10
|
markExpandFlip: () => void;
|
|
11
|
+
/** `pointerenter` on the dock root — arms the approach scope for a fine pointer. */
|
|
12
|
+
onPointerEnter: (event: PointerEvent) => void;
|
|
13
|
+
/** `pointerleave` on the dock root — the pointer is no longer approaching. */
|
|
14
|
+
onPointerLeave: () => void;
|
|
11
15
|
/** The outer pane retained for the witnessed press, or null. */
|
|
12
16
|
pressKeepaliveLayer: Readonly<Ref<"full" | null>>;
|
|
13
17
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { type ComputedRef } from "vue";
|
|
2
|
-
|
|
2
|
+
import type { BackdropMode } from "../../_shared/axes.js";
|
|
3
3
|
/**
|
|
4
4
|
* Collapse posture. `"closed"` (default) mounts collapsed, `"open"` mounts
|
|
5
5
|
* expanded, and `false` never collapses at all — the single opt-out of the
|
|
6
6
|
* collapse↔expand machinery, on both orientations.
|
|
7
7
|
*/
|
|
8
8
|
export type DockCollapse = false | "closed" | "open";
|
|
9
|
+
/** What opens a collapsible dock: a hover dwell (default) or a press. */
|
|
10
|
+
export type DockExpandOn = "hover" | "press";
|
|
11
|
+
/** The edge the size morph grows from, on the dock's own axis (logical, RTL-aware). */
|
|
12
|
+
export type DockAnchor = "center" | "start" | "end";
|
|
9
13
|
/**
|
|
10
14
|
* The GlassDock prop shape. Every dock—horizontal or vertical—reads the same
|
|
11
15
|
* surface; orientation is the single layout axis and the collapse surface applies
|
|
@@ -18,7 +22,7 @@ export interface DockProps {
|
|
|
18
22
|
* backdrop; `"static"` uses a solid plate with no luminance observer or
|
|
19
23
|
* backdrop-filter work.
|
|
20
24
|
*/
|
|
21
|
-
backdropMode?:
|
|
25
|
+
backdropMode?: BackdropMode;
|
|
22
26
|
/**
|
|
23
27
|
* Corner treatment.
|
|
24
28
|
* `"pill"` — the stadium silhouette (default).
|
|
@@ -57,6 +61,34 @@ export interface DockProps {
|
|
|
57
61
|
* Applies on BOTH orientations: a vertical dock morphs its block axis too.
|
|
58
62
|
*/
|
|
59
63
|
collapse?: DockCollapse;
|
|
64
|
+
/**
|
|
65
|
+
* What opens a collapsible dock.
|
|
66
|
+
* `"hover"` (default) — a hover dwell or focus inside expands it, and it collapses
|
|
67
|
+
* after the idle window once the pointer leaves.
|
|
68
|
+
* `"press"` — only a press, or Enter/Space on the collapsed summary,
|
|
69
|
+
* opens it, pinned. Hover, focus and the idle timer are
|
|
70
|
+
* inert; Escape, a press outside, or focus leaving the dock
|
|
71
|
+
* and its portals collapses it. For many docks on one page
|
|
72
|
+
* (one per figure), where a pointer sweep must open none.
|
|
73
|
+
*/
|
|
74
|
+
expandOn?: DockExpandOn;
|
|
75
|
+
/**
|
|
76
|
+
* A `data-anchor` hook for your own CSS: `"start"`, `"end"`, or `"center"`
|
|
77
|
+
* (default). A value other than `"center"` is written to the root as
|
|
78
|
+
* `data-anchor`, and that is all the prop does. It does not move the dock or change
|
|
79
|
+
* its morph. The morph's origin is measured from layout when it starts, so the dock
|
|
80
|
+
* grows from whichever edge your layout lays it at, and a dock your layout centres
|
|
81
|
+
* grows on both sides whatever `anchor` says. The dock centres itself in its own box
|
|
82
|
+
* with auto inline margins, so to hold it at an edge, place it in a wrapper sized to
|
|
83
|
+
* its content (a `display: flex` box at the end of a row, say).
|
|
84
|
+
*/
|
|
85
|
+
anchor?: DockAnchor;
|
|
86
|
+
/**
|
|
87
|
+
* Accessible name of the collapsed summary (a disclosure button). Default
|
|
88
|
+
* `"Expand dock"`. Name the thing the dock holds when a page carries more than one
|
|
89
|
+
* dock, e.g. `"Tools for Fund balance by year"`.
|
|
90
|
+
*/
|
|
91
|
+
collapsedLabel?: string;
|
|
60
92
|
/**
|
|
61
93
|
* The KNOWN background-layer canvas the dock floats over (an aurora/blob
|
|
62
94
|
* `<canvas>`) — an element, a getter, or a CSS selector. When present, the
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ComputedRef, Ref } from "vue";
|
|
2
2
|
import type { DockHoldKind } from "./dockContext.js";
|
|
3
|
+
import type { DockExpandOn } from "./useDockShellProps.js";
|
|
3
4
|
export interface UseDockStateOptions {
|
|
4
5
|
/** Delay before auto-collapse after mouse leaves (ms). Defaults to
|
|
5
6
|
* `DOCK_COLLAPSE_DELAY_MS`, the one idle window every GlassDock reads. */
|
|
@@ -8,6 +9,10 @@ export interface UseDockStateOptions {
|
|
|
8
9
|
rootEl: Ref<HTMLElement | null>;
|
|
9
10
|
/** Disable collapse behavior and keep the dock expanded. */
|
|
10
11
|
alwaysExpanded?: Ref<boolean> | boolean;
|
|
12
|
+
/** What opens the dock: a hover dwell (default) or a press. Under `"press"` the
|
|
13
|
+
* hover, focus-in and idle-timer writers are inert, and focus leaving the dock
|
|
14
|
+
* and its portals collapses it. */
|
|
15
|
+
expandOn?: Ref<DockExpandOn> | DockExpandOn;
|
|
11
16
|
/** Mount-only posture for a collapsible dock. */
|
|
12
17
|
initialExpanded?: boolean;
|
|
13
18
|
/** Ref that suppresses click-away during an active dock animation. */
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
export { default as GlassDock } from "./GlassDock.vue.js";
|
|
2
|
-
export type {
|
|
2
|
+
export type { DockAnchor, DockCollapse, DockExpandOn, DockProps, } from "./composables/useDockShellProps.js";
|
|
3
3
|
export { default as DockLayerGroup } from "./DockLayerGroup.vue.js";
|
|
4
4
|
export { default as DockLayer } from "./DockLayer.vue.js";
|
|
5
5
|
export { default as DockCrossfade } from "./DockCrossfade.vue.js";
|
|
6
6
|
export type { DockFaceDescriptor, DockFaceRegistration, DockCrossfadeContext, } from "./composables/dockCrossfadeContext.js";
|
|
7
7
|
export { default as DockControl } from "./DockControl.vue.js";
|
|
8
|
-
export { default as DockTrigger } from "./DockTrigger.vue.js";
|
|
9
8
|
export { default as DockBackgroundToggle } from "./DockBackgroundToggle.vue.js";
|
|
10
9
|
export { default as DockSeparator } from "./DockSeparator.vue.js";
|
|
11
10
|
export type { UseDockStateOptions, UseDockStateReturn, DockState } from "./composables/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{@property --dock-press-t{syntax: "<number>";inherits: true;initial-value: 0;}.dock-icon-button{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;width: var(--dock-control-size,var(--size-icon-btn));height: var(--dock-control-size,var(--size-icon-btn));padding: var(--dock-icon-padding,0);cursor: pointer;border: none;background: transparent;border-radius: var(--dock-control-radius,var(--radius-
|
|
1
|
+
@layer components{@property --dock-press-t{syntax: "<number>";inherits: true;initial-value: 0;}.dock-icon-button{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;scale: 1;width: var(--dock-control-size,var(--size-icon-btn));height: var(--dock-control-size,var(--size-icon-btn));padding: var(--dock-icon-padding,0);cursor: pointer;border: none;background: transparent;border-radius: var(--dock-control-radius,var(--radius-circle));color: color-mix( in srgb,var(--dock-fg-on-aurora,var(--foreground)) calc(var(--opacity-icon-muted) * 100%),transparent );outline: none;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring),opacity var(--dock-motion-fast),box-shadow var(--dock-motion-fast);--glass-btn-press-t: var(--dock-press-t,0);filter: brightness(calc(1 - var(--dock-press-t,0) * 0.04));&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-icon-hover-bg,var(--dock-control-hover-bg));color: var(--btn-hover-color,var(--foreground));}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);}&:active:not(:disabled):not([data-press-armed]):not([aria-disabled="true"]){scale: var(--scale-press-dock);}&:disabled,&[aria-disabled="true"]{opacity: var(--opacity-disabled,0.4);pointer-events: none;cursor: default;}&:focus:not(:focus-visible){outline: none;}&:is(.is-active,.active,[aria-expanded="true"],[aria-pressed="true"]){background: var(--dock-active-bg);color: var(--dock-active-color);scale: var(--dock-active-scale);border: var(--dock-active-border);box-shadow: var(--dock-active-shadow);}&[data-active]{--glass-capsule-fill: var( --dock-control-active-bg,var(--glass-plate-floating) );background: var(--glass-capsule-fill);color: var(--dock-fg-on-aurora,var(--foreground));}}.dock-icon-button > svg{width: var(--dock-icon-glyph,1.25rem);height: var(--dock-icon-glyph,1.25rem);}.dock-icon-button--compact{width: var(--dock-compact-control-size,auto);height: var(--dock-compact-control-size,auto);min-width: var(--dock-compact-control-min-width,0);padding: var(--dock-compact-control-padding,0.25rem);}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.dock-tab-button{display: inline-flex;align-items: center;flex-shrink: 0;min-height: var(--dock-tab-h,var(--dock-tab-min-height,auto));padding-inline: var(--dock-tab-padding-inline,0.75rem);padding-block: var(--dock-tab-padding-block,0.375rem);border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));font-size: var(--type-small);line-height: 1;color: var(--muted-foreground);text-decoration: none;cursor: pointer;white-space: nowrap;outline: none;scale: 1;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring);&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--foreground);
|
|
1
|
+
@layer components{.dock-tab-button{display: inline-flex;align-items: center;flex-shrink: 0;min-height: var(--dock-tab-h,var(--dock-tab-min-height,auto));padding-inline: var(--dock-tab-padding-inline,0.75rem);padding-block: var(--dock-tab-padding-block,0.375rem);border: none;background: transparent;background-clip: content-box;border-radius: var(--dock-control-radius,var(--radius-pill));font-size: var(--type-small);line-height: 1;color: var(--muted-foreground);text-decoration: none;cursor: pointer;white-space: nowrap;outline: none;scale: 1;transition: background-color var(--dock-motion-fast),color var(--dock-motion-fast),scale var(--dock-press-spring);&:hover:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-hover-bg);color: var(--foreground);}&:active:not(:disabled):not([aria-disabled="true"]){background: var(--dock-control-press-bg);scale: var(--scale-press-dock);}&:is(.is-active,.active,[aria-current="page"],[aria-pressed="true"]){background: var(--dock-control-active-bg);color: var(--foreground);}}.dock-tab-button[data-tier="primary"]{--dock-tab-min-height: 4rem;padding-inline: 1.5rem;background: color-mix(in srgb,var(--card) 60%,transparent);color: var(--foreground);}.dock-tab-button[data-tier="secondary"],.dock-icon-button[data-tier="secondary"]{background: color-mix(in srgb,var(--card) 50%,transparent);border: 1px solid var(--glass-border-quiet);box-shadow: var(--border-hairline);}.dock-tab-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]),.dock-icon-button[data-tier="secondary"]:hover:not(:disabled):not([aria-disabled="true"]){background: color-mix(in srgb,var(--card) 65%,transparent);box-shadow: var(--glass-material-rim),0 0.5px 0 0 rgb(0 0 0 / 0.06);}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.glass-dock.expanded,.glass-dock.always-expanded{--dock-expand-t: 1;}.glass-dock.collapsed{--dock-expand-t: 0;}.glass-dock.expanded[data-morphing],.glass-dock.always-expanded[data-morphing]{--dock-expand-t: var(--dock-morph-t);}.glass-dock.collapsed[data-morphing]{--dock-expand-t: calc(1 - var(--dock-morph-t));}.glass-dock:not(.vertical){--dock-pad-collapsed: max( var(--dock-padding-block,0.375rem),var(--dock-collapsed-padding,0px) );padding-block: var(--dock-padding-block,0.375rem);padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline,0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.vertical{--dock-pad-collapsed: max( var(--dock-padding-inline,0.5rem),var(--dock-collapsed-padding,0px) );padding-inline: var(--dock-padding-inline,0.5rem);padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block,0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.collapsed{cursor: pointer;justify-content: center;box-shadow: var(--shadow-dock-override,var(--shadow-dock-collapsed));}.glass-dock .dock-layer--summary{min-width: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );min-block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );height: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );aspect-ratio: 1;justify-content: center;}.glass-dock[data-morphing] .dock-layer--summary{--dock-expand-t: var(--dock-morph-t);}.glass-dock .dock-layer--summary:empty{min-width: 0;inline-size: 0;padding: 0;margin: 0;border: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers{margin-inline-start: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent{display: grid;place-items: center;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > *{place-self: center;}.glass-dock.collapsed .dock-persistent svg,.glass-dock.collapsed .dock-layer--summary svg{min-width: 1rem;min-height: 1rem;}.glass-dock.collapsed:hover{box-shadow: var(--shadow-dock-override,var(--shadow-dock));}.glass-dock[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}
|
|
1
|
+
@layer components{.glass-dock.expanded,.glass-dock.always-expanded{--dock-expand-t: 1;}.glass-dock.collapsed{--dock-expand-t: 0;}.glass-dock.expanded[data-morphing],.glass-dock.always-expanded[data-morphing]{--dock-expand-t: var(--dock-morph-t);}.glass-dock.collapsed[data-morphing]{--dock-expand-t: calc(1 - var(--dock-morph-t));}.glass-dock:not(.vertical){--dock-pad-collapsed: max( var(--dock-padding-block,0.375rem),var(--dock-collapsed-padding,0px) );padding-block: var(--dock-padding-block,0.375rem);padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline,0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.vertical{--dock-pad-collapsed: max( var(--dock-padding-inline,0.5rem),var(--dock-collapsed-padding,0px) );padding-inline: var(--dock-padding-inline,0.5rem);padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block,0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) );}.glass-dock.collapsed{cursor: pointer;justify-content: center;box-shadow: var(--shadow-dock-override,var(--shadow-dock-collapsed));}.glass-dock.collapsed:not([data-morphing]):not(.vertical){border-radius: var(--radius-circle);}.glass-dock.collapsed:not([data-morphing]):not(.vertical):has(.dock-persistent):has( .dock-layer--summary:not(:empty) ){border-radius: var(--radius-dock);}.glass-dock .dock-layer--summary{min-width: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );min-block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );block-size: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );height: var( --dock-collapsed-summary-min-size,var(--dock-layer-height,2.5rem) );aspect-ratio: 1;justify-content: center;}.glass-dock[data-morphing] .dock-layer--summary{--dock-expand-t: var(--dock-morph-t);}.glass-dock .dock-layer--summary:empty{min-width: 0;inline-size: 0;padding: 0;margin: 0;border: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers{margin-inline-start: 0;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent{display: grid;place-items: center;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > *{place-self: center;}.glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > .scroll-progress-rim{place-self: stretch;}.glass-dock.collapsed .dock-persistent svg,.glass-dock.collapsed .dock-layer--summary svg{min-width: 1rem;min-height: 1rem;}.glass-dock.collapsed:hover{box-shadow: var(--shadow-dock-override,var(--shadow-dock));}.glass-dock[data-held] .dock-plate{--dock-plate-expanded-border: var(--glass-border-floating);transition: border-color var(--duration-fast) var(--ease-standard);}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.glass-dock{--dock-seat: var(--dock-control-size);--dock-run-gap: 0.5rem;--dock-pitch: calc(var(--dock-seat) + var(--dock-run-gap));--dock-open-pitches: 3;--dock-open-seat: calc( var(--dock-open-pitches) * var(--dock-pitch) - var(--dock-run-gap) );}.glass-dock.vertical{--dock-open-pitches: 2;}.glass-dock > .dock-controls > .dock-layers{flex: 1 1 auto;min-inline-size: 0;min-block-size: 0;}.glass-dock > .dock-controls > .dock-persistent{flex: 0 0 auto;}.glass-dock .dock-run{overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-padding-inline: calc(var(--dock-pitch) / 2);touch-action: pan-x;overscroll-behavior: contain;scrollbar-width: none;min-inline-size: 0;box-sizing: content-box;padding-block: var(--dock-ring-reserve);margin-block: calc(-1 * var(--dock-ring-reserve));gap: var(--dock-run-gap);}.glass-dock .dock-run::-webkit-scrollbar{display: none;}.glass-dock .dock-run > *{scroll-snap-align: start;flex: 0 0 auto;}.glass-dock.vertical .dock-run{overflow-x: hidden;overflow-y: auto;scroll-snap-type: y mandatory;scroll-padding-block: calc(var(--dock-pitch) / 2);touch-action: pan-y;min-block-size: 0;padding-block: 0;margin-block: 0;padding-inline: var(--dock-ring-reserve);margin-inline: calc(-1 * var(--dock-ring-reserve));}.glass-dock .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: var(--dock-open-seat);transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock.vertical .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: auto;block-size: var(--dock-open-seat);transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock{timeline-scope: --dock-run;--dock-cap-rest:
|
|
1
|
+
@layer components{.glass-dock{--dock-seat: var(--dock-control-size);--dock-run-gap: 0.5rem;--dock-pitch: calc(var(--dock-seat) + var(--dock-run-gap));--dock-open-pitches: 3;--dock-open-seat: calc( var(--dock-open-pitches) * var(--dock-pitch) - var(--dock-run-gap) );}.glass-dock.vertical{--dock-open-pitches: 2;}.glass-dock > .dock-controls > .dock-layers{flex: 1 1 auto;min-inline-size: 0;min-block-size: 0;}.glass-dock > .dock-controls > .dock-persistent{flex: 0 0 auto;}.glass-dock .dock-run{overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-padding-inline: calc(var(--dock-pitch) / 2);touch-action: pan-x;overscroll-behavior: contain;scrollbar-width: none;min-inline-size: 0;box-sizing: content-box;padding-block: var(--dock-ring-reserve);margin-block: calc(-1 * var(--dock-ring-reserve));gap: var(--dock-run-gap);}.glass-dock .dock-run::-webkit-scrollbar{display: none;}.glass-dock .dock-run > *{scroll-snap-align: start;flex: 0 0 auto;}.glass-dock.vertical .dock-run{overflow-x: hidden;overflow-y: auto;scroll-snap-type: y mandatory;scroll-padding-block: calc(var(--dock-pitch) / 2);touch-action: pan-y;min-block-size: 0;padding-block: 0;margin-block: 0;padding-inline: var(--dock-ring-reserve);margin-inline: calc(-1 * var(--dock-ring-reserve));}.glass-dock .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: var(--dock-open-seat);transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: inline-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > [aria-current]:not([aria-current="false"]),.glass-dock.vertical .dock-run > :has([aria-current]:not([aria-current="false"])){inline-size: auto;block-size: var(--dock-open-seat);transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock.vertical .dock-run > :not([aria-current]:not([aria-current="false"])):not( :has([aria-current]:not([aria-current="false"])) ){transition: block-size var(--spring-dock-duration) var(--spring-dock);}.glass-dock{timeline-scope: --dock-run;--dock-cap-rest: var(--radius-dock);--dock-cap-cut: var(--radius-xs);}.glass-dock.shape-rounded{--dock-cap-rest: var(--radius-card);--dock-cap-cut: var(--radius-xs);}.glass-dock.shape-card{--dock-cap-rest: var(--dock-card-radius,var(--radius-dock-card));--dock-cap-cut: var(--radius-lg);}.glass-dock .dock-run{scroll-timeline: --dock-run inline;}.glass-dock.vertical .dock-run{scroll-timeline: --dock-run block;}.glass-dock .dock-plate{animation: gl-dock-cap-inline-start linear both,gl-dock-cap-inline-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock.vertical .dock-plate{animation: gl-dock-cap-block-start linear both,gl-dock-cap-block-end linear both;animation-timeline: --dock-run,--dock-run;animation-range: 0 var(--dock-pitch),calc(100% - var(--dock-pitch)) 100%;animation-direction: normal,reverse;}.glass-dock .dock-run-status{position: absolute;inline-size: 1px;block-size: 1px;margin: -1px;padding: 0;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;}}@keyframes gl-dock-cap-inline-start{from{border-start-start-radius: var(--dock-cap-rest);border-end-start-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-end-start-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-inline-end{from{border-start-end-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-start-end-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-start{from{border-start-start-radius: var(--dock-cap-rest);border-start-end-radius: var(--dock-cap-rest);}to{border-start-start-radius: var(--dock-cap-cut);border-start-end-radius: var(--dock-cap-cut);}}@keyframes gl-dock-cap-block-end{from{border-end-start-radius: var(--dock-cap-rest);border-end-end-radius: var(--dock-cap-rest);}to{border-end-start-radius: var(--dock-cap-cut);border-end-end-radius: var(--dock-cap-cut);}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DockTrigger } from "./DockTrigger.vue.js";
|
|
@@ -1,45 +1,46 @@
|
|
|
1
1
|
import type { Surface } from "../_shared/axes.js";
|
|
2
|
-
|
|
3
|
-
export default _default;
|
|
4
|
-
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
2
|
+
type __VLS_Props = {
|
|
5
3
|
buttonPosition?: "left" | "right";
|
|
6
4
|
expandLabel?: string;
|
|
7
5
|
collapseLabel?: string;
|
|
8
6
|
surface?: Surface;
|
|
7
|
+
};
|
|
8
|
+
declare function expand(): void;
|
|
9
|
+
declare function collapse(): void;
|
|
10
|
+
type __VLS_ModelProps = {
|
|
11
|
+
"open"?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
14
|
+
declare var __VLS_17: {
|
|
15
|
+
expand: typeof expand;
|
|
16
|
+
label: string;
|
|
17
|
+
}, __VLS_24: {
|
|
18
|
+
collapse: typeof collapse;
|
|
19
|
+
label: string;
|
|
20
|
+
fullscreen: boolean;
|
|
21
|
+
}, __VLS_31: {
|
|
22
|
+
fullscreen: boolean;
|
|
23
|
+
};
|
|
24
|
+
type __VLS_Slots = {} & {
|
|
25
|
+
'expand-trigger'?: (props: typeof __VLS_17) => any;
|
|
9
26
|
} & {
|
|
10
|
-
|
|
11
|
-
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
-
"update:open": (value: boolean) => any;
|
|
13
|
-
}, string, import("vue").PublicProps, Readonly<{
|
|
14
|
-
buttonPosition?: "left" | "right";
|
|
15
|
-
expandLabel?: string;
|
|
16
|
-
collapseLabel?: string;
|
|
17
|
-
surface?: Surface;
|
|
27
|
+
'fullscreen-chrome'?: (props: typeof __VLS_24) => any;
|
|
18
28
|
} & {
|
|
19
|
-
|
|
20
|
-
}
|
|
29
|
+
default?: (props: typeof __VLS_31) => any;
|
|
30
|
+
};
|
|
31
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
32
|
+
"update:open": (value: boolean) => any;
|
|
33
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
34
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
22
35
|
}>, {
|
|
23
36
|
surface: Surface;
|
|
24
37
|
buttonPosition: "left" | "right";
|
|
25
38
|
expandLabel: string;
|
|
26
39
|
collapseLabel: string;
|
|
27
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}) => any;
|
|
32
|
-
} & {
|
|
33
|
-
'fullscreen-chrome'?: (props: {
|
|
34
|
-
collapse: () => void;
|
|
35
|
-
label: string;
|
|
36
|
-
fullscreen: boolean;
|
|
37
|
-
}) => any;
|
|
38
|
-
} & {
|
|
39
|
-
default?: (props: {
|
|
40
|
-
fullscreen: boolean;
|
|
41
|
-
}) => any;
|
|
42
|
-
}>;
|
|
40
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
42
|
+
declare const _default: typeof __VLS_export;
|
|
43
|
+
export default _default;
|
|
43
44
|
type __VLS_WithSlots<T, S> = T & {
|
|
44
45
|
new (): {
|
|
45
46
|
$slots: S;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Direction } from "../_shared/primitive.js";
|
|
2
|
+
export interface ContextMenuProps {
|
|
3
|
+
/** Logical reading direction for roving focus and submenu keys. */
|
|
4
|
+
dir?: Direction;
|
|
5
|
+
/** Whether opening the menu makes outside content inert (and locks page scroll).
|
|
6
|
+
* Default `false`. */
|
|
7
|
+
modal?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface ContextMenuEmits {
|
|
10
|
+
"update:open": [value: boolean];
|
|
11
|
+
}
|
|
12
|
+
declare const _default: typeof __VLS_export;
|
|
13
|
+
export default _default;
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContextMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
|
+
"update:open": (value: boolean) => any;
|
|
16
|
+
}, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{
|
|
17
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
18
|
+
}>, {
|
|
19
|
+
modal: boolean;
|
|
20
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
21
|
+
default?: () => unknown;
|
|
22
|
+
}>;
|
|
23
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
24
|
+
new (): {
|
|
25
|
+
$slots: S;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -1,46 +1,28 @@
|
|
|
1
1
|
import type { Direction } from "../_shared/primitive.js";
|
|
2
|
-
|
|
3
|
-
interface DropdownMenuBaseProps {
|
|
2
|
+
export interface DropdownMenuProps {
|
|
4
3
|
/** Logical reading direction for roving focus and submenu keys. */
|
|
5
4
|
dir?: Direction;
|
|
6
|
-
/** Whether opening the menu makes outside content inert.
|
|
5
|
+
/** Whether opening the menu makes outside content inert (and locks page scroll).
|
|
6
|
+
* Default `false`. */
|
|
7
7
|
modal?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export interface DropdownMenuClickProps extends DropdownMenuBaseProps {
|
|
10
|
-
/** Button-anchored menus support caller-owned open state. */
|
|
11
|
-
trigger?: "click";
|
|
12
8
|
/** Controlled open state. */
|
|
13
9
|
open?: boolean;
|
|
14
10
|
/** Initial open state when the menu is uncontrolled. */
|
|
15
11
|
defaultOpen?: boolean;
|
|
16
12
|
}
|
|
17
|
-
export interface DropdownMenuContextProps extends DropdownMenuBaseProps {
|
|
18
|
-
/** Context menus open only from a pointer, long-press, or keyboard anchor. */
|
|
19
|
-
trigger: "context";
|
|
20
|
-
open?: never;
|
|
21
|
-
defaultOpen?: never;
|
|
22
|
-
}
|
|
23
|
-
export type DropdownMenuProps = DropdownMenuClickProps | DropdownMenuContextProps;
|
|
24
|
-
/** Vue runtime projection; `DropdownMenuProps` is the discriminated data contract. */
|
|
25
|
-
export interface DropdownMenuComponentProps extends DropdownMenuBaseProps {
|
|
26
|
-
trigger?: MenuTrigger;
|
|
27
|
-
open?: boolean;
|
|
28
|
-
defaultOpen?: boolean;
|
|
29
|
-
}
|
|
30
13
|
export interface DropdownMenuEmits {
|
|
31
14
|
"update:open": [value: boolean];
|
|
32
15
|
}
|
|
33
16
|
declare const _default: typeof __VLS_export;
|
|
34
17
|
export default _default;
|
|
35
|
-
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<
|
|
18
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DropdownMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
36
19
|
"update:open": (value: boolean) => any;
|
|
37
|
-
}, string, import("vue").PublicProps, Readonly<
|
|
20
|
+
}, string, import("vue").PublicProps, Readonly<DropdownMenuProps> & Readonly<{
|
|
38
21
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
39
22
|
}>, {
|
|
40
23
|
modal: boolean;
|
|
41
24
|
open: boolean;
|
|
42
25
|
defaultOpen: boolean;
|
|
43
|
-
trigger: MenuTrigger;
|
|
44
26
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
45
27
|
default?: () => unknown;
|
|
46
28
|
}>;
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
/** How the menu is anchored. */
|
|
1
|
+
import { type Component, type Ref } from "vue";
|
|
2
|
+
/** How the menu is anchored: a button (`DropdownMenu`) or a region (`ContextMenu`). */
|
|
3
3
|
export type MenuTrigger = "click" | "context";
|
|
4
|
-
export declare function provideMenuTrigger(trigger: Ref<MenuTrigger>): void;
|
|
5
|
-
export declare function useMenuTrigger(): Ref<MenuTrigger>;
|
|
6
4
|
export type MenuPart = "Trigger" | "Portal" | "Content" | "Item" | "CheckboxItem" | "RadioItem" | "RadioGroup" | "Group" | "Separator" | "Label" | "Sub" | "SubTrigger" | "SubContent" | "ItemIndicator";
|
|
7
|
-
|
|
5
|
+
/** The live root state a part needs: open, modal, and the root's own close channel. */
|
|
6
|
+
export interface MenuRootState {
|
|
7
|
+
readonly open: Readonly<Ref<boolean>>;
|
|
8
|
+
readonly modal: Readonly<Ref<boolean>>;
|
|
9
|
+
onOpenChange: (open: boolean) => void;
|
|
10
|
+
}
|
|
11
|
+
/** One reka menu family: its anchoring, its primitives, and its root-context reader. */
|
|
12
|
+
export interface MenuFamily {
|
|
13
|
+
readonly trigger: MenuTrigger;
|
|
14
|
+
readonly parts: Readonly<Record<MenuPart, Component>>;
|
|
15
|
+
/** Read the reka root context. Call it in a part's setup, inside the root. */
|
|
16
|
+
readonly injectRoot: () => MenuRootState | null;
|
|
17
|
+
}
|
|
18
|
+
export declare function provideMenuFamily(family: MenuFamily): void;
|
|
19
|
+
export declare function useMenuFamily(): MenuFamily;
|
|
20
|
+
export declare function useMenuPart(part: MenuPart): Component;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export type { MenuTrigger } from "./context.js";
|
|
2
1
|
export { default as DropdownMenu, type DropdownMenuEmits, type DropdownMenuProps, } from "./DropdownMenu.vue.js";
|
|
2
|
+
export { default as ContextMenu, type ContextMenuEmits, type ContextMenuProps, } from "./ContextMenu.vue.js";
|
|
3
3
|
export { default as DropdownMenuTrigger, type DropdownMenuTriggerAction, type DropdownMenuTriggerProps, } from "./DropdownMenuTrigger.vue.js";
|
|
4
4
|
export { default as DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps, } from "./DropdownMenuContent.vue.js";
|
|
5
5
|
export { default as DropdownMenuGroup, type DropdownMenuGroupProps, } from "./DropdownMenuGroup.vue.js";
|
|
@@ -23,9 +23,9 @@ export interface SheetContentProps {
|
|
|
23
23
|
motion?: Motion;
|
|
24
24
|
scroll?: boolean;
|
|
25
25
|
}
|
|
26
|
-
declare var
|
|
26
|
+
declare var __VLS_28: {};
|
|
27
27
|
type __VLS_Slots = {} & {
|
|
28
|
-
default?: (props: typeof
|
|
28
|
+
default?: (props: typeof __VLS_28) => any;
|
|
29
29
|
};
|
|
30
30
|
declare const __VLS_base: import("vue").DefineComponent<SheetContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
31
31
|
escapeKeyDown: (event: KeyboardEvent) => any;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer components{:where(.sortable-list,.sortable-ghost){--sortable-lift: calc(2 - var(--scale-press));}.sortable-list{list-style: none;margin: 0;padding-block: 0;padding-inline: var(--space-body);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);overflow: clip;min-block-size: var(--sortable-vacancy-block,0px);transition: min-block-size var(--spring-dock-duration) var(--spring-dock),padding-block-end var(--spring-dock-duration) var(--spring-dock),background-color var(--spring-press-duration) var(--spring-press);}.sortable-list[data-sortable-armed]{background-color: oklch(from var(--foreground) l c h / var(--fill-selected));padding-block-end: var(--sortable-vacancy-block,0px);}.sortable-item{position: relative;padding-block: var(--space-body);transition: transform var(--spring-dock-duration) var(--spring-dock);user-select: none;-webkit-user-select: none;}.sortable-item + .sortable-item{border-block-start: 1px solid oklch(from var(--foreground) l c h / var(--ink-seam));}.sortable-item__content{display: flex;align-items: center;gap: var(--space-body);justify-content: flex-start;font-size: var(--text-body);}.sortable-item__content:not( :has(> :not([data-sortable-handle]) ~ :not([data-sortable-handle])) ) > :not([data-sortable-handle]){flex: 1;}.sortable-item__content > :not([data-sortable-handle]) ~ :not([data-sortable-handle]){margin-inline-start: auto;}.sortable-item__content > [data-sortable-handle]{order: -1;flex: none;}@media (hover: hover){.sortable-item:hover{background-color: oklch(from var(--foreground) l c h / var(--fill-hover));}}.sortable-item[data-sortable-lifted]{z-index: 1;background-color: oklch(from var(--foreground) l c h / var(--fill-selected));scale: var(--sortable-lift);transition: transform var(--spring-dock-duration) var(--spring-dock),scale var(--spring-press-duration) var(--spring-press),background-color var(--spring-press-duration) var(--spring-press);}.sortable-item[data-sortable-vacancy]{opacity: 0;pointer-events: none;}.sortable-list[data-sortable-closing] .sortable-item{transition-duration: var(--spring-press-duration);transition-timing-function: var(--spring-press);}.sortable-handle{--sortable-grip-glyph: var(--icon-md);display: inline-flex;align-items: center;justify-content: center;inline-size: calc(var(--sortable-grip-glyph) + var(--space-atom) * 2);block-size: calc(var(--sortable-grip-glyph) + var(--space-atom) * 2);border-radius: var(--radius-pill);color: oklch(from var(--foreground) l c h / var(--ink-perimeter));transition: color var(--spring-press-duration) var(--spring-press),scale var(--spring-press-duration) var(--spring-press);}@media (hover: hover){.sortable-handle:hover{color: var(--foreground);}}.sortable-handle:active{scale: var(--scale-press);}.sortable-handle:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow);}.sortable-handle:disabled{cursor: not-allowed;opacity: 0.5;}.sortable-ghost{z-index: 9999;pointer-events: none;border-radius: 0;overflow: clip;transition: border-radius var(--spring-press-duration) var(--spring-press),box-shadow var(--spring-press-duration) var(--spring-press),backdrop-filter var(--spring-press-duration) var(--spring-press),opacity var(--spring-press-exit-duration) var(--spring-press);}.sortable-ghost[data-lift]{border-radius: var(--radius-card);}.sortable-ghost[data-done]{opacity: 0;}.sortable-ghost__row{padding-inline: var(--space-body);transition: scale var(--spring-press-duration) var(--spring-press);}.sortable-ghost[data-lift] .sortable-ghost__row{scale: var(--sortable-lift);}.sortable-ghost__row *{animation-play-state: paused;}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type HTMLAttributes } from "vue";
|
|
2
|
-
import type { Surface as SurfaceAxis, SurfaceTier } from "../_shared/axes.js";
|
|
2
|
+
import type { BackdropMode, Surface as SurfaceAxis, SurfaceTier } from "../_shared/axes.js";
|
|
3
3
|
import type { PrimitiveProps } from "../_shared/primitive.js";
|
|
4
4
|
export type SurfaceDecoration = SurfaceAxis;
|
|
5
5
|
/**
|
|
@@ -32,6 +32,8 @@ export interface SurfaceProps extends Omit<PrimitiveProps, "asChild"> {
|
|
|
32
32
|
surface?: SurfaceDecoration;
|
|
33
33
|
/** Thickness ON the resolved tier — never a tier jump. */
|
|
34
34
|
deep?: boolean;
|
|
35
|
+
/** `static` samples no backdrop: the plate keeps its fill and drops the lens. */
|
|
36
|
+
backdropMode?: BackdropMode;
|
|
35
37
|
class?: HTMLAttributes["class"];
|
|
36
38
|
}
|
|
37
39
|
declare var __VLS_8: {};
|
|
@@ -43,6 +45,7 @@ declare const __VLS_base: import("vue").DefineComponent<SurfaceProps, {}, {}, {}
|
|
|
43
45
|
deep: boolean;
|
|
44
46
|
tier: SurfaceTier;
|
|
45
47
|
surface: SurfaceDecoration;
|
|
48
|
+
backdropMode: BackdropMode;
|
|
46
49
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
47
50
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
48
51
|
declare const _default: typeof __VLS_export;
|
|
@@ -10,15 +10,12 @@ import type { SegmentedTabOption } from "../types.js";
|
|
|
10
10
|
* When `:draggable`, the `pill` indicator is wired to `useDragMorph` with the snap
|
|
11
11
|
* targets resolved off the CENTER-ANCHORED button geometry (the SAME measure
|
|
12
12
|
* `useTabIndicator` runs — reused, never re-measured). Dragging the indicator follows
|
|
13
|
-
* the finger
|
|
14
|
-
* `
|
|
15
|
-
*
|
|
16
|
-
* `--tab-indicator-max-stretch` live cap the click squish does (the SOLE cap source);
|
|
17
|
-
* the drag's `--stretch` write composes the existing reciprocal CSS pairing — no
|
|
18
|
-
* second squish recipe.
|
|
13
|
+
* the finger and flings to the nearest tab center on release → `onSnap` writes the
|
|
14
|
+
* `model`. The drag is the `pill` material ONLY. The indicator keeps its size while
|
|
15
|
+
* it follows: no velocity squish is written.
|
|
19
16
|
*/
|
|
20
17
|
export interface UseTabDragMorphParams {
|
|
21
|
-
/** The active indicator element (the drag follow
|
|
18
|
+
/** The active indicator element (the drag follow target). */
|
|
22
19
|
indicatorRef: Ref<HTMLElement | null>;
|
|
23
20
|
/** True for the vertical (block-axis) orientation. */
|
|
24
21
|
isVertical: ComputedRef<boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.segmented-tabs{--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim))
|
|
1
|
+
@layer components{.segmented-tabs{--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);}.segmented-tabs[data-shape="bar"]:not(.segmented-tabs--vertical){--bouncy-slider-radius: var(--radius-bar);}.segmented-tabs--vertical{display: inline-flex;flex-direction: column;grid-auto-flow: unset;grid-auto-columns: unset;align-items: stretch;--bouncy-slider-radius: var(--radius-strip);--radius-ctx: var(--bouncy-track-radius);--radius-inset: var(--bouncy-track-trim);}.segmented-tabs--vertical .segmented-indicator{border-radius: max( var(--radius-floor),calc(var(--radius-ctx) - var(--radius-inset)) );}@media (min-width: 640px){.segmented-tabs{--bouncy-track-trim: 0.25rem;}}.segmented-indicator{position: absolute;z-index: 0;border-radius: var(--bouncy-slider-radius);}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);}.segmented-tabs--underline.segmented-tabs--vertical .segmented-indicator{border-block-end: none;border-inline-start: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),inset 0 1px 2px var(--tab-track-recess-ink);}@media (prefers-reduced-motion: no-preference){.segmented-indicator--js{transition: translate var(--tab-indicator-duration) var(--spring-dock),width var(--tab-indicator-duration) var(--spring-dock),height var(--tab-indicator-duration) var(--spring-dock),opacity var(--duration-fast) ease;}}.segmented-tab{position: relative;z-index: 10;border: none;background: none;font-weight: 500;cursor: pointer;white-space: nowrap;padding: 0.25rem 0.625rem;border-radius: var(--bouncy-slider-radius);font: inherit;font-size: var(--type-caption);color: color-mix(in oklab,var(--muted-foreground),var(--glass-capsule-warm) 12%);transition: color var(--duration-fast) var(--ease-standard);}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-tab:not([data-active]):hover{color: color-mix(in oklab,var(--muted-foreground),var(--foreground) var(--hover-ink-mix));}.segmented-tab.is-disabled{opacity: 0.4;cursor: not-allowed;pointer-events: none;filter: blur(0.5px);}.segmented-tabs--underline{display: flex;grid-auto-flow: unset;grid-auto-columns: unset;gap: 0.25rem;padding: 0;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;box-shadow: none;border-radius: 0;border-block-end: 1px solid var(--border);}.segmented-tabs--underline.segmented-tabs--vertical{flex-direction: column;align-items: stretch;border-block-end: none;border-inline-start: 1px solid var(--border);}.segmented-tabs--underline .segmented-tab{padding: 0.375rem 0.75rem;font-size: var(--type-subheading);letter-spacing: var(--type-tracking-display);border-radius: var(--bouncy-slider-radius);transition: color var(--duration-fast) ease;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab{text-align: start;}.segmented-tabs--underline .segmented-tab:not([data-active]){color: var(--muted-foreground);}.segmented-tabs--underline .segmented-tab:hover{color: color-mix(in oklab,var(--foreground) 70%,transparent);}}
|
|
@@ -15,7 +15,7 @@ export interface SegmentedTabOption<V extends string = string> {
|
|
|
15
15
|
*/
|
|
16
16
|
controls?: string;
|
|
17
17
|
}
|
|
18
|
-
/** The two materials: `pill` is the default glass
|
|
18
|
+
/** The two materials: `pill` is the default glass capsule; `underline` is the paper ink hairline. */
|
|
19
19
|
export type SegmentedTabsVariant = "pill" | "underline";
|
|
20
20
|
/** The interaction semantic, independent of material. `toggle` exposes a
|
|
21
21
|
* group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
|
|
@@ -48,10 +48,9 @@ export interface SegmentedTabsProps<V extends string = string> {
|
|
|
48
48
|
/** Accessible name shared by the desktop strip and responsive Select. */
|
|
49
49
|
ariaLabel?: string;
|
|
50
50
|
/**
|
|
51
|
-
* The material — `pill` (DEFAULT, the glass
|
|
52
|
-
* ink-hairline rule). TWO
|
|
53
|
-
*
|
|
54
|
-
* mode this axis exists to refuse.
|
|
51
|
+
* The material — `pill` (DEFAULT, the glass capsule) or `underline` (the paper
|
|
52
|
+
* ink-hairline rule). TWO. A "million variants that are essentially the same
|
|
53
|
+
* thing" is the failure mode this axis exists to refuse.
|
|
55
54
|
*/
|
|
56
55
|
variant?: SegmentedTabsVariant;
|
|
57
56
|
/**
|
|
@@ -73,11 +72,11 @@ export interface SegmentedTabsProps<V extends string = string> {
|
|
|
73
72
|
*/
|
|
74
73
|
responsive?: boolean | SegmentedTabsResponsive<V>;
|
|
75
74
|
/**
|
|
76
|
-
* Motion weight. `full` (default) lets the pill indicator follow a pointer
|
|
77
|
-
*
|
|
75
|
+
* Motion weight. `full` (default) lets the pill indicator follow a pointer
|
|
76
|
+
* and settle to the nearest tab, at its own size. Drag supplements the
|
|
78
77
|
* fully operable click and keyboard path; it is never the sole selection method.
|
|
79
78
|
* `reduced` and `off` use the click-only strip while preserving roving focus.
|
|
80
|
-
* Underline has no
|
|
79
|
+
* Underline has no draggable indicator. Reduced-motion preference forces
|
|
81
80
|
* `full → reduced`.
|
|
82
81
|
*/
|
|
83
82
|
motion?: Motion;
|
|
@@ -32,7 +32,9 @@ export interface UseResizeObserverControls {
|
|
|
32
32
|
* Vue-scope-aware ResizeObserver wrapper.
|
|
33
33
|
*
|
|
34
34
|
* Watches one element ref and fires a callback when its bounding box
|
|
35
|
-
* changes by more than `threshold` CSS pixels in either dimension.
|
|
35
|
+
* changes by more than `threshold` CSS pixels in either dimension. The
|
|
36
|
+
* platform's first observation of each element always dispatches, so a
|
|
37
|
+
* caller learns the element's size on mount without a resize.
|
|
36
38
|
* Dispatch coalesces through `requestAnimationFrame` by default so a
|
|
37
39
|
* caller wiring an expensive re-init (canvas DPR-resync, layout
|
|
38
40
|
* remeasure) doesn't pay for every drag-resize step.
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/** The event type dispatched on a canvas after the lifecycle draws one frame. */
|
|
2
|
+
export declare const GLASS_FIELD_PAINT_EVENT = "glass-field-paint";
|
|
3
|
+
/** Announce one drawn frame on `canvas`. */
|
|
4
|
+
export declare function announceFieldPaint(canvas: HTMLCanvasElement): void;
|
|
@@ -12,10 +12,11 @@ export interface UseGlassBackdropLuminanceOptions {
|
|
|
12
12
|
*/
|
|
13
13
|
backgroundCanvas?: BackgroundCanvasSource;
|
|
14
14
|
/**
|
|
15
|
-
* Force
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
15
|
+
* Force LIVE re-sampling on (mirrors the `data-glass-sample="live"` attribute on
|
|
16
|
+
* the target). Default: read from the target's `data-glass-sample === "live"`
|
|
17
|
+
* attribute. The static page case samples once on mount + resize-settle; the live
|
|
18
|
+
* case also re-samples, throttled, when the field paints, the page scrolls, the
|
|
19
|
+
* theme changes or a transition on the field ends.
|
|
19
20
|
*/
|
|
20
21
|
live?: boolean;
|
|
21
22
|
/**
|
|
@@ -25,7 +26,7 @@ export interface UseGlassBackdropLuminanceOptions {
|
|
|
25
26
|
*/
|
|
26
27
|
lightThreshold?: number;
|
|
27
28
|
/**
|
|
28
|
-
* Minimum milliseconds between
|
|
29
|
+
* Minimum milliseconds between live samples (the ≤ 4 Hz throttle floor).
|
|
29
30
|
* Default 250 (4 Hz) and bounded to at least 250ms.
|
|
30
31
|
*/
|
|
31
32
|
minSampleIntervalMs?: number;
|
|
@@ -59,7 +60,7 @@ export interface UseGlassBackdropLuminanceControls {
|
|
|
59
60
|
readonly sample: Readonly<Ref<GlassBackdropSample>>;
|
|
60
61
|
/** Force one sample now (bypasses the throttle — used on mount + resize-settle). */
|
|
61
62
|
sampleNow: () => void;
|
|
62
|
-
/**
|
|
63
|
+
/** Cancel a pending sample + detach every observer/listener. */
|
|
63
64
|
dispose: () => void;
|
|
64
65
|
}
|
|
65
66
|
export type GlassBackdropSample = {
|
|
@@ -18,6 +18,14 @@ export interface GpuSubstrateOptions {
|
|
|
18
18
|
setupWGPU?: WebGPUCanvasOptions["setup"];
|
|
19
19
|
/** The GLSL program builder (the WebGL2 fallback path — always required). */
|
|
20
20
|
setupGL: WebGLCanvasOptions["setup"];
|
|
21
|
+
/**
|
|
22
|
+
* Awaited before a backend arms, with the backend about to run its `setup`. A viz
|
|
23
|
+
* whose setup lives in a dynamically imported module loads it here, so only the
|
|
24
|
+
* backend the host resolves is fetched (atlas U/B7 F6: the aurora WebGL and WebGPU
|
|
25
|
+
* paths are separate chunks). Each setup callback is still synchronous; this hook
|
|
26
|
+
* makes sure it can be. A rejection is that backend's arm failure.
|
|
27
|
+
*/
|
|
28
|
+
prepare?: (backend: GpuBackend) => Promise<void>;
|
|
21
29
|
/**
|
|
22
30
|
* The consumer's DPR policy: a flat multiplier
|
|
23
31
|
* or a box-aware resolver). REQUIRED: the leaf owns the backing-store measurement
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* Read the effective `--motion-tempo` off `el` (or `:root` when omitted). Returns a
|
|
3
3
|
* positive multiplier (the identity `1` off-DOM, on a malformed value, or on any
|
|
4
4
|
* value ≤ 0). Read once at spring construction — a tempo change is a settings-level
|
|
5
|
-
* knob (a re-mount picks it up), never a per-frame read.
|
|
5
|
+
* knob (a re-mount picks it up), never a per-frame read. The `:root` read is shared
|
|
6
|
+
* by every construction in one task.
|
|
6
7
|
*/
|
|
7
8
|
export declare function motionTempo(el?: Element | null): number;
|