katalyst-koi 4.18.0 → 5.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: feb798fc8f8baf7c9b7e78269e46c510d04c5e345ed7f605490fab898f2428ec
-  data.tar.gz: 7be3b6e4c9de2969f6118283004bef6d511cddf2fd2277886fdafbdd54177700
+  metadata.gz: 4080b3cf1a331e6a44c27073860147d44ba416aedee36ed5b9544e53b053337e
+  data.tar.gz: 7cd2b85aaafa0703b7276efdaeab07a05aa5cf104b9e88a26af0cedd2759a787
 SHA512:
-  metadata.gz: '088d74784a4b12c90295467d4d5d3ef0baea13e66bc34cce1f1237ebc8ced0696711d77cd4333b5d9245edeaeaaa1c67236027facaa9ab37642ece2dfdd33245'
-  data.tar.gz: 348b7140826626abc87d0f421c15c43a8d2e36dc7fc792b5756dcb2f877412af2204f49042d6ef416b9dda8e65399377d8ecfb5f6127dce3480c935665f4d59e
+  metadata.gz: dc7bd443f0a1ae6d4d4b503af59200592c35c4d1f73326400be7e05b85ad92fdf814d2f9e339034907eb4ede0a0b513dc744f1edc89ce9ce69dc856edf416bff
+  data.tar.gz: 2a9973470c68cf9b6930aa7f5da4b62d71f1218e88fb383ee66643427b742522fa742649aa1c2a18f2c6e3c9eafcb7564e79c2be97651c559efde0ecaa463aae

data/app/assets/images/koi/icons/add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16">
+  <path d="M8 1 8 15M1 8l14 0"/>
+</svg>

data/app/assets/images/koi/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 16 16"><path d="M15 1 1 15M1 1l14 14"/></svg>

data/app/assets/javascripts/koi/controllers/file_field_controller.js

