u2ui 1.0.1 → 1.4.5

package/el/menubutton/manifest.json

@@ -0,0 +1,44 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "menubutton.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Buttons with options",
+            "name": "U2Menubutton",
+            "members": [{
+                "kind": "method",
+                "name": "open",
+                "description": "Opens the menu"
+            },{
+                "kind": "method",
+                "name": "close",
+                "description": "Closes the menu"
+            },{
+                "kind": "method",
+                "name": "toggle",
+                "description": "Toggles the menu"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "openby",
+                "description": "How the menu opens additionally to clicking",
+                "u2Examples": ["hover", "focus", "hover focus"]
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-menubutton",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-menubutton",
+            "declaration": {
+                "name": "U2Menubutton",
+                "module": "menubutton.js"
+            }
+        }]
+    }]
+}

package/el/{splitbutton/splitbutton.css → menubutton/menubutton.css}

@@ -1,48 +1,52 @@
-/* functional styles */
-u2-splitbutton {
-    position:relative;
-    display:inline-block;
-}
-u2-splitbutton menu {
-    position:absolute;
-    z-index:1;
-    isolation: isolate;
-    top:calc(100% + .4rem);
-    right:0;
-    width:max-content;
-    margin:0;
-    padding:.4em;
-    opacity:0;
-    visibility: hidden;
-    transition: all .2s .1s;
-}
-u2-splitbutton menu > li {
-    list-style:none;
-    margin:0;
-    padding:.05em;
-}
-u2-splitbutton menu > li > button {
-    width:100%;
-    margin:0;
-    text-align:left;
-}
-u2-splitbutton :is(:hover, :focus) + menu,
-u2-splitbutton menu:is(:hover, :focus-within) {
-    opacity:1;
-    visibility: visible;
-}
-
-/* minimal styled */
-u2-splitbutton menu {
-    background:var(--color-bg, Canvas);
-    border: 1px solid var(--color-text, CanvasText);
-    border-radius: calc(var(--radius) + 2px);
-}
-u2-splitbutton menu hr {
-    margin:.2em 0;
-}
-u2-splitbutton menu button:not(:focus, :hover) {
-    background-color:transparent;
-    color: var(--color-text, CanvasText);
-}
+/* functional styles */
+u2-menubutton {
+    position:relative;
+    display:inline-block;
+}
+u2-menubutton menu {
+    position:absolute;
+    z-index:1;
+    isolation: isolate;
+    top:calc(100% + .4rem);
+    right:0;
+    width:max-content;
+    margin:0;
+    padding:.4em;
+    padding-inline:0;
+    opacity:0;
+    visibility: hidden;
+    transition: opacity .2s .1s;
+    box-shadow: var(--shadow);
+    background:var(--color-bg, Canvas);
+    border: 1px solid color-mix(in srgb, var(--color-text, CanvasText), transparent 70%);
+    border-radius: calc(var(--radius) + 2px);
+    overflow:visible; /* for popover */
+}
+u2-menubutton menu > * {
+    display:block;
+    list-style:none;
+    margin:0;
+    padding:0;
+}
+u2-menubutton menu > li > :is(button, .btn) {
+    width:100%;
+    margin:0;
+    border:0;
+    border-radius:0;
+    text-align:left;
+}
+u2-menubutton :is(:xxxhover, :focus) + menu,
+u2-menubutton menu:is(:hover, :focus-within, :popover-open) {
+    opacity:1;
+    visibility: visible;
+}
+
+/* minimal styled */
+u2-menubutton menu hr {
+    margin:.2em 0;
+}
+u2-menubutton menu button:not(:focus, :hover) {
+    background-color:transparent;
+    color: var(--color-text, CanvasText);
+}
 /* */

package/el/menubutton/menubutton.js

@@ -0,0 +1,90 @@
+
+export default class U2Menubutton extends HTMLElement {
+    connectedCallback() {
+        import('../../attr/focusgroup/focusgroup.js');
+        if (this._init) return; // listeners live on the element itself, so setup runs once, not per reconnect
+        this._init = true;
+        setTimeout(() => {
+
+            const menu = this.querySelector('menu');
+
+            menu.setAttribute('u2-focusgroup', 'remember');
+            menu.setAttribute('popover', 'auto');
+
+            let button = this.querySelector(':scope > button');
+            if (!button) {
+                button = document.createElement('button');
+                button.innerHTML = '⋮'; // other variants: '⯆', '⯈', '⯇', '⠇'
+                this.prepend(button);
+            }
+
+            //button.popovertarget = menu;
+
+            button.type = 'button';
+            button.ariaHasPopup = 'menu';
+            button.addEventListener('click', () => this.toggle());
+            button.addEventListener('keydown', (e) => { // keyup?
+                if (e.key === 'ArrowDown') {
+                    this.open();
+                    nextFocusable(this.querySelector(':scope > menu')).focus();
+                    e.preventDefault();
+                }
+            });
+            menu.addEventListener('toggle', e => {
+                button.ariaExpanded = e.newState === 'open';
+            });
+
+            this.addEventListener('focusout', (e) => { // popover makes this not?
+               !this.contains(e.relatedTarget) && menu.hidePopover();
+            });
+
+            const openby = (v) => this.getAttribute('openby')?.includes(v);
+            this.addEventListener('mouseenter', () => {
+                if (openby('hover')) this._openTimer = setTimeout(() => this.open(), 140);
+            });
+            this.addEventListener('mouseleave', () => {
+                clearTimeout(this._openTimer);
+                openby('hover') && this.close();
+            });
+            this.addEventListener('focusin', () => {
+                openby('focus') && this.open()
+            });
+
+            this.menu = menu;
+            this.button = button;
+
+        }, 0);
+    }
+    open() {
+        this.menu.style.minWidth = this.button.offsetWidth+'px';
+        this.menu.showPopover();
+        this._place();
+    }
+    close() {
+        this.menu.hidePopover();
+    }
+    toggle() {
+        this.menu.matches(':popover-open') ? this.close() : this.open();
+    }
+    _place() {
+        import('../../js/Placer/Placer.js').then(({Placer}) => {
+            const placer = new Placer(this.menu, { x:'append', y:'after', margin:0 });
+            placer.toElement(this.button);
+        });
+    }
+}
+customElements.define('u2-menubutton', U2Menubutton);
+
+
+function nextFocusable(root) {
+  return root.querySelector(`
+    :where(
+      button,
+      [href],
+      input,
+      select,
+      textarea,
+      [tabindex]:not([tabindex="-1"])
+    ):not([disabled]):not([hidden])
+  `);
+}

package/el/number/README.md

