@luz-ds/app 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024–2026 Fernando Muñoz
+
+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

@@ -1,3 +1,91 @@
-# Temporary Holding Version
+# @luz-ds/app
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The header and the dashboard of a web application: the bar at the top of the main area (the menu button, the product's name on a phone, the search and the account) and the view's grid of panels. Each is a class on a native element, laid out in the markup by `@luz-ds/core`'s objects (`.o-shell`, `.o-main`, `.o-sticky`, `.o-row`, `.o-actions`, `.o-grid`) and its sidebar, dropdown, avatar and card; app adds only its skin and its rhythm. `@luz-ds/site` is optional: its search goes in the header's actions.
+
+> **Beta, version 0.x.** App has a version of its own, apart from tokens, core and site, and grows in minor versions while it is 0.x: any of them may change a class. Pin an exact version and read the changelog before you upgrade.
+
+## When to use it
+
+- You build a tool that people sign in to, with a sidebar of sections and a view for each.
+- You want a quiet bar for the global tools, and a dashboard of panels for the view's state.
+- Not for a landing page (`@luz-ds/landing`), a blog (`@luz-ds/cms`) or documentation.
+
+There is no sidebar of its own: core's `.luz-sidebar` is a column from 769 px and a drawer at 768 px and below, opened by the menu button with no script. An icon rail and a collapsible sidebar are not in 0.1. The app page, an app with no sidebar and an empty dashboard need no CSS of their own: they are markup to copy, on the [App templates](https://nandovejer.github.io/luz/docs/app/templates/) page of the docs.
+
+## Prerequisites
+
+Requires `@luz-ds/tokens` and `@luz-ds/core`, version `^0.1.0`, declared as peer dependencies, loaded in that order before this package. `@luz-ds/site` (`^0.1.0`) is an optional peer: load it before this package if you use its search; the patterns work without it.
+
+## Installation
+
+```bash
+npm install @luz-ds/tokens @luz-ds/core @luz-ds/site @luz-ds/app
+```
+
+## Usage
+
+### Via npm/bundler
+
+```js
+import '@luz-ds/tokens/css'
+import '@luz-ds/core/css'
+import '@luz-ds/site/css'
+import '@luz-ds/app/css'
+```
+
+### Via CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.1.0/dist/luz-tokens.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.1.0/dist/luz.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/site@0.1.0/dist/site.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/app@0.1.0/dist/app.min.css">
+```
+
+There is no script: the drawer and the account list are native popovers. Core's script is optional: with it, the sidebar marks the current link and closes the drawer when a link is followed.
+
+The view's `h1` and its main action are not in the bar: they are the first row of the dashboard (`__head`), so the bar holds only what is the same in every view.
+
+## Package exports
+
+- **`./css`** → `app.css` — the patterns, in the cascade layer `luz.app`, after `luz.cms` (`./css/min` for the minified twin)
+- **`./components/*`** → `dist/components/` — one stylesheet per pattern, `<name>.css` and `<name>.min.css`, each in `luz.app`, for a page that loads only what it uses
+
+## Classes included
+
+- `.luz-app-header` (`__toggle`, `__product`, `__actions`, `__account`, `__account-name`) — The bar at the top of `.o-main`, one row of core's `--luz-bar-h`, kept at the top with `.o-sticky`: the menu button, the product's name while the sidebar is a drawer, the search and the account. [Docs](https://nandovejer.github.io/luz/docs/app/header/)
+- `.luz-app-dashboard` (`__head`, `__title`, `__panel`, `__panel--wide`) — The view: its title row, then a grid of panels (core's `.o-grid--auto` and `.luz-card`) as many columns as fit, none narrower than 18 rem; a wide panel takes two columns when the view is 40 rem wide. [Docs](https://nandovejer.github.io/luz/docs/app/dashboard/)
+
+<!-- luz:ai-agents:start -->
+## For AI agents
+
+`@luz-ds/app` 0.1.0 is in beta: any release may break anything. Read the breaking changes below before you update, and use only what the files under "Read first" list.
+
+### Breaking changes
+
+First release of `@luz-ds/app`. Nothing breaks inside @luz-ds. Coming from `@cai-ds/*`: see the migration note in `CHANGELOG.md`.
+
+Older versions: https://github.com/nandovejer/luz/blob/main/packages/app/CHANGELOG.md
+
+### Read first
+
+1. `dist/classes.json` in this package: the classes and custom properties its CSS defines. Write only those.
+2. https://nandovejer.github.io/luz/llms.txt: the index of the documentation, short enough for a small context.
+3. https://nandovejer.github.io/luz/llms-full.txt: the same pages in full.
+4. https://nandovejer.github.io/luz/examples/: one standalone page of markup for each component and pattern.
+
+### Load order
+
+This package needs `@luz-ds/tokens` and `@luz-ds/core` loaded first.
+
+`@luz-ds/site` is optional: the CSS of this package works with the packages above alone.
+
+### Check what you write
+
+Run `npx @luz-ds/check <files>` on every HTML and CSS file you write, and fix what it reports. To copy the accessibility reviewer into your project: `npx @luz-ds/check agent > .claude/agents/luz-accessibility-reviewer.md`.
+
+<!-- luz:ai-agents:end -->
+
+## License
+
+MIT

package/dist/app.css

@@ -0,0 +1,174 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.app {
+/* ==========================================================================
+   LUZ APP
+   The header and the dashboard of a web application. Each is a class on a
+   native element, laid out in the markup by core's objects (.o-shell and
+   .o-main with the sidebar, .o-sticky, .o-row, .o-actions, .o-grid) and
+   core's components (sidebar, nav toggle, dropdown, avatar, card, button).
+   App adds only its skin and its rhythm. No JavaScript.
+   Requires: @luz-ds/tokens and @luz-ds/core loaded first; @luz-ds/site
+   optional, loaded before this file.
+   ========================================================================== */
+
+/* ==========================================================================
+	 LUZ APP: header.
+	 The bar at the top of the main area: header.luz-app-header.o-sticky >
+	 div.o-row, inside .o-main beside the sidebar. It holds core's
+	 .luz-nav-toggle (it opens the sidebar drawer), the __product name, and
+	 div.o-row.__actions: site's <luz-search> if it is loaded, then a
+	 .luz-dropdown whose button is the __account (initials in a .luz-avatar,
+	 then the __account-name). It is the chrome only: the view's h1 and its
+	 primary action are in the dashboard's title row.
+	 Core gives the stickiness, the row and the drawer; app adds the surface,
+	 the divider and the rhythm.
+	 ========================================================================== */
+
+/* A one-row bar of 44px controls is core's --luz-bar-h tall: two 2xs
+   paddings, the row and the divider. With enlarged text the row wraps
+   and the bar grows. */
+.luz-app-header {
+	padding-block: var(--luz-space-2xs);
+	border-block-end: 1px solid var(--luz-divider);
+	background: var(--luz-surface-page);
+}
+
+/* The gutters are the content's (core's .o-container: md, xl from 641px),
+   so the toggle starts where the view starts */
+.luz-app-header > .o-row {
+	gap: var(--luz-space-xs) var(--luz-space-md);
+	padding-inline: var(--luz-space-xl);
+}
+
+/* The global tools sit together at the inline end */
+.luz-app-header__actions {
+	gap: var(--luz-space-xs);
+	margin-inline-start: auto;
+}
+
+/* The product's name, only while the sidebar is a drawer and its brand is
+   out of sight (so it is never twice in the tree). Without the popover API
+   the sidebar stays in the flow with its brand, and so does this stay out. */
+.luz-app-header__product {
+	display: none;
+	margin: 0;
+	color: var(--luz-text-primary);
+	font-size: var(--luz-text-md);
+	font-weight: 600;
+}
+
+/* The account's button: the initials, then the name, in a 44px target */
+.luz-app-header__account {
+	min-inline-size: var(--luz-control-lg);
+	padding-inline: var(--luz-space-xs);
+}
+
+/* The page is the scroller, so the sticky bar sticks to the window; if an
+   .o-main of yours scrolls on its own, what it focuses stays clear of the bar */
+:root:has(.luz-app-header) .o-main {
+	scroll-padding-block-start: var(--luz-bar-h);
+}
+
+/* The account list opens at the end of its button, so it stays in the
+   window at the inline end of the bar (core's panel opens at the start) */
+@supports selector(:popover-open) and (inset-block-start: anchor(end)) {
+	.luz-app-header .luz-dropdown__menu:popover-open {
+		inset-inline: auto anchor(end);
+	}
+}
+
+@supports selector(:popover-open) {
+	@media (max-width: 768px) {
+		.luz-app-header__product {
+			display: block;
+		}
+	}
+}
+
+/* At 640px and below the name is only in the button's name: clipped to
+   nothing, never display: none, as the search label is */
+@media (max-width: 640px) {
+	.luz-app-header > .o-row {
+		padding-inline: var(--luz-space-md);
+	}
+
+	.luz-app-header__account-name {
+		position: absolute;
+		inline-size: 1px;
+		block-size: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+
+/* ==========================================================================
+	 LUZ APP: dashboard.
+	 main.luz-app-dashboard: the view. It holds a __head (a div with the
+	 view's h1, the __title, and core's .o-actions) and a ul.o-grid.o-grid--auto
+	 of li.luz-card.__panel, each starting with its h2. Core gives the grid
+	 and the card; app sets the room, the padding, the column width and the
+	 wide panel. The panels keep the order of the markup: no dense packing,
+	 no order.
+	 ========================================================================== */
+
+/* The container of its own size query: a panel answers to the room the
+   view has, with or without a sidebar, not to the window's. 18rem is the
+   narrowest column of the grid. */
+.luz-app-dashboard {
+	--luz-grid-min: 18rem;
+
+	display: grid;
+	align-content: start;
+	gap: var(--luz-space-lg);
+	padding: var(--luz-space-xl);
+	container-type: inline-size;
+}
+
+/* The view's name and what to do first, in one row that wraps */
+.luz-app-dashboard__head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--luz-space-sm) var(--luz-space-md);
+}
+
+.luz-app-dashboard__title {
+	margin: 0;
+	color: var(--luz-text-primary);
+	font-size: var(--luz-text-2xl);
+	font-weight: 600;
+}
+
+/* A wide child never widens its column: it scrolls inside the panel */
+.luz-app-dashboard__panel {
+	min-inline-size: 0;
+}
+
+/* Two columns always exist from 40rem (2 x 18rem and a gap), so it never
+   asks for a column that is not there */
+@container (min-width: 40rem) {
+	.luz-app-dashboard__panel--wide {
+		grid-column: span 2;
+	}
+}
+
+@media (max-width: 640px) {
+	.luz-app-dashboard {
+		padding: var(--luz-space-md);
+	}
+
+	.luz-app-dashboard__title {
+		font-size: var(--luz-text-xl);
+	}
+
+	/* Core's actions are a column here: below the title, not beside it */
+	.luz-app-dashboard__head {
+		flex-flow: column nowrap;
+		align-items: stretch;
+	}
+}
+
+
+}

