material-inspired-component-library 8.0.4 → 8.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +4 -1
- package/CLAUDE.md +53 -0
- package/README.md +4 -0
- package/components/alert/index.scss +2 -2
- package/components/appbar/index.scss +2 -2
- package/components/bottomsheet/index.scss +3 -3
- package/components/button/README.md +68 -10
- package/components/button/index.scss +99 -179
- package/components/button/index.ts +4 -4
- package/components/card/index.scss +3 -3
- package/components/checkbox/index.scss +2 -2
- package/components/datepicker/index.scss +3 -3
- package/components/dialog/index.scss +3 -3
- package/components/iconbutton/README.md +55 -9
- package/components/iconbutton/index.scss +109 -167
- package/components/iconbutton/index.ts +4 -4
- package/components/list/index.scss +8 -8
- package/components/menu/index.scss +3 -3
- package/components/navigationrail/README.md +2 -1
- package/components/navigationrail/index.scss +4 -4
- package/components/radio/index.scss +2 -2
- package/components/select/index.scss +2 -2
- package/components/shapes/README.md +94 -0
- package/components/{shape → shapes}/_paths.generated.scss +0 -6
- package/components/{shape → shapes}/index.scss +10 -10
- package/components/{shape → shapes}/master.scss +3 -3
- package/components/sidesheet/index.scss +3 -3
- package/components/slider/index.scss +5 -5
- package/components/snackbar/index.scss +2 -2
- package/components/switch/index.scss +2 -2
- package/components/textfield/index.scss +2 -2
- package/components/timepicker/index.scss +3 -3
- package/dist/bottomsheet.js +1 -1
- package/dist/button.css +1 -1
- package/dist/button.js +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/iconbutton/index.d.ts +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/iconbutton.js +1 -1
- package/dist/list.css +1 -1
- package/dist/list.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/navigationrail.js +1 -1
- package/dist/progressindicator.js +1 -1
- package/dist/shapes.css +1 -0
- package/dist/slider.js +1 -1
- package/dist/snackbar.js +1 -1
- package/dist/stepper.js +1 -1
- package/dist/textfield.js +1 -1
- package/dist/timepicker.js +1 -1
- package/docs/button.html +18 -17
- package/docs/iconbutton.html +12 -10
- package/docs/index.html +104 -89
- package/docs/menu.html +1 -1
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/shapes.css +1 -0
- package/docs/shapes.html +49 -40
- package/foundations/layout/index.scss +2 -2
- package/package.json +2 -1
- package/styles/elevation.scss +10 -7
- package/styles/motion.scss +12 -19
- package/styles/{shapes.scss → shape.scss} +6 -4
- package/styles/statelayer.scss +32 -45
- package/styles/typography.scss +4 -5
- package/styles.scss +1 -4
- package/tools/shapes/check.mjs +1 -1
- package/tools/shapes/generate.mjs +2 -8
- package/webpack.config.js +60 -5
- package/components/shape/README.md +0 -103
- package/dist/shape.css +0 -1
- package/docs/shape.css +0 -1
- /package/dist/{shape.js → shapes.js} +0 -0
- /package/docs/{shape.js → shapes.js} +0 -0
package/docs/index.html
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,keyboard,keyboard_arrow_down,link,menu,menu_open,more_vert,newspaper,outbox,person,schedule,share&display=block">
|
|
12
12
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
13
13
|
<link rel="stylesheet" href="micl.css">
|
|
14
|
+
<link rel="stylesheet" href="shapes.css">
|
|
14
15
|
<link rel="stylesheet" href="docs.css">
|
|
15
16
|
<style>
|
|
16
17
|
a {
|
|
@@ -263,99 +264,112 @@
|
|
|
263
264
|
<div class="micl-card__headline-s">
|
|
264
265
|
<h2>Button actions</h2>
|
|
265
266
|
</div>
|
|
266
|
-
<div class="micl-card__content" style="display:flex;
|
|
267
|
-
<
|
|
268
|
-
<
|
|
269
|
-
<
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
<
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
<
|
|
280
|
-
|
|
267
|
+
<div class="micl-card__content" style="display:flex;justify-content:space-between;flex-wrap:wrap">
|
|
268
|
+
<div style="display:flex;flex-direction:column;align-items:flex-start;row-gap:16px">
|
|
269
|
+
<dialog id="mydialog" class="micl-dialog" popover closedby="none" aria-labelledby="mytitle">
|
|
270
|
+
<form method="dialog" class="micl-dialog__headline">
|
|
271
|
+
<span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
|
|
272
|
+
<h2 id="mytitle">Personal info</h2>
|
|
273
|
+
</form>
|
|
274
|
+
<div class="micl-dialog__content">
|
|
275
|
+
<p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
|
|
276
|
+
<div class="micl-textfield-outlined" style="margin-block:24px">
|
|
277
|
+
<label for="mytextfield2">Name</label>
|
|
278
|
+
<input type="text" id="mytextfield2" value="Marie Curie">
|
|
279
|
+
</div>
|
|
280
|
+
<div class="micl-textfield-outlined" style="margin-block:24px">
|
|
281
|
+
<label for="mytextfield3">Address</label>
|
|
282
|
+
<input type="text" id="mytextfield3" value="Rue du Boulevard 3, Paris">
|
|
283
|
+
</div>
|
|
284
|
+
<div class="micl-textfield-outlined">
|
|
285
|
+
<label for="myselect">Country</label>
|
|
286
|
+
<select id="myselect">
|
|
287
|
+
<option class="micl-list-item-one" value="AR">
|
|
288
|
+
<span class="micl-list-item__text">Argentina</span>
|
|
289
|
+
</option>
|
|
290
|
+
<option class="micl-list-item-one" value="BO">
|
|
291
|
+
<span class="micl-list-item__text">Bolivia</span>
|
|
292
|
+
</option>
|
|
293
|
+
<option class="micl-list-item-one" value="BR">
|
|
294
|
+
<span class="micl-list-item__text">Brazil</span>
|
|
295
|
+
</option>
|
|
296
|
+
<option class="micl-list-item-one" value="CL" disabled>
|
|
297
|
+
<span class="micl-list-item__text">Chile</span>
|
|
298
|
+
</option>
|
|
299
|
+
<option class="micl-list-item-one" value="CO">
|
|
300
|
+
<span class="micl-list-item__text">Colombia</span>
|
|
301
|
+
</option>
|
|
302
|
+
<option class="micl-list-item-one" value="FR" selected>
|
|
303
|
+
<span class="micl-list-item__text">France</span>
|
|
304
|
+
</option>
|
|
305
|
+
</select>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="micl-textfield-outlined" style="margin-block:24px 4px">
|
|
308
|
+
<label for="mytextfield4">Profession</label>
|
|
309
|
+
<input type="text" id="mytextfield4" value="Physics researcher">
|
|
310
|
+
</div>
|
|
281
311
|
</div>
|
|
282
|
-
<
|
|
283
|
-
<
|
|
284
|
-
<
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
</option>
|
|
294
|
-
<option class="micl-list-item-one" value="CL" disabled>
|
|
295
|
-
<span class="micl-list-item__text">Chile</span>
|
|
296
|
-
</option>
|
|
297
|
-
<option class="micl-list-item-one" value="CO">
|
|
298
|
-
<span class="micl-list-item__text">Colombia</span>
|
|
299
|
-
</option>
|
|
300
|
-
<option class="micl-list-item-one" value="FR" selected>
|
|
301
|
-
<span class="micl-list-item__text">France</span>
|
|
302
|
-
</option>
|
|
303
|
-
</select>
|
|
312
|
+
<form method="dialog" class="micl-dialog__actions">
|
|
313
|
+
<button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
|
|
314
|
+
<button class="micl-button-text-s" value="dosave">Save</button>
|
|
315
|
+
</form>
|
|
316
|
+
</dialog>
|
|
317
|
+
<button class="micl-button-elevated-s" popovertarget="mydialog">Open Dialog</button>
|
|
318
|
+
|
|
319
|
+
<dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mysidesheettitle">
|
|
320
|
+
<div class="micl-sidesheet__headline">
|
|
321
|
+
<h2 id="mysidesheettitle">Lorum ipsum</h2>
|
|
322
|
+
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet">close</button>
|
|
304
323
|
</div>
|
|
305
|
-
<div class="micl-
|
|
306
|
-
<
|
|
307
|
-
<
|
|
324
|
+
<div class="micl-sidesheet__content">
|
|
325
|
+
<p style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
326
|
+
<p style="color:var(--md-sys-color-on-surface)">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
|
|
327
|
+
<p style="color:var(--md-sys-color-on-surface)">Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
|
|
328
|
+
<p style="color:var(--md-sys-color-on-surface)">Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
|
|
308
329
|
</div>
|
|
309
|
-
</
|
|
310
|
-
<
|
|
311
|
-
<button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
|
|
312
|
-
<button class="micl-button-text-s" value="dosave">Save</button>
|
|
313
|
-
</form>
|
|
314
|
-
</dialog>
|
|
315
|
-
<button class="micl-button-elevated-s" popovertarget="mydialog">Open Dialog</button>
|
|
316
|
-
|
|
317
|
-
<dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mysidesheettitle">
|
|
318
|
-
<div class="micl-sidesheet__headline">
|
|
319
|
-
<h2 id="mysidesheettitle">Lorum ipsum</h2>
|
|
320
|
-
<button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet">close</button>
|
|
321
|
-
</div>
|
|
322
|
-
<div class="micl-sidesheet__content">
|
|
323
|
-
<p style="color:var(--md-sys-color-on-surface)">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
|
|
324
|
-
<p style="color:var(--md-sys-color-on-surface)">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
|
|
325
|
-
<p style="color:var(--md-sys-color-on-surface)">Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
|
|
326
|
-
<p style="color:var(--md-sys-color-on-surface)">Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
|
|
327
|
-
</div>
|
|
328
|
-
</dialog>
|
|
329
|
-
<button type="button" class="micl-button-tonal-s" popovertarget="mysidesheet">Open Side Sheet</button>
|
|
330
|
+
</dialog>
|
|
331
|
+
<button type="button" class="micl-button-tonal-s" popovertarget="mysidesheet">Open Side Sheet</button>
|
|
330
332
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
333
|
+
<dialog id="mybottomsheet" class="micl-bottomsheet" popover data-snapheights="400">
|
|
334
|
+
<div class="micl-bottomsheet__headline">
|
|
335
|
+
<button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
|
|
336
|
+
</div>
|
|
337
|
+
<div class="micl-bottomsheet__content">
|
|
338
|
+
<ul class="micl-list" role="listbox">
|
|
339
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
340
|
+
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
|
|
341
|
+
<span class="micl-list-item__text">
|
|
342
|
+
<span class="micl-list-item__headline">Share</span>
|
|
343
|
+
</span>
|
|
344
|
+
</li>
|
|
345
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
346
|
+
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
|
|
347
|
+
<span class="micl-list-item__text">
|
|
348
|
+
<span class="micl-list-item__headline">Get link</span>
|
|
349
|
+
</span>
|
|
350
|
+
</li>
|
|
351
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
352
|
+
<span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
|
|
353
|
+
<span class="micl-list-item__text">
|
|
354
|
+
<span class="micl-list-item__headline">Edit name</span>
|
|
355
|
+
</span>
|
|
356
|
+
</li>
|
|
357
|
+
</ul>
|
|
358
|
+
</div>
|
|
359
|
+
</dialog>
|
|
360
|
+
<button type="button" class="micl-button-outlined-s" popovertarget="mybottomsheet">Open Bottom Sheet</button>
|
|
361
|
+
</div>
|
|
362
|
+
<div style="display:flex;flex-wrap:wrap">
|
|
363
|
+
<svg class="micl-shapes micl-shapes--soft-burst">
|
|
364
|
+
<defs>
|
|
365
|
+
<pattern id="photo-1" patternUnits="userSpaceOnUse" x="-10" y="0" width="120" height="100">
|
|
366
|
+
<image href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Sibirischer_tiger_de_edit02.jpg/330px-Sibirischer_tiger_de_edit02.jpg" width="120" height="100" preserveAspectRatio="xMidYMid slice" />
|
|
367
|
+
</pattern>
|
|
368
|
+
</defs>
|
|
369
|
+
<path fill="url(#photo-1)" />
|
|
370
|
+
</svg>
|
|
371
|
+
<svg class="micl-shapes micl-shapes--arrow micl-shapes--outlined" viewBox="-10 0 120 100"><path /></svg>
|
|
372
|
+
</div>
|
|
359
373
|
</div>
|
|
360
374
|
</div>
|
|
361
375
|
|
|
@@ -380,6 +394,7 @@
|
|
|
380
394
|
<!-- <p><a href="progressindicator.html" class="md-sys-typescale-body-large">Progress indicators</a></p> -->
|
|
381
395
|
<p><a href="radio.html" class="md-sys-typescale-body-large">Radio buttons</a></p>
|
|
382
396
|
<p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
|
|
397
|
+
<p><a href="shapes.html" class="md-sys-typescale-body-large">Shapes</a></p>
|
|
383
398
|
<p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
|
|
384
399
|
<p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
|
|
385
400
|
<p><a href="snackbar.html" class="md-sys-typescale-body-large">Snackbars</a></p>
|
package/docs/menu.html
CHANGED
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
</ul>
|
|
512
512
|
<ul class="micl-list">
|
|
513
513
|
<li role="separator" class="micl-menu__section">Edit</li>
|
|
514
|
-
<li class="micl-list-item-one">
|
|
514
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
515
515
|
<span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">content_cut</span>
|
|
516
516
|
<span class="micl-list-item__text">
|
|
517
517
|
<span class="micl-list-item__headline">Cut</span>
|