@api-client/ui 0.2.8 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/build/src/lib/disabled.js +2 -2
  2. package/build/src/lib/disabled.js.map +1 -1
  3. package/build/src/md/list/internals/ListItem.d.ts +7 -0
  4. package/build/src/md/list/internals/ListItem.d.ts.map +1 -1
  5. package/build/src/md/list/internals/ListItem.js +17 -3
  6. package/build/src/md/list/internals/ListItem.js.map +1 -1
  7. package/build/src/md/list/internals/ListItem.styles.d.ts.map +1 -1
  8. package/build/src/md/list/internals/ListItem.styles.js +18 -1
  9. package/build/src/md/list/internals/ListItem.styles.js.map +1 -1
  10. package/demo/md/list/list.ts +32 -0
  11. package/package.json +1 -1
  12. package/src/lib/disabled.ts +2 -2
  13. package/src/md/list/internals/ListItem.styles.ts +18 -1
  14. package/src/md/list/internals/ListItem.ts +10 -2
package/build/src/lib/disabled.js CHANGED
@@ -25,8 +25,8 @@ export function setDisabled(target, disabled) {
25
25
  target.removeAttribute('tabindex');
26
26
  target.setAttribute('aria-disabled', 'true');
27
27
  }
28
- else {
29
- target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0');
28
+ else if (state.tabindexBeforeDisabled) {
29
+ target.setAttribute('tabindex', state.tabindexBeforeDisabled);
30
30
  delete state.tabindexBeforeDisabled;
31
31
  target.removeAttribute('aria-disabled');
32
32
  }
package/build/src/lib/disabled.js.map CHANGED
@@ -1 +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"]}
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,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 CHANGED
@@ -41,6 +41,13 @@ export default class UiListItem extends UiElement {
41
41
  * @attribute
42
42
  */
43
43
  accessor image: ListItemImage;
44
+ /**
45
+ * Whether the list item is static and should not be focusable.
46
+ * The ripple effect will not be applied when `true`.
47
+ * @default false
48
+ * @attribute
49
+ */
50
+ accessor static: boolean;
44
51
  constructor();
45
52
  connectedCallback(): void;
46
53
  protected willUpdate(cp: PropertyValues<this>): void;
package/build/src/md/list/internals/ListItem.d.ts.map CHANGED
@@ -1 +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"}
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;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;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"}
package/build/src/md/list/internals/ListItem.js CHANGED
@@ -34,6 +34,9 @@ let UiListItem = (() => {
34
34
  let _image_decorators;
35
35
  let _image_initializers = [];
36
36
  let _image_extraInitializers = [];
37
+ let _static_decorators;
38
+ let _static_initializers = [];
39
+ let _static_extraInitializers = [];
37
40
  return class UiListItem extends _classSuper {
38
41
  static {
39
42
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -41,10 +44,12 @@ let UiListItem = (() => {
41
44
  _disabled_decorators = [property({ type: Boolean, reflect: true })];
42
45
  _lines_decorators = [property({ type: String, reflect: true })];
43
46
  _image_decorators = [property({ type: String, reflect: true })];
47
+ _static_decorators = [property({ type: Boolean, reflect: true })];
44
48
  __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);
45
49
  __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);
46
50
  __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);
47
51
  __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);
52
+ __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);
48
53
  if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
49
54
  }
50
55
  #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
@@ -79,6 +84,15 @@ let UiListItem = (() => {
79
84
  */
80
85
  get image() { return this.#image_accessor_storage; }
81
86
  set image(value) { this.#image_accessor_storage = value; }
87
+ #static_accessor_storage = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _static_initializers, false));
88
+ /**
89
+ * Whether the list item is static and should not be focusable.
90
+ * The ripple effect will not be applied when `true`.
91
+ * @default false
92
+ * @attribute
93
+ */
94
+ get static() { return this.#static_accessor_storage; }
95
+ set static(value) { this.#static_accessor_storage = value; }
82
96
  constructor() {
83
97
  super();
84
98
  this.lines = ListItemLines.one;
@@ -179,9 +193,9 @@ let UiListItem = (() => {
179
193
  </div>
180
194
  `;
181
195
  }
182
- renderRipple = (__runInitializers(this, _image_extraInitializers), () => {
183
- const { disabled } = this;
184
- return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
196
+ renderRipple = (__runInitializers(this, _static_extraInitializers), () => {
197
+ const { disabled, static: isStatic } = this;
198
+ return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
185
199
  });
186
200
  renderStart() {
187
201
  return html `<div class="start">
package/build/src/md/list/internals/ListItem.js.map CHANGED
@@ -1 +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"]}
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 /**\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 (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, 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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBAsLC"}
1
+ {"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 CHANGED
@@ -109,7 +109,16 @@ export default css `
109
109
  }
110
110
 
111
111
  :host([lines='three']) .supporting-text {
112
- height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
112
+ height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
113
+ }
114
+
115
+ :host([lines='three']) .supporting-text ::slotted(*) {
116
+ display: -webkit-box;
117
+ -webkit-box-orient: vertical;
118
+ -webkit-line-clamp: 2;
119
+ line-clamp: 2;
120
+ overflow: hidden;
121
+ text-overflow: ellipsis;
113
122
  }
114
123
 
115
124
  :host([lines='two']) .supporting-text ::slotted(*) {
@@ -181,5 +190,13 @@ export default css `
181
190
  inset: 0;
182
191
  z-index: 1;
183
192
  }
193
+
194
+ :host([static]:hover) .state {
195
+ background-color: var(--md-sys-color-on-surface);
196
+ opacity: var(--md-sys-state-hover-state-layer-opacity);
197
+ position: absolute;
198
+ inset: 0;
199
+ z-index: 1;
200
+ }
184
201
  `;
185
202
  //# sourceMappingURL=ListItem.styles.js.map
package/build/src/md/list/internals/ListItem.styles.js.map CHANGED
@@ -1 +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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED
@@ -157,6 +157,38 @@ class ComponentDemoPage extends DemoPage {
157
157
  ></ui-checkbox>
158
158
  </ui-list-item>
159
159
  </div>
160
+
161
+ <h2 class="title-large">Static (no interaction)</h2>
162
+
163
+ <div class="demo-row">
164
+ <ui-list-item static>Single list item</ui-list-item>
165
+ <ui-list-item static>
166
+ <span slot="start">${chatIcon}</span>
167
+ Single list item with an icon
168
+ </ui-list-item>
169
+ <ui-list-item image="avatar" static>
170
+ <span slot="start" class="avatar">PUP</span>
171
+ Pawel Uchida-Psztyc
172
+ <ui-checkbox slot="end" @pointerdown="${EventUtils.cancelEvent}"></ui-checkbox>
173
+ </ui-list-item>
174
+ <ui-list-item image="image" static>
175
+ <img src="../chip/pawel6c9a.jpg" alt="Avatar" slot="start" />
176
+ <p slot="end-text">100+</p>
177
+ Image element
178
+ </ui-list-item>
179
+
180
+ <ui-list-item image="video" static>
181
+ <span slot="start" class="video-image">
182
+ <img src="../chip/pawel6c9a.jpg" alt="video" />
183
+ </span>
184
+ Video image element
185
+ <ui-checkbox
186
+ slot="end"
187
+ @click="${EventUtils.cancelEvent}"
188
+ @pointerdown="${EventUtils.cancelEvent}"
189
+ ></ui-checkbox>
190
+ </ui-list-item>
191
+ </div>
160
192
  </section>
161
193
  `
162
194
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.2.8",
3
+ "version": "0.2.9",
4
4
  "description": "Internal UI component library for the API Client ecosystem.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "build/src/index.js",
package/src/lib/disabled.ts CHANGED
@@ -31,8 +31,8 @@ export function setDisabled(target: HTMLElement, disabled: boolean | undefined):
31
31
  state.tabindexBeforeDisabled = target.getAttribute('tabindex') || '0'
32
32
  target.removeAttribute('tabindex')
33
33
  target.setAttribute('aria-disabled', 'true')
34
- } else {
35
- target.setAttribute('tabindex', state.tabindexBeforeDisabled || '0')
34
+ } else if (state.tabindexBeforeDisabled) {
35
+ target.setAttribute('tabindex', state.tabindexBeforeDisabled)
36
36
  delete state.tabindexBeforeDisabled
37
37
  target.removeAttribute('aria-disabled')
38
38
  }
package/src/md/list/internals/ListItem.styles.ts CHANGED
@@ -110,7 +110,16 @@ export default css`
110
110
  }
111
111
 
112
112
  :host([lines='three']) .supporting-text {
113
- height: calc(2em * var(--md-sys-typescale-body-medium-height, 1.1));
113
+ height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));
114
+ }
115
+
116
+ :host([lines='three']) .supporting-text ::slotted(*) {
117
+ display: -webkit-box;
118
+ -webkit-box-orient: vertical;
119
+ -webkit-line-clamp: 2;
120
+ line-clamp: 2;
121
+ overflow: hidden;
122
+ text-overflow: ellipsis;
114
123
  }
115
124
 
116
125
  :host([lines='two']) .supporting-text ::slotted(*) {
@@ -182,4 +191,12 @@ export default css`
182
191
  inset: 0;
183
192
  z-index: 1;
184
193
  }
194
+
195
+ :host([static]:hover) .state {
196
+ background-color: var(--md-sys-color-on-surface);
197
+ opacity: var(--md-sys-state-hover-state-layer-opacity);
198
+ position: absolute;
199
+ inset: 0;
200
+ z-index: 1;
201
+ }
185
202
  `
package/src/md/list/internals/ListItem.ts CHANGED
@@ -52,6 +52,14 @@ export default class UiListItem extends UiElement {
52
52
  */
53
53
  @property({ type: String, reflect: true }) accessor image: ListItemImage
54
54
 
55
+ /**
56
+ * Whether the list item is static and should not be focusable.
57
+ * The ripple effect will not be applied when `true`.
58
+ * @default false
59
+ * @attribute
60
+ */
61
+ @property({ type: Boolean, reflect: true }) accessor static = false
62
+
55
63
  constructor() {
56
64
  super()
57
65
 
@@ -173,8 +181,8 @@ export default class UiListItem extends UiElement {
173
181
  }
174
182
 
175
183
  protected renderRipple = (): TemplateResult => {
176
- const { disabled } = this
177
- return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
184
+ const { disabled, static: isStatic } = this
185
+ return html`<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`
178
186
  }
179
187
 
180
188
  protected renderStart(): TemplateResult {