@allxsmith/bestax-bulma 2.6.2 → 3.0.1

package/src/scss/form/_dateinput.scss

@@ -0,0 +1,292 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$dateinput-min-width: 16rem !default;
+$dateinput-cell-size: 2.25rem !default;
+$dateinput-cell-radius: cv.getVar('radius-small') !default;
+$dateinput-cell-color: cv.getVar('text') !default;
+$dateinput-cell-hover-bg: hsla(0, 0%, 50%, 0.13) !default;
+$dateinput-cell-selected-bg: cv.getVar('primary') !default;
+$dateinput-cell-selected-color: cv.getVar('primary-invert') !default;
+$dateinput-cell-today-color: cv.getVar('primary') !default;
+$dateinput-cell-disabled-color: cv.getVar('text-weak') !default;
+$dateinput-cell-other-month-color: cv.getVar('text-weak') !default;
+$dateinput-header-padding: 0.5rem 0 !default;
+$dateinput-day-name-color: cv.getVar('text-weak') !default;
+$dateinput-day-name-size: cv.getVar('size-7') !default;
+$dateinput-nav-button-size: 1.75rem !default;
+
+.#{iv.$class-prefix}dateinput {
+  @include cv.register-vars(
+    (
+      'dateinput-min-width': #{$dateinput-min-width},
+      'dateinput-cell-size': #{$dateinput-cell-size},
+      'dateinput-cell-radius': #{$dateinput-cell-radius},
+      'dateinput-cell-color': #{$dateinput-cell-color},
+      'dateinput-cell-hover-bg': #{$dateinput-cell-hover-bg},
+      'dateinput-cell-selected-bg': #{$dateinput-cell-selected-bg},
+      'dateinput-cell-selected-color': #{$dateinput-cell-selected-color},
+      'dateinput-cell-today-color': #{$dateinput-cell-today-color},
+      'dateinput-cell-disabled-color': #{$dateinput-cell-disabled-color},
+      'dateinput-cell-other-month-color': #{$dateinput-cell-other-month-color},
+      'dateinput-header-padding': #{$dateinput-header-padding},
+      'dateinput-day-name-color': #{$dateinput-day-name-color},
+      'dateinput-day-name-size': #{$dateinput-day-name-size},
+      'dateinput-nav-button-size': #{$dateinput-nav-button-size},
+    )
+  );
+}
+
+.#{iv.$class-prefix}dateinput {
+  display: inline-block;
+  min-width: cv.getVar('dateinput-min-width');
+  font-family: cv.getVar('family-primary');
+  color: cv.getVar('text');
+}
+
+// Inline rendering: when the calendar is a direct child of the container
+// (no popover wrapper), give it a subtle frame so the grid doesn't look
+// orphaned on the page. Mirrors the popover's visual weight without the
+// drop-shadow / animation.
+.#{iv.$class-prefix}dateinput-container
+  > .#{iv.$class-prefix}dateinput {
+  background-color: cv.getVar('scheme-main');
+  border: 1px solid cv.getVar('border');
+  border-radius: cv.getVar('radius');
+  padding: 0.75rem;
+}
+
+.#{iv.$class-prefix}dateinput-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: cv.getVar('dateinput-header-padding');
+  gap: 0.5rem;
+}
+
+.#{iv.$class-prefix}dateinput-month-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  border-radius: cv.getVar('dateinput-cell-radius');
+
+  &:hover:not(:disabled) {
+    background-color: cv.getVar('dateinput-cell-hover-bg');
+  }
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: 2px;
+  }
+}
+
+.#{iv.$class-prefix}dateinput-month-caret {
+  transition: transform 0.15s ease;
+}
+.#{iv.$class-prefix}dateinput-month-trigger.#{iv.$class-prefix}is-active
+  .#{iv.$class-prefix}dateinput-month-caret {
+  transform: rotate(180deg);
+}
+
+.#{iv.$class-prefix}dateinput-month-label {
+  font-weight: cv.getVar('weight-semibold');
+}
+
+.#{iv.$class-prefix}dateinput-nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.#{iv.$class-prefix}dateinput-nav-prev,
+.#{iv.$class-prefix}dateinput-nav-next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: cv.getVar('dateinput-nav-button-size');
+  height: cv.getVar('dateinput-nav-button-size');
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: cv.getVar('dateinput-cell-radius');
+
+  &:hover:not(:disabled) {
+    background-color: cv.getVar('dateinput-cell-hover-bg');
+  }
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: 1px;
+  }
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}dateinput-day-names,
+.#{iv.$class-prefix}dateinput-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.#{iv.$class-prefix}dateinput-day-name {
+  text-align: center;
+  font-size: cv.getVar('dateinput-day-name-size');
+  color: cv.getVar('dateinput-day-name-color');
+  padding: 0.25rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.#{iv.$class-prefix}dateinput-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: cv.getVar('dateinput-cell-size');
+  height: cv.getVar('dateinput-cell-size');
+  margin: 0 auto;
+  border-radius: cv.getVar('dateinput-cell-radius');
+  border: 1px solid transparent;
+  background: transparent;
+  color: cv.getVar('dateinput-cell-color');
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  // No transitions on cells: Chrome's button engine intermittently strands
+  // bg-color/color transitions mid-flight when selection moves between
+  // cells, leaving the deselected cell stuck on the old fill/text color and
+  // the newly-selected cell stuck on the previous values. Override the
+  // inherited button reset's transition explicitly — `transition: none`
+  // alone isn't enough because the reset declares longhand props.
+  transition-property: none;
+
+  // Hover for non-selected cells: a subtle grey overlay.
+  &:hover:not(:disabled):not(.#{iv.$class-prefix}is-selected) {
+    background-color: cv.getVar('dateinput-cell-hover-bg');
+  }
+  // Hover for the selected cell: darken the primary fill rather than
+  // replacing it, so the selection stays visible under the cursor while
+  // still giving interactive feedback.
+  &.#{iv.$class-prefix}is-selected:hover:not(:disabled) {
+    background-color: color-mix(
+      in srgb,
+      cv.getVar('dateinput-cell-selected-bg'),
+      black 15%
+    );
+  }
+  // Inset focus ring so it can't bleed into an adjacent selected cell's
+  // primary fill (the grid gap is only 2px). Outline respects the cell's
+  // border-radius in modern browsers.
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: -2px;
+  }
+  // Today: tinted bold text (no ring), so it doesn't collide visually with
+  // the keyboard focus outline. Selected wins via later cascade.
+  &.#{iv.$class-prefix}is-today {
+    color: cv.getVar('dateinput-cell-today-color');
+    font-weight: cv.getVar('weight-semibold');
+  }
+  &.#{iv.$class-prefix}is-selected {
+    background-color: cv.getVar('dateinput-cell-selected-bg');
+    color: cv.getVar('dateinput-cell-selected-color');
+  }
+  // When focus lands on the selected cell, swap the ring to scheme-main so
+  // it stays visible against the primary-colored fill.
+  &.#{iv.$class-prefix}is-selected:focus-visible {
+    outline-color: cv.getVar('scheme-main');
+  }
+  &.#{iv.$class-prefix}is-other-month {
+    color: cv.getVar('dateinput-cell-other-month-color');
+  }
+  &.#{iv.$class-prefix}is-disabled,
+  &:disabled {
+    color: cv.getVar('dateinput-cell-disabled-color');
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.#{iv.$class-prefix}dateinput-years-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.4rem;
+  max-height: calc(cv.getVar('dateinput-cell-size') * 6);
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.#{iv.$class-prefix}dateinput-year-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: cv.getVar('dateinput-cell-size');
+  border: 1px solid transparent;
+  border-radius: cv.getVar('dateinput-cell-radius');
+  background: transparent;
+  color: cv.getVar('dateinput-cell-color');
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  padding: 0;
+  transition-property: none;
+
+  &:hover:not(:disabled):not(.#{iv.$class-prefix}is-selected) {
+    background-color: cv.getVar('dateinput-cell-hover-bg');
+  }
+  &.#{iv.$class-prefix}is-selected:hover:not(:disabled) {
+    background-color: color-mix(
+      in srgb,
+      cv.getVar('dateinput-cell-selected-bg'),
+      black 15%
+    );
+  }
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: -2px;
+  }
+  &.#{iv.$class-prefix}is-today {
+    color: cv.getVar('dateinput-cell-today-color');
+    font-weight: cv.getVar('weight-semibold');
+  }
+  &.#{iv.$class-prefix}is-selected {
+    background-color: cv.getVar('dateinput-cell-selected-bg');
+    color: cv.getVar('dateinput-cell-selected-color');
+  }
+  &.#{iv.$class-prefix}is-selected:focus-visible {
+    outline-color: cv.getVar('scheme-main');
+  }
+  &:disabled {
+    color: cv.getVar('dateinput-cell-disabled-color');
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.#{iv.$class-prefix}dateinput.#{iv.$class-prefix}is-small
+  .#{iv.$class-prefix}dateinput-cell {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: cv.getVar('size-7');
+}
+
+.#{iv.$class-prefix}dateinput.#{iv.$class-prefix}is-medium
+  .#{iv.$class-prefix}dateinput-cell {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.#{iv.$class-prefix}dateinput.#{iv.$class-prefix}is-large
+  .#{iv.$class-prefix}dateinput-cell {
+  width: 2.875rem;
+  height: 2.875rem;
+  font-size: cv.getVar('size-5');
+}

