@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/IconButton.js

@@ -1,27 +1,44 @@
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
 import Button from './Button.js';
 
+/**
+ * Icon buttons are compact buttons that use an icon to represent an action.
+ * @see https://m3.material.io/components/icon-buttons/specs
+ */
 export default Button
   .extend()
   .mixin(TooltipTriggerMixin)
+  .set({
+    _allowedTypes: ['button', 'submit', 'reset', 'checkbox', 'file'],
+  })
   .observe({
+    /** ARIA pressed state for toggle buttons (checkbox type). */
     _ariaPressed: {
-      get({ type, checked }) {
+      get({ type, checked, indeterminate }) {
         if (type !== 'checkbox') return null;
-        return checked ? 'true' : 'false';
+        return indeterminate ? 'mixed' : (checked ? 'true' : 'false');
       },
     },
+    /** True when the underlying control behaves as a toggle (checkbox). */
+    _isToggle({ type }) {
+      return type === 'checkbox';
+    },
+
+    /** When present, enables automatic tooltip behavior from the mixin. */
+    autoTooltip: { empty: true },
   })
   .expressions({
-    isToggle({ type }) {
-      return type === 'checkbox';
+    iconVariation({ checked, outlined, _isToggle }) {
+      if (!checked && (_isToggle || outlined)) return null;
+      return 'filled';
     },
   })
   .childEvents({
     control: {
       keydown(event) {
-        if (event.key !== 'Enter') return;
+        if (event.key !== 'Enter' && event.key !== ' ') return;
         const input = /** @type {HTMLInputElement} */ (event.currentTarget);
         if (input.type !== 'checkbox') return;
         event.stopImmediatePropagation();
@@ -29,39 +46,46 @@ export default Button
         event.preventDefault();
         if (input.disabled) return;
 
-        // Simulate click
-        const clickEvent = new Event('click', { bubbles: true, cancelable: true, composed: true });
-        if (!input.dispatchEvent(clickEvent)) return;
-
-        // Toggle check and signal
-        input.checked = !input.checked;
-        input.dispatchEvent(new Event('change', { bubbles: true }));
+        input.click();
       },
     },
   })
-  .on({
-    composed() {
-      const { slot, shape, tooltipSlot, icon, control, outline, anchor } = this.refs;
-      shape.classList.add('colored');
-      icon.classList.add('colored');
-      for (const el of [shape, icon]) {
-        el.setAttribute('toggle', '{isToggle}');
-        el.setAttribute('selected', '{checked}');
-      }
-      slot.remove();
-      icon.removeAttribute('mdw-if');
-      tooltipSlot.removeAttribute('name');
-
-      control.setAttribute('aria-pressed', '{_ariaPressed}');
-      control.setAttribute('aria-labelledby', 'tooltip');
-      anchor.setAttribute('aria-labelledby', 'tooltip');
-
-      outline.setAttribute('selected', '{checked}');
+  .recompose(({ refs: { icon, control, outline } }) => {
+    icon.removeAttribute('mdw-if');
+
+    control.setAttribute('aria-pressed', '{_ariaPressed}');
+
+    outline.setAttribute('toggle', '{_isToggle}');
+    outline.setAttribute('selected', '{checked}');
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ checked, disabled, filled, outlined, _isToggle }) {
+        if (!_isToggle) return null;
+        if (disabled) return null;
+        if (outlined) {
+          if (checked) {
+            return {
+              backgroundColor: 'rgb(var(--mdw-bg))',
+            };
+          }
+          return {
+            color: 'rgb(var(--mdw-color__on-surface-variant))',
+          };
+        }
+        if (checked) return null; // All else uses checked state
+        if (filled == null) return null;
+        return {
+          backgroundColor: 'rgb(var(--mdw-color__surface-container-highest))',
+          color: filled === 'tonal'
+            ? 'rgb(var(--mdw-color__on-surface-variant))'
+            : 'rgb(var(--mdw-bg))',
+        };
+      },
     },
   })
   .css`
-    /* https://m3.material.io/components/icon-buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
@@ -69,11 +93,14 @@ export default Button
       align-items: center;
       justify-content: center;
 
-      padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
+      min-block-size: 1em;
+      min-inline-size: 1em;
 
-      background-color: transparent;
+      padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
 
       font-size: 24px;
+
+      transition-property: background-color, box-shadow;
     }
 
     :host(:where([type="checkbox"])) {
@@ -84,8 +111,6 @@ export default Button
     :host(:where([filled])) {
       --mdw-ink: var(--mdw-color__on-primary);
       --mdw-bg: var(--mdw-color__primary);
-      --mdw-surface__shadow__resting: none;
-      --mdw-surface__shadow__raised: none;
     }
 
     /** Tonal | Tonal Checked */
@@ -97,6 +122,7 @@ export default Button
     /** Outlined | Outlined Unchecked */
     :host(:where([outlined])) {
       --mdw-ink: var(--mdw-color__on-surface-variant);
+      background-color: transparent;
     }
 
     /** Outlined | Outlined Unchecked */
@@ -105,79 +131,23 @@ export default Button
       --mdw-ink: var(--mdw-color__inverse-on-surface);
     }
 
-    #shape[toggle] {
-      background-color: transparent;
-    }
-
-    .colored[toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    .colored[selected] {
-      /* background-color: rgb(var(--mdw-bg)); */
-      color: rgb(var(--mdw-ink));
-    }
-
-    #shape[filled][toggle] {
-      background-color: rgb(var(--mdw-color__surface-container-highest));
-    }
-
-    .colored[filled][toggle] {
-      color: rgb(var(--mdw-bg));
-    }
-
-    #shape[filled="tonal"][toggle] {
-      /* Redundant */
-      /* background-color: rgb(var(--mdw-color__surface-container-highest)); */
-    }
-
-    .colored[filled="tonal"][toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    #shape[filled][selected] {
-      background-color: rgb(var(--mdw-bg));
-    }
-
-    .colored[filled][selected] {
-      color: rgb(var(--mdw-ink));
-    }
-
-    #shape[outlined] {
-      background-color: transparent;
-    }
-
-    .colored[outlined] {
-      color: inherit;
-    }
-
-    #shape[outlined][toggle] {
-      background-color: transparent;
-    }
-
-    .colored[outlined][toggle] {
-      color: rgb(var(--mdw-color__on-surface-variant));
-    }
-
-    #shape[outlined][selected] {
-      background-color: rgb(var(--mdw-bg));
-    }
-
-    .colored[outlined][selected] {
-      color: rgb(var(--mdw-ink));
-    }
+    #slot { display: none; }
 
     #icon {
+      pointer-events: none;
+
       font-size: inherit;
-      font-variation-settings: 'FILL' 1;
+
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      transition-property: color, inline-size, width;
     }
 
-    #icon[toggle] {
-      font-variation-settings: 'FILL' 0;
+    #state {
+      z-index:1;
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
+    #ripple-container {
+      z-index:2;
     }
 
     #outline[focused] {
@@ -185,26 +155,13 @@ export default Button
 
       color: inherit;
     }
-
-    #outline[selected] {
-      opacity: 0;
-    }
-
-    /** Disabled */
-    .colored[disabled] {
-      cursor: not-allowed;
-
-      color: rgba(var(--mdw-color__on-surface), 0.38);
+    
+    #outline[focused][toggle] {
+      color: rgb(var(--mdw-color__outline));
     }
 
-    #shape[disabled][filled],
-    #shape[disabled][outlined][selected] {
-      background-color: rgba(var(--mdw-color__on-surface), 0.12);
-    }
-
-    .colored[disabled][filled],
-    .colored[disabled][outlined][selected] {
-      color: rgba(var(--mdw-color__on-surface), 0.38);
+    #outline[selected]:not([disabled]) {
+      opacity: 0;
     }
 
   `