package/dist/app.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.app{.luz-app-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-app-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md);padding-inline:var(--luz-space-xl)}.luz-app-header__actions{gap:var(--luz-space-xs);margin-inline-start:auto}.luz-app-header__product{display:none;margin:0;color:var(--luz-text-primary);font-size:var(--luz-text-md);font-weight:600}.luz-app-header__account{min-inline-size:var(--luz-control-lg);padding-inline:var(--luz-space-xs)}:root:has(.luz-app-header) .o-main{scroll-padding-block-start:var(--luz-bar-h)}@supports selector(:popover-open) and (inset-block-start: anchor(end)){.luz-app-header .luz-dropdown__menu:popover-open{inset-inline:auto anchor(end)}}@supports selector(:popover-open){@media(max-width:768px){.luz-app-header__product{display:block}}}@media(max-width:640px){.luz-app-header>.o-row{padding-inline:var(--luz-space-md)}.luz-app-header__account-name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}.luz-app-dashboard{--luz-grid-min: 18rem;display:grid;align-content:start;gap:var(--luz-space-lg);padding:var(--luz-space-xl);container-type:inline-size}.luz-app-dashboard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--luz-space-sm) var(--luz-space-md)}.luz-app-dashboard__title{margin:0;color:var(--luz-text-primary);font-size:var(--luz-text-2xl);font-weight:600}.luz-app-dashboard__panel{min-inline-size:0}@container (min-width: 40rem){.luz-app-dashboard__panel--wide{grid-column:span 2}}@media(max-width:640px){.luz-app-dashboard{padding:var(--luz-space-md)}.luz-app-dashboard__title{font-size:var(--luz-text-xl)}.luz-app-dashboard__head{flex-flow:column nowrap;align-items:stretch}}}

