@ks-digital/designsystem-web 0.0.1-alpha.73

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 KS Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/copy-button/copy-button.d.ts

@@ -0,0 +1,16 @@
+export type CopyState = 'rest' | 'success' | 'error';
+export type CopyEventDetail = {
+    value: string;
+};
+export type CopyErrorEventDetail = {
+    value: string;
+    error: unknown;
+};
+/** Enhances every `[data-copy]` in `scope`. Needed for content the document observer has not seen yet. */
+export declare const initCopyButtons: (scope?: Element | Document | null) => void;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'ksd-copy': CustomEvent<CopyEventDetail>;
+        'ksd-copy-error': CustomEvent<CopyErrorEventDetail>;
+    }
+}

package/dist/copy-button/index.d.ts

@@ -0,0 +1 @@
+export * from './copy-button';

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("@digdir/designsystemet-web/tooltip");var e=`http://www.w3.org/2000/svg`,t={fill:`none`,stroke:`currentColor`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"stroke-width":`16`},n=n=>{let r=document.createElementNS(e,`svg`);r.setAttribute(`viewBox`,`0 0 256 256`);for(let[i,a]of n){let n=document.createElementNS(e,i);for(let[e,r]of Object.entries({...t,...a}))n.setAttribute(e,r);r.append(n)}return r},r=()=>typeof window<`u`&&typeof document<`u`,i=(e,...t)=>{!r()||window.dsWarnings===!1||console.log(`KS Designsystem: ${e}`,...t)},a=(e,t,n)=>n===void 0?e.getAttribute(t):(n===null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n),null),o=e=>{let t=e.target?.shadowRoot&&e.composedPath()[0]||e.target;return t?.nodeType===1?t:null},s=(e,t,n,r)=>{for(let i of t.split(` `))e.removeEventListener(i,n,r)},c=(e,t,n,r)=>{for(let i of t.split(` `))e.addEventListener(i,n,r);return()=>s(e,t,n,r)},l=(e,t,n)=>{let i=()=>a.disconnect(),a=new MutationObserver(n=>{if(!r()||!e.isConnected)return i();t(e,n)});return t(e),a.observe(e,n),i},u=(e,t)=>{if(!r())return;let n=window.ksdHotReloadCleanup||=new Map;for(let t of n.get(e)||[])t();n.set(e,t())},d=`data-copy`,f=`data-copy-icon`,p=`data-copy-state`,m=`data-tooltip`,h=`[${d}]`,g={rest:`data-copy-label`,success:`data-copied-label`,error:`data-error-label`},_={rest:`Kopier`,success:`Kopiert`,error:`Kopiering feilet`},v={rest:[[`polyline`,{points:`168 168 216 168 216 40 88 40 88 88`}],[`rect`,{x:`40`,y:`88`,width:`128`,height:`128`}]],success:[[`polyline`,{points:`40 144 96 200 224 72`}]],error:[[`line`,{x1:`160`,y1:`96`,x2:`96`,y2:`160`}],[`line`,{x1:`96`,y1:`96`,x2:`160`,y2:`160`}],[`circle`,{cx:`128`,cy:`128`,r:`96`}]]},y=new WeakMap,b=new WeakMap,x=e=>e.querySelector(`:scope > [${f}]`),S=e=>e.nodeName===`BUTTON`,C=e=>e.hasAttribute(`disabled`)||a(e,`aria-disabled`)===`true`,w=e=>e===`success`||e===`error`?e:`rest`,T=(e,t)=>{a(e,p,t),a(e,m,a(e,g[t])||_[t]);let r=x(e);r&&r.replaceChildren(n(v[t]))},E=e=>{if(!S(e)){i(`${d} expects a <button>, got <${e.nodeName.toLowerCase()}>:`,e);return}if(!x(e)){let t=document.createElement(`span`);a(t,f,``),a(t,`aria-hidden`,`true`),e.prepend(t)}T(e,w(a(e,p)))},D=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:n})),O=e=>{y.get(e)?.();let t=()=>{y.delete(e),T(e,`rest`)};if(e!==document.activeElement)return t();y.set(e,c(e,`blur`,t,{once:!0}))},k=async e=>{let t=o(e)?.closest(h);if(!t||!S(t)||C(t))return;let n=a(t,d)||``;t instanceof HTMLElement&&t.focus();let r=(b.get(t)??0)+1;b.set(t,r),y.get(t)?.();try{if(await navigator.clipboard.writeText(n),b.get(t)!==r)return;T(t,`success`),D(t,`ksd-copy`,{value:n})}catch(e){if(b.get(t)!==r)return;T(t,`error`),D(t,`ksd-copy-error`,{value:n,error:e})}O(t)},A=e=>{for(let t of e?.querySelectorAll(h)||[])E(t)},j=e=>(e.ownerDocument??e)===document||(i(`ignoring a scope from another document:`,e),!1),M=(e=r()?document:null)=>{!e||!j(e)||A(e)},N=(e,t)=>{if(!t)return A(document);for(let e of t)if(e.attributeName){let t=e.target;t.hasAttribute(d)&&E(t)}else for(let t of e.addedNodes)t.nodeType===1&&(t.hasAttribute(d)&&E(t),A(t))};u(`copy-button`,()=>[c(document,`click`,k,!0),l(document,N,{attributeFilter:[d,...Object.values(g)],attributes:!0,childList:!0,subtree:!0})]),exports.initCopyButtons=M;var P=require("@digdir/designsystemet-web");Object.keys(P).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return P[e]}})});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@digdir/designsystemet-web';
+export * from './copy-button';

