@ni/nimble-components 33.5.0 → 33.6.0

package/dist/all-components-bundle.min.js

@@ -3218,6 +3218,10 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${pd};
+    }
+
     .control {
         align-items: center;
         cursor: pointer;
@@ -3239,6 +3243,11 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         border-color: rgba(${cl}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        color: ${Wc};
+        border-color: rgba(${cl}, 0.3);
+    }
+
     :host([error-visible]) .control,
     :host([error-visible][open]) .control,
     :host([error-visible][disabled]) .control {
@@ -3260,8 +3269,11 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         padding-left: ${Dl};
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${Gc};
+    :host([disabled][appearance-readonly]) .selected-value {
+        cursor: text;
+        user-select: text;
+        -webkit-user-select: text;
+        padding-right: ${$l};
     }
 
     .indicator {
@@ -3273,6 +3285,10 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         align-items: center;
     }
 
+    :host([disabled][appearance-readonly]) .indicator {
+        display: none;
+    }
+
     .indicator slot[name='indicator'] svg {
         width: ${Tl};
         height: ${Tl};
@@ -3374,10 +3390,6 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
                 border-bottom-width: ${Ol};
                 padding-bottom: 0;
             }
-
-            :host([disabled]) .control {
-                border-color: rgba(${cl}, 0.1);
-            }
         `),ph(tv,Mt`
             .control {
                 border-width: ${Ol};
@@ -3426,12 +3438,6 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         );
     }
 
-    :host([disabled]) *,
-    :host([disabled]) {
-        ${Em}
-        color: ${Gc};
-    }
-
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -3458,6 +3464,18 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         outline: none;
     }
 
+    .selected-value::placeholder {
+        color: ${Pc};
+    }
+
+    :host([disabled]) .selected-value::placeholder {
+        color: ${Gc};
+    }
+
+    :host([disabled][appearance-readonly]) .selected-value::placeholder {
+        color: ${Pc};
+    }
+
     [part='indicator'] {
         display: none;
     }
@@ -3468,6 +3486,10 @@ const Xg="nimble-icon-arrow-expander-down",Jg="above",Qg="underline",tv="outline
         padding-right: ${$l};
     }
 
