@felleslosninger/minid-elements 0.0.97 → 0.0.98

package/dist/components/textfield.js

@@ -9,11 +9,9 @@ import { HasSlotController } from "../internal/slot.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { requiredValidator, maxLengthValidator, minLengthValidator, patternValidator } from "../mixins/validators.js";
 import { watch } from "../internal/watch.js";
+import "./icon/icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -22,65 +20,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _initialValue;
 const styles = [
   css`
     :host {
       display: block;
     }
-
-    .form-control {
-      display: block;
-    }
-
-    .form-control:has(input:disabled) {
-      opacity: 0.3;
-    }
-
-    .fds-label {
-      margin-bottom: 0.5rem;
-    }
-
-    .input {
-      width: 100%;
-      outline: none;
-      box-shadow: none;
-      background-color: transparent;
-      padding: 0 1rem;
-    }
-
-    .field:has(.input:disabled) {
-      opacity: var(--fds-opacity-disabled);
-    }
-
-    .suffix,
-    .prefix {
-      display: flex;
-      place-items: center;
-    }
-
-    .suffix ::slotted(*) {
-      margin-inline-end: 1rem !important; // global style for button is margin: 0
-      border-radius: 4px;
-    }
-
-    .prefix ::slotted(*) {
-      margin-inline-start: 1rem !important; // global style for button is margin: 0
-      border-radius: 4px;
-    }
-
-    .fds-textfield__readonly__icon svg {
-      font-size: 1.2em;
-    }
-
-    .clear-button:not(:disabled, [aria-disabled]):hover mid-icon {
-      border-radius: 4px;
-      background: var(--fds-semantic-surface-action-subtle-hover);
-    }
   `
 ];
 let nextUniqueId = 0;
