@politiet/sheriff-web-components 2.13.1 → 2.14.1

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

@@ -0,0 +1,205 @@
+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, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { SDSElement } from '../utils/sds-element';
+import { formatBytes } from '../utils/format-bytes';
+import { SDSEventDispatcherMixin } from '../mixins';
+import { styles } from './sds-file-upload-item.styles';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+import '../sds-alert/sds-alert';
+import './assets/u-progress.js';
+let SDSFileUploadItem = class SDSFileUploadItem extends SDSEventDispatcherMixin(SDSElement) {
+    // Lifecycle
+    constructor() {
+        super();
+        this.disabled = false;
+        // Internal state
+        this._previewLoaded = false;
+        // Event handlers
+        this._handleRemove = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            const notCancelled = this.dispatchSheriffEvent('sds-remove');
+            if (notCancelled)
+                this._removeFromAssociatedUpload();
+        };
+        // Rendering
+        this._renderThumbnail = () => this.preview && !this._hasError
+            ? html `<span class="sds-file-upload-item__content-preview" ?data-loaded="${this._previewLoaded}">
+					<img class="sds-file-upload-item__content-preview-image" src="${this.preview}" alt="" />
+				</span>`
+            : html `<sds-icon
+					class="sds-file-upload-item__content-icon"
+					name="${this._hasError ? 'scan_delete-material-outlined' : 'draft-material-outlined'}"
+					size="md"
+				></sds-icon>`;
+        this._renderFileData = () => {
+            const detail = this.sizeInBytes !== undefined ? formatBytes(this.sizeInBytes) : undefined;
+            return html `
+			<span class="sds-file-upload-item__content-data">
+				<span class="sds-file-upload-item__content-file-name">${this.file}</span>
+				${this._hasError
+                ? html `<span class="sds-file-upload-item__content-file-error">Feil ved opplasting</span>`
+                : detail
+                    ? html `<span class="sds-file-upload-item__content-file-detail">${detail}</span>`
+                    : nothing}
+			</span>
+		`;
+        };
+        this._renderRemoveButton = () => html `
+		<sds-button
+			class="sds-file-upload-item__remove"
+			icon
+			variant="tertiary"
+			size="sm"
+			type="button"
+			label="${this.file ? `Fjern ${this.file}` : 'Fjern fil'}"
+			?disabled="${this.disabled}"
+			@click="${this._handleRemove}"
+		>
+			<sds-icon name="delete-material-outlined" size="md"></sds-icon>
+		</sds-button>
+	`;
+        this._renderProgress = () => {
+            const percent = Math.max(0, Math.min(100, Math.round(this.uploadedPercent ?? 0)));
+            return html `
+			<div class="sds-file-upload-item__progress">
+				<u-progress class="sds-file-upload-item__progress-track" value="${percent}" max="100" aria-label="Laster opp ${this.file ?? ''}"></u-progress>
+				<div class="sds-file-upload-item__progress-meta">
+					${this.uploadedSizeInBytes !== undefined
+                ? html `<span class="sds-file-upload-item__progress-uploaded">${formatBytes(this.uploadedSizeInBytes)}</span>`
+                : nothing}
+					<span class="sds-file-upload-item__progress-percent">${percent}%</span>
+				</div>
+			</div>
+		`;
+        };
+        this._renderErrorAlert = () => html `
+		<sds-alert class="sds-file-upload-item__error-alert" size="sm" variant="secondary" data-palette="danger">
+			<p slot="message">${this.errorMessage}</p>
+		</sds-alert>
+	`;
+        this.internals = this.attachInternals();
+        this.internals.role = 'listitem';
+    }
+    willUpdate(changed) {
+        if (changed.has('preview'))
+            this._previewLoaded = false;
+    }
+    updated(changed) {
+        if (!changed.has('preview'))
+            return;
+        const img = this._previewImg;
+        if (!this.preview || this.errorMessage || !img)
+            return;
+        const src = img.src;
+        const markLoaded = () => {
+            if (img.src === src)
+                this._previewLoaded = true;
+        };
+        if (img.decode) {
+            img.decode().then(markLoaded).catch(() => undefined);
+        }
+        else {
+            markLoaded();
+        }
+    }
+    // Public API
+    focus(options) {
+        this._removeButton?.focus(options);
+    }
+    // Internal helpers
+    get _hasError() {
+        return Boolean(this.errorMessage);
+    }
+    _removeFromAssociatedUpload() {
+        if (!this.htmlFor)
+            return;
+        const root = this.getRootNode();
+        const target = root.getElementById?.(this.htmlFor) ?? document.getElementById(this.htmlFor);
+        if (!target || !('removeFile' in target) || !('dismissRejected' in target))
+            return;
+        const upload = target;
+        const matches = (name, size) => name === this.file && (this.sizeInBytes === undefined || size === this.sizeInBytes);
+        if (this.errorMessage) {
+            const rejected = upload.rejectedFiles.find(({ file }) => matches(file.name, file.size));
+            if (rejected)
+                upload.dismissRejected(rejected.file);
+        }
+        else {
+            const file = upload.files.find((candidate) => matches(candidate.name, candidate.size));
+            if (file)
+                upload.removeFile(file);
+        }
+        this.remove();
+    }
+    render() {
+        const itemClasses = { 'sds-file-upload-item': true, 'sds-file-upload-item--error': this._hasError };
+        const isUploading = this.uploadedPercent !== undefined && !this._hasError;
+        return html `
+			<div class="${classMap(itemClasses)}">
+				<div class="sds-file-upload-item__row">
+					<div class="sds-file-upload-item__content">
+						${this._renderThumbnail()}
+						${this._renderFileData()}
+					</div>
+					<div class="sds-file-upload-item__actions">
+						<slot name="actions-end"></slot>
+						${this._renderRemoveButton()}
+					</div>
+				</div>
+				${isUploading ? this._renderProgress() : nothing}
+			</div>
+			${this._hasError ? this._renderErrorAlert() : nothing}
+		`;
+    }
+};
+// Styling
+SDSFileUploadItem.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSFileUploadItem.prototype, "file", void 0);
+__decorate([
+    property({ type: Number, attribute: 'size-in-bytes', reflect: true })
+], SDSFileUploadItem.prototype, "sizeInBytes", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSFileUploadItem.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSFileUploadItem.prototype, "preview", void 0);
+__decorate([
+    property({ type: Number, attribute: 'uploaded-percent', reflect: true })
+], SDSFileUploadItem.prototype, "uploadedPercent", void 0);
+__decorate([
+    property({ type: Number, attribute: 'uploaded-size-in-bytes', reflect: true })
+], SDSFileUploadItem.prototype, "uploadedSizeInBytes", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSFileUploadItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'for', reflect: true })
+], SDSFileUploadItem.prototype, "htmlFor", void 0);
+__decorate([
+    query('.sds-file-upload-item__content-preview-image')
+], SDSFileUploadItem.prototype, "_previewImg", void 0);
+__decorate([
+    query('.sds-file-upload-item__remove')
+], SDSFileUploadItem.prototype, "_removeButton", void 0);
+__decorate([
+    state()
+], SDSFileUploadItem.prototype, "_previewLoaded", void 0);
+SDSFileUploadItem = __decorate([
+    guardedCustomElement('sds-file-upload-item')
+], SDSFileUploadItem);
+export { SDSFileUploadItem };
+//# sourceMappingURL=sds-file-upload-item.js.map

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-icon/sds-icon.system.js

