scb-wc-test 0.1.108 → 0.1.110

package/mvc/components/scb-datepicker/scb-datepicker.js

@@ -1,48 +1,54 @@
-import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,c,s){try{customElements.get(a)||t(a,c,s)}catch(n){var o=String(n||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(e,t,a,c)=>{for(var s=c>1?void 0:c?_(t,a):t,o=e.length-1,n;o>=0;o--)(n=e[o])&&(s=(c?n(t,a,s):n(s))||s);return c&&s&&v(t,a,s),s};let d=class extends w{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="static",this.lang="sv",this.selectedValue="",this.open=!0,this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t-1,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t+1,1)},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0}))}}updated(e){if(super.updated(e),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1))}}_getMonthDays(e,t){const a=new Date(e,t,1),c=new Date(e,t+1,0),s=[];let o=[],n=(a.getDay()+6)%7;for(let r=0;r<n;r++)o.push(null);for(let r=1;r<=c.getDate();r++){const u=new Date(e,t,r);o.push(u),o.length===7&&(s.push(o),o=[])}if(o.length){for(;o.length<7;)o.push(null);s.push(o)}return s}render(){if(!this.open)return i``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),a=new Date,c=this._getMonthDays(e,t),s=Array.from({length:101},(o,n)=>a.getFullYear()-50+n);return i`
+import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,c,r){try{customElements.get(a)||t(a,c,r)}catch(s){var o=String(s||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw s}}}}catch{}})();var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(e,t,a,c)=>{for(var r=c>1?void 0:c?_(t,a):t,o=e.length-1,s;o>=0;o--)(s=e[o])&&(r=(c?s(t,a,r):s(r))||r);return c&&r&&v(t,a,r),r};let d=class extends w{constructor(){super(...arguments),this._currentDate=new Date,this._selectedDate=null,this._showMonthDropdown=!1,this._showYearDropdown=!1,this.variant="static",this.lang="sv",this.selectedValue="",this.open=!0,this._outsideClickHandler=e=>{this.variant!=="static"&&this.open&&(e.composedPath().includes(this)||this._close())},this._monthNames=[this.lang=="sv"?"Januari":"January",this.lang=="sv"?"Februari":"February",this.lang=="sv"?"Mars":"March",(this.lang=="sv","April"),this.lang=="sv"?"Maj":"May",this.lang=="sv"?"Juni":"June",this.lang=="sv"?"Juli":"July",this.lang=="sv"?"Augusti":"August",(this.lang=="sv","September"),this.lang=="sv"?"Oktober":"October",(this.lang=="sv","November"),(this.lang=="sv","December")],this._prevYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e-1,t,1)},this._nextYear=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e+1,t,1)},this._prevMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t-1,1)},this._nextMonth=()=>{const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth();this._currentDate=new Date(e,t+1,1)},this._close=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("datepicker-closed",{bubbles:!0,composed:!0})),window.removeEventListener("mousedown",this._outsideClickHandler)}}updated(e){if(super.updated(e),this.variant!=="static"&&this.open?window.addEventListener("mousedown",this._outsideClickHandler):window.removeEventListener("mousedown",this._outsideClickHandler),e.has("selectedValue")&&this.selectedValue){const t=new Date(this.selectedValue);isNaN(t.getTime())||(this._selectedDate=t,this._currentDate=new Date(t.getFullYear(),t.getMonth(),1))}}_getMonthDays(e,t){const a=new Date(e,t,1),c=new Date(e,t+1,0),r=[];let o=[],s=(a.getDay()+6)%7;for(let n=0;n<s;n++)o.push(null);for(let n=1;n<=c.getDate();n++){const u=new Date(e,t,n);o.push(u),o.length===7&&(r.push(o),o=[])}if(o.length){for(;o.length<7;)o.push(null);r.push(o)}return r}render(){if(!this.open)return i``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),a=new Date,c=this._getMonthDays(e,t),r=Array.from({length:101},(o,s)=>a.getFullYear()-50+s);return i`
       <div class="datepicker-popup ${this.variant==="popup"?"popup":"static"}">
         <div class="header">
             <div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
                 <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang=="sv"?"Föregående månad":"Previous month"}></scb-icon-button>
                 <div class="custom-dropdown month-dropdown">