+    :host([disabled][appearance-readonly]) .end-slot-container {
+        display: none;
+    }
+
     .separator {
         display: inline;
         width: 2px;
@@ -3506,7 +3528,7 @@ function av(t){return Q`
     </label>
 `)
 let cv=class extends Vi{}
-class dv extends(Fn(cv)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}function hv(t){class e extends t{constructor(){super(...arguments),this.requiredVisible=!1}}return ft({attribute:"required-visible",mode:"boolean"})(e.prototype,"requiredVisible"),e}class uv extends(Ug(hv(dv))){constructor(){super(...arguments),this.appearance=Qg,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=kn("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class dv extends(Fn(cv)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}function hv(t){class e extends t{constructor(){super(...arguments),this.requiredVisible=!1}}return ft({attribute:"required-visible",mode:"boolean"})(e.prototype,"requiredVisible"),e}class uv extends(Ug(hv(dv))){constructor(){super(...arguments),this.appearance=Qg,this.appearanceReadOnly=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=kn("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
 if(this.$fastController.isConnected&&this.options){const e=this.findIndexOfValidOption(t),i=this.options[this.selectedIndex]?.text,s=this.options[e]?.text
 i!==s&&(this.selectedIndex=e),n=this.firstSelectedOption?.text||n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value")),this.filter=t,this.filterOptions(),this.selectedIndex=this.findIndexOfValidOption(this.value)}get options(){return x.track(this,"options"),this.filteredOptions&&this.filter?this.filteredOptions:this._options}set options(t){this._options=t,x.notify(this,"options")}get isAutocompleteInline(){return this.autocomplete===ti||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===ei||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===ni}slottedOptionsChanged(t,e){const n=this.value
@@ -3542,7 +3564,7 @@ const t=this.getBoundingClientRect(),e=window.innerHeight-t.bottom
 this.forcedPosition?this.position=this.positionAttribute:t.top>e?this.position=Yn:this.position=Xn,this.positionAttribute=this.forcedPosition?this.positionAttribute:this.position,this.availableViewportHeight=this.position===Yn?Math.trunc(t.top):Math.trunc(e)}focusAndScrollOptionIntoView(){this.open&&this.contains(document.activeElement)&&(this.control.focus(),this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})})))}openChanged(){this.open?(this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView(),b.queueUpdate((()=>this.focus()))):(this.ariaControls="",this.ariaExpanded="false"),this.dropdownButton&&(this.dropdownButton.checked=this.open)}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder??"")}setSelectedOptions(){this.selectedOptions=this.selectedIndex>-1?[this.options[this.selectedIndex]]:[],this.ariaActiveDescendant=this.firstSelectedOption?.id??"",this.focusAndScrollOptionIntoView()}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach((t=>{t.selected=e.includes(t)}))}positionChanged(t,e){this.positionAttribute=e,this.setPositioning()}regionChanged(t,e){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}controlWrapperChanged(t,e){this.region&&this.controlWrapper&&(this.region.anchorElement=this.controlWrapper)}ariaLabelChanged(t,e){this.updateInputAriaLabel()}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}clearSelectionRange(){const t=this.control.value.length
 this.control.setSelectionRange(t,t)}syncValue(){const t=this.selectedIndex>-1?this.firstSelectedOption?.text:this.control.value
 this.updateValue(this.value!==t)}updateInputAriaLabel(){const t=this.shadowRoot?.querySelector(".selected-value")
-this.ariaLabel?t?.setAttribute("aria-label",this.ariaLabel):t?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}findIndexOfValidOption(t){return this.options.findIndex((e=>!e.disabled&&e.text===t))}}t([ft],uv.prototype,"appearance",void 0),t([ft({attribute:"autocomplete",mode:"fromView"})],uv.prototype,"autocomplete",void 0),t([ft({attribute:"position"})],uv.prototype,"positionAttribute",void 0),t([ft({attribute:"open",mode:"boolean"})],uv.prototype,"open",void 0),t([ft],uv.prototype,"placeholder",void 0),t([C],uv.prototype,"position",void 0),t([C],uv.prototype,"region",void 0),t([C],uv.prototype,"controlWrapper",void 0),t([C],uv.prototype,"control",void 0),t([C],uv.prototype,"listbox",void 0),t([C],uv.prototype,"dropdownButton",void 0),t([C],uv.prototype,"filteredOptions",void 0),t([C],uv.prototype,"hasOverflow",void 0),t([C],uv.prototype,"availableViewportHeight",void 0)
+this.ariaLabel?t?.setAttribute("aria-label",this.ariaLabel):t?.removeAttribute("aria-label")}emitChangeIfValueUpdated(){this.valueUpdatedByInput&&(this.value!==this.valueBeforeTextUpdate&&this.$emit("change"),this.valueUpdatedByInput=!1)}findIndexOfValidOption(t){return this.options.findIndex((e=>!e.disabled&&e.text===t))}}t([ft],uv.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],uv.prototype,"appearanceReadOnly",void 0),t([ft({attribute:"autocomplete",mode:"fromView"})],uv.prototype,"autocomplete",void 0),t([ft({attribute:"position"})],uv.prototype,"positionAttribute",void 0),t([ft({attribute:"open",mode:"boolean"})],uv.prototype,"open",void 0),t([ft],uv.prototype,"placeholder",void 0),t([C],uv.prototype,"position",void 0),t([C],uv.prototype,"region",void 0),t([C],uv.prototype,"controlWrapper",void 0),t([C],uv.prototype,"control",void 0),t([C],uv.prototype,"listbox",void 0),t([C],uv.prototype,"dropdownButton",void 0),t([C],uv.prototype,"filteredOptions",void 0),t([C],uv.prototype,"hasOverflow",void 0),t([C],uv.prototype,"availableViewportHeight",void 0)
 const pv=uv.compose({baseName:"combobox",baseClass:dv,template:(t,e)=>Q`
     <template
         aria-disabled="${t=>t.ariaDisabled}"
@@ -9328,6 +9350,10 @@ const KT=Mt`
         color: ${Gc};
     }
 
+    :host([disabled][appearance-readonly]) .selected-value.placeholder {
+        color: ${Pc};
+    }
+
     .selected-value {
         order: 1;
     }
@@ -9652,7 +9678,7 @@ const eR="nimble-spinner",nR=t=>t instanceof Sb,iR=t=>t instanceof Db,sR=av(Q`
 `)
 let oR=class extends Vi{}
 class rR extends(Fn(oR)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const aR=t=>!t.visuallyHidden&&!t.disabled&&!t.hidden,lR=t=>!t.visuallyHidden&&!t.hidden
-class cR extends(Ug(hv(rR))){constructor(){super(...arguments),this.appearance=Qg,this.filterMode=sv.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=kn("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1,this.selectedOptionObserver=new MutationObserver((()=>{this.updateDisplayValue()}))}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){return this.$fastController.isConnected?kb(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState(),this.observeSelectedOptionTextContent()}disconnectedCallback(){super.disconnectedCallback(),this.selectedOptionObserver?.disconnect()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class cR extends(Ug(hv(rR))){constructor(){super(...arguments),this.appearance=Qg,this.appearanceReadOnly=!1,this.filterMode=sv.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=kn("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1,this.selectedOptionObserver=new MutationObserver((()=>{this.updateDisplayValue()}))}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){return this.$fastController.isConnected?kb(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState(),this.observeSelectedOptionTextContent()}disconnectedCallback(){super.disconnectedCallback(),this.selectedOptionObserver?.disconnect()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
 if(this.options?.length){const t=this.options.findIndex((t=>t.value===n)),e=this.options[this.selectedIndex]?.value??null,i=this.options[t]?.value??null;-1!==t&&e===i||(n="",this.selectedIndex=t),n=this.firstSelectedOption?.value??n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return x.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(t,e){const n=this.value
 this.options.forEach((t=>{const e=x.getNotifier(t)
@@ -9750,7 +9776,7 @@ this.selectedIndex=t?this.options.indexOf(t):-1}setProxyOptions(){this.proxy ins
 e&&this.proxy.options.add(e)})))}filterChanged(){this.filterOptions()}emitFilterInputEvent(){const t={filterText:this.filter}
 this.$emit("filter-input",t,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}observeSelectedOptionTextContent(){if(this.selectedOptionObserver?.disconnect(),-1===this.selectedIndex)return
 const t=this.firstSelectedOption
-t&&this.selectedOptionObserver?.observe(t,{characterData:!0,subtree:!0,childList:!0})}}t([ft],cR.prototype,"appearance",void 0),t([ft({attribute:"position"})],cR.prototype,"positionAttribute",void 0),t([ft({attribute:"filter-mode"})],cR.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],cR.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],cR.prototype,"loadingVisible",void 0),t([C],cR.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],cR.prototype,"open",void 0),t([C],cR.prototype,"position",void 0),t([C],cR.prototype,"control",void 0),t([C],cR.prototype,"scrollableRegion",void 0),t([C],cR.prototype,"filterInput",void 0),t([C],cR.prototype,"anchoredRegion",void 0),t([C],cR.prototype,"hasOverflow",void 0),t([C],cR.prototype,"filteredOptions",void 0),t([C],cR.prototype,"filter",void 0),t([C],cR.prototype,"availableViewportHeight",void 0),t([k],cR.prototype,"collapsible",null),t([k],cR.prototype,"labelContent",null),t([k],cR.prototype,"displayValue",null)
+t&&this.selectedOptionObserver?.observe(t,{characterData:!0,subtree:!0,childList:!0})}}t([ft],cR.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],cR.prototype,"appearanceReadOnly",void 0),t([ft({attribute:"position"})],cR.prototype,"positionAttribute",void 0),t([ft({attribute:"filter-mode"})],cR.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],cR.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],cR.prototype,"loadingVisible",void 0),t([C],cR.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],cR.prototype,"open",void 0),t([C],cR.prototype,"position",void 0),t([C],cR.prototype,"control",void 0),t([C],cR.prototype,"scrollableRegion",void 0),t([C],cR.prototype,"filterInput",void 0),t([C],cR.prototype,"anchoredRegion",void 0),t([C],cR.prototype,"hasOverflow",void 0),t([C],cR.prototype,"filteredOptions",void 0),t([C],cR.prototype,"filter",void 0),t([C],cR.prototype,"availableViewportHeight",void 0),t([k],cR.prototype,"collapsible",null),t([k],cR.prototype,"labelContent",null),t([k],cR.prototype,"displayValue",null)
 const dR=cR.compose({baseName:"select",baseClass:ls,template:(t,e)=>Q`
     <template
         class="${t=>[t.collapsible&&"collapsible",t.collapsible&&t.open&&"open",t.disabled&&"disabled",t.collapsible&&t.position].filter(Boolean).join(" ")}"