@bcc-code/component-library-vue 0.0.0-dev.96d1ef2 → 0.0.0-dev.9702651

package/dist/sfc-styles.css

@@ -0,0 +1 @@
+.p-button.useCtx[data-v-6d2be694]{--p-button-primary-color:var(--ctx-text);--p-button-primary-background:var(--ctx-background);--p-button-primary-border-color:var(--ctx-border);--p-button-primary-hover-background:var(--ctx-background-hover);--p-button-primary-hover-border-color:var(--ctx-border-hover);--p-button-primary-hover-color:var(--ctx-text-hover);--p-button-primary-active-background:var(--ctx-background-pressed);--p-button-primary-active-border-color:var(--ctx-border-pressed);--p-button-primary-active-color:var(--ctx-text-pressed)}.p-inputicon{--icon-size: 20px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size);margin-top:calc(-1 * (var(--icon-size) / 2))}.p-iconfield:has(.p-inputfield-sm) .p-inputicon{--icon-size: 16px}.p-iconfield:has(.p-inputfield-lg) .p-inputicon{--icon-size: 24px}

package/dist/theme.css

@@ -1704,27 +1704,12 @@
 
 
 
-/* === ./styles/fonts.css === */
-@utility heading-xs { font: var(--heading-xs); }
-@utility heading-sm { font: var(--heading-sm); }
-@utility heading-md { font: var(--heading-md); }
-@utility heading-lg { font: var(--heading-lg); }
-@utility heading-xl { font: var(--heading-xl); }
-@utility heading-2xl { font: var(--heading-2xl); }
-@utility heading-3xl { font: var(--heading-3xl); }
-@utility heading-4xl { font: var(--heading-4xl); }
-@utility heading-5xl { font: var(--heading-5xl); }
-@utility body-sm { font: var(--body-sm); }
-@utility body-md { font: var(--body-md); }
-@utility body-lg { font: var(--body-lg); }
-
-
-
 /* === ./styles/component-overrides.css === */
 /** Custom styles to fix primevue components that are not custom or wrapped. */
 
 :root {
-	--p-toast-width: min(85vw, 400px);
+	--p-toast-width: min(85vw, calc(var(--spacing) * 100));
+	--p-tooltip-max-width: min(85vw, calc(var(--spacing) * 100));
 }
 
 /**
@@ -1885,7 +1870,8 @@
 	}
 
 	.p-message-text {
-		line-height: var(--p-message-text-line-height);
+		line-height: 1;
+		flex: 1 1 0;
 	}
 
 	.p-multiselect {
@@ -2022,6 +2008,9 @@
 
 		@apply bg-ctx text-ctx;
 	}
+	.bcc-badge span:empty {
+		display: none;
+	}
 	.bcc-badge.gradient {
 		@apply ctx-gradient;
 	}
@@ -2137,31 +2126,31 @@
 
 /* from ./BccDialKnob/BccDialKnob.css */
 @layer components {
-    .bcc-knob {
-        @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
-
-        --bcc-knob-arc-bg: var(--color-background-neutral-default);
-        --bcc-knob-head: var(--color-background-brand-bolder-default);
-        --bcc-knob-tail: var(--color-background-brand-subtle-default);
-
-        --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
-        --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
-        
-        --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
-        --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
-    }
+	.bcc-knob {
+		@apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
 
-    .bcc-knob-label {
-        @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
-    }
+		--bcc-knob-arc-bg: var(--color-background-accent-gray-default);
+		--bcc-knob-head: var(--color-background-brand-bolder-default);
+		--bcc-knob-tail: var(--color-background-brand-subtle-default);
 
-    .bcc-knob-top-left {
-        @apply absolute top-0 left-0 text-left;
-    }
+		--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
+		--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
 
-    .bcc-knob-top-right {
-        @apply absolute top-0 right-0 text-right;
-    }
+		--bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
+		--bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
+	}
+
+	.bcc-knob-label {
+		@apply pointer-events-none absolute inset-0 flex flex-col items-center justify-center select-none;
+	}
+
+	.bcc-knob-top-left {
+		@apply absolute top-0 left-0 text-left;
+	}
+
+	.bcc-knob-top-right {
+		@apply absolute top-0 right-0 text-right;
+	}
 }
 
 
