@papillonbits/components 0.82.0 → 0.83.0

package/build/primer/Form/FormControl.scss

@@ -517,7 +517,9 @@ input[type='radio'].FormControl-radio {
   cursor: pointer;
   border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
   border-radius: var(--primer-borderRadius-small, 3px);
-  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
+  transition:
+    background-color,
+    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
   appearance: none;
   place-content: center;
 
@@ -557,7 +559,9 @@ input[type='radio'].FormControl-radio {
   &:checked {
     background: var(--color-accent-fg);
     border-color: var(--color-accent-fg);
-    transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; // unchecked -> checked
+    transition:
+      background-color,
+      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; // unchecked -> checked
 
     &::before {
       visibility: visible;

package/build/primer/Layout/app-frame.scss

@@ -3,6 +3,7 @@
 // stylelint-disable primer/borders
 // stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity
+// stylelint-disable media-query-no-invalid
 
 .AppFrame {
   // AppFrame structure

package/build/primer/Layout/layout.scss

@@ -7,18 +7,18 @@
   --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
   --Layout-gutter: 16px;
 
-  @media (max-width: calc(#{$width-sm} - 0.02px)) {
+  @media (width <= calc(#{$width-sm} - 0.02px)) {
     @include flow-as-row;
   }
 
   &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 0.02px)) {
+    @media (width <= calc(#{$width-md} - 0.02px)) {
       @include flow-as-row;
     }
   }
 
   &.Layout--flowRow-until-lg {
-    @media (max-width: calc(#{$width-lg} - 0.02px)) {
+    @media (width <= calc(#{$width-lg} - 0.02px)) {
       @include flow-as-row;
     }
   }

package/build/primer/Layout/mixins.scss

@@ -102,5 +102,7 @@
   height: #{$spacer-2}; // 8px
   content: '';
   background-color: var(--color-canvas-inset);
-  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
+  box-shadow:
+    inset 0 1px $Layout-divider-color,
+    inset 0 -1px $Layout-divider-color;
 }

package/build/primer/Layout/page-layout.scss

@@ -2,6 +2,7 @@
 // stylelint-disable max-nesting-depth
 // stylelint-disable selector-max-specificity
 // stylelint-disable no-duplicate-selectors
+// stylelint-disable media-query-no-invalid
 
 $Layout-divider-color: var(--color-border-default) !default;
 $Layout-responsive-variant-max-breakpoint: 'md' !default;

package/build/primer/Layout/stack.scss

@@ -1,5 +1,6 @@
 // stylelint-disable custom-property-pattern
 // Stack layout helper component
+// stylelint-disable media-query-no-invalid
 
 .Stack {
   // A Stack component lays elements horizontally or vertically on the page.

package/build/primer/Popover/Popover.scss

@@ -1,3 +1,5 @@
+// stylelint-disable media-query-no-invalid
+
 @import '~@papillonbits/css/build/primer/support/variables/layout.scss';
 @import '~@papillonbits/css/build/primer/support/variables/misc.scss';
 @import '~@papillonbits/css/build/primer/support/mixins/layout.scss';
@@ -203,17 +205,11 @@
 @media (max-width: ($width-md - 0.02px)) {
   .Popover {
     position: fixed;
-    top: auto !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
+    inset: auto 0 0 !important;
   }
 
   .Popover-message {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset: auto;
     width: auto !important;
     margin: $spacer-2;
   }

package/build/primer/SelectMenu/SelectMenu.scss

@@ -15,10 +15,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: 99;
   display: flex;
   padding: $spacer-3;
@@ -27,10 +24,7 @@ $SelectMenu-max-height: 480px !default;
 
   @include breakpoint(sm) {
     position: absolute;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset: auto;
     padding: 0;
   }
 }
@@ -41,10 +35,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: '';
   background-color: var(--color-primer-canvas-backdrop);
@@ -226,7 +217,9 @@ $SelectMenu-max-height: 480px !default;
 // Check icon
 .SelectMenu-icon--check {
   visibility: hidden;
-  transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
+  transition:
+    transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5),
+    visibility 0s 0.12s linear;
   transform: scale(0);
 }
 
@@ -397,7 +390,9 @@ $SelectMenu-max-height: 480px !default;
 
   .SelectMenu-icon--check {
     visibility: visible;
-    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
+    transition:
+      transform 0.12s cubic-bezier(0, 0, 0.2, 1),
+      visibility 0s linear;
     transform: scale(1);
   }
 }

package/build/primer/Toast/Toast.scss

@@ -10,7 +10,9 @@
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-default),
+    var(--color-shadow-large);
 
   @include breakpoint(sm) {
     width: max-content;
@@ -57,7 +59,9 @@
 
 .Toast--loading {
   color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-default),
+    var(--color-shadow-large);
 
   .Toast-icon {
     background-color: var(--color-neutral-emphasis);
@@ -66,7 +70,9 @@
 
 .Toast--error {
   color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-default),
+    var(--color-shadow-large);
 
   .Toast-icon {
     background-color: var(--color-danger-emphasis);
@@ -75,7 +81,9 @@
 
 .Toast--warning {
   color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-default),
+    var(--color-shadow-large);
 
   .Toast-icon {
     background-color: var(--color-attention-emphasis);
@@ -84,7 +92,9 @@
 
 .Toast--success {
   color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-default),
+    var(--color-shadow-large);
 
   .Toast-icon {
     background-color: var(--color-success-emphasis);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/components",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "description": "Papillon Bits Components",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
   "repository": {
@@ -29,8 +29,8 @@
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonbits/css": "^0.82.0",
-    "@papillonbits/library": "^0.82.0"
+    "@papillonbits/css": "^0.83.0",
+    "@papillonbits/library": "^0.83.0"
   },
-  "gitHead": "43dc7b754d0c69aa80bca556fd39ba22523bc10a"
+  "gitHead": "e87d8a98e232c5c06fef60267920791925635f0b"
 }