@davidsouther/jiffies 2026.4.1 → 2026.24.0

package/src/pico/components/_modal.scss

@@ -1,181 +0,0 @@
-:root {
-  --scrollbar-width: 0px;
-}
-
-dialog {
-  display: flex;
-  z-index: 999;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: inherit;
-  min-width: 100%;
-  height: inherit;
-  min-height: 100%;
-  padding: var(--spacing);
-  border: 0;
-  background-color: var(--modal-overlay-background-color);
-
-  // Content
-  article {
-    max-height: calc(100vh - var(--spacing) * 2);
-    width: calc(100vw - var(--spacing) * 2);
-    overflow: auto;
-
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        width: map-get($viewports, "sm");
-      }
-    }
-
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        width: map-get($viewports, "md");
-      }
-    }
-
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        width: map-get($viewports, "lg");
-      }
-    }
-
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        width: map-get($viewports, "xl");
-      }
-    }
-
-    > header,
-    > footer {
-      padding: calc(var(--block-spacing-vertical) * 0.5)
-        var(--block-spacing-horizontal);
-    }
-
-    > header {
-      .close {
-        margin: 0;
-        margin-left: var(--spacing);
-        float: right;
-      }
-    }
-
-    > footer {
-      text-align: right;
-
-      [role="button"] {
-        margin-bottom: 0;
-
-        &:not(:first-of-type) {
-          margin-left: calc(var(--spacing) * 0.5);
-        }
-      }
-    }
-
-    p {
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-
-    // Close icon
-    @if $enable-classes {
-      .close {
-        display: block;
-        width: 1rem;
-        height: 1rem;
-        margin-top: calc(var(--block-spacing-vertical) * -0.5);
-        margin-bottom: var(--typography-spacing-vertical);
-        margin-left: auto;
-        background-image: var(--icon-close);
-        background-position: center;
-        background-size: auto 1rem;
-        background-repeat: no-repeat;
-        opacity: 0.5;
-
-        @if $enable-transitions {
-          transition: opacity var(--transition);
-        }
-
-        &:is([aria-current], :hover, :active, :focus) {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  // Closed state
-  &:not([open]),
-  &[open="false"] {
-    display: none;
-  }
-}
-
-// Utilities
-@if $enable-classes {
-  .modal-is-open {
-    padding-right: var(--scrollbar-width, 0px);
-    overflow: hidden;
-    pointer-events: none;
-
-    dialog {
-      pointer-events: auto;
-    }
-  }
-}
-
-// Animations
-@if ($enable-classes and $enable-transitions) {
-  $animation-duration: 0.2s;
-
-  :where(.modal-is-opening, .modal-is-closing) {
-    dialog,
-    dialog > article {
-      animation-duration: $animation-duration;
-      animation-timing-function: ease-in-out;
-      animation-fill-mode: both;
-    }
-
-    dialog {
-      animation-duration: ($animation-duration * 4);
-      animation-name: fadeIn;
-
-      > article {
-        animation-delay: $animation-duration;
-        animation-name: slideInDown;
-      }
-    }
-  }
-
-  .modal-is-closing {
-    dialog,
-    dialog > article {
-      animation-delay: 0s;
-      animation-direction: reverse;
-    }
-  }
-
-  @keyframes fadeIn {
-    from {
-      background-color: transparent;
-    }
-    to {
-      background-color: var(--modal-overlay-background-color);
-    }
-  }
-
-  @keyframes slideInDown {
-    from {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}

package/src/pico/components/_nav.scss

@@ -1,79 +0,0 @@
-nav,
-nav ul {
-  display: flex;
-}
-
-nav {
-  justify-content: space-between;
-
-  ol,
-  ul {
-    align-items: center;
-    margin-bottom: 0;
-    padding: 0;
-    list-style: none;
-
-    &:first-of-type {
-      margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
-    }
-    &:last-of-type {
-      margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
-    }
-  }
-
-  li {
-    display: inline-block;
-    margin: 0;
-    padding: var(--nav-element-spacing-vertical)
-      var(--nav-element-spacing-horizontal);
-
-    // Minimal support for buttons and forms elements
-    > * {
-      --spacing: 0;
-    }
-  }
-
-  :where(a, [role="link"]) {
-    display: inline-block;
-    margin: calc(var(--nav-link-spacing-vertical) * -1)
-      calc(var(--nav-link-spacing-horizontal) * -1);
-    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-    border-radius: var(--border-radius);
-    text-decoration: none;
-
-    &:is([aria-current], :hover, :active, :focus) {
-      text-decoration: none;
-    }
-  }
-
-  // Minimal support for role="button"
-  [role="button"] {
-    margin-right: inherit;
-    margin-left: inherit;
-    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-  }
-}
-
-// Vertical Nav
-aside {
-  nav,
-  ol,
-  ul,
-  li {
-    display: block;
-  }
-
-  li {
-    padding: calc(var(--nav-element-spacing-vertical) * 0.5)
-      var(--nav-element-spacing-horizontal);
-
-    a {
-      display: block;
-    }
-
-    // Minimal support for links as buttons
-    [role="button"] {
-      margin: inherit;
-    }
-  }
-}

package/src/pico/components/_progress.scss

@@ -1,70 +0,0 @@
-progress {
-  // Reset the default appearance
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  // Styles
-  display: inline-block;
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  margin-bottom: calc(var(--spacing) * 0.5);
-  overflow: hidden;
-
-  // Remove Firefox and Opera border
-  border: 0;
-  border-radius: var(--border-radius);
-  background-color: var(--progress-background-color);
-
-  // IE10 uses `color` to set the bar background-color
-  color: var(--progress-color);
-
-  &::-webkit-progress-bar {
-    border-radius: var(--border-radius);
-    background: none;
-  }
-  &[value]::-webkit-progress-value {
-    background-color: var(--progress-color);
-  }
-  &::-moz-progress-bar {
-    background-color: var(--progress-color);
-  }
-
-  // Indeterminate state
-  @media (prefers-reduced-motion: no-preference) {
-    &:indeterminate {
-      background: var(--progress-background-color)
-        linear-gradient(
-          to right,
-          var(--progress-color) 30%,
-          var(--progress-background-color) 30%
-        )
-        top left / 150% 150% no-repeat;
-      animation: progressIndeterminate 1s linear infinite;
-
-      &[value]::-webkit-progress-value {
-        background-color: transparent;
-      }
-      &::-moz-progress-bar {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  @media (prefers-reduced-motion: no-preference) {
-    progress:indeterminate {
-      animation-direction: reverse;
-    }
-  }
-}
-
-@keyframes progressIndeterminate {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}

package/src/pico/components/_property.scss

@@ -1,34 +0,0 @@
-dl {
-  display: grid;
-  grid-template-columns: minmax(max-content, 1fr) minmax(auto, 2fr);
-}
-
-dt {
-  grid-column-start: 1;
-}
-
-dd {
-  grid-column-start: 2;
-  margin: 0;
-}
-
-dl > header {
-  grid-column: 1 / span 2;
-  font-weight: bold;
-  background-color: var(--muted-color);
-  color: var(--primary-inverse);
-  padding: var(--form-element-spacing-vertical)
-    var(--form-element-spacing-horizontal);
-}
-
-dd,
-dt {
-  padding: var(--form-element-spacing-vertical)
-    var(--form-element-spacing-horizontal);
-  border: 1px solid var(--muted-border-color);
-}
-
-dd:nth-of-type(even),
-dt:nth-of-type(even) {
-  background-color: var(--table-row-stripped-background-color);
-}

package/src/pico/content/_button.scss

@@ -1,152 +0,0 @@
-button {
-  display: block;
-  width: 100%;
-  margin-bottom: var(--spacing);
-}
-
-[role="button"] {
-  display: inline-block;
-  text-decoration: none;
-}
-
-button,
-input[type="submit"],
-input[type="button"],
-input[type="reset"],
-[role="button"] {
-  --background-color: var(--primary);
-  --border-color: var(--primary);
-  --color: var(--primary-inverse);
-  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  padding: var(--form-element-spacing-vertical)
-    var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-  outline: none;
-  background-color: var(--background-color);
-  box-shadow: var(--box-shadow);
-  color: var(--color);
-  font-weight: var(--font-weight);
-  font-size: 1rem;
-  line-height: var(--line-height);
-  text-align: center;
-  cursor: pointer;
-
-  @if $enable-transitions {
-    transition: background-color var(--transition),
-      border-color var(--transition), color var(--transition),
-      box-shadow var(--transition);
-  }
-
-  &:is([aria-current], :hover, :active, :focus) {
-    --background-color: var(--primary-hover);
-    --border-color: var(--primary-hover);
-    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
-    --color: var(--primary-inverse);
-  }
-
-  &:focus {
-    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-      0 0 0 var(--outline-width) var(--primary-focus);
-  }
-}
-
-// .secondary, .contrast & .outline
-@if $enable-classes {
-  // Secondary
-  :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
-  input[type="reset"] {
-    --background-color: var(--secondary);
-    --border-color: var(--secondary);
-    --color: var(--secondary-inverse);
-    cursor: pointer;
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --background-color: var(--secondary-hover);
-      --border-color: var(--secondary-hover);
-      --color: var(--secondary-inverse);
-    }
-
-    &:focus {
-      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-        0 0 0 var(--outline-width) var(--secondary-focus);
-    }
-  }
-
-  // Contrast
-  :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
-    --background-color: var(--contrast);
-    --border-color: var(--contrast);
-    --color: var(--contrast-inverse);
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --background-color: var(--contrast-hover);
-      --border-color: var(--contrast-hover);
-      --color: var(--contrast-inverse);
-    }
-
-    &:focus {
-      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-        0 0 0 var(--outline-width) var(--contrast-focus);
-    }
-  }
-
-  // Outline (primary)
-  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
-  input[type="reset"].outline {
-    --background-color: transparent;
-    --color: var(--primary);
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --background-color: transparent;
-      --color: var(--primary-hover);
-    }
-  }
-
-  // Outline (secondary)
-  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
-  input[type="reset"].outline {
-    --color: var(--secondary);
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --color: var(--secondary-hover);
-    }
-  }
-
-  // Outline (contrast)
-  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
-    --color: var(--contrast);
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --color: var(--contrast-hover);
-    }
-  }
-} @else {
-  // Secondary button without .class
-  input[type="reset"] {
-    --background-color: var(--secondary);
-    --border-color: var(--secondary);
-    --color: var(--secondary-inverse);
-    cursor: pointer;
-
-    &:is([aria-current], :hover, :active, :focus) {
-      --background-color: var(--secondary-hover);
-      --border-color: var(--secondary-hover);
-    }
-
-    &:focus {
-      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-        0 0 0 var(--outline-width) var(--secondary-focus);
-    }
-  }
-}
-
-// Button [disabled]
-// Links without href are disabled by default
-:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
-:where(fieldset[disabled])
-  :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
-a[role="button"]:not([href]) {
-  opacity: 0.5;
-  pointer-events: none;
-}

package/src/pico/content/_code.scss

@@ -1,63 +0,0 @@
-pre,
-code,
-kbd {
-  border-radius: var(--border-radius);
-  background: var(--code-background-color);
-  color: var(--code-color);
-  font-weight: var(--font-weight);
-  line-height: initial;
-}
-
-code,
-kbd {
-  display: inline-block;
-  padding: 0.375rem 0.5rem;
-}
-
-pre {
-  display: block;
-  margin-bottom: var(--spacing);
-  overflow-x: auto;
-
-  > code {
-    display: block;
-    padding: var(--spacing);
-    background: none;
-    font-size: 14px;
-    line-height: var(--line-height);
-  }
-}
-
-// Code Syntax
-code {
-  // Tags
-  b {
-    color: var(--code-tag-color);
-    font-weight: var(--font-weight);
-  }
-
-  // Properties
-  i {
-    color: var(--code-property-color);
-    font-style: normal;
-  }
-
-  // Values
-  u {
-    color: var(--code-value-color);
-    text-decoration: none;
-  }
-
-  // Comments
-  em {
-    color: var(--code-comment-color);
-    font-style: normal;
-  }
-}
-
-// kbd
-kbd {
-  background-color: var(--code-kbd-background-color);
-  color: var(--code-kbd-color);
-  vertical-align: baseline;
-}