@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/ControlMixin.js

@@ -1,7 +1,9 @@
 /* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html */
 
 import { cloneAttributeCallback } from '../core/CustomElement.js';
+import { FIREFOX_VERSION, SAFARI_VERSION } from '../core/dom.js';
 
+import DelegatesFocusMixin from './DelegatesFocusMixin.js';
 import FormAssociatedMixin from './FormAssociatedMixin.js';
 
 /** @typedef {import('../core/CustomElement.js').default} CustomElement */
@@ -11,21 +13,33 @@ import FormAssociatedMixin from './FormAssociatedMixin.js';
 /** @typedef {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} HTMLControlElement */
 
 /**
+ * Adds form-control behavior and wiring to an internal control element.
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function ControlMixin(Base) {
   return Base
     .mixin(FormAssociatedMixin)
+    .mixin(DelegatesFocusMixin)
     .observe({
+      /** Optional aria-label applied to the internal control (string). */
       ariaLabel: 'string',
+      /** Internal cached slot text used as fallback label when aria-label is absent. */
+      _slotInnerText: 'string',
     })
     .set({
-      delegatesFocus: true,
       focusableOnDisabled: false,
       controlTagName: 'input',
       controlVoidElement: true,
+      _slotMutationObserver: null,
     })
     .methods({
+      /**
+       * Default behavior can be overridden
+       * @param {string} value
+       */
+      _onControlValue(value) {
+        this._value = value;
+      },
       onValueChangingContentAttribute() {
         const control = /** @type {HTMLControlElement} */ (this.refs.control);
 
@@ -36,7 +50,7 @@ export default function ControlMixin(Base) {
           control.setAttribute('value', ''); // Chrome needs to know to reset
         }
         // Changing control attribute may change the value (eg: min/max)
-        this._value = control.value;
+        this._onControlValue(control.value);
       },
       /** @type {HTMLElement['focus']} */
       focus(...options) {
@@ -44,20 +58,16 @@ export default function ControlMixin(Base) {
       },
       /** Redirect click requests to control itself */
       click() {
-        console.log('ControlMixin: Click');
+        if (this.disabledState) return;
         this.refs.control.click();
       },
     })
     .define({
       stateTargetElement() { return this.refs.control; },
-      form() { return this.elementInternals.form; },
-      validity() { return this.elementInternals.validity; },
-      validationMessage() { return this.elementInternals.validationMessage; },
-      willValidate() { return this.elementInternals.willValidate; },
-      labels() { return this.elementInternals.labels; },
     })
     .methods({
       checkValidity() {
+        if (!this.willValidate) return true;
         const control = /** @type {HTMLControlElement} */ (this.refs.control);
         const validityState = control.checkValidity();
         /** @type {Partial<ValidityState>} */
@@ -95,21 +105,30 @@ export default function ControlMixin(Base) {
           this.refs.control,
         );
       },
+    })
+    .observe({
+      _computedAriaLabel({ ariaLabel, _slotInnerText }) {
+        return ariaLabel?.trim() || _slotInnerText?.trim() || null;
+      },
+    })
+    .expressions({
+      _computedAriaLabelledby({ _computedAriaLabel }) {
+        return _computedAriaLabel ? null : 'slot';
+      },
+    })
 
+    .recompose(({ template, html, element }) => {
+      template.append(html`
+        <${element.controlTagName} id=control
+          aria-label={_computedAriaLabel}
+          aria-labelledby={_computedAriaLabelledby}
+          part=control
+          form-disabled={disabledState}
+          type={type}
+          >${element.controlVoidElement ? '' : `</${element.controlTagName}>`}
+      `);
     })
     .on({
-      // Wait until controlTagName is settled before templating
-      composed({ template, html }) {
-        template.append(html`
-          <${this.controlTagName} id=control 
-            aria-labelledby=${({ ariaLabel }) => (ariaLabel ? null : 'slot')}
-            part=control
-            aria-label={ariaLabel}
-            form-disabled={disabledState}
-            type={type}
-            >${this.controlVoidElement ? '' : `</${this.controlTagName}>`}
-        `);
-      },
       disabledStateChanged(oldValue, newValue) {
         const control = /** @type {HTMLControlElement} */ (this.refs.control);
         control.setAttribute('aria-disabled', `${newValue}`);
@@ -122,9 +141,17 @@ export default function ControlMixin(Base) {
           }
         }
       },
+      readOnlyChanged(oldValue, newValue) {
+        const control = /** @type {HTMLControlElement} */ (this.refs.control);
+        if (this.type === 'checkbox') {
+          control.setAttribute('aria-readonly', newValue ? 'true' : 'false');
+        } else {
+          control.removeAttribute('aria-readonly');
+        }
+      },
       constructed() {
         const control = /** @type {HTMLControlElement} */ (this.refs.control);
-        this._value = control.value;
+        this._onControlValue(control.value);
       },
       connected() {
         // Expose this element as focusable
@@ -141,11 +168,14 @@ export default function ControlMixin(Base) {
     })
     .childEvents({
       control: {
-        invalid() {
-          console.debug('ControlMixin: invalid', this);
+        click(e) {
+          if ((this.type === 'checkbox' && this.readOnly)
+           || (this.focusableOnDisabled && this.disabledState)) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+          }
         },
         input({ currentTarget }) {
-          console.debug('ControlMixin: input');
           const control = /** @type {HTMLControlElement} */ (currentTarget);
           if (this.validity.valid) {
             // Track internally
@@ -155,18 +185,37 @@ export default function ControlMixin(Base) {
             // Perform check in case user has validated
             this.checkValidity();
           }
-          this._value = control.value;
+          this._onControlValue(control.value);
         },
         change({ currentTarget }) {
-          console.debug('ControlMixin: change');
           const control = /** @type {HTMLControlElement} */ (currentTarget);
           this._valueDirty = true;
-          this._value = control.value;
+          this._onControlValue(control.value);
           this.checkValidity();
-          // Change event is NOT composed. Needs to escape shadow DOM
-          this.dispatchEvent(new Event('change', { bubbles: true }));
         },
       },
+      slot: (FIREFOX_VERSION < 116 || SAFARI_VERSION) ? {
+        slotchange({ currentTarget }) {
+          // Firefox and Safari will not apply label from slots.
+          // https://bugzilla.mozilla.org/show_bug.cgi?id=1826194
+          // https://commits.webkit.org/263644@main
+          // https://bugs.webkit.org/show_bug.cgi?id=260772
+          this._slotInnerText = this.textContent;
+          if (!this._slotMutationObserver) {
+            this._slotMutationObserver = new MutationObserver(() => {
+              this._slotInnerText = this.textContent;
+            });
+            this._slotMutationObserver.observe(currentTarget, { characterData: true });
+          }
+        },
+      } : {},
+    })
+    .rootEvents({
+      change(event) {
+        // Change event is NOT composed. Needs to escape shadow DOM
+        // @ts-ignore skip constructor cast
+        this.dispatchEvent(new event.constructor(event.type, event));
+      },
     })
     .css`
       :host {
@@ -206,15 +255,12 @@ export default function ControlMixin(Base) {
       
         cursor: auto;
         outline: none;
-      
-        pointer-events: auto;
-      
         transform: translateX(-50%) translateY(-50%);
       
         /* Safari and Chrome will emit two click events if not at top of stack */
         /* Allows up to 3 other layers (eg: ripple, outline) */
         z-index: 4;
-      
+
         background-color: transparent;
       
         border-radius: 0;

package/mixins/DelegatesFocusMixin.js

@@ -0,0 +1,62 @@
+import { CHROME_VERSION, isFocused } from '../core/dom.js';
+
+/**
+ * Enables focus delegation to an internal focus target and manages tabindex behavior.
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+/**
+ * Adds delegated focus behavior to the element's internals for keyboard navigation.
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function DelegatesFocusMixin(Base) {
+  return Base
+    .set({
+      /** When true, the element delegates focus to an internal focus target. */
+      delegatesFocus: true,
+    })
+    .extend(CHROME_VERSION >= 111
+      ? (BaseClass) => BaseClass
+      : (BaseClass) => class extends BaseClass {
+        get tabIndex() {
+          return super.tabIndex;
+        }
+
+        set tabIndex(value) {
+          if (value === super.tabIndex && value !== -1) {
+            // Non -1 value already set
+            return;
+          }
+
+          if (this.delegatesFocus && isFocused(this)) {
+            if (this.getAttribute('tabindex') === value.toString()) {
+              // Skip if possible
+              return;
+            }
+
+            // Chrome blurs on tabindex changes with delegatesFocus
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1346606
+            /** @type {EventListener} */
+            const listener = (e) => {
+              e.stopImmediatePropagation();
+              e.stopPropagation();
+              if (e.type === 'blur') {
+                console.warn('Chromium bug 1346606: Tabindex change caused blur. Giving focusing back.', this);
+                this.focus();
+              } else {
+                console.warn(`Chromium bug 1346606: Blocking ${e.type} event.`, this);
+              }
+            };
+            for (const type of ['blur', 'focus', 'focusout', 'focusin']) {
+              this.addEventListener(type, listener, { capture: true, once: true });
+            }
+            super.tabIndex = value;
+            for (const type of ['blur', 'focus', 'focusout', 'focusin']) {
+              this.removeEventListener(type, listener, { capture: true });
+            }
+            return;
+          }
+
+          super.tabIndex = value;
+        }
+      });
+}

package/mixins/DensityMixin.js

@@ -1,7 +1,11 @@
-/** @param {typeof import('../core/CustomElement.js').default} Base */
+/**
+ * Adds a `density` property to control component spacing and compactness.
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
 export default function DensityMixin(Base) {
   return Base
     .observe({
+      /** Density level affecting spacing and compactness. Integer from -4 (dense) to 4 (spacious). */
       density: 'integer',
     })
     .css`
@@ -14,11 +18,11 @@ export default function DensityMixin(Base) {
       
       :host([density="-1"]) { --mdw-density: -1; }
       :host([density="-2"]) { --mdw-density: -2; }
-      :host([density="-3"]) { --mdw-density: -2; }
+      :host([density="-3"]) { --mdw-density: -3; }
       :host([density="-4"]) { --mdw-density: -4; }
       :host([density="1"]) { --mdw-density: 1; }
       :host([density="2"]) { --mdw-density: 2; }
       :host([density="3"]) { --mdw-density: 3; }
-      :host([density="4"]) { --mdw-density: 3; }
+      :host([density="4"]) { --mdw-density: 4; }
     `;
 }

package/mixins/ElevationMixin.js

@@ -0,0 +1,61 @@
+/**
+ * Adds CSS properties for elevation via shadows or underlighting.
+ * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
+ */
+export default function ElevationMixin(Base) {
+  return Base
+    .css`:host {
+
+        /** Reference Properties */
+        /*
+        --mdw-surface__box-shadow__1__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__2__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__3__umbra: 0px 1px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__4__umbra: 0px 2px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__5__umbra: 0px 4px 4px 0px rgba(var(--mdw-color__shadow), 0.30);
+      
+        --mdw-surface__filter__0__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0));
+        --mdw-surface__filter__1__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__2__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__3__umbra: drop-shadow(0px 1px 1.5px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__4__umbra: drop-shadow(0px 2px 1.5px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__5__umbra: drop-shadow(0px 4px 2px rgba(var(--mdw-color__shadow), 0.30));
+      
+        --mdw-surface__box-shadow__1__penumbra: 0px 1px 3px 1px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__2__penumbra: 0px 2px 6px 2px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__3__penumbra: 0px 4px 8px 3px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__4__penumbra: 0px 6px 10px 4px rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__5__penumbra: 0px 8px 12px 6px rgba(var(--mdw-color__shadow), 0.15);
+      
+        --mdw-elevation__filter__0__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0));
+        --mdw-elevation__filter__1__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0.25));
+        --mdw-elevation__filter__2__penumbra: drop-shadow(0px 2px 5px rgba(var(--mdw-color__shadow), 0.25));
+        --mdw-elevation__filter__3__penumbra: drop-shadow(0px 4px 7px rgba(var(--mdw-color__shadow), 0.263));
+        --mdw-elevation__filter__4__penumbra: drop-shadow(0px 6px 9px rgba(var(--mdw-color__shadow), 0.27));
+        --mdw-elevation__filter__5__penumbra: drop-shadow(0px 8px 12px rgba(var(--mdw-color__shadow), 0.30));
+      
+        --mdw-elevation__filter__0: var(--mdw-surface__shadow__0__umbra) var(--mdw-surface__shadow__0__penumbra);
+        --mdw-elevation__filter__1: var(--mdw-surface__shadow__1__umbra) var(--mdw-surface__shadow__1__penumbra);
+        --mdw-elevation__filter__2: var(--mdw-surface__shadow__2__umbra) var(--mdw-surface__shadow__2__penumbra);
+        --mdw-elevation__filter__3: var(--mdw-surface__shadow__3__umbra) var(--mdw-surface__shadow__3__penumbra);
+        --mdw-elevation__filter__4: var(--mdw-surface__shadow__4__umbra) var(--mdw-surface__shadow__4__penumbra);
+        --mdw-elevation__filter__5: var(--mdw-surface__shadow__5__umbra) var(--mdw-surface__shadow__5__penumbra);
+        */
+
+      --mdw-elevation__rgb: var(--mdw-color__shadow);
+
+      --mdw-elevation__box-shadow__0: 0px 1px 1px 0px rgba(var(--mdw-elevation__rgb), 0.00), 0px 0px 1px 1px  rgba(var(--mdw-elevation__rgb), 0.00);
+      --mdw-elevation__box-shadow__1: 0px 1px 2px 0px rgba(var(--mdw-elevation__rgb), 0.30), 0px 1px 3px 1px  rgba(var(--mdw-elevation__rgb), 0.15);
+      --mdw-elevation__box-shadow__2: 0px 1px 2px 0px rgba(var(--mdw-elevation__rgb), 0.30), 0px 2px 6px 2px  rgba(var(--mdw-elevation__rgb), 0.15);
+      --mdw-elevation__box-shadow__3: 0px 1px 3px 0px rgba(var(--mdw-elevation__rgb), 0.30), 0px 4px 8px 3px  rgba(var(--mdw-elevation__rgb), 0.15);
+      --mdw-elevation__box-shadow__4: 0px 2px 3px 0px rgba(var(--mdw-elevation__rgb), 0.30), 0px 6px 10px 4px rgba(var(--mdw-elevation__rgb), 0.15);
+      --mdw-elevation__box-shadow__5: 0px 4px 4px 0px rgba(var(--mdw-elevation__rgb), 0.30), 0px 8px 12px 6px rgba(var(--mdw-elevation__rgb), 0.15);
+
+      --mdw-elevation__drop-shadow__0: drop-shadow(0px 1px 001px rgba(var(--mdw-elevation__rgb),000)) drop-shadow(0px 1px 2.5px rgba(var(--mdw-elevation__rgb),00000));
+      --mdw-elevation__drop-shadow__1: drop-shadow(0px 1px 001px rgba(var(--mdw-elevation__rgb),0.3)) drop-shadow(0px 1px 2.5px rgba(var(--mdw-elevation__rgb),0.250));
+      --mdw-elevation__drop-shadow__2: drop-shadow(0px 1px 001px rgba(var(--mdw-elevation__rgb),0.3)) drop-shadow(0px 2px 005px rgba(var(--mdw-elevation__rgb),0.250));
+      --mdw-elevation__drop-shadow__3: drop-shadow(0px 1px 1.5px rgba(var(--mdw-elevation__rgb),0.3)) drop-shadow(0px 4px 007px rgba(var(--mdw-elevation__rgb),0.263));
+      --mdw-elevation__drop-shadow__4: drop-shadow(0px 2px 1.5px rgba(var(--mdw-elevation__rgb),0.3)) drop-shadow(0px 6px 009px rgba(var(--mdw-elevation__rgb),0.270));
+      --mdw-elevation__drop-shadow__5: drop-shadow(0px 4px 2.0px rgba(var(--mdw-elevation__rgb),0.3)) drop-shadow(0px 8px 012px rgba(var(--mdw-elevation__rgb),0.300));
+    }`;
+}

package/mixins/FlexableMixin.js

@@ -1,109 +1,157 @@
 /**
+ * Layout helper mixin providing flexible box utilities (gap, padding, axis).
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function FlexableMixin(Base) {
   return Base
     .observe({
-      flex: {
-        type: 'string',
-        empty: 'row',
-        /** @type {'row'|'column'} */
-        value: 'row',
-      },
+      /** Set `display: block` on the host (boolean) */
+      block: 'boolean',
+      /** Use inline flex layout: `display: inline-flex` (boolean) */
+      inline: 'boolean',
+      /** Switch main axis to horizontal: `flex-direction: row` (boolean) */
+      row: 'boolean',
+      /**
+       * Main-axis alignment / justification.
+       * Allowed: 'start'|'center'|'end'|'between'|'around'|'stretch'|'baseline'.
+       * Default: 'start'.
+       */
       x: {
         type: 'string',
         empty: 'start',
-        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'} */
+        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'|'baseline'} */
         value: 'start',
       },
+      /**
+       * Cross-axis alignment / alignment of items.
+       * Same allowed values as `x`. Default: 'start'.
+       */
       y: {
         type: 'string',
         empty: 'start',
-        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'} */
+        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'|'baseline'} */
         value: 'start',
       },
+      /** Gap between children. Accepts preset numeric strings (e.g. '8') mapped to px, or floats. */
       gap: 'float',
-      padding: 'float',
+      /** Padding preset or numeric value (e.g. 'pane', '8', '16'). */
+      padding: 'string',
     })
     .css`
       /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
 
       :host{
+        display: flex;
+        flex-direction: column;
+
         box-sizing: border-box;
+
       }
 
-      :host([flex]) {
-        display:flex;
+      :host(:is([inline])) {
+        display: inline-flex;
       }
 
-      :host([flex="column"]) {
-        flex-direction: column;
+      :host(:is([block])) {
+        display: block;
+      }
+      
+      
+      :host(:is([inline][block])) {
+        display: inline-block;
+      }
+
+      :host(:is([row])) {
+        flex-direction: row;
       }
 
-      :host(:where([flex][y="start"], [flex="column"][x="start"])) {
+      :host(:is([row][y="start"], [x="start"]:not([row]))) {
         align-items: flex-start;
       }
 
-      :host(:where([flex][y="end"], [flex="column"][x="end"])) {
+      :host(:is([row][y="end"], [x="end"]:not([row]))) {
         align-items: flex-end;
       }
 
-      :host(:where([flex][y="center"], [flex="column"][x="center"])) {
+      :host(:is([row][y="center"], [x="center"]:not([row]))) {
         align-items: center;
       }
 
-      :host(:where([flex][y="between"], [flex="column"][x="between"])) {
+      :host(:is([row][y="between"], [x="between"]:not([row]))) {
         align-items: space-between;
       }
 
-      :host(:where([flex][y="around"], [flex="column"][x="around"])) {
+      :host(:is([row][y="around"], [x="around"]:not([row]))) {
         align-items: space-around;
       }
 
-      :host(:where([flex][y="stretch"], [flex="column"][x="stretch"])) {
+      :host(:is([row][y="baseline"], [x="baseline"]:not([row]))) {
+        align-items: baseline;
+      }
+
+      :host(:is([row][y="stretch"], [x="stretch"]:not([row]))) {
         align-items: stretch;
       }
 
-      :host(:where([flex][x="start"], [flex="column"][y="start"])) {
+      :host(:is([row][x="start"], [y="start"]:not([row]))) {
         justify-content: flex-start;
       }
 
-      :host(:where([flex][x="end"], [flex="column"][y="end"])) {
+      :host(:is([row][x="end"], [y="end"]:not([row]))) {
         justify-content: flex-end;
       }
 
-      :host(:where([flex][x="center"], [flex="column"][y="center"])) {
+      :host(:is([row][x="center"], [y="center"]:not([row]))) {
         justify-content: center;
       }
 
-      :host(:where([flex][x="between"], [flex="column"][y="between"])) {
+      :host(:is([row][x="between"], [y="between"]:not([row]))) {
         justify-content: space-between;
       }
 
-      :host(:where([flex][x="stretch"], [flex="column"][y="stretch"])) {
+      :host(:is([row][x="stretch"], [y="stretch"]:not([row]))) {
         justify-content: stretch;
       }
 
-      :host([wrap]) {
+      :host(:is([wrap])) {
         flex-wrap: wrap;
       }
 
-      :host([wrap="reverse"]) {
+      :host(:is([wrap="reverse"])) {
         flex-wrap: wrap-reverse;
       }
 
-      :host([gap="4"]) {gap: 4px;}
-      :host([gap="8"]) {gap: 8px;}
-      :host([gap="12"]) {gap: 12px;}
-      :host([gap="16"]) {gap: 16px;}
-      :host([gap="20"]) {gap: 20px;}
-      :host([gap="24"]) {gap: 24px;}
-
-      :host([padding="4"]) {padding: 4px;}
-      :host([padding="8"]) {padding: 8px;}
-      :host([padding="12"]) {padding: 12px;}
-      :host([padding="16"]) {padding: 16px;}
-      :host([padding="20"]) {padding: 20px;}
-      :host([padding="24"]) {padding: 24px;}
+      :host(:is([gap])) {gap: 0;}
+      :host(:is([gap="4"])) {gap: 4px;}
+      :host(:is([gap="8"])) {gap: 8px;}
+      :host(:is([gap="12"])) {gap: 12px;}
+      :host(:is([gap="16"])) {gap: 16px;}
+      :host(:is([gap="20"])) {gap: 20px;}
+      :host(:is([gap="24"])) {gap: 24px;}
+
+      :host(:is([padding])) {padding: 0;}
+      :host(:is([padding="pane"])) { padding-inline: var(--mdw-pane__padding-inline, 0) }
+      :host(:is([padding="4"])) {padding: 4px;}
+      :host(:is([padding="8"])) {padding: 8px;}
+      :host(:is([padding="12"])) {padding: 12px;}
+      :host(:is([padding="16"])) {padding: 16px;}
+      :host(:is([padding="20"])) {padding: 20px;}
+      :host(:is([padding="24"])) {padding: 24px;}
+      :host(:is([padding-x])) {padding-inline: 0;}
+      :host(:is([padding-x="4"])) {padding-inline: 4px;}
+      :host(:is([padding-x="8"])) {padding-inline: 8px;}
+      :host(:is([padding-x="12"])) {padding-inline: 12px;}
+      :host(:is([padding-x="16"])) {padding-inline: 16px;}
+      :host(:is([padding-x="20"])) {padding-inline: 20px;}
+      :host(:is([padding-x="24"])) {padding-inline: 24px;}
+      :host(:is([padding-y])) {padding-block: 0;}
+      :host(:is([padding-y="4"])) {padding-block: 4px;}
+      :host(:is([padding-y="8"])) {padding-block: 8px;}
+      :host(:is([padding-y="12"])) {padding-block: 12px;}
+      :host(:is([padding-y="16"])) {padding-block: 16px;}
+      :host(:is([padding-y="20"])) {padding-block: 20px;}
+      :host(:is([padding-y="24"])) {padding-block: 24px;}
+
+      
     `;
 }