@reliability-design/web 1.3.0 → 1.3.1

package/dist/index.js

@@ -87,7 +87,7 @@ __export(index_exports, {
   RelTopbarUtilities: () => RelTopbarUtilities
 });
 module.exports = __toCommonJS(index_exports);
-var import_vars = require("./vars-I2PC74XD.css");
+var import_vars = require("./vars-F54UGCHM.css");
 
 // src/components/rel-accordion/rel-accordion.ts
 var import_vars_v2 = require("./vars-v2-VMGWTFJZ.css");
@@ -522,7 +522,7 @@ RelAlert.styles = import_lit2.css`
 
     .rel-alert {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       gap: var(--rel-spacing-space-xs);
       padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
       border-radius: var(--rel-borders-radius-border-radius-200);
@@ -548,9 +548,15 @@ RelAlert.styles = import_lit2.css`
       opacity: 0.9;
     }
 
+    .rel-icon {
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
     .rel-icon svg {
       width: 16px;
       height: 16px;
+      display: block;
     }
 
     .rel-link {
@@ -563,6 +569,7 @@ RelAlert.styles = import_lit2.css`
 
     .rel-close {
       margin-left: auto;
+      align-self: flex-start;
       background: none;
       border: none;
       cursor: pointer;
@@ -912,46 +919,63 @@ RelBadge.styles = import_lit4.css`
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      box-sizing: border-box;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
       background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
       color: var(--rel-badge-color, #ffffff);
-      border-radius: 50%;
+      /* Large fixed radius (not 50%) — stays a perfect circle for 1-2 digits,
+         but becomes a pill instead of clipping when content like "999+"
+         is wider than the minimum circle. */
+      border-radius: 999px;
+      white-space: nowrap;
     }
 
-    /* NUMBER BADGES */
+    /* NUMBER BADGES — min-width (not width) lets multi-character content
+       like "999+" grow the badge into a pill instead of overflowing a fixed circle. */
     .badge-sm {
-      width: 20px;
+      min-width: 20px;
       height: 20px;
+      padding: 0 4px;
       font-size: var(--rel-fontSizes-xs, 12px);
     }
 
     .badge-md {
-      width: 28px;
+      min-width: 28px;
       height: 28px;
+      padding: 0 6px;
       font-size: var(--rel-fontSizes-sm, 14px);
     }
 
     .badge-lg {
-      width: 40px;
+      min-width: 40px;
       height: 40px;
+      padding: 0 8px;
       font-size: var(--rel-fontSizes-lg, 20px);
     }
 
-    /* DOT BADGES */
+    /* DOT BADGES — explicitly reset min-width/padding inherited from the
+       number-badge size rules above; otherwise min-width wins over this
+       smaller width and the dot gets stretched into a squashed pill. */
     .badge-dot.badge-sm {
       width: 8px;
       height: 8px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-md {
       width: 10px;
       height: 10px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-lg {
       width: 12px;
       height: 12px;
+      min-width: 0;
+      padding: 0;
     }
   `;
 __decorateClass([
@@ -1092,6 +1116,8 @@ var RelButton = class extends import_lit6.LitElement {
     this.border = "corner-radius";
     this.disabled = false;
     this.ariaLabel = null;
+    this.badge = "";
+    this.badgeDot = false;
     this.handleHostClick = (e) => {
       if (this.disabled) {
         e.preventDefault();
@@ -1123,6 +1149,7 @@ var RelButton = class extends import_lit6.LitElement {
     }
   }
   render() {
+    const showBadge = this.badgeDot || !!this.badge;
     return import_lit6.html`
       <button
         class="${this.classes}"
@@ -1133,12 +1160,36 @@ var RelButton = class extends import_lit6.LitElement {
       >
         <slot></slot>
       </button>
+      ${showBadge ? import_lit6.html`<rel-badge
+            class="btn-badge"
+            variant=${this.badgeDot ? "dot" : "number"}
+            number=${this.badge}
+            size="sm"
+          ></rel-badge>` : null}
     `;
   }
 };
 RelButton.styles = import_lit6.css`
     :host {
       display: inline-flex;
+      position: relative;
+    }
+
+    .btn-badge {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      pointer-events: none;
+    }
+
+    /* Icon buttons are a 40px circle (radius 20). An 8px dot's center needs to
+       land ON that circle's edge at the 45° corner point — which works out to
+       roughly 2px inward from each edge (R - R/√2 - dot-radius ≈ 1.9px), not
+       outside it like the numbered badge. Negative offsets here would float
+       the dot in the empty bounding-box corner outside the visible circle. */
+    .btn-badge[variant="dot"] {
+      top: 2px;
+      right: 2px;
     }
 
     button {
@@ -1379,6 +1430,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators6.property)({ type: String, attribute: "aria-label" })
 ], RelButton.prototype, "ariaLabel", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: String })
+], RelButton.prototype, "badge", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Boolean, attribute: "badge-dot" })
+], RelButton.prototype, "badgeDot", 2);
 RelButton = __decorateClass([
   (0, import_decorators6.customElement)("rel-button")
 ], RelButton);
