@c2n/card 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# @c2n/card
+
+Themeable surface that groups related content and actions, built with Lit.
+
+```bash
+npm install @c2n/card
+```
+
+```html
+<script type="module">
+  import '@c2n/card'
+</script>
+
+<c2-card>
+  <img slot="media" src="cover.jpg" alt="" />
+  <h3 slot="header">Title</h3>
+  Body text goes in the default slot.
+  <c2-button slot="footer">Action</c2-button>
+</c2-card>
+```
+
+- **Sections**: `media` (full-bleed, clipped to the card radius), `header`, the default slot (body) and `footer` (a flex row). A section is rendered only when its slot has content, so a plain `<c2-card>text</c2-card>` is just a padded box.
+- **Link card**: set `href` (plus `target` / `rel`) and the whole card becomes an anchor.
+- **Interactive card**: set `interactive` for button semantics: focusable, `role="button"`, Enter and Space dispatch `click`.
+- **Disabled**: `disabled` dims the card and blocks interaction; a link card loses its anchor.
+
+Everything visual is a CSS custom property: `--c2-card--*` for the surface (padding, radius, borders, background, color, shadow), `--c2-card__header--*`, `--c2-card__footer--*` and `--c2-card__media--*` for the sections, and `--c2-card__hover--*`, `--c2-card__focus--*`, `--c2-card__disabled--*` for the states. `--c2-card__hover--transform: translateY(-2px)` with a hover shadow gives the classic lift. The full list is in `custom-elements.json` and on the docs site.

package/dist/card.js

