@shortfuse/materialdesignweb 0.9.0 → 0.9.2

package/mixins/InputMixin.js

@@ -29,6 +29,7 @@ const redispatchedClickEvents = new WeakSet();
 const rootClickEvents = new WeakSet();
 
 /**
+ * Enhances a component with input-like attributes and behaviors (value, step, min/max, etc.).
  * @see https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
@@ -36,26 +37,45 @@ export default function InputMixin(Base) {
   return Base
     .mixin(ControlMixin)
     .observe({
+      /** Accepted file types for file input (e.g. '.png,.jpg'). */
       accept: DOMString,
+      /** Alternate text for images (for `type='image'`). */
       alt: DOMString,
+      /** Directionality for form submission name (dirname attribute). */
       dirName: { attr: 'dirname', ...DOMString },
+      /** Form action URL when this input is used as a submit button. */
       _formAction: { attr: 'formaction' },
+      /** Form encoding type (formenctype). */
       formEnctype: { attr: 'formenctype', ...DOMString },
+      /** Form method when associated with a submit input (formmethod). */
       formMethod: { attr: 'formmethod', ...DOMString },
+      /** Target browsing context for form submission (formtarget). */
       formTarget: { attr: 'formtarget', ...DOMString },
+      /** Rendered height hint for certain input types (integer). */
       _height: { attr: 'height', type: 'integer' },
       _indeterminate: 'boolean',
+      /** Max value or token for the input. */
       max: DOMString,
+      /** Maximum length for text-like inputs. */
       maxLength: { attr: 'maxlength', type: 'integer', empty: -1 },
+      /** Min value or token for the input. */
       min: DOMString,
+      /** Minimum length for text-like inputs. */
       minLength: { attr: 'minlength', type: 'integer', empty: -1 },
+      /** When true, multiple values are allowed (e.g. file inputs). */
       multiple: 'boolean',
+      /** Pattern used for validation (RegExp as string). */
       pattern: DOMString,
+      /** Placeholder text shown when no value is present. */
       placeholder: DOMString,
+      /** Suggested control size (number of characters). */
       size: { type: 'integer', empty: 20 },
+      /** Source URL for image-type inputs. */
       src: DOMString,
