@api-client/ui 0.2.13 → 0.3.1

package/demo/md/icon-button/index.ts

@@ -1,21 +1,20 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
-import IconButtonElement from '../../../src/md/icon-button/internals/IconButton.js'
+import IconButtonElement, { type MdIconButtonWidth } from '../../../src/md/icon-button/internals/IconButton.js'
+import reactive from '../../../src/decorators/reactive.js'
+import type { MdButtonSize, MdButtonShape } from '../../../src/md/button/internals/base.js'
 
 import '../../../src/md/icon-button/ui-icon-button.js'
-import '../../../src/md/icon-button/ui-filled-icon-button.js'
-import '../../../src/md/icon-button/ui-filled-tonal-icon-button.js'
-import '../../../src/md/icon-button/ui-outlined-icon-button.js'
 import '../../../src/md/icons/ui-icon.js'
 
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/iconbutton/filled-icon-button.js'
-import '@material/web/iconbutton/filled-tonal-icon-button.js'
-import '@material/web/iconbutton/outlined-icon-button.js'
-import '@material/web/icon/icon.js'
-
 class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'API icon button'
+  override accessor componentName = 'UI icon button'
+
+  @reactive() accessor size: MdButtonSize = 's'
+
+  @reactive() accessor shape: MdButtonShape = 'round'
+
+  @reactive() accessor width: MdIconButtonWidth = 'default'
 
   _clickHandler(e: Event): void {
     const button = e.target as IconButtonElement
@@ -24,208 +23,105 @@ class ComponentDemoPage extends DemoPage {
 
   _activeHandler(e: Event): void {
     const button = e.target as IconButtonElement
-    console.log(`A ${button.localName} button was ${button.active ? 'activated' : 'deactivated'}`)
+    console.log(`A ${button.localName} button was ${button.selected ? 'activated' : 'deactivated'}`)
   }
 
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Filled icon button</h2>
-
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-filled-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
+  handleSizeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.size = select.value as MdButtonSize
+  }
 
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
+  handleShapeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.shape = select.value as MdButtonShape
+  }
 
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-filled-icon-button><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button toggle><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button toggle selected><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button disabled><md-icon>settings</md-icon></md-filled-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-      </section>
+  handleWidthChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.width = select.value as MdIconButtonWidth
+  }
 
-      <section class="demo-section">
-        <h2 class="title-large">Filled tonal icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-filled-tonal-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
+  readonly icon = html`<ui-icon>settings</ui-icon>`
 
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-filled-tonal-icon-button><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button toggle><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button toggle selected><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button disabled><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+  contentTemplate(): TemplateResult {
+    const { size: s, shape: h, icon: i, width: w } = this
+    return html`
+      <a href="../">Back</a>
+      ${this.renderConfigurationSection()}
+      <section class="demo-section ${s}">
+        <h2 class="display-large">Color</h2>
+        <div class="color-grid">
+          <span>&nbsp</span>
+          <span class="legend-marker">1</span>
+          <span class="legend-marker">2</span>
+          <span class="legend-marker">3</span>
+          <span class="legend-marker">A</span>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
+          <span class="legend-marker">B</span>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
+          <span class="legend-marker">C</span>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle selected
+            >${i}</ui-icon-button
+          >
+          <span class="legend-marker">D</span>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
         </div>
+        <p class="body-medium">A. Filled, B. Tonal, C. Outlined, D. Standard</p>
+        <ol class="decimal body-medium">
+          <li>Default</li>
+          <li>Toggle: unselected</li>
+          <li>Toggle: selected</li>
+        </ol>
       </section>
+    `
+  }
 
+  renderConfigurationSection(): TemplateResult {
+    const { size: s, shape: h, width: w } = this
+    return html`
       <section class="demo-section">
-        <h2 class="title-large">Outlined icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-
-        <div class="demo-row icons-demo-row">
-          <ui-outlined-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iont"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iotu"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            active
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iots"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iod"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-
-          <p class="label-large" id="iont">No toggle</p>
-          <p class="label-large" id="iotu">Toggle (unselected)</p>
-          <p class="label-large" id="iots">Toggle (selected)</p>
-          <p class="label-large" id="iod">Disabled</p>
-        </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-outlined-icon-button><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button toggle><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button toggle selected><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button disabled><md-icon>settings</md-icon></md-outlined-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+        <h2 class="title-large">Configuration</h2>
+        <div class="md-select outlined">
+          <label for="size">Size</label>
+          <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="xs">Extra small</option>
+            <option value="s">Small</option>
+            <option value="m">Medium</option>
+            <option value="l">Large</option>
+            <option value="xl">Extra large</option>
+          </select>
         </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Standard icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isnt"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="istu"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="ists"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isd"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-
-          <p class="label-large" id="isnt">No toggle</p>
-          <p class="label-large" id="istu">Toggle (unselected)</p>
-          <p class="label-large" id="ists">Toggle (selected)</p>
-          <p class="label-large" id="isd">Disabled</p>
+        <div class="md-select outlined">
+          <label for="shape">Shape</label>
+          <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="round">Round</option>
+            <option value="square">Square</option>
+          </select>
         </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-icon-button><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button toggle><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button toggle selected><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button disabled><md-icon>settings</md-icon></md-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+        <div class="md-select outlined">
+          <label for="width">Width</label>
+          <select id="width" @change="${this.handleWidthChange}" name="width" .value="${w}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="default">Default</option>
+            <option value="narrow">Narrow</option>
+            <option value="wide">Wide</option>
+          </select>
         </div>
       </section>
     `

package/demo/md/index.html

@@ -19,8 +19,10 @@
     <nav>
       <h2>Elements</h2>
       <dl>
-        <dt><a href="buttons/index.html">button</a></dt>
+        <dt><a href="buttons/button.html">button</a></dt>
         <dd>A Material 3 button.</dd>
+        <dt><a href="buttons/group.html">button group</a></dt>
+        <dd>A Material 3 button group.</dd>
         <dt><a href="checkbox/index.html">checkbox</a></dt>
         <dd>A Material 3 checkbox.</dd>
         <dt><a href="chip/chip.html">chip</a></dt>

package/demo/md/inputs/input.html

@@ -24,6 +24,45 @@
     .demo-row {
       margin: 20px 0;
     }
+
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+    }
+
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .demo-grid {
+      grid-template-columns: 160px 1fr 1fr;
+      display: grid;
+      gap: 0 0;
+      justify-items: center; 
+      align-items: center;
+      grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
+      grid-auto-rows: 80px;
+
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .row-name {
+      justify-self: end;
+      text-align: right;
+    }
+
+    ui-filled-text-field,
+    ui-outlined-text-field {
+      max-width: 240px;
+    }
   </style>
 </head>
 <body>