@skdx/vue 0.26.0 → 0.28.0

package/dist/avatar/AvatarImage.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{AVATAR_CONTEXT as a}from"./context.js";import{createCommentVNode as e,createElementBlock as t,defineComponent as r,inject as o,onUnmounted as n,openBlock as s,unref as i,watch as d}from"vue";var m=["src"],c=/* @__PURE__ */r({__name:"AvatarImage",props:{src:{}},emits:["loading-status-change"],setup(r,{emit:c}){const u=r,l=c,g=o(a);if(!g)throw new Error("<SkdxAvatarImage> must be used inside <SkdxAvatar>.");const f=g;function p(a){f.imageLoadingStatus.value=a,l("loading-status-change",a)}let v;return d(()=>u.src,a=>{if(v?.(),typeof window>"u")return;if(!a)return void p("error");let e=!0;v=()=>{e=!1};const t=new window.Image;p("loading"),t.onload=()=>{e&&p("loaded")},t.onerror=()=>{e&&p("error")},t.src=a},{immediate:!0}),n(()=>v?.()),(a,o)=>"loaded"===i(f).imageLoadingStatus.value?(s(),t("img",{key:0,class:"skdx-avatar__image","data-part":"image",src:r.src},null,8,m)):e("",!0)}});export{c as default};
+import{AVATAR_CONTEXT as e}from"./context.js";import{createCommentVNode as a,createElementBlock as s,defineComponent as t,inject as r,onUnmounted as o,openBlock as n,unref as i,watch as c}from"vue";var d=["src","srcset","sizes","alt"],l=/* @__PURE__ */t({__name:"AvatarImage",props:{src:{},srcset:{},sizes:{},alt:{}},emits:["loading-status-change"],setup(t,{emit:l}){const m=t,u=l,g=r(e);if(!g)throw new Error("<SkdxAvatarImage> must be used inside <SkdxAvatar>.");const v=g;function f(e){v.imageLoadingStatus.value=e,u("loading-status-change",e)}let p;return c(()=>[m.src,m.srcset,m.sizes],([e,a,s])=>{if(p?.(),typeof window>"u")return;if(!e)return void f("error");let t=!0;p=()=>{t=!1};const r=new window.Image;f("loading"),r.onload=()=>{t&&f("loaded")},r.onerror=()=>{t&&f("error")},a&&(r.srcset=a),s&&(r.sizes=s),r.src=e},{immediate:!0}),o(()=>p?.()),(e,r)=>"loaded"===i(v).imageLoadingStatus.value?(n(),s("img",{key:0,class:"skdx-avatar__image","data-part":"image",src:t.src,srcset:t.srcset,sizes:t.sizes,alt:i(v).decorative.value?"":t.alt??i(v).label.value??""},null,8,d)):a("",!0)}});export{l as default};

package/dist/avatar/context.d.cts

@@ -1,9 +1,13 @@
 import type { InjectionKey, Ref } from 'vue';
-/** Lifecycle of the {@link SkdxAvatarImage}'s underlying image load. */
+/** Lifecycle of the {@link SkdxAvatarImage}'s image load. */
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
-/** @internal Injection key an Avatar provides so its parts can read/drive shared image-loading state. */
+/** @internal Injection key an Avatar provides so its parts can read/drive image-loading state. */
 export interface AvatarContext {
     imageLoadingStatus: Ref<ImageLoadingStatus>;
+    /** The root's `label`, used as the image's default `alt`. */
+    label: Ref<string | undefined>;
+    /** Whether the root is marked decorative, forcing `alt=""` on the image. */
+    decorative: Ref<boolean>;
 }
 /** @internal Injection key an Avatar provides so its image/fallback parts can read/drive the shared image-loading status. */
 export declare const AVATAR_CONTEXT: InjectionKey<AvatarContext>;

package/dist/avatar/context.d.ts

@@ -1,9 +1,13 @@
 import type { InjectionKey, Ref } from 'vue';
-/** Lifecycle of the {@link SkdxAvatarImage}'s underlying image load. */
+/** Lifecycle of the {@link SkdxAvatarImage}'s image load. */
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
-/** @internal Injection key an Avatar provides so its parts can read/drive shared image-loading state. */
+/** @internal Injection key an Avatar provides so its parts can read/drive image-loading state. */
 export interface AvatarContext {
     imageLoadingStatus: Ref<ImageLoadingStatus>;
+    /** The root's `label`, used as the image's default `alt`. */
+    label: Ref<string | undefined>;
+    /** Whether the root is marked decorative, forcing `alt=""` on the image. */
+    decorative: Ref<boolean>;
 }
 /** @internal Injection key an Avatar provides so its image/fallback parts can read/drive the shared image-loading status. */
 export declare const AVATAR_CONTEXT: InjectionKey<AvatarContext>;