+      /** Step interval for numeric inputs. */
       step: DOMString,
       //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+      /** Rendered width hint for certain input types (integer). */
       _width: { attr: 'width', type: 'integer' },
     })
     .set({
@@ -225,7 +245,9 @@ export default function InputMixin(Base) {
                 // Inner Native Button
                 return;
               }
+              // @ts-expect-error Verified in runtime
               if ((target instanceof HTMLElement && target.form instanceof HTMLFormElement
+                  // @ts-expect-error Verified in runtime
                   && (target.type === 'submit' || target.type === 'reset'))) {
                 // Inner FACE Button
                 return;

package/mixins/KeyboardNavMixin.js

@@ -12,14 +12,16 @@ const DEFAULT_ELEMENT_QUERY = [
 ].join(', ');
 
 /**
+ * Adds keyboard roving navigation utilities for focus management within a list.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function KeyboardNavMixin(Base) {
   return Base
     .mixin(AriaReflectorMixin)
     .observe({
-      /** Keyboard navigation attribute */
+      /** Enable keyboard roving navigation when present (set to 'true'). */
       kbdNav: { empty: 'true' },
+      /** Internal flag used to mark focusable children in the roving list. */
       _kbdFocusable: { empty: true },
 
     })

package/mixins/PopupMixin.js

@@ -7,10 +7,12 @@ import ResizeObserverMixin from './ResizeObserverMixin.js';
 
 const supportsHTMLDialogElement = typeof HTMLDialogElement !== 'undefined';
 
+/** @typedef {import('../utils/popup.js').DOMRectLike} DOMRectLike */
+
 /**
  * @typedef {Object} PopupStack
- * @prop {Element} element
- * @prop {Element} previousFocus
+ * @prop {InstanceType<ReturnType<typeof PopupMixin>>} element
+ * @prop {HTMLElement} previousFocus
  * @prop {boolean} [centered=false]
  * @prop {Record<string, any>} [state]
  * @prop {Record<string, any>} [previousState]
@@ -70,6 +72,7 @@ function onBeforeUnload(event) {
 }
 
 /**
+ * Provides positioning, modal behavior, and history-aware popup/dialog support.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function PopupMixin(Base) {
@@ -77,33 +80,59 @@ export default function PopupMixin(Base) {
     .mixin(DelegatesFocusMixin)
     .mixin(ResizeObserverMixin)
     .observe({
+      /** Whether the popup is currently open */
       open: 'boolean',
+      /** When true the popup behaves as a blocking modal */
       modal: 'boolean',
+      /** Use the native HTMLDialogElement when available */
       native: 'boolean',
+      /** Allow internal content to scroll when true */
       scrollable: 'boolean',
+      /** When true, match the popup width to the source element */
       matchSourceWidth: 'boolean',
+      /** Internal: current resolved flow used for positioning */
       _currentFlow: 'string',
       flow: {
         type: 'string',
         /** @type {'corner'|'adjacent'|'overflow'|'vcenter'|'hcenter'|'center'} */
         value: null,
       },
+      /** Margin between popup and viewport/anchor (px) */
       popupMargin: 'float',
     })
     .set({
+      /** Whether to push/pop history entries when opening the popup */
       useHistory: true,
+      /** Optional return value for dialog-like popups */
       returnValue: '',
+      /** Internal: true while closing is in-progress */
       _closing: false,
+      /** Internal: whether to show a scrim (overlay) for modal popups */
       _useScrim: false,
+      /**
+       * Source that triggered the popup
+       * @type {MouseEvent|PointerEvent|HTMLElement|Event}
+       */
+      _source: null,
+      /**
+       * Anchor used for positioning
+       * @type {MouseEvent|PointerEvent|HTMLElement|Event}
+       */
+      _anchor: null,
     })
     .define({
       _dialog() {
         return /** @type {HTMLDialogElement} */ (this.refs.dialog);
       },
     })