@@ -19,7 +19,7 @@ export default class FileFieldController extends Controller {
     if (this.hasDestroyTarget) {
       this.destroyTarget.value = false;
     }
-    this.previewTarget.classList.remove("hidden");
+    this.previewTarget.removeAttribute("hidden");
 
     // Show preview only if a file has been selected in the file picker popup. If cancelled, show previous file or do
     // not show preview at all
@@ -46,7 +46,7 @@ export default class FileFieldController extends Controller {
         this.destroyTarget.value = true;
       }
       if (this.hasPreviewTarget) {
-        this.previewTarget.classList.add("hidden");
+        this.previewTarget.setAttribute("hidden", "");
         this.setPreviewContent("");
       }
       if (this.previousInput) {

data/app/assets/javascripts/koi/controllers/index.js

@@ -1,8 +1,5 @@
 import { application } from "koi/controllers/application";
 
-import kpop from "@katalyst/kpop";
-application.load(kpop);
-
 import content from "@katalyst/content";
 application.load(content);
 

data/app/assets/javascripts/koi/controllers/koi/modal_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class ModalController extends Controller {
+  static targets = ["dialog"];
+
+  connect() {
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  click(e) {
+    if (e.target.tagName === "DIALOG") this.dismiss();
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+}

data/app/assets/javascripts/koi/controllers/navigation_controller.js

@@ -3,25 +3,6 @@ import { Controller } from "@hotwired/stimulus";
 export default class NavigationController extends Controller {
   static targets = ["filter"];
 
-  connect() {
-    // using JS registration to make controller easier to add to dom
-    this.element.addEventListener(
-      "turbo:before-morph-attribute",
-      this.onMorphAttribute,
-    );
-  }
-
-  disconnected() {
-    this.element.removeEventListener(
-      "turbo:before-morph-attribute",
-      this.onMorphAttribute,
-    );
-  }
-
-  focus() {
-    this.filterTarget.focus();
-  }
-
   filter() {
     const filter = this.filterTarget.value;
     this.clearFilter(filter);
@@ -90,14 +71,26 @@ export default class NavigationController extends Controller {
   }
 
   toggle() {
-    this.element.toggleAttribute("aria-expanded");
+    this.element.open ? this.close() : this.open();
+  }
+
+  open() {
+    if (!this.element.open) this.element.showModal();
+  }
+
+  close() {
+    if (this.element.open) this.element.close();
+  }
+
+  click(e) {
+    if (e.target === this.element) this.close();
   }
 
   onMorphAttribute = (e) => {
     if (e.target !== this.element) return;
 
     switch (e.detail.attributeName) {
-      case "aria-expanded":
+      case "open":
         e.preventDefault();
     }
   };

data/app/assets/javascripts/koi/controllers/webauthn_registration_controller.js

@@ -13,7 +13,10 @@ export default class WebauthnRegistrationController extends Controller {
   static targets = ["intro", "nickname", "response"];
 
   submit(e) {
-    if (this.responseTarget.value === "") {
+    if (
+      this.responseTarget.value === "" &&
+      e.submitter.formMethod !== "dialog"
+    ) {
       e.preventDefault();
       this.createCredential();
     }

data/app/assets/stylesheets/koi/blocks/actions.css

@@ -0,0 +1,8 @@
+.actions {
+  display: flex;
+  gap: var(--space-3xs);
+
+  &[data-reverse] {
+    flex-direction: row-reverse;
+  }
+}

data/app/assets/stylesheets/koi/blocks/application-header.css

@@ -0,0 +1,15 @@
+.application-header {
+  --repel-vertical-alignment: baseline;
+  background-color: var(--color-dark);
+  color: var(--color-light);
+  padding-block: var(--space-2xs);
+
+  kbd {
+    color: var(--color-mid);
+  }
+
+  .brand {
+    color: white;
+    text-decoration: none;
+  }
+}

data/app/assets/stylesheets/koi/blocks/application-navigation.css

@@ -0,0 +1,54 @@
+.application-navigation {
+  --navigation-width: 30rem;
+
+  width: 100svw;
+  max-width: min(calc(100vw - var(--gutter) * 2), var(--navigation-width));
+  height: 100svh;
+  max-height: unset;
+  position: fixed;
+  top: 0;
+  margin-inline-end: 0;
+  border: none;
+  background: var(--color-light);
+  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
+  transform: translateX(100%);
+  transition:
+    display var(--transition-fade) allow-discrete,
+    overlay var(--transition-fade) allow-discrete,
+    transform var(--transition-movement);
+  font-size: var(--size-step-0);
+
+  --flow-space: var(--space-m);
+
+  a[href] {
+    text-decoration: none;
+  }
+}
+
+.application-navigation[open] {
+  transform: translateX(0);
+}
+
+@starting-style {
+  .application-navigation[open] {
+    transform: translateX(100%);
+  }
+}
+
+.application-navigation::backdrop {
+  background-color: rgb(0 0 0 / 0%);
+  transition:
+    background-color var(--transition-fade),
+    display var(--transition-fade) allow-discrete,
+    overlay var(--transition-fade) allow-discrete;
+}
+
+.application-navigation[open]::backdrop {
+  background-color: rgb(0 0 0 / 40%);
+}
+
+@starting-style {
+  .application-navigation[open]::backdrop {
+    background-color: rgb(0 0 0 / 0%);
+  }
+}

data/app/assets/stylesheets/koi/blocks/button.css

@@ -0,0 +1,90 @@
+.button {
+  /* Configuration */
+  --button-padding: 0.5em 1em;
+  --button-gap: 0.5em;
+  --button-bg: var(--color-dark);
+  --button-color: var(--color-light);
+  --button-hover-bg: var(--color-dark-glare);
+  --button-hover-color: var(--color-light);
+  --button-border-width: 2px;
+  --button-border-style: solid;
+  --button-border-color: var(--button-bg);
+  --button-radius: 0.25em;
+  --button-outline-color: var(--focus-color);
+
+  /* Layout and spacing */
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--button-gap);
+  padding: var(--button-padding);
+
+  /* Colours */
+  background: var(--button-bg);
+  color: var(--button-color);
+
+  /* Stroke and radius */
+  border-width: var(--button-border-width);
+  border-style: var(--button-border-style);
+  border-color: var(--button-border-color);
+  border-radius: var(--button-radius);
+
+  /* Typography */
+  text-decoration: none;
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, 1em);
+  letter-spacing: 0.05ch;
+  font-family: var(--font-base);
+  line-height: 1.1;
+
+  /* Interactive */
+  cursor: pointer;
+
+  transition:
+    color 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    background: var(--button-hover-bg);
+    color: var(--button-hover-color);
+  }
+
+  &:focus-visible {
+    outline: var(--button-outline-color, var(--button-border-color))
+      var(--button-outline-style, var(--button-border-style))
+      var(--button-outline-width, var(--button-border-width));
+    outline-offset: var(
+      --button-outline-offset,
+      calc(var(--button-border-width))
+    );
+  }
+
+  &:active {
+    transform: scale(99%);
+  }
+
+  &[disabled] {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  &[data-button-padding="tight"] {
+    --button-padding: 0.5em;
+  }
+
+  &[data-ghost-button] {
+    --button-bg: transparent;
+    --button-border-color: currentColor;
+    --button-color: currentColor;
+  }
+
+  &[data-button-radius="hard"] {
+    --button-radius: 0;
+  }
+
+  &[data-text-button] {
+    --button-bg: transparent;
+    --button-border-color: transparent;
+    --button-color: currentColor;
+  }
+}

data/app/assets/stylesheets/koi/blocks/flash.css

@@ -0,0 +1,19 @@
+.flash {
+  color: var(--flash-color);
+}
+
+.flash:is([data-flash-type="alert"]) {
+  --flash-color: var(--site-alert);
+}
+
+.flash:is([data-flash-type="notice"]) {
+  --flash-color: var(--site-notice);
+}
+
+.flash:is([data-flash-type="success"]) {
+  --flash-color: var(--site-success);
+}
+
+.flash:is([data-flash-type="warning"], [data-flash-type="error"]) {
+  --flash-color: var(--site-warning);
+}

data/app/assets/stylesheets/koi/blocks/icon.css

@@ -0,0 +1,15 @@
+.icon {
+  --scale: 1;
+  --size: 1em;
+  aspect-ratio: 1;
+  background-color: currentColor;
+  display: inline-block;
+  font-size: calc(var(--scale) * var(--size));
+  height: 1em;
+  line-height: 1em;
+  transform: translateY(var(--offset, 0));
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}

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

@@ -0,0 +1,13 @@
+@import url("actions.css");
+@import url("application-header.css");
+@import url("application-navigation.css");
+@import url("button.css");
+@import url("flash.css");
+@import url("icon.css");
+@import url("modal.css");
+@import url("navigation.css");
+@import url("page-header.css");
+@import url("pagy.css");
+@import url("prose.css");
+@import url("tables/index.css");
+@import url("toolbar.css");

data/app/assets/stylesheets/koi/blocks/modal.css

@@ -0,0 +1,26 @@
+.modal {
+  --modal-gutter: var(--space-s);
+  --modal-width: 80%;
+  --modal-max-width: 36rem;
+  --modal-max-height: 27rem;
+  --modal-padding: var(--space-s);
+
+  container-type: inline-size;
+  padding: 0;
+  width: var(--modal-width);
+
+  max-width: min(
+    calc(100svw - 2 * var(--modal-gutter)),
+    var(--modal-max-width)
+  );
+
+  max-height: calc(100svh - 2 * var(--modal-gutter));
+
+  > * {
+    padding: var(--modal-padding);
+  }
+}
+
+.modal::backdrop {
+  background-color: rgba(0, 0, 0, 0.6);
+}

data/app/assets/stylesheets/koi/blocks/navigation.css

@@ -0,0 +1,23 @@
+.navigation-group > li > span:first-child {
+  font-size: var(--size-step-2);
+  font-weight: var(--font-bold);
+}
+
+.navigation-group > li > * + * {
+  margin-block-start: var(--space-2xs);
+  --flow-space: var(--space-xs);
+}
+
+.navigation-list > li > span:first-child {
+  font-size: var(--size-step-1);
+  font-weight: var(--font-bold);
+}
+
+.navigation-list > li > * + * {
+  margin-block-start: var(--space-2xs);
+  --flow-space: var(--space-xs);
+}
+
+.navigation-list .navigation-list {
+  padding-inline-start: var(--space-s);
+}

data/app/assets/stylesheets/koi/blocks/page-header.css

@@ -0,0 +1,31 @@
+.page-header {
+  background: var(--color-tint);
+  color: var(--color-dark);
+
+  > .wrapper {
+    padding-block: var(--gutter);
+  }
+
+  .breadcrumbs-list,
+  .actions-list {
+    display: flex;
+    gap: 0;
+    align-items: baseline;
+  }
+
+  .breadcrumbs-list > * + * {
+    list-style-type: "›";
+    margin-inline-start: 1.5ch;
+    padding-inline-start: 0.75ch;
+  }
+
+  .actions-list > * + * {
+    list-style-type: "▪";
+    margin-inline-start: 1.5ch;
+    padding-inline-start: 0.5ch;
+  }
+}
+
+.page-header + main {
+  padding-top: var(--gutter);
+}

data/app/assets/stylesheets/koi/blocks/pagy.css

@@ -0,0 +1,82 @@
+.pagy.nav {
+  /* Configuration */
+  --button-padding: 0.5em 1em;
+  --button-gap: 0.5em;
+  --button-bg: transparent;
+  --button-color: currentColor;
+  --button-hover-bg: var(--color-dark-glare);
+  --button-hover-color: var(--color-light);
+  --button-border-width: 2px;
+  --button-border-style: solid;
+  --button-border-color: var(--button-bg);
+  --button-radius: 0.25em;
+  --button-outline-color: var(--focus-color);
+
+  display: flex;
+  gap: var(--space-2xs);
+
+  a {
+    /* Layout and spacing */
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--button-gap);
+    padding: var(--button-padding);
+
+    /* Colours */
+    background: var(--button-bg);
+    color: var(--button-color);
+
+    /* Stroke and radius */
+    border-width: var(--button-border-width);
+    border-style: var(--button-border-style);
+    border-color: var(--button-border-color);
+    border-radius: var(--button-radius);
+
+    /* Typography */
+    text-decoration: none;
+    font-weight: var(--button-font-weight, 500);
+    font-size: var(--button-font-size, 1em);
+    letter-spacing: 0.05ch;
+    font-family: sans-serif;
+    line-height: 1.1;
+
+    /* Interactive */
+    cursor: pointer;
+
+    transition:
+      color 0.2s ease,
+      background 0.2s ease,
+      border-color 0.2s ease;
+
+    &:hover {
+      background: var(--button-hover-bg);
+      color: var(--button-hover-color);
+    }
+
+    &:focus-visible {
+      outline: var(--button-outline-color, var(--button-border-color))
+        var(--button-outline-style, var(--button-border-style))
+        var(--button-outline-width, var(--button-border-width));
+      outline-offset: var(
+        --button-outline-offset,
+        calc(var(--button-border-width))
+      );
+    }
+
+    &:active {
+      transform: scale(99%);
+    }
+
+    &[aria-disabled] {
+      --button-border-color: transparent;
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
+    &[aria-current] {
+      --button-border-color: currentColor;
+      opacity: 1;
+      pointer-events: none;
+    }
+  }
+}

data/app/assets/stylesheets/koi/blocks/prose.css

@@ -0,0 +1,37 @@
+.prose {
+  --flow-space: var(--space-l);
+}
+
+.prose :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  hyphens: auto;
+}
+
+.prose :is(p, li, dl, figcaption, blockquote) {
+  max-width: 60ch;
+  text-wrap: pretty;
+}
+
+.prose :is(h1, h2, h3, h4) + *:not([class]) {
+  --flow-space: var(--space-m);
+}
+
+/* Add more space on and around figures and tables */
+.prose :is(figure, table),
+.prose :is(figure, table) + * {
+  --flow-space: var(--space-2xl);
+}
+
+/* Add more space to headings on block start */
+.prose * + :is(h1, h2, h3, h4):not([class]) {
+  --flow-space: var(--space-xl);
+}
+
+.prose :is(ul, ol):not([class]) li + li,
+.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
+  --flow-space: var(--space-xs);
+}
+
+.prose hr {
+  --flow-space: var(--space-2xl);
+}

data/app/assets/stylesheets/koi/blocks/tables/index.css

@@ -0,0 +1,4 @@
+@import url("/katalyst/tables.css");
+
+@import url("table.css");
+@import url("query.css");

data/app/assets/stylesheets/koi/{components/_query.scss → blocks/tables/query.css}

@@ -1,10 +1,4 @@
-@use "sass:meta";
-@use "sass:string";
-@use "../utils/typography";
-
-$text-icon-color: #888;
-
-[data-controller="tables--query"] {
+.katalyst--tables--query {
   display: flex;
   flex-grow: 1;
   max-width: var(--text-width);
@@ -22,9 +16,12 @@ $text-icon-color: #888;
     outline: none;
     border-width: 2px;
     padding: 5px 2rem 5px 5px;
+    font-size: var(--size-step-0);
+    line-height: var(--leading-standard);
   }
 
   button[type="submit"] {
+    display: block;
     position: absolute;
     appearance: none;
     top: 6px;
@@ -34,14 +31,16 @@ $text-icon-color: #888;
     min-width: 1.5rem;
     text-align: center;
     font-size: 0;
+    font-size-adjust: none;
     background: none;
     padding: 0;
     line-height: 1;
     border-radius: 4px;
     border: 1px solid #aaa;
-    color: $text-icon-color;
+    color: var(--color-mid);
+
+    /* shows keyboard shortcut when not active */
 
-    // shows keyboard shortcut when not active
     &::before {
       display: block;
       content: "/";
@@ -53,7 +52,8 @@ $text-icon-color: #888;
   button[type="submit"]:focus {
     opacity: 1;
 
-    // submittable
+    /* submittable */
+
     &::before {
       content: "⏎";
       position: relative;
@@ -62,7 +62,7 @@ $text-icon-color: #888;
   }
 
   h4 {
-    font-size: #{typography.font-size(small)};
+    font-size: var(--size-step-0);
     font-weight: 500;
     line-height: 1.5;
     color: #666;
@@ -99,10 +99,10 @@ $text-icon-color: #888;
 
   li.suggestion.attribute::after {
     content: ":";
-    color: $text-icon-color;
+    color: var(--color-mid);
   }
 
   footer {
-    font-size: #{typography.font-size(small)};
+    font-size: var(--size-step--1);
   }
 }