@ketvietlab/design-system 0.1.25 → 0.1.30

package/dist/layouts/page-identity/index.d.ts

@@ -4,16 +4,19 @@ export type PageIdentityProps = {
     context?: JSXChild;
     eyebrow?: string | null;
     title: string;
-    description?: string | null;
     status?: JSXChild;
     actions?: JSXChild;
+    /** Retain action content while removing an empty or conditional identity slot from layout. */
+    actionsHidden?: boolean;
     meta?: JSXChild;
 };
-type PageIdentityContentProps = PageIdentityProps & {
-    groupDescription?: boolean;
-};
-/** The single identity band shared by every full-page component and recipe. */
-export declare const pageIdentityContent: (kind: PageIdentityKind, props: PageIdentityContentProps) => TemplateResult;
+/**
+ * The single identity band shared by every full-page component and recipe.
+ *
+ * A page identity has no description: every page header keeps one height, so
+ * switching screens never moves the controls and content below it. Explain a
+ * section inside the section, or put guidance in the empty state.
+ */
+export declare const pageIdentityContent: (kind: PageIdentityKind, props: PageIdentityProps) => TemplateResult;
 export declare const pageIdentity: (kind: PageIdentityKind, props: PageIdentityProps) => TemplateResult;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/layouts/page-identity/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/page-identity/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,WAAW,GACX,aAAa,GACb,WAAW,GACX,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,SACxB,gBAAgB,SACf,wBAAwB,KAC9B,cA8CF,CAAA;AAED,eAAO,MAAM,YAAY,SAAU,gBAAgB,SAAS,iBAAiB,KAAG,cAW/E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/page-identity/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,WAAW,GACX,aAAa,GACb,WAAW,GACX,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,SAAU,gBAAgB,SAAS,iBAAiB,KAAG,cAoCtF,CAAA;AAED,eAAO,MAAM,YAAY,SAAU,gBAAgB,SAAS,iBAAiB,KAAG,cAW/E,CAAA"}

package/dist/layouts/page-identity/index.js

@@ -1,6 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-/** The single identity band shared by every full-page component and recipe. */
-export const pageIdentityContent = (kind, props) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-ui": `${kind}-heading`, "data-kv-page-identity": "heading", children: [!!props.eyebrow && (_jsx("p", { "data-ui": `${kind}-eyebrow`, "data-kv-page-identity": "eyebrow", children: props.eyebrow })), _jsxs("div", { "data-ui": `${kind}-title-row`, "data-kv-page-identity": "title-row", children: [_jsx("h1", { "data-ui": `${kind}-title`, "data-kv-page-identity": "title", children: props.title }), props.actions !== undefined && (_jsx("div", { "data-ui": `${kind}-actions`, "data-kv-page-identity": "actions", children: props.actions }))] }), (props.groupDescription || props.status !== undefined) &&
-                    (!!props.description || props.status !== undefined) ? (_jsxs("div", { "data-ui": `${kind}-subline`, "data-kv-page-identity": "subline", children: [!!props.description && (_jsx("p", { "data-ui": `${kind}-description`, "data-kv-page-identity": "description", children: props.description })), props.status !== undefined && (_jsx("span", { "data-ui": `${kind}-status`, "data-kv-page-identity": "status", children: props.status }))] })) : (!!props.description && (_jsx("p", { "data-ui": `${kind}-description`, "data-kv-page-identity": "description", children: props.description })))] }), props.meta !== undefined && (_jsx("div", { "data-ui": `${kind}-meta`, "data-kv-page-identity": "meta", children: props.meta }))] }));
-export const pageIdentity = (kind, props) => (_jsxs(_Fragment, { children: [props.context !== undefined && (_jsx("div", { "data-ui": `${kind}-context`, "data-kv-page-identity": "context", children: props.context })), _jsx("header", { "data-ui": `${kind}-header`, "data-kv-page-identity": "header", children: pageIdentityContent(kind, props) })] }));
+/**
+ * The single identity band shared by every full-page component and recipe.
+ *
+ * A page identity has no description: every page header keeps one height, so
+ * switching screens never moves the controls and content below it. Explain a
+ * section inside the section, or put guidance in the empty state.
+ */
+export const pageIdentityContent = (kind, props) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-ui": `${kind}-heading`, "data-kv-page-identity": "heading", children: [!!props.eyebrow && (_jsx("p", { "data-ui": `${kind}-eyebrow`, "data-kv-page-identity": "eyebrow", children: props.eyebrow })), _jsxs("div", { "data-ui": `${kind}-title-row`, "data-kv-page-identity": "title-row", children: [_jsx("h1", { "data-ui": `${kind}-title`, "data-kv-page-identity": "title", children: props.title }), props.actions !== undefined && (_jsx("div", { "data-ui": `${kind}-actions`, "data-kv-page-identity": "actions", hidden: props.actionsHidden === true, children: props.actions }))] }), props.status !== undefined && (_jsx("div", { "data-ui": `${kind}-subline`, "data-kv-page-identity": "subline", children: _jsx("span", { "data-ui": `${kind}-status`, "data-kv-page-identity": "status", children: props.status }) }))] }), props.meta !== undefined && (_jsx("div", { "data-ui": `${kind}-meta`, "data-kv-page-identity": "meta", children: props.meta }))] }));
+export const pageIdentity = (kind, props) => (_jsxs(_Fragment, { children: [props.context != null && (_jsx("div", { "data-ui": `${kind}-context`, "data-kv-page-identity": "context", children: props.context })), _jsx("header", { "data-ui": `${kind}-header`, "data-kv-page-identity": "header", children: pageIdentityContent(kind, props) })] }));
 //# sourceMappingURL=index.js.map

