@brandsync/wc 0.0.1

package/dist/types/stories-utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Pulls a component's class-level JSDoc description out of the generated Custom Elements
+ * Manifest, so each story's docs page description is sourced from the same `@slot`/`@part`
+ * JSDoc comment as the props table, instead of being duplicated by hand in the story file.
+ */
+export declare function componentDescription(tagName: string): string;
+/** Same idea as componentDescription, but for one @Prop's own JSDoc comment (attribute-level). */
+export declare function propDescription(tagName: string, propName: string): string;

package/dist/types/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function format(first?: string, middle?: string, last?: string): string;

package/dist/types/utils/utils.unit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@brandsync/wc",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Brandsync design system components as framework-agnostic Web Components",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/brandsync-wc/brandsync-wc.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/brandsync-wc/brandsync-wc.esm.js",
+      "require": "./dist/cjs/brandsync-wc.cjs.js"
+    },
+    "./dist/components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./dist/components/*": {
+      "import": "./dist/components/*",
+      "types": "./dist/components/*"
+    },
+    "./dist/brandsync-wc/brandsync-wc.css": "./dist/brandsync-wc/brandsync-wc.css",
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "custom-elements.json"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil build --prod && vitest run",
+    "test:watch": "stencil build --prod && vitest watch",
+    "generate": "stencil generate",
+    "storybook": "npm run build && storybook dev -p 6006",
+    "build-storybook": "npm run build && storybook build"
+  },
+  "devDependencies": {
+    "@stencil/angular-output-target": "^1.4.1",
+    "@stencil/core": "^4.27.1 || ^5.0.0-0",
+    "@stencil/react-output-target": "^1.6.2",
+    "@stencil/vitest": "^1.8.3",
+    "@storybook/addon-docs": "^10.5.8",
+    "@storybook/web-components-vite": "^10.5.8",
+    "@types/node": "^22.13.5",
+    "@vitest/browser-playwright": "^4.0.0",
+    "lit": "^3.3.3",
+    "playwright": "^1.52.0",
+    "storybook": "^10.5.8",
+    "vitest": "^4.0.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "brandsync-tokens": "^1.0.31"
+  }
+}

package/readme.md

@@ -0,0 +1,48 @@
+# @brandsync/wc
+
+Brandsync's design system components as framework-agnostic Web Components — real, self-contained
+custom elements consumed the same way by React, Angular, Blazor, or plain HTML. Built with
+[Stencil](https://stenciljs.com), styled entirely from `brandsync-tokens` CSS Custom Properties.
+
+See `CONVENTIONS.md` for the customization surface every component follows (CSS Custom Properties,
+Shadow Parts, slots), and `docs/blazor-interop/` for a worked Blazor/MudBlazor consumption example.
+
+## Getting started
+
+```bash
+npm install
+npm run build      # compiles all components, generates React/Angular wrapper packages
+npm test           # runs the component test suite
+npm run storybook  # interactive component catalog at http://localhost:6006
+```
+
+## Typography
+
+`brandsync-tokens` specifies Roboto (`--bs-typography-font-family-*`) and every component's shadow
+styles inherit `font-family` from the document root — but **loading the actual Roboto font file is
+the consuming app's job**, same convention already used across `eg-brandsync` (a Google Fonts
+`<link>`, or `next/font/google` in Next.js apps). This library ships styling, not a font file.
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;600;700;900&display=swap">
+```
+
+Those weights (100/400/500/600/700/900) match `brandsync-tokens`' `--bs-font-weight-*` scale
+exactly. If Roboto isn't loaded, components still work — text just falls back to the browser's
+default sans-serif.
+
+## Usage
+
+```html
+<script type="module" src="https://unpkg.com/@brandsync/wc"></script>
+<bs-button variant="primary">Book room</bs-button>
+```
+
+Or from `node_modules`, per-component:
+
+```ts
+import '@brandsync/wc/dist/components/bs-button.js';
+```
+
+React and Angular get auto-generated wrapper packages (`@stencil/react-output-target` /
+`@stencil/angular-output-target`) built from the same source — see `stencil.config.ts`.