@politiet/sheriff-web-components 2.13.0 → 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":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAezB,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IA6BzE,YAAY;IACZ;QACC,KAAK,EAAE,CAAC;QAlBmC,aAAQ,GAAG,KAAK,CAAC;QAa7D,iBAAiB;QACA,mBAAc,GAAG,KAAK,CAAC;QAkCxC,iBAAiB;QACA,kBAAa,GAAG,CAAC,KAAY,EAAQ,EAAE;YACvD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;YAC7D,IAAI,YAAY;gBAAE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACtD,CAAC,CAAC;QA4BF,YAAY;QACK,qBAAgB,GAAG,GAAG,EAAE,CACxC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS;YAC9B,CAAC,CAAC,IAAI,CAAA,qEAAqE,IAAI,CAAC,cAAc;qEAC5B,IAAI,CAAC,OAAO;YACrE;YACT,CAAC,CAAC,IAAI,CAAA;;aAEI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,yBAAyB;;iBAExE,CAAC;QAEA,oBAAe,GAAG,GAAG,EAAE;YACvC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAE1F,OAAO,IAAI,CAAA;;4DAE+C,IAAI,CAAC,IAAI;MAC/D,IAAI,CAAC,SAAS;gBACf,CAAC,CAAC,IAAI,CAAA,mFAAmF;gBACzF,CAAC,CAAC,MAAM;oBACP,CAAC,CAAC,IAAI,CAAA,2DAA2D,MAAM,SAAS;oBAChF,CAAC,CAAC,OAAO;;GAEZ,CAAC;QACH,CAAC,CAAC;QAEe,wBAAmB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;YAOtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,WAAW;gBAC1C,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,aAAa;;;;EAI7B,CAAC;QAEe,oBAAe,GAAG,GAAG,EAAE;YACvC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAElF,OAAO,IAAI,CAAA;;sEAEyD,OAAO,sCAAsC,IAAI,CAAC,IAAI,IAAI,EAAE;;OAE3H,IAAI,CAAC,mBAAmB,KAAK,SAAS;gBACvC,CAAC,CAAC,IAAI,CAAA,yDAAyD,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS;gBAC7G,CAAC,CAAC,OAAO;4DAC6C,OAAO;;;GAGhE,CAAC;QACH,CAAC,CAAC;QAEe,sBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;uBAEzB,IAAI,CAAC,YAAY;;EAEtC,CAAC;QA7HD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,OAAuB;QACpD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IACzD,CAAC;IAEkB,OAAO,CAAC,OAAuB;QACjD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,OAAO;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,GAAG;YAAE,OAAO;QAEvD,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACpB,MAAM,UAAU,GAAG,GAAG,EAAE;YACvB,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG;gBAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QACjD,CAAC,CAAC;QACF,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;YAChB,GAAG,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACP,UAAU,EAAE,CAAC;QACd,CAAC;IACF,CAAC;IAED,aAAa;IACJ,KAAK,CAAC,OAAsB;QACpC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAUD,mBAAmB;IACnB,IAAY,SAAS;QACpB,OAAO,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAEO,2BAA2B;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5F,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,MAAM,CAAC;YAAE,OAAO;QAEnF,MAAM,MAAM,GAAG,MAAuB,CAAC;QACvC,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,IAAY,EAAW,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;QAE7I,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACxF,IAAI,QAAQ;gBAAE,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACrD,CAAC;aAAM,CAAC;YACP,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YACvF,IAAI,IAAI;gBAAE,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAkEQ,MAAM;QACd,MAAM,WAAW,GAAG,EAAE,sBAAsB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;QACpG,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAE1E,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC,WAAW,CAAC;;;QAG9B,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,eAAe,EAAE;;;;QAItB,IAAI,CAAC,mBAAmB,EAAE;;;MAG5B,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,OAAO;;KAE/C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,OAAO;GACrD,CAAC;IACH,CAAC;;AAlLD,UAAU;AACM,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAKS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AACc;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAsB;AACrB;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAuB;AAClD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkB;AACc;IAAzE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAA0B;AACnB;IAA/E,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAA8B;AACjE;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAQA;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkB;AAEf;IAA9D,KAAK,CAAC,8CAA8C,CAAC;sDAAwC;AAC9C;IAA/C,KAAK,CAAC,+BAA+B,CAAC;wDAAqC;AAG3D;IAAhB,KAAK,EAAE;yDAAgC;AA3B5B,iBAAiB;IAD7B,oBAAoB,CAAC,sBAAsB,CAAC;GAChC,iBAAiB,CAoL7B","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-radio/sds-radio.d.ts

