u2ui 1.7.5 → 1.8.1

package/class/badge/badge.css

@@ -11,20 +11,13 @@
     min-width:  1.6em;
     min-height: 1.6em;
     padding-inline: .6em;
-    padding-block: .2em .25em;
+    padding-block: .25em;
     justify-content: center;
     align-items: center;
     text-align: center;
 
     box-sizing: border-box;
 
-    /*
-	box-decoration-break:clone; /* not needed for inline-flex * /
-    vertical-align:middle;
-    margin-bottom:-.1em;
-    margin-top:-.1em;
-    transform: scale(0.99999999);
-    */
 }
 
 .u2-badge:empty {

package/css/classless/snippeds/hr/tests.html

@@ -13,7 +13,6 @@
   <link rel="stylesheet" href="../../variables.css">
   <link rel="stylesheet" href="../../classless.css">
   <link rel="stylesheet" href="../../more.css">
-  <link rel="stylesheet" href="../../simple.css">
 
 <body>
 

package/el/alert/README.md

@@ -3,7 +3,7 @@ Prominent hints, alerts and facts. `<u2-alert open variant=info>...</u2-alert>`
 
 ## Features
 
-- Various variants for Success, Warn, Error, and Info alerts.
+- Various variants for Success, Warning, Error, and Info alerts.
 - Dismissable alerts allow user to close them.
 - Support for icons within alerts.
 - Customizable actions through buttons in the alert.
@@ -34,7 +34,7 @@ u2-alert::part(icon) {
 ### Attributes
 
 - `variant`  
-  Determines the alert type (`success`, `warn`, `error`, `info`); sets default icon and ARIA role.
+  Determines the alert type (`success`, `warning`, `error`, `info`); sets default icon and ARIA role. `warn` still works, but is deprecated.
 
 - `dismissable`  
   Shows a close button. Without this attribute the close button is hidden.

package/el/alert/alert.css

@@ -17,7 +17,7 @@ u2-alert:not([open]) {
 }
 
 u2-alert[variant=success] { --color: var(--color-green); }
-u2-alert[variant=warn] { --color: var(--color-yellow); }
+u2-alert:is([variant=warning], [variant=warn]) { --color: var(--color-yellow); } /* warn: deprecated */
 u2-alert[variant=error] { --color: var(--color-red); }
 u2-alert[variant=info] { --color: var(--color-blue); }
 

package/el/alert/alert.js

@@ -106,11 +106,11 @@ export default class U2Alert extends U2Element {
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
         if (name==='variant') {
-            const variant = this.getAttribute('variant');
+            const variant = variantOf(this);
             this.shadowRoot.getElementById('container').role = variantData[variant]?.role || 'status'; // better to set role to host?
         }
         if (name==='variant' || name==='icon') {
-            const variant = this.getAttribute('variant');
+            const variant = variantOf(this);
             const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
             this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
         }
@@ -150,7 +150,7 @@ const variantData = {
         icon: 'check',
         role: 'status',
     },
-    warn: {
+    warning: {
         icon: 'warning',
         role: 'alert',
     },
@@ -160,6 +160,16 @@ const variantData = {
     }
 };
 
+/** The variant; "warn" is read as "warning" (deprecated, warned about once). */
+let warned = false;
+function variantOf(el) {
+    const variant = el.getAttribute('variant');
+    if (variant !== 'warn') return variant;
+    if (!warned) console.warn('u2-alert: variant "warn" is deprecated, use "warning"', el);
+    warned = true;
+    return 'warning';
+}
+
 customElements.get('u2-alert') || customElements.define('u2-alert', U2Alert);
 
 function alert(message, variant, options={}) {
@@ -173,7 +183,7 @@ function alert(message, variant, options={}) {
 }
 export const info = (message, options) => alert(message, 'info', options);
 export const success = (message, options) => alert(message, 'success', options);
-export const warn = (message, options) => alert(message, 'warn', options);
+export const warn = (message, options) => alert(message, 'warning', options);
 export const error = (message, options) => alert(message, 'error', options);
 
 

package/el/ico/ico.css

@@ -68,7 +68,7 @@ u2-ico[inline] {
 /* SVG */
 u2-ico > svg {
     vertical-align:bottom;
-    height:1em;
+    height:1em; /* todo: 1cap? */
     width:auto;
     min-width:1em;
     overflow:visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.7.5",
+  "version": "1.8.1",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",