package/src/scss/form/_datetimeinput.scss

@@ -0,0 +1,191 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$datetimeinput-gap: 0.75rem !default;
+$datetimeinput-time-card-background: cv.getVar('scheme-main') !default;
+$datetimeinput-time-card-border-color: cv.getVar('border') !default;
+$datetimeinput-time-card-radius: cv.getVar('radius-large') !default;
+$datetimeinput-time-card-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.18) !default;
+$datetimeinput-time-card-padding: 0.5rem 0.75rem !default;
+// Frosted scrim over the calendar while the time wheels are open. Built from
+// the scheme HSL components so it dims toward the panel background in both
+// light and dark themes (same technique as Bulma's modal background).
+$datetimeinput-time-overlay-background: hsla(
+  #{cv.getVar('scheme-h')},
+  #{cv.getVar('scheme-s')},
+  #{cv.getVar('scheme-main-l')},
+  0.55
+) !default;
+$datetimeinput-time-overlay-blur: 3px !default;
+
+.#{iv.$class-prefix}datetimeinput {
+  @include cv.register-vars(
+    (
+      'datetimeinput-gap': #{$datetimeinput-gap},
+      'datetimeinput-time-card-background':
+        #{$datetimeinput-time-card-background},
+      'datetimeinput-time-card-border-color':
+        #{$datetimeinput-time-card-border-color},
+      'datetimeinput-time-card-radius': #{$datetimeinput-time-card-radius},
+      'datetimeinput-time-card-shadow': #{$datetimeinput-time-card-shadow},
+      'datetimeinput-time-card-padding': #{$datetimeinput-time-card-padding},
+      'datetimeinput-time-overlay-background':
+        #{$datetimeinput-time-overlay-background},
+      'datetimeinput-time-overlay-blur': #{$datetimeinput-time-overlay-blur},
+    )
+  );
+}
+
+.#{iv.$class-prefix}datetimeinput {
+  display: flex;
+  flex-direction: column;
+  gap: cv.getVar('datetimeinput-gap');
+}
+
+.#{iv.$class-prefix}datetimeinput-calendar-wrap {
+  position: relative;
+}
+
+// Frosted click-catcher covering the calendar while the wheels are open; it
+// dims and blurs the calendar so the wheel card reads as the focused layer,
+// and clicking it (not the card) collapses the wheels, like the native picker.
+// The footer is a sibling of the calendar wrap, so it stays uncovered.
+.#{iv.$class-prefix}datetimeinput-time-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: cv.getVar('datetimeinput-time-overlay-background');
+  backdrop-filter: blur(cv.getVar('datetimeinput-time-overlay-blur'));
+  animation: #{iv.$class-prefix}datetimeinput-overlay-in 0.12s ease-out;
+}
+
+@keyframes #{iv.$class-prefix}datetimeinput-overlay-in {
+  from {
+    opacity: 0;
+  }
+}
+
+// Floating wheel card — visually a small popover over the calendar, so
+// revealing the wheels never grows the panel or forces scrolling.
+.#{iv.$class-prefix}datetimeinput-time-card {
+  background-color: cv.getVar('datetimeinput-time-card-background');
+  border: 1px solid cv.getVar('datetimeinput-time-card-border-color');
+  border-radius: cv.getVar('datetimeinput-time-card-radius');
+  box-shadow: cv.getVar('datetimeinput-time-card-shadow');
+  padding: cv.getVar('datetimeinput-time-card-padding');
+  max-width: 100%;
+}
+.#{iv.$class-prefix}datetimeinput-time-card .#{iv.$class-prefix}timeinput {
+  display: block;
+}
+.#{iv.$class-prefix}datetimeinput-time-card
+  .#{iv.$class-prefix}timeinput-wheels {
+  justify-content: center;
+}
+
+// iOS-style footer: a "Time  5:07 PM" display row over a "Reset … (✓)" row.
+.#{iv.$class-prefix}datetimeinput-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+}
+
+// The time row is a button: click it to reveal / hide the time wheels
+// (iOS-style). The value renders as a pill that fills with the primary color
+// while the wheels are open.
+.#{iv.$class-prefix}datetimeinput-footer-time {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.25rem;
+  font: inherit;
+  cursor: pointer;
+  border-radius: cv.getVar('radius');
+
+  &:hover:not(:disabled),
+  &:focus-visible {
+    background-color: hsla(0, 0%, 50%, 0.08);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  & > span:first-child {
+    color: cv.getVar('text-weak');
+    font-size: cv.getVar('size-7');
+  }
+}
+
+.#{iv.$class-prefix}datetimeinput-footer-time-pill {
+  color: cv.getVar('primary');
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  padding: 0.15em 0.6em;
+  border-radius: 9999px;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+
+.#{iv.$class-prefix}datetimeinput-footer-time[aria-expanded='true']
+  .#{iv.$class-prefix}datetimeinput-footer-time-pill {
+  background-color: cv.getVar('primary');
+  color: cv.getVar('primary-invert');
+}
+
+.#{iv.$class-prefix}datetimeinput-footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.#{iv.$class-prefix}datetimeinput-footer-reset {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0.5rem 0.25rem;
+  font: inherit;
+  color: cv.getVar('text');
+  cursor: pointer;
+  border-radius: cv.getVar('radius');
+
+  &:hover,
+  &:focus-visible {
+    background-color: hsla(0, 0%, 50%, 0.12);
+  }
+}
+
+.#{iv.$class-prefix}datetimeinput-footer-done {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: cv.getVar('primary');
+  color: cv.getVar('primary-invert');
+  cursor: pointer;
+  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.18);
+  transition: transform 0.1s ease;
+
+  &:active {
+    transform: scale(0.94);
+  }
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: 2px;
+  }
+}