package/dist/classes.json

@@ -0,0 +1,23 @@
+{
+  "schema": 1,
+  "package": "@luz-ds/app",
+  "version": "0.1.0",
+  "classes": [
+    { "name": "luz-app-dashboard", "kind": "pattern", "layer": "luz.app", "files": ["components/dashboard.css"], "defined": true, "block": "luz-app-dashboard" },
+    { "name": "luz-app-dashboard__head", "kind": "pattern", "layer": "luz.app", "files": ["components/dashboard.css"], "defined": true, "block": "luz-app-dashboard", "part": "head" },
+    { "name": "luz-app-dashboard__panel", "kind": "pattern", "layer": "luz.app", "files": ["components/dashboard.css"], "defined": true, "block": "luz-app-dashboard", "part": "panel" },
+    { "name": "luz-app-dashboard__panel--wide", "kind": "pattern", "layer": "luz.app", "files": ["components/dashboard.css"], "defined": true, "block": "luz-app-dashboard", "modifier": "wide", "part": "panel" },
+    { "name": "luz-app-dashboard__title", "kind": "pattern", "layer": "luz.app", "files": ["components/dashboard.css"], "defined": true, "block": "luz-app-dashboard", "part": "title" },
+    { "name": "luz-app-header", "kind": "pattern", "layer": "luz.app", "files": ["components/header.css"], "defined": true, "block": "luz-app-header" },
+    { "name": "luz-app-header__account", "kind": "pattern", "layer": "luz.app", "files": ["components/header.css"], "defined": true, "block": "luz-app-header", "part": "account" },
+    { "name": "luz-app-header__account-name", "kind": "pattern", "layer": "luz.app", "files": ["components/header.css"], "defined": true, "block": "luz-app-header", "part": "account-name" },
+    { "name": "luz-app-header__actions", "kind": "pattern", "layer": "luz.app", "files": ["components/header.css"], "defined": true, "block": "luz-app-header", "part": "actions" },
+    { "name": "luz-app-header__product", "kind": "pattern", "layer": "luz.app", "files": ["components/header.css"], "defined": true, "block": "luz-app-header", "part": "product" },
+    { "name": "luz-dropdown__menu", "kind": "component", "layer": "luz.app", "files": ["components/header.css"], "defined": false, "block": "luz-dropdown", "part": "menu" },
+    { "name": "o-main", "kind": "object", "layer": "luz.app", "files": ["components/header.css"], "defined": false, "block": "o-main" },
+    { "name": "o-row", "kind": "object", "layer": "luz.app", "files": ["components/header.css"], "defined": false, "block": "o-row" }
+  ],
+  "properties": [
+    { "name": "--luz-grid-min", "scope": "component", "layer": "luz.app", "files": ["components/dashboard.css"] }
+  ]
+}

