├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── tailwind001.png
    ├── vimesh001.png
    ├── vimesh002.jpg
    └── vimesh003.jpg
├── components
    ├── combobox.html
    ├── dialog.html
    ├── listbox.html
    ├── menu.html
    ├── popover.html
    ├── radio-group.html
    ├── switch.html
    └── tabs.html
├── package.json
└── playground
    ├── assets
        ├── favicon.ico
        ├── logo.svg
        ├── prism.css
        └── prism.js
    ├── components
        ├── code-viewer.html
        ├── header.html
        ├── key-caster.html
        ├── m3
        │   └── app
        │   │   ├── float-menu.html
        │   │   ├── footer.html
        │   │   ├── on-this-page.html
        │   │   ├── page-container.html
        │   │   ├── side-menu.html
        │   │   ├── tab-list.html
        │   │   └── topbar.html
        └── side-menu.html
    ├── data
        └── side-menu.json
    ├── dev.html
    ├── index.html
    ├── m3.html
    ├── m3dev.html
    └── pages
        ├── combobox
            ├── basic.html
            ├── command-palette-group.html
            ├── command-palette.html
            └── multi-select.html
        ├── dialog
            ├── basic.html
            └── slide-over.html
        ├── home.html
        ├── listbox
            ├── basic.html
            ├── multi-elements.html
            └── multi-select.html
        ├── m3
            ├── develop
            │   ├── android
            │   │   ├── jetpack-compose.html
            │   │   └── mdc-android.html
            │   ├── flutter.html
            │   ├── overview.html
            │   └── web.html
            ├── foundations
            │   ├── accessible-design.html
            │   └── overview.html
            ├── get-started.html
            └── home.html
        ├── menu
            ├── basic.html
            ├── multiple-elements.html
            ├── with-popper.html
            ├── with-transition-and-popper.html
            └── with-transition.html
        ├── popover
            └── basic.html
        ├── radio-group
            └── basic.html
        ├── switch
            └── basic.html
        └── tabs
            └── basic.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | dev/
4 | ref/
5 | node_modules/
6 | yarn.lock
7 | doc
8 | __tests__
9 | tailwind.config.js


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Vimesh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vimesh Headless UI
 2 | ## Features
 3 | This is Alpine.js implementation of [Tailwind Headless UI](https://headlessui.com/). Built with [Vimesh UI](https://github.com/vimeshjs/vimesh-ui) framework, Vimesh Headless UI has some nice features:
 4 | ### Ultra lightweight 
 5 | Vimesh Headless UI has much smaller code size
 6 | 
 7 | | Components   | Vimesh Headless UI   | Tailwind Headless UI for Vue | Tailwind Headless UI for React |
 8 | | ----------- | -------------------- | -------- | ----- |
 9 | | Listbox   | 8k  | 34k | 30k | 
10 | | Combobox  | 9k  | 25k | 39k |
11 | | Menu      | 7k  | 18k | 20k |
12 | | Switch    | 0.6k | 5k | 6k |
13 | | Tabs      | 4k  | 12k | 16k |
14 | | Dialog    | 2k  | 15k | 17k |
15 | | Popover   | 6k  | 23k | 28k |
16 | | Radio Group | 1k | 11k | 14k |
17 | 
18 | Comparing the production version of Vimesh and Tailwind headless dialog example page size, Vimesh is much smaller with more features and less bugs (check the menu display in the tailwind popup dialog). 
19 | 
20 | * Vimesh (192k) 
21 | ![](./assets/vimesh001.png) 
22 | * Tailwind (425k)
23 | ![](./assets/tailwind001.png)
24 | 
25 | ### Load only used components dynamically
26 | Components are plain html files, which could be hosted anywhere, normally at CDN. They could be shared cross different projects without extra tree shaking magic. For example, the dialog basic example uses two components `hui-dialog` and `hui-menu`. Just load them asynchronously with `x-import`. Vimesh UI registers corresponding native custom elements and initialize them.
27 | 
28 | ```html
29 | <template x-component:page="dialog-basic" x-import="hui:dialog,menu" x-data="setupDialogBasicData()"
30 |     class="overflow-y-auto">
31 |     ...
32 |     <hui-dialog :open="isOpen" @close="setIsOpen(false)">
33 |         ...
34 |         <hui-menu>
35 |         </hui-menu>
36 |     </hui-dialog>
37 |     ...
38 | </template>
39 | ```
40 | 
41 | ### No build, no bundle
42 | What you write is what you get. Organize components to html files under meaningful namespaces. You do not need webpack, rollup, vite etc. 
43 | 
44 | ## Getting Started
45 | ### Development mode
46 | Install development dependencies, including alpinejs, @vimesh/style, @vimesh/ui, universal-router and http-server.
47 | ```
48 | yarn
49 | ```
50 | Run static http server
51 | ```
52 | yarn dev
53 | ```
54 | Open the url `http://127.0.0.1:8080/playground/dev.html`
55 | 
56 | It shows an index page
57 | ![](./assets/vimesh002.jpg)
58 | 
59 | There are many examples for different components with relative source code.
60 | 
61 | ![](./assets/vimesh003.jpg)
62 | 
63 | It uses development version of alpinejs and @vimesh/ui in the node_modules folder. 
64 | 
65 | ### Production mode
66 | Please check `playground/index.html`, which use the latest alpinejs and @vimesh/ui at `unpkg.com`. In fact it is also what you would do if you use Vimesh Headless UI in your real projects.
67 | ``` html
68 | <head>
69 |     <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
70 | 
71 |     <script src="https://unpkg.com/@vimesh/style"></script>
72 |     <script src="https://unpkg.com/@vimesh/ui"></script>
73 |     <script src="https://unpkg.com/alpinejs" defer></script>
74 |     <script src="https://unpkg.com/universal-router/universal-router.min.js"></script>
75 | 
76 |     <script>
77 |         const DEBUG = false
78 |         $vui.config.debug = DEBUG
79 |         $vui.config.importMap = {
80 |             "hui": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
81 |             "app": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
82 |             "page": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
83 |         }
84 |     </script>
85 |     ...
86 | </head>
87 | ```
88 | 
89 | [Online Playground](https://unpkg.com/@vimesh/headless/playground/index.html)
90 | 
91 | Yes, the online playground are 100% plain html hosted at `unpkg.com`. It is very old school style, right? Let's make frondend development back to what it should be.


--------------------------------------------------------------------------------
/assets/tailwind001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimeshjs/vimesh-headless/5a1abed7adee6e704ec02a7b3f4a79b4b6260873/assets/tailwind001.png


--------------------------------------------------------------------------------
/assets/vimesh001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimeshjs/vimesh-headless/5a1abed7adee6e704ec02a7b3f4a79b4b6260873/assets/vimesh001.png


--------------------------------------------------------------------------------
/assets/vimesh002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimeshjs/vimesh-headless/5a1abed7adee6e704ec02a7b3f4a79b4b6260873/assets/vimesh002.jpg


--------------------------------------------------------------------------------
/assets/vimesh003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimeshjs/vimesh-headless/5a1abed7adee6e704ec02a7b3f4a79b4b6260873/assets/vimesh003.jpg


--------------------------------------------------------------------------------
/components/combobox.html:
--------------------------------------------------------------------------------
  1 | <template x-component:hui="combobox" x-modelable="value" x-data="{
  2 |     value: null,
  3 |     query: '',
  4 |     get isOpen() { return this.$api && this.$api.isOpen },
  5 |     get disabled() {return $prop('disabled')},
  6 |     get multiple() {return $prop('multiple')},
  7 |     get activeOption() {
  8 |         return this.$api && this.$api.activeOption
  9 |     }
 10 | }">
 11 | 
 12 |     <input type="hidden" :name="$prop('name')" :value="$prop('value', '')">
 13 | 
 14 |     <slot></slot>
 15 |     <script>
 16 |         const _ = $vui._
 17 |         return {
 18 |             _elActive: null,
 19 |             _isOpen: false,
 20 |             get activeOption() {
 21 |                 if (!this.$api._elActive) return null
 22 |                 return $vui.$api(this.$api._elActive).value
 23 |             },
 24 |             ensureActive() {
 25 |                 let elOptions = this.enabledOptions
 26 |                 if (elOptions.length > 0 && (!this._elActive || -1 === elOptions.indexOf(this._elActive)))
 27 |                     this._elActive = elOptions[0]
 28 |             },
 29 |             open() {
 30 |                 this._isOpen = true
 31 |                 let elInput = this.$findOne(':combobox-input')
 32 |                 $vui.$api(elInput).onReset()
 33 |                 $vui.focus(elInput)
 34 |             },
 35 |             close() {
 36 |                 this._isOpen = false
 37 |                 let elInput = this.$findOne(':combobox-input')
 38 |                 $vui.$api(elInput).syncInputValue()
 39 |             },
 40 |             get isOpen() { return this._isOpen },
 41 |             isActive(el) {
 42 |                 return this._elActive === el
 43 |             },
 44 |             isSelected(val) {
 45 |                 return this.multiple ? this.value && this.value.indexOf(val) !== -1 : this.value === val
 46 |             },
 47 |             activate(el) {
 48 |                 this._elActive = el
 49 |                 if (this._elActive) {
 50 |                     $vui.scrollIntoView(this._elActive)
 51 |                 }
 52 |             },
 53 |             get enabledOptions() {
 54 |                 return _.filter(this.$find(':combobox-option'), el => !$vui.$api(el).disabled)
 55 |             },
 56 |             get selectedElements() {
 57 |                 return _.filter(this.$find(':combobox-option'), el => $vui.$api(el).selected)
 58 |             },
 59 |             activateFirstOrSelected() {
 60 |                 let els = this.selectedElements
 61 |                 if (els.length > 0) {
 62 |                     this.activate(els[0])
 63 |                 } else {
 64 |                     this.activateFirst()
 65 |                 }
 66 |             },
 67 |             activateWithStep(step) {
 68 |                 let elOptions = this.enabledOptions
 69 |                 let count = elOptions.length
 70 |                 if (count > 0) {
 71 |                     let activeIndex = elOptions.indexOf(this._elActive)
 72 |                     if (activeIndex === -1) {
 73 |                         this._elActive = elOptions[0]
 74 |                     } else {
 75 |                         let index = activeIndex + step
 76 |                         if (index < 0)
 77 |                             index = 0
 78 |                         else if (index >= count)
 79 |                             index = count - 1
 80 |                         this.activate(elOptions[index])
 81 |                     }
 82 |                 }
 83 |             },
 84 |             activateFirst() {
 85 |                 let elOptions = this.enabledOptions
 86 |                 let count = elOptions.length
 87 |                 if (count > 0) this.activate(elOptions[0])
 88 |             },
 89 |             activateLast() {
 90 |                 let elOptions = this.enabledOptions
 91 |                 let count = elOptions.length
 92 |                 if (count > 0) this.activate(elOptions[count - 1])
 93 |             },
 94 |             select(val) {
 95 |                 if (!this.multiple)
 96 |                     this.value = val
 97 |                 else if (_.isArray(this.value)) {
 98 |                     let index = this.value.indexOf(val)
 99 |                     if (index === -1)
100 |                         this.value.push(val)
101 |                     else
102 |                         this.value.splice(index, 1)
103 |                 } else
104 |                     this.value = [val]
105 |             },
106 |             selectActive() {
107 |                 if (this._elActive) {
108 |                     this.select($vui.$api(this._elActive).value)
109 |                 }
110 |             }
111 |         }
112 |     </script>
113 | </template>
114 | 
115 | <template x-component:hui="combobox-options" x-show="$api && $api.context.isOpen" @click.outside="$api.context.close()">
116 |     <slot></slot>
117 |     <script>
118 |         return {
119 |             get context() { return this.$of(':combobox') }
120 |         }
121 |     </script>
122 | </template>
123 | <template x-component:hui="combobox-option" x-data="{
124 |     get disabled() {return $prop('disabled')},
125 |     get active() {return $api.active},
126 |     get value() {return $prop('value')},
127 |     get selected() {return $api.selected},
128 | }" @mousemove="$api.activate()" @click="$api.onSelect()">
129 |     <slot></slot>
130 |     <script>
131 |         return {
132 |             get context() { return this.$of(':combobox') },
133 |             get active() {
134 |                 let context = this.context
135 |                 return context && context.isActive && context.isActive(this.$el)
136 |             },
137 |             get selected() {
138 |                 let context = this.context
139 |                 return context && context.isSelected && context.isSelected(this.value)
140 |             },
141 |             activate() { this.context.activate(this.$el) },
142 |             select() { this.context.select(this.value) },
143 |             close() { this.context.close() },
144 |             onSelect() {
145 |                 if (!this.disabled) {
146 |                     this.select()
147 |                     if (!this.context.multiple) this.close()
148 |                 }
149 |             }
150 |         }
151 |     </script>
152 | </template>
153 | 
154 | <template x-component:hui.unwrap="combobox-button">
155 |     <button @click="$api.toggle()">
156 |         <slot></slot>
157 |     </button>
158 |     <script>
159 |         return {
160 |             get context() { return this.$of(':combobox') },
161 |             toggle() {
162 |                 let context = this.context
163 |                 if (context.isOpen)
164 |                     context.close()
165 |                 else {
166 |                     context.open()
167 |                     context.activateFirstOrSelected()
168 |                 }
169 |             }
170 |         }
171 |     </script>
172 | </template>
173 | <template x-component:hui.unwrap="combobox-input">
174 |     <input tabindex="0" @keydown="$api.onKeydown($event)" @click="$api.ensureOpen()" @input.stop="$api.onInput()"
175 |         :placeholder="$prop('placeholder') || $api && $api.displayValue" />
176 |     <script>
177 |         return {
178 |             get context() { return this.$of(':combobox') },
179 |             get displayValue() {
180 |                 const displayValueFunc = this.$prop('display-value')
181 |                 let val = this.context.value
182 |                 if (displayValueFunc && val)
183 |                     val = displayValueFunc(val)
184 |                 return $vui._.isString(val) ? val : ''
185 |             },
186 |             onMounted() {
187 |                 $vui.effect(() => this.syncInputValue())
188 |             },
189 |             syncInputValue() {
190 |                 this.$el.value = this.displayValue
191 |                 $vui.nextTick(() => this.$dispatch('change'))
192 |             },
193 |             ensureOpen() {
194 |                 if (!this.context.isOpen) {
195 |                     this.context.open()
196 |                     this.context.activateFirstOrSelected()
197 |                 }
198 |             },
199 |             onReset() {
200 |                 this.$el.value = ''
201 |                 this.$dispatch('change')
202 |             },
203 |             onInput() {
204 |                 this.ensureOpen()
205 |                 this.$dispatch('change')
206 |                 $vui.nextTick(() => {
207 |                     this.context.ensureActive()
208 |                 })
209 |             },
210 |             onKeydown(e) {
211 |                 let context = this.context
212 |                 switch (e.key) {
213 |                     case 'Escape':
214 |                         e.preventDefault()
215 |                         e.stopPropagation()
216 |                         context.close()
217 |                         this.$el.blur()
218 |                         break;
219 |                     case 'Enter':
220 |                         e.preventDefault()
221 |                         e.stopPropagation()
222 |                         context.selectActive()
223 |                         if (!context.multiple) context.close()
224 |                         this.$el.blur()
225 |                         break;
226 |                     case 'ArrowDown':
227 |                         e.preventDefault()
228 |                         e.stopPropagation()
229 |                         this.ensureOpen()
230 |                         context.activateWithStep(1)
231 |                         break;
232 |                     case 'ArrowUp':
233 |                         e.preventDefault()
234 |                         e.stopPropagation()
235 |                         this.ensureOpen()
236 |                         context.activateWithStep(-1)
237 |                         break;
238 |                 }
239 |             }
240 |         }
241 |     </script>
242 | </template>
243 | <template x-component:hui="combobox-label" @click="$api.focusInput()">
244 |     <slot></slot>
245 |     <script>
246 |         return {
247 |             focusInput() {
248 |                 let context = this.$api.$of(':combobox')
249 |                 context.open()
250 |             }
251 |         }
252 |     </script>
253 | </template>


--------------------------------------------------------------------------------
/components/dialog.html:
--------------------------------------------------------------------------------
 1 | <template x-component:hui="dialog" x-modelable="_isOpen" x-show="_isOpen" x-trap.inert.noscroll="_isOpen"
 2 |     @keydown.escape="$api.close()" x-data="{
 3 |     _isOpen: false
 4 | }">
 5 |     <slot></slot>
 6 |     <script>
 7 |         const _ = $vui._
 8 |         return {
 9 |             open() {
10 |                 this._isOpen = true
11 |             },
12 |             get isOpen() { return this._isOpen },
13 |             close() {
14 |                 if (this.$prop('open'))
15 |                     this.$dispatch('close', false)
16 |                 else
17 |                     this._isOpen = false
18 |             },
19 |             toggle() {
20 |                 if (this.isOpen)
21 |                     this.close()
22 |                 else
23 |                     this.open()
24 |             },
25 |             onMounted() {
26 |                 if (this.$prop('open') !== undefined) {
27 |                     $vui.effect(() => {
28 |                         this._isOpen = this.$prop('open')
29 |                     })
30 |                 }
31 |             }
32 |         }
33 |     </script>
34 | </template>
35 | <template x-component:hui="dialog-overlay" x-show="$api && $api.context.isOpen"
36 |     @click.prevent.stop="$api.context.close()">
37 |     <slot></slot>
38 |     <script>
39 |         return {
40 |             get context() { return this.$of(':dialog') },
41 |         }
42 |     </script>
43 | </template>
44 | <template x-component:hui="dialog-panel" @click.outside="$api.context.close()" x-show="$api && $api.context.isOpen">
45 |     <slot></slot>
46 |     <script>
47 |         return {
48 |             get context() { return this.$of(':dialog') },
49 |         }
50 |     </script>
51 | </template>
52 | <template x-component:hui="dialog-title">
53 |     <slot></slot>
54 |     <script>
55 |         return {
56 |             get context() { return this.$of(':dialog') },
57 |         }
58 |     </script>
59 | </template>
60 | <template x-component:hui="dialog-description">
61 |     <slot></slot>
62 | </template>


--------------------------------------------------------------------------------
/components/listbox.html:
--------------------------------------------------------------------------------
  1 | <template x-component:hui="listbox" x-modelable="value" x-data="{
  2 |     value: null,
  3 |     get disabled() {return $prop('disabled')},
  4 |     get multiple() {return $prop('multiple')}
  5 | }">
  6 | 
  7 |     <input type="hidden" :name="$prop('name')" :value="$prop('value', '')">
  8 | 
  9 |     <slot></slot>
 10 |     <script>
 11 |         const _ = $vui._
 12 |         return {
 13 |             _elActive: null,
 14 |             _isOpen: false,
 15 |             open() {
 16 |                 this._isOpen = true
 17 |                 $vui.focus(this.$findOne(':listbox-options'))
 18 |             },
 19 |             close() { this._isOpen = false },
 20 |             get isOpen() { return this._isOpen },
 21 |             isActive(el) {
 22 |                 return this._elActive === el
 23 |             },
 24 |             isSelected(val) {
 25 |                 return this.multiple ? this.value && this.value.indexOf(val) !== -1 : this.value === val
 26 |             },
 27 |             activate(el) {
 28 |                 this._elActive = el
 29 |                 if (this._elActive) {
 30 |                     $vui.scrollIntoView(this._elActive)
 31 |                 }
 32 |             },
 33 |             get enabledOptions() {
 34 |                 return _.filter(this.$find(':listbox-option'), el => !$vui.$api(el).disabled)
 35 |             },
 36 |             get selectedElements() {
 37 |                 return _.filter(this.$find(':listbox-option'), el => !$vui.$api(el).selected)
 38 |             },
 39 |             activateFirstOrSelected() {
 40 |                 let els = this.selectedElements
 41 |                 if (els.length > 0) {
 42 |                     this.activate(els[0])
 43 |                 } else {
 44 |                     this.activateFirst()
 45 |                 }
 46 |             },
 47 |             activateWithStep(step) {
 48 |                 let elOptions = this.enabledOptions
 49 |                 let count = elOptions.length
 50 |                 if (!this._elActive) this._elActive = elOptions[0]
 51 |                 if (count > 0) {
 52 |                     let activeIndex = elOptions.indexOf(this._elActive)
 53 |                     if (activeIndex === -1) activeIndex = 0
 54 |                     let index = activeIndex + step
 55 |                     if (index < 0)
 56 |                         index = 0
 57 |                     else if (index >= count)
 58 |                         index = count - 1
 59 |                     this.activate(elOptions[index])
 60 |                 }
 61 |             },
 62 |             activateFirst() {
 63 |                 let elOptions = this.enabledOptions
 64 |                 let count = elOptions.length
 65 |                 if (count > 0) this.activate(elOptions[0])
 66 |             },
 67 |             activateLast() {
 68 |                 let elOptions = this.enabledOptions
 69 |                 let count = elOptions.length
 70 |                 if (count > 0) this.activate(elOptions[count - 1])
 71 |             },
 72 |             select(val) {
 73 |                 if (!this.multiple)
 74 |                     this.value = val
 75 |                 else if (_.isArray(this.value)) {
 76 |                     let index = this.value.indexOf(val)
 77 |                     if (index === -1)
 78 |                         this.value.push(val)
 79 |                     else
 80 |                         this.value.splice(index, 1)
 81 |                 } else
 82 |                     this.value = [val]
 83 |             },
 84 |             selectActive() {
 85 |                 if (this._elActive) {
 86 |                     this.select($vui.$api(this._elActive).value)
 87 |                 }
 88 |             }
 89 |         }
 90 |     </script>
 91 | </template>
 92 | 
 93 | <template x-component:hui="listbox-label" @click="$api.focusButton()">
 94 |     <slot></slot>
 95 |     <script>
 96 |         return {
 97 |             focusButton() {
 98 |                 let context = this.$api.$of(':listbox')
 99 |                 $vui.focus(context.$findOne(':listbox-button'))
100 |             }
101 |         }
102 |     </script>
103 | </template>
104 | 
105 | <template x-component:hui="listbox-button" @click="$api.toggle()" tabindex="0" @keydown="$api.onKeydown($event)">
106 |     <slot></slot>
107 |     <script>
108 |         return {
109 |             get context() { return this.$of(':listbox') },
110 |             onKeydown(e) {
111 |                 let context = this.context
112 |                 switch (e.key) {
113 |                     case 'Space':
114 |                     case 'Enter':
115 |                     case 'ArrowDown':
116 |                         e.preventDefault()
117 |                         context.open()
118 |                         $vui.nextTick(() => context.activateFirstOrSelected())
119 |                         break;
120 | 
121 |                     case 'ArrowUp':
122 |                         e.preventDefault()
123 |                         context.open()
124 |                         $vui.nextTick(() => context.activateLast())
125 |                         break;
126 |                 }
127 |             },
128 |             toggle() {
129 |                 let context = this.context
130 |                 if (context.isOpen)
131 |                     context.close()
132 |                 else {
133 |                     context.open()
134 |                     $vui.nextTick(() => context.activateFirstOrSelected())
135 |                 }
136 |             }
137 |         }
138 |     </script>
139 | </template>
140 | 
141 | <template x-component:hui="listbox-options" tabindex="0" x-data="{
142 |     get isOpen(){return $api && $api.isOpen}
143 | }" x-trap="isOpen" x-show="isOpen" @click.outside="$api.context.close()" @keydown="$api.onKeydown($event)"
144 |     @keydown.escape.stop.prevent="$api.context.close()" @keydown.enter.stop.prevent="$api.onSelectActive()"
145 |     @keydown.space.stop.prevent="$api.onSelectActive()">
146 |     <slot></slot>
147 |     <script>
148 |         return {
149 |             get context() { return this.$of(':listbox') },
150 |             get isOpen() { return this.context.isOpen },
151 |             onSelectActive() {
152 |                 this.context.selectActive()
153 |                 this.context.close()
154 |             },
155 |             onKeydown(e) {
156 |                 let context = this.context
157 |                 switch (e.key) {
158 |                     case 'ArrowDown':
159 |                         e.preventDefault()
160 |                         e.stopPropagation()
161 |                         context.activateWithStep(1)
162 |                         break;
163 | 
164 |                     case 'ArrowUp':
165 |                         e.preventDefault()
166 |                         e.stopPropagation()
167 |                         context.activateWithStep(-1)
168 |                         break;
169 |                     case 'Home':
170 |                     case 'PageUp':
171 |                         e.preventDefault()
172 |                         e.stopPropagation()
173 |                         context.activateFirst()
174 |                         break
175 | 
176 |                     case 'End':
177 |                     case 'PageDown':
178 |                         e.preventDefault()
179 |                         e.stopPropagation()
180 |                         context.activateLast()
181 |                         break
182 |                 }
183 |             }
184 |         }
185 |     </script>
186 | </template>
187 | 
188 | <template x-component:hui="listbox-option" x-data="{
189 |     get disabled() {return $prop('disabled')},
190 |     get active() {return $api.active},
191 |     get value() {return $prop('value')},
192 |     get selected() {return $api.selected},
193 | }" @mousemove="$api.activate()" @click="$api.onSelect()" :tabindex="-1">
194 |     <slot></slot>
195 |     <script>
196 |         return {
197 |             get context() { return this.$of(':listbox') },
198 |             get active() {
199 |                 let context = this.context
200 |                 return context && context.isActive && context.isActive(this.$el)
201 |             },
202 |             get selected() {
203 |                 let context = this.context
204 |                 return context && context.isSelected && context.isSelected(this.value)
205 |             },
206 |             activate() { this.context.activate(this.$el) },
207 |             select() { this.context.select(this.value) },
208 |             close() { this.context.close() },
209 |             onSelect() {
210 |                 if (!this.disabled) {
211 |                     this.select()
212 |                     if (!this.context.multiple)
213 |                         this.close()
214 |                 }
215 |             }
216 |         }
217 |     </script>
218 | </template>


