scb-wc 0.1.7 → 0.1.8

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

@@ -1 +1,595 @@
-import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-textfield/scb-textfield.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();
+import"../../vendor/vendor-material.js";import{_,b as w,g as $,h as d,m as k,y as o}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import{n as z,t as a}from"../../vendor/assertClassBrand.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-datepicker/scb-datepicker.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,n,c){try{customElements.get(i)||e(i,n,c)}catch(b){var p=String(b||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw b}}}}catch{}})();var s,u,l=(s=new WeakSet,u=class extends _{constructor(){super(),z(this,s),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&a(s,this,g).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&a(s,this,g).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const i=e;if(this.value=i.value,this._internals){const n=this.disabled?null:this.value;this._internals.setFormValue(n)}a(s,this,f).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},this._onFieldChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))},this._onFieldSelect=()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))},this._onFieldFocus=()=>{this._inputFocused=!0,a(s,this,g).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,a(s,this,g).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.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}a(s,this,f).call(this),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())}_syncDensityForSize(){this.size==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}render(){const e=this.leadingIcon?o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,i=this.error?o`<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 n=this.underLabel?`${this._inputId}-supporting-text`:void 0,c=this.type==="search"&&this.value?o`
+            <button
+              type="button"
+              class="scb-textfield-clear"
+              @click=${this._onClearClick}
+              aria-label="Rensa fält"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></circle>
+                <line
+                  x1="8"
+                  y1="8"
+                  x2="16"
+                  y2="16"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></line>
+                <line
+                  x1="16"
+                  y1="8"
+                  x2="8"
+                  y2="16"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></line>
+              </svg>
+            </button>
+          `:null;return this.type==="textarea"?o`
+        <label
+          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel?o`
+              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
+                ${this.underLabel}
+              </span>
+            `:null}
+        <div class="scb-textfield-wrapper">
+          <div class="ripple-wrapper">
+            <textarea
+              class="scb-textfield"
+              .value=${this.value}
+              ?disabled=${this.disabled}
+              name="${this.name}"
+              id="${this._inputId}"
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${n}
+            ></textarea>
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+        </div>
+      `:this.type==="date"?o`
+        <label
+          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel?o`
+              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
+                ${this.underLabel}
+              </span>
+            `:null}
+        <div class="scb-textfield-wrapper">
+          ${e}
+          <div class="ripple-wrapper">
+            <input
+              class="scb-textfield${this.error?" has-error-icon":""}"
+              .value=${this.value}
+              type="text"
+              name="${this.name}"
+              id="${this._inputId}"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${n}
+              readonly
+              @focus=${this._toggleDatepicker}
+              @click=${this._toggleDatepicker}
+            />
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+          ${this.error?i:o`
+                <scb-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  size=${this.size}
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
+          <scb-datepicker
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+        </div>
+      `:this.type==="datetime-local"?o`
+        <label
+          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel?o`
+              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
+                ${this.underLabel}
+              </span>
+            `:null}
+        <div class="scb-textfield-wrapper" style="position:relative;">
+          ${e}
+          <div class="ripple-wrapper">
+            <input
+              class="scb-textfield${this.error?" has-error-icon":""}"
+              .value=${this.value}
+              type="text"
+              name="${this.name}"
+              id="${this._inputId}"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${n}
+              readonly
+              @focus=${this._toggleDatepicker}
+              @click=${this._toggleDatepicker}
+            />
+
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+
+          ${this.error?i:o`
+                <scb-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  size=${this.size}
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
+          <scb-datepicker
+            variant="datetime-local"
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+        </div>
+      `:this.type==="time"?o`
+        <label
+          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel?o`
+              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
+                ${this.underLabel}
+              </span>
+            `:null}
+        <div class="scb-textfield-wrapper">
+          ${e}
+          <div class="ripple-wrapper">
+            <input
+              class="scb-textfield${this.error?" has-error-icon":""}"
+              .value=${this.value}
+              type="time"
+              name="${this.name}"
+              id="${this._inputId}"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error?"true":"false"}
+              aria-describedby=${n}
+              @input=${p=>{const b=p.target;if(this.value=b.value,this._internals){const y=this.disabled?null:this.value;this._internals.setFormValue(y)}a(s,this,f).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
+            />
+            ${i}
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+        </div>
+      `:o`
+      <label
+        class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
+        for="${this._inputId}"
+      >
+        ${this.label}
+      </label>
+      ${this.underLabel?o`
+            <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
+              ${this.underLabel}
+            </span>
+          `:null}
+      <div class="scb-textfield-wrapper">
+        ${e}
+        <div class="ripple-wrapper">
+          <input
+            class="scb-textfield${this.error?" has-error-icon":""}"
+            .value=${this.value}
+            type="${this.type}"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error?"true":"false"}
+            aria-describedby=${n}
+          />
+          ${c}
+          ${i}
+          <md-ripple></md-ripple>
+          <md-focus-ring class="input-ring"></md-focus-ring>
+        </div>
+      </div>
+    `}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),a(s,this,m).call(this),a(s,this,x).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),this._internals&&(e.has("value")||e.has("disabled"))){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}e.has("type")&&(a(s,this,m).call(this),this._hasRenderedOnce&&a(s,this,S).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&a(s,this,x).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.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)),a(s,this,v).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){return a(s,this,f).call(this,!0)}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}},u.formAssociated=!0,u.styles=[w`
+      :host {
+        --scb-textfield-number-max-width: 280px;
+        --scb-textfield-text-max-width: 400px;
+        --scb-textfield-search-max-width: 600px;
+        --scb-textfield-email-max-width: 400px;
+        --scb-textfield-password-max-width: 400px;
+        --scb-textfield-tel-max-width: 400px;
+        --scb-textfield-url-max-width: 400px;
+        --scb-textfield-textarea-max-width: 600px;
+        font-family: var(--brand-font);
+        color: var(--md-sys-color-on-surface);
+
+        /* Avstånd till omgivande innehåll 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);
+
+        margin-inline-start: var(--scb-textfield-spacing-inline-start, 0);
+        margin-inline-end: var(--scb-textfield-spacing-inline-end, 0);
+        -webkit-tap-highlight-color: transparent;
+
+        --scb-textfield-padding-x: var(--spacing-5);
+        --scb-textfield-padding-y: var(--spacing-2);
+        --scb-textfield-min-height: 56px;
+
+        --scb-textfield-font-size: var(--md-sys-typescale-body-large-size);
+        --scb-textfield-line-height: var(--md-sys-typescale-body-large-line-height);
+
+        --scb-textfield-label-font-size: var(--md-sys-typescale-label-medium-size);
+        --scb-textfield-label-line-height: var(--md-sys-typescale-label-medium-line-height);
+        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+
+        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-medium-size);
+        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
+        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        --scb-textfield-label-gap: var(--spacing-3);
+
+        --scb-textfield-leading-inset: var(--spacing-4);
+        --scb-textfield-leading-icon-size: var(--icon-size-medium, 24px);
+        --scb-textfield-leading-gap: var(--spacing-4);
+        --scb-textfield-leading-padding: calc(
+          var(--scb-textfield-leading-inset) +
+            var(--scb-textfield-leading-icon-size) +
+            var(--scb-textfield-leading-gap)
+        );
+
+        --scb-textfield-trailing-inset: var(--spacing-4);
+        --scb-textfield-trailing-icon-size: var(--icon-size-medium, 24px);
+        --scb-textfield-trailing-gap: var(--spacing-3);
+        --scb-textfield-trailing-action-size: var(--scale-11, 48px);
+        --scb-textfield-trailing-reserved: calc(
+          var(--scb-textfield-trailing-inset) +
+            var(--scb-textfield-trailing-action-size) +
+            var(--spacing-2)
+        );
+      }
+
+      :host([size='medium']) {
+        --scb-textfield-padding-x: var(--spacing-4);
+        --scb-textfield-padding-y: var(--spacing-3);
+        --scb-textfield-min-height: 48px;
+
+        --scb-textfield-font-size: var(--md-sys-typescale-body-medium-size);
+        --scb-textfield-line-height: var(--md-sys-typescale-body-medium-line-height);
+
+        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
+        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
+        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+
+        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+
+        --scb-textfield-leading-inset: var(--spacing-3);
+        --scb-textfield-leading-icon-size: var(--icon-size-small, 20px);
+        --scb-textfield-leading-gap: var(--spacing-5);
+
+        --scb-textfield-trailing-inset: var(--spacing-3);
+        --scb-textfield-trailing-icon-size: var(--icon-size-small, 20px);
+        --scb-textfield-trailing-gap: var(--spacing-3);
+        --scb-textfield-trailing-action-size: var(--scale-10, 40px);
+      }
+
+      :host([size='small']) {
+        --scb-textfield-padding-x: var(--spacing-4);
+        --scb-textfield-padding-y: var(--spacing-3);
+        --scb-textfield-min-height: 40px;
+
+        --scb-textfield-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-textfield-line-height: var(--md-sys-typescale-body-small-line-height);
+
+        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
+        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
+        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+
+        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+
+        --scb-textfield-leading-inset: var(--spacing-3);
+        --scb-textfield-leading-icon-size: var(--icon-size-small, 20px);
+        --scb-textfield-leading-gap: var(--spacing-5);
+
+        --scb-textfield-trailing-inset: var(--spacing-3);
+        --scb-textfield-trailing-icon-size: var(--icon-size-small, 20px);
+        --scb-textfield-trailing-gap: var(--spacing-3);
+        --scb-textfield-trailing-action-size: var(--scale-09, 36px);
+      }
+
+      :host([size='extra-small']) {
+        --scb-textfield-padding-x: var(--spacing-3);
+        --scb-textfield-padding-y: var(--spacing-2);
+        --scb-textfield-min-height: 32px;
+
+        --scb-textfield-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-textfield-line-height: var(--md-sys-typescale-body-small-line-height);
+
+        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
+        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
+        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
+
+        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
+        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
+        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
+
+        --scb-textfield-leading-inset: var(--spacing-3);
+        --scb-textfield-leading-icon-size: var(--icon-size-extra-small, 16px);
+        --scb-textfield-leading-gap: var(--spacing-4);
+
+        --scb-textfield-trailing-inset: var(--spacing-3);
+        --scb-textfield-trailing-icon-size: var(--icon-size-extra-small, 16px);
+        --scb-textfield-trailing-gap: var(--spacing-2);
+        --scb-textfield-trailing-action-size: var(--scale-08, 32px);
+      }
+
+      :host([type='number']) {
+        --scb-textfield-max-width: var(--scb-textfield-number-max-width);
+      }
+      :host([type='text']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      :host([type='datetime-local']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      :host([type='search']) {
+        --scb-textfield-max-width: var(--scb-textfield-search-max-width);
+      }
+      :host([type='email']) {
+        --scb-textfield-max-width: var(--scb-textfield-email-max-width);
+      }
+      :host([type='password']) {
+        --scb-textfield-max-width: var(--scb-textfield-password-max-width);
+      }
+      :host([type='tel']) {
+        --scb-textfield-max-width: var(--scb-textfield-tel-max-width);
+      }
+      :host([type='url']) {
+        --scb-textfield-max-width: var(--scb-textfield-url-max-width);
+      }
+      :host([type='textarea']) {
+        --scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
+      }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      :host([type='time']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      input[type='time']::-webkit-calendar-picker-indicator {
+        display: none;
+        background: none;
+      }
+
+      :host {
+        display: flex;
+        flex-direction: column;
+        max-width: var(--scb-textfield-max-width);
+      }
+
+      :host([error]) .scb-textfield-supporting-text {
+        color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield {
+        border-color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield:focus-visible {
+        border-color: var(--md-sys-color-error);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
+      }
+
+      :host([disabled]) {
+        opacity: 0.38;
+        cursor: default;
+      }
+
+      .scb-textfield-label {
+        display: block;
+        font-size: var(--scb-textfield-label-font-size);
+        font-weight: var(--weight-semibold);
+        line-height: var(--scb-textfield-label-line-height);
+        letter-spacing: var(--scb-textfield-label-letter-spacing);
+      }
+
+      .scb-textfield-label--without-supporting {
+        margin-bottom: var(--scb-textfield-label-gap);
+      }
+
+      .scb-textfield-supporting-text {
+        display: block;
+        font-size: var(--scb-textfield-supporting-font-size);
+        line-height: var(--scb-textfield-supporting-line-height);
+        letter-spacing: var(--scb-textfield-supporting-letter-spacing);
+        margin-bottom: var(--scb-textfield-label-gap);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .scb-textfield {
+        padding: var(--scb-textfield-padding-y) var(--scb-textfield-padding-x);
+        min-height: var(--scb-textfield-min-height);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
+        font-size: var(--scb-textfield-font-size);
+        font-family: var(--brand-font);
+        line-height: var(--scb-textfield-line-height);
+        width: 100%;
+        box-sizing: border-box;
+        background-color: transparent;
+        color: var(--md-sys-color-on-surface);
+        position: relative;
+        z-index: 1;
+      }
+
+      :host([type='search']) .scb-textfield {
+        padding-right: var(--scb-textfield-trailing-reserved);
+      }
+
+      :host([type='date']) .scb-textfield {
+        padding-right: var(--scb-textfield-trailing-reserved);
+      }
+
+     md-icon + .ripple-wrapper > .scb-textfield {
+        padding-left: var(--scb-textfield-leading-padding);
+      }
+
+      .scb-textfield-icon {
+        position: absolute;
+        left: var(--scb-textfield-leading-inset);
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: var(--scb-textfield-leading-icon-size);
+        z-index: 2;
+      }
+
+      .scb-textfield:focus-visible {
+        outline: none;
+        border-color: var(--md-sys-color-primary);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
+        border: 1px solid var(--md-sys-color-primary);
+      }
+
+      .scb-textfield-wrapper {
+        position: relative;
+        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;
+      }
+
+      .scb-textfield-error-icon {
+        position: absolute;
+        right: var(--scb-textfield-trailing-inset);
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: var(--scb-textfield-trailing-icon-size);
+        color: var(--md-sys-color-error);
+        z-index: 2;
+      }
+
+      .scb-textfield.has-error-icon {
+        padding-right: calc(
+          var(--scb-textfield-trailing-inset) +
+            var(--scb-textfield-trailing-icon-size) +
+            var(--scb-textfield-trailing-gap)
+        );
+      }
+
+      /* Clear-knappen: samma box-storlek som error-ikon (var(--scale-06)).
+         Ligger längst till höger när det inte är fel.
+         När error=true flyttas den åt vänster så att error-ikon hamnar till höger. */
+      .scb-textfield-clear {
+        position: absolute;
+        right: var(--scb-textfield-trailing-inset);
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--scb-textfield-trailing-icon-size);
+        height: var(--scb-textfield-trailing-icon-size);
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface);
+        z-index: 2;
+      }
+
+      :host([error]) .scb-textfield-clear {
+        right: calc(
+          var(--scb-textfield-trailing-inset) +
+            var(--scb-textfield-trailing-icon-size) +
+            var(--spacing-2)
+        );
+      }
+
+      .scb-textfield-clear:focus-visible {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: 2px;
+      }
+
+      .scb-textfield-clear svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      /* Datumknappen ovanför input/ripple */
+      .scb-textfield-datepicker-button {
+        position: absolute;
+        right: var(--scb-textfield-trailing-inset);
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 4;
+      }
+    `],u);function x(){const t=a(s,this,h).call(this,this.spacing),e=a(s,this,h).call(this,this.spacingTop)??t,i=a(s,this,h).call(this,this.spacingBottom)??t,n=a(s,this,h).call(this,this.spacingLeft),c=a(s,this,h).call(this,this.spacingRight);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"),n?this.style.setProperty("--scb-textfield-spacing-inline-start",n):this.style.removeProperty("--scb-textfield-spacing-inline-start"),c?this.style.setProperty("--scb-textfield-spacing-inline-end",c):this.style.removeProperty("--scb-textfield-spacing-inline-end")}function h(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}function f(t=!1){const e=this.shadowRoot?.querySelector(".scb-textfield");if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement))return!0;const i=this.errorText||"Ogiltig inmatning.";let n="";if(e.setCustomValidity(""),this.required&&!e.value)n=i,e.setCustomValidity(n);else if(this.pattern&&e.value)try{new RegExp(this.pattern).test(e.value)||(n=i,e.setCustomValidity(n))}catch{e.setCustomValidity("")}const c=t?e.reportValidity():e.checkValidity();if(this.error=!c,this._internals)if(c)this._internals.setValidity({});else{const p=n||e.validationMessage||i;this._internals.setValidity({customError:!0},p,e)}return c}function m(){const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&this._boundField!==t&&(a(s,this,v).call(this),this._boundField=t,this.type!=="time"&&t.addEventListener("input",this._onFieldInput),t.addEventListener("change",this._onFieldChange),t.addEventListener("select",this._onFieldSelect),t.addEventListener("focus",this._onFieldFocus),t.addEventListener("blur",this._onFieldBlur))}function v(){const t=this._boundField;t&&(t.removeEventListener("input",this._onFieldInput),t.removeEventListener("change",this._onFieldChange),t.removeEventListener("select",this._onFieldSelect),t.removeEventListener("focus",this._onFieldFocus),t.removeEventListener("blur",this._onFieldBlur),this._boundField=null)}function S(){this._showDatepicker=!1;const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value="",t.setCustomValidity("")),this.value="",this.error=!1,this._internals){const e=this.disabled?null:"";this._internals.setFormValue(e),this._internals.setValidity({})}}function g(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}r([d({type:String,reflect:!0})],l.prototype,"type",void 0);r([d({type:String})],l.prototype,"label",void 0);r([d({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",void 0);r([d({type:String,attribute:"error-text"})],l.prototype,"errorText",void 0);r([d({type:String,attribute:"leading-icon"})],l.prototype,"leadingIcon",void 0);r([d({type:String})],l.prototype,"name",void 0);r([d({type:String})],l.prototype,"pattern",void 0);r([d({type:String,attribute:"value"})],l.prototype,"value",void 0);r([d({type:String})],l.prototype,"underLabel",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"error",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"required",void 0);r([d({type:String,reflect:!0})],l.prototype,"size",void 0);r([d({type:String,reflect:!0})],l.prototype,"spacing",void 0);r([d({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",void 0);r([d({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",void 0);r([d({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",void 0);r([d({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",void 0);r([k()],l.prototype,"_showDatepicker",void 0);l=r([$("scb-textfield")],l);