@flamingo-stack/openframe-frontend-core 0.0.383 → 0.0.384-snapshot.20260708165758

package/dist/tailwind.config.js

@@ -281,7 +281,10 @@ var config = {
             pink: "var(--ods-flamingo-pink-base)",
             cyan: "var(--ods-flamingo-cyan-base)"
           },
-          "open-yellow": "var(--ods-open-yellow-base)",
+          "open-yellow": {
+            DEFAULT: "var(--ods-open-yellow-base)",
+            secondary: "var(--ods-open-yellow-secondary)"
+          },
           // Attention tokens (ods-colors.css). Components reference these BY
           // NAME (error-state.tsx: `border-ods-attention-red-error` etc.) —
           // without these mappings Tailwind silently generates NOTHING for

package/dist/tailwind.config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../tailwind.config.ts"],"names":["plugin","config"],"mappings":"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","file":"tailwind.config.js","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","import type { Config } from 'tailwindcss'\nimport plugin from 'tailwindcss/plugin'\nimport tailwindcssAnimate from 'tailwindcss-animate'\nimport containerQueries from '@tailwindcss/container-queries'\n\nconst odsTypographyPlugin = plugin(({ addUtilities }) => {\n  addUtilities({\n    '.text-h1': {\n      fontFamily: 'var(--font-h1-family)',\n      fontWeight: 'var(--font-h1-weight)',\n      fontSize: 'var(--font-size-h1-title)',\n      lineHeight: 'var(--font-line-space-h1-main-title)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h2': {\n      fontFamily: 'var(--font-h2-family)',\n      fontWeight: 'var(--font-h2-weight)',\n      fontSize: 'var(--font-size-h2-sub-title)',\n      lineHeight: 'var(--font-line-space-h2-sub-title)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h3': {\n      fontFamily: 'var(--font-h3-family)',\n      fontWeight: 'var(--font-h3-weight)',\n      fontSize: 'var(--font-size-h3-body)',\n      lineHeight: 'var(--font-line-space-h3-body)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h4': {\n      fontFamily: 'var(--font-h4-family)',\n      fontWeight: 'var(--font-h4-weight)',\n      fontSize: 'var(--font-size-h4-body)',\n      lineHeight: 'var(--font-line-space-h4-body)',\n    },\n    '.text-h5': {\n      fontFamily: 'var(--font-h5-family)',\n      fontWeight: 'var(--font-h5-weight)',\n      fontSize: 'var(--font-size-h5-caption)',\n      lineHeight: 'var(--font-line-space-h5-caption)',\n      textTransform: 'uppercase',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h6': {\n      fontFamily: 'var(--font-h6-family)',\n      fontWeight: 'var(--font-h6-weight)',\n      fontSize: 'var(--font-size-h6-caption)',\n      lineHeight: 'var(--font-line-space-h6-caption)',\n    },\n  })\n})\n\nconst config: Config = {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  safelist: [\n    // Dynamically generated classes for table hide/show functionality\n    'hidden',\n    'md:hidden',\n    'lg:hidden',\n    'md:flex',\n    'lg:flex',\n  ],\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        // Shadcn/ui base colors (keep for compatibility)\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // =================================================\n        // ODS (Open Design System) COLORS\n        // =================================================\n        // Single nested structure: generates bg-ods-*, text-ods-*, border-ods-* utilities\n        ods: {\n          // Backgrounds\n          bg: \"var(--color-bg)\",\n          card: \"var(--color-bg-card)\",\n          overlay: \"var(--color-bg-overlay)\",\n          skeleton: \"var(--color-bg-skeleton)\",\n          \"bg-hover\": \"var(--color-bg-hover)\",\n          \"bg-active\": \"var(--color-bg-active)\",\n          \"bg-surface\": \"var(--color-bg-surface)\",\n          \"card-hover\": \"var(--color-bg-hover)\",\n          divider: \"var(--color-divider)\",\n\n          // Borders\n          border: {\n            DEFAULT: \"var(--color-border-default)\",\n            hover: \"var(--color-border-hover)\",\n            active: \"var(--color-border-active)\",\n            focus: \"var(--color-border-focus)\",\n          },\n\n          // Text\n          text: {\n            primary: \"var(--color-text-primary)\",\n            secondary: \"var(--color-text-secondary)\",\n            tertiary: \"var(--color-text-tertiary)\",\n            muted: \"var(--color-text-muted)\",\n            subtle: \"var(--color-text-subtle)\",\n            disabled: \"var(--color-text-disabled)\",\n            \"on-accent\": \"var(--color-text-on-accent)\",\n            \"on-dark\": \"var(--color-text-on-dark)\",\n          },\n\n          // Accent\n          accent: {\n            DEFAULT: \"var(--color-accent-primary)\",\n            hover: \"var(--color-accent-hover)\",\n            active: \"var(--color-accent-active)\",\n            focus: \"var(--color-accent-focus)\",\n            disabled: \"var(--color-accent-disabled)\",\n          },\n\n          // Status\n          success: {\n            DEFAULT: \"var(--color-success)\",\n            hover: \"var(--color-success-hover)\",\n            active: \"var(--color-success-active)\",\n            secondary: \"var(--color-success-secondary)\",\n            \"secondary-hover\": \"var(--color-success-secondary-hover)\",\n            \"secondary-active\": \"var(--color-success-secondary-active)\",\n          },\n          error: {\n            DEFAULT: \"var(--color-error)\",\n            hover: \"var(--color-error-hover)\",\n            active: \"var(--color-error-active)\",\n            secondary: \"var(--color-error-secondary)\",\n            \"secondary-hover\": \"var(--color-error-secondary-hover)\",\n            \"secondary-active\": \"var(--color-error-secondary-active)\",\n          },\n          warning: {\n            DEFAULT: \"var(--color-warning)\",\n            hover: \"var(--color-warning-hover)\",\n            active: \"var(--color-warning-active)\",\n            secondary: \"var(--color-warning-secondary)\",\n            \"secondary-hover\": \"var(--color-warning-secondary-hover)\",\n            \"secondary-active\": \"var(--color-warning-secondary-active)\",\n          },\n          info: {\n            DEFAULT: \"var(--color-info)\",\n            hover: \"var(--color-info-hover)\",\n            active: \"var(--color-info-active)\",\n          },\n\n          // Interactive states\n          disabled: \"var(--color-disabled)\",\n          focus: \"var(--color-focus-ring)\",\n          \"focus-visible\": \"var(--color-focus-visible)\",\n\n          // Links\n          link: {\n            DEFAULT: \"var(--color-link)\",\n            hover: \"var(--color-link-hover)\",\n            visited: \"var(--color-link-visited)\",\n          },\n\n          // Brand colors (theme-independent)\n          flamingo: {\n            pink: \"var(--ods-flamingo-pink-base)\",\n            cyan: \"var(--ods-flamingo-cyan-base)\",\n          },\n          \"open-yellow\": \"var(--ods-open-yellow-base)\",\n\n          // Attention tokens (ods-colors.css). Components reference these BY\n          // NAME (error-state.tsx: `border-ods-attention-red-error` etc.) —\n          // without these mappings Tailwind silently generates NOTHING for\n          // the class and the component renders colorless in every consumer.\n          attention: {\n            \"red-error\": \"var(--ods-attention-red-error)\",\n            \"red-error-hover\": \"var(--ods-attention-red-error-hover)\",\n            \"red-error-action\": \"var(--ods-attention-red-error-action)\",\n            \"red-error-secondary\": \"var(--ods-attention-red-error-secondary)\",\n            \"red-error-secondary-hover\": \"var(--ods-attention-red-error-secondary-hover)\",\n            \"red-error-secondary-action\": \"var(--ods-attention-red-error-secondary-action)\",\n            \"yellow-warning\": \"var(--ods-attention-yellow-warning)\",\n            \"yellow-warning-hover\": \"var(--ods-attention-yellow-warning-hover)\",\n            \"yellow-warning-action\": \"var(--ods-attention-yellow-warning-action)\",\n            \"yellow-warning-secondary\": \"var(--ods-attention-yellow-warning-secondary)\",\n            \"yellow-warning-secondary-hover\": \"var(--ods-attention-yellow-warning-secondary-hover)\",\n            \"yellow-warning-secondary-action\": \"var(--ods-attention-yellow-warning-secondary-action)\",\n            \"green-success\": \"var(--ods-attention-green-success)\",\n            \"green-success-hover\": \"var(--ods-attention-green-success-hover)\",\n            \"green-success-action\": \"var(--ods-attention-green-success-action)\",\n            \"green-success-secondary\": \"var(--ods-attention-green-success-secondary)\",\n            \"green-success-secondary-hover\": \"var(--ods-attention-green-success-secondary-hover)\",\n            \"green-success-secondary-action\": \"var(--ods-attention-green-success-secondary-action)\",\n          },\n\n          // Adaptive platform color\n          current: \"var(--ods-current)\",\n        },\n      },\n      // Custom breakpoints (aligned with ODS responsive tokens from Figma)\n      screens: {\n        'md': '800px',   // Tablet: 50rem\n        'lg': '1280px',  // Desktop: 80rem\n        'xl': '1440px',  // Large desktop: 90rem\n      },\n\n      borderRadius: {\n        lg: \"var(--radius)\", // 8px\n        md: \"calc(var(--radius) - 2px)\", // 6px\n        sm: \"calc(var(--radius) - 4px)\", // 4px\n        xs: \"calc(var(--radius) - 6px)\", // 2px\n      },\n\n      maxWidth: {\n        'ods-content-narrow': '600px',\n      },\n\n      fontFamily: {\n        sans: [\"var(--font-family-body)\"],\n        mono: [\"var(--font-family-heading)\"],\n        body: [\"var(--font-family-body)\"],\n        heading: [\"var(--font-family-heading)\"],\n      },\n\n      // =================================================\n      // TYPOGRAPHY\n      // =================================================\n      fontSize: {\n        // Responsive heading sizes (from ods-responsive-tokens.css)\n        'heading-1': ['var(--font-size-h1-title)', { lineHeight: 'var(--font-line-space-h1-main-title)' }],\n        'heading-2': ['var(--font-size-h2-sub-title)', { lineHeight: 'var(--font-line-space-h2-sub-title)' }],\n        'heading-3': ['var(--font-size-h3-body)', { lineHeight: 'var(--font-line-space-h3-body)' }],\n        'heading-4': ['var(--font-size-h4-body)', { lineHeight: 'var(--font-line-space-h4-body)' }],\n        'heading-5': ['var(--font-size-h5-caption)', { lineHeight: 'var(--font-line-space-h5-caption)' }],\n        'heading-6': ['var(--font-size-h6-caption)', { lineHeight: 'var(--font-line-space-h6-caption)' }],\n      },\n\n      // =================================================\n      // SHADOWS\n      // =================================================\n      boxShadow: {\n        'card': 'var(--shadow-card)',\n        'card-hover': 'var(--shadow-card-hover)',\n        'modal': 'var(--shadow-modal)',\n        'dropdown': 'var(--shadow-dropdown)',\n        'tooltip': 'var(--shadow-tooltip)',\n        'focus': 'var(--shadow-focus)',\n        'accent': 'var(--shadow-accent)',\n        'accent-lg': 'var(--shadow-accent-lg)',\n      },\n\n      // =================================================\n      // TRANSITIONS\n      // =================================================\n      transitionDuration: {\n        'fast': 'var(--duration-fast)',\n        'normal': 'var(--duration-normal)',\n        'slow': 'var(--duration-slow)',\n        'slower': 'var(--duration-slower)',\n      },\n      transitionTimingFunction: {\n        'bounce': 'var(--ease-bounce)',\n        'elastic': 'var(--ease-elastic)',\n      },\n\n      // =================================================\n      // Z-INDEX\n      // =================================================\n      zIndex: {\n        'dropdown': 'var(--z-dropdown)',\n        'sticky': 'var(--z-sticky)',\n        'fixed': 'var(--z-fixed)',\n        'modal-backdrop': 'var(--z-modal-backdrop)',\n        'modal': 'var(--z-modal)',\n        'popover': 'var(--z-popover)',\n        'tooltip': 'var(--z-tooltip)',\n        'notification': 'var(--z-notification)',\n        'debug': 'var(--z-debug)',\n      },\n\n      // =================================================\n      // ANIMATIONS\n      // =================================================\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n        \"fade-in\": {\n          from: { opacity: \"0\" },\n          to: { opacity: \"1\" },\n        },\n        // Endless chip strip (QuickActionMarquee): the track renders its items\n        // twice, so -50% lands exactly one copy over for a seamless loop.\n        \"qa-marquee\": {\n          from: { transform: \"translateX(0)\" },\n          to: { transform: \"translateX(-50%)\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n        \"fade-in\": \"fade-in 0.3s ease-out\",\n        \"qa-marquee\": \"qa-marquee var(--qa-marquee-duration,40s) linear infinite\",\n      },\n    },\n  },\n  plugins: [tailwindcssAnimate, odsTypographyPlugin, containerQueries],\n}\n\nexport default config\n"]}
+{"version":3,"sources":["../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../tailwind.config.ts"],"names":["plugin","config"],"mappings":"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","file":"tailwind.config.js","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","import type { Config } from 'tailwindcss'\nimport plugin from 'tailwindcss/plugin'\nimport tailwindcssAnimate from 'tailwindcss-animate'\nimport containerQueries from '@tailwindcss/container-queries'\n\nconst odsTypographyPlugin = plugin(({ addUtilities }) => {\n  addUtilities({\n    '.text-h1': {\n      fontFamily: 'var(--font-h1-family)',\n      fontWeight: 'var(--font-h1-weight)',\n      fontSize: 'var(--font-size-h1-title)',\n      lineHeight: 'var(--font-line-space-h1-main-title)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h2': {\n      fontFamily: 'var(--font-h2-family)',\n      fontWeight: 'var(--font-h2-weight)',\n      fontSize: 'var(--font-size-h2-sub-title)',\n      lineHeight: 'var(--font-line-space-h2-sub-title)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h3': {\n      fontFamily: 'var(--font-h3-family)',\n      fontWeight: 'var(--font-h3-weight)',\n      fontSize: 'var(--font-size-h3-body)',\n      lineHeight: 'var(--font-line-space-h3-body)',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h4': {\n      fontFamily: 'var(--font-h4-family)',\n      fontWeight: 'var(--font-h4-weight)',\n      fontSize: 'var(--font-size-h4-body)',\n      lineHeight: 'var(--font-line-space-h4-body)',\n    },\n    '.text-h5': {\n      fontFamily: 'var(--font-h5-family)',\n      fontWeight: 'var(--font-h5-weight)',\n      fontSize: 'var(--font-size-h5-caption)',\n      lineHeight: 'var(--font-line-space-h5-caption)',\n      textTransform: 'uppercase',\n      letterSpacing: '-0.02em',\n    },\n    '.text-h6': {\n      fontFamily: 'var(--font-h6-family)',\n      fontWeight: 'var(--font-h6-weight)',\n      fontSize: 'var(--font-size-h6-caption)',\n      lineHeight: 'var(--font-line-space-h6-caption)',\n    },\n  })\n})\n\nconst config: Config = {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  safelist: [\n    // Dynamically generated classes for table hide/show functionality\n    'hidden',\n    'md:hidden',\n    'lg:hidden',\n    'md:flex',\n    'lg:flex',\n  ],\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        // Shadcn/ui base colors (keep for compatibility)\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // =================================================\n        // ODS (Open Design System) COLORS\n        // =================================================\n        // Single nested structure: generates bg-ods-*, text-ods-*, border-ods-* utilities\n        ods: {\n          // Backgrounds\n          bg: \"var(--color-bg)\",\n          card: \"var(--color-bg-card)\",\n          overlay: \"var(--color-bg-overlay)\",\n          skeleton: \"var(--color-bg-skeleton)\",\n          \"bg-hover\": \"var(--color-bg-hover)\",\n          \"bg-active\": \"var(--color-bg-active)\",\n          \"bg-surface\": \"var(--color-bg-surface)\",\n          \"card-hover\": \"var(--color-bg-hover)\",\n          divider: \"var(--color-divider)\",\n\n          // Borders\n          border: {\n            DEFAULT: \"var(--color-border-default)\",\n            hover: \"var(--color-border-hover)\",\n            active: \"var(--color-border-active)\",\n            focus: \"var(--color-border-focus)\",\n          },\n\n          // Text\n          text: {\n            primary: \"var(--color-text-primary)\",\n            secondary: \"var(--color-text-secondary)\",\n            tertiary: \"var(--color-text-tertiary)\",\n            muted: \"var(--color-text-muted)\",\n            subtle: \"var(--color-text-subtle)\",\n            disabled: \"var(--color-text-disabled)\",\n            \"on-accent\": \"var(--color-text-on-accent)\",\n            \"on-dark\": \"var(--color-text-on-dark)\",\n          },\n\n          // Accent\n          accent: {\n            DEFAULT: \"var(--color-accent-primary)\",\n            hover: \"var(--color-accent-hover)\",\n            active: \"var(--color-accent-active)\",\n            focus: \"var(--color-accent-focus)\",\n            disabled: \"var(--color-accent-disabled)\",\n          },\n\n          // Status\n          success: {\n            DEFAULT: \"var(--color-success)\",\n            hover: \"var(--color-success-hover)\",\n            active: \"var(--color-success-active)\",\n            secondary: \"var(--color-success-secondary)\",\n            \"secondary-hover\": \"var(--color-success-secondary-hover)\",\n            \"secondary-active\": \"var(--color-success-secondary-active)\",\n          },\n          error: {\n            DEFAULT: \"var(--color-error)\",\n            hover: \"var(--color-error-hover)\",\n            active: \"var(--color-error-active)\",\n            secondary: \"var(--color-error-secondary)\",\n            \"secondary-hover\": \"var(--color-error-secondary-hover)\",\n            \"secondary-active\": \"var(--color-error-secondary-active)\",\n          },\n          warning: {\n            DEFAULT: \"var(--color-warning)\",\n            hover: \"var(--color-warning-hover)\",\n            active: \"var(--color-warning-active)\",\n            secondary: \"var(--color-warning-secondary)\",\n            \"secondary-hover\": \"var(--color-warning-secondary-hover)\",\n            \"secondary-active\": \"var(--color-warning-secondary-active)\",\n          },\n          info: {\n            DEFAULT: \"var(--color-info)\",\n            hover: \"var(--color-info-hover)\",\n            active: \"var(--color-info-active)\",\n          },\n\n          // Interactive states\n          disabled: \"var(--color-disabled)\",\n          focus: \"var(--color-focus-ring)\",\n          \"focus-visible\": \"var(--color-focus-visible)\",\n\n          // Links\n          link: {\n            DEFAULT: \"var(--color-link)\",\n            hover: \"var(--color-link-hover)\",\n            visited: \"var(--color-link-visited)\",\n          },\n\n          // Brand colors (theme-independent)\n          flamingo: {\n            pink: \"var(--ods-flamingo-pink-base)\",\n            cyan: \"var(--ods-flamingo-cyan-base)\",\n          },\n          \"open-yellow\": {\n            DEFAULT: \"var(--ods-open-yellow-base)\",\n            secondary: \"var(--ods-open-yellow-secondary)\",\n          },\n\n          // Attention tokens (ods-colors.css). Components reference these BY\n          // NAME (error-state.tsx: `border-ods-attention-red-error` etc.) —\n          // without these mappings Tailwind silently generates NOTHING for\n          // the class and the component renders colorless in every consumer.\n          attention: {\n            \"red-error\": \"var(--ods-attention-red-error)\",\n            \"red-error-hover\": \"var(--ods-attention-red-error-hover)\",\n            \"red-error-action\": \"var(--ods-attention-red-error-action)\",\n            \"red-error-secondary\": \"var(--ods-attention-red-error-secondary)\",\n            \"red-error-secondary-hover\": \"var(--ods-attention-red-error-secondary-hover)\",\n            \"red-error-secondary-action\": \"var(--ods-attention-red-error-secondary-action)\",\n            \"yellow-warning\": \"var(--ods-attention-yellow-warning)\",\n            \"yellow-warning-hover\": \"var(--ods-attention-yellow-warning-hover)\",\n            \"yellow-warning-action\": \"var(--ods-attention-yellow-warning-action)\",\n            \"yellow-warning-secondary\": \"var(--ods-attention-yellow-warning-secondary)\",\n            \"yellow-warning-secondary-hover\": \"var(--ods-attention-yellow-warning-secondary-hover)\",\n            \"yellow-warning-secondary-action\": \"var(--ods-attention-yellow-warning-secondary-action)\",\n            \"green-success\": \"var(--ods-attention-green-success)\",\n            \"green-success-hover\": \"var(--ods-attention-green-success-hover)\",\n            \"green-success-action\": \"var(--ods-attention-green-success-action)\",\n            \"green-success-secondary\": \"var(--ods-attention-green-success-secondary)\",\n            \"green-success-secondary-hover\": \"var(--ods-attention-green-success-secondary-hover)\",\n            \"green-success-secondary-action\": \"var(--ods-attention-green-success-secondary-action)\",\n          },\n\n          // Adaptive platform color\n          current: \"var(--ods-current)\",\n        },\n      },\n      // Custom breakpoints (aligned with ODS responsive tokens from Figma)\n      screens: {\n        'md': '800px',   // Tablet: 50rem\n        'lg': '1280px',  // Desktop: 80rem\n        'xl': '1440px',  // Large desktop: 90rem\n      },\n\n      borderRadius: {\n        lg: \"var(--radius)\", // 8px\n        md: \"calc(var(--radius) - 2px)\", // 6px\n        sm: \"calc(var(--radius) - 4px)\", // 4px\n        xs: \"calc(var(--radius) - 6px)\", // 2px\n      },\n\n      maxWidth: {\n        'ods-content-narrow': '600px',\n      },\n\n      fontFamily: {\n        sans: [\"var(--font-family-body)\"],\n        mono: [\"var(--font-family-heading)\"],\n        body: [\"var(--font-family-body)\"],\n        heading: [\"var(--font-family-heading)\"],\n      },\n\n      // =================================================\n      // TYPOGRAPHY\n      // =================================================\n      fontSize: {\n        // Responsive heading sizes (from ods-responsive-tokens.css)\n        'heading-1': ['var(--font-size-h1-title)', { lineHeight: 'var(--font-line-space-h1-main-title)' }],\n        'heading-2': ['var(--font-size-h2-sub-title)', { lineHeight: 'var(--font-line-space-h2-sub-title)' }],\n        'heading-3': ['var(--font-size-h3-body)', { lineHeight: 'var(--font-line-space-h3-body)' }],\n        'heading-4': ['var(--font-size-h4-body)', { lineHeight: 'var(--font-line-space-h4-body)' }],\n        'heading-5': ['var(--font-size-h5-caption)', { lineHeight: 'var(--font-line-space-h5-caption)' }],\n        'heading-6': ['var(--font-size-h6-caption)', { lineHeight: 'var(--font-line-space-h6-caption)' }],\n      },\n\n      // =================================================\n      // SHADOWS\n      // =================================================\n      boxShadow: {\n        'card': 'var(--shadow-card)',\n        'card-hover': 'var(--shadow-card-hover)',\n        'modal': 'var(--shadow-modal)',\n        'dropdown': 'var(--shadow-dropdown)',\n        'tooltip': 'var(--shadow-tooltip)',\n        'focus': 'var(--shadow-focus)',\n        'accent': 'var(--shadow-accent)',\n        'accent-lg': 'var(--shadow-accent-lg)',\n      },\n\n      // =================================================\n      // TRANSITIONS\n      // =================================================\n      transitionDuration: {\n        'fast': 'var(--duration-fast)',\n        'normal': 'var(--duration-normal)',\n        'slow': 'var(--duration-slow)',\n        'slower': 'var(--duration-slower)',\n      },\n      transitionTimingFunction: {\n        'bounce': 'var(--ease-bounce)',\n        'elastic': 'var(--ease-elastic)',\n      },\n\n      // =================================================\n      // Z-INDEX\n      // =================================================\n      zIndex: {\n        'dropdown': 'var(--z-dropdown)',\n        'sticky': 'var(--z-sticky)',\n        'fixed': 'var(--z-fixed)',\n        'modal-backdrop': 'var(--z-modal-backdrop)',\n        'modal': 'var(--z-modal)',\n        'popover': 'var(--z-popover)',\n        'tooltip': 'var(--z-tooltip)',\n        'notification': 'var(--z-notification)',\n        'debug': 'var(--z-debug)',\n      },\n\n      // =================================================\n      // ANIMATIONS\n      // =================================================\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n        \"fade-in\": {\n          from: { opacity: \"0\" },\n          to: { opacity: \"1\" },\n        },\n        // Endless chip strip (QuickActionMarquee): the track renders its items\n        // twice, so -50% lands exactly one copy over for a seamless loop.\n        \"qa-marquee\": {\n          from: { transform: \"translateX(0)\" },\n          to: { transform: \"translateX(-50%)\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n        \"fade-in\": \"fade-in 0.3s ease-out\",\n        \"qa-marquee\": \"qa-marquee var(--qa-marquee-duration,40s) linear infinite\",\n      },\n    },\n  },\n  plugins: [tailwindcssAnimate, odsTypographyPlugin, containerQueries],\n}\n\nexport default config\n"]}

package/dist/types/navigation.d.ts

@@ -88,7 +88,6 @@ export interface NavigationSidebarItem {
     label: string;
     icon: React.ReactNode;
     path?: string;
-    badge?: string | React.ReactNode;
     unreadCount?: number;
     isActive?: boolean;
     onClick?: () => void;

package/dist/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.383",
+  "version": "0.0.384-snapshot.20260708165758",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/approval-batch-message.tsx

@@ -47,29 +47,42 @@ export interface ApprovalBatchMessageProps extends React.HTMLAttributes<HTMLDivE
    * full-text status pill); `'mingo'`/undefined = admin (original layout).
    */
   assistantType?: AssistantType
+  /**
+   * Render the footer Approve/Reject buttons (or the resolved-status tag).
+   * Turn off when the host owns the actions row — e.g. the approval
+   * notification tile. Explanation bullets still render.
+   */
+  showFooterActions?: boolean
 }
 
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
 
+export interface ApprovalStatusTagProps {
+  status: ApprovalBatchSegment["status"]
+  resolvedByName?: string | null
+  inlineResolver?: boolean
+}
+
 /**
  * Terminal-status badge for a resolved approval batch (approved / rejected /
- * cancelled). For CLIENT (Fae) the resolver's name is baked into the tag as a
- * single full-text pill ("Approved by {name}"); ADMIN keeps the compact word
- * and renders "by {name}" as a separate muted span in the footer.
+ * cancelled); renders nothing while pending. With `inlineResolver` the
+ * resolver's name is baked into the tag as a single full-text pill
+ * ("Approved by {name}"); otherwise callers render "by {name}" as a separate
+ * muted span. Also used by the approval notification tile, which hosts the
+ * actions row itself (`showFooterActions={false}`).
  */
-function renderStatusTag(
-  status: ApprovalBatchSegment["status"],
-  isClient: boolean,
-  resolvedByName?: string | null,
-) {
-  const suffix = isClient && resolvedByName ? ` by ${resolvedByName}` : ""
+export function ApprovalStatusTag({ status, resolvedByName, inlineResolver = false }: ApprovalStatusTagProps) {
+  const suffix = inlineResolver && resolvedByName ? ` by ${resolvedByName}` : ""
   if (status === "approved") {
     return <Tag label={`Approved${suffix}`} variant="success" icon={<CheckCircleIcon className="w-4 h-4" />} />
   }
   if (status === "cancelled") {
     return <Tag label={`Canceled${suffix}`} variant="grey" icon={<XmarkIcon className="w-4 h-4" />} />
   }
-  return <Tag label={`Rejected${suffix}`} variant="error" icon={<XmarkCircleIcon className="w-4 h-4" />} />
+  if (status === "rejected") {
+    return <Tag label={`Rejected${suffix}`} variant="error" icon={<XmarkCircleIcon className="w-4 h-4" />} />
+  }
+  return null
 }
 
 function getArgEntries(call: PendingToolCallData): Array<[string, unknown]> {
@@ -193,7 +206,7 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
 }
 
 const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProps>(
-  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, assistantType, ...props }, ref) => {
+  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, assistantType, showFooterActions = true, ...props }, ref) => {
     const [expandedId, setExpandedId] = useState<string | null>(null)
     const [isProcessing, setIsProcessing] = useState(false)
     const isClient = assistantType === "fae"
@@ -223,7 +236,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
       }
     }
 
-    const showFooterBlock = explanations.length > 0 || status !== undefined
+    const showFooterBlock = explanations.length > 0 || showFooterActions
 
     return (
       <div
@@ -282,7 +295,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
               </ul>
             )}
 
-            {status === "pending" ? (
+            {showFooterActions && (status === "pending" ? (
               <div className="flex gap-[var(--spacing-system-xsf)] items-center">
                 <Button
                   size="small-legacy"
@@ -313,12 +326,12 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
               </div>
             ) : (
               <div className="flex items-center gap-[var(--spacing-system-xsf)]">
-                {renderStatusTag(status, isClient, resolvedByName)}
+                <ApprovalStatusTag status={status} resolvedByName={resolvedByName} inlineResolver={isClient} />
                 {!isClient && resolvedByName && (
                   <span className="text-h6 text-ods-text-secondary">by {resolvedByName}</span>
                 )}
               </div>
-            )}
+            ))}
           </div>
         )}
       </div>

package/src/components/features/notifications/approval-request-notification-tile.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { cn } from '../../../utils/cn'
-import { ApprovalBatchMessage } from '../../chat/approval-batch-message'
+import { Button } from '../../ui/button'
+import { ApprovalBatchMessage, ApprovalStatusTag } from '../../chat/approval-batch-message'
 import { ExpandChevron } from '../../chat/expand-chevron'
 import { useCollapsible } from '../../chat/hooks/use-collapsible'
 import type { ChatApprovalStatus } from '../../chat/types'
@@ -35,6 +35,7 @@ export function ApprovalRequestNotificationTile({
   // Toggling the command section pins the tile so a live pop-up doesn't
   // auto-dismiss out from under the user mid-read.
   const [pinned, setPinned] = useState(defaultExpanded)
+  const [processing, setProcessing] = useState(false)
   // Optimistic status for this user's own click; backend resolution (below) wins once it arrives.
   const [localStatus, setLocalStatus] = useState<ChatApprovalStatus | null>(null)
 
@@ -48,66 +49,89 @@ export function ApprovalRequestNotificationTile({
 
   if (!approval || !batchData) return null
 
-  const commandWord = batchData.toolCalls.length > 1 ? 'Commands' : 'Command'
-  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord}`
+  const tileNotification: Notification = {
+    ...notification,
+    type: notification.type ?? 'Approval Required',
+  }
+
+  const commandWord = batchData.toolCalls.length > 1 ? 'commands' : 'command'
+  const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord} section`
 
-  const handleApprove = async () => {
-    setLocalStatus('approved')
+  const resolve = async (
+    nextStatus: 'approved' | 'rejected',
+    action: (approvalRequestId: string) => void | Promise<void>,
+  ) => {
+    setProcessing(true)
+    setLocalStatus(nextStatus)
     try {
-      await onApprove(batchData.approvalRequestId)
-      onComplete(notification.id)
+      await action(batchData.approvalRequestId)
     } catch {
       setLocalStatus(null) // roll back the optimistic flip; the request failed
+      return
+    } finally {
+      setProcessing(false)
     }
-  }
-  const handleReject = async () => {
-    setLocalStatus('rejected')
-    try {
-      await onReject(batchData.approvalRequestId)
-      onComplete(notification.id)
-    } catch {
-      setLocalStatus(null)
-    }
+    // Outside the try: a throwing consumer callback must not roll back a request
+    // that already succeeded server-side.
+    onComplete(notification.id)
   }
 
   return (
     <NotificationTile
-      notification={notification}
+      notification={tileNotification}
       liveDurationMs={liveDurationMs}
       onComplete={onComplete}
       onSettle={onSettle}
       className={className}
-      paused={pinned}
+      paused={pinned || processing}
+      actions={
+        <div className="flex w-full items-center gap-[var(--spacing-system-xs)]">
+          {status === 'pending' ? (
+            <>
+              <Button variant="accent" size="small" onClick={() => resolve('approved', onApprove)} disabled={processing}>
+                Approve
+              </Button>
+              <Button variant="outline" size="small" onClick={() => resolve('rejected', onReject)} disabled={processing}>
+                Reject
+              </Button>
+            </>
+          ) : (
+            <span className="flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+              <ApprovalStatusTag status={status} />
+              {approval.resolvedByName ? (
+                <span className="truncate text-h6 text-ods-text-secondary">by {approval.resolvedByName}</span>
+              ) : null}
+            </span>
+          )}
+          <Button
+            variant="outline"
+            size="small"
+            onClick={() => {
+              setExpanded(prev => !prev)
+              setPinned(true)
+            }}
+            aria-expanded={expanded}
+            aria-label={toggleLabel}
+            className="ml-auto w-6 shrink-0 px-0 md:w-8"
+          >
+            <ExpandChevron expanded={expanded} />
+          </Button>
+        </div>
+      }
     >
-      {/* Persistent collapse/expand control for the command section. */}
-      <button
-        type="button"
-        onClick={() => {
-          setExpanded(prev => !prev)
-          setPinned(true)
-        }}
-        aria-expanded={expanded}
-        className={cn(
-          'flex w-full items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-xs)] text-left',
-          expanded && 'border-b border-ods-border',
-        )}
-      >
-        <span className="min-w-0 flex-1 text-h6 text-ods-text-primary">{toggleLabel}</span>
-        <ExpandChevron expanded={expanded} />
-      </button>
-
       <div style={containerStyle}>
+        {/* Divider lives inside the measured element — useCollapsible caps the
+            container at the inner scrollHeight, which excludes the inner's own borders. */}
         <div ref={innerRef}>
-          <ApprovalBatchMessage
-            data={batchData}
-            status={status}
-            resolvedByName={approval.resolvedByName}
-            showExecutionStatus={false}
-            onApprove={handleApprove}
-            onReject={handleReject}
-            maxBodyHeight="50vh"
-            className="mb-0 rounded-none border-0"
-          />
+          <div className="border-t border-ods-border">
+            <ApprovalBatchMessage
+              data={batchData}
+              showExecutionStatus={false}
+              showFooterActions={false}
+              maxBodyHeight="50vh"
+              className="mb-0 rounded-none border-0"
+            />
+          </div>
         </div>
       </div>
     </NotificationTile>

package/src/components/features/notifications/notification-tile.tsx

@@ -1,12 +1,32 @@
 'use client'
 
-import { useMemo, useEffect, type ReactNode } from 'react'
+import { useMemo, useEffect, useState, type ReactNode } from 'react'
 import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon'
 import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon'
-import { Button } from '../../ui/button/button'
 import { dotColorByVariant, progressColorByVariant } from '../../ui/toaster'
 import { cn } from '../../../utils/cn'
-import type { Notification } from './types'
+import { formatTicketRelativeTime } from '../../../utils/date-utils'
+import type { Notification, NotificationSeverity, NotificationVariant } from './types'
+
+/** Backend severity → tile color variant; overrides `notification.variant` when present. */
+const variantBySeverity: Record<NotificationSeverity, NotificationVariant> = {
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'error',
+}
+
+/** Severity color applied to the header type label and icon slot. */
+const typeColorByVariant: Record<NotificationVariant, string> = {
+  default: 'text-ods-text-secondary',
+  info: 'text-ods-text-secondary',
+  success: 'text-ods-success',
+  warning: 'text-ods-warning',
+  error: 'text-ods-error',
+}
+
+const headerControlClass =
+  'absolute inset-0 flex items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary'
 
 export interface NotificationTileProps {
   notification: Notification
@@ -14,7 +34,13 @@ export interface NotificationTileProps {
   onComplete: (id: string) => void
   onSettle?: (id: string) => void
   className?: string
-  /** Extra content rendered below the header inside the same card (e.g. an approval command section). */
+  /** Action row rendered below the body inside the padded section (e.g. approval buttons). */
+  actions?: ReactNode
+  /**
+   * Extra content rendered below the padded section (e.g. a collapsible approval command
+   * section). Bring your own top divider — the tile no longer draws one, so a zero-height
+   * collapsed child doesn't leave a stray border above the card's bottom edge.
+   */
   children?: ReactNode
   /** Pin the tile: cancel the live auto-dismiss countdown (timer + progress bar) without settling it. */
   paused?: boolean
@@ -26,10 +52,36 @@ export function NotificationTile({
   onComplete,
   onSettle,
   className,
+  actions,
   children,
   paused = false,
 }: NotificationTileProps) {
-  const { id, variant = 'default', title, description, createdAt, read, settled } = notification
+  const {
+    id,
+    variant = 'default',
+    severity,
+    type,
+    icon,
+    imageUrl,
+    title,
+    description,
+    createdAt,
+    read,
+    settled,
+  } = notification
+
+  // Unknown severity strings (backend data can outrun the union) degrade to `variant`.
+  const accentVariant = (severity ? variantBySeverity[severity] : undefined) ?? variant
+
+  // A blocked/broken image (ad-blockers routinely kill external avatars) falls
+  // through to the icon/category/dot chain instead of a broken-image glyph.
+  const [failedImageUrl, setFailedImageUrl] = useState<string | null>(null)
+  const image = imageUrl && imageUrl !== failedImageUrl ? imageUrl : undefined
+
+  // Gate on the Date, not the number: NaN, Infinity AND finite-but-out-of-range
+  // epochs (e.g. nanoseconds) all make toISOString() throw.
+  const createdAtDate = new Date(createdAt)
+  const createdAtIso = Number.isNaN(createdAtDate.getTime()) ? null : createdAtDate.toISOString()
 
   const initialElapsed = useMemo(() => Date.now() - createdAt, [createdAt])
   const isLive = !read && !settled && initialElapsed < liveDurationMs
@@ -53,43 +105,89 @@ export function NotificationTile({
     >
       <div
         className={cn(
-          'relative flex items-center gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
-          children ? 'border-b border-ods-border' : null,
+          'relative flex flex-col gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]',
+          isLive && 'pb-[var(--spacing-system-m)]',
         )}
       >
-        <div className="flex size-6 shrink-0 items-center justify-center">
-          <span className={cn('size-1.5 rounded-full', dotColorByVariant[variant])} />
+        {/* Header: icon/image + type label (both severity-colored) + time + dismiss/complete control. */}
+        <div className="flex items-center gap-[var(--spacing-system-xs)]">
+          <span
+            className={cn(
+              'flex size-4 shrink-0 items-center justify-center',
+              typeColorByVariant[accentVariant],
+            )}
+          >
+            {image ? (
+              <img
+                src={image}
+                alt=""
+                onError={() => setFailedImageUrl(image)}
+                className="size-4 rounded-[2px] object-cover"
+              />
+            ) : (
+              icon ?? <span className={cn('size-1.5 rounded-full', dotColorByVariant[accentVariant])} />
+            )}
+          </span>
+
+          {type ? (
+            <p
+              className={cn('min-w-0 flex-1 truncate text-h5', typeColorByVariant[accentVariant])}
+              title={type}
+            >
+              {type}
+            </p>
+          ) : (
+            <span className="min-w-0 flex-1" />
+          )}
+
+          {!isLive && createdAtIso ? (
+            <time
+              dateTime={createdAtIso}
+              className="shrink-0 whitespace-nowrap text-h6 text-ods-text-secondary"
+            >
+              {formatTicketRelativeTime(createdAtIso)}
+            </time>
+          ) : null}
+
+          {/* Live X and settled check swap in the same 16px slot; the inactive
+              one is removed from the a11y tree and disabled, not just faded. */}
+          <span className="relative size-4 shrink-0">
+            {[
+              { active: isLive, label: 'Dismiss notification', icon: <XmarkIcon size={16} />, onClick: () => onSettle?.(id) },
+              { active: !isLive, label: 'Mark notification complete', icon: <CheckCircleIcon size={16} />, onClick: () => onComplete(id) },
+            ].map(({ active, label, icon, onClick }) => (
+              <button
+                key={label}
+                type="button"
+                onClick={onClick}
+                aria-label={label}
+                aria-hidden={!active}
+                disabled={!active}
+                tabIndex={active ? 0 : -1}
+                className={cn(headerControlClass, !active && 'pointer-events-none opacity-0')}
+              >
+                {icon}
+              </button>
+            ))}
+          </span>
         </div>
 
-        <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex min-w-0 flex-col">
           {title ? <p className="truncate text-h4 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p> : null}
           {description ? (
-            <p className="text-h6 line-clamp-2 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
+            <p className="text-h6 line-clamp-3 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
           ) : null}
         </div>
 
-        {/* Settled action. */}
-        <Button
-          variant="outline"
-          size="small"
-          onClick={() => onComplete(id)}
-          aria-label="Mark notification complete"
-          tabIndex={isLive ? -1 : 0}
-          className={cn(
-            'shrink-0 hover:text-ods-text-primary',
-            isLive && 'invisible',
-          )}
-        >
-          <CheckCircleIcon />
-        </Button>
+        {actions}
 
-        {/* Progress sits at the header's bottom edge (above any children). */}
+        {/* Progress sits at the section's bottom edge (above any children). */}
         {counting ? (
           <div
             aria-hidden
             className={cn(
               'absolute inset-x-0 -bottom-px h-1 origin-left',
-              progressColorByVariant[variant],
+              progressColorByVariant[accentVariant],
             )}
             style={{
               animation: `toast-progress ${liveDurationMs}ms linear forwards`,
@@ -100,20 +198,6 @@ export function NotificationTile({
       </div>
 
       {children}
-
-      {/* Live-only bare X overlay */}
-      <button
-        type="button"
-        onClick={() => onSettle?.(id)}
-        aria-label="Dismiss notification"
-        tabIndex={isLive ? 0 : -1}
-        className={cn(
-          'absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] flex size-4 items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary',
-          !isLive && 'pointer-events-none opacity-0',
-        )}
-      >
-        <XmarkIcon size={16} />
-      </button>
     </output>
   )
 }