@@ -13,14 +13,14 @@ export const isSystemIcon = (name) => {
     return SYSTEM_ICONS.includes(name);
 };
 export const systemIcons = {
-    'arrow_forward-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z"/></svg>`,
-    'check_circle-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39"/></svg>`,
-    'close-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z"/></svg>`,
-    'dangerous-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z"/></svg>`,
+    'arrow_forward-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56z"/></svg>`,
+    'check_circle-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m424-296 282-282-56-56-226 226-114-114-56 56zm56 216q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80"/></svg>`,
+    'close-material-outlined': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z"/></svg>`,
+    'dangerous-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M330-120 120-330v-300l210-210h300l210 210v300L630-120zm36-190 114-114 114 114 56-56-114-114 114-114-56-56-114 114-114-114-56 56 114 114-114 114z"/></svg>`,
     'InformationSquareFill-aksel-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>`,
-    'lock-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z"/></svg>`,
-    'search-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53"/></svg>`,
-    'warning-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z"/></svg>`,
+    'lock-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920t141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80zm240-200q33 0 56.5-23.5T560-360t-23.5-56.5T480-440t-56.5 23.5T400-360t23.5 56.5T480-280M360-640h240v-80q0-50-35-85t-85-35-85 35-35 85z"/></svg>`,
+    'search-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580t75.5-184.5T380-840t184.5 75.5T640-580q0 44-14 83t-38 69l252 252zM380-400q75 0 127.5-52.5T560-580t-52.5-127.5T380-760t-127.5 52.5T200-580t52.5 127.5T380-400"/></svg>`,
+    'warning-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="m40-120 440-760 440 760zm440-120q17 0 28.5-11.5T520-280t-11.5-28.5T480-320t-28.5 11.5T440-280t11.5 28.5T480-240m-40-120h80v-200h-80z"/></svg>`,
     'chevron_up-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32"><path d="m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z"/></svg>`,
 };
 //# sourceMappingURL=sds-icon.system.js.map