package/dist/layouts/page-identity/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/page-identity/index.tsx"],"names":[],"mappings":";AAyBA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,IAAsB,EACtB,KAA+B,EACf,EAAE,CAAC,CACnB,8BACE,0BAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,aAC7D,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAClB,uBAAY,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC3D,KAAK,CAAC,OAAO,GACZ,CACL,EACD,0BAAc,GAAG,IAAI,YAAY,2BAAwB,WAAW,aAClE,wBAAa,GAAG,IAAI,QAAQ,2BAAwB,OAAO,YACxD,KAAK,CAAC,KAAK,GACT,EACJ,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,yBAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC7D,KAAK,CAAC,OAAO,GACV,CACP,IACG,EACL,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC;oBACvD,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CACpD,0BAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,aAC7D,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,CACtB,uBAAY,GAAG,IAAI,cAAc,2BAAwB,aAAa,YACnE,KAAK,CAAC,WAAW,GAChB,CACL,EACA,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,CAC7B,0BAAe,GAAG,IAAI,SAAS,2BAAwB,QAAQ,YAC5D,KAAK,CAAC,MAAM,GACR,CACR,IACG,CACP,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,CACrB,uBAAY,GAAG,IAAI,cAAc,2BAAwB,aAAa,YACnE,KAAK,CAAC,WAAW,GAChB,CACL,CACF,IACG,EACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAC3B,yBAAc,GAAG,IAAI,OAAO,2BAAwB,MAAM,YACvD,KAAK,CAAC,IAAI,GACP,CACP,IACA,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAsB,EAAE,KAAwB,EAAkB,EAAE,CAAC,CAChG,8BACG,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,yBAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC7D,KAAK,CAAC,OAAO,GACV,CACP,EACD,4BAAiB,GAAG,IAAI,SAAS,2BAAwB,QAAQ,YAC9D,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,GAC1B,IACR,CACJ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/page-identity/index.tsx"],"names":[],"mappings":";AAsBA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAsB,EAAE,KAAwB,EAAkB,EAAE,CAAC,CACvG,8BACE,0BAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,aAC7D,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAClB,uBAAY,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC3D,KAAK,CAAC,OAAO,GACZ,CACL,EACD,0BAAc,GAAG,IAAI,YAAY,2BAAwB,WAAW,aAClE,wBAAa,GAAG,IAAI,QAAQ,2BAAwB,OAAO,YACxD,KAAK,CAAC,KAAK,GACT,EACJ,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,yBACW,GAAG,IAAI,UAAU,2BACJ,SAAS,EAC/B,MAAM,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,YAEnC,KAAK,CAAC,OAAO,GACV,CACP,IACG,EACL,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,CAC7B,yBAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC9D,0BAAe,GAAG,IAAI,SAAS,2BAAwB,QAAQ,YAC5D,KAAK,CAAC,MAAM,GACR,GACH,CACP,IACG,EACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAC3B,yBAAc,GAAG,IAAI,OAAO,2BAAwB,MAAM,YACvD,KAAK,CAAC,IAAI,GACP,CACP,IACA,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAsB,EAAE,KAAwB,EAAkB,EAAE,CAAC,CAChG,8BACG,KAAK,CAAC,OAAO,IAAI,IAAI,IAAI,CACxB,yBAAc,GAAG,IAAI,UAAU,2BAAwB,SAAS,YAC7D,KAAK,CAAC,OAAO,GACV,CACP,EACD,4BAAiB,GAAG,IAAI,SAAS,2BAAwB,QAAQ,YAC9D,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,GAC1B,IACR,CACJ,CAAA"}

