@c2n/card 0.0.6 → 0.0.8

package/dist/card.js

@@ -1,5 +1,6 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/card.scss?inline
@@ -15,8 +16,11 @@ function __decorate(decorators, target, key, desc) {
 //#endregion
 //#region src/card.ts
 var Card = class Card extends LitElement {
-	constructor(..._args) {
-		super(..._args);
+	static {
+		this.styles = unsafeCSS(card_default);
+	}
+	constructor() {
+		super();
 		this.disabled = false;
 		this.interactive = false;
 		this.href = void 0;
@@ -26,9 +30,12 @@ var Card = class Card extends LitElement {
 		this.hasHeader = false;
 		this.hasContent = false;
 		this.hasFooter = false;
-	}
-	static {
-		this.styles = unsafeCSS(card_default);
+		this.addEventListener("click", (event) => {
+			if (this.disabled && (this.interactive || this.href)) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		}, true);
 	}
 	handleSlotChange(event) {
 		this.updateSection(event.target);
@@ -53,6 +60,7 @@ var Card = class Card extends LitElement {
 		}
 	}
 	handleKeydown(event) {
+		if (event.target !== event.currentTarget) return;
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
 			this.click();

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/card",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/card.js",
   "exports": {
     ".": {
-      "default": "./dist/card.js",
-      "types": "./types/src/card.d.ts"
+      "types": "./types/src/card.d.ts",
+      "default": "./dist/card.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "card",
@@ -48,12 +60,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/card. Import once, anywhere in the program:
+//
+//     import '@c2n/card/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Card } from '@c2n/card'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-card': C2Props<Card>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/card.d.ts

@@ -66,13 +66,16 @@ import { LitElement } from 'lit';
  */
 export declare class Card extends LitElement {
     static styles: import("lit").CSSResult;
+    constructor();
     /** Dims the card and ignores pointer and keyboard interaction. A link card renders without its anchor. */
     disabled: boolean;
     /** Button-like card: focusable, `role="button"`, Enter and Space dispatch `click`, pointer cursor. Implied by `href`. */
     interactive: boolean;
     /** Makes the whole card a link. */
     href: string | undefined;
+    /** Browsing context used when `href` is set, such as `_blank`. */
     target: string | undefined;
+    /** Link relationship forwarded to the anchor when `href` is set. */
     rel: string | undefined;
     private hasMedia;
     private hasHeader;

package/types/src/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,0GAA0G;IAC9D,QAAQ,UAAQ;IAE5D,yHAAyH;IAC7E,WAAW,UAAQ;IAE/D,mCAAmC;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEpC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAEtC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAEtC,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAQ;IAElC,OAAO,CAAC,gBAAgB;IAIxB,wHAAwH;IAC/G,YAAY;IAIrB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IASb,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;;IAgB1C,0GAA0G;IAC9D,QAAQ,UAAQ;IAE5D,yHAAyH;IAC7E,WAAW,UAAQ;IAE/D,mCAAmC;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,kEAAkE;IACtD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElD,oEAAoE;IACxD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAEtC,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAQ;IAElC,OAAO,CAAC,gBAAgB;IAIxB,wHAAwH;IAC/G,YAAY;IAIrB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IASb,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}

package/vue.d.ts

@@ -0,0 +1,29 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/card. Import once, anywhere in the program:
+//
+//     import '@c2n/card/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Card } from '@c2n/card'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-card': DefineComponent<C2Props<Card>>
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}