@@ -0,0 +1,107 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/card.scss?inline
+var card_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n}\n\n.c2-card {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-width: 0;\n  border-top-left-radius: var(--c2-card--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-card--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-card--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-card--border-bottom-right-radius,8px);\n  border-top: var(--c2-card--border-top,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-card--border-bottom,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-card--border-right,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-card--border-left,1px solid rgb(213, 213, 213));\n  background: var(--c2-card--background,rgb(255, 255, 255));\n  color: var(--c2-card--color);\n  box-shadow: var(--c2-card--box-shadow,none);\n  transform: var(--c2-card--transform);\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1), box-shadow 250ms cubic-bezier(0.2, 0, 0, 1), transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-card:hover {\n  border-top: var(--c2-card__hover--border-top,var(--c2-card--border-top,1px solid rgb(213, 213, 213)));\n  border-bottom: var(--c2-card__hover--border-bottom,var(--c2-card--border-bottom,1px solid rgb(213, 213, 213)));\n  border-right: var(--c2-card__hover--border-right,var(--c2-card--border-right,1px solid rgb(213, 213, 213)));\n  border-left: var(--c2-card__hover--border-left,var(--c2-card--border-left,1px solid rgb(213, 213, 213)));\n  background: var(--c2-card__hover--background,var(--c2-card--background,rgb(255, 255, 255)));\n  box-shadow: var(--c2-card__hover--box-shadow,var(--c2-card--box-shadow,none));\n  transform: var(--c2-card__hover--transform,var(--c2-card--transform));\n}\n.c2-card.is-interactive {\n  cursor: pointer;\n  user-select: none;\n}\n.c2-card:focus-visible {\n  outline: var(--c2-card__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-card__focus--outline-offset,2px);\n}\n\na.c2-card {\n  text-decoration: none;\n}\n\n.c2-card-media {\n  overflow: hidden;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n}\n.c2-card-media:last-child {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n}\n.c2-card-media ::slotted(*) {\n  display: block;\n  width: 100%;\n  height: var(--c2-card__media--height);\n  aspect-ratio: var(--c2-card__media--aspect-ratio);\n  object-fit: var(--c2-card__media--object-fit,cover);\n}\n\n.c2-card-header {\n  padding-top: var(--c2-card__header--padding-top,var(--c2-card--padding-top,12px));\n  padding-right: var(--c2-card__header--padding-right,var(--c2-card--padding-right,16px));\n  padding-bottom: var(--c2-card__header--padding-bottom,0px);\n  padding-left: var(--c2-card__header--padding-left,var(--c2-card--padding-left,16px));\n  border-bottom: var(--c2-card__header--border-bottom);\n}\n\n.c2-card-content {\n  flex: 1;\n  padding-top: var(--c2-card--padding-top,12px);\n  padding-right: var(--c2-card--padding-right,16px);\n  padding-bottom: var(--c2-card--padding-bottom,12px);\n  padding-left: var(--c2-card--padding-left,16px);\n}\n\n.c2-card-footer {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-card__footer--gap,8px);\n  justify-content: var(--c2-card__footer--justify-content,flex-start);\n  padding-top: var(--c2-card__footer--padding-top,0px);\n  padding-right: var(--c2-card__footer--padding-right,var(--c2-card--padding-right,16px));\n  padding-bottom: var(--c2-card__footer--padding-bottom,var(--c2-card--padding-bottom,12px));\n  padding-left: var(--c2-card__footer--padding-left,var(--c2-card--padding-left,16px));\n  border-top: var(--c2-card__footer--border-top);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host([disabled]) .c2-card {\n  pointer-events: none;\n  box-shadow: var(--c2-card__disabled--box-shadow,var(--c2-card--box-shadow,none));\n  opacity: var(--c2-card__disabled--opacity,0.38);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-card {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/card.ts
+var Card = class Card extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.interactive = false;
+		this.href = void 0;
+		this.target = void 0;
+		this.rel = void 0;
+		this.hasMedia = false;
+		this.hasHeader = false;
+		this.hasContent = false;
+		this.hasFooter = false;
+	}
+	static {
+		this.styles = unsafeCSS(card_default);
+	}
+	handleSlotChange(event) {
+		this.updateSection(event.target);
+	}
+	/** `slotchange` does not fire for slots that were server-rendered (declarative shadow DOM), so read every slot once. */
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSection(slot);
+	}
+	updateSection(slot) {
+		const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		switch (slot.name) {
+			case "media":
+				this.hasMedia = filled;
+				break;
+			case "header":
+				this.hasHeader = filled;
+				break;
+			case "footer":
+				this.hasFooter = filled;
+				break;
+			default: this.hasContent = filled;
+		}
+	}
+	handleKeydown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.click();
+		}
+	}
+	renderSections() {
+		return html`
+      <div class="c2-card-media" ?hidden=${!this.hasMedia}><slot name="media" @slotchange=${this.handleSlotChange}></slot></div>
+      <div class="c2-card-header" ?hidden=${!this.hasHeader}><slot name="header" @slotchange=${this.handleSlotChange}></slot></div>
+      <div class="c2-card-content" ?hidden=${!this.hasContent}><slot @slotchange=${this.handleSlotChange}></slot></div>
+      <div class="c2-card-footer" ?hidden=${!this.hasFooter}><slot name="footer" @slotchange=${this.handleSlotChange}></slot></div>
+    `;
+	}
+	render() {
+		const isLink = !!this.href && !this.disabled;
+		const interactive = this.interactive || !!this.href;
+		const classes = classMap({
+			"c2-card": true,
+			"is-interactive": interactive
+		});
+		if (isLink) return html`<a class=${classes} href=${this.href} target=${ifDefined(this.target)} rel=${ifDefined(this.rel)}>${this.renderSections()}</a>`;
+		return html`
+      <div
+        class=${classes}
+        role=${interactive ? "button" : nothing}
+        tabindex=${interactive && !this.disabled ? "0" : nothing}
+        aria-disabled=${interactive && this.disabled ? "true" : nothing}
+        @keydown=${interactive && !this.disabled ? this.handleKeydown : nothing}
+      >
+        ${this.renderSections()}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Card.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Card.prototype, "interactive", void 0);
+__decorate([property()], Card.prototype, "href", void 0);
+__decorate([property()], Card.prototype, "target", void 0);
+__decorate([property()], Card.prototype, "rel", void 0);
+__decorate([state()], Card.prototype, "hasMedia", void 0);
+__decorate([state()], Card.prototype, "hasHeader", void 0);
+__decorate([state()], Card.prototype, "hasContent", void 0);
+__decorate([state()], Card.prototype, "hasFooter", void 0);
+Card = __decorate([customElement("c2-card")], Card);
+//#endregion
+export { Card };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@c2n/card",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/card.js",
+  "exports": {
+    ".": {
+      "default": "./dist/card.js",
+      "types": "./types/src/card.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "card",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/card.d.ts

@@ -0,0 +1,94 @@
+import { LitElement } from 'lit';
+/**
+ * Surface that groups related content and actions. The body goes in the default slot; `media`, `header` and `footer`
+ * are optional sections that render only when filled: media bleeds to the edges at the top, header and footer get
+ * their own padding and divider tokens. With `href` the whole card is a link; with `interactive` it behaves like a
+ * button (focusable, Enter and Space click it). Hover, focus and disabled looks are themeable.
+ *
+ * @tag c2-card
+ *
+ * @slot - Card body.
+ * @slot media - Full-bleed image, video or any block shown above the body; it is clipped to the card radius.
+ * @slot header - Title area above the body.
+ * @slot footer - Actions row below the body (a flex row, see the `footer--*` tokens).
+ *
+ * @cssproperty {padding} [--c2-card--padding-top=12px]
+ * @cssproperty {padding} [--c2-card--padding-right=16px]
+ * @cssproperty {padding} [--c2-card--padding-bottom=12px]
+ * @cssproperty {padding} [--c2-card--padding-left=16px]
+ *
+ * @cssproperty {border-radius} [--c2-card--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-card--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-card--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-card--border-bottom-right-radius=8px]
+ *
+ * @cssproperty {border} [--c2-card--border-top=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-card--border-bottom=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-card--border-right=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-card--border-left=1px solid rgb(213, 213, 213)]
+ *
+ * @cssproperty {background} [--c2-card--background=rgb(255, 255, 255)]
+ * @cssproperty {color} --c2-card--color - Text color of the card; inherits by default.
+ * @cssproperty {box-shadow} [--c2-card--box-shadow=none]
+ * @cssproperty {transform} --c2-card--transform
+ *
+ * @cssproperty {padding} --c2-card__header--padding-top - Falls back to `--c2-card--padding-top`.
+ * @cssproperty {padding} --c2-card__header--padding-right - Falls back to `--c2-card--padding-right`.
+ * @cssproperty {padding} [--c2-card__header--padding-bottom=0px]
+ * @cssproperty {padding} --c2-card__header--padding-left - Falls back to `--c2-card--padding-left`.
+ * @cssproperty {border} --c2-card__header--border-bottom - Divider under the header; raise `header--padding-bottom` with it.
+ *
+ * @cssproperty {padding} [--c2-card__footer--padding-top=0px]
+ * @cssproperty {padding} --c2-card__footer--padding-right - Falls back to `--c2-card--padding-right`.
+ * @cssproperty {padding} --c2-card__footer--padding-bottom - Falls back to `--c2-card--padding-bottom`.
+ * @cssproperty {padding} --c2-card__footer--padding-left - Falls back to `--c2-card--padding-left`.
+ * @cssproperty {border} --c2-card__footer--border-top - Divider above the footer; raise `footer--padding-top` with it.
+ * @cssproperty {pixel} [--c2-card__footer--gap=8px]
+ * @cssproperty {justify-content} [--c2-card__footer--justify-content=flex-start]
+ *
+ * @cssproperty {pixel} --c2-card__media--height
+ * @cssproperty {aspect-ratio} --c2-card__media--aspect-ratio
+ * @cssproperty {object-fit} [--c2-card__media--object-fit=cover]
+ *
+ * @cssproperty {border} --c2-card__hover--border-top
+ * @cssproperty {border} --c2-card__hover--border-bottom
+ * @cssproperty {border} --c2-card__hover--border-right
+ * @cssproperty {border} --c2-card__hover--border-left
+ * @cssproperty {background} --c2-card__hover--background
+ * @cssproperty {box-shadow} --c2-card__hover--box-shadow
+ * @cssproperty {transform} --c2-card__hover--transform - e.g. `translateY(-2px)` for a lift.
+ *
+ * @cssproperty {outline} [--c2-card__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-card__focus--outline-offset=2px]
+ *
+ * @cssproperty {box-shadow} --c2-card__disabled--box-shadow
+ * @cssproperty {opacity} [--c2-card__disabled--opacity=0.38]
+ */
+export declare class Card extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** 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;
+    target: string | undefined;
+    rel: string | undefined;
+    private hasMedia;
+    private hasHeader;
+    private hasContent;
+    private hasFooter;
+    private handleSlotChange;
+    /** `slotchange` does not fire for slots that were server-rendered (declarative shadow DOM), so read every slot once. */
+    firstUpdated(): void;
+    private updateSection;
+    private handleKeydown;
+    private renderSections;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-card': Card;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +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"}