@skdx/vue-blocks 0.40.0 → 0.41.0

package/dist/internal/part-core.cjs

@@ -0,0 +1 @@
+function n(a,t){return t==="root"?`skdx-${a}`:`skdx-${a}__${t}`}function o(a,t,s){const r={"data-part":t};return t==="root"&&(r["data-skdx-component"]=s??a),r}exports.partClass=n;exports.partData=o;

package/dist/internal/part-core.d.cts

@@ -0,0 +1,21 @@
+/** Join string classes without discarding the consumer's class. */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+/** Class hook shared by JSX, template frameworks and custom-element hosts. */
+export declare function partClass(component: string, part: string): string;
+/** Framework-neutral data hooks, with an inherited family taking precedence. */
+export declare function partData(component: string, part: string, inheritedComponent?: string): {
+    'data-part': string;
+    'data-skdx-component'?: string;
+};
+/** React's string class convention, without depending on React. */
+export declare function stringPart(component: string, part: string, className?: string, inheritedComponent?: string): {
+    className: string;
+    'data-part': string;
+    'data-skdx-component'?: string;
+};
+/** Preserve framework class values (objects/arrays) without flattening them. */
+export declare function arrayPart<T>(component: string, part: string, className?: T | null, inheritedComponent?: string): {
+    class: (string | T | null | undefined)[];
+    'data-part': string;
+    'data-skdx-component'?: string;
+};

package/dist/internal/part-core.d.ts

@@ -0,0 +1,21 @@
+/** Join string classes without discarding the consumer's class. */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+/** Class hook shared by JSX, template frameworks and custom-element hosts. */
+export declare function partClass(component: string, part: string): string;
+/** Framework-neutral data hooks, with an inherited family taking precedence. */
+export declare function partData(component: string, part: string, inheritedComponent?: string): {
+    'data-part': string;
+    'data-skdx-component'?: string;
+};
+/** React's string class convention, without depending on React. */
+export declare function stringPart(component: string, part: string, className?: string, inheritedComponent?: string): {
+    className: string;
+    'data-part': string;
+    'data-skdx-component'?: string;
+};
+/** Preserve framework class values (objects/arrays) without flattening them. */
+export declare function arrayPart<T>(component: string, part: string, className?: T | null, inheritedComponent?: string): {
+    class: (string | T | null | undefined)[];
+    'data-part': string;
+    'data-skdx-component'?: string;
+};

package/dist/internal/part-core.js

@@ -0,0 +1 @@
+function t(t,a){return"root"===a?`skdx-${t}`:`skdx-${t}__${a}`}function a(t,a,o){const r={"data-part":a};return"root"===a&&(r["data-skdx-component"]=o??t),r}export{t as partClass,a as partData};

package/dist/internal/part.cjs

@@ -1 +1 @@
-function k(s,t){const a=t==="root",d={class:a?`skdx-${s}`:`skdx-${s}__${t}`,"data-part":t};return a&&(d["data-skdx-component"]=s),d}exports.skdxPart=k;
+const s=require("./part-core.cjs");function t(r,a){return{class:s.partClass(r,a),...s.partData(r,a)}}exports.skdxPart=t;

package/dist/internal/part.js

@@ -1 +1 @@
-function t(t,a){const s="root"===a,o={class:s?`skdx-${t}`:`skdx-${t}__${a}`,"data-part":a};return s&&(o["data-skdx-component"]=t),o}export{t as skdxPart};
+import{partClass as a,partData as r}from"./part-core.js";function s(s,t){return{class:a(s,t),...r(s,t)}}export{s as skdxPart};

package/dist/page-container/PageContainer.vue.d.cts

@@ -1,6 +1,6 @@
 import { type BreadcrumbItem } from '@skdx/vue';
 /**
- * Composes Breadcrumb, Heading and Toolbar into a `<section>` named by its own heading, above the page content.
+ * Composes Breadcrumb, Heading and page actions into a `<section>` named by its own heading.
  *
  * @example
  * ```vue
@@ -31,17 +31,20 @@ type __VLS_Props = {
      */
     breadcrumbLabel?: string;
     /**
-     * Accessible name of the derived actions Toolbar.
+     * Accessible name of the page actions group or optional toolbar.
      * @default 'Page actions'
      */
     actionsLabel?: string;
