@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/barrage/Barrage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,123 @@
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { usePageVisibility } from "../hooks/dom.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, reactive, ref, renderList, renderSlot, unref, watch, withModifiers } from "vue";
+// src/barrage/Barrage.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onAnimationend"];
+var Barrage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmBarrage",
+	inheritAttrs: false,
+	__name: "Barrage",
+	props: {
+		value: {},
+		defaultValue: {},
+		rows: { default: 4 },
+		top: { default: 10 },
+		duration: { default: 4e3 },
+		delay: { default: 300 },
+		autoPlay: {
+			type: Boolean,
+			default: true
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:value",
+		"change",
+		"finish"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const [list, setList] = useControlled(props, "value", {
+			defaultValue: () => props.defaultValue ?? [],
+			onChange: (value) => {
+				emit("update:value", value);
+				emit("change", value);
+			}
+		});
+		const playing = ref(props.autoPlay);
+		const visibility = usePageVisibility();
+		const paused = computed(() => !playing.value || visibility.value === "hidden");
+		const tracks = reactive(/* @__PURE__ */ new Map());
+		let count = 0;
+		function sync(initial) {
+			const ids = new Set(list.value.map((item) => item.id));
+			for (const id of [...tracks.keys()]) if (!ids.has(id)) tracks.delete(id);
+			const rows = Math.max(1, Math.floor(props.rows) || 1);
+			const delay = Math.max(0, props.delay);
+			let index = initial ? 1 : 0;
+			for (const id of ids) if (!tracks.has(id)) tracks.set(id, {
+				row: count++ % rows,
+				delay: index++ * delay,
+				done: false
+			});
+		}
+		sync(true);
+		watch(() => list.value.map((item) => item.id), () => sync(false));
+		const bullets = computed(() => {
+			const result = [];
+			const seen = /* @__PURE__ */ new Set();
+			for (const item of list.value) {
+				const track = tracks.get(item.id);
+				if (track && !track.done && !seen.has(item.id)) {
+					seen.add(item.id);
+					result.push({
+						item,
+						track
+					});
+				}
+			}
+			return result;
+		});
+		function handleFinish(item) {
+			const track = tracks.get(item.id);
+			if (!track || track.done) return;
+			track.done = true;
+			emit("finish", item);
+			setList(list.value.filter((it) => it.id !== item.id));
+		}
+		function play() {
+			playing.value = true;
+		}
+		function pause() {
+			playing.value = false;
+		}
+		__expose({
+			play,
+			pause
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+				class: ["am-barrage", [
+					{ "am-barrage-paused": paused.value },
+					__props.rootClass,
+					__props.classes?.root
+				]],
+				style: __props.styles?.root
+			}), [renderSlot(_ctx.$slots, "default"), createElementVNode("div", {
+				class: "am-barrage-wrapper",
+				style: normalizeStyle({ "--am-barrage-offset": `${__props.top}px` })
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(bullets.value, ({ item, track }) => {
+				return openBlock(), createElementBlock("div", {
+					key: item.id,
+					class: "am-barrage-track",
+					style: normalizeStyle({
+						"--am-barrage-row": track.row,
+						"--am-barrage-duration": `${__props.duration}ms`,
+						"--am-barrage-delay": `${track.delay}ms`
+					})
+				}, [createElementVNode("span", {
+					class: normalizeClass(["am-barrage-item", [__props.classes?.item, item.class]]),
+					style: normalizeStyle([__props.styles?.item, item.style]),
+					onAnimationend: withModifiers(($event) => handleFinish(item), ["self"])
+				}, [renderSlot(_ctx.$slots, "item", { item }, () => [createVNode(unref(RenderNode_default), { node: item.text }, null, 8, ["node"])])], 46, _hoisted_1)], 4);
+			}), 128))], 4)], 16);
+		};
+	}
+});
+export { Barrage_vue_vue_type_script_setup_true_lang_default as default };

package/dist/barrage/index.d.ts

