@api-client/ui 0.5.6 → 0.5.8

package/src/elements/mention-textarea/ui-mention-textarea.ts

@@ -0,0 +1,18 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/MentionTextArea.js'
+import styles from './internals/MentionTextArea.styles.js'
+
+@customElement('mention-textarea')
+export class MentionTextAreaElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'mention-textarea': MentionTextAreaElement
+  }
+}
+
+export default MentionTextAreaElement
+export type { MentionSuggestion, MentionInsertEvent, MentionRemoveEvent } from './internals/MentionTextArea.js'

package/src/md/button/internals/base.ts

@@ -234,6 +234,8 @@ export default class BaseButton extends UiElement {
     const allowedReasons = reason === 'enter' || reason === 'space'
     if (this.type === 'submit' && (!reason || allowedReasons)) {
       this.handleSubmit()
+    } else if (this.type === 'reset' && (!reason || allowedReasons)) {
+      this.handleReset()
     } else if (allowedReasons) {
       this.click()
     }
@@ -337,6 +339,11 @@ export default class BaseButton extends UiElement {
     }
   }
 
+  protected handleReset(): void {
+    const form = this.form as HTMLFormElement
+    form?.reset()
+  }
+
   override handlePointerEnter(e: PointerEvent): void {
     super.handlePointerEnter(e)
     this.ripple?.beginHover(e)

package/src/md/chip/internals/Chip.styles.ts

@@ -14,6 +14,8 @@ export default css`
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     line-height: var(--md-sys-typescale-label-large-height);
 
+    white-space: normal;
+
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);

package/src/md/date-picker/internals/DatePicker.styles.ts

@@ -218,6 +218,10 @@ export const inputStyles = css`
     z-index: 999;
     background: transparent;
   }
+
+  .calendar-icon {
+    cursor: pointer;
+  }
 `
 
 export const modalStyles = css`
@@ -283,6 +287,75 @@ export const modalStyles = css`
     font-size: 18px;
   }
 
+  /* Input container and format help styles */
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .format-help {
+    padding: 12px 16px;
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: 8px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+  }
+
+  .help-title {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: var(--md-sys-color-on-surface);
+    line-height: 1.4;
+  }
+
+  .help-examples {
+    margin: 0;
+    font-size: 13px;
+    color: var(--md-sys-color-on-surface-variant);
+    line-height: 1.4;
+  }
+
+  /* Accessibility utilities */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  /* Modal header actions and input mode styles */
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .input-mode-placeholder {
+    padding: 24px;
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .input-mode-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
   .modal-actions {
     display: flex;
     justify-content: flex-end;