package/dist/components/dashboard.css

@@ -0,0 +1,71 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.app {
+/* ==========================================================================
+	 LUZ APP: dashboard.
+	 main.luz-app-dashboard: the view. It holds a __head (a div with the
+	 view's h1, the __title, and core's .o-actions) and a ul.o-grid.o-grid--auto
+	 of li.luz-card.__panel, each starting with its h2. Core gives the grid
+	 and the card; app sets the room, the padding, the column width and the
+	 wide panel. The panels keep the order of the markup: no dense packing,
+	 no order.
+	 ========================================================================== */
+
+/* The container of its own size query: a panel answers to the room the
+   view has, with or without a sidebar, not to the window's. 18rem is the
+   narrowest column of the grid. */
+.luz-app-dashboard {
+	--luz-grid-min: 18rem;
+
+	display: grid;
+	align-content: start;
+	gap: var(--luz-space-lg);
+	padding: var(--luz-space-xl);
+	container-type: inline-size;
+}
+
+/* The view's name and what to do first, in one row that wraps */
+.luz-app-dashboard__head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--luz-space-sm) var(--luz-space-md);
+}
+
+.luz-app-dashboard__title {
+	margin: 0;
+	color: var(--luz-text-primary);
+	font-size: var(--luz-text-2xl);
+	font-weight: 600;
+}
+
+/* A wide child never widens its column: it scrolls inside the panel */
+.luz-app-dashboard__panel {
+	min-inline-size: 0;
+}
+
+/* Two columns always exist from 40rem (2 x 18rem and a gap), so it never
+   asks for a column that is not there */
+@container (min-width: 40rem) {
+	.luz-app-dashboard__panel--wide {
+		grid-column: span 2;
+	}
+}
+
+@media (max-width: 640px) {
+	.luz-app-dashboard {
+		padding: var(--luz-space-md);
+	}
+
+	.luz-app-dashboard__title {
+		font-size: var(--luz-text-xl);
+	}
+
+	/* Core's actions are a column here: below the title, not beside it */
+	.luz-app-dashboard__head {
+		flex-flow: column nowrap;
+		align-items: stretch;
+	}
+}
+
+}

