@davidsouther/jiffies 2026.4.1 → 2026.24.0

package/src/pico/content/_form-alt.scss

@@ -1,276 +0,0 @@
-// Color
-[type="color"] {
-  // Wrapper
-  @mixin color-wrapper {
-    padding: 0;
-  }
-
-  &::-webkit-color-swatch-wrapper {
-    @include color-wrapper;
-  }
-
-  &::-moz-focus-inner {
-    @include color-wrapper;
-  }
-
-  // Swatch
-  @mixin color-swatch {
-    border: 0;
-    border-radius: calc(var(--border-radius) * 0.5);
-  }
-
-  &::-webkit-color-swatch {
-    @include color-swatch;
-  }
-
-  &::-moz-color-swatch {
-    @include color-swatch;
-  }
-}
-
-// Date & Time
-// :not() are needed to add Specificity and avoid !important on padding
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
-  &[type="date"],
-  &[type="datetime-local"],
-  &[type="month"],
-  &[type="time"],
-  &[type="week"] {
-    --icon-position: 0.75rem;
-    --icon-width: 1rem;
-    padding-right: calc(var(--icon-width) + var(--icon-position));
-    background-image: var(--icon-date);
-    background-position: center right var(--icon-position);
-    background-size: var(--icon-width) auto;
-    background-repeat: no-repeat;
-  }
-
-  // Time
-  &[type="time"] {
-    background-image: var(--icon-time);
-  }
-}
-
-// Calendar picker
-[type="date"],
-[type="datetime-local"],
-[type="month"],
-[type="time"],
-[type="week"] {
-  &::-webkit-calendar-picker-indicator {
-    width: var(--icon-width);
-    margin-right: calc(var(--icon-width) * -1);
-    margin-left: var(--icon-position);
-    opacity: 0;
-  }
-}
-
-[dir="rtl"]
-  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
-  text-align: right;
-}
-
-// File
-[type="file"] {
-  --color: var(--muted-color);
-  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-
-  @mixin file-selector-button {
-    --background-color: var(--secondary);
-    --border-color: var(--secondary);
-    --color: var(--secondary-inverse);
-    margin-right: calc(var(--spacing) / 2);
-    margin-left: 0;
-    margin-inline-start: 0;
-    margin-inline-end: calc(var(--spacing) / 2);
-    padding: calc(var(--form-element-spacing-vertical) * 0.5)
-      calc(var(--form-element-spacing-horizontal) * 0.5);
-    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(:hover, :active, :focus) {
-      --background-color: var(--secondary-hover);
-      --border-color: var(--secondary-hover);
-    }
-  }
-
-  &::file-selector-button {
-    @include file-selector-button;
-  }
-
-  &::-webkit-file-upload-button {
-    @include file-selector-button;
-  }
-
-  &::-ms-browse {
-    @include file-selector-button;
-  }
-}
-
-// Range
-[type="range"] {
-  // Config
-  $height-track: 0.25rem;
-  $height-thumb: 1.25rem;
-  $border-thumb: 2px;
-
-  // Styles
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: $height-thumb;
-  background: none;
-
-  // Slider Track
-  @mixin slider-track {
-    width: 100%;
-    height: $height-track;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
-
-    @if $enable-transitions {
-      transition: background-color var(--transition),
-        box-shadow var(--transition);
-    }
-  }
-
-  &::-webkit-slider-runnable-track {
-    @include slider-track;
-  }
-
-  &::-moz-range-track {
-    @include slider-track;
-  }
-
-  &::-ms-track {
-    @include slider-track;
-  }
-
-  // Slider Thumb
-  @mixin slider-thumb {
-    -webkit-appearance: none;
-    width: $height-thumb;
-    height: $height-thumb;
-    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
-    border: $border-thumb solid var(--range-thumb-border-color);
-    border-radius: 50%;
-    background-color: var(--range-thumb-color);
-    cursor: pointer;
-
-    @if $enable-transitions {
-      transition: background-color var(--transition),
-        transform var(--transition);
-    }
-  }
-  &::-webkit-slider-thumb {
-    @include slider-thumb;
-  }
-
-  &::-moz-range-thumb {
-    @include slider-thumb;
-  }
-
-  &::-ms-thumb {
-    @include slider-thumb;
-  }
-
-  &:hover,
-  &:focus {
-    --range-border-color: var(--range-active-border-color);
-    --range-thumb-color: var(--range-thumb-hover-color);
-  }
-
-  &:active {
-    --range-thumb-color: var(--range-thumb-active-color);
-
-    // Slider Thumb
-    &::-webkit-slider-thumb {
-      transform: scale(1.25);
-    }
-
-    &::-moz-range-thumb {
-      transform: scale(1.25);
-    }
-
-    &::-ms-thumb {
-      transform: scale(1.25);
-    }
-  }
-}
-
-// Search
-// :not() are needed to add Specificity and avoid !important on padding
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
-  &[type="search"] {
-    padding-inline-start: calc(
-      var(--form-element-spacing-horizontal) + 1.75rem
-    );
-    border-radius: 5rem;
-    background-image: var(--icon-search);
-    background-position: center left 1.125rem;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-
-    &[aria-invalid] {
-      @if $enable-important {
-        padding-inline-start: calc(
-          var(--form-element-spacing-horizontal) + 1.75rem
-        ) !important;
-      } @else {
-        padding-inline-start: calc(
-          var(--form-element-spacing-horizontal) + 1.75rem
-        );
-      }
-      background-position: center left 1.125rem, center right 0.75rem;
-    }
-
-    &[aria-invalid="false"] {
-      background-image: var(--icon-search), var(--icon-valid);
-    }
-
-    &[aria-invalid="true"] {
-      background-image: var(--icon-search), var(--icon-invalid);
-    }
-  }
-}
-
-// Cancel button
-[type="search"] {
-  &::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-}
-
-[dir="rtl"] {
-  :where(input) {
-    &:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
-      &[type="search"] {
-        background-position: center right 1.125rem;
-
-        &[aria-invalid] {
-          background-position: center right 1.125rem, center left 0.75rem;
-        }
-      }
-    }
-  }
-}

