@pantoken/svelte 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @pantoken/svelte
+
+Svelte helpers over `@pantoken/web-components`: an `icon` action that renders an Instructure glyph
+into a node, plus a token reader.
+
+## Install
+
+```sh
+npm i @pantoken/svelte
+```
+
+Also available as `pantoken/svelte`.
+
+## Usage
+
+```svelte
+<script>
+  import { icon, readToken } from "@pantoken/svelte";
+  import "@pantoken/css";
+</script>
+
+<span use:icon={"arrow-left"} />
+```
+
+The `<instui-icon>` custom element also works directly once `register()` has run.
+
+## API
+
+- **`icon(node, name): ActionResult`** — Svelte action that renders the icon's inline SVG into the host element and updates when the name changes.
+- **`readToken(name, fallback?): string`** — read a resolved `--instui-*` value. Returns `fallback` on the server.
+- **`ActionResult`** — the action's return shape (`update`, `destroy`).
+- **`register`** — re-exported from `@pantoken/web-components` for direct control over registration timing.
+
+## Related
+
+- Pairs with `@pantoken/css` for the base `--instui-*` custom properties.
+- Wraps `@pantoken/web-components`, which supplies the custom elements and icon SVGs.
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1 @@
+.pantoken-prose{color:var(--instui-component-text-base-color);font-family:var(--instui-component-text-content-font-family);font-size:var(--instui-component-text-content-font-size);font-weight:var(--instui-component-text-content-font-weight);line-height:var(--instui-component-text-content-line-height)}.pantoken-prose h1,.pantoken-prose h2,.pantoken-prose h3,.pantoken-prose h4,.pantoken-prose h5,.pantoken-prose h6{color:var(--instui-component-heading-base-color);font-family:var(--instui-component-heading-h1-font-family);line-height:var(--instui-component-heading-line-height);margin:var(--instui-spacing-space-lg) 0 var(--instui-spacing-space-sm)}.pantoken-prose h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.pantoken-prose h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.pantoken-prose h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.pantoken-prose h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.pantoken-prose h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.pantoken-prose h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.pantoken-prose p{margin:var(--instui-spacing-space-md) 0}.pantoken-prose a{color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}.pantoken-prose a:hover{color:var(--instui-color-text-interactive-navigation-primary-hover)}.pantoken-prose strong,.pantoken-prose b{font-weight:var(--instui-component-text-content-important-font-weight)}.pantoken-prose em,.pantoken-prose i{font-style:italic}.pantoken-prose small{font-size:var(--instui-component-text-content-small-font-size)}.pantoken-prose del,.pantoken-prose s{color:var(--instui-color-text-muted);text-decoration:line-through}.pantoken-prose ul,.pantoken-prose ol{margin:var(--instui-spacing-space-md) 0;padding-inline-start:var(--instui-spacing-space-lg)}.pantoken-prose li{margin:var(--instui-spacing-space2xs) 0}.pantoken-prose li.task-list-item{list-style:none}.pantoken-prose input[type=checkbox]{accent-color:var(--instui-color-text-interactive-navigation-primary-base);margin-inline-end:var(--instui-spacing-space-xs)}.pantoken-prose blockquote{margin:var(--instui-spacing-space-md) 0;border-inline-start:var(--instui-border-width-lg) solid var(--instui-color-stroke-base);color:var(--instui-component-text-base-color);font-size:var(--instui-component-text-content-quote-font-size);line-height:var(--instui-component-text-content-quote-line-height);padding-inline-start:var(--instui-spacing-space-md)}.pantoken-prose code{font-family:var(--instui-font-family-code);background:var(--instui-color-background-muted);padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border-radius:var(--instui-border-radius-sm);font-size:.9em}.pantoken-prose pre{font-family:var(--instui-font-family-code);background:var(--instui-color-background-container);color:var(--instui-color-text-base);padding:var(--instui-spacing-space-md);border:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);border-radius:var(--instui-border-radius-md);overflow-x:auto}.pantoken-prose pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.pantoken-prose hr{border:none;border-top:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);margin:var(--instui-spacing-space-lg) 0}.pantoken-prose img{border-radius:var(--instui-border-radius-md);max-width:100%}.pantoken-prose table:not([class]){border-collapse:collapse;width:100%;margin:var(--instui-spacing-space-md) 0;background:var(--instui-component-table-background);color:var(--instui-component-table-color);font-family:var(--instui-component-table-font-family);font-size:var(--instui-component-table-font-size)}.pantoken-prose table:not([class]) th{text-align:start;background:var(--instui-component-table-col-header-background);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight);padding:var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal);border-bottom:var(--instui-border-width-md) solid var(--instui-component-table-row-border-color)}.pantoken-prose table:not([class]) td{color:var(--instui-component-table-cell-color);line-height:var(--instui-component-table-cell-line-height);padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);border-bottom:var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color)}

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import { register } from "@pantoken/web-components";
+
+//#region src/index.d.ts
+/**
+ * Read a resolved token value. Returns `fallback` on the server.
+ *
+ * @example
+ * ```ts
+ * import { readToken } from "@pantoken/svelte";
+ *
+ * const brand = readToken("--instui-color-background-brand", "#0374B5");
+ * ```
+ */
+declare function readToken(name: string, fallback?: string): string;
+/** A Svelte action's return shape. */
+interface ActionResult {
+  update(name: string): void;
+  destroy(): void;
+}
+/**
+ * Svelte action: `<span use:icon={"arrow-left"} />` renders the icon's inline SVG into the node.
+ *
+ * @param node - The host element.
+ * @param name - The icon name.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { icon } from "@pantoken/svelte";
+ *   import "@pantoken/css";
+ * </script>
+ *
+ * <span use:icon={"arrow-left"} />
+ * ```
+ */
+declare function icon(node: Element, name: string): ActionResult;
+//#endregion
+export { ActionResult, icon, readToken, register };