@@ -2207,43 +2196,52 @@
 
 /* from ./BccGraphic/BccGraphic.css */
 @layer components {
-  .bcc-graphic .corner,
-  .bcc-graphic .center-slot {
-    @apply absolute z-10;
-  }
-  .bcc-graphic .corner.top-left {
-    @apply left-4 top-4;
-  }
-  .bcc-graphic .corner.top-right {
-    @apply right-4 top-4;
-  }
-  .bcc-graphic .corner.bottom-right {
-    @apply bottom-4 right-4;
-  }
-  .bcc-graphic .corner.bottom-left {
-    @apply bottom-4 left-4;
-  }
-  .bcc-graphic .center-slot {
-    @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
-  }
+	.bcc-graphic .corner,
+	.bcc-graphic .center-slot {
+		@apply absolute z-10;
+	}
+	.bcc-graphic .corner.top-left {
+		@apply top-4 left-4;
+	}
+	.bcc-graphic .corner.top-right {
+		@apply top-4 right-4;
+	}
+	.bcc-graphic .corner.bottom-right {
+		@apply right-4 bottom-4;
+	}
+	.bcc-graphic .corner.bottom-left {
+		@apply bottom-4 left-4;
+	}
+	.bcc-graphic .center-slot {
+		@apply inset-1/4 flex h-1/2 w-1/2 items-center justify-center;
+	}
 
-  .bcc-graphic {
-    @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
-  }
+	.bcc-graphic {
+		@apply from-background-brand-bolder-default to-background-brand-subtle-default relative flex max-h-full w-full bg-linear-to-tr;
+	}
 
-  .bcc-graphic-banner {
-    @apply absolute inset-0 h-full w-full object-cover object-center;
-  }
-  .bcc-graphic-banner--loading {
-    @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
-  }
+	.bcc-graphic-banner {
+		@apply absolute inset-0 h-full w-full object-cover object-center;
+	}
+	.bcc-graphic-banner--loading {
+		@apply from-background-brand-bolder-default to-background-brand-subtle-default animate-pulse bg-linear-to-tr;
+	}
 
-  .bcc-graphic-logo {
-    @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
-  }
-  .bcc-graphic-logo--loading {
-    @apply animate-pulse bg-black opacity-10 blur-sm;
-  }
+	.bcc-graphic-logo {
+		@apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
+	}
+	.bcc-graphic-logo--loading {
+		@apply animate-pulse bg-black opacity-10 blur-sm;
+	}
+
+	.bcc-graphic.bcc-gb-grayscale .bcc-graphic-banner,
+	.bcc-graphic.bcc-gb-grayscale .bcc-graphic-logo {
+		@apply brightness-75 grayscale;
+	}
+	.bcc-graphic.bcc-gb-highlight .bcc-graphic-banner,
+	.bcc-graphic.bcc-gb-highlight .bcc-graphic-logo {
+		@apply brightness-150;
+	}
 }
 
 
@@ -2575,6 +2573,9 @@
     .bcc-tabs-fluid.p-tabs {
         width: 100%;
     }
+    .p-tabs .p-tab {
+        @apply heading-sm;
+    }
 }
 
 
@@ -2624,3 +2625,12 @@ strong,
 	cursor: not-allowed;
 	pointer-events: none;
 }
+
+
+/* SFC <style> blocks extracted all .vue components
+@import './sfc-styles.css';
+
+/* Library utility classes, compiled from the library's own components.
+   Contains only the utility class rules used inside the library — no preflight,
+   no @theme variables, no design tokens, since theme.css already provides those. */
+@import './library-utilities.css';

package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts

@@ -5,6 +5,7 @@ export type BccAppNavigationItem = {
     title: string;
     icon: Component;
     pin?: number;
+    is?: VueComponent;
     /** Any additional properties will be passed to the component.
      * @example
      * {

package/dist-types/components/custom/BccCircleLoader/BccCircleLoader.vue.d.ts

@@ -4,8 +4,6 @@ type __VLS_Props = {
     left?: boolean;
     right?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "3xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: 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: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/BccReact/BccReact.vue.d.ts

@@ -4,9 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
 }, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
     onToggle?: ((id: string) => any) | undefined;
 }>, {
-    placeholder: string;
     top: boolean;
     emojis: ReactInfo[];
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/wrapped/BccButton.vue.d.ts

@@ -5,11 +5,12 @@ export type ButtonProps = {
     iconRight?: boolean;
     iconClass?: PrimeButtonProps['iconClass'];
     size?: PrimeButtonProps['size'];
+    loadingIcon?: VueComponent;
     useCtx?: boolean;
-} & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos'>;
-declare var __VLS_14: {};
+} & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos' | 'loadingIcon'>;
+declare var __VLS_20: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist-types/components/wrapped/BccCheckbox.vue.d.ts

@@ -2,6 +2,9 @@ import { type CheckboxProps as PrimeCheckboxProps } from 'primevue/checkbox';
 export type CheckboxProps = PrimeCheckboxProps & {
     label?: string;
     labelLeft?: boolean;
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    labelClass?: string;
+    fluid?: boolean;
 };
 declare var __VLS_18: {};
 type __VLS_Slots = {} & {

package/dist-types/components/wrapped/BccMessage.vue.d.ts

@@ -6,9 +6,13 @@ export type MessageProps = Omit<PrimeMessageProps, 'icon'> & {
     title?: string;
     message?: string;
 };
-declare var __VLS_19: {};
+declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
+} & {
+    title?: (props: typeof __VLS_21) => any;
+} & {
+    message?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist-types/components/wrapped/BccRadioButton.vue.d.ts

@@ -4,6 +4,7 @@ export type RadioButtonProps = PrimeRadioButtonProps & {
     labelLeft?: boolean;
     justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
     labelClass?: string;
+    fluid?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist-types/index.d.ts

@@ -57,6 +57,7 @@ export { default as BccDivider } from 'primevue/divider';
 export { default as BccDock } from 'primevue/dock';
 export { default as BccDrawer } from 'primevue/drawer';
 export { default as BccDynamicDialog } from 'primevue/dynamicdialog';
+export { default as BccEditor } from 'primevue/editor';
 export { default as BccFieldset } from 'primevue/fieldset';
 export { default as BccFileUpload } from 'primevue/fileupload';
 export { default as BccFloatLabel } from 'primevue/floatlabel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "0.0.0-dev.96d1ef2",
+  "version": "0.0.0-dev.9702651",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -30,6 +30,8 @@
     },
     "./style.css": "./dist/index.css",
     "./theme.css": "./dist/theme.css",
+    "./sfc-styles.css": "./dist/sfc-styles.css",
+    "./library-utilities.css": "./dist/library-utilities.css",
     "./archivo-font.css": "./dist/archivo-font.css",
     "./tailwind.css": "./dist-css/tailwind.css"
   },
@@ -37,7 +39,9 @@
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "run-p typecheck build:types build:vite",
-    "build:vite": "rimraf dist && vite build && node scripts/build-theme-css.mjs",
+    "build:vite": "rimraf dist && vite build && pnpm run build:sfc-styles && pnpm run build:library-utilities && node scripts/build-theme-css.mjs",
+    "build:sfc-styles": "vite build --config vite.config.sfc-styles.ts && rimraf dist/sfc-styles.js",
+    "build:library-utilities": "tailwindcss -i src/library-utilities-input.css -o dist/library-utilities.css --minify",
     "build:types": "rimraf dist-types && vue-tsc -p tsconfig.build.json",
     "generate:semantic": "node scripts/restructure-semantic-primitives.mjs",
     "generate:semantic-css": "node scripts/generate-semantic-css.mjs",
@@ -54,7 +58,7 @@
     "create-version": "node ./scripts/version.cjs"
   },
   "dependencies": {
-    "@bcc-code/design-tokens": "^5.2.3",
+    "@bcc-code/design-tokens": "^5.2.5",
     "@bcc-code/icons-vue": "^1.4.0",
     "@primeuix/themes": "^2.0.3",
     "@tailwindcss/vite": "^4.1.18",
@@ -70,6 +74,7 @@
     "@primevue/auto-import-resolver": "^4.5.4",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/vue3-vite": "^10.3.5",
+    "@tailwindcss/cli": "^4.2.4",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -87,6 +92,7 @@
     "postcss": "^8.4.49",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
+    "quill": "^2.0.3",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
     "storybook": "^10.3.5",