package/dist/avatar/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./Avatar.vue.cjs"),e=require("./AvatarImage.vue.cjs"),r=require("./AvatarFallback.vue.cjs");exports.SkdxAvatar=a.default;exports.SkdxAvatarFallback=r.default;exports.SkdxAvatarImage=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Avatar.vue.cjs");exports.SkdxAvatar=e.default;

package/dist/avatar/index.d.cts

@@ -1,3 +1 @@
 export { default as SkdxAvatar } from './Avatar.vue.cjs';
-export { default as SkdxAvatarImage } from './AvatarImage.vue.cjs';
-export { default as SkdxAvatarFallback } from './AvatarFallback.vue.cjs';

package/dist/avatar/index.d.ts

@@ -1,3 +1 @@
 export { default as SkdxAvatar } from './Avatar.vue.js';
-export { default as SkdxAvatarImage } from './AvatarImage.vue.js';
-export { default as SkdxAvatarFallback } from './AvatarFallback.vue.js';

package/dist/avatar/index.js

@@ -1 +1 @@
-import a from"./Avatar.vue.js";import r from"./AvatarImage.vue.js";import t from"./AvatarFallback.vue.js";export{a as SkdxAvatar,t as SkdxAvatarFallback,r as SkdxAvatarImage};
+import a from"./Avatar.vue.js";export{a as SkdxAvatar};

package/dist/avatar/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./AvatarFallback.vue.cjs"),e=require("./AvatarImage.vue.cjs"),r=require("./Avatar.vue.cjs");exports.SkdxAvatar=r.default;exports.SkdxAvatarFallback=a.default;exports.SkdxAvatarImage=e.default;

package/dist/avatar/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxAvatar` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAvatar, SkdxAvatarFallback, SkdxAvatarImage } from '@skdx/vue/primitives/avatar';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAvatar label="Jane Doe">
+ *     <SkdxAvatarImage src="/user.png" />
+ *     <SkdxAvatarFallback :delay-ms="300">JD</SkdxAvatarFallback>
+ *   </SkdxAvatar>
+ * </template>
+ * ```
+ */
+export { default as SkdxAvatar } from './Avatar.vue.cjs';
+export { default as SkdxAvatarImage } from './AvatarImage.vue.cjs';
+export { default as SkdxAvatarFallback } from './AvatarFallback.vue.cjs';

package/dist/avatar/primitives.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxAvatar` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * The recipe derives its body from slots when given children, rendering these parts explicitly.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxAvatar, SkdxAvatarFallback, SkdxAvatarImage } from '@skdx/vue/primitives/avatar';
+ * </script>
+ *
+ * <template>
+ *   <SkdxAvatar label="Jane Doe">
+ *     <SkdxAvatarImage src="/user.png" />
+ *     <SkdxAvatarFallback :delay-ms="300">JD</SkdxAvatarFallback>
+ *   </SkdxAvatar>
+ * </template>
+ * ```
+ */
+export { default as SkdxAvatar } from './Avatar.vue.js';
+export { default as SkdxAvatarImage } from './AvatarImage.vue.js';
+export { default as SkdxAvatarFallback } from './AvatarFallback.vue.js';

package/dist/avatar/primitives.js

@@ -0,0 +1 @@
+import a from"./AvatarFallback.vue.js";import r from"./AvatarImage.vue.js";import t from"./Avatar.vue.js";export{t as SkdxAvatar,a as SkdxAvatarFallback,r as SkdxAvatarImage};

package/dist/badge/Badge.vue.d.cts

@@ -1,16 +1,26 @@
 /**
- * The Vue implementation of the shared Badge contract (see `@skdx/shared`'s
- * `badgeContract`). Renders a plain `<span>`: no component-specific props,
- * no visual style — style it with `class`/`:class` on `<SkdxBadge>` as you
- * would any element (it forwards through Vue's normal attribute fallthrough
- * since there's a single root element).
+ * Vue Badge implementation. Renders unstyled `<span>`; style with `class`.
+ * Children are the text; root derives body from leading slot, text, trailing
+ * slot. Compose parts directly through primitives for custom structure.
+ * Attributes: `data-status`, `data-variant` (solid/outline/subtle), `data-dot`,
+ * `data-shape`.
+ *
+ * ```vue
+ * <SkdxBadge>
+ *   <template #leading><CheckIcon /></template>
+ *   Verified
+ * </SkdxBadge>
+ * ```
  */
