@api-client/ui 0.2.2 → 0.2.4

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

@@ -19,9 +19,15 @@ export interface UiListSelection {
   index: number
 }
 
+export interface UiListItemsChange {
+  items: UiListItem[]
+}
+
 /**
  * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item.
  *                 The `event.detail` object contains the `item` and `index` properties.
+ * @fires itemschange - Dispatched when the list items change, e.g. when the slot changes.
+ *                The `event.detail` object contains the `items` property with the list of items.
  */
 export default class UiList extends LitElement {
   /**
@@ -102,6 +108,9 @@ export default class UiList extends LitElement {
     if (this.highlightListItem && !items.includes(this.highlightListItem)) {
       this.highlightListItem = null
     }
+    this.dispatchEvent(
+      new CustomEvent<UiListItemsChange>('itemschange', { bubbles: false, composed: false, detail: { items } })
+    )
   }
 
   /**
@@ -195,7 +204,10 @@ export default class UiList extends LitElement {
     item.deactivate()
   }
 
-  protected activateListItem(item: UiListItem): void {
+  protected activateListItem(item?: UiListItem | null): void {
+    if (!item) {
+      return
+    }
     this.removeAttribute('tabindex')
     item.activate()
     item.scrollIntoView({ block: 'end', inline: 'nearest' })
@@ -299,7 +311,7 @@ export default class UiList extends LitElement {
     this.activateFromEvent(event)
   }
 
-  protected highlightItem(item?: UiListItem): void {
+  protected highlightItem(item?: UiListItem | null): void {
     if (this.highlightListItem) {
       this.highlightListItem.classList.remove('highlight')
     }

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

@@ -8,6 +8,14 @@ export default css`
     cursor: default;
   }
 
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
   :host([lines='two']),
   :host([lines='one'][image='image']) {
     height: 72px;

package/src/md/listbox/internals/Listbox.ts

@@ -55,13 +55,13 @@ export default class UiListbox extends UiList {
     this.setAttribute('aria-activedescendant', item.id)
   }
 
-  protected override highlightItem(item?: UiListItem): void {
+  override highlightItem(item?: UiListItem | null): void {
     this.beforeActivation()
     super.highlightItem(item)
     this.afterActivation(this.highlightListItem)
   }
 
-  protected override activateListItem(item: UiListItem): void {
+  override activateListItem(item: UiListItem | null): void {
     this.beforeActivation()
     super.activateListItem(item)
     this.afterActivation(this.activeListItem)

package/src/md/text-area/internals/TextAreaElement.ts

@@ -36,9 +36,7 @@ export default class TextAreaElement extends Input {
     const placeholderValue = this.placeholder || undefined
     const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined
     const minLengthValue = this.minLength > -1 ? this.minLength : undefined
-    const patternValue = this.pattern || undefined
     const roleValue = this.dataRole || undefined
-    const stepValue = this.step || undefined
     const { disabled } = this
 
     const style: StyleInfo = {}
@@ -62,16 +60,13 @@ export default class TextAreaElement extends Input {
         .value=${live(this.getInputValue())}
         maxlength=${ifDefined(maxLengthValue)}
         minlength=${ifDefined(minLengthValue)}
-        pattern=${ifDefined(patternValue)}
         placeholder=${ifDefined(placeholderValue)}
         role=${ifDefined(roleValue as 'textbox')}
         ?disabled=${disabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
-        step=${ifDefined(stepValue as unknown as number)}
         autocomplete="${ifDefined(this.autocomplete)}"
         autocapitalize="${ifDefined(this.autocapitalize)}"
-        autocorrect="${ifDefined(this.autocorrect)}"
         inputmode="${ifDefined(this.inputMode)}"
         cols="${ifDefined(this.cols)}"
         rows="${ifDefined(this.rows)}"

package/src/md/text-area/ui-text-area.ts

@@ -1,11 +1,12 @@
 import type { CSSResultOrNative } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/TextAreaElement.js'
-import styles from '../text-field/internals/TextField.styles.js'
+import styles from '../text-field/internals/filled.styles.js'
+import common from '../text-field/internals/common.styles.js'
 
 @customElement('ui-text-area')
 export class UiTextAreaElement extends Element {
-  static override styles: CSSResultOrNative[] = [styles]
+  static override styles: CSSResultOrNative[] = [common, styles]
 }
 
 declare global {

package/src/md/text-field/internals/{TextFieldElement.ts → TextField.ts}

@@ -4,7 +4,7 @@ import { live } from 'lit/directives/live.js'
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js'
 import Input from '../../input/Input.js'
 
-export default class TextFieldElement extends Input {
+export default class TextField extends Input {
   protected override renderInput(): TemplateResult {
     const placeholderValue = this.placeholder || undefined
     const maxValue = this.max || undefined
@@ -49,10 +49,8 @@ export default class TextFieldElement extends Input {
         step=${ifDefined(stepValue as unknown as number)}
         autocomplete="${ifDefined(this.autocomplete)}"
         autocapitalize="${ifDefined(this.autocapitalize)}"
-        autocorrect="${ifDefined(this.autocorrect)}"
         inputmode="${ifDefined(this.inputMode)}"
         size="${ifDefined(this.size)}"
-        results="${ifDefined(this.results)}"
         accept="${ifDefined(this.accept)}"
         ?multiple="${this.multiple}"
         spellcheck="${ifDefined(this.spellcheck)}"
@@ -61,7 +59,6 @@ export default class TextFieldElement extends Input {
         @input=${this.handleInput}
         @select=${this.retargetEvent}
         @invalid=${this.invalidHandler}
-        @search="${this.retargetEvent}"
         aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}
         aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}
         aria-controls=${ifDefined(ariaControlsValue)}

package/src/md/text-field/internals/{TextField.styles.ts → common.styles.ts}

@@ -9,11 +9,6 @@ export default css`
     -webkit-tap-highlight-color: transparent;
     cursor: text;
 
-    --_active-indicator-color: var(--md-sys-color-on-surface-variant);
-    --_active-indicator-height: 1px;
-    --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);
-    --_focus-active-indicator-height: 2px;
-
     min-width: 200px;
   }
 
@@ -22,7 +17,6 @@ export default css`
     position: relative;
     display: flex;
     align-items: center;
-    border-radius: var(--md-sys-shape-corner-extra-small-top);
     cursor: inherit;
   }
 
@@ -30,7 +24,6 @@ export default css`
     position: absolute;
     inset: 0;
     z-index: 1;
-    background-color: var(--md-sys-color-surface-variant);
     border-radius: inherit;
   }
 
@@ -48,8 +41,6 @@ export default css`
 
   .body {
     flex: 1;
-    overflow: hidden;
-    padding-top: 1em;
     box-sizing: border-box;
     position: relative;
     cursor: inherit;
@@ -57,6 +48,7 @@ export default css`
 
   .label {
     color: var(--md-sys-color-on-surface-variant);
+
     max-width: 100%;
     pointer-events: none;
     overflow: hidden;
@@ -64,25 +56,14 @@ export default css`
     white-space: nowrap;
     z-index: 3;
 
-    position: absolute;
-    transform: translateY(-1.35rem) scale(0.8);
-    transform-origin: left center;
-    top: 50%;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
     font-family: var(--md-sys-typescale-body-large-font);
     font-weight: var(--md-sys-typescale-body-large-weight);
     font-size: var(--md-sys-typescale-body-large-size);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     line-height: var(--md-sys-typescale-body-large-height);
-  }
-
-  .labelResting .label {
-    transform: translateY(-50%) scale(1);
-  }
 
-  :host(:focus-within) .label {
-    color: var(--md-sys-color-primary);
+    transform-origin: left center;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .input {
@@ -151,51 +132,6 @@ export default css`
     cursor: default;
   }
 
-  .highlight {
-    inset: auto 0px 0px;
-    pointer-events: none;
-    position: absolute;
-    width: 100%;
-    z-index: 4;
-  }
-
-  .highlight::before {
-    content: '';
-    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
-    inset: auto 0px 0px;
-    position: absolute;
-  }
-
-  .highlight::after {
-    content: '';
-    border-bottom-color: var(--md-sys-color-primary);
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: center center;
-
-    transition:
-      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
-      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
-
-    position: absolute;
-    inset: auto 0px 0px;
-  }
-
-  :host(:focus-within) .highlight::after {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-
-  .labelHidden .label {
-    display: none;
-  }
-
-  .labelHidden .body {
-    padding-top: 0;
-  }
-
   .supporting-text {
     padding-top: 4px;
     color: var(--md-sys-color-on-surface-variant);
@@ -217,19 +153,6 @@ export default css`
     margin-right: 16px;
   }
 
-  .container::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    background-color: var(--md-sys-color-on-surface-variant);
-    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  :host(:hover) .container::before {
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
   :host([disabled]) {
     pointer-events: none;
   }
@@ -239,11 +162,6 @@ export default css`
     opacity: 0.04;
   }
 
-  :host([disabled]) .highlight::before {
-    border-bottom-color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
   :host([disabled]) .label,
   :host([disabled]) .input,
   :host([disabled]) .end ::slotted(*),
@@ -252,22 +170,18 @@ export default css`
     opacity: 0.38;
   }
 
-  :host([invalid]) .highlight::before {
-    border-bottom-color: var(--md-sys-color-error);
-  }
-
   :host([invalid]) .label,
   :host([invalid]) .supporting-text,
   :host([invalid]) .end ::slotted(*) {
     color: var(--md-sys-color-error);
   }
 
-  :host([invalid]:hover) .highlight::before {
-    border-bottom-color: var(--md-sys-color-on-error-container);
-  }
-
   :host([invalid]:hover) .label,
   :host([invalid]:hover) .end ::slotted(*) {
     color: var(--md-sys-color-on-error-container);
   }
+
+  .labelHidden .label {
+    display: none;
+  }
 `

package/src/md/text-field/internals/filled.styles.ts

@@ -0,0 +1,107 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --_active-indicator-color: var(--md-sys-color-on-surface-variant);
+    --_active-indicator-height: 1px;
+    --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);
+    --_focus-active-indicator-height: 2px;
+  }
+
+  .surface {
+    height: 56px;
+  }
+
+  .container {
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  .body {
+    overflow: hidden;
+  }
+
+  .label {
+    position: absolute;
+    transform: translateY(-1.35rem) scale(0.8);
+    top: 50%;
+  }
+
+  .labelResting .label {
+    transform: translateY(-50%) scale(1);
+  }
+
+  :host(:focus-within) .label {
+    color: var(--md-sys-color-primary);
+  }
+
+  .highlight {
+    inset: auto 0px 0px;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+    z-index: 4;
+  }
+
+  .highlight::before {
+    content: '';
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    inset: auto 0px 0px;
+    position: absolute;
+  }
+
+  .highlight::after {
+    content: '';
+    border-bottom-color: var(--md-sys-color-primary);
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: center center;
+
+    transition:
+      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+
+    position: absolute;
+    inset: auto 0px 0px;
+  }
+
+  :host(:focus-within) .highlight::after {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  :host([disabled]) .highlight::before {
+    border-bottom-color: var(--md-sys-color-on-surface);
+    opacity: 0.38;
+  }
+
+  :host([invalid]) .highlight::before {
+    border-bottom-color: var(--md-sys-color-error);
+  }
+
+  :host([invalid]:hover) .highlight::before {
+    border-bottom-color: var(--md-sys-color-on-error-container);
+  }
+
+  .labelHidden .body {
+    padding-top: 0;
+  }
+
+  .container::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background-color: var(--md-sys-color-on-surface-variant);
+    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host(:hover) .container::before {
+    opacity: var(--md-sys-state-hover-state-layer-opacity);
+  }
+
+  .body {
+    padding-top: 1em;
+  }
+`

package/src/md/text-field/internals/outlined.styles.ts

@@ -0,0 +1,43 @@
+import { css } from 'lit'
+
+export default css`
+  .highlight {
+    display: none;
+  }
+
+  .surface {
+    border-radius: var(--md-sys-shape-corner-extra-small);
+  }
+
+  .container {
+    border: 1px var(--md-sys-color-outline) solid;
+    outline: 0px solid var(--md-sys-color-primary);
+    outline-offset: -3px;
+    transition:
+      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host(:hover:not(:focus-within)) .container {
+    border-color: var(--md-sys-color-on-surface);
+  }
+
+  :host(:focus-within) .container {
+    border-color: var(--md-sys-color-primary);
+    outline-width: 3px;
+  }
+
+  .label {
+    padding: 0 4px;
+  }
+
+  .labelActive .label {
+    transform: translateY(calc(-100% - 2px)) scale(0.75);
+    position: absolute;
+    background-color: var(--md-sys-color-surface);
+  }
+
+  :host(:focus-within) .label {
+    color: var(--md-sys-color-primary);
+  }
+`

package/src/md/text-field/ui-filled-text-field.ts

@@ -0,0 +1,16 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/TextField.js'
+import styles from './internals/filled.styles.js'
+import common from './internals/common.styles.js'
+
+@customElement('ui-filled-text-field')
+export class UiFilledTextFieldElement extends Element {
+  static override styles: CSSResultOrNative[] = [common, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-filled-text-field': UiFilledTextFieldElement
+  }
+}

package/src/md/text-field/ui-outlined-text-field.ts

@@ -0,0 +1,16 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/TextField.js'
+import styles from './internals/outlined.styles.js'
+import common from './internals/common.styles.js'
+
+@customElement('ui-outlined-text-field')
+export class UiOutlinedTextFieldElement extends Element {
+  static override styles: CSSResultOrNative[] = [common, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-outlined-text-field': UiOutlinedTextFieldElement
+  }
+}

package/src/types/input.ts

@@ -6,7 +6,6 @@ export type SupportedInputTypes =
   | 'url'
   | 'email'
   | 'password'
-  | 'datetime'
   | 'date'
   | 'month'
   | 'week'

package/test/elements/authorization/basic-method.test.ts

@@ -5,8 +5,8 @@ import Input from '../../../src/md/input/Input.js'
 import '../../../src/define/authorization/basic-authorization.js'
 
 describe('Basic method', () => {
-  const usernameSelector = 'ui-text-field[name="username"]'
-  const passwordSelector = 'ui-text-field[name="password"]'
+  const usernameSelector = 'ui-filled-text-field[name="username"]'
+  const passwordSelector = 'ui-filled-text-field[name="password"]'
 
   const username = 'test-username'
   const password = 'test-password'
@@ -54,7 +54,7 @@ describe('Basic method', () => {
     })
 
     it('has no other inputs', () => {
-      const controls = form.querySelectorAll('ui-text-field')
+      const controls = form.querySelectorAll('ui-filled-text-field')
       assert.lengthOf(controls, 2)
     })
   })

package/test/elements/authorization/bearer-method.test.ts

@@ -5,7 +5,7 @@ import Input from '../../../src/md/input/Input.js'
 import '../../../src/define/authorization/bearer-authorization.js'
 
 describe('Bearer method', () => {
-  const tokenSelector = 'ui-text-field[name="token"]'
+  const tokenSelector = 'ui-filled-text-field[name="token"]'
   const token = 'test-token'
 
   async function basicFixture(auth?: IRequestAuthorization): Promise<Authorization> {
@@ -45,7 +45,7 @@ describe('Bearer method', () => {
     })
 
     it('has no other inputs', () => {
-      const controls = form.querySelectorAll('ui-text-field')
+      const controls = form.querySelectorAll('ui-filled-text-field')
       assert.lengthOf(controls, 1)
     })
   })

package/test/elements/authorization/ntlm-method.test.ts

@@ -5,9 +5,9 @@ import Input from '../../../src/md/input/Input.js'
 import '../../../src/define/authorization/ntlm-authorization.js'
 
 describe('NTLM method', () => {
-  const usernameSelector = 'ui-text-field[name="username"]'
-  const passwordSelector = 'ui-text-field[name="password"]'
-  const domainSelector = 'ui-text-field[name="domain"]'
+  const usernameSelector = 'ui-filled-text-field[name="username"]'
+  const passwordSelector = 'ui-filled-text-field[name="password"]'
+  const domainSelector = 'ui-filled-text-field[name="domain"]'
 
   const username = 'test-username'
   const password = 'test-password'
@@ -71,7 +71,7 @@ describe('NTLM method', () => {
     })
 
     it('has no other inputs', () => {
-      const controls = form.querySelectorAll('ui-text-field')
+      const controls = form.querySelectorAll('ui-filled-text-field')
       assert.lengthOf(controls, 3)
     })
   })