--------------------------------------------------------------------------------
/components/menu.html:
--------------------------------------------------------------------------------
  1 | <template x-component:hui="menu" x-modelable="value" x-data="{
  2 |     value: null,
  3 |     get disabled() {return $prop('disabled')}
  4 | }">
  5 |     <slot></slot>
  6 |     <script>
  7 |         const _ = $vui._
  8 |         return {
  9 |             _elActive: null,
 10 |             _isOpen: false,
 11 |             open() {
 12 |                 this._isOpen = true
 13 |                 let elMenuItems = this.$findOne(':menu-items')
 14 |                 $vui.focus(elMenuItems)
 15 |             },
 16 |             close() { this._isOpen = false },
 17 |             get isOpen() { return this._isOpen },
 18 |             isActive(el) {
 19 |                 return this._elActive === el
 20 |             },
 21 |             isSelected(val) {
 22 |                 return this.value === val
 23 |             },
 24 |             activate(el) {
 25 |                 this._elActive = el
 26 |                 if (this._elActive) {
 27 |                     $vui.scrollIntoView(this._elActive)
 28 |                 }
 29 |             },
 30 |             get enabledOptions() {
 31 |                 return _.filter(this.$find(':menu-item'), el => !$vui.$api(el).disabled)
 32 |             },
 33 |             get selectedElements() {
 34 |                 return _.filter(this.$find(':menu-item'), el => $vui.$api(el).selected)
 35 |             },
 36 |             activateFirstOrSelected() {
 37 |                 let els = this.selectedElements
 38 |                 if (els.length > 0) {
 39 |                     this.activate(els[0])
 40 |                 } else {
 41 |                     this.activateFirst()
 42 |                 }
 43 |             },
 44 |             activateWithStep(step) {
 45 |                 let elOptions = this.enabledOptions
 46 |                 let count = elOptions.length
 47 |                 if (!this._elActive) this._elActive = elOptions[0]
 48 |                 if (count > 0) {
 49 |                     let activeIndex = elOptions.indexOf(this._elActive)
 50 |                     if (activeIndex === -1) activeIndex = 0
 51 |                     let index = activeIndex + step
 52 |                     if (index < 0)
 53 |                         index = 0
 54 |                     else if (index >= count)
 55 |                         index = count - 1
 56 |                     this.activate(elOptions[index])
 57 |                 }
 58 |             },
 59 |             activateFirst() {
 60 |                 let elOptions = this.enabledOptions
 61 |                 let count = elOptions.length
 62 |                 if (count > 0) this.activate(elOptions[0])
 63 |             },
 64 |             activateLast() {
 65 |                 let elOptions = this.enabledOptions
 66 |                 let count = elOptions.length
 67 |                 if (count > 0) this.activate(elOptions[count - 1])
 68 |             },
 69 |             select(val) {
 70 |                 this.value = val
 71 |             },
 72 |             selectActive() {
 73 |                 if (this._elActive) {
 74 |                     this.select($vui.$api(this._elActive).value)
 75 |                 }
 76 |             }
 77 |         }
 78 |     </script>
 79 | </template>
 80 | 
 81 | <template x-component:hui="menu-button" @click="$api.toggle()" tabindex="0" @keydown="$api.onKeydown($event)">
 82 |     <slot></slot>
 83 |     <script>
 84 |         return {
 85 |             get context() { return this.$of(':menu') },
 86 |             onKeydown(e) {
 87 |                 let context = this.context
 88 |                 switch (e.key) {
 89 |                     case 'Space':
 90 |                     case 'Enter':
 91 |                     case 'ArrowDown':
 92 |                         e.preventDefault()
 93 |                         context.open()
 94 |                         $vui.nextTick(() => context.activateFirstOrSelected())
 95 |                         break;
 96 | 
 97 |                     case 'ArrowUp':
 98 |                         e.preventDefault()
 99 |                         context.open()
100 |                         $vui.nextTick(() => context.activateLast())
101 |                         break;
102 |                 }
103 |             },
104 |             toggle() {
105 |                 let context = this.context
106 |                 if (context.isOpen)
107 |                     context.close()
108 |                 else {
109 |                     context.open()
110 |                     $vui.nextTick(() => context.activateFirstOrSelected())
111 |                 }
112 |             }
113 |         }
114 |     </script>
115 | </template>
116 | 
117 | <template x-component:hui="menu-items" tabindex="0" x-data="{
118 |     get isOpen(){return $api && $api.isOpen}
119 | }" x-trap="isOpen" x-show="isOpen" @click.outside="$api.context.close()" @keydown="$api.onKeydown($event)"
120 |     @keydown.tab.stop.prevent="$api.context.close()" @keydown.escape.stop.prevent="$api.context.close()"
121 |     @keydown.enter.stop.prevent="$api.onSelectActive()" @keydown.space.stop.prevent="$api.onSelectActive()">
122 |     <slot></slot>
123 |     <script>
124 |         return {
125 |             get context() {
126 |                 return this.$of(':menu')
127 |             },
128 |             get isOpen() {
129 |                 return this.context.isOpen
130 |             },
131 |             onSelectActive() {
132 |                 this.context.selectActive()
133 |                 this.context.close()
134 |             },
135 |             onKeydown(e) {
136 |                 let context = this.context
137 |                 switch (e.key) {
138 |                     case 'ArrowDown':
139 |                         e.preventDefault()
140 |                         e.stopPropagation()
141 |                         context.activateWithStep(1)
142 |                         break;
143 | 
144 |                     case 'ArrowUp':
145 |                         e.preventDefault()
146 |                         e.stopPropagation()
147 |                         context.activateWithStep(-1)
148 |                         break;
149 |                     case 'Home':
150 |                     case 'PageUp':
151 |                         e.preventDefault()
152 |                         e.stopPropagation()
153 |                         context.activateFirst()
154 |                         break
155 | 
156 |                     case 'End':
157 |                     case 'PageDown':
158 |                         e.preventDefault()
159 |                         e.stopPropagation()
160 |                         context.activateLast()
161 |                         break
162 |                 }
163 |             }
164 |         }
165 |     </script>
166 | </template>
167 | 
168 | <template x-component:hui="menu-item" x-data="{
169 |     get disabled() {return $prop('disabled')},
170 |     get active() {return $api.active},
171 |     get value() {return $prop('value')},
172 |     get selected() {return $api.selected},
173 | }" @mousemove="$api.activate()" @click="$api.onSelect()" :tabindex="-1">
174 |     <slot></slot>
175 |     <script>
176 |         return {
177 |             get context() { return this.$of(':menu') },
178 |             get active() {
179 |                 let context = this.context
180 |                 return context && context.isActive && context.isActive(this.$el)
181 |             },
182 |             get selected() {
183 |                 let context = this.context
184 |                 return context && context.isSelected && context.isSelected(this.value)
185 |             },
186 |             activate() {
187 |                 this.context.activate(this.$el)
188 |             },
189 |             select() { this.context.select(this.value) },
190 |             close() { this.context.close() },
191 |             onSelect() {
192 |                 if (!this.disabled) {
193 |                     this.select()
194 |                     this.close()
195 |                 }
196 |             }
197 |         }
198 |     </script>
199 | </template>


--------------------------------------------------------------------------------
/components/popover.html:
--------------------------------------------------------------------------------
  1 | <template x-component:hui="popover">
  2 |     <slot></slot>
  3 |     <script>
  4 |         return {
  5 |             _isOpen: false,
  6 |             open() {
  7 |                 this._isOpen = true
  8 |                 this.$dispatch('popover-close-others', { el: this.$el })
  9 |             },
 10 |             close(el) {
 11 |                 this._isOpen = false
 12 |                 if (!el) return
 13 |                 el = el || this.$findOne(':popover-button')
 14 |                 if (document.activeElement.isSameNode(el)) return
 15 |                 setTimeout(() => el.focus())
 16 |             },
 17 |             get isOpen() { return this._isOpen },
 18 |             toggle() {
 19 |                 if (this.isOpen)
 20 |                     this.close()
 21 |                 else
 22 |                     this.open()
 23 |             },
 24 |             onMounted() {
 25 |                 let elGroup = this.$closest(':popover-group')
 26 |                 if (elGroup) {
 27 |                     elGroup.addEventListener('popover-close-others', ({ detail }) => {
 28 |                         if (detail.el.isSameNode(this.$el)) return
 29 |                         this.close(false)
 30 |                     })
 31 |                 }
 32 |             }
 33 |         }
 34 |     </script>
 35 | </template>
 36 | <template x-component:hui="popover-overlay" x-show="$api && $api.context.isOpen">
 37 |     <slot></slot>
 38 |     <script>
 39 |         return {
 40 |             get context() { return this.$of(':popover') }
 41 |         }
 42 |     </script>
 43 | </template>
 44 | <template x-component:hui.unwrap="popover-button" @click="$api.onToggle()"
 45 |     @keydown.escape.stop.prevent="$api.context.close()" @keydown.enter.stop.prevent="$api.onToggle()"
 46 |     @keydown.space.stop.prevent="$api.onToggle()" @keyup.space.stop.prevent="" @keydown.tab="$api.onTabDown($event)"
 47 |     @keyup.tab="$api.onTabUp($event)">
 48 |     <button>
 49 |         <slot></slot>
 50 |     </button>
 51 |     <script>
 52 |         return {
 53 |             get context() { return this.$of(':popover') },
 54 |             onToggle() {
 55 |                 this.context.toggle()
 56 |             },
 57 |             onTabDown(e) {
 58 |                 if (!e.shiftKey && this.context.isOpen) {
 59 |                     let elPanel = this.context.$findOne(':popover-panel')
 60 |                     let firstFocusableEl = this.$focus.within(elPanel).getFirst()
 61 | 
 62 |                     if (firstFocusableEl) {
 63 |                         e.preventDefault()
 64 |                         e.stopPropagation()
 65 |                         this.$focus.focus(firstFocusableEl)
 66 |                     }
 67 |                 }
 68 |             },
 69 |             onTabUp(e) {
 70 |                 if (this.context.isOpen) {
 71 |                     // Check if the last focused element was "after" this one
 72 |                     let lastEl = this.$focus.previouslyFocused()
 73 |                     if (!lastEl) return
 74 |                     let elPanel = this.context.$findOne(':popover-panel')
 75 |                     if (
 76 |                         // Make sure the last focused wasn't part of this popover.
 77 |                         (!this.$el.contains(lastEl) && !elPanel.contains(lastEl))
 78 |                         // Also make sure it appeared "after" this button in the DOM.
 79 |                         && (lastEl && (this.$el.compareDocumentPosition(lastEl) & Node.DOCUMENT_POSITION_FOLLOWING))
 80 |                     ) {
 81 |                         e.preventDefault()
 82 |                         e.stopPropagation()
 83 |                         this.$focus.within(elPanel).last()
 84 |                     }
 85 |                 }
 86 |             }
 87 |         }
 88 |     </script>
 89 | </template>
 90 | <template x-component:hui="popover-panel" x-show="$api && $api.context.isOpen"
 91 |     x-effect="$api && $api.context.isOpen && $prop('focus') && $focus.first()"
 92 |     @keydown.escape.stop.prevent="$api.context.close()" @mousedown.window="$api && $api.onMouseDown($event)"
 93 |     @keydown.tab="$api.onTab($event)">
 94 |     <slot></slot>
 95 |     <script>
 96 |         return {
 97 |             get context() { return this.$of(':popover') },
 98 |             onMouseDown(e) {
 99 |                 let context = this.context
100 |                 if (!context.isOpen) return
101 |                 let apiTarget = $vui.$api(e.target)
102 |                 let elPanel = apiTarget.$closest(':popover-panel')
103 |                 if (elPanel === this.$el) return
104 |                 let elButton = apiTarget.$closest(':popover-button')
105 |                 if (elButton && elButton === context.$findOne(':popover-button')) return
106 | 
107 |                 if (!this.$focus.focusable(e.target)) {
108 |                     context.close()
109 |                 }
110 |             },
111 |             onTab(e) {
112 |                 let elButton = this.context.$findOne(':popover-button')
113 |                 if (e.shiftKey && this.$focus.isFirst(e.target)) {
114 |                     e.preventDefault()
115 |                     e.stopPropagation()
116 |                     this.$prop('focus') ? this.context.close() : elButton.focus()
117 |                 } else if (!e.shiftKey && this.$focus.isLast(e.target)) {
118 |                     e.preventDefault()
119 |                     e.stopPropagation()
120 | 
121 |                     // Get the next panel button:
122 |                     let els = this.$focus.within(document).all()
123 |                     let buttonIdx = els.indexOf(elButton)
124 |                     let nextEls = els
125 |                         .splice(buttonIdx + 1) // Elements after button
126 |                         .filter(el => !this.$el.contains(el)) // Ignore items in panel
127 | 
128 |                     nextEls[0].focus()
129 |                     this.$prop('focus') && this.context.close()
130 |                 }
131 |             }
132 |         }
133 |     </script>
134 | </template>
135 | <template x-component:hui="popover-group">
136 |     <slot></slot>
137 |     <script>
138 |         return {
139 | 
140 |         }
141 |     </script>
142 | </template>


--------------------------------------------------------------------------------
/components/radio-group.html:
--------------------------------------------------------------------------------
 1 | <template x-component:hui="radio-group" x-modelable="value" x-data="{value : null}">
 2 |     <slot></slot>
 3 |     <script>
 4 |         return {
 5 |             isChecked(el) {
 6 |                 return $vui.$data(el).$prop('value') === this.value
 7 |             },
 8 |             check(val) {
 9 |                 this.value = val
10 |             }
11 |         }
12 |     </script>
13 | </template>
14 | 
15 | <template x-component:hui="radio-group-option" x-data="{
16 |    get checked() {return $api.context.isChecked($el)},
17 | }" @click="$api.onCheck()">
18 |     <slot></slot>
19 |     <script>
20 |         return {
21 |             onMounted() {
22 |                 let container = this.$closest(':radio-group')
23 |                 if (!container) throw Error('radio-group-option should be contained in radio-group')
24 |             },
25 |             get context() { return this.$of(':radio-group') },
26 |             onCheck() {
27 |                 this.context.check(this.$prop('value'))
28 |             }
29 |         }
30 |     </script>
31 | </template>


--------------------------------------------------------------------------------
/components/switch.html:
--------------------------------------------------------------------------------
 1 | <template x-component:hui="switch-group">
 2 |     <slot></slot>
 3 | </template>
 4 | 
 5 | <template x-component:hui="switch" tabindex="0" x-modelable="checked" x-data="{
 6 |     checked: false
 7 | }" @click="$api.toggle()">
 8 |     <slot></slot>
 9 |     <template x-if="checked">
10 |         <input type="hidden" :name="$prop('name')" :value="$prop('value') || 'on'">
11 |     </template>
12 |     <script>
13 |         return {
14 |             toggle() {
15 |                 this.checked = !this.checked
16 |             }
17 |         }
18 |     </script>
19 | </template>
20 | 
21 | <template x-component:hui="switch-label">
22 |     <slot></slot>
23 | </template>
24 | 
25 | <template x-component:hui="switch-description">
26 |     <slot></slot>
27 | </template>


--------------------------------------------------------------------------------
/components/tabs.html:
--------------------------------------------------------------------------------
 1 | <template x-component:hui="tab-group" x-modelable="value" x-data="{value : null}">
 2 |     <slot></slot>
 3 |     <script>
 4 |         return {
 5 |             isSelected(val) {
 6 |                 return val === this.value
 7 |             },
 8 |             select(val) {
 9 |                 this.value = val
10 |             },
11 |             get manual() { return this.$prop('manual') },
12 |             get activeTabs() {
13 |                 return $vui._.filter(this.$find(':tab'), el => !$vui.$api(el).disabled)
14 |             },
15 |             focusFirst() {
16 |                 this.$focus.within(this.activeTabs).first()
17 |             },
18 |             focusLast() {
19 |                 this.$focus.within(this.activeTabs).last()
20 |             },
21 |             focusPrev() {
22 |                 this.$focus.within(this.activeTabs).withWrapAround().prev()
23 |             },
24 |             focusNext() {
25 |                 this.$focus.within(this.activeTabs).withWrapAround().next()
26 |             }
27 |         }
28 |     </script>
29 | </template>
30 | <template x-component:hui="tab-list">
31 |     <slot></slot>
32 |     <script>
33 |         return {
34 |             onMounted() {
35 |                 let container = this.$closest(':tab-group')
36 |                 if (!container) throw Error('tab-list should be contained in tab-group')
37 |             }
38 |         }
39 |     </script>
40 | </template>
41 | <template x-component:hui="tab" x-data="{
42 |     get selected(){return $api && $api.context.isSelected($api.value)}
43 | }" @click="$api.onSelect(); $el.focus()" @focus="$api.onFocus()" @keydown.enter.prevent.stop="$api.onSelect()"
44 |     @keydown.space.prevent.stop="$api.onSelect()" @keydown.home.prevent.stop="$api.context.focusFirst()"
45 |     @keydown.page-up.prevent.stop="$api.context.focusFirst()" @keydown.end.prevent.stop="$api.context.focusLast()"
46 |     @keydown.page-down.prevent.stop="$api.context.focusLast()" @keydown.down.prevent.stop="$api.context.focusNext()"
47 |     @keydown.right.prevent.stop="$api.context.focusNext()" @keydown.up.prevent.stop="$api.context.focusPrev()"
48 |     @keydown.left.prevent.stop="$api.context.focusPrev()" :tabindex="selected && !$api.disabled ? 0 : -1">
49 |     <slot></slot>
50 |     <script>
51 |         return {
52 |             get context() { return this.$of(':tab-group') },
53 |             get value() { return this.$prop('value') },
54 |             get disabled() { return this.$prop('disabled') },
55 |             onMounted() {
56 |                 let container = this.$closest(':tab-list')
57 |                 if (!container) throw Error('tab should be contained in tab-list')
58 |             },
59 |             onSelect() {
60 |                 if (this.disabled) return
61 |                 this.context.select(this.value)
62 |             },
63 |             onFocus() {
64 |                 if (this.disabled) return
65 |                 if (!this.context.manual) {
66 |                     this.onSelect()
67 |                 }
68 |                 this.$el.focus()
69 |             }
70 |         }
71 |     </script>
72 | </template>
73 | <template x-component:hui="tab-panels">
74 |     <slot></slot>
75 |     <script>
76 |         return {
77 |             onMounted() {
78 |                 let container = this.$closest(':tab-group')
79 |                 if (!container) throw Error('tab-panels should be contained in tab-group')
80 |             }
81 |         }
82 |     </script>
83 | </template>
84 | <template x-component:hui="tab-panel" x-data="{
85 |     get selected(){return $api && $api.context.isSelected($prop('value'))}
86 | }" x-show="selected" :tabindex="selected ? 0 : -1">
87 |     <slot></slot>
88 |     <script>
89 |         return {
90 |             get context() { return this.$of(':tab-group') },
91 |             onMounted() {
92 |                 let container = this.$closest(':tab-panels')
93 |                 if (!container) throw Error('tab-panel should be contained in tab-panels')
94 |             }
95 |         }
96 |     </script>
97 | </template>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@vimesh/headless",
 3 |   "version": "0.7.0",
 4 |   "repository": "https://github.com/vimeshjs/vimesh-headless.git",
 5 |   "author": "Jacky ZHANG <xinjie.zhang@gmail.com>",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "dev": "http-server"
 9 |   },
10 |   "dependencies": {},
11 |   "devDependencies": {
12 |     "@alpinejs/persist": "^3.13.0",
13 |     "@iconscout/unicons": "^4.0.8",
14 |     "@vimesh/style": "^1.1.0",
15 |     "@vimesh/ui": "^0.12.4",
16 |     "alpinejs": "^3.10.5",
17 |     "http-server": "^14.1.1",
18 |     "universal-router": "^9.1.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/playground/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vimeshjs/vimesh-headless/5a1abed7adee6e704ec02a7b3f4a79b4b6260873/playground/assets/favicon.ico


--------------------------------------------------------------------------------
/playground/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="354px" height="381px" viewBox="0 0 354 381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
 4 |     <title>编组</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <linearGradient x1="36.7142408%" y1="6.97128771%" x2="96.604709%" y2="39.1462229%" id="linearGradient-1">
 8 |             <stop stop-color="#F79744" offset="0%"></stop>
 9 |             <stop stop-color="#F14582" offset="100%"></stop>
10 |         </linearGradient>
11 |         <linearGradient x1="93.1486148%" y1="50%" x2="50%" y2="54.3679779%" id="linearGradient-2">
12 |             <stop stop-color="#F3835C" offset="0%"></stop>
13 |             <stop stop-color="#F2567D" offset="100%"></stop>
14 |         </linearGradient>
15 |         <linearGradient x1="-4.58823974%" y1="43.7639826%" x2="106.14394%" y2="43.7639826%" id="linearGradient-3">
16 |             <stop stop-color="#F14A85" offset="0%"></stop>
17 |             <stop stop-color="#F4974F" offset="100%"></stop>
18 |         </linearGradient>
19 |         <linearGradient x1="94.3068603%" y1="47.6420975%" x2="2.83461848%" y2="47.6420975%" id="linearGradient-4">
20 |             <stop stop-color="#F68F61" offset="0%"></stop>
21 |             <stop stop-color="#C71A58" offset="100%"></stop>
22 |         </linearGradient>
23 |     </defs>
24 |     <g id="系统" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
25 |         <g id="LOGO设计" transform="translate(-866.000000, -615.000000)" stroke-width="20">
26 |             <g id="编组" transform="translate(866.000000, 610.000000)">
27 |                 <path d="M187.757575,19.664462 C178.628713,14.5720502 167.507332,14.598583 158.402872,19.7344951 L25.2602272,94.8415239 C15.8318387,100.160167 10,110.145715 10,120.970801 L10,240.871974 C10,251.594192 15.7224647,261.501255 25.0103021,266.858682 L123.627327,323.743127 C132.998825,329.14881 144.554961,329.089905 153.870864,323.588964 L289.95483,243.232852 C299.093541,237.836542 304.700991,228.013327 304.700991,217.400306 L304.700991,102.516718 C304.700991,91.640406 298.814316,81.6159589 289.31592,76.3174079 L187.757575,19.664462 Z" id="多边形" stroke="url(#linearGradient-1)" transform="translate(157.350495, 172.035024) scale(-1, 1) translate(-157.350495, -172.035024) "></path>
28 |                 <g id="编组-2" transform="translate(78.000000, 173.000000)" stroke="url(#linearGradient-2)" stroke-linecap="round">
29 |                     <path d="M0,57.0054001 L89.2746926,4.39350874 C93.8884368,1.67450964 99.6018074,1.62151195 104.265197,4.2544556 L203,60" id="路径-46"></path>
30 |                 </g>
31 |                 <path d="M226.505717,21.9697958 C217.376855,16.877384 206.255474,16.9039169 197.151014,22.0398289 L64.008369,97.1468578 C54.5799805,102.465501 48.7481418,112.451049 48.7481418,123.276134 L48.7481418,243.177308 C48.7481418,253.899525 54.4706064,263.806589 63.7584438,269.164016 L162.375469,326.04846 C171.746967,331.454144 183.303103,331.395239 192.619006,325.894298 L328.702972,245.538186 C337.841682,240.141875 343.449132,230.318661 343.449132,219.70564 L343.449132,104.822052 C343.449132,93.9457399 337.562457,83.9212928 328.064062,78.6227418 L226.505717,21.9697958 Z" id="多边形" stroke="url(#linearGradient-3)"></path>
32 |                 <path d="M194.385716,40.2671369 C185.118959,34.777824 173.620707,34.677382 164.259469,40.0039719 L63.8787033,97.1211119 C54.5178542,102.44748 48.730491,112.382972 48.7152352,123.153091 L48.4818652,287.904533 C48.4666711,298.631077 54.1796835,308.549562 63.46585,313.918555 L163.213942,371.590015 C172.626756,377.032231 184.247434,376.955502 193.587561,371.389462 L289.833873,314.033632 C298.902858,308.629174 304.463622,298.855653 304.476218,288.298452 L304.673761,122.731298 C304.686421,112.120398 299.092908,102.29213 289.963527,96.8841944 L194.385716,40.2671369 Z" id="多边形" stroke="url(#linearGradient-4)"></path>
33 |             </g>
34 |         </g>
35 |     </g>
36 | </svg>


--------------------------------------------------------------------------------
/playground/assets/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.29.0
2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
3 | code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
4 | 


--------------------------------------------------------------------------------
/playground/components/code-viewer.html:
--------------------------------------------------------------------------------
 1 | <link href="./assets/prism.css" rel="stylesheet" />
 2 | <script src="./assets/prism.js" data-manual></script>
 3 | 
 4 | <template x-component:app="code-viewer" x-data="{
 5 |     get language(){return this.$prop('language', 'html')},
 6 |     get code(){return this.$prop('code', '')},
 7 |     highlighted: ''
 8 | }">
 9 |     <pre><code :class="`language-${language}`" x-html="highlighted"></code></pre>