-type __VLS_Props = {};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** The badge's own text content. */
+    default?(): unknown;
+    /** The derived Leading part's content — an icon or a status dot. */
+    leading?(): unknown;
+    /** The derived Trailing part's content — a count or a glyph. */
+    trailing?(): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/badge/Badge.vue.d.ts

@@ -1,16 +1,26 @@
 /**
- * The Vue implementation of the shared Badge contract (see `@skdx/shared`'s
- * `badgeContract`). Renders a plain `<span>`: no component-specific props,
- * no visual style — style it with `class`/`:class` on `<SkdxBadge>` as you
- * would any element (it forwards through Vue's normal attribute fallthrough
- * since there's a single root element).
+ * Vue Badge implementation. Renders unstyled `<span>`; style with `class`.
+ * Children are the text; root derives body from leading slot, text, trailing
+ * slot. Compose parts directly through primitives for custom structure.
+ * Attributes: `data-status`, `data-variant` (solid/outline/subtle), `data-dot`,
+ * `data-shape`.
+ *
+ * ```vue
+ * <SkdxBadge>
+ *   <template #leading><CheckIcon /></template>
+ *   Verified
+ * </SkdxBadge>
+ * ```
  */
-type __VLS_Props = {};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** The badge's own text content. */
+    default?(): unknown;
+    /** The derived Leading part's content — an icon or a status dot. */
+    leading?(): unknown;
+    /** The derived Trailing part's content — a count or a glyph. */
+    trailing?(): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/badge/Badge.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var a={class:"skdx-badge","data-part":"root","data-skdx-component":"badge"},r=(0,e.defineComponent)({__name:"Badge",setup(_){return(t,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",a,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=r;
+const a=require("./BadgeAnatomy.vue.cjs");let e=require("vue");var r={class:"skdx-badge","data-part":"root","data-skdx-component":"badge"},l=(0,e.defineComponent)({__name:"Badge",setup(n){return(t,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",r,[(0,e.createVNode)(a.default,null,(0,e.createSlots)({default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default")]),_:2},[t.$slots.leading?{name:"leading",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"leading")]),key:"0"}:void 0,t.$slots.trailing?{name:"trailing",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"trailing")]),key:"1"}:void 0]),1024)]))}});exports.default=l;

package/dist/badge/Badge.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as a,defineComponent as e,openBlock as t,renderSlot as o}from"vue";var s={class:"skdx-badge","data-part":"root","data-skdx-component":"badge"},d=/* @__PURE__ */e({__name:"Badge",setup:e=>(e,d)=>(t(),a("span",s,[o(e.$slots,"default")]))});export{d as default};
+import a from"./BadgeAnatomy.vue.js";import{createElementBlock as e,createSlots as t,createVNode as s,defineComponent as o,openBlock as l,renderSlot as n,withCtx as d}from"vue";var r={class:"skdx-badge","data-part":"root","data-skdx-component":"badge"},i=/* @__PURE__ */o({__name:"Badge",setup:o=>(o,i)=>(l(),e("span",r,[s(a,null,t({default:d(()=>[n(o.$slots,"default")]),_:2},[o.$slots.leading?{name:"leading",fn:d(()=>[n(o.$slots,"leading")]),key:"0"}:void 0,o.$slots.trailing?{name:"trailing",fn:d(()=>[n(o.$slots,"trailing")]),key:"1"}:void 0]),1024)]))});export{i as default};

package/dist/badge/BadgeAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./BadgeAnatomy.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/badge/BadgeAnatomy.vue.d.cts

