@mp-consulting/homebridge-ui-kit 1.2.0 → 1.2.2

package/dist/ai.css

@@ -1,4 +1,4 @@
-/* @mp-consulting/homebridge-ui-kit v1.2.0 */
+/* @mp-consulting/homebridge-ui-kit v1.2.2 */
 
 /* ── Design tokens ──────────────────────────────────────────────────────────
    CSS custom properties used throughout the design system.
@@ -302,6 +302,13 @@
 
 .mp-ai-panel {
   display: block;
+  /* Full width of its slot, and safe as a flex/grid item: it never forces its
+     parent wider, and long words or URLs wrap instead of overflowing. */
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: break-word;
   padding: 1rem 1.125rem;
   border-radius: var(--mp-radius, 0.5rem);
   color: var(--mp-ai-fg);
@@ -323,15 +330,31 @@
 
 .mp-ai-panel-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem 0.5rem;
   margin-bottom: 0.625rem;
 }
 
+.mp-ai-panel-header > .mp-ai-badge {
+  flex: none;
+}
+
+/* The title sits next to the badge when there is room for at least ~12rem of
+   it; otherwise it wraps onto its own full-width line below the badge, so it
+   is never squeezed into a narrow column. */
 .mp-ai-panel-title {
+  flex: 1 1 12rem;
+  min-width: 0;
   margin: 0;
   font-size: 0.875rem;
   font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.mp-ai-panel-body {
+  min-width: 0;
 }
 
 .mp-ai-panel-note {
@@ -511,18 +534,31 @@
 
 .mp-ai-diff-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem 0.5rem;
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
   font-size: 0.8125rem;
 }
 
+.mp-ai-diff-header > .mp-ai-badge {
+  flex: none;
+}
+
+/* Same as the panel title: next to the badge when there is room for ~12rem of
+   it, otherwise on its own line below the badge (with the stats at its end),
+   never squeezed into a narrow column. */
 .mp-ai-diff-title {
+  flex: 1 1 12rem;
+  min-width: 0;
   font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .mp-ai-diff-stats {
+  flex: none;
   display: inline-flex;
   margin-left: auto;
   gap: 0.5rem;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/* @mp-consulting/homebridge-ui-kit v1.2.0 */
+/* @mp-consulting/homebridge-ui-kit v1.2.2 */
 
 /* ── Design tokens ──────────────────────────────────────────────────────────
    CSS custom properties used throughout the design system.
@@ -558,6 +558,13 @@
 
 .mp-ai-panel {
   display: block;
+  /* Full width of its slot, and safe as a flex/grid item: it never forces its
+     parent wider, and long words or URLs wrap instead of overflowing. */
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: break-word;
   padding: 1rem 1.125rem;
   border-radius: var(--mp-radius, 0.5rem);
   color: var(--mp-ai-fg);
@@ -579,15 +586,31 @@
 
 .mp-ai-panel-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem 0.5rem;
   margin-bottom: 0.625rem;
 }
 
+.mp-ai-panel-header > .mp-ai-badge {
+  flex: none;
+}
+
+/* The title sits next to the badge when there is room for at least ~12rem of
+   it; otherwise it wraps onto its own full-width line below the badge, so it
+   is never squeezed into a narrow column. */
 .mp-ai-panel-title {
+  flex: 1 1 12rem;
+  min-width: 0;
   margin: 0;
   font-size: 0.875rem;
   font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.mp-ai-panel-body {
+  min-width: 0;
 }
 
 .mp-ai-panel-note {
@@ -767,18 +790,31 @@
 
 .mp-ai-diff-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem 0.5rem;
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
   font-size: 0.8125rem;
 }
 
+.mp-ai-diff-header > .mp-ai-badge {
+  flex: none;
+}
+
+/* Same as the panel title: next to the badge when there is room for ~12rem of
+   it, otherwise on its own line below the badge (with the stats at its end),
+   never squeezed into a narrow column. */
 .mp-ai-diff-title {
+  flex: 1 1 12rem;
+  min-width: 0;
   font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .mp-ai-diff-stats {
+  flex: none;
   display: inline-flex;
   margin-left: auto;
   gap: 0.5rem;

package/dist/kit.js

@@ -1,4 +1,4 @@
-/* @mp-consulting/homebridge-ui-kit v1.2.0
+/* @mp-consulting/homebridge-ui-kit v1.2.2
    Brand design system for Homebridge plugins
    https://github.com/mp-consulting/homebridge-ui-kit */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mp-consulting/homebridge-ui-kit",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Brand design system for @mp-consulting Homebridge plugins",
   "keywords": [
     "homebridge",