@webority/theme 0.17.0 → 0.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/wui/_controls.scss

@@ -188,7 +188,9 @@
     background-size: 12px 12px;
 }
 
-// Switch — pill track + sliding knob (Bootstrap .form-switch only).
+// Switch: pill track + sliding knob (Bootstrap .form-switch only). The default track has
+// truly circular ends: the switch is a type="checkbox", which carries the checkbox's
+// `corner-shape: squircle`, so it is reset to `round` here.
 .form-switch {
     padding-left: 0;
 }
@@ -196,6 +198,7 @@
     width: 40px;
     height: 22px;
     border-radius: 999px;
+    corner-shape: round;
     border-color: transparent;
     background-color: var(--color-border-strong);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
@@ -227,10 +230,6 @@
 .form-switch-circle .form-check-input {
     width: 24px;
     height: 24px;
-    // The switch is a type="checkbox", which carries `corner-shape: squircle` — on a square
-    // that renders a rounded square, not a circle. Reset to a true round corner.
-    corner-shape: round;
-    border-radius: 999px;
     background-position: center;
     background-size: 10px 10px;
 }
@@ -238,13 +237,11 @@
     background-position: center;
 }
 
-// Rounded-pill variant (shape="round") — the same sliding pill, but with truly circular
-// ends. The switch is a type=checkbox, so it inherits the checkbox's default
-// `corner-shape: squircle`, which superellipses the pill's ends; reset it to `round` for
-// the fully semicircular track in the reference. Only the corner shape changes — size,
-// knob and slide are the base pill's.
-.form-switch-round .form-check-input {
-    corner-shape: round;
+// Squircle-pill variant (shape="pill"): the same sliding pill with superellipse ends, the
+// checkbox's own corner shape. Only the corner shape changes; size, knob and slide are the
+// base switch's.
+.form-switch-pill .form-check-input {
+    corner-shape: squircle;
 }
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,