@3fn/core 13.0.0 → 14.1.0

package/dist/browser/designerpunk.umd.js

@@ -302,7 +302,11 @@ var DesignerPunk = (() => {
     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
@@ -349,6 +353,7 @@ var DesignerPunk = (() => {
       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
@@ -1805,6 +1810,9 @@ var DesignerPunk = (() => {
         "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",
@@ -1874,7 +1882,6 @@ var DesignerPunk = (() => {
       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";
@@ -1909,7 +1916,6 @@ var DesignerPunk = (() => {
           ${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>
@@ -2771,7 +2777,7 @@ var DesignerPunk = (() => {
  * 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);
 }
 
@@ -2784,7 +2790,7 @@ var DesignerPunk = (() => {
  * 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);
 }
 
@@ -2814,30 +2820,6 @@ var DesignerPunk = (() => {
   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
    ========================================================================== */
@@ -2952,7 +2934,6 @@ var DesignerPunk = (() => {
       // Cached blend colors for state styling
       this._hoverColor = "";
       this._pressedColor = "";
-      this._disabledColor = "";
       this._iconColor = "";
       this._iconOpticalBalanceColor = "";
       /**
@@ -2961,11 +2942,6 @@ var DesignerPunk = (() => {
        * 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,
@@ -2982,9 +2958,6 @@ var DesignerPunk = (() => {
        * @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", {
@@ -3003,7 +2976,7 @@ var DesignerPunk = (() => {
      * 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.
@@ -3050,15 +3023,14 @@ var DesignerPunk = (() => {
      * 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
@@ -3077,7 +3049,6 @@ var DesignerPunk = (() => {
       }
       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);
     }
@@ -3169,22 +3140,6 @@ var DesignerPunk = (() => {
     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.
      */
@@ -3244,31 +3199,27 @@ var DesignerPunk = (() => {
       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}"
@@ -3304,23 +3255,14 @@ var DesignerPunk = (() => {
       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);
@@ -3329,7 +3271,6 @@ var DesignerPunk = (() => {
       }
       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;
@@ -4998,6 +4939,11 @@ var DesignerPunk = (() => {
       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({
@@ -8089,15 +8035,15 @@ var DesignerPunk = (() => {
       "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."
@@ -9179,9 +9125,9 @@ var DesignerPunk = (() => {
       ].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") {