package/dist/layouts/shell/index.d.ts

@@ -1,12 +1,45 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
 import { type PageIdentityProps } from '../page-identity/index.tsx';
-export declare const HOOKS: readonly ['app-shell', 'app-sidebar', 'app-main', 'app-right-rail', 'page', 'page-context', 'page-header', 'page-heading', 'page-eyebrow', 'page-title-row', 'page-title', 'page-description', 'page-subline', 'page-status', 'page-actions', 'page-meta', 'page-body', 'record-canvas', 'record-content', 'record-section', 'record-section-title'];
+export declare const HOOKS: readonly ['app-shell', 'app-shell-topbar', 'app-topbar', 'app-location-bar', 'app-location-context', 'app-brand', 'app-topbar-brand', 'app-topbar-context', 'global-search-trigger', 'global-search-trigger-label', 'global-search-shortcut', 'global-search-dialog', 'global-search', 'global-search-input', 'global-search-submit', 'app-sidebar', 'app-main', 'app-right-rail', 'page', 'page-context', 'page-header', 'page-heading', 'page-eyebrow', 'page-title-row', 'page-title', 'page-subline', 'page-status', 'page-actions', 'page-meta', 'page-body', 'record-canvas', 'record-content', 'record-section', 'record-section-title'];
 export declare const AppShell: (props: {
+    topbar?: JSXChild;
+    location?: JSXChild;
     sidebar: JSXChild;
     main: JSXChild;
     rightRail?: JSXChild;
     mode?: 'viewport' | 'embedded';
 }) => TemplateResult;
