WebExpo 2023

<div class="content-warning">
  <div>Content</div>
  <div>Advisory</div>
  <div>Creative Content</div>
</div>
---

<img class="qr-intro" src="/shared/images/remote-qr.svg" alt="" />

## Don't scan this

###### tinyurl.com/jh3y-remote
---
<br>
<div class="block-reveal">
              
  # Here
  # we
  # gooooo!

</div>
<img class="watermark-bear" src="/shared/images/bear-2022--black.png" alt=""/>
---
<br>

###### WebExpo 2023
## Supercharge your skills with creative coding
###### Styling &lt;select&gt;s like it's 2023
<div class="volume-title">Vol. VII</div>

---
<br>
## I'm Jhey Tompkins
#### I bring ideas to life<br>with code

##### ~~I work at Google~~

<img class="polaroid" src="/shared/images/bear-baby-chilling.jpg" width="300" />

---
<br>
---

---

---

## Expression through the "impractically practical"
---

### Give yourself the <span style="color: var(--citric)">confidence</span> to create <span style="color: var(--fuschia)">anything</span> your imagination brings.<br>Go <span style="color: var(--cinnabar);">beyond documentation</span>, become it.
---

---

<div class="fuel">
  <div class="word-waterfall">
    <div data-word="Perspective">Perspective</div>
    <div data-word="Creativity">Creativity</div>
    <div data-word="Innovation">Innovation</div>
  </div>
  <div class="word-waterfall">
    <div data-word="Perspective">Perspective</div>
    <div data-word="Creativity">Creativity</div>
    <div data-word="Innovation">Innovation</div>
  </div>
</div>
---

## Hoard your <span style="color: var(--citric)">inspiration</span>.<br><span style="color: var(--blueberry)">Focus</span> on <span style="color: var(--fuschia)">"What"</span> and not the "How" or "Why".
---

<div class="demo-row">
  <video autoplay controls muted loop src="/shared/video/demo-two.mp4"></video>
  <video autoplay controls muted loop src="/shared/video/demo-one.mp4"></video>
  <video autoplay controls muted loop src="/shared/video/demo-three.mp4"></video>
</div>
---

---

## It's a <span style="color: var(--chateau)">personal</span> journey. It's a <span style="color: var(--selective)">process</span>. Something you can <span style="color: var(--fuschia)">train over time</span>.
---

<img src="https://media.giphy.com/media/t79McFW5Yxxff4FP09/giphy.gif" alt="" />
---

---

<div class="content-warning">
  <div>Content</div>
  <div>Advisory</div>
  <div>Experimental Content</div>
</div>
---

## It's 2023 and you still can't style a <select class="inline-select"><option>Select</option><option>Style Me?</option><option>Please!</option></select>. That's going to change.
---

<img src="/shared/images/chatgpt-select.png" alt="" />
---

<div class="code-split">

```html
<select name=font-size id=size>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</select>
```

```css
/* Give visual context to our <select> */
[value=title] { font-size: 2rem; }
[value=normal] { font-size: 1rem; }
```

</div>

</div>
---

<div class="code-split">

```html
<button>Select Font Size</button>
<div role=listbox>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</div>
```

```css
/* Give visual context to our <select> */
[value=title] { font-size: 2rem; }
[value=normal] { font-size: 1rem; }
```

</div>

</div>
---

<div class="code-split">

```html [1,9]
<div class=selectmenu>
  <button>Select Font Size</button>
  <div role=listbox>
    <option value=normal>Normal</option>
    <option value=title>Title</option>
    <option value=subtitle>Subtitle</option>
    <option value=footnote>Title</option>
  </div>
</div>
```

```css
/* Give visual context to our <select> */
.selectmenu {
  position: relative;
}
[role=listbox] {
  position: absolute;
  top: 100%;
  left: 0;
}
```

</div>

</div>
---

<div class="code-split">

## Uh oh

</div>

</div>
---

## CSS Anchoring
---

