CHANGED: README

src/styles/divider.sass

@@ -1,26 +1,26 @@
 hr.m3.m3-divider
-    display: flex
-    align-items: end
-    box-sizing: border-box
     border: none
     outline: 0.5px solid var(--md-sys-color-outline-variant)
-    margin: 4px
+    margin-inline: 4px
+    position: relative
 
     &.vertical
-        writing-mode: tb-rl
-        &, &.full-width
-            height: 100%
+        height: 100%
+
         &.inset
-            align-self: end
-            height: calc(100% - 16px)
+            margin-top: 16px
+
         &.middle-inset
-            height: calc(100% - (2 * 16px))
+            margin-bottom: 16px
+            margin-top: 16px
+
 
     &.horizontal
-        &, &.full-width
-            width: 100%
+        width: 100%
+
         &.inset
-            align-self: end
-            width: calc(100% - 16px)
+            margin-left: 16px
+
         &.middle-inset
-            width: calc(100% - (2 * 16px))
+            margin-left: 16px
+            margin-right: 16px

src/styles/generics.css

@@ -694,35 +694,30 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
 }
 
 hr.m3.m3-divider {
-  display: flex;
-  align-items: end;
-  box-sizing: border-box;
   border: none;
   outline: 0.5px solid var(--md-sys-color-outline-variant);
-  margin: 4px;
+  margin-inline: 4px;
+  position: relative;
 }
 hr.m3.m3-divider.vertical {
-  writing-mode: tb-rl;
-}
-hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
   height: 100%;
 }
 hr.m3.m3-divider.vertical.inset {
-  align-self: end;
-  height: calc(100% - 16px);
+  margin-top: 16px;
 }
 hr.m3.m3-divider.vertical.middle-inset {
-  height: calc(100% - 32px);
+  margin-bottom: 16px;
+  margin-top: 16px;
 }
-hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
+hr.m3.m3-divider.horizontal {
   width: 100%;
 }
 hr.m3.m3-divider.horizontal.inset {
-  align-self: end;
-  width: calc(100% - 16px);
+  margin-left: 16px;
 }
 hr.m3.m3-divider.horizontal.middle-inset {
-  width: calc(100% - 32px);
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 label.m3.m3-checkbox-label {
@@ -1197,13 +1192,10 @@ html {
 
 .m3.m3-wrapper {
   width: 100%;
+  position: relative;
+  display: block;
   background-color: var(--md-sys-color-surface);
   border-radius: 25px;
-  padding: 25px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  height: min-content;
 }
 
 /*# sourceMappingURL=generics.css.map */

src/styles/generics.sass

@@ -26,11 +26,8 @@ html
 
 .m3.m3-wrapper
     width: 100%
+    position: relative
+    display: block
     background-color: var(--md-sys-color-surface)
     border-radius: 25px
-    padding: 25px
-    display: flex
-    align-items: center
-    flex-direction: column
-    height: min-content