Enforce logical properties

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-idiomatic-order"],
-  "plugins": ["stylelint-prettier"],
+  "plugins": ["stylelint-prettier", "stylelint-use-logical"],
   "overrides": [],
   "rules": {
     "prettier/prettier": true,
@@ -10,6 +10,7 @@
         "message": "CSS variables should be prefixed with op-"
       }
     ],
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "csstools/use-logical": "always"
   }
 }

package.json

@@ -66,6 +66,7 @@
     "stylelint": "^16.23.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-prettier": "^5.0.3",
+    "stylelint-use-logical": "^2.1.2",
     "vite": "^7.1.4"
   },
   "peerDependencies": {

src/addons/panel.css

@@ -3,10 +3,10 @@
 
   position: absolute;
   z-index: var(--op-z-index-sidebar);
-  width: var(--op-panel-width);
-  height: 100vh;
   background-color: var(--op-color-background);
+  block-size: 100vh;
   color: var(--op-color-on-background);
+  inline-size: var(--op-panel-width);
   inset-inline-end: calc(-1 * var(--op-panel-width)); /* this pushes the panel off the screen to the right */
   overflow-y: scroll;
   padding-block-end: var(--op-space-large);
@@ -23,7 +23,7 @@
   padding: var(--op-space-medium);
   border-radius: 100%;
   cursor: pointer;
-  float: right;
+  float: inline-end;
 
   &:hover {
     background-color: var(--op-color-neutral-plus-seven);

src/addons/tom-select.css

@@ -2,7 +2,6 @@
 .ts-wrapper {
   /* Control */
   .ts-control {
-    min-height: var(--op-input-height-large);
     align-items: center;
     border: none;
     border-radius: var(--op-radius-large);
@@ -12,22 +11,23 @@
     font-size: var(--op-font-x-small);
     font-weight: var(--op-font-weight-light);
     line-height: var(--op-line-height-base);
+    min-block-size: var(--op-input-height-large);
   }
 
   /* Active control */
   &.dropdown-active {
     .ts-control {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 
   /* Dropdown */
   .ts-dropdown {
     border: none;
     margin: 0;
-    border-bottom-left-radius: var(--op-radius-large);
-    border-bottom-right-radius: var(--op-radius-large);
+    border-end-end-radius: var(--op-radius-large);
+    border-end-start-radius: var(--op-radius-large);
     box-shadow: var(--op-border-all) var(--op-color-border);
     contain: paint;
 

src/components/accordion.css

@@ -9,11 +9,11 @@
 
   summary {
     display: grid;
-    min-height: var(--_op-accordion-summary-min-height);
     align-items: center;
     cursor: pointer;
     gap: var(--op-space-2x-small);
     grid-template-columns: auto 1fr auto;
+    min-block-size: var(--_op-accordion-summary-min-height);
 
     &::marker,
     &::-webkit-details-marker {
@@ -38,7 +38,7 @@
   }
 
   &::details-content {
-    height: 0;
+    block-size: 0;
     transition: var(--op-transition-accordion-content);
   }
 
@@ -48,7 +48,7 @@
     }
 
     &::details-content {
-      height: auto;
+      block-size: auto;
     }
   }
 

src/components/alert.css

@@ -36,9 +36,9 @@
   &.alert--flash {
     position: fixed;
     z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
     animation: var(--op-animation-flash);
+    inset-block-start: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   &.alert--warning {

src/components/avatar.css

@@ -18,11 +18,11 @@
   z-index: 1;
   display: block;
   overflow: hidden;
-  width: var(--__op-avatar-size);
-  min-width: var(--__op-avatar-size);
-  height: var(--__op-avatar-size);
-  min-height: var(--__op-avatar-size);
   border-radius: var(--_op-avatar-border-radius);
+  block-size: var(--__op-avatar-size);
+  inline-size: var(--__op-avatar-size);
+  min-block-size: var(--__op-avatar-size);
+  min-inline-size: var(--__op-avatar-size);
 
   &::before {
     position: absolute;
@@ -43,8 +43,8 @@
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     object-fit: cover;
   }
 

src/components/button.css

@@ -16,7 +16,6 @@
   --__op-btn-padding: var(--_op-btn-padding-large);
 
   display: inline-flex;
-  min-height: var(--__op-btn-height);
   align-items: center;
   justify-content: center;
   padding: var(--__op-btn-padding);
@@ -29,6 +28,7 @@
   font-size: var(--__op-btn-font-size);
   font-weight: var(--op-font-weight-normal);
   gap: var(--op-space-x-small);
+  min-block-size: var(--__op-btn-height);
   text-align: center;
   text-decoration: none;
   transition: var(--op-transition-input);
@@ -92,9 +92,9 @@
 
   /* Icon Modifier */
   &.btn--icon {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
     padding: 0;
+    inline-size: var(--__op-btn-height);
+    min-inline-size: var(--__op-btn-height);
   }
 
   /* Icon With Label Modifier */

src/components/button_group.css

@@ -30,13 +30,13 @@
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
     }
   }
 }

src/components/card.css

@@ -50,8 +50,8 @@
   }
 
   .card__header {
-    border-top-left-radius: var(--_op-card-radius);
-    border-top-right-radius: var(--_op-card-radius);
+    border-start-end-radius: var(--_op-card-radius);
+    border-start-start-radius: var(--_op-card-radius);
 
     h1,
     h2,
@@ -64,7 +64,7 @@
   }
 
   .card__footer {
-    border-bottom-left-radius: var(--_op-card-radius);
-    border-bottom-right-radius: var(--_op-card-radius);
+    border-end-end-radius: var(--_op-card-radius);
+    border-end-start-radius: var(--_op-card-radius);
   }
 }

src/components/confirm-dialog.css

@@ -44,13 +44,13 @@
   --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
 
   z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
+  inline-size: var(--_op-confirm-dialog-width);
   line-height: var(--op-line-height-base);
   opacity: var(--op-opacity-none);
   transform: scale(0.7);

src/components/divider.css

@@ -11,10 +11,9 @@
   /* Private API (component option defaults) */
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
-
-  width: 100%;
-  height: var(--__op-divider-height);
   background-color: var(--op-color-border);
+  block-size: var(--__op-divider-height);
+  inline-size: 100%;
   margin-block: var(--__op-divider-padding);
   margin-inline: 0;
 
@@ -46,10 +45,10 @@
 
   /* Direction Modifier */
   &.divider--vertical {
-    width: var(--__op-divider-height);
-    height: 100%;
-    min-height: var(--_op-divider-vertical-min-height);
+    block-size: 100%;
+    inline-size: var(--__op-divider-height);
     margin-block: 0;
     margin-inline: var(--__op-divider-padding);
+    min-block-size: var(--_op-divider-vertical-min-height);
   }
 }

src/components/form.css

@@ -10,9 +10,8 @@
   /* Private API (component option defaults) */
   --__op-form-control-height: var(--_op-form-control-height-large);
   --__op-form-control-font-size: var(--_op-form-control-font-large);
-
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
+  block-size: var(--__op-form-control-height);
+  min-inline-size: var(--__op-form-control-height);
 
   /* Size Modifiers */
   &.form-control--small {
@@ -60,12 +59,12 @@
   --_op-form-control-height-medium: var(--op-space-large);
   --_op-form-control-height-large: var(--op-space-x-large);
 
-  width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   align-self: center;
   margin: 0;
   accent-color: var(--op-color-primary-base);
+  block-size: var(--__op-form-control-height);
   cursor: pointer;
+  inline-size: var(--__op-form-control-height);
 
   & + label {
     align-self: center;
@@ -81,18 +80,18 @@
   --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
   display: block;
-  width: 100%;
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
   background-color: var(--op-color-neutral-plus-eight);
+  block-size: var(--__op-form-control-height);
   box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
   color: var(--op-color-neutral-on-plus-eight);
   cursor: text;
   font-size: var(--__op-form-control-font-size);
+  inline-size: 100%;
   line-height: var(--op-line-height-base);
+  min-inline-size: var(--__op-form-control-height);
   padding-block: var(--op-space-2x-small);
   padding-inline: var(--op-space-small) var(--op-space-x-small);
 
@@ -159,7 +158,6 @@
     --__op-btn-height: var(--__op-btn-base-height);
 
     display: inline-flex;
-    min-height: var(--__op-btn-height);
     align-items: center;
     justify-content: center;
     border: none;
@@ -173,6 +171,7 @@
     font-weight: var(--op-font-weight-normal);
     gap: var(--op-space-x-small);
     margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    min-block-size: var(--__op-btn-height);
     padding-block: 0;
     padding-inline: var(--op-space-x-small);
     text-align: center;
@@ -199,13 +198,13 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
 }
 
 select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-form-control-height));
+  min-block-size: calc(2 * var(--__op-form-control-height));
 }
 
 textarea.form-control:not([type='radio'], [type='checkbox']) {
-  max-width: 100%;
-  height: calc(2 * var(--__op-form-control-height));
-  min-height: var(--__op-form-control-height);
+  block-size: calc(2 * var(--__op-form-control-height));
+  max-inline-size: 100%;
+  min-block-size: var(--__op-form-control-height);
 }
 
 .form-label {
@@ -217,9 +216,9 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 }
 
 .form-error {
-  width: fit-content;
   color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
+  inline-size: fit-content;
 }
 
 .form-hint {

src/components/icon.css

@@ -34,10 +34,10 @@
   --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
 
   display: inline-block;
-  width: var(--__op-icon-font-size);
-  height: var(--__op-icon-font-size);
+  block-size: var(--__op-icon-font-size);
   font-size: var(--__op-icon-font-size);
   font-weight: var(--__op-icon-weight);
+  inline-size: var(--__op-icon-font-size);
   line-height: var(--op-line-height-densest);
   vertical-align: middle;
 
@@ -115,7 +115,7 @@
 /* Custom SVG Icons app specific */
 .custom-icons {
   svg {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 }