+    .expressions({
+      _ariaHidden({ open }) {
+        return (open ? 'false' : 'true');
+      },
+    })
     .methods({
       /**
-       * @param {DOMRect|Element} [anchor]
+       * @param {DOMRectLike|Element} [anchor]
        * @return {void}
        */
       updatePopupPosition(anchor = this._anchor) {
@@ -121,7 +150,7 @@ export default function PopupMixin(Base) {
         Object.assign(layoutElement.style, { width: 'auto', height: 'auto' });
 
         const width = (anchor && this.matchSourceWidth)
-          ? anchor.clientWidth
+          ? /** @type {Element} */ (anchor).clientWidth
           : 56 * Math.ceil(layoutElement.clientWidth / 56);
 
         layoutElement.style.setProperty('width', `${width}px`);
@@ -197,8 +226,7 @@ export default function PopupMixin(Base) {
          * - Open from center           9i             █·
          */
 
-        /** @type {import('../utils/popup.js').CanAnchorPopUpOptions[]} */
-        const preferences = [
+        const preferences = /** @type {import('../utils/popup.js').CanAnchorPopUpOptions[]} */ ([
           ((flow ?? 'corner') === 'corner') ? [
             { clientY: 'bottom', clientX: xStart },
             { clientY: 'bottom', clientX: xEnd },
@@ -228,7 +256,7 @@ export default function PopupMixin(Base) {
           ((flow ?? 'center') === 'center') ? [
             { clientY: 'center', clientX: 'center', directionX: 'center', directionY: 'center' },
           ] : [],
-        ].flat();
+        ].flat());
 
         let anchorResult;
         for (const preference of preferences) {
@@ -290,7 +318,9 @@ export default function PopupMixin(Base) {
           scrim.remove();
         }
 
-        const previousFocus = source instanceof HTMLElement ? source : document.activeElement;
+        const previousFocus = source instanceof HTMLElement
+          ? source
+          : /** @type {HTMLElement} */(document.activeElement);
 
         if (supportsHTMLDialogElement && focus // Calling show will force focus which is not intended for non-modals
           && !this._dialog.open) {
@@ -301,6 +331,7 @@ export default function PopupMixin(Base) {
 
         // Short first, then move
         // Native modals can fail update bounds on Chrome
+        // @ts-ignore `updatePopupPosition` has runtime check
         this.updatePopupPosition(source);
 
         let newState;
@@ -407,7 +438,8 @@ export default function PopupMixin(Base) {
           // Closing a native dialog will return focus automatically.
           this._dialog.close();
           if (!attemptFocus(previousFocus, { preventScroll: true })) {
-            document.activeElement?.blur?.();
+            const currentlyFocused = /** @type {SVGElement|HTMLElement} */ (document.activeElement);
+            currentlyFocused?.blur?.();
           }
         } else {
           this._dialog.returnValue = returnValue;
@@ -468,9 +500,6 @@ export default function PopupMixin(Base) {
         this.updatePopupPosition();
       },
     })
-    .expressions({
-      _ariaHidden({ open }) { return (open ? 'false' : 'true'); },
-    })
     .html`
       <mdw-scrim id=scrim tabindex=-1 aria-hidden=true></mdw-scrim>
       <dialog id=dialog aria-modal=true role=dialog

package/mixins/RTLObserverMixin.js

@@ -4,11 +4,13 @@ const registeredElements = new Set();
 let rtlObserver;
 
 /**
+ * Observes document `dir` changes and updates `pageIsRTL` on hosts.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function RTLObserverMixin(Base) {
   return Base
     .observe({
+      /** Whether the page/document direction is RTL; kept in sync */
       pageIsRTL: {
         type: 'boolean',
         value: document.documentElement.dir === 'rtl',

package/mixins/ResizeObserverMixin.js

@@ -6,11 +6,13 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 /**
+ * Attaches a shared ResizeObserver to the element and provides lifecycle helpers.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function ResizeObserverMixin(Base) {
   return Base
     .observe({
+      /** Enable or disable automatic ResizeObserver attachment (defaults true) */
       _resizeObserverEnabled: {
         type: 'boolean',
         value: true,

package/mixins/RippleMixin.js

@@ -3,14 +3,16 @@ import Ripple from '../components/Ripple.js';
 /** @typedef {import('../components/Ripple.js').default} Ripple */
 
 /**
+ * Provides visual ripple effects (pointer/press ripples) and helpers to add/remove them.
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function RippleMixin(Base) {
   return Base
     .set({
+      /** WeakRef to the last appended Ripple instance (used to release/hold) */
       /** @type {WeakRef<InstanceType<Ripple>>} */
       _lastRippleWeakRef: null,
-      /** Flag set if ripple was added this event loop. */
+      /** Flag set if ripple was added this event loop to avoid duplicate ripples */
       _rippleAdded: false,
     })
     .define({

package/mixins/ScrollListenerMixin.js

@@ -1,24 +1,34 @@
 const IDLE_TIMEOUT_MS = 500;
 
 /**
+ * Tracks scroll/resize positions and exposes scroll-related lifecycle helpers.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function ScrollListenerMixin(Base) {
   return Base
     .observe({
+      /** Current horizontal scroll position (px) */
       _scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
+      /** Current vertical scroll position (px) */
       _scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+      /** Timestamp of the last idle period (ms) */
       _scrollListenerLastIdle: { type: 'float', empty: 0 },
+      /** Timestamp of the last scroll event (ms) */
       _scrollListenerLastScroll: { type: 'float', empty: 0 },
+      /** Timestamp of the last resize event (ms) */
       _scrollListenerLastResize: { type: 'float', empty: 0 },
     })
     .set({
-      /** @type {WeakRef<EventTarget>} */
+      /** WeakRef to the current scroller (HTMLElement or window) */
+      /** @type {WeakRef<HTMLElement|Window>} */
       _scroller: null,
+      /** Listener bound to scroller 'scroll' events */
       /** @type {EventListener} */
       _scrollerScrollListener: null,
+      /** Listener bound to scroller 'resize' events */
       /** @type {EventListener} */
       _scrollerResizeListener: null,
+      /** Internal debounce timer id used for idle detection */
       _scrollDebounce: null,
     })
     .methods({
@@ -59,6 +69,7 @@ export default function ScrollListenerMixin(Base) {
           scroller = window;
         }
 
+        // @ts-expect-error Only HTMLElement or Window can scroll
         this._scroller = new WeakRef(scroller);
         this._scrollerScrollListener = this._scrollListenerOnScrollerScroll.bind(this);
         this._scrollerResizeListener = this._scrollListenerOnScrollerResize.bind(this);
@@ -82,6 +93,7 @@ export default function ScrollListenerMixin(Base) {
         if (scroller === window) {
           return document.documentElement.scrollHeight;
         }
+        // @ts-ignore Already checked for window
         return scroller.scrollHeight;
       },
       _scrollListenerScrollerClientHeight() {

package/mixins/SemiStickyMixin.js

@@ -10,12 +10,19 @@ export default function SemiStickyMixin(Base) {
   return Base
     .mixin(ScrollListenerMixin)
     .observe({
+      /** Measured full height of the element used for hiding calculations (px) */
       _semiStickyHeight: { type: 'float', empty: 0 },
+      /** Measured top offset used as reveal threshold (px) */
       _semiStickyOffsetY: { type: 'float', empty: 0 },
+      /** Current translateY applied to the element (px) */
       _semiStickyTranslateY: { type: 'float', empty: 0 },
+      /** Animation duration when transitioning translateY (ms) */
       _semiStickyDuration: { type: 'float', empty: 0 },
+      /** Animation easing function for transitions */
       _semiStickyEasing: { empty: 'ease-in' },
+      /** Whether measurements have been performed */
       _semiStickyMeasured: 'boolean',
+      /** When true, element remains always visible */
       stickyAlways: 'boolean',
       /** Stick to offsetParent instead of window */
       stickyParent: 'boolean',

package/mixins/ShapeMaskedMixin.js

@@ -1,11 +1,19 @@
-/** @param {typeof import('../core/CustomElement.js').default} Base */
+/**
+ * Provides shape masking utilities and logical shape attributes (shape-top/start/end/bottom).
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
 export default function ShapeMaskedMixin(Base) {
   return Base
     .observe({
+      /** Show top cut/shape on the element */
       shapeTop: 'boolean',
+      /** Show bottom cut/shape on the element */
       shapeBottom: 'boolean',
+      /** Show start-side cut/shape (logical start) */
       shapeStart: 'boolean',
+      /** Show end-side cut/shape (logical end) */
       shapeEnd: 'boolean',
+      /** Predefined shape size/style name (none|extra-small|small|medium|large|extra-large|full|inherit) */
       shapeStyle: 'string',
     })
     .css`

package/mixins/ShapeMixin.js

@@ -1,14 +1,21 @@
 /**
+ * Adds shape sizing and outline support for components (shape-style, shape-top, etc.).
  * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
  */
 export default function ShapeMixin(Base) {
   return Base
     .observe({
+      /** Show top cut/shape on the element */
       shapeTop: 'boolean',
+      /** Show bottom cut/shape on the element */
       shapeBottom: 'boolean',
+      /** Show start-side cut/shape (logical start) */
       shapeStart: 'boolean',
+      /** Show end-side cut/shape (logical end) */
       shapeEnd: 'boolean',
+      /** Predefined shape size/style name (none|extra-small|small|medium|large|extra-large|full|inherit) */
       shapeStyle: 'string',
+      /** When true, an outline is rendered around the element */
       outlined: 'boolean',
     })
     .html`
@@ -99,6 +106,8 @@ export default function ShapeMixin(Base) {
         position: absolute;
         inset: 0;
 
+        overflow: hidden;
+
         border-style: solid;
         border-width: 1px;
       

package/mixins/StateMixin.js

@@ -3,11 +3,14 @@
 let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matches;
 
 /**
+ * Manages interactive state flags (disabled, focused, hovered, pressed, touch)
+ * and derived state expressions used by components.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function StateMixin(Base) {
   return Base
     .observe({
+      /** Whether the element is disabled (affects interactive states) */
       disabled: 'boolean',
       /** Force focus state (independent of document) */
       focused: 'boolean',
@@ -27,6 +30,7 @@ export default function StateMixin(Base) {
       /** True if key was released this event loop. (Used to ignore clicks) */
       _keyReleased: 'boolean',
       _pointerPressed: 'boolean',
+      /** Show the visual state layer element when true */
       stateLayer: 'boolean',
     })
     .observe({

package/mixins/TextFieldMixin.js

@@ -5,6 +5,7 @@ import ShapeMixin from './ShapeMixin.js';
 /** @typedef {import('../core/CustomElement.js').default} CustomElement */
 
 /**
+ * Composes a text field with label, supporting text, icons and control wiring.
  * @param {ReturnType<import('./ControlMixin.js').default>} Base
  */
 export default function TextFieldMixin(Base) {
@@ -12,23 +13,38 @@ export default function TextFieldMixin(Base) {
     .mixin(DensityMixin)
     .mixin(ShapeMixin)
     .set({
+      /** Show an internal visual state layer element */
       stateLayer: true,
     })
     .observe({
+      /** Input type (text, password, email, etc.) */
       type: { empty: 'text' },
+      /** Leading icon key/name to render inside the field */
       icon: 'string',
+      /** Variation of the icon display (e.g., filled) */
       iconVariation: 'string',
+      /** Floating label text for the field */
       label: 'string',
+      /** When true, use filled styling */
       filled: 'boolean',
+      /** When true, use outlined styling */
       outlined: 'boolean',
+      /** Prefix text shown before the input */
       inputPrefix: 'string',
+      /** Suffix text shown after the input */
       inputSuffix: 'string',
+      /** Trailing icon key/name */
       trailingIcon: 'string',
+      /** Ink/color token for the trailing icon */
       trailingIconInk: 'string',
+      /** Accessible label for the trailing icon */
       trailingIconLabel: 'string',
+      /** Supporting/helper text shown beneath the field */
       supporting: 'string',
+      /** Error message text */
       error: 'string',
-      placeholder: { nullParser: String }, // DOMString
+      /** Placeholder text (DOMString) */
+      placeholder: { nullParser: String },
     })
     .observe({
       erroredState({ error, _invalid, _userInteracted }) { return _userInteracted && Boolean(error || _invalid); },
@@ -113,8 +129,11 @@ export default function TextFieldMixin(Base) {
       inline.prepend(control);
     })
     .on({
+      // @ts-ignore TODO: Missing observable size property
       sizeChanged(oldValue, newValue) {
-        this.refs.control.style.setProperty('--size', `${newValue}ch`);
+        // @ts-ignore TODO: Missing {this} context
+        const control = /** @type {HTMLElement} */ (this.refs.control);
+        control.style.setProperty('--size', `${newValue}ch`);
       },
     })
     .css`

package/mixins/ThemableMixin.js

@@ -39,13 +39,26 @@ const typeStyleAttributeCSS = TYPE_STYLES.map((typeStyle) => [
 ].join('')).join('');
 
 /**
+ * Adds theming attributes (`color`, `ink`, `typeStyle`) that map to CSS tokens.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function ThemableMixin(Base) {
   return Base
     .observe({
+      /**
+       * Palette or surface token used to select background/ink tokens.
+       * Examples: 'primary', 'background', 'surface-container-low'.
+       */
       color: 'string',
+      /**
+       * Explicit ink override token (e.g. 'outline', 'on-primary', 'inverse-on-surface', 'inherit').
+       * Maps to `--mdw-ink`.
+       */
       ink: 'string',
+      /**
+       * Typographic style shortcut that maps to type scale variables
+       * (e.g. 'headline-large', 'body-medium').
+       */
       typeStyle: 'string',
     })
     .css(colorAttributeCSS)

package/mixins/TooltipTriggerMixin.js

@@ -5,26 +5,37 @@ import { canAnchorPopup } from '../utils/popup.js';
 /** @typedef {import('../components/Tooltip.js').default} Tooltip */
 
 /**
+ * Adds tooltip scheduling, positioning, and show/hide behavior for host elements.
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function TooltipTriggerMixin(Base) {
   return Base
     .set({
+      /** Idle delay before showing tooltip for mouse (ms) */
       TOOLTIP_MOUSE_IDLE_MS: 500,
+      /** Idle delay before showing tooltip for touch (ms) */
       TOOLTIP_TOUCH_IDLE_MS: 1500,
+      /** Timer id used for tooltip show/hide debouncing */
       /** @type {any} */
       _idleDebounce: null,
+      /** Parents being observed for layout changes */
       /** @type {HTMLElement[]} */
       _watchedParents: null,
+      /** ResizeObserver used to track tooltip/anchor size changes */
       /** @type {ResizeObserver} */
       _resizeObserver: null,
+      /** IntersectionObserver used to detect occlusion */
       /** @type {IntersectionObserver} */
       _intersectObserver: null,
+      /** Bound scroll listener attached to parent elements */
       _parentScrollListener: null,
+      /** Slot id to use when cloning tooltip content */
       tooltipSlotId: 'slot',
     })
     .observe({
+      /** Text or content id used as tooltip content */
       tooltip: 'string',
+      /** When true, show tooltip automatically on hover/focus */
       autoTooltip: 'boolean',
     })
     .html`<mdw-tooltip id=tooltip></mdw-tooltip>`
@@ -41,7 +52,8 @@ export default function TooltipTriggerMixin(Base) {
       /** @param {'mouse'|'touch'|'keyboard'} type */
       scheduleHideTooltip(type) {
         this.cancelShowTooltip();
-        if (!this.refs.tooltip.open) {
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        if (!tooltip.open) {
         // console.log('abort schedule (shown)');
           return;
         }
@@ -64,7 +76,8 @@ export default function TooltipTriggerMixin(Base) {
 
       /** @param {'mouse'|'touch'|'keyboard'} type */
       scheduleShowTooltip(type) {
-        if (this.refs.tooltip.open) return;
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        if (tooltip.open) return;
         let timeout = 0;
         switch (type) {
           case 'mouse':
@@ -95,8 +108,9 @@ export default function TooltipTriggerMixin(Base) {
         this._intersectObserver.observe(this);
         this._intersectObserver.observe(tooltip);
         /** @type {HTMLElement} */
+        // eslint-disable-next-line unicorn/no-this-assignment, @typescript-eslint/no-this-alias
         let offsetParent = this;
-        while ((offsetParent = offsetParent.offsetParent)) {
+        while ((offsetParent = /** @type {?HTMLElement} */ (offsetParent.offsetParent))) {
           this._resizeObserver.observe(offsetParent, { box: 'border-box' });
           // console.log('observing', offsetParent);
           this._watchedParents.push(offsetParent);

package/mixins/TouchTargetMixin.js

@@ -1,4 +1,7 @@
-/** @param {typeof import('../core/CustomElement.js').default} Base */
+/**
+ * Provides a visually hidden touch target area to meet touch size recommendations.
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
 export default function TouchTargetMixin(Base) {
   return Base
     .html`<div id=touch-target class=touch-target></div>`

package/mixins/TypographyMixin.js

@@ -12,14 +12,21 @@ function parseSize(input) {
   return `calc(${input.replace('sp', '')} * 0.0625rem)`;
 }
 
-/** @param {typeof import('../core/CustomElement.js').default} Base */
+/**
+ * Provides typographic padding and leading helpers for text content.
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
 export default function TypographyMixin(Base) {
   return Base
     .mixin(DelegatesFocusMixin)
     .observe({
+      /** General vertical padding for text content (css length) */
       textPadding: 'string',
+      /** Padding-top override for text content (css length) */
       textPaddingTop: 'string',
+      /** Line-leading (extra top spacing) for text (css length or 'sp' units) */
       textLeading: 'string',
+      /** Padding-bottom override for text content (css length) */
       textPaddingBottom: 'string',
     })
     .observe({