@nldd/design-system 0.8.85 → 0.8.87

package/dist/utilities/visibility-mixin.js

@@ -5,37 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { breakpoints } from '../assets/styles/breakpoints.js';
-// Resolve a hide-below/hide-above value to a container-query threshold. A named
-// breakpoint (sm/md/lg) maps to the standard boundary; the open edges (below
-// sm, above lg) are no-ops (null); any other value passes through as a length.
-function resolveHideBelow(value) {
-    if (value === 'md')
-        return breakpoints.smMax; // hidden in sm
-    if (value === 'lg')
-        return breakpoints.mdMax; // hidden in sm + md
-    if (value === 'sm')
-        return null; // nothing below sm
-    return value;
-}
-function resolveHideAbove(value) {
-    if (value === 'sm')
-        return breakpoints.mdMin; // hidden in md + lg
-    if (value === 'md')
-        return breakpoints.lgMin; // hidden in lg
-    if (value === 'lg')
-        return null; // nothing above lg
+import { visibilityStyles } from './visibility-mixin.styles.js';
+const NAMED_BREAKPOINTS = new Set(['sm', 'md', 'lg']);
+// A named breakpoint is already covered by the static stylesheet. Only a custom
+// CSS length has to become a rule at runtime, because a container query cannot
+// read its threshold from a variable.
+function customThreshold(value) {
+    if (value === undefined || NAMED_BREAKPOINTS.has(value))
+        return null;
     return value;
 }
 /**
- * The open edges resolve to null, so the attribute is written but nothing ever
- * hides. That reads like a working value, and the name invites it: `hide-below`
+ * The open edges hide nothing, so the attribute is written but never applies.
+ * That reads like a working value, and the name invites it: `hide-below`
  * names the breakpoint you hide BELOW, so "hide it at sm" comes out as
  * `hide-below="md"` and `hide-below="sm"` does nothing at all. Say so once,
  * rather than let it look applied.
  */
-function warnNoOp(host, attribute, value, resolved, openEdge, edgeLabel) {
-    if (value !== openEdge || resolved !== null)
+function warnNoOp(host, attribute, value, openEdge, edgeLabel) {
+    if (value !== openEdge)
         return;
     console.warn(`[${host.localName}] ${attribute}="${openEdge}" never hides anything: there is no `
         + `breakpoint ${edgeLabel}. The value names the breakpoint you hide below, so the `
@@ -46,8 +34,8 @@ function warnNoOp(host, attribute, value, resolved, openEdge, edgeLabel) {
  * Adds `hide-below` and `hide-above` attributes that toggle visibility based
  * on the inline-size of an ancestor CSS container.
  *
- * Without a `containerName` argument the generated rule is an anonymous
- * `@container (…)` query — it matches the nearest ancestor that declares
+ * Without a `containerName` argument the rule is an anonymous `@container (…)`
+ * query — it matches the nearest ancestor that declares
  * `container-type: inline-size`. Pass a name to target a specific container
  * (e.g. `'cells-container'` for cells inside `nldd-list`, which sets that
  * name inline on its host as a Safari shadow-DOM workaround).
@@ -56,12 +44,15 @@ function warnNoOp(host, attribute, value, resolved, openEdge, edgeLabel) {
  * (e.g. '320px', '20rem'). Named values resolve to the standard breakpoint
  * thresholds: `hide-below` uses the breakpoint's lower bound (e.g.
  * `hide-below="lg"` hides in sm+md and shows in lg), `hide-above` its upper
- * bound; the open edges (below sm, above lg) are no-ops. Container queries can't
- * read CSS variables in their conditions, so the query rule is generated at
- * runtime and injected as a <style> element in the component's shadow root,
- * wrapped in `:host { @container <name>? (…) { display: none !important; } }`
- * (nested form — the flattened `@container { :host { … } }` is unreliable in
- * Safari).
+ * bound; the open edges (below sm, above lg) are no-ops.
+ *
+ * The named values are static CSS (see `visibility-mixin.styles.ts`), added
+ * through `finalizeStyles` so that a component's own `static styles` does not
+ * have to know about them. A custom length has no static form: the threshold
+ * is only known at runtime and a container query cannot read one from a CSS
+ * variable, so its rule is written at runtime into a constructable stylesheet
+ * the shadow root adopts. Neither path is an inline stylesheet, so no consumer
+ * needs `'unsafe-inline'` in its `style-src` for either.
  *
  * @mixin VisibilityMixin
  *
@@ -79,37 +70,59 @@ function warnNoOp(host, attribute, value, resolved, openEdge, edgeLabel) {
  */
 export function VisibilityMixin(Base, containerName) {
     class WithVisibility extends Base {
+        // Lit calls this from finalize() with whatever the most-derived class put
+        // in `static styles`, which is why the mixin can add its sheet here and a
+        // component's own `static styles =` never clobbers it.
+        //
+        // `Base` is the direct superclass, so this is `super.finalizeStyles` with
+        // the receiver kept; it is reached through the cast because a
+        // `Constructor<LitElement>` type parameter does not carry Lit's statics.
+        /** @internal */
+        static finalizeStyles(styles) {
+            const inherited = Base.finalizeStyles.call(this, styles);
+            return [...inherited, visibilityStyles(containerName)];
+        }
         updated(changed) {
             super.updated(changed);
             if (changed.has('hideBelow') || changed.has('hideAbove')) {
-                this._updateVisibilityStyle();
+                this._updateVisibilityRules();
             }
         }
-        _updateVisibilityStyle() {
-            if (!this.shadowRoot)
+        // The rule for a custom length is built here, into a stylesheet the shadow
+        // root adopts rather than a <style> element written into it. A CSP judges
+        // the element and leaves the CSSOM alone, so this path needs no
+        // 'unsafe-inline' either.
+        _updateVisibilityRules() {
+            const root = this.shadowRoot;
+            if (!root)
                 return;
             const containerPrefix = containerName ? `${containerName} ` : '';
             const rules = [];
-            const below = this.hideBelow ? resolveHideBelow(this.hideBelow) : null;
-            warnNoOp(this, 'hide-below', this.hideBelow, below, 'sm', 'below sm');
+            warnNoOp(this, 'hide-below', this.hideBelow, 'sm', 'below sm');
+            const below = customThreshold(this.hideBelow);
             if (below) {
                 rules.push(`:host { @container ${containerPrefix}(max-width: ${below}) { display: none !important; } }`);
             }
-            const above = this.hideAbove ? resolveHideAbove(this.hideAbove) : null;
-            warnNoOp(this, 'hide-above', this.hideAbove, above, 'lg', 'above lg');
+            warnNoOp(this, 'hide-above', this.hideAbove, 'lg', 'above lg');
+            const above = customThreshold(this.hideAbove);
             if (above) {
                 rules.push(`:host { @container ${containerPrefix}(min-width: ${above}) { display: none !important; } }`);
             }
             if (rules.length === 0) {
-                this._visibilityStyle?.remove();
-                this._visibilityStyle = undefined;
+                if (this._visibilitySheet) {
+                    const dropped = this._visibilitySheet;
+                    root.adoptedStyleSheets = Array.from(root.adoptedStyleSheets)
+                        .filter((sheet) => sheet !== dropped);
+                    this._visibilitySheet = undefined;
+                }
                 return;
             }
-            if (!this._visibilityStyle) {
-                this._visibilityStyle = document.createElement('style');
-                this.shadowRoot.appendChild(this._visibilityStyle);
+            if (!this._visibilitySheet) {
+                this._visibilitySheet = new CSSStyleSheet();
+                // Last, so it outranks the static sheet on a tie.
+                root.adoptedStyleSheets = [...root.adoptedStyleSheets, this._visibilitySheet];
             }
-            this._visibilityStyle.textContent = rules.join('\n');
+            this._visibilitySheet.replaceSync(rules.join('\n'));
         }
     }
     __decorate([

package/dist/utilities/visibility-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"visibility-mixin.js","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"visibility-mixin.js","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.ts"],"names":[],"mappings":"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"}

package/dist/utilities/visibility-mixin.styles.d.ts

@@ -0,0 +1,14 @@
+import { type CSSResult } from 'lit';
+/**
+ * The `@container` rules for the named `hide-below` / `hide-above` values.
+ *
+ * Static, so they reach the shadow root through `adoptedStyleSheets` instead
+ * of a `<style>` element. That keeps consumers on a `style-src` without
+ * `'unsafe-inline'`; a custom CSS length has no static form and gets its rule
+ * from the mixin at runtime, into an adopted sheet of its own.
+ *
+ * The rules are nested (`:host { @container … }`) rather than flattened, because
+ * `@container { :host { … } }` is unreliable in Safari.
+ */
+export declare function visibilityStyles(containerName?: string): CSSResult;
+//# sourceMappingURL=visibility-mixin.styles.d.ts.map

package/dist/utilities/visibility-mixin.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-mixin.styles.d.ts","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAYrD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CA+BlE"}

package/dist/utilities/visibility-mixin.styles.js

@@ -0,0 +1,52 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+const mdMin = unsafeCSS(breakpoints.mdMin);
+const mdMax = unsafeCSS(breakpoints.mdMax);
+const lgMin = unsafeCSS(breakpoints.lgMin);
+// One sheet per container name, so every component passing the same name
+// shares a single constructable stylesheet instead of each adopting its own.
+const sheets = new Map();
+/**
+ * The `@container` rules for the named `hide-below` / `hide-above` values.
+ *
+ * Static, so they reach the shadow root through `adoptedStyleSheets` instead
+ * of a `<style>` element. That keeps consumers on a `style-src` without
+ * `'unsafe-inline'`; a custom CSS length has no static form and gets its rule
+ * from the mixin at runtime, into an adopted sheet of its own.
+ *
+ * The rules are nested (`:host { @container … }`) rather than flattened, because
+ * `@container { :host { … } }` is unreliable in Safari.
+ */
+export function visibilityStyles(containerName) {
+    const key = containerName ?? '';
+    const cached = sheets.get(key);
+    if (cached)
+        return cached;
+    const container = unsafeCSS(containerName ? `${containerName} ` : '');
+    const sheet = css `
+		/* # Hide below: the value names the breakpoint you hide BELOW */
+
+		:host([hide-below="md"]) {
+			@container ${container}(max-width: ${smMax}) { display: none !important; }
+		}
+
+		:host([hide-below="lg"]) {
+			@container ${container}(max-width: ${mdMax}) { display: none !important; }
+		}
+
+
+		/* # Hide above */
+
+		:host([hide-above="sm"]) {
+			@container ${container}(min-width: ${mdMin}) { display: none !important; }
+		}
+
+		:host([hide-above="md"]) {
+			@container ${container}(min-width: ${lgMin}) { display: none !important; }
+		}
+	`;
+    sheets.set(key, sheet);
+    return sheet;
+}
+//# sourceMappingURL=visibility-mixin.styles.js.map

package/dist/utilities/visibility-mixin.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-mixin.styles.js","sourceRoot":"","sources":["../../src/utilities/visibility-mixin.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,yEAAyE;AACzE,6EAA6E;AAC7E,MAAM,MAAM,GAAG,IAAI,GAAG,EAAqB,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAC,aAAsB;IACtD,MAAM,GAAG,GAAG,aAAa,IAAI,EAAE,CAAC;IAChC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAE1B,MAAM,SAAS,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,GAAG,CAAA;;;;gBAIF,SAAS,eAAe,KAAK;;;;gBAI7B,SAAS,eAAe,KAAK;;;;;;;gBAO7B,SAAS,eAAe,KAAK;;;;gBAI7B,SAAS,eAAe,KAAK;;EAE3C,CAAC;IAEF,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nldd/design-system",
-  "version": "0.8.85",
+  "version": "0.8.87",
   "description": "Design System voor Nederlandse Digitale Dienst",
   "type": "module",
   "main": "dist/components/components.js",
@@ -455,6 +455,8 @@
     "./styles/variables": "./dist/css/variables.css",
     "./styles/tokens": "./dist/css/tokens.css",
     "./styles/fouc": "./dist/css/fouc.css",
+    "./favicon.svg": "./dist/favicon.svg",
+    "./touch-icon.png": "./dist/touch-icon.png",
     "./breakpoints": {
       "types": "./dist/assets/styles/breakpoints.d.ts",
       "default": "./dist/assets/styles/breakpoints.js"
@@ -478,8 +480,9 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "npm run build:styles && npm run validate:styles && npm run validate:host-styles && npm run build:components",
+    "build": "npm run build:styles && npm run build:assets && npm run validate:styles && npm run validate:host-styles && npm run build:components",
     "build:styles": "rm -rf dist/css dist/fonts && mkdir -p dist/css dist/fonts && cp src/assets/styles/variables.css src/assets/styles/colors.generated.css src/assets/styles/rijksoverheid-fonts.css src/assets/styles/document-reset.css src/assets/styles/fouc.css dist/css/ && cp src/components/content/rich-text/rich-text.css src/components/forms/form/form.css src/components/forms/form-section/form-section.css dist/css/ && printf '@import \"./rijksoverheid-fonts.css\";\\n@import \"./variables.css\";\\n@import \"./document-reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global.css && printf '@import \"./variables.css\";\\n@import \"./document-reset.css\";\\n@import \"./rich-text.css\";\\n@import \"./form-section.css\";\\n@import \"./form.css\";\\n@import \"./fouc.css\";\\n' > dist/css/global-system-font.css && printf '@import \"./rijksoverheid-fonts.css\";\\n@import \"./variables.css\";\\n' > dist/css/tokens.css && cp src/assets/fonts/*.woff2 dist/fonts/",
+    "build:assets": "mkdir -p dist && cp src/assets/favicon/favicon.svg src/assets/favicon/touch-icon.png dist/",
     "generate:colors": "node scripts/generate-colors.js",
     "generate:component-reference": "node scripts/generate-component-reference.js",
     "generate:cem": "cem analyze && npm run generate:vue-types",

package/dist/components/visibility-mixin-vbfhyo7f.js

@@ -1,104 +0,0 @@
-import { t as __decorate } from "./decorate-lwt_OrAG.js";
-import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
-import { property } from "lit/decorators.js";
-//#region src/utilities/visibility-mixin.ts
-function resolveHideBelow(value) {
-	if (value === "md") return breakpoints.smMax;
-	if (value === "lg") return breakpoints.mdMax;
-	if (value === "sm") return null;
-	return value;
-}
-function resolveHideAbove(value) {
-	if (value === "sm") return breakpoints.mdMin;
-	if (value === "md") return breakpoints.lgMin;
-	if (value === "lg") return null;
-	return value;
-}
-/**
-* The open edges resolve to null, so the attribute is written but nothing ever
-* hides. That reads like a working value, and the name invites it: `hide-below`
-* names the breakpoint you hide BELOW, so "hide it at sm" comes out as
-* `hide-below="md"` and `hide-below="sm"` does nothing at all. Say so once,
-* rather than let it look applied.
-*/
-function warnNoOp(host, attribute, value, resolved, openEdge, edgeLabel) {
-	if (value !== openEdge || resolved !== null) return;
-	console.warn(`[${host.localName}] ${attribute}="${openEdge}" never hides anything: there is no breakpoint ${edgeLabel}. The value names the breakpoint you hide below, so the smallest one that hides is "${attribute === "hide-below" ? "md" : "sm"}". Leave the attribute off if you meant "always visible".`);
-}
-/**
-* Adds `hide-below` and `hide-above` attributes that toggle visibility based
-* on the inline-size of an ancestor CSS container.
-*
-* Without a `containerName` argument the generated rule is an anonymous
-* `@container (…)` query — it matches the nearest ancestor that declares
-* `container-type: inline-size`. Pass a name to target a specific container
-* (e.g. `'cells-container'` for cells inside `nldd-list`, which sets that
-* name inline on its host as a Safari shadow-DOM workaround).
-*
-* Values are either a named breakpoint — `sm` / `md` / `lg` — or a CSS length
-* (e.g. '320px', '20rem'). Named values resolve to the standard breakpoint
-* thresholds: `hide-below` uses the breakpoint's lower bound (e.g.
-* `hide-below="lg"` hides in sm+md and shows in lg), `hide-above` its upper
-* bound; the open edges (below sm, above lg) are no-ops. Container queries can't
-* read CSS variables in their conditions, so the query rule is generated at
-* runtime and injected as a <style> element in the component's shadow root,
-* wrapped in `:host { @container <name>? (…) { display: none !important; } }`
-* (nested form — the flattened `@container { :host { … } }` is unreliable in
-* Safari).
-*
-* @mixin VisibilityMixin
-*
-* @attr {string} hide-below - Hides the element below this breakpoint: `sm` | `md` | `lg`, or a CSS length. The value names the breakpoint you hide BELOW, so `hide-below="md"` is hidden in sm and visible from md up. `sm` is the open edge and never hides (DEV-warns).
-* @attr {string} hide-above - Hides the element above this breakpoint: `sm` | `md` | `lg`, or a CSS length. `hide-above="sm"` is hidden in md and lg. `lg` is the open edge and never hides (DEV-warns).
-*
-* @example
-* ```ts
-* // Cell inside nldd-list — target the named cells-container
-* class NLDDTextCell extends VisibilityMixin(LitElement, 'cells-container') { … }
-*
-* // Other component — fall back to the nearest unnamed container
-* class SomeComponent extends VisibilityMixin(LitElement) { … }
-* ```
-*/
-function VisibilityMixin(Base, containerName) {
-	class WithVisibility extends Base {
-		updated(changed) {
-			super.updated(changed);
-			if (changed.has("hideBelow") || changed.has("hideAbove")) this._updateVisibilityStyle();
-		}
-		_updateVisibilityStyle() {
-			if (!this.shadowRoot) return;
-			const containerPrefix = containerName ? `${containerName} ` : "";
-			const rules = [];
-			const below = this.hideBelow ? resolveHideBelow(this.hideBelow) : null;
-			warnNoOp(this, "hide-below", this.hideBelow, below, "sm", "below sm");
-			if (below) rules.push(`:host { @container ${containerPrefix}(max-width: ${below}) { display: none !important; } }`);
-			const above = this.hideAbove ? resolveHideAbove(this.hideAbove) : null;
-			warnNoOp(this, "hide-above", this.hideAbove, above, "lg", "above lg");
-			if (above) rules.push(`:host { @container ${containerPrefix}(min-width: ${above}) { display: none !important; } }`);
-			if (rules.length === 0) {
-				this._visibilityStyle?.remove();
-				this._visibilityStyle = void 0;
-				return;
-			}
-			if (!this._visibilityStyle) {
-				this._visibilityStyle = document.createElement("style");
-				this.shadowRoot.appendChild(this._visibilityStyle);
-			}
-			this._visibilityStyle.textContent = rules.join("\n");
-		}
-	}
-	__decorate([property({
-		type: String,
-		reflect: true,
-		attribute: "hide-below"
-	})], WithVisibility.prototype, "hideBelow", void 0);
-	__decorate([property({
-		type: String,
-		reflect: true,
-		attribute: "hide-above"
-	})], WithVisibility.prototype, "hideAbove", void 0);
-	return WithVisibility;
-}
-//#endregion
-export { VisibilityMixin as t };