<div class="support-grid">
  <span class="browser-logo" data-browser="canary"></span>
  <span class="browser-logo" data-browser="chrome"></span>
  <span class="browser-logo" data-browser="edge"></span>
  <span class="browser-logo" data-browser="safari"></span>
  <span class="browser-logo" data-browser="firefox"></span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      flag
    </span>
  </span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
</div>
---

<img src="/tpac-2022/assets/tooltip-anatomy.png" />
---

<div class="code-split">

```html
<div class="boat"></div>
<div class="anchor"></div>
```

```css
.anchor {
  anchor-name: --anchor;
}

.boat {
  top: anchor(--anchor bottom);
  left: anchor(--anchor right);
}
```
</div>

</div>
---

<div class="code-split">

```css
.anchor {
  anchor-name: --anchor;
}
.boat {
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    right: anchor(--anchor left);
  }
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
}
```
</div>

</div>
---

---

---

<!-- <div class="code-split">

```html

<!--
<div class="ice-cream-wrapper">
  <div class="ice-creame-cone"></div>
</div>
<div class="ice-cream"></div>
```

```css
.ice-cream-cone {
  anchor-name: --cone;
}
.ice-cream {
  position-fallback: --sundae;
}
@position-fallback --sundae {
  @try {
    bottom: anchor(--cone top);
    left: anchor(--cone center);
  }
  @try {
    bottom: anchor(--floor top);
    left: anchor(--floor center);
  }
}
```
</div>

</div> -->
```css[|2,7|12-15]
#share {
  anchor-default: --share;
  position-fallback: --aligned;
}

#playlist {
  anchor-default: --playlist;
  position-fallback: --aligned;
}

@position-fallback --aligned {
  @try {
    top: anchor(top);
    left: anchor(right);
  }
  @try {
    top: anchor(bottom);
    left: anchor(right);
  }
  @try {
    top: anchor(top);
    right: anchor(left);
  }
  @try {
    bottom: anchor(bottom);
    left: anchor(right);
  }
  @try {
    right: anchor(left);
    bottom: anchor(bottom);
  }
}
```
---

<div class="code-split code-split--inverted">

```css
.chart__tooltip--max {
  position: absolute;
  left: anchor(--chart right);
  bottom: max(
    anchor(--anchor-1 top),
    anchor(--anchor-2 top),
    anchor(--anchor-3 top)
  );
  translate: 0 50%;
}
```

</div>

</div>
---

```css[]
.anchored {
  position: absolute;
  border: 10px dashed var(--text-1);
  top: min(anchor(--a1 center), anchor(--a2 center));
  left: min(anchor(--a1 center), anchor(--a2 center));
  right: min(anchor(--a1 center), anchor(--a2 center));
  bottom: min(anchor(--a1 center), anchor(--a2 center));
}
```
---

---

---

---

```css[]
/* Top left */
.annotation div:nth-of-type(1) {
  background: hsl(10 80% 50% / 0.5);
  top: anchor(var(--anchor-two) center);
  right: anchor(var(--anchor-one) center);
  bottom: anchor(var(--anchor-one) center);
  left: anchor(var(--anchor-two) center);
}
/* Top right */
.annotation div:nth-of-type(2) {
  background: hsl(210 80% 50% / 0.5);
  top: anchor(var(--anchor-two) center);
  right: anchor(var(--anchor-two) center);
  bottom: anchor(var(--anchor-one) center);
  left: anchor(var(--anchor-one) center);
}
```
---

---

```css[]
:root {
  --active-anchor: --name;
}

#name {
  anchor-name: --name;
}

.form-indicator {
  left: var(--active-left);
  top: var(--active-top);
}

:root:has(#email:focus) {
  --active-anchor: --email;
}
```
---

---

---

```css[]
:root:has([href="/blog"]:is(:hover, :focus-visible)) {
  --active: --blog;
}
```
---

```css
.bear__paw {
  top: anchor(var(--anchor-name) center);
  left: anchor(--form right);
}
#password {
  anchor-name: --password;
}
:root:has(#password:focus) {
  --anchor-name: var(--password)
} 
/* Bonus:: Position a password reveal */
.password-reveal {
  position: absolute;
  right: anchor(--password right);
  top: anchor(--password center);
  translate: 0 -50%;
}
```
---

