@api-client/ui 0.5.6 → 0.5.8

package/demo/md/date-picker/date-picker.ts

@@ -8,12 +8,11 @@ import '../../../src/md/button/ui-button.js'
 class DatePickerDemoPage extends DemoPage {
   override accessor componentName = 'Date Picker'
 
-  @reactive() accessor rangeMode = false
-  @reactive() accessor showConstraints = false
   @reactive() accessor selectedDate: Date | null = null
   @reactive() accessor selectedRange: { start: Date | null; end: Date | null } = { start: null, end: null }
   @reactive() accessor modalOpen = false
   @reactive() accessor modalInputOpen = false
+  @reactive() accessor modalInputRangeOpen = false
   @reactive() accessor formValues: string | undefined
 
   private get today(): Date {
@@ -32,16 +31,6 @@ class DatePickerDemoPage extends DemoPage {
     return date
   }
 
-  handleRangeModeChange(e: Event): void {
-    const checkbox = e.target as HTMLInputElement
-    this.rangeMode = checkbox.checked
-  }
-
-  handleConstraintsChange(e: Event): void {
-    const checkbox = e.target as HTMLInputElement
-    this.showConstraints = checkbox.checked
-  }
-
   handleDateChange(e: CustomEvent): void {
     this.selectedDate = e.detail.value
   }
@@ -70,6 +59,10 @@ class DatePickerDemoPage extends DemoPage {
     this.modalInputOpen = true
   }
 
+  openModalInputRange(): void {
+    this.modalInputRangeOpen = true
+  }
+
   handleModalClose(e: CustomEvent): void {
     this.modalOpen = false
     if (e.detail.confirmed && e.detail.range) {
@@ -79,15 +72,27 @@ class DatePickerDemoPage extends DemoPage {
 
   handleModalInputClose(e: CustomEvent): void {
     this.modalInputOpen = false
-    if (e.detail.confirmed) {
-      if (this.rangeMode && e.detail.range) {
-        this.selectedRange = e.detail.range
-      } else if (!this.rangeMode && e.detail.date) {
-        this.selectedDate = e.detail.date
-      }
+    if (e.detail.confirmed && e.detail.date) {
+      this.selectedDate = e.detail.date
+    }
+  }
+
+  handleModalInputRangeClose(e: CustomEvent): void {
+    this.modalInputRangeOpen = false
+    if (e.detail.confirmed && e.detail.range) {
+      this.selectedRange = e.detail.range
     }
   }
 
+  private formatDateRange(start: Date | null, end: Date | null, defaultMessage = 'No range selected'): string {
+    if (!start || !end) return defaultMessage
+    return `${start.toDateString()} - ${end.toDateString()}`
+  }
+
+  private formatSingleDate(date: Date | null, defaultMessage = 'No date selected'): string {
+    return date ? date.toDateString() : defaultMessage
+  }
+
   handleFormSubmit(e: SubmitEvent): void {
     e.preventDefault()
     const form = e.target as HTMLFormElement
@@ -98,14 +103,16 @@ class DatePickerDemoPage extends DemoPage {
 
   contentTemplate(): TemplateResult {
     return html`
-      <a href="../">Back</a>
-      ${this.renderConfigurationSection()} ${this.renderInputs()} ${this.renderCalendars()}
-      ${this.renderModalDatePickers()} ${this.renderFormIntegration()} ${this.renderModalComponents()}
+      <nav>
+        <a href="../" class="back-link">← Back to Components</a>
+      </nav>
+      ${this.renderInputs()} ${this.renderCalendars()} ${this.renderModalDatePickers()} ${this.renderFormIntegration()}
+      ${this.renderModalComponents()}
       ${this.formValues
         ? html`
             <section class="demo-section">
               <h3 class="headline-medium">Form Output</h3>
-              <output>
+              <output role="status" aria-live="polite" aria-label="Form submission result">
                 <code><pre>${this.formValues}</pre></code>
               </output>
             </section>
@@ -115,10 +122,9 @@ class DatePickerDemoPage extends DemoPage {
   }
 
   renderInputs(): TemplateResult {
-    const { showConstraints: sc } = this
     return html`<section class="demo-section">
       <h2 class="display-large">Date Picker Input</h2>
-      <div class="variant-grid">
+      <div class="variant-grid" role="group" aria-labelledby="input-variants-heading">
         <span>&nbsp;</span>
         <span class="legend-marker">1</span>
         <span class="legend-marker">2</span>
@@ -128,24 +134,40 @@ class DatePickerDemoPage extends DemoPage {
         <ui-date-picker-input
           label="Basic input"
           placeholder="Select date"
+          name="basic-date-picker"
           .value="${this.selectedDate}"
           @change="${this.handleDateChange}"
+          aria-describedby="basic-input-help"
         ></ui-date-picker-input>
         <ui-date-picker-input
-          label="Constrained input"
+          label="With constraints"
           placeholder="Select date"
-          .minDate="${sc ? this.today : undefined}"
-          .maxDate="${sc ? this.oneMonthFromNow : undefined}"
+          name="constrained-date-picker"
+          .minDate="${this.today}"
+          .maxDate="${this.oneMonthFromNow}"
           .value="${this.selectedDate}"
           @change="${this.handleDateChange}"
+          aria-describedby="constrained-input-help"
+        ></ui-date-picker-input>
+        <ui-date-picker-input
+          label="Disabled input"
+          placeholder="Select date"
+          disabled
+          name="disabled-date-picker"
+          aria-describedby="disabled-input-help"
         ></ui-date-picker-input>
-        <ui-date-picker-input label="Disabled input" placeholder="Select date" disabled></ui-date-picker-input>
       </div>
+      <div id="input-variants-heading" class="visually-hidden">Date input variants demonstration</div>
+      <div id="basic-input-help" class="visually-hidden">Basic date picker with no restrictions</div>
+      <div id="constrained-input-help" class="visually-hidden">
+        Date picker with date constraints applied (today to one month from now)
+      </div>
+      <div id="disabled-input-help" class="visually-hidden">Disabled date picker for demonstration</div>
       <p class="body-medium">A. Input variants</p>
       <ol class="decimal body-medium">
-        <li>Basic</li>
-        <li>With constraints</li>
-        <li>Disabled / Range selection</li>
+        <li>Basic input</li>
+        <li>With date constraints</li>
+        <li>Disabled state</li>
       </ol>
     </section>`
   }
@@ -153,7 +175,7 @@ class DatePickerDemoPage extends DemoPage {
   renderCalendars(): TemplateResult {
     return html`<section class="demo-section xl">
       <h2 class="display-large">Date Picker Calendar</h2>
-      <div class="variant-grid">
+      <div class="variant-grid" role="group" aria-labelledby="calendar-variants-heading">
         <span>&nbsp;</span>
         <span class="legend-marker">1</span>
         <span class="legend-marker">2</span>
@@ -163,65 +185,82 @@ class DatePickerDemoPage extends DemoPage {
         <ui-date-picker-calendar
           showActions
           .selectedDate="${this.selectedDate}"
-          @date-confirm="${this.handleDateConfirm}"
+          @date-select="${this.handleDateConfirm}"
           @date-cancel="${this.handleDateCancel}"
+          aria-describedby="basic-calendar-help"
         ></ui-date-picker-calendar>
         <ui-date-picker-calendar
           showActions
-          ?rangeSelection="${true}"
-          .selectedRange="${this.selectedRange}"
+          rangeSelection
+          .rangeStart="${this.selectedRange.start}"
+          .rangeEnd="${this.selectedRange.end}"
           @date-range-confirm="${this.handleRangeConfirm}"
           @date-cancel="${this.handleDateCancel}"
+          aria-describedby="range-calendar-help"
         ></ui-date-picker-calendar>
         <ui-date-picker-calendar
           showActions
           .minDate="${this.today}"
           .maxDate="${this.oneMonthFromNow}"
           .selectedDate="${this.selectedDate}"
-          @date-confirm="${this.handleDateConfirm}"
+          @date-select="${this.handleDateConfirm}"
           @date-cancel="${this.handleDateCancel}"
+          aria-describedby="constrained-calendar-help"
         ></ui-date-picker-calendar>
       </div>
+      <div id="calendar-variants-heading" class="visually-hidden">Calendar variants demonstration</div>
+      <div id="basic-calendar-help" class="visually-hidden">Basic calendar for single date selection</div>
+      <div id="range-calendar-help" class="visually-hidden">Calendar configured for date range selection</div>
+      <div id="constrained-calendar-help" class="visually-hidden">
+        Calendar with date constraints limiting selectable dates
+      </div>
       <p class="body-medium">B. Calendar variants</p>
       <ol class="decimal body-medium">
-        <li>Basic</li>
-        <li>With constraints</li>
-        <li>Disabled / Range selection</li>
+        <li>Single date selection</li>
+        <li>Range selection</li>
+        <li>With date constraints</li>
       </ol>
     </section>`
   }
 
   renderModalDatePickers(): TemplateResult {
-    const { rangeMode: rm } = this
     return html`
       <section class="demo-section">
         <h2 class="display-large">Modal Date Pickers</h2>
         <div class="modal-demo-grid">
-          <div class="modal-demo-item">
+          <article class="modal-demo-item">
             <h3 class="headline-small">Range Selection Modal</h3>
-            <ui-button @click="${this.openModal}" color="filled">Open Date Range Picker</ui-button>
-            <div class="demo-output">
-              ${this.selectedRange.start && this.selectedRange.end
-                ? html`Range: ${this.selectedRange.start.toDateString()} - ${this.selectedRange.end.toDateString()}`
-                : 'No range selected'}
+            <p class="body-medium">Full-screen modal for selecting date ranges</p>
+            <ui-button @click="${this.openModal}" color="filled" aria-describedby="range-modal-output">
+              Open Date Range Picker
+            </ui-button>
+            <div id="range-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected range: ${this.formatDateRange(this.selectedRange.start, this.selectedRange.end)}
             </div>
-          </div>
+          </article>
 
-          <div class="modal-demo-item">
-            <h3 class="headline-small">Input Modal</h3>
-            <ui-button @click="${this.openModalInput}" color="filled">
-              Open ${rm ? 'Range' : 'Single'} Date Input
+          <article class="modal-demo-item">
+            <h3 class="headline-small">Single Date Input Modal</h3>
+            <p class="body-medium">Modal with single date input field</p>
+            <ui-button @click="${this.openModalInput}" color="filled" aria-describedby="input-modal-output">
+              Open Single Date Input
             </ui-button>
-            <div class="demo-output">
-              ${rm
-                ? this.selectedRange.start && this.selectedRange.end
-                  ? html`Range: ${this.selectedRange.start.toDateString()} - ${this.selectedRange.end.toDateString()}`
-                  : 'No range entered'
-                : this.selectedDate
-                  ? html`Date: ${this.selectedDate.toDateString()}`
-                  : 'No date entered'}
+            <div id="input-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected date: ${this.formatSingleDate(this.selectedDate, 'No date entered')}
             </div>
-          </div>
+          </article>
+
+          <article class="modal-demo-item">
+            <h3 class="headline-small">Range Input Modal</h3>
+            <p class="body-medium">Modal with date range input fields</p>
+            <ui-button @click="${this.openModalInputRange}" color="filled" aria-describedby="input-range-modal-output">
+              Open Range Date Input
+            </ui-button>
+            <div id="input-range-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected range:
+              ${this.formatDateRange(this.selectedRange.start, this.selectedRange.end, 'No range entered')}
+            </div>
+          </article>
         </div>
       </section>
     `
@@ -231,21 +270,33 @@ class DatePickerDemoPage extends DemoPage {
     return html`<section class="demo-section">
       <h2 class="display-large">Form Integration</h2>
       <div class="frame">
-        <form @submit="${this.handleFormSubmit}">
-          <div class="form-row">
-            <ui-date-picker-input required label="Event date" placeholder="Select event date"></ui-date-picker-input>
-          </div>
-          <div class="form-row">
-            <ui-date-picker-input
-              label="Deadline (optional)"
-              placeholder="Select deadline"
-              .minDate="${this.today}"
-              required
-            ></ui-date-picker-input>
-          </div>
-          <div class="form-actions">
-            <ui-button type="submit" color="filled" type="submit">Submit Form</ui-button>
-            <ui-button type="reset" color="outlined" type="reset">Reset</ui-button>
+        <form @submit="${this.handleFormSubmit}" novalidate>
+          <fieldset>
+            <legend class="visually-hidden">Event scheduling form</legend>
+            <div class="form-row">
+              <ui-date-picker-input
+                required
+                label="Event date"
+                placeholder="Select event date"
+                name="event-date"
+                aria-describedby="event-date-help"
+              ></ui-date-picker-input>
+              <div id="event-date-help" class="form-help">Choose the date when the event will take place</div>
+            </div>
+            <div class="form-row">
+              <ui-date-picker-input
+                label="Deadline (optional)"
+                placeholder="Select deadline"
+                name="deadline"
+                .minDate="${this.today}"
+                aria-describedby="deadline-help"
+              ></ui-date-picker-input>
+              <div id="deadline-help" class="form-help">Optional deadline for event preparation</div>
+            </div>
+          </fieldset>
+          <div class="form-actions" role="group" aria-label="Form actions">
+            <ui-button type="submit" color="filled">Submit Form</ui-button>
+            <ui-button type="reset" color="outlined">Reset</ui-button>
           </div>
         </form>
       </div>
@@ -253,7 +304,6 @@ class DatePickerDemoPage extends DemoPage {
   }
 
   renderModalComponents(): TemplateResult {
-    const { rangeMode: rm } = this
     return html`<!-- Modal Components -->
       <ui-date-picker-modal
         ?open="${this.modalOpen}"
@@ -265,35 +315,20 @@ class DatePickerDemoPage extends DemoPage {
 
       <ui-date-picker-modal-input
         ?open="${this.modalInputOpen}"
-        title="${rm ? 'Enter date range' : 'Enter date'}"
-        .rangeMode="${rm}"
-        startLabel="${rm ? 'Start date' : 'Date'}"
-        endLabel="${rm ? 'End date' : ''}"
+        title="Enter date"
+        .rangeMode="${false}"
+        startLabel="Date"
         @modal-input-close="${this.handleModalInputClose}"
-      ></ui-date-picker-modal-input>`
-  }
+      ></ui-date-picker-modal-input>
 
-  renderConfigurationSection(): TemplateResult {
-    const { rangeMode: rm, showConstraints: sc } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Configuration</h2>
-        <div class="config-grid">
-          <div class="config-item">
-            <label class="checkbox-label">
-              <input type="checkbox" .checked="${rm}" @change="${this.handleRangeModeChange}" />
-              Range selection mode
-            </label>
-          </div>
-          <div class="config-item">
-            <label class="checkbox-label">
-              <input type="checkbox" .checked="${sc}" @change="${this.handleConstraintsChange}" />
-              Show date constraints
-            </label>
-          </div>
-        </div>
-      </section>
-    `
+      <ui-date-picker-modal-input
+        ?open="${this.modalInputRangeOpen}"
+        title="Enter date range"
+        .rangeMode="${true}"
+        startLabel="Start date"
+        endLabel="End date"
+        @modal-input-close="${this.handleModalInputRangeClose}"
+      ></ui-date-picker-modal-input>`
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -222,7 +222,7 @@
     "oauth2-mock-server": "^8.0.0",
     "prettier": "^3.5.1",
     "sinon": "^21.0.0",
-    "ts-lit-plugin": "^2.0.2",
+    "@jarrodek/ts-lit-plugin": "^3.0.0",
     "typescript": "^5.5.2",
     "typescript-eslint": "^8.24.1",
     "wireit": "^0.14.4"

package/src/elements/currency/currency-picker.ts

@@ -0,0 +1,14 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/Picker.js'
+import elementStyles from './internals/Picker.styles.js'
+
+@customElement('currency-picker')
+export class CurrencyPickerElement extends Element {
+  static override styles = [elementStyles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'currency-picker': CurrencyPickerElement
+  }
+}

package/src/elements/currency/internals/Picker.styles.ts

@@ -0,0 +1,58 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+    max-width: 600px;
+  }
+
+  .currency-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  md-outlined-select {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .flag {
+    font-size: 20px;
+    width: 24px;
+    text-align: center;
+  }
+
+  .currency-symbol {
+    color: var(--md-sys-color-primary);
+    font-size: 1rem;
+  }
+
+  /* Error states using ElementInternals */
+  .error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin-top: 4px;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+    border: 1px solid var(--md-sys-color-error);
+  }
+
+  .error-message {
+    font-weight: 500;
+  }
+
+  /* Host error state using ElementInternals validity */
+  :host([data-error]) {
+    --md-outlined-select-outline-color: var(--md-sys-color-error);
+  }
+
+  :host([data-error]) md-outlined-select {
+    --md-outlined-select-focus-outline-color: var(--md-sys-color-error);
+  }
+`