comark-cards 0.9.1 → 0.10.1

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.
@@ -63,7 +63,7 @@ const groups = {
63
63
  "warning",
64
64
  "ui-warning",
65
65
  "",
66
- "#d97706",
66
+ "#d57506",
67
67
  "#fbbf24"
68
68
  ],
69
69
  info: [
@@ -120,7 +120,9 @@ function dark(selector, declarations) {
120
120
  }
121
121
  /**
122
122
  * Resolves the `--comark-*` tokens on `selector`, falling back to Nuxt UI's variables, then shadcn/ui's, then shadcn's
123
- * neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back.
123
+ * neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back. The
124
+ * halving sits in the `var()` fallback without a `calc()` of its own, which reads the same once the fallback is
125
+ * substituted, because postcss-calc, which cssnano runs, can't parse a `calc()` there.
124
126
  * They resolve on the component rather than `:root`, so a `--comark-*` set on any ancestor still inherits down.
125
127
  * `:where()` keeps them at zero specificity. The neutral theme follows the system's color mode, and a `.light` or
126
128
  * `.dark` class on the component or above it pins one (see `dark()`).
@@ -132,7 +134,7 @@ function dark(selector, declarations) {
132
134
  function theme(selector, ...extras) {
133
135
  const where = `:where(${selector})`;
134
136
  const list = [...tokens, ...extras.flatMap((name) => groups[name])];
135
- return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}` + dark(where, resolve(list, 4));
137
+ return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,var(--radius,.625rem)/2)*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}` + dark(where, resolve(list, 4));
136
138
  }
137
139
  //#endregion
138
140
  //#region src/styles.ts
package/dist/client.mjs CHANGED
@@ -1 +1 @@
1
- export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-DutJspwH.mjs";
1
+ export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-C-sSWVBR.mjs";
package/dist/html.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { a as rel, n as external, o as css } from "./client-DutJspwH.mjs";
2
- import { i as rawText, n as src_default, r as variants, t as colors } from "./src-B5xGTRHJ.mjs";
1
+ import { a as rel, n as external, o as css } from "./client-C-sSWVBR.mjs";
2
+ import { i as rawText, n as src_default, r as variants, t as colors } from "./src-GDQAmzAY.mjs";
3
3
  import { escapeHtml } from "comark/utils";
4
4
  import { iconHtml, iconStyles } from "comark-icon/html";
5
5
  //#region ../../shared/html.ts
@@ -19,10 +19,10 @@ const card = async (node, state) => {
19
19
  const link = attrs.to ? `<a class="ccr-link" href="${attr(attrs.to)}"${target ? ` target="${attr(target)}"` : ""}${rel(target) ? ` rel="${rel(target)}"` : ""} aria-label="${attr(attrs.label)}"></a>` : "";
20
20
  const icon = attrs.icon ? iconHtml(attrs.icon) : "";
21
21
  const arrow = attrs.external ? `<svg class="ccr-external" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${external}"></path></svg>` : "";
22
- return `${styles(state)}${attrs.icon ? iconStyles(state) : ""}<div class="ccr" data-color="${attr(attrs.color ?? "primary")}"${attrs.variant ? ` data-variant="${attr(attrs.variant)}"` : ""}>${link}${icon}${arrow}${await state.flow(node, state)}</div>`;
22
+ return `${styles(state)}${attrs.icon ? iconStyles(state) : ""}<div class="ccr" data-comark-frame data-color="${attr(attrs.color ?? "primary")}"${attrs.variant ? ` data-variant="${attr(attrs.variant)}"` : ""}>${link}${icon}${arrow}${await state.flow(node, state)}</div>`;
23
23
  };
24
24
  const title = async (node, state) => `<p class="ccr-title">${await state.flow(node, state)}</p>`;
25
- const group = async (node, state) => `${styles(state)}<div class="ccr-group">${await state.flow(node, state)}</div>`;
25
+ const group = async (node, state) => `${styles(state)}<div class="ccr-group" data-comark-frame>${await state.flow(node, state)}</div>`;
26
26
  const columns = async (node, state) => `${styles(state)}<div class="ccr-columns" data-cols="${attr(node[1].cols ?? "2")}">${await state.flow(node, state)}</div>`;
27
27
  const column = async (node, state) => `<div class="ccr-column">${await state.flow(node, state)}</div>`;
28
28
  /** The HTML renderer for `::card-group`, `::card`, and `::columns`. Pass it as `components`. */
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { t as colors, n as default, r as variants } from "./src-B5xGTRHJ.mjs";
1
+ export { t as colors, n as default, r as variants } from "./src-GDQAmzAY.mjs";
package/dist/react.d.mts CHANGED
@@ -17,6 +17,7 @@ type CardProps = Children & {
17
17
  /** `::card` for `@comark/react`. */
18
18
  export declare function Card({ color, variant, to, target, external: opens, label, icon, children }: CardProps): import("react").DetailedReactHTMLElement<{
19
19
  className: string;
20
+ "data-comark-frame": string;
20
21
  "data-color": string;
21
22
  "data-variant": string | undefined;
22
23
  }, HTMLElement>;
@@ -27,6 +28,7 @@ export declare function CardTitle({ children }: Children): import("react").Detai
27
28
  /** `::card-group` for `@comark/react`. */
28
29
  export declare function CardGroup({ children }: Children): import("react").DetailedReactHTMLElement<{
29
30
  className: string;
31
+ "data-comark-frame": string;
30
32
  }, HTMLElement>;
31
33
  /** `::columns` for `@comark/react`. */
32
34
  export declare function Columns({ cols, children }: Children & {
package/dist/react.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DutJspwH.mjs";
2
- import { n as src_default, r as variants, t as colors } from "./src-B5xGTRHJ.mjs";
1
+ import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-C-sSWVBR.mjs";
2
+ import { n as src_default, r as variants, t as colors } from "./src-GDQAmzAY.mjs";
3
3
  import { Icon } from "comark-icon/react";
4
4
  import { createElement, useEffect } from "react";
5
5
  //#region src/react.ts
@@ -22,6 +22,7 @@ function Card({ color = "primary", variant, to, target, external: opens, label,
22
22
  const linkTarget = target || (isExternalHref(href) ? "_blank" : void 0);
23
23
  return createElement("div", {
24
24
  className: "ccr",
25
+ "data-comark-frame": "",
25
26
  "data-color": color,
26
27
  "data-variant": variant
27
28
  }, href ? createElement("a", {
@@ -39,7 +40,10 @@ function CardTitle({ children }) {
39
40
  /** `::card-group` for `@comark/react`. */
40
41
  function CardGroup({ children }) {
41
42
  useEffect(addStyles, []);
42
- return createElement("div", { className: "ccr-group" }, children);
43
+ return createElement("div", {
44
+ className: "ccr-group",
45
+ "data-comark-frame": ""
46
+ }, children);
43
47
  }
44
48
  /** `::columns` for `@comark/react`. */
45
49
  function Columns({ cols = "2", children }) {
@@ -1,4 +1,4 @@
1
- import { i as isSafeHref, r as isExternalHref } from "./client-DutJspwH.mjs";
1
+ import { i as isSafeHref, r as isExternalHref } from "./client-C-sSWVBR.mjs";
2
2
  import { defineComarkPlugin } from "comark";
3
3
  import { resolveAttributes } from "comark/render";
4
4
  import { textContent } from "comark/utils";
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(:not(.light,.light *)):is(:where(.ccr,.ccr-group,.ccr-columns)){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:where(.dark,.dark *):is(:where(.ccr,.ccr-group,.ccr-columns)){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}:where(.ccr){--ccr-primary:var(--_comark-primary);--ccr-secondary:var(--_comark-secondary);--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}.ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}.ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.ccr-columns[data-cols='4']{grid-template-columns:repeat(4,minmax(0,1fr))}.ccr-columns[data-cols='5']{grid-template-columns:repeat(5,minmax(0,1fr))}.ccr-columns[data-cols='6']{grid-template-columns:repeat(6,minmax(0,1fr))}@container (width<36rem){.ccr-group>*,.ccr-columns>*{grid-column:1/-1}}.ccr-group>.ccr{margin:0}.ccr-column>:first-child{margin-top:0}.ccr-column>:last-child{margin-bottom:0}.ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}.ccr[data-color='secondary']{--ccr:var(--ccr-secondary)}.ccr[data-color='success']{--ccr:var(--ccr-success)}.ccr[data-color='info']{--ccr:var(--ccr-info)}.ccr[data-color='warning']{--ccr:var(--ccr-warning)}.ccr[data-color='error']{--ccr:var(--ccr-error)}.ccr[data-color='neutral']{--ccr:var(--ccr-neutral)}.ccr[data-variant='soft'],.ccr[data-variant='subtle']{background:color-mix(in srgb,var(--ccr) 10%,var(--_comark-background))}.ccr[data-variant='soft']{border-color:transparent}.ccr[data-variant='subtle']{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr>:last-child{margin-bottom:0}.ccr>.ci{--comark-icon-size:1.25rem;display:block;margin-bottom:.75rem;color:var(--ccr)}.ccr-title{margin:0 0 .25rem;color:var(--_comark-foreground);font-size:.9375rem;font-weight:600;line-height:1.375rem;text-wrap:balance}.ccr-title+*{margin-top:0}.ccr-link{position:absolute;inset:0;z-index:0;border-radius:inherit}.ccr-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.ccr :is(a,button):not(.ccr-link){position:relative;z-index:1}.ccr:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 50%,var(--_comark-border));background:color-mix(in srgb,var(--_comark-accent) 50%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover{border-color:transparent}.ccr[data-variant='subtle']:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover,.ccr[data-variant='subtle']:has(>.ccr-link):hover{background:color-mix(in srgb,var(--ccr) 16%,var(--_comark-background))}.ccr-external{position:absolute;top:1rem;inset-inline-end:1rem;width:1rem;height:1rem;color:var(--_comark-muted)}.ccr:dir(rtl) .ccr-external{scale:-1 1}@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}}
1
+ @layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d57506));--_comark-info:var(--comark-info,var(--ui-info,#2563eb));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,var(--radius,.625rem)/2)*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(:not(.light,.light *)):is(:where(.ccr,.ccr-group,.ccr-columns)){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:where(.dark,.dark *):is(:where(.ccr,.ccr-group,.ccr-columns)){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}:where(.ccr){--ccr-primary:var(--_comark-primary);--ccr-secondary:var(--_comark-secondary);--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}.ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}.ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.ccr-columns[data-cols='4']{grid-template-columns:repeat(4,minmax(0,1fr))}.ccr-columns[data-cols='5']{grid-template-columns:repeat(5,minmax(0,1fr))}.ccr-columns[data-cols='6']{grid-template-columns:repeat(6,minmax(0,1fr))}@container (width<36rem){.ccr-group>*,.ccr-columns>*{grid-column:1/-1}}.ccr-group>.ccr{margin:0}.ccr-column>:first-child{margin-top:0}.ccr-column>:last-child{margin-bottom:0}.ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}.ccr[data-color='secondary']{--ccr:var(--ccr-secondary)}.ccr[data-color='success']{--ccr:var(--ccr-success)}.ccr[data-color='info']{--ccr:var(--ccr-info)}.ccr[data-color='warning']{--ccr:var(--ccr-warning)}.ccr[data-color='error']{--ccr:var(--ccr-error)}.ccr[data-color='neutral']{--ccr:var(--ccr-neutral)}.ccr[data-variant='soft'],.ccr[data-variant='subtle']{background:color-mix(in srgb,var(--ccr) 10%,var(--_comark-background))}.ccr[data-variant='soft']{border-color:transparent}.ccr[data-variant='subtle']{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr>:last-child{margin-bottom:0}.ccr>.ci{--comark-icon-size:1.25rem;display:block;margin-bottom:.75rem;color:var(--ccr)}.ccr-title{margin:0 0 .25rem;color:var(--_comark-foreground);font-size:.9375rem;font-weight:600;line-height:1.375rem;text-wrap:balance}.ccr-title+*{margin-top:0}.ccr-link{position:absolute;inset:0;z-index:0;border-radius:inherit}.ccr-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.ccr :is(a,button):not(.ccr-link){position:relative;z-index:1}.ccr:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 50%,var(--_comark-border));background:color-mix(in srgb,var(--_comark-accent) 50%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover{border-color:transparent}.ccr[data-variant='subtle']:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover,.ccr[data-variant='subtle']:has(>.ccr-link):hover{background:color-mix(in srgb,var(--ccr) 16%,var(--_comark-background))}.ccr-external{position:absolute;top:1rem;inset-inline-end:1rem;width:1rem;height:1rem;color:var(--_comark-muted)}.ccr:dir(rtl) .ccr-external{scale:-1 1}@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}}
@@ -19,4 +19,4 @@
19
19
  const linkTarget = $derived(target || (isExternalHref(href) ? "_blank" : undefined));
20
20
  </script>
21
21
 
22
- <div class="ccr" data-color={color} data-variant={variant}>{#if href}<a class="ccr-link" href={href} target={linkTarget} rel={rel(linkTarget)} aria-label={label}></a>{/if}{#if icon?.src}<Icon {...icon} />{/if}{#if external}<svg class="ccr-external" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={arrow} /></svg>{/if}{@render children?.()}</div>
22
+ <div class="ccr" data-comark-frame="" data-color={color} data-variant={variant}>{#if href}<a class="ccr-link" href={href} target={linkTarget} rel={rel(linkTarget)} aria-label={label}></a>{/if}{#if icon?.src}<Icon {...icon} />{/if}{#if external}<svg class="ccr-external" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={arrow} /></svg>{/if}{@render children?.()}</div>
@@ -7,4 +7,4 @@
7
7
  onMount(addStyles);
8
8
  </script>
9
9
 
10
- <div class="ccr-group">{@render children?.()}</div>
10
+ <div class="ccr-group" data-comark-frame="">{@render children?.()}</div>
package/dist/vue.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DutJspwH.mjs";
2
- import { n as src_default, r as variants, t as colors } from "./src-B5xGTRHJ.mjs";
1
+ import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-C-sSWVBR.mjs";
2
+ import { n as src_default, r as variants, t as colors } from "./src-GDQAmzAY.mjs";
3
3
  import { defineComponent, h, onMounted } from "vue";
4
4
  import { Icon } from "comark-icon/vue";
5
5
  //#region src/vue.ts
@@ -35,6 +35,7 @@ const Card = defineComponent({
35
35
  onMounted(addStyles);
36
36
  return () => h("div", {
37
37
  class: "ccr",
38
+ "data-comark-frame": "",
38
39
  "data-color": props.color,
39
40
  "data-variant": props.variant
40
41
  }, [
@@ -65,7 +66,10 @@ const CardGroup = defineComponent({
65
66
  inheritAttrs: false,
66
67
  setup(_, { slots }) {
67
68
  onMounted(addStyles);
68
- return () => h("div", { class: "ccr-group" }, slots.default?.());
69
+ return () => h("div", {
70
+ class: "ccr-group",
71
+ "data-comark-frame": ""
72
+ }, slots.default?.());
69
73
  }
70
74
  });
71
75
  /** `::columns` for `@comark/vue`. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comark-cards",
3
- "version": "0.9.1",
3
+ "version": "0.10.1",
4
4
  "description": "Cards, link cards, and columns in Nuxt UI's syntax, with no script. A Comark plugin.",
5
5
  "keywords": [
6
6
  "card",
@@ -46,24 +46,24 @@
46
46
  "provenance": true
47
47
  },
48
48
  "dependencies": {
49
- "comark-icon": "^0.9.1"
49
+ "comark-icon": "^0.10.1"
50
50
  },
51
51
  "devDependencies": {
52
- "@comark/html": "^0.8.1",
53
- "@comark/react": "^0.8.1",
54
- "@comark/vue": "^0.8.1",
52
+ "@comark/html": "^0.9.0",
53
+ "@comark/react": "^0.9.0",
54
+ "@comark/vue": "^0.9.0",
55
55
  "@types/react": "^19.3.0",
56
56
  "@types/react-dom": "^19.3.0",
57
- "comark": "^0.8.1",
57
+ "comark": "^0.9.0",
58
58
  "react": "^19.3.1",
59
59
  "react-dom": "^19.3.1",
60
60
  "svelte": "^5.57.2",
61
61
  "vue": "^3.5.44",
62
- "comark-zoom": "0.9.1"
62
+ "comark-zoom": "0.10.1"
63
63
  },
64
64
  "peerDependencies": {
65
- "@comark/html": "^0.8.0",
66
- "comark": "^0.8.0",
65
+ "@comark/html": "^0.9.0",
66
+ "comark": "^0.9.0",
67
67
  "react": ">=18",
68
68
  "svelte": ">=5",
69
69
  "vue": ">=3.5"