@aceshooting/lyra-ui 24.2.0 → 25.0.0

package/dist/components/data/document-library/document-library.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{getDateTimeFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{styles}from"./document-library.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{LYRA_DEFAULT_documentLibraryClearSelection,LYRA_DEFAULT_documentLibraryEmptyHeading,LYRA_DEFAULT_documentLibraryFilterByTag,LYRA_DEFAULT_documentLibraryFreshnessAging,LYRA_DEFAULT_documentLibraryFreshnessColumn,LYRA_DEFAULT_documentLibraryFreshnessFresh,LYRA_DEFAULT_documentLibraryFreshnessStale,LYRA_DEFAULT_documentLibraryLabel,LYRA_DEFAULT_documentLibraryNameColumn,LYRA_DEFAULT_documentLibraryNoMatchesHeading,LYRA_DEFAULT_documentLibraryOwnerColumn,LYRA_DEFAULT_documentLibrarySearchPlaceholder,LYRA_DEFAULT_documentLibrarySelectAll,LYRA_DEFAULT_documentLibrarySelectColumn,LYRA_DEFAULT_documentLibrarySelectDocument,LYRA_DEFAULT_documentLibrarySelectedCount,LYRA_DEFAULT_documentLibraryTagsColumn,LYRA_DEFAULT_documentLibraryTypeColumn,LYRA_DEFAULT_documentLibraryUpdatedColumn,LYRA_DEFAULT_documentLibraryVersionColumn}from"../../../internal/default-strings.generated.js";const FRESHNESS_RANK={fresh:0,aging:1,stale:2},MAX_LIBRARY_COLLECTION_ENTRIES=1e4,INVALID_DOCUMENT_DATE=Symbol("invalid-document-date"),FRESHNESS_TONE={fresh:"success",aging:"warning",stale:"danger"};function projectLibraryStringArray(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return;const tags=[];for(let index=0;index<Math.min(length.value,MAX_LIBRARY_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR||typeof entry.value!="string")return;tags.push(entry.value)}return Object.freeze(tags)}catch{return}}function projectLibraryDate(value){if(typeof value=="string")return value;if(typeof value=="number")return new Date(value);try{return new Date(Date.prototype.getTime.call(value))}catch{return INVALID_DOCUMENT_DATE}}function projectLibraryDocument(candidate){try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))return;const id=getOwnDataDescriptor(candidate,"id"),name=getOwnDataDescriptor(candidate,"name"),mimeType=getOwnDataDescriptor(candidate,"mimeType"),uri=getOwnDataDescriptor(candidate,"uri"),version=getOwnDataDescriptor(candidate,"version"),tags=getOwnDataDescriptor(candidate,"tags"),owner=getOwnDataDescriptor(candidate,"owner"),updatedAt=getOwnDataDescriptor(candidate,"updatedAt"),freshness=getOwnDataDescriptor(candidate,"freshness");if(id===MISSING_OWN_DATA_DESCRIPTOR||id===UNSAFE_OWN_DATA_DESCRIPTOR||name===MISSING_OWN_DATA_DESCRIPTOR||name===UNSAFE_OWN_DATA_DESCRIPTOR||mimeType===UNSAFE_OWN_DATA_DESCRIPTOR||uri===UNSAFE_OWN_DATA_DESCRIPTOR||version===UNSAFE_OWN_DATA_DESCRIPTOR||tags===UNSAFE_OWN_DATA_DESCRIPTOR||owner===UNSAFE_OWN_DATA_DESCRIPTOR||updatedAt===UNSAFE_OWN_DATA_DESCRIPTOR||freshness===UNSAFE_OWN_DATA_DESCRIPTOR||typeof id.value!="string"||id.value.trim().length===0||typeof name.value!="string")return;const mimeTypeValue=mimeType===MISSING_OWN_DATA_DESCRIPTOR?void 0:mimeType.value,uriValue=uri===MISSING_OWN_DATA_DESCRIPTOR?void 0:uri.value,versionValue=version===MISSING_OWN_DATA_DESCRIPTOR?void 0:version.value,ownerValue=owner===MISSING_OWN_DATA_DESCRIPTOR?void 0:owner.value,freshnessValue=freshness===MISSING_OWN_DATA_DESCRIPTOR?void 0:freshness.value;if(mimeTypeValue!==void 0&&typeof mimeTypeValue!="string"||uriValue!==void 0&&typeof uriValue!="string"||versionValue!==void 0&&typeof versionValue!="string"||ownerValue!==void 0&&typeof ownerValue!="string"||freshnessValue!==void 0&&freshnessValue!=="fresh"&&freshnessValue!=="aging"&&freshnessValue!=="stale")return;const tagsValue=tags===MISSING_OWN_DATA_DESCRIPTOR?void 0:tags.value,tagValues=tagsValue===void 0?void 0:projectLibraryStringArray(tagsValue);if(tagsValue!==void 0&&!tagValues)return;const updatedAtValue=updatedAt===MISSING_OWN_DATA_DESCRIPTOR||updatedAt.value===void 0?void 0:projectLibraryDate(updatedAt.value);return updatedAtValue===INVALID_DOCUMENT_DATE?void 0:Object.freeze({id:id.value,name:name.value,...mimeTypeValue===void 0?{}:{mimeType:mimeTypeValue},...uriValue===void 0?{}:{uri:uriValue},...versionValue===void 0?{}:{version:versionValue},...tagValues===void 0?{}:{tags:tagValues},...ownerValue===void 0?{}:{owner:ownerValue},...updatedAtValue===void 0?{}:{updatedAt:updatedAtValue},...freshnessValue===void 0?{}:{freshness:freshnessValue}})}catch{return}}class LyraDocumentLibrary extends LyraElement{constructor(){super(...arguments),this._documents=Object.freeze([]),this._selectedDocumentIds=Object.freeze([]),this._tagFilter=Object.freeze([]),this.sortKey="name",this.sortDir="asc",this.searchTerm="",this.loading=!1,this.error=!1,this.errorDescription="",this.hasErrorSlot=!1,this.retryRequestActive=!1,this.onTableRetry=event=>{if(event.stopPropagation(),this.retryRequestActive){event.preventDefault();return}this.retryRequestActive=!0;try{requestThenCommit({requestDetail:null,emitRequest:(detail,init)=>this.emit("lr-retry-request",detail,init),commit:()=>{this.error=!1}}).defaultPrevented&&event.preventDefault()}finally{this.retryRequestActive=!1}},this.isMounting=!0,this.defaultFilter=(document,query)=>{const locale=this.effectiveLocale;return[document.name,document.owner??"",...document.tags??[]].some(value=>value.toLocaleLowerCase(locale).includes(query))},this.compareDocuments=(a,b)=>{const locale=this.effectiveLocale,dir=this.sortDir==="asc"?1:-1;let result=0;switch(this.sortKey){case"name":result=a.name.localeCompare(b.name,locale,{numeric:!0});break;case"version":result=(a.version??"").localeCompare(b.version??"",locale,{numeric:!0});break;case"owner":result=(a.owner??"").localeCompare(b.owner??"",locale,{numeric:!0});break;case"freshness":result=(a.freshness?FRESHNESS_RANK[a.freshness]:3)-(b.freshness?FRESHNESS_RANK[b.freshness]:3);break;case"updatedAt":result=(this.normalizeDate(a.updatedAt)?.getTime()??0)-(this.normalizeDate(b.updatedAt)?.getTime()??0);break}return result*dir},this.onSearchInput=event=>{event.stopPropagation(),this.searchTerm=event.detail.value,this.emitFilterChange()},this.onTagFilterChange=event=>{event.stopPropagation();const combobox=event.target;this.tagFilter=Array.isArray(combobox.value)?combobox.value:[],this.emitFilterChange()},this.onTableSortRequest=event=>{if(event.stopPropagation(),!this.isSortKey(event.detail.sortKey)){event.preventDefault();return}const detail=Object.freeze({phase:"request",sortKey:event.detail.sortKey,sortDir:event.detail.sortDir});this.emit("lr-sort-request",detail,{cancelable:!0}).defaultPrevented&&event.preventDefault()},this.onTableSortCommit=event=>{event.stopPropagation(),this.isSortKey(event.detail.sortKey)&&(this.sortKey=event.detail.sortKey,this.sortDir=event.detail.sortDir,this.emit("lr-sort",Object.freeze({phase:"commit",sortKey:this.sortKey,sortDir:this.sortDir})))},this.stopOwnedEvent=event=>{event.stopPropagation()},this.onTableSelectionChange=event=>{event.stopPropagation();const table=event.currentTarget;table.selectedRowKeys=new Set(this.selectedDocumentIds)},this.clearSelection=()=>{this.setSelected([])}}static{this.defaultStrings={...super.defaultStrings,documentLibraryClearSelection:LYRA_DEFAULT_documentLibraryClearSelection,documentLibraryEmptyHeading:LYRA_DEFAULT_documentLibraryEmptyHeading,documentLibraryFilterByTag:LYRA_DEFAULT_documentLibraryFilterByTag,documentLibraryFreshnessAging:LYRA_DEFAULT_documentLibraryFreshnessAging,documentLibraryFreshnessColumn:LYRA_DEFAULT_documentLibraryFreshnessColumn,documentLibraryFreshnessFresh:LYRA_DEFAULT_documentLibraryFreshnessFresh,documentLibraryFreshnessStale:LYRA_DEFAULT_documentLibraryFreshnessStale,documentLibraryLabel:LYRA_DEFAULT_documentLibraryLabel,documentLibraryNameColumn:LYRA_DEFAULT_documentLibraryNameColumn,documentLibraryNoMatchesHeading:LYRA_DEFAULT_documentLibraryNoMatchesHeading,documentLibraryOwnerColumn:LYRA_DEFAULT_documentLibraryOwnerColumn,documentLibrarySearchPlaceholder:LYRA_DEFAULT_documentLibrarySearchPlaceholder,documentLibrarySelectAll:LYRA_DEFAULT_documentLibrarySelectAll,documentLibrarySelectColumn:LYRA_DEFAULT_documentLibrarySelectColumn,documentLibrarySelectDocument:LYRA_DEFAULT_documentLibrarySelectDocument,documentLibrarySelectedCount:LYRA_DEFAULT_documentLibrarySelectedCount,documentLibraryTagsColumn:LYRA_DEFAULT_documentLibraryTagsColumn,documentLibraryTypeColumn:LYRA_DEFAULT_documentLibraryTypeColumn,documentLibraryUpdatedColumn:LYRA_DEFAULT_documentLibraryUpdatedColumn,documentLibraryVersionColumn:LYRA_DEFAULT_documentLibraryVersionColumn}}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-filter-change","lr-selection-change"])}get documents(){return this.snapshotDocuments(this._documents)}set documents(value){const previous=this._documents;this._documents=this.snapshotDocuments(value),this.requestUpdate("documents",previous)}get selectedDocumentIds(){return this._selectedDocumentIds}set selectedDocumentIds(value){const previous=this._selectedDocumentIds;this._selectedDocumentIds=this.snapshotIds(Array.isArray(value)?value:[]),this.requestUpdate("selectedDocumentIds",previous)}get tagFilter(){return this._tagFilter}set tagFilter(value){const previous=this._tagFilter;this._tagFilter=this.snapshotIds(Array.isArray(value)?value:[]),this.requestUpdate("tagFilter",previous)}computeHasErrorSlot(){return Array.from(this.children).some(el=>el.getAttribute("slot")==="error")}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasErrorSlot=this.computeHasErrorSlot(),this.errorSlotObserver=new MutationObserver(()=>{this.hasErrorSlot=this.computeHasErrorSlot()}),this.errorSlotObserver.observe(this,{childList:!0,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.errorSlotObserver?.disconnect(),this.errorSlotObserver=void 0}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){if(!this.isConnected){this.releaseAnnouncementSink();return}this.announcementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}))}snapshotDocuments(documents){const snapshot=[],seen=new Set;try{if(!Array.isArray(documents))return Object.freeze(snapshot);const length=getOwnDataDescriptor(documents,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return Object.freeze(snapshot);for(let index=0;index<Math.min(length.value,MAX_LIBRARY_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(documents,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const document=projectLibraryDocument(entry.value);!document||seen.has(document.id)||(seen.add(document.id),snapshot.push(document))}}catch{}return Object.freeze(snapshot)}snapshotIds(ids){const snapshot=[],seen=new Set;try{for(const id of ids)if(!seen.has(id)&&(seen.add(id),snapshot.push(id),snapshot.length>=MAX_LIBRARY_COLLECTION_ENTRIES))break}catch{}return Object.freeze(snapshot)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("documents")||changed.has("selectedDocumentIds"))&&this.selectedDocumentIds.length>0){const existing=new Set(this._documents.map(doc=>doc.id)),normalized=this.snapshotIds(this.selectedDocumentIds.filter(id=>existing.has(id)));(normalized.length!==this.selectedDocumentIds.length||normalized.some((id,index)=>id!==this.selectedDocumentIds[index]))&&(this.selectedDocumentIds=normalized)}if((changed.has("documents")||changed.has("tagFilter"))&&this.tagFilter.length>0){const availableTags=new Set(this._documents.flatMap(document=>document.tags??[])),normalized=this.snapshotIds(this.tagFilter.filter(tag=>availableTags.has(tag)));(normalized.length!==this.tagFilter.length||normalized.some((tag,index)=>tag!==this.tagFilter[index]))&&(this.tagFilter=normalized)}}updated(changed){super.updated(changed),!this.isMounting&&changed.has("selectedDocumentIds")&&this.announcementSink?.announce(this.selectionCountText()),this.isMounting=!1}selectionCountText(){return this.localize("documentLibrarySelectedCount",void 0,{count:getNumberFormat(this.effectiveLocale).format(this.selectedDocumentIds.length)})}normalizeDate(value){if(value===void 0)return;const date=value instanceof Date?value:new Date(value);return Number.isNaN(date.getTime())?void 0:date}matchesTagFilter(document){if(this.tagFilter.length===0)return!0;const tags=new Set(document.tags??[]);return this.tagFilter.every(tag=>tags.has(tag))}get visibleDocuments(){const query=(this.searchTerm??"").trim().toLocaleLowerCase(this.effectiveLocale),matchFn=this.filter??this.defaultFilter;return[...this._documents.filter(document=>(query===""||matchFn(document,query))&&this.matchesTagFilter(document))].sort(this.compareDocuments)}get allTags(){const tags=new Set;for(const document of this._documents)for(const tag of document.tags??[])tags.add(tag);return[...tags].sort((a,b)=>a.localeCompare(b,this.effectiveLocale))}emitFilterChange(){const tags=Object.freeze([...this.tagFilter]);this.emit("lr-filter-change",Object.freeze({searchTerm:this.searchTerm,tags,matchCount:this.visibleDocuments.length}))}isSortKey(value){return value==="name"||value==="version"||value==="owner"||value==="freshness"||value==="updatedAt"}openDocument(document){this.emit("lr-open",Object.freeze({documentId:document.id}))}setSelected(ids){this.selectedDocumentIds=[...ids];const eventIds=Object.freeze([...this.selectedDocumentIds]);this.emit("lr-selection-change",Object.freeze({documentIds:eventIds}))}toggleSelection(document,checked){const next=new Set(this.selectedDocumentIds);checked?next.add(document.id):next.delete(document.id),this.setSelected(next)}toggleSelectAll(checked,visible){const next=new Set(this.selectedDocumentIds);for(const document of visible)checked?next.add(document.id):next.delete(document.id);this.setSelected(next)}freshnessLabel(freshness){switch(freshness){case"fresh":return this.localize("documentLibraryFreshnessFresh");case"aging":return this.localize("documentLibraryFreshnessAging");case"stale":return this.localize("documentLibraryFreshnessStale")}}renderSelectAllCheckbox(visible){const allSelected=visible.length>0&&visible.every(document=>this.selectedDocumentIds.includes(document.id)),someSelected=!allSelected&&visible.some(document=>this.selectedDocumentIds.includes(document.id));return html`<lr-checkbox
+import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{getDateTimeFormat,getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{styles}from"./document-library.styles.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{LYRA_DEFAULT_documentLibraryClearSelection,LYRA_DEFAULT_documentLibraryEmptyHeading,LYRA_DEFAULT_documentLibraryFilterByTag,LYRA_DEFAULT_documentLibraryFreshnessAging,LYRA_DEFAULT_documentLibraryFreshnessColumn,LYRA_DEFAULT_documentLibraryFreshnessFresh,LYRA_DEFAULT_documentLibraryFreshnessStale,LYRA_DEFAULT_documentLibraryLabel,LYRA_DEFAULT_documentLibraryNameColumn,LYRA_DEFAULT_documentLibraryNoMatchesHeading,LYRA_DEFAULT_documentLibraryOwnerColumn,LYRA_DEFAULT_documentLibrarySearchPlaceholder,LYRA_DEFAULT_documentLibrarySelectAll,LYRA_DEFAULT_documentLibrarySelectColumn,LYRA_DEFAULT_documentLibrarySelectDocument,LYRA_DEFAULT_documentLibrarySelectedCount,LYRA_DEFAULT_documentLibraryTagsColumn,LYRA_DEFAULT_documentLibraryTypeColumn,LYRA_DEFAULT_documentLibraryUpdatedColumn,LYRA_DEFAULT_documentLibraryVersionColumn}from"../../../internal/default-strings.generated.js";const FRESHNESS_RANK={fresh:0,aging:1,stale:2},MAX_LIBRARY_COLLECTION_ENTRIES=1e4,INVALID_DOCUMENT_DATE=Symbol("invalid-document-date"),FRESHNESS_TONE={fresh:"success",aging:"warning",stale:"danger"};function projectLibraryStringArray(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return;const tags=[];for(let index=0;index<Math.min(length.value,MAX_LIBRARY_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR||typeof entry.value!="string")return;tags.push(entry.value)}return Object.freeze(tags)}catch{return}}function projectLibraryDate(value){if(typeof value=="string")return value;if(typeof value=="number")return new Date(value);try{return new Date(Date.prototype.getTime.call(value))}catch{return INVALID_DOCUMENT_DATE}}function projectLibraryDocument(candidate){try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))return;const id=getOwnDataDescriptor(candidate,"id"),name=getOwnDataDescriptor(candidate,"name"),mimeType=getOwnDataDescriptor(candidate,"mimeType"),uri=getOwnDataDescriptor(candidate,"uri"),version=getOwnDataDescriptor(candidate,"version"),tags=getOwnDataDescriptor(candidate,"tags"),owner=getOwnDataDescriptor(candidate,"owner"),updatedAt=getOwnDataDescriptor(candidate,"updatedAt"),freshness=getOwnDataDescriptor(candidate,"freshness");if(id===MISSING_OWN_DATA_DESCRIPTOR||id===UNSAFE_OWN_DATA_DESCRIPTOR||name===MISSING_OWN_DATA_DESCRIPTOR||name===UNSAFE_OWN_DATA_DESCRIPTOR||mimeType===UNSAFE_OWN_DATA_DESCRIPTOR||uri===UNSAFE_OWN_DATA_DESCRIPTOR||version===UNSAFE_OWN_DATA_DESCRIPTOR||tags===UNSAFE_OWN_DATA_DESCRIPTOR||owner===UNSAFE_OWN_DATA_DESCRIPTOR||updatedAt===UNSAFE_OWN_DATA_DESCRIPTOR||freshness===UNSAFE_OWN_DATA_DESCRIPTOR||typeof id.value!="string"||id.value.trim().length===0||typeof name.value!="string")return;const mimeTypeValue=mimeType===MISSING_OWN_DATA_DESCRIPTOR?void 0:mimeType.value,uriValue=uri===MISSING_OWN_DATA_DESCRIPTOR?void 0:uri.value,versionValue=version===MISSING_OWN_DATA_DESCRIPTOR?void 0:version.value,ownerValue=owner===MISSING_OWN_DATA_DESCRIPTOR?void 0:owner.value,freshnessValue=freshness===MISSING_OWN_DATA_DESCRIPTOR?void 0:freshness.value;if(mimeTypeValue!==void 0&&typeof mimeTypeValue!="string"||uriValue!==void 0&&typeof uriValue!="string"||versionValue!==void 0&&typeof versionValue!="string"||ownerValue!==void 0&&typeof ownerValue!="string"||freshnessValue!==void 0&&freshnessValue!=="fresh"&&freshnessValue!=="aging"&&freshnessValue!=="stale")return;const tagsValue=tags===MISSING_OWN_DATA_DESCRIPTOR?void 0:tags.value,tagValues=tagsValue===void 0?void 0:projectLibraryStringArray(tagsValue);if(tagsValue!==void 0&&!tagValues)return;const updatedAtValue=updatedAt===MISSING_OWN_DATA_DESCRIPTOR||updatedAt.value===void 0?void 0:projectLibraryDate(updatedAt.value);return updatedAtValue===INVALID_DOCUMENT_DATE?void 0:Object.freeze({id:id.value,name:name.value,...mimeTypeValue===void 0?{}:{mimeType:mimeTypeValue},...uriValue===void 0?{}:{uri:uriValue},...versionValue===void 0?{}:{version:versionValue},...tagValues===void 0?{}:{tags:tagValues},...ownerValue===void 0?{}:{owner:ownerValue},...updatedAtValue===void 0?{}:{updatedAt:updatedAtValue},...freshnessValue===void 0?{}:{freshness:freshnessValue}})}catch{return}}class LyraDocumentLibrary extends LyraElement{constructor(){super(...arguments),this._documents=Object.freeze([]),this._selectedDocumentIds=Object.freeze([]),this._tagFilter=Object.freeze([]),this.sortKey="name",this.sortDir="asc",this.searchTerm="",this.loading=!1,this.error=!1,this.errorDescription="",this.hasErrorSlot=!1,this.retryRequestActive=!1,this.onTableRetry=event=>{if(event.stopPropagation(),this.retryRequestActive){event.preventDefault();return}this.retryRequestActive=!0;try{requestThenCommit({requestDetail:null,emitRequest:(detail,init)=>this.emit("lr-retry-request",detail,init),commit:()=>{this.error=!1}}).defaultPrevented&&event.preventDefault()}finally{this.retryRequestActive=!1}},this.isMounting=!0,this.defaultFilter=(document,query)=>{const locale=this.effectiveLocale;return[document.name,document.owner??"",...document.tags??[]].some(value=>value.toLocaleLowerCase(locale).includes(query))},this.compareDocuments=(a,b)=>{const locale=this.effectiveLocale,dir=this.sortDir==="asc"?1:-1;let result=0;switch(this.sortKey){case"name":result=a.name.localeCompare(b.name,locale,{numeric:!0});break;case"version":result=(a.version??"").localeCompare(b.version??"",locale,{numeric:!0});break;case"owner":result=(a.owner??"").localeCompare(b.owner??"",locale,{numeric:!0});break;case"freshness":result=(a.freshness?FRESHNESS_RANK[a.freshness]:3)-(b.freshness?FRESHNESS_RANK[b.freshness]:3);break;case"updatedAt":result=(this.normalizeDate(a.updatedAt)?.getTime()??0)-(this.normalizeDate(b.updatedAt)?.getTime()??0);break}return result*dir},this.onSearchInput=event=>{event.stopPropagation(),this.searchTerm=event.detail.value,this.emitFilterChange()},this.onTagFilterChange=event=>{event.stopPropagation();const combobox=event.target;this.tagFilter=Array.isArray(combobox.value)?combobox.value:[],this.emitFilterChange()},this.onTableSortRequest=event=>{if(event.stopPropagation(),!this.isSortKey(event.detail.sortKey)){event.preventDefault();return}const detail=Object.freeze({phase:"request",sortKey:event.detail.sortKey,sortDir:event.detail.sortDir});this.emit("lr-sort-request",detail,{cancelable:!0}).defaultPrevented&&event.preventDefault()},this.onTableSortCommit=event=>{event.stopPropagation(),this.isSortKey(event.detail.sortKey)&&(this.sortKey=event.detail.sortKey,this.sortDir=event.detail.sortDir,this.emit("lr-sort",Object.freeze({phase:"commit",sortKey:this.sortKey,sortDir:this.sortDir})))},this.stopOwnedEvent=event=>{event.stopPropagation()},this.onTableSelectionChange=event=>{event.stopPropagation();const table=event.currentTarget;table.selectedRowKeys=new Set(this.selectedDocumentIds)},this.clearSelection=()=>{this.setSelected([])}}static{this.defaultStrings={...super.defaultStrings,documentLibraryClearSelection:LYRA_DEFAULT_documentLibraryClearSelection,documentLibraryEmptyHeading:LYRA_DEFAULT_documentLibraryEmptyHeading,documentLibraryFilterByTag:LYRA_DEFAULT_documentLibraryFilterByTag,documentLibraryFreshnessAging:LYRA_DEFAULT_documentLibraryFreshnessAging,documentLibraryFreshnessColumn:LYRA_DEFAULT_documentLibraryFreshnessColumn,documentLibraryFreshnessFresh:LYRA_DEFAULT_documentLibraryFreshnessFresh,documentLibraryFreshnessStale:LYRA_DEFAULT_documentLibraryFreshnessStale,documentLibraryLabel:LYRA_DEFAULT_documentLibraryLabel,documentLibraryNameColumn:LYRA_DEFAULT_documentLibraryNameColumn,documentLibraryNoMatchesHeading:LYRA_DEFAULT_documentLibraryNoMatchesHeading,documentLibraryOwnerColumn:LYRA_DEFAULT_documentLibraryOwnerColumn,documentLibrarySearchPlaceholder:LYRA_DEFAULT_documentLibrarySearchPlaceholder,documentLibrarySelectAll:LYRA_DEFAULT_documentLibrarySelectAll,documentLibrarySelectColumn:LYRA_DEFAULT_documentLibrarySelectColumn,documentLibrarySelectDocument:LYRA_DEFAULT_documentLibrarySelectDocument,documentLibrarySelectedCount:LYRA_DEFAULT_documentLibrarySelectedCount,documentLibraryTagsColumn:LYRA_DEFAULT_documentLibraryTagsColumn,documentLibraryTypeColumn:LYRA_DEFAULT_documentLibraryTypeColumn,documentLibraryUpdatedColumn:LYRA_DEFAULT_documentLibraryUpdatedColumn,documentLibraryVersionColumn:LYRA_DEFAULT_documentLibraryVersionColumn}}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-filter-change","lr-selection-change"])}get documents(){return this.snapshotDocuments(this._documents)}set documents(value){const previous=this._documents;this._documents=this.snapshotDocuments(value),this.requestUpdate("documents",previous)}get selectedDocumentIds(){return this._selectedDocumentIds}set selectedDocumentIds(value){const previous=this._selectedDocumentIds;this._selectedDocumentIds=this.snapshotIds(Array.isArray(value)?value:[]),this.requestUpdate("selectedDocumentIds",previous)}get tagFilter(){return this._tagFilter}set tagFilter(value){const previous=this._tagFilter;this._tagFilter=this.snapshotIds(Array.isArray(value)?value:[]),this.requestUpdate("tagFilter",previous)}computeHasErrorSlot(){return Array.from(this.children).some(el=>el.getAttribute("slot")==="error")}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasErrorSlot=this.computeHasErrorSlot(),this.errorSlotObserver=new MutationObserver(()=>{this.hasErrorSlot=this.computeHasErrorSlot()}),this.errorSlotObserver.observe(this,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["slot"]})}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.errorSlotObserver?.disconnect(),this.errorSlotObserver=void 0}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){if(!this.isConnected){this.releaseAnnouncementSink();return}this.announcementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}))}snapshotDocuments(documents){const snapshot=[],seen=new Set;try{if(!Array.isArray(documents))return Object.freeze(snapshot);const length=getOwnDataDescriptor(documents,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return Object.freeze(snapshot);for(let index=0;index<Math.min(length.value,MAX_LIBRARY_COLLECTION_ENTRIES);index+=1){const entry=getOwnDataDescriptor(documents,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const document=projectLibraryDocument(entry.value);!document||seen.has(document.id)||(seen.add(document.id),snapshot.push(document))}}catch{}return Object.freeze(snapshot)}snapshotIds(ids){const snapshot=[],seen=new Set;try{for(const id of ids)if(!seen.has(id)&&(seen.add(id),snapshot.push(id),snapshot.length>=MAX_LIBRARY_COLLECTION_ENTRIES))break}catch{}return Object.freeze(snapshot)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("documents")||changed.has("selectedDocumentIds"))&&this.selectedDocumentIds.length>0){const existing=new Set(this._documents.map(doc=>doc.id)),normalized=this.snapshotIds(this.selectedDocumentIds.filter(id=>existing.has(id)));(normalized.length!==this.selectedDocumentIds.length||normalized.some((id,index)=>id!==this.selectedDocumentIds[index]))&&(this.selectedDocumentIds=normalized)}if((changed.has("documents")||changed.has("tagFilter"))&&this.tagFilter.length>0){const availableTags=new Set(this._documents.flatMap(document=>document.tags??[])),normalized=this.snapshotIds(this.tagFilter.filter(tag=>availableTags.has(tag)));(normalized.length!==this.tagFilter.length||normalized.some((tag,index)=>tag!==this.tagFilter[index]))&&(this.tagFilter=normalized)}}updated(changed){super.updated(changed),!this.isMounting&&changed.has("selectedDocumentIds")&&this.announcementSink?.announce(this.selectionCountText()),this.isMounting=!1}selectionCountText(){return this.localize("documentLibrarySelectedCount",void 0,{count:getNumberFormat(this.effectiveLocale).format(this.selectedDocumentIds.length)})}normalizeDate(value){if(value===void 0)return;const date=value instanceof Date?value:new Date(value);return Number.isNaN(date.getTime())?void 0:date}matchesTagFilter(document){if(this.tagFilter.length===0)return!0;const tags=new Set(document.tags??[]);return this.tagFilter.every(tag=>tags.has(tag))}get visibleDocuments(){const query=(this.searchTerm??"").trim().toLocaleLowerCase(this.effectiveLocale),matchFn=this.filter??this.defaultFilter;return[...this._documents.filter(document=>(query===""||matchFn(document,query))&&this.matchesTagFilter(document))].sort(this.compareDocuments)}get allTags(){const tags=new Set;for(const document of this._documents)for(const tag of document.tags??[])tags.add(tag);return[...tags].sort((a,b)=>a.localeCompare(b,this.effectiveLocale))}emitFilterChange(){const tags=Object.freeze([...this.tagFilter]);this.emit("lr-filter-change",Object.freeze({searchTerm:this.searchTerm,tags,matchCount:this.visibleDocuments.length}))}isSortKey(value){return value==="name"||value==="version"||value==="owner"||value==="freshness"||value==="updatedAt"}openDocument(document){this.emit("lr-open",Object.freeze({documentId:document.id}))}setSelected(ids){this.selectedDocumentIds=[...ids];const eventIds=Object.freeze([...this.selectedDocumentIds]);this.emit("lr-selection-change",Object.freeze({documentIds:eventIds}))}toggleSelection(document,checked){const next=new Set(this.selectedDocumentIds);checked?next.add(document.id):next.delete(document.id),this.setSelected(next)}toggleSelectAll(checked,visible){const next=new Set(this.selectedDocumentIds);for(const document of visible)checked?next.add(document.id):next.delete(document.id);this.setSelected(next)}freshnessLabel(freshness){switch(freshness){case"fresh":return this.localize("documentLibraryFreshnessFresh");case"aging":return this.localize("documentLibraryFreshnessAging");case"stale":return this.localize("documentLibraryFreshnessStale")}}renderSelectAllCheckbox(visible){const allSelected=visible.length>0&&visible.every(document=>this.selectedDocumentIds.includes(document.id)),someSelected=!allSelected&&visible.some(document=>this.selectedDocumentIds.includes(document.id));return html`<lr-checkbox
       .checked=${allSelected}
       .indeterminate=${someSelected}
       aria-label=${this.localize("documentLibrarySelectAll")}

package/dist/components/data/table/table.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-table-heat-tint-lo-default:var(--lr-color-brand-quiet);--_lr-table-heat-tint-hi-default:var(--lr-color-brand);--_lr-table-resize-min-width-default:var(--lr-size-3rem);--_lr-table-resize-handle-opacity-default:.12;inline-size:100%;display:block}[part=base]{max-block-size:var(--lr-table-max-height,none);border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-radius-container);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);overflow:auto}:host([scroll-mode=page]) [part=base],:host([scroll-mode=auto]) [part=base]:not([data-scroll-overflow]){max-block-size:none;overflow:visible}[part=filter-label]{align-items:center;gap:var(--lr-space-s);padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);display:flex}[part=filter]{min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;flex:1}[part=filter]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:where([part=filter]):hover{background:var(--lr-color-brand-quiet)}:where([part=filter]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=filter]::placeholder{color:var(--lr-color-text-quiet);opacity:1}[part=filter][type=search]::-webkit-search-cancel-button,[part=filter][type=search]::-webkit-search-decoration{appearance:none}[part=filter-clear]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-xs);cursor:pointer;color:var(--lr-color-text-quiet);padding:var(--lr-space-xs);transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=filter-clear]:hover{color:var(--lr-color-text)}[part=filter-clear]:active{color:var(--lr-color-text);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=filter-clear]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=loading]:not(.sr-only){min-block-size:var(--lr-size-8rem);padding:var(--lr-space-l);place-items:center;display:grid}[part=pagination]{border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);display:block}[part=base][data-hide-priority-low]:not([data-force-visible]) [data-priority=low],[part=base][data-hide-priority-medium]:not([data-force-visible]) [data-priority=medium]{display:none}[part=table]{border-collapse:collapse;inline-size:100%;font:inherit;font-size:var(--lr-table-font-size,inherit)}[part=table][data-layout=fixed]{table-layout:fixed}[part=row],[part=head]>tr,[part=footer-row]{block-size:max(var(--lr-size-24px), var(--lr-table-row-height,calc(var(--lr-table-row-min-height) * var(--_lr-density-control,1))), var(--_lr-density-target-min,0px))}[part=header-cell]{background:var(--_lr-table-header-bg,var(--lr-color-surface));text-align:start;font-weight:var(--lr-font-weight-semibold);padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);cursor:default;white-space:nowrap;position:sticky;inset-block-start:0}[part=header-cell][data-resizable]{padding-inline-end:calc(var(--lr-space-s) + var(--lr-size-0-5rem))}[part=resize-handle]{inline-size:var(--lr-size-0-5rem);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;position:absolute;inset-block:0;inset-inline-end:0}[part=resize-handle]:hover,[part=resize-handle]:focus-visible{background:var(--lr-table-resize-handle-hover-bg,var(--lr-color-brand));opacity:var(--lr-table-resize-handle-hover-opacity,var(--lr-table-resize-handle-opacity,var(--_lr-table-resize-handle-opacity-default)))}[part=resize-handle]:active,[part=resize-handle][data-resizing]{background:var(--lr-table-resize-handle-active-bg,var(--lr-table-resize-handle-hover-bg,var(--lr-color-brand)));opacity:var(--lr-table-resize-handle-active-opacity,calc(var(--lr-table-resize-handle-hover-opacity,var(--lr-table-resize-handle-opacity,var(--_lr-table-resize-handle-opacity-default))) * 2))}[part=resize-handle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}:where([part=header-cell][aria-sort]:not([aria-sort=none])),:where([part=header-cell][data-sortable]){cursor:pointer}[part=header-cell]:where([aria-sort]:not([aria-sort=none])){--_lr-table-header-bg:var(--lr-table-header-sorted-bg,var(--lr-color-surface));background:var(--_lr-table-header-bg);color:var(--lr-table-header-sorted-color,inherit)}[part=header-cell][data-sortable]:hover{background:var(--lr-color-brand-quiet)}[part=header-cell][data-sortable]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=header-cell]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=header-cell][data-align=end]{text-align:end}[part~=sort-icon]{vertical-align:middle;transition:transform var(--lr-transition-fast);margin-inline-start:var(--lr-space-xs);display:inline-block}[part~=sort-icon-inactive]{color:var(--lr-color-text-quiet)}@media (forced-colors:active){[part~=sort-icon-inactive]{color:canvastext!important}}[part~=sort-icon] svg{display:block}[part~=sort-icon][data-dir=asc]{transform:rotate(-90deg)}[part~=sort-icon][data-dir=desc]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){[part~=sort-icon]{transition:none!important}}[part=row][data-stripe]{background:var(--lr-table-row-stripe-bg,transparent);--_lr-table-row-bg:var(--lr-table-row-stripe-bg,var(--lr-color-surface))}[part=row][aria-selected=true]{--_lr-table-row-bg:var(--lr-table-row-selected-bg,var(--lr-color-brand-quiet));background:var(--_lr-table-row-bg)}[part=row]:hover{--_lr-table-row-bg:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-hover));background:var(--_lr-table-row-bg)}[part=row]:active{--_lr-table-row-bg:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));background:var(--_lr-table-row-bg)}@media (forced-colors:active){:where([part~=row][aria-selected=true]){outline:var(--lr-border-width-medium) solid Highlight;outline-offset:calc(-1 * var(--lr-border-width-medium))}:where([part~=row]:hover:not([aria-selected=true])){outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(-1 * var(--lr-border-width-thin))}}[part=group-cell]{padding:var(--lr-table-cell-padding-compact,var(--lr-space-xs) var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface-raised);color:var(--lr-color-text-quiet);font-weight:var(--lr-font-weight-semibold);text-align:start}[part=row]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=cell]{padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);color:var(--lr-table-cell-color,inherit)}[part=cell][data-editable]{transition:var(--lr-transition-interactive)}:where([part=cell][data-editable]):hover{cursor:pointer;background:var(--lr-color-brand-quiet)}:where([part=cell][data-editable]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=cell][data-editable]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=cell] a:where(:any-link){color:var(--lr-table-cell-link-color,var(--lr-color-brand))}[part=cell] a:where(:any-link):hover,[part=cell] a:where(:any-link):focus-visible,[part=cell] a:where(:any-link):active{color:var(--lr-table-cell-link-hover-color,var(--lr-table-cell-link-color,var(--lr-color-brand)));text-decoration-thickness:var(--lr-border-width-medium)}[part=cell-editor]{box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-brand);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit}[part=cell-editor]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:where([part=cell-editor]):hover{background:var(--lr-color-brand-quiet)}:where([part=cell-editor]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=cell-editor][type=number]{appearance:textfield}[part=cell-editor][type=number]::-webkit-inner-spin-button,[part=cell-editor][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}select[part=cell-editor]{appearance:none;cursor:pointer;padding-inline-end:calc(var(--lr-space-s) + var(--lr-size-0-75rem))}select[part=cell-editor] option{background:var(--lr-color-surface);color:var(--lr-color-text)}[part=cell]:has(>select[part=cell-editor]){position:relative}[part=cell]:has(>select[part=cell-editor]):after{content:"";inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);color:var(--lr-color-text-quiet);pointer-events:none;background:currentColor;position:absolute;inset-block-start:50%;inset-inline-end:var(--lr-space-s);transform:translateY(-50%)rotate(90deg);mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1.75\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"%3E%3Cpolyline points=\\"9 6 15 12 9 18\\"%3E%3C/polyline%3E%3C/svg%3E") 50%/contain no-repeat}@media (forced-colors:active){[part=cell]:has(>select[part=cell-editor]):after{forced-color-adjust:none;color:buttontext}}[part=cell][data-align=end]{text-align:end}[part=row-total-cell]{padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font-weight:var(--lr-font-weight-semibold);text-align:end}[part=cell][data-heat]{background:color-mix(in srgb, var(--lr-table-heat-tint-hi,var(--_lr-table-heat-tint-hi-default)) var(--lr-table-heat-t), var(--lr-table-heat-tint-lo,var(--_lr-table-heat-tint-lo-default)))}[part=expand-toggle-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);text-align:center}[part=row-expand-toggle]{font:inherit;padding:var(--lr-space-xs);cursor:pointer;color:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}[part=row-expand-toggle]:hover{background:var(--lr-color-brand-quiet)}[part=row-expand-toggle]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=row-expand-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=row-expand-icon]{transition:transform var(--lr-transition-fast);display:inline-block}[part=row-expand-icon] svg{display:block}[part=row-expand-toggle][aria-expanded=true] [part=row-expand-icon]{transform:rotate(90deg)}:host(:dir(rtl)) [part=row-expand-icon]{transform:rotate(180deg)}:host(:dir(rtl)) [part=row-expand-toggle][aria-expanded=true] [part=row-expand-icon]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){[part=row-expand-icon]{transition:none!important}}[part=expanded-row] [part=expanded-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface)}[part=header-cell][data-sticky],[part=cell][data-sticky]{z-index:var(--lr-layer-content);box-shadow:var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle);position:sticky;inset-inline-start:var(--lr-table-sticky-offset,0)}[part=cell][data-sticky]{background:var(--_lr-table-row-bg,var(--lr-color-surface))}[part=header-cell][data-sticky]{background:var(--_lr-table-header-bg,var(--lr-color-surface))}[part=header-cell][data-sticky=end],[part=cell][data-sticky=end]{box-shadow:calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle);inset-inline-start:auto;inset-inline-end:var(--lr-table-sticky-offset,0)}:host(:dir(rtl)) [part=header-cell][data-sticky],:host(:dir(rtl)) [part=cell][data-sticky]{box-shadow:calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle)}:host(:dir(rtl)) [part=header-cell][data-sticky=end],:host(:dir(rtl)) [part=cell][data-sticky=end]{box-shadow:var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle)}[part=foot]{background:var(--lr-color-surface);position:sticky;inset-block-end:0}[part=footer-cell]{padding:var(--lr-table-cell-padding-compact,var(--lr-space-xs) var(--lr-space-s));border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font-weight:var(--lr-font-weight-semibold);text-align:start}[part=footer-cell][data-align=end]{text-align:end}[part=more-button],[part=reveal-columns-button]{inline-size:100%;padding:var(--lr-space-s);color:var(--lr-color-brand);font:inherit;cursor:pointer;border:none;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);background:0 0;display:block}[part=more-button]:hover:where(:not([aria-disabled=true])),[part=reveal-columns-button]:hover{background:var(--lr-color-brand-quiet)}[part=more-button]:active:where(:not([aria-disabled=true])),[part=reveal-columns-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=more-button]:focus-visible,[part=reveal-columns-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=more-button]:where([aria-disabled=true]){cursor:progress}[part=error-row] [part=error-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface)}[part=retry-button]{padding:var(--lr-space-2xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);color:var(--lr-color-brand);font:inherit;cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex}[part=retry-button]:hover{background:var(--lr-color-brand-quiet)}[part=retry-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=retry-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-table-heat-tint-lo-default:var(--lr-color-brand-quiet);--_lr-table-heat-tint-hi-default:var(--lr-color-brand);--_lr-table-resize-min-width-default:var(--lr-size-3rem);--_lr-table-resize-handle-opacity-default:.12;inline-size:100%;display:block}[part=base]{max-block-size:var(--lr-table-max-height,none);border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-radius-container);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);overflow:auto}:host([scroll-mode=page]) [part=base],:host([scroll-mode=auto]) [part=base]:not([data-scroll-overflow]){max-block-size:none;overflow:visible}[part=filter-label]{align-items:center;gap:var(--lr-space-s);padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);display:flex}[part=filter]{min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;flex:1}[part=filter]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:where([part=filter]):hover{background:var(--lr-color-brand-quiet)}:where([part=filter]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=filter]::placeholder{color:var(--lr-color-text-quiet);opacity:1}[part=filter][type=search]::-webkit-search-cancel-button,[part=filter][type=search]::-webkit-search-decoration{appearance:none}[part=filter-clear]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-xs);cursor:pointer;color:var(--lr-color-text-quiet);padding:var(--lr-space-xs);transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:0;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=filter-clear]:hover{color:var(--lr-color-text)}[part=filter-clear]:active{color:var(--lr-color-text);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=filter-clear]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=loading]:not(.sr-only){min-block-size:var(--lr-size-8rem);padding:var(--lr-space-l);place-items:center;display:grid}[part=pagination]{border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);display:block}[part=base][data-hide-priority-low]:not([data-force-visible]) [data-priority=low],[part=base][data-hide-priority-medium]:not([data-force-visible]) [data-priority=medium]{display:none}[part=table]{border-collapse:collapse;inline-size:100%;font:inherit;font-size:var(--lr-table-font-size,inherit)}[part=table][data-layout=fixed]{table-layout:fixed}[part=row],[part=head]>tr,[part=footer-row]{block-size:max(var(--lr-size-24px), var(--lr-table-row-height,calc(var(--lr-table-row-min-height) * var(--_lr-density-control,1))), var(--_lr-density-target-min,0px))}[part=header-cell]{background:var(--_lr-table-header-bg,var(--lr-color-surface));text-align:start;font-weight:var(--lr-font-weight-semibold);padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);cursor:default;white-space:nowrap;position:sticky;inset-block-start:0}[part=header-cell][data-resizable]{padding-inline-end:calc(var(--lr-space-s) + var(--lr-size-0-5rem))}[part=resize-handle]{inline-size:var(--lr-size-0-5rem);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;position:absolute;inset-block:0;inset-inline-end:0}[part=resize-handle]:hover,[part=resize-handle]:focus-visible{background:var(--lr-table-resize-handle-hover-bg,var(--lr-color-brand));opacity:var(--lr-table-resize-handle-hover-opacity,var(--lr-table-resize-handle-opacity,var(--_lr-table-resize-handle-opacity-default)))}[part=resize-handle]:active,[part=resize-handle][data-resizing]{background:var(--lr-table-resize-handle-active-bg,var(--lr-table-resize-handle-hover-bg,var(--lr-color-brand)));opacity:var(--lr-table-resize-handle-active-opacity,calc(var(--lr-table-resize-handle-hover-opacity,var(--lr-table-resize-handle-opacity,var(--_lr-table-resize-handle-opacity-default))) * 2))}[part=resize-handle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}:where([part=header-cell][aria-sort]:not([aria-sort=none])),:where([part=header-cell][data-sortable]){cursor:pointer}[part=header-cell]:where([aria-sort]:not([aria-sort=none])){--_lr-table-header-bg:var(--lr-table-header-sorted-bg,var(--lr-color-surface));background:var(--_lr-table-header-bg);color:var(--lr-table-header-sorted-color,inherit)}[part=header-cell][data-sortable]:hover{background:var(--lr-color-brand-quiet)}[part=header-cell][data-sortable]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=header-cell]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=header-cell][data-align=end]{text-align:end}[part~=sort-icon]{vertical-align:middle;transition:transform var(--lr-transition-fast);margin-inline-start:var(--lr-space-xs);display:inline-block}[part~=sort-icon-inactive]{color:var(--lr-color-text-quiet)}@media (forced-colors:active){[part~=sort-icon-inactive]{color:canvastext!important}}[part~=sort-icon] svg{display:block}[part~=sort-icon][data-dir=asc]{transform:rotate(-90deg)}[part~=sort-icon][data-dir=desc]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){[part~=sort-icon]{transition:none!important}}[part=row][data-stripe]{background:var(--lr-table-row-stripe-bg,transparent);--_lr-table-row-bg:var(--lr-table-row-stripe-bg,var(--lr-color-surface))}[part=row][aria-selected=true]{--_lr-table-row-bg:var(--lr-table-row-selected-bg,var(--lr-color-brand-quiet));background:var(--_lr-table-row-bg)}[part=row]:hover{--_lr-table-row-bg:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-hover));background:var(--_lr-table-row-bg)}[part=row]:active{--_lr-table-row-bg:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));background:var(--_lr-table-row-bg)}@media (forced-colors:active){:where([part~=row][aria-selected=true]){outline:var(--lr-border-width-medium) solid Highlight;outline-offset:calc(-1 * var(--lr-border-width-medium))}:where([part~=row]:hover:not([aria-selected=true])){outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(-1 * var(--lr-border-width-thin))}}[part=group-cell]{padding:var(--lr-table-cell-padding-compact,var(--lr-space-xs) var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface-raised);color:var(--lr-color-text-quiet);font-weight:var(--lr-font-weight-semibold);text-align:start}[part=row]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=cell]{padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);color:var(--lr-table-cell-color,inherit)}[part=cell][data-editable]{transition:var(--lr-transition-interactive)}:where([part=cell][data-editable]):hover{cursor:pointer;background:var(--lr-color-brand-quiet)}:where([part=cell][data-editable]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=cell][data-editable]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=cell] a:where(:any-link){color:var(--lr-table-cell-link-color,var(--lr-color-brand))}[part=cell] a:where(:any-link):hover,[part=cell] a:where(:any-link):focus-visible,[part=cell] a:where(:any-link):active{color:var(--lr-table-cell-link-hover-color,var(--lr-table-cell-link-color,var(--lr-color-brand)));text-decoration-thickness:var(--lr-border-width-medium)}[part=cell-editor]{box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-brand);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit}[part=cell-editor]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:where([part=cell-editor]):hover{background:var(--lr-color-brand-quiet)}:where([part=cell-editor]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=cell-editor][type=number]{appearance:textfield}[part=cell-editor][type=number]::-webkit-inner-spin-button,[part=cell-editor][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}select[part=cell-editor]{appearance:none;cursor:pointer;padding-inline-end:calc(var(--lr-space-s) + var(--lr-size-0-75rem))}select[part=cell-editor] option{background:var(--lr-color-surface);color:var(--lr-color-text)}[part=cell]:has(>select[part=cell-editor]){position:relative}[part=cell]:has(>select[part=cell-editor]):after{content:"";inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);color:var(--lr-color-text-quiet);pointer-events:none;background:currentColor;position:absolute;inset-block-start:50%;inset-inline-end:var(--lr-space-s);transform:translateY(-50%)rotate(90deg);mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"1.75\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"%3E%3Cpolyline points=\\"9 6 15 12 9 18\\"%3E%3C/polyline%3E%3C/svg%3E") 50%/contain no-repeat}@media (forced-colors:active){[part=cell]:has(>select[part=cell-editor]):after{forced-color-adjust:none;color:buttontext}}[part=cell][data-align=end]{text-align:end}[part=row-total-cell]{padding:var(--lr-table-cell-padding,var(--lr-space-s));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font-weight:var(--lr-font-weight-semibold);text-align:end}[part=cell][data-heat]{background:color-mix(in srgb, var(--lr-table-heat-tint-hi,var(--_lr-table-heat-tint-hi-default)) var(--lr-table-heat-t), var(--lr-table-heat-tint-lo,var(--_lr-table-heat-tint-lo-default)))}[part=expand-toggle-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);text-align:center}[part=row-expand-toggle]{font:inherit;padding:var(--lr-space-xs);cursor:pointer;color:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}[part=row-expand-toggle]:hover{background:var(--lr-color-brand-quiet)}[part=row-expand-toggle]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=row-expand-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=row-expand-icon]{transition:transform var(--lr-transition-fast);display:inline-block}[part=row-expand-icon] svg{display:block}[part=row-expand-toggle][aria-expanded=true] [part=row-expand-icon]{transform:rotate(90deg)}:host(:dir(rtl)) [part=row-expand-icon]{transform:rotate(180deg)}:host(:dir(rtl)) [part=row-expand-toggle][aria-expanded=true] [part=row-expand-icon]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){[part=row-expand-icon]{transition:none!important}}[part=expanded-row] [part=expanded-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface)}[part=header-cell][data-sticky],[part=cell][data-sticky]{z-index:var(--lr-layer-content);box-shadow:var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle);position:sticky;inset-inline-start:var(--lr-table-sticky-offset,0)}[part=cell][data-sticky]{background:var(--_lr-table-row-bg,var(--lr-color-surface))}[part=header-cell][data-sticky]{background:var(--_lr-table-header-bg,var(--lr-color-surface))}[part=header-cell][data-sticky=end],[part=cell][data-sticky=end]{box-shadow:calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle);inset-inline-start:auto;inset-inline-end:var(--lr-table-sticky-offset,0)}:host(:dir(rtl)) [part=header-cell][data-sticky],:host(:dir(rtl)) [part=cell][data-sticky]{box-shadow:calc(-1 * var(--lr-size-1px)) 0 0 0 var(--lr-color-border-subtle)}:host(:dir(rtl)) [part=header-cell][data-sticky=end],:host(:dir(rtl)) [part=cell][data-sticky=end]{box-shadow:var(--lr-size-1px) 0 0 0 var(--lr-color-border-subtle)}[part=foot]{background:var(--lr-color-surface);position:sticky;inset-block-end:0}[part=footer-cell]{padding:var(--lr-table-cell-padding-compact,var(--lr-space-xs) var(--lr-space-s));border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font-weight:var(--lr-font-weight-semibold);text-align:start}[part=footer-cell][data-align=end]{text-align:end}[part=more-button],[part=reveal-columns-button]{inline-size:100%;padding:var(--lr-space-s);color:var(--lr-color-brand);font:inherit;cursor:pointer;border:none;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);background:0 0;display:block}[part=more-button]:hover:where(:not([aria-disabled=true])),[part=reveal-columns-button]:hover{background:var(--lr-color-brand-quiet)}[part=more-button]:active:where(:not([aria-disabled=true])),[part=reveal-columns-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=more-button]:focus-visible,[part=reveal-columns-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=more-button]:where([aria-disabled=true]){cursor:progress}[part=error-row] [part=error-cell]{padding:var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface)}[part=retry-button]{padding:var(--lr-space-2xs) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);color:var(--lr-color-brand);font:inherit;cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex}[part=retry-button]:hover{background:var(--lr-color-brand-quiet)}[part=retry-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=retry-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};

