diff --git a/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png
index 2c46161..b58b27e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/accordion-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/accordion.png b/demo/e2e/screenshot.spec.ts-snapshots/accordion.png
index 530c76e..a673fae 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/accordion.png and b/demo/e2e/screenshot.spec.ts-snapshots/accordion.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png
index 08887e0..2e568ac 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png
index 90f8f7c..6eb4f2b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-all.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png
index 8faf63e..cfbfff0 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png
index fb97fa3..a37d8e4 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-button-only.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png
index 2444255..0c5734e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png
index 2b947ba..c622954 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png and b/demo/e2e/screenshot.spec.ts-snapshots/action-sheet-no-cancel.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png
index 599e0e6..3821449 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-all-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png
index 1121f60..7699e61 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-all.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png
index 1633d94..27547d3 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png
index 881dfb4..17d81a3 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-button-only.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png
index 6c6e259..5729d34 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png
index 1517903..5d6f297 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-no-cancel.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png
index e1ec9c4..3895f3e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png
index 4efd375..ddab367 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png and b/demo/e2e/screenshot.spec.ts-snapshots/alert-remove-app.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png
index 18bbc61..e5d2c25 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png
index 3261274..5e13291 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png and b/demo/e2e/screenshot.spec.ts-snapshots/breadcrumbs.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png
index e997ba7..8a89531 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/button-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/button.png b/demo/e2e/screenshot.spec.ts-snapshots/button.png
index c6f74f4..7f3f31d 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/button.png and b/demo/e2e/screenshot.spec.ts-snapshots/button.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png
index 087e769..70b2c58 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/card-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/card.png b/demo/e2e/screenshot.spec.ts-snapshots/card.png
index 263a023..9e9f78b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/card.png and b/demo/e2e/screenshot.spec.ts-snapshots/card.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png
index e5f0a50..cc78e80 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png b/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png
index a54d0a6..08af83e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png and b/demo/e2e/screenshot.spec.ts-snapshots/checkbox.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png
index f7a2ee0..6604540 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/chip-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/chip.png b/demo/e2e/screenshot.spec.ts-snapshots/chip.png
index 96f28fc..a6705f5 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/chip.png and b/demo/e2e/screenshot.spec.ts-snapshots/chip.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png
index b9ee696..cbe1a2a 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png
index c0991ff..6a322a6 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png and b/demo/e2e/screenshot.spec.ts-snapshots/date-and-time-pickers.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png
index e88bb40..9f58f18 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png
index b453ae1..1ef7556 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png and b/demo/e2e/screenshot.spec.ts-snapshots/floating-action-button.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png
index a287bd3..4aceda3 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/inputs-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/inputs.png b/demo/e2e/screenshot.spec.ts-snapshots/inputs.png
index 82b6a85..218b87b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/inputs.png and b/demo/e2e/screenshot.spec.ts-snapshots/inputs.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png
index 5a20d1c..b32c8b8 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png
index d91cc89..5642f25 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png
index 0a4e4ed..ddb0831 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-card-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png
index 0158eb1..76c150c 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-card.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png
index 0a4e4ed..ddb0831 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png
index 0158eb1..76c150c 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-normal.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png
index 44e240d..9d5c83d 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png
index 0744bb7..548d8b7 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png
index 20c427f..c720ad1 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/popover.png b/demo/e2e/screenshot.spec.ts-snapshots/popover.png
index 0574d6a..e560a90 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/popover.png and b/demo/e2e/screenshot.spec.ts-snapshots/popover.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png
index 21b2677..645b66b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png
index 331fa18..9a09e9b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-icon-only.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png
index 8d610d2..34dc227 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png
index c36c65e..5d5b3bb 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png and b/demo/e2e/screenshot.spec.ts-snapshots/progress-indicators-message.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png
index 0e00232..cb177e5 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/radio.png b/demo/e2e/screenshot.spec.ts-snapshots/radio.png
index 3acff35..33e1f01 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/radio.png and b/demo/e2e/screenshot.spec.ts-snapshots/radio.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png
index 036d5f4..841cef7 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/range-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/range.png b/demo/e2e/screenshot.spec.ts-snapshots/range.png
index 1280427..9c4b6de 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/range.png and b/demo/e2e/screenshot.spec.ts-snapshots/range.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png
index 6ebf78f..0d15384 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/reorder-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/reorder.png b/demo/e2e/screenshot.spec.ts-snapshots/reorder.png
index caeac5a..8cfef84 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/reorder.png and b/demo/e2e/screenshot.spec.ts-snapshots/reorder.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png
index c612330..6e2203a 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/searchbar-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png b/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png
index 10e7de0..b7fdb8b 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png and b/demo/e2e/screenshot.spec.ts-snapshots/searchbar.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png
index cec1c0c..084d09e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/segment-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/segment.png b/demo/e2e/screenshot.spec.ts-snapshots/segment.png
index 5ba65df..54aca2e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/segment.png and b/demo/e2e/screenshot.spec.ts-snapshots/segment.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png
index 209a212..ceb28bc 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png
index 1a624b9..3fad3af 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png
index f41b7d9..fa710a6 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-alert-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png b/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png
index ed15baa..047b3ce 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-alert.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png
index 507925a..896e82c 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-modal-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png b/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png
index 8a7effb..cf7e046 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-modal.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png
index c3551b7..e3e0379 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-popover-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png b/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png
index 2b4a51f..c045f0d 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png and b/demo/e2e/screenshot.spec.ts-snapshots/select-popover.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png
index 4ec73f3..970b263 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/tabs-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/tabs.png b/demo/e2e/screenshot.spec.ts-snapshots/tabs.png
index 17aa631..c6cd3c8 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/tabs.png and b/demo/e2e/screenshot.spec.ts-snapshots/tabs.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png
index 5b02ad1..0345808 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png
index f485839..72ca774 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-anchor.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png
index 8df0b4d..858e044 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png
index 7b2a61d..ec35bcf 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-bottom.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png
index 06ebfbb..3356482 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png
index 5799dde..3dad2e5 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png and b/demo/e2e/screenshot.spec.ts-snapshots/toast-middle.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png
index 9c35623..19d68a0 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png
index 8a7ec1e..3a39359 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toggle.png and b/demo/e2e/screenshot.spec.ts-snapshots/toggle.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png
index 1d6065c..620282a 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/toolbar-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png b/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png
index 254296e..6f9f012 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png and b/demo/e2e/screenshot.spec.ts-snapshots/toolbar.png differ
diff --git a/demo/src/app/index/pages/toolbar/toolbar.page.html b/demo/src/app/index/pages/toolbar/toolbar.page.html
index f2c6105..7a28a9d 100644
--- a/demo/src/app/index/pages/toolbar/toolbar.page.html
+++ b/demo/src/app/index/pages/toolbar/toolbar.page.html
@@ -41,6 +41,42 @@ toolbar
Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+ Icon Normal
+
+
+
+
+
+
+
+
+
+
+
+ Icon Small
+
+
+
+
+
+
+
+
+
+
+
+ Icon Large
+
+
diff --git a/src/styles/components/ion-button.scss b/src/styles/components/ion-button.scss
index cc42adb..905caef 100644
--- a/src/styles/components/ion-button.scss
+++ b/src/styles/components/ion-button.scss
@@ -37,6 +37,10 @@
&::part(native) {
height: 32px;
}
+ &.button-has-icon-only {
+ width: 32px;
+ height: 32px;
+ }
&.button-has-icon-only::part(native) {
width: 32px;
height: 32px;
@@ -61,6 +65,10 @@
&::part(native) {
height: 56px;
}
+ &.button-has-icon-only {
+ width: 56px;
+ height: 56px;
+ }
&.button-has-icon-only::part(native) {
width: 56px;
height: 56px;
diff --git a/src/styles/components/ion-toolbar.scss b/src/styles/components/ion-toolbar.scss
index 45dc838..956ede9 100644
--- a/src/styles/components/ion-toolbar.scss
+++ b/src/styles/components/ion-toolbar.scss
@@ -5,16 +5,50 @@ ion-footer.md:not(.md3-disabled) {
ion-header.md:not(.md3-disabled),
ion-footer.md:not(.md3-disabled) {
- ion-buttons {
- margin-left: 12px;
- margin-right: 12px;
+ ion-buttons[slot='start'],
+ ion-back-button[slot='start'] {
+ margin-left: 16px;
}
- ion-back-button {
- margin-left: 12px;
- margin-right: 12px;
+ ion-buttons[slot='end'],
+ ion-back-button[slot='end'] {
+ margin-right: 16px;
}
- ion-toolbar ion-buttons ion-back-button {
+ /* fallback ion-buttons[slot=end], ion-back-button[slot=end] */
+ ion-toolbar ion-buttons > ion-back-button {
margin-left: 0;
margin-right: 0;
}
}
+
+ion-header.md:not(.md3-disabled) ion-toolbar {
+ &:has([slot='start']) ion-title {
+ padding-inline-start: 4px;
+ }
+ &:not(:has([slot='start'])) ion-title {
+ padding-inline-start: calc(16px + 12px);
+ }
+}
+
+ion-toolbar.md:not(.md3-disabled) {
+ ion-back-button.back-button-has-icon-only {
+ --icon-font-size: 24px;
+ &::part(native) {
+ width: 48px;
+ height: 48px;
+ padding: 0;
+ }
+ }
+
+ ion-button.button-has-icon-only:not(.button-small):not(.button-large) {
+ &::part(native) {
+ width: 48px;
+ height: 48px;
+ }
+ &.button-solid {
+ &::part(native) {
+ width: 40px;
+ height: 40px;
+ }
+ }
+ }
+}