package/dist/index.mjs

@@ -0,0 +1,57 @@
+import { iconSvg, register, register as register$1 } from "@pantoken/web-components";
+//#region src/index.ts
+/**
+* `@pantoken/svelte` — Svelte helpers over `@pantoken/web-components`.
+*
+* `icon` is a Svelte action that renders an Instructure glyph into an element. `readToken` reads a
+* resolved `--instui-*` value (SSR-safe). The custom elements also work directly once `register()`
+* has run.
+*
+* @module
+* @experimental
+*/
+/**
+* Read a resolved token value. Returns `fallback` on the server.
+*
+* @example
+* ```ts
+* import { readToken } from "@pantoken/svelte";
+*
+* const brand = readToken("--instui-color-background-brand", "#0374B5");
+* ```
+*/
+function readToken(name, fallback = "") {
+	if (typeof document === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+/**
+* Svelte action: `<span use:icon={"arrow-left"} />` renders the icon's inline SVG into the node.
+*
+* @param node - The host element.
+* @param name - The icon name.
+*
+* @example
+* ```svelte
+* <script>
+*   import { icon } from "@pantoken/svelte";
+*   import "@pantoken/css";
+* <\/script>
+*
+* <span use:icon={"arrow-left"} />
+* ```
+*/
+function icon(node, name) {
+	const render = (iconName) => {
+		node.innerHTML = iconSvg(iconName);
+	};
+	register$1();
+	render(name);
+	return {
+		update: render,
+		destroy() {
+			node.innerHTML = "";
+		}
+	};
+}
+//#endregion
+export { icon, readToken, register };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pantoken/svelte",
+  "version": "0.1.0",
+  "description": "Svelte helpers for pantoken: an icon action over the web components, plus token reads.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/web-components": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4",
+    "@pantoken/components": "0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "svelte",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.ts",
+    "build": "vp run generate && vp pack",
+    "dev": "vp run generate && vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}