@bysages/svelte 0.2.2 → 0.2.3

package/dist/back-top-rbP0aP47.mjs

@@ -0,0 +1,109 @@
+import { t as Button } from "./button-BCcX7lHq.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/back-top/BackTop.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"threshold",
+	"label",
+	"scrollEl",
+	"children"
+]);
+var root = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 14 6-6 6 6"></path></svg>`);
+var root_1 = $.from_html(`<div><!></div>`);
+function BackTop$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("back-top");
+	let threshold = $.prop($$props, "threshold", 3, 400), label = $.prop($$props, "label", 3, "Back to top"), rest = $.rest_props($$props, rest_excludes);
+	let visible = $.state(false);
+	$.user_effect(() => {
+		if (typeof window === "undefined") return;
+		const el = $$props.scrollEl?.() ?? null;
+		const onScroll = () => $.set(visible, (el ? el.scrollTop : window.scrollY) > threshold());
+		onScroll();
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			if (el) el.removeEventListener("scroll", onScroll);
+			else window.removeEventListener("scroll", onScroll);
+		};
+	});
+	const toTop = () => {
+		const el = $$props.scrollEl?.();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		"data-scope": "back-top",
+		"data-part": "root",
+		"data-state": $.get(visible) ? "shown" : "hidden",
+		...$$props.scrollEl ? { "data-container": "" } : {}
+	}));
+	var node = $.child(div);
+	{
+		let $0 = $.derived(() => $.get(visible) ? void 0 : "true");
+		let $1 = $.derived(() => $.get(visible) ? 0 : -1);
+		Button(node, $.spread_props(() => rest, {
+			variant: "outline",
+			square: true,
+			size: "lg",
+			type: "button",
+			get "aria-label"() {
+				return label();
+			},
+			get "aria-hidden"() {
+				return $.get($0);
+			},
+			get tabindex() {
+				return $.get($1);
+			},
+			onclick: toTop,
+			children: ($$anchor, $$slotProps) => {
+				var fragment = $.comment();
+				var node_1 = $.first_child(fragment);
+				var consequent = ($$anchor) => {
+					var fragment_1 = $.comment();
+					var node_2 = $.first_child(fragment_1);
+					$.snippet(node_2, () => $$props.children);
+					$.append($$anchor, fragment_1);
+				};
+				var alternate = ($$anchor) => {
+					var svg = root();
+					$.append($$anchor, svg);
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.children) $$render(consequent);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment);
+			},
+			$$slots: { default: true }
+		}));
+	}
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/back-top/index.ts
+/** A way home: after the page has scrolled past `threshold`, a small
+* floating control rises at the page's corner and returns the reader to
+* the top. The scroll itself stays native — `window.scrollTo` defers to
+* the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+* back into an instant jump. The control itself is the shared `Button`
+* (outline, square) — the paper, hairline and halo are its; this family
+* owns only the floating and the entrance. */
+const BackTop = BackTop$1;
+//#endregion
+export { BackTop as t };

package/dist/badge-DKa-8Pv0.mjs

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/badge/Badge.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"tone",
+	"variant",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function Badge$1($$anchor, $$props) {
+	$.push($$props, true);
+	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes);
+	injectComponentStyle("badge");
+	var span = root();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "badge",
+		"data-part": "root",
+		"data-tone": tone(),
+		"data-variant": variant()
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/badge/index.ts
+/** A small seal of state. Ink is the neutral tone; the four semantic
+* pigments are fixed. Subtle and outline re-register the same pigment. */
+const Badge = Badge$1;
+//#endregion
+export { Badge as t };

package/dist/banner-LEPWtGlY.mjs