10 |     <script>
11 |         return {
12 |             onCodeChanged() {
13 |                 this.highlighted = Prism.highlight(this.code, Prism.languages[this.language], this.language)
14 |             },
15 |             onMounted() {
16 |                 this.$watch('code', () => this.onCodeChanged())
17 |                 this.onCodeChanged()
18 |             }
19 |         }
20 |     </script>
21 | </template>


--------------------------------------------------------------------------------
/playground/components/header.html:
--------------------------------------------------------------------------------
 1 | <template x-component:app="header" class="bg-gray-900 flex">
 2 |     <img src="./assets/logo.svg" class="w-8 inline-block flex-none">
 3 |     <span class="ml-2 text-2xl text-white align-middle flex-1"> Vimesh Headless UI </span>
 4 |     <a class="text-gray-400 hover:text-white flex-none" target="_blank" href="https://github.com/vimeshjs/vimesh-headless"><span class="sr-only">GitHub repository</span>
 5 |         <svg viewBox="0 0 16 16" fill="currentColor" class="h-8 w-8 mx-2"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
 6 |     <script>
 7 |         return {
 8 | 
 9 |         }
10 |     </script>
11 | </template>


--------------------------------------------------------------------------------
/playground/components/key-caster.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
 3 |     let KeyDisplay = isMac
 4 |         ? {
 5 |             ArrowUp: '↑',
 6 |             ArrowDown: '↓',
 7 |             ArrowLeft: '←',
 8 |             ArrowRight: '→',
 9 |             Home: '↖',
10 |             End: '↘',
11 |             Alt: '⌥',
12 |             CapsLock: '⇪',
13 |             Meta: '⌘',
14 |             Shift: '⇧',
15 |             Control: '⌃',
16 |             Backspace: '⌫',
17 |             Delete: '⌦',
18 |             Enter: '↵',
19 |             Escape: '⎋',
20 |             Tab: '⇥',
21 |             ShiftTab: '⇤',
22 |             PageUp: '⇞',
23 |             PageDown: '⇟',
24 |             ' ': '␣',
25 |         }
26 |         : {
27 |             ArrowUp: '↑',
28 |             ArrowDown: '↓',
29 |             ArrowLeft: '←',
30 |             ArrowRight: '→',
31 |             Meta: 'Win',
32 |             Control: 'Ctrl',
33 |             Backspace: '⌫',
34 |             Delete: 'Del',
35 |             Escape: 'Esc',
36 |             PageUp: 'PgUp',
37 |             PageDown: 'PgDn',
38 |             ' ': '␣',
39 |         }
40 | 
41 |     function setupKeyCasterData() {
42 |         let keys = []
43 |         return {
44 |             keys,
45 |             onKeyDown(event) {
46 |                 this.keys.unshift(
47 |                     event.shiftKey && event.key !== 'Shift'
48 |                         ? KeyDisplay[`Shift${event.key}`] || event.key
49 |                         : KeyDisplay[event.key] || event.key
50 |                 )
51 |                 setTimeout(() => this.keys.pop(), 2000)
52 |             }
53 |         }
54 |     }
55 | </script>
56 | <template x-component:app.unwrap="key-caster" x-data="setupKeyCasterData()" @keydown.window="onKeyDown($event)">
57 |     <div class="pointer-events-none fixed right-4 bottom-68 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow"
58 |         x-show="keys.length > 0">
59 |         <span x-text="keys.slice().reverse().join(' ')"></span>
60 |     </div>
61 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/footer.html:
--------------------------------------------------------------------------------
 1 | <template x-component:app="footer">
 2 |     <div class="mt-24 mb-16 w-full relative" style="height:8px;">
 3 |         <svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
 4 |             <pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
 5 |                 <g clip-path="url(#clip0_2426_11367)">
 6 |                     <path
 7 |                         d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
 8 |                         stroke="#E1E3E1" stroke-linecap="square"></path>
 9 |                 </g>
10 |             </pattern>
11 |             <rect width="100%" height="100%" fill="url(#a)"></rect>
12 |         </svg>
13 |     </div>
14 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/on-this-page.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const onThisPage = {
 3 |         data() {
 4 |             return {
 5 |                 top: 500,
 6 |                 list: [],
 7 |                 init() {
 8 |                     this.$nextTick(() => {
 9 |                         this.top = this.$prop('top', 500);
10 |                         this.list = this.$prop('list', []);
11 |                     })
12 |                 },
13 |                 onSelect(index) {
14 |                     if (this.list[index].hrefid) {
15 |                         this.$dispatch('on-select', this.list[index].hrefid);
16 |                     }
17 |                 }
18 |             }
19 |         },
20 |         scroll(e) {
21 |             const onThisPage = document.getElementById('onThisPage');
22 |             const top = +onThisPage.style.top.replace('px', '');
23 |             if (e.target.scrollTop <= (top - 60)) {
24 |                 onThisPage.style.marginTop = `${-1 * e.target.scrollTop}px`;
25 |             }
26 |         },
27 |     };
28 | </script>
29 | <template x-component:app="on-this-page" x-data="onThisPage.data">
30 |     <div id="onThisPage" class="absolute bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 p-4 rounded-lg" :style="`width: 200px; right: 20px; top:${top}px;`">
31 |         <div class="px-6 font-xs font-light">On this page</div>
32 |         <template x-for="(item,index) in list">
33 |             <div :class="`px-6 py-1 font-normal rounded-full cursor-pointer ${$prop('selected',0) === index ? `font-semibold border` : ``}`"
34 |                 x-text="item.text" @click="onSelect(index)"></div>
35 |         </template>
36 |     </div>
37 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/page-container.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const pageContainer = {
 3 |         data() {
 4 |             return {
 5 |                 init() {
 6 |                     setTimeout(() => {
 7 |                         this.$nextTick(() => {
 8 |                             const mainPageContainer = document.getElementById('mainPageContainer');
 9 |                             this.$store.page.mainSize.width = mainPageContainer.getBoundingClientRect().width;
10 |                         })
11 |                     }, 600)
12 |                 }
13 |             }
14 |         }
15 |     }
16 | </script>
17 | 
18 | <template x-component:app="page-container" id="mainPageContainer"
19 |     :class="`bg-transparent w-full text-black dark:text-slate-300 dark:bg-neutral-800 p-2 overflow-y-auto ${$prop('class', '')}`"
20 |     :style="`height:${$store.page.size.height - ($store.page.showTopbar ? 60 : 0)}px; ${$prop('style', '')}`"
21 |     x-data="pageContainer.data" x-on:scroll="$prop('scroll', () => { })">
22 |     <slot></slot>
23 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/side-menu.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function appSideMenuData() {
 3 |         return {
 4 |             selected: this.$route.path,
 5 |             isSelected(menu) {
 6 |                 const start = menu.path.startsWith('/') ? `/${menu.path.split('/')[1]}` : 'abc';
 7 |                 return this.selected.startsWith(start);
 8 |             }
 9 |         }
10 |     };
11 | </script>
12 | <template x-component:app="side-menu" x-data="appSideMenuData">
13 |     <div :class="`bg-${$store.page.color}-100 font-medium text-${$store.page.color}-600 dark:text-${$store.page.color}-200 dark:bg-${$store.page.color}-700 py-4 h-full grid shadow`"
14 |         style="grid-template-rows: auto 60px;">
15 |         <div>
16 |             <template x-for="menu in $prop('menus',[])">
17 |                 <div class="mb-6">
18 |                     <a class="font-medium text-${$store.page.color}-600" :href="`#${menu.path}`">
19 |                         <button x-on:click="selected = menu.path"
20 |                             @mouseenter.debounce="$dispatch('open-sub-menu', menu)"
21 |                             :class="`m-auto flex justify-center px-4 py-1 hover:bg-${$store.page.color}-200 dark:hover:bg-${$store.page.color}-600 rounded-full cursor-pointer ${isSelected(menu) ? `bg-${$store.page.color}-200 dark:bg-${$store.page.color}-800` : ''}`">
22 |                             <i :class="`uil uil-${menu.icon} text-2xl`"></i>
23 |                         </button>
24 |                         <div :class="`flex justify-center pt-1 text-xs ${isSelected(menu) ? 'font-bold dark:text-sky-200' : ''}`"
25 |                             x-text="menu.name"></div>
26 |                     </a>
27 |                 </div>
28 |             </template>
29 |         </div>
30 |         <button x-on:click="$store.persist.changeTheme()"
31 |             :class="`m-auto flex justify-center p-3 dark:hover:bg-${$store.page.color}-600 rounded-full cursor-pointer border`">
32 |             <i :class="`uil uil-${$store.persist.theme==='dark'?'brightness':'moon'} text-2xl`"></i>
33 |         </button>
34 |     </div>
35 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/tab-list.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const appTabList = {
 3 |         data() {
 4 |             return {
 5 |                 list: [],
 6 |                 init() {
 7 |                     this.$nextTick(() => {
 8 |                         this.list = this.$prop('list', []);
 9 |                     })
10 |                 },
11 |                 onSelect(index) {
12 |                     this.$dispatch('on-select', index);
13 |                 }
14 |             }
15 |         },
16 |         scroll(e) {
17 |             const topContainer = document.getElementById('topContainer');
18 |             const tabListContainer = document.getElementById('tabListContainer');
19 |             const tabListInnerContainer = document.getElementById('tabListInnerContainer');
20 |             if (e.target.scrollTop >= topContainer.getBoundingClientRect().height) {
21 |                 tabListContainer.classList.add('absolute');
22 |                 tabListContainer.classList.add('top-0');
23 |                 tabListContainer.classList.add('text-xl');
24 |                 tabListContainer.classList.add('scale-70');
25 | 
26 |                 tabListInnerContainer.classList.add('shadow-md');
27 | 
28 |             } else {
29 |                 tabListContainer.classList.remove('absolute');
30 |                 tabListContainer.classList.remove('top-0');
31 |                 tabListContainer.classList.remove('text-xl');
32 |                 tabListContainer.classList.remove('scale-70');
33 | 
34 |                 tabListInnerContainer.classList.remove('shadow-md');
35 |             }
36 |         },
37 |     };
38 | </script>
39 | <template x-component:app="tab-list" x-data="appTabList.data">
40 |     <div id="tabListContainer" class="h-20 flex justify-center transition-transform	delay-100 ease-in-in"
41 |         :style="`width:${$store.page.mainSize.width - 32}px`">
42 |         <div id="tabListInnerContainer"
43 |             :class="`bg-gray-100 font-medium text-dark dark:text-neutral-200 dark:bg-neutral-700 flex justify-between rounded-full w-full h-full`">
44 |             <template x-for="(item,index) in list">
45 |                 <div :class="`h-full rounded-full flex grow justify-center items-center cursor-pointer ${$prop('selected',0) === index ? `font-semibold bg-${$store.page.color}-200 hover:bg-${$store.page.color}-300 dark:bg-${$store.page.color}-400 dark:hover:bg-${$store.page.color}-500` : `bg-transparent hover:bg-gray-300 dark:bg-transparent dark:hover:bg-neutral-700`}`"
46 |                     x-text="item" @click="onSelect(index)"></div>
47 |             </template>
48 |         </div>
49 |     </div>
50 | </template>


--------------------------------------------------------------------------------
/playground/components/m3/app/topbar.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function appTopbarData() {
 3 |         return {
 4 |             selected: null,
 5 |         }
 6 |     };
 7 | </script>
 8 | <template x-component:app="topbar" x-data="appTopbarData">
 9 |     <div :class="`bg-${$store.page.color}-100 font-medium text-${$store.page.color}-600 dark:text-neutral-200 dark:bg-neutral-800 flex items-center h-full`">
10 |         <div class="px-3 flex items-center gap-4">
11 |             <button :class="`hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-full p-3`"
12 |                 @click="$dispatch('open-sub-menu-all')">
13 |                 <i class="uil uil-bars text-2xl"></i>
14 |             </button>
15 |             <button :class="`hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-full px-3 py-1 flex gap-3`">
16 |                 <i class="uil uil-home text-2xl"></i>
17 |                 <div class="whitespace-nowrap">Material Design 3</div>
18 |             </button>
19 |         </div>
20 | 
21 |     </div>
22 | </template>


--------------------------------------------------------------------------------
/playground/components/side-menu.html:
--------------------------------------------------------------------------------
 1 | <template x-component:app="side-menu" class="bg-gray-900 p-2">
 2 |     <ul>
 3 |         <template x-for="item in routes" :key="item.path">
 4 |             <template x-if="!item.hidden">
 5 |                 <a :href="'#' + item.path" tabindex="-1">
 6 |                     <li x-text="item.name" tabindex="-1"
 7 |                         class="flex items-center whitespace-nowrap rounded py-1 px-6 font-medium transition-colors duration-200 hover:bg-gray-700 lg:py-1 lg:px-4 lg:text-sm "
 8 |                         :class="$api && $api.isCurrent(item) ? 'text-white' : 'text-gray-500 hover:text-gray-200'"
 9 |                         >
10 |                     </li>
11 |                 </a>
12 |             </template>
13 |         </template>
14 |     </ul>
15 |     <script>
16 |         return {
17 |             isCurrent(item) {
18 |                 return this.$route.path === item.path
19 |             }
20 |         }
21 |     </script>
22 | </template>


--------------------------------------------------------------------------------
/playground/data/side-menu.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "path": "/home",
  4 |     "name": "Home",
  5 |     "icon": "home",
  6 |     "color": "neutral",
  7 |     "children": []
  8 |   },
  9 |   {
 10 |     "path": "/get-started",
 11 |     "name": "Get started",
 12 |     "icon": "elipsis-double-v-alt",
 13 |     "color": "blue"
 14 |   },
 15 |   {
 16 |     "path": "/develop/overview",
 17 |     "name": "Develop",
 18 |     "icon": "arrow",
 19 |     "color": "sky",
 20 |     "children": [
 21 |       { "path": "/develop/overview", "name": "Develop overview" },
 22 |       {
 23 |         "path": "/develop/android",
 24 |         "name": "Android",
 25 |         "children": [
 26 |           { "path": "/develop/android/mdc-android", "name": "MDC-Android" },
 27 |           {
 28 |             "path": "/develop/android/jetpack-compose",
 29 |             "name": "Jetpack Compose"
 30 |           }
 31 |         ]
 32 |       },
 33 |       { "path": "/develop/flutter", "name": "Flutter" },
 34 |       { "path": "/develop/web", "name": "Web" }
 35 |     ]
 36 |   },
 37 |   {
 38 |     "path": "/foundations/overview",
 39 |     "color": "sky",
 40 |     "name": "Foundations",
 41 |     "icon": "file-bookmark-alt",
 42 |     "children": [
 43 |       { "path": "/foundations/overview", "name": "Foundations overview" },
 44 |       { "path": "/foundations/accessible-design", "name": "Accessibility" },
 45 |       {
 46 |         "path": "",
 47 |         "name": "Content design",
 48 |         "children": [
 49 |           { "path": "", "name": "Overview" },
 50 |           { "path": "", "name": "Style guide" }
 51 |         ]
 52 |       },
 53 |       { "path": "", "name": "Customizing Material" },
 54 |       { "path": "", "name": "Design tokens" },
 55 |       {
 56 |         "path": "",
 57 |         "name": "Interaction",
 58 |         "children": [
 59 |           { "path": "", "name": "Gestures" },
 60 |           { "path": "", "name": "Inputs" },
 61 |           { "path": "", "name": "Selection" },
 62 |           { "path": "", "name": "States" }
 63 |         ]
 64 |       },
 65 |       {
 66 |         "path": "",
 67 |         "name": "Layout",
 68 |         "children": [
 69 |           {
 70 |             "path": "",
 71 |             "name": "Understanding layout"
 72 |           },
 73 |           {
 74 |             "path": "",
 75 |             "name": "Applying layout"
 76 |           },
 77 |           {
 78 |             "path": "",
 79 |             "name": "Canonical layouts"
 80 |           }
 81 |         ]
 82 |       },
 83 |       {
 84 |         "path": "",
 85 |         "name": "Material A-Z"
 86 |       }
 87 |     ]
 88 |   },
 89 |   {
 90 |     "path": "/styles",
 91 |     "color": "sky",
 92 |     "name": "Styles",
 93 |     "icon": "palette",
 94 |     "children": [
 95 |       { "path": "", "name": "Style overview" },
 96 |       {
 97 |         "path": "",
 98 |         "name": "Color",
 99 |         "children": [
100 |           { "path": "", "name": "Overview" },
101 |           { "path": "", "name": "Color system" },
102 |           { "path": "", "name": "Dynamic color" }
103 |         ]
104 |       },
105 |       { "path": "", "name": "Elvation" },
106 |       { "path": "", "name": "Icons" },
107 |       {
108 |         "path": "",
109 |         "name": "Motion",
110 |         "children": [
111 |           { "path": "", "name": "Overview" },
112 |           { "path": "", "name": "Easing and duration" },
113 |           { "path": "", "name": "Transitions" }
114 |         ]
115 |       },
116 |       {
117 |         "path": "",
118 |         "name": "Shape"
119 |       },
120 |       {
121 |         "path": "",
122 |         "name": "Typography"
123 |       }
124 |     ]
125 |   },
126 |   {
127 |     "path": "/components",
128 |     "color": "sky",
129 |     "name": "Components",
130 |     "icon": "plus-circle",
131 |     "children": [
132 |       { "path": "", "name": "Components overview" },
133 |       {
134 |         "path": "",
135 |         "name": "App bars",
136 |         "children": [
137 |           { "path": "", "name": "Bottom app bar" },
138 |           { "path": "", "name": "Top app bar" }
139 |         ]
140 |       },
141 |       { "path": "", "name": "Badges" },
142 |       {
143 |         "path": "",
144 |         "name": "Buttons",
145 |         "children": [
146 |           { "path": "", "name": "All buttons" },
147 |           { "path": "", "name": "Common buttons" },
148 |           { "path": "", "name": "FAB" },
149 |           { "path": "", "name": "Extened FAB" },
150 |           { "path": "", "name": "Icon buttons" },
151 |           { "path": "", "name": "Segmented buttons" }
152 |         ]
153 |       },
154 |       { "path": "", "name": "Cards" },
155 |       { "path": "", "name": "Carousel" },
156 |       { "path": "", "name": "Checkbox" },
157 |       { "path": "", "name": "Chips" },
158 |       { "path": "", "name": "Date pickers" },
159 |       { "path": "", "name": "Dialogs" },
160 |       { "path": "", "name": "Divider" },
161 |       { "path": "", "name": "Lists" },
162 |       { "path": "", "name": "Menus" },
163 |       {
164 |         "path": "",
165 |         "name": "Navigation",
166 |         "children": [
167 |           { "path": "", "name": "Navigation bar" },
168 |           { "path": "", "name": "Navigation drawer" },
169 |           { "path": "", "name": "Navigation rail" }
170 |         ]
171 |       },
172 |       { "path": "", "name": "Progress indicators" },
173 |       { "path": "", "name": "Radio button" },
174 |       { "path": "", "name": "Search" },
175 |       {
176 |         "path": "",
177 |         "name": "Sheets",
178 |         "children": [
179 |           { "path": "", "name": "Bottom sheets" },
180 |           { "path": "", "name": "Side sheets" }
181 |         ]
182 |       },
183 |       { "path": "", "name": "Sliders" },
184 |       { "path": "", "name": "Snackbar" },
185 |       { "path": "", "name": "Switch" },
186 |       { "path": "", "name": "Tabs" },
187 |       { "path": "", "name": "Text fields" },
188 |       { "path": "", "name": "Time pickers" },
189 |       { "path": "", "name": "Tooltips" }
190 |     ]
191 |   },
192 |   { "path": "blog", "color": "sky", "name": "Blog", "icon": "star" }
193 | ]
194 | 


