@politiet/sheriff-web-components 2.13.1 → 2.14.0

package/dist/sds-file-upload-item/sds-file-upload-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-item.js","sourceRoot":"","sources":["../../src/sds-file-upload-item/sds-file-upload-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSElement } from '../utils/sds-element';\nimport { formatBytes } from '../utils/format-bytes';\nimport { SDSEventDispatcherMixin } from '../mixins';\nimport { SheriffEvent } from '../types';\nimport { styles } from './sds-file-upload-item.styles';\nimport '../sds-button/sds-button';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport './assets/u-progress.js';\nimport type { SDSFileUpload } from '../sds-file-upload/sds-file-upload';\n\nexport interface SDSFileUploadItemProps {\n\tfile?: string;\n\t'size-in-bytes'?: number;\n\t'error-message'?: string;\n\tpreview?: string;\n\t'uploaded-percent'?: number;\n\t'uploaded-size-in-bytes'?: number;\n\tdisabled?: boolean;\n\tfor?: string;\n}\n\n@guardedCustomElement('sds-file-upload-item')\nexport class SDSFileUploadItem extends SDSEventDispatcherMixin(SDSElement) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) file?: string;\n\t@property({ type: Number, attribute: 'size-in-bytes', reflect: true }) sizeInBytes?: number;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: String, reflect: true }) preview?: string;\n\t@property({ type: Number, attribute: 'uploaded-percent', reflect: true }) uploadedPercent?: number;\n\t@property({ type: Number, attribute: 'uploaded-size-in-bytes', reflect: true }) uploadedSizeInBytes?: number;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\n\t/**\n\t * The `id` of the `sds-file-upload` this item belongs to. When set, pressing the\n\t * remove button removes the matching file from that upload (`removeFile`, or\n\t * `dismissRejected` for an item with an `error-message`) and removes this element from the DOM.\n\t * The `sds-remove` event still fires, and calling `preventDefault()` on it cancels both.\n\t */\n\t@property({ type: String, attribute: 'for', reflect: true }) htmlFor?: string;\n\n\t@query('.sds-file-upload-item__content-preview-image') private _previewImg?: HTMLImageElement;\n\t@query('.sds-file-upload-item__remove') private _removeButton?: HTMLElement;\n\n\t// Internal state\n\t@state() private _previewLoaded = false;\n\n\t// Lifecycle\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.internals.role = 'listitem';\n\t}\n\n\tprotected override willUpdate(changed: PropertyValues): void {\n\t\tif (changed.has('preview')) this._previewLoaded = false;\n\t}\n\n\tprotected override updated(changed: PropertyValues): void {\n\t\tif (!changed.has('preview')) return;\n\t\tconst img = this._previewImg;\n\t\tif (!this.preview || this.errorMessage || !img) return;\n\n\t\tconst src = img.src;\n\t\tconst markLoaded = () => {\n\t\t\tif (img.src === src) this._previewLoaded = true;\n\t\t};\n\t\tif (img.decode) {\n\t\t\timg.decode().then(markLoaded).catch(() => undefined);\n\t\t} else {\n\t\t\tmarkLoaded();\n\t\t}\n\t}\n\n\t// Public API\n\toverride focus(options?: FocusOptions): void {\n\t\tthis._removeButton?.focus(options);\n\t}\n\n\t// Event handlers\n\tprivate readonly _handleRemove = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t\tif (this.disabled) return;\n\t\tconst notCancelled = this.dispatchSheriffEvent('sds-remove');\n\t\tif (notCancelled) this._removeFromAssociatedUpload();\n\t};\n\n\t// Internal helpers\n\tprivate get _hasError(): boolean {\n\t\treturn Boolean(this.errorMessage);\n\t}\n\n\tprivate _removeFromAssociatedUpload(): void {\n\t\tif (!this.htmlFor) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst target = root.getElementById?.(this.htmlFor) ?? document.getElementById(this.htmlFor);\n\t\tif (!target || !('removeFile' in target) || !('dismissRejected' in target)) return;\n\n\t\tconst upload = target as SDSFileUpload;\n\t\tconst matches = (name: string, size: number): boolean => name === this.file && (this.sizeInBytes === undefined || size === this.sizeInBytes);\n\n\t\tif (this.errorMessage) {\n\t\t\tconst rejected = upload.rejectedFiles.find(({ file }) => matches(file.name, file.size));\n\t\t\tif (rejected) upload.dismissRejected(rejected.file);\n\t\t} else {\n\t\t\tconst file = upload.files.find((candidate) => matches(candidate.name, candidate.size));\n\t\t\tif (file) upload.removeFile(file);\n\t\t}\n\n\t\tthis.remove();\n\t}\n\n\t// Rendering\n\tprivate readonly _renderThumbnail = () =>\n\t\tthis.preview && !this._hasError\n\t\t\t? html`<span class=\"sds-file-upload-item__content-preview\" ?data-loaded=\"${this._previewLoaded}\">\n\t\t\t\t\t<img class=\"sds-file-upload-item__content-preview-image\" src=\"${this.preview}\" alt=\"\" />\n\t\t\t\t</span>`\n\t\t\t: html`<sds-icon\n\t\t\t\t\tclass=\"sds-file-upload-item__content-icon\"\n\t\t\t\t\tname=\"${this._hasError ? 'scan_delete-material-outlined' : 'draft-material-outlined'}\"\n\t\t\t\t\tsize=\"md\"\n\t\t\t\t></sds-icon>`;\n\n\tprivate readonly _renderFileData = () => {\n\t\tconst detail = this.sizeInBytes !== undefined ? formatBytes(this.sizeInBytes) : undefined;\n\n\t\treturn html`\n\t\t\t<span class=\"sds-file-upload-item__content-data\">\n\t\t\t\t<span class=\"sds-file-upload-item__content-file-name\">${this.file}</span>\n\t\t\t\t${this._hasError\n\t\t\t\t\t? html`<span class=\"sds-file-upload-item__content-file-error\">Feil ved opplasting</span>`\n\t\t\t\t\t: detail\n\t\t\t\t\t\t? html`<span class=\"sds-file-upload-item__content-file-detail\">${detail}</span>`\n\t\t\t\t\t\t: nothing}\n\t\t\t</span>\n\t\t`;\n\t};\n\n\tprivate readonly _renderRemoveButton = () => html`\n\t\t<sds-button\n\t\t\tclass=\"sds-file-upload-item__remove\"\n\t\t\ticon\n\t\t\tvariant=\"tertiary\"\n\t\t\tsize=\"sm\"\n\t\t\ttype=\"button\"\n\t\t\tlabel=\"${this.file ? `Fjern ${this.file}` : 'Fjern fil'}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t@click=\"${this._handleRemove}\"\n\t\t>\n\t\t\t<sds-icon name=\"delete-material-outlined\" size=\"md\"></sds-icon>\n\t\t</sds-button>\n\t`;\n\n\tprivate readonly _renderProgress = () => {\n\t\tconst percent = Math.max(0, Math.min(100, Math.round(this.uploadedPercent ?? 0)));\n\n\t\treturn html`\n\t\t\t<div class=\"sds-file-upload-item__progress\">\n\t\t\t\t<u-progress class=\"sds-file-upload-item__progress-track\" value=\"${percent}\" max=\"100\" aria-label=\"Laster opp ${this.file ?? ''}\"></u-progress>\n\t\t\t\t<div class=\"sds-file-upload-item__progress-meta\">\n\t\t\t\t\t${this.uploadedSizeInBytes !== undefined\n\t\t\t\t\t\t? html`<span class=\"sds-file-upload-item__progress-uploaded\">${formatBytes(this.uploadedSizeInBytes)}</span>`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t\t<span class=\"sds-file-upload-item__progress-percent\">${percent}%</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t};\n\n\tprivate readonly _renderErrorAlert = () => html`\n\t\t<sds-alert class=\"sds-file-upload-item__error-alert\" size=\"sm\" variant=\"secondary\" data-palette=\"danger\">\n\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t</sds-alert>\n\t`;\n\n\toverride render() {\n\t\tconst itemClasses = { 'sds-file-upload-item': true, 'sds-file-upload-item--error': this._hasError };\n\t\tconst isUploading = this.uploadedPercent !== undefined && !this._hasError;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(itemClasses)}\">\n\t\t\t\t<div class=\"sds-file-upload-item__row\">\n\t\t\t\t\t<div class=\"sds-file-upload-item__content\">\n\t\t\t\t\t\t${this._renderThumbnail()}\n\t\t\t\t\t\t${this._renderFileData()}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"sds-file-upload-item__actions\">\n\t\t\t\t\t\t<slot name=\"actions-end\"></slot>\n\t\t\t\t\t\t${this._renderRemoveButton()}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t${isUploading ? this._renderProgress() : nothing}\n\t\t\t</div>\n\t\t\t${this._hasError ? this._renderErrorAlert() : nothing}\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-file-upload-item': SDSFileUploadItem;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\t'sds-remove': SheriffEvent;\n\t}\n}\n"]}