@@ -90,7 +34,7 @@ let MinidTextfield = class extends FormControlMixin(
   constructor() {
     super();
     this.hasSlotControler = new HasSlotController(this, "label");
-    __privateAdd(this, _initialValue, "");
+    this.initialValue = "";
     this.label = "";
     this.description = "";
     this.value = "";
@@ -110,9 +54,6 @@ let MinidTextfield = class extends FormControlMixin(
     this.inputId = `mid-textfield-input-${nextUniqueId}`;
     this.descriptionId = `mid-textfield-description-${nextUniqueId}`;
   }
-  /**
-   * @ignore
-   */
   static get formControlValidators() {
     return [
       requiredValidator,
@@ -121,15 +62,12 @@ let MinidTextfield = class extends FormControlMixin(
       patternValidator
     ];
   }
-  /**
-   * @ignore
-   */
   get validationTarget() {
     return this.input;
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateSet(this, _initialValue, this.value);
+    this.initialValue = this.value;
   }
   handleKeydown(event) {
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
@@ -191,7 +129,7 @@ let MinidTextfield = class extends FormControlMixin(
   }
   resetFormControl() {
     this.invalidmessage = "";
-    this.value = __privateGet(this, _initialValue);
+    this.value = this.initialValue;
   }
   forceError(message) {
     super.forceError(message);
@@ -209,72 +147,58 @@ let MinidTextfield = class extends FormControlMixin(
     const isClearIconVisible = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
     return html`
       <div
-        part="form-control"
+        part="field"
         class="${classMap({
-      "form-control": true,
-      "fds-paragraph": true,
-      "fds-textfield": true,
-      "fds-textfield--readonly": this.readonly,
-      "fds-paragraph--sm": sm,
-      "fds-paragraph--md": md,
-      "fds-paragraph--lg": lg,
-      "fds-textfield--sm": sm,
-      "fds-textfield--md": md,
-      "fds-textfield--lg": lg
+      "opacity-disabled": this.disabled,
+      "text-body-sm": sm,
+      "text-body-md": md,
+      "text-body-lg": lg
     })}"
       >
         <label
           for="${this.inputId}"
           class="${classMap({
-      "sr-only": this.hidelabel || !hasLabel,
-      "fds-label": true,
-      "fds-label--medium-weight": true,
-      "fds-textfield__label": true,
-      "fds-label--sm": sm,
-      "fds-label--md": md,
-      "fds-label--lg": lg
-    })}"
+      "sr-only": this.hidelabel || !hasLabel
+    })} mb-2 inline-flex items-center gap-1 font-medium"
         >
-          ${!this.readonly ? nothing : html`<mid-icon
-                class="fds-textfield__readonly__icon"
+          ${this.readonly ? html`<mid-icon
+                class="size-5"
                 library="system"
                 name="padlock-locked-fill"
-              ></mid-icon>`}
+              ></mid-icon>` : nothing}
           <slot name="label"> ${this.label} </slot>
         </label>
-        ${!this.description ? nothing : html`
+        ${this.description ? html`
               <div
                 id="${this.descriptionId}"
                 part="description"
                 class="${classMap({
-      description: true,
-      "fds-paragraph": true,
-      "sr-only": this.hidelabel,
-      "fds-paragraph--sm": sm,
-      "fds-paragraph--md": md,
-      "fds-paragraph--lg": lg,
-      "fds-textfield__description": true
-    })}"
+      "sr-only": this.hidelabel
+    })} text-neutral-subtle mb-2"
               >
                 ${this.description}
               </div>
-            `}
+            ` : nothing}
         <div
           part="base"
           class="${classMap({
-      "fds-textfield__field": true,
-      "border-neutral": !this.invalidmessage,
-      "border-danger": this.invalidmessage,
+      "border-neutral": !this.invalidmessage && !this.readonly,
+      "border-danger": this.invalidmessage && !this.readonly,
+      "border-neutral-subtle": this.readonly,
+      "bg-neutral-surface-tinted": this.readonly,
+      "bg-neutral-surface": !this.readonly,
       border: !this.invalidmessage,
       "border-2": this.invalidmessage
-    })} field focus-within:shadow-focus-inner focus-within:outline-focus-outer outline-2 outline-transparent focus-within:outline-3 focus-within:outline-offset-3"
+    })} focus-within:focus-ring flex h-12 items-center rounded-md px-3"
         >
-          <span class="prefix">
+          <span class="slotted:!mr-2 slotted:rounded flex items-center">
             <slot name="prefix"></slot>
           </span>
           <input
             id="${this.inputId}"
-            class="input"
+            class="${classMap({
+      "[&::-webkit-search-cancel-button]:appearance-none": this.type === "search"
+    })} input grow focus-visible:outline-0"
             part="input"
             .value=${live(this.value)}
             ?disabled=${this.disabled}
@@ -300,60 +224,57 @@ let MinidTextfield = class extends FormControlMixin(
                 <button
                   part="clear-button"
                   type="button"
-                  class="${classMap({
-      "text-6": sm,
-      "text-7": md,
-      "text-8": lg
-    })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded"
+                  class="focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm"
                   aria-label="Tøm"
                   @click=${this.handleClearClick}
                 >
-                  <mid-icon name="xmark" library="system"></mid-icon>
+                  <mid-icon
+                    class="size-7"
+                    library="system"
+                    name="xmark"
+                  ></mid-icon>
                 </button>
               ` : ""}
           ${this.passwordtoggle && !this.disabled ? html`
                 <button
                   part="password-toggle-button"
                   type="button"
-                  class="${classMap({
-      "text-6": sm,
-      "text-7": md,
-      "text-8": lg
-    })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded"
+                  class="ml-2 flex items-center justify-center rounded-sm"
                   aria-label=${this.passwordvisible ? "skjul passord" : "vis passord"}
                   @click=${this.handlePasswordToggle}
                   tabindex="-1"
                 >
                   ${this.passwordvisible ? html` <mid-icon
-                        name="eye-slash"
+                        class="size-7"
                         library="system"
+                        name="eye-slash"
                       ></mid-icon>` : html`
-                        <mid-icon name="eye" library="system"> </mid-icon>
+                        <mid-icon
+                          class="size-7"
+                          library="system"
+                          name="eye"
+                        ></mid-icon>
                       `}
                 </button>
               ` : ""}
-          <span part="suffix" class="suffix">
+          <span part="suffix" class="slotted:!ml-2 slotted:rounded">
             <slot name="suffix"></slot>
           </span>
         </div>
-      </div>
-      <div
-        class="${classMap({
+        <div
+          class="${classMap({
       hidden: !this.invalidmessage
-    })} error-message text-danger-subtle flex gap-1 pt-2"
-        id="error-message"
-        aria-live="polite"
-      >
-        <mid-icon name="xmark-octagon-fill" class="mt-1 text-xl"></mid-icon>
-        ${this.invalidmessage}
+    })} text-danger-subtle mt-2 flex items-center gap-1"
+          id="error-message"
+          aria-live="polite"
+        >
+          <mid-icon name="xmark-octagon-fill" class="size-5"></mid-icon>
+          ${this.invalidmessage}
+        </div>
       </div>
     `;
   }
 };
-_initialValue = /* @__PURE__ */ new WeakMap();
-__decorateClass([
-  query(".error-message")
-], MinidTextfield.prototype, "errorMessageDiv", 2);
 __decorateClass([
   query(".input")
 ], MinidTextfield.prototype, "input", 2);

package/dist/components/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    .form-control {\n      display: block;\n    }\n\n    .form-control:has(input:disabled) {\n      opacity: 0.3;\n    }\n\n    .fds-label {\n      margin-bottom: 0.5rem;\n    }\n\n    .input {\n      width: 100%;\n      outline: none;\n      box-shadow: none;\n      background-color: transparent;\n      padding: 0 1rem;\n    }\n\n    .field:has(.input:disabled) {\n      opacity: var(--fds-opacity-disabled);\n    }\n\n    .suffix,\n    .prefix {\n      display: flex;\n      place-items: center;\n    }\n\n    .suffix ::slotted(*) {\n      margin-inline-end: 1rem !important; // global style for button is margin: 0\n      border-radius: 4px;\n    }\n\n    .prefix ::slotted(*) {\n      margin-inline-start: 1rem !important; // global style for button is margin: 0\n      border-radius: 4px;\n    }\n\n    .fds-textfield__readonly__icon svg {\n      font-size: 1.2em;\n    }\n\n    .clear-button:not(:disabled, [aria-disabled]):hover mid-icon {\n      border-radius: 4px;\n      background: var(--fds-semantic-surface-action-subtle-hover);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The fields's base wrapper.\n * @csspart input - The internal `<input>` element.\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  /**\n   * @ignore\n   */\n  inputId!: string;\n\n  /**\n   * @ignore\n   */\n  descriptionId!: string;\n\n  /**\n   * @ignore\n   */\n  hasSlotControler = new HasSlotController(this, 'label');\n\n  /**\n   * @ignore\n   */\n  #initialValue = '';\n\n  /**\n   * @ignore\n   */\n  @query('.error-message')\n  errorMessageDiv!: HTMLDivElement;\n\n  /**\n   * @ignore\n   */\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @state()\n  hasFocus = false;\n\n  /**\n   * @ignore\n   */\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  /**\n   * @ignore\n   */\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#initialValue = this.value;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.#initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=\"${classMap({\n          'form-control': true,\n          'fds-paragraph': true,\n          'fds-textfield': true,\n          'fds-textfield--readonly': this.readonly,\n          'fds-paragraph--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-textfield--sm': sm,\n          'fds-textfield--md': md,\n          'fds-textfield--lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n            'fds-label': true,\n            'fds-label--medium-weight': true,\n            'fds-textfield__label': true,\n            'fds-label--sm': sm,\n            'fds-label--md': md,\n            'fds-label--lg': lg,\n          })}\"\n        >\n          ${!this.readonly\n            ? nothing\n            : html`<mid-icon\n                class=\"fds-textfield__readonly__icon\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${!this.description\n          ? nothing\n          : html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  description: true,\n                  'fds-paragraph': true,\n                  'sr-only': this.hidelabel,\n                  'fds-paragraph--sm': sm,\n                  'fds-paragraph--md': md,\n                  'fds-paragraph--lg': lg,\n                  'fds-textfield__description': true,\n                })}\"\n              >\n                ${this.description}\n              </div>\n            `}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'fds-textfield__field': true,\n            'border-neutral': !this.invalidmessage,\n            'border-danger': this.invalidmessage,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} field focus-within:shadow-focus-inner focus-within:outline-focus-outer outline-2 outline-transparent focus-within:outline-3 focus-within:outline-offset-3\"\n        >\n          <span class=\"prefix\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"input\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${this.descriptionId}\"\n            aria-errormessage=\"error-message\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"${classMap({\n                    'text-6': sm,\n                    'text-7': md,\n                    'text-8': lg,\n                  })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon name=\"xmark\" library=\"system\"></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"${classMap({\n                    'text-6': sm,\n                    'text-7': md,\n                    'text-8': lg,\n                  })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        name=\"eye-slash\"\n                        library=\"system\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon name=\"eye\" library=\"system\"> </mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"suffix\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"${classMap({\n          hidden: !this.invalidmessage,\n        })} error-message text-danger-subtle flex gap-1 pt-2\"\n        id=\"error-message\"\n        aria-live=\"polite\"\n      >\n        <mid-icon name=\"xmark-octagon-fill\" class=\"mt-1 text-xl\"></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\nimport './icon/icon.component.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The input's wrapper that has the input field styling.\n * @csspart input - The internal `<input>` element.\n * @csspart field - The element that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  private readonly inputId!: string;\n  private readonly descriptionId!: string;\n  private readonly hasSlotControler = new HasSlotController(this, 'label');\n  private initialValue = '';\n\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @state()\n  hasFocus = false;\n\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.initialValue = this.value;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"field\"\n        class=\"${classMap({\n          'opacity-disabled': this.disabled,\n          'text-body-sm': sm,\n          'text-body-md': md,\n          'text-body-lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n          })} mb-2 inline-flex items-center gap-1 font-medium\"\n        >\n          ${this.readonly\n            ? html`<mid-icon\n                class=\"size-5\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`\n            : nothing}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${this.description\n          ? html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  'sr-only': this.hidelabel,\n                })} text-neutral-subtle mb-2\"\n              >\n                ${this.description}\n              </div>\n            `\n          : nothing}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'border-neutral': !this.invalidmessage && !this.readonly,\n            'border-danger': this.invalidmessage && !this.readonly,\n            'border-neutral-subtle': this.readonly,\n            'bg-neutral-surface-tinted': this.readonly,\n            'bg-neutral-surface': !this.readonly,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} focus-within:focus-ring flex h-12 items-center rounded-md px-3\"\n        >\n          <span class=\"slotted:!mr-2 slotted:rounded flex items-center\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"${classMap({\n              '[&::-webkit-search-cancel-button]:appearance-none':\n                this.type === 'search',\n            })} input grow focus-visible:outline-0\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${this.descriptionId}\"\n            aria-errormessage=\"error-message\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"focus-visible:focus-ring ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon\n                    class=\"size-7\"\n                    library=\"system\"\n                    name=\"xmark\"\n                  ></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"ml-2 flex items-center justify-center rounded-sm\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        class=\"size-7\"\n                        library=\"system\"\n                        name=\"eye-slash\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon\n                          class=\"size-7\"\n                          library=\"system\"\n                          name=\"eye\"\n                        ></mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"slotted:!ml-2 slotted:rounded\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n        <div\n          class=\"${classMap({\n            hidden: !this.invalidmessage,\n          })} text-danger-subtle mt-2 flex items-center gap-1\"\n          id=\"error-message\"\n          aria-live=\"polite\"\n        >\n          <mid-icon name=\"xmark-octagon-fill\" class=\"size-5\"></mid-icon>\n          ${this.invalidmessage}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/tooltip.component.d.ts

@@ -18,30 +18,17 @@ declare const MinidTooltip_base: typeof LitElement;
  * @csspart base - The component base wrapper. `<mid-popup> element
  * @csspart body - The tooltip body, where the content is rendered
  *
+ * @method show - Shows the tooltip
+ * @method hide - Hides the tooltip
+ *
  * @cssproperty [--max-width=20rem] - Max width of the tooltip content
  * @cssproperty [--hide-delay=0ms] - Delay for hiding the tooltip
  * @cssproperty [--show-delay=150ms] - Delay for showing the tooltip
  */
 export declare class MinidTooltip extends MinidTooltip_base {
-    /**
-     * @ignore
-     */
     private hoverTimeout?;
-    /**
-     * @ignore
-     */
     private closeWatcher;
-    /**
-     * @ignore
-     */
-    defaultSlot: HTMLSlotElement;
-    /**
-     * @ignore
-     */
     body: HTMLElement;
-    /**
-     * @ignore
-     */
     popup: MinidPopup;
     /**
      * The text to render in the tooltip. If you need HTML you can use the content slot
@@ -53,6 +40,7 @@ export declare class MinidTooltip extends MinidTooltip_base {
      */
     trigger: 'focus hover' | 'hover' | 'focus' | 'manual' | 'click';
     placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    size: 'sm' | 'md' | 'lg';
     /**
      * Disables the tooltip so it won't show when triggered.
      */
@@ -82,33 +70,12 @@ export declare class MinidTooltip extends MinidTooltip_base {
     constructor();
     disconnectedCallback(): void;
     firstUpdated(): void;
-    /**
-     * @ignore
-     */
     private handleBlur;
-    /**
-     * @ignore
-     */
     private handleClick;
-    /**
-     * @ignore
-     */
     private handleFocus;
-    /**
-     * @ignore
-     */
     private handleDocumentKeyDown;
-    /**
-     * @ignore
-     */
     private handleMouseOver;
-    /**
-     * @ignore
-     */
     private handleMouseOut;
-    /**
-     * @ignore
-     */
     private hasTrigger;
     handleOpenChange(): Promise<void>;
     handleOptionsChange(): Promise<void>;

package/dist/components/tooltip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAa/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAyBD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IAC1D;;OAEG;IACH,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B;;OAEG;IACH,OAAO,CAAC,YAAY,CAA6B;IAEjD;;OAEG;IAEH,WAAW,EAAG,eAAe,CAAC;IAE9B;;OAEG;IAEH,IAAI,EAAG,WAAW,CAAC;IAEnB;;OAEG;IAEH,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,OAAO,SAAM;IAEb;;;OAGG;IAEH,OAAO,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAC/C;IAEJ,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,QAAQ,UAAS;;IAWjB,oBAAoB;IAMpB,YAAY;IAUZ;;OAEG;IACH,OAAO,CAAC,UAAU,CAIhB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAIjB;IAEF;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAM3B;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAQrB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc,CAQpB;IAEF;;OAEG;IACH,OAAO,CAAC,UAAU;IAMZ,gBAAgB;IAmDhB,mBAAmB;IAQzB,oBAAoB;IAMpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CAyChB"}
+{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAa/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAYD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IAC1D,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,YAAY,CAA6B;IAGjD,IAAI,EAAG,WAAW,CAAC;IAGnB,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,OAAO,SAAM;IAEb;;;OAGG;IAEH,OAAO,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAC/C;IAEJ,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAGvB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,QAAQ,UAAS;;IAWjB,oBAAoB;IAMpB,YAAY;IAUZ,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,WAAW,CAQjB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,qBAAqB,CAM3B;IAEF,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,UAAU;IAMZ,gBAAgB;IAmDhB,mBAAmB;IAQzB,oBAAoB;IAMpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CAwChB"}

package/dist/components/tooltip.js

@@ -24,19 +24,6 @@ const styles = [
       --hide-delay: 0ms;
       --show-delay: 250ms;
     }
-
-    .tooltip__body {
-      width: max-content;
-      max-width: var(--max-width);
-    }
-
-    .tooltip {
-      --arrow-color: var(--fds-semantic-surface-neutral-inverted);
-    }
-
-    .tooltip.inverted {
-      --arrow-color: var(--fds-semantic-surface-neutral-subtle);
-    }
   `
 ];
 let MinidTooltip = class extends styled(LitElement, styles) {
@@ -46,6 +33,7 @@ let MinidTooltip = class extends styled(LitElement, styles) {
     this.content = "";
     this.trigger = "focus hover";
     this.placement = "top";
+    this.size = "md";
     this.disabled = false;
     this.distance = 8;
     this.open = false;
@@ -112,9 +100,6 @@ let MinidTooltip = class extends styled(LitElement, styles) {
       this.popup.reposition();
     }
   }
-  /**
-   * @ignore
-   */
   hasTrigger(triggerType) {
     const triggers = this.trigger.split(" ");
     return triggers.includes(triggerType);
@@ -198,15 +183,13 @@ let MinidTooltip = class extends styled(LitElement, styles) {
         role="tooltip"
         ?active=${this.open}
         part="base"
-        exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        "
-        class=${classMap({
-      tooltip: true,
-      inverted: this.inverted,
-      "tooltip--open": this.open
-    })}
+        class="${classMap({
+      "[--arrow-color:var(--color-neutral-base)]": !this.inverted,
+      "[--arrow-color:var(--color-neutral-surface)]": this.inverted,
+      "text-body-sm": this.size === "sm",
+      "text-body-md": this.size === "md",
+      "text-body-lg": this.size === "lg"
+    })}"
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
@@ -219,12 +202,13 @@ let MinidTooltip = class extends styled(LitElement, styles) {
         <slot slot="anchor"></slot>
         <div
           part="body"
-          id="tooltip"
+          id="body"
           class="${classMap({
-      "fds-tooltip": true,
-      tooltip__body: true,
-      "fds-tooltip--inverted": this.inverted
-    })}"
+      "bg-neutral": this.inverted,
+      "text-neutral": this.inverted,
+      "bg-neutral-base": !this.inverted,
+      "text-neutral-base-contrast": !this.inverted
+    })} leading-sm w-max max-w-(--max-width) rounded px-2 py-1"
           role="tooltip"
           aria-live=${this.open ? "polite" : "off"}
         >
@@ -235,10 +219,7 @@ let MinidTooltip = class extends styled(LitElement, styles) {
   }
 };
 __decorateClass([
-  query("slot:not([name])")
-], MinidTooltip.prototype, "defaultSlot", 2);
-__decorateClass([
-  query(".tooltip__body")
+  query("#body")
 ], MinidTooltip.prototype, "body", 2);
 __decorateClass([
   query("mid-popup")
@@ -252,6 +233,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], MinidTooltip.prototype, "placement", 2);
+__decorateClass([
+  property()
+], MinidTooltip.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MinidTooltip.prototype, "disabled", 2);