--------------------------------------------------------------------------------
/playground/dev.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |     <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
  3 | 
  4 |     <script src="/node_modules/@vimesh/style/dist/vs.dev.js"></script>
  5 |     <script src="/node_modules/@vimesh/ui/dist/vui.dev.js"></script>
  6 |     <script src="/node_modules/alpinejs/dist/cdn.js" defer></script>
  7 |     <script src="/node_modules/universal-router/universal-router.min.js"></script>
  8 | 
  9 | 
 10 |     <script>
 11 |         const DEBUG = true
 12 |         $vui.config.debug = DEBUG
 13 |         $vui.config.importMap = {
 14 |             "hui": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 15 |             "app": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 16 |             "page": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 17 |         }
 18 |         let root = {
 19 |             $route: {},
 20 |             get isHome() { return this.$route.page === 'home' },
 21 |             routes: [
 22 |                 { name: 'Home', path: '/index', page: 'home' },
 23 |                 { name: 'Listbox', path: '/listbox/basic', page: 'listbox/basic' },
 24 |                 { name: 'Listbox Multi Select', path: '/listbox/multi-select', page: 'listbox/multi-select' },
 25 |                 { name: 'Listbox Multi Elements', path: '/listbox/multi-elements', page: 'listbox/multi-elements' },
 26 |                 { name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
 27 |                 { name: 'Switch', path: '/switch/basic', page: 'switch/basic' },
 28 |                 { name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
 29 |                 { name: 'Combobox', path: '/combobox/basic', page: 'combobox/basic' },
 30 |                 { name: 'Combobox Multi Select', path: '/combobox/multi-select', page: 'combobox/multi-select' },
 31 |                 { name: 'Combobox Command Palette', path: '/combobox/command-palette', page: 'combobox/command-palette' },
 32 |                 { name: 'Combobox Command Palette with Group', path: '/combobox/command-palette-group', page: 'combobox/command-palette-group' },
 33 |                 { name: 'Menu', path: '/menu/basic', page: 'menu/basic' },
 34 |                 { name: 'Menu Multiple Elements', path: '/menu/multiple-elements', page: 'menu/multiple-elements' },
 35 |                 { name: 'Menu with Popper', path: '/menu/with-popper', page: 'menu/with-popper' },
 36 |                 { name: 'Menu with Transition', path: '/menu/with-transition', page: 'menu/with-transition' },
 37 |                 { name: 'Menu with Transition and Popper', path: '/menu/with-transition-and-popper', page: 'menu/with-transition-and-popper' },
 38 |                 { name: 'Popover', path: '/popover/basic', page: 'popover/basic' },
 39 |                 { name: 'Dialog', path: '/dialog/basic', page: 'dialog/basic' },
 40 |                 { name: 'Dialog with Slide Over', path: '/dialog/slide-over', page: 'dialog/slide-over' },
 41 |                 { name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
 42 |             ]
 43 |         }
 44 |     </script>
 45 |     <style>
 46 |         [x-cloak] {
 47 |             display: none !important;
 48 |         }
 49 |     </style>
 50 | </head>
 51 | 
 52 | <body x-cloak x-import="app:header,side-menu,code-viewer,key-caster"
 53 |     class="h-full w-full font-sans text-gray-900 antialiased flex flex-col" x-data="root">
 54 |     <app-header class="flex-none h-16 px-1 py-3 flex"></app-header>
 55 |     <div class="flex-1 flex">
 56 |         <app-side-menu class="w-74 flex-none" x-show="!isHome"></app-side-menu>
 57 |         <div class="flex-1 h-full flex flex-col overflow-hidden">
 58 |             <app-router-view class="flex-1"></app-router-view>
 59 |             <app-code-viewer x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 m-1 rounded-md"
 60 |                 language="html" :code="$route.code"></app-code-viewer>
 61 |         </div>
 62 |     </div>
 63 |     <app-key-caster></app-key-caster>
 64 |     <template x-component:app="router-view" x-shtml="$api && $api.pageContent || ''"
 65 |         x-import:dynamic="$api && $api.pageToImport">
 66 |         <script>
 67 |             return {
 68 |                 router: null,
 69 |                 pageContent: '',
 70 |                 pageToImport: null,
 71 |                 onUrlChange() {
 72 |                     let match = window.location.href.match(/#(.*)$/)
 73 |                     let fragment = match ? match[1] : ''
 74 |                     this.router.resolve({ pathname: fragment }).then(page => {
 75 |                         if (page) {
 76 |                             let component = `page-${page.replace('/', '-')}`
 77 |                             this.pageContent = `<${component}></${component}>`
 78 |                             this.pageToImport = `page:${page}`
 79 |                             $vui.import(this.pageToImport).then(() => {
 80 |                                 $vui._.each($vui.imports, meta => {
 81 |                                     if (meta.fullname === this.pageToImport) {
 82 |                                         this.$route.code = meta.html
 83 |                                     }
 84 |                                 })
 85 |                             })
 86 |                         }
 87 |                     })
 88 |                 },
 89 |                 onMounted() {
 90 |                     this.router = new UniversalRouter(this.routes, {
 91 |                         context: { self: this },
 92 |                         resolveRoute(context, params) {
 93 |                             context.self.$route = { params, ...context.route }
 94 |                             if (typeof context.route.action === 'function') {
 95 |                                 return context.route.action(context, params)
 96 |                             }
 97 |                             return context.route.page
 98 |                         }
 99 |                     })
100 |                     this.onUrlChange()
101 |                     window.addEventListener('popstate', e => this.onUrlChange())
102 |                 }
103 |             }
104 |         </script>
105 |     </template>
106 | </body>


--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |     <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
  3 | 
  4 |     <script src="https://unpkg.com/@vimesh/style"></script>
  5 |     <script src="https://unpkg.com/@vimesh/ui"></script>
  6 |     <script src="https://unpkg.com/alpinejs" defer></script>
  7 |     <script src="https://unpkg.com/universal-router/universal-router.min.js"></script>
  8 | 
  9 |     <script>
 10 |         const DEBUG = false
 11 |         $vui.config.debug = DEBUG
 12 |         $vui.config.importMap = {
 13 |             "hui": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 14 |             "app": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 15 |             "page": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
 16 |         }
 17 |         let root = {
 18 |             $route: {},
 19 |             get isHome() { return this.$route.page === 'home' },
 20 |             routes: [
 21 |                 { name: 'Home', path: '/index', page: 'home' },
 22 |                 { name: 'Listbox', path: '/listbox/basic', page: 'listbox/basic' },
 23 |                 { name: 'Listbox Multi Select', path: '/listbox/multi-select', page: 'listbox/multi-select' },
 24 |                 { name: 'Listbox Multi Elements', path: '/listbox/multi-elements', page: 'listbox/multi-elements' },
 25 |                 { name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
 26 |                 { name: 'Switch', path: '/switch/basic', page: 'switch/basic' },
 27 |                 { name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
 28 |                 { name: 'Combobox', path: '/combobox/basic', page: 'combobox/basic' },
 29 |                 { name: 'Combobox Multi Select', path: '/combobox/multi-select', page: 'combobox/multi-select' },
 30 |                 { name: 'Combobox Command Palette', path: '/combobox/command-palette', page: 'combobox/command-palette' },
 31 |                 { name: 'Combobox Command Palette with Group', path: '/combobox/command-palette-group', page: 'combobox/command-palette-group' },
 32 |                 { name: 'Menu', path: '/menu/basic', page: 'menu/basic' },
 33 |                 { name: 'Menu Multiple Elements', path: '/menu/multiple-elements', page: 'menu/multiple-elements' },
 34 |                 { name: 'Menu with Popper', path: '/menu/with-popper', page: 'menu/with-popper' },
 35 |                 { name: 'Menu with Transition', path: '/menu/with-transition', page: 'menu/with-transition' },
 36 |                 { name: 'Menu with Transition and Popper', path: '/menu/with-transition-and-popper', page: 'menu/with-transition-and-popper' },
 37 |                 { name: 'Popover', path: '/popover/basic', page: 'popover/basic' },
 38 |                 { name: 'Dialog', path: '/dialog/basic', page: 'dialog/basic' },
 39 |                 { name: 'Dialog with Slide Over', path: '/dialog/slide-over', page: 'dialog/slide-over' },
 40 |                 { name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
 41 |             ]
 42 |         }
 43 |     </script>
 44 |     <style>
 45 |         [x-cloak] {
 46 |             display: none !important;
 47 |         }
 48 |     </style>
 49 | </head>
 50 | 
 51 | <body x-cloak x-import="app:header,side-menu,code-viewer,key-caster"
 52 |     class="h-full w-full font-sans text-gray-900 antialiased flex flex-col" x-data="root">
 53 |     <app-header class="flex-none h-16 px-1 py-3 flex"></app-header>
 54 |     <div class="flex-1 flex">
 55 |         <app-side-menu class="w-74 flex-none" x-show="!isHome"></app-side-menu>
 56 |         <div class="flex-1 h-full flex flex-col overflow-hidden">
 57 |             <app-router-view class="flex-1"></app-router-view>
 58 |             <app-code-viewer x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 m-1 rounded-md"
 59 |                 language="html" :code="$route.code"></app-code-viewer>
 60 |         </div>
 61 |     </div>
 62 |     <app-key-caster></app-key-caster>
 63 |     <template x-component:app="router-view" x-shtml="$api && $api.pageContent || ''"
 64 |         x-import:dynamic="$api && $api.pageToImport">
 65 |         <script>
 66 |             return {
 67 |                 router: null,
 68 |                 pageContent: '',
 69 |                 pageToImport: null,
 70 |                 onUrlChange() {
 71 |                     let match = window.location.href.match(/#(.*)$/)
 72 |                     let fragment = match ? match[1] : ''
 73 |                     this.router.resolve({ pathname: fragment }).then(page => {
 74 |                         if (page) {
 75 |                             let component = `page-${page.replace('/', '-')}`
 76 |                             this.pageContent = `<${component}></${component}>`
 77 |                             this.pageToImport = `page:${page}`
 78 |                             $vui.import(this.pageToImport).then(() => {
 79 |                                 $vui._.each($vui.imports, meta => {
 80 |                                     if (meta.fullname === this.pageToImport) {
 81 |                                         this.$route.code = meta.html
 82 |                                     }
 83 |                                 })
 84 |                             })
 85 |                         }
 86 |                     })
 87 |                 },
 88 |                 onMounted() {
 89 |                     this.router = new UniversalRouter(this.routes, {
 90 |                         context: { self: this },
 91 |                         resolveRoute(context, params) {
 92 |                             context.self.$route = { params, ...context.route }
 93 |                             if (typeof context.route.action === 'function') {
 94 |                                 return context.route.action(context, params)
 95 |                             }
 96 |                             return context.route.page
 97 |                         }
 98 |                     })
 99 |                     this.onUrlChange()
100 |                     window.addEventListener('popstate', e => this.onUrlChange())
101 |                 }
102 |             }
103 |         </script>
104 |     </template>
105 | </body>


--------------------------------------------------------------------------------
/playground/pages/combobox/basic.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function setupComboboxBasicData() {
 3 |         const everybody = [
 4 |             { id: 1, name: 'Wade Cooper' },
 5 |             { id: 2, name: 'Arlene Mccoy' },
 6 |             { id: 3, name: 'Devon Webb' },
 7 |             { id: 4, name: 'Tom Cook' },
 8 |             { id: 5, name: 'Tanya Fox' },
 9 |             { id: 6, name: 'Hellen Schmidt' },
10 |             { id: 7, name: 'Caroline Schultz' },
11 |             { id: 8, name: 'Mason Heaney' },
12 |             { id: 9, name: 'Claudie Smitham' },
13 |             { id: 10, name: 'Emil Schaefer' }
14 |         ]
15 |         return {
16 |             query: '',
17 |             activePerson: everybody[1],
18 |             everybody,
19 |             get filteredPeople() {
20 |                 return this.query === ''
21 |                     ? this.everybody
22 |                     : this.everybody.filter((person) => {
23 |                         return person.name.toLowerCase().includes(this.query.toLowerCase())
24 |                     })
25 |             }
26 |         }
27 |     }
28 | </script>
29 | <template x-component:page="combobox-basic" x-import="hui:combobox" x-data="setupComboboxBasicData()">
30 |     <div class="h-full justify-center bg-gray-50 p-12">
31 |         <div class="mx-auto w-full max-w-xs">
32 |             <div class="py-8 font-mono text-xs">
33 |                 Selected person: <span x-text="activePerson && activePerson.name || 'Nobody yet'"></span>
34 |             </div>
35 |             <div class="space-y-1">
36 |                 <hui-combobox x-model="activePerson">
37 |                     <hui-combobox-label class="block text-sm font-medium leading-5 text-gray-700">
38 |                         Assigned to
39 |                     </hui-combobox-label>
40 | 
41 |                     <div class="relative">
42 |                         <span class="relative inline-flex flex-row overflow-hidden rounded-md border border-gray-300 shadow-sm">
43 |                             <hui-combobox-input @change="query=$event.target.value"
44 |                                 :display-value="() => (person) => person && person.name || ''"
45 |                                 class="border-none px-3 py-1 outline-none"></hui-combobox-input>
46 |                             <hui-combobox-button
47 |                                 class="cursor-default border-l border-gray-300 bg-gray-100 px-1 text-indigo-600 focus:outline-none">
48 |                                 <span class="pointer-events-none flex items-center px-2">
49 |                                     <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
50 |                                         stroke="currentColor">
51 |                                         <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
52 |                                             strokeLinejoin="round" />
53 |                                     </svg>
54 |                                 </span>
55 |                             </hui-combobox-button>
56 |                         </span>
57 | 
58 |                         <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
59 |                             <hui-combobox-options
60 |                                 class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
61 |                                 <template x-for="person in filteredPeople" :key="person.id">
62 |                                     <hui-combobox-option :value="person">
63 |                                         <div :class="[
64 |                       'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
65 |                       active ? 'bg-indigo-600 text-white' : 'text-gray-900',
66 |                     ]">
67 |                                             <span
68 |                                                 :class="['block truncate', selected ? 'font-semibold' : 'font-normal']"
69 |                                                 x-text="person.name">
70 |                                             </span>
71 |                                             <template x-if="selected">
72 |                                                 <span :class="[
73 |                         'absolute inset-y-0 right-0 flex items-center pr-4',
74 |                         active ? 'text-white' : 'text-indigo-600',
75 |                       ]">
76 |                                                     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
77 |                                                         <path fillRule="evenodd"
78 |                                                             d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
79 |                                                             clipRule="evenodd" />
80 |                                                     </svg>
81 |                                                 </span>
82 |                                             </template>
83 |                                         </div>
84 |                                     </hui-combobox-option>
85 |                                 </template>
86 |                             </hui-combobox-options>
87 |                         </div>
88 |                     </div>
89 |                 </hui-combobox>
90 |             </div>
91 |         </div>
92 |     </div>
93 | </template>


--------------------------------------------------------------------------------
/playground/pages/combobox/command-palette-group.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 
  3 |     function setupComboboxCommandPaletteGroupData() {
  4 | 
  5 |         let everybody = [
  6 |             { id: 1, img: 'https://github.com/adamwathan.png', name: 'Adam Wathan' },
  7 |             { id: 2, img: 'https://github.com/sschoger.png', name: 'Steve Schoger' },
  8 |             { id: 3, img: 'https://github.com/bradlc.png', name: 'Brad Cornes' },
  9 |             { id: 4, img: 'https://github.com/simonswiss.png', name: 'Simon Vrachliotis' },
 10 |             { id: 5, img: 'https://github.com/robinmalfait.png', name: 'Robin Malfait' },
 11 |             {
 12 |                 id: 6,
 13 |                 img: 'https://pbs.twimg.com/profile_images/1478879681491394569/eV2PyCnm_400x400.jpg',
 14 |                 name: 'James McDonald',
 15 |             },
 16 |             { id: 7, img: 'https://github.com/reinink.png', name: 'Jonathan Reinink' },
 17 |             { id: 8, img: 'https://github.com/thecrypticace.png', name: 'Jordan Pittman' },
 18 |         ]
 19 | 
 20 |         return {
 21 |             query: '',
 22 |             activePerson: everybody[1],
 23 |             get people() {
 24 |                 return this.query === ''
 25 |                     ? everybody
 26 |                     : everybody.filter((person) =>
 27 |                         person.name.toLowerCase().includes(this.query.toLowerCase())
 28 |                     )
 29 |             },
 30 | 
 31 |             get groups() {
 32 |                 return this.people.reduce((groups, person) => {
 33 |                     let lastNameLetter = person.name.split(' ')[1][0]
 34 | 
 35 |                     groups.set(lastNameLetter, [...(groups.get(lastNameLetter) || []), person])
 36 | 
 37 |                     return groups
 38 |                 }, new Map())
 39 |             },
 40 | 
 41 |             get sortedGroups() {
 42 |                 return Array.from(this.groups.entries()).sort(([letterA], [letterZ]) =>
 43 |                     letterA.localeCompare(letterZ)
 44 |                 )
 45 |             },
 46 | 
 47 |             displayValue: () => (item) => item && item.name
 48 |         }
 49 |     }
 50 | </script>
 51 | <template x-component:page="combobox-command-palette-group" x-import="hui:combobox"
 52 |     x-data="setupComboboxCommandPaletteGroupData()">
 53 |     <div class=" flex h-full w-full justify-center bg-gray-50 p-12">
 54 |         <div class="mx-auto w-full max-w-lg">
 55 |             <div class="space-y-1">
 56 |                 <hui-combobox x-model="activePerson"
 57 |                     class="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm">
 58 |                     <div class="flex w-full flex-col">
 59 |                         <hui-combobox-input @change="query = $event.target.value"
 60 |                             class="w-full rounded-none border-none px-3 py-1 outline-none" placeholder="Search users…"
 61 |                             :display-value="displayValue"></hui-combobox-input>
 62 |                         <div class="flex">
 63 |                             <hui-combobox-options
 64 |                                 class="shadow-xs max-h-60 flex-1 overflow-auto text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
 65 |                                 <template x-for="[letter, people] of sortedGroups" :key="letter">
 66 |                                     <div>
 67 |                                         <div class="bg-gray-100 px-4 py-2" x-text="letter"></div>
 68 |                                         <template x-for="person in people">
 69 |                                             <hui-combobox-option :value="person">
 70 | 
 71 |                                                 <div :class="[
 72 |                       'relative  flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
 73 |                       active ? 'bg-indigo-600 text-white' : 'text-gray-900',
 74 |                     ]">
 75 |                                                     <img :src="person.img"
 76 |                                                         class="h-6 w-6 overflow-hidden rounded-full" />
 77 |                                                     <span
 78 |                                                         :class="['block truncate', selected ? 'font-semibold' : 'font-normal']"
 79 |                                                         x-text="person.name">
 80 |                                                     </span>
 81 |                                                     <span x-show="active" :class="[
 82 |                         'absolute inset-y-0 right-0 flex items-center pr-4',
 83 |                         active ? 'text-white' : 'text-indigo-600',
 84 |                       ]">
 85 |                                                         <svg class="h-5 w-5" viewBox="0 0 25 24" fill="none">
 86 |                                                             <path d="M11.25 8.75L14.75 12L11.25 15.25"
 87 |                                                                 stroke="currentColor" strokeWidth="1.5"
 88 |                                                                 strokeLinecap="round" strokeLinejoin="round" />
 89 |                                                         </svg>
 90 |                                                     </span>
 91 |                                                 </div>
 92 |                                             </hui-combobox-option>
 93 |                                         </template>
 94 |                                     </div>
 95 |                                 </template>
 96 |                             </hui-combobox-options>
 97 |                             <template x-if="people.length === 0">
 98 |                                 <div class="w-full py-4 text-center">
 99 |                                     No person selected
100 |                                 </div>
101 |                             </template>
102 |                             <template x-if="people.length > 0 && isOpen && activeOption">
103 |                                 <div class="border-l">
104 |                                     <div class="flex flex-col">
105 |                                         <div class="p-8 text-center">
106 |                                             <img :src="activeOption.img"
107 |                                                 class="mb-4 inline-block h-16 w-16 overflow-hidden rounded-full" />
108 |                                             <div class="font-bold text-gray-900" x-text="activeOption.name"></div>
109 |                                             <div class="text-gray-700">Obviously cool person</div>
110 |                                         </div>
111 |                                     </div>
112 |                                 </div>
113 |                             </template>
114 | 
115 |                         </div>
116 |                     </div>
117 |                 </hui-combobox>
118 |             </div>
119 |         </div>
120 |     </div>
121 | </template>


--------------------------------------------------------------------------------
/playground/pages/combobox/command-palette.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 |     function setupComboboxCommandPaletteData() {
 4 | 
 5 |         let everybody = [
 6 |             { id: 1, img: 'https://github.com/adamwathan.png', name: 'Adam Wathan' },
 7 |             { id: 2, img: 'https://github.com/sschoger.png', name: 'Steve Schoger' },
 8 |             { id: 3, img: 'https://github.com/bradlc.png', name: 'Brad Cornes' },
 9 |             { id: 4, img: 'https://github.com/simonswiss.png', name: 'Simon Vrachliotis' },
10 |             { id: 5, img: 'https://github.com/robinmalfait.png', name: 'Robin Malfait' },
11 |             { id: 7, img: 'https://github.com/reinink.png', name: 'Jonathan Reinink' },
12 |             { id: 8, img: 'https://github.com/thecrypticace.png', name: 'Jordan Pittman' },
13 |         ]
14 |         return {
15 |             query: '',
16 |             activePerson: everybody[1],
17 |             get people() {
18 |                 return this.query === ''
19 |                     ? everybody
20 |                     : everybody.filter((person) =>
21 |                         person.name.toLowerCase().includes(this.query.toLowerCase())
22 |                     )
23 |             },
24 |             displayValue: () => (item) => item && item.name
25 |         }
26 |     }
27 | </script>
28 | <template x-component:page="combobox-command-palette" x-import="hui:combobox"
29 |     x-data="setupComboboxCommandPaletteData()">
30 |     <div class=" flex h-full w-full justify-center bg-gray-50 p-12">
31 |         <div class="mx-auto w-full max-w-lg">
32 |             <div class="space-y-1">
33 |                 <hui-combobox x-model="activePerson"
34 |                     class="w-full overflow-hidden rounded border border-black/5 bg-white bg-clip-padding shadow-sm">
35 |                     <div class="flex w-full flex-col">
36 |                         <hui-combobox-input @change="query = $event.target.value"
37 |                             class="w-full rounded-none border-none px-3 py-1 outline-none" placeholder="Search users…"
38 |                             :display-value="displayValue"></hui-combobox-input>
39 |                         <div :class="[
40 |                   'flex border-t',
41 |                   activePerson && !open ? 'border-transparent' : 'border-gray-200',
42 |                 ]">
43 |                             <hui-combobox-options
44 |                                 class="shadow-xs max-h-60 flex-1 overflow-auto py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
45 |                                 <template x-for="person in people" :key="person.id">
46 |                                     <hui-combobox-option :value="person">
47 |                                         <div :class="[
48 |                         'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none',
49 |                         active ? 'bg-indigo-600 text-white' : 'text-gray-900',
50 |                       ]">
51 |                                             <img :src="person.img" class="h-6 w-6 overflow-hidden rounded-full" />
52 |                                             <span
53 |                                                 :class="['block truncate', selected ? 'font-semibold' : 'font-normal']"
54 |                                                 x-text="person.name">
55 | 
56 |                                             </span>
57 |                                             <span x-show="active" :class="[
58 |                           'absolute inset-y-0 right-0 flex items-center pr-4',
59 |                           active ? 'text-white' : 'text-indigo-600',
60 |                         ]">
61 |                                                 <svg class="h-5 w-5" viewBox="0 0 25 24" fill="none">
62 |                                                     <path d="M11.25 8.75L14.75 12L11.25 15.25" stroke="currentColor"
63 |                                                         strokeWidth="1.5" strokeLinecap="round"
64 |                                                         strokeLinejoin="round" />
65 |                                                 </svg>
66 |                                             </span>
67 |                                         </div>
68 |                                     </hui-combobox-option>
69 |                                 </template>
70 |                             </hui-combobox-options>
71 |                             <template x-if="people.length === 0">
72 |                                 <div class="w-full py-4 text-center">
73 |                                     No person selected
74 |                                 </div>
75 |                             </template>
76 |                             <template x-if="people.length > 0 && isOpen && activeOption">
77 |                                 <div class="border-l border-gray-200">
78 |                                     <div class="flex flex-col">
79 |                                         <div class="p-8 text-center">
80 |                                             <img :src="activeOption.img"
81 |                                                 class="mb-4 inline-block h-16 w-16 overflow-hidden rounded-full" />
82 |                                             <div class="font-bold text-gray-900" x-text="activeOption.name"></div>
83 |                                             <div class="text-gray-700">Obviously cool person</div>
84 |                                         </div>
85 |                                     </div>
86 |                                 </div>
87 |                             </template>
88 | 
89 |                         </div>
90 |                     </div>
91 |                 </hui-combobox>
92 |             </div>
93 |         </div>
94 |     </div>
95 | </template>


--------------------------------------------------------------------------------
/playground/pages/combobox/multi-select.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     function setupComboboxMultiSelectData() {
  3 | 
  4 |         let people = [
  5 |             { id: 1, name: 'Wade Cooper' },
  6 |             { id: 2, name: 'Arlene Mccoy' },
  7 |             { id: 3, name: 'Devon Webb' },
  8 |             { id: 4, name: 'Tom Cook' },
  9 |             { id: 5, name: 'Tanya Fox' },
 10 |             { id: 6, name: 'Hellen Schmidt' },
 11 |             { id: 7, name: 'Caroline Schultz' },
 12 |             { id: 8, name: 'Mason Heaney' },
 13 |             { id: 9, name: 'Claudie Smitham' },
 14 |             { id: 10, name: 'Emil Schaefer' },
 15 |         ]
 16 | 
 17 |         return {
 18 |             query: '',
 19 |             activePersons: [people[1], people[3]],
 20 |             people,
 21 |             get filteredPeople() {
 22 |                 return this.people.filter((person) =>
 23 |                     person.name.toLowerCase().includes(this.query.toLowerCase())
 24 |                 )
 25 |             },
 26 |             removePerson(person) {
 27 |                 this.activePersons = this.activePersons.filter((p) => p !== person)
 28 |             },
 29 |             onSubmit(e) {
 30 |                 e.preventDefault()
 31 |                 let entries = [...new FormData(e.currentTarget).entries()]
 32 |                 entries.forEach(entry => {
 33 |                     console.log(entry[0], entry[1])
 34 |                 })
 35 |             }
 36 |         }
 37 |     }
 38 | </script>
 39 | <template x-component:page="combobox-multi-select" x-import="hui:combobox" x-data="setupComboboxMultiSelectData()">
 40 |     <div class="flex h-full w-full justify-center space-x-4 bg-gray-50 p-12">
 41 |         <div class="w-full max-w-4xl">
 42 |             <div class="space-y-1">
 43 |                 <form @submit="onSubmit">
 44 |                     <hui-combobox x-model="activePersons" name="people" multiple>
 45 |                         <hui-combobox-label class="block text-sm font-medium leading-5 text-gray-700">
 46 |                             Assigned to
 47 |                         </hui-combobox-label>
 48 | 
 49 |                         <div class="relative">
 50 |                             <span class="inline-block w-full rounded-md shadow-sm">
 51 |                                 <div
 52 |                                     class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus-within:border-blue-700 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 sm:text-sm sm:leading-5">
 53 |                                     <span class="flex flex-wrap gap-2">
 54 |                                         <template x-if="activePersons.length === 0">
 55 |                                             <span class="p-0.5">Empty</span>
 56 |                                         </template>
 57 |                                         <template x-for="person in activePersons" :key="person.id">
 58 |                                             <span class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5">
 59 |                                                 <span x-text="person.name"></span>
 60 |                                                 <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor"
 61 |                                                     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
 62 |                                                     @click.stop.prevent="removePerson(person)">
 63 |                                                     <path stroke-linecap="round" stroke-linejoin="round"
 64 |                                                         stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 65 |                                                 </svg>
 66 |                                             </span>
 67 |                                         </template>
 68 |                                         <hui-combobox-input @change="query = $event.target.value" @focus="query = ''"
 69 |                                             class="border-none p-0 focus:outline-none flex-1"
 70 |                                             placeholder="Search..."></hui-combobox-input>
 71 |                                     </span>
 72 |                                     <hui-combobox-button class="absolute inset-y-0 right-0 flex items-center pr-2">
 73 |                                         <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
 74 |                                             stroke="currentColor">
 75 |                                             <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5"
 76 |                                                 stroke-linecap="round" stroke-linejoin="round" />
 77 |                                         </svg>
 78 |                                     </hui-combobox-button>
 79 |                                 </div>
 80 |                             </span>
 81 | 
 82 |                             <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
 83 |                                 <hui-combobox-options
 84 |                                     class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
 85 |                                     <template x-for="person in filteredPeople" :key="person.id">
 86 |                                         <hui-combobox-option :value="person"
 87 |                                             class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none "
 88 |                                             :class="active ? 'bg-indigo-600 text-white' : 'text-gray-900'">
 89 |                                             <span class="block truncate"
 90 |                                                 :class="{ 'font-semibold': selected, 'font-normal': !selected }"
 91 |                                                 x-text="person.name">
 92 | 
 93 |                                             </span>
 94 |                                             <span x-show="selected"
 95 |                                                 class="absolute inset-y-0 right-0 flex items-center pr-4"
 96 |                                                 :class="{ 'text-white': active, 'text-indigo-600': !active }">
 97 |                                                 <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 98 |                                                     <path fillRule="evenodd"
 99 |                                                         d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
100 |                                                         clipRule="evenodd" />
101 |                                                 </svg>
102 |                                             </span>
103 |                                         </hui-combobox-option>
104 |                                     </template>
105 |                                 </hui-combobox-options>
106 |                             </div>
107 |                         </div>
108 |                     </hui-combobox>
109 |                     <button
110 |                         class="mt-2 inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
111 |                         Submit
112 |                     </button>
113 |                 </form>
114 |             </div>
115 |         </div>
116 |     </div>
117 | </template>


--------------------------------------------------------------------------------
/playground/pages/dialog/slide-over.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     function setupDialogSlideOverData() {
  3 | 
  4 |         const products = [
  5 |             {
  6 |                 id: 1,
  7 |                 name: 'Throwback Hip Bag',
  8 |                 href: '#',
  9 |                 color: 'Salmon',
 10 |                 price: '$90.00',
 11 |                 quantity: 1
 12 |             },
 13 |             {
 14 |                 id: 2,
 15 |                 name: 'Medium Stuff Satchel',
 16 |                 href: '#',
 17 |                 color: 'Blue',
 18 |                 price: '$32.00',
 19 |                 quantity: 1
 20 |             },
 21 |             // More products...
 22 |         ]
 23 | 
 24 |         return {
 25 |             products,
 26 |             open: true,
 27 |             auto: true,
 28 |             init() {
 29 |                 $vui.effect(() => {
 30 |                     if (this.open === false && this.auto) {
 31 |                         setTimeout(() => {
 32 |                             if (this.auto) this.open = true
 33 |                         }, 2000)
 34 |                     }
 35 |                 })
 36 |             }
 37 |         }
 38 |     }
 39 | </script>
 40 | <template x-component:page="dialog-slide-over" x-import="hui:dialog,switch" x-data="setupDialogSlideOverData()">
 41 |     <div class="p-12">
 42 |     <hui-switch-group class="flex items-center space-x-4">
 43 |         <hui-switch-label>Open dialog automatically</hui-switch-label>
 44 | 
 45 |         <hui-switch x-model="auto" :class="['relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline',
 46 |   checked ? 'bg-indigo-600' : 'bg-gray-200']">
 47 |             <span class="inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ease-in-out"
 48 |                 :class="[checked ? 'translate-x-5' : 'translate-x-0']"></span>
 49 |         </hui-switch>
 50 |     </hui-switch-group>
 51 |     <button @click="open=true"
 52 |         class="inline-block rounded-lg mt-2 bg-green-600 px-4 py-1.5 text-white shadow ring-1 ring-green-600 hover:bg-green-700 hover:ring-green-700">Open Dialog</button>
 53 |     </div>
 54 |     <hui-dialog class="relative z-10" x-model="open">
 55 |         <hui-dialog-overlay x-transition:enter=" ease-in-out duration-500" x-transition:enter-start="opacity-0"
 56 |             x-transition:enter-end="opacity-100" x-transition:leave=" ease-in-out duration-500"
 57 |             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
 58 |             class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></hui-dialog-overlay>
 59 |         <div class="fixed inset-0 overflow-hidden">
 60 |             <div class="absolute inset-0 overflow-hidden">
 61 |                 <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
 62 |                     <hui-dialog-panel x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
 63 |                         x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
 64 |                         x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
 65 |                         x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
 66 |                         class="pointer-events-auto w-screen max-w-md">
 67 |                         <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
 68 |                             <div class="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
 69 |                                 <div class="flex items-start justify-between">
 70 |                                     <hui-dialog-title
 71 |                                         class="text-lg font-medium text-gray-900">Title...</hui-dialog-title>
 72 |                                     <div class="ml-3 flex h-7 items-center">
 73 |                                         <button type="button" class="-m-2 p-2 text-gray-400 hover:text-gray-500"
 74 |                                             @click="open = false">
 75 |                                             <span class="sr-only">Close panel</span>
 76 |                                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
 77 |                                                 stroke-width="2" stroke="currentColor" aria-hidden="true"
 78 |                                                 class="h-6 w-6">
 79 |                                                 <path stroke-linecap="round" stroke-linejoin="round"
 80 |                                                     d="M6 18L18 6M6 6l12 12"></path>
 81 |                                             </svg>
 82 |                                         </button>
 83 |                                     </div>
 84 |                                 </div>
 85 |                                 <div>
 86 |                                     <template x-for="item in products">
 87 |                                         <div>
 88 |                                             <span x-text="item.name"></span><br>
 89 |                                             Price: <span x-text="item.price"></span>
 90 |                                         </div>
 91 |                                     </template>
 92 |                                 </div>
 93 |                             </div>
 94 |                         </div>
 95 |                     </hui-dialog-panel>
 96 |                 </div>
 97 |             </div>
 98 |         </div>
 99 |     </hui-dialog>
