@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.2

package/src/components/CnRegisterMapping/index.js

@@ -0,0 +1 @@
+export { default as CnRegisterMapping } from './CnRegisterMapping.vue'

package/src/components/index.js

@@ -1,9 +1,6 @@
 export { CnDataTable } from './CnDataTable/index.js'
 export { CnFilterBar } from './CnFilterBar/index.js'
-export { CnListViewLayout } from './CnListViewLayout/index.js'
-export { CnDetailViewLayout } from './CnDetailViewLayout/index.js'
 export { CnStatusBadge } from './CnStatusBadge/index.js'
-export { CnEmptyState } from './CnEmptyState/index.js'
 export { CnPagination } from './CnPagination/index.js'
 export { CnSettingsCard } from './CnSettingsCard/index.js'
 export { CnSettingsSection } from './CnSettingsSection/index.js'
@@ -14,12 +11,19 @@ export { CnCellRenderer } from './CnCellRenderer/index.js'
 export { CnObjectCard } from './CnObjectCard/index.js'
 export { CnCardGrid } from './CnCardGrid/index.js'
 export { CnFacetSidebar } from './CnFacetSidebar/index.js'
-export { CnViewModeToggle } from './CnViewModeToggle/index.js'
 export { CnRowActions } from './CnRowActions/index.js'
 export { CnIndexPage } from './CnIndexPage/index.js'
 export { CnMassActionBar } from './CnMassActionBar/index.js'
+export { CnDeleteDialog } from './CnDeleteDialog/index.js'
+export { CnCopyDialog } from './CnCopyDialog/index.js'
+export { CnFormDialog } from './CnFormDialog/index.js'
 export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
 export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
 export { CnKpiGrid } from './CnKpiGrid/index.js'
 export { CnMassExportDialog } from './CnMassExportDialog/index.js'
 export { CnMassImportDialog } from './CnMassImportDialog/index.js'
+export { CnIndexSidebar } from './CnIndexSidebar/index.js'
+export { CnRegisterMapping } from './CnRegisterMapping/index.js'
+export { CnIcon, ICON_MAP, registerIcons } from './CnIcon/index.js'
+export { CnPageHeader } from './CnPageHeader/index.js'
+export { CnActionsBar } from './CnActionsBar/index.js'

package/src/constants/metadata.js

@@ -0,0 +1,30 @@
+/**
+ * Standard OpenRegister metadata columns.
+ *
+ * These system fields exist on every OpenRegister object. Used by
+ * CnIndexSidebar to auto-generate the "Metadata" column group.
+ */
+export const METADATA_COLUMNS = [
+	{ key: 'name', label: 'Name' },
+	{ key: 'description', label: 'Description' },
+	{ key: 'id', label: 'ID' },
+	{ key: 'uri', label: 'URI' },
+	{ key: 'version', label: 'Version' },
+	{ key: 'register', label: 'Register' },
+	{ key: 'schema', label: 'Schema' },
+	{ key: 'files', label: 'Files' },
+	{ key: 'locked', label: 'Locked' },
+	{ key: 'organization', label: 'Organization' },
+	{ key: 'validation', label: 'Validation' },
+	{ key: 'owner', label: 'Owner' },
+	{ key: 'application', label: 'Application' },
+	{ key: 'folder', label: 'Folder' },
+	{ key: 'geo', label: 'Geo' },
+	{ key: 'retention', label: 'Retention' },
+	{ key: 'size', label: 'Size' },
+	{ key: 'published', label: 'Published' },
+	{ key: 'depublished', label: 'Depublished' },
+	{ key: 'deleted', label: 'Deleted' },
+	{ key: 'created', label: 'Created' },
+	{ key: 'updated', label: 'Updated' },
+]

package/src/css/actions-bar.css