---

## We can now anchor our dropdown to our button! 🎉
---

<div class="code-split">

```css
/* Give visual context to our <select> */
[value=title] { font-size: 2rem; }
[value=normal] { font-size: 1rem; }
```

</div>

</div>
---

<div class="code-split">

```css
button {
  anchor-name: --selectmenu;
}
[role=listbox] {
  position: absolute;
  top: anchor(--selectmenu bottom);
  left: anchor(--selectmenu left);
}
```

</div>

</div>
---

<div class="code-split">

<h2 style="text-align: left;">Uh oh.<br>Wrapping elements<br>aren't the problem.</h2>

</div>

</div>
---

## Open UI ~~Pop-up~~<br>Popover

---

<div class="support-grid">
  <span class="browser-logo" data-browser="canary"></span>
  <span class="browser-logo" data-browser="chrome"></span>
  <span class="browser-logo" data-browser="edge"></span>
  <span class="browser-logo" data-browser="safari"></span>
  <span class="browser-logo" data-browser="firefox"></span>
  <span class="browser-version" data-supported>
    <span class="material-symbols-outlined">
      flag
    </span>
  </span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
  <span class="browser-version">&times;</span>
</div>
---

## The goal of the <span style="color: var(--citric);">Open UI</span> initiative is to make it <span style="color: var(--blueberry)">easier</span> for developers to make <span style="color: var(--fuschia);">great user experiences</span>
---

```jsx []
const PopUp = ({ children }) => {
  return (
    <div className="pop-up" style={{ zIndex: Date.now() }}>
      {children}
    </div>
  )
}
```
---

## What's the top layer? A place outside of the <span style="background-color: var(--cinnabar);">document</span> flow. A place where <span style="background-color: var(--chateau);">z-index</span> has no effect. Where every element has a styleable <span style="background-color: var(--selective);">::backdrop</span>.



<!-- ```html []
<div id="my-first-popup" popup>PopUp Content!</div>
<button popuptoggletarget="my-first-popup">Toggle Pop-Up</button>
```

[popover]:popover-open {
  @initial {
    --open: 0;
  }
  --open: 1;
}
```
---

---


<!-- ```css []
@media (prefers-reduced-motion: no-preference) {
  [popover] {
    animation: exit-animation 250ms ease-out both;
  }

[popover]:open {
    animation: entry-animation 1s ease-in both;
  }

@keyframes exit-animation {
    100% {
      transform: translate(-50%, -50%) translateY(-100vh) scale(0);
    }
  }

@keyframes entry-animation {
    0% {
      transform: translate(-50%, -50%) translateY(100vh) scale(0);
    }
  }
}
``` -->




## Types && Behavior
```html []

<div popover=auto>

<div popover=manual>

<button popovertarget=pop popovertargetaction=toggle>
<button popovertarget=pop popovertargetaction=show>
<button popovertarget=pop popovertargetaction=hide>

<div popover>
  <input autofocus type="text">
</div>
```
---














## JS API
```js []
/* Show a popover */
popoverElement.showPopover()
/* Hide a popover */
popoverElement.hidePopover()
/* Is the popover in the top layer */
popoverElement.matches(':popover-open')
/* Listen for popover events */
const onToggle = ({ preventDefault, currentState, newState }) => {
  /* You can cancel a show */
  if (newState === "open") preventDefault()
  else if (newState === "closed") console.warn("You can't cancel hiding a popover")
}
popoverElement.addEventListener('beforetoggle', onToggle)
popoverElement.addEventListener('toggle', onToggle)
```
---

---
<!-- ```html []
<button
  popover="manual"
  class="balloon"
  id="P"
  defaultopen
  title="Pop 'P'"
  style="--index: -2.5; --hue: 107; --bob-speed: 1; --float-speed: 0.9;"
>
  <span class="balloon__content">
    <span class="balloon__letter">P</span>
    <span class="balloon__handle"></span>
  </span>