100 | </template>


--------------------------------------------------------------------------------
/playground/pages/listbox/basic.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function setupListboxBasicData() {
 3 |         const people = [
 4 |             { id: 1, name: 'Wade Cooper' },
 5 |             { id: 2, name: 'Arlene Mccoy' },
 6 |             { id: 3, name: 'Devon Webb' },
 7 |             { id: 4, name: 'Tom Cook' },
 8 |             { id: 5, name: 'Tanya Fox', disabled: true },
 9 |             { id: 6, name: 'Hellen Schmidt' },
10 |             { id: 7, name: 'Caroline Schultz' },
11 |             { id: 8, name: 'Mason Heaney', disabled: true },
12 |             { id: 9, name: 'Claudie Smitham' },
13 |             { id: 10, name: 'Emil Schaefer' },
14 |         ]
15 |         return {
16 |             people,
17 |             active: people[1]
18 |         }
19 |     }
20 | </script>
21 | <template x-component:page="listbox-basic" x-import="hui:listbox" x-data="setupListboxBasicData()">
22 |     <div class="h-full justify-center bg-gray-50 p-12">
23 |         <div class="mx-auto w-full max-w-xs">
24 |             <div class="space-y-1">
25 |                 <hui-listbox x-model="active">
26 |                     <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned to
27 |                     </hui-listbox-label>
28 | 
29 |                     <div class="relative">
30 |                         <span class="inline-block w-full rounded-md shadow-sm">
31 |                             <hui-listbox-button
32 |                                 class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
33 |                                 <span class="block truncate h-5" x-text="active && active.name || ' '"></span>
34 |                                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
35 |                                     <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
36 |                                         stroke="currentColor">
37 |                                         <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
38 |                                             strokeLinejoin="round" />
39 |                                     </svg>
40 |                                 </span>
41 |                             </hui-listbox-button>
42 |                         </span>
43 | 
44 |                         <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
45 |                             <hui-listbox-options
46 |                                 class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
47 |                                 <template x-for="person in people" :key="person.name">
48 |                                     <hui-listbox-option :value="person" :class="['relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
49 |                                             active ? 'text-white bg-indigo-600' : 'text-gray-900',
50 |                                             disabled ? 'bg-gray-50 text-gray-300' : ''
51 |                                         ]" :disabled="person.disabled">
52 |                                         <span :class="['block truncate', selected ? 'font-semibold' : 'font-normal']"
53 |                                             x-text="person.name">
54 |                                         </span>
55 |                                         <template x-if="selected">
56 |                                             <span
57 |                                                 :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-indigo-600'] ">
58 |                                                 <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
59 |                                                     <path fillRule="evenodd"
60 |                                                         d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
61 |                                                         clipRule="evenodd" />
62 |                                                 </svg>
63 |                                             </span>
64 |                                         </template>
65 |                                     </hui-listbox-option>
66 |                                 </template>
67 |                             </hui-listbox-options>
68 |                         </div>
69 |                     </div>
70 |                 </hui-listbox>
71 |             </div>
72 |         </div>
73 |     </div>
74 | 
75 | </template>


--------------------------------------------------------------------------------
/playground/pages/listbox/multi-elements.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     function setupListboxMultiElementsData() {
  3 |         let people = [
  4 |             { id: 1, name: 'Wade Cooper' },
  5 |             { id: 2, name: 'Arlene Mccoy' },
  6 |             { id: 3, name: 'Devon Webb' },
  7 |             { id: 4, name: 'Tom Cook' },
  8 |             { id: 5, name: 'Tanya Fox' },
  9 |             { id: 6, name: 'Hellen Schmidt' },
 10 |             { id: 7, name: 'Caroline Schultz' },
 11 |             { id: 8, name: 'Mason Heaney' },
 12 |             { id: 9, name: 'Claudie Smitham' },
 13 |             { id: 10, name: 'Emil Schaefer' },
 14 |         ]
 15 | 
 16 |         return {
 17 |             people,
 18 |             active: people[1]
 19 |         }
 20 |     }
 21 | </script>
 22 | <template x-component:page="listbox-multi-elements" x-import="hui:listbox" x-data="setupListboxMultiElementsData()">
 23 |     <div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
 24 |         <div class="w-64">
 25 |             <div class="space-y-1">
 26 |                 <hui-listbox x-model="active">
 27 |                     <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned
 28 |                         to</hui-listbox-label>
 29 | 
 30 |                     <div class="relative">
 31 |                         <span class="inline-block w-full rounded-md shadow-sm">
 32 |                             <hui-listbox-button
 33 |                                 class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
 34 |                                 <span class="block truncate" x-text="active.name"></span>
 35 |                                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 36 |                                     <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
 37 |                                         stroke="currentColor">
 38 |                                         <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
 39 |                                             strokeLinejoin="round" />
 40 |                                     </svg>
 41 |                                 </span>
 42 |                             </hui-listbox-button>
 43 |                         </span>
 44 | 
 45 |                         <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
 46 |                             <hui-listbox-options
 47 |                                 class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
 48 |                                 <template x-for="person in people" :key="person.id">
 49 |                                     <hui-listbox-option :value="person" :class="[
 50 |                                     'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
 51 |                                     active ? 'text-white bg-indigo-600' : 'text-gray-900']">
 52 |                                         <span x-text="person.name "
 53 |                                             :class=" ['block truncate', selected ? 'font-semibold' : 'font-normal'] ">
 54 |                                         </span>
 55 |                                         <span x-show="selected" :class="[ 'absolute inset-y-0 right-0 flex items-center pr-4',
 56 |                           active ? 'text-white' : 'text-indigo-600'] ">
 57 |                                             <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
 58 |                                                 <path fillRule="evenodd"
 59 |                                                     d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
 60 |                                                     clipRule="evenodd" />
 61 |                                             </svg>
 62 |                                         </span>
 63 |                                     </hui-listbox-option></template>
 64 |                             </hui-listbox-options>
 65 |                         </div>
 66 |                     </div>
 67 |                 </hui-listbox>
 68 |             </div>
 69 |         </div>
 70 | 
 71 |         <div>
 72 |             <label for="email" class="block text-sm font-medium leading-5 text-gray-700"> Email </label>
 73 |             <div class="relative mt-1 rounded-md shadow-sm">
 74 |                 <input class="form-input block w-full sm:text-sm sm:leading-5" placeholder="you@example.com" />
 75 |             </div>
 76 |         </div>
 77 | 
 78 |         <div class="w-64">
 79 |             <div class="space-y-1">
 80 |                 <hui-listbox x-model="active">
 81 |                     <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned
 82 |                         to</hui-listbox-label>
 83 | 
 84 |                     <div class="relative">
 85 |                         <span class="inline-block w-full rounded-md shadow-sm">
 86 |                             <hui-listbox-button
 87 |                                 class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
 88 |                                 <span class="block truncate" x-text="active.name"></span>
 89 |                                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 90 |                                     <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
 91 |                                         stroke="currentColor">
 92 |                                         <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
 93 |                                             strokeLinejoin="round" />
 94 |                                     </svg>
 95 |                                 </span>
 96 |                             </hui-listbox-button>
 97 |                         </span>
 98 | 
 99 |                         <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
100 |                             <hui-listbox-options
101 |                                 class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
102 |                                 <template x-for="person in people" :key="person.id">
103 |                                     <hui-listbox-option v-for="person in people" :key="person.id" :value="person"
104 |                                         :class="['relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
105 |                                     active ? 'text-white bg-indigo-600' : 'text-gray-900']">
106 |                                         <span x-text="person.name"
107 |                                             :class="['block truncate', selected ? 'font-semibold' : 'font-normal']">
108 |                                         </span>
109 |                                         <span x-show="selected" :class="['absolute inset-y-0 right-0 flex items-center pr-4',
110 |                           active ? 'text-white' : 'text-indigo-600']">
111 |                                             <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
112 |                                                 <path fillRule="evenodd"
113 |                                                     d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
114 |                                                     clipRule="evenodd" />
115 |                                             </svg>
116 |                                         </span>
117 |                                     </hui-listbox-option>
118 |                                 </template>
119 |                             </hui-listbox-options>
120 |                         </div>
121 |                     </div>
122 |                 </hui-listbox>
123 |             </div>
124 |         </div>
125 |     </div>
126 | </template>


--------------------------------------------------------------------------------
/playground/pages/listbox/multi-select.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function setupListboxMultiData() {
 3 |         const people = [
 4 |             { id: 1, name: 'Wade Cooper' },
 5 |             { id: 2, name: 'Arlene Mccoy' },
 6 |             { id: 3, name: 'Devon Webb' },
 7 |             { id: 4, name: 'Tom Cook' },
 8 |             { id: 5, name: 'Tanya Fox', disabled: true },
 9 |             { id: 6, name: 'Hellen Schmidt' },
10 |             { id: 7, name: 'Caroline Schultz' },
11 |             { id: 8, name: 'Mason Heaney', disabled: true },
12 |             { id: 9, name: 'Claudie Smitham' },
13 |             { id: 10, name: 'Emil Schaefer' },
14 |         ]
15 |         return {
16 |             people,
17 |             activePersons: [people[1], people[2]],
18 |             removePerson(toRemove) {
19 |                 this.activePersons = this.activePersons.filter((p) => p !== toRemove)
20 |             }
21 |         }
22 |     }
23 | </script>
24 | <template x-component:page="listbox-multi-select" x-import="hui:listbox" x-data="setupListboxMultiData()">
25 |     <div class="flex h-full justify-center space-x-4 bg-gray-50 p-12">
26 |         <div class="w-full max-w-4xl">
27 |             <div class="space-y-1">
28 |                 <hui-listbox x-model="activePersons" name="people" multiple>
29 |                     <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">
30 |                         Assigned to
31 |                     </hui-listbox-label>
32 | 
33 |                     <div class="relative">
34 |                         <span class="inline-block w-full rounded-md shadow-sm">
35 |                             <hui-listbox-button
36 |                                 class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
37 |                                 <span class="flex flex-wrap gap-2">
38 |                                     <template x-if="activePersons.length === 0">
39 |                                         <span class="p-0.5">Empty</span>
40 |                                     </template>
41 |                                     <template x-for="person in activePersons" :key="person.id">
42 |                                         <span class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5">
43 |                                             <span x-text="person.name"></span>
44 |                                             <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor"
45 |                                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
46 |                                                 @click.stop.prevent="removePerson(person)">
47 |                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
48 |                                                     d="M6 18L18 6M6 6l12 12" />
49 |                                             </svg>
50 |                                         </span>
51 |                                     </template>
52 | 
53 |                                 </span>
54 |                                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
55 |                                     <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
56 |                                         stroke="currentColor">
57 |                                         <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round"
58 |                                             stroke-linejoin="round" />
59 |                                     </svg>
60 |                                 </span>
61 |                             </hui-listbox-button>
62 |                         </span>
63 | 
64 |                         <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
65 |                             <hui-listbox-options
66 |                                 class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
67 |                                 <template x-for="person in people" :key="person.id">
68 |                                     <hui-listbox-option :value="person" :disabled="person.disabled">
69 |                                         <li class="list-none relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
70 |                                             :class="[active ? 'bg-indigo-600 text-white' : 'text-gray-900', 
71 |                                                 disabled ? 'bg-gray-50 text-gray-300' : '']">
72 |                                             <span class="block truncate"
73 |                                                 :class="{ 'font-semibold': selected, 'font-normal': !selected }"
74 |                                                 x-text="person.name">
75 |                                             </span>
76 |                                             <template x-if="selected">
77 |                                                 <span class="absolute inset-y-0 right-0 flex items-center pr-4"
78 |                                                     :class="{ 'text-white': active, 'text-indigo-600': !active }">
79 |                                                     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
80 |                                                         <path fillRule="evenodd"
81 |                                                             d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
82 |                                                             clipRule="evenodd" />
83 |                                                     </svg>
84 |                                                 </span>
85 |                                             </template>
86 |                                         </li>
87 |                                     </hui-listbox-option>
88 |                                 </template>
89 |                             </hui-listbox-options>
90 |                         </div>
91 |                     </div>
92 |                 </hui-listbox>
93 |             </div>
94 |         </div>
95 |     </div>
96 | 
97 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/develop/android/jetpack-compose.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     const pageDevelopAndroidJetpackCompose = {
  3 |         data() {
  4 |             return {
  5 |                 bg: {
  6 |                     top: {
  7 |                         dark: 'https://lh3.googleusercontent.com/kkr2TmO3u_FfBakRK1ZO-dpxKpxvX84TsZksqJNtfAjqBpCzdUairFKYnAhUj9Xz8tWkTXwYI9QjykmCmswAlsmLfIIXBFjxYabcsnuPizy5OHVYjMW2=w2400-rj',
  8 |                         light: 'https://lh3.googleusercontent.com/Hyd9Ea7nfmAIsP0YdygYsGn38uSoe_tAvkBU9d3uPfBLiJ6ILuvOFousDmp0kXPPoWZrOHotDn4800B7Wp2cidBxor_fBN3nNxDmw9jehZId3XVyrkw=w2400-rj',
  9 |                     },
 10 |                 },
 11 |                 section1: {
 12 |                     title: 'Announcements',
 13 |                     content: 'The latest from Jetpack Compose',
 14 |                     cards: [{
 15 |                         title: 'Jetpack Compose Stable Release',
 16 |                         content: 'See the latest release notes, including support for additional Material 3 components.',
 17 |                         bg: 'https://lh3.googleusercontent.com/iRk0CdvX4Y8XYPks-KwdHKIDTFld3tokwmHOGszYGfAtSpGuBk2liD_NMMRxDR_qOFiUa0ncP6K5UNij534AVe-zuqpjB_hX1fP4jVRzn2XVis1CkRSM=w960',
 18 |                     }, {
 19 |                         title: 'Design for Android',
 20 |                         content: 'Learn how to design beautiful and modern Android apps with updated, Android-specific design guidance on developer.android.com',
 21 |                         bg: 'https://lh3.googleusercontent.com/Ybh9s-Ibl_PlNbuCGw-u-pkQ_D71B5f-WOvGuK4DzwLTSAOWRAjr2TxLPTAeKfoyrXwyCKnUs39Fc5SBykBpuBYNzSCWso15o2ihI0MbcZLw9JOOY9w=w960',
 22 |                     }]
 23 |                 },
 24 |                 section2: {
 25 |                     title: 'Resources & documentation',
 26 |                     content: 'Guides, developer docs, tutorials, and more',
 27 |                     cards: [{
 28 |                         title: 'Compose Material 3',
 29 |                         content: 'Documentation for all Material 3 Components available for Jetpack Compose.',
 30 |                         bg: 'https://lh3.googleusercontent.com/Kb5du28qSb_4Z81u1W-NgPzms7xjEgPBej0dhxELHMTUt2SA_LEdUoArCLCJ0u5iqAmz0-e3YGm4Uq4SP4-0HJBd9Rj6xuG3_noZLxtyR3hIzPazTbRX=w960',
 31 |                     }, {
 32 |                         title: 'Migrate from M2 to M3 for Jetpack Compose',
 33 |                         content: 'Guides on implementing Material Design 3, migrating from Material 2 to Material 3, and more',
 34 |                         bg: 'https://lh3.googleusercontent.com/u1zXXvP4Qh47mKhKLYGVVQVVBRslzUfukUBtN--f2m7R8ftpsUsNpXRLRHVpkoEcqb_nlyEadQgJzZXmPMAnEwTA710XoNkuenQO9m3qrfEJ_3YASA4=w960',
 35 |                     }, {
 36 |                         title: 'Jetpack Compose Tutorial',
 37 |                         content: 'Use Jetpack Compose to build a simple UI with declarative functions.',
 38 |                         bg: 'https://lh3.googleusercontent.com/3iOYqryY4WZnfONYeIxJVCI9cKSwRr_RkL_510v1oCugbx7TzdgvQ4HsQAQ-zMsPZ_hr-Le2IpPpwvL0WDIQNtYmMYKKIfnEMd48wZcu9EIs75g6xyA=w960',
 39 |                     }, {
 40 |                         title: 'Jetpack Compose Pathway',
 41 |                         content: 'Learn how to use Jetpack Compose to build native Android UI.',
 42 |                         bg: 'https://lh3.googleusercontent.com/r8fujQi3t9Nd7xHpe7Ceh_so4pQe8r5va1nTVmImLNtvtp18heH0fhkesMdwiHFyAJWQlUCWxZvYxwT1GoRecKQxmLSft8gFsuGJb75kqLRqrGKrd9kC=w960',
 43 |                     }, {
 44 |                         title: 'Theming in Compose',
 45 |                         content: 'Jetpack Compose makes it easy to give your app a consistent look and feel with theming.',
 46 |                         bg: 'https://lh3.googleusercontent.com/BVswb9ZAZ3nT-xUm24DKkz8_qeN4nlO3s13a8_BuPlwSIUVpr92diVv0gQVE-VgKLzDwU7KuQNXoeBd8K_i6OT9qP4P8uDPqTYZNrm7odcBm_w8AqQ=w960',
 47 |                     }, {
 48 |                         title: 'Material Components and layouts',
 49 |                         content: 'Material Components and layouts are available as composable functions.',
 50 |                         bg: 'https://lh3.googleusercontent.com/LnMTIGYBMFKsO2Lm70aiasRc20JnRThe0x7GzyDJ86z4Jors5pxmQQrjE69_QiAcu3uIRX8kntvInZymrofF4TvHgPzPiqbOmCGk_dPeyQdGF8sL58kE=w960',
 51 |                     }, {
 52 |                         title: 'Best of Material 3 with Reply sample app in Compose',
 53 |                         content: 'Check out the Reply sample app for Compose.',
 54 |                         bg: 'https://lh3.googleusercontent.com/D0Fd98ivBN8TGwZ0IrFOPpog52ez6qgR0EABHlCs55Beae8IdykYygkcHKRbnoh0KlC86YlAe2hakxsA_iRULWYISUCym3hBrPIJQGz0dGM7SYqiQypI=w960',
 55 |                     }, {
 56 |                         title: 'Adaptive apps with Compose and Material navigation',
 57 |                         content: 'Learn how to get the most from navigation components like nav rail, drawer, and tabs in apps build with Jetpack Compose.',
 58 |                         bg: 'https://lh3.googleusercontent.com/o16h89MKqzTSdE7v_3IVJVw4Fnqx3iaoDImQyExGGcZ1uJXM-cjhCOWIrjwgSDWfhIMl97JsZwF9LUi2Qy6cBKtv6KmAe1f3iQ_r9ddHxj7IfbNarQ=w960',
 59 |                     }]
 60 |                 }
 61 |             }
 62 |         }
 63 |     }
 64 | </script>
 65 | 
 66 | <template x-component:page="develop-android-jetpack-compose" x-import="app:page-container"
 67 |     x-data="pageDevelopAndroidJetpackCompose.data">
 68 |     <app-page-container>
 69 |         <div class="m-auto w-full h-fit p-16 py-16 rounded-3xl bg-cover col-span-2"
 70 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
 71 | 
 72 |             <div class="flex justify-start pt-6">
 73 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Jetpack Compose</div>
 74 |             </div>
 75 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
 76 |                 <div class="max-w-screen-lg text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
 77 |                     Android's modern toolkit for building native UI. Support is available for Material Design 3.
 78 |                 </div>
 79 |             </div>
 80 |         </div>
 81 | 
 82 |         <fin-android-jetpack-compose-section :title="section1.title" :content="section1.content"
 83 |             :cards="section1.cards"></fin-android-jetpack-compose-section>
 84 | 
 85 |         <fin-android-jetpack-compose-section :title="section2.title" :content="section2.content"
 86 |             class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3" height="h-48"
 87 |             :cards="section2.cards"></fin-android-jetpack-compose-section>
 88 | 
 89 |         <app-footer></app-footer>
 90 |     </app-page-container>
 91 | </template>
 92 | 
 93 | <template x-component:fin="android-jetpack-compose-section">
 94 |     <div class="max-w-screen-xl m-auto py-6 text-black">
 95 |         <div class="text-2xl md:text-4xl font-medium mt-4 md:mt-8 ml-4 md:ml-6 py-4 dark:text-gray-300"
 96 |             x-text="$prop('title')"></div>
 97 |         <div class="text-base md:text-base font-normal ml-4 md:ml-6 pb-4 dark:text-gray-300" x-text="$prop('content')">
 98 |         </div>
 99 |         <div :class="`grid ${$prop('class', 'grid-cols-1 md:grid-cols-2')} gap-2`">
