@politiet/sheriff-web-components 2.13.1 → 2.14.0

package/dist/sds-search/sds-search.component.js

@@ -0,0 +1,345 @@
+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;
+};
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { SDSElement } from '../utils/sds-element';
+import { SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';
+import { styles } from './sds-search.styles';
+import '../sds-textfield/sds-textfield';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+/**
+ * A search field composed of an `sds-textfield` and `sds-button`.
+ *
+ * The field uses `type="search"`, so its input exposes the `searchbox` role and
+ * assistive technology announces it as a search field.
+ *
+ * The element is form-associated. Its `name` and value are submitted with the
+ * surrounding `<form>`, and the form's reset restores the initial value.
+ * `required`, `minlength`, `maxlength` and `pattern` are forwarded to the inner input, and its
+ * validity is mirrored on the host, so the field takes part in form validation like a native input.
+ *
+ * Emits a cancelable `search` event (detail: `{ value }`) when the button is
+ * pressed or the user presses Enter while the field is focused. Like a form's `submit`
+ * event, it is only emitted once the field passes validation (unless the form has
+ * `novalidate`). Unless the event is cancelled, the surrounding form (if any) is then submitted.
+ *
+ * A custom action control can be supplied through the `button` slot.
+ * A slotted control owns its own behaviour (click, `disabled`, form submission);
+ * Enter in the field still emits `search` and submits the form.
+ *
+ * @fires search - `CustomEvent<SDSSearchDetail>` on submit. Cancel it to prevent form submission.
+ * @fires input - When the value of the field changes.
+ * @fires change - When the value of the field has changed and the field loses focus.
+ * @fires select - When text in the field is selected.
+ * @fires keydown - `KeyboardEvent` on key presses in the field. Cancelling Enter prevents `search`.
+ * @fires focus - `FocusEvent` when focus moves into the component. Moving between the field and the button does not fire.
+ * @fires blur - `FocusEvent` when focus leaves the component. Moving between the field and the button does not fire.
+ * @fires invalid - When `checkValidity()`, `reportValidity()` or form submission finds the field invalid.
+ * @slot label - Rich content for the field's label. Takes precedence over the `label` property.
+ * @slot button - Optional replacement for the default icon button.
+ */
+export class SDSSearchComponent extends SDSEventDispatcherMixin(SDSFormControlMixin(SDSElement)) {
+    constructor() {
+        super();
+        this.value = '';
+        /** Hides the label visually while keeping it as the field's accessible name. */
+        this.hideLabel = false;
+        this.size = 'md';
+        this.buttonLabel = 'Søk';
+        this.buttonVariant = 'primary';
+        this.required = false;
+        this._defaultValue = '';
+        this._customValidityMessage = '';
+        // The browser does not dispatch focusin/focusout on the host
+        // when focus moves within the shadow tree.
+        // `relatedTarget` is set to the host when it moves to/from slotted content.
+        this._handleFocusIn = (event) => {
+            if (!this._isOwnNode(event.relatedTarget)) {
+                this.dispatchEvent(new FocusEvent('focus', { composed: true, relatedTarget: event.relatedTarget }));
+            }
+        };
+        this._handleFocusOut = (event) => {
+            if (!this._isOwnNode(event.relatedTarget)) {
+                this.dispatchEvent(new FocusEvent('blur', { composed: true, relatedTarget: event.relatedTarget }));
+            }
+        };
+        /** Stops `focus`/`blur` from the inner controls, both synthetic and native. The host emits its own. */
+        this._stopChildEvent = (event) => {
+            event.stopImmediatePropagation();
+        };
+        this._reemitChildEvent = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchSheriffEvent(event.type);
+        };
+        this._handleInput = (event) => {
+            event.stopImmediatePropagation();
+            // Synced before re-emitting so `event.target.value` is current in listeners, like native `input`.
+            const target = event.target;
+            if (!!target && 'value' in target && typeof target.value === 'string') {
+                this.value = target.value;
+            }
+            else {
+                this.value = '';
+            }
+            this.updateValidity();
+            this.dispatchSheriffEvent('input');
+        };
+        this._handleButtonClick = () => {
+            this._submit();
+        };
+        this._handleKeydown = (event) => {
+            event.stopImmediatePropagation();
+            // Cancelling the re-emitted event also cancels the textfield's, so neither submits.
+            if (!this.dispatchKeyboardEvent('keydown', event)) {
+                event.preventDefault();
+                return;
+            }
+            // Enter that confirms an IME composition is not a submit, matching native implicit submission.
+            if (event.key !== 'Enter' || event.isComposing) {
+                return;
+            }
+            // Suppress the textfield's own Enter handling so `search` fires once.
+            event.preventDefault();
+            this._submit();
+        };
+        this.addEventListener('focusin', this._handleFocusIn);
+        this.addEventListener('focusout', this._handleFocusOut);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._defaultValue = this.value;
+        this.internals.setFormValue(this.value);
+        // Re-align when the field reflows (e.g. help text wraps on narrow widths).
+        const resizeObserver = new ResizeObserver(() => this._alignButtonToInput());
+        this._resizeObserver = resizeObserver;
+        void this.updateComplete.then(() => {
+            if (this._resizeObserver === resizeObserver && this._field) {
+                resizeObserver.observe(this._field);
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this.value);
+        }
+        // The inner input applies new constraints and values when the textfield renders.
+        void this._field?.updateComplete.then(() => this.updateValidity());
+        const onlyValueChanged = changedProperties.size === 1 && changedProperties.has('value');
+        if (onlyValueChanged) {
+            return;
+        }
+        this._alignButtonToInput();
+    }
+    /** Mirrors the inner input's validity on the host, which is the element the form validates. */
+    updateValidity() {
+        const field = this._field;
+        const control = field?.control;
+        if (!field || !control) {
+            return;
+        }
+        field.setCustomValidity(this._customValidityMessage);
+        this.internals.setValidity(control.validity, control.validationMessage, control);
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        this._customValidityMessage = message;
+        this.updateValidity();
+    }
+    select() {
+        this._field?.select();
+    }
+    get selectionStart() {
+        return this._field?.selectionStart ?? null;
+    }
+    set selectionStart(value) {
+        if (this._field) {
+            this._field.selectionStart = value;
+        }
+    }
+    get selectionEnd() {
+        return this._field?.selectionEnd ?? null;
+    }
+    set selectionEnd(value) {
+        if (this._field) {
+            this._field.selectionEnd = value;
+        }
+    }
+    setSelectionRange(start, end, direction) {
+        this._field?.setSelectionRange(start, end, direction);
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+    }
+    /**
+     * Keeps the button aligned with the input row regardless of a stacked label,
+     * help text (including when it wraps) or an error message below the input, by
+     * shifting the button down by the input's offset within the field.
+     */
+    async _alignButtonToInput() {
+        const field = this._field;
+        const buttonCol = this._buttonCol;
+        if (!field || !buttonCol) {
+            return;
+        }
+        await field.updateComplete;
+        const input = field.control;
+        if (!input) {
+            return;
+        }
+        const offset = input.getBoundingClientRect().top - field.getBoundingClientRect().top;
+        buttonCol.style.marginBlockStart = offset > 0 ? `${offset}px` : '';
+    }
+    /** Emits `search` and, unless it is cancelled, submits the surrounding form. */
+    _submit() {
+        if (this.disabled) {
+            return;
+        }
+        // Like a form's `submit` event, `search` only fires for a valid field. `novalidate` opts out, as for the form.
+        if (!this.form?.noValidate && !this.reportValidity()) {
+            return;
+        }
+        const shouldContinue = this.dispatchSheriffEvent('search', { value: this.value });
+        if (shouldContinue) {
+            this.form?.requestSubmit();
+        }
+    }
+    /** Whether `node` is the host, its light DOM content or part of its shadow tree. */
+    _isOwnNode(node) {
+        return node instanceof Node && (node === this || this.contains(node) || Boolean(this.shadowRoot?.contains(node)));
+    }
+    _renderField() {
+        return html `
+			<sds-textfield
+				class="sds-search__field"
+				type="search"
+				size="${this.size ?? 'md'}"
+				.value="${this.value}"
+				?hide-label="${this.hideLabel}"
+				placeholder="${ifDefined(this.placeholder)}"
+				help-text="${ifDefined(this.helpText)}"
+				error-message="${ifDefined(this.errorMessage)}"
+				?disabled="${this.disabled}"
+				?readonly="${this.readOnly}"
+				autocomplete="${ifDefined(this.autocomplete)}"
+				?required="${this.required}"
+				minlength="${ifDefined(this.minlength)}"
+				maxlength="${ifDefined(this.maxlength)}"
+				pattern="${ifDefined(this.pattern)}"
+				@input="${this._handleInput}"
+				@change="${this._reemitChildEvent}"
+				@select="${this._reemitChildEvent}"
+				@keydown="${this._handleKeydown}"
+				@focus="${this._stopChildEvent}"
+				@blur="${this._stopChildEvent}"
+			>
+				<slot name="label" slot="label">${this.label}</slot>
+			</sds-textfield>
+		`;
+    }
+    _renderButtonColumn() {
+        return html `
+			<div class="sds-search__button-col">
+				<slot name="button">
+					<sds-button
+						class="sds-search__button"
+						icon
+						type="button"
+						size="${this.size ?? 'md'}"
+						variant="${this.buttonVariant}"
+						label="${this.buttonLabel}"
+						?disabled="${this.disabled}"
+						@click="${this._handleButtonClick}"
+						@focus="${this._stopChildEvent}"
+						@blur="${this._stopChildEvent}"
+					>
+						<sds-icon name="search-material-outlined" size="${this.size}"></sds-icon>
+					</sds-button>
+				</slot>
+			</div>
+		`;
+    }
+    render() {
+        return html `<div class="sds-search">${this._renderField()} ${this._renderButtonColumn()}</div>`;
+    }
+}
+SDSSearchComponent.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSSearchComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSearchComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-label', reflect: true })
+], SDSSearchComponent.prototype, "hideLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSearchComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text', reflect: true })
+], SDSSearchComponent.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSSearchComponent.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSearchComponent.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-label', reflect: true })
+], SDSSearchComponent.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-variant', reflect: true })
+], SDSSearchComponent.prototype, "buttonVariant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSearchComponent.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSSearchComponent.prototype, "required", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSSearchComponent.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSSearchComponent.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSearchComponent.prototype, "pattern", void 0);
+__decorate([
+    query('.sds-search__field')
+], SDSSearchComponent.prototype, "_field", void 0);
+__decorate([
+    query('.sds-search__button-col')
+], SDSSearchComponent.prototype, "_buttonCol", void 0);
+//# sourceMappingURL=sds-search.component.js.map