+    /** Render a keyboard toolbar for bare toolbar parts. @default false */
+    actionsAsToolbar?: boolean;
 };
 type __VLS_Slots = {
     /** The page content rendered below the header. */
     default?(): unknown;
     /**
-     * Toolbar parts placed inside the derived Toolbar beside the heading; no toolbar renders
-     * without it. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
+     * Page controls beside the heading. Ordinary buttons keep their own Tab stops.
+     * Compose an explicit Toolbar for keyboard grouping, or enable actionsAsToolbar
+     * when passing bare toolbar parts. No group renders without this slot.
      */
     actions?(): unknown;
 };
@@ -50,6 +53,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     breadcrumbs: readonly BreadcrumbItem[] | undefined;
     breadcrumbLabel: string;
     actionsLabel: string;
+    actionsAsToolbar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/page-container/PageContainer.vue.d.ts

@@ -1,6 +1,6 @@
 import { type BreadcrumbItem } from '@skdx/vue';
 /**
- * Composes Breadcrumb, Heading and Toolbar into a `<section>` named by its own heading, above the page content.
+ * Composes Breadcrumb, Heading and page actions into a `<section>` named by its own heading.
  *
  * @example
  * ```vue
@@ -31,17 +31,20 @@ type __VLS_Props = {
      */
     breadcrumbLabel?: string;
     /**
-     * Accessible name of the derived actions Toolbar.
+     * Accessible name of the page actions group or optional toolbar.
      * @default 'Page actions'
      */
     actionsLabel?: string;
+    /** Render a keyboard toolbar for bare toolbar parts. @default false */
+    actionsAsToolbar?: boolean;
 };
 type __VLS_Slots = {
     /** The page content rendered below the header. */
     default?(): unknown;
     /**
-     * Toolbar parts placed inside the derived Toolbar beside the heading; no toolbar renders
-     * without it. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
+     * Page controls beside the heading. Ordinary buttons keep their own Tab stops.
+     * Compose an explicit Toolbar for keyboard grouping, or enable actionsAsToolbar
+     * when passing bare toolbar parts. No group renders without this slot.
      */
     actions?(): unknown;
 };
@@ -50,6 +53,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     breadcrumbs: readonly BreadcrumbItem[] | undefined;
     breadcrumbLabel: string;
     actionsLabel: string;