100 |             <template x-for="card in $prop('cards',[])">
101 |                 <div
102 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
103 |                     <template x-if="Boolean(card.bg)">
104 |                         <div :class="`${$prop('height','h-72')} rounded-3xl mb-4 bg-cover bg-center`"
105 |                             :style="`background-image:url('${card.bg}')`"></div>
106 |                     </template>
107 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
108 |                     </div>
109 |                     <div class="px-6 font-normal" x-text="card.content">
110 |                     </div>
111 |                 </div>
112 |             </template>
113 |         </div>
114 |     </div>
115 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/develop/android/mdc-android.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     const pageDevelopAndroidMCDAndroid = {
  3 |         data() {
  4 |             return {
  5 |                 bg: {
  6 |                     top: {
  7 |                         dark: 'https://lh3.googleusercontent.com/kkr2TmO3u_FfBakRK1ZO-dpxKpxvX84TsZksqJNtfAjqBpCzdUairFKYnAhUj9Xz8tWkTXwYI9QjykmCmswAlsmLfIIXBFjxYabcsnuPizy5OHVYjMW2=w2400-rj',
  8 |                         light: 'https://lh3.googleusercontent.com/Hyd9Ea7nfmAIsP0YdygYsGn38uSoe_tAvkBU9d3uPfBLiJ6ILuvOFousDmp0kXPPoWZrOHotDn4800B7Wp2cidBxor_fBN3nNxDmw9jehZId3XVyrkw=w2400-rj',
  9 |                     },
 10 |                 },
 11 |                 section1: {
 12 |                     title: 'Announcements',
 13 |                     content: 'The latest from MDC-Android',
 14 |                     cards: [{
 15 |                         title: 'MDC-Android Stable release 1.9.0',
 16 |                         content: 'New ways to navigate in and interact with your applications',
 17 |                         bg: 'https://lh3.googleusercontent.com/KRFY8xEaPyVMcEKjtOmdv_tLS7ri6PXLIigjWOM77tLc52ZByA0s5xUMpEvzsVHMRnh_Hv7HH01xHMfYgAaIJN5EvxENzf1b_Q1hOBcP085GoOSto-DA=w960',
 18 |                     }, {
 19 |                         title: 'Migrate from M2 to M3 for MDC-Android',
 20 |                         content: 'A technical guide for migrating your existing app to Material Design 3.',
 21 |                         bg: 'https://lh3.googleusercontent.com/Ko3EB_dvd84-vrCWpAyOZPVlfs3-_opvEidJvcumw6ysf_xBLTnsZviLSLTzQuZeCTFBLsCkrE3fpDOWru8HJQPzMahrfrZNW6Bhvg-Cppyw6EftSyU=w960',
 22 |                     }]
 23 |                 },
 24 |                 section2: {
 25 |                     title: 'Resources & documentation',
 26 |                     content: 'Guides, developer docs, tutorials, and more',
 27 |                     cards: [{
 28 |                         title: 'Material Components – Github',
 29 |                         content: 'Documentation for all Material Components available in the MDC-Android repo on Github',
 30 |                         bg: 'https://lh3.googleusercontent.com/9CnOR0OIux564E7TFJqrRBv68zlftQwq0IOEdzLnJtgFfsRLXXmdlVsV0bMd-6xJ0zyJem44vfnetxrWHn9acLorYR_qkFxMGMsLoJVQn3bnb0VUmQ=w960',
 31 |                     }, {
 32 |                         title: 'ADS ‘21: What’s new in Material',
 33 |                         content: 'Keynote talk from Android Developer Summit 2021, covering the top Android 12 updates.',
 34 |                         bg: 'https://lh3.googleusercontent.com/nOCeGDcFZMdGCXEISkqL24_kmFxUx23cxSAraxzjAO0g9yF_9XsUGK1zFEMcerGm8X2sNcE8PyN2UBaqCANSATJnHj5AQ7Qs7z6NmpkRzMGgTB-ppg=w960',
 35 |                     }, {
 36 |                         title: 'Material You: Applying dynamic color for your app or brand',
 37 |                         content: 'Learn how to apply dynamic color in this short talk from two Material experts.',
 38 |                         bg: 'https://lh3.googleusercontent.com/6PfS0vUtxrPUdh6TS9eo0df3m3561Ke94FAm4hKQKjAcdTzJhcLN8KQyekfAorlqLMnIMka-9zxT4h10h2ZvYAAyDdvi42BxHGI-nSGWCSWKfdspZ20=w960',
 39 |                     }, {
 40 |                         title: 'Building beautiful transitions with Material Motion',
 41 |                         content: 'Codelab and video tutorial: Get step-by-step instructions for Material transition patterns.',
 42 |                         bg: 'https://lh3.googleusercontent.com/Ea797Ik6cOBPmOYfCUbmV5ox5sUwD8qAj8bFqYl-4wJuAgSwFbOdyQBYY55tuHRsI-ouHCjZnL0weOMhlFrRq4xPKjlaNtC0hdby9c0Dn8RH-5HCZg=w960',
 43 |                     }, {
 44 |                         title: 'Apply dynamic color using Material Design 3 for Android',
 45 |                         content: 'Codelab with step-by-step instructions for adding dynamic color features to an app.',
 46 |                         bg: 'https://lh3.googleusercontent.com/LDlQ85hvSwtSIQPORGlqAmGJiPkBZ4JcjKn38bWbcqUYdse8ZjLxJ2cJSBmnsh42WVcbssaiR72h5RJN4GzvmW5gNAwD63DdiDgCAE9zUNi0EIS8e6w=w960',
 47 |                     }, {
 48 |                         title: 'Material Design Components - MAD Skills',
 49 |                         content: 'YouTube playlist with step-by-step instructions for using Material Components for Android.',
 50 |                         bg: 'https://lh3.googleusercontent.com/in2ZbUcZSSRvzL7Q850495qwKdXiiniOhYfkNVU8OKez6DAXITQEPc647rN2MO53YS1y788oJVAm_YpQlAbZjqRxSbWzux9IcfYz8ON9HfkPmOWc4lo=w960',
 51 |                     }]
 52 |                 }
 53 |             }
 54 |         }
 55 |     }
 56 | </script>
 57 | 
 58 | <template x-component:page="develop-android-mdc-android" x-import="app:page-container"
 59 |     x-data="pageDevelopAndroidMCDAndroid.data">
 60 |     <app-page-container>
 61 |         <div class="m-auto w-full h-fit p-16 py-32 rounded-3xl bg-cover col-span-2"
 62 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
 63 | 
 64 |             <div class="flex justify-start pt-6">
 65 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">MDC-Android</div>
 66 |             </div>
 67 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
 68 |                 <div class="max-w-screen-md text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
 69 |                     Modular and customizable code for building Android products. Support is available for Material
 70 |                     Design 3.
 71 |                 </div>
 72 |             </div>
 73 |         </div>
 74 | 
 75 |         <fin-android-mdc-android-section :title="section1.title" :content="section1.content"
 76 |             :cards="section1.cards"></fin-android-mdc-android-section>
 77 | 
 78 |         <fin-android-mdc-android-section :title="section2.title" :content="section2.content"
 79 |             class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3" height="h-48" :cards="section2.cards"></fin-android-mdc-android-section>
 80 | 
 81 |         <app-footer></app-footer>
 82 |     </app-page-container>
 83 | </template>
 84 | 
 85 | <template x-component:fin="android-mdc-android-section">
 86 |     <div class="max-w-screen-xl m-auto py-6 text-black">
 87 |         <div class="text-2xl md:text-4xl font-medium mt-4 md:mt-8 ml-4 md:ml-6 py-4 dark:text-gray-300"
 88 |             x-text="$prop('title')"></div>
 89 |         <div class="text-base md:text-base font-normal ml-4 md:ml-6 pb-4 dark:text-gray-300" x-text="$prop('content')">
 90 |         </div>
 91 |         <div :class="`grid ${$prop('class', 'grid-cols-1 md:grid-cols-2')} gap-2`">
 92 |             <template x-for="card in $prop('cards',[])">
 93 |                 <div
 94 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
 95 |                     <template x-if="Boolean(card.bg)">
 96 |                         <div :class="`${$prop('height','h-72')} rounded-3xl mb-4 bg-cover bg-center`"
 97 |                             :style="`background-image:url('${card.bg}')`"></div>
 98 |                     </template>
 99 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
100 |                     </div>
101 |                     <div class="px-6 font-normal" x-text="card.content">
102 |                     </div>
103 |                 </div>
104 |             </template>
105 |         </div>
106 |     </div>
107 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/develop/flutter.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     const pageDevelopFlutter = {
  3 |         data() {
  4 |             return {
  5 |                 bg: {
  6 |                     top: {
  7 |                         dark: 'https://lh3.googleusercontent.com/kkr2TmO3u_FfBakRK1ZO-dpxKpxvX84TsZksqJNtfAjqBpCzdUairFKYnAhUj9Xz8tWkTXwYI9QjykmCmswAlsmLfIIXBFjxYabcsnuPizy5OHVYjMW2=w2400-rj',
  8 |                         light: 'https://lh3.googleusercontent.com/Hyd9Ea7nfmAIsP0YdygYsGn38uSoe_tAvkBU9d3uPfBLiJ6ILuvOFousDmp0kXPPoWZrOHotDn4800B7Wp2cidBxor_fBN3nNxDmw9jehZId3XVyrkw=w2400-rj',
  9 |                     },
 10 |                 },
 11 |                 section1: {
 12 |                     title: 'Announcements',
 13 |                     content: 'The latest from Material for Flutter',
 14 |                     cards: [{
 15 |                         title: 'What’s new in Flutter 3.7',
 16 |                         content: 'Material 3 updates, iOS improvements, and much more!',
 17 |                         bg: 'https://lh3.googleusercontent.com/l3tz5gQZbeExp1aWSteEgixF9T0wQvu437O0C5-Xtz0zZwX7ZZyxWOy7XTSf84Q84--ZTZJj052Zd2UYeGLIFRonTnqqQR6zmZBNilGrhB2mGm3Tnw=w960',
 18 |                     }, {
 19 |                         title: 'Material 3 Flutter showcase app',
 20 |                         content: 'Demo of Material 3 features, including updated components, typography, colors, and elevation support.',
 21 |                         bg: 'https://lh3.googleusercontent.com/AeNQQetW0pi2m0msUmIBg9Z9RQbcxx_NePMIt2bPNa-SmiWg2lH1GObE3TDAR7h8U2OwB3UkcVH2_qZv4vUXfS54PnjJpJpZvrID8t_E8qKBWAV7mh4=w960',
 22 |                     }]
 23 |                 },
 24 |                 section2: {
 25 |                     title: 'Resources & documentation',
 26 |                     content: 'Guides, developer docs, tutorials, and more',
 27 |                     cards: [{
 28 |                         title: 'Material 3 from design to deployment',
 29 |                         content: 'Learn how to build the Basil Material study in Flutter with advanced theming techniques that support multiple device contexts.',
 30 |                         bg: 'https://lh3.googleusercontent.com/YBZPtbHCByHZk-JTSLVJbtlFQMOtzICmwwM5xT3iURBCM0fX91lBRTCy1P9DGTfD8WcbWYS36NhWTsiarJgvJ2XYHf38aVNC81esam2KUZ9hqsxmhn0=w960',
 31 |                     }, {
 32 |                         title: 'Material 3 GitHub issue',
 33 |                         content: 'Umbrella tracking issue for all past and future engineering work on Flutter support for Material 3.',
 34 |                         bg: 'https://lh3.googleusercontent.com/dXbSdX3dXoapDCHIAT2bIpcUKwlRy5N0fELgAkGwHusLdkid9EdDb3yFxtu_kXPX2TlkE5R5aegKS37wvJlz2RhpqPnpUq6AzZZshpwvDM3LNZZoN1E=w960',
 35 |                     }, {
 36 |                         title: 'Build an animated responsive layout',
 37 |                         content: 'Start with an empty Flutter app and build out a fully styled and animated application using Material 3 with Flutter.',
 38 |                         bg: 'https://lh3.googleusercontent.com/OGAx7WOq7o270HpAZ4IN4OdHkT_Vq8LlHUf_vKr3EbEtI6hhk-Sqo3sDNos0BaKczKYul2cA63oRSY6GM5Y515qRoVNHOwIwdGY59899-9gUMVxxXPqC=w960',
 39 |                     }, {
 40 |                         title: 'Opt-in with useMaterial3 flag',
 41 |                         content: 'Set ThemeData.useMaterial3 to true for updated components and to apply new typography, color, elevation, and more.',
 42 |                         bg: 'https://lh3.googleusercontent.com/L-rVRIfi6E196mKrNXsHs1vOue-w3tQ4Jk90jrFG5jwkYcFHHRy6_bgAGJAQQkEIKUgnUboGC-l-1n9Q9bYzaIqFnOY0oTAb0k_-tgSyc_okEmH3mA=w960',
 43 |                     }, {
 44 |                         title: 'Flutter.dev',
 45 |                         content: 'Google\'s UI toolkit for building beautiful, natively compiled applications from a single codebase.',
 46 |                         bg: 'https://lh3.googleusercontent.com/d8EJCSQKFU7qPRpxM6nzq0VuehhXTjEN9Xry2m8k3vFXNNjZH7kSOieulhuYcJubNCgnoGaFyAO-c0QPo2kVTmFuDALky1iwW5WJIj26ZGF_3yz_cNDB=w960',
 47 |                     }, {
 48 |                         title: 'Take your Flutter app from boring to beautiful',
 49 |                         content: 'Step-by-step codelab on how to apply Material 3 in your Flutter app.',
 50 |                         bg: 'https://lh3.googleusercontent.com/piwuRKMvd6HPTuEx8wNatKXTqMVlJ_vNsz56YOfb-NO2stz-YBQNVTdzOIxPuRflUSJV7w4Ct5bjw53TwWFAs-3LKod0SDaoHA33OUdcfzLIPzkr874=w960',
 51 |                     }, {
 52 |                         title: '5 Steps to prepare your app for large screens',
 53 |                         content: 'What to prioritize when building a responsive UI experience.',
 54 |                         bg: 'https://lh3.googleusercontent.com/iKZikJ19fnwGhsXKo0f9R218eo5auXIi6srLWVlfxmpXDTSTmH8YS6laTBrblm43RGiNPZKbeIjn_161SQOZL1I1Lp-yx0bYB3GdHa7FS95mBU-TLIk=w960',
 55 |                     }, {
 56 |                         title: 'Material Motion in Flutter and Android',
 57 |                         content: 'Video on how to make beautiful motion using Flutter and the Material Motion system.',
 58 |                         bg: 'https://lh3.googleusercontent.com/k3FtSZ7LP6TnmNrzXcGvePfGI2xxlQPbQHsAXECFQA5ZhfZ75IpYD8N6W6aOPqYrNdNWVlQxJjiulOUiKohOkwtAqV2JIryAV_0sUsukRR9yg39s2kq7=w960',
 59 |                     }, {
 60 |                         title: 'Material 3 Canonical layouts',
 61 |                         content: 'See how to build an adaptive, responsible application using Material 3 canonical layouts with the adaptive_scaffold package.',
 62 |                         bg: 'https://lh3.googleusercontent.com/GY2HVqGNXH3MHVJlwtI_lXuLn3xo0yVuO6R_eNushtdUFuMNSJW6N4l4ZMjkx1vgiSOTtK4xEJfFQ4N3oP6J8aDw2yjiKfmLkLdaqlxJTch3S827k4lR=w960',
 63 |                     }, {
 64 |                         title: 'Material Flutter widget catalog',
 65 |                         content: 'The Flutter team is currently working on Material Design 3 support for Material Components.',
 66 |                         bg: 'https://lh3.googleusercontent.com/QrvmAPEIMJrJmdoCvekEqtMODi3p_YboX4hvHLO-Zr9gmG8vegohb_J0PLY0GB30d-GGLx-ivr9ehwEAkGumPt7A8nFsoxH3z-EaiwJXRyxENoHUa_o=w960',
 67 |                     }, {
 68 |                         title: 'Sample app: Wonderous',
 69 |                         content: 'Wonderous pushes visual fidelity, effects, and transitions to showcase Flutter capabilities on modern mobile hardware.',
 70 |                         bg: 'https://lh3.googleusercontent.com/-ainnwPh7Ivf7fCTwzY70JfW_tVgHEtewmoNNzVnqlgPoxvnEemdXCNSTXZmXARcVvDBpH4xjeXC8aCxQ2wuJz5EE3IDB03yr6O9aHcqJyAkGk4HY2z9=w960',
 71 |                     },]
 72 |                 }
 73 |             }
 74 |         }
 75 |     }
 76 | </script>
 77 | 
 78 | <template x-component:page="develop-flutter" x-import="app:page-container"
 79 |     x-data="pageDevelopFlutter.data">
 80 |     <app-page-container>
 81 |         <div class="m-auto w-full h-fit p-16 py-16 rounded-3xl bg-cover col-span-2"
 82 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
 83 | 
 84 |             <div class="flex justify-start pt-6">
 85 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Flutter</div>
 86 |             </div>
 87 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
 88 |                 <div class="max-w-screen-lg text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
 89 |                     A framework for building beautiful, natively compiled applications from a single codebase. Support
 90 |                     is available for Material Design 3.
 91 |                 </div>
 92 |             </div>
 93 |         </div>
 94 | 
 95 |         <fin-develop-flutter-section :title="section1.title" :content="section1.content"
 96 |             :cards="section1.cards"></fin-develop-flutter-section>
 97 | 
 98 |         <fin-develop-flutter-section :title="section2.title" :content="section2.content"
 99 |             class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3" height="h-48"
100 |             :cards="section2.cards"></fin-develop-flutter-section>
101 | 
102 |         <app-footer></app-footer>
103 |     </app-page-container>
104 | </template>
105 | 
106 | <template x-component:fin="develop-flutter-section">
107 |     <div class="max-w-screen-xl m-auto py-6 text-black">
108 |         <div class="text-2xl md:text-4xl font-medium mt-4 md:mt-8 ml-4 md:ml-6 py-4 dark:text-gray-300"
109 |             x-text="$prop('title')"></div>
110 |         <div class="text-base md:text-base font-normal ml-4 md:ml-6 pb-4 dark:text-gray-300" x-text="$prop('content')">
111 |         </div>
112 |         <div :class="`grid ${$prop('class', 'grid-cols-1 md:grid-cols-2')} gap-2`">
113 |             <template x-for="card in $prop('cards',[])">
114 |                 <div
115 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
116 |                     <template x-if="Boolean(card.bg)">
117 |                         <div :class="`${$prop('height','h-72')} rounded-3xl mb-4 bg-cover bg-center`"
118 |                             :style="`background-image:url('${card.bg}')`"></div>
119 |                     </template>
120 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
121 |                     </div>
122 |                     <div class="px-6 font-normal" x-text="card.content">
123 |                     </div>
124 |                 </div>
125 |             </template>
126 |         </div>
127 |     </div>
128 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/develop/overview.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const pageDevelopOverview = {
 3 |         data() {
 4 |             return {
 5 |                 bg: {
 6 |                     top: {
 7 |                         dark: 'https://lh3.googleusercontent.com/kkr2TmO3u_FfBakRK1ZO-dpxKpxvX84TsZksqJNtfAjqBpCzdUairFKYnAhUj9Xz8tWkTXwYI9QjykmCmswAlsmLfIIXBFjxYabcsnuPizy5OHVYjMW2=w2400-rj',
 8 |                         light: 'https://lh3.googleusercontent.com/ZBG1cIsDtZG3zwzieULlEvBk_jw6VpxHOkDlvCe9FUdoVObz7MxUtKmATzYZj1cYaj99SOzcpiz0Gjz8a78aEXpV_yEotJjfMwQrQvCD_4Up7qqfYWo=w2400-rj',
 9 |                     },
10 |                 },
11 |                 section1: {
12 |                     cards: [{
13 |                         title: 'MDC-Android',
14 |                         content: 'Developer documentation, tutorials, and feature highlights to build with Material for Android.',
15 |                         bg: 'https://lh3.googleusercontent.com/_w9xZ-KglSVNibMtvqpKGEZG06lz2oQR0Auh4KB6EAGa7MYMkxvRmohH0-jyh8ciLXCnS-wxBlv62KUbaHObMik6bSQx_cT6DC2_olwfNHCvddX6eq4=w960',
16 |                     }, {
17 |                         title: 'Jetpack Compose',
18 |                         content: 'Developer documentation, tutorials, and feature highlights to build with Material for Android using Jetpack Compose.',
19 |                         bg: 'https://lh3.googleusercontent.com/YQ2x7-9vHQ7ax5tZrd5iWEyDQiJw-nBoqT0dmGEsEiJFrcJrSSzjVrgJh8apIm_mfV4_nucy-ZOFWMFjMEuCyHMvpHkN540fjWaBCsMENx37aNljhQo=w960',
20 |                     }, {
21 |                         title: 'Flutter',
22 |                         content: 'Developer documentation, tutorials, and feature highlights to build with Material for Flutter.',
23 |                         bg: 'https://lh3.googleusercontent.com/Wnu15qqiKzI9JuTmK-Iv5Ohu48whuEN65F1mlHOTOLOTyup9scIu-9V4f2cy_DgIuuyTkt3WxyUMeGG-M4mMu3HlCngs4PB280X28c4oKoc9qBo4ORY=w960',
24 |                     }, {
25 |                         title: 'Web',
26 |                         content: 'Planned developer documentation to build with Material in any Web framework.',
27 |                         bg: 'https://lh3.googleusercontent.com/EDyzxrUlg9kQePSpKWlGfEqIueTE6b5B7FdbzXbAXXCvOj55JW76TvUTydBxaJ5_YkBT8PZxdpxKdLg4c1yEp7dxWT7W8W3ucM_uh6tpmNvo7pUh1Q=w960',
28 |                     }]
29 |                 }
30 |             }
31 |         }
32 |     }
33 | </script>
34 | 
35 | <template x-component:page="develop-overview" x-import="app:page-container" x-data="pageDevelopOverview.data">
36 |     <app-page-container>
37 |         <div class="m-auto w-full h-fit p-16 py-32 rounded-3xl bg-cover col-span-2"
38 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
39 | 
40 |             <div class="flex justify-start pt-6">
41 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Develop</div>
42 |             </div>
43 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
44 |                 <div class="max-w-screen-md text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
45 |                     Implement Material Design with code and developer documentation for MDC-Android, Flutter, Jetpack
46 |                     Compose, and the Web.
47 |                 </div>
48 |             </div>
49 |         </div>
50 | 
51 |         <fin-develop-overview-section :cards="section1.cards"></fin-develop-overview-section>
52 | 
53 |         <app-footer></app-footer>
54 |     </app-page-container>
55 | </template>
56 | 
57 | <template x-component:fin="develop-overview-section">
58 |     <div class="max-w-screen-xl m-auto py-6 text-black">
59 |         <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
60 |             <template x-for="card in $prop('cards',[])">
61 |                 <div
62 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
63 |                     <template x-if="Boolean(card.bg)">
64 |                         <div class="h-72 rounded-3xl mb-4 bg-cover bg-center"
65 |                             :style="`background-image:url('${card.bg}')`"></div>
66 |                     </template>
67 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
68 |                     </div>
69 |                     <div class="px-6 font-normal" x-text="card.content">
70 |                     </div>
71 |                 </div>
72 |             </template>
73 |         </div>
74 |     </div>
75 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/develop/web.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const pageDevelopWeb = {
 3 |         data() {
 4 |             return {
 5 |                 bg: {
 6 |                     top: {
 7 |                         dark: 'https://lh3.googleusercontent.com/25dhf3qzNHFE3NYiX3hOoMS4tdKXj8U0EYCqosc5_x4_g5Eg0ClC1NpAXkuHGwuuwM-3k0t0l5gV1mRC1BH3RgMiFLfzU0FaNrtJO3tY319OLfA5ixU=w2400-rj',
 8 |                         light: 'https://lh3.googleusercontent.com/vvm00GimaLqpsW4zeODWAbrpApsUfm8t7XVOvW4ZMShdEjRa5dx3ZzQzXcbg7jMa6Fo2X63naBVvcXhuj3etkPO78ZHbA21oQfVc2xuWRo2A7wlKaE4=w2400-rj',
 9 |                     },
10 |                 }
11 |             }
12 |         }
13 |     }
14 | </script>
15 | 
16 | <template x-component:page="develop-web" x-import="app:page-container" x-data="pageDevelopWeb.data">
17 |     <app-page-container>
18 |         <div class="m-auto w-full h-fit p-16 py-32 rounded-3xl bg-cover col-span-2"
19 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
20 | 
21 |             <div class="flex justify-start pt-6">
22 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Web</div>
23 |             </div>
24 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
25 |                 <div class="max-w-screen-lg text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
26 |                     Material Web is Google’s component library for building applications that work in any web framework.
27 |                 </div>
28 |             </div>
29 |         </div>
30 | 
31 |         <div class="m-auto w-full h-fit p-32 rounded-3xl bg-cover col-span-2">
32 | 
33 |             <div class="flex justify-start pt-6">
34 |                 <div class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium">Web support is planned</div>
35 |             </div>
36 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
37 |                 <div class="max-w-screen-md text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
38 |                     The Material Web team is making significant changes to the codebase in preparation for adding
39 |                     Material Design 3 support. Follow the material-web repository on Github for updates.
40 |                 </div>
41 |             </div>
42 |         </div>
43 | 
44 |         <app-footer></app-footer>
45 |     </app-page-container>
46 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/foundations/accessible-design.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     const pageFoundationsAccessibleDeign = {
  3 |         data() {
  4 |             return {
  5 |                 selected: 0,
  6 |                 bg: {
  7 |                     top: {
  8 |                         dark: 'https://lh3.googleusercontent.com/m8am03OY7pwMPiYPLQ4K1PimDBzWIv49tLkS5ilqBfI4GadhofpAikaOP7bfmxeLWQHIL1dan7DU8wW0ob5w1s2NKf9CXJqkkehN--SM8ROC-ZzgKA=w2400-rj',
  9 |                         light: 'https://lh3.googleusercontent.com/_CUhJ8LwfaLYy-56RqbQy6CVZDoeXkQdqRpnRjUnksK6kJOIiGkSqQFdxZUXW3KqBuXSlZx9z2xjFkJyDrIKGmXF2dK7E6ZtMjQzVx69_56mR5OAU0s=w2400-rj',
 10 |                     },
 11 |                 },
 12 |                 sections1: [{
 13 |                     title: 'Accessibility & Material Design',
 14 |                     contents: [
 15 |                         'Accessibility by default is a foundational design value for Material. Understanding and anticipating a wide range of human experiences and disabilities establishes product foundations that prevent costly redesigns, reduce tech and design debt, and conserve resources upfront.',
 16 |                         'Accessibility standards built into Material components are designed to provide a foundation for inclusive product design. Understanding your product’s accessibility can enhance usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, or situational disabilities (such as a broken arm).'
 17 |                     ]
 18 |                 }, {
 19 |                     title: 'Get started',
 20 |                     contents: [
 21 |                         'Accessibility requirements and goals are documented across component pages and guidelines. In component guidance, accessibility standards are both implicit (built into design and code), as well as explicit (considerations are discussed where judgment is required.) ',
 22 |                         'Use this page as a starting point for understanding the accessibility standards applied across Material guidelines, as well as a reference to continue checking throughout design and development stages.'
 23 |                     ]
 24 |                 }, {
 25 |                     title: 'Principles for accessible design',
 26 |                     contents: [
 27 |                         'The following principles for accessible design are approaches that can help anticipate, include, and respond to the needs of individuals. They\'re considerations for design, development, collaboration, and co- creation that encourage inclusive and equitable outcomes.',
 28 |                     ]
 29 |                 }],
 30 |                 sections2: [{
 31 |                     title: 'Honor individuals',
 32 |                     contents: [
 33 |                         'Universal default experiences rarely meet everyone’s needs. Introducing customizable features in a default experience allows room for individual adaptation. Honoring the shifting needs of any person can mean giving more freedom to choose things for themselves',
 34 |                         'Because a person\'s experience throughout their day, or year, or life can continue to change, it helps to support varying preferences and choices that allow individuals to address how their changing conditions, individual knowledge, and varying needs are met. '
 35 |                     ],
 36 |                     image: 'https://lh3.googleusercontent.com/FeiRvlGVf5nLAEizreflu6Ei7ZTiwadrggovH9T6mA6X-QVZ_1mrN12Amg4__1Vr_DnXVUXfwOQZXejsgkc4sQGVwaCqElPB8OlHE-Qx5AWxBw=s0'
 37 | 
 38 |                 }, {
 39 |                     title: 'Learn before, not after',
 40 |                     contents: [
 41 |                         'Before defining solutions, invest time in understanding the needs of users with a wide range of abilities and life experiences. Formal and informal research can open new ways of thinking, reduce biases, and encourage creative ways to make access available, especially to those who fall outside prevailing norms.',
 42 |                         'Accessible design processes anticipate as many potential product or experience outcomes as possible upfront. When design problems arise, the exploration of outcomes can be used as a research foundation for learning and recovering thoughtfully. ',
 43 |                     ],
 44 |                     image: 'https://lh3.googleusercontent.com/w4_OezxMLchD5a0vLS1qwCi-Lb2ZRPq416yNQfmxzUeHIAkh2ywip48X2P3cLoshWE1yV606H6MOhWHsUA69EycOVCA9sBhvdXXjIKIDZhRm=s0'
 45 |                 }, {
 46 |                     title: 'Requirements as a starting point',
 47 |                     contents: [
 48 |                         'The minimum requirements established by WCAG support specific human needs. Designing with accessibility standards is a creative opportunity to expand and improve the application of requirements that improve human relationships with technology.',
 49 |                         'History has shown that features originating from responses to specific access needs (dark mode, text-to-speech, speech-to-text) are a result of creative problem-solving within specified constraints. Seeing the requirements as opportunities, rather than constraints, has been shown to lead to solutions that ultimately serve many.',
 50 |                     ],
 51 |                     image: 'https://lh3.googleusercontent.com/takX4Bzh7cUDhRALET-TKMTwLoD9zXB-18FZeDqDh9cnU3JZ6tjy8tuWQYWavtaKl8PNgqWjjrdhXCuoHLUM7PThtgjqBoYp6550H2n1oxM=s0'
 52 |                 }],
 53 |                 onTabChange(e) {
 54 |                     const index = e.detail;
 55 |                     const section = document.getElementById(`section_${index}`);
 56 |                     const mainPageContainer = document.getElementById('mainPageContainer');
 57 |                     mainPageContainer.scrollTo({
 58 |                         top: section.offsetTop - 100,
 59 |                         left: 0,
 60 |                         behavior: "smooth",
 61 |                     });
 62 |                 },
 63 |                 onThisPageChage(e) {
 64 |                     const section = document.getElementById(e.detail);
 65 |                     const mainPageContainer = document.getElementById('mainPageContainer');
 66 |                     mainPageContainer.scrollTo({
 67 |                         top: section.offsetTop - 100,
 68 |                         left: 0,
 69 |                         behavior: "smooth",
 70 |                     });
 71 |                 },
 72 |                 scroll(e) {
 73 |                     let index = 0;
 74 |                     for (let i = 0; i < 4; i++) {
 75 |                         const section = document.getElementById(`section_${i}`);
 76 |                         if (section.getBoundingClientRect().top - 100 <= 0) index = i;
 77 |                     }
 78 |                     this.selected = index;
 79 |                 }
 80 |             }
 81 |         }
 82 |     }
 83 | </script>
 84 | <template x-component:page="foundations-accessible-design" x-import="app:page-container"
 85 |     x-data="pageFoundationsAccessibleDeign.data">
 86 |     <app-page-container @scroll="(e) => { appTabList.scroll(e); onThisPage.scroll(e); scroll(e); }">
 87 | 
 88 |         <app-on-this-page
 89 |             :list="[{text:'Overview', hrefid: 'section_0'},{text: 'Accessibility basics', hrefid: 'section_1'}, {text:'Patterns', hrefid: 'section_2'}, {text:'Design to implementation', hrefid:'section_3'}]"
 90 |             :selected="selected" x-on:on-select="onThisPageChage"></app-on-this-page>
 91 | 
 92 |         <div id="topContainer" class="m-auto w-full h-fit p-16 py-16 rounded-3xl bg-cover col-span-2 mb-2"
 93 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
 94 | 
 95 |             <div class="flex justify-start pt-6">
 96 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Accessible design</div>
 97 |             </div>
 98 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
 99 |                 <div class="max-w-screen-lg text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