package/dist/sds-search/sds-search.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-search.component.js","sourceRoot":"","sources":["../../src/sds-search/sds-search.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { SDSElement } from '../utils/sds-element';\nimport { SDSEventDispatcherMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\nimport { styles } from './sds-search.styles';\nimport { SDS_SIZES, SDS_VARIANTS } from '../types';\n\nimport '../sds-textfield/sds-textfield';\nimport type { SDSTextField, SDSTextFieldProps } from '../sds-textfield/sds-textfield';\nimport '../sds-button/sds-button';\nimport '../sds-icon/sds-icon';\n\ntype SearchSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype ButtonVariant = SDS_VARIANTS;\n\n/** Detail payload dispatched with the `search` event. */\nexport interface SDSSearchDetail {\n\tvalue: string;\n}\n\nexport interface SDSSearchProps extends SDSFormControlAttributes {\n\tvalue?: string;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tsize?: SearchSize;\n\t'button-label'?: string;\n\t'button-variant'?: ButtonVariant;\n\tautocomplete?: SDSTextFieldProps['autocomplete'];\n\trequired?: boolean;\n\tminlength?: number;\n\tmaxlength?: number;\n\tpattern?: string;\n}\n\n/**\n * A search field composed of an `sds-textfield` and `sds-button`.\n *\n * The field uses `type=\"search\"`, so its input exposes the `searchbox` role and\n * assistive technology announces it as a search field.\n *\n * The element is form-associated. Its `name` and value are submitted with the\n * surrounding `<form>`, and the form's reset restores the initial value.\n * `required`, `minlength`, `maxlength` and `pattern` are forwarded to the inner input, and its\n * validity is mirrored on the host, so the field takes part in form validation like a native input.\n *\n * Emits a cancelable `search` event (detail: `{ value }`) when the button is\n * pressed or the user presses Enter while the field is focused. Like a form's `submit`\n * event, it is only emitted once the field passes validation (unless the form has\n * `novalidate`). Unless the event is cancelled, the surrounding form (if any) is then submitted.\n *\n * A custom action control can be supplied through the `button` slot.\n * A slotted control owns its own behaviour (click, `disabled`, form submission);\n * Enter in the field still emits `search` and submits the form.\n *\n * @fires search - `CustomEvent<SDSSearchDetail>` on submit. Cancel it to prevent form submission.\n * @fires input - When the value of the field changes.\n * @fires change - When the value of the field has changed and the field loses focus.\n * @fires select - When text in the field is selected.\n * @fires keydown - `KeyboardEvent` on key presses in the field. Cancelling Enter prevents `search`.\n * @fires focus - `FocusEvent` when focus moves into the component. Moving between the field and the button does not fire.\n * @fires blur - `FocusEvent` when focus leaves the component. Moving between the field and the button does not fire.\n * @fires invalid - When `checkValidity()`, `reportValidity()` or form submission finds the field invalid.\n * @slot label - Rich content for the field's label. Takes precedence over the `label` property.\n * @slot button - Optional replacement for the default icon button.\n */\nexport class SDSSearchComponent extends SDSEventDispatcherMixin(SDSFormControlMixin(SDSElement)) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value: string = '';\n\t@property({ type: String, reflect: true }) label?: string;\n\t/** Hides the label visually while keeping it as the field's accessible name. */\n\t@property({ type: Boolean, attribute: 'hide-label', reflect: true })\n\thideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true })\n\thelpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true })\n\terrorMessage?: string;\n\t@property({ type: String, reflect: true }) size: SearchSize = 'md';\n\t@property({ type: String, attribute: 'button-label', reflect: true })\n\tbuttonLabel: string = 'Søk';\n\t@property({ type: String, attribute: 'button-variant', reflect: true })\n\tbuttonVariant: ButtonVariant = 'primary';\n\t@property({ type: String, reflect: true }) autocomplete?: SDSSearchProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\n\t@query('.sds-search__field') private _field?: SDSTextField;\n\t@query('.sds-search__button-col') private _buttonCol?: HTMLElement;\n\n\tprivate _resizeObserver?: ResizeObserver;\n\tprivate _defaultValue = '';\n\tprivate _customValidityMessage = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('focusin', this._handleFocusIn);\n\t\tthis.addEventListener('focusout', this._handleFocusOut);\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value;\n\t\tthis.internals.setFormValue(this.value);\n\t\t// Re-align when the field reflows (e.g. help text wraps on narrow widths).\n\t\tconst resizeObserver = new ResizeObserver(() => this._alignButtonToInput());\n\t\tthis._resizeObserver = resizeObserver;\n\t\tvoid this.updateComplete.then(() => {\n\t\t\tif (this._resizeObserver === resizeObserver && this._field) {\n\t\t\t\tresizeObserver.observe(this._field);\n\t\t\t}\n\t\t});\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis._resizeObserver?.disconnect();\n\t\tthis._resizeObserver = undefined;\n\t}\n\n\toverride updated(changedProperties: PropertyValues): void {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t\t// The inner input applies new constraints and values when the textfield renders.\n\t\tvoid this._field?.updateComplete.then(() => this.updateValidity());\n\t\tconst onlyValueChanged = changedProperties.size === 1 && changedProperties.has('value');\n\t\tif (onlyValueChanged) {\n\t\t\treturn;\n\t\t}\n\t\tthis._alignButtonToInput();\n\t}\n\n\t/** Mirrors the inner input's validity on the host, which is the element the form validates. */\n\toverride updateValidity(): void {\n\t\tconst field = this._field;\n\t\tconst control = field?.control;\n\t\tif (!field || !control) {\n\t\t\treturn;\n\t\t}\n\t\tfield.setCustomValidity(this._customValidityMessage);\n\t\tthis.internals.setValidity(control.validity, control.validationMessage, control);\n\t}\n\n\tget validity(): ValidityState {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage(): string {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate(): boolean {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis._customValidityMessage = message;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tthis._field?.select();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this._field?.selectionStart ?? null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this._field) {\n\t\t\tthis._field.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this._field?.selectionEnd ?? null;\n\t}\n\n\tset selectionEnd(value: number | null) {\n\t\tif (this._field) {\n\t\t\tthis._field.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tthis._field?.setSelectionRange(start, end, direction);\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.value = this._defaultValue;\n\t}\n\n\tformStateRestoreCallback(state: string | File | FormData | null): void {\n\t\tif (typeof state === 'string') {\n\t\t\tthis.value = state;\n\t\t}\n\t}\n\n\t/**\n\t * Keeps the button aligned with the input row regardless of a stacked label,\n\t * help text (including when it wraps) or an error message below the input, by\n\t * shifting the button down by the input's offset within the field.\n\t */\n\tprivate async _alignButtonToInput(): Promise<void> {\n\t\tconst field = this._field;\n\t\tconst buttonCol = this._buttonCol;\n\t\tif (!field || !buttonCol) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait field.updateComplete;\n\n\t\tconst input = field.control;\n\t\tif (!input) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst offset = input.getBoundingClientRect().top - field.getBoundingClientRect().top;\n\t\tbuttonCol.style.marginBlockStart = offset > 0 ? `${offset}px` : '';\n\t}\n\n\t/** Emits `search` and, unless it is cancelled, submits the surrounding form. */\n\tprivate _submit(): void {\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\t// Like a form's `submit` event, `search` only fires for a valid field. `novalidate` opts out, as for the form.\n\t\tif (!this.form?.noValidate && !this.reportValidity()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst shouldContinue = this.dispatchSheriffEvent<SDSSearchDetail>('search', { value: this.value });\n\t\tif (shouldContinue) {\n\t\t\tthis.form?.requestSubmit();\n\t\t}\n\t}\n\n\t/** Whether `node` is the host, its light DOM content or part of its shadow tree. */\n\tprivate _isOwnNode(node: EventTarget | null): boolean {\n\t\treturn node instanceof Node && (node === this || this.contains(node) || Boolean(this.shadowRoot?.contains(node)));\n\t}\n\n\t// The browser does not dispatch focusin/focusout on the host\n\t// when focus moves within the shadow tree.\n\t// `relatedTarget` is set to the host when it moves to/from slotted content.\n\tprivate readonly _handleFocusIn = (event: FocusEvent) => {\n\t\tif (!this._isOwnNode(event.relatedTarget)) {\n\t\t\tthis.dispatchEvent(new FocusEvent('focus', { composed: true, relatedTarget: event.relatedTarget }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocusOut = (event: FocusEvent) => {\n\t\tif (!this._isOwnNode(event.relatedTarget)) {\n\t\t\tthis.dispatchEvent(new FocusEvent('blur', { composed: true, relatedTarget: event.relatedTarget }));\n\t\t}\n\t};\n\n\t/** Stops `focus`/`blur` from the inner controls, both synthetic and native. The host emits its own. */\n\tprivate readonly _stopChildEvent = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t};\n\n\tprivate readonly _reemitChildEvent = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleInput = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\t// Synced before re-emitting so `event.target.value` is current in listeners, like native `input`.\n\t\tconst target = event.target;\n\t\tif (!!target && 'value' in target && typeof target.value === 'string') {\n\t\t\tthis.value = target.value;\n\t\t} else {\n\t\t\tthis.value = '';\n\t\t}\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('input');\n\t};\n\n\tprivate readonly _handleButtonClick = () => {\n\t\tthis._submit();\n\t};\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\t// Cancelling the re-emitted event also cancels the textfield's, so neither submits.\n\t\tif (!this.dispatchKeyboardEvent('keydown', event)) {\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\t\t// Enter that confirms an IME composition is not a submit, matching native implicit submission.\n\t\tif (event.key !== 'Enter' || event.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\t// Suppress the textfield's own Enter handling so `search` fires once.\n\t\tevent.preventDefault();\n\t\tthis._submit();\n\t};\n\n\tprivate _renderField() {\n\t\treturn html`\n\t\t\t<sds-textfield\n\t\t\t\tclass=\"sds-search__field\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize=\"${this.size ?? 'md'}\"\n\t\t\t\t.value=\"${this.value}\"\n\t\t\t\t?hide-label=\"${this.hideLabel}\"\n\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\thelp-text=\"${ifDefined(this.helpText)}\"\n\t\t\t\terror-message=\"${ifDefined(this.errorMessage)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete)}\"\n\t\t\t\t?required=\"${this.required}\"\n\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t@input=\"${this._handleInput}\"\n\t\t\t\t@change=\"${this._reemitChildEvent}\"\n\t\t\t\t@select=\"${this._reemitChildEvent}\"\n\t\t\t\t@keydown=\"${this._handleKeydown}\"\n\t\t\t\t@focus=\"${this._stopChildEvent}\"\n\t\t\t\t@blur=\"${this._stopChildEvent}\"\n\t\t\t>\n\t\t\t\t<slot name=\"label\" slot=\"label\">${this.label}</slot>\n\t\t\t</sds-textfield>\n\t\t`;\n\t}\n\n\tprivate _renderButtonColumn() {\n\t\treturn html`\n\t\t\t<div class=\"sds-search__button-col\">\n\t\t\t\t<slot name=\"button\">\n\t\t\t\t\t<sds-button\n\t\t\t\t\t\tclass=\"sds-search__button\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"${this.size ?? 'md'}\"\n\t\t\t\t\t\tvariant=\"${this.buttonVariant}\"\n\t\t\t\t\t\tlabel=\"${this.buttonLabel}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t@click=\"${this._handleButtonClick}\"\n\t\t\t\t\t\t@focus=\"${this._stopChildEvent}\"\n\t\t\t\t\t\t@blur=\"${this._stopChildEvent}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<sds-icon name=\"search-material-outlined\" size=\"${this.size}\"></sds-icon>\n\t\t\t\t\t</sds-button>\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\toverride render() {\n\t\treturn html`<div class=\"sds-search\">${this._renderField()} ${this._renderButtonColumn()}</div>`;\n\t}\n}\n"]}