@@ -0,0 +1,55 @@
+export type * from './interface';
+declare const Barrage: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").BarrageProps> & Readonly<{
+        onChange?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+        onFinish?: ((item: import("./interface").BarrageItem) => any) | undefined;
+    }>, import("./interface").BarrageExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: import("./interface").BarrageItem[]) => any;
+        "update:value": (value: import("./interface").BarrageItem[]) => any;
+        finish: (item: import("./interface").BarrageItem) => any;
+    }, import("vue").PublicProps, {
+        top: number;
+        delay: number;
+        duration: number;
+        rows: number;
+        autoPlay: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").BarrageProps> & Readonly<{
+        onChange?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+        onFinish?: ((item: import("./interface").BarrageItem) => any) | undefined;
+    }>, import("./interface").BarrageExpose, {}, {}, {}, {
+        top: number;
+        delay: number;
+        duration: number;
+        rows: number;
+        autoPlay: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").BarrageProps> & Readonly<{
+    onChange?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+    "onUpdate:value"?: ((value: import("./interface").BarrageItem[]) => any) | undefined;
+    onFinish?: ((item: import("./interface").BarrageItem) => any) | undefined;
+}>, import("./interface").BarrageExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: import("./interface").BarrageItem[]) => any;
+    "update:value": (value: import("./interface").BarrageItem[]) => any;
+    finish: (item: import("./interface").BarrageItem) => any;
+}, string, {
+    top: number;
+    delay: number;
+    duration: number;
+    rows: number;
+    autoPlay: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").BarrageSlots;
+}), object>;
+export default Barrage;

package/dist/barrage/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Barrage_default from "./Barrage.js";
+// src/barrage/index.ts
+var Barrage = withInstall(Barrage_default, "AmBarrage");
+export { Barrage as default };

package/dist/barrage/interface.d.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from 'vue';
+import type { Key, VueNode } from '../_util/type';
+export interface BarrageItem {
+    /** Unique id, a bullet is created once per id */
+    id: Key;
+    /** Bullet content, the `item` slot wins */
+    text?: VueNode;
+    class?: string;
+    style?: CSSProperties;
+}
+export interface BarrageSemanticClassNames {
+    root?: string;
+    item?: string;
+}
+export interface BarrageSemanticStyles {
+    root?: CSSProperties;
+    item?: CSSProperties;
+}
+export interface BarrageProps {
+    /** Bullets waiting / in flight (`v-model:value`). A bullet is removed from the list once it has crossed the container. */
+    value?: BarrageItem[];
+    defaultValue?: BarrageItem[];
+    /** Number of tracks, bullets are distributed round-robin */
+    rows?: number;
+    /** Offset in px of the first track from the top of the container */
+    top?: number;
+    /** Time in milliseconds a bullet needs to cross the container */
+    duration?: number;
+    /** Interval in milliseconds between bullets added together; the initial list also waits one `delay` before its first bullet */
+    delay?: number;
+    /** Start playing right away, otherwise call `play()` */
+    autoPlay?: boolean;
+    rootClass?: string;
+    classes?: BarrageSemanticClassNames;
+    styles?: BarrageSemanticStyles;
+}
+export interface BarrageEmits {
+    'update:value': [value: BarrageItem[]];
+    /** The component removed a finished bullet from the list */
+    'change': [value: BarrageItem[]];
+    /** A bullet has left the container */
+    'finish': [item: BarrageItem];
+}
+export interface BarrageSlots {
+    /** Content the bullets fly above (video, image ...) */
+    default?: () => any;
+    item?: (props: {
+        item: BarrageItem;
+    }) => any;
+}
+export interface BarrageExpose {
+    play: () => void;
+    pause: () => void;
+}

package/dist/barrage/style/index.css

