@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock/stack-rail.css

@@ -1,264 +0,0 @@
-/* dock/stack-rail.css — BC.W-DOCK-STACK-RAIL — the macOS hover-expand STACK rail
- * (the clean-break rebuild; the divider-carousel chip-strip RETIRED).
- *
- * THE KEPT CHASSIS (glass-dock-codebase.md §2.5 — "that part STAYS"). The `.glass-dock`
- * root carries `contain: paint` + `backdrop-filter` + (on a vertical dock) `overflow` —
- * all three hard-clip every descendant to the dock's border box, so an `#rail` rendered
- * as a dock CHILD could never paint beyond the edge. The escape: GlassDock renders the
- * `#rail` as a SIBLING of `.glass-dock` inside the `.glass-dock-frame` (a `display:contents`
- * shell that becomes a NON-clipping positioning context only when `data-has-rail`). The
- * `.dock-hairline-slot` is `position: absolute` relative to THAT shell — outside the dock's
- * containment — so the stack VISIBLY extends beyond the dock edge into its own gutter. No
- * `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it. This is
- * the load-bearing chassis the rebuild reuses; the box stays INVIOLATE (the slot feeds NO
- * size into the dock's intrinsic box).
- *
- * THE STACK (the verbatim spec — rail-spec-contradicted-divider-carousel). A `<DockStack>`
- * is one stack: a CORE anchor item (the always-visible dock(1) glyph) + N members. On
- * hover/focus of the core, the members FAN OUT next to the rail — a column (vertical dock)
- * / row (horizontal dock) of FULLY-VISIBLE glass icons springing open beside the line,
- * each a `--glass-bg-floating` glass icon (NEVER a shadowed half-tucked chip). The fan-out
- * is compositor-only (scale/translate/opacity/filter — the `proof:no-layout-animation`
- * floor, NO animated width/height/inset), staggered by `--dock-stack-stagger * var(--i)`.
- *
- * CLEARS CONTENT BY TOPOLOGY (THE HEADLINE — ba-dock-shell-gestalt-fail-revoked +
- * ba-chip-graze). The stack lives BEYOND the dock edge in its own gutter (the
- * `chipOverMain: false` topology), the fan extending AWAY from content, never over
- * `<main>` / the `<h1>` / a form field at any y. The chip-graze that revoked the dock/shell
- * PASS cannot recur.
- *
- * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
-@layer components {
-    :root {
-        /* The beyond-edge extent — how far the stack reaches into the gutter past the dock
-           edge. Rides `--dock-scale` so it tracks the coarse-pointer density thread. (KEPT
-           token, re-conceived from the divider-carousel's symmetric overrun to the stack's
-           one-way gutter reach.) */
-        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
-        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first, NEVER a
-           raw macOS-dock CSS paste). */
-        --dock-stack-stagger: 28ms; /* the per-member fan delay (× var(--i)) */
-        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
-        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
-        --dock-stack-fold: 0.4; /* the at-rest fold scale (the members tuck behind the core) */
-    }
-
-    /* The dock-frame wrapper — KEPT. DEFAULT (`display: contents`) is layout-transparent
-       (byte-identical no-rail path). When a `#rail` is authored it lifts to a real
-       NON-clipping positioning context so the abs-positioned slot anchors to the dock box
-       yet escapes the dock's clip. */
-    .glass-dock-frame {
-        display: contents;
-    }
-    .glass-dock-frame[data-has-rail] {
-        display: inline-flex;
-        position: relative;
-        /* No containment, no overflow, no blur — the WHOLE point: the stack must paint
-           beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its box
-           == the dock box and the rail anchors to the true edge. */
-    }
-    .glass-dock-frame[data-has-rail].vertical {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    /* The chrome-slot wrapper — a `position: absolute` sibling of `.glass-dock`, anchored
-       to the dock-frame (NOT the dock box), so the dock's clip never reaches it. It paints
-       nothing itself; `<DockStack>` owns the core + fan. The slot seats at the dock EDGE
-       (the `position` start/end), NOT a `[data-rail-anchor]` divider seam (the seam-locator
-       RETIRED). It is pass-through; the controls re-arm pointer events. */
-    .dock-hairline-slot {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-        z-index: 1;
-    }
-    .dock-hairline-slot > * {
-        pointer-events: auto;
-    }
-
-    /* VERTICAL (column) dock — the stack hangs off the TRAILING (inline-end) edge in its
-       gutter, the core seated at the dock's block-end (the macOS-stack anchor: the
-       bottom-most member at the dock floor, the rest fanning up the rail). The slot starts
-       at the dock's trailing edge + the extend reach, clear of <main> (which is to the
-       inline-start). */
-    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
-        inset-inline-start: 100%;
-        inset-inline-end: auto;
-        inset-block-end: 0;
-        inset-block-start: auto;
-        inline-size: var(--dock-rail-extend-length);
-        block-size: 100%;
-    }
-    /* HORIZONTAL (row) dock — the stack rises off the TOP (block-start) edge in its gutter
-       (a viewport-bottom dock keeps the fan ON-SCREEN above the row), the core at the dock's
-       inline-end, the members fanning up. Clear of <main> (which is above the dock). */
-    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
-        inset-block-end: 100%;
-        inset-block-start: auto;
-        inset-inline-end: 0;
-        inset-inline-start: auto;
-        block-size: var(--dock-rail-extend-length);
-        inline-size: 100%;
-    }
-
-    /* ── The stack ────────────────────────────────────────────────────────────────── */
-    .dock-stack {
-        position: relative;
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* the core anchors at the gutter end nearest the dock; the fan extends AWAY into
-           the gutter (clear of content). */
-    }
-    /* Vertical dock — the stack is a ROW: core nearest the dock edge, members fanning out
-       (inline) into the trailing gutter. Anchored block-end (the bottom-most member at the
-       dock floor — the macOS-stack anchor topology). */
-    .dock-stack.vertical {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-    /* Horizontal dock — the stack is a COLUMN: core nearest the dock edge (block-end),
-       members fanning UP into the gutter above the row. */
-    .dock-stack.horizontal {
-        flex-direction: column-reverse;
-        align-items: center;
-    }
-
-    /* The CORE anchor — the always-visible dock(1) glyph. A floating glass plate (it is
-       chrome OUTSIDE the dock substrate, so it carries its OWN glass register, not the
-       transparent in-dock recipe). */
-    .dock-stack-core {
-        flex: 0 0 auto;
-        z-index: 1;
-    }
-
-    /* The fanned members — the FadingScroll port (the one scroll-fade port). The fan's
-       main-axis extent caps at `--dock-stack-visible` members; an >visibleCount stack
-       scrolls (the port feathers the overflow). */
-    .dock-stack-fan {
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* scoped main-axis budget — the fan shows `--dock-stack-visible` members then
-           scrolls (the n-stack reachable by scrolling the rail, not the dock box). */
-    }
-    .dock-stack.vertical .dock-stack-fan {
-        flex-direction: row;
-        align-items: flex-end;
-        max-inline-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-    .dock-stack.horizontal .dock-stack-fan {
-        flex-direction: column-reverse;
-        align-items: center;
-        max-block-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-
-    /* Each member — a FULLY-VISIBLE glass icon (the `--glass-bg-floating` tier + the
-       catch-light rim), NEVER a shadowed half-tucked chip (the "NOT shadowed" verbatim
-       ask). It composes the `.dock-icon-button` base; the stack-scoped surface override
-       (0,2,0) beats the base `.dock-icon-button` (0,1,0) on source-order tie without
-       `!important`. */
-    .dock-stack-fan .dock-stack-member {
-        flex: 0 0 auto;
-        inline-size: var(--dock-stack-member-size);
-        block-size: var(--dock-stack-member-size);
-        background: var(--glass-bg-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-        border-radius: var(--radius-pill);
-        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
-        /* THE FAN-OUT — compositor-only (scale/translate/opacity/filter), NO animated
-           width/height/inset (proof:no-layout-animation). At rest each member is folded
-           behind the core: scaled-down, translated toward the rail (the dock edge),
-           transparent, and a slight materialize blur. The hover-expand springs them OUT
-           staggered by `--dock-stack-stagger * var(--i)` in reading order. */
-        opacity: 0;
-        scale: var(--dock-stack-fold);
-        filter: blur(1px);
-        transition:
-            opacity var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            scale var(--duration-normal) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            translate var(--duration-normal) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            filter var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            background-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* Vertical dock — at rest the members tuck toward the dock edge (inline-start). */
-    .dock-stack.vertical .dock-stack-member {
-        translate: calc(-1 * var(--dock-rail-extend-length)) 0;
-    }
-    /* Horizontal dock — at rest the members tuck DOWN toward the dock edge (block-end). */
-    .dock-stack.horizontal .dock-stack-member {
-        translate: 0 var(--dock-rail-extend-length);
-    }
-    /* EXPANDED — the members spring OUT to their fanned positions (full scale, in place,
-       opaque, crisp). The stagger lives in the per-member transition-delay. */
-    .dock-stack.is-expanded .dock-stack-member {
-        opacity: 1;
-        scale: 1;
-        translate: 0 0;
-        filter: blur(0);
-    }
-    .dark .dock-stack-fan .dock-stack-member {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-    /* The hover/active register — the floating plate firms, the glyph wakes (NOT a
-       saturated brand hue; the selected-reads-as-glass tier, W-REGISTER-IOS). */
-    .dock-stack-fan .dock-stack-member:hover {
-        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
-        color: var(--dock-fg-on-aurora, var(--foreground));
-    }
-    .dock-stack-fan .dock-stack-member.is-active {
-        background: var(--dock-control-active-bg, var(--glass-bg-floating));
-        color: var(--dock-fg-on-aurora, var(--foreground));
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
-    }
-    .dark .dock-stack-fan .dock-stack-member.is-active {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
-    }
-    .dock-stack-fan .dock-stack-member svg {
-        inline-size: 0.875rem;
-        block-size: 0.875rem;
-        flex-shrink: 0;
-    }
-
-    /* PRM — the fan SNAPS to terminal (the fade survives, the transform drops — P6 /
-       proof:no-layout-animation PRM carve). No spring travel, no stagger, no blur-settle. */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-stack-fan .dock-stack-member {
-            transition:
-                opacity var(--duration-fast) linear,
-                background-color var(--duration-fast) var(--ease-standard),
-                box-shadow var(--duration-fast) var(--ease-standard);
-            scale: 1;
-            translate: 0 0;
-            filter: none;
-        }
-    }
-}

package/dist/styles/floating-panel.css

@@ -1,51 +0,0 @@
-/* Floating panel — teleported action menus, swatch popovers */
-
-@layer components {
-    .floating-panel {
-        position: fixed;
-        z-index: var(--z-overlay);
-        border-radius: var(--radius-panel);
-        border: 1px solid var(--glass-border-resting);
-        background: var(--glass-bg-resting);
-        -webkit-backdrop-filter: var(--glass-blur-resting);
-
-        backdrop-filter: var(--glass-blur-resting);
-        color: var(--popover-foreground);
-        box-shadow: var(--glass-shadow-resting);
-        /* AZ.R5-4 — the comfortable panel inner-pad rung (consumer-verified the
-           tight default). Token-first: a consumer retunes every floating panel +
-           dropdown surface from `--panel-padding`. */
-        padding: var(--panel-padding);
-        pointer-events: auto;
-        /* V.W3.T9 — animation grammar routes through the canonical
-           Tailwind `animate-floating-panel-in` utility (defined in
-           `theme.css` as `--animate-floating-panel-in`), NOT the raw
-           `animation:` shorthand that bypassed the cascade. */
-        @apply animate-floating-panel-in;
-    }
-}
-
-/* Dropdown-menu font knob (Q.W3 Lane C / Qβ-F3).
-   Migrated out of the lone scoped `<style>` blocks on
-   `DropdownMenuContent.vue` + `DropdownMenuSubContent.vue` — those were the
-   only scoped styles in an otherwise fully-global menu family, so the family
-   is now uniformly global-CSS. The `--dropdown-menu-font` token is the
-   consumer-facing knob (value.js overrides it to `var(--font-mono)`); the
-   `, inherit` fall-through MUST be preserved verbatim per the Qθ binding
-   constraint. Unlayered, like the retired scoped block — no other rule sets
-   `font-family` on these surfaces, so the cascade effect is identical. */
-.dropdown-menu-content,
-.dropdown-sub-content {
-    font-family: var(--dropdown-menu-font, inherit);
-}
-
-/* AZ.R5-4 — the comfortable menu inner-pad rung. The dropdown content family
-   reads the shared `--panel-padding` token (the prior hand-set `p-1` was the
-   tight floor the user flagged on the slides deck). Token-first: one override
-   retunes every teleported menu surface. Unlayered like the font rule above —
-   the `p-1`/literal Tailwind pad was removed from the SFC `cn()` chains so this
-   is the sole padding authority. */
-.dropdown-menu-content,
-.dropdown-sub-content {
-    padding: var(--panel-padding);
-}

package/dist/styles/hover-popover.css

@@ -1,47 +0,0 @@
-/* hover-popover.css — substrate sheet for <HoverPopover>.
- *
- * Lands as the A5 §10 row 4 carry-forward: IconTooltip's tooltip register
- * was too quiet for the chassis-tier dock consumers (SettingsCog,
- * ActionCluster). This sheet ships a popover-tier substrate (glass +
- * border + radius) sized for label-shaped content; richer slot content
- * inherits the substrate without extra props.
- *
- * The collision-avoidance + side-flip cascade rests on reka-ui's
- * HoverCard primitives; this sheet is purely visual.
- */
-
-@layer components {
-    .hover-popover-panel {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding-block: 0.375rem;
-        padding-inline: 0.625rem;
-        border-radius: var(--radius-lg, 0.5rem);
-        background: var(--glass-bg-floating, var(--popover, white));
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-
-        backdrop-filter: var(--glass-blur-floating);
-        border: 1px solid var(--glass-border-floating, var(--border, transparent));
-        color: var(--popover-foreground, var(--foreground));
-        box-shadow: var(--glass-shadow-floating, var(--shadow-md));
-        font-size: var(--type-small, 0.8125rem);
-        line-height: 1.2;
-        max-width: 16rem;
-        white-space: normal;
-        outline: none;
-    }
-
-    .hover-popover-label {
-        display: inline-block;
-    }
-}
-
-/* The data-state animation grammar canonicalises onto `.glass-reveal`
-   (BB.W-LIQUID-REVEAL — off the retired `popover-animate` bezier zoom-95, clean
-   break). Authors compose `class="hover-popover-panel glass-reveal"` on the panel
-   root so the spring-clocked LIQUID-ENTER grammar (the coupled scale+fade+filter
-   blur-settle, glass/reveal.css) replaces the bespoke `hover-popover-in/out`
-   keyframes that lived here. The `prefers-reduced-motion` carve is handled at the
-   canonical site (`glass/reveal.css`'s reduced-motion block) so it cascades to all
-   popover-animation consumers automatically. */

package/dist/toggle-chip.d.ts

@@ -1 +0,0 @@
-export * from "./components/custom/toggle-chip";

package/dist/toggle-chip.js

@@ -1,73 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, unref as o, withCtx as s } from "vue";
-import { Toggle as c, useForwardPropsEmits as l } from "reka-ui";
-import { cva as u } from "class-variance-authority";
-//#endregion
-//#region src/components/custom/toggle-chip/ToggleChip.vue
-var d = /* @__PURE__ */ n({
-	__name: "ToggleChip",
-	props: {
-		defaultValue: { type: Boolean },
-		modelValue: { type: [Boolean, null] },
-		disabled: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
-		name: {},
-		required: { type: Boolean },
-		variant: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: ["update:modelValue"],
-	setup(n, { emit: u }) {
-		let d = n, p = l(() => {
-			let { class: e, variant: t, ...n } = d;
-			return n;
-		}, u);
-		return (n, l) => (i(), t(o(c), r(o(p), { class: o(e)(o(f)({ variant: d.variant }), d.class) }), {
-			default: s(() => [a(n.$slots, "default")]),
-			_: 3
-		}, 16, ["class"]));
-	}
-}), f = u([
-	"focus-ring select-none cursor-pointer outline-none",
-	"font-sans",
-	"scale-100 hover:scale-(--scale-hover-btn) active:scale-(--scale-press-btn) data-[state=on]:scale-(--scale-press-btn)",
-	"[transition:scale_var(--spring-smooth-duration)_var(--spring-smooth),background-color_var(--duration-fast)_var(--ease-standard),border-color_var(--duration-fast)_var(--ease-standard),box-shadow_var(--duration-fast)_var(--ease-standard),color_var(--duration-fast)_var(--ease-standard)]",
-	"disabled:opacity-disabled disabled:pointer-events-none disabled:cursor-not-allowed"
-].join(" "), {
-	variants: { variant: {
-		chip: [
-			"accent-tone",
-			"inline-flex items-center justify-center",
-			"px-2 py-0.5 text-caption",
-			"rounded-sm border",
-			"bg-(--accent-fill)",
-			"border-[color-mix(in_oklab,transparent,var(--accent-edge)_35%)]",
-			"text-muted-foreground",
-			"hover:text-foreground",
-			"data-[state=on]:bg-(--accent-band)",
-			"data-[state=on]:border-(--accent-edge)",
-			"data-[state=on]:text-(--accent-ink)",
-			"data-[state=on]:font-medium"
-		].join(" "),
-		cell: [
-			"accent-tone",
-			"flex flex-col items-center justify-center gap-1.5",
-			"px-2 py-2.5 text-micro",
-			"rounded-[0.625rem] border border-transparent",
-			"bg-transparent text-foreground",
-			"data-[state=on]:bg-(--accent-band)",
-			"data-[state=on]:border-(--accent-edge)",
-			"data-[state=on]:text-(--accent-ink)"
-		].join(" ")
-	} },
-	defaultVariants: { variant: "chip" }
-});
-//#endregion
-export { d as ToggleChip, f as toggleChipVariants };