package/src/pico/content/_form.scss

@@ -1,259 +0,0 @@
-// Force height for alternatives input types
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
-  height: calc(
-    (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
-      (var(--border-width) * 2)
-  );
-}
-
-// Fieldset
-fieldset {
-  margin: 0;
-  margin-bottom: var(--spacing);
-  padding: 0;
-  border: 0;
-}
-
-// Label & legend
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: calc(var(--spacing) * 0.25);
-  font-weight: var(--form-label-font-weight, var(--font-weight));
-}
-
-// Blocks, 100%
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  width: 100%;
-}
-
-// Reset appearance (Not Checkboxes, Radios, Range and File)
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-select,
-textarea {
-  appearance: none;
-  padding: var(--form-element-spacing-vertical)
-    var(--form-element-spacing-horizontal);
-  vertical-align: middle;
-}
-
-// Commons styles
-input,
-select,
-textarea {
-  --background-color: var(--form-element-background-color);
-  --border-color: var(--form-element-border-color);
-  --color: var(--form-element-color);
-  --box-shadow: none;
-  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);
-
-  @if $enable-transitions {
-    transition: background-color var(--transition),
-      border-color var(--transition), color var(--transition),
-      box-shadow var(--transition);
-  }
-}
-
-// Active & Focus
-input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
-:where(select, textarea) {
-  &:is(:active, :focus) {
-    --background-color: var(--form-element-active-background-color);
-  }
-}
-
-// Active & Focus
-input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
-:where(select, textarea) {
-  &:is(:active, :focus) {
-    --border-color: var(--form-element-active-border-color);
-  }
-}
-
-// Focus
-input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
-select,
-textarea {
-  &:focus {
-    --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
-  }
-}
-
-// Disabled
-input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
-select[disabled],
-textarea[disabled],
-:where(fieldset[disabled])
-  :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
-  --background-color: var(--form-element-disabled-background-color);
-  --border-color: var(--form-element-disabled-border-color);
-  opacity: var(--form-element-disabled-opacity);
-  pointer-events: none;
-}
-
-// Aria-invalid
-:where(input, select, textarea) {
-  &:not([type="checkbox"]):not([type="radio"]) {
-    &[aria-invalid] {
-      @if $enable-important {
-        padding-right: calc(
-          var(--form-element-spacing-horizontal) + 1.5rem
-        ) !important;
-        padding-left: var(--form-element-spacing-horizontal);
-        padding-inline-start: var(--form-element-spacing-horizontal) !important;
-        padding-inline-end: calc(
-          var(--form-element-spacing-horizontal) + 1.5rem
-        ) !important;
-      } @else {
-        padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-        padding-left: var(--form-element-spacing-horizontal);
-        padding-inline-start: var(--form-element-spacing-horizontal);
-        padding-inline-end: calc(
-          var(--form-element-spacing-horizontal) + 1.5rem
-        );
-      }
-      background-position: center right 0.75rem;
-      background-size: 1rem auto;
-      background-repeat: no-repeat;
-    }
-
-    &[aria-invalid="false"] {
-      background-image: var(--icon-valid);
-    }
-
-    &[aria-invalid="true"] {
-      background-image: var(--icon-invalid);
-    }
-  }
-
-  &[aria-invalid="false"] {
-    --border-color: var(--form-element-valid-border-color);
-
-    &:is(:active, :focus) {
-      @if $enable-important {
-        --border-color: var(
-          --form-element-valid-active-border-color
-        ) !important;
-        --box-shadow: 0
-          0
-          0
-          var(--outline-width)
-          var(--form-element-valid-focus-color) !important;
-      } @else {
-        --border-color: var(--form-element-valid-active-border-color);
-        --box-shadow: 0
-          0
-          0
-          var(--outline-width)
-          var(--form-element-valid-focus-color);
-      }
-    }
-  }
-
-  &[aria-invalid="true"] {
-    --border-color: var(--form-element-invalid-border-color);
-
-    &:is(:active, :focus) {
-      @if $enable-important {
-        --border-color: var(
-          --form-element-invalid-active-border-color
-        ) !important;
-        --box-shadow: 0
-          0
-          0
-          var(--outline-width)
-          var(--form-element-invalid-focus-color) !important;
-      } @else {
-        --border-color: var(--form-element-invalid-active-border-color);
-        --box-shadow: 0
-          0
-          0
-          var(--outline-width)
-          var(--form-element-invalid-focus-color);
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  :where(input, select, textarea) {
-    &:not([type="checkbox"]):not([type="radio"]) {
-      &[aria-invalid],
-      &[aria-invalid="true"],
-      &[aria-invalid="false"] {
-        background-position: center left 0.75rem;
-      }
-    }
-  }
-}
-
-// Placeholder
-input::placeholder,
-input::-webkit-input-placeholder,
-textarea::placeholder,
-textarea::-webkit-input-placeholder,
-select:invalid {
-  color: var(--form-element-placeholder-color);
-  opacity: 1;
-}
-
-// Margin bottom (Not Checkboxes and Radios)
-input:not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
-  margin-bottom: var(--spacing);
-}
-
-// Select
-select {
-  // Unstyle the caret on `<select>`s in IE10+.
-  &::-ms-expand {
-    border: 0;
-    background-color: transparent;
-  }
-
-  &:not([multiple]):not([size]) {
-    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    padding-left: var(--form-element-spacing-horizontal);
-    padding-inline-start: var(--form-element-spacing-horizontal);
-    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    background-image: var(--icon-chevron);
-    background-position: center right 0.75rem;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-  }
-}
-
-[dir="rtl"] {
-  select {
-    &:not([multiple]):not([size]) {
-      background-position: center left 0.75rem;
-    }
-  }
-}
-
-// Helper
-:where(input, select, textarea) {
-  + small {
-    display: block;
-    width: 100%;
-    margin-top: calc(var(--spacing) * -0.75);
-    margin-bottom: var(--spacing);
-    color: var(--muted-color);
-  }
-}
-
-// Styles for Input inside a label
-label {
-  > :where(input, select, textarea) {
-    margin-top: calc(var(--spacing) * 0.25);
-  }
-}

package/src/pico/content/_table.scss

@@ -1,28 +0,0 @@
-th,
-td {
-  padding: calc(var(--spacing) / 2) var(--spacing);
-  border-bottom: var(--border-width) solid var(--table-border-color);
-  color: var(--color);
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  text-align: left;
-  text-align: start;
-}
-
-// Footer
-tfoot {
-  th,
-  td {
-    border-top: var(--border-width) solid var(--table-border-color);
-    border-bottom: 0;
-  }
-}
-
-// Striped
-table {
-  &[role="grid"] {
-    tbody tr:nth-child(odd) {
-      background-color: var(--table-row-stripped-background-color);
-    }
-  }
-}

package/src/pico/content/_toggle.scss

@@ -1,132 +0,0 @@
-[type="checkbox"],
-[type="radio"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 1.25em;
-  height: 1.25em;
-  margin-top: -0.125em;
-  margin-right: 0.375em;
-  margin-left: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0.375em;
-  border-width: var(--border-width);
-  font-size: inherit;
-  vertical-align: middle;
-  cursor: pointer;
-
-  &::-ms-check {
-    display: none; // unstyle IE checkboxes
-  }
-
-  &:checked,
-  &:checked:active,
-  &:checked:focus {
-    --background-color: var(--primary);
-    --border-color: var(--primary);
-    background-image: var(--icon-checkbox);
-    background-position: center;
-    background-size: 0.75em auto;
-    background-repeat: no-repeat;
-  }
-
-  & ~ label {
-    display: inline-block;
-    margin-right: 0.375em;
-    margin-bottom: 0;
-    cursor: pointer;
-  }
-}
-
-// Checkboxes
-[type="checkbox"] {
-  &:indeterminate {
-    --background-color: var(--primary);
-    --border-color: var(--primary);
-    background-image: var(--icon-minus);
-    background-position: center;
-    background-size: 0.75em auto;
-    background-repeat: no-repeat;
-  }
-}
-
-// Radios
-[type="radio"] {
-  border-radius: 50%;
-
-  &:checked,
-  &:checked:active,
-  &:checked:focus {
-    --background-color: var(--primary-inverse);
-    border-width: 0.35em;
-    background-image: none;
-  }
-}
-
-// Switchs
-[type="checkbox"][role="switch"] {
-  --background-color: var(--switch-background-color);
-  --border-color: var(--switch-background-color);
-  --color: var(--switch-color);
-
-  // Config
-  $switch-height: 1.25em;
-  $switch-width: 2.25em;
-  $switch-transition: 0.1s ease-in-out;
-
-  // Styles
-  width: $switch-width;
-  height: $switch-height;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: $switch-height;
-  background-color: var(--background-color);
-  line-height: $switch-height;
-
-  &:focus {
-    --background-color: var(--switch-background-color);
-    --border-color: var(--switch-background-color);
-  }
-
-  &:checked {
-    --background-color: var(--switch-checked-background-color);
-    --border-color: var(--switch-checked-background-color);
-  }
-
-  &:before {
-    display: block;
-    width: calc(#{$switch-height} - (var(--border-width) * 2));
-    height: 100%;
-    border-radius: 50%;
-    background-color: var(--color);
-    content: "";
-
-    @if $enable-transitions {
-      transition: margin $switch-transition;
-    }
-  }
-
-  &:checked {
-    background-image: none;
-
-    &::before {
-      margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
-      margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
-    }
-  }
-}
-
-// Aria-invalid
-[type="checkbox"],
-[type="checkbox"]:checked,
-[type="radio"],
-[type="radio"]:checked,
-[type="checkbox"][role="switch"],
-[type="checkbox"][role="switch"]:checked {
-  &[aria-invalid="false"] {
-    --border-color: var(--form-element-valid-border-color);
-  }
-
-  &[aria-invalid="true"] {
-    --border-color: var(--form-element-invalid-border-color);
-  }
-}