package/dist/sds-icon/sds-icon.system.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-icon.system.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,2BAA2B;IAC3B,oCAAoC;IACpC,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;IACzB,4BAA4B;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAsB,EAAE;IAChE,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAkB,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B;IACtD,iCAAiC,EAAE,uMAAuM;IAC1O,8BAA8B,EAAE,khBAAkhB;IACljB,yBAAyB,EAAE,2NAA2N;IACtP,2BAA2B,EAAE,2VAA2V;IACxX,oCAAoC,EAAE,wZAAwZ;IAC9b,sBAAsB,EAAE,ikBAAikB;IACzlB,wBAAwB,EAAE,4eAA4e;IACtgB,yBAAyB,EAAE,8TAA8T;IACzV,4BAA4B,EAAE,2JAA2J;CACzL,CAAC","sourcesContent":["import { ICON_NAMES } from './sds-icon-names';\n\nexport type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;\n\nexport const SYSTEM_ICONS = [\n\t'arrow_forward-material-outlined',\n\t'check_circle-material-filled',\n\t'close-material-outlined',\n\t'dangerous-material-filled',\n\t'InformationSquareFill-aksel-filled',\n\t'lock-material-filled',\n\t'search-material-filled',\n\t'warning-material-filled',\n\t'chevron_up-material-filled',\n] as const;\n\nexport const isSystemIcon = (name: string): name is SystemIcon => {\n\treturn SYSTEM_ICONS.includes(name as SystemIcon);\n};\n\nexport const systemIcons: Record<SystemIcon, string> = {\n\t'arrow_forward-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z\"/></svg>`,\n\t'check_circle-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39\"/></svg>`,\n\t'close-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z\"/></svg>`,\n\t'dangerous-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z\"/></svg>`,\n\t'InformationSquareFill-aksel-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"/></svg>`,\n\t'lock-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z\"/></svg>`,\n\t'search-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53\"/></svg>`,\n\t'warning-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z\"/></svg>`,\n\t'chevron_up-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 32 32\"><path d=\"m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z\"/></svg>`,\n};\n"]}
+{"version":3,"file":"sds-icon.system.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,2BAA2B;IAC3B,oCAAoC;IACpC,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;IACzB,4BAA4B;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAsB,EAAE;IAChE,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAkB,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B;IACtD,iCAAiC,EAAE,kKAAkK;IACrM,8BAA8B,EAAE,4SAA4S;IAC5U,yBAAyB,EAAE,kMAAkM;IAC7N,2BAA2B,EAAE,yPAAyP;IACtR,oCAAoC,EAAE,wZAAwZ;IAC9b,sBAAsB,EAAE,oZAAoZ;IAC5a,wBAAwB,EAAE,mUAAmU;IAC7V,yBAAyB,EAAE,6OAA6O;IACxQ,4BAA4B,EAAE,2JAA2J;CACzL,CAAC","sourcesContent":["import { ICON_NAMES } from './sds-icon-names';\n\nexport type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;\n\nexport const SYSTEM_ICONS = [\n\t'arrow_forward-material-outlined',\n\t'check_circle-material-filled',\n\t'close-material-outlined',\n\t'dangerous-material-filled',\n\t'InformationSquareFill-aksel-filled',\n\t'lock-material-filled',\n\t'search-material-filled',\n\t'warning-material-filled',\n\t'chevron_up-material-filled',\n] as const;\n\nexport const isSystemIcon = (name: string): name is SystemIcon => {\n\treturn SYSTEM_ICONS.includes(name as SystemIcon);\n};\n\nexport const systemIcons: Record<SystemIcon, string> = {\n\t'arrow_forward-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56z\"/></svg>`,\n\t'check_circle-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m424-296 282-282-56-56-226 226-114-114-56 56zm56 216q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80\"/></svg>`,\n\t'close-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z\"/></svg>`,\n\t'dangerous-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M330-120 120-330v-300l210-210h300l210 210v300L630-120zm36-190 114-114 114 114 56-56-114-114 114-114-56-56-114 114-114-114-56 56 114 114-114 114z\"/></svg>`,\n\t'InformationSquareFill-aksel-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"/></svg>`,\n\t'lock-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920t141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80zm240-200q33 0 56.5-23.5T560-360t-23.5-56.5T480-440t-56.5 23.5T400-360t23.5 56.5T480-280M360-640h240v-80q0-50-35-85t-85-35-85 35-35 85z\"/></svg>`,\n\t'search-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580t75.5-184.5T380-840t184.5 75.5T640-580q0 44-14 83t-38 69l252 252zM380-400q75 0 127.5-52.5T560-580t-52.5-127.5T380-760t-127.5 52.5T200-580t52.5 127.5T380-400\"/></svg>`,\n\t'warning-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m40-120 440-760 440 760zm440-120q17 0 28.5-11.5T520-280t-11.5-28.5T480-320t-28.5 11.5T440-280t11.5 28.5T480-240m-40-120h80v-200h-80z\"/></svg>`,\n\t'chevron_up-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 32 32\"><path d=\"m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z\"/></svg>`,\n};\n"]}

