@papillonbits/components 0.44.0 → 0.45.0

package/build/primer/Box/box-overlay.scss

@@ -0,0 +1,42 @@
+.Box--overlay {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 448px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-default);
+  background-clip: padding-box;
+  border-color: var(--color-border-default);
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
+
+  .Box-header {
+    margin: 0;
+    border-width: 0;
+    border-bottom-width: $border-width;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+}
+
+.Box-overlay--narrow {
+  width: 320px;
+}
+
+.Box-overlay--wide {
+  // stylelint-disable-next-line primer/responsive-widths
+  width: 640px;
+}
+
+.Box-body {
+  &.scrollable-overlay {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+
+  .help {
+    padding-top: $spacer-2;
+    margin: 0;
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+}

package/build/primer/Form/FormControl.scss

@@ -49,6 +49,7 @@
 
 // shared among all form control components (input, select, textarea, checkbox, radio)
 @mixin Field {
+  color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
   border: solid var(--primer-borderWidth-thin, 1px) var(--color-border-default);
 

package/build/primer/Icon/Icon.part.js

@@ -17,6 +17,10 @@ var _alert2 = _interopRequireDefault(require("../SVG/icon/alert-24.svg"));
 
 var _alertFill = _interopRequireDefault(require("../SVG/icon/alert-fill-12.svg"));
 
+var _alertFill2 = _interopRequireDefault(require("../SVG/icon/alert-fill-16.svg"));
+
+var _alertFill3 = _interopRequireDefault(require("../SVG/icon/alert-fill-24.svg"));
+
 var _apps = _interopRequireDefault(require("../SVG/icon/apps-16.svg"));
 
 var _archive = _interopRequireDefault(require("../SVG/icon/archive-16.svg"));
@@ -139,17 +143,21 @@ var _checklist = _interopRequireDefault(require("../SVG/icon/checklist-16.svg"))
 
 var _checklist2 = _interopRequireDefault(require("../SVG/icon/checklist-24.svg"));
 
-var _chevronDown = _interopRequireDefault(require("../SVG/icon/chevron-down-16.svg"));
+var _chevronDown = _interopRequireDefault(require("../SVG/icon/chevron-down-12.svg"));
+
+var _chevronDown2 = _interopRequireDefault(require("../SVG/icon/chevron-down-16.svg"));
 
-var _chevronDown2 = _interopRequireDefault(require("../SVG/icon/chevron-down-24.svg"));
+var _chevronDown3 = _interopRequireDefault(require("../SVG/icon/chevron-down-24.svg"));
 
 var _chevronLeft = _interopRequireDefault(require("../SVG/icon/chevron-left-16.svg"));
 
 var _chevronLeft2 = _interopRequireDefault(require("../SVG/icon/chevron-left-24.svg"));
 
-var _chevronRight = _interopRequireDefault(require("../SVG/icon/chevron-right-16.svg"));
+var _chevronRight = _interopRequireDefault(require("../SVG/icon/chevron-right-12.svg"));
 
-var _chevronRight2 = _interopRequireDefault(require("../SVG/icon/chevron-right-24.svg"));
+var _chevronRight2 = _interopRequireDefault(require("../SVG/icon/chevron-right-16.svg"));
+
+var _chevronRight3 = _interopRequireDefault(require("../SVG/icon/chevron-right-24.svg"));
 
 var _chevronUp = _interopRequireDefault(require("../SVG/icon/chevron-up-16.svg"));
 
@@ -589,6 +597,8 @@ var _lock2 = _interopRequireDefault(require("../SVG/icon/lock-24.svg"));
 
 var _log = _interopRequireDefault(require("../SVG/icon/log-16.svg"));
 
+var _log2 = _interopRequireDefault(require("../SVG/icon/log-24.svg"));
+
 var _logoGist = _interopRequireDefault(require("../SVG/icon/logo-gist-16.svg"));
 
 var _logoGithub = _interopRequireDefault(require("../SVG/icon/logo-github-16.svg"));
@@ -1045,6 +1055,8 @@ var iconComponents = {
   Alert16: _alert["default"],
   Alert24: _alert2["default"],
   AlertFill12: _alertFill["default"],
+  AlertFill16: _alertFill2["default"],
+  AlertFill24: _alertFill3["default"],
   Apps16: _apps["default"],
   Archive16: _archive["default"],
   Archive24: _archive2["default"],
@@ -1106,12 +1118,14 @@ var iconComponents = {
   Checkbox24: _checkbox2["default"],
   Checklist16: _checklist["default"],
   Checklist24: _checklist2["default"],
-  ChevronDown16: _chevronDown["default"],
-  ChevronDown24: _chevronDown2["default"],
+  ChevronDown12: _chevronDown["default"],
+  ChevronDown16: _chevronDown2["default"],
+  ChevronDown24: _chevronDown3["default"],
   ChevronLeft16: _chevronLeft["default"],
   ChevronLeft24: _chevronLeft2["default"],
-  ChevronRight16: _chevronRight["default"],
-  ChevronRight24: _chevronRight2["default"],
+  ChevronRight12: _chevronRight["default"],
+  ChevronRight16: _chevronRight2["default"],
+  ChevronRight24: _chevronRight3["default"],
   ChevronUp16: _chevronUp["default"],
   ChevronUp24: _chevronUp2["default"],
   Circle16: _circle["default"],
@@ -1331,6 +1345,7 @@ var iconComponents = {
   Lock16: _lock["default"],
   Lock24: _lock2["default"],
   Log16: _log["default"],
+  Log24: _log2["default"],
   LogoGist16: _logoGist["default"],
   LogoGithub16: _logoGithub["default"],
   Mail16: _mail["default"],

package/build/primer/Icon/Icon.prop.js

@@ -13,6 +13,8 @@ var iconName = {
   Alert16: 'Alert16',
   Alert24: 'Alert24',
   AlertFill12: 'AlertFill12',
+  AlertFill16: 'AlertFill16',
+  AlertFill24: 'AlertFill24',
   Apps16: 'Apps16',
   Archive16: 'Archive16',
   Archive24: 'Archive24',
@@ -74,10 +76,12 @@ var iconName = {
   Checkbox24: 'Checkbox24',
   Checklist16: 'Checklist16',
   Checklist24: 'Checklist24',
+  ChevronDown12: 'ChevronDown12',
   ChevronDown16: 'ChevronDown16',
   ChevronDown24: 'ChevronDown24',
   ChevronLeft16: 'ChevronLeft16',
   ChevronLeft24: 'ChevronLeft24',
+  ChevronRight12: 'ChevronRight12',
   ChevronRight16: 'ChevronRight16',
   ChevronRight24: 'ChevronRight24',
   ChevronUp16: 'ChevronUp16',
@@ -299,6 +303,7 @@ var iconName = {
   Lock16: 'Lock16',
   Lock24: 'Lock24',
   Log16: 'Log16',
+  Log24: 'Log24',
   LogoGist16: 'LogoGist16',
   LogoGithub16: 'LogoGithub16',
   Mail16: 'Mail16',

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

@@ -0,0 +1,157 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable primer/spacing
+// stylelint-disable primer/borders
+// stylelint-disable custom-property-pattern
+// stylelint-disable no-descending-specificity
+
+.AppFrame {
+  // AppFrame structure
+  // ===================
+  //
+  // .AppFrame
+  // ├─ .AppFrame-a11yNav
+  // │  ├─ .AppFrame-a11yLink
+  // │
+  // ├─ .AppFrame-main
+  // │  ├─ .AppFrame-header-wrapper
+  // │  │   ├─ .AppFrame-header
+  // │  │   ├─ .AppFrame-subheader
+  // │  │
+  // │  ├─ #start-of-content
+  // │  ├─ .AppFrame-body
+  // │
+  // │  .AppFrame-footer
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    width: 100%;
+    padding: var(--base-size-16, 16px);
+    background: var(--color-canvas-inset);
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    isolation: isolate;
+    align-items: center;
+    gap: var(--base-size-8, 8px);
+
+    &:not(:focus-within) {
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(1px, 1px, 1px, 1px);
+      border: 0;
+    }
+
+    &:focus-within {
+      top: 0;
+      left: 0;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        justify-content: center;
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      display: block;
+      width: var(--base-size-8, 8px);
+      height: var(--base-size-8, 8px);
+      overflow: hidden;
+      text-indent: var(--base-size-128, 128px);
+      pointer-events: none;
+      background: var(--color-border-default);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+    }
+
+    &:focus {
+      z-index: 20;
+      display: grid;
+      width: auto;
+      height: auto;
+      min-height: var(--primer-control-medium-size, 32px);
+      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      overflow: auto;
+      color: var(--color-fg-on-emphasis);
+      background: var(--color-accent-emphasis);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+      align-items: center;
+
+      @media (pointer: coarse) {
+        &::after {
+          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+        }
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          color: var(--color-accent-emphasis);
+          transform: scale(0.3, 0.25);
+        }
+
+        50% {
+          color: var(--color-accent-emphasis);
+          transform: scale(1, 1);
+        }
+
+        55% {
+          color: var(--color-fg-on-emphasis);
+        }
+
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  .AppFrame-main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+
+    @supports (height: 100dvh) {
+      min-height: 100dvh;
+    }
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    height: min-content;
+    overflow: visible;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-subheader {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    flex: 0 0 auto;
+  }
+}

package/build/primer/SVG/icon/alert-fill-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM8 5a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5A.75.75 0 018 5zm1 6a1 1 0 11-2 0 1 1 0 012 0z"/></svg>

package/build/primer/SVG/icon/alert-fill-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.836 3.244c.963-1.665 3.365-1.665 4.328 0l8.967 15.504c.963 1.667-.24 3.752-2.165 3.752H3.034c-1.926 0-3.128-2.085-2.165-3.752L9.836 3.244zM12 8.5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 8.5zm1 9a1 1 0 11-2 0 1 1 0 012 0z"/></svg>

package/build/primer/SVG/icon/chevron-down-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 8.8c-.2 0-.4-.1-.5-.2L2.2 5.3c-.3-.3-.3-.8 0-1.1s.8-.3 1.1 0L6 6.9l2.7-2.7c.3-.3.8-.3 1.1 0s.3.8 0 1.1L6.6 8.5c-.2.2-.4.3-.6.3z"/></svg>

package/build/primer/SVG/icon/chevron-right-12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M4.7 10c-.2 0-.4-.1-.5-.2-.3-.3-.3-.8 0-1.1L6.9 6 4.2 3.3c-.3-.3-.3-.8 0-1.1s.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3z"/></svg>

package/build/primer/SVG/icon/log-24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.197 10a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm-2.382 4a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm-1.581 4a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M4.125 0h15.75A4.113 4.113 0 0124 4.125c0 1.384-.476 2.794-1.128 4.16-.652 1.365-1.515 2.757-2.352 4.104l-.008.013c-.849 1.368-1.669 2.691-2.28 3.97-.614 1.283-.982 2.45-.982 3.503a2.625 2.625 0 104.083-2.183.75.75 0 01.834-1.247A4.125 4.125 0 0119.875 24H4.5a4.125 4.125 0 01-4.125-4.125c0-2.234 1.258-4.656 2.59-6.902.348-.586.702-1.162 1.05-1.728.8-1.304 1.567-2.553 2.144-3.738H3.39c-.823 0-1.886-.193-2.567-1.035A3.647 3.647 0 010 4.125 4.125 4.125 0 014.125 0zM1.5 4.125A2.625 2.625 0 014.125 1.5h12.568a4.108 4.108 0 00-.943 2.625c0 .723.185 1.349.499 1.882H3.389c-.662 0-1.148-.166-1.402-.479A2.148 2.148 0 011.5 4.125zm14.25 15.75c0 .997.354 1.912.943 2.625H4.5a2.625 2.625 0 01-2.625-2.625c0-1.766 1.025-3.85 2.38-6.137.314-.529.646-1.068.98-1.612.953-1.55 1.927-3.136 2.577-4.619H18a.75.75 0 00.417-1.373c-.746-.5-1.167-1.144-1.167-2.009A2.625 2.625 0 0119.875 1.5 2.613 2.613 0 0122.5 4.125c0 1.057-.368 2.229-.982 3.514-.611 1.28-1.431 2.605-2.28 3.972l-.017.028c-.834 1.343-1.694 2.728-2.343 4.086-.652 1.364-1.128 2.77-1.128 4.15z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/components",
-  "version": "0.44.0",
+  "version": "0.45.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.44.0",
-    "@papillonbits/library": "^0.44.0"
+    "@papillonbits/css": "^0.45.0",
+    "@papillonbits/library": "^0.45.0"
   },
-  "gitHead": "7056d677c14d6c515a92c6e017524e31b91d9070"
+  "gitHead": "7b11ed501700a3a393461f3aa6069dc6c05d6a2c"
 }