package/dist/components/dashboard.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.app{.luz-app-dashboard{--luz-grid-min: 18rem;display:grid;align-content:start;gap:var(--luz-space-lg);padding:var(--luz-space-xl);container-type:inline-size}.luz-app-dashboard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--luz-space-sm) var(--luz-space-md)}.luz-app-dashboard__title{margin:0;color:var(--luz-text-primary);font-size:var(--luz-text-2xl);font-weight:600}.luz-app-dashboard__panel{min-inline-size:0}@container (min-width: 40rem){.luz-app-dashboard__panel--wide{grid-column:span 2}}@media(max-width:640px){.luz-app-dashboard{padding:var(--luz-space-md)}.luz-app-dashboard__title{font-size:var(--luz-text-xl)}.luz-app-dashboard__head{flex-flow:column nowrap;align-items:stretch}}}

package/dist/components/header.css

@@ -0,0 +1,94 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.app {
+/* ==========================================================================
+	 LUZ APP: header.
+	 The bar at the top of the main area: header.luz-app-header.o-sticky >
+	 div.o-row, inside .o-main beside the sidebar. It holds core's
+	 .luz-nav-toggle (it opens the sidebar drawer), the __product name, and
+	 div.o-row.__actions: site's <luz-search> if it is loaded, then a
+	 .luz-dropdown whose button is the __account (initials in a .luz-avatar,
+	 then the __account-name). It is the chrome only: the view's h1 and its
+	 primary action are in the dashboard's title row.
+	 Core gives the stickiness, the row and the drawer; app adds the surface,
+	 the divider and the rhythm.
+	 ========================================================================== */
+
+/* A one-row bar of 44px controls is core's --luz-bar-h tall: two 2xs
+   paddings, the row and the divider. With enlarged text the row wraps
+   and the bar grows. */
+.luz-app-header {
+	padding-block: var(--luz-space-2xs);
+	border-block-end: 1px solid var(--luz-divider);
+	background: var(--luz-surface-page);
+}
+
+/* The gutters are the content's (core's .o-container: md, xl from 641px),
+   so the toggle starts where the view starts */
+.luz-app-header > .o-row {
+	gap: var(--luz-space-xs) var(--luz-space-md);
+	padding-inline: var(--luz-space-xl);
+}
+
+/* The global tools sit together at the inline end */
+.luz-app-header__actions {
+	gap: var(--luz-space-xs);
+	margin-inline-start: auto;
+}
+
+/* The product's name, only while the sidebar is a drawer and its brand is
+   out of sight (so it is never twice in the tree). Without the popover API
+   the sidebar stays in the flow with its brand, and so does this stay out. */
+.luz-app-header__product {
+	display: none;
+	margin: 0;
+	color: var(--luz-text-primary);
+	font-size: var(--luz-text-md);
+	font-weight: 600;
+}
+
+/* The account's button: the initials, then the name, in a 44px target */
+.luz-app-header__account {
+	min-inline-size: var(--luz-control-lg);
+	padding-inline: var(--luz-space-xs);
+}
+
+/* The page is the scroller, so the sticky bar sticks to the window; if an
+   .o-main of yours scrolls on its own, what it focuses stays clear of the bar */
+:root:has(.luz-app-header) .o-main {
+	scroll-padding-block-start: var(--luz-bar-h);
+}
+
+/* The account list opens at the end of its button, so it stays in the
+   window at the inline end of the bar (core's panel opens at the start) */
+@supports selector(:popover-open) and (inset-block-start: anchor(end)) {
+	.luz-app-header .luz-dropdown__menu:popover-open {
+		inset-inline: auto anchor(end);
+	}
+}
+
+@supports selector(:popover-open) {
+	@media (max-width: 768px) {
+		.luz-app-header__product {
+			display: block;
+		}
+	}
+}
+
+/* At 640px and below the name is only in the button's name: clipped to
+   nothing, never display: none, as the search label is */
+@media (max-width: 640px) {
+	.luz-app-header > .o-row {
+		padding-inline: var(--luz-space-md);
+	}
+
+	.luz-app-header__account-name {
+		position: absolute;
+		inline-size: 1px;
+		block-size: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+
+}

package/dist/components/header.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.app{.luz-app-header{padding-block:var(--luz-space-2xs);border-block-end:1px solid var(--luz-divider);background:var(--luz-surface-page)}.luz-app-header>.o-row{gap:var(--luz-space-xs) var(--luz-space-md);padding-inline:var(--luz-space-xl)}.luz-app-header__actions{gap:var(--luz-space-xs);margin-inline-start:auto}.luz-app-header__product{display:none;margin:0;color:var(--luz-text-primary);font-size:var(--luz-text-md);font-weight:600}.luz-app-header__account{min-inline-size:var(--luz-control-lg);padding-inline:var(--luz-space-xs)}:root:has(.luz-app-header) .o-main{scroll-padding-block-start:var(--luz-bar-h)}@supports selector(:popover-open) and (inset-block-start: anchor(end)){.luz-app-header .luz-dropdown__menu:popover-open{inset-inline:auto anchor(end)}}@supports selector(:popover-open){@media(max-width:768px){.luz-app-header__product{display:block}}}@media(max-width:640px){.luz-app-header>.o-row{padding-inline:var(--luz-space-md)}.luz-app-header__account-name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@luz-ds/app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "LUZ Design System — the header and the dashboard of a web application (a bar with search and the account, a grid of panels), built on @luz-ds/core",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./css": "./dist/app.css",
+    "./css/min": "./dist/app.min.css",
+    "./components/*": "./dist/components/*",
+    "./classes.json": "./dist/classes.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nandovejer/luz.git",
+    "directory": "packages/app"
+  },
+  "homepage": "https://github.com/nandovejer/luz#readme",
+  "bugs": {
+    "url": "https://github.com/nandovejer/luz/issues"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "app",
+    "dashboard",
+    "patterns",
+    "vanilla"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@luz-ds/core": "^0.1.0",
+    "@luz-ds/site": "^0.1.0",
+    "@luz-ds/tokens": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@luz-ds/site": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@luz-ds/core": "0.1.0",
+    "@luz-ds/tokens": "0.1.0",
+    "@luz-ds/site": "0.1.0"
+  }
 }