@primer/css 0.0.0-20220520180541 → 0.0.0-20220520200150

package/CHANGELOG.md

@@ -1,10 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220520180541
-
-### Minor Changes
-
-- [#2087](https://github.com/primer/css/pull/2087) [`0f16cee8`](https://github.com/primer/css/commit/0f16cee819405d81a849b2a3b2eb88bc53bf172c) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.
+## 0.0.0-20220520200150
 
 ### Patch Changes
 

package/alerts/flash-refactor.scss

@@ -0,0 +1,134 @@
+// Flash alert
+
+.Flash {
+  position: relative;
+  display: grid;
+  // stylelint-disable-next-line primer/spacing
+  padding: $spacer-2;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr min-content min-content;
+  grid-template-rows: min-content;
+
+  // `sm` breakpoint variantion
+  @media (max-width: #{map-get($breakpoints, 'sm') - 0.02px}) {
+    grid-template-areas:
+    'visual message close'
+    '  .    actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+
+    .Flash-actions {
+      margin: $spacer-2 0 0 $spacer-2;
+    }
+  }
+
+  // Elements
+
+  .Flash-visual {
+    grid-area: visual;
+    // stylelint-disable-next-line primer/spacing
+    padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
+    display: grid;
+    align-self: start;
+
+    > .octicon {
+      margin-block: calc((#{$spacer-1}) / 2);
+    }
+    
+    > * {
+      align-self: center;
+    }
+  }
+
+  .Flash-message {
+    // stylelint-disable-next-line primer/spacing
+    padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
+    grid-area: message;
+    align-self: center;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .Flash-actions {
+    grid-area: actions;
+
+    &:last-child {
+      align-self: end;
+    }
+  }
+
+  .Flash-close {
+    grid-area: close;
+    margin: 0 0 0 $spacer-2;
+
+    button {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+  }
+
+  // Variants
+
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  .Flash-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+  &.Flash--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+  }
+
+  &.Flash--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+  }
+
+  &.Flash--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-success-fg);
+    }
+  }
+
+  // Full-width
+
+  &.Flash--full {
+    margin-top: ($border-width * -1);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  // Replace with Primitives' Narrow viewport range
+  @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+    &.Flash--full-whenNarrow {
+      margin-top: ($border-width * -1);
+      border-left: 0;
+      border-right: 0;
+      border-radius: 0;
+    }
+  }
+}

package/alerts/flash.scss