@@ -2815,6 +2872,9 @@ var RelDatePicker = class extends import_lit12.LitElement {
     this.label = null;
     this.disabled = false;
     this.required = false;
+    this.readonly = false;
+    this.minDate = null;
+    this.maxDate = null;
     this.min = null;
     this.max = null;
     this.weekStart = "sun";
@@ -2822,6 +2882,10 @@ var RelDatePicker = class extends import_lit12.LitElement {
     this.open = false;
     this.closeOnSelect = true;
     this.clearable = false;
+    this.error = false;
+    this.size = "medium";
+    this.variant = "outlined";
+    this.fullWidth = false;
     this.viewYear = (/* @__PURE__ */ new Date()).getFullYear();
     this.viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     this.focusedDate = null;
@@ -2840,6 +2904,13 @@ var RelDatePicker = class extends import_lit12.LitElement {
       }
     };
   }
+  // minDate/maxDate supersede the deprecated min/max aliases
+  get minBound() {
+    return this.minDate ?? this.min;
+  }
+  get maxBound() {
+    return this.maxDate ?? this.max;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (this.value) {
@@ -2900,12 +2971,12 @@ var RelDatePicker = class extends import_lit12.LitElement {
   }
   isDateDisabledInternal(date) {
     if (this.disabled) return true;
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate && date < minDate) return true;
     }
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate && date > maxDate) return true;
     }
     if (this.isDateDisabled && this.isDateDisabled(date)) {
@@ -2990,12 +3061,12 @@ var RelDatePicker = class extends import_lit12.LitElement {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     let startYear = currentYear - 100;
     let endYear = currentYear + 10;
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate) startYear = Math.max(startYear, minDate.getFullYear() - 5);
     }
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate) endYear = Math.min(endYear, maxDate.getFullYear() + 5);
     }
     const years = [];