@@ -0,0 +1,196 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/banner/Banner.svelte
+var rest_excludes$6 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"status",
+	"children"
+]);
+var root$6 = $.from_html(`<div><!></div>`);
+function Banner$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$6);
+	var div = root$6();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: status() === "ink" ? void 0 : "status",
+		"data-scope": "banner",
+		"data-part": "root",
+		"data-status": status()
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerActions.svelte
+var rest_excludes$5 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$5 = $.from_html(`<div><!></div>`);
+function BannerActions($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let rest = $.rest_props($$props, rest_excludes$5);
+	var div = root$5();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "banner",
+		"data-part": "actions"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerBody.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function BannerBody($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var div = root$4();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "banner",
+		"data-part": "body"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerClose.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"type"
+]);
+var root$3 = $.from_html(`<button><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button>`);
+function BannerClose($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$3);
+	var button = root$3();
+	$.attribute_effect(button, () => ({
+		...rest,
+		type: type(),
+		"aria-label": rest["aria-label"] ?? "Dismiss",
+		"data-scope": "banner",
+		"data-part": "close"
+	}));
+	$.append($$anchor, button);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerDescription.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<p><!></p>`);
+function BannerDescription($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var p = root$2();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "banner",
+		"data-part": "description"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerIcon.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<span><!></span>`);
+function BannerIcon($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var span = root$1();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "banner",
+		"data-part": "icon"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerTitle.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<p><!></p>`);
+function BannerTitle($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let rest = $.rest_props($$props, rest_excludes);
+	var p = root();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "banner",
+		"data-part": "title"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/index.ts
+/** A page-level notice, spoken across the full measure: a wash of the
+* status pigment, one heavier hairline on the leading edge, and room
+* for actions and a quiet close. Ink is the neutral register; the four
+* semantic pigments are fixed. */
+const Banner = Object.assign(Banner$1, {
+	Root: Banner$1,
+	Icon: BannerIcon,
+	Body: BannerBody,
+	Title: BannerTitle,
+	Description: BannerDescription,
+	Actions: BannerActions,
+	Close: BannerClose
+});
+//#endregion
+export { Banner as t };

package/dist/breadcrumb-C01pAq93.mjs

@@ -0,0 +1,183 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/breadcrumb/Breadcrumb.svelte
+var rest_excludes$5 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$5 = $.from_html(`<nav><!></nav>`);
+function Breadcrumb$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes$5);
+	var nav = root$5();
+	$.attribute_effect(nav, () => ({
+		...rest,
+		"aria-label": "Breadcrumb",
+		"data-scope": "breadcrumb",
+		"data-part": "root"
+	}));
+	var node = $.child(nav);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(nav);
+	$.append($$anchor, nav);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/BreadcrumbCurrent.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<span><!></span>`);
+function BreadcrumbCurrent($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var span = root$4();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"aria-current": "page",
+		"data-scope": "breadcrumb",
+		"data-part": "current"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/BreadcrumbItem.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<li><!></li>`);
+function BreadcrumbItem($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var li = root$3();
+	$.attribute_effect(li, () => ({
+		...rest,
+		"data-scope": "breadcrumb",
+		"data-part": "item"
+	}));
+	var node = $.child(li);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(li);
+	$.append($$anchor, li);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/BreadcrumbLink.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<a><!></a>`);
+function BreadcrumbLink($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var a = root$2();
+	$.attribute_effect(a, () => ({
+		...rest,
+		"data-scope": "breadcrumb",
+		"data-part": "link"
+	}));
+	var node = $.child(a);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(a);
+	$.append($$anchor, a);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/BreadcrumbList.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<ol><!></ol>`);
+function BreadcrumbList($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var ol = root$1();
+	$.attribute_effect(ol, () => ({
+		...rest,
+		"data-scope": "breadcrumb",
+		"data-part": "list"
+	}));
+	var node = $.child(ol);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(ol);
+	$.append($$anchor, ol);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/BreadcrumbSeparator.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function BreadcrumbSeparator($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("breadcrumb");
+	let rest = $.rest_props($$props, rest_excludes);
+	var span = root();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"aria-hidden": "true",
+		"data-scope": "breadcrumb",
+		"data-part": "separator"
+	}));
+	var node = $.child(span);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var text = $.text("/");
+		$.append($$anchor, text);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/index.ts
+/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
+* each Item carries a Link — or the Current page — parted by a quiet
+* Separator. Links take href and the rest through attributes. */
+const Breadcrumb = Object.assign(Breadcrumb$1, {
+	Root: Breadcrumb$1,
+	List: BreadcrumbList,
+	Item: BreadcrumbItem,
+	Link: BreadcrumbLink,
+	Current: BreadcrumbCurrent,
+	Separator: BreadcrumbSeparator
+});
+//#endregion
+export { Breadcrumb as t };

package/dist/button-BCcX7lHq.mjs

@@ -0,0 +1,52 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/button/Button.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"variant",
+	"tone",
+	"size",
+	"square",
+	"as",
+	"type",
+	"disabled",
+	"children"
+]);
+function Button$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("button");
+	let variant = $.prop($$props, "variant", 3, "solid"), tone = $.prop($$props, "tone", 3, "ink"), size = $.prop($$props, "size", 3, "md"), square = $.prop($$props, "square", 3, false), type = $.prop($$props, "type", 3, "button"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.element(node, () => $$props.as ?? "button", false, ($$element, $$anchor) => {
+		$.attribute_effect($$element, () => ({
+			...rest,
+			type: $$props.as ? void 0 : type(),
+			disabled: $$props.as ? void 0 : disabled(),
+			"data-scope": "button",
+			"data-part": "root",
+			"data-variant": variant(),
+			"data-tone": tone(),
+			"data-size": size(),
+			"data-square": square() ? "true" : void 0,
+			"data-motion": "ink-ripple lit"
+		}));
+		var fragment_1 = $.comment();
+		var node_1 = $.first_child(fragment_1);
+		$.snippet(node_1, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment_1);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/button/index.ts
+/** The control recipe as a standalone button: the variant chooses how it
+* rests, the tone chooses the pigment. Ink is the solemn default; any
+* action can carry the primary weight. */
+const Button = Button$1;
+//#endregion
+export { Button as t };

package/dist/button-group-CVLqPMlR.mjs

@@ -0,0 +1,41 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/button-group/ButtonGroup.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"orientation",
+	"size",
+	"radius",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function ButtonGroup$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("button-group");
+	let orientation = $.prop($$props, "orientation", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "group",
+		"data-scope": "button-group",
+		"data-part": "root",
+		"data-orientation": orientation(),
+		"data-size": $$props.size,
+		"data-radius": $$props.radius
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/button-group/index.ts
+/** Buttons fused into one control: the group owns only the joinery, so
+* members keep every variant they were given. */
+const ButtonGroup = ButtonGroup$1;
+//#endregion
+export { ButtonGroup as t };