@@ -17,6 +17,11 @@ export interface SDSRadioProps extends SDSFormControlAttributes {
 declare const SDSRadio_base: import("../mixins/types").Constructable<import("../mixins/sds-delegate-interaction-mixin").DelegateInteractionMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & import("../mixins/types").Constructable<import("../mixins/sds-form-control-mixin").SDSFormControlMixinInterface> & typeof SDSElement;
 export declare class SDSRadio extends SDSRadio_base {
     static styles: import("lit").CSSResult[];
+    /**
+     * The host carries `role="radio"` and must receive focus itself, so focus must not be
+     * delegated into the shadow root the way SDSFormControlMixin sets up by default.
+     */
+    static shadowRootOptions: ShadowRootInit;
     required: SDSRadioProps['required'];
     label: SDSRadioProps['label'];
     hideLabel: SDSRadioProps['hide-label'];
@@ -41,24 +46,71 @@ export declare class SDSRadio extends SDSRadio_base {
     get parentRequestDisabled(): SDSRadioProps['parentRequestDisabled'];
     set parentRequestDisabled(value: SDSRadioProps['parentRequestDisabled']);
     control: HTMLInputElement;
+    private _helpTextElement?;
     private _hasSlottedLabel;
+    private _slottedLabelText;
+    private _rootNode;
     private _disabled;
     private _disabledIsAuthorControlled;
     private _settingDisabledFromParent;
     private _parentRequestDisabled;
     private _initialChecked;
+    private _pendingGroupSync;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(_changedProperties: PropertyValues): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Matches on the `name` property rather than the reflected attribute, so radios created
+     * imperatively are found before Lit has reflected `name` back out.
+     */
     private _getGroupRadios;
+    /**
+     * Mirrors state onto the host, which is the radio in the accessibility tree.
+     *
+     * Written as attributes rather than through ElementInternals: internals ARIA is
+     * IDL-only, so assistive technology sees it but axe, Playwright and Testing Library —
+     * which all resolve role and name from attributes — do not.
+     */
+    private _syncHostAria;
+    private static readonly _supportsAriaElementReferences;
+    /** Not every browser focuses a tabindex host on click, and the host must hold focus. */
+    private readonly _handleMouseDown;
+    /**
+     * The label is deliberately not associated with the inert input — a `for` would make
+     * getByLabel and friends resolve to an unclickable element — so selection is driven here.
+     */
+    private readonly _handleClick;
+    /**
+     * Selection never goes through the inner input: its click is composed, so it would
+     * retarget to the host and every click would be seen twice from the outside.
+     * Like a native radio, this only fires `change` when the checkedness actually changes.
+     */
+    private _select;
+    /**
+     * A radio group does not cross shadow roots, so the browser sees each radio as a set of
+     * one. State the position explicitly across the whole name-group instead.
+     */
+    private _updateGroupPositions;
+    /** A radio group is one tab stop: the checked option, or the first enabled one. */
+    private _updateGroupTabStops;
+    private _syncGroup;
+    /**
+     * Conditional rendering and reordering both run through disconnect/connect, while
+     * firstUpdated only ever fires once. Membership is recomputed from the microtask so the
+     * surrounding batch of insertions has settled — and so every member has been upgraded,
+     * since a non-upgraded element matches the selector but has no `name`.
+     */
+    private _scheduleGroupSync;
     private _updateGroupValidation;
     private readonly _handleKeydown;
     formResetCallback(): void;
     private _uncheckSiblings;
-    private readonly _handleChange;
     private readonly _handleFocus;
     private readonly _handleBlur;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    click(): void;
     get type(): string;
     get validity(): ValidityState;
     get validationMessage(): string;

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

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