@@ -0,0 +1,90 @@
+.am-barrage {
+  /* component tokens */
+  --am-barrage-color: var(--am-color-white);
+  --am-barrage-font-size: var(--am-font-size-lg);
+  --am-barrage-font-weight: var(--am-font-weight-strong);
+  --am-barrage-shadow-color: var(--am-color-bg-mask);
+  --am-barrage-row-height: 24px;
+  --am-barrage-row-gap: var(--am-margin-xxs);
+  /* internal: 1 flies towards the left, -1 towards the right (rtl) */
+  --am-barrage-direction: 1;
+
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--am-color-text);
+  font-size: var(--am-font-size);
+  font-family: var(--am-font-family);
+  line-height: var(--am-line-height);
+}
+
+[dir='rtl'] .am-barrage,
+.am-barrage[dir='rtl'] {
+  --am-barrage-direction: -1;
+}
+
+.am-barrage-wrapper {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/*
+ * A bullet has to travel "container width + its own width", which plain CSS can not express in one
+ * transform. So the full-width track slides in by its own width (= the container width) while the
+ * bullet slides out by its own width: both are linear, composited and need no measuring.
+ */
+.am-barrage-track {
+  position: absolute;
+  top: calc(
+    var(--am-barrage-offset, 0px) + var(--am-barrage-row, 0) *
+      (var(--am-barrage-row-height) + var(--am-barrage-row-gap))
+  );
+  display: flex;
+  align-items: center;
+  height: var(--am-barrage-row-height);
+  inset-inline: 0;
+  animation: am-barrage-track var(--am-barrage-duration, 4000ms) linear var(--am-barrage-delay, 0ms) both;
+  will-change: transform;
+}
+
+.am-barrage-item {
+  flex: none;
+  box-sizing: border-box;
+  color: var(--am-barrage-color);
+  font-weight: var(--am-barrage-font-weight);
+  font-size: var(--am-barrage-font-size);
+  line-height: var(--am-barrage-row-height);
+  white-space: nowrap;
+  text-shadow:
+    0 0 2px var(--am-barrage-shadow-color),
+    0 1px 2px var(--am-barrage-shadow-color);
+  animation: am-barrage-item var(--am-barrage-duration, 4000ms) linear var(--am-barrage-delay, 0ms) both;
+  will-change: transform;
+}
+
+.am-barrage-paused .am-barrage-track,
+.am-barrage-paused .am-barrage-item {
+  animation-play-state: paused;
+}
+
+@keyframes am-barrage-track {
+  from {
+    transform: translateX(calc(100% * var(--am-barrage-direction, 1)));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes am-barrage-item {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(-100% * var(--am-barrage-direction, 1)));
+  }
+}

package/dist/border-beam/BeamHost.d.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+/**
+ * Render helper of BorderBeam: renders the slot untouched and, when it is a single node,
+ * hands its DOM element to `setHost` through a (merged) ref. A template cannot attach a ref
+ * to slot content, hence this tiny render function.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    setHost: {
+        type: PropType<(el: unknown) => void>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    setHost: {
+        type: PropType<(el: unknown) => void>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/border-beam/BeamHost.js

@@ -0,0 +1,26 @@
+import { flattenChildren } from "../_util/vnode.js";
+import { cloneVNode, defineComponent, isVNode } from "vue";
+// src/border-beam/BeamHost.ts
+/**
+* Render helper of BorderBeam: renders the slot untouched and, when it is a single node,
+* hands its DOM element to `setHost` through a (merged) ref. A template cannot attach a ref
+* to slot content, hence this tiny render function.
+*/
+var BeamHost_default = defineComponent({
+	name: "AmBorderBeamHost",
+	inheritAttrs: false,
+	props: { setHost: {
+		type: Function,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => {
+			const raw = slots.default?.();
+			const children = flattenChildren(raw);
+			const child = children[0];
+			if (children.length !== 1 || !isVNode(child)) return raw;
+			return cloneVNode(child, { ref: props.setHost }, true);
+		};
+	}
+});
+export { BeamHost_default as default };

package/dist/border-beam/BorderBeam.js

@@ -0,0 +1,4 @@
+import BorderBeam_vue_vue_type_script_setup_true_lang_default from "./BorderBeam.vue_vue_type_script_setup_true_lang.js";
+// src/border-beam/BorderBeam.vue
+var BorderBeam_default = BorderBeam_vue_vue_type_script_setup_true_lang_default;
+export { BorderBeam_default as default };

package/dist/border-beam/BorderBeam.vue.d.ts

@@ -0,0 +1,13 @@
+import type { BorderBeamProps, BorderBeamSlots } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = BorderBeamSlots;
+declare const __VLS_base: import("vue").DefineComponent<BorderBeamProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BorderBeamProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/border-beam/BorderBeam.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,85 @@
+import Portal_default from "../_base/Portal.js";
+import { addUnit } from "../_util/index.js";
+import BeamHost_default from "./BeamHost.js";
+import useBorderSize from "./useBorderSize.js";
+import { getBorderBeamGradient, getInset } from "./util.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, shallowRef, unref, withCtx } from "vue";
+// src/border-beam/BorderBeam.vue?vue&type=script&setup=true&lang.ts
+var BorderBeam_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmBorderBeam",
+	inheritAttrs: false,
+	__name: "BorderBeam",
+	props: {
+		color: {},
+		count: {},
+		duration: {},
+		items: {},
+		lineWidth: {},
+		outset: {},
+		size: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/** the element the beams are rendered into: the single root element of the slot */
+		const host = shallowRef(null);
+		const borderWidth = useBorderSize(host);
+		function setHost(el) {
+			const node = el?.$el ?? el;
+			host.value = node && node.nodeType === 1 ? node : null;
+		}
+		const isValid = (value) => value !== void 0 && value !== null;
+		const mergedCount = computed(() => {
+			const { count, items } = props;
+			if (items) return items.length;
+			return typeof count === "number" && Number.isFinite(count) && count >= 1 ? Math.floor(count) : 1;
+		});
+		const hasDuration = computed(() => typeof props.duration === "number" && props.duration > 0);
+		const mergedDuration = computed(() => hasDuration.value ? props.duration : 6);
+		const beamGradient = computed(() => getBorderBeamGradient(props.color));
+		const insetOffset = computed(() => isValid(props.outset) ? getInset(props.outset) : borderWidth.value.map(getInset).join(" "));
+		const beams = computed(() => {
+			const count = mergedCount.value;
+			return Array.from({ length: count }, (_, index) => {
+				const item = props.items?.[index] ?? {};
+				const phase = index / count;
+				const lineWidth = item.lineWidth ?? props.lineWidth;
+				const size = item.size ?? props.size;
+				return {
+					key: `${count}-${index}`,
+					style: {
+						"--am-border-beam-beam-gradient": item.color ? getBorderBeamGradient(item.color) : beamGradient.value,
+						"--am-border-beam-duration": hasDuration.value ? `${props.duration}s` : void 0,
+						"--am-border-beam-line-width": isValid(lineWidth) ? addUnit(lineWidth) : void 0,
+						"--am-border-beam-size": isValid(size) ? addUnit(size) : void 0,
+						"--am-border-beam-delay": phase > 0 ? `${-mergedDuration.value * phase}s` : void 0,
+						"--am-border-beam-inset-offset": isValid(item.outset) ? getInset(item.outset) : insetOffset.value
+					}
+				};
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(BeamHost_default), { "set-host": setHost }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}), host.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(beams.value, (beam) => {
+				return openBlock(), createBlock(Portal_default, {
+					key: beam.key,
+					"get-container": host.value
+				}, {
+					default: withCtx(() => [createElementVNode("div", mergeProps({ ref_for: true }, _ctx.$attrs, {
+						"aria-hidden": "true",
+						class: ["am-border-beam", [__props.rootClass, __props.classes?.root]],
+						style: [beam.style, __props.styles?.root]
+					}), null, 16)]),
+					_: 2
+				}, 1032, ["get-container"]);
+			}), 128)) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+export { BorderBeam_vue_vue_type_script_setup_true_lang_default as default };

package/dist/border-beam/index.d.ts

@@ -0,0 +1,17 @@
+export type * from './interface';
+declare const BorderBeam: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").BorderBeamProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").BorderBeamProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").BorderBeamProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").BorderBeamSlots;
+}), object>;
+export default BorderBeam;

