@bcc-code/component-library-vue 0.0.0-dev.d519e03 → 0.0.0-dev.d6deb51

package/README.md

@@ -1,8 +1,8 @@
 # @bcc-code/component-library-vue
 
-Vue 3 component library built on [PrimeVue](https://primevue.org/) and BCC design tokens. You only need this package—no separate Tailwind or PrimeVue install.
+Vue 3 component library built on [PrimeVue](https://primevue.org/) and BCC design tokens. You **only** need this package—no separate Tailwind or PrimeVue install.
 
-## View on with [Storybook](https://components.bcc.no)
+### [Storybook Link](https://components.bcc.no)
 
 ## Install
 
@@ -14,9 +14,9 @@ npm install @bcc-code/component-library-vue
 yarn add @bcc-code/component-library-vue
 ```
 
-**Peer dependency:** Vue 3.
+**Min requirements:** Vue 3.
 
-**pnpm and BCC packages:** The library depends on `@bcc-code/icons-vue` and `@bcc-code/design-tokens`. To use them in your app (e.g. `import { CheckIcon } from '@bcc-code/icons-vue'` or design token imports) without adding those packages to your own `package.json`, add this to your project’s **`.npmrc`** so pnpm hoists them:
+**Note to PNPM installs:** The library uses `@bcc-code/icons-vue` and `@bcc-code/design-tokens`. To use them in your own app (e.g. `import { CheckIcon } from '@bcc-code/icons-vue'`) without needing to explicitly add install them in your own `package.json`, add this to your project’s **`.npmrc`** so pnpm hoists them:
 
 ```ini
 public-hoist-pattern[]=@bcc-code/icons-vue
@@ -41,13 +41,10 @@ app.mount('#app');
 
 2. **Add styles** using one of the two options below.
 
----
-
-## Styling: two options
 
-### Option 1 — Recommended: full Tailwind in your app
+### Styles Option 1 — Recommended: full Tailwind in your app
 
-Use this if you want Tailwind utility classes in your own templates and only ship the classes you use (tree-shaking).
+Use this if you want Tailwind utility classes in your own templates while still letting the library's components render correctly.
 
 1. **Add the Tailwind Vite plugin** (the package brings Tailwind in as a dependency; you only wire it up):
 
@@ -65,11 +62,18 @@ export default defineConfig({
 
 ```css
 @import '@bcc-code/component-library-vue/theme.css';
+/* Optional, if not already included */
+@import '@bcc-code/component-library-vue/archivo-font.css';
 ```
 
-Tailwind will run as part of your build and only include the utility classes that appear in your app and in the library.
+That single import is enough. `theme.css` includes:
+
+- BCC design tokens, `@theme` / `@utility` definitions, and the rest of the design-system CSS inlined from `src/style.css` (including component-specific rules such as `BccInput` icon sizing and `BccButton` context tokens).
+- `library-utilities.css`, the pre-compiled Tailwind **utility class** rules used inside library templates (which your build cannot infer from the published JS).
+
+Do **not** rely on `library-utilities.css` alone with a minimal “base” import: you still need the full `theme.css` (or `style.css` for Option 2) so non-utility component styles and tokens are present. 
 
-### Option 2 — Pre-built CSS only
+### Styles Option 2 — Pre-built CSS only
 
 Use this if you don’t want Tailwind in your project and only need the library’s styles and components.
 
@@ -81,11 +85,10 @@ import '@bcc-code/component-library-vue/style.css';
 
 You get the BCC theme and component styles only; no Tailwind utilities in your app.
 
----
 
-## Using components
+# Components
 
-All components are namespaced with `Bcc`. Use them in templates or register them globally after `app.use(BccComponentLibrary)`.
+All components are namespaced with `Bcc`. Use them in templates or register them globally in your `main.ts`.
 
 **Example:**
 
@@ -105,37 +108,23 @@ const name = ref('');
 </script>
 ```
 
-# Setup
+**Example:**
 
 ```ts
 // main.ts
-import { BccComponentLibrary } from '@bcc-code/component-library-vue';
-
-const app = createApp(…)
-BccComponentLibrary(app);
-```
-
-```css
-/* styles.css */
-@import '@bcc-code/component-library-vue/theme.css';
+...
+import { BccButton, BccInput } from '@bcc-code/component-library-vue';
 
-/* Optional include the archivo font */
-@import '@bcc-code/component-library-vue/archivo-font.css';
-font-family:
-	Archivo,
-	system-ui,
-	-apple-system,
-	BlinkMacSystemFont,
-	'Segoe UI',
-	'Open Sans',
-	sans-serif;
+// After app.use(BccComponentLibrary)
+app.component('BccButton', BccButton);
+app.component('BccInput', BccInput);
 ```
 
 The library exports both **custom BCC components** (e.g. `BccBadge`, `BccFrame`, `BccReact`) and **wrapped PrimeVue components** (e.g. `BccButton`, `BccDialog`, `BccDataTable`). PrimeVue services (Toast, Confirm, Dialog) are configured by `BccComponentLibrary`; use the composables `useToast`, `useConfirm`, and `useDialog` from the library when you need them.
 
 ---
 
-## Development
+# Development
 
 ```bash
 pnpm install
@@ -144,6 +133,15 @@ pnpm run build        # Typecheck, types, and Vite build
 pnpm run build:vite   # Vite build only (includes theme.css)
 ```
 
+### Folder structure (where to work)
+
+- `src/components/custom`: New BCC-first components and component-specific styles/logic.
+- `src/components/wrapped`: PrimeVue wrapped components (`Bcc*`) where we adapt APIs, defaults, slots, and behavior.
+- `src/styles`: Design-system CSS layers (theme, contexts, semantic tokens, utility classes).
+- `src/index.ts`: Public exports; add new components/composables here so consumers can import them.
+- `docs` and `*.mdx`: Storybook docs pages and design guidance content.
+- `*.stories.ts`/`*.mdx` (in `src` or `docs`): Demos, docs, and regression coverage for components.
+
 ### Patching PrimeVue icons
 
 Some PrimeVue icons are replaced with [@bcc-code/icons-vue](https://www.npmjs.com/package/@bcc-code/icons-vue) so the library uses BCC iconography. The patch is maintained with pnpm’s built-in patching.

package/dist/archivo-font.css

@@ -0,0 +1,40 @@
+/* archivo-regular - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'Archivo';
+	font-style: normal;
+	font-weight: 400;
+	src: url('./archivo-font/archivo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* archivo-italic - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'Archivo';
+	font-style: italic;
+	font-weight: 400;
+	src: url('./archivo-font/archivo-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* archivo-500 - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'Archivo';
+	font-style: normal;
+	font-weight: 500;
+	src: url('./archivo-font/archivo-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* archivo-600 - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'Archivo';
+	font-style: normal;
+	font-weight: 600;
+	src: url('./archivo-font/archivo-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* archivo-600italic - latin */
+@font-face {
+	font-display: swap;
+	font-family: 'Archivo';
+	font-style: italic;
+	font-weight: 600;
+	src: url('./archivo-font/archivo-v25-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}