@api-client/ui 0.2.8 → 0.2.10

package/build/src/lib/disabled.js

@@ -25,8 +25,8 @@ export function setDisabled(target, disabled) {
         target.removeAttribute('tabindex');
         target.setAttribute('aria-disabled', 'true');
     }
-    else {
-        target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0');
+    else if (state.tabindexBeforeDisabled) {
+        target.setAttribute('tabindex', state.tabindexBeforeDisabled);
         delete state.tabindexBeforeDisabled;
         target.removeAttribute('aria-disabled');
     }

package/build/src/lib/disabled.js.map

@@ -1 +1 @@
-{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../src/lib/disabled.ts"],"names":[],"mappings":"AAKA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA8B,CAAA;AAE1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAmB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,QAA6B;IAC5E,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;IACxC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACzB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QACrE,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAClC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,sBAAsB,IAAI,GAAG,CAAC,CAAA;QACpE,OAAO,KAAK,CAAC,sBAAsB,CAAA;QACnC,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,CAAC;IACD,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAC7B,CAAC","sourcesContent":["interface IDisabledInfo {\n  disabled?: boolean\n  tabindexBeforeDisabled?: string\n}\n\nconst elements = new WeakMap<HTMLElement, IDisabledInfo>()\n\n/**\n * A helper function to unify the way how the `disabled` state is read.\n * @param target The HTML element target.\n * @returns Whether the element is disabled\n */\nexport function isDisabled(target: HTMLElement): boolean {\n  const state = elements.get(target)\n  if (!state) {\n    return false\n  }\n  return !!state.disabled\n}\n\n/**\n * A helper function to unify the way how the `disabled` state is set.\n * Note, call `requestUpdate()` on the element to trigger the update.\n * @param target The HTML element target.\n * @param disabled Whether the element is to be set as disabled\n */\nexport function setDisabled(target: HTMLElement, disabled: boolean | undefined): void {\n  const state = elements.get(target) || {}\n  state.disabled = disabled\n  if (disabled) {\n    state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'\n    target.removeAttribute('tabindex')\n    target.setAttribute('aria-disabled', 'true')\n  } else {\n    target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0')\n    delete state.tabindexBeforeDisabled\n    target.removeAttribute('aria-disabled')\n  }\n  elements.set(target, state)\n}\n"]}
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../src/lib/disabled.ts"],"names":[],"mappings":"AAKA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA8B,CAAA;AAE1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAmB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,QAA6B;IAC5E,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;IACxC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IACzB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAA;QACrE,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAClC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC;SAAM,IAAI,KAAK,CAAC,sBAAsB,EAAE,CAAC;QACxC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAA;QAC7D,OAAO,KAAK,CAAC,sBAAsB,CAAA;QACnC,MAAM,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,CAAC;IACD,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAC7B,CAAC","sourcesContent":["interface IDisabledInfo {\n  disabled?: boolean\n  tabindexBeforeDisabled?: string\n}\n\nconst elements = new WeakMap<HTMLElement, IDisabledInfo>()\n\n/**\n * A helper function to unify the way how the `disabled` state is read.\n * @param target The HTML element target.\n * @returns Whether the element is disabled\n */\nexport function isDisabled(target: HTMLElement): boolean {\n  const state = elements.get(target)\n  if (!state) {\n    return false\n  }\n  return !!state.disabled\n}\n\n/**\n * A helper function to unify the way how the `disabled` state is set.\n * Note, call `requestUpdate()` on the element to trigger the update.\n * @param target The HTML element target.\n * @param disabled Whether the element is to be set as disabled\n */\nexport function setDisabled(target: HTMLElement, disabled: boolean | undefined): void {\n  const state = elements.get(target) || {}\n  state.disabled = disabled\n  if (disabled) {\n    state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'\n    target.removeAttribute('tabindex')\n    target.setAttribute('aria-disabled', 'true')\n  } else if (state.tabindexBeforeDisabled) {\n    target.setAttribute('tabindex', state.tabindexBeforeDisabled)\n    delete state.tabindexBeforeDisabled\n    target.removeAttribute('aria-disabled')\n  }\n  elements.set(target, state)\n}\n"]}

package/build/src/md/list/internals/ListItem.d.ts

@@ -41,6 +41,13 @@ export default class UiListItem extends UiElement {
      * @attribute
      */
     accessor image: ListItemImage;
+    /**
+     * Whether the list item is static and should not be focusable.
+     * The ripple effect will not be applied when `true`.
+     * @default false
+     * @attribute
+     */
+    accessor static: boolean;
     constructor();
     connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;

package/build/src/md/list/internals/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;;IAoB/D,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAKhD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAMlD,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAMhB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAInB;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,2BAA2B,CAAA;AAElC,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS;IAC3B,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;OAIG;IACwC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;IAExE;;;;;OAKG;IACyC,QAAQ,CAAC,MAAM,UAAQ;;IAoB1D,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYrC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnC,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAQ3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQhD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAS1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAWlD,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAO5B;;OAEG;IACH,QAAQ,IAAI,IAAI;IAShB;;OAEG;IACH,QAAQ,IAAI,OAAO;IAOnB;;OAEG;IACH,UAAU,IAAI,IAAI;IAOlB,SAAS,CAAC,gBAAgB,IAAI,IAAI;cAIf,MAAM,IAAI,cAAc;IAiB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,WAAW,IAAI,cAAc;IAMvC,SAAS,CAAC,SAAS,IAAI,cAAc;IAOrC,SAAS,CAAC,UAAU,IAAI,cAAc;CAUvC"}

package/build/src/md/list/internals/ListItem.js

@@ -34,6 +34,9 @@ let UiListItem = (() => {
     let _image_decorators;
     let _image_initializers = [];
     let _image_extraInitializers = [];
+    let _static_decorators;
+    let _static_initializers = [];
+    let _static_extraInitializers = [];
     return class UiListItem extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -41,10 +44,12 @@ let UiListItem = (() => {
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _lines_decorators = [property({ type: String, reflect: true })];
             _image_decorators = [property({ type: String, reflect: true })];
+            _static_decorators = [property({ type: Boolean, reflect: true })];
             __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _lines_decorators, { kind: "accessor", name: "lines", static: false, private: false, access: { has: obj => "lines" in obj, get: obj => obj.lines, set: (obj, value) => { obj.lines = value; } }, metadata: _metadata }, _lines_initializers, _lines_extraInitializers);
             __esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
+            __esDecorate(this, null, _static_decorators, { kind: "accessor", name: "static", static: false, private: false, access: { has: obj => "static" in obj, get: obj => obj.static, set: (obj, value) => { obj.static = value; } }, metadata: _metadata }, _static_initializers, _static_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
@@ -79,6 +84,15 @@ let UiListItem = (() => {
          */
         get image() { return this.#image_accessor_storage; }
         set image(value) { this.#image_accessor_storage = value; }
+        #static_accessor_storage = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _static_initializers, false));
+        /**
+         * Whether the list item is static and should not be focusable.
+         * The ripple effect will not be applied when `true`.
+         * @default false
+         * @attribute
+         */
+        get static() { return this.#static_accessor_storage; }
+        set static(value) { this.#static_accessor_storage = value; }
         constructor() {
             super();
             this.lines = ListItemLines.one;
@@ -106,45 +120,77 @@ let UiListItem = (() => {
             }
         }
         handleKeyDown(e) {
+            if (this.disabled || this.static) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
             if (e.key !== ' ' && e.key !== 'Enter')
                 return;
             e.preventDefault();
             this.beginPress({ positionEvent: e });
         }
         handleKeyUp(e) {
+            if (this.disabled || this.static) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
             if (e.key !== ' ' && e.key !== 'Enter')
                 return;
             e.preventDefault();
             this.endPress({ cancelled: false, actionData: { item: this } });
         }
         beginPress(options) {
+            if (this.disabled || this.static) {
+                return;
+            }
             super.beginPress(options);
             this.ripple.beginPress(options.positionEvent);
         }
         endPress(options) {
+            if (this.disabled || this.static) {
+                return;
+            }
             super.endPress(options);
             this.ripple.endPress();
         }
         handlePointerEnter(e) {
+            if (this.disabled || this.static) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
             this.ripple.beginHover(e);
         }
         handlePointerLeave(e) {
+            if (this.disabled || this.static) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
             super.handlePointerLeave(e);
             this.ripple.endHover();
         }
         handleFocus() {
+            if (this.disabled || this.static) {
+                return;
+            }
             this.ripple.beginFocus();
         }
         handleBlur() {
-            // if (this.matches(':focus-within')) {
-            //   return;
-            // }
+            if (this.disabled || this.static) {
+                return;
+            }
             this.ripple.endFocus();
         }
         /**
          * Focuses list item and makes list item focusable via keyboard.
          */
         activate() {
+            if (this.disabled || this.static) {
+                return;
+            }
             this.setAttribute('tabindex', '0');
             this.focus();
             this.ripple.beginFocus();
@@ -153,12 +199,18 @@ let UiListItem = (() => {
          * Returns true if list item is currently focused and is focusable.
          */
         isActive() {
+            if (this.disabled || this.static) {
+                return false;
+            }
             return this.getAttribute('tabindex') === '0';
         }
         /**
          * Removes list item from sequential keyboard navigation.
          */
         deactivate() {
+            if (this.disabled || this.static) {
+                return;
+            }
             this.removeAttribute('tabindex');
         }
         handleSlotChange() {
@@ -179,9 +231,9 @@ let UiListItem = (() => {
       </div>
     `;
         }
-        renderRipple = (__runInitializers(this, _image_extraInitializers), () => {
-            const { disabled } = this;
-            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        renderRipple = (__runInitializers(this, _static_extraInitializers), () => {
+            const { disabled, static: isStatic } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
         });
         renderStart() {
             return html `<div class="start">

package/build/src/md/list/internals/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n  constructor() {\n    super()\n\n    this.lines = ListItemLines.one\n    this.image = ListItemImage.icon\n\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('focus', this.handleFocus.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    e.preventDefault()\n    this.beginPress({ positionEvent: e })\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    e.preventDefault()\n    this.endPress({ cancelled: false, actionData: { item: this } })\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    super.endPress(options)\n    this.ripple.endPress()\n  }\n\n  protected handlePointerEnter(e: PointerEvent): void {\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n\n    this.ripple.endHover()\n  }\n\n  protected handleFocus(): void {\n    this.ripple.beginFocus()\n  }\n\n  protected handleBlur(): void {\n    // if (this.matches(':focus-within')) {\n    //   return;\n    // }\n    this.ripple.endFocus()\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    this.setAttribute('tabindex', '0')\n    this.focus()\n    this.ripple.beginFocus()\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    return this.getAttribute('tabindex') === '0'\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    this.removeAttribute('tabindex')\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    })\n\n    return html`\n      <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <div class=\"content\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n        ${this.renderRipple()}\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`\n  }\n\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"end\">\n      <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n    </div>`\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this\n    const hasSupportingText = lines !== ListItemLines.one\n    return html`\n      <div class=\"body\">\n        <span class=\"headline\"><slot></slot></span>\n        ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n}\n\nexport enum ListItemImage {\n  icon = 'icon',\n  avatar = 'avatar',\n  image = 'image',\n  video = 'video',\n  auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * The number of lines to render the list template for.\n   * @default ListItemLines.one\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n  /**\n   * The type of the list image.\n   * @default ListItemImage.icon\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n  /**\n   * Whether the list item is static and should not be focusable.\n   * The ripple effect will not be applied when `true`.\n   * @default false\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor static = false\n\n  constructor() {\n    super()\n\n    this.lines = ListItemLines.one\n    this.image = ListItemImage.icon\n\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('focus', this.handleFocus.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    e.preventDefault()\n    this.beginPress({ positionEvent: e })\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.key !== ' ' && e.key !== 'Enter') return\n\n    e.preventDefault()\n    this.endPress({ cancelled: false, actionData: { item: this } })\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    super.endPress(options)\n    this.ripple.endPress()\n  }\n\n  protected handlePointerEnter(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    if (this.disabled || this.static) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    super.handlePointerLeave(e)\n\n    this.ripple.endHover()\n  }\n\n  protected handleFocus(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.ripple.beginFocus()\n  }\n\n  protected handleBlur(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.ripple.endFocus()\n  }\n\n  /**\n   * Focuses list item and makes list item focusable via keyboard.\n   */\n  activate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.setAttribute('tabindex', '0')\n    this.focus()\n    this.ripple.beginFocus()\n  }\n\n  /**\n   * Returns true if list item is currently focused and is focusable.\n   */\n  isActive(): boolean {\n    if (this.disabled || this.static) {\n      return false\n    }\n    return this.getAttribute('tabindex') === '0'\n  }\n\n  /**\n   * Removes list item from sequential keyboard navigation.\n   */\n  deactivate(): void {\n    if (this.disabled || this.static) {\n      return\n    }\n    this.removeAttribute('tabindex')\n  }\n\n  protected handleSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    })\n\n    return html`\n      <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <div class=\"content\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n        ${this.renderRipple()}\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled, static: isStatic } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled || isStatic}\"></ui-ripple>`\n  }\n\n  protected renderStart(): TemplateResult {\n    return html`<div class=\"start\">\n      <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n    </div>`\n  }\n\n  protected renderEnd(): TemplateResult {\n    return html`<div class=\"end\">\n      <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n      <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n    </div>`\n  }\n\n  protected renderBody(): TemplateResult {\n    const { lines = ListItemLines.one } = this\n    const hasSupportingText = lines !== ListItemLines.one\n    return html`\n      <div class=\"body\">\n        <span class=\"headline\"><slot></slot></span>\n        ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/list/internals/ListItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAsLC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAuMC"}

package/build/src/md/list/internals/ListItem.styles.js

@@ -109,7 +109,16 @@ export default css `
   }
 
   :host([lines='three']) .supporting-text {
-    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
+    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
+  }
+
+  :host([lines='three']) .supporting-text ::slotted(*) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :host([lines='two']) .supporting-text ::slotted(*) {
@@ -181,5 +190,13 @@ export default css `
     inset: 0;
     z-index: 1;
   }
+
+  :host([static]:hover) .state {
+    background-color: var(--md-sys-color-on-surface);
+    opacity: var(--md-sys-state-hover-state-layer-opacity);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
 `;
 //# sourceMappingURL=ListItem.styles.js.map

package/build/src/md/list/internals/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    position: relative;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .surface,\n  .content {\n    width: 100%;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    /* background-color: var(--md-sys-color-surface); */\n  }\n\n  .content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .content {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}
+{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuMjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([lines='two']),\n  :host([lines='one'][image='image']) {\n    height: 72px;\n  }\n\n  :host([lines='three']),\n  :host([lines='one'][image='video']) {\n    height: 88px;\n  }\n\n  .surface {\n    height: inherit;\n    position: relative;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .surface,\n  .content {\n    width: 100%;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    /* background-color: var(--md-sys-color-surface); */\n  }\n\n  .content {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    padding: 8px 16px 8px 16px;\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  :host([image='video']) .content {\n    /* The spec says the right padding is 24px but counting from the checkbox check border.\n      This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n   */\n    padding: 12px 16px 12px 0px;\n  }\n\n  .headline {\n    color: var(--md-sys-color-on-surface);\n\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    /* this is to make up to the 24px right padding defined in the spec. */\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host([lines='three']) .supporting-text {\n    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n  }\n\n  :host([lines='three']) .supporting-text ::slotted(*) {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([lines='two']) .supporting-text ::slotted(*) {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .trailing-supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-small-font);\n    font-weight: var(--md-sys-typescale-body-small-weight);\n    font-size: var(--md-sys-typescale-body-small-size);\n    letter-spacing: var(--md-sys-typescale-body-small-tracking);\n    line-height: var(--md-sys-typescale-body-small-height);\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  :host(.highlight) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host(.select) .state {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  :host([static]:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n`\n"]}

package/demo/md/list/list.ts

@@ -157,6 +157,38 @@ class ComponentDemoPage extends DemoPage {
             ></ui-checkbox>
           </ui-list-item>
         </div>
+
+        <h2 class="title-large">Static (no interaction)</h2>
+
+        <div class="demo-row">
+          <ui-list-item static>Single list item</ui-list-item>
+          <ui-list-item static>
+            <span slot="start">${chatIcon}</span>
+            Single list item with an icon
+          </ui-list-item>
+          <ui-list-item image="avatar" static>
+            <span slot="start" class="avatar">PUP</span>
+            Pawel Uchida-Psztyc
+            <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
+          </ui-list-item>
+          <ui-list-item image="image" static>
+            <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
+            <p slot="end-text">100+</p>
+            Image element
+          </ui-list-item>
+
+          <ui-list-item image="video" static>
+            <span slot="start" class="video-image">
+              <img src="../chip/pawel6c9a.jpg" alt="video" />
+            </span>
+            Video image element
+            <ui-checkbox
+              slot="end"
+              @click="${EventUtils.cancelEvent}"
+              @pointerdown="${EventUtils.cancelEvent}"
+            ></ui-checkbox>
+          </ui-list-item>
+        </div>
       </section>
     `
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/lib/disabled.ts

@@ -31,8 +31,8 @@ export function setDisabled(target: HTMLElement, disabled: boolean | undefined):
     state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'
     target.removeAttribute('tabindex')
     target.setAttribute('aria-disabled', 'true')
-  } else {
-    target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0')
+  } else if (state.tabindexBeforeDisabled) {
+    target.setAttribute('tabindex', state.tabindexBeforeDisabled)
     delete state.tabindexBeforeDisabled
     target.removeAttribute('aria-disabled')
   }

package/src/md/list/internals/ListItem.styles.ts

@@ -110,7 +110,16 @@ export default css`
   }
 
   :host([lines='three']) .supporting-text {
-    height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
+    height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
+  }
+
+  :host([lines='three']) .supporting-text ::slotted(*) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :host([lines='two']) .supporting-text ::slotted(*) {
@@ -182,4 +191,12 @@ export default css`
     inset: 0;
     z-index: 1;
   }
+
+  :host([static]:hover) .state {
+    background-color: var(--md-sys-color-on-surface);
+    opacity: var(--md-sys-state-hover-state-layer-opacity);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
 `

package/src/md/list/internals/ListItem.ts

@@ -52,6 +52,14 @@ export default class UiListItem extends UiElement {
    */
   @property({ type: String, reflect: true }) accessor image: ListItemImage
 
+  /**
+   * Whether the list item is static and should not be focusable.
+   * The ripple effect will not be applied when `true`.
+   * @default false
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor static = false
+
   constructor() {
     super()
 
@@ -84,6 +92,11 @@ export default class UiListItem extends UiElement {
   }
 
   override handleKeyDown(e: KeyboardEvent): void {
+    if (this.disabled || this.static) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
     if (e.key !== ' ' && e.key !== 'Enter') return
 
     e.preventDefault()
@@ -91,6 +104,11 @@ export default class UiListItem extends UiElement {
   }
 
   override handleKeyUp(e: KeyboardEvent): void {
+    if (this.disabled || this.static) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
     if (e.key !== ' ' && e.key !== 'Enter') return
 
     e.preventDefault()
@@ -98,33 +116,52 @@ export default class UiListItem extends UiElement {
   }
 
   override beginPress(options: BeginPressConfig): void {
+    if (this.disabled || this.static) {
+      return
+    }
     super.beginPress(options)
     this.ripple.beginPress(options.positionEvent)
   }
 
   override endPress(options: EndPressConfig): void {
+    if (this.disabled || this.static) {
+      return
+    }
     super.endPress(options)
     this.ripple.endPress()
   }
 
   protected handlePointerEnter(e: PointerEvent): void {
+    if (this.disabled || this.static) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
     this.ripple.beginHover(e)
   }
 
   override handlePointerLeave(e: PointerEvent): void {
+    if (this.disabled || this.static) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
     super.handlePointerLeave(e)
 
     this.ripple.endHover()
   }
 
   protected handleFocus(): void {
+    if (this.disabled || this.static) {
+      return
+    }
     this.ripple.beginFocus()
   }
 
   protected handleBlur(): void {
-    // if (this.matches(':focus-within')) {
-    //   return;
-    // }
+    if (this.disabled || this.static) {
+      return
+    }
     this.ripple.endFocus()
   }
 
@@ -132,6 +169,9 @@ export default class UiListItem extends UiElement {
    * Focuses list item and makes list item focusable via keyboard.
    */
   activate(): void {
+    if (this.disabled || this.static) {
+      return
+    }
     this.setAttribute('tabindex', '0')
     this.focus()
     this.ripple.beginFocus()
@@ -141,6 +181,9 @@ export default class UiListItem extends UiElement {
    * Returns true if list item is currently focused and is focusable.
    */
   isActive(): boolean {
+    if (this.disabled || this.static) {
+      return false
+    }
     return this.getAttribute('tabindex') === '0'
   }
 
@@ -148,6 +191,9 @@ export default class UiListItem extends UiElement {
    * Removes list item from sequential keyboard navigation.
    */
   deactivate(): void {
+    if (this.disabled || this.static) {
+      return
+    }
     this.removeAttribute('tabindex')
   }
 
@@ -173,8 +219,8 @@ export default class UiListItem extends UiElement {
   }
 
   protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
+    const { disabled, static: isStatic } = this
+    return html`<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`
   }
 
   protected renderStart(): TemplateResult {