package/dist/sds-file-upload-item/sds-file-upload-item.styles.d.ts

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

package/dist/sds-file-upload-item/sds-file-upload-item.styles.d.ts.map

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

package/dist/sds-file-upload-item/sds-file-upload-item.styles.js

@@ -0,0 +1,227 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_sds-file-upload-item-background: var(--sds-file-upload-item-background, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
+		--_sds-file-upload-item-border-color: var(--sds-file-upload-item-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
+		--_sds-file-upload-item-border-width: var(--sds-file-upload-item-border-width, var(--sds-border-sm));
+		--_sds-file-upload-item-border-radius: var(--sds-file-upload-item-border-radius, var(--sds-radius-md));
+		--_sds-file-upload-item-padding: var(--sds-file-upload-item-padding, var(--sds-spacing-3xs) var(--sds-spacing-xs));
+		--_sds-file-upload-item-gap: var(--sds-file-upload-item-gap, var(--sds-spacing-2xs));
+		--_sds-file-upload-item-actions-gap: var(--sds-file-upload-item-actions-gap, var(--sds-spacing-5xs));
+
+		--_sds-file-upload-item-content-gap: var(--sds-file-upload-item-content-gap, var(--sds-spacing-3xs));
+		--_sds-file-upload-item-content-data-gap: var(--sds-file-upload-item-content-data-gap, var(--sds-spacing-5xs));
+		--_sds-file-upload-item-content-icon-color: var(--sds-file-upload-item-content-icon-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
+		--_sds-file-upload-item-content-preview-size: var(--sds-file-upload-item-content-preview-size, var(--sds-spacing-lg));
+		--_sds-file-upload-item-content-preview-radius: var(--sds-file-upload-item-content-preview-radius, var(--sds-radius-xs));
+		--_sds-file-upload-item-content-preview-background: var(--sds-file-upload-item-content-preview-background, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
+		--_sds-file-upload-item-content-preview-highlight: var(--sds-file-upload-item-content-preview-highlight, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
+		--_sds-file-upload-item-content-preview-loading-duration: var(--sds-file-upload-item-content-preview-loading-duration, 5500ms);
+		--_sds-file-upload-item-content-file-name-font-size: var(--sds-file-upload-item-content-file-name-font-size, var(--sds-typography-body-md-desktop-font-size));
+		--_sds-file-upload-item-content-file-name-font-weight: var(--sds-file-upload-item-content-file-name-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-file-upload-item-content-file-name-line-height: var(--sds-file-upload-item-content-file-name-line-height, var(--sds-typography-body-md-desktop-line-height));
+		--_sds-file-upload-item-content-file-name-text-color: var(--sds-file-upload-item-content-file-name-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
+		--_sds-file-upload-item-content-file-detail-font-size: var(--sds-file-upload-item-content-file-detail-font-size, var(--sds-typography-detail-xs-desktop-font-size));
+		--_sds-file-upload-item-content-file-detail-font-weight: var(--sds-file-upload-item-content-file-detail-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));
+		--_sds-file-upload-item-content-file-detail-line-height: var(--sds-file-upload-item-content-file-detail-line-height, var(--sds-typography-detail-xs-desktop-line-height));
+		--_sds-file-upload-item-content-file-detail-color: var(--sds-file-upload-item-content-file-detail-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
+
+		--_sds-file-upload-item-progress-track-color: var(--sds-file-upload-item-progress-track-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
+		--_sds-file-upload-item-progress-value-color: var(--sds-file-upload-item-progress-value-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-file-upload-item-progress-height: var(--sds-file-upload-item-progress-height, 0.375rem);
+		--_sds-file-upload-item-progress-radius: var(--sds-file-upload-item-progress-radius, var(--sds-radius-full));
+		--_sds-file-upload-item-progress-gap: var(--sds-file-upload-item-progress-gap, var(--sds-spacing-4xs));
+		--_sds-file-upload-item-progress-spacing: var(--sds-file-upload-item-progress-spacing, var(--sds-spacing-2xs));
+
+		--_sds-file-upload-item-error-alert-spacing: var(--sds-file-upload-item-error-alert-spacing, var(--sds-spacing-3xs));
+
+		--_sds-file-upload-item-disabled-opacity: var(--sds-file-upload-item-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--_sds-file-upload-item-disabled-opacity);
+	}
+
+	:host([error-message]) {
+		--_sds-file-upload-item-border-color: var(--sds-file-upload-item-border-color, var(--sds-color-alert-danger-border-default));
+		--_sds-file-upload-item-content-icon-color: var(--sds-file-upload-item-content-icon-color, var(--sds-color-alert-danger-text-default));
+		--_sds-file-upload-item-content-file-detail-color: var(--sds-file-upload-item-content-file-detail-color, var(--sds-color-alert-danger-text-default));
+	}
+
+	.sds-file-upload-item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_sds-file-upload-item-progress-spacing);
+		padding: var(--_sds-file-upload-item-padding);
+		border: var(--_sds-file-upload-item-border-width) solid var(--_sds-file-upload-item-border-color);
+		border-radius: var(--_sds-file-upload-item-border-radius);
+		background: var(--_sds-file-upload-item-background);
+	}
+
+	.sds-file-upload-item__row {
+		display: flex;
+		align-items: center;
+		gap: var(--_sds-file-upload-item-gap);
+	}
+
+	.sds-file-upload-item__content {
+		display: flex;
+		flex-grow: 1;
+		min-width: 0;
+		align-items: center;
+		gap: var(--_sds-file-upload-item-content-gap);
+	}
+
+	.sds-file-upload-item__actions {
+		display: flex;
+		flex: 0 0 auto;
+		align-items: center;
+		gap: var(--_sds-file-upload-item-actions-gap);
+	}
+
+	.sds-file-upload-item__content-icon {
+		color: var(--_sds-file-upload-item-content-icon-color);
+	}
+
+	.sds-file-upload-item__content-preview {
+		position: relative;
+		flex: 0 0 auto;
+		width: var(--_sds-file-upload-item-content-preview-size);
+		height: var(--_sds-file-upload-item-content-preview-size);
+		border-radius: var(--_sds-file-upload-item-content-preview-radius);
+		overflow: hidden;
+		background-color: var(--_sds-file-upload-item-content-preview-background);
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background-color: var(--_sds-file-upload-item-content-preview-highlight);
+			opacity: 0;
+			will-change: opacity;
+			animation: sds-file-upload-item-preview-breathe var(--_sds-file-upload-item-content-preview-loading-duration) ease-in-out infinite;
+		}
+	}
+
+	.sds-file-upload-item__content-preview-image {
+		position: relative;
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.sds-file-upload-item__content-preview[data-loaded] {
+		background-color: transparent;
+
+		&::before {
+			content: none;
+		}
+	}
+
+	@keyframes sds-file-upload-item-preview-breathe {
+		0% 	{ opacity: 0.15; }
+		40% { opacity: 1; }
+		55% { opacity: 1; }
+		100%{ opacity: 0.15; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sds-file-upload-item__content-preview::before {
+			animation: none;
+			opacity: 0;
+		}
+	}
+
+	.sds-file-upload-item__content-data {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		gap: var(--_sds-file-upload-item-content-data-gap);
+	}
+
+	.sds-file-upload-item__content-file-name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: var(--_sds-file-upload-item-content-file-name-font-size);
+		font-weight: var(--_sds-file-upload-item-content-file-name-font-weight);
+		line-height: var(--_sds-file-upload-item-content-file-name-line-height);
+		color: var(--_sds-file-upload-item-content-file-name-text-color);
+	}
+
+	.sds-file-upload-item__content-file-detail {
+		font-size: var(--_sds-file-upload-item-content-file-detail-font-size);
+		font-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);
+		line-height: var(--_sds-file-upload-item-content-file-detail-line-height);
+		color: var(--_sds-file-upload-item-content-file-detail-color);
+	}
+
+	.sds-file-upload-item__content-file-error {
+		font-size: var(--_sds-file-upload-item-content-file-detail-font-size);
+		font-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);
+		line-height: var(--_sds-file-upload-item-content-file-detail-line-height);
+		color: var(--_sds-file-upload-item-content-file-detail-color);
+	}
+
+	.sds-file-upload-item__error-alert {
+		display: block;
+		margin-block-start: var(--_sds-file-upload-item-error-alert-spacing);
+	}
+
+	.sds-file-upload-item__progress {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_sds-file-upload-item-progress-gap);
+	}
+
+	/* The track is the <u-progress> host; the fill is its ::before (width + 0.2s transition come from u-progress). */
+	.sds-file-upload-item__progress-track {
+		display: block;
+		inline-size: 100%;
+		block-size: var(--_sds-file-upload-item-progress-height);
+		border: none;
+		border-radius: var(--_sds-file-upload-item-progress-radius);
+		background-color: var(--_sds-file-upload-item-progress-track-color);
+		overflow: hidden;
+	}
+
+	.sds-file-upload-item__progress-track::before {
+		border-radius: inherit;
+		background-color: var(--_sds-file-upload-item-progress-value-color);
+	}
+
+	.sds-file-upload-item__progress-meta {
+		display: flex;
+		gap: var(--_sds-file-upload-item-content-data-gap);
+		font-size: var(--_sds-file-upload-item-content-file-detail-font-size);
+		font-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);
+		line-height: var(--_sds-file-upload-item-content-file-detail-line-height);
+		color: var(--_sds-file-upload-item-content-file-detail-color);
+	}
+
+	.sds-file-upload-item__progress-percent {
+		margin-inline-start: auto;
+	}
+
+	sds-button {
+		--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));
+
+		&:hover {
+			--sds-button-text-color: var(--sds-color-action-hover, var(--sds-color-neutral-action-hover));
+			--sds-button-background-color: var(--sds-color-surface-hover, var(--sds-color-neutral-surface-hover));
+		}
+
+		&:active {
+			--sds-button-text-color: var(--sds-color-action-active, var(--sds-color-neutral-action-active));
+			--sds-button-background-color: var(--sds-color-surface-active, var(--sds-color-neutral-surface-active));
+		}
+	}
+`;
+//# sourceMappingURL=sds-file-upload-item.styles.js.map

package/dist/sds-file-upload-item/sds-file-upload-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-item.styles.js","sourceRoot":"","sources":["../../src/sds-file-upload-item/sds-file-upload-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgOxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-file-upload-item-background: var(--sds-file-upload-item-background, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-file-upload-item-border-color: var(--sds-file-upload-item-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-file-upload-item-border-width: var(--sds-file-upload-item-border-width, var(--sds-border-sm));\n\t\t--_sds-file-upload-item-border-radius: var(--sds-file-upload-item-border-radius, var(--sds-radius-md));\n\t\t--_sds-file-upload-item-padding: var(--sds-file-upload-item-padding, var(--sds-spacing-3xs) var(--sds-spacing-xs));\n\t\t--_sds-file-upload-item-gap: var(--sds-file-upload-item-gap, var(--sds-spacing-2xs));\n\t\t--_sds-file-upload-item-actions-gap: var(--sds-file-upload-item-actions-gap, var(--sds-spacing-5xs));\n\n\t\t--_sds-file-upload-item-content-gap: var(--sds-file-upload-item-content-gap, var(--sds-spacing-3xs));\n\t\t--_sds-file-upload-item-content-data-gap: var(--sds-file-upload-item-content-data-gap, var(--sds-spacing-5xs));\n\t\t--_sds-file-upload-item-content-icon-color: var(--sds-file-upload-item-content-icon-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-file-upload-item-content-preview-size: var(--sds-file-upload-item-content-preview-size, var(--sds-spacing-lg));\n\t\t--_sds-file-upload-item-content-preview-radius: var(--sds-file-upload-item-content-preview-radius, var(--sds-radius-xs));\n\t\t--_sds-file-upload-item-content-preview-background: var(--sds-file-upload-item-content-preview-background, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t--_sds-file-upload-item-content-preview-highlight: var(--sds-file-upload-item-content-preview-highlight, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-file-upload-item-content-preview-loading-duration: var(--sds-file-upload-item-content-preview-loading-duration, 5500ms);\n\t\t--_sds-file-upload-item-content-file-name-font-size: var(--sds-file-upload-item-content-file-name-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-file-upload-item-content-file-name-font-weight: var(--sds-file-upload-item-content-file-name-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-file-upload-item-content-file-name-line-height: var(--sds-file-upload-item-content-file-name-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-file-upload-item-content-file-name-text-color: var(--sds-file-upload-item-content-file-name-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-file-upload-item-content-file-detail-font-size: var(--sds-file-upload-item-content-file-detail-font-size, var(--sds-typography-detail-xs-desktop-font-size));\n\t\t--_sds-file-upload-item-content-file-detail-font-weight: var(--sds-file-upload-item-content-file-detail-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));\n\t\t--_sds-file-upload-item-content-file-detail-line-height: var(--sds-file-upload-item-content-file-detail-line-height, var(--sds-typography-detail-xs-desktop-line-height));\n\t\t--_sds-file-upload-item-content-file-detail-color: var(--sds-file-upload-item-content-file-detail-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\n\t\t--_sds-file-upload-item-progress-track-color: var(--sds-file-upload-item-progress-track-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t--_sds-file-upload-item-progress-value-color: var(--sds-file-upload-item-progress-value-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-file-upload-item-progress-height: var(--sds-file-upload-item-progress-height, 0.375rem);\n\t\t--_sds-file-upload-item-progress-radius: var(--sds-file-upload-item-progress-radius, var(--sds-radius-full));\n\t\t--_sds-file-upload-item-progress-gap: var(--sds-file-upload-item-progress-gap, var(--sds-spacing-4xs));\n\t\t--_sds-file-upload-item-progress-spacing: var(--sds-file-upload-item-progress-spacing, var(--sds-spacing-2xs));\n\n\t\t--_sds-file-upload-item-error-alert-spacing: var(--sds-file-upload-item-error-alert-spacing, var(--sds-spacing-3xs));\n\n\t\t--_sds-file-upload-item-disabled-opacity: var(--sds-file-upload-item-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tdisplay: block;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-file-upload-item-disabled-opacity);\n\t}\n\n\t:host([error-message]) {\n\t\t--_sds-file-upload-item-border-color: var(--sds-file-upload-item-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-file-upload-item-content-icon-color: var(--sds-file-upload-item-content-icon-color, var(--sds-color-alert-danger-text-default));\n\t\t--_sds-file-upload-item-content-file-detail-color: var(--sds-file-upload-item-content-file-detail-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-file-upload-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-file-upload-item-progress-spacing);\n\t\tpadding: var(--_sds-file-upload-item-padding);\n\t\tborder: var(--_sds-file-upload-item-border-width) solid var(--_sds-file-upload-item-border-color);\n\t\tborder-radius: var(--_sds-file-upload-item-border-radius);\n\t\tbackground: var(--_sds-file-upload-item-background);\n\t}\n\n\t.sds-file-upload-item__row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--_sds-file-upload-item-gap);\n\t}\n\n\t.sds-file-upload-item__content {\n\t\tdisplay: flex;\n\t\tflex-grow: 1;\n\t\tmin-width: 0;\n\t\talign-items: center;\n\t\tgap: var(--_sds-file-upload-item-content-gap);\n\t}\n\n\t.sds-file-upload-item__actions {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\talign-items: center;\n\t\tgap: var(--_sds-file-upload-item-actions-gap);\n\t}\n\n\t.sds-file-upload-item__content-icon {\n\t\tcolor: var(--_sds-file-upload-item-content-icon-color);\n\t}\n\n\t.sds-file-upload-item__content-preview {\n\t\tposition: relative;\n\t\tflex: 0 0 auto;\n\t\twidth: var(--_sds-file-upload-item-content-preview-size);\n\t\theight: var(--_sds-file-upload-item-content-preview-size);\n\t\tborder-radius: var(--_sds-file-upload-item-content-preview-radius);\n\t\toverflow: hidden;\n\t\tbackground-color: var(--_sds-file-upload-item-content-preview-background);\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tinset: 0;\n\t\t\tbackground-color: var(--_sds-file-upload-item-content-preview-highlight);\n\t\t\topacity: 0;\n\t\t\twill-change: opacity;\n\t\t\tanimation: sds-file-upload-item-preview-breathe var(--_sds-file-upload-item-content-preview-loading-duration) ease-in-out infinite;\n\t\t}\n\t}\n\n\t.sds-file-upload-item__content-preview-image {\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t}\n\n\t.sds-file-upload-item__content-preview[data-loaded] {\n\t\tbackground-color: transparent;\n\n\t\t&::before {\n\t\t\tcontent: none;\n\t\t}\n\t}\n\n\t@keyframes sds-file-upload-item-preview-breathe {\n\t\t0% \t{ opacity: 0.15; }\n\t\t40% { opacity: 1; }\n\t\t55% { opacity: 1; }\n\t\t100%{ opacity: 0.15; }\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.sds-file-upload-item__content-preview::before {\n\t\t\tanimation: none;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t.sds-file-upload-item__content-data {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-width: 0;\n\t\tgap: var(--_sds-file-upload-item-content-data-gap);\n\t}\n\n\t.sds-file-upload-item__content-file-name {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tfont-size: var(--_sds-file-upload-item-content-file-name-font-size);\n\t\tfont-weight: var(--_sds-file-upload-item-content-file-name-font-weight);\n\t\tline-height: var(--_sds-file-upload-item-content-file-name-line-height);\n\t\tcolor: var(--_sds-file-upload-item-content-file-name-text-color);\n\t}\n\n\t.sds-file-upload-item__content-file-detail {\n\t\tfont-size: var(--_sds-file-upload-item-content-file-detail-font-size);\n\t\tfont-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);\n\t\tline-height: var(--_sds-file-upload-item-content-file-detail-line-height);\n\t\tcolor: var(--_sds-file-upload-item-content-file-detail-color);\n\t}\n\n\t.sds-file-upload-item__content-file-error {\n\t\tfont-size: var(--_sds-file-upload-item-content-file-detail-font-size);\n\t\tfont-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);\n\t\tline-height: var(--_sds-file-upload-item-content-file-detail-line-height);\n\t\tcolor: var(--_sds-file-upload-item-content-file-detail-color);\n\t}\n\n\t.sds-file-upload-item__error-alert {\n\t\tdisplay: block;\n\t\tmargin-block-start: var(--_sds-file-upload-item-error-alert-spacing);\n\t}\n\n\t.sds-file-upload-item__progress {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-file-upload-item-progress-gap);\n\t}\n\n\t/* The track is the <u-progress> host; the fill is its ::before (width + 0.2s transition come from u-progress). */\n\t.sds-file-upload-item__progress-track {\n\t\tdisplay: block;\n\t\tinline-size: 100%;\n\t\tblock-size: var(--_sds-file-upload-item-progress-height);\n\t\tborder: none;\n\t\tborder-radius: var(--_sds-file-upload-item-progress-radius);\n\t\tbackground-color: var(--_sds-file-upload-item-progress-track-color);\n\t\toverflow: hidden;\n\t}\n\n\t.sds-file-upload-item__progress-track::before {\n\t\tborder-radius: inherit;\n\t\tbackground-color: var(--_sds-file-upload-item-progress-value-color);\n\t}\n\n\t.sds-file-upload-item__progress-meta {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-file-upload-item-content-data-gap);\n\t\tfont-size: var(--_sds-file-upload-item-content-file-detail-font-size);\n\t\tfont-weight: var(--_sds-file-upload-item-content-file-detail-font-weight);\n\t\tline-height: var(--_sds-file-upload-item-content-file-detail-line-height);\n\t\tcolor: var(--_sds-file-upload-item-content-file-detail-color);\n\t}\n\n\t.sds-file-upload-item__progress-percent {\n\t\tmargin-inline-start: auto;\n\t}\n\n\tsds-button {\n\t\t--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));\n\n\t\t&:hover {\n\t\t\t--sds-button-text-color: var(--sds-color-action-hover, var(--sds-color-neutral-action-hover));\n\t\t\t--sds-button-background-color: var(--sds-color-surface-hover, var(--sds-color-neutral-surface-hover));\n\t\t}\n\n\t\t&:active {\n\t\t\t--sds-button-text-color: var(--sds-color-action-active, var(--sds-color-neutral-action-active));\n\t\t\t--sds-button-background-color: var(--sds-color-surface-active, var(--sds-color-neutral-surface-active));\n\t\t}\n\t}\n`;\n"]}

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