@@ -0,0 +1,48 @@
+/* CnActionsBar — Reusable actions toolbar styles */
+
+.cn-actions-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+	padding: calc(2 * var(--default-grid-baseline));
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius);
+}
+
+.cn-actions-bar__info {
+	font-weight: 500;
+	font-size: var(--default-font-size);
+}
+
+.cn-actions-bar__count {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-actions-bar__actions {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+/* View mode toggle container */
+.cn-actions-bar__view-toggle {
+	display: flex;
+	align-items: center;
+}
+
+.cn-actions-bar__view-toggle span {
+	max-height: 34px;
+}
+
+/* Override Nextcloud's pointer-events:none on disabled action items
+   so native title tooltip is visible on hover.
+   The button's disabled attribute still prevents click events. */
+.action.action--disabled {
+	pointer-events: auto !important;
+	cursor: not-allowed;
+}
+
+.action.action--disabled button {
+	cursor: not-allowed;
+}

package/src/css/badge.css

@@ -5,7 +5,7 @@
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
-	padding: 2px 10px;
+	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
 	border-radius: var(--border-radius-pill);
 	font-size: 0.85em;
 	font-weight: 500;
@@ -15,7 +15,7 @@
 
 /* Size variants */
 .cn-status-badge--small {
-	padding: 1px 8px;
+	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
 	font-size: 0.75em;
 }
 
@@ -26,8 +26,8 @@
 }
 
 .cn-status-badge--primary {
-	background-color: var(--nldesign-color-primary-light, var(--color-primary-element-light));
-	color: var(--nldesign-color-primary, var(--color-primary-element));
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element);
 }
 
 .cn-status-badge--success {

package/src/css/card.css

@@ -5,18 +5,18 @@
 /* Card Grid */
 .cn-card-grid {
 	display: grid;
-	gap: 1.5rem;
+	gap: calc(4 * var(--default-grid-baseline));
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 /* Base Card */
 .cn-card {
 	background: var(--color-main-background);
-	border-radius: 8px;
-	padding: 20px;
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
 	box-shadow: 0 2px 8px var(--color-box-shadow);
 	min-height: 200px;
-	transition: transform 0.2s ease-in-out;
+	transition: transform var(--animation-quick) ease-in-out;
 	border: 1px solid var(--color-border);
 }
 
@@ -30,9 +30,9 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8px;
-	margin-bottom: 12px;
-	padding-bottom: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+	padding-bottom: calc(2 * var(--default-grid-baseline));
 	border-bottom: 1px solid var(--color-border);
 }
 
@@ -40,7 +40,7 @@
 .cn-card-header h3 {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 	margin: 0;
 	color: var(--color-main-text);
 }
@@ -52,18 +52,18 @@
 .cn-settings-card {
 	background: var(--color-background-hover);
 	border-radius: var(--border-radius-large);
-	padding: 20px;
-	margin-bottom: 20px;
+	padding: calc(5 * var(--default-grid-baseline));
+	margin-bottom: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-settings-card h4 {
-	margin: 0 0 16px 0;
+	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
 	color: var(--color-main-text);
 	font-size: 16px;
 	font-weight: 600;
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 }
 
 .cn-settings-card--collapsible h4 {
@@ -72,7 +72,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	transition: color 0.2s ease;
+	transition: color var(--animation-quick) ease;
 	margin-bottom: 0;
 }
 
@@ -81,7 +81,7 @@
 }
 
 .cn-settings-card__chevron {
-	transition: transform 0.3s ease;
+	transition: transform var(--animation-slow) ease;
 	color: var(--color-text-maxcontrast);
 }
 
@@ -90,21 +90,21 @@
 }
 
 .cn-settings-card__content {
-	padding-top: 16px;
+	padding-top: calc(4 * var(--default-grid-baseline));
 }
 
 /* Stat Grid */
 .cn-stat-grid {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	gap: 12px;
-	margin-bottom: 16px;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
 }
 
 .cn-stat-item {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--default-grid-baseline);
 }
 
 .cn-stat-label {
@@ -118,11 +118,11 @@
 }
 
 /* Backwards compatibility aliases */
-.cardGrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
-.card { background: var(--color-main-background); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform 0.2s ease-in-out; border: 1px solid var(--color-border); }
+.cardGrid { display: grid; gap: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+.card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) ease-in-out; border: 1px solid var(--color-border); }
 .card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
-.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
-.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
-.statItem { display: flex; flex-direction: column; gap: 4px; }
+.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
+.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
+.statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
 .statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
 .statValue { font-size: 1.1em; font-weight: 600; }

package/src/css/detail.css

@@ -1,20 +1,20 @@
 /* ========================================
-   @conduction/nextcloud-vue — Detail Styles
+   @conduction/nextcloud-vue — Detail Grid & Layout Utility Styles
    ======================================== */
 
 /* Detail Grid (metadata display) */
 .cn-detail-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-	gap: 16px;