@@ -4,7 +4,7 @@
 .flash {
   position: relative;
   // stylelint-disable-next-line primer/spacing
-  padding: 20px $spacer-3;
+  padding: $spacer-3;
   border-style: $border-style;
   border-width: $border-width;
   border-radius: $border-radius;

package/alerts/index.scss

@@ -1,3 +1,4 @@
 // support files
 @import '../support/index.scss';
 @import './flash.scss';
+@import './flash-refactor.scss';

package/app/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "app"
+generated: true
+---
+
+# Primer CSS: `app` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/app/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/app.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/app/app-frame.scss

@@ -0,0 +1,168 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable selector-max-specificity
+// stylelint-disable no-duplicate-selectors
+
+.AppFrame {
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    padding: 8px 24px 8px 8px;
+    inset: -200px auto auto 8px;
+    background: #F6F8FA; /* fixme */
+    z-index: 1000;
+    min-width: 50vw;
+
+    ul, li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    ul {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    &:focus-within {
+      inset-block-start: 8px;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        inset-inline-end: 8px;
+
+        ul {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      width: 8px;
+      height: 8px;
+      display: block;
+      overflow: hidden;
+      text-indent: 20em;
+      border-radius: 100%;
+      background: var(--color-border-default);
+      user-select: none;
+    }
+
+    &:focus {
+      display: block;
+      z-index: 20;
+      width: auto;
+      height: auto;
+      overflow: auto;
+      border-radius: $spacer-4; /* 24px */
+      min-height: $spacer-5; /* 32px */
+      padding: calc((#{$spacer-5} - 20px) / 2) $spacer-3;
+      line-height: 20px;
+      background: var(--color-accent-fg);
+      color: var(--color-fg-on-emphasis);
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          transform: scale(0.3, 0.25);
+          color: var(--color-accent-fg);
+        }
+        50% {
+          transform: scale(1, 1);
+          color: var(--color-accent-fg);
+        }
+        55% {
+          color: var(--color-fg-on-emphasis);
+        }
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  &:has(.AppFrame-a11yNav:focus-within) .AppHeader-context {
+    opacity: 0;
+  }
+
+  .AppFrame-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    overflow: visible; 
+    height: min-content;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-tray {
+    overflow: hidden;
+    flex: 0 0 auto;
+    background: linear-gradient(to bottom, var(--color-border-default) -#{$spacer-3}, var(--color-canvas-inset) #{$spacer-2});
+
+    @keyframes flash-tray--appear {
+      from {
+        opacity: 0;
+        transform: translateY(-$spacer-4);
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @include breakpoint(md) {
+      padding: $spacer-2 $spacer-3;
+      border-bottom: $border-width $border-style var(--color-border-default);
+
+      .Flash {
+        animation: flash-tray--appear 160ms 80ms both cubic-bezier(0.33, 1, 0.68, 1);
+
+        & + .Flash {
+          margin-top: $spacer-2;
+          animation-delay: 160ms;
+        }
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    // FIXME: use theme-high-contrast mixin
+    @at-root :is([data-color-mode="light"][data-light-theme$='high_contrast'], [data-color-mode="dark"][data-dark-theme$='high_contrast']) & {
+      background: var(--color-canvas-inset);
+    }
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    border-top: $border-width $border-style var(--color-border-default);
+    background: var(--color-canvas-inset);
+    padding: $spacer-3;
+  }
+}

package/app/app-header.scss

@@ -0,0 +1,111 @@
+.AppHeader {
+  --AppHeader-bg: #F6F8FA; /* bg.subtle? */
+
+  background: var(--AppHeader-bg);
+  color: var(--color-fg-default);
+
+  // Global bar
+
+  .AppHeader-globalBar {
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+
+    .AppHeader-logo {
+      flex: 0 0 auto;
+      display: grid;
+
+      button, a {
+        grid-area: 1 / 1;
+        display: block;
+        width: 32px;
+        height: 32px;
+      }
+
+      button {
+        padding: 0;
+        border: none;
+        border-radius: 100%;
+        outline-offset: 2px;
+      }
+
+      a {
+        grid-area: 1 / 1;
+        overflow: hidden;
+        text-indent: 20em;
+        color: transparent;
+      }
+    }
+
+    .AppHeader-context {
+      flex: 1 1 auto;
+      height: 32px;
+      //background: #ececec;
+    }
+
+    .AppHeader-user {
+      flex: 0 0 auto;
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 100%;
+      outline-offset: 2px;
+      background: var(--color-neutral-muted);
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+      }
+    }
+  }
+
+  // Local bar
+
+  .AppHeader-localBar {
+    padding: 0 16px 16px;
+    //background: lightcyan;
+    box-shadow: inset 0 -1px var(--color-border-default);
+  }
+
+  .AppHeader-logo {
+    border-radius: 100%;
+    outline-offset: -2px;
+  }
+
+  // AppHeader items
+
+  .AppHeader-item {
+    flex: 0 0 auto;
+    background: lightpink;
+  }
+
+  .AppHeader-item--full {
+    flex-grow: 1;
+  }
+
+  .AppHeader-button {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--color-border-default);
+    padding: 8px;
+    border-radius: 6px;
+    color: var(--color-fg-muted);
+
+    svg {
+      color: inherit;
+      display: block !important;
+      color: inherit !important;
+    }
+
+    &:hover {
+      background: var(--color-action-list-item-default-hover-bg);
+    }
+
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
+    }
+  }
+}

package/app/index.scss

@@ -0,0 +1,4 @@
+@import '../support/index.scss';
+@import './app-frame.scss';
+@import './app-header.scss';
+@import './app-footer.scss';

package/dist/alerts.css

@@ -1,2 +1,2 @@
-.flash{position:relative;padding:20px 16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary{background-clip:border-box}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}
+.flash{position:relative;padding:16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary{background-clip:border-box}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}.Flash{position:relative;display:grid;padding:8px;border:1px solid;border-radius:6px;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr min-content min-content;grid-template-rows:min-content;color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}@media(max-width: 543.98px){.Flash{grid-template-areas:"visual message close" "  .    actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Flash .Flash-actions{margin:8px 0 0 8px}}.Flash .Flash-visual{grid-area:visual;padding:calc((32px - 20px)/2) 8px;display:grid;align-self:start}.Flash .Flash-visual>.octicon{margin-block:calc((4px)/2)}.Flash .Flash-visual>*{align-self:center}.Flash .Flash-message{padding:calc((32px - 20px)/2) 8px;grid-area:message;align-self:center}.Flash .Flash-message p:last-child{margin-bottom:0}.Flash .Flash-actions{grid-area:actions}.Flash .Flash-actions:last-child{align-self:end}.Flash .Flash-close{grid-area:close;margin:0 0 0 8px}.Flash .Flash-close button:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Flash .Flash-visual .octicon{color:var(--color-accent-fg)}.Flash.Flash--warning{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.Flash.Flash--warning .Flash-visual .octicon{color:var(--color-attention-fg)}.Flash.Flash--error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.Flash.Flash--error .Flash-visual .octicon{color:var(--color-danger-fg)}.Flash.Flash--success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.Flash.Flash--success .Flash-visual .octicon{color:var(--color-success-fg)}.Flash.Flash--full{margin-top:-1px;border-left:0;border-right:0;border-radius:0}@media(max-width: 767.98px){.Flash.Flash--full-whenNarrow{margin-top:-1px;border-left:0;border-right:0;border-radius:0}}
 /*# sourceMappingURL=alerts.css.map */

package/dist/alerts.css.map

@@ -1 +1 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AA8iBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,0BAAA,0BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}
+{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AA8iBA,OAAA,iBACE,CAAA,YAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,0BAAA,0BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA,CAAA,OAAA,iBAAA,CAAA,YAAA,CAAA,WAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,qBAAA,CAAA,kDAAA,CAAA,6DAAA,CAAA,8BAAA,CAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,4BAAA,OAAA,mEAAA,CAAA,iDAAA,CAAA,0CAAA,CAAA,sBAAA,kBAAA,CAAA,CAAA,qBAAA,gBAAA,CAAA,iCAAA,CAAA,YAAA,CAAA,gBAAA,CAAA,8BAAA,0BAAA,CAAA,uBAAA,iBAAA,CAAA,sBAAA,iCAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,mCAAA,eAAA,CAAA,sBAAA,iBAAA,CAAA,iCAAA,cAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,CAAA,iCAAA,+DAAA,CAAA,8BAAA,4BAAA,CAAA,sBAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,6CAAA,+BAAA,CAAA,oBAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,2CAAA,4BAAA,CAAA,sBAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,6CAAA,6BAAA,CAAA,mBAAA,eAAA,CAAA,aAAA,CAAA,cAAA,CAAA,eAAA,CAAA,4BAAA,8BAAA,eAAA,CAAA,aAAA,CAAA,cAAA,CAAA,eAAA,CAAA","file":"alerts.css"}

package/dist/app.css

@@ -0,0 +1,2 @@
+.AppFrame .AppFrame-a11yNav{position:absolute;padding:8px 24px 8px 8px;inset:-200px auto auto 8px;background:#f6f8fa;z-index:1000;min-width:50vw}.AppFrame .AppFrame-a11yNav ul,.AppFrame .AppFrame-a11yNav li{list-style:none;margin:0;padding:0}.AppFrame .AppFrame-a11yNav ul{display:flex;align-items:center;gap:8px}.AppFrame .AppFrame-a11yNav:focus-within{inset-block-start:8px}@media(max-width: 767.98px){.AppFrame .AppFrame-a11yNav:focus-within{inset-inline-end:8px}.AppFrame .AppFrame-a11yNav:focus-within ul{justify-content:center}}.AppFrame .AppFrame-a11yLink{transition:none}.AppFrame .AppFrame-a11yLink:not(:focus){width:8px;height:8px;display:block;overflow:hidden;text-indent:20em;border-radius:100%;background:var(--color-border-default);-webkit-user-select:none;user-select:none}.AppFrame .AppFrame-a11yLink:focus{display:block;z-index:20;width:auto;height:auto;overflow:auto;border-radius:24px;min-height:32px;padding:calc((32px - 20px)/2) 16px;line-height:20px;background:var(--color-accent-fg);color:var(--color-fg-on-emphasis)}@media(prefers-reduced-motion: no-preference){.AppFrame .AppFrame-a11yLink:focus{animation:AppFrame-a11yLink-focus 200ms ease-out}}@keyframes AppFrame-a11yLink-focus{0%{transform:scale(0.3, 0.25);color:var(--color-accent-fg)}50%{transform:scale(1, 1);color:var(--color-accent-fg)}55%{color:var(--color-fg-on-emphasis)}100%{transform:scaleX(1)}}.AppFrame:has(.AppFrame-a11yNav:focus-within) .AppHeader-context{opacity:0}.AppFrame .AppFrame-main{display:flex;flex-direction:column;min-height:100vh}.AppFrame .AppFrame-header-wrapper{position:relative;overflow:visible;height:min-content}.AppFrame .AppFrame-header-wrapper .AppFrame-header{position:sticky;top:0;z-index:1}.AppFrame .AppFrame-header{flex:0 0 auto}.AppFrame .AppFrame-tray{overflow:hidden;flex:0 0 auto;background:linear-gradient(to bottom, var(--color-border-default) -16px, var(--color-canvas-inset) 8px)}@keyframes flash-tray--appear{from{opacity:0;transform:translateY(-24px)}to{opacity:1}}@media(min-width: 768px){.AppFrame .AppFrame-tray{padding:8px 16px;border-bottom:1px solid var(--color-border-default)}.AppFrame .AppFrame-tray .Flash{animation:flash-tray--appear 160ms 80ms both cubic-bezier(0.33, 1, 0.68, 1)}.AppFrame .AppFrame-tray .Flash+.Flash{margin-top:8px;animation-delay:160ms}}.AppFrame .AppFrame-tray:empty{display:none}:is([data-color-mode=light][data-light-theme$=high_contrast],[data-color-mode=dark][data-dark-theme$=high_contrast]) .AppFrame .AppFrame-tray{background:var(--color-canvas-inset)}.AppFrame .AppFrame-body{flex:1 0;height:100%}.AppFrame .AppFrame-footer{border-top:1px solid var(--color-border-default);background:var(--color-canvas-inset);padding:16px}.AppHeader{--AppHeader-bg: #F6F8FA;background:var(--AppHeader-bg);color:var(--color-fg-default)}.AppHeader .AppHeader-globalBar{padding:16px;display:flex;gap:16px}.AppHeader .AppHeader-globalBar .AppHeader-logo{flex:0 0 auto;display:grid}.AppHeader .AppHeader-globalBar .AppHeader-logo button,.AppHeader .AppHeader-globalBar .AppHeader-logo a{grid-area:1/1;display:block;width:32px;height:32px}.AppHeader .AppHeader-globalBar .AppHeader-logo button{padding:0;border:none;border-radius:100%;outline-offset:2px}.AppHeader .AppHeader-globalBar .AppHeader-logo a{grid-area:1/1;overflow:hidden;text-indent:20em;color:transparent}.AppHeader .AppHeader-globalBar .AppHeader-context{flex:1 1 auto;height:32px}.AppHeader .AppHeader-globalBar .AppHeader-user{flex:0 0 auto;width:32px;height:32px;border:none;border-radius:100%;outline-offset:2px;background:var(--color-neutral-muted)}.AppHeader .AppHeader-globalBar .AppHeader-user img{display:block;width:100%;height:100%;border-radius:100%}.AppHeader .AppHeader-localBar{padding:0 16px 16px;box-shadow:inset 0 -1px var(--color-border-default)}.AppHeader .AppHeader-logo{border-radius:100%;outline-offset:-2px}.AppHeader .AppHeader-item{flex:0 0 auto;background:#ffb6c1}.AppHeader .AppHeader-item--full{flex-grow:1}.AppHeader .AppHeader-button{display:block;width:32px;height:32px;border:1px solid var(--color-border-default);padding:8px;border-radius:6px;color:var(--color-fg-muted)}.AppHeader .AppHeader-button svg{color:inherit;display:block !important;color:inherit !important}.AppHeader .AppHeader-button:hover{background:var(--color-action-list-item-default-hover-bg)}.AppHeader .AppHeader-button:active{background:var(--color-action-list-item-default-active-bg)}
+/*# sourceMappingURL=app.css.map */

package/dist/app.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["file:///home/runner/work/css/css/src/app/index.scss%23sass"],"names":[],"mappings":"AAkjBE,4BAAA,iBAAA,CAAA,wBAAA,CAAA,0BAAA,CAAA,kBAAA,CAAA,YAAA,CAAA,cAAA,CAAA,8DAAA,eAAA,CAAA,QAAA,CAAA,SAAA,CAAA,+BAAA,YAAA,CAAA,kBAAA,CAAA,OAAA,CAAA,yCAAA,qBAAA,CAAA,4BAAA,yCAAA,oBAAA,CAAA,4CAAA,sBAAA,CAAA,CAAA,6BAAA,eAAA,CAAA,yCAAA,SAAA,CAAA,UAAA,CAAA,aAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,kBAAA,CAAA,sCAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,mCAAA,aAAA,CAAA,UAAA,CAAA,UAAA,CAAA,WAAA,CAAA,aAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,iCAAA,CAAA,iCAAA,CAAA,8CAAA,mCAAA,gDAAA,CAAA,CAAA,mCAAA,GAAA,0BAAA,CAAA,4BAAA,CAAA,IAAA,qBAAA,CAAA,4BAAA,CAAA,IAAA,iCAAA,CAAA,KAAA,mBAAA,CAAA,CAAA,iEAAA,SAAA,CAAA,yBAAA,YAAA,CAAA,qBAAA,CAAA,gBAAA,CAAA,mCAAA,iBAAA,CAAA,gBAAA,CAAA,kBAAA,CAAA,oDAAA,eAAA,CAAA,KAAA,CAAA,SAAA,CAAA,2BAAA,aAAA,CAAA,yBAAA,eAAA,CAAA,aAAA,CAAA,uGAAA,CAAA,8BAAA,KAAA,SAAA,CAAA,2BAAA,CAAA,GAAA,SAAA,CAAA,CAAA,yBAAA,yBAAA,gBAAA,CAAA,mDAAA,CAAA,gCAAA,2EAAA,CAAA,uCAAA,cAAA,CAAA,qBAAA,CAAA,CAAA,+BAAA,YAAA,CAAA,8IAAA,oCAAA,CAAA,yBAAA,QAAA,CAAA,WAAA,CAAA,2BAAA,gDAAA,CAAA,oCAAA,CAAA,YAAA,CAAA,WAAA,uBAAA,CAAA,8BAAA,CAAA,6BAAA,CAAA,gCAAA,YAAA,CAAA,YAAA,CAAA,QAAA,CAAA,gDAAA,aAAA,CAAA,YAAA,CAAA,yGAAA,aAAA,CAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,uDAAA,SAAA,CAAA,WAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,kDAAA,aAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,mDAAA,aAAA,CAAA,WAAA,CAAA,gDAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,WAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,qCAAA,CAAA,oDAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,kBAAA,CAAA,+BAAA,mBAAA,CAAA,mDAAA,CAAA,2BAAA,kBAAA,CAAA,mBAAA,CAAA,2BAAA,aAAA,CAAA,kBAAA,CAAA,iCAAA,WAAA,CAAA,6BAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,4CAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iCAAA,aAAA,CAAA,wBAAA,CAAA,wBAAA,CAAA,mCAAA,yDAAA,CAAA,oCAAA,0DAAA","file":"app.css"}

package/dist/app.js

@@ -0,0 +1 @@
+export {cssstats: require('./stats/app.json')}