+export declare const AppBrand: (props: {
+    label: string;
+    href: string;
+    image?: string;
+    darkImage?: string;
+    imageFit?: 'contain' | 'cover';
+}) => TemplateResult;
+/** Application identity and a compact launcher for a native GET search dialog. */
+export declare const AppTopbar: (props: {
+    brand?: {
+        label: string;
+        href: string;
+        image?: string;
+    };
+    /** A location strip stays inside the main column, beside the sidebar identity. */
+    location?: JSXChild;
+    navigation?: JSXChild;
+    context?: JSXChild;
+    tools?: JSXChild;
+    search: {
+        id?: string;
+        action: string;
+        label: string;
+        triggerLabel?: string;
+        closeLabel?: string;
+        placeholder: string;
+        submitLabel: string;
+        query?: string;
+        locale?: string;
+    };
+}) => TemplateResult;
 export type PageHeaderProps = Omit<PageIdentityProps, 'context'>;
 export declare const PageHeader: (props: PageHeaderProps) => TemplateResult;
 export type PageProps = PageIdentityProps & {

package/dist/layouts/shell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAqC,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEtG,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,cAAc,EACd,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,CACd,CAAA;AAEV,eAAO,MAAM,QAAQ,UAAW;IAC9B,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC/B,KAAG,cAcH,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;AAEhE,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAInD,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED,eAAO,MAAM,IAAI,UAAW,SAAS,KAAG,cAQvC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,KAAG,cAIxD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAKhF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,OAAO,EAAqC,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEtG,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,6BAA6B,EAC7B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,cAAc,EACd,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,CACd,CAAA;AAEV,eAAO,MAAM,QAAQ,UAAW;IAC9B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC/B,KAAG,cAuBH,CAAA;AAiBD,eAAO,MAAM,QAAQ,UAAW;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAC/B,KAAG,cASH,CAAA;AAED,kFAAkF;AAClF,eAAO,MAAM,SAAS,UAAW;IAC/B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACvD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,EAAE;QACN,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,WAAW,EAAE,MAAM,CAAA;QACnB,WAAW,EAAE,MAAM,CAAA;QACnB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;CACF,KAAG,cA6EH,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;AAEhE,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAInD,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED,eAAO,MAAM,IAAI,UAAW,SAAS,KAAG,cAQvC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,KAAG,cAIxD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAKhF,CAAA"}

package/dist/layouts/shell/index.js

@@ -1,7 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { ModalSheet } from '../../patterns/modal-sheet/index.js';
 import { pageIdentity, pageIdentityContent } from '../page-identity/index.js';
 export const HOOKS = [
     'app-shell',
+    'app-shell-topbar',
+    'app-topbar',
+    'app-location-bar',
+    'app-location-context',
+    'app-brand',
+    'app-topbar-brand',
+    'app-topbar-context',
+    'global-search-trigger',
+    'global-search-trigger-label',
+    'global-search-shortcut',
+    'global-search-dialog',
+    'global-search',
+    'global-search-input',
+    'global-search-submit',
     'app-sidebar',
     'app-main',
     'app-right-rail',
@@ -12,7 +27,6 @@ export const HOOKS = [
     'page-eyebrow',
     'page-title-row',
     'page-title',
-    'page-description',
     'page-subline',
     'page-status',
     'page-actions',
@@ -23,7 +37,16 @@ export const HOOKS = [
     'record-section',
     'record-section-title',
 ];
-export const AppShell = (props) => (_jsxs("div", { "data-ui": "app-shell", "data-has-right-rail": String(props.rightRail !== undefined), "data-mode": props.mode ?? 'viewport', children: [_jsx("aside", { "data-ui": "app-sidebar", children: props.sidebar }), props.mode === 'embedded' ? (_jsx("div", { "data-ui": "app-main", children: props.main })) : (_jsx("main", { "data-ui": "app-main", children: props.main })), props.rightRail !== undefined && _jsx("aside", { "data-ui": "app-right-rail", children: props.rightRail })] }));
+export const AppShell = (props) => (_jsxs("div", { "data-ui": "app-shell", "data-has-right-rail": String(props.rightRail !== undefined), "data-has-location": props.location !== undefined ? 'true' : null, "data-has-topbar": props.topbar !== undefined ? 'true' : null, "data-mode": props.mode ?? 'viewport', children: [props.topbar !== undefined && _jsx("div", { "data-ui": "app-shell-topbar", children: props.topbar }), _jsx("aside", { "data-ui": "app-sidebar", children: props.sidebar }), props.mode === 'embedded' ? (_jsxs("div", { "data-ui": "app-main", children: [props.location, props.main] })) : (_jsxs("main", { "data-ui": "app-main", children: [props.location, props.main] })), props.rightRail !== undefined && _jsx("aside", { "data-ui": "app-right-rail", children: props.rightRail })] }));
+const SearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 4.5 4.5" })] }));
+export const AppBrand = (props) => (_jsxs("a", { "data-ui": "app-brand", "data-image-fit": props.imageFit, href: props.href, "aria-label": props.label, children: [props.image ? (_jsx("img", { src: props.image, alt: props.label, "data-appearance": props.darkImage ? 'light' : undefined })) : (props.label), props.darkImage && _jsx("img", { src: props.darkImage, alt: props.label, "data-appearance": "dark" })] }));
+/** Application identity and a compact launcher for a native GET search dialog. */
+export const AppTopbar = (props) => {
+    const id = props.search.id ?? 'app-global-search';
+    const href = `${props.search.action}${props.search.action.includes('?') ? '&' : '?'}${props.search.locale ? `lang=${encodeURIComponent(props.search.locale)}&` : ''}q=${encodeURIComponent(props.search.query ?? '')}`;
+    const form = (_jsxs("form", { "data-ui": "global-search", role: "search", "aria-label": props.search.label, action: props.search.action, method: "get", children: [props.search.locale ? _jsx("input", { type: "hidden", name: "lang", value: props.search.locale }) : null, _jsx("input", { "data-ui": "global-search-input", type: "search", name: "q", value: props.search.query ?? '', placeholder: props.search.placeholder, "aria-label": props.search.label, autocomplete: "off", maxlength: 200 }), _jsx("button", { "data-ui": "global-search-submit", type: "submit", "aria-label": props.search.submitLabel, title: props.search.submitLabel, children: _jsx(SearchIcon, {}) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { "data-ui": props.location !== undefined ? 'app-location-bar' : 'app-topbar', children: [props.navigation, props.brand && (_jsx("a", { "data-ui": "app-topbar-brand", href: props.brand.href, "aria-label": props.brand.label, children: props.brand.image ? _jsx("img", { src: props.brand.image, alt: props.brand.label }) : props.brand.label })), props.location !== undefined && _jsx("div", { "data-ui": "app-location-context", children: props.location }), props.context != null && _jsx("div", { "data-ui": "app-topbar-context", children: props.context }), _jsxs("a", { "data-ui": "global-search-trigger", href: href, "aria-label": props.search.label, "aria-haspopup": "dialog", "aria-controls": id, "aria-expanded": "false", title: props.search.label, children: [_jsx(SearchIcon, {}), _jsx("span", { "data-ui": "global-search-trigger-label", children: props.search.triggerLabel ?? props.search.label }), _jsx("kbd", { "data-ui": "global-search-shortcut", hidden: true, children: "Ctrl K" })] }), props.tools] }), _jsxs("dialog", { "data-ui": "global-search-dialog", id: id, "aria-labelledby": `${id}-sheet-title`, children: [form, _jsx("template", { children: _jsx(ModalSheet, { id: `${id}-sheet`, title: props.search.label, closeLabel: props.search.closeLabel ?? 'Close', mode: "client", presentation: "dialog", dialogSemantics: "parent", body: null }) })] }), _jsx("noscript", { children: form })] }));
+};
 export const PageHeader = (props) => (_jsx("header", { "data-ui": "page-header", "data-kv-page-identity": "header", children: pageIdentityContent('page', props) }));
 export const Page = (props) => {
     const { body, ...identity } = props;

package/dist/layouts/shell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/shell/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAA0B,MAAM,2BAA4B,CAAA;AAEtG,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,aAAa;IACb,UAAU;IACV,gBAAgB;IAChB,MAAM;IACN,cAAc;IACd,aAAa;IACb,cAAc;IACd,cAAc;IACd,gBAAgB;IAChB,YAAY;IACZ,kBAAkB;IAClB,cAAc;IACd,aAAa;IACb,cAAc;IACd,WAAW;IACX,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,sBAAsB;CACd,CAAA;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE,CAAC,CACpB,0BACU,WAAW,yBACE,MAAM,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,eAC/C,KAAK,CAAC,IAAI,IAAI,UAAU,aAEnC,2BAAe,aAAa,YAAE,KAAK,CAAC,OAAO,GAAS,EACnD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,yBAAa,UAAU,YAAE,KAAK,CAAC,IAAI,GAAO,CAC3C,CAAC,CAAC,CAAC,CACF,0BAAc,UAAU,YAAE,KAAK,CAAC,IAAI,GAAQ,CAC7C,EACA,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,2BAAe,gBAAgB,YAAE,KAAK,CAAC,SAAS,GAAS,IACvF,CACP,CAAA;AAID,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,CACpE,4BAAgB,aAAa,2BAAuB,QAAQ,YACzD,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,GAC5B,CACV,CAAA;AAMD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAkB,EAAE;IACvD,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAA;IACnC,OAAO,CACL,8BAAiB,MAAM,aACpB,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,EAC/B,yBAAa,WAAW,YAAE,IAAI,GAAO,IAC7B,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,CACzE,yBAAa,eAAe,YAC1B,yBAAa,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAO,GAC5C,CACP,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAgD,EAAkB,EAAE,CAAC,CACjG,8BAAiB,gBAAgB,aAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,wBAAY,sBAAsB,YAAE,KAAK,CAAC,KAAK,GAAM,EACtE,KAAK,CAAC,IAAI,IACH,CACX,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/layouts/shell/index.tsx"],"names":[],"mappings":"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"}

package/dist/layouts/shell/styles.css

@@ -72,8 +72,7 @@
   }
 
   :where([data-kv-design-system]) [data-ui="page-eyebrow"],
-  :where([data-kv-design-system]) [data-ui="page-title"],
-  :where([data-kv-design-system]) [data-ui="page-description"] {
+  :where([data-kv-design-system]) [data-ui="page-title"] {
     overflow-wrap: anywhere;
   }
 
@@ -151,3 +150,286 @@
     }
   }
 }
+
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="app-shell"][data-has-topbar="true"] {
+    grid-template-rows: var(--kv-app-topbar-height) minmax(0, 1fr);
+  }
+  :where([data-kv-design-system]) [data-ui="app-shell-topbar"] {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    position: sticky;
+    top: 0;
+    z-index: var(--kv-z-sticky);
+    min-width: 0;
+  }
+  :where([data-kv-design-system])
+    [data-ui="app-shell"][data-has-topbar="true"]
+    > :is([data-ui="app-sidebar"], [data-ui="app-right-rail"]) {
+    top: var(--kv-app-topbar-height);
+    height: calc(100dvh - var(--kv-app-topbar-height));
+  }
+  :where([data-kv-design-system]) [data-ui="app-topbar"] {
+    --kv-text-main: var(--kv-app-topbar-text);
+    --kv-text-secondary: var(--kv-app-topbar-muted);
+    display: flex;
+    align-items: center;
+    gap: var(--kv-space-4);
+    height: var(--kv-app-topbar-height);
+    padding-inline: var(--kv-space-3);
+    background: var(--kv-app-topbar-bg);
+    color: var(--kv-app-topbar-text);
+  }
+  :where([data-kv-design-system]) [data-ui="app-topbar-brand"] {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    width: auto;
+    min-width: 0;
+    height: 100%;
+    text-decoration: none;
+    font-weight: var(--kv-weight-semibold);
+  }
+  :where([data-kv-design-system]) [data-ui="app-topbar-brand"] img {
+    display: block;
+    width: 8.5rem;
+    height: 2.75rem;
+    max-width: 100%;
+    object-fit: contain;
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-trigger"] {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: var(--kv-space-2);
+    margin-inline-start: auto;
+    min-height: var(--kv-control-height);
+    padding-inline: var(--kv-space-2);
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-app-topbar-muted);
+    font-size: var(--kv-text-sm);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-trigger"]:hover {
+    background: var(--kv-app-topbar-search-bg);
+    color: var(--kv-app-topbar-text);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-shortcut"] {
+    padding-inline: var(--kv-space-1);
+    border: 1px solid var(--kv-app-topbar-border);
+    border-radius: var(--kv-radius-sm);
+    font: inherit;
+    font-size: var(--kv-text-xs);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-dialog"] {
+    padding: 0;
+    border: 0;
+    max-width: none;
+    max-height: none;
+    background: transparent;
+    color: var(--kv-text-main);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-dialog"][open] {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100dvh;
+    margin: 0;
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-dialog"]::backdrop {
+    background: transparent;
+  }
+  :where([data-kv-design-system])
+    [data-ui="global-search-dialog"]
+    [data-ui="modal-layer"][data-presentation="dialog"]
+    [data-ui="modal-sheet"] {
+    width: min(36rem, 100%);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search"] {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: calc(var(--kv-touch-target) + 2px);
+    border: 1px solid var(--kv-border-strong);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-panel-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-input"] {
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding-inline: var(--kv-space-3);
+    font: inherit;
+    font-size: var(--kv-text-lg);
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-input"]::placeholder {
+    color: var(--kv-text-secondary);
+    opacity: 1;
+  }
+  :where([data-kv-design-system]) [data-ui="global-search-submit"] {
+    flex: 0 0 var(--kv-touch-target);
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  :where([data-kv-design-system]) [data-ui="app-topbar-context"] {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    font-size: var(--kv-text-xs);
+  }
+  :where([data-kv-design-system]) [data-ui="app-topbar"] :focus-visible {
+    outline: 2px solid var(--kv-app-topbar-focus);
+    outline-offset: 2px;
+  }
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="app-shell"][data-has-topbar="true"] > [data-ui="app-sidebar"] {
+      position: static;
+      height: 0;
+      min-height: 0;
+      border: 0;
+      overflow: visible;
+    }
+    :where([data-kv-design-system]) [data-ui="app-shell"][data-has-topbar="true"] > [data-ui="app-main"] {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    :where([data-kv-design-system]) [data-ui="app-topbar"] {
+      gap: var(--kv-space-2);
+      padding-inline: var(--kv-space-2);
+    }
+    :where([data-kv-design-system]) [data-ui="app-topbar-brand"] {
+      width: 5.25rem;
+    }
+    :where([data-kv-design-system]) [data-ui="global-search-trigger"] {
+      justify-content: center;
+      width: var(--kv-control-height);
+      height: var(--kv-control-height);
+      padding: 0;
+    }
+    :where([data-kv-design-system])
+      :is([data-ui="global-search-trigger-label"], [data-ui="global-search-shortcut"]) {
+      display: none;
+    }
+    :where([data-kv-design-system])
+      [data-ui="global-search-dialog"]
+      [data-ui="modal-layer"][data-presentation="dialog"]
+      [data-ui="modal-sheet"] {
+      width: 100%;
+    }
+    :where([data-kv-design-system]) [data-ui="global-search"] {
+      height: calc(var(--kv-touch-target) + 2px);
+    }
+    :where([data-kv-design-system]) [data-ui="global-search-submit"] {
+      flex-basis: var(--kv-touch-target);
+    }
+    :where([data-kv-design-system]) [data-ui="global-search-input"] {
+      padding-inline: var(--kv-space-2);
+    }
+  }
+}
+
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="app-brand"] {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+  :where([data-kv-design-system]) [data-ui="app-brand"] img {
+    display: block;
+    width: 8.5rem;
+    height: calc(var(--kv-space-8) + var(--kv-space-1));
+    object-fit: contain;
+  }
+  :where([data-kv-design-system]) [data-ui="app-brand"][data-image-fit="cover"] img {
+    object-fit: cover;
+  }
+  :where([data-kv-design-system]) [data-ui="navigation-header"]:has([data-ui="app-brand"]) {
+    min-height: var(--kv-app-topbar-height);
+    padding-block: var(--kv-space-1);
+  }
+  :where([data-kv-design-system]) [data-ui="app-location-bar"] {
+    display: flex;
+    align-items: center;
+    gap: var(--kv-space-3);
+    min-width: 0;
+    min-height: var(--kv-app-topbar-height);
+    padding-inline: var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-bg);
+    color: var(--kv-text-main);
+  }
+  :where([data-kv-design-system]) [data-ui="app-location-context"] {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  :where([data-kv-design-system]) [data-ui="app-location-bar"] [data-ui="global-search-trigger"] {
+    margin-inline-start: 0;
+    color: var(--kv-text-secondary);
+  }
+  :where([data-kv-design-system]) [data-ui="app-location-bar"] [data-ui="global-search-trigger"]:hover {
+    color: var(--kv-text-main);
+    background: var(--kv-sidebar-bg);
+  }
+  :where([data-kv-design-system]) [data-ui="app-location-bar"] [data-ui="app-topbar-context"] {
+    flex: 0 1 auto;
+    max-width: 24rem;
+  }
+  /* A shell location strip owns navigation once; standalone page contexts remain supported. */
+  :where([data-kv-design-system])
+    [data-ui="app-shell"][data-has-location="true"]
+    > [data-ui="app-main"]
+    [data-kv-page-identity="context"] {
+    display: none;
+  }
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system])
+      [data-ui="app-shell"][data-has-location="true"]
+      > [data-ui="app-sidebar"] {
+      height: 0;
+      min-height: 0;
+      border: 0;
+      overflow: visible;
+    }
+    :where([data-kv-design-system]) [data-ui="app-location-bar"] {
+      gap: var(--kv-space-1);
+      padding-inline: var(--kv-space-2);
+    }
+  }
+}
+
+@layer ket.app {
+  /* Follow the system until an explicit preference is set on the root or a local theme scope. */
+  :where(:root) {
+    --kv-brand-light-display: block;
+    --kv-brand-dark-display: none;
+  }
+  @media (prefers-color-scheme: dark) {
+    :where(:root) {
+      --kv-brand-light-display: none;
+      --kv-brand-dark-display: block;
+    }
+  }
+  :where([data-theme="light"]) {
+    --kv-brand-light-display: block;
+    --kv-brand-dark-display: none;
+  }
+  :where([data-theme="dark"]) {
+    --kv-brand-light-display: none;
+    --kv-brand-dark-display: block;
+  }
+  :where([data-kv-design-system]) [data-ui="app-brand"] [data-appearance="light"] {
+    display: var(--kv-brand-light-display, block);
+  }
+  :where([data-kv-design-system]) [data-ui="app-brand"] [data-appearance="dark"] {
+    display: var(--kv-brand-dark-display, none);
+  }
+}