package/dist/components/forms/color-picker/color-picker.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{deferredPlaceReady as place,loadAnchoredOverlayRuntime}from"../../../internal/anchored-overlay-runtime.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]),SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"],MAX_COLOR_PICKER_SWATCHES=1e4,EMPTY_COLOR_PICKER_SWATCHES=Object.freeze([]);function projectColorPickerSwatches(value){try{if(typeof value=="string")return Object.freeze(value.split(";").slice(0,MAX_COLOR_PICKER_SWATCHES).flatMap(entry=>{const color=entry.trim();return color?[Object.freeze({color})]:[]}));if(!Array.isArray(value))return EMPTY_COLOR_PICKER_SWATCHES;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_COLOR_PICKER_SWATCHES;const swatches=[];for(let index=0;index<Math.min(length.value,MAX_COLOR_PICKER_SWATCHES);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR)continue;if(typeof entry.value=="string"){const color2=entry.value.trim();color2&&swatches.push(Object.freeze({color:color2}));continue}if(entry.value===null||typeof entry.value!="object"||Array.isArray(entry.value))continue;const color=getOwnDataDescriptor(entry.value,"color"),label=getOwnDataDescriptor(entry.value,"label"),disabled=getOwnDataDescriptor(entry.value,"disabled"),icon=getOwnDataDescriptor(entry.value,"icon");if(color===MISSING_OWN_DATA_DESCRIPTOR||color===UNSAFE_OWN_DATA_DESCRIPTOR||typeof color.value!="string"||color.value.trim()==="")continue;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof label.value=="string"&&label.value.trim()?label.value:void 0,disabledValue=disabled===MISSING_OWN_DATA_DESCRIPTOR||disabled===UNSAFE_OWN_DATA_DESCRIPTOR||typeof disabled.value!="boolean"?void 0:disabled.value,iconValue=icon===MISSING_OWN_DATA_DESCRIPTOR||icon===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:icon.value;swatches.push(Object.freeze({color:color.value.trim(),...labelValue===void 0?{}:{label:labelValue},...disabledValue===void 0?{}:{disabled:disabledValue},...iconValue===void 0?{}:{icon:iconValue}}))}return Object.freeze(swatches)}catch{return EMPTY_COLOR_PICKER_SWATCHES}}function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled&&!this.readonly;if(normalized!==this._open){if(!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}syncExternalDescription(){const target=this.isConnected?this.triggerEl():null;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.readonly=!1,this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.localDescriptionIds="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.pendingPlacementEffects=0,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.projectedSwatches=EMPTY_COLOR_PICKER_SWATCHES,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled||this.readonly){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled||this.readonly){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{if(event.stopPropagation(),this.liveDisabled||this.readonly){this.pendingInput=void 0,this.requestUpdate();return}this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target;if(this.liveDisabled||this.readonly){this.pendingInput=void 0,this.requestUpdate();return}const parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput=void 0,this.requestUpdate()},this.onFieldKeyDown=event=>{this.liveDisabled||this.readonly||event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{if(this.liveDisabled)return;const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled||this.readonly)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled||this.readonly)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=Array.from(this.children).some(el=>el.getAttribute("slot")===slot.name);slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=!!eyeDropperConstructor(this.ownerDocument.defaultView)};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.releaseExternalDescription(),this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),(this.liveDisabled||this.readonly)&&(this.open&&this.applyOpenState(!1),this.pendingInput=void 0,this.keyboardChanged=!1,this.cancelDrag()),!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.checkValidity(),changed.has("open")){const suppressClose=!this.open&&this.suppressDisconnectedClose;this.suppressDisconnectedClose=!1;const announceOpen=this.open&&this.hasRenderedOnce&&this.isConnected;this.open&&!this.inline?(this.pendingPlacementEffects=announceOpen?3:2,this.activatePanel()):(this.pendingPlacementEffects=0,this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=void 0),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&(this.open&&this.inline?this.emit("lr-after-show"):this.open||this.emit("lr-after-hide"))}else if(changed.has("inline"))if(this.inline){this.teardownOverlay();const panel=this.panelEl();panel?.style.removeProperty("position"),panel?.hasAttribute("data-lr-top-layer")&&loadAnchoredOverlayRuntime().then(runtime=>runtime.releaseTopLayer?.(panel),()=>{});const announceOpen=(this.pendingPlacementEffects&1)!==0;this.pendingPlacementEffects=0,announceOpen&&this.emit("lr-after-show")}else this.open&&this.activatePanel();else this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("positioningStrategy"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const source=this.swatches;return source!==this.swatchSource&&(this.swatchSource=source,this.projectedSwatches=projectColorPickerSwatches(source)),this.projectedSwatches}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();if(!anchor||!panel)return;const handle=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")});this.cleanupPositioner=handle,handle.ready.then(positioned=>{if(this.cleanupPositioner!==handle||!this.open||this.inline||!this.isConnected)return;if(!positioned){this.pendingPlacementEffects=0,this.suppressDisconnectedClose=!0,this.applyOpenState(!1);return}const effects=this.pendingPlacementEffects;this.pendingPlacementEffects=0,effects&2&&this.overlayHandle?.focusInitial(),effects&1&&this.emit("lr-after-show")})}activatePanel(){!this.isConnected||this.inline||(this.pendingPlacementEffects|=2,this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl()}),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.readonly||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){if(this.liveDisabled||this.readonly||swatch.disabled)return;const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);return html`<div
+import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{live}from"lit/directives/live.js";import{LyraElement}from"../../../internal/lyra-element.js";import{FormAssociated}from"../../../internal/form-associated.js";import{hostAriaLabel,nextId,srOnly}from"../../../internal/a11y.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{deferredPlaceReady as place,loadAnchoredOverlayRuntime}from"../../../internal/anchored-overlay-runtime.js";import{isRtl,rtlAwarePlacement}from"../../../internal/rtl.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{activateNonmodalOverlay,composedContains}from"../../../internal/nonmodal-overlay-manager.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{activeElementIn}from"../../../internal/active-element.js";import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{eyeIcon}from"../../../internal/icons.js";import{dispatchNativeEvent,dispatchNativeInputEvent}from"../../../internal/native-event-relay.js";import{cssColor,formatColor,hsva,parseColor,sameColor,withAlphaFormat}from"./color-core.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./color-picker.styles.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_colorPicker,LYRA_DEFAULT_colorPickerCurrentValue,LYRA_DEFAULT_colorPickerEyeDropper,LYRA_DEFAULT_colorPickerHue,LYRA_DEFAULT_colorPickerHueValue,LYRA_DEFAULT_colorPickerOpacity,LYRA_DEFAULT_colorPickerOpacityValue,LYRA_DEFAULT_colorPickerSaturationBrightness,LYRA_DEFAULT_colorPickerSaturationBrightnessValue,LYRA_DEFAULT_colorPickerSwatch,LYRA_DEFAULT_colorPickerSwatches,LYRA_DEFAULT_colorPickerToggleFormat,LYRA_DEFAULT_colorPickerValueField,LYRA_DEFAULT_fieldRequired}from"../../../internal/default-strings.generated.js";const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]),SMALL_STEP=1,LARGE_STEP_MULTIPLIER=10,FORMAT_CYCLE=["hex","rgb","hsl","hsv"],MAX_COLOR_PICKER_SWATCHES=1e4,EMPTY_COLOR_PICKER_SWATCHES=Object.freeze([]);function projectColorPickerSwatches(value){try{if(typeof value=="string")return Object.freeze(value.split(";").slice(0,MAX_COLOR_PICKER_SWATCHES).flatMap(entry=>{const color=entry.trim();return color?[Object.freeze({color})]:[]}));if(!Array.isArray(value))return EMPTY_COLOR_PICKER_SWATCHES;const length=getOwnDataDescriptor(value,"length");if(length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0)return EMPTY_COLOR_PICKER_SWATCHES;const swatches=[];for(let index=0;index<Math.min(length.value,MAX_COLOR_PICKER_SWATCHES);index+=1){const entry=getOwnDataDescriptor(value,String(index));if(entry===MISSING_OWN_DATA_DESCRIPTOR||entry===UNSAFE_OWN_DATA_DESCRIPTOR)continue;if(typeof entry.value=="string"){const color2=entry.value.trim();color2&&swatches.push(Object.freeze({color:color2}));continue}if(entry.value===null||typeof entry.value!="object"||Array.isArray(entry.value))continue;const color=getOwnDataDescriptor(entry.value,"color"),label=getOwnDataDescriptor(entry.value,"label"),disabled=getOwnDataDescriptor(entry.value,"disabled"),icon=getOwnDataDescriptor(entry.value,"icon");if(color===MISSING_OWN_DATA_DESCRIPTOR||color===UNSAFE_OWN_DATA_DESCRIPTOR||typeof color.value!="string"||color.value.trim()==="")continue;const labelValue=label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:typeof label.value=="string"&&label.value.trim()?label.value:void 0,disabledValue=disabled===MISSING_OWN_DATA_DESCRIPTOR||disabled===UNSAFE_OWN_DATA_DESCRIPTOR||typeof disabled.value!="boolean"?void 0:disabled.value,iconValue=icon===MISSING_OWN_DATA_DESCRIPTOR||icon===UNSAFE_OWN_DATA_DESCRIPTOR?void 0:icon.value;swatches.push(Object.freeze({color:color.value.trim(),...labelValue===void 0?{}:{label:labelValue},...disabledValue===void 0?{}:{disabled:disabledValue},...iconValue===void 0?{}:{icon:iconValue}}))}return Object.freeze(swatches)}catch{return EMPTY_COLOR_PICKER_SWATCHES}}function eyeDropperConstructor(ownerWindow){return ownerWindow?.EyeDropper}function isNodeValue(value){if(value===null||typeof value!="object")return!1;const candidate=value;return typeof candidate.nodeType=="number"&&typeof candidate.getRootNode=="function"}function isElementValue(value){return!isNodeValue(value)||value.nodeType!==1?!1:typeof value.matches=="function"}class ColorPickerBase extends LyraElement{}class LyraColorPicker extends FormAssociated(ColorPickerBase){static{this.defaultStrings={...super.defaultStrings,colorPicker:LYRA_DEFAULT_colorPicker,colorPickerCurrentValue:LYRA_DEFAULT_colorPickerCurrentValue,colorPickerEyeDropper:LYRA_DEFAULT_colorPickerEyeDropper,colorPickerHue:LYRA_DEFAULT_colorPickerHue,colorPickerHueValue:LYRA_DEFAULT_colorPickerHueValue,colorPickerOpacity:LYRA_DEFAULT_colorPickerOpacity,colorPickerOpacityValue:LYRA_DEFAULT_colorPickerOpacityValue,colorPickerSaturationBrightness:LYRA_DEFAULT_colorPickerSaturationBrightness,colorPickerSaturationBrightnessValue:LYRA_DEFAULT_colorPickerSaturationBrightnessValue,colorPickerSwatch:LYRA_DEFAULT_colorPickerSwatch,colorPickerSwatches:LYRA_DEFAULT_colorPickerSwatches,colorPickerToggleFormat:LYRA_DEFAULT_colorPickerToggleFormat,colorPickerValueField:LYRA_DEFAULT_colorPickerValueField,fieldRequired:LYRA_DEFAULT_fieldRequired}}static get validators(){return[currentValidityValidator("required","disabled","readonly","value")]}static{this.styles=[LyraElement.styles,srOnly,sizes,styles]}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}get open(){return this._open}set open(next){const normalized=!!next&&!this.effectiveDisabled&&!this.readonly;if(normalized!==this._open){if(!this.hasRenderedOnce||!this.isConnected){this.applyOpenState(normalized);return}if(this.emit(normalized?"lr-show":"lr-hide",null,{cancelable:!0}).defaultPrevented){this.toggleAttribute("open",this._open);return}this.applyOpenState(normalized)}}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}get liveDisabled(){return this.effectiveDisabled||typeof this.matches=="function"&&this.matches(":disabled")}syncExternalDescription(){const target=this.isConnected?this.triggerEl():null;if(!target){this.releaseExternalDescription();return}this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds)}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}constructor(){super(),this.label="",this.hint="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.accessibleLabel="",this.readonly=!1,this.size="m",this.format="hex",this.opacity=!1,this.uppercase=!1,this.swatches="",this.withoutFormatToggle=!1,this.noFormatToggle=!1,this.inline=!1,this.placement="bottom-start",this._open=!1,this.hasLabel=!1,this.hasHint=!1,this.hasError=!1,this.hasEyeDropper=!1,this.color=hsva(0,0,0,1),this.valueNeedsParse=!1,this.localDescriptionIds="",this.hintId=nextId("color-picker-hint"),this.errorId=nextId("color-picker-error"),this.labelId=nextId("color-picker-label"),this.valueTextId=nextId("color-picker-value"),this.triggerId=nextId("color-picker-trigger"),this.panelId=nextId("color-picker-panel"),this.dragChanged=!1,this.keyboardChanged=!1,this.restoreFocusOnClose=!0,this.eyeDropperGeneration=0,this.suppressDisconnectedClose=!1,this.pendingPlacementEffects=0,this.interactionGeneration=0,this.hasRenderedOnce=!1,this.projectedSwatches=EMPTY_COLOR_PICKER_SWATCHES,this.onDocumentPointerDown=event=>{const target=event.composedPath()[0];if(!(isElementValue(target)&&composedContains(this,target))){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open=!this.open)},this.onPointerMove=event=>{if(this.drag?.pointerId===event.pointerId){if(this.effectiveDisabled||this.readonly){this.cancelDrag();return}this.applyPointer(event)}},this.onPointerUp=event=>{if(this.drag?.pointerId!==event.pointerId)return;if(this.effectiveDisabled||this.readonly){this.cancelDrag();return}this.applyPointer(event);const changed=this.dragChanged;this.endDrag(),changed&&this.emitCommit()},this.onPointerCancel=event=>{this.drag?.pointerId===event.pointerId&&this.cancelDrag()},this.onGridKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let next;inline!==null?next=hsva(this.color.h,this.color.s+inline,this.color.v,this.color.a):event.key==="ArrowUp"?next=hsva(this.color.h,this.color.s,this.color.v+step,this.color.a):event.key==="ArrowDown"?next=hsva(this.color.h,this.color.s,this.color.v-step,this.color.a):event.key==="Home"?next=hsva(this.color.h,0,this.color.v,this.color.a):event.key==="End"&&(next=hsva(this.color.h,100,this.color.v,this.color.a)),next&&(event.preventDefault(),this.applyKeyboardColor(next))},this.onHueKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1),inline=this.inlineStep(event);let hue;inline!==null?hue=this.color.h+inline:event.key==="ArrowUp"?hue=this.color.h+step:event.key==="ArrowDown"?hue=this.color.h-step:event.key==="Home"?hue=0:event.key==="End"&&(hue=360),hue!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(finiteRange(hue,0,0,360),this.color.s,this.color.v,this.color.a)))},this.onAlphaKeyDown=event=>{if(this.effectiveDisabled||this.readonly)return;const step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1)/100,inline=this.inlineStep(event);let alpha;inline!==null?alpha=this.color.a+inline/100:event.key==="ArrowUp"?alpha=this.color.a+step:event.key==="ArrowDown"?alpha=this.color.a-step:event.key==="Home"?alpha=0:event.key==="End"&&(alpha=1),alpha!==void 0&&(event.preventDefault(),this.applyKeyboardColor(hsva(this.color.h,this.color.s,this.color.v,alpha)))},this.onControlKeyUp=()=>{this.keyboardChanged&&(this.keyboardChanged=!1,this.emitCommit())},this.onFieldInput=event=>{if(event.stopPropagation(),this.liveDisabled||this.readonly){this.pendingInput=void 0,this.requestUpdate();return}this.pendingInput=event.target.value},this.onFieldChange=event=>{event.stopPropagation();const field=event.target;if(this.liveDisabled||this.readonly){this.pendingInput=void 0,this.requestUpdate();return}const parsed=parseColor(field.value);parsed&&this.commitColor(parsed),this.pendingInput=void 0,this.requestUpdate()},this.onFieldKeyDown=event=>{this.liveDisabled||this.readonly||event.key==="Enter"&&(event.preventDefault(),this.onFieldChange(event))},this.onFormatClick=()=>{if(this.liveDisabled)return;const index=FORMAT_CYCLE.indexOf(this.format);this.format=FORMAT_CYCLE[(index+1)%FORMAT_CYCLE.length]},this.onEyeDropperClick=()=>{const ownerWindow=this.ownerDocument.defaultView;if(!this.isConnected||!ownerWindow)return;const Constructor=eyeDropperConstructor(ownerWindow);if(!Constructor||this.effectiveDisabled||this.readonly)return;this.cancelEyeDropper();const generation=this.eyeDropperGeneration,controller=new ownerWindow.AbortController;this.eyeDropperAbort=controller,new Constructor().open({signal:controller.signal}).then(result=>{if(controller.signal.aborted||generation!==this.eyeDropperGeneration||!this.isConnected||this.ownerDocument.defaultView!==ownerWindow||this.effectiveDisabled||this.readonly)return;const parsed=parseColor(result?.sRGBHex??"");parsed&&this.commitColor(this.opacity?hsva(parsed.h,parsed.s,parsed.v,this.color.a):parsed)}).catch(()=>{}).finally(()=>{generation===this.eyeDropperGeneration&&(this.eyeDropperAbort=void 0)})},this.onControlFocus=event=>{event.stopPropagation();const previous=event.relatedTarget;isNodeValue(previous)&&this.renderRoot.contains(previous)||relayNativeEvent(this,event)},this.onControlBlur=event=>{event.stopPropagation();const next=event.relatedTarget;isNodeValue(next)&&this.renderRoot.contains(next)||(relayNativeEvent(this,event),this.requestUpdate())},this.controlFocusListener={capture:!0,handleEvent:event=>this.onControlFocus(event)},this.controlBlurListener={capture:!0,handleEvent:event=>this.onControlBlur(event)},this.onSlotChange=event=>{const slot=event.target,assigned=Array.from(this.children).some(el=>el.getAttribute("slot")===slot.name);slot.name==="label"&&(this.hasLabel=assigned),slot.name==="hint"&&(this.hasHint=assigned),slot.name==="error"&&(this.hasError=assigned)},new GlassScrollLayer(this,'[part~="panel"]',()=>!this.inline&&this.open),this.addEventListener("focusout",()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription();const seedEnvironmentState=()=>{const hasSlot=name=>Array.from(this.children).some(el=>el.getAttribute("slot")===name);this.hasLabel=hasSlot("label"),this.hasHint=hasSlot("hint"),this.hasError=hasSlot("error"),this.hasEyeDropper=!!eyeDropperConstructor(this.ownerDocument.defaultView)};this.hasUpdated?seedEnvironmentState():this.seedFirstRenderState(seedEnvironmentState)}disconnectedCallback(){this.releaseExternalDescription(),this.suppressDisconnectedClose=this.open,this.open=!1,this.teardownOverlay(!1),this.cancelEyeDropper(),this.interactionGeneration+=1,this.keyboardChanged=!1,this.cancelDrag(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.isConnected&&this.hasUpdated&&this.syncExternalDescription(),this.cancelDrag(),this.cancelEyeDropper()}get value(){return super.value}set value(next){this.endDrag(),super.value=next??"",this.valueNeedsParse=!0}willUpdate(changed){super.willUpdate(changed);const formatChanged=changed.has("format")||changed.has("opacity")||changed.has("uppercase");if(formatChanged&&this.cancelDrag(),(this.liveDisabled||this.readonly)&&(this.open&&this.applyOpenState(!1),this.pendingInput=void 0,this.keyboardChanged=!1,this.cancelDrag()),!this.valueNeedsParse&&!formatChanged)return;const shouldReserialize=formatChanged;if(this.valueNeedsParse){this.valueNeedsParse=!1;const parsed=parseColor(super.value);if(parsed){this.color=parsed,this.writeSerializedValue();return}}shouldReserialize&&parseColor(super.value)!==null&&this.writeSerializedValue()}updated(changed){if(super.updated(changed),this.syncExternalDescription(),changed.has("readonly")&&this.checkValidity(),changed.has("open")){const suppressClose=!this.open&&this.suppressDisconnectedClose;this.suppressDisconnectedClose=!1;const announceOpen=this.open&&this.hasRenderedOnce&&this.isConnected;this.open&&!this.inline?(this.pendingPlacementEffects=announceOpen?3:2,this.activatePanel()):(this.pendingPlacementEffects=0,this.teardownOverlay(this.restoreFocusOnClose),this.pendingInput=void 0),this.hasRenderedOnce&&this.isConnected&&!suppressClose&&(this.open&&this.inline?this.emit("lr-after-show"):this.open||this.emit("lr-after-hide"))}else if(changed.has("inline"))if(this.inline){this.teardownOverlay();const panel=this.panelEl();panel?.style.removeProperty("position"),panel?.hasAttribute("data-lr-top-layer")&&loadAnchoredOverlayRuntime().then(runtime=>runtime.releaseTopLayer?.(panel),()=>{});const announceOpen=(this.pendingPlacementEffects&1)!==0;this.pendingPlacementEffects=0,announceOpen&&this.emit("lr-after-show")}else this.open&&this.activatePanel();else this.open&&!this.inline&&(changed.has("placement")||changed.has("size")||changed.has("positioningStrategy"))&&this.positionPanel();this.hasRenderedOnce=!0}show(){this.open=!0}hide(){this.open=!1}getFormattedValue(format="hex"){return formatColor(this.color,format,this.uppercase)}getHexString(hue,saturation,brightness,alpha=100){const normalizedAlpha=finiteRange(alpha,100,0,100);return formatColor(hsva(hue,saturation,brightness,normalizedAlpha/100),normalizedAlpha<100?"hexa":"hex",this.uppercase)}click(){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="input"]')?.click():this.triggerEl()?.click())}focus(options){this.effectiveDisabled||(this.inline?this.renderRoot?.querySelector('[part~="grid-handle"]')?.focus(options):this.triggerEl()?.focus(options))}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}reportValidity(){const valid=super.reportValidity();return this.requestUpdate(),valid}setCustomValidity(message){super.setCustomValidity(message),this.requestUpdate()}resetValidity(){super.resetValidity(),this.requestUpdate()}activeFormat(){return withAlphaFormat(this.format,this.opacity)}writeSerializedValue(){const serialized=formatColor(this.color,this.activeFormat(),this.uppercase);return serialized===super.value?!1:(super.value=serialized,!0)}applyColor(next){next.h===this.color.h&&next.s===this.color.s&&next.v===this.color.v&&next.a===this.color.a||(this.color=next);const changed=this.writeSerializedValue();return changed&&(dispatchNativeInputEvent(this),this.emit("lr-input")),changed}emitCommit(){dispatchNativeEvent(this,"change"),this.emit("lr-change",{value:this.value})}commitColor(next){const changed=this.applyColor(next);return changed&&this.emitCommit(),changed}normalizedSwatches(){const source=this.swatches;return source!==this.swatchSource&&(this.swatchSource=source,this.projectedSwatches=projectColorPickerSwatches(source)),this.projectedSwatches}triggerEl(){return this.renderRoot?.querySelector('[part~="trigger"]')}panelEl(){return this.renderRoot?.querySelector('[part~="panel"]')}positionPanel(){this.cleanupPositioner?.(),this.cleanupPositioner=void 0;const anchor=this.triggerEl(),panel=this.panelEl();if(!anchor||!panel)return;const handle=place(anchor,panel,{placement:rtlAwarePlacement(this.placement,this),strategy:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")});this.cleanupPositioner=handle,handle.ready.then(positioned=>{if(this.cleanupPositioner!==handle||!this.open||this.inline||!this.isConnected)return;if(!positioned){this.pendingPlacementEffects=0,this.suppressDisconnectedClose=!0,this.applyOpenState(!1);return}const effects=this.pendingPlacementEffects;this.pendingPlacementEffects=0,effects&2&&this.overlayHandle?.focusInitial(),effects&1&&this.emit("lr-after-show")})}activatePanel(){!this.isConnected||this.inline||(this.pendingPlacementEffects|=2,this.positionPanel(),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelEl(),onEscape:()=>this.hide(),onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide(),this.open&&(this.restoreFocusOnClose=!0)},restoreFocusTo:this.triggerEl()}),this.lightDismissDocument=this.ownerDocument,this.lightDismissDocument.addEventListener("pointerdown",this.onDocumentPointerDown,!0))}teardownOverlay(restoreFocus=!0){this.cleanupPositioner?.(),this.cleanupPositioner=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.lightDismissDocument?.removeEventListener("pointerdown",this.onDocumentPointerDown,!0),this.lightDismissDocument=void 0,this.restoreFocusOnClose=!0}beginDrag(event,track,box){const dragWindow=box.ownerDocument.defaultView;if(!this.isConnected||!dragWindow||this.effectiveDisabled||this.readonly||this.drag!==void 0||event.pointerType==="mouse"&&event.button!==0)return;const rect=box.getBoundingClientRect();this.drag={pointerId:event.pointerId,track,rect,rtl:isRtl(this),startColor:{...this.color},startValue:this.captureLiveValueCheckpoint()},this.dragChanged=!1;try{box.setPointerCapture(event.pointerId)}catch{}this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerCancel),dragWindow.addEventListener("lostpointercapture",this.onPointerCancel),this.applyPointer(event)}applyPointer(event){const drag=this.drag;if(!drag)return;const{rect,rtl,track}=drag,rawX=rect.width===0?0:(event.clientX-rect.left)/rect.width,ratioX=finiteRange(rtl?1-rawX:rawX,0,0,1);let next;if(track==="grid"){const rawY=rect.height===0?0:(event.clientY-rect.top)/rect.height,ratioY=finiteRange(rawY,0,0,1);next=hsva(this.color.h,ratioX*100,(1-ratioY)*100,this.color.a)}else track==="hue"?next=hsva(ratioX*360,this.color.s,this.color.v,this.color.a):next=hsva(this.color.h,this.color.s,this.color.v,ratioX);this.dragChanged=this.applyColor(next)||this.dragChanged}cancelDrag(){const drag=this.drag;drag&&(this.endDrag(),this.color=drag.startColor,this.restoreLiveValueCheckpoint(drag.startValue),this.valueNeedsParse=!1)}endDrag(){this.drag=void 0,this.dragChanged=!1;const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerCancel),dragWindow?.removeEventListener("lostpointercapture",this.onPointerCancel)}inlineStep(event){const rtl=isRtl(this),forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft",step=SMALL_STEP*(event.shiftKey?LARGE_STEP_MULTIPLIER:1);return event.key===forward?step:event.key===backward?-step:null}applyKeyboardColor(next){const generation=this.interactionGeneration,changed=this.applyColor(next);generation===this.interactionGeneration&&(this.keyboardChanged=changed||this.keyboardChanged)}onSwatchClick(swatch){if(this.liveDisabled||this.readonly||swatch.disabled)return;const parsed=parseColor(swatch.color);parsed&&this.commitColor(this.opacity?parsed:hsva(parsed.h,parsed.s,parsed.v,1))}cancelEyeDropper(){this.eyeDropperGeneration+=1,this.eyeDropperAbort?.abort(),this.eyeDropperAbort=void 0}formatNumber(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0}).format(value)}renderGrid(){const saturation=Math.round(this.color.s),brightness=Math.round(this.color.v);return html`<div
       part="grid"
       style=${styleMap({"--lr-color-picker-grid-hue":cssColor(hsva(this.color.h,100,100,1))})}
       @pointerdown=${event=>this.beginDrag(event,"grid",event.currentTarget)}