package/dist/sds-search/sds-search.d.ts

@@ -0,0 +1,13 @@
+import { SDSSearchComponent } from './sds-search.component';
+import '../sds-textfield/sds-textfield';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+export type { SDSSearchProps, SDSSearchDetail } from './sds-search.component';
+export declare class SDSSearch extends SDSSearchComponent {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-search': SDSSearch;
+    }
+}
+//# sourceMappingURL=sds-search.d.ts.map

package/dist/sds-search/sds-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-search.d.ts","sourceRoot":"","sources":["../../src/sds-search/sds-search.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,gCAAgC,CAAC;AACxC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9E,qBACa,SAAU,SAAQ,kBAAkB;CAAG;AAEpD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/sds-search/sds-search.js

@@ -0,0 +1,18 @@
+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;
+};
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { SDSSearchComponent } from './sds-search.component';
+import '../sds-textfield/sds-textfield';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+let SDSSearch = class SDSSearch extends SDSSearchComponent {
+};
+SDSSearch = __decorate([
+    guardedCustomElement('sds-search')
+], SDSSearch);
+export { SDSSearch };
+//# sourceMappingURL=sds-search.js.map

package/dist/sds-search/sds-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-search.js","sourceRoot":"","sources":["../../src/sds-search/sds-search.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,gCAAgC,CAAC;AACxC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAKvB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,kBAAkB;CAAG,CAAA;AAAvC,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAA8B","sourcesContent":["import { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSSearchComponent } from './sds-search.component';\n\nimport '../sds-textfield/sds-textfield';\nimport '../sds-button/sds-button';\nimport '../sds-icon/sds-icon';\n\nexport type { SDSSearchProps, SDSSearchDetail } from './sds-search.component';\n\n@guardedCustomElement('sds-search')\nexport class SDSSearch extends SDSSearchComponent {}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-search': SDSSearch;\n\t}\n}\n"]}