-	margin-bottom: 20px;
+	gap: calc(4 * var(--default-grid-baseline));
+	margin-bottom: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-detail-item {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
-	padding: 8px 12px;
+	gap: var(--default-grid-baseline);
+	padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
 	border-left: 3px solid var(--color-primary-element);
 	background: var(--color-background-hover);
 	border-radius: 0 var(--border-radius) var(--border-radius) 0;
@@ -35,14 +35,14 @@
 /* Detail Layout */
 .cn-detail-layout {
 	max-width: 1000px;
-	padding: 20px;
+	padding: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-detail-layout__header {
 	display: flex;
 	align-items: center;
-	gap: 12px;
-	margin-bottom: 24px;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(6 * var(--default-grid-baseline));
 }
 
 .cn-detail-layout__title {
@@ -54,15 +54,15 @@
 
 .cn-detail-layout__actions {
 	display: flex;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 	flex-shrink: 0;
 }
 
 .cn-detail-layout__content {
-	margin-top: 16px;
+	margin-top: calc(4 * var(--default-grid-baseline));
 }
 
 /* Backwards compatibility aliases */
-.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 20px; }
-.detail-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
-.detailContainer { margin-block-start: 20px; margin-inline-start: 20px; margin-inline-end: 20px; }
+.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(4 * var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); }
+.detail-item { display: flex; flex-direction: column; gap: var(--default-grid-baseline); padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline)); border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
+.detailContainer { margin-block-start: calc(5 * var(--default-grid-baseline)); margin-inline-start: calc(5 * var(--default-grid-baseline)); margin-inline-end: calc(5 * var(--default-grid-baseline)); }

package/src/css/index-page.css