package/dist/index.js

@@ -0,0 +1,139 @@
+import "@digdir/designsystemet-web/tooltip";
+export * from "@digdir/designsystemet-web";
+//#region src/utils/icon.ts
+var e = "http://www.w3.org/2000/svg", t = {
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"stroke-width": "16"
+}, n = (n) => {
+	let r = document.createElementNS(e, "svg");
+	r.setAttribute("viewBox", "0 0 256 256");
+	for (let [i, a] of n) {
+		let n = document.createElementNS(e, i);
+		for (let [e, r] of Object.entries({
+			...t,
+			...a
+		})) n.setAttribute(e, r);
+		r.append(n);
+	}
+	return r;
+}, r = () => typeof window < "u" && typeof document < "u", i = (e, ...t) => {
+	!r() || window.dsWarnings === !1 || console.log(`KS Designsystem: ${e}`, ...t);
+}, a = (e, t, n) => n === void 0 ? e.getAttribute(t) : (n === null ? e.removeAttribute(t) : e.getAttribute(t) !== n && e.setAttribute(t, n), null), o = (e) => {
+	let t = e.target?.shadowRoot && e.composedPath()[0] || e.target;
+	return t?.nodeType === 1 ? t : null;
+}, s = (e, t, n, r) => {
+	for (let i of t.split(" ")) e.removeEventListener(i, n, r);
+}, c = (e, t, n, r) => {
+	for (let i of t.split(" ")) e.addEventListener(i, n, r);
+	return () => s(e, t, n, r);
+}, l = (e, t, n) => {
+	let i = () => a.disconnect(), a = new MutationObserver((n) => {
+		if (!r() || !e.isConnected) return i();
+		t(e, n);
+	});
+	return t(e), a.observe(e, n), i;
+}, u = (e, t) => {
+	if (!r()) return;
+	let n = window.ksdHotReloadCleanup ||= /* @__PURE__ */ new Map();
+	for (let t of n.get(e) || []) t();
+	n.set(e, t());
+}, d = "data-copy", f = "data-copy-icon", p = "data-copy-state", m = "data-tooltip", h = `[${d}]`, g = {
+	rest: "data-copy-label",
+	success: "data-copied-label",
+	error: "data-error-label"
+}, _ = {
+	rest: "Kopier",
+	success: "Kopiert",
+	error: "Kopiering feilet"
+}, v = {
+	rest: [["polyline", { points: "168 168 216 168 216 40 88 40 88 88" }], ["rect", {
+		x: "40",
+		y: "88",
+		width: "128",
+		height: "128"
+	}]],
+	success: [["polyline", { points: "40 144 96 200 224 72" }]],
+	error: [
+		["line", {
+			x1: "160",
+			y1: "96",
+			x2: "96",
+			y2: "160"
+		}],
+		["line", {
+			x1: "96",
+			y1: "96",
+			x2: "160",
+			y2: "160"
+		}],
+		["circle", {
+			cx: "128",
+			cy: "128",
+			r: "96"
+		}]
+	]
+}, y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), x = (e) => e.querySelector(`:scope > [${f}]`), S = (e) => e.nodeName === "BUTTON", C = (e) => e.hasAttribute("disabled") || a(e, "aria-disabled") === "true", w = (e) => e === "success" || e === "error" ? e : "rest", T = (e, t) => {
+	a(e, p, t), a(e, m, a(e, g[t]) || _[t]);
+	let r = x(e);
+	r && r.replaceChildren(n(v[t]));
+}, E = (e) => {
+	if (!S(e)) {
+		i(`${d} expects a <button>, got <${e.nodeName.toLowerCase()}>:`, e);
+		return;
+	}
+	if (!x(e)) {
+		let t = document.createElement("span");
+		a(t, f, ""), a(t, "aria-hidden", "true"), e.prepend(t);
+	}
+	T(e, w(a(e, p)));
+}, D = (e, t, n) => e.dispatchEvent(new CustomEvent(t, {
+	bubbles: !0,
+	composed: !0,
+	detail: n
+})), O = (e) => {
+	y.get(e)?.();
+	let t = () => {
+		y.delete(e), T(e, "rest");
+	};
+	if (e !== document.activeElement) return t();
+	y.set(e, c(e, "blur", t, { once: !0 }));
+}, k = async (e) => {
+	let t = o(e)?.closest(h);
+	if (!t || !S(t) || C(t)) return;
+	let n = a(t, d) || "";
+	t instanceof HTMLElement && t.focus();
+	let r = (b.get(t) ?? 0) + 1;
+	b.set(t, r), y.get(t)?.();
+	try {
+		if (await navigator.clipboard.writeText(n), b.get(t) !== r) return;
+		T(t, "success"), D(t, "ksd-copy", { value: n });
+	} catch (e) {
+		if (b.get(t) !== r) return;
+		T(t, "error"), D(t, "ksd-copy-error", {
+			value: n,
+			error: e
+		});
+	}
+	O(t);
+}, A = (e) => {
+	for (let t of e?.querySelectorAll(h) || []) E(t);
+}, j = (e) => (e.ownerDocument ?? e) === document || (i("ignoring a scope from another document:", e), !1), M = (e = r() ? document : null) => {
+	!e || !j(e) || A(e);
+}, N = (e, t) => {
+	if (!t) return A(document);
+	for (let e of t) if (e.attributeName) {
+		let t = e.target;
+		t.hasAttribute(d) && E(t);
+	} else for (let t of e.addedNodes) t.nodeType === 1 && (t.hasAttribute(d) && E(t), A(t));
+};
+u("copy-button", () => [c(document, "click", k, !0), l(document, N, {
+	attributeFilter: [d, ...Object.values(g)],
+	attributes: !0,
+	childList: !0,
+	subtree: !0
+})]);
+//#endregion
+export { M as initCopyButtons };