</button>
```

<div>

```js []
POPUP.addEventListener("click", () => {
  AUDIO_POP.currentTime = 0;
  AUDIO_POP.play();
  POPUP.hidePopover();
  Object.assign(POPUP, {
    style: `
    --index: ${START_INDEX + p};
    --hue: ${Math.random() * 359};
    --bob-speed: ${Math.random() + 0.5};
    --float-speed: ${Math.random() + 0.5};
  `
  });
  requestAnimationFrame(() => POPUP.showPopover());
});
```

</div> -->





## Breathe new life into old friends?
---


---

<div>

```html []
<button popovertarget=menu>
  Toggle Menu
</button>
<div popover id=menu role=menu>
  
</div>
```

</div><div>

```css [|13-19|21-23]
[popover] {
  left: 100%;
  width: var(--nav-width);
  transition: transform 0.2s;
  transform: translateX(calc(var(--open, 0) * -100%));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: var(--open, 0);
}

[popover]:popover-open {
  @initial {
    --open: 0;
    &::backdrop {
      --open: 0;
    }
  }
  &::backdrop {
    --open: 1;
  }
  --open: 1;
}

body:has([popover]:popover-open) {
  transform: translateX(calc(var(--nav-width) * -1));
}
```

</div>
---



---
<!-- <div>

```html []
<canvas
  id="custom-cursor"
  class="custom-cursor"
  popover="manual"
  defaultOpen
></canvas>
```

</div>

```js []
document.body.addEventListener("popovershow", (e) => {
  if (canvas.matches(":open") && e.target !== canvas) {
    canvas.hidePopover();
    requestAnimationFrame(() => {
      canvas.showPopover();
    });
  }
});
```
--- -->



---


---

```html []
<div id="spotlight" popover>
  <input
    autocomplete="off"
    role="combobox"
    spellcheck="false"
    aria-expanded="false"
    aria-controls="spotlight-options"
    aria-activedescendant=""
    autofocus
    id="spotlight-search"
    type="text"
    placeholder="Pop-up search..."
  />
  <div popover id="spotlight-options" role="listbox">
    
  </div>
</div>
```
---
<!-- ---
```js []
/* Show the pop-up then you get light dismiss etc. for free! */
const handleActivation = (e) => {
  if (e.keyCode === CMD && !STATE.cmd) STATE.cmd = true;
  if (e.keyCode === MOD && STATE.cmd && !STATE.mod) STATE.mod = true;

if (STATE.cmd && STATE.mod && !POPUP.matches(":open")) {
    STATE.cmd = STATE.mod = false;
    POPUP.showPopover();
    OPTIONS.showPopover();
  }
};
``` -->


---

<div>

```html []
<canvas
  id="rain"
  class="rain"
  popover="auto"
></canvas>
```

</div>
<div>

```js []
// General idea! 💡
if (!SCREENSAVER.matches(":popover-open")) {
  screensaverTimeout = setTimeout(() => {
    SCREENSAVER.showPopover();
  }, SCREENSAVER_THRESHOLD);
}
```
</div>
---







---

```html []
<button
  popover="manual"
  popovertarget="menu"
>
  <i class="material-icons">add</i>
</button>
<div id="menu" class="fab__menu" popover="auto" style="--count: 3">
  <ul class="fab__menu-items">
    <li class="fab__menu-item">
      <button
        autofocus
        class="fab"
        style="--index: 0"
        popovertarget="menu"
      >
        <i class="material-icons">chat</i>
      </button>
    </li>
    <li class="fab__menu-item">
      <button
        class="fab"
        style="--index: 1"
        popovertarget="camera"
      >
        <i class="material-icons">photo_camera</i>
      </button>
    </li>
    <li class="fab__menu-item">
      <button
        class="fab"
        style="--index: 2"
        popovertarget="menu"
      >
        <i class="material-icons">pin_drop</i>
      </button>
    </li>
  </ul>