+    actionsAsToolbar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/page-container/PageContainer.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("../internal/part.cjs");let e=require("vue"),n=require("@skdx/vue");var i=["aria-labelledby"],u=(0,e.defineComponent)({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"}},setup(r){const o=r,l=(0,e.useId)(),d=(0,e.computed)(()=>`h${o.headingLevel}`);return(t,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(a.skdxPart)("page-container","root"),{"aria-labelledby":(0,e.unref)(l)}),[(0,e.createElementVNode)("header",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","header"))),[r.breadcrumbs?.length?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxBreadcrumb),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("page-container","breadcrumbs"),{label:o.breadcrumbLabel,items:r.breadcrumbs}),null,16,["label","items"])):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","heading-row"))),[(0,e.createVNode)((0,e.unref)(n.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(l)},(0,e.unref)(a.skdxPart)("page-container","title"),{as:d.value}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.title),1)]),_:1},16,["id","as"]),t.$slots.actions?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxToolbar),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("page-container","actions"),{"aria-label":r.actionsLabel}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"actions")]),_:3},16,["aria-label"])):(0,e.createCommentVNode)("",!0)],16)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","content"))),[(0,e.renderSlot)(t.$slots,"default")],16)],16,i))}});exports.default=u;
+const r=require("../internal/part.cjs");let e=require("vue"),o=require("@skdx/vue");var i=["aria-labelledby"],s=(0,e.defineComponent)({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"},actionsAsToolbar:{type:Boolean,default:!1}},setup(a){const n=a,l=(0,e.useId)(),d=(0,e.computed)(()=>`h${n.headingLevel}`);return(t,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(r.skdxPart)("page-container","root"),{"aria-labelledby":(0,e.unref)(l)}),[(0,e.createElementVNode)("header",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(r.skdxPart)("page-container","header"))),[a.breadcrumbs?.length?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxBreadcrumb),(0,e.mergeProps)({key:0},(0,e.unref)(r.skdxPart)("page-container","breadcrumbs"),{label:n.breadcrumbLabel,items:a.breadcrumbs}),null,16,["label","items"])):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(r.skdxPart)("page-container","heading-row"))),[(0,e.createVNode)((0,e.unref)(o.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(l)},(0,e.unref)(r.skdxPart)("page-container","title"),{as:d.value}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(a.title),1)]),_:1},16,["id","as"]),t.$slots.actions?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(a.actionsAsToolbar?(0,e.unref)(o.SkdxToolbar):"div"),(0,e.mergeProps)({key:0,role:a.actionsAsToolbar?"toolbar":"group"},(0,e.unref)(r.skdxPart)("page-container","actions"),{"aria-label":a.actionsLabel}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"actions")]),_:3},16,["role","aria-label"])):(0,e.createCommentVNode)("",!0)],16)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(r.skdxPart)("page-container","content"))),[(0,e.renderSlot)(t.$slots,"default")],16)],16,i))}});exports.default=s;

package/dist/page-container/PageContainer.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{skdxPart as e}from"../internal/part.js";import{computed as a,createBlock as t,createCommentVNode as r,createElementBlock as s,createElementVNode as o,createTextVNode as l,createVNode as n,defineComponent as d,guardReactiveProps as i,mergeProps as c,normalizeProps as b,openBlock as u,renderSlot as m,toDisplayString as p,unref as g,useId as f,withCtx as k}from"vue";import{SkdxBreadcrumb as v,SkdxHeading as h,SkdxToolbar as x}from"@skdx/vue";var L=["aria-labelledby"],P=/* @__PURE__ */d({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"}},setup(d){const P=d,y=f(),B=a(()=>`h${P.headingLevel}`);return(a,f)=>(u(),s("section",c(g(e)("page-container","root"),{"aria-labelledby":g(y)}),[o("header",b(i(g(e)("page-container","header"))),[d.breadcrumbs?.length?(u(),t(g(v),c({key:0},g(e)("page-container","breadcrumbs"),{label:P.breadcrumbLabel,items:d.breadcrumbs}),null,16,["label","items"])):r("",!0),o("div",b(i(g(e)("page-container","heading-row"))),[n(g(h),c({id:g(y)},g(e)("page-container","title"),{as:B.value}),{default:k(()=>[l(p(d.title),1)]),_:1},16,["id","as"]),a.$slots.actions?(u(),t(g(x),c({key:0},g(e)("page-container","actions"),{"aria-label":d.actionsLabel}),{default:k(()=>[m(a.$slots,"actions")]),_:3},16,["aria-label"])):r("",!0)],16)],16),o("div",b(i(g(e)("page-container","content"))),[m(a.$slots,"default")],16)],16,L))}});export{P as default};
+import{skdxPart as e}from"../internal/part.js";import{computed as a,createBlock as t,createCommentVNode as o,createElementBlock as r,createElementVNode as s,createTextVNode as l,createVNode as n,defineComponent as i,guardReactiveProps as d,mergeProps as c,normalizeProps as b,openBlock as u,renderSlot as m,resolveDynamicComponent as p,toDisplayString as g,unref as f,useId as v,withCtx as k}from"vue";import{SkdxBreadcrumb as h,SkdxHeading as x,SkdxToolbar as y}from"@skdx/vue";var B=["aria-labelledby"],L=/* @__PURE__ */i({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"},actionsAsToolbar:{type:Boolean,default:!1}},setup(i){const L=i,P=v(),C=a(()=>`h${L.headingLevel}`);return(a,v)=>(u(),r("section",c(f(e)("page-container","root"),{"aria-labelledby":f(P)}),[s("header",b(d(f(e)("page-container","header"))),[i.breadcrumbs?.length?(u(),t(f(h),c({key:0},f(e)("page-container","breadcrumbs"),{label:L.breadcrumbLabel,items:i.breadcrumbs}),null,16,["label","items"])):o("",!0),s("div",b(d(f(e)("page-container","heading-row"))),[n(f(x),c({id:f(P)},f(e)("page-container","title"),{as:C.value}),{default:k(()=>[l(g(i.title),1)]),_:1},16,["id","as"]),a.$slots.actions?(u(),t(p(i.actionsAsToolbar?f(y):"div"),c({key:0,role:i.actionsAsToolbar?"toolbar":"group"},f(e)("page-container","actions"),{"aria-label":i.actionsLabel}),{default:k(()=>[m(a.$slots,"actions")]),_:3},16,["role","aria-label"])):o("",!0)],16)],16),s("div",b(d(f(e)("page-container","content"))),[m(a.$slots,"default")],16)],16,B))}});export{L as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/vue-blocks",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "Vue blocks for the SkandaDX design system — page-level compositions of @skdx/vue styled by @skdx/skins",
   "license": "MIT",
   "publishConfig": {
@@ -254,7 +254,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@skdx/vue": "^0.40.0"
+    "@skdx/vue": "^0.41.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
@@ -266,7 +266,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-tsc": "^2.0.0",
-    "@skdx/vue": "0.40.0"
+    "@skdx/vue": "0.41.0"
   },
   "scripts": {
     "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",