@@ -3005,7 +3076,7 @@ var RelDatePicker = class extends import_lit12.LitElement {
     return years.reverse();
   }
   toggleCalendarPopover() {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
     this.open = !this.open;
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
@@ -3045,7 +3116,7 @@ var RelDatePicker = class extends import_lit12.LitElement {
     }
   }
   selectDay(day) {
-    if (day.isDisabled || this.disabled) return;
+    if (day.isDisabled || this.disabled || this.readonly) return;
     const newValue = this.formatISODate(day.date);
     this.value = newValue;
     this.dispatchEvent(
@@ -3179,12 +3250,25 @@ var RelDatePicker = class extends import_lit12.LitElement {
     const weekdayLabels = this.getWeekdayLabels();
     const months = this.getMonthsList();
     const years = this.getYearsList();
+    const isError = this.error;
+    const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
+    const describedById = belowText ? "date-picker-desc" : void 0;
+    const wrapperClasses = [
+      "date-picker-wrapper",
+      this.size,
+      isError ? "error" : "",
+      this.readonly ? "readonly" : ""
+    ].filter(Boolean).join(" ");
     return import_lit12.html`
-      <div class="date-picker-wrapper">
-        ${this.label ? import_lit12.html`<label class="label" id="date-picker-label">${this.label}</label>` : import_lit12.nothing}
+      <div class="${wrapperClasses}">
+        ${this.label ? import_lit12.html`<label class="label" id="date-picker-label"
+              >${this.label}${this.required ? import_lit12.html`<span class="required-mark" aria-hidden="true">*</span>` : import_lit12.nothing}</label
+            >` : import_lit12.nothing}
+
+        ${this.name ? import_lit12.html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />` : import_lit12.nothing}
 
         <button
-          class="trigger-button"
+          class="trigger-button ${isError ? "error" : ""}"
           type="button"
           ?disabled=${this.disabled}
           @click=${this.toggleCalendarPopover}
@@ -3193,6 +3277,9 @@ var RelDatePicker = class extends import_lit12.LitElement {
           aria-haspopup="dialog"
           aria-expanded=${this.open}
           aria-required=${this.required}
+          aria-invalid=${isError}
+          aria-readonly=${this.readonly}
+          aria-describedby=${describedById ?? import_lit12.nothing}
           aria-labelledby=${this.label ? "date-picker-label" : import_lit12.nothing}
         >
           <span class="trigger-content ${this.value ? "" : "placeholder"}">
@@ -3341,17 +3428,27 @@ var RelDatePicker = class extends import_lit12.LitElement {
     )}
           </div>
         </div>
+
+        ${belowText ? import_lit12.html`<div class="date-picker-support ${isError ? "error" : ""}" id=${describedById}>
+              ${belowText}
+            </div>` : import_lit12.nothing}
       </div>
     `;
   }
 };
 RelDatePicker.styles = import_lit12.css`
     :host {
-      display: inline-block;
+      display: block;
       font-family: var(--rel-fontFamilies-primary);
       position: relative;
     }
 
+    /* Intrinsic width by default; set fullWidth to fill the parent. */
+    :host(:not([fullwidth])) {
+      display: inline-block;
+      width: auto;
+    }
+
     :host([disabled]) {
       opacity: 0.6;
       cursor: not-allowed;
@@ -3361,6 +3458,10 @@ RelDatePicker.styles = import_lit12.css`
       pointer-events: none;
     }
 
+    :host([readonly]) .trigger-button {
+      cursor: default;
+    }
+
     .date-picker-wrapper {
       display: flex;
       flex-direction: column;
@@ -3373,6 +3474,21 @@ RelDatePicker.styles = import_lit12.css`
       color: var(--rel-text-heading);
     }
 
+    .required-mark {
+      color: var(--rel-error-surface-default, #cc0000);
+      margin-left: 2px;
+    }
+
+    /* Support text (helperText / errorMessage) */
+    .date-picker-support {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-color-text-placeholder);
+    }
+
+    .date-picker-support.error {
+      color: var(--rel-error-surface-default, #cc0000);
+    }
+
     .trigger-button {
       width: 100%;
       min-width: 200px;
@@ -3407,6 +3523,28 @@ RelDatePicker.styles = import_lit12.css`
       background: var(--rel-surface-secondary);
     }
 
+    /* Error state */
+    .trigger-button.error,
+    .trigger-button.error:hover:not(:disabled) {
+      border-color: var(--rel-error-surface-default, #cc0000);
+    }
+
+    .trigger-button.error:focus-visible {
+      outline-color: var(--rel-error-surface-default, #cc0000);
+      border-color: var(--rel-error-surface-default, #cc0000);
+    }
+
+    /* Size variants (medium is the base .trigger-button style) */
+    .date-picker-wrapper.small .trigger-button {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
+    }
+
+    .date-picker-wrapper.large .trigger-button {
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-lg);
+    }
+
     .trigger-content {
       flex: 1;
       color: var(--rel-text-primary);
@@ -3657,6 +3795,15 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators12.property)({ type: Boolean })
 ], RelDatePicker.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Boolean, reflect: true })
+], RelDatePicker.prototype, "readonly", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "min-date" })
+], RelDatePicker.prototype, "minDate", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "max-date" })
+], RelDatePicker.prototype, "maxDate", 2);
 __decorateClass([
   (0, import_decorators12.property)({ type: String })
 ], RelDatePicker.prototype, "min", 2);
@@ -3678,6 +3825,27 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators12.property)({ type: Boolean })
 ], RelDatePicker.prototype, "clearable", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Boolean })
+], RelDatePicker.prototype, "error", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "error-message" })
+], RelDatePicker.prototype, "errorMessage", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "helper-text" })
+], RelDatePicker.prototype, "helperText", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String })
+], RelDatePicker.prototype, "name", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String })
+], RelDatePicker.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, reflect: true })
+], RelDatePicker.prototype, "variant", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Boolean, reflect: true })
+], RelDatePicker.prototype, "fullWidth", 2);
 __decorateClass([
   (0, import_decorators12.state)()
 ], RelDatePicker.prototype, "viewYear", 2);
@@ -13456,6 +13624,7 @@ var RelTabItem = class extends import_lit51.LitElement {
     this.label = "";
     this.value = "";
     this.badge = 0;
+    this.badgeDot = false;
     this.disabled = false;
   }
   render() {
@@ -13471,6 +13640,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators51.property)({ type: Number })
 ], RelTabItem.prototype, "badge", 2);
+__decorateClass([
+  (0, import_decorators51.property)({ type: Boolean, attribute: "badge-dot" })
+], RelTabItem.prototype, "badgeDot", 2);
 __decorateClass([
   (0, import_decorators51.property)({ type: Boolean })
 ], RelTabItem.prototype, "disabled", 2);
@@ -13493,6 +13665,7 @@ var RelTab = class extends import_lit51.LitElement {
       return this._tabItems.map((item) => ({
         label: item.label,
         badge: item.badge || 0,
+        badgeDot: item.badgeDot,
         disabled: item.disabled
       }));
     }
@@ -13549,7 +13722,7 @@ var RelTab = class extends import_lit51.LitElement {
               @keydown="${(e) => this.onKeyDown(e, i)}"
             >
               <span class="tab-label">${tab.label}</span>
-              ${tab.badge ? import_lit51.html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>` : ""}
+              ${tab.badgeDot ? import_lit51.html`<rel-badge variant="dot" size="sm"></rel-badge>` : tab.badge ? import_lit51.html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>` : ""}
               <span class="tab-underline"></span>
             </div>
           `
@@ -13660,10 +13833,31 @@ var RelTextfield = class extends import_lit52.LitElement {
     this.size = "medium";
     this.floatingLabel = false;
     this.variant = "default";
+    this.disabled = false;
+    this.required = false;
+    this.multiline = false;
+    this.rows = 3;
+    this.error = false;
+    this.readonly = false;
+    this.fullWidth = true;
     this.internalState = "default";
     this._wasError = false;
     this.uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
   }
+  get isDisabled() {
+    return this.disabled || this.state === "disabled";
+  }
+  get isError() {
+    return this.error || this.state === "error";
+  }
+  // prefixIcon supersedes the deprecated leftIcon
+  get leadingIcon() {
+    return this.prefixIcon ?? this.leftIcon;
+  }
+  // helperText supersedes the deprecated supportingText
+  get helper() {
+    return this.helperText ?? this.supportingText;
+  }
   connectedCallback() {
     super.connectedCallback();
     const leftIcon = this.getAttribute("lefticon") || this.getAttribute("leftIcon");
@@ -13672,7 +13866,7 @@ var RelTextfield = class extends import_lit52.LitElement {
     if (rightIcon) this.rightIcon = rightIcon;
   }
   handleFocus() {
-    if (this.state !== "disabled") {
+    if (!this.isDisabled) {
       this.internalState = "focused";
     }
   }
@@ -13700,51 +13894,108 @@ var RelTextfield = class extends import_lit52.LitElement {
     );
   }
   render() {
+    const isError = this.isError;
+    const stateClass = this.isDisabled ? "disabled" : isError ? "error" : "default";
+    const leadingIcon = this.leadingIcon;
+    const inputId = this.id || this.uniqueId;
+    const legendId = `${inputId}-legend`;
+    const belowText = isError && this.errorMessage ? this.errorMessage : this.helper;
+    const describedById = belowText ? `${inputId}-desc` : void 0;
     const wrapperClasses = [
       "textfield-wrapper",
       this.size,
-      this.state,
+      stateClass,
+      this.readonly ? "readonly" : "",
       this.internalState === "focused" ? "focused" : "",
       this.value ? "has-value" : ""
     ].filter(Boolean).join(" ");
     const inputClasses = [
       "textfield-input",
-      this.leftIcon ? "has-left-icon" : "",
-      this.rightIcon ? "has-right-icon" : ""
+      !this.multiline && leadingIcon ? "has-left-icon" : "",
+      !this.multiline && this.rightIcon && this.variant !== "legend" ? "has-right-icon" : ""
     ].filter(Boolean).join(" ");
+    const labelTemplate = (extraClass = "") => {
+      if (!this.label) return "";
+      return import_lit52.html`<label
+        class="textfield-label${extraClass}"
+        for="${inputId}"
+      >${this.label}${this.required ? import_lit52.html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</label>`;
+    };
+    const ariaLabelledby = this.variant === "legend" && this.label ? legendId : void 0;
+    const inputTemplate = this.multiline ? import_lit52.html`<textarea
+          id="${inputId}"
+          class="${inputClasses}"
+          placeholder="${this.placeholder}"
+          .value="${this.value}"
+          rows="${this.rows}"
+          name="${this.name ?? import_lit52.nothing}"
+          maxlength="${this.maxLength ?? import_lit52.nothing}"
+          ?disabled="${this.isDisabled}"
+          ?readonly="${this.readonly}"
+          ?required="${this.required}"
+          aria-invalid="${isError}"
+          aria-required="${this.required}"
+          aria-labelledby="${ariaLabelledby ?? import_lit52.nothing}"
+          aria-describedby="${describedById ?? import_lit52.nothing}"
+          @focus="${this.handleFocus}"
+          @blur="${this.handleBlur}"
+          @input="${this.handleInput}"
+        ></textarea>` : import_lit52.html`<input
+          type="${this.type}"
+          id="${inputId}"
+          class="${inputClasses}"
+          placeholder="${this.placeholder}"
+          .value="${this.value}"
+          name="${this.name ?? import_lit52.nothing}"
+          maxlength="${this.maxLength ?? import_lit52.nothing}"
+          ?disabled="${this.isDisabled}"
+          ?readonly="${this.readonly}"
+          ?required="${this.required}"
+          aria-invalid="${isError}"
+          aria-required="${this.required}"
+          aria-labelledby="${ariaLabelledby ?? import_lit52.nothing}"
+          aria-describedby="${describedById ?? import_lit52.nothing}"
+          @focus="${this.handleFocus}"
+          @blur="${this.handleBlur}"
+          @input="${this.handleInput}"
+        />`;
+    const leadingIconTemplate = leadingIcon ? import_lit52.html`<rel-icon
+          name="${leadingIcon}"
+          size="sm"
+          class="icon left"
+          role="${this.prefixIconAriaLabel ? "img" : import_lit52.nothing}"
+          aria-label="${this.prefixIconAriaLabel ?? import_lit52.nothing}"
+          aria-hidden="${this.prefixIconAriaLabel ? import_lit52.nothing : "true"}"
+        ></rel-icon>` : "";
+    const belowTemplate = belowText ? import_lit52.html`<div class="textfield-support ${isError ? "error" : ""}" id="${describedById}">
+          ${belowText}
+        </div>` : "";
+    if (this.variant === "legend") {
+      const fieldsetClass = ["field-fieldset", this.multiline ? "multiline" : ""].filter(Boolean).join(" ");
+      return import_lit52.html`
+        <div class="${wrapperClasses}">
+          <fieldset class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${this.label ?? ""}${this.required ? import_lit52.html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
+            ${!this.multiline ? leadingIconTemplate : ""}
+            ${inputTemplate}
+          </fieldset>
+          ${belowTemplate}
+        </div>
+      `;
+    }
     return import_lit52.html`
       <div class="${wrapperClasses}">
-        ${!this.floatingLabel && this.label ? import_lit52.html`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>` : ""}
+        ${!this.floatingLabel ? labelTemplate() : ""}
 
-        <div
-          class="textfield-container ${this.state === "disabled" ? "disabled" : ""}"
-        >
-          ${this.floatingLabel && this.label ? import_lit52.html`<label
-                class="textfield-label${this.leftIcon ? " has-left-icon" : ""}"
-                for="${this.uniqueId}">${this.label}</label>` : ""}
-          ${this.leftIcon ? import_lit52.html`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>` : ""}
+        <div class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
+          ${this.floatingLabel ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "") : ""}
+          ${!this.multiline ? leadingIconTemplate : ""}
 
-          <input
-            type="${this.type}"
-            id="${this.uniqueId}"
-            class="${inputClasses}"
-            placeholder="${this.placeholder}"
-            .value="${this.value}"
-            ?disabled="${this.state === "disabled"}"
-            aria-invalid="${this.state === "error"}"
-            @focus="${this.handleFocus}"
-            @blur="${this.handleBlur}"
-            @input="${this.handleInput}"
-          />
+          ${inputTemplate}
 
-          ${this.rightIcon ? import_lit52.html`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
+          ${!this.multiline && this.rightIcon ? import_lit52.html`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
         </div>
 
-        ${this.supportingText ? import_lit52.html`<div
-              class="textfield-support ${this.state === "error" ? "error" : ""}"
-            >
-              ${this.supportingText}
-            </div>` : ""}
+        ${belowTemplate}
       </div>
     `;
   }
@@ -13770,6 +14021,11 @@ RelTextfield.styles = import_lit52.css`
       color: var(--rel-color-text-heading);
     }
 
+    .required-mark {
+      color: var(--rel-error-surface-default, #CC0000);
+      margin-left: 2px;
+    }
+
     /* Floating label variant */
     :host([floatinglabel]) .textfield-wrapper {
       gap: 0;
@@ -13798,6 +14054,12 @@ RelTextfield.styles = import_lit52.css`
       white-space: nowrap;
     }
 
+    /* Floating label in multiline mode anchors to top instead of vertical center */
+    :host([floatinglabel][multiline]) .textfield-label {
+      top: var(--rel-spacing-space-sm);
+      transform: none;
+    }
+
     :host([floatinglabel]) .textfield-wrapper.focused .textfield-label,
     :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label {
       top: 0;
@@ -13861,6 +14123,11 @@ RelTextfield.styles = import_lit52.css`
       cursor: not-allowed;
     }
 
+    .textfield-container.multiline {
+      overflow: visible;
+      align-items: flex-start;
+    }
+
     /* Input */
     .textfield-input {
       flex: 1;
@@ -13878,6 +14145,25 @@ RelTextfield.styles = import_lit52.css`
       color: var(--rel-color-text-disabled);
     }
 
+    /* Textarea */
+    textarea.textfield-input {
+      resize: vertical;
+      min-height: 80px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    textarea.textfield-input::-webkit-scrollbar {
+      width: 4px;
+    }
+    textarea.textfield-input::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    textarea.textfield-input::-webkit-scrollbar-thumb {
+      background: var(--rel-color-text-placeholder);
+      border-radius: 2px;
+    }
+
     .icon {
       position: absolute;
       display: flex;
@@ -13932,7 +14218,8 @@ RelTextfield.styles = import_lit52.css`
       box-shadow: 0 0 0 1px var(--rel-color-text-primary);
     }
 
-    .textfield-wrapper.error .textfield-container {
+    .textfield-wrapper.error .textfield-container,
+    .textfield-wrapper.error .textfield-container:focus-within {
       border-color: var(--rel-error-surface-default);
       box-shadow: none;
     }
@@ -13941,6 +14228,10 @@ RelTextfield.styles = import_lit52.css`
       border-color: var(--rel-color-border-default);
     }
 
+    .textfield-wrapper.disabled .textfield-label {
+      color: var(--rel-color-text-disabled);
+    }
+
     /* Supporting text */
     .textfield-support {
       font-size: var(--rel-fontSizes-xs);
@@ -14009,6 +14300,104 @@ RelTextfield.styles = import_lit52.css`
       background: var(--rel-color-bg-tertiary);
       border-bottom-color: var(--rel-color-border-default);
     }
+
+    /* ── Full-width control (fullWidth defaults true → block, fills parent) ── */
+    :host(:not([fullwidth])) {
+      display: inline-block;
+      width: auto;
+    }
+    :host(:not([fullwidth])) .textfield-wrapper {
+      width: auto;
+    }
+
+    /* ── Legend (notched-outline) variant ──
+       Native <fieldset>/<legend>: the legend notches the top border and stays
+       fixed in place across all states (no float/animation). */
+    :host([variant="legend"]) .field-fieldset {
+      position: relative;
+      margin: 0;
+      min-inline-size: 0;
+      padding: 0;
+      border: 1px solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      background: var(--rel-color-bg-primary);
+      transition: border-color 0.2s;
+    }
+
+    :host([variant="legend"]) .field-legend {
+      margin-left: var(--rel-spacing-space-sm);
+      padding: 0 var(--rel-spacing-space-2xs);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      line-height: 1;
+      color: var(--rel-color-text-heading);
+    }
+
+    :host([variant="legend"]) .textfield-input {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Prefix icon (legend): vertically centered; input inset via has-left-icon */
+    :host([variant="legend"]) .icon.left {
+      top: 50%;
+      left: var(--rel-spacing-space-sm);
+      transform: translateY(-50%);
+    }
+    :host([variant="legend"]) .field-fieldset.multiline .icon.left {
+      top: var(--rel-spacing-space-sm);
+      transform: none;
+    }
+
+    /* Hover */
+    :host([variant="legend"]) .field-fieldset:hover {
+      border-color: var(--rel-color-text-placeholder);
+    }
+
+    /* Focus — border-color only. A box-shadow/outline ring hugs the full
+       rectangular border-box and would draw across the notch, appearing to
+       strike through the legend. The legend also recolors on focus (below). */
+    :host([variant="legend"]) .textfield-wrapper.focused .field-fieldset,
+    :host([variant="legend"]) .field-fieldset:focus-within {
+      border-color: var(--rel-color-border-focus);
+      box-shadow: none;
+    }
+    :host([variant="legend"]) .textfield-wrapper.focused .field-legend,
+    :host([variant="legend"]) .field-fieldset:focus-within .field-legend {
+      color: var(--rel-color-border-focus);
+    }
+
+    /* Error */
+    :host([variant="legend"]) .textfield-wrapper.error .field-fieldset {
+      border-color: var(--rel-error-surface-default);
+      box-shadow: none;
+    }
+    :host([variant="legend"]) .textfield-wrapper.error .field-legend {
+      color: var(--rel-error-surface-default);
+    }
+
+    /* Disabled */
+    :host([variant="legend"]) .textfield-wrapper.disabled .field-fieldset {
+      background: var(--rel-color-bg-tertiary);
+      border-color: var(--rel-color-border-default);
+      cursor: not-allowed;
+    }
+    :host([variant="legend"]) .textfield-wrapper.disabled .field-legend {
+      color: var(--rel-color-text-disabled);
+    }
+
+    /* Readonly */
+    :host([variant="legend"]) .textfield-wrapper.readonly .field-fieldset {
+      cursor: default;
+    }
+
+    /* Legend font tracks size */
+    :host([variant="legend"]) .textfield-wrapper.small .field-legend {
+      font-size: var(--rel-fontSizes-xs);
+    }
+    :host([variant="legend"]) .textfield-wrapper.large .field-legend {
+      font-size: var(--rel-fontSizes-md);
+    }
   `;
 __decorateClass([
   (0, import_decorators52.property)({ type: String })
@@ -14043,6 +14432,45 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators52.property)({ type: String, reflect: true })
 ], RelTextfield.prototype, "variant", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean })
+], RelTextfield.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean })
+], RelTextfield.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean, reflect: true })
+], RelTextfield.prototype, "multiline", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Number })
+], RelTextfield.prototype, "rows", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String })
+], RelTextfield.prototype, "prefixIcon", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String })
+], RelTextfield.prototype, "prefixIconAriaLabel", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean })
+], RelTextfield.prototype, "error", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String })
+], RelTextfield.prototype, "errorMessage", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String })
+], RelTextfield.prototype, "helperText", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean })
+], RelTextfield.prototype, "readonly", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Number })
+], RelTextfield.prototype, "maxLength", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String })
+], RelTextfield.prototype, "name", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean, reflect: true })
+], RelTextfield.prototype, "fullWidth", 2);
 __decorateClass([
   (0, import_decorators52.state)()
 ], RelTextfield.prototype, "internalState", 2);