@@ -0,0 +1,32 @@
+/* CnIndexPage — Index page layout styles */
+/* Header styles: see page-header.css (CnPageHeader) */
+/* Actions bar styles: see actions-bar.css (CnActionsBar) */
+
+.cn-index-page {
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+/* Body layout */
+.cn-index-page__body {
+	display: flex;
+}
+
+.cn-index-page__main {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-index-page__loading {
+	display: flex;
+	justify-content: center;
+	padding: calc(15 * var(--default-grid-baseline));
+}
+
+.cn-index-page__empty {
+	padding: calc(10 * var(--default-grid-baseline)) calc(5 * var(--default-grid-baseline));
+	text-align: center;
+}
+
+.cn-index-page__pagination {
+	margin-top: calc(4 * var(--default-grid-baseline));
+}

package/src/css/index-sidebar.css

@@ -0,0 +1,187 @@
+/* CnIndexSidebar — NcAppSidebar wrapper styles */
+
+/* Sidebar header icon (compact mode figure area) */
+.cn-index-sidebar__header-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	color: var(--color-primary-element);
+}
+
+.cn-index-sidebar__header-emoji {
+	font-size: 28px;
+	line-height: 1;
+}
+
+/* Search tab sections */
+.cn-index-sidebar__section {
+	padding: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-index-sidebar__section h3 {
+	margin: 0 0 calc(3 * var(--default-grid-baseline)) 0;
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-index-sidebar__description {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
+}
+
+.cn-index-sidebar__filter-group {
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
+
+.cn-index-sidebar__filter-header {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	margin-bottom: var(--default-grid-baseline);
+}
+
+.cn-index-sidebar__filter-label {
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--color-main-text);
+}
+
+.cn-index-sidebar__info-btn {
+	min-width: var(--clickable-area-small, 24px) !important;
+	min-height: var(--clickable-area-small, 24px) !important;
+	width: var(--clickable-area-small, 24px) !important;
+	height: var(--clickable-area-small, 24px) !important;
+	padding: 0 !important;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-index-sidebar__info-btn:hover {
+	color: var(--color-primary);
+}
+
+.cn-index-sidebar__filter-description {
+	padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+	max-width: 260px;
+	font-size: 13px;
+	color: var(--color-main-text);
+	margin: 0;
+	line-height: var(--default-line-height, 1.4);
+}
+
+.cn-index-sidebar__select {
+	width: 100%;
+}
+
+/* Visually hide NcSelect's rendered label — the filter heading already shows it.
+   Keep input-label prop for screen-reader accessibility. */
+.cn-index-sidebar__select label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.cn-index-sidebar__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-style: italic;
+}
+
+/* ── Columns tab ── */
+
+.cn-sidebar-columns {
+	padding: calc(4 * var(--default-grid-baseline));
+	min-height: calc(100vh - 200px);
+}
+
+.cn-sidebar-columns h3 {
+	margin-top: 0;
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+	font-size: 18px;
+	font-weight: 600;
+}
+
+.cn-sidebar-columns__description {
+	color: var(--color-text-maxcontrast);
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	font-size: var(--default-font-size);
+}
+
+/* Collapsible column group card */
+.cn-sidebar-columns__group {
+	margin-bottom: calc(6 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group h4 {
+	margin-top: 0;
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+	font-size: var(--default-font-size);
+	font-weight: 600;
+	color: var(--color-text-light);
+	border-bottom: 1px solid var(--color-border);
+	padding-bottom: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group .checkbox-radio-switch {
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group .checkbox-radio-switch__content {
+	padding: var(--default-grid-baseline) 0;
+}
+
+.cn-sidebar-columns__group--collapsible {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 0;
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group-header {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding: calc(3 * var(--default-grid-baseline));
+	cursor: pointer;
+	user-select: none;
+	transition: background-color var(--animation-quick) ease;
+}
+
+.cn-sidebar-columns__group-header:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-sidebar-columns__group-header h4 {
+	margin: 0;
+	padding: 0;
+	border: none;
+	flex: 1;
+	color: var(--color-main-text);
+}
+
+.cn-sidebar-columns__select-all {
+	margin: 0 !important;
+	font-size: 12px;
+}
+
+.cn-sidebar-columns__group-content {
+	padding: calc(3 * var(--default-grid-baseline));
+	border-top: 1px solid var(--color-border);
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-style: italic;
+}

package/src/css/index.css

@@ -6,3 +6,7 @@
 @import './badge.css';
 @import './layout.css';
 @import './utilities.css';
+@import './page-header.css';
+@import './actions-bar.css';
+@import './index-page.css';
+@import './index-sidebar.css';

package/src/css/layout.css

@@ -1,23 +1,23 @@
 /* ========================================
-   @conduction/nextcloud-vue — Layout Styles
+   @conduction/nextcloud-vue — Layout & Filter Utility Styles
    ======================================== */
 
 /* List View Layout */
 .cn-list-layout {
-	padding: 20px;
+	padding: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-list-layout__header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	margin-bottom: 16px;
+	margin-bottom: calc(4 * var(--default-grid-baseline));
 }
 
 .cn-list-layout__title {
 	display: flex;
 	align-items: baseline;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 }
 
 .cn-list-layout__title h2 {
@@ -33,15 +33,15 @@
 
 .cn-list-layout__actions {
 	display: flex;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 }
 
 /* Filter Bar */
 .cn-filter-bar {
 	display: flex;
 	align-items: center;
-	gap: 12px;
-	margin-bottom: 16px;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
 	flex-wrap: wrap;
 }
 
@@ -54,7 +54,7 @@
 .cn-filter-bar__filters {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: calc(2 * var(--default-grid-baseline));
 	flex-wrap: wrap;
 }
 
@@ -71,20 +71,20 @@
 .cn-dashboard-content {
 	margin-inline: auto;
 	max-width: 1200px;
-	padding-block: 20px;
-	padding-inline: 20px;
+	padding-block: calc(5 * var(--default-grid-baseline));
+	padding-inline: calc(5 * var(--default-grid-baseline));
 }
 
 /* Loading Container */
 .cn-loading-container {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: calc(2 * var(--default-grid-baseline));
 	color: var(--color-text-maxcontrast);
 	justify-content: center;
-	padding-block: 40px;
+	padding-block: calc(10 * var(--default-grid-baseline));
 }
 
 /* Backwards compatibility aliases */
-.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: 20px; padding-inline: 20px; }
-.loadingContainer { display: flex; align-items: center; gap: 10px; color: var(--color-text-maxcontrast); justify-content: center; padding-block: 40px; }
+.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: calc(5 * var(--default-grid-baseline)); padding-inline: calc(5 * var(--default-grid-baseline)); }
+.loadingContainer { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); justify-content: center; padding-block: calc(10 * var(--default-grid-baseline)); }

package/src/css/page-header.css

@@ -0,0 +1,33 @@
+/* CnPageHeader — Reusable page header styles */
+
+.cn-page-header {
+	display: flex;
+	align-items: flex-start;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-page-header__icon {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	padding-top: var(--default-grid-baseline);
+	color: var(--color-primary);
+}
+
+.cn-page-header__text {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-page-header__title {
+	margin: 0 0 var(--default-grid-baseline) 0;
+	font-size: 2rem;
+	font-weight: 300;
+}
+
+.cn-page-header__description {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+	font-size: var(--default-font-size);
+}