package/dist/border-beam/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import BorderBeam_default from "./BorderBeam.js";
+// src/border-beam/index.ts
+var BorderBeam = withInstall(BorderBeam_default, "AmBorderBeam");
+export { BorderBeam as default };

package/dist/border-beam/interface.d.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties } from 'vue';
+export interface BorderBeamGradientItem {
+    color: string;
+    /** Position of the stop, `0 ~ 100` */
+    percent: number;
+}
+export type BorderBeamGradient = BorderBeamGradientItem[];
+export type BorderBeamColor = string | BorderBeamGradient;
+export interface BorderBeamItem {
+    color?: BorderBeamColor;
+    lineWidth?: number | string;
+    outset?: number | string;
+    size?: number | string;
+}
+export interface BorderBeamSemanticClassNames {
+    root?: string;
+}
+export interface BorderBeamSemanticStyles {
+    root?: CSSProperties;
+}
+export interface BorderBeamProps {
+    /** Beam color: a solid color or gradient stops (`percent` in `0 ~ 100`) */
+    color?: BorderBeamColor;
+    /** Number of evenly distributed beams, a positive integer. Default `1`. */
+    count?: number;
+    /** Seconds one beam needs for a full loop. Default `6`. */
+    duration?: number;
+    /** Per-beam config. Its length is the number of beams and wins over `count`. */
+    items?: BorderBeamItem[];
+    /** Width of the beam line, numbers are px. Default `1px`. */
+    lineWidth?: number | string;
+    /** How far the beam layer sits outside the padding box of the host. Default: the border width of the host. */
+    outset?: number | string;
+    /** Size of the visible beam segment, numbers are px. Default `100`. */
+    size?: number | string;
+    rootClass?: string;
+    classes?: BorderBeamSemanticClassNames;
+    styles?: BorderBeamSemanticStyles;
+}
+export interface BorderBeamSlots {
+    /** The decorated container: a single element, or a component with a single root element */
+    default?: () => any;
+}

