@api-client/ui 0.5.6 → 0.5.7

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/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;