package/dist/patterns/board-page/index.d.ts

@@ -1,6 +1,6 @@
 import type { TemplateResult } from '@ketvietlab/ketjs-view';
 import { type WorkspacePageProps } from '../workspace-page.tsx';
-export declare const HOOKS: readonly ['board-page', 'board-page-context', 'board-page-header', 'board-page-heading', 'board-page-eyebrow', 'board-page-title-row', 'board-page-title', 'board-page-subline', 'board-page-status', 'board-page-description', 'board-page-actions', 'board-page-meta', 'board-page-toolbar', 'board-page-controls', 'board-page-body'];
+export declare const HOOKS: readonly ['board-page', 'board-page-context', 'board-page-header', 'board-page-heading', 'board-page-eyebrow', 'board-page-title-row', 'board-page-title', 'board-page-subline', 'board-page-status', 'board-page-actions', 'board-page-meta', 'board-page-toolbar', 'board-page-controls', 'board-page-body'];
 export type BoardPageProps = Omit<WorkspacePageProps, 'layout'>;
 /**
  * The baseline for kanban, schedule and timeline workspaces.

package/dist/patterns/board-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;AAE/D;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,cACW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,CACT,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAA;AAE/D;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,cACW,CAAA"}

package/dist/patterns/board-page/index.js

@@ -9,7 +9,6 @@ export const HOOKS = [
     'board-page-title',
     'board-page-subline',
     'board-page-status',
-    'board-page-description',
     'board-page-actions',
     'board-page-meta',
     'board-page-toolbar',

package/dist/patterns/board-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,YAAY;IACZ,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,wBAAwB;IACxB,oBAAoB;IACpB,iBAAiB;IACjB,oBAAoB;IACpB,qBAAqB;IACrB,iBAAiB;CACT,CAAA;AAIV;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAkB,EAAE,CACjE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/board-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,YAAY;IACZ,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,oBAAoB;IACpB,iBAAiB;IACjB,oBAAoB;IACpB,qBAAqB;IACrB,iBAAiB;CACT,CAAA;AAIV;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAkB,EAAE,CACjE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAA"}

package/dist/patterns/board-page/styles.css

@@ -72,14 +72,6 @@
     line-height: var(--kv-leading-tight);
   }
 
-  :where([data-kv-design-system]) [data-ui="board-page-description"] {
-    max-width: 56rem;
-    margin: 0;
-    color: var(--kv-text-muted);
-    font-size: var(--kv-text-sm);
-    line-height: var(--kv-leading-normal);
-  }
-
   :where([data-kv-design-system]) [data-ui="board-page-subline"] {
     display: flex;
     min-width: 0;
@@ -148,10 +140,6 @@
       gap: var(--kv-space-3);
     }
 
-    :where([data-kv-design-system]) [data-ui="board-page-title"] {
-      font-size: var(--kv-text-lg);
-    }
-
     :where([data-kv-design-system]) [data-ui="board-page-actions"] {
       justify-content: flex-start;
     }

package/dist/patterns/dashboard-page/index.d.ts

@@ -1,6 +1,6 @@
 import type { TemplateResult } from '@ketvietlab/ketjs-view';
 import { type WorkspacePageProps } from '../workspace-page.tsx';
-export declare const HOOKS: readonly ['dashboard-page', 'dashboard-page-context', 'dashboard-page-header', 'dashboard-page-heading', 'dashboard-page-eyebrow', 'dashboard-page-title-row', 'dashboard-page-title', 'dashboard-page-subline', 'dashboard-page-status', 'dashboard-page-description', 'dashboard-page-actions', 'dashboard-page-meta', 'dashboard-page-body'];
+export declare const HOOKS: readonly ['dashboard-page', 'dashboard-page-context', 'dashboard-page-header', 'dashboard-page-heading', 'dashboard-page-eyebrow', 'dashboard-page-title-row', 'dashboard-page-title', 'dashboard-page-subline', 'dashboard-page-status', 'dashboard-page-actions', 'dashboard-page-meta', 'dashboard-page-body'];
 export type DashboardPageProps = Omit<WorkspacePageProps, 'layout' | 'controls'>;
 /**
  * The baseline for KPI, workflow and analytical overview screens.

package/dist/patterns/dashboard-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,gBAAgB,EAChB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,CACb,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAEhF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cACK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE9E,eAAO,MAAM,KAAK,YAChB,gBAAgB,EAChB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,CACb,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAEhF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,cACK,CAAA"}

package/dist/patterns/dashboard-page/index.js

@@ -9,7 +9,6 @@ export const HOOKS = [
     'dashboard-page-title',
     'dashboard-page-subline',
     'dashboard-page-status',
-    'dashboard-page-description',
     'dashboard-page-actions',
     'dashboard-page-meta',
     'dashboard-page-body',

package/dist/patterns/dashboard-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACxB,0BAA0B;IAC1B,sBAAsB;IACtB,wBAAwB;IACxB,uBAAuB;IACvB,4BAA4B;IAC5B,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;CACb,CAAA;AAIV;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CACzE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/dashboard-page/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAuB,CAAA;AAE9E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,wBAAwB;IACxB,0BAA0B;IAC1B,sBAAsB;IACtB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;CACb,CAAA;AAIV;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAkB,EAAE,CACzE,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,CAAA"}

package/dist/patterns/dashboard-page/styles.css

@@ -73,14 +73,6 @@
     line-height: var(--kv-leading-tight);
   }
 
-  :where([data-kv-design-system]) [data-ui="dashboard-page-description"] {
-    max-width: 56rem;
-    margin: 0;
-    color: var(--kv-text-muted);
-    font-size: var(--kv-text-sm);
-    line-height: var(--kv-leading-normal);
-  }
-
   :where([data-kv-design-system]) [data-ui="dashboard-page-subline"] {
     display: flex;
     min-width: 0;
@@ -143,10 +135,6 @@
       gap: var(--kv-space-3);
     }
 
-    :where([data-kv-design-system]) [data-ui="dashboard-page-title"] {
-      font-size: var(--kv-text-lg);
-    }
-
     :where([data-kv-design-system]) [data-ui="dashboard-page-actions"] {
       justify-content: flex-start;
     }
@@ -158,7 +146,6 @@
     :where([data-kv-design-system])
       [data-ui="dashboard-page-actions"]
       [data-ui="action"][data-variant="primary"] {
-      min-height: 2.75rem;
       flex: 1 1 auto;
     }
 

package/dist/patterns/data-table/styles.css

@@ -44,7 +44,7 @@
     font-weight: var(--kv-weight-semibold);
     letter-spacing: 0;
     text-align: left;
-    text-transform: uppercase;
+    text-transform: none;
     white-space: nowrap;
   }