@bcc-code/component-library-vue 0.0.0-dev.db92332 → 0.0.0-dev.dbcae8b

package/README.md

@@ -64,10 +64,12 @@ export default defineConfig({
 @import '@bcc-code/component-library-vue/theme.css';
 ```
 
-That single import is enough. `theme.css` does two things:
+That single import is enough. `theme.css` includes:
 
-- It exposes the BCC design tokens and Tailwind utilities.
-- It also imports `library-utilities.css`, the pre-compiled CSS for the utility classes used **inside** the library's own components. 
+- 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. 
 
 ### Styles Option 2 — Pre-built CSS only
 

package/dist/component-library.js

@@ -8339,7 +8339,7 @@ const dI = { key: 1 }, _a = /* @__PURE__ */ Le({
     });
     return (o, a) => (d(), p("div", cI, [
       y("div", uI, [
-        (d(!0), p(T, null, V(t.items, (l) => (d(), k(C(t.linkComponent ?? "a"), c({
+        (d(!0), p(T, null, V(t.items, (l) => (d(), k(C(l.component ?? t.linkComponent ?? "a"), c({
           key: l.key,
           ref_for: !0
         }, l, {
@@ -8823,7 +8823,7 @@ const Rj = /* @__PURE__ */ Le({
   setup(t) {
     const e = t, n = $e(!1), r = $e(!1), i = we(() => LI(e.ratio));
     return (o, a) => (d(), p("div", {
-      class: S(["bcc-graphic", [Si[t.rounding], { "brightness-75 grayscale": t.grayscale, "brightness-150": t.highlight }]]),
+      class: S(["bcc-graphic", [Si[t.rounding], { "bcc-gb-grayscale": t.grayscale, "bcc-gb-highlight": t.highlight }]]),
       style: $t(`padding-bottom: ${i.value}`)
     }, [
       t.bannerSrc ? (d(), p(T, { key: 0 }, [
@@ -9727,7 +9727,7 @@ const OC = {
               "aria-label": t.backTitle ? void 0 : "Back",
               onClick: a[0] || (a[0] = (l) => r("back"))
             }, [
-              B(ne(jI), { class: "w-6" }),
+              B(ne(jI), { class: "icon-size-sm" }),
               t.backTitle ? (d(), p("h3", HC, D(t.backTitle), 1)) : g("", !0)
             ], 8, NC)),
             b(o.$slots, "left", {}, () => [