@3fn/core 13.0.0 → 14.1.0

package/dist/browser/designerpunk.esm.js

@@ -193,7 +193,11 @@ var BlendTokenValues = {
   pressedDarker: 0.12,
   /** Focus state saturation increase - blend200 (8%) */
   focusSaturate: 0.08,
-  /** Disabled state desaturation - blend300 (12%) */
+  /**
+   * Disabled state desaturation - blend300 (12%)
+   * @deprecated 2026-07-15 — DesignerPunk does not support disabled states; if an action
+   * is unavailable, do not render the component. Scheduled for removal at the next major.
+   */
   disabledDesaturate: 0.12,
   /** Icon optical balance lightening - blend200 (8%) */
   iconLighter: 0.08
@@ -240,6 +244,7 @@ function createBlendUtilities() {
     hoverColor: (baseColor) => darkerBlend(baseColor, BlendTokenValues.hoverDarker),
     pressedColor: (baseColor) => darkerBlend(baseColor, BlendTokenValues.pressedDarker),
     focusColor: (baseColor) => saturate(baseColor, BlendTokenValues.focusSaturate),
+    // deprecated 2026-07-15 (no-disabled-states philosophy) — removal at next major
     disabledColor: (baseColor) => desaturate(baseColor, BlendTokenValues.disabledDesaturate),
     iconColor: (baseColor) => lighterBlend(baseColor, BlendTokenValues.iconLighter),
     // Generic blend functions for custom usage
@@ -1697,6 +1702,9 @@ var InputTextPassword = class extends HTMLElement {
       "error-message",
       "is-success",
       "show-info-icon",
+      // read-only is accepted for API stability but IGNORED — readOnly is
+      // contracted out of Input-Text-Password (see render(), and
+      // contracts.yaml excludes.state_readonly).
       "read-only",
       "required",
       "max-length",
@@ -1766,7 +1774,6 @@ var InputTextPassword = class extends HTMLElement {
     const propsErrorMessage = this.getAttribute("error-message") || "";
     const isSuccess = this.getAttribute("is-success") === "true";
     const showInfoIcon = this.getAttribute("show-info-icon") === "true";
-    const readOnly = this.hasAttribute("read-only");
     const required = this.hasAttribute("required");
     const maxLength = this.getAttribute("max-length");
     const showToggle = this.getAttribute("show-toggle") !== "false";
@@ -1801,7 +1808,6 @@ var InputTextPassword = class extends HTMLElement {
           ${errorMessage ? `error-message="${errorMessage}"` : ""}
           ${isSuccess ? 'is-success="true"' : ""}
           ${showInfoIcon ? 'show-info-icon="true"' : ""}
-          ${readOnly ? "read-only" : ""}
           ${required ? "required" : ""}
           ${maxLength ? `max-length="${maxLength}"` : ""}
         ></input-text-base>
@@ -2663,7 +2669,7 @@ var ButtonCTA_web_default = `/**
  * The --_cta-hover-bg custom property is set by the component
  * using darkerBlend(color.primary, blend.hoverDarker) = 8% darker.
  */
-.button-cta--primary:hover:not(:disabled) {
+.button-cta--primary:hover {
   background-color: var(--_cta-hover-bg);
 }
 
@@ -2676,7 +2682,7 @@ var ButtonCTA_web_default = `/**
  * The --_cta-pressed-bg custom property is set by the component
  * using darkerBlend(color.primary, blend.pressedDarker) = 12% darker.
  */
-.button-cta--primary:active:not(:disabled) {
+.button-cta--primary:active {
   background-color: var(--_cta-pressed-bg);
 }
 
@@ -2706,30 +2712,6 @@ var ButtonCTA_web_default = `/**
   outline: none;
 }
 
-/**
- * Disabled state.
- * 
- * Uses blend utility calculated color (desaturate with blend.disabledDesaturate)
- * instead of opacity workaround for cross-platform consistency.
- * 
- * The --button-disabled-color custom property is set by the component
- * using desaturate(color.primary, blend.disabledDesaturate) = 12% less saturated.
- * 
- * - Cursor changes to not-allowed
- * - Prevents interaction
- * - Maintains color contrast for accessibility
- */
-.button-cta:disabled,
-.button-cta--disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.button-cta--primary:disabled,
-.button-cta--primary.button-cta--disabled {
-  background-color: var(--_cta-disabled-bg);
-}
-
 /* ==========================================================================
    Responsive Behavior
    ========================================================================== */
@@ -2844,7 +2826,6 @@ var ButtonCTA = class extends HTMLElement {
     // Cached blend colors for state styling
     this._hoverColor = "";
     this._pressedColor = "";
-    this._disabledColor = "";
     this._iconColor = "";
     this._iconOpticalBalanceColor = "";
     /**
@@ -2853,11 +2834,6 @@ var ButtonCTA = class extends HTMLElement {
      * Dispatches a custom 'press' event that bubbles up to parent elements.
      */
     this._handleClick = (event) => {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
       this.dispatchEvent(new CustomEvent("press", {
         bubbles: true,
         composed: true,
@@ -2874,9 +2850,6 @@ var ButtonCTA = class extends HTMLElement {
      * @param event - The keyboard event
      */
     this._handleKeyDown = (event) => {
-      if (this.disabled) {
-        return;
-      }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         this.dispatchEvent(new CustomEvent("press", {
@@ -2895,7 +2868,7 @@ var ButtonCTA = class extends HTMLElement {
    * When these attributes change, attributeChangedCallback is invoked.
    */
   static get observedAttributes() {
-    return ["label", "size", "variant", "icon", "no-wrap", "disabled", "test-id"];
+    return ["label", "size", "variant", "icon", "no-wrap", "test-id"];
   }
   /**
    * Called when the element is added to the DOM.
@@ -2942,15 +2915,14 @@ var ButtonCTA = class extends HTMLElement {
    * Calculate blend colors from CSS custom properties.
    * 
    * Reads base colors from CSS custom properties and applies theme-aware blend
-   * utilities to generate state colors (hover, pressed, disabled, icon).
-   * 
+   * utilities to generate state colors (hover, pressed, icon).
+   *
    * Uses getBlendUtilities() factory functions instead of direct blend calculations
    * for cross-platform consistency with iOS and Android implementations.
-   * 
+   *
    * State color mappings:
    * - Hover: darkerBlend(color.action.primary, blend.hoverDarker) - 8% darker
    * - Pressed: darkerBlend(color.action.primary, blend.pressedDarker) - 12% darker
-   * - Disabled: desaturate(color.action.primary, blend.disabledDesaturate) - 12% less saturated
    * - Icon: lighterBlend(color.contrast.onAction, blend.iconLighter) - 8% lighter
    * 
    * @see Requirements: 7.1, 7.2, 7.3, 7.4 - Button-CTA state colors
@@ -2969,7 +2941,6 @@ var ButtonCTA = class extends HTMLElement {
     }
     this._hoverColor = this._blendUtils.hoverColor(primaryColor);
     this._pressedColor = this._blendUtils.pressedColor(primaryColor);
-    this._disabledColor = this._blendUtils.disabledColor(primaryColor);
     this._iconColor = this._blendUtils.iconColor(onActionColor);
     this._iconOpticalBalanceColor = this._blendUtils.iconColor(primaryColor);
   }
@@ -3061,22 +3032,6 @@ var ButtonCTA = class extends HTMLElement {
   set noWrap(value) {
     this.setAttribute("no-wrap", value.toString());
   }
-  /**
-   * Get the disabled state.
-   */
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  /**
-   * Set the disabled state.
-   */
-  set disabled(value) {
-    if (value) {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
-  }
   /**
    * Get the test ID.
    */
@@ -3135,31 +3090,27 @@ var ButtonCTA = class extends HTMLElement {
     const variant = this.buttonVariant;
     const icon = this.icon;
     const noWrap = this.noWrap;
-    const disabled = this.disabled;
     const testID = this.testID;
     const buttonClasses = [
       "button-cta",
       `button-cta--${size}`,
-      `button-cta--${variant}`,
-      disabled ? "button-cta--disabled" : ""
-    ].filter(Boolean).join(" ");
+      `button-cta--${variant}`
+    ].join(" ");
     const iconSize = getIconSizeForButton(size);
     const labelClass = noWrap ? "button-cta__label--no-wrap" : "button-cta__label";
     const testIDAttr = testID ? ` data-testid="${testID}"` : "";
     const blendColorStyles = `
       --_cta-hover-bg: ${this._hoverColor};
       --_cta-pressed-bg: ${this._pressedColor};
-      --_cta-disabled-bg: ${this._disabledColor};
       --_cta-icon-color: ${this._iconColor};
       --_cta-icon-optical: ${this._iconOpticalBalanceColor};
     `;
     this._shadowRoot.innerHTML = `
       <style>${ButtonCTA_web_default}</style>
-      <button 
+      <button
         class="${buttonClasses}"
         type="button"
         role="button"
-        ${disabled ? 'disabled aria-disabled="true"' : 'aria-disabled="false"'}
         ${testIDAttr}
         aria-label="${label}"
         style="${blendColorStyles}"
@@ -3195,23 +3146,14 @@ var ButtonCTA = class extends HTMLElement {
     const variant = this.buttonVariant;
     const icon = this.icon;
     const noWrap = this.noWrap;
-    const disabled = this.disabled;
     const testID = this.testID;
     const iconSize = getIconSizeForButton(size);
     const buttonClasses = [
       "button-cta",
       `button-cta--${size}`,
-      `button-cta--${variant}`,
-      disabled ? "button-cta--disabled" : ""
-    ].filter(Boolean).join(" ");
+      `button-cta--${variant}`
+    ].join(" ");
     this._button.className = buttonClasses;
-    if (disabled) {
-      this._button.setAttribute("disabled", "");
-      this._button.setAttribute("aria-disabled", "true");
-    } else {
-      this._button.removeAttribute("disabled");
-      this._button.setAttribute("aria-disabled", "false");
-    }
     this._button.setAttribute("aria-label", label);
     if (testID) {
       this._button.setAttribute("data-testid", testID);
@@ -3220,7 +3162,6 @@ var ButtonCTA = class extends HTMLElement {
     }
     this._button.style.setProperty("--_cta-hover-bg", this._hoverColor);
     this._button.style.setProperty("--_cta-pressed-bg", this._pressedColor);
-    this._button.style.setProperty("--_cta-disabled-bg", this._disabledColor);
     this._button.style.setProperty("--_cta-icon-color", this._iconColor);
     this._button.style.setProperty("--_cta-icon-optical", this._iconOpticalBalanceColor);
     this._labelEl.textContent = label;
@@ -4889,6 +4830,11 @@ function defineComponentTokens(config) {
     const tokenName = `${component.toLowerCase()}.${key}`;
     if (isTokenWithReference(definition)) {
       const primitiveToken = definition.reference;
+      if (typeof primitiveToken.category === "string" && primitiveToken.category !== family) {
+        throw new Error(
+          `Token family mismatch in defineComponentTokens() for component '${component}': token '${key}' is declared in a '${family}' family call but references primitive '${primitiveToken.name}' from the '${primitiveToken.category}' family. Every token in a call is stamped with that call's family, which drives platform output (e.g. the generated '${family.charAt(0).toUpperCase() + family.slice(1)}Tokens' class reference), so this would emit a non-existent platform member. Fix: move '${key}' into a separate defineComponentTokens() call with family: '${primitiveToken.category}', or use the value path if no token-chain relationship is intended.`
+        );
+      }
       const value = primitiveToken.baseValue;
       values[key] = value;
       registeredTokens.push({
@@ -7975,15 +7921,15 @@ var AvatarSizingTokens = defineComponentTokens({
     "size.xxl": {
       reference: sizingTokens.size1600,
       reasoning: "Extra extra large avatar (128px). Full profile view, onboarding."
-    }
-  }
-});
-var AvatarTokens = defineComponentTokens({
-  component: "Avatar",
-  family: "spacing",
-  tokens: {
-    // Icon size tokens (gap fillers for sizes without existing icon tokens)
-    // These fill gaps where no standard icon token exists at the required 50% ratio
+    },
+    // Icon size tokens (gap fillers for sizes without an existing icon token).
+    // Kept on the VALUE path deliberately: sizing primitives exist at both values
+    // (size150 = 12, size800 = 64), but the reference path currently emits a
+    // fabricated `SizingTokens.<name>` class on iOS/Android that no generated or
+    // hand-written platform file defines. Switching these to `reference:` would
+    // trade compiling output (`12.dp`) for non-compiling output and break
+    // Avatar.android.kt's `val iconSizeXs: Dp = GeneratedAvatarTokens.iconSizeXs`.
+    // Revisit once TokenFileGenerator.getFamilyClassName emits a real platform type.
     "icon.size.xs": {
       value: SIZING_BASE_VALUE * 1.5,
       reasoning: "Icon size for xs avatar (12px = 1.5\xD7 base) maintains 50% ratio (12/24). No existing icon token at this size, so component token fills the gap."
@@ -9065,9 +9011,9 @@ var AvatarBaseElement = class extends HTMLElement {
     ].filter(Boolean).join(" ");
     const testIDAttr = testID ? ` data-testid="${this.escapeHtml(testID)}"` : "";
     const ariaHiddenAttr = decorative ? ' aria-hidden="true"' : "";
-    if (src && !alt && typeof console !== "undefined") {
+    if (type === "human" && src && alt == null && !decorative && typeof console !== "undefined") {
       console.warn(
-        'AvatarBaseElement: "alt" prop is required when "src" is provided for accessibility. Please add an alt attribute describing the image.'
+        'AvatarBaseElement: "alt" is required when "src" is provided. Add an alt description of the image; or, if this avatar is purely decorative (non-informative), set the "decorative" prop to hide it from screen readers.'
       );
     }
     if (type === "agent") {