@@ -0,0 +1,128 @@
+import { PropertyValues } from 'lit';
+import { SDSElement } from '../utils/sds-element';
+import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
+import { SDS_SIZES, SDS_VARIANTS } from '../types';
+import '../sds-textfield/sds-textfield';
+import type { SDSTextFieldProps } from '../sds-textfield/sds-textfield';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+type SearchSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
+type ButtonVariant = SDS_VARIANTS;
+/** Detail payload dispatched with the `search` event. */
+export interface SDSSearchDetail {
+    value: string;
+}
+export interface SDSSearchProps extends SDSFormControlAttributes {
+    value?: string;
+    label?: string;
+    'hide-label'?: boolean;
+    placeholder?: string;
+    'help-text'?: string;
+    'error-message'?: string;
+    size?: SearchSize;
+    'button-label'?: string;
+    'button-variant'?: ButtonVariant;
+    autocomplete?: SDSTextFieldProps['autocomplete'];
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    pattern?: string;
+}
+declare const SDSSearchComponent_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-form-control-mixin").SDSFormControlMixinInterface> & typeof SDSElement;
+/**
+ * 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 declare class SDSSearchComponent extends SDSSearchComponent_base {
+    static styles: import("lit").CSSResult[];
+    value: string;
+    label?: string;
+    /** Hides the label visually while keeping it as the field's accessible name. */
+    hideLabel: boolean;
+    placeholder?: string;
+    helpText?: string;
+    errorMessage?: string;
+    size: SearchSize;
+    buttonLabel: string;
+    buttonVariant: ButtonVariant;
+    autocomplete?: SDSSearchProps['autocomplete'];
+    required: boolean;
+    minlength?: number;
+    maxlength?: number;
+    pattern?: string;
+    private _field?;
+    private _buttonCol?;
+    private _resizeObserver?;
+    private _defaultValue;
+    private _customValidityMessage;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    /** Mirrors the inner input's validity on the host, which is the element the form validates. */
+    updateValidity(): void;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    select(): void;
+    get selectionStart(): number | null;
+    set selectionStart(value: number | null);
+    get selectionEnd(): number | null;
+    set selectionEnd(value: number | null);
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    /**
+     * 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.
+     */
+    private _alignButtonToInput;
+    /** Emits `search` and, unless it is cancelled, submits the surrounding form. */
+    private _submit;
+    /** Whether `node` is the host, its light DOM content or part of its shadow tree. */
+    private _isOwnNode;
+    private readonly _handleFocusIn;
+    private readonly _handleFocusOut;
+    /** Stops `focus`/`blur` from the inner controls, both synthetic and native. The host emits its own. */
+    private readonly _stopChildEvent;
+    private readonly _reemitChildEvent;
+    private readonly _handleInput;
+    private readonly _handleButtonClick;
+    private readonly _handleKeydown;
+    private _renderField;
+    private _renderButtonColumn;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=sds-search.component.d.ts.map

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

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