@@ -83,6 +83,7 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
       aria-describedby=${describedBy||nothing}
       ?hidden=${!this.inline&&!this.open}
     >
+      <span class="glass-scroll-layer" aria-hidden="true"></span>
       ${this.renderGrid()}
       <div class="row">
         <div

package/dist/components/forms/color-picker/color-picker.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; --_lr-color-picker-swatch-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-color-picker-gap: var(--lr-space-xs); --_lr-color-picker-radius: var(--lr-radius); --_lr-color-picker-grid-inline-size: var( --grid-width, var(--lr-size-15rem) ); --_lr-color-picker-grid-block-size: var(--grid-height, var(--lr-size-8rem)); --_lr-color-picker-grid-handle-size: var( --grid-handle-size, var(--lr-size-1rem) ); --_lr-color-picker-slider-block-size: var( --slider-height, var(--lr-size-0-75rem) ); --_lr-color-picker-slider-handle-size: var( --slider-handle-size, var(--lr-size-1-25rem) ); --_lr-color-picker-palette-swatch-size: var( --swatch-size, var(--lr-size-1-5rem) ); --_lr-color-picker-checker-color: var(--lr-color-border); --_lr-color-picker-checker-size: var(--lr-size-0-5rem); --_lr-color-picker-hue-stops: hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%); --_lr-color-picker-swatch-color: transparent; --_lr-color-picker-grid-hue: transparent; --_lr-color-picker-opacity-gradient: none; --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } [part~="form-control"] { display: inline-flex; position: relative; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } [part~="label"] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part~="label"][hidden] { display: none; } ${formControlRequiredMarker} [part~='preview'], [part~='swatch'] { background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); } [part~="grid"], [part~="preview"], [part~="swatch"], [part~="hue-slider"], [part~="opacity-slider"], [part~="slider-handle"], [part~="trigger"]::before, [part~="trigger"]::after { forced-color-adjust: none; } [part="trigger-container"] { display: flex; align-items: center; } [part~="trigger"] { position: relative; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); inline-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); block-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); padding: 0; border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: transparent; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; box-sizing: border-box; inline-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); block-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-picker-border-color, var(--lr-color-border)); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); block-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); pointer-events: none; } :host(:dir(rtl)) [part~="trigger"]::before, :host(:dir(rtl)) [part~="trigger"]::after { transform: translate(50%, -50%); } [part~="preview"]::after, [part~="swatch"]::after { content: ""; display: block; block-size: 100%; inline-size: 100%; border-radius: inherit; background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); } [part~="trigger"]:where(:hover), [part~="trigger"]:where(:hover)::before { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="trigger"]:where(:active), [part~="trigger"]:where(:active)::before { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="trigger"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="trigger"]:where(:focus) { ${formControlFocusHalo} } [part~="panel"] { position: absolute; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); display: flex; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); padding: var(--lr-space-s); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-color-picker-radius, var(--lr-overlay-radius, var(--_lr-color-picker-radius)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); max-inline-size: var(--lr-positioner-available-inline-size, none); } [part~="panel"][hidden] { display: none; } :host([inline]) [part~="panel"] { position: static; inset: auto; box-shadow: none; } .row { display: flex; align-items: center; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } .sliders { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); min-inline-size: 0; } [part~="grid"] { position: relative; inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); max-inline-size: 100%; block-size: var( --lr-color-picker-grid-block-size, var(--_lr-color-picker-grid-block-size) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); cursor: crosshair; touch-action: none; background-color: var( --lr-color-picker-grid-hue, var(--_lr-color-picker-grid-hue) ); background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to right, hsl(0 0% 100%), transparent); } :host(:dir(rtl)) [part~="grid"] { background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to left, hsl(0 0% 100%), transparent); } [part~="grid-handle"] { position: absolute; inline-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); block-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="grid-handle"] { transform: translate(50%, -50%); } [part~="slider"] { position: relative; block-size: var(--lr-size-1-5rem); cursor: pointer; touch-action: pan-y; } [part~="slider"]::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --lr-color-picker-slider-block-size, var(--_lr-color-picker-slider-block-size) ); border-radius: var(--lr-radius-pill); transform: translateY(-50%); } [part~="slider"]:where(:hover)::before { box-shadow: 0 0 0 var(--lr-border-width-thin) var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:hover) { outline: var(--lr-border-width-thin) solid var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:active)::before { box-shadow: 0 0 0 var(--lr-border-width-medium) color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="slider"]:where(:active) { outline: var(--lr-border-width-medium) solid color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="hue-slider"]::before { background-image: linear-gradient( to right, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } :host(:dir(rtl)) [part~="hue-slider"]::before { background-image: linear-gradient( to left, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } [part~="opacity-slider"]::before { background-image: var( --lr-color-picker-opacity-gradient, var(--_lr-color-picker-opacity-gradient) ), conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: auto, var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)) var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ); background-color: var(--lr-color-surface); } [part~="slider-handle"] { position: absolute; inset-block-start: 50%; inline-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); block-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="slider-handle"] { transform: translate(50%, -50%); } [part~="grid-handle"]:where(:hover), [part~="slider-handle"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="grid-handle"]:where(:active), [part~="slider-handle"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); cursor: grabbing; } [part~="grid-handle"]:where(:focus-visible), [part~="slider-handle"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="preview"] { flex: 0 0 auto; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; } [part~="input"] { flex: 1 1 auto; min-inline-size: 0; padding: var(--lr-space-2xs) var(--lr-space-xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font-mono); font-size: var(--lr-font-size-sm); transition: border-color var(--lr-transition-fast); } [part~="input"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="input"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="format-button"], [part~="eyedropper-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="format-button"]:where(:hover), [part~="eyedropper-button"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="format-button"]:where(:active), [part~="eyedropper-button"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="format-button"]:where(:focus-visible), [part~="eyedropper-button"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatches"] { display: flex; flex-wrap: wrap; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); max-inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); } [part~="swatch"] { position: relative; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); padding: 0; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="swatch"]:where(:not(:disabled)):where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="swatch"]:where(:not(:disabled)):where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="swatch"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatch"]:disabled { cursor: not-allowed; opacity: var(--lr-color-picker-swatch-disabled-opacity, 0.5); } [part~="swatch-selected"] { border-color: var(--lr-color-picker-selected-border, var(--lr-color-brand)); border-width: var(--lr-border-width-medium); } [part~="swatch-selected"]::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lr-color-picker-selected-check-color, var(--lr-color-surface)); font-size: var(--lr-font-size-xs); text-shadow: 0 0 var(--lr-size-2px) var(--lr-color-shadow); z-index: var(--lr-layer-content); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="trigger"], :host(:disabled) [part~="grid"], :host(:disabled) [part~="grid-handle"], :host(:disabled) [part~="slider"], :host(:disabled) [part~="slider-handle"], :host(:disabled) [part~="input"], :host(:disabled) [part~="swatch"], :host(:disabled) [part~="format-button"], :host(:disabled) [part~="eyedropper-button"] { cursor: not-allowed; } [part="hint"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="hint"][hidden] { display: none; } [part="error"] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part="error"][hidden] { display: none; } [part~="form-control"], [part~="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; --_lr-color-picker-swatch-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-color-picker-gap: var(--lr-space-xs); --_lr-color-picker-radius: var(--lr-radius); --_lr-color-picker-grid-inline-size: var( --grid-width, var(--lr-size-15rem) ); --_lr-color-picker-grid-block-size: var(--grid-height, var(--lr-size-8rem)); --_lr-color-picker-grid-handle-size: var( --grid-handle-size, var(--lr-size-1rem) ); --_lr-color-picker-slider-block-size: var( --slider-height, var(--lr-size-0-75rem) ); --_lr-color-picker-slider-handle-size: var( --slider-handle-size, var(--lr-size-1-25rem) ); --_lr-color-picker-palette-swatch-size: var( --swatch-size, var(--lr-size-1-5rem) ); --_lr-color-picker-checker-color: var(--lr-color-border); --_lr-color-picker-checker-size: var(--lr-size-0-5rem); --_lr-color-picker-hue-stops: hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%); --_lr-color-picker-swatch-color: transparent; --_lr-color-picker-grid-hue: transparent; --_lr-color-picker-opacity-gradient: none; --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } [part~="form-control"] { display: inline-flex; position: relative; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } [part~="label"] { color: var(--lr-color-text); font-size: var(--lr-font-size-md-sm); } [part~="label"][hidden] { display: none; } ${formControlRequiredMarker} [part~='preview'], [part~='swatch'] { background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); } [part~="grid"], [part~="preview"], [part~="swatch"], [part~="hue-slider"], [part~="opacity-slider"], [part~="slider-handle"], [part~="trigger"]::before, [part~="trigger"]::after { forced-color-adjust: none; } [part="trigger-container"] { display: flex; align-items: center; } [part~="trigger"] { position: relative; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); inline-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); block-size: max( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)), var(--lr-icon-button-size) ); padding: 0; border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: transparent; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; box-sizing: border-box; inline-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); block-size: var( --lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-picker-border-color, var(--lr-color-border)); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var(--lr-color-surface); background-image: conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ) var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--lr-transition-fast); } [part~="trigger"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); block-size: calc( var(--lr-color-picker-swatch-size, var(--_lr-color-picker-swatch-size)) - var(--lr-border-width-thin) - var(--lr-border-width-thin) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); pointer-events: none; } :host(:dir(rtl)) [part~="trigger"]::before, :host(:dir(rtl)) [part~="trigger"]::after { transform: translate(50%, -50%); } [part~="preview"]::after, [part~="swatch"]::after { content: ""; display: block; block-size: 100%; inline-size: 100%; border-radius: inherit; background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); } [part~="trigger"]:where(:hover), [part~="trigger"]:where(:hover)::before { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="trigger"]:where(:active), [part~="trigger"]:where(:active)::before { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="trigger"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="trigger"]:where(:focus) { ${formControlFocusHalo} } [part~="panel"] { position: absolute; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); display: flex; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); padding: var(--lr-space-s); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-color-picker-radius, var(--lr-overlay-radius, var(--_lr-color-picker-radius)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); max-inline-size: var(--lr-positioner-available-inline-size, none); max-block-size: var(--lr-positioner-available-block-size, none); overflow: auto; } [part~="panel"][hidden] { display: none; } :host([inline]) [part~="panel"] { position: static; inset: auto; box-shadow: none; } :host([inline]) .glass-scroll-layer { display: none; } :host(:not([inline])) .glass-scroll-layer { margin-block-end: calc(-1 * var(--lr-color-picker-gap, var(--_lr-color-picker-gap))); } .row { display: flex; align-items: center; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); } .sliders { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); min-inline-size: 0; } [part~="grid"] { position: relative; inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); max-inline-size: 100%; block-size: var( --lr-color-picker-grid-block-size, var(--_lr-color-picker-grid-block-size) ); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); cursor: crosshair; touch-action: none; background-color: var( --lr-color-picker-grid-hue, var(--_lr-color-picker-grid-hue) ); background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to right, hsl(0 0% 100%), transparent); } :host(:dir(rtl)) [part~="grid"] { background-image: linear-gradient(to bottom, transparent, hsl(0 0% 0%)), linear-gradient(to left, hsl(0 0% 100%), transparent); } [part~="grid-handle"] { position: absolute; inline-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); block-size: var( --lr-color-picker-grid-handle-size, var(--_lr-color-picker-grid-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="grid-handle"] { transform: translate(50%, -50%); } [part~="slider"] { position: relative; block-size: var(--lr-size-1-5rem); cursor: pointer; touch-action: pan-y; } [part~="slider"]::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var( --lr-color-picker-slider-block-size, var(--_lr-color-picker-slider-block-size) ); border-radius: var(--lr-radius-pill); transform: translateY(-50%); } [part~="slider"]:where(:hover)::before { box-shadow: 0 0 0 var(--lr-border-width-thin) var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:hover) { outline: var(--lr-border-width-thin) solid var(--lr-color-picker-hover-border-color, var(--lr-color-brand)); } [part~="slider"]:where(:active)::before { box-shadow: 0 0 0 var(--lr-border-width-medium) color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="slider"]:where(:active) { outline: var(--lr-border-width-medium) solid color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="hue-slider"]::before { background-image: linear-gradient( to right, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } :host(:dir(rtl)) [part~="hue-slider"]::before { background-image: linear-gradient( to left, var(--lr-color-picker-hue-stops, var(--_lr-color-picker-hue-stops)) ); } [part~="opacity-slider"]::before { background-image: var( --lr-color-picker-opacity-gradient, var(--_lr-color-picker-opacity-gradient) ), conic-gradient( var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 0deg 90deg, transparent 90deg 180deg, var( --lr-color-picker-checker-color, var(--_lr-color-picker-checker-color) ) 180deg 270deg, transparent 270deg 360deg ); background-size: auto, var(--lr-color-picker-checker-size, var(--_lr-color-picker-checker-size)) var( --lr-color-picker-checker-size, var(--_lr-color-picker-checker-size) ); background-color: var(--lr-color-surface); } [part~="slider-handle"] { position: absolute; inset-block-start: 50%; inline-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); block-size: var( --lr-color-picker-slider-handle-size, var(--_lr-color-picker-slider-handle-size) ); border: var(--lr-border-width-medium) solid var(--lr-color-surface); border-radius: 50%; box-shadow: var(--lr-shadow-s); background-color: var( --lr-color-picker-swatch-color, var(--_lr-color-picker-swatch-color) ); transform: translate(-50%, -50%); cursor: grab; transition: border-color var(--lr-transition-fast); } :host(:dir(rtl)) [part~="slider-handle"] { transform: translate(50%, -50%); } [part~="grid-handle"]:where(:hover), [part~="slider-handle"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="grid-handle"]:where(:active), [part~="slider-handle"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); cursor: grabbing; } [part~="grid-handle"]:where(:focus-visible), [part~="slider-handle"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="preview"] { flex: 0 0 auto; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; } [part~="input"] { flex: 1 1 auto; min-inline-size: 0; padding: var(--lr-space-2xs) var(--lr-space-xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font-mono); font-size: var(--lr-font-size-sm); transition: border-color var(--lr-transition-fast); } [part~="input"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="input"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="format-button"], [part~="eyedropper-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-color-picker-radius, var(--_lr-color-picker-radius) ); background: var(--lr-color-surface); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="format-button"]:where(:hover), [part~="eyedropper-button"]:where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="format-button"]:where(:active), [part~="eyedropper-button"]:where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="format-button"]:where(:focus-visible), [part~="eyedropper-button"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatches"] { display: flex; flex-wrap: wrap; gap: var(--lr-color-picker-gap, var(--_lr-color-picker-gap)); max-inline-size: var( --lr-color-picker-grid-inline-size, var(--_lr-color-picker-grid-inline-size) ); } [part~="swatch"] { position: relative; inline-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); block-size: var( --lr-color-picker-palette-swatch-size, var(--_lr-color-picker-palette-swatch-size) ); padding: 0; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: 50%; cursor: pointer; transition: border-color var(--lr-transition-fast); } [part~="swatch"]:where(:not(:disabled)):where(:hover) { border-color: var( --lr-color-picker-hover-border-color, var(--lr-color-brand) ); } [part~="swatch"]:where(:not(:disabled)):where(:active) { border-color: color-mix( in oklab, var(--lr-color-picker-hover-border-color, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="swatch"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="swatch"]:disabled { cursor: not-allowed; opacity: var(--lr-color-picker-swatch-disabled-opacity, 0.5); } [part~="swatch-selected"] { border-color: var(--lr-color-picker-selected-border, var(--lr-color-brand)); border-width: var(--lr-border-width-medium); } [part~="swatch-selected"]::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lr-color-picker-selected-check-color, var(--lr-color-surface)); font-size: var(--lr-font-size-xs); text-shadow: 0 0 var(--lr-size-2px) var(--lr-color-shadow); z-index: var(--lr-layer-content); } :host(:disabled) { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :host(:disabled) [part~="trigger"], :host(:disabled) [part~="grid"], :host(:disabled) [part~="grid-handle"], :host(:disabled) [part~="slider"], :host(:disabled) [part~="slider-handle"], :host(:disabled) [part~="input"], :host(:disabled) [part~="swatch"], :host(:disabled) [part~="format-button"], :host(:disabled) [part~="eyedropper-button"] { cursor: not-allowed; } [part="hint"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="hint"][hidden] { display: none; } [part="error"] { color: var(--lr-color-danger); font-size: var(--lr-font-size-sm); } [part="error"][hidden] { display: none; } [part~="form-control"], [part~="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface(':host(:not([inline])) [part~="panel"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};