Efficiency improvements - align with package v1.3.0

css/surveydown.css

@@ -260,25 +260,35 @@ p:last-child,
     width: 100%;
 }
 
-.matrix-question .shiny-options-group .radio {
+.matrix-question .shiny-options-group .radio,
+.matrix-question .shiny-options-group .checkbox {
     margin: 0;
     flex: 1;
     text-align: center;
 }
 
-.matrix-question .shiny-options-group .radio label {
+.matrix-question .shiny-options-group .radio label,
+.matrix-question .shiny-options-group .checkbox label {
     padding-left: 0;
     display: inline-block;
 }
 
-.matrix-question .shiny-options-group .radio input {
+.matrix-question .shiny-options-group .radio input,
+.matrix-question .shiny-options-group .checkbox input {
     margin: 0;
     position: relative;
     top: 2px;
 }
 
-/* Hide radio button labels */
-.matrix-question .shiny-options-group .radio span {
+/* Hide radio/checkbox option labels (column headers show the options) */
+.matrix-question .shiny-options-group .radio span,
+.matrix-question .shiny-options-group .checkbox span {
+    display: none;
+}
+
+/* Hide control-label in matrix question radio/checkbox groups */
+.matrix-question .shiny-input-radiogroup > .control-label,
+.matrix-question .shiny-input-checkboxgroup > .control-label {
     display: none;
 }
 
@@ -316,3 +326,136 @@ div:where(.swal2-container) .swal2-html-container {
   text-align: center;
   width: 100%;
 }
+
+/* Slider styling (ionRangeSlider, used by slider and slider_numeric) */
+.irs--shiny .irs-line {
+    height: 6px;
+    border: none;
+    border-radius: 3px;
+    background: #e3e6ea;
+    top: 27px;
+}
+
+.irs--shiny .irs-bar {
+    height: 6px;
+    border: none;
+    background: var(--theme-color);
+    top: 27px;
+}
+
+.irs--shiny .irs-handle {
+    width: 22px;
+    height: 22px;
+    top: 19px;
+    border: 2px solid var(--theme-color);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+
+.irs--shiny .irs-handle.state_hover,
+.irs--shiny .irs-handle:hover {
+    background: color-mix(in srgb, var(--theme-color) 10%, white);
+}
+
+.irs--shiny .irs-single,
+.irs--shiny .irs-from,
+.irs--shiny .irs-to {
+    background: var(--theme-color);
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.irs--shiny .irs-min,
+.irs--shiny .irs-max {
+    background: transparent;
+    color: #8a8a8a;
+    font-size: 11px;
+}
+
+/* Hide the small minor tick marks; keep only the labeled major ticks */
+.irs--shiny .irs-grid-pol.small {
+    display: none;
+}
+
+.irs--shiny .irs-grid-pol {
+    width: 2px;
+    background: #a8adb3;
+}
+
+.irs--shiny .irs-grid-text {
+    color: #8a8a8a;
+    font-size: 11px;
+}
+
+/* When a labeled grid is shown, the min/max labels above the track are
+   redundant with the grid's end labels */
+.irs--shiny:has(.irs-grid) .irs-min,
+.irs--shiny:has(.irs-grid) .irs-max {
+    display: none;
+}
+
+/* Image choice (mc_image / mc_multiple_image) */
+.sd-image-choice .shiny-options-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 0.5rem;
+}
+
+.sd-image-choice .radio,
+.sd-image-choice .checkbox {
+    margin: 0;
+}
+
+.sd-image-choice .radio label,
+.sd-image-choice .checkbox label {
+    cursor: pointer;
+    padding: 0;
+    font-weight: normal;
+}
+
+/* Hide the native control but keep it accessible (still keyboard/focusable) */
+.sd-image-choice input[type="radio"],
+.sd-image-choice input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+}
+
+.sd-image-card {
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    padding: 8px;
+    text-align: center;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.sd-image-card-img {
+    display: block;
+    max-width: 160px;
+    max-height: 160px;
+    border-radius: 4px;
+    margin: 0 auto;
+}
+
+.sd-image-card-caption {
+    display: block;
+    margin-top: 6px;
+}
+
+.sd-image-choice label:hover .sd-image-card {
+    border-color: color-mix(in srgb, var(--theme-color) 50%, white);
+}
+
+/* Selected state: highlight the card whose input is checked */
+.sd-image-choice label:has(input:checked) .sd-image-card {
+    border-color: var(--theme-color);
+    box-shadow: 0 0 0 1px var(--theme-color);
+}
+
+/* Keyboard focus visibility (the native control is visually hidden) */
+.sd-image-choice label:has(input:focus-visible) .sd-image-card {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 35%, transparent);
+}

docs/page-navigation.qmd

@@ -70,9 +70,18 @@ Here is what the **Survey Page Gadget** looks like in RStudio:
 
 ## Navigation buttons
 
-By default, navigation buttons are automatically added to each page to allow respondents to move forward through the survey. To change the global settings (e.g., add a previous button on all pages, change the message shown on all next buttons, etc.), you can edit the survey settings in the YAML header (see the [Survey Settings](survey-settings.html#default-settings) page for details).
+By default, a **Next** button is automatically added to each page to allow respondents to move forward through the survey. You don't need to add these buttons yourself.
 
-Additionally, you can also manually add navigation buttons using the `sd_nav()` function inside code chunks on any page, which will override the global settings for that specific page, like this: 
+To add a **Previous** button to every page so respondents can go back, you don't need to edit each page individually. Just set `show-previous: yes` under `survey-settings` in your **survey.qmd** YAML header:
+
+```yaml
+survey-settings:
+  show-previous: yes
+```
+
+This (and other global navigation defaults, like the button labels) is applied to every page automatically. See the [Survey Settings](survey-settings.html#default-settings) page for the full list of options.
+
+If instead you want to control the buttons on a **single page only**, you can manually add navigation buttons using the `sd_nav()` function inside a code chunk on that page, which overrides the global settings for that specific page, like this:
 
 ```{r}
 #| echo: fenced