package/dist/sds-search/sds-search.styles.d.ts

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

package/dist/sds-search/sds-search.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-search.styles.d.ts","sourceRoot":"","sources":["../../src/sds-search/sds-search.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAuElB,CAAC"}

package/dist/sds-search/sds-search.styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+export const styles = css `
+	/*
+	 * The search controls radius and border of inner button and textfield.
+	 */
+	:host {
+		--_sds-search-radius: var(--sds-search-radius, var(--sds-radius-sm));
+		--_sds-search-border-width: var(--sds-search-border-width, var(--sds-border-sm));
+
+		display: block;
+		text-align: start;
+	}
+
+	.sds-search {
+		display: flex;
+		/* Align to the top; the button is nudged down to the input row in JS so a
+		   stacked label, help text, or an error message never drags it out of line. */
+		align-items: flex-start;
+		inline-size: 100%;
+	}
+
+	/*
+	 * The field keeps its rounded corners on the inline-start side and squares the
+	 * edge that meets the button; the button mirrors it.
+	 */
+	.sds-search__field {
+		flex: 1 1 auto;
+		/* Allow the field to shrink below its intrinsic min-width inside flex. */
+		min-inline-size: 0;
+		/* Let the surrounding container govern the width instead of the
+		   textfield's default 60ch cap. */
+		--sds-textfield-input-max-width: none;
+		--sds-textfield-border-width: var(--_sds-search-border-width);
+		--sds-textfield-border-radius: var(--_sds-search-radius) 0 0 var(--_sds-search-radius);
+	}
+
+	.sds-search__button,
+	::slotted([slot='button']) {
+		--sds-button-border-width: var(--_sds-search-border-width);
+		--sds-button-radius: 0 var(--_sds-search-radius) var(--_sds-search-radius) 0;
+	}
+
+	.sds-search__button-col {
+		display: flex;
+		flex-direction: column;
+		/* Keep the button at its intrinsic size instead of stretching it. */
+		align-items: flex-start;
+		flex: 0 0 auto;
+		/* Overlap the borders so the field and button share a single border. */
+		margin-inline-start: calc(-1 * var(--_sds-search-border-width));
+	}
+
+	/* Raise whichever control is focused so its focus outline is painted on
+	   top of the neighbouring control and never clipped by it. */
+	.sds-search__field:focus-within,
+	.sds-search__button-col:focus-within {
+		position: relative;
+		z-index: 1;
+	}
+
+	/*
+	 * border-radius is physical, so mirror the rounded corners for RTL. Logical
+	 * layout (DOM order, logical margins) already flips on its own.
+	 */
+	:host(:dir(rtl)) .sds-search__field {
+		--sds-textfield-border-radius: 0 var(--_sds-search-radius) var(--_sds-search-radius) 0;
+	}
+
+	:host(:dir(rtl)) .sds-search__button,
+	:host(:dir(rtl)) ::slotted([slot='button']) {
+		--sds-button-radius: var(--_sds-search-radius) 0 0 var(--_sds-search-radius);
+	}
+`;
+//# sourceMappingURL=sds-search.styles.js.map