100 |                     Accessible design makes products usable for people with all kinds of abilities
101 |                 </div>
102 |             </div>
103 |         </div>
104 |         <app-tab-list :list="['Overview', 'Accessibility basics', 'Patterns', 'Design to implementation']"
105 |             :selected="selected" x-on:on-select="onTabChange"></app-tab-list>
106 | 
107 |         <div id="section_0">
108 |             <template x-for="section in sections1">
109 |                 <fin-foundations-accessible-design-section1
110 |                     :section="section"></fin-foundations-accessible-design-section1>
111 |             </template>
112 |         </div>
113 | 
114 |         <template x-for="(section, index) in sections2">
115 |             <fin-foundations-accessible-design-section2 :section="section"
116 |                 :index="index+1"></fin-foundations-accessible-design-section2>
117 |         </template>
118 | 
119 |         <app-footer></app-footer>
120 | 
121 |         <div class="h-screen"></div>
122 |     </app-page-container>
123 | </template>
124 | 
125 | <template x-component:fin="foundations-accessible-design-section1">
126 |     <div class="max-w-screen-lg px-4 m-auto py-6 text-black dark:text-gray-300">
127 |         <div class="text-3xl md:text-4xl font-medium mt-4 md:mt-8 py-4 dark:text-gray-300"
128 |             x-text="$prop('section').title"></div>
129 |         <template x-for="content in $prop('section').contents">
130 |             <div class="py-2 font-normal" x-text="content">
131 |             </div>
132 |         </template>
133 |     </div>
134 | </template>
135 | 
136 | <template x-component:fin="foundations-accessible-design-section2">
137 |     <div :id="`section_${$prop('index')}`" class="max-w-screen-lg m-auto py-6 text-black dark:text-gray-300">
138 |         <div class="grid gap-2" style="grid-template-columns: auto 415px;">
139 |             <div class="px-4">
140 |                 <div class="text-2xl font-semibold md:text-2xl font-normal pb-2 dark:text-gray-300"
141 |                     x-text="$prop('section').title">
142 |                 </div>
143 |                 <template x-for="content in $prop('section').contents">
144 |                     <div class="py-2 font-normal" x-text="content">
145 |                     </div>
146 |                 </template>
147 |             </div>
148 |             <div class="rounded-3xl mb-4 bg-cover bg-center"
149 |                 :style="`background-image:url('${$prop('section').image}');width:415px;height:415px;`"></div>
150 |         </div>
151 |     </div>
152 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/foundations/overview.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const pageFoundationsOverview = {
 3 |         data() {
 4 |             return {
 5 |                 bg: {
 6 |                     top: {
 7 |                         dark: 'https://lh3.googleusercontent.com/D3-OahttrL-yH62XV-Ss1HzQWT1RaCeAowh_b24TSPUbfilOv559cGrzrExTklxin0oOrZ4RlyPYe85coUMZDSTCqgMOlsofyLm3RKFzhwONddZRf8X_=w2400-rj',
 8 |                         light: 'https://lh3.googleusercontent.com/U8dSUmCjiqUZmZoCxzBZ5oGBCqCVipJvghZZDUfRgErjMa_UKYWEAU4TwlArCrW_TLDzfuIE08tirIROhJ8OZDsFZf8DK4p7pam74PGvtqBiE0ES2gI=w2400-rj',
 9 |                     },
10 |                 },
11 |                 section1: {
12 |                     cards: [{
13 |                         title: 'Accessibility',
14 |                         content: 'Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI.',
15 |                         bg: 'https://lh3.googleusercontent.com/yW9keBR_4F-w5mTHkNzGsviez7-xaxbRrNjbjPGf3pm3WxwdJgqU-KDJvkL-MM0oNfptPRraXNZmZJ2-pxpUsPBwKaflHt-DHBHYD_nsEPXq7O9ing=w960',
16 |                     }, {
17 |                         title: 'Adaptive design',
18 |                         content: 'Adaptive layouts react to input from users, devices, and screen elements. Material guidance describes how to design for variable screen sizes, from phones and tablets, to desktop and beyond.',
19 |                         bg: 'https://lh3.googleusercontent.com/jeH_DXs3SntefbFeBWIMp-0t8EIpwnMDgqxooGiOgWfA2iS_S95TH-w0qD0jvMk2Dw7TOaAimKTwYrff88lNmGFKu97iuoctJPLAdZYwrv3VSSLQSw=w960',
20 |                     }, {
21 |                         title: 'Customizing Material',
22 |                         content: 'M3 makes brand expression in an interface simpler and more beautiful than ever before.',
23 |                         bg: 'https://lh3.googleusercontent.com/zQXC4ZwVUA3GFP6oWjRrrBmQXGUF4ivC5Te-AqK9NPihA5oLEkLbVyQiW3Wi3gIbOl4xjqWP1GpTG6GSdi1FYRFFwJyJO3_JLMaFSOiLyJaHk5knWJfq=w960',
24 |                     }, {
25 |                         title: 'Design tokens',
26 |                         content: 'Tokens store style values like colors and fonts so the same values can be used across designs, code, tools, and platforms.',
27 |                         bg: 'https://lh3.googleusercontent.com/3qHtqBY1lR0fp4IxXE72CAKXIv2VRSaYaAxYv7AmbLieFpnFw8_sBAxOoG8RwSWGJE7ErO6kIVrkZ_UrJMh86vxAmYkiF-ug6jmqKGM4UOsQTVga2w=w960',
28 |                     }, {
29 |                         title: 'Interaction states',
30 |                         content: 'States are visual indicators used to communicate the status of a component or interactive element.',
31 |                         bg: 'https://lh3.googleusercontent.com/1qunnpRZ_uridw9L8XI8RRKyRMHQ5npx4F4fFywzZpneckwd8T_t1WDhDu2ZbPlIV0XmauzfANMGJSb3VDBiB7sFxiFhiU7rSX3BQQhC5KY1UYjXPD8=w960',
32 |                     }, {
33 |                         title: 'Material A-Z',
34 |                         content: 'Get to know the key terms and concepts behind Material, from A to Z.',
35 |                         bg: 'https://lh3.googleusercontent.com/xA-uPF7vBzResUgmqwRGdzQfpLI7THZNLhC5wrEe5d_4H_zLYR3FeO1A_ADSCefvvtvoM9QMB4Jt6pr3x0gqs2QuXN1Xd_iIz38qDPvd3jlkSlfZCA=w960',
36 |                     },]
37 |                 },
38 |             }
39 |         }
40 |     }
41 | </script>
42 | 
43 | <template x-component:page="foundations-overview" x-import="app:page-container" x-data="pageFoundationsOverview.data">
44 |     <app-page-container>
45 |         <div class="m-auto w-full h-fit p-16 py-16 rounded-3xl bg-cover col-span-2"
46 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
47 | 
48 |             <div class="flex justify-start pt-6">
49 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Foundations</div>
50 |             </div>
51 |             <div class="flex justify-start pt-2 pb-8 text-2xl">
52 |                 <div class="max-w-screen-lg text-lg md:text-xl lg:text-xl xl:text-xl text-left font-normal">
53 |                     Foundations inform the basis of any great user interface, from accessibility standards to essential
54 |                     patterns for layout and interaction.
55 |                 </div>
56 |             </div>
57 |         </div>
58 | 
59 |         <fin-foundations-overview-section :cards="section1.cards"></fin-foundations-overview-section>
60 | 
61 |         <app-footer></app-footer>
62 |     </app-page-container>
63 | </template>
64 | 
65 | <template x-component:fin="foundations-overview-section">
66 |     <div class="max-w-screen-xl m-auto py-6 text-black">
67 |         <div :class="`grid ${$prop('class', 'grid-cols-1 md:grid-cols-2')} gap-2`">
68 |             <template x-for="card in $prop('cards',[])">
69 |                 <div
70 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
71 |                     <template x-if="Boolean(card.bg)">
72 |                         <div :class="`${$prop('height','h-72')} rounded-3xl mb-4 bg-cover bg-center`"
73 |                             :style="`background-image:url('${card.bg}')`"></div>
74 |                     </template>
75 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
76 |                     </div>
77 |                     <div class="px-6 font-normal" x-text="card.content">
78 |                     </div>
79 |                 </div>
80 |             </template>
81 |         </div>
82 |     </div>
83 | </template>


--------------------------------------------------------------------------------
/playground/pages/m3/home.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     const pageHome = {
  3 |         data() {
  4 |             return {
  5 |                 bg: {
  6 |                     top: {
  7 |                         dark: 'https://lh3.googleusercontent.com/BvKj8kuRZqLpqPuuZxOl4IeHv5jaD5kT1jhn3P8EMBcmzyoHRAFXsCxNH6ZeHhQG4V1F_AegXIw2cJIBmETy7eHM27IdLQe7FqEgz6NLaXflHiHM4xyh=w2400-rj',
  8 |                         light: 'https://lh3.googleusercontent.com/2OrUzHCRSI-V46Z1qJBh90usG6OkKwCbXN80FbrjkWoQz4VfoJjNAoQHLHPQRZWH7dI_m5I1gi48h6xMJ5pK6kkdXmUnXPe4VqwvEdo4QeWRjLV9Oew=w2400-rj'
  9 |                     }
 10 |                 },
 11 |                 section1: {
 12 |                     title: 'News & launches',
 13 |                     cards: [
 14 |                         {
 15 |                             bg: 'https://lh3.googleusercontent.com/51moDkmVWptBFXRReuACKocS_fsOoYtfT-C78onEUKeRr7ky4l_ZsuZMK2AnE7-MPRbLzcKTAIFmNyyN7ACo0-eygmXaGeR0ItYtRcYNE8-_L8RHqkA=w960',
 16 |                             title: 'New: Large screen guidance',
 17 |                             content: 'Get started adapting your layouts for a range of window size classes and hardware'
 18 |                         },
 19 |                         {
 20 |                             bg: 'https://lh3.googleusercontent.com/aiJojq_gpPLqLhU0PZH6Dog-OjIMti_hiclF_6oqxucGuvywn_AEtu2Qrk2f4WxEhRWMjXkz8qXpTCGoj5TZ0DUCEZ5UIXnXTSIu_7ndg2dTNmQbdkCO=w960',
 21 |                             title: 'New: Large screen guidance3',
 22 |                             content: 'Get started adapting your layouts for a range of window size classes and hardware'
 23 |                         },
 24 |                         {
 25 |                             bg: 'https://lh3.googleusercontent.com/mLGakWFjdX3zGBIhCUWqzjlj3gUXOY8hOed_ISzomlpNmjKWUiqCFyNGGAZFneVaK30v4GUpjn7lyIsI2Z7KPvMKrYkumzBr2nwbVe3BQKRkpam3sA=w960',
 26 |                             title: 'Figma design kit for M3',
 27 |                             content: 'Jumpstart your M3 designs with the complete library of ready-made components'
 28 |                         }
 29 |                     ]
 30 |                 },
 31 |                 section2: {
 32 |                     title: 'Design system updates',
 33 |                     cards: [{
 34 |                         bg: 'https://lh3.googleusercontent.com/AG8Da4Doz97XcS62XgVOYWiRwcwgZZdhJOeejfA9bhzY8K5cyhsy753fFaNgkZjcTXA7MwQnPOa9FjKaFFoOVDGVh33PutwuflvNCXkfBS7AR5GbeQ=w960',
 35 |                         title: 'M3 for Jetpack Compose', content: 'With the latest stable release, use Jetpack Compose to build a complete M3 Android app'
 36 |                     }, {
 37 |                         bg: 'https://lh3.googleusercontent.com/IfqcD9hZWV1tohxFc8gyiP9kVjz0Igg1trtKkYD3qxvEziIxbnD2b8mCpmJqC015XWD14Pvwy-0vRUSJltvEa9tcY8TnWpO0zYJaR1IPjJlRrWpo3Q=w960',
 38 |                         title: 'New component: M3 carousel', content: 'An expressive new component for displaying scrollable collections of content'
 39 |                     }, {
 40 |                         bg: 'https://lh3.googleusercontent.com/aLTg-FT4Ocgvjw1B_i3fOVK-rWoV3C7XCHyBkKwSbJFzIZtJjo-5atBHcSs9aZdHxiMw8-nP3lCnULJtFG_KdIVg7Gk-NV8sc1DJkeMRsTtir9pIu6IY=w960',
 41 |                         title: 'Back navigation & gestures', content: 'Explore new motion and gesture capabilities for smooth navigation across screens'
 42 |                     }, {
 43 |                         bg: 'https://lh3.googleusercontent.com/QTSOFxOaVde6gu-lNjTZ_VrOh7ihpSgRc-hErsBVjQ4Te9tIj4cW4BNWXj2fy1WbDnWYNS3v6pO628xBLC-A74K7ylf0ODNz-jbNhM1OUCgTUvZSN3zP=w960',
 44 |                         title: 'Motion system updates', content: 'Get started applying motion, from ready-to-use transition patterns to updated guidance'
 45 |                     }, {
 46 |                         bg: 'https://lh3.googleusercontent.com/w0mg7Iy0YoeV7ViHTp9XRzZFTbCX-ME87HPfbv_XFFZlQ-D6tjVwxsY1X_HUrFiXf-kNp8LePGcqv2Oh3OiNU6J28BYhiTf8UQKJBRDYPZejkpKE0NQ=w960',
 47 |                         title: 'Material Theme Builder', content: 'Easily migrate or get started with the M3 color system and dynamic color'
 48 |                     }, {
 49 |                         bg: 'https://lh3.googleusercontent.com/560ITYkB-YZ3Hc2f0s-i9doX7kqOZ_CNnuzS7XtPolT6zfcKk7PW2TCSlD61OkSAu9eLXn1U404j5Sc4tZNZh-j4IscbCgHURVy1eC7fGtFESdOQMdhm=w960',
 50 |                         title: 'New color guidance for tones', content: 'Updates include tone-based surface colors, contrast modes, and fixed accent colors'
 51 |                     },]
 52 |                 },
 53 |                 section3: {
 54 |                     title: 'Resources',
 55 |                     cards: [
 56 |                         { title: 'Material blog', content: 'News, tutorials, and inspiration from the Material team' },
 57 |                         { title: 'Figma design kit', content: 'Customizable styles and components to help you design with Material 3' },
 58 |                         { title: 'Get started', content: 'Guides, videos, and tools to start building with Material' },
 59 |                         { title: 'Develop', content: 'Code and developer documentation for Android, Flutter, and the Web' }
 60 |                     ]
 61 |                 }
 62 |             }
 63 |         }
 64 |     }
 65 | </script>
 66 | 
 67 | <template x-component:page="home" x-import="app:page-container" x-data="pageHome.data">
 68 |     <app-page-container>
 69 |         <div class="max-w-screen-2xl m-auto h-fit p-16 rounded-3xl bg-cover"
 70 |             :style="`background-image: url('${bg.top[$store.persist.theme]}')`">
 71 |             <div class="flex justify-center">
 72 |                 <div class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl font-medium">Material Design</div>
 73 |             </div>
 74 |             <div class="flex justify-center pt-2 pb-8 text-2xl">
 75 |                 <div class="max-w-screen-md text-lg md:text-xl lg:text-xl xl:text-xl text-center">
 76 |                     Material 3 is the latest version of Google’s open-source design system.
 77 |                     Design and build beautiful, usable products with Material 3.
 78 |                 </div>
 79 |             </div>
 80 |             <div class="flex justify-center">
 81 |                 <button
 82 |                     class="rounded-full py-1 md:py-2 lg:py-4 px-4 md:px-6 lg:px-8 xl:px-10 text-lg md:text-xl lg:text-2xl font-medium text-white bg-blue dark:bg-blue-300 dark:text-blue-900">Get
 83 |                     started</button>
 84 |             </div>
 85 |         </div>
 86 |         <fin-home-section :title="section1.title" :cards="section1.cards"></fin-home-section>
 87 |         <fin-home-section :title="section2.title" :cards="section2.cards"></fin-home-section>
 88 |         <fin-home-section :title="section3.title" :cards="section3.cards"></fin-home-section>
 89 | 
 90 |         <app-footer></app-footer>
 91 |     </app-page-container>
 92 | </template>
 93 | 
 94 | <template x-component:fin="home-section">
 95 |     <div class="max-w-screen-xl m-auto py-6 text-black">
 96 |         <div class="text-2xl md:text-4xl font-medium mt-4 md:mt-8 ml-4 md:ml-6 py-4 dark:text-gray-300"
 97 |             x-text="$prop('title')"></div>
 98 |         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
 99 |             <template x-for="card in $prop('cards',[])">
100 |                 <div
101 |                     class="pb-6 rounded-3xl bg-gray-100 dark:bg-neutral-700 dark:text-gray-300 hover:bg-sky-100 dark:hover:bg-sky-900 cursor-pointer">
102 |                     <template x-if="Boolean(card.bg)">
103 |                         <div class="h-48 rounded-3xl mb-4 bg-cover" :style="`background-image:url('${card.bg}')`"></div>
104 |                     </template>
105 |                     <div :class="`text-2xl font-medium px-6 ${Boolean(card.bg) ? '' : 'pt-6'}`" x-text="card.title">
106 |                     </div>
107 |                     <div class="px-6 font-normal" x-text="card.content">
108 |                     </div>
109 |                 </div>
110 |             </template>
111 |         </div>
112 |     </div>
113 | </template>


--------------------------------------------------------------------------------
/playground/pages/menu/basic.html:
--------------------------------------------------------------------------------
 1 | <template x-component:page="menu-basic" x-import="hui:menu">
 2 |     <div class="flex h-full w-full justify-center bg-gray-50 p-12">
 3 |         <div class="relative inline-block text-left">
 4 |             <hui-menu>
 5 |                 <span class="rounded-md shadow-sm">
 6 |                     <hui-menu-button
 7 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
 8 |                         <span>Options</span>
 9 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