@@ -4,26 +4,29 @@ Displays formatted numbers
 ## Usage
 
 ```html
-Number: <u2-number value="8987.2345" digits="2">8'987.23</u2-number>
+Number:
+<u2-number value="8987.2345" digits="2">
+    8'987.23
+</u2-number>
 ```
 
 ```css
-u2-number {
-    font-size: 2em;
+u2-number {
+    font-size: 2em;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/number/number.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/number/number.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/number/number.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/number/number.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/number/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/number/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/number/tests/minimal.html)  
 
 ## Attributes
 

package/el/number/manifest.json

@@ -1,121 +1,162 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "number.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "Displays formatted numbers",
-            "name": "u2-number",
-            "members": [
-                {
-                    "kind": "field",
-                    "description": "Set or get the value of the number",
-                    "name": "value"
-                }
-            ],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "value",
-                    "description": "The number to format"
-                },{
-                    "name": "lang",
-                    "description": "The language to use for formatting the number",
-                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
-                },{
-                    "name": "digits",
-                    "description": "The number of digits to display after the decimal point",
-                    "u2-type": "number"
-                },{
-                    "name": "unit",
-                    "description": "The unit of measure to use when displaying the number",
-                    "u2-type": ["acre","bit","byte","celsius","centimeter","day","degree","fahrenheit","fluid-ounce","foot","gallon","gigabit","gigabyte","gram","hectare","hour","inch","kilobit","kilobyte","kilogram","kilometer","liter","megabit","megabyte","meter","microsecond","mile","mile-scandinavian","milliliter","millimeter","millisecond","minute","month","nanosecond","ounce","percent","petabyte","pound","second","stone","terabit","terabyte","week","yard","year"]
-                },{
-                    "name": "currency",
-                    "description": "Display the number as a currency. Formated based on the currency locale."
-                },{
-                    "name": "percent",
-                    "description": "Display the number as a percentage.",
-                    "u2-type": "boolean"
-                }
-            ],
-            "cssProperties": [],
-            "cssParts": [
-                {
-                    "// name": "compact",
-                    "description": "The exponent in 'long' or 'short' form, depending on how compactDisplay (which defaults to short) is specified when notation is set to compact."
-                },{
-                    "name": "currency",
-                    "description": "The currency string, such as the symbols '$' and '€' or the name 'Dollar', 'Euro', depending on how currencyDisplay is specified."
-                },{
-                    "name": "decimal",
-                    "description": "The decimal separator string ('.')."
-                },{
-                    "// name": "exponentInteger",
-                    "description": "The exponent integer value, when notation is set to scientific or engineering."
-                },{
-                    "// name": "exponentMinusSign",
-                    "description": "The exponent minus sign string ('-')."
-                },{
-                    "// name": "exponentSeparator",
-                    "description": "The exponent separator, when notation is set to scientific or engineering."
-                },{
-                    "name": "fraction",
-                    "description": "The fraction number."
-                },{
-                    "name": "group",
-                    "description": "The group separator string (',')."
-                },{
-                    "// name": "infinity",
-                    "description": "The Infinity string ('∞')."
-                },{
-                    "name": "integer",
-                    "description": "The integer number."
-                },{
-                    "name": "literal",
-                    "description": "Any literal strings or whitespace in the formatted number."
-                },{
-                    "name": "minusSign",
-                    "description": "The minus sign string ('-')."
-                },{
-                    "name": "nan",
-                    "description": "The NaN string ('NaN')."
-                },{
-                    "name": "plusSign",
-                    "description": "The plus sign string ('+')."
-                },{
-                    "name": "percentSign",
-                    "description": "The percent sign string ('%')."
-                },{
-                    "name": "unit",
-                    "description": "The unit string, such as the 'l' or 'litres', depending on how unitDisplay is specified."
-                },{
-                    "// name": "unknown",
-                    "description": "The string for unknown type results."
-                }
-            ],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-number",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-number",
-            "declaration": {
-              "name": "u2-number",
-              "module": "number.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "number.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Displays formatted numbers",
+            "name": "U2Number",
+            "members": [{
+                "kind": "field",
+                "description": "Set or get the value of the number",
+                "name": "value"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "value",
+                "description": "The number to format"
+            },{
+                "name": "lang",
+                "description": "The language to use for formatting the number",
+                "u2Examples": [
+                    "en-US",
+                    "fr-FR",
+                    "de-DE",
+                    "es-ES",
+                    "it-IT",
+                    "ja-JP",
+                    "ko-KR",
+                    "zh-CN",
+                    "zh-TW"
+                ]
+            },{
+                "name": "digits",
+                "description": "The number of digits to display after the decimal point",
+                "u2-type": "number"
+            },{
+                "name": "unit",
+                "description": "The unit of measure to use when displaying the number",
+                "u2-type": [
+                    "acre",
+                    "bit",
+                    "byte",
+                    "celsius",
+                    "centimeter",
+                    "day",
+                    "degree",
+                    "fahrenheit",
+                    "fluid-ounce",
+                    "foot",
+                    "gallon",
+                    "gigabit",
+                    "gigabyte",
+                    "gram",
+                    "hectare",
+                    "hour",
+                    "inch",
+                    "kilobit",
+                    "kilobyte",
+                    "kilogram",
+                    "kilometer",
+                    "liter",
+                    "megabit",
+                    "megabyte",
+                    "meter",
+                    "microsecond",
+                    "mile",
+                    "mile-scandinavian",
+                    "milliliter",
+                    "millimeter",
+                    "millisecond",
+                    "minute",
+                    "month",
+                    "nanosecond",
+                    "ounce",
+                    "percent",
+                    "petabyte",
+                    "pound",
+                    "second",
+                    "stone",
+                    "terabit",
+                    "terabyte",
+                    "week",
+                    "yard",
+                    "year"
+                ]
+            },{
+                "name": "currency",
+                "description": "Display the number as a currency. Formated based on the currency locale."
+            },{
+                "name": "percent",
+                "description": "Display the number as a percentage.",
+                "u2-type": "boolean"
+            }],
+            "cssProperties": [],
+            "cssParts": [{
+                "// name": "compact",
+                "description": "The exponent in 'long' or 'short' form, depending on how compactDisplay (which defaults to short) is specified when notation is set to compact."
+            },{
+                "name": "currency",
+                "description": "The currency string, such as the symbols '$' and '€' or the name 'Dollar', 'Euro', depending on how currencyDisplay is specified."
+            },{
+                "name": "decimal",
+                "description": "The decimal separator string ('.')."
+            },{
+                "// name": "exponentInteger",
+                "description": "The exponent integer value, when notation is set to scientific or engineering."
+            },{
+                "// name": "exponentMinusSign",
+                "description": "The exponent minus sign string ('-')."
+            },{
+                "// name": "exponentSeparator",
+                "description": "The exponent separator, when notation is set to scientific or engineering."
+            },{
+                "name": "fraction",
+                "description": "The fraction number."
+            },{
+                "name": "group",
+                "description": "The group separator string (',')."
+            },{
+                "// name": "infinity",
+                "description": "The Infinity string ('∞')."
+            },{
+                "name": "integer",
+                "description": "The integer number."
+            },{
+                "name": "literal",
+                "description": "Any literal strings or whitespace in the formatted number."
+            },{
+                "name": "minusSign",
+                "description": "The minus sign string ('-')."
+            },{
+                "name": "nan",
+                "description": "The NaN string ('NaN')."
+            },{
+                "name": "plusSign",
+                "description": "The plus sign string ('+')."
+            },{
+                "name": "percentSign",
+                "description": "The percent sign string ('%')."
+            },{
+                "name": "unit",
+                "description": "The unit string, such as the 'l' or 'litres', depending on how unitDisplay is specified."
+            },{
+                "// name": "unknown",
+                "description": "The string for unknown type results."
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-number",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-number",
+            "declaration": {
+                "name": "U2Number",
+                "module": "number.js"
+            }
+        }]
+    }]
+}

package/el/number/number.css

@@ -1,6 +1,6 @@
-u2-number {
-    text-align:right; /* if block */
-    /* only as child of a table-cell? (would probably be confusing) */
-    font-variant: tabular-nums;
-    font-feature-settings: "tnum";
-}
+u2-number {
+    text-align:right; /* if block */
+    /* only as child of a table-cell? (would probably be confusing) */
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+}