katalyst-koi 4.18.1 → 5.0.0.alpha.1

data/app/assets/stylesheets/koi/{base/_tables.scss → blocks/tables/table.css}

@@ -1,62 +1,13 @@
-@use "katalyst/tables";
-@use "button";
+.katalyst-table {
+  --tag-color: var(--color-primary);
+  --on-tag-color: white;
 
-/* Table default styles */
-
-table {
-  border: none;
-  border-collapse: collapse;
-}
-
-thead {
-  border-top: 1px solid var(--site-text-color);
-  border-bottom: 1px solid var(--site-text-color);
-}
-
-th {
-  text-align: left;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-tbody tr {
-  box-shadow: inset 0 -1px 0 #ddd;
-}
-
-td,
-th {
-  vertical-align: top;
-  padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
-
-  &:has(> a[href]:only-child) {
-    padding: 0;
-
-    a[href] {
-      display: block;
-      padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem);
-    }
-  }
-}
-
-thead th {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-caption {
-  caption-side: bottom;
-  margin-block-start: var(--space-s);
-}
-
-/* Katalyst tables overrides */
-
-.katalyst--table {
-  :where(th[data-cell-type="selection"], td[data-cell-type="selection"]) {
-    width: 2rem;
+  td.type-enum small {
+    color: var(--on-tag-color);
+    font-size: small;
   }
 
-  [data-cell-type="selection"] {
+  .selection:has(input[type="checkbox"]) {
     position: relative;
     padding: 0;
 
@@ -142,10 +93,11 @@ caption {
   p {
     margin-bottom: 0.5rem;
   }
+}
 
-  button {
-    @extend %button-base;
-  }
+.table-container {
+  overflow-x: auto;
+  max-width: 100%;
 }
 
 .katalyst--tables--query {

data/app/assets/stylesheets/koi/compositions/cover.css

@@ -0,0 +1,17 @@
+/*
+ * Based on cover composition: https://every-layout.dev/layouts/cover/
+ */
+.cover {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100vh;
+  padding: 1rem;
+}
+
+.cover > * {
+  margin-block: auto;
+}
+
+.cover[data-centered] {
+  align-items: center;
+}

data/app/assets/stylesheets/koi/{base/_flow.scss → compositions/flow.css}

@@ -4,5 +4,5 @@ Like the Every Layout stack: https://every-layout.dev/layouts/stack/
 Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
 */
 .flow > * + * {
-  margin-top: var(--flow-space, 1em);
+  margin-top: var(--flow-space, var(--space-s));
 }

data/app/assets/stylesheets/koi/compositions/index.css

@@ -0,0 +1,4 @@
+@import url("cover.css");
+@import url("flow.css");
+@import url("repel.css");
+@import url("wrapper.css");

data/app/assets/stylesheets/koi/compositions/wrapper.css

@@ -0,0 +1,11 @@
+/*
+WRAPPER COMPOSITION
+A common wrapper/container
+*/
+.wrapper {
+  margin-inline: auto;
+  max-width: var(--wrapper-max-width, 1360px);
+  padding-left: var(--gutter);
+  padding-right: var(--gutter);
+  position: relative;
+}

data/app/assets/stylesheets/koi/forms/caption.css

@@ -0,0 +1,22 @@
+.govuk-caption-xl,
+.govuk-caption-l,
+.govuk-caption-m {
+  color: var(--govuk-hint-color);
+  display: block;
+  font-weight: var(--font-regular);
+  line-height: var(--leading-fine);
+}
+
+.govuk-caption-xl {
+  font-size: var(--size-step-2);
+  margin-bottom: var(--space-3xs);
+}
+
+.govuk-caption-l {
+  font-size: var(--size-step-1);
+  margin-bottom: var(--space-3xs);
+}
+
+.govuk-caption-m {
+  font-size: var(--size-step-0);
+}

data/app/assets/stylesheets/koi/forms/checkboxes.css

@@ -0,0 +1,153 @@
+.govuk-checkboxes--small {
+  --input-size: var(--small-input-size);
+}
+
+.govuk-checkboxes__item {
+  display: grid;
+  grid-template-areas: "input label" "input hint";
+  grid-template-columns: var(--input-size) 1fr;
+  grid-column-gap: var(--space-xs);
+  align-items: baseline;
+}
+
+.govuk-checkboxes__input {
+  cursor: pointer;
+  grid-area: input;
+  height: var(--input-size);
+  margin-block-start: calc(-0.5 * var(--input-size));
+  margin: 0;
+  opacity: 0;
+  translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
+  width: var(--input-size);
+  z-index: 1;
+}
+
+.govuk-checkboxes__item::before {
+  content: "";
+  aspect-ratio: 1;
+  background: transparent;
+  border-radius: var(--radius-s);
+  border: var(--stroke-input);
+  display: inline-block;
+  grid-area: input;
+  margin-block-start: calc(-0.5 * var(--input-size));
+  translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
+}
+
+.govuk-checkboxes__item::after {
+  content: "";
+  aspect-ratio: 1;
+  background: currentcolor;
+  border: calc(0.25 * var(--input-size)) solid currentcolor;
+  display: inline-block;
+  grid-area: input;
+  margin-block-start: calc(-0.5 * var(--input-size));
+  margin-inline: calc(0.25 * var(--input-size));
+  opacity: 0;
+  translate: 0 var(--stroke-input-width);
+}
+
+.govuk-checkboxes__label {
+  grid-area: label;
+  padding-block: calc(
+    var(--input-size) * 0.5 + var(--stroke-input-width) - 0.5em
+  );
+  cursor: pointer;
+  touch-action: manipulation;
+  margin-block-end: 0;
+  min-height: var(--input-size);
+}
+
+.govuk-checkboxes__hint {
+  grid-area: hint;
+}
+
+.govuk-checkboxes__label:has(+ .govuk-checkboxes__hint) {
+  padding-block-end: 0;
+}
+
+.govuk-checkboxes__item:has(.govuk-checkboxes__input:focus)::before {
+  border-width: calc(var(--stroke-input-width) + 1px);
+  outline: var(--focus-outline);
+  outline-offset: 0;
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .govuk-checkboxes__item:has(.govuk-checkboxes__input:focus)::before {
+    outline-color: Highlight;
+  }
+}
+
+.govuk-checkboxes__item:has(.govuk-checkboxes__input:checked)::after {
+  opacity: 1;
+}
+
+.govuk-checkboxes__input:disabled,
+.govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+  cursor: not-allowed;
+}
+
+.govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
+.govuk-checkboxes__input:disabled ~ .govuk-hint {
+  opacity: 0.5;
+}
+
+.govuk-checkboxes__divider {
+  width: var(--input-size);
+  text-align: center;
+}
+
+.govuk-checkboxes__conditional {
+  margin-bottom: var(--space-s);
+  margin-left: calc(var(--input-size) * 0.5 - var(--stroke-input-width) * 0.5);
+  padding-left: calc(
+    var(--input-size) * 0.5 - var(--stroke-input-width) * 0.5 + var(--space-xs)
+  );
+  border-left: calc(2 * var(--stroke-input-width)) solid var(--color-mid);
+
+  > :not([type="hidden"]) + * {
+    margin-top: var(--flow-space, var(--space-xs));
+  }
+}
+
+.govuk-frontend-supported .govuk-checkboxes__conditional--hidden {
+  display: none;
+}
+
+.govuk-checkboxes--small {
+  .govuk-checkboxes__item:hover:has(
+      .govuk-checkboxes__input:not(:disabled)
+    )::before {
+    outline: var(--focus-width) 1px dashed transparent;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 var(--space-3xs) var(--color-mid);
+  }
+
+  .govuk-checkboxes__item:hover:has(.govuk-checkboxes__input:focus)::before {
+    box-shadow:
+      0 0 0 var(--focus-width) var(--focus-color),
+      0 0 0 var(--space-3xs) var(--color-mid);
+  }
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .govuk-checkboxes--small {
+    .govuk-checkboxes__item:hover:has(.govuk-checkboxes__input:focus)::before {
+      outline-color: Highlight;
+    }
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .govuk-checkboxes--small {
+    .govuk-checkboxes__item:hover:has(
+        .govuk-checkboxes__input:not(:disabled)
+      )::before {
+      box-shadow: initial;
+    }
+
+    .govuk-checkboxes__item:hover:has(.govuk-checkboxes__input:focus)::before {
+      box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
+    }
+  }
+}

data/app/assets/stylesheets/koi/forms/date-input.css

@@ -0,0 +1,12 @@
+.govuk-date-input {
+  display: flex;
+  gap: var(--space-s);
+}
+
+.govuk-date-input__label {
+  display: block;
+}
+
+.govuk-date-input__input {
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/koi/{components/_document-field.scss → forms/document-field.css}

@@ -7,7 +7,7 @@
     "preview"
     "file"
     "supplemental";
-  grid-template-columns: minmax(auto, var(--text-width));
+  grid-template-columns: auto;
   grid-auto-rows: auto;
 
   label {
@@ -24,27 +24,32 @@
 
   input {
     grid-area: file;
-  }
 
-  .govuk-file-upload {
-    margin-left: 0;
-    padding: 3px;
-    max-width: var(--text-width);
+    &::file-selector-button {
+      color: var(--color-dark);
+      background: var(--color-tint);
+      border: var(--stroke-input);
+      border-radius: var(--input-radius);
+    }
   }
 
   .preview-file {
     grid-area: preview;
     position: relative;
     overflow: visible;
-    background-color: #f4f4f4;
-    border: 2px solid black;
-    margin-bottom: 0.5rem;
-    padding: 5px;
-    line-height: 1.5;
+    background-color: var(--color-tint);
+    border: var(--stroke-input);
+    border-radius: var(--input-radius);
+    margin-bottom: var(--space-2xs);
+    padding: var(--space-3xs);
+    line-height: var(--leading-standard);
     align-items: start;
-    display: inline-flex;
     margin-right: auto;
 
+    &:not([hidden]) {
+      display: inline-flex;
+    }
+
     .preview-filename {
       line-height: unset;
     }
@@ -71,9 +76,9 @@
 
   > div:last-child {
     grid-area: supplemental;
-  }
 
-  .govuk-form-group {
-    margin-top: 30px;
+    > * + * {
+      margin-top: var(--flow-space, var(--space-2xs));
+    }
   }
 }

data/app/assets/stylesheets/koi/forms/errors.css

@@ -0,0 +1,38 @@
+:root {
+  --govuk-error-bar-padding: var(--space-xs);
+  --govuk-error-stroke-width: var(--space-3xs);
+  --govuk-error-stroke: var(--govuk-error-stroke-width) solid
+    var(--govuk-error-color);
+}
+
+.govuk-error-message {
+  font-weight: var(--font-bold);
+  font-size: var(--size-step-0);
+  line-height: var(--leading-fine);
+  margin-block-end: var(--space-xs);
+  color: var(--govuk-error-color);
+}
+
+/* error indicator as a bar next to group (excludes nested) */
+.govuk-form-group--error:not(.govuk-form-group &) {
+  margin-left: calc(-1 * (var(--space-xs) + var(--govuk-error-stroke-width)));
+  border-left: var(--govuk-error-stroke);
+  padding-left: var(--space-xs);
+}
+
+.govuk-error-summary {
+  padding: var(--space-s);
+  border: var(--govuk-error-stroke);
+}
+
+.govuk-error-summary:focus {
+  outline: var(--focus-outline);
+}
+
+.govuk-error-summary__title {
+  font-size: var(--size-step-1);
+  line-height: var(--leading-fine);
+  font-weight: var(--font-bold);
+  margin-top: 0;
+  margin-bottom: var(--space-s);
+}

data/app/assets/stylesheets/koi/forms/fieldset.css

@@ -0,0 +1,73 @@
+fieldset {
+  border: var(--stroke);
+  padding: var(--space-s);
+}
+
+legend {
+  font-weight: var(--font-medium);
+  padding-inline: var(--space-xs);
+}
+
+.govuk-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  > * + * {
+    margin-top: var(--flow-space, var(--space-2xs));
+  }
+
+  /* remove space created by hidden inputs */
+  &:has(> [type="hidden"]:first-child) {
+    margin-top: calc(-1 * var(--flow-space, var(--space-2xs)));
+  }
+}
+
+.govuk-fieldset__legend {
+  font-weight: var(--font-regular);
+  font-size: var(--size-step-0);
+  line-height: var(--leading-fine);
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+
+  & + * {
+    --flow-space: var(--space-2xs);
+  }
+}
+
+.govuk-fieldset__legend--xl,
+.govuk-fieldset__legend--l,
+.govuk-fieldset__legend--m {
+  font-weight: var(--font-bold);
+
+  & + * {
+    --flow-space: var(--space-xs);
+  }
+}
+
+.govuk-fieldset__legend--xl {
+  font-size: var(--size-step-4);
+  line-height: var(--leading-fine);
+}
+
+.govuk-fieldset__legend--l {
+  font-size: var(--size-step-3);
+  line-height: var(--leading-fine);
+}
+
+.govuk-fieldset__legend--m {
+  font-size: var(--size-step-1);
+  line-height: var(--leading-fine);
+}
+
+.govuk-fieldset__legend--s {
+  font-weight: var(--font-bold);
+}
+
+.govuk-fieldset__heading {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}

data/app/assets/stylesheets/koi/forms/file-upload.css

@@ -0,0 +1,20 @@
+.govuk-file-upload {
+  max-width: 100%;
+}
+
+.govuk-file-upload::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  color: inherit;
+  font: inherit;
+}
+
+.govuk-file-upload:focus,
+.govuk-file-upload:focus-within {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-shadow);
+}
+
+.govuk-file-upload:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

data/app/assets/stylesheets/koi/forms/form-group.css

@@ -0,0 +1,19 @@
+/* flow for form elements (mostly groups and fieldsets) */
+form:not([class]),
+.govuk-form {
+  > * + * {
+    margin-top: var(--flow-space, var(--space-m));
+  }
+
+  &:has(> [type="hidden"]:first-child) {
+    margin-top: calc(-1 * var(--flow-space, var(--space-m)));
+  }
+}
+
+.govuk-form-group {
+  container: form-group / inline-size;
+
+  .govuk-form-group {
+    container: unset;
+  }
+}

data/app/assets/stylesheets/koi/forms/hint.css

@@ -0,0 +1,11 @@
+.govuk-hint {
+  font-weight: var(--font-regular);
+  font-size: var(--size-step-0);
+  line-height: var(--leading-fine);
+  color: var(--govuk-hint-color);
+  margin-block-end: var(--space-3xs);
+}
+
+.govuk-fieldset__legend + .govuk-hint {
+  --flow-space: var(--space-2xs);
+}

data/app/assets/stylesheets/koi/forms/image-field.css

@@ -0,0 +1,96 @@
+.govuk-image-field {
+  display: grid;
+  grid-template-areas:
+    "label preview"
+    "hint preview"
+    "error preview"
+    "file preview"
+    "supplemental supplemental";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto auto 1fr auto;
+  gap: 0 1rem;
+
+  label {
+    grid-area: label;
+  }
+
+  .govuk-hint {
+    grid-area: hint;
+  }
+
+  .govuk-error-message {
+    grid-area: error;
+  }
+
+  input {
+    grid-area: file;
+    align-self: start;
+
+    &::file-selector-button {
+      color: var(--color-dark);
+      background: var(--color-tint);
+      border: var(--stroke-input);
+      border-radius: var(--input-radius);
+    }
+  }
+
+  .preview-image {
+    grid-area: preview;
+    position: relative;
+    display: grid;
+    overflow: visible;
+    align-self: start;
+    align-items: center;
+    justify-items: center;
+    background-color: var(--color-tint);
+    border: var(--stroke-input);
+    border-radius: var(--input-radius);
+
+    min-width: calc(8em + 2 * var(--stroke-input-width));
+    aspect-ratio: 1;
+
+    .image-thumbnail {
+      max-width: 8em;
+      max-height: 8em;
+    }
+  }
+
+  .file-destroy {
+    appearance: none;
+    position: absolute;
+    background-color: var(--color-tint);
+    color: var(--color-dark);
+    border-radius: var(--input-radius);
+    border: var(--stroke-input);
+    display: block;
+    padding: 0;
+    top: calc(-1 * var(--stroke-input-width));
+    right: calc(-1 * var(--stroke-input-width));
+
+    &::after {
+      content: "×";
+      display: block;
+      position: relative;
+      width: 21px;
+      line-height: 21px;
+      font-size: 21px;
+      top: -1px;
+    }
+  }
+
+  > div:last-child {
+    grid-area: supplemental;
+
+    > * + * {
+      margin-top: var(--flow-space, var(--space-2xs));
+    }
+  }
+
+  .preview-image[hidden] {
+    display: block !important;
+
+    .file-destroy {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/koi/forms/index.css

@@ -0,0 +1,44 @@
+@import url("label.css");
+@import url("hint.css");
+@import url("caption.css");
+
+@import url("form-group.css");
+@import url("fieldset.css");
+@import url("errors.css");
+
+@import url("input.css");
+@import url("checkboxes.css");
+@import url("date-input.css");
+@import url("file-upload.css");
+@import url("image-field.css");
+@import url("document-field.css");
+@import url("radios.css");
+@import url("password.css");
+@import url("select.css");
+@import url("textarea.css");
+@import url("trix.css");
+
+:root {
+  --stroke-input-width: 2px;
+  --stroke-input: var(--stroke-input-width) solid var(--color-dark);
+  --input-radius: 0.2rem;
+  --input-size: var(--size-step-4);
+  --small-input-size: var(--size-step-2);
+  --focus-width: 2px;
+  --focus-outline: var(--focus-width) solid var(--focus-color);
+  --focus-shadow: currentColor inset 0 0 0 1px;
+  --govuk-error-color: var(--color-alert);
+  --govuk-hint-color: var(--color-mid);
+}
+
+.govuk-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}