package/src/scss/form/_index.scss

@@ -0,0 +1,16 @@
+// Bestax Extras - Form Styles Index
+// Import all form component partials here
+
+// Form Components
+@use 'checkbox';
+@use 'radio';
+@use 'switch';
+@use 'slider';
+@use 'numberinput';
+@use 'rate';
+@use 'autocomplete';
+@use 'taginput';
+@use 'picker-popover';
+@use 'dateinput';
+@use 'timeinput';
+@use 'datetimeinput';

package/src/scss/form/_numberinput.scss

@@ -0,0 +1,176 @@
+// Numberinput Component Styles
+// A number input with increment/decrement buttons
+// Follows Bulma v1 CSS variable convention (see _dialog.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Numberinput-specific SCSS variables
+$numberinput-stepper-width: 2.5em !default;
+$numberinput-stepper-border-color: cv.getVar("border") !default;
+$numberinput-stepper-button-color: cv.getVar("text-weak") !default;
+$numberinput-stepper-button-hover-color: cv.getVar("text-strong") !default;
+$numberinput-stepper-button-hover-bg: cv.getVar("background") !default;
+$numberinput-disabled-opacity: 0.5 !default;
+$numberinput-rounded-button-size: 2.5em !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}numberinput {
+  @include cv.register-vars(
+    (
+      "numberinput-stepper-width": #{$numberinput-stepper-width},
+      "numberinput-stepper-border-color": #{$numberinput-stepper-border-color},
+      "numberinput-stepper-button-color": #{$numberinput-stepper-button-color},
+      "numberinput-stepper-button-hover-color": #{$numberinput-stepper-button-hover-color},
+      "numberinput-stepper-button-hover-bg": #{$numberinput-stepper-button-hover-bg},
+      "numberinput-disabled-opacity": #{$numberinput-disabled-opacity},
+      "numberinput-rounded-button-size": #{$numberinput-rounded-button-size},
+    )
+  );
+}
+
+// Base numberinput styles
+.#{iv.$class-prefix}numberinput {
+  // Input: center text, remove native number spinners
+  .#{iv.$class-prefix}input {
+    text-align: center;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  // Focus z-index so focused input overlays adjacent borders
+  .#{iv.$class-prefix}input:focus {
+    z-index: 1;
+    position: relative;
+  }
+
+  // Button hover z-index
+  .#{iv.$class-prefix}button:hover:not(:disabled) {
+    z-index: 1;
+    position: relative;
+  }
+
+  // Button press effect
+  .#{iv.$class-prefix}button:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  // Spaced rounded: force square buttons so is-rounded makes circles
+  &.#{iv.$class-prefix}is-grouped .#{iv.$class-prefix}button.#{iv.$class-prefix}is-rounded {
+    width: calc(cv.getVar("numberinput-rounded-button-size") - 1px);
+    height: calc(cv.getVar("numberinput-rounded-button-size") - 1px);
+    padding: 0;
+  }
+
+  // Compact rounded: reduce horizontal padding so buttons aren't too wide
+  &.#{iv.$class-prefix}has-addons .#{iv.$class-prefix}button.#{iv.$class-prefix}is-rounded {
+    padding-inline: 1em;
+  }
+
+  // Disabled state
+  &.#{iv.$class-prefix}is-disabled {
+    opacity: cv.getVar("numberinput-disabled-opacity");
+    pointer-events: none;
+  }
+}
+
+// Stepper variant
+.#{iv.$class-prefix}numberinput.#{iv.$class-prefix}is-stepper {
+  // Left-align text in stepper (not centered)
+  .#{iv.$class-prefix}input {
+    text-align: left;
+  }
+
+  .#{iv.$class-prefix}numberinput-stepper {
+    display: flex;
+    flex-direction: column;
+    height: 2.5em;
+    width: cv.getVar("numberinput-stepper-width");
+    border: 1px solid cv.getVar("numberinput-stepper-border-color");
+    border-left: 1px solid cv.getVar("numberinput-stepper-border-color");
+    border-top-right-radius: cv.getVar("radius");
+    border-bottom-right-radius: cv.getVar("radius");
+    overflow: hidden;
+  }
+
+  .#{iv.$class-prefix}numberinput-stepper-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: cv.getVar("numberinput-stepper-button-color");
+    padding: 0;
+
+    &:hover:not(:disabled) {
+      background-color: cv.getVar("numberinput-stepper-button-hover-bg");
+      color: cv.getVar("numberinput-stepper-button-hover-color");
+    }
+
+    &:disabled {
+      opacity: cv.getVar("numberinput-disabled-opacity");
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 0.75em;
+      height: 0.75em;
+    }
+  }
+}
+
+// Stepper: ensure control stretches to match input height
+.#{iv.$class-prefix}numberinput.#{iv.$class-prefix}is-stepper {
+  > .#{iv.$class-prefix}control:last-child {
+    display: flex;
+    align-items: stretch;
+    font-size: inherit;
+  }
+}
+
+// Bare mode inside has-addons: fix border-radius for controls
+// whose :first-child/:last-child is relative to .numberinput, not .has-addons
+.#{iv.$class-prefix}has-addons > .#{iv.$class-prefix}numberinput {
+  // When numberinput is not the first child, strip left radius from its first control
+  &:not(:first-child) > .#{iv.$class-prefix}control:first-child {
+    .#{iv.$class-prefix}button,
+    .#{iv.$class-prefix}input {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+
+  // When numberinput is not the last child, strip right radius from its last control
+  &:not(:last-child) > .#{iv.$class-prefix}control:last-child {
+    margin-inline-end: -1px;
+
+    .#{iv.$class-prefix}button,
+    .#{iv.$class-prefix}input {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+}
+
+// Size variants — font-size on container so em-based values scale
+.#{iv.$class-prefix}numberinput.#{iv.$class-prefix}is-small {
+  @include cv.register-vars(("numberinput-rounded-button-size": 2em));
+  font-size: cv.getVar("size-small");
+}
+
+.#{iv.$class-prefix}numberinput.#{iv.$class-prefix}is-medium {
+  @include cv.register-vars(("numberinput-rounded-button-size": 3em));
+  font-size: cv.getVar("size-medium");
+}
+
+.#{iv.$class-prefix}numberinput.#{iv.$class-prefix}is-large {
+  @include cv.register-vars(("numberinput-rounded-button-size": 3.5em));
+  font-size: cv.getVar("size-large");
+}