package/dist/sds-internal-header/sds-internal-header.component.js

@@ -16,7 +16,7 @@ export class SDSInternalHeaderComponent extends LitElement {
     get internalLogo() {
         return svg `
 			<svg class="sds-internal-header__internal-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32" fill="currentColor" aria-hidden="true">
-				<path d="M6.5 24.3333H0L13.6667 0H20L6.5 24.3333Z" fill="var(--sds-color-support-3-action-default)" />
+				<path d="M6.5 24.3333H0L13.6667 0H20L6.5 24.3333Z" />
 				<path d="M12.5 32H6L19.6667 7.66663H26L12.5 32Z" fill="var(--sds-color-neutral-border-default)" />
 			</svg>
 		`;

package/dist/sds-internal-header/sds-internal-header.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-internal-header.component.js","sourceRoot":"","sources":["../../src/sds-internal-header/sds-internal-header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAOtD,MAAM,OAAO,0BAA2B,SAAQ,UAAU;IAA1D;;QAGmE,YAAO,GAAW,EAAE,CAAC;QACpB,aAAQ,GAAW,EAAE,CAAC;IAoC1F,CAAC;IAlCA,IAAY,YAAY;QACvB,OAAO,GAAG,CAAA;;;;;GAKT,CAAC;IACH,CAAC;IAED,IAAY,cAAc;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,OAAO,CAAC;QAChB,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAA,4CAA4C,IAAI,CAAC,OAAO,SAAS,CAAC;QAEpF,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6CAA6C,IAAI,CAAC,QAAQ,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9G,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;8CAEiC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc;;;;;;;;;;GAUnF,CAAC;IACH,CAAC;;AAtCe,iCAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEgC;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAsB;AACpB;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DAAuB","sourcesContent":["import { LitElement, html, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './sds-internal-header.styles';\n\nexport interface SDSInternalHeaderProps {\n\t'app-name'?: string;\n\t'home-href'?: string;\n}\n\nexport class SDSInternalHeaderComponent extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, attribute: 'app-name', reflect: true }) appName: string = '';\n\t@property({ type: String, attribute: 'home-href', reflect: true }) homeHref: string = '';\n\n\tprivate get internalLogo() {\n\t\treturn svg`\n\t\t\t<svg class=\"sds-internal-header__internal-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 26 32\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M6.5 24.3333H0L13.6667 0H20L6.5 24.3333Z\" fill=\"var(--sds-color-support-3-action-default)\" />\n\t\t\t\t<path d=\"M12.5 32H6L19.6667 7.66663H26L12.5 32Z\" fill=\"var(--sds-color-neutral-border-default)\" />\n\t\t\t</svg>\n\t\t`;\n\t}\n\n\tprivate get appNameElement() {\n\t\tif (!this.appName) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\tconst title = html`<span class=\"sds-internal-header__title\">${this.appName}</span>`;\n\n\t\treturn this.homeHref ? html`<a class=\"sds-internal-header__home\" href=${this.homeHref}>${title}</a>` : title;\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<header class=\"sds-internal-header\">\n\t\t\t\t<div class=\"sds-internal-header__brand\">${this.internalLogo} ${this.appNameElement}</div>\n\t\t\t\t<div class=\"sds-internal-header__slots\">\n\t\t\t\t\t<div class=\"sds-internal-header__slot\">\n\t\t\t\t\t\t<slot name=\"start\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"sds-internal-header__slot sds-internal-header__slot--end\">\n\t\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t`;\n\t}\n}\n"]}
+{"version":3,"file":"sds-internal-header.component.js","sourceRoot":"","sources":["../../src/sds-internal-header/sds-internal-header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAOtD,MAAM,OAAO,0BAA2B,SAAQ,UAAU;IAA1D;;QAGmE,YAAO,GAAW,EAAE,CAAC;QACpB,aAAQ,GAAW,EAAE,CAAC;IAoC1F,CAAC;IAlCA,IAAY,YAAY;QACvB,OAAO,GAAG,CAAA;;;;;GAKT,CAAC;IACH,CAAC;IAED,IAAY,cAAc;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,OAAO,CAAC;QAChB,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAA,4CAA4C,IAAI,CAAC,OAAO,SAAS,CAAC;QAEpF,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,6CAA6C,IAAI,CAAC,QAAQ,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9G,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;8CAEiC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc;;;;;;;;;;GAUnF,CAAC;IACH,CAAC;;AAtCe,iCAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEgC;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAsB;AACpB;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DAAuB","sourcesContent":["import { LitElement, html, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './sds-internal-header.styles';\n\nexport interface SDSInternalHeaderProps {\n\t'app-name'?: string;\n\t'home-href'?: string;\n}\n\nexport class SDSInternalHeaderComponent extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, attribute: 'app-name', reflect: true }) appName: string = '';\n\t@property({ type: String, attribute: 'home-href', reflect: true }) homeHref: string = '';\n\n\tprivate get internalLogo() {\n\t\treturn svg`\n\t\t\t<svg class=\"sds-internal-header__internal-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 26 32\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M6.5 24.3333H0L13.6667 0H20L6.5 24.3333Z\" />\n\t\t\t\t<path d=\"M12.5 32H6L19.6667 7.66663H26L12.5 32Z\" fill=\"var(--sds-color-neutral-border-default)\" />\n\t\t\t</svg>\n\t\t`;\n\t}\n\n\tprivate get appNameElement() {\n\t\tif (!this.appName) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\tconst title = html`<span class=\"sds-internal-header__title\">${this.appName}</span>`;\n\n\t\treturn this.homeHref ? html`<a class=\"sds-internal-header__home\" href=${this.homeHref}>${title}</a>` : title;\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<header class=\"sds-internal-header\">\n\t\t\t\t<div class=\"sds-internal-header__brand\">${this.internalLogo} ${this.appNameElement}</div>\n\t\t\t\t<div class=\"sds-internal-header__slots\">\n\t\t\t\t\t<div class=\"sds-internal-header__slot\">\n\t\t\t\t\t\t<slot name=\"start\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"sds-internal-header__slot sds-internal-header__slot--end\">\n\t\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t`;\n\t}\n}\n"]}

package/dist/sds-internal-header/sds-internal-header.styles.js

@@ -17,7 +17,7 @@ export const styles = css `
 		--_sds-internal-header-slots-flex: var(--sds-internal-header-slots-flex, 1 1 auto);
 		--_sds-internal-header-slots-justify: var(--sds-internal-header-slots-justify, space-between);
 
-		--_sds-internal-header-internal-color: var(--sds-internal-header-internal-color, var(--sds-color-support-3-action-default));
+		--_sds-internal-header-internal-color: var(--sds-internal-header-internal-color, var(--sds-color-support-3-surface-hover));
 		--_sds-internal-header-internal-width: var(--sds-internal-header-internal-width, 1.625rem);
 
 		--_sds-internal-header-title-font-family: var(--sds-internal-header-title-font-family, var(--sds-typography-font-family-roboto));