@nldd/design-system 0.8.78 → 0.8.80

package/dist/components/inputs/file-field/file-field.js

@@ -0,0 +1,246 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst File Field Component (Lit + TypeScript)
+ *
+ * A file picker that reads as one control: an nldd-button flush in the corner of
+ * a tinted surface, the chosen file next to it, and a dismiss button to clear it
+ * again. It wraps a hidden native `<input type="file">`, which is what makes the
+ * picker open at all — a file dialog only opens from a user gesture on a real
+ * input.
+ *
+ * The surface deliberately does not look like an input field. A border with
+ * field semantics promises you can type into it; here you can only press a
+ * button, so it uses button and surface colors instead of
+ * `--semantics-input-fields-*`. The button keeps its own tinted background and
+ * therefore sits a shade darker in the surface, which is what marks it as the
+ * thing to press.
+ *
+ * Several files are summarized, not listed: "3 bestanden" with a single cross
+ * that clears all of them. Every pick replaces the whole FileList, and rebuilding
+ * it to add or drop one file means going through DataTransfer, which does not
+ * deduplicate (even the same File object twice yields two entries) — and a File
+ * has no id, so deduplicating would come down to guessing from name, size and
+ * last-modified. A list with a cross per file would promise an edit the platform
+ * does not support. A page that does want to show the files renders its own list
+ * from the `File[]` in the change event.
+ *
+ * @element nldd-file-field
+ * @attr {string} size - Field size: 'md' (default) | 'sm'. Set automatically by nldd-form-field.
+ * @attr {string} accept - Comma-separated list of accepted file types, forwarded to the input (e.g. ".pdf,image/*")
+ * @attr {boolean} multiple - Allows choosing more than one file
+ * @attr {string} accessible-label - Accessible label forwarded to the inner input. Set automatically by nldd-form-field.
+ * @attr {string} input-id - Sets the id on the native input. Set automatically by nldd-form-field.
+ * @attr {string} error-message-ids - Ids for aria-describedby on the inner input. Set automatically by nldd-form-field.
+ * @attr {boolean} valid - Marks the field as valid; shows a check icon on the right, like nldd-dropdown
+ * @attr {boolean} invalid - Marks the field as invalid; shows an alert icon on the right, like nldd-dropdown
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string} name - Name for form submission
+ * @attr {boolean} required - Marks the field required (invalid while no file is chosen)
+ * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
+ *
+ * @prop {File[]} files - The chosen files. Read-only: browsers forbid setting a file input's value, so there is no `value` attribute and no way to preselect a file.
+ *
+ * @fires change - When the chosen files change, including a clear; detail: { files: File[] }
+ */
+import { LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { FormAssociated } from '../../../utilities/form-associated-mixin.js';
+import { reflectNonDefault } from '../../../utilities/reflect-non-default.js';
+import { fileFieldStyles } from './file-field.styles.js';
+import { fileFieldTemplate } from './file-field.template.js';
+import { nlddFileFieldTranslations } from './file-field.i18n.js';
+let NLDDFileField = class NLDDFileField extends FormAssociated(LitElement) {
+    constructor() {
+        super(...arguments);
+        // Property order matches the story controls.
+        this.size = 'md';
+        this.accept = '';
+        this.multiple = false;
+        /** Accessible label forwarded to the inner <input>. Set automatically by nldd-form-field. */
+        this.accessibleLabel = '';
+        this.inputId = '';
+        this.errorMessageIds = '';
+        this.valid = false;
+        this.invalid = false;
+        this.disabled = false;
+        this.name = '';
+        this.required = false;
+        this.translations = {};
+        /** The chosen files. Mirrors the input's FileList; there is no setter, because
+         *  browsers refuse a programmatic file selection. */
+        this._files = [];
+    }
+    get files() {
+        return this._files;
+    }
+    /** @internal */
+    _t(key, vars) {
+        let text = this.translations[key] ?? nlddFileFieldTranslations[key];
+        if (vars) {
+            for (const [name, value] of Object.entries(vars)) {
+                text = text.split(`{${name}}`).join(String(value));
+            }
+        }
+        return text;
+    }
+    /** @internal */
+    _chooseLabel() {
+        return this.multiple
+            ? this._t('components.file-field.to-choose-files-action')
+            : this._t('components.file-field.to-choose-file-action');
+    }
+    /**
+     * The native input carries the field's label but is hidden, so it is not in
+     * the accessibility tree. The button is what you tab to, and on its own it
+     * only says "choose a file" — for which field is the part that matters.
+     *
+     * @internal
+     */
+    _chooseAccessibleLabel() {
+        if (!this.accessibleLabel)
+            return '';
+        return `${this._chooseLabel()}, ${this.accessibleLabel}`;
+    }
+    /** @internal */
+    _valueLabel() {
+        if (this._files.length === 0)
+            return this._t('components.file-field.no-file-chosen-text');
+        if (this._files.length === 1)
+            return this._files[0].name;
+        return this._t('components.file-field.file-count-text', { count: this._files.length });
+    }
+    willUpdate(changed) {
+        if (changed.has('required'))
+            this._updateValidity();
+        if (changed.has('accessibleLabel'))
+            this.internals.ariaLabel = this.accessibleLabel || null;
+    }
+    /** @internal */
+    _handleChoose() {
+        this._input?.click();
+    }
+    /** @internal */
+    _handleInputChange(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this._files = input.files ? Array.from(input.files) : [];
+        this._commit();
+    }
+    /** @internal */
+    _handleClear() {
+        // Clearing the input as well as the array: the element keeps the previous
+        // FileList otherwise, so choosing the same file again would fire no change.
+        if (this._input)
+            this._input.value = '';
+        this._files = [];
+        this._commit();
+        // Focus would land on the body when the cross unmounts with the last file.
+        void this.updateComplete.then(() => this.focus());
+    }
+    _commit() {
+        this.commitFormValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { files: this._files },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // — Form participation ————————————————————————————————————————————————————
+    /** Submit one entry per file under `name`, the way a native multiple file
+     *  input does. A single file is submitted as itself, so a form with one file
+     *  reads back as a File rather than as FormData wrapping one. */
+    formValue() {
+        if (!this.name || this._files.length === 0)
+            return null;
+        if (this._files.length === 1)
+            return this._files[0];
+        const data = new FormData();
+        for (const file of this._files)
+            data.append(this.name, file);
+        return data;
+    }
+    commitFormValue() {
+        super.commitFormValue();
+        this._updateValidity();
+    }
+    /** A required field without a file is invalid (valueMissing). */
+    _updateValidity() {
+        if (this.required && this._files.length === 0) {
+            this.internals.setValidity({ valueMissing: true }, this._t('components.file-field.required-error-text'), this._input ?? this);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    formResetCallback() {
+        if (this._input)
+            this._input.value = '';
+        this._files = [];
+        this.commitFormValue();
+    }
+    /**
+     * Delegates focus to the choose button rather than the hidden input: an input
+     * that is `display: none` cannot take focus, and the button is what a user
+     * sees as the control.
+     */
+    focus(options) {
+        const button = this.shadowRoot?.querySelector('nldd-button');
+        button?.focus(options);
+    }
+    render() {
+        return fileFieldTemplate(this);
+    }
+};
+NLDDFileField.styles = fileFieldStyles;
+__decorate([
+    property({ reflect: true, converter: reflectNonDefault('md') })
+], NLDDFileField.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDFileField.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDFileField.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDFileField.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-id' })
+], NLDDFileField.prototype, "inputId", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message-ids' })
+], NLDDFileField.prototype, "errorMessageIds", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDFileField.prototype, "valid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDFileField.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDFileField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDFileField.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDFileField.prototype, "required", void 0);
+__decorate([
+    property({ type: Object })
+], NLDDFileField.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDFileField.prototype, "_files", void 0);
+__decorate([
+    query('.file-field__input')
+], NLDDFileField.prototype, "_input", void 0);
+NLDDFileField = __decorate([
+    customElement('nldd-file-field')
+], NLDDFileField);
+export { NLDDFileField };
+//# sourceMappingURL=file-field.js.map

package/dist/components/inputs/file-field/file-field.js.map

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

package/dist/components/inputs/file-field/file-field.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const fileFieldStyles: import("lit").CSSResult;
+//# sourceMappingURL=file-field.styles.d.ts.map

package/dist/components/inputs/file-field/file-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBAkI3B,CAAC"}

package/dist/components/inputs/file-field/file-field.styles.js

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+import { inheritedTextReset } from '../../../assets/styles/shadow-resets.js';
+export const fileFieldStyles = css `
+	:host {
+		box-sizing: border-box;
+	}
+
+
+	/* # Host */
+
+	:host {
+		--_width: 100%;
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_inline-padding: var(--semantics-controls-md-inline-padding);
+		--_value-color: var(--components-file-field-value-color);
+		--_text-font: var(--semantics-input-fields-md-text-font);
+		--_clear-button-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2);
+		--_validation-icon-area-padding-right: var(--_inline-padding);
+		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+
+		${inheritedTextReset}
+		display: block;
+		width: var(--_width);
+		max-width: 100%;
+		min-width: 0;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
+		pointer-events: none;
+	}
+
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_inline-padding: var(--semantics-controls-sm-inline-padding);
+		--_text-font: var(--semantics-input-fields-sm-text-font);
+		--_clear-button-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2);
+		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
+	}
+
+
+	/* # Block */
+
+	.file-field {
+		box-sizing: border-box;
+		display: flex;
+		border-radius: var(--_corner-radius);
+		box-shadow: inset 0 0 0 var(--components-file-field-highlight-border-width) var(--components-file-field-highlight-border-color);
+		background-color: var(--components-file-field-background-color);
+		width: 100%;
+		min-width: 0;
+		min-height: var(--_min-size);
+		align-items: center;
+	}
+
+
+	/* # Elements */
+
+	.file-field__input {
+		display: none;
+	}
+
+	.file-field__choose-button {
+		display: flex;
+		flex-shrink: 0;
+		align-self: stretch;
+	}
+
+	.file-field__value {
+		box-sizing: border-box;
+		min-width: 0;
+		padding-right: var(--_inline-padding);
+		padding-left: var(--_inline-padding);
+		flex-grow: 1;
+		color: var(--_value-color);
+		font: var(--_text-font);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.file-field__value.is-empty {
+		--_value-color: var(--components-file-field-is-empty-value-color);
+	}
+
+	.file-field__clear-button {
+		display: flex;
+		flex-shrink: 0;
+		padding-right: var(--_clear-button-padding-right);
+	}
+
+	.file-field__clear-button:not(:last-child) {
+		padding-right: var(--primitives-space-0);
+	}
+
+	.file-field__validation-icon-area {
+		display: flex;
+		height: 100%;
+		flex-shrink: 0;
+		padding-right: var(--_validation-icon-area-padding-right);
+		align-items: center;
+		justify-content: center;
+	}
+
+	:host([valid]) .file-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-valid-icon-color);
+	}
+
+	:host([invalid]) .file-field__validation-icon-area {
+		color: var(--semantics-input-fields-is-invalid-icon-color);
+	}
+
+	.file-field__validation-icon {
+		width: var(--_validation-icon-size);
+		height: var(--_validation-icon-size);
+	}
+
+
+	/* # High contrast */
+
+	@media (forced-colors: active) {
+		.file-field {
+			border: var(--components-file-field-highlight-border-width) solid CanvasText;
+		}
+	}
+`;
+//# sourceMappingURL=file-field.styles.js.map

package/dist/components/inputs/file-field/file-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-field.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;IAmB9B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GrB,CAAC"}

package/dist/components/inputs/file-field/file-field.template.d.ts

@@ -0,0 +1,7 @@
+import { TemplateResult } from 'lit';
+import type { NLDDFileField } from './file-field.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../content/icon/icon.js';
+export declare function fileFieldTemplate(component: NLDDFileField): TemplateResult;
+//# sourceMappingURL=file-field.template.d.ts.map

package/dist/components/inputs/file-field/file-field.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAepC,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CA6C1E"}

package/dist/components/inputs/file-field/file-field.template.js

@@ -0,0 +1,63 @@
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../content/icon/icon.js';
+function renderValidationIcon(component) {
+    if (!component.invalid && !component.valid)
+        return nothing;
+    return html `
+		<div class="file-field__validation-icon-area">
+			<nldd-icon class="file-field__validation-icon"
+				name=${component.invalid ? 'invalid' : 'valid'}
+				aria-hidden="true"
+			></nldd-icon>
+		</div>
+	`;
+}
+export function fileFieldTemplate(component) {
+    const buttonSize = component.size === 'sm' ? 'xs' : 'sm';
+    const hasFiles = component.files.length > 0;
+    return html `
+		<div class="file-field">
+			<input class="file-field__input"
+				type="file"
+				id=${component.inputId || nothing}
+				accept=${component.accept || nothing}
+				?multiple=${component.multiple}
+				?disabled=${component.disabled}
+				?required=${component.required}
+				aria-label=${component.accessibleLabel || nothing}
+				aria-describedby=${component.errorMessageIds || nothing}
+				@change=${component._handleInputChange}
+			>
+			<div class="file-field__choose-button">
+				<nldd-button
+					variant="neutral-tinted"
+					size=${component.size}
+					text=${component._chooseLabel()}
+					accessible-label=${component._chooseAccessibleLabel() || nothing}
+					?disabled=${component.disabled}
+					@click=${component._handleChoose}
+				></nldd-button>
+			</div>
+			<span class=${classMap({ 'file-field__value': true, 'is-empty': !hasFiles })}>
+				${component._valueLabel()}
+			</span>
+			${hasFiles ? html `
+				<div class="file-field__clear-button">
+					<nldd-icon-button
+						variant="neutral-transparent"
+						size=${buttonSize}
+						icon="dismiss"
+						text=${component._t('components.file-field.clear-action')}
+						?disabled=${component.disabled}
+						@click=${component._handleClear}
+					></nldd-icon-button>
+				</div>
+			` : nothing}
+			${renderValidationIcon(component)}
+		</div>
+	`;
+}
+//# sourceMappingURL=file-field.template.js.map

package/dist/components/inputs/file-field/file-field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,SAAS,oBAAoB,CAAC,SAAwB;IACrD,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK;QAAE,OAAO,OAAO,CAAC;IAE3D,OAAO,IAAI,CAAA;;;WAGD,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;;;;EAIhD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACzD,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5C,OAAO,IAAI,CAAA;;;;SAIH,SAAS,CAAC,OAAO,IAAI,OAAO;aACxB,SAAS,CAAC,MAAM,IAAI,OAAO;gBACxB,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;gBAClB,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,eAAe,IAAI,OAAO;uBAC9B,SAAS,CAAC,eAAe,IAAI,OAAO;cAC7C,SAAS,CAAC,kBAAkB;;;;;YAK9B,SAAS,CAAC,IAAI;YACd,SAAS,CAAC,YAAY,EAAE;wBACZ,SAAS,CAAC,sBAAsB,EAAE,IAAI,OAAO;iBACpD,SAAS,CAAC,QAAQ;cACrB,SAAS,CAAC,aAAa;;;iBAGpB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;MACzE,SAAS,CAAC,WAAW,EAAE;;KAExB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;;;aAIP,UAAU;;aAEV,SAAS,CAAC,EAAE,CAAC,oCAAoC,CAAC;kBAC7C,SAAS,CAAC,QAAQ;eACrB,SAAS,CAAC,YAAY;;;IAGjC,CAAC,CAAC,CAAC,OAAO;KACT,oBAAoB,CAAC,SAAS,CAAC;;EAElC,CAAC;AACH,CAAC"}

package/dist/components/inputs/radio-button/radio-button.d.ts

@@ -14,6 +14,10 @@
  * @element nldd-radio-button
  * @attr {boolean} checked - Checked state
  * @attr {boolean} disabled - Disabled state
+ * @attr {boolean} decorative - Renders the shape without the input: no focus, no
+ *   name/value, nothing announced. For a control that owns the state elsewhere,
+ *   such as a list row that is itself the radio; putting a real input in there
+ *   would nest a control inside a control.
  * @attr {boolean} required - Required state
  * @attr {string} name - Radio group name for form submission; ties the buttons of one group together
  * @attr {string} value - Value submitted with the form when this radio button is checked
@@ -29,6 +33,7 @@ export declare class NLDDRadioButton extends NLDDRadioButton_base {
     static styles: import("lit").CSSResult;
     private _initialChecked;
     checked: boolean;
+    decorative: boolean;
     disabled: boolean;
     required: boolean;
     name: string;

package/dist/components/inputs/radio-button/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;;AAI7F,qBACa,eAAgB,SAAQ,oBAA0B;IAE9D,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,CAAC,eAAe,CAAS;IAGhC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,eAAe,SAAM;IAEZ,YAAY,IAAI,IAAI;IAKpB,SAAS,IAAI,SAAS;IAI/B,iBAAiB,IAAI,IAAI;IAKzB,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAI/D,MAAM,IAAI,IAAI;IAQd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW3B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,6CAA6C,CAAC;;AAI7F,qBACa,eAAgB,SAAQ,oBAA0B;IAE9D,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,CAAC,eAAe,CAAS;IAGhC,OAAO,UAAS;IAGhB,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,eAAe,SAAM;IAEZ,YAAY,IAAI,IAAI;IAKpB,SAAS,IAAI,SAAS;IAI/B,iBAAiB,IAAI,IAAI;IAKzB,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAI/D,MAAM,IAAI,IAAI;IAQd,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAW3B,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/dist/components/inputs/radio-button/radio-button.js

@@ -20,6 +20,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @element nldd-radio-button
  * @attr {boolean} checked - Checked state
  * @attr {boolean} disabled - Disabled state
+ * @attr {boolean} decorative - Renders the shape without the input: no focus, no
+ *   name/value, nothing announced. For a control that owns the state elsewhere,
+ *   such as a list row that is itself the radio; putting a real input in there
+ *   would nest a control inside a control.
  * @attr {boolean} required - Required state
  * @attr {string} name - Radio group name for form submission; ties the buttons of one group together
  * @attr {string} value - Value submitted with the form when this radio button is checked
@@ -38,6 +42,7 @@ let NLDDRadioButton = class NLDDRadioButton extends FormAssociated(LitElement) {
         super(...arguments);
         this._initialChecked = false;
         this.checked = false;
+        this.decorative = false;
         this.disabled = false;
         this.required = false;
         this.name = '';
@@ -83,6 +88,9 @@ NLDDRadioButton.styles = radioButtonStyles;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDRadioButton.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDRadioButton.prototype, "decorative", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDRadioButton.prototype, "disabled", void 0);

package/dist/components/inputs/radio-button/radio-button.js.map

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

package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAyG7B,CAAC"}
+{"version":3,"file":"radio-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAoH7B,CAAC"}

package/dist/components/inputs/radio-button/radio-button.styles.js

@@ -67,6 +67,17 @@ export const radioButtonStyles = css `
 		transform: translate(-50%, -50%) scale(1);
 	}
 
+	/* Decorative has no input to hang :checked on, so the state comes from the
+	   host attribute instead. */
+	:host([decorative][checked]) .radio-button__outer-shape {
+		border-color: var(--components-radio-button-is-selected-border-color);
+		background-color: var(--components-radio-button-is-selected-background-color);
+	}
+
+	:host([decorative][checked]) .radio-button__inner-shape {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
 	@media (hover: hover) {
 		.radio-button__input:hover:not(:disabled) ~ .radio-button__outer-shape {
 			border-color: var(--components-radio-button-is-hovered-border-color);

package/dist/components/inputs/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGnC,CAAC"}
+{"version":3,"file":"radio-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHnC,CAAC"}

package/dist/components/inputs/radio-button/radio-button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CAkB9E"}
+{"version":3,"file":"radio-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA4B9E"}

package/dist/components/inputs/radio-button/radio-button.template.js

@@ -1,5 +1,15 @@
 import { html, nothing } from 'lit';
 export function radioButtonTemplate(component) {
+    // Decorative: the shape only. Something else owns the interaction and the
+    // state — a whole row that is itself the control, say — and an input here
+    // would be a second control inside it.
+    if (component.decorative) {
+        return html `
+			<div class="radio-button__outer-shape" aria-hidden="true">
+				<div class="radio-button__inner-shape"></div>
+			</div>
+		`;
+    }
     return html `
 		<input class="radio-button__input"
 			type="radio"

package/dist/components/inputs/radio-button/radio-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,OAAO,IAAI,CAAA;;;cAGE,SAAS,CAAC,OAAO;eAChB,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ;UACvB,SAAS,CAAC,IAAI,IAAI,EAAE;WACnB,SAAS,CAAC,KAAK;gBACV,SAAS,CAAC,eAAe,IAAI,OAAO;aACvC,SAAS,CAAC,aAAa;;;;;;;EAOlC,CAAC;AACH,CAAC"}
+{"version":3,"file":"radio-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/radio-button/radio-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,0EAA0E;IAC1E,0EAA0E;IAC1E,uCAAuC;IACvC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;;;cAGE,SAAS,CAAC,OAAO;eAChB,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ;UACvB,SAAS,CAAC,IAAI,IAAI,EAAE;WACnB,SAAS,CAAC,KAAK;gBACV,SAAS,CAAC,eAAe,IAAI,OAAO;aACvC,SAAS,CAAC,aAAa;;;;;;;EAOlC,CAAC;AACH,CAAC"}

package/dist/components/inputs/text-editor/text-editor.caret.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-editor.caret.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-editor/text-editor.caret.ts"],"names":[],"mappings":"AAEA;;;;;;;aAOa;AACb,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAcrF"}
+{"version":3,"file":"text-editor.caret.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-editor/text-editor.caret.ts"],"names":[],"mappings":"AAEA;;;;;;;aAOa;AACb,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAmBrF"}

package/dist/components/inputs/text-editor/text-editor.caret.js

@@ -13,11 +13,17 @@ export function textCaretBox(dom) {
         return null;
     const pos = view.posAtDOM(dom);
     const line = view.state.doc.lineAt(pos);
+    // A widget that opens its line has no text before it to measure. Clamping to
+    // line.from would ask for the coords of the widget's own position, which sends
+    // CodeMirror right back into this coordsAt: the measure loop then never settles
+    // and spins a core for as long as the editor lives.
+    if (pos <= line.from)
+        return null;
     // coordsAtPos reads layout; when a widget's coordsAt is itself invoked during an
     // update/measure pass, CM forbids that reentrant read and throws. Fall back to the
     // caller's own rect in that case rather than letting the exception escape.
     try {
-        const coords = view.coordsAtPos(Math.max(line.from, pos - 1), 1);
+        const coords = view.coordsAtPos(pos - 1, 1);
         return coords ? { top: coords.top, bottom: coords.bottom } : null;
     }
     catch {

package/dist/components/inputs/text-editor/text-editor.caret.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-editor.caret.js","sourceRoot":"","sources":["../../../../src/components/inputs/text-editor/text-editor.caret.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;aAOa;AACb,MAAM,UAAU,YAAY,CAAC,GAAgB;IAC5C,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxC,iFAAiF;IACjF,mFAAmF;IACnF,2EAA2E;IAC3E,IAAI,CAAC;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACjE,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACnE,CAAC;IAAC,MAAM,CAAC;QACR,OAAO,IAAI,CAAC;IACb,CAAC;AACF,CAAC"}
+{"version":3,"file":"text-editor.caret.js","sourceRoot":"","sources":["../../../../src/components/inputs/text-editor/text-editor.caret.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;aAOa;AACb,MAAM,UAAU,YAAY,CAAC,GAAgB;IAC5C,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxC,6EAA6E;IAC7E,+EAA+E;IAC/E,gFAAgF;IAChF,oDAAoD;IACpD,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAClC,iFAAiF;IACjF,mFAAmF;IACnF,2EAA2E;IAC3E,IAAI,CAAC;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5C,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACnE,CAAC;IAAC,MAAM,CAAC;QACR,OAAO,IAAI,CAAC;IACb,CAAC;AACF,CAAC"}