@@ -0,0 +1,22 @@
+/**
+ * The anatomy an `SkdxBadge` always draws: an optional Leading, the badge's
+ * own text (the default slot, which is user content), and an optional
+ * Trailing.
+ *
+ * Not exported from the package — the React port's `BadgeAnatomy.tsx` is the
+ * same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Slots = {
+    default?(): unknown;
+    leading?(): unknown;
+    trailing?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeAnatomy.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The anatomy an `SkdxBadge` always draws: an optional Leading, the badge's
+ * own text (the default slot, which is user content), and an optional
+ * Trailing.
+ *
+ * Not exported from the package — the React port's `BadgeAnatomy.tsx` is the
+ * same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Slots = {
+    default?(): unknown;
+    leading?(): unknown;
+    trailing?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeAnatomy.vue.js

@@ -0,0 +1 @@
+import e from"./BadgeAnatomy.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/badge/BadgeAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const l=require("./BadgeLeading.vue.cjs"),n=require("./BadgeTrailing.vue.cjs");let e=require("vue");var a=(0,e.defineComponent)({__name:"BadgeAnatomy",setup(o){const r=(0,e.useSlots)();return(t,u)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.unref)(r).leading?((0,e.openBlock)(),(0,e.createBlock)(l.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"leading")]),_:3})):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(t.$slots,"default"),(0,e.unref)(r).trailing?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"trailing")]),_:3})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=a;

package/dist/badge/BadgeAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./BadgeLeading.vue.js";import a from"./BadgeTrailing.vue.js";import{Fragment as t,createBlock as s,createCommentVNode as o,createElementBlock as l,defineComponent as n,openBlock as r,renderSlot as i,unref as d,useSlots as m,withCtx as u}from"vue";var g=/* @__PURE__ */n({__name:"BadgeAnatomy",setup(n){const g=m();return(n,m)=>(r(),l(t,null,[d(g).leading?(r(),s(e,{key:0},{default:u(()=>[i(n.$slots,"leading")]),_:3})):o("",!0),i(n.$slots,"default"),d(g).trailing?(r(),s(a,{key:1},{default:u(()=>[i(n.$slots,"trailing")]),_:3})):o("",!0)],64))}});export{g as default};

package/dist/badge/BadgeLeading.vue.cjs

@@ -0,0 +1 @@
+const e=require("./BadgeLeading.vue_vue_type_script_setup_true_lang.cjs");var a=e.default;exports.default=a;

package/dist/badge/BadgeLeading.vue.d.cts

@@ -0,0 +1,16 @@
+/**
+ * Slot for leading icon or dot. Allows skins to style icon independently. Decorative — badge meaning is text only.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeLeading.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Slot for leading icon or dot. Allows skins to style icon independently. Decorative — badge meaning is text only.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeLeading.vue.js

@@ -0,0 +1 @@
+import e from"./BadgeLeading.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/badge/BadgeLeading.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var t={class:"skdx-badge__leading","data-part":"leading"},_=(0,e.defineComponent)({__name:"BadgeLeading",setup(d){return(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",t,[(0,e.renderSlot)(a.$slots,"default")]))}});exports.default=_;

package/dist/badge/BadgeLeading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as e,defineComponent as a,openBlock as s,renderSlot as t}from"vue";var d={class:"skdx-badge__leading","data-part":"leading"},n=/* @__PURE__ */a({__name:"BadgeLeading",setup:a=>(a,n)=>(s(),e("span",d,[t(a.$slots,"default")]))});export{n as default};

package/dist/badge/BadgeTrailing.vue.cjs

@@ -0,0 +1 @@
+const e=require("./BadgeTrailing.vue_vue_type_script_setup_true_lang.cjs");var a=e.default;exports.default=a;

package/dist/badge/BadgeTrailing.vue.d.cts

@@ -0,0 +1,20 @@
+/**
+ * An optional slot after a `<SkdxBadge>`'s text, for a count, a caret or a
+ * dismiss glyph. The mirror of `<SkdxBadgeLeading>`, and the pair is what
+ * Mantine spells `leftSection`/`rightSection`.
+ *
+ * Decorative for the same reason: a badge's meaning is its text.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeTrailing.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * An optional slot after a `<SkdxBadge>`'s text, for a count, a caret or a
+ * dismiss glyph. The mirror of `<SkdxBadgeLeading>`, and the pair is what
+ * Mantine spells `leftSection`/`rightSection`.
+ *
+ * Decorative for the same reason: a badge's meaning is its text.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/badge/BadgeTrailing.vue.js

@@ -0,0 +1 @@
+import e from"./BadgeTrailing.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/badge/BadgeTrailing.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var t={class:"skdx-badge__trailing","data-part":"trailing"},r=(0,e.defineComponent)({__name:"BadgeTrailing",setup(_){return(a,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",t,[(0,e.renderSlot)(a.$slots,"default")]))}});exports.default=r;

package/dist/badge/BadgeTrailing.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as a,defineComponent as e,openBlock as t,renderSlot as s}from"vue";var l={class:"skdx-badge__trailing","data-part":"trailing"},n=/* @__PURE__ */e({__name:"BadgeTrailing",setup:e=>(e,n)=>(t(),a("span",l,[s(e.$slots,"default")]))});export{n as default};

