@ramme-io/ui 4.1.1 → 4.2.1

package/src/wizardManifest.ts

@@ -1102,7 +1102,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "status-badge",
       "name": "StatusBadge",
-      "version": "1.0.1",
+      "version": "1.0.2",
       "description": "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.",
       "tags": [
         "status",
@@ -1121,7 +1121,7 @@ export const wizardManifest: WizardManifest = {
         {
           "name": "color",
           "type": "string",
-          "description": "Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given."
+          "description": "Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given."
         },
         {
           "name": "label",
@@ -3675,7 +3675,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "detail-drawer",
       "name": "DetailDrawer",
-      "version": "1.0.0",
+      "version": "1.0.2",
       "description": "A resizable side panel for inspecting one record without leaving the list. Strategic purpose: the master-detail companion — `push` compresses its siblings in a flex layout so the list stays visible and usable, while `overlay` floats above the page like a classic drawer. Use this for \"click a row, see the detail\" flows; use Modal when the task must block everything else.",
       "tags": [
         "layout",
@@ -3700,7 +3700,7 @@ export const wizardManifest: WizardManifest = {
         {
           "name": "variant",
           "type": "string",
-          "description": "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push."
+          "description": "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to overlay."
         },
         {
           "name": "side",
@@ -3732,6 +3732,11 @@ export const wizardManifest: WizardManifest = {
           "type": "number",
           "description": "Upper bound for resizing. Defaults to 60% of the window width."
         },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Names the panel for assistive technology. Not rendered: there is no header row to put it in, and adding one is a design decision. Without it an overlay announces only as \"dialog\"."
+        },
         {
           "name": "children",
           "type": "ReactNode",

package/tailwind.preset.js

@@ -38,6 +38,11 @@ module.exports = {
         destructive: {
           DEFAULT:    'rgb(var(--app-danger-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-danger-foreground-color) / <alpha-value>)',
+          // Severity text on the PAGE ground, not on the fill. `DEFAULT` is the
+          // fill and fails as body copy (success on white is 2.8:1); `strong` is
+          // the per-theme value that passes. Named `strong` rather than `text`
+          // so the utility reads `text-destructive-strong`, not `-text-text`.
+          strong:     'rgb(var(--app-danger-text-color) / <alpha-value>)',
         },
         accent: {
           DEFAULT:    'rgb(var(--app-accent-color) / <alpha-value>)',
@@ -56,14 +61,17 @@ module.exports = {
         info: {
           DEFAULT:    'rgb(var(--app-info-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-info-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-info-text-color) / <alpha-value>)',
         },
         success: {
           DEFAULT:    'rgb(var(--app-success-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-success-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-success-text-color) / <alpha-value>)',
         },
         warning: {
           DEFAULT:    'rgb(var(--app-warning-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-warning-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-warning-text-color) / <alpha-value>)',
         },
         error: {
           DEFAULT:    'rgb(var(--app-danger-color) / <alpha-value>)',