@nldd/design-system 0.8.45 → 0.8.47

package/dist/components/content/code-viewer/code-viewer.styles.js

@@ -0,0 +1,89 @@
+import { css } from 'lit';
+export const codeViewerStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		--_corner-radius: var(--primitives-corner-radius-lg);
+		--_background-color: var(--semantics-surfaces-tinted-background-color);
+		--_block-padding: var(--primitives-space-16);
+		--_inline-padding: var(--primitives-space-16);
+		--_content-color: var(--semantics-content-color);
+		--_font: var(--primitives-font-monospace-sm-regular-snug);
+
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.code-viewer {
+		margin: 0;
+		border-radius: var(--_corner-radius);
+		background-color: var(--_background-color);
+		overflow-x: auto;
+		padding: var(--_block-padding) var(--_inline-padding);
+		color: var(--_content-color);
+		font: var(--_font);
+		white-space: pre;
+	}
+
+	:host([wrap]) .code-viewer {
+		overflow-x: visible;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	/* Lit reflects empty-string props as language=""; exclude that case */
+	:host([language]:not([language=""])) slot {
+		display: none;
+	}
+
+	.code__highlighted {
+		color: inherit;
+		font: inherit;
+	}
+
+
+	/* # Tokens */
+
+	.token.comment,
+	.token.prolog,
+	.token.doctype,
+	.token.cdata { color: var(--components-code-viewer-token-comment-color); font-style: italic; }
+	.token.punctuation { color: var(--components-code-viewer-token-punctuation-color); }
+	.token.namespace { opacity: 0.7; }
+	.token.keyword { color: var(--components-code-viewer-token-keyword-color); }
+	.token.string, .token.char { color: var(--components-code-viewer-token-string-color); }
+	.token.number { color: var(--components-code-viewer-token-number-color); }
+	.token.boolean { color: var(--components-code-viewer-token-boolean-color); }
+	.token.null { color: var(--components-code-viewer-token-null-color); }
+	.token.function { color: var(--components-code-viewer-token-function-color); }
+	.token.class-name { color: var(--components-code-viewer-token-class-color); }
+	.token.builtin { color: var(--components-code-viewer-token-builtin-color); }
+	.token.tag { color: var(--components-code-viewer-token-tag-color); }
+	.token.attr-name { color: var(--components-code-viewer-token-attr-name-color); }
+	.token.attr-value { color: var(--components-code-viewer-token-attr-value-color); }
+	.token.property { color: var(--components-code-viewer-token-property-color); }
+	.token.selector { color: var(--components-code-viewer-token-selector-color); }
+	.token.atrule { color: var(--components-code-viewer-token-atrule-color); }
+	.token.regex { color: var(--components-code-viewer-token-regex-color); }
+	.token.url { color: var(--components-code-viewer-token-url-color); }
+	.token.operator { color: var(--components-code-viewer-token-operator-color); }
+	.token.constant { color: var(--components-code-viewer-token-constant-color); }
+	.token.deleted { color: var(--components-code-viewer-token-deleted-color); }
+	.token.inserted { color: var(--components-code-viewer-token-inserted-color); }
+	.token.important { color: var(--components-code-viewer-token-important-color); font-weight: bold; }
+	.token.symbol { color: var(--components-code-viewer-token-symbol-color); }
+	.token.entity { color: var(--components-code-viewer-token-entity-color); }
+	.token.variable { color: var(--components-code-viewer-token-variable-color); }
+	.token.key { color: var(--components-code-viewer-token-property-color); }
+	.token.bold { font-weight: bold; }
+	.token.italic { font-style: italic; }
+`;
+//# sourceMappingURL=code-viewer.styles.js.map

package/dist/components/content/code-viewer/code-viewer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-viewer.styles.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFlC,CAAC"}

package/dist/components/content/code-viewer/code-viewer.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import type { NLDDCodeViewer } from './code-viewer.js';
+export declare function codeViewerTemplate(component: NLDDCodeViewer): TemplateResult;
+//# sourceMappingURL=code-viewer.template.d.ts.map

package/dist/components/content/code-viewer/code-viewer.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-viewer.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAgB5E"}

package/dist/components/content/{code/code.template.js → code-viewer/code-viewer.template.js}

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-export function codeTemplate(component) {
+export function codeViewerTemplate(component) {
     // `language` is interpolated into a class name. Lit's tagged template
     // literal escapes attribute values, so a malicious string can't break
     // out of the attribute — but it can still produce a wonky class name.
@@ -11,8 +11,8 @@ export function codeTemplate(component) {
     // Prism escapes HTML entities in its input (`<` → `&lt;`) before
     // wrapping tokens in spans, so the only HTML in the output is the
     // span scaffolding Prism itself emits. Safe by construction.
-    return html `<pre class="code"><slot @slotchange=${component._onSlotChange}></slot>${component.language && component._highlightedHtml
+    return html `<pre class="code-viewer"><slot @slotchange=${component._onSlotChange}></slot>${component.language && component._highlightedHtml
         ? html `<code class="code__highlighted language-${component.language}">${unsafeHTML(component._highlightedHtml)}</code>`
         : ''}</pre>`;
 }
-//# sourceMappingURL=code.template.js.map
+//# sourceMappingURL=code-viewer.template.js.map

package/dist/components/content/code-viewer/code-viewer.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-viewer.template.js","sourceRoot":"","sources":["../../../../src/components/content/code-viewer/code-viewer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,sEAAsE;IACtE,sEAAsE;IACtE,sEAAsE;IACtE,qEAAqE;IACrE,yBAAyB;IACzB,EAAE;IACF,oEAAoE;IACpE,iEAAiE;IACjE,kEAAkE;IAClE,6DAA6D;IAC7D,OAAO,IAAI,CAAA,8CAA8C,SAAS,CAAC,aAAa,WAC/E,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,gBAAgB;QAC/C,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS;QACvH,CAAC,CAAC,EACJ,QAAQ,CAAC;AACV,CAAC"}

package/dist/components/forms/form-field/form-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAkK3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBA+CnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAmDpC,CAAC"}
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAoK3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBA+CnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yBAmDpC,CAAC"}

package/dist/components/forms/form-field/form-field.styles.js

@@ -7,6 +7,8 @@ export const formFieldStyles = css `
 	/* # Host */
 
 	:host {
+		--_gap: calc(var(--primitives-space-10) / 2);
+
 		display: block;
 		container-type: inline-size;
 	}
@@ -21,7 +23,7 @@ export const formFieldStyles = css `
 	.form-field {
 		display: flex;
 		flex-direction: column;
-		gap: var(--components-form-field-gap);
+		gap: var(--_gap);
 	}
 
 	:host([label-alignment="left"]) .form-field,

package/dist/components/forms/form-field/form-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2BP,KAAK;;;;;;;;;;;;;;;;;;;;2BAoBL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;2BAQL,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;;;;;;;;;;;;;;;;;;2BAqBL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CzC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD1C,CAAC"}
+{"version":3,"file":"form-field.styles.js","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6BP,KAAK;;;;;;;;;;;;;;;;;;;;2BAoBL,KAAK;;;;;;;;;;;2BAWL,KAAK;;;;;;;;2BAQL,KAAK;;;;;;;;;;;;;;2BAcL,KAAK;;;;;;;;;;;;;;;;;;;;;2BAqBL,KAAK;;;;;;;;;2BASL,KAAK;;;;;;;2BAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CzC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD1C,CAAC"}