diff --git a/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/checkbox-dark.png index 5b54421..e4c6a05 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 e72e614..19b51bb 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/radio-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/radio-dark.png index 921e372..7c67337 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 808b73a..6c026e0 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/select-action-sheet-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/select-action-sheet-dark.png index 5b035de..4d4246b 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 ef4c372..1e4cb94 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 37a3ad4..95d77fc 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 a29c5d5..9d10863 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 13110ad..ddfe659 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 675177b..f8ff5bf 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 5bdac52..a836d71 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 587f4fb..58f6d13 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/toggle-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/toggle-dark.png index 0a32472..577e0b0 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 43b407e..0a787cd 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/src/app/index/pages/checkbox/checkbox.page.html b/demo/src/app/index/pages/checkbox/checkbox.page.html index 3f3cc52..a7ac85e 100644 --- a/demo/src/app/index/pages/checkbox/checkbox.page.html +++ b/demo/src/app/index/pages/checkbox/checkbox.page.html @@ -41,6 +41,12 @@

checkbox

Space Between Label and Control + + Helper text + + + Error text + diff --git a/demo/src/app/index/pages/radio/radio.page.html b/demo/src/app/index/pages/radio/radio.page.html index 64fc0a7..0bc1a52 100644 --- a/demo/src/app/index/pages/radio/radio.page.html +++ b/demo/src/app/index/pages/radio/radio.page.html @@ -38,4 +38,18 @@

radio

+ + + + Helper option A + Helper option B + + + + + + Error option A + Error option B + + diff --git a/demo/src/app/index/pages/select/select.page.html b/demo/src/app/index/pages/select/select.page.html index a750e93..243441a 100644 --- a/demo/src/app/index/pages/select/select.page.html +++ b/demo/src/app/index/pages/select/select.page.html @@ -56,6 +56,22 @@

select

Orange + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + diff --git a/demo/src/app/index/pages/toggle/toggle.page.html b/demo/src/app/index/pages/toggle/toggle.page.html index 71f8def..4757ccd 100644 --- a/demo/src/app/index/pages/toggle/toggle.page.html +++ b/demo/src/app/index/pages/toggle/toggle.page.html @@ -43,6 +43,10 @@

toggle

Label at the End

Fixed Width Label

Stacked Label +

+ Helper text +

+ Error text diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss index d2a80ab..4b0d0ad 100644 --- a/src/styles/components/ion-list.scss +++ b/src/styles/components/ion-list.scss @@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) { } ion-list.list-inset.ios:not(.ios26-disabled) { - @include structured-list.layout(20px); + @include structured-list.layout(20px, 24px); ion-radio-group, ion-reorder-group { @@ -18,9 +18,6 @@ ion-list.list-inset.ios:not(.ios26-disabled) { $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group; :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) { - border-radius: 24px; - overflow: hidden; - ion-item { // To draw lines inside --inner-padding-end: 0; diff --git a/src/styles/md-ion-list-inset.scss b/src/styles/md-ion-list-inset.scss index 2d14ac5..725e33b 100644 --- a/src/styles/md-ion-list-inset.scss +++ b/src/styles/md-ion-list-inset.scss @@ -1,7 +1,7 @@ @use 'utils/structured-list'; ion-list.list-inset.md { - @include structured-list.layout(8px); + @include structured-list.layout(8px, 16px); ion-item-group > ion-item { & > ion-input[labelplacement='floating'] { diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss index 8541fbe..52d629f 100644 --- a/src/styles/utils/structured-list.scss +++ b/src/styles/utils/structured-list.scss @@ -1,4 +1,4 @@ -@mixin layout($outer-note-inset) { +@mixin layout($outer-note-inset, $group-border-radius) { background: transparent; ion-list-header { @@ -58,6 +58,32 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group; :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) { + border-radius: $group-border-radius; + overflow: hidden; + + &:has(> .radio-group-top) { + display: flex; + flex-direction: column; + border-radius: 0; + overflow: visible; + + > .radio-group-top { + order: 1; + font-size: 0.9rem; + padding-block-start: 8px; + padding-inline-start: calc(var(--ion-safe-area-left, 0) + 20px); + padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px); + } + + > ion-item:first-of-type { + --border-radius: #{$group-border-radius} #{$group-border-radius} 0 0; + } + + > ion-item:last-of-type { + --border-radius: 0 0 #{$group-border-radius} #{$group-border-radius}; + } + } + &:not(:first-of-type) { margin-top: 16px; } @@ -65,11 +91,13 @@ ion-item { &:has(ion-input.input-fill-outline), &:has(ion-textarea.textarea-fill-outline), + &:has(ion-select:is([helpertext]:not([helpertext='']), [errortext]:not([errortext='']))), &:has(ion-input .input-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))), &:has(ion-textarea .textarea-bottom > :is(.helper-text:not(:empty), .error-text:not(:empty))) { --inner-border-width: 0; --inner-padding-bottom: 4px; } + ion-select .select-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))), ion-input .input-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))), ion-textarea .textarea-bottom:not(:has(> :is(.helper-text:not(:empty), .error-text:not(:empty)))) { display: none;