package/dist/border-beam/style/index.css

@@ -0,0 +1,95 @@
+/*
+ * BorderBeam is a decoration layer rendered inside its host: it has no text, so the root
+ * deliberately sets no font (the exception to the "root sets its own font" rule).
+ */
+.am-border-beam {
+  /* component tokens (the props write the same variables inline) */
+  --am-border-beam-color: var(--am-color-primary);
+  --am-border-beam-color-end: var(--am-color-primary-hover);
+  --am-border-beam-beam-gradient: linear-gradient(
+    to left,
+    var(--am-border-beam-color) 0%,
+    var(--am-border-beam-color-end) 70%,
+    transparent
+  );
+  --am-border-beam-line-width: var(--am-line-width);
+  --am-border-beam-size: 100px;
+  --am-border-beam-duration: 6s;
+  --am-border-beam-delay: 0s;
+  --am-border-beam-inset-offset: 0px;
+  --am-border-beam-opacity: 0.95;
+  --am-border-beam-z-index: 1;
+
+  /* container: hidden unless the browser can draw the effect */
+  position: absolute;
+  inset: var(--am-border-beam-inset-offset);
+  z-index: var(--am-border-beam-z-index);
+  display: none;
+  box-sizing: border-box;
+  padding: var(--am-border-beam-line-width);
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
+  /* only the ring between the border box and the content box stays visible */
+  .am-border-beam {
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+  }
+
+  @supports (offset-path: rect(0 auto auto 0 round 1px)) {
+    .am-border-beam {
+      display: block;
+    }
+
+    /* a square gradient that travels along the border of the layer */
+    .am-border-beam::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: var(--am-border-beam-size);
+      aspect-ratio: 1 / 1;
+      background-image: var(--am-border-beam-beam-gradient);
+      opacity: var(--am-border-beam-opacity);
+      animation: am-border-beam-move var(--am-border-beam-duration) linear var(--am-border-beam-delay) infinite;
+      content: '';
+      offset-anchor: 90% 50%;
+      offset-distance: 0%;
+      offset-path: rect(0 auto auto 0 round var(--am-border-beam-size));
+      offset-rotate: auto;
+      will-change: offset-distance;
+    }
+  }
+}
+
+@keyframes am-border-beam-move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+/* the beam is a closed loop: mirror its travel direction with the reading direction */
+[dir='rtl'] .am-border-beam::before {
+  animation-direction: reverse;
+  offset-rotate: reverse;
+}
+
+/* purely decorative: no beam at all when motion is reduced */
+@media (prefers-reduced-motion: reduce) {
+  .am-border-beam::before {
+    display: none;
+    animation: none;
+  }
+}

package/dist/border-beam/useBorderSize.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { BorderWidth } from './util';
+/**
+ * Border width (top, right, bottom, left) of the host element. The beam layer is positioned
+ * against the padding box of its host, so it is pushed outwards by these to cover the border.
+ * A host that clips its overflow (Card, Image ...) would cut that part off: the layer then
+ * stays on the padding box (`0`), right inside the border.
+ * Read once per host element (after it is mounted), like the PC implementation.
+ */
+export default function useBorderSize(domNode: Ref<HTMLElement | null | undefined>): import("vue").ShallowRef<BorderWidth, BorderWidth>;