10 |                             <path fillRule="evenodd"
11 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
12 |                                 clipRule="evenodd" />
13 |                         </svg>
14 |                     </hui-menu-button>
15 |                 </span>
16 | 
17 |                 <hui-menu-items
18 |                     class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
19 |                     <div class="px-4 py-3">
20 |                         <p class="text-sm leading-5">Signed in as</p>
21 |                         <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
22 |                     </div>
23 | 
24 |                     <div class="py-1">
25 |                         <app-menu-item href="#account-settings">Account settings</app-menu-item>
26 |                         <app-menu-item href="#support">Support</app-menu-item>
27 |                         <app-menu-item disabled href="#new-feature">New feature (soon)</app-menu-item>
28 |                         <app-menu-item href="#license">License</app-menu-item>
29 |                     </div>
30 |                     <div class="py-1"> 
31 |                         
32 |                         <app-menu-item href="#sign-out">Sign out</app-menu-item>
33 |                     </div>
34 |                 </hui-menu-items>
35 |             </hui-menu>
36 |         </div>
37 |     </div>
38 | </template>
39 | 
40 | <template x-component:app.unwrap="menu-item">
41 |     <hui-menu-item>
42 |         <a tabindex="-1" :href="$prop('href')" :class="[
43 |         'flex justify-between w-full text-left px-4 py-2 text-sm leading-5',
44 |         active ? 'bg-indigo-500 text-white' : 'text-gray-700',
45 |         disabled ? 'cursor-not-allowed opacity-50' : '']">
46 |             <span :class="active ? 'font-bold' : '' ">
47 |                 <slot></slot>
48 |             </span>
49 |             <kbd :class="['font-sans', active ? 'text-indigo-50' : '']">⌘K</kbd>
50 |         </a>
51 |     </hui-menu-item>
52 | </template>
53 | 


--------------------------------------------------------------------------------
/playground/pages/menu/multiple-elements.html:
--------------------------------------------------------------------------------
  1 | <template x-component:page="menu-multiple-elements" x-import="hui:menu">
  2 |     <div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
  3 |         <div class="relative inline-block text-left">
  4 |             <hui-menu>
  5 |                 <span class="rounded-md shadow-sm">
  6 |                     <hui-menu-button
  7 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
  8 |                         <span>Options</span>
  9 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 10 |                             <path fillRule="evenodd"
 11 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
 12 |                                 clipRule="evenodd" />
 13 |                         </svg>
 14 |                     </hui-menu-button>
 15 |                 </span>
 16 | 
 17 |                 <hui-menu-items
 18 |                     class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
 19 |                     <div class="px-4 py-3">
 20 |                         <p class="text-sm leading-5">Signed in as</p>
 21 |                         <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
 22 |                     </div>
 23 | 
 24 |                     <div class="py-1">
 25 |                         <hui-menu-item><a :class="
 26 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 27 |                   active && 'bg-gray-100 text-gray-900',
 28 |                   disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
 29 |                                 settings</a></hui-menu-item>
 30 |                         <hui-menu-item><a :class="
 31 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 32 |                     active && 'bg-gray-100 text-gray-900',
 33 |                     disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
 34 |                         <hui-menu-item disabled><a :class="
 35 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 36 |                   active && 'bg-gray-100 text-gray-900',
 37 |                   disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
 38 |                                 (soon)</a></hui-menu-item>
 39 |                         <hui-menu-item><a :class="
 40 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 41 |                     active && 'bg-gray-100 text-gray-900',
 42 |                     disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
 43 |                     </div>
 44 |                     <div class="py-1">
 45 |                         <hui-menu-item><a :class="
 46 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 47 |                     active && 'bg-gray-100 text-gray-900',
 48 |                     disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
 49 |                     </div>
 50 |                 </hui-menu-items>
 51 |             </hui-menu>
 52 |         </div>
 53 | 
 54 |         <div>
 55 |             <div class="relative rounded-md shadow-sm">
 56 |                 <input class="form-input block w-full sm:text-sm sm:leading-5" placeholder="you@example.com" />
 57 |             </div>
 58 |         </div>
 59 | 
 60 |         <div class="relative inline-block text-left">
 61 |             <hui-menu>
 62 |                 <span class="rounded-md shadow-sm">
 63 |                     <hui-menu-button
 64 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
 65 |                         <span>Options</span>
 66 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 67 |                             <path fillRule="evenodd"
 68 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
 69 |                                 clipRule="evenodd" />
 70 |                         </svg>
 71 |                     </hui-menu-button>
 72 |                 </span>
 73 | 
 74 |                 <hui-menu-items
 75 |                     class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
 76 |                     <div class="px-4 py-3">
 77 |                         <p class="text-sm leading-5">Signed in as</p>
 78 |                         <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
 79 |                     </div>
 80 | 
 81 |                     <div class="py-1">
 82 |                         <hui-menu-item><a :class="
 83 |                       ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 84 |                       active && 'bg-gray-100 text-gray-900',
 85 |                       disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
 86 |                                 settings</a></hui-menu-item>
 87 |                         <hui-menu-item><a :class="
 88 |                         ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 89 |                         active && 'bg-gray-100 text-gray-900',
 90 |                         disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
 91 |                         <hui-menu-item disabled><a :class="
 92 |                       ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 93 |                       active && 'bg-gray-100 text-gray-900',
 94 |                       disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
 95 |                                 (soon)</a></hui-menu-item>
 96 |                         <hui-menu-item><a :class="
 97 |                         ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
 98 |                         active && 'bg-gray-100 text-gray-900',
 99 |                         disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
100 |                     </div>
101 |                     <div class="py-1">
102 |                         <hui-menu-item><a :class="
103 |                         ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
104 |                         active && 'bg-gray-100 text-gray-900',
105 |                         disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
106 |                     </div>
107 |                 </hui-menu-items>
108 |             </hui-menu>
109 |         </div>
110 |     </div>
111 | </template>


--------------------------------------------------------------------------------
/playground/pages/menu/with-popper.html:
--------------------------------------------------------------------------------
 1 | <script src="https://unpkg.com/@popperjs/core@2"></script>
 2 | <script>
 3 |     function setupMenuWithPopperData() {
 4 |         return {
 5 |             trigger: null,
 6 |             container: null,
 7 |             init() {
 8 |                 $vui.effect(() => {
 9 |                     if (!this.trigger || !this.container) return
10 |                     Popper.createPopper(this.trigger, this.container, {
11 |                         placement: 'bottom-end',
12 |                         strategy: 'fixed',
13 |                         modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
14 |                     })
15 |                 })
16 |             }
17 |         }
18 |     }
19 | </script>
20 | <template x-component:page="menu-with-popper" x-import="hui:menu" x-data="setupMenuWithPopperData()">
21 |     <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
22 |         <div class="mt-64 inline-block text-left">
23 |             <hui-menu id="id-menu">
24 |                 <span class="inline-flex rounded-md shadow-sm">
25 |                     <hui-menu-button x-init="trigger=$el"
26 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
27 |                         <span>Options</span>
28 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
29 |                             <path fillRule="evenodd"
30 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
31 |                                 clipRule="evenodd" />
32 |                         </svg>
33 |                     </hui-menu-button>
34 |                 </span>
35 | 
36 |                 <template x-teleport="body">
37 |                     <hui-menu-items x-init="container=$el"
38 |                         class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
39 |                         <div class="px-4 py-3">
40 |                             <p class="text-sm leading-5">Signed in as</p>
41 |                             <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
42 |                         </div>
43 | 
44 |                         <div class="py-1">
45 |                             <hui-menu-item><a :class="
46 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
47 |                   active && 'bg-gray-100 text-gray-900',
48 |                   disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
49 |                                     settings</a></hui-menu-item>
50 |                             <hui-menu-item><a :class="
51 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
52 |                     active && 'bg-gray-100 text-gray-900',
53 |                     disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
54 |                             <hui-menu-item disabled><a :class="
55 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
56 |                   active && 'bg-gray-100 text-gray-900',
57 |                   disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
58 |                                     (soon)</a></hui-menu-item>
59 |                             <hui-menu-item><a :class="
60 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
61 |                     active && 'bg-gray-100 text-gray-900',
62 |                     disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
63 |                         </div>
64 |                         <div class="py-1">
65 |                             <hui-menu-item><a :class="
66 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
67 |                     active && 'bg-gray-100 text-gray-900',
68 |                     disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
69 |                         </div>
70 |                     </hui-menu-items>
71 |                 </template>
72 |             </hui-menu>
73 |         </div>
74 |     </div>
75 | </template>


--------------------------------------------------------------------------------
/playground/pages/menu/with-transition-and-popper.html:
--------------------------------------------------------------------------------
 1 | <script src="https://unpkg.com/@popperjs/core@2"></script>
 2 | <template x-component:page="menu-with-transition-and-popper" x-import="hui:menu" x-data="{
 3 |     trigger: null,
 4 |     container: null,
 5 |     initPopper(){
 6 |         if (!this.trigger || !this.container) return
 7 |         Popper.createPopper(this.trigger,this.container, {
 8 |             placement: 'bottom-end',
 9 |             strategy: 'fixed',
10 |             modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
11 |           })
12 |     }
13 | }">
14 |     <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
15 |         <div class="mt-64 inline-block text-left">
16 |             <hui-menu id="id-menu">
17 |                 <span class="inline-flex rounded-md shadow-sm">
18 |                     <hui-menu-button x-init="trigger=$el;initPopper()"
19 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
20 |                         <span>Options</span>
21 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
22 |                             <path fillRule="evenodd"
23 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
24 |                                 clipRule="evenodd" />
25 |                         </svg>
26 |                     </hui-menu-button>
27 |                 </span>
28 | 
29 |                 <template x-teleport="body">
30 |                     <hui-menu-items x-transition:enter="transition duration-500 ease-out"
31 |                         x-transition:enter-start="transform scale-50 opacity-0"
32 |                         x-transition:enter-end="transform scale-100 opacity-100"
33 |                         x-transition:leave="transition duration-75 ease-out"
34 |                         x-transition:leave-start="transform scale-100 opacity-100"
35 |                         x-transition:leave-end="transform scale-95 opacity-0" x-init="container=$el;initPopper()"
36 |                         class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
37 |                         <div class="px-4 py-3">
38 |                             <p class="text-sm leading-5">Signed in as</p>
39 |                             <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
40 |                         </div>
41 | 
42 |                         <div class="py-1">
43 |                             <hui-menu-item><a :class="
44 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
45 |                   active && 'bg-gray-100 text-gray-900',
46 |                   disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
47 |                                     settings</a></hui-menu-item>
48 |                             <hui-menu-item><a :class="
49 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
50 |                     active && 'bg-gray-100 text-gray-900',
51 |                     disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
52 |                             <hui-menu-item disabled><a :class="
53 |                   ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
54 |                   active && 'bg-gray-100 text-gray-900',
55 |                   disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
56 |                                     (soon)</a></hui-menu-item>
57 |                             <hui-menu-item><a :class="
58 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
59 |                     active && 'bg-gray-100 text-gray-900',
60 |                     disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
61 |                         </div>
62 |                         <div class="py-1">
63 |                             <hui-menu-item><a :class="
64 |                     ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
65 |                     active && 'bg-gray-100 text-gray-900',
66 |                     disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
67 |                         </div>
68 |                     </hui-menu-items>
69 |                 </template>
70 |             </hui-menu>
71 |         </div>
72 |     </div>
73 | </template>


--------------------------------------------------------------------------------
/playground/pages/menu/with-transition.html:
--------------------------------------------------------------------------------
 1 | <template x-component:page="menu-with-transition" x-import="hui:menu">
 2 |     <div class="flex h-full w-full justify-center bg-gray-50 p-12">
 3 |         <div class="relative inline-block text-left">
 4 |             <hui-menu>
 5 |                 <span class="rounded-md shadow-sm">
 6 |                     <hui-menu-button
 7 |                         class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
 8 |                         <span>Options</span>
 9 |                         <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
10 |                             <path fillRule="evenodd"
11 |                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
12 |                                 clipRule="evenodd" />
13 |                         </svg>
14 |                     </hui-menu-button>
15 |                 </span>
16 | 
17 | 
18 |                 <hui-menu-items x-transition:enter="transition duration-500 ease-out"
19 |                     x-transition:enter-start="transform scale-50 opacity-0" x-transition:enter-end="transform scale-100 opacity-100"
20 |                     x-transition:leave="transition duration-75 ease-out"
21 |                     x-transition:leave-start="transform scale-100 opacity-100" x-transition:leave-end="transform scale-95 opacity-0"
22 |                     class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
23 |                     <div class="px-4 py-3">
24 |                         <p class="text-sm leading-5">Signed in as</p>
25 |                         <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
26 |                     </div>
27 | 
28 |                     <div class="py-1">
29 |                         <app-menu-item href="#account-settings">Account settings</app-menu-item>
30 |                         <app-menu-item href="#support">Support</app-menu-item>
31 |                         <app-menu-item disabled href="#new-feature">New feature (soon)</app-menu-item>
32 |                         <app-menu-item href="#license">License</app-menu-item>
33 |                     </div>
34 |                     <div class="py-1">
35 | 
36 |                         <app-menu-item href="#sign-out">Sign out</app-menu-item>
37 |                     </div>
38 |                 </hui-menu-items>
39 |             </hui-menu>
40 |         </div>
41 |     </div>
42 | </template>
43 | 
44 | <template x-component:app.unwrap="menu-item">
45 |     <hui-menu-item>
46 |         <a :href="$prop('href')" :class="[
47 |         'flex justify-between w-full text-left px-4 py-2 text-sm leading-5',
48 |         active ? 'bg-indigo-500 text-white' : 'text-gray-700',
49 |         disabled ? 'cursor-not-allowed opacity-50' : '']">
50 |             <span :class="active ? 'font-bold' : '' ">
51 |                 <slot></slot>
52 |             </span>
53 |             <kbd :class="['font-sans', active ? 'text-indigo-50' : '']">⌘K</kbd>
54 |         </a>
55 |     </hui-menu-item>
56 | </template>


--------------------------------------------------------------------------------
/playground/pages/popover/basic.html:
--------------------------------------------------------------------------------
  1 | <script src="https://unpkg.com/@popperjs/core@2"></script>
  2 | <script>
  3 |     function setupPopoverBasicData() {
  4 |         let links = ['First', 'Second', 'Third', 'Fourth']
  5 |         return {
  6 |             links,
  7 |             trigger1: null,
  8 |             container1: null,
  9 |             trigger2: null,
 10 |             container2: null,
 11 |             init() {
 12 |                 $vui.effect(() => {
 13 |                     if (!this.trigger1 || !this.container1) return
 14 |                     Popper.createPopper(this.trigger1, this.container1, {
 15 |                         placement: 'bottom-start',
 16 |                         strategy: 'fixed'
 17 |                     })
 18 |                 })
 19 | 
 20 |                 $vui.effect(() => {
 21 |                     if (!this.trigger2 || !this.container2) return
 22 |                     Popper.createPopper(this.trigger2, this.container2, {
 23 |                         placement: 'bottom-start',
 24 |                         strategy: 'fixed'
 25 |                     })
 26 |                 })
 27 |             }
 28 |         }
 29 |     }
 30 | </script>
 31 | <template x-component:page="popover-basic" x-import="hui:popover" x-data="setupPopoverBasicData()">
 32 |     <div class="flex items-center justify-center space-x-12 p-12">
 33 |         <button>Previous</button>
 34 | 
 35 |         <hui-popover-group ar-label="Mythical University" class="flex space-x-3">
 36 |             <hui-popover class="relative">
 37 |                 <hui-popover-overlay x-transition:enter="transition ease-out duration-300 transform"
 38 |                     x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
 39 |                     x-transition:leave="transition ease-in duration-300 transform"
 40 |                     x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
 41 |                     class="fixed inset-0 z-20 bg-gray-500 bg-opacity-75"></hui-popover-overlay>
 42 |                 <hui-popover-button
 43 |                     class="relative z-30 border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
 44 |                     Normal</hui-popover-button>
 45 |                 <hui-popover-panel class="absolute z-30 flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
 46 |                     <template x-for="(link, i) of links" :key="i">
 47 |                         <button :hidden="i === 2"
 48 |                             class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
 49 |                             Normal - <span x-text="link"></span>
 50 |                         </button>
 51 |                     </template>
 52 |                 </hui-popover-panel>
 53 |             </hui-popover>
 54 |             <hui-popover class="relative">
 55 |                 <hui-popover-button
 56 |                     class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
 57 |                     Focus</hui-popover-button>
 58 |                 <hui-popover-panel focus class="absolute flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
 59 |                     <template x-for="(link, i) of links" :key="i">
 60 |                         <button
 61 |                             class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
 62 |                             Focus - <span x-text="link"></span>
 63 |                         </button>
 64 |                     </template>
 65 |                 </hui-popover-panel>
 66 |             </hui-popover>
 67 | 
 68 |             <hui-popover class="relative">
 69 |                 <hui-popover-button x-init="trigger1=$el"
 70 |                     class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
 71 |                     Portal</hui-popover-button>
 72 |                 <template x-teleport="body">
 73 |                     <hui-popover-panel x-init="container1=$el"
 74 |                         class="flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
 75 |                         <template x-for="(link, i) of links" :key="i">
 76 |                             <button
 77 |                                 class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
 78 |                                 Portal - <span x-text="link"></span>
 79 |                             </button>
 80 |                         </template>
 81 |                     </hui-popover-panel>
 82 |                 </template>
 83 |             </hui-popover>
 84 | 
 85 |             <hui-popover class="relative">
 86 |                 <hui-popover-button x-init="trigger2=$el"
 87 |                     class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
 88 |                     Focus in portal</hui-popover-button>
 89 |                 <template x-teleport="body">
 90 |                     <hui-popover-panel x-init="container2=$el" focus
 91 |                         class="flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
 92 |                         <template x-for="(link, i) of links" :key="i">
 93 |                             <button
 94 |                                 class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
 95 |                                 Focus in Portal - <span x-text="link"></span>
 96 |                             </button>
 97 |                         </template>
 98 |                     </hui-popover-panel>
 99 |                 </template>
100 |             </hui-popover>
101 |         </hui-popover-group>
102 | 
103 |         <button>Next</button>
104 |     </div>
105 | 
106 | </template>


--------------------------------------------------------------------------------
/playground/pages/radio-group/basic.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function setupRadioGroupBasicData() {
 3 |         const access = [
 4 |             {
 5 |                 id: 'access-1',
 6 |                 name: 'Public access',
 7 |                 description: 'This project would be available to anyone who has the link',
 8 |             },
 9 |             {
10 |                 id: 'access-2',
11 |                 name: 'Private to Project Members',
12 |                 description: 'Only members of this project would be able to access',
13 |             },
14 |             {
15 |                 id: 'access-3',
16 |                 name: 'Private to you',
17 |                 description: 'You are the only one able to access this project',
18 |             },
19 |         ]
20 |         return {
21 |             active: access[1].id,
22 |             access
23 |         }
24 |     }
25 | </script>
26 | <template x-component:page="radio-group-basic" x-import="hui:radio-group" x-data="setupRadioGroupBasicData()">
27 | 
28 |     <div class="max-w-xl p-12  h-full">
29 |         <a href="/">Link before</a>
30 |         <hui-radio-group x-model="active">
31 |             <fieldset class="space-y-4">
32 |                 <legend>
33 |                     <h2 class="text-xl">Privacy setting</h2>
34 |                 </legend>
35 |                 <div class="-space-y-px rounded-md bg-white">
36 |                     <template x-for="(item, i) in access" :key="item.id">
37 |                         <hui-radio-group-option :value="item.id" :class="
38 |                  [
39 |                       // Rounded corners
40 |                       i === 0  ? 'rounded-tl-md rounded-tr-md' : '',
41 |                       access.length - 1 === i ? 'rounded-bl-md rounded-br-md' : '',
42 |     
43 |                       // Shared
44 |                       'relative border p-4 flex focus:outline-none',
45 |                       active ? 'bg-indigo-50 border-indigo-200 z-10' : 'border-gray-200'                    
46 |                 ]
47 |                 ">
48 |                             <div class="flex w-full items-center justify-between">
49 |                                 <div class="ml-3 flex cursor-pointer flex-col">
50 |                                     <span :class="[
51 |                         'block text-sm font-medium leading-5',
52 |                         active ? 'text-indigo-900' : 'text-gray-900',
53 |                       ]" x-text="item.name">
54 |                                     </span>
55 |                                     <span
56 |                                         :class="['block text-sm leading-5', active ? 'text-indigo-700' : 'text-gray-500']"
57 |                                         x-text="item.description">
58 |                                     </span>
59 |                                 </div>
60 |                                 <div>
61 |                                     <template x-if="checked">
62 |                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
63 |                                             stroke="currentColor" class="h-5 w-5 text-indigo-500">
64 |                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
65 |                                                 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
66 |                                         </svg>
67 |                                     </template>
68 |                                 </div>
69 |                             </div>
70 |                         </hui-radio-group-option>
71 |                     </template>
72 |                 </div>
73 |             </fieldset>
74 |         </hui-radio-group>
75 |         <a href="/">Link after</a>
76 |     </div>
77 | </template>


--------------------------------------------------------------------------------
/playground/pages/switch/basic.html:
--------------------------------------------------------------------------------
 1 | <template x-component:page="switch-basic" x-import="hui:switch" >
 2 |     <div class="flex h-full items-start justify-center bg-gray-50 p-12" x-data="{
 3 |         state: true
 4 |     }">
 5 |         <form action="https://jsonplaceholder.typicode.com/todos/1">
 6 |             <hui-switch-group class="flex items-center space-x-4">
 7 |                 <hui-switch-label>Enable notifications</hui-switch-label>
 8 | 
 9 |                 <hui-switch name="email" x-model="state" :class="['relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline',
10 |           checked ? 'bg-indigo-600' : 'bg-gray-200']">
11 |                     <span
12 |                         class="inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ease-in-out"
13 |                         :class="[checked ? 'translate-x-5' : 'translate-x-0']"></span>
14 |                 </hui-switch>
15 |             </hui-switch-group>
16 |             <input type="submit" value="Submit"
17 |                 class="inline-block rounded-lg mt-2 bg-green-600 px-4 py-1.5 text-white shadow ring-1 ring-green-600 hover:bg-green-700 hover:ring-green-700">
18 |         </form>
19 |     </div>
20 |     <script>
21 |         return {
22 |            
23 |         }
24 |     </script>
25 | </template>


--------------------------------------------------------------------------------
/playground/pages/tabs/basic.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     function setupTabsBasicData() {
 3 |         const tabs = [
 4 |             { name: 'My Account', content: 'Tab content for my account' },
 5 |             { name: 'Company', content: 'Tab content for company', disabled: true },
 6 |             { name: 'Team Members', content: 'Tab content for team members' },
 7 |             { name: 'Billing', content: 'Tab content for billing' },
 8 |         ]
 9 |         return {
10 |             manual: false,
11 |             selectedTab: tabs[0].name,
12 |             tabs,
13 |         }
14 |     }
15 | 
16 | </script>
17 | <template x-component:page="tabs-basic" x-import="hui:tabs,switch" x-data="setupTabsBasicData()">
18 |     <div class="flex flex-col h-full items-start space-y-12 bg-gray-50 p-12">
19 |         <hui-switch-group as="div" class="flex items-center space-x-4">
20 |             <hui-switch-label>Manual keyboard activation</hui-switch-label>
21 | 
22 |             <hui-switch as="button" x-model="manual" :class="['relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline',
23 |             checked ? 'bg-indigo-600' : 'bg-gray-200']">
24 |                 <span class="inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ease-in-out"
25 |                     :class="{ 'translate-x-5': checked, 'translate-x-0': !checked }"></span>
26 |             </hui-switch>
27 |         </hui-switch-group>
28 | 
29 |         <hui-tab-group class="flex w-full max-w-3xl flex-col" :manual="manual" x-model="selectedTab">
30 |             <hui-tab-list class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow">
31 | 
32 |                 <template x-for="(tab, tabIdx) in tabs" :key="tab.name">
33 |                     <hui-tab :value="tab.name" :disabled="tab.disabled"
34 |                         class="group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
35 |                         :class="{
36 |                 'text-gray-900': selected,
37 |                 'text-gray-500 hover:text-gray-700': !selected,
38 |                 'rounded-l-lg': tabIdx === 0,
39 |                 'rounded-r-lg': tabIdx === tabs.length - 1,
40 |                 'opacity-50': tab.disabled,
41 |               }">
42 |                         <span x-text="tab.name"></span>
43 |                         <template x-if="tab.disabled">
44 |                             <small class="inline-block px-4 text-xs">(disabled)</small>
45 |                         </template>
46 |                         <span aria-hidden="true" class="absolute inset-x-0 bottom-0 h-0.5"
47 |                             :class="{ 'bg-indigo-500': selected, 'bg-transparent': !selected }"></span>
48 |                     </hui-tab>
49 |                 </template>
50 |             </hui-tab-list>
51 | 
52 |             <hui-tab-panels class="mt-4">
53 |                 <template x-for="tab in tabs" :key="tab.name">
54 |                     <hui-tab-panel :value="tab.name" class="rounded-lg bg-white p-4 shadow" x-html="tab.content">
55 |                     </hui-tab-panel>
56 |                 </template>
57 |             </hui-tab-panels>
58 |         </hui-tab-group>
59 |     </div>
60 | </template>


--------------------------------------------------------------------------------