</div>
```
---

<h2 style="text-align:left;"><a style="color: var(--black);"target="_blank" href="/demos/device/devicemotion-notifications-popover">Let's look at<br>gestures! 👈 <span style="opacity: 0.25;">(Click this!)</span></a></h2>
---

---

---

---

### Now we can anchor our dropdown and get it above everything else! ✨
---

<div class="code-split">

```css
/* Give visual context to our <select> */
[value=title] { font-size: 2rem; }
[value=normal] { font-size: 1rem; }
```

</div>

</div>
---

<div class="code-split">

```html [2,3]
<div class=selectmenu>
  <button popovertarget=menu>Select Font Size</button>
  <div id=menu role=listbox popover>
    <option value=normal>Normal</option>
    <option value=title>Title</option>
    <option value=subtitle>Subtitle</option>
    <option value=footnote>Title</option>
  </div>
</div>
```

```css
button {
  anchor-name: --selectmenu;
}
[role=listbox] {
  position: absolute;
  width: anchor-size(--selectmenu width);
  top: anchor(--selectmenu bottom);
  left: anchor(--selectmenu left);
}
```

</div>

</div>
---

<div class="code-split">

## It works! 🙌

</div>

</div>
---

<h2>
  <del>It's 2022 and I can't style a &lt;select&gt;?</del>
  <br>
  Open UI SelectMenu
</h2>

<div class="code-stack">
  
```html
<select name=font-size id=size>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</select>
```

```css
[value=title] { font-size: 2rem; }
```

</div>
---

---

```html [|1,6]
<selectmenu name=font-size id=size>
  <option value=normal>Normal</option>
  <option value=title>Title</option>
  <option value=subtitle>Subtitle</option>
  <option value=footnote>Title</option>
</selectmenu>
```
---

---

---

```html [|3,4,5,6,7,8,11,12,13,14,15,16|2,9,10,17]
<selectmenu id="country">
  <div slot="button">
    <button behavior="button">
      <span behavior="selected-value" slot="selected-value">
        <span>Czech Republic</span>
        <img src="./cr.png" alt="">
      </span>
    </button>
  </div>
  <div slot=listbox>
    <div popover behavior=listbox>
      <option value=CzechRepublic>
        <img src="./cr.png" alt="">
        <span>Czech Republic</span>
      </option>
    </div>
  </div>
</selectmenu>
```
---

---

---

---

```html [|3,5,6,7,9,10]
<selectmenu>
  <div slot="button">
    <button behavior="button" disabled={loading}>
      <span className="pokeselect__image-placeholder">
        {loading && <img className="pokeselect__ball" src="poke-ball.png" alt="" />}
        {!loading && !selected && <img className="pokeselect__choose" src="question.png" alt="" />} 
        {selected && <img className="pokeselect__avatar" src={selected.avatar} alt=""/>}
      </span>
      {!selected && <span className="pokeselect__placeholder">Select Pokémon</span>} 
      {selected && <span>{selected.name}</span>}
      <svg viewBox="0 0 320 512" title="marker"></svg>
    </button>
  </div>
  <div slot="listbox">
    <div popover="auto" behavior="listbox">
      
    </div>
  </div>
</selectmenu>
```
---

---

---

```css
:root {
  --transition-step: 0.1s;
  --transition: 0.2s;
  --total-transition: calc(
    ((var(--options) + 1) * var(--transition-step))
    + var(--transition)
  );
}
[popover] {
  /* Gotta wait!  */
  transition:
    opacity var(--total-transition),
    display var(--total-transition),
    overlay var(--total-transition);
}
```
---

---

---

---

---

---

## That's it.<br>Styleable &lt;select&gt;s are coming.
---

## If you haven't, <span style="color: var(--fuschia)">start</span> your journey. <span style="color: var(--selective)">Supercharge</span> yourself. It's <span style="color: var(--blueberry)">just pixels</span>.
---

## The more you <span style="color: var(--fuschia)">"play"</span> around, the more you are gonna <span style="color:var(--chateau)">find out</span>
---





<h2 class="stay-awesome">Stay Awesome!</h2>
<br>