package/dist/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ks-digital/designsystem-web",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ks-no/designsystem.git",
+    "directory": "packages/web"
+  },
+  "version": "0.0.1-alpha.73",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "./dist"
+  ],
+  "dependencies": {
+    "@digdir/designsystemet-web": "catalog:designsystemet"
+  },
+  "devDependencies": {
+    "@ks-digital/designsystem-themes": "workspace:*",
+    "@storybook/addon-docs": "catalog:storybook",
+    "@testing-library/jest-dom": "catalog:testing-library",
+    "@storybook/web-components": "catalog:storybook",
+    "@storybook/web-components-vite": "catalog:storybook",
+    "lit": "catalog:lit",
+    "storybook": "catalog:storybook",
+    "typescript": "catalog:typescript",
+    "vitest-axe": "catalog:vitest-a11y"
+  }
+}

package/dist/utils/icon.d.ts

@@ -0,0 +1,3 @@
+export type IconShape = [tag: string, attrs: Record<string, string>];
+/** Builds the SVG node by hand, since Trusted Types blocks innerHTML even for static markup. */
+export declare const createIcon: (shapes: IconShape[]) => SVGSVGElement;

package/dist/utils/utils.d.ts

@@ -0,0 +1,19 @@
+export declare const isBrowser: () => boolean;
+/** Returns void on purpose: consuming the result of a logging call is always a mistake. */
+export declare const warn: (message: string, ...args: unknown[]) => void;
+/** Get attribute when `value` is omitted, set it when a string, remove it when `null`. */
+export declare const attr: (el: Element, name: string, value?: string | null) => string | null;
+/** Resolves the real target even when the event crosses a shadow boundary. */
+export declare const getComposedTarget: (event: Event) => Element | null;
+export declare const off: (el: EventTarget, types: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;
+export declare const on: (el: EventTarget, types: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => () => void;
+/** Runs `callback` immediately, then on every matching mutation. Returns a disconnect function. */
+export declare const onMutation: <T extends Node>(el: T, callback: (el: T, records?: MutationRecord[]) => void, options: MutationObserverInit) => () => void;
+/** Re-runs setup on hot reload, tearing down the listeners registered by the previous run. */
+export declare const onHotReload: (key: string, setup: () => (() => void)[]) => void;
+declare global {
+    interface Window {
+        dsWarnings?: boolean;
+        ksdHotReloadCleanup?: Map<string, (() => void)[]>;
+    }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ks-digital/designsystem-web",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ks-no/designsystem.git",
+    "directory": "packages/web"
+  },
+  "version": "0.0.1-alpha.73",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "./dist"
+  ],
+  "dependencies": {
+    "@digdir/designsystemet-web": "1.21.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "10.2.17",
+    "@testing-library/jest-dom": "~6.6.3",
+    "@storybook/web-components": "10.2.17",
+    "@storybook/web-components-vite": "10.2.17",
+    "lit": "^3.3.0",
+    "storybook": "10.5.8",
+    "typescript": "6.0.3",
+    "vitest-axe": "^0.1.0",
+    "@ks-digital/designsystem-themes": "0.0.1-alpha.73"
+  }
+}