@threadlabs/looma 0.30.8 → 0.30.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.30.8",
+  "version": "0.30.9",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-dialog.css

@@ -111,6 +111,11 @@
       padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
     }
 
+    /* Alerts have no close target to add height above the title. */
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] header {
+      padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+    }
+
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
     :scope:where([data-component~="ui-dialog"]) .title {
       flex: 1;
@@ -238,6 +243,8 @@
 
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+    /* Alerts have no close target to add height above the title. */
+
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
     /* A CSS-drawn X. */

package/vue/UiDialog.vue

@@ -363,6 +363,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+/* Alerts have no close target to add height above the title. */
+
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
 /* A CSS-drawn X. */
@@ -460,6 +462,9 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
       var(--ui-space-5);
   }
+  :global(:scope[data-ui-dialog-state~="alert"] header:where([data-hn-ui-dialog])) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+  }
   :global(:scope .title:where([data-hn-ui-dialog])) {
     flex: 1;
     min-inline-size: 0;

package/vue/chunks/UiDialog.js

@@ -353,6 +353,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-995d5c18"]]);
+}), [["__scopeId", "data-v-f26be724"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/components.css

@@ -3035,18 +3035,20 @@ dd:where([data-hn-ui-description-item]) {
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
+/* Alerts have no close target to add height above the title. */
+
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-995d5c18 {
+@keyframes ui-dialog-enter-f26be724 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-995d5c18 {
+@keyframes ui-dialog-backdrop-enter-f26be724 {
 from {
     background-color: transparent;
 }
@@ -3094,7 +3096,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-995d5c18 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-f26be724 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3124,6 +3126,9 @@ header:where([data-hn-ui-dialog]) {
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
       var(--ui-space-5);
 }
+:scope[data-ui-dialog-state~="alert"] header:where([data-hn-ui-dialog]) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+}
 :scope .title:where([data-hn-ui-dialog]) {
     flex: 1;
     min-inline-size: 0;
@@ -3212,7 +3217,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-995d5c18 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-f26be724 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {