@astryx-vue/core 0.1.1 → 0.1.3

package/dist/useClickableContainer-DyNpnSEa.js

@@ -0,0 +1,112 @@
+//#region src/composables/useClickableContainer.ts
+/**
+* 对应原版 Astryx 的 `hooks/useClickableContainer`。
+*
+* 让整块容器可点，同时把点在嵌套按钮、链接、输入框上的点击留给那些控件自己。
+* ClickableCard 和 SelectableCard 都走这里，避免两套“点到谁算谁”的判断。
+*/
+const INTERACTIVE_SELECTORS = [
+	"button",
+	"a",
+	"input",
+	"select",
+	"textarea",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"radio\"]",
+	"[role=\"switch\"]",
+	"[role=\"tab\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"option\"]",
+	"[role=\"combobox\"]",
+	"[role=\"listbox\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[data-pressable-container]"
+].join(",");
+const NON_INTERACTIVE_SELECTORS = "[aria-readonly=\"true\"]";
+function hasInteractiveAncestor(element, root) {
+	let current = element;
+	while (current != null && current !== root && current !== document.body) {
+		if (current.matches(INTERACTIVE_SELECTORS) && !current.matches(NON_INTERACTIVE_SELECTORS)) return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+function hasTextSelection(node) {
+	if (typeof document === "undefined" || document.getSelection == null) return false;
+	const selection = document.getSelection();
+	if (selection == null || selection.isCollapsed) return false;
+	return node.contains(selection.anchorNode);
+}
+function openInNewTab(href) {
+	window.open(href, "_blank", "noopener");
+}
+/**
+* 把容器的 click / mouseup 交给调用方绑到根元素上。
+* 组件挂载后会给容器加上 `data-pressable-container`，嵌套的可点容器因此不会互相抢走点击。
+*/
+function useClickableContainer(options) {
+	function markContainer() {
+		const container = options.containerRef.value;
+		if (container != null) container.dataset.pressableContainer = "true";
+	}
+	function onClick(event) {
+		markContainer();
+		if (options.disabled) return;
+		const container = options.containerRef.value;
+		if (container == null) return;
+		if (hasTextSelection(container)) return;
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target !== event.currentTarget && hasInteractiveAncestor(target, container)) return;
+		options.onClick?.(event);
+		if (event.defaultPrevented) return;
+		const href = options.href;
+		if (href != null && href !== "") {
+			if (options.target === "_blank" || event.metaKey || event.ctrlKey) {
+				openInNewTab(href);
+				return;
+			}
+			const interactive = options.interactiveRef?.value;
+			if (interactive != null) {
+				interactive.click();
+				return;
+			}
+			window.location.assign(href);
+			return;
+		}
+		if (options.onClick == null) {
+			const interactive = options.interactiveRef?.value;
+			if (interactive != null) {
+				interactive.dispatchEvent(new MouseEvent("click", {
+					bubbles: true,
+					cancelable: true,
+					button: event.button,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					shiftKey: event.shiftKey,
+					altKey: event.altKey
+				}));
+				event.stopPropagation();
+			}
+		}
+	}
+	function onMouseUp(event) {
+		if (options.disabled) return;
+		const href = options.href;
+		if (href == null || href === "" || event.button !== 1) return;
+		const container = options.containerRef.value;
+		const target = event.target;
+		if (container == null || !(target instanceof Element)) return;
+		if (target !== event.currentTarget && hasInteractiveAncestor(target, container)) return;
+		openInNewTab(href);
+	}
+	return {
+		onClick,
+		onMouseUp
+	};
+}
+//#endregion
+export { useClickableContainer as n, INTERACTIVE_SELECTORS as t };

package/dist/useResizable-CeESZS1v.d.ts

@@ -0,0 +1,72 @@
+import { n as PixelWidth } from "./types-JktRxujg.js";
+import { Ref } from "vue";
+//#region src/composables/useResizable.d.ts
+type ResizableDirection = 'horizontal' | 'vertical';
+interface ResizablePercentSize {
+  type: 'percent';
+  value: number;
+  min?: PixelWidth;
+  max?: PixelWidth;
+}
+type ResizableSize = number | `${number}px` | `${number}%` | PixelWidth | ResizablePercentSize;
+interface ResizableRegionConfig {
+  defaultSize?: ResizableSize | string;
+  minSize?: ResizableSize | string;
+  maxSize?: ResizableSize | string;
+  collapsible?: boolean;
+  collapsedSize?: number;
+  snaps?: number[];
+  /** Cascade priority. A lower number gives up space first when the shared container is narrower than the regions. */
+  shrinkOrder?: number;
+}
+interface UseResizableSingleOptions extends ResizableRegionConfig {
+  containerRef?: Ref<HTMLElement | null>;
+  direction?: ResizableDirection;
+  autoSaveId?: string;
+  defaultIsCollapsed?: boolean;
+  isCollapsed?: boolean;
+  onSizeChange?: (size: number) => void;
+  onCollapseChange?: (isCollapsed: boolean) => void;
+}
+interface UseResizableMultiConfig {
+  direction?: ResizableDirection;
+  containerRef?: Ref<HTMLElement | null>;
+  regions: Record<string, ResizableRegionConfig>;
+  autoSaveId?: string;
+}
+interface ResizableProps {
+  _size: number;
+  _isCollapsed: boolean;
+  _onResizeStart: () => void;
+  _onResizeMove: (delta: number) => void;
+  _onResizeEnd: () => void;
+  _onResizeCancel?: () => void;
+  _minSizePx: number;
+  _maxSizePx: number;
+  _snaps: number[];
+  _collapsedSize: number;
+  _collapsible: boolean;
+  _direction?: ResizableDirection;
+  _isResizableProps: true;
+}
+interface ResizableRegion {
+  size: number;
+  isCollapsed: boolean;
+  collapse: () => void;
+  expand: () => void;
+  resize: (size: number) => void;
+  props: ResizableProps;
+}
+declare function percent(value: number, options: {
+  min: PixelWidth;
+  max?: never;
+} | {
+  min?: never;
+  max: PixelWidth;
+}): ResizablePercentSize;
+declare function useResizable(options: UseResizableMultiConfig): Record<string, ResizableRegion>;
+declare function useResizable(options: UseResizableSingleOptions): ResizableRegion;
+type UseResizableOptions = UseResizableSingleOptions | UseResizableMultiConfig;
+type ResizableState = ResizableRegion;
+//#endregion
+export { ResizableRegionConfig as a, UseResizableMultiConfig as c, percent as d, useResizable as f, ResizableRegion as i, UseResizableOptions as l, ResizablePercentSize as n, ResizableSize as o, ResizableProps as r, ResizableState as s, ResizableDirection as t, UseResizableSingleOptions as u };

package/dist/useScrollableArea-DDk_CluT.js

@@ -0,0 +1,172 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region src/composables/useScrollableArea.ts
+const TOLERANCE = 1;
+const idleAxis = () => ({
+	isScrollable: false,
+	atStart: true,
+	atEnd: true
+});
+function mappingFor(element) {
+	const style = getComputedStyle(element);
+	const mode = style.writingMode.toLowerCase();
+	const vertical = mode.startsWith("vertical") || mode.startsWith("sideways");
+	const rtl = style.direction === "rtl";
+	if (!vertical) return {
+		inline: "x",
+		block: "y",
+		inlineReversed: rtl,
+		blockReversed: false
+	};
+	return {
+		inline: "y",
+		block: "x",
+		inlineReversed: mode === "sideways-lr" ? !rtl : rtl,
+		blockReversed: mode.endsWith("-rl")
+	};
+}
+function extent(element, axis) {
+	if (axis === "x") return {
+		client: element.clientWidth,
+		content: element.scrollWidth,
+		offset: element.scrollLeft
+	};
+	return {
+		client: element.clientHeight,
+		content: element.scrollHeight,
+		offset: element.scrollTop
+	};
+}
+function useScrollableArea(options) {
+	const viewport = ref(null);
+	const content = ref(null);
+	const inline = ref(idleAxis());
+	const block = ref(idleAxis());
+	const overflowInline = ref(false);
+	const overflowBlock = ref(false);
+	const mapping = ref({
+		inline: "x",
+		block: "y",
+		inlineReversed: false,
+		blockReversed: false
+	});
+	let observer;
+	const axis = computed(() => options.axis ?? "block");
+	const overscroll = computed(() => options.overscroll ?? "allow");
+	const stickyContainment = computed(() => options.stickyContainment ?? "whenScrollable");
+	function requested(name) {
+		return axis.value === name || axis.value === "both";
+	}
+	function sameAxis(current, next) {
+		return current.isScrollable === next.isScrollable && current.atStart === next.atStart && current.atEnd === next.atEnd;
+	}
+	function measure() {
+		const element = viewport.value;
+		if (element == null) return;
+		const nextMapping = mappingFor(element);
+		const read = (name, reversed) => {
+			const box = extent(element, nextMapping[name]);
+			const overflowing = box.content > box.client + TOLERANCE;
+			const max = Math.max(0, box.content - box.client);
+			const offset = reversed ? max - Math.abs(box.offset) : Math.abs(box.offset);
+			const active = requested(name) && overflowing;
+			return {
+				overflowing,
+				state: {
+					isScrollable: active,
+					atStart: !active || offset <= TOLERANCE,
+					atEnd: !active || offset >= max - TOLERANCE
+				}
+			};
+		};
+		const inlineRead = read("inline", nextMapping.inlineReversed);
+		const blockRead = read("block", nextMapping.blockReversed);
+		const nextInline = requested("inline") ? inlineRead.state : idleAxis();
+		const nextBlock = requested("block") ? blockRead.state : idleAxis();
+		if (mapping.value.inline === nextMapping.inline && mapping.value.block === nextMapping.block && mapping.value.inlineReversed === nextMapping.inlineReversed && mapping.value.blockReversed === nextMapping.blockReversed && overflowInline.value === inlineRead.overflowing && overflowBlock.value === blockRead.overflowing && sameAxis(inline.value, nextInline) && sameAxis(block.value, nextBlock)) return;
+		mapping.value = nextMapping;
+		overflowInline.value = inlineRead.overflowing;
+		overflowBlock.value = blockRead.overflowing;
+		inline.value = nextInline;
+		block.value = nextBlock;
+	}
+	let queued = false;
+	function queueMeasure() {
+		if (queued) return;
+		queued = true;
+		queueMicrotask(() => {
+			queued = false;
+			measure();
+		});
+	}
+	function bind(element) {
+		const node = element instanceof HTMLElement ? element : null;
+		if (viewport.value === node) return;
+		viewport.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+		observer = void 0;
+		viewport.value = node;
+		if (node == null) return;
+		node.addEventListener("scroll", measure, { passive: true });
+		if (typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(() => queueMeasure());
+			observer.observe(node);
+			if (content.value) observer.observe(content.value);
+		}
+		queueMeasure();
+	}
+	watch(content, (element) => {
+		if (element && observer) observer.observe(element);
+		queueMeasure();
+	});
+	watch([
+		axis,
+		overscroll,
+		stickyContainment
+	], queueMeasure);
+	onMounted(queueMeasure);
+	onBeforeUnmount(() => {
+		viewport.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+	});
+	const viewportStyle = computed(() => {
+		const map = mapping.value;
+		const requestedX = requested("inline") && map.inline === "x" || requested("block") && map.block === "x";
+		const requestedY = requested("inline") && map.inline === "y" || requested("block") && map.block === "y";
+		const overflowingX = overflowInline.value && map.inline === "x" || overflowBlock.value && map.block === "x";
+		const overflowingY = overflowInline.value && map.inline === "y" || overflowBlock.value && map.block === "y";
+		const contains = overflowingX || overflowingY || stickyContainment.value === "always";
+		const scrollsX = stickyContainment.value === "always" ? requestedX : overflowingX;
+		const scrollsY = stickyContainment.value === "always" ? requestedY : overflowingY;
+		const style = {
+			overflowX: contains ? scrollsX ? "auto" : "hidden" : "clip",
+			overflowY: contains ? scrollsY ? "auto" : "hidden" : "clip"
+		};
+		if (requested("inline")) style[map.inline === "x" ? "overscrollBehaviorX" : "overscrollBehaviorY"] = overscroll.value === "contain" && inline.value.isScrollable ? "contain" : "auto";
+		if (requested("block")) style[map.block === "x" ? "overscrollBehaviorX" : "overscrollBehaviorY"] = overscroll.value === "contain" && block.value.isScrollable ? "contain" : "auto";
+		return style;
+	});
+	const scrollable = computed(() => inline.value.isScrollable || block.value.isScrollable);
+	return {
+		viewport: bind,
+		content,
+		viewportAttrs: computed(() => ({
+			"role": options.role ?? "group",
+			"aria-label": options.label,
+			"tabindex": scrollable.value ? 0 : void 0,
+			"data-scroll-axis": axis.value,
+			"data-scrollable-inline": inline.value.isScrollable ? "true" : void 0,
+			"data-scrollable-block": block.value.isScrollable ? "true" : void 0,
+			"data-scroll-inline-start": inline.value.atStart ? "true" : void 0,
+			"data-scroll-inline-end": inline.value.atEnd ? "true" : void 0,
+			"data-scroll-block-start": block.value.atStart ? "true" : void 0,
+			"data-scroll-block-end": block.value.atEnd ? "true" : void 0
+		})),
+		viewportStyle,
+		state: computed(() => ({
+			inline: inline.value,
+			block: block.value
+		}))
+	};
+}
+//#endregion
+export { useScrollableArea as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -28,6 +28,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./AppShell": {
+      "types": "./dist/AppShell/index.d.ts",
+      "import": "./dist/AppShell/index.js"
+    },
+    "./AspectRatio": {
+      "types": "./dist/AspectRatio/index.d.ts",
+      "import": "./dist/AspectRatio/index.js"
+    },
     "./Avatar": {
       "types": "./dist/Avatar/index.d.ts",
       "import": "./dist/Avatar/index.js"
@@ -40,6 +48,18 @@
       "types": "./dist/CheckboxList/index.d.ts",
       "import": "./dist/CheckboxList/index.js"
     },
+    "./ClickableCard": {
+      "types": "./dist/ClickableCard/index.d.ts",
+      "import": "./dist/ClickableCard/index.js"
+    },
+    "./CommandPalette": {
+      "types": "./dist/CommandPalette/index.d.ts",
+      "import": "./dist/CommandPalette/index.js"
+    },
+    "./ComplexSelector": {
+      "types": "./dist/ComplexSelector/index.d.ts",
+      "import": "./dist/ComplexSelector/index.js"
+    },
     "./DateRangeInput": {
       "types": "./dist/DateRangeInput/index.d.ts",
       "import": "./dist/DateRangeInput/index.js"
@@ -56,6 +76,14 @@
       "types": "./dist/FileInput/index.d.ts",
       "import": "./dist/FileInput/index.js"
     },
+    "./FormLayout": {
+      "types": "./dist/FormLayout/index.d.ts",
+      "import": "./dist/FormLayout/index.js"
+    },
+    "./Layout": {
+      "types": "./dist/Layout/index.d.ts",
+      "import": "./dist/Layout/index.js"
+    },
     "./MetadataList": {
       "types": "./dist/MetadataList/index.d.ts",
       "import": "./dist/MetadataList/index.js"
@@ -64,6 +92,22 @@
       "types": "./dist/RadioList/index.d.ts",
       "import": "./dist/RadioList/index.js"
     },
+    "./Resizable": {
+      "types": "./dist/Resizable/index.d.ts",
+      "import": "./dist/Resizable/index.js"
+    },
+    "./ScrollableArea": {
+      "types": "./dist/ScrollableArea/index.d.ts",
+      "import": "./dist/ScrollableArea/index.js"
+    },
+    "./Section": {
+      "types": "./dist/Section/index.d.ts",
+      "import": "./dist/Section/index.js"
+    },
+    "./SelectableCard": {
+      "types": "./dist/SelectableCard/index.d.ts",
+      "import": "./dist/SelectableCard/index.js"
+    },
     "./StatusDot": {
       "types": "./dist/StatusDot/index.d.ts",
       "import": "./dist/StatusDot/index.js"
@@ -116,6 +160,10 @@
       "types": "./dist/Radio/index.d.ts",
       "import": "./dist/Radio/index.js"
     },
+    "./Stepper": {
+      "types": "./dist/Stepper/index.d.ts",
+      "import": "./dist/Stepper/index.js"
+    },
     "./Table": {
       "types": "./dist/Table/index.d.ts",
       "import": "./dist/Table/index.js"

package/styles/app-shell.css

@@ -0,0 +1,151 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-app-shell {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: clip;
+    min-height: 0;
+  }
+
+  .astryx-app-shell[data-variant='wash'],
+  .astryx-app-shell[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell[data-variant='surface'],
+  .astryx-app-shell[data-variant='section'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell[data-height='fill'] {
+    height: 100dvh;
+  }
+
+  .astryx-app-shell[data-height='auto'] {
+    min-height: 100dvh;
+  }
+
+  .astryx-app-shell > .astryx-layout {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .astryx-app-shell__skip {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    background-color: var(--astryx-color-background-surface, #fff);
+    color: var(--astryx-color-text-accent, #262626);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    text-decoration: none;
+    z-index: 9999;
+  }
+
+  .astryx-app-shell__skip:focus {
+    position: fixed;
+    top: var(--astryx-spacing-2, 8px);
+    inset-inline-start: var(--astryx-spacing-2, 8px);
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-app-shell__header[data-variant='wash'],
+  .astryx-app-shell__header[data-variant='elevated'],
+  .astryx-app-shell__sidenav[data-variant='wash'],
+  .astryx-app-shell__sidenav[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__header[data-variant='surface'],
+  .astryx-app-shell__sidenav[data-variant='surface'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__banner {
+    flex-shrink: 0;
+  }
+
+  .astryx-app-shell__mobile-bar {
+    display: flex;
+    align-items: center;
+    height: var(--astryx-spacing-12, 48px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-app-shell__mobile-bar[data-variant='wash'],
+  .astryx-app-shell__mobile-bar[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__mobile-bar[data-variant='surface'],
+  .astryx-app-shell__mobile-bar[data-variant='section'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__mobile-nav {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .astryx-app-shell__mobile-nav > .astryx-mobile-nav-toggle {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .astryx-app-shell__main {
+    display: contents;
+  }
+
+  .astryx-app-shell__main[data-elevated] {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .astryx-app-shell__backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--astryx-color-background-surface, #fff);
+    border-start-start-radius: var(--astryx-radius-page, 1.75rem);
+    pointer-events: none;
+  }
+
+  .astryx-app-shell__content:focus {
+    outline: none;
+  }
+
+  .astryx-app-shell__content[data-variant='wash'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__content[data-variant='surface'],
+  .astryx-app-shell__content[data-variant='elevated']:not([data-corner]) {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__content[data-corner] {
+    background-color: transparent;
+    isolation: isolate;
+  }
+}

package/styles/aspect-ratio.css

@@ -0,0 +1,49 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+/*
+ * fit 的子元素尺寸放在 reset 层，选择器特异性为零。
+ * 子元素自己写的宽高和 object-fit 仍然能盖过这里。
+ */
+@layer astryx.reset {
+  :where([data-astryx-aspect-ratio-override='cover'], [data-astryx-aspect-ratio-override='contain']) > :where(*) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :where([data-astryx-aspect-ratio-override='cover']) > :where(img, video) {
+    object-fit: cover;
+  }
+
+  :where([data-astryx-aspect-ratio-override='contain']) > :where(img, video) {
+    object-fit: contain;
+  }
+}
+
+@layer astryx.components {
+  .astryx-aspect-ratio {
+    position: relative;
+    width: 100%;
+    overflow: clip;
+    min-height: 0;
+    flex-shrink: 0;
+    aspect-ratio: var(--astryx-aspect-ratio);
+  }
+
+  .astryx-aspect-ratio[data-shape='ellipse'] {
+    border-radius: 50%;
+  }
+
+  .astryx-aspect-ratio__child {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-aspect-ratio__child[data-fit='center'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/styles/card.css

@@ -29,6 +29,10 @@
     --container-padding-inline-end: var(--_card-padding-inline-end);
     --container-padding-block-start: var(--_card-padding-block-start);
     --container-padding-block-end: var(--_card-padding-block-end);
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+    --layout-padding-outer-x: var(--_card-padding-inline-start);
+    --layout-padding-outer-y: var(--_card-padding-block-start);
   }
 
   .astryx-card[data-scrollable='true'] {
@@ -111,7 +115,7 @@
   }
 
   .astryx-card[data-variant='muted'] {
-    background-color: var(--astryx-card-muted-background, #f5f5f5);
+    background-color: var(--astryx-card-muted-background, var(--astryx-color-background-muted, #f1f1f1));
   }
 
   .astryx-card[data-variant='blue'] {