@c2n/header 0.0.7

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,19 @@
+# Header
+
+A site-shell header that arranges brand, navigation, actions and a mobile trigger without owning navigation state.
+
+```bash
+npm install @c2n/header
+```
+
+```html
+<script type="module">
+  import '@c2n/header'
+</script>
+
+<c2-header sticky blurred>
+  <strong slot="brand">Northstar</strong>
+  <a href="/markets">Markets</a>
+  <button slot="actions">Sign in</button>
+</c2-header>
+```

package/dist/header.js

@@ -0,0 +1,48 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/header.scss?inline
+var header_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 10;\n  top: var(--c2-header--sticky-top,0px);\n}\n\n.c2-header {\n  display: flex;\n  min-height: var(--c2-header--min-height,64px);\n  box-sizing: border-box;\n  align-items: center;\n  gap: var(--c2-header--gap,24px);\n  padding: var(--c2-header--padding,8px 24px);\n  color: var(--c2-header--color,#18181b);\n  background: var(--c2-header--background,#ffffff);\n  border-bottom: var(--c2-header--border-bottom,1px solid #e4e4e7);\n  box-shadow: var(--c2-header--box-shadow,none);\n}\n\n:host([blurred]) .c2-header {\n  background: var(--c2-header__blurred--background,rgba(255, 255, 255, 0.82));\n  backdrop-filter: var(--c2-header--backdrop-filter,blur(16px));\n}\n\n.brand,\n.actions {\n  display: flex;\n  align-items: center;\n}\n\n.brand {\n  flex: 0 0 auto;\n  gap: var(--c2-header__brand--gap,8px);\n}\n\n.navigation {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 auto;\n  align-items: center;\n}\n\n.actions {\n  margin-inline-start: auto;\n  gap: var(--c2-header__actions--gap,8px);\n}\n\n.mobile-trigger {\n  display: flex;\n  align-items: center;\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/header.ts
+var Header = class Header extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.sticky = false;
+		this.blurred = false;
+		this.navigationLabel = "Primary";
+	}
+	static {
+		this.styles = unsafeCSS(header_default);
+	}
+	render() {
+		return html`
+      <header class="c2-header" part="header">
+        <div class="brand" part="brand"><slot name="brand"></slot></div>
+        <nav class="navigation" part="navigation" aria-label=${this.navigationLabel}><slot></slot></nav>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+        <div class="mobile-trigger" part="mobile-trigger"><slot name="mobile-trigger"></slot></div>
+      </header>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Header.prototype, "sticky", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Header.prototype, "blurred", void 0);
+__decorate([property({ attribute: "navigation-label" })], Header.prototype, "navigationLabel", void 0);
+Header = __decorate([customElement("c2-header")], Header);
+//#endregion
+export { Header };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/header",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/header.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/header.d.ts",
+      "default": "./dist/header.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",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "header",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "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",
+    "build:only": "vite build",
+    "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.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

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/header. Import once, anywhere in the program:
+//
+//     import '@c2n/header/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 { Header } from '@c2n/header'
+
+/** 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-header': C2Props<Header>
+    }
+  }
+}
+
+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/header.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * A site-header shell that arranges branding, navigation, actions and an optional mobile trigger. Navigation behaviour
+ * remains the responsibility of slotted controls such as `c2-navigation-menu`.
+ *
+ * @tag c2-header
+ * @slot brand - Logo, product name or home link.
+ * @slot - Primary navigation.
+ * @slot actions - Account and application actions aligned to the end.
+ * @slot mobile-trigger - Responsive navigation trigger, placed after the actions.
+ * @cssproperty {pixel} [--c2-header--min-height=64px]
+ * @cssproperty {padding} [--c2-header--padding=8px 24px]
+ * @cssproperty {pixel} [--c2-header--gap=24px]
+ * @cssproperty {color} [--c2-header--background=#ffffff]
+ * @cssproperty {color} [--c2-header--color=#18181b]
+ * @cssproperty {border} [--c2-header--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {box-shadow} [--c2-header--box-shadow=none]
+ * @cssproperty {pixel} [--c2-header--sticky-top=0px]
+ * @cssproperty {backdrop-filter} [--c2-header--backdrop-filter=blur(16px)]
+ * @cssproperty {color} [--c2-header__blurred--background=rgba(255, 255, 255, 0.82)]
+ * @cssproperty {pixel} [--c2-header__brand--gap=8px]
+ * @cssproperty {pixel} [--c2-header__actions--gap=8px]
+ */
+export declare class Header extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Pins the header to the configured top offset. */
+    sticky: boolean;
+    /** Uses a translucent background and backdrop filter. */
+    blurred: boolean;
+    /** Accessible name for the primary navigation landmark. */
+    navigationLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-header': Header;
+    }
+}
+//# sourceMappingURL=header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1C,oDAAoD;IACR,MAAM,UAAQ;IAE1D,yDAAyD;IACb,OAAO,UAAQ;IAE3D,2DAA2D;IACd,eAAe,SAAY;IAE/D,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/header. Import once, anywhere in the program:
+//
+//     import '@c2n/header/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 { Header } from '@c2n/header'
+
+/** 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-header': DefineComponent<
+      C2Props<Header> & {
+        'navigation-label'?: unknown
+      }
+    >
+  }
+}
+
+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 {}