package/dist/sds-search/sds-search.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-search.styles.js","sourceRoot":"","sources":["../../src/sds-search/sds-search.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t/*\n\t * The search controls radius and border of inner button and textfield.\n\t */\n\t:host {\n\t\t--_sds-search-radius: var(--sds-search-radius, var(--sds-radius-sm));\n\t\t--_sds-search-border-width: var(--sds-search-border-width, var(--sds-border-sm));\n\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-search {\n\t\tdisplay: flex;\n\t\t/* Align to the top; the button is nudged down to the input row in JS so a\n\t\t   stacked label, help text, or an error message never drags it out of line. */\n\t\talign-items: flex-start;\n\t\tinline-size: 100%;\n\t}\n\n\t/*\n\t * The field keeps its rounded corners on the inline-start side and squares the\n\t * edge that meets the button; the button mirrors it.\n\t */\n\t.sds-search__field {\n\t\tflex: 1 1 auto;\n\t\t/* Allow the field to shrink below its intrinsic min-width inside flex. */\n\t\tmin-inline-size: 0;\n\t\t/* Let the surrounding container govern the width instead of the\n\t\t   textfield's default 60ch cap. */\n\t\t--sds-textfield-input-max-width: none;\n\t\t--sds-textfield-border-width: var(--_sds-search-border-width);\n\t\t--sds-textfield-border-radius: var(--_sds-search-radius) 0 0 var(--_sds-search-radius);\n\t}\n\n\t.sds-search__button,\n\t::slotted([slot='button']) {\n\t\t--sds-button-border-width: var(--_sds-search-border-width);\n\t\t--sds-button-radius: 0 var(--_sds-search-radius) var(--_sds-search-radius) 0;\n\t}\n\n\t.sds-search__button-col {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\t/* Keep the button at its intrinsic size instead of stretching it. */\n\t\talign-items: flex-start;\n\t\tflex: 0 0 auto;\n\t\t/* Overlap the borders so the field and button share a single border. */\n\t\tmargin-inline-start: calc(-1 * var(--_sds-search-border-width));\n\t}\n\n\t/* Raise whichever control is focused so its focus outline is painted on\n\t   top of the neighbouring control and never clipped by it. */\n\t.sds-search__field:focus-within,\n\t.sds-search__button-col:focus-within {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t/*\n\t * border-radius is physical, so mirror the rounded corners for RTL. Logical\n\t * layout (DOM order, logical margins) already flips on its own.\n\t */\n\t:host(:dir(rtl)) .sds-search__field {\n\t\t--sds-textfield-border-radius: 0 var(--_sds-search-radius) var(--_sds-search-radius) 0;\n\t}\n\n\t:host(:dir(rtl)) .sds-search__button,\n\t:host(:dir(rtl)) ::slotted([slot='button']) {\n\t\t--sds-button-radius: var(--_sds-search-radius) 0 0 var(--_sds-search-radius);\n\t}\n`;\n"]}

package/dist/sds-textfield/sds-textfield.component.d.ts

@@ -8,6 +8,7 @@ export interface SDSTextFieldProps extends SDSFormControlAttributes {
     autocomplete?: AutocompleteTypes;
     'error-message'?: string;
     'help-text'?: string;
+    'hide-label'?: boolean;
     label?: string;
     maxlength?: number;
     minlength?: number;
@@ -26,6 +27,8 @@ export declare class SDSTextFieldComponent extends SDSTextFieldComponent_base {
     type: SDSTextFieldProps['type'];
     value?: SDSTextFieldProps['value'];
     label?: SDSTextFieldProps['label'];
+    /** Hides the label visually while keeping it as the input's accessible name. */
+    hideLabel: SDSTextFieldProps['hide-label'];
     placeholder?: SDSTextFieldProps['placeholder'];
     helpText?: SDSTextFieldProps['help-text'];
     errorMessage?: SDSTextFieldProps['error-message'];
@@ -38,7 +41,7 @@ export declare class SDSTextFieldComponent extends SDSTextFieldComponent_base {
     max?: SDSTextFieldProps['max'];
     size: SDSTextFieldProps['size'];
     private hasIcon;
-    /** Tracks whether the `label` slot has assigned content. */
+    /** Tracks whether the `label` slot renders any content, including content forwarded through another slot. */
     private _hasSlottedLabel;
     control: HTMLInputElement;
     private _defaultValue;

package/dist/sds-textfield/sds-textfield.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.component.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sds-textfield.component.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.component.ts"],"names":[],"mappings":"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"}

package/dist/sds-textfield/sds-textfield.component.js

@@ -9,25 +9,31 @@ import { SDSElement } from '../utils/sds-element';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';
 import { styles } from './sds-textfield.styles';
 export class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(SDSElement))) {
     constructor() {
         super(...arguments);
         this.type = 'text';
+        /** Hides the label visually while keeping it as the input's accessible name. */
+        this.hideLabel = false;
         this.required = false;
         this.size = 'md';
         // State
         this.hasIcon = false;
-        /** Tracks whether the `label` slot has assigned content. */
+        /** Tracks whether the `label` slot renders any content, including content forwarded through another slot. */
         this._hasSlottedLabel = false;
         this._defaultValue = null;
         this.handleSlotChange = (e) => {
             const slot = e.target;
             this.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
         };
+        // Flattened, so a slot forwarded from a wrapping component (like sds-search) counts by what it renders,
+        // not as content in itself. `currentTarget`, because slotchange from a forwarded slot bubbles to this one.
         this._handleLabelSlotChange = (e) => {
-            this._hasSlottedLabel = e.target.assignedNodes().length > 0;
+            const slot = e.currentTarget;
+            this._hasSlottedLabel = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
         };
         this._handleInputChange = (event) => {
             event.stopImmediatePropagation();
@@ -87,7 +93,9 @@ export class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventD
         super.updated(changedProperties);
         if (changedProperties.has('value')) {
             this.internals.setFormValue(this.value ?? '');
-            if (this.control) {
+            // Writing the value the user just typed back to the input counts as a script change and
+            // clears its user-edit flag, which turns off the minlength/maxlength checks.
+            if (this.control && this.control.value !== (this.value ?? '')) {
                 this.control.value = this.value ?? '';
             }
         }
@@ -153,9 +161,13 @@ export class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventD
         };
         const describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;
         const showLabel = this._hasSlottedLabel || Boolean(this.label);
+        const labelClasses = {
+            'sds-textfield__label': true,
+            'sds-textfield__label--hidden': Boolean(this.hideLabel),
+        };
         return html `
 			<div class="${classMap(textfieldClasses)}">
-				<label for="sds-textfield" class="sds-textfield__label" ?hidden="${!showLabel}">
+				<label for="sds-textfield" class="${classMap(labelClasses)}" ?hidden="${!showLabel}">
 					${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}
 					<slot name="label" @slotchange="${this._handleLabelSlotChange}">${this.label}</slot>
 				</label>
@@ -169,7 +181,7 @@ export class SDSTextFieldComponent extends SDSDelegateInteractionMixin(SDSEventD
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
 						placeholder="${ifDefined(this.placeholder)}"
-						.value="${this.value ?? ''}"
+						.value="${live(this.value ?? '')}"
 						name="${ifDefined(this.name)}"
 						autocomplete="${ifDefined(this.autocomplete)}"
 						?required="${this.required}"
@@ -205,6 +217,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], SDSTextFieldComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-label', reflect: true })
+], SDSTextFieldComponent.prototype, "hideLabel", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSTextFieldComponent.prototype, "placeholder", void 0);