package/dist/badge/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./BadgeLeading.vue.cjs"),r=require("./BadgeTrailing.vue.cjs"),d=require("./Badge.vue.cjs");exports.SkdxBadge=d.default;exports.SkdxBadgeLeading=e.default;exports.SkdxBadgeTrailing=r.default;

package/dist/badge/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxBadge` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * Badge children are text, not parts — no presence switch like other components.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxBadge, SkdxBadgeLeading } from '@skdx/vue/primitives/badge';
+ * </script>
+ *
+ * <template>
+ *   <SkdxBadge>
+ *     <SkdxBadgeLeading><CheckIcon /></SkdxBadgeLeading>
+ *     Verified
+ *   </SkdxBadge>
+ * </template>
+ * ```
+ */
+export { default as SkdxBadge } from './Badge.vue.cjs';
+export { default as SkdxBadgeLeading } from './BadgeLeading.vue.cjs';
+export { default as SkdxBadgeTrailing } from './BadgeTrailing.vue.cjs';

package/dist/badge/primitives.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `SkdxBadge` — composable building blocks.
+ * Use these when you need a custom layout beyond the derived recipe.
+ * Badge children are text, not parts — no presence switch like other components.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxBadge, SkdxBadgeLeading } from '@skdx/vue/primitives/badge';
+ * </script>
+ *
+ * <template>
+ *   <SkdxBadge>
+ *     <SkdxBadgeLeading><CheckIcon /></SkdxBadgeLeading>
+ *     Verified
+ *   </SkdxBadge>
+ * </template>
+ * ```
+ */
+export { default as SkdxBadge } from './Badge.vue.js';
+export { default as SkdxBadgeLeading } from './BadgeLeading.vue.js';
+export { default as SkdxBadgeTrailing } from './BadgeTrailing.vue.js';

package/dist/badge/primitives.js

@@ -0,0 +1 @@
+import a from"./BadgeLeading.vue.js";import e from"./BadgeTrailing.vue.js";import d from"./Badge.vue.js";export{d as SkdxBadge,a as SkdxBadgeLeading,e as SkdxBadgeTrailing};

package/dist/box/Box.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Box.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/box/Box.vue.d.cts

@@ -0,0 +1,121 @@
+import type { PolymorphicTag } from '../utils/polymorphic.cjs';
+import { type Space } from '../utils/space.cjs';
+type __VLS_Props = {
+    /**
+     * Element name to render, from the library's tag allowlist.
+     * @default 'div'
+     */
+    as?: PolymorphicTag;
+    /**
+     * CSS `display` value, emitted as an inline declaration.
+     * @default undefined — no inline declaration.
+     */
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents' | 'none';
+    /**
+     * Flex axis, emitted as the `flex-direction` declaration.
+     * @default undefined — no inline declaration.
+     */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Cross-axis alignment, emitted as the `align-items` declaration.
+     * @default undefined — no inline declaration.
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Main-axis alignment, emitted as the `justify-content` declaration.
+     * @default undefined — no inline declaration.
+     */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+    /**
+     * Flex wrapping, emitted as the `flex-wrap` declaration.
+     * @default undefined — no inline declaration.
+     */
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * Gap between flex or grid children, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    gap?: Space;
+    /**
+     * Padding on all sides, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    p?: Space;
+    /**
+     * Inline padding (`padding-inline`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    px?: Space;
+    /**
+     * Block padding (`padding-block`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    py?: Space;
+    /**
+     * Top padding, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    pt?: Space;
+    /**
+     * Bottom padding, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    pb?: Space;
+    /**
+     * Inline-start padding (`padding-inline-start`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    ps?: Space;
+    /**
+     * Inline-end padding (`padding-inline-end`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    pe?: Space;
+    /**
+     * Margin on all sides, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    m?: Space;
+    /**
+     * Inline margin (`margin-inline`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    mx?: Space;
+    /**
+     * Block margin (`margin-block`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    my?: Space;
+    /**
+     * Top margin, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    mt?: Space;
+    /**
+     * Bottom margin, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    mb?: Space;
+    /**
+     * Inline-start margin (`margin-inline-start`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    ms?: Space;
+    /**
+     * Inline-end margin (`margin-inline-end`), from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    me?: Space;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};