-                    <div 
-                    @keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleMonthDropdown())}}
-                    tabindex="0" class="dropdown-selected" @click=${()=>this._toggleMonthDropdown()}>
+                      <div
+                        tabindex=${this._showYearDropdown?-1:0}
+                        class="dropdown-selected"
+                        @click=${()=>this._toggleMonthDropdown()}
+                        @keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleMonthDropdown())}}
+                      >
                         ${this._monthNames[t].slice(0,3)}
                         <md-icon>arrow_drop_down</md-icon>
                         <md-focus-ring></md-focus-ring>
                         <md-ripple></md-ripple>
-                    </div>
+                      </div>
                 </div>
                 <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang=="sv"?"Nästa månad":"Next month"}></scb-icon-button>
             </div>
             <div class="year-selector ${this._showMonthDropdown?"disable":""} ${this._showYearDropdown?"open":""}">
                 <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang=="sv"?"Föregående år":"Previous year"}></scb-icon-button>
                     <div class="custom-dropdown year-dropdown">
-                        <div 
-                        @keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleYearDropdown())}}
-                        tabindex="0" class="dropdown-selected" @click=${()=>this._toggleYearDropdown()}>
-                            ${e}
-                            <md-icon>arrow_drop_down</md-icon>
-                            <md-focus-ring></md-focus-ring>
-                            <md-ripple></md-ripple>
+                        <div
+                          tabindex=${this._showMonthDropdown?-1:0}
+                          class="dropdown-selected"
+                          @click=${()=>this._toggleYearDropdown()}
+                          @keydown=${o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this._toggleYearDropdown())}}
+                        >
+                          ${e}
+                          <md-icon>arrow_drop_down</md-icon>
+                          <md-focus-ring></md-focus-ring>
+                          <md-ripple></md-ripple>
                         </div>
                     </div>
                 <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
             </div>
         </div>
-                ${this._showMonthDropdown||this._showYearDropdown?i`<scb-divider></scb-divider>`:""}
+        ${this._showMonthDropdown||this._showYearDropdown?i`<scb-divider></scb-divider>`:""}
         <div class="datepicker-content" style="position:relative;">
           ${this._showMonthDropdown?i`
             <div class="dropdown-list">
-              ${this._monthNames.map((o,n)=>i`
+              ${this._monthNames.map((o,s)=>i`
                 <div
-                    @keydown=${r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this._onMonthChangeCustom(n))}}
+                    @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onMonthChangeCustom(s))}}
                   tabindex="0"
-                  class="dropdown-item${n===t?" selected":""}"
-                  @click=${()=>this._onMonthChangeCustom(n)}
-                  id=${n===t?"selected-month":""}
+                  class="dropdown-item${s===t?" selected":""}"
+                  @click=${()=>this._onMonthChangeCustom(s)}
+                  id=${s===t?"selected-month":""}
                 >
-                ${n===t?i`<md-icon>check</md-icon>`:""}
+                ${s===t?i`<md-icon>check</md-icon>`:""}
                   ${o}
                   <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
                 </div>
@@ -51,9 +57,9 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
           `:""}
           ${this._showYearDropdown?i`
             <div class="dropdown-list">
-              ${s.map(o=>i`
+              ${r.map(o=>i`
                 <div
-                @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(o))}}
+                @keydown=${s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this._onYearChangeCustom(o))}}
                   tabindex="0"
                   class="dropdown-item${o===e?" selected":""}"
                   @click=${()=>this._onYearChangeCustom(o)}
@@ -77,15 +83,15 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
               <tbody>
                 ${c.map(o=>i`
                   <tr>
-                    ${o.map(n=>n?i`
+                    ${o.map(s=>s?i`
                       <td>
                         <div
-                        @keydown=${r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this._selectDate(n))}}
+                        @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._selectDate(s))}}
                             role="button"
                             tabindex="0"
-                          class="day${this._isToday(n,a)?" today":""}${this._isSelected(n)?" selected":""}"
-                          @click=${()=>this._selectDate(n)}
-                        >${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                          class="day${this._isToday(s,a)?" today":""}${this._isSelected(s)?" selected":""}"
+                          @click=${()=>this._selectDate(s)}
+                        >${s.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
                       </td>
                     `:i`<td></td>`)}
                   </tr>
@@ -96,7 +102,7 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
           `:""}
         </div>
         <div class="datepicker-footer">
-        ${!this._showMonthDropdown&&!this._showYearDropdown?i`
+        ${!this._showMonthDropdown&&!this._showYearDropdown&&this.variant=="popup"?i`
             <scb-button variant="text" label=${this.lang=="sv"?"Stäng":"Close"} @click=${this._close}></scb-button>
         `:""}
         </div>
@@ -104,9 +110,10 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
     `}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-month");e&&e.scrollIntoView({block:"center"})},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{const e=this.renderRoot.querySelector("#selected-year");e&&e.scrollIntoView({block:"center"})},0))}_onMonthChangeCustom(e){const t=this._currentDate.getFullYear();this._currentDate=new Date(t,e,1),this._showMonthDropdown=!1}_onYearChangeCustom(e){const t=this._currentDate.getMonth();this._currentDate=new Date(e,t,1),this._showYearDropdown=!1}_isToday(e,t){return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}_isSelected(e){return this._selectedDate&&e.getDate()===this._selectedDate.getDate()&&e.getMonth()===this._selectedDate.getMonth()&&e.getFullYear()===this._selectedDate.getFullYear()}_selectDate(e){this._selectedDate=e;const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}};d.styles=[g`
     :host {
         --scb-datepicker-width: 380px;
-        width: var(--scb-datepicker-width);
+        max-width: var(--scb-datepicker-width);
         font-family: var(--brand-font);
         color: var(--md-sys-color-on-surface);
+        display: block;
     }
     .month-selector, .year-selector {
       display: flex;
@@ -178,9 +185,24 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
         font-family: var(--brand-font);
       }
       .datepicker-content{
-         overflow-y: auto;
-         max-height: 260px;
+        overflow-y: auto;
+        max-height: 290px;
       }
+      		.datepicker-content::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+			.datepicker-content::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: var(--md-sys-shape-corner-small);
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.datepicker-content::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
       .popup {
         position:absolute;
         top:110%;
@@ -191,8 +213,8 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-bottom: 12px;
-        padding: 16px 24px 0 16px;
+        margin-bottom: 30px;
+        padding: 20px 16px 0px 16px;
         flex-wrap: wrap;
       }
       .datepicker-footer{
@@ -214,7 +236,7 @@ import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";im
         color: var(--md-sys-color-on-surface-variant, #757575);
         font-size: 16px;
         font-weight: 600;
-        padding: 4px;
+        padding-bottom: 20px;
       }
       td {
         text-align: center;

package/mvc/components/scb-search/scb-search.js

@@ -189,7 +189,7 @@ import{a as y,n as c,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       line-height: var(--scb-search-line-height);
 
       color: var(--md-sys-color-on-surface);
-      background: var(--md-sys-color-surface);
+      background: transparent;
 
       position: relative;
       z-index: 1;
@@ -235,7 +235,7 @@ import{a as y,n as c,i as x,E as b,x as u,t as w}from"../../vendor/vendor.js";im
       left: 0;
       width: 100%;
       z-index: 10;
-      background: var(--md-sys-color-surface);
+      background: var(--md-sys-color-surface-container-lowest);
       border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
       border-top: 0;
       border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);

package/mvc/components/scb-textfield/scb-textfield.js

@@ -1,4 +1,4 @@
-import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{this.value=t.detail.value,this._showDatepicker=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,l=this.type==="search"&&this.value?h`
+import{a as v,n as a,i as x,x as h,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,o,l){try{customElements.get(i)||e(i,o,l)}catch(p){var c=String(p||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,o)=>{for(var l=o>1?void 0:o?_(e,i):e,c=t.length-1,p;c>=0;c--)(p=t[c])&&(l=(o?p(e,i,l):p(l))||l);return o&&l&&g(e,i,l),l},w=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(t,e,i)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),d=(t,e,i)=>(w(t,e,"access private method"),i),n,f,b,u;let s=class extends x{constructor(){super(),k(this,n),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&d(this,n,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&d(this,n,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{this.value=t.detail.value,this._showDatepicker=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,o=this.type==="search"&&this.value?h`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -39,7 +39,7 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
           id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
           >${this.underLabel}</span
         >
-        <div class="scb-textfield-wrapper">
+        <div class="scb-textfield-wrapper ripple-wrapper">
           <textarea
             class="scb-textfield"
             ?disabled=${this.disabled}
@@ -51,6 +51,8 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
           >
 ${this.value}</textarea
           >
+          <md-ripple></md-ripple>
+          <md-focus-ring class="input-ring"></md-focus-ring>
         </div>
       `:this.type==="date"?h`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
@@ -89,7 +91,7 @@ ${this.value}</textarea
         id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
         >${this.underLabel}</span
       >
-      <div class="scb-textfield-wrapper">
+      <div class="scb-textfield-wrapper ripple-wrapper">
         ${t}
         <input
           class="scb-textfield${this.error?" has-error-icon":""}"
@@ -102,10 +104,12 @@ ${this.value}</textarea
           aria-invalid=${this.error?"true":"false"}
           aria-describedby=${i}
         />
-        ${l}
+        ${o}
         ${e}
+        <md-ripple></md-ripple>
+        <md-focus-ring class="input-ring"></md-focus-ring>
       </div>
-    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern){const l=new RegExp(this.pattern);this.error=!l.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))})),p(this,n,b).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,n,b).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0))}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};n=new WeakSet;b=function(){const t=p(this,n,u).call(this,this.spacing),e=p(this,n,u).call(this,this.spacingTop)??t,i=p(this,n,u).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};u=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};s.formAssociated=!0;s.styles=[m`
+    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const o=this.disabled?null:this.value;this._internals.setFormValue(o)}if(this.pattern){const o=new RegExp(this.pattern);this.error=!o.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,d(this,n,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,d(this,n,u).call(this)})),d(this,n,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&d(this,n,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};n=new WeakSet;f=function(){const t=d(this,n,b).call(this,this.spacing),e=d(this,n,b).call(this,this.spacingTop)??t,i=d(this,n,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -121,6 +125,8 @@ ${this.value}</textarea
         /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
         margin-block-start: var(--scb-textfield-spacing-block-start, 0);
         margin-block-end: var(--scb-textfield-spacing-block-end, 0);
+
+        -webkit-tap-highlight-color: transparent;
       }
 
       :host([type='number']) {
@@ -200,6 +206,8 @@ ${this.value}</textarea
         box-sizing: border-box;
         background-color: transparent;
         color: var(--md-sys-color-on-surface);
+        position: relative;
+        z-index: 1;
       }
 
       :host([type='search']) .scb-textfield {
@@ -217,6 +225,7 @@ ${this.value}</textarea
         transform: translateY(-50%);
         pointer-events: none;
         font-size: var(--scale-06);
+        z-index: 2;
       }
 
       .scb-textfield:focus-visible {
@@ -231,6 +240,35 @@ ${this.value}</textarea
         width: 100%;
       }
 
+      /* Wrapper som bär ripple och md-focus-ring */
+      .ripple-wrapper {
+        position: relative;
+        width: 100%;
+      }
+
+      md-focus-ring.input-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(--md-sys-shape-corner-small);
+        z-index: 3;
+      }
+
+      .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+        display: block;
+      }
+
+      md-ripple {
+        border-radius: var(--md-sys-shape-corner-small);
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+        --md-ripple-hover-color: transparent;
+        --md-ripple-hover-opacity: 0;
+      }
+
       input[type='search']::-webkit-search-cancel-button {
         appearance: none;
         display: none;
@@ -244,6 +282,7 @@ ${this.value}</textarea
         pointer-events: none;
         font-size: var(--scale-06);
         color: var(--md-sys-color-error);
+        z-index: 2;
       }
 
       .scb-textfield.has-error-icon {
@@ -269,6 +308,7 @@ ${this.value}</textarea
         justify-content: center;
         cursor: pointer;
         color: var(--md-sys-color-on-surface);
+        z-index: 2;
       }
 
       :host([error]) .scb-textfield-clear {
@@ -285,4 +325,4 @@ ${this.value}</textarea
         height: 100%;
         display: block;
       }
-    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([v("scb-textfield")],s);
+    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);