alchemy_cms 8.2.7 → 8.3.0

data/app/stylesheets/alchemy/admin/forms.scss

@@ -14,10 +14,6 @@ form {
     padding: 0;
   }
 
-  &.edit_page textarea {
-    height: 67px;
-  }
-
   .control-label {
     @include mixins.form-label;
   }
@@ -29,37 +25,27 @@ form {
   }
 
   .input {
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) minmax(
+        0,
+        var(--form-right-column-width)
+      );
+    align-items: baseline;
+    gap: 0 var(--spacing-2);
     padding: var(--spacing-1) 0;
-    @include mixins.clearfix;
-
-    input[type="url"],
-    input[type="number"],
-    input[type="text"],
-    input[type="email"],
-    input[type="password"],
-    textarea,
-    select,
-    .select2-container,
-    .autocomplete_tag_list,
-    .tinymce_container {
-      width: var(--form-right-column-width);
-      float: right;
-    }
 
     textarea {
       padding-top: 7px;
+      height: 6rem;
     }
 
-    .input > select,
-    .input > .select2-container {
-      width: 100%;
+    .input-row {
+      margin: 0;
     }
 
-    > .autocomplete_tag_list {
-      .select2-container,
-      .select2-choices {
-        width: 100%;
-      }
+    .select2-container,
+    .select2-choices {
+      width: 100%;
     }
 
     ::-webkit-input-placeholder {
@@ -68,39 +54,46 @@ form {
 
     select,
     .select2-container {
-      margin: var(--spacing-1) 0;
+      margin: var(--form-field-margin);
+    }
+
+    &:has(.select2-container:not(.select2-container-multi)) {
+      .control-label {
+        align-self: center;
+      }
     }
 
     &.boolean {
-      margin-left: var(--form-left-column-width);
+      height: var(--form-field-height);
+
+      input,
+      label {
+        grid-column: 2;
+        grid-row: 1;
+        width: max-content;
+        align-self: center;
+        margin: var(--form-field-margin);
+      }
 
       input {
-        margin: 0;
-        margin-right: var(--spacing-0);
-        margin-left: 1px;
-        vertical-align: middle;
+        margin-left: var(--spacing-0);
       }
 
       label {
-        width: 100%;
-        text-align: left;
-        padding: 0;
-        margin: 0;
-        float: none;
-        margin-left: var(--spacing-1);
-        vertical-align: middle;
+        margin-left: var(--spacing-6);
       }
     }
 
     label.checkbox {
       display: flex;
-      align-items: center;
+      align-items: baseline;
       gap: var(--spacing-1);
-      margin: var(--spacing-0) 0 var(--spacing-2);
+      margin: var(--spacing-1) 0;
+      width: max-content;
 
       input {
-        margin-right: var(--spacing-0);
-        margin-left: 1px;
+        align-self: center;
+        margin: 0 var(--spacing-0) 0 1px;
       }
     }
 
@@ -112,6 +105,19 @@ form {
       );
       text-align: left;
     }
+
+    &.tags {
+      .control_group {
+        gap: 0;
+      }
+    }
+
+    &.tinymce_container {
+      label {
+        position: relative;
+        top: calc(-1 * var(--spacing-1));
+      }
+    }
   }
 
   .field_with_errors {
@@ -146,9 +152,8 @@ form {
   small.error {
     color: var(--notice-error-text-color);
     display: block;
-    margin-left: var(--form-left-column-width);
     line-height: 1.5em;
-    clear: both;
+    grid-column: 2;
     text-align: right;
     margin-bottom: 0.25em;
   }
@@ -204,47 +209,35 @@ form {
   }
 
   .inline-input {
+    display: grid;
     align-items: center;
-    display: flex;
+    grid-template-columns: var(--form-right-column-width) var(
+        --form-left-column-width
+      );
     margin: 0 calc(-1 * var(--spacing-1));
+    gap: var(--spacing-1);
 
     .left-column,
     .right-column {
-      padding: 0 var(--spacing-1);
-    }
-
-    .left-column {
-      width: var(--form-right-column-width);
-    }
-
-    .right-column {
-      width: var(--form-left-column-width);
+      min-width: 0;
     }
 
     button,
     .button,
-    input[type="url"],
-    input[type="text"],
-    input[type="email"],
-    input[type="submit"],
-    input[type="password"] {
+    input[type="submit"] {
       width: 100%;
     }
   }
 
   .control_group {
-    width: var(--form-right-column-width);
-    padding-top: var(--spacing-1);
-    float: right;
-  }
-
-  .check_boxes .control_group {
-    padding-top: 0.6em;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+    margin: var(--spacing-1) 0;
   }
 
   .input .hint {
     @include mixins.form-hint;
-    margin-left: var(--form-left-column-width);
 
     a[href] {
       color: var(--hint-text-link-color);
@@ -260,12 +253,33 @@ form {
   }
 
   .submit {
-    display: flex;
-    padding: var(--spacing-1) 0;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) var(
+        --form-right-column-width
+      );
+    margin: var(--spacing-1) 0;
+    gap: 0 var(--spacing-2);
+
+    > button {
+      grid-column: 2;
+      grid-row: 1;
+      width: max-content;
+
+      &:last-of-type {
+        margin-left: auto;
+      }
+    }
+  }
+
+  &.full_width .submit {
+    grid-template-columns: 1fr 1fr;
 
-    > button:last-of-type {
-      margin-left: auto;
+    button {
+      width: 100%;
+
+      &:first-of-type {
+        grid-column: 1;
+      }
     }
   }
 
@@ -277,31 +291,31 @@ form {
   }
 
   .input-column {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
     width: 50%;
-    padding: 0 var(--spacing-1);
 
-    input[type] {
-      float: none;
-      width: 100%;
+    > label {
+      display: inline-block;
+      margin-bottom: var(--spacing-1);
+      text-align: left;
+    }
+
+    select,
+    .select2-container {
+      margin: var(--form-field-margin);
     }
   }
 
+  &.full_width .input-column {
+    width: 100%;
+  }
+
   .input-row {
     display: flex;
-
-    .input-column {
-      &:first-of-type {
-        padding-left: 0;
-      }
-
-      &:last-of-type {
-        padding-right: 0;
-      }
-    }
+    gap: var(--spacing-2);
+    justify-content: space-between;
+    margin: var(--spacing-2) 0;
   }
 }
-
-.input-column > label {
-  display: block;
-  margin-top: calc(var(--spacing-1) + 1);
-}

data/app/stylesheets/alchemy/admin/icons.scss

@@ -2,6 +2,34 @@ alchemy-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--icon-size, var(--icon-size-md));
+  height: var(--icon-size, var(--icon-size-md));
+  opacity: 1;
+  transition: opacity var(--transition-duration) var(--transition-easing);
+
+  &:not(:defined) {
+    opacity: 0;
+  }
+
+  &[size="xs"] {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  &[size="sm"] {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+  }
+
+  &[size="1x"] {
+    width: var(--icon-size-1x);
+    height: var(--icon-size-1x);
+  }
+
+  &[size="xl"] {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+  }
 
   &.disabled {
     opacity: 0.3;

data/app/stylesheets/alchemy/admin/image_library.scss

@@ -111,18 +111,28 @@
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
   overflow: auto;
 
-  form .control-label {
-    text-align: left;
-  }
+  form {
+    .control-label {
+      display: block;
+      text-align: left;
+      line-height: var(--form-field-height);
+    }
 
-  form .input .hint {
-    margin-left: 0;
-  }
+    .input {
+      display: block;
+
+      alchemy-picture-description-select select {
+        margin: 0;
+      }
 
-  form .input .select2-container,
-  form .input input[type="text"],
-  form .input textarea {
-    width: 100%;
+      .hint {
+        margin-left: 0;
+      }
+
+      .select2-container {
+        width: 100%;
+      }
+    }
   }
 }
 

data/app/stylesheets/alchemy/admin/navigation.scss

@@ -7,7 +7,6 @@
   top: 0;
   margin-left: var(--main-menu-width);
   padding-right: var(--main-menu-width);
-  z-index: 20;
   width: 100%;
   height: var(--top-menu-height);
   @extend .disable-user-select;
@@ -308,3 +307,7 @@
     text-transform: uppercase;
   }
 }
+
+.alchemy-timezone-select {
+  width: 30px; // Reduce FOUC
+}

data/app/stylesheets/alchemy/admin/popover.scss

@@ -27,11 +27,9 @@
     font-size: var(--font-size_small);
   }
 
-  .submit {
-    gap: var(--spacing-2);
-
-    button {
-      width: 50%;
+  form {
+    label {
+      font-size: var(--font-size_small);
     }
   }
 }

data/app/stylesheets/alchemy/admin/resource_info.scss

@@ -4,8 +4,6 @@
 .resource-details {
   display: flex;
   gap: var(--spacing-5);
-  --form-left-column-width: 30%;
-  --form-right-column-width: 70%;
 
   > .resource-preview {
     flex-grow: 0;
@@ -29,10 +27,6 @@
     aside {
       width: 50%;
     }
-
-    .resource_info .value p {
-      --max-width: 287px;
-    }
   }
 }
 
@@ -49,15 +43,22 @@
 .resource_info {
   .value {
     position: relative;
-    @include mixins.clearfix;
+    display: grid;
+    grid-template-columns: var(--form-left-column-width) var(
+        --form-right-column-width
+      );
+    align-items: baseline;
+    gap: 0 var(--spacing-2);
 
     > label {
       @include mixins.form-label;
+
+      alchemy-icon {
+        vertical-align: middle;
+      }
     }
 
     > p {
-      float: right;
-      width: var(--form-right-column-width);
       margin: var(--form-field-margin);
       padding: var(--spacing-1) var(--spacing-2);
       line-height: 21px;
@@ -66,7 +67,7 @@
       border-radius: var(--border-radius_medium);
 
       &:not(.value-block) {
-        @include mixins.truncate(var(--form-right-column-width), $wrap: nowrap);
+        @include mixins.truncate(100%, $wrap: nowrap);
       }
 
       &.value-block {
@@ -81,7 +82,6 @@
       > p {
         white-space: nowrap;
         padding-right: var(--spacing-10);
-        max-width: var(--max-width, 328px);
       }
     }
   }
@@ -109,12 +109,6 @@
   &.file-infos .value {
     label {
       text-align: left;
-      width: 30%;
-    }
-
-    p {
-      max-width: 70%;
-      width: 70%;
     }
   }
 }

data/app/stylesheets/alchemy/admin/shoelace.scss

@@ -292,6 +292,14 @@ sl-dropdown {
     filter: drop-shadow(var(--dialog-box-shadow));
     border: 1px solid var(--border-color);
   }
+
+  // Until sl-dropdown upgrades it has no shadow DOM, so its default-slot panel
+  // (the .alchemy-popover) renders inline and visible; on definition Shoelace
+  // hides the panel, collapsing it and shifting the layout. Hide the panel
+  // content until defined — the [slot="trigger"] stays visible.
+  &:not(:defined) > :not([slot="trigger"]) {
+    display: none;
+  }
 }
 
 sl-tab-group {

data/app/stylesheets/alchemy/admin/sitemap.scss

@@ -247,6 +247,11 @@ alchemy-sitemap {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-1);
+
+  alchemy-icon {
+    position: relative;
+    top: 0.1ex;
+  }
 }
 
 #page_filter_result {

data/app/stylesheets/alchemy/admin/tables.scss

@@ -51,7 +51,7 @@ table {
   }
 
   &.icon {
-    width: 16px;
+    width: var(--spacing-6);
     text-align: center;
     background-color: transparent;
   }
@@ -132,6 +132,11 @@ th,
 
 td,
 .table .col {
+  &.button {
+    width: 40px;
+    text-align: center;
+  }
+
   &.file_name {
     white-space: nowrap;
   }
@@ -156,6 +161,10 @@ td,
     width: 150px;
   }
 
+  &.name {
+    width: 200px;
+  }
+
   &.email {
     width: 270px;
   }
@@ -172,17 +181,35 @@ td,
     width: 10%;
   }
 
-  &.url {
+  &.url,
+  &.url_path {
     width: 15%;
     white-space: nowrap;
   }
 
+  &.site_name {
+    width: 200px;
+  }
+
+  &.locale {
+    width: 60px;
+    text-align: center;
+  }
+
   &.status {
     width: 5%;
     white-space: nowrap;
 
     .page_status {
       margin: 0 var(--spacing-1);
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
     }
   }
 
@@ -204,8 +231,10 @@ td.count {
   padding-right: var(--spacing-4);
 }
 
+th.taggings_types,
 td.taggings_types {
-  width: 15%;
+  width: auto;
+  text-align: right;
 }
 
 .list .login_status {

data/app/stylesheets/alchemy/admin/toolbar.scss

@@ -5,7 +5,6 @@
   @extend %gradiated-toolbar;
   align-items: center;
   gap: var(--spacing-2);
-  z-index: 10;
   margin-right: 0px;
   position: relative;
 

data/app/stylesheets/alchemy/admin.scss

@@ -39,6 +39,7 @@
 @use "admin/spinner";
 @use "admin/tables";
 @use "admin/tags";
+@use "admin/tom-select";
 @use "admin/toolbar";
 @use "admin/typography";
 @use "admin/upload";

data/app/stylesheets/tinymce/skins/ui/alchemy/skin.scss

@@ -1943,10 +1943,6 @@ body.tox-dialog__disable-scroll {
   overflow: hidden;
 }
 
-.tox .tox-editor-header {
-  z-index: 1;
-}
-
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;

data/app/stylesheets/tinymce/skins/ui/alchemy-dark/skin.scss

@@ -1943,10 +1943,6 @@ body.tox-dialog__disable-scroll {
   overflow: hidden;
 }
 
-.tox .tox-editor-header {
-  z-index: 1;
-}
-
 .tox:not(.tox-tinymce-inline) .tox-editor-header {
   box-shadow: none;
   transition: box-shadow 0.5s;

data/app/types/alchemy/wildcard_url_type.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Alchemy
+  class WildcardUrlType < ActiveModel::Type::Value
+    def cast(value)
+      case value
+      when nil then nil
+      when Symbol, String then normalize(value)
+      else value
+      end
+    end
+
+    def assert_valid_value(value)
+      case value
+      when nil
+        nil
+      when Symbol, String
+        assert_valid_param!(normalize(value))
+      else
+        raise ArgumentError, "#{value.inspect} is not a valid wildcard_url. Must be a Symbol or String."
+      end
+    end
+
+    private
+
+    # Normalizes a wildcard_url input to a String. Symbols are turned into a
+    # dynamic segment with a leading colon (`:slug` => `":slug"`).
+    #
+    # @param value [String, Symbol]
+    # @return [String]
+    def normalize(value)
+      value.is_a?(Symbol) ? ":#{value}" : value.to_s
+    end
+
+    def assert_valid_param!(value)
+      if value.include?("/")
+        raise ArgumentError,
+          "wildcard_url #{value.inspect}: cannot contain \"/\". " \
+          "Must be a single URL segment."
+      end
+
+      unless value.match?(/:\w+/)
+        raise ArgumentError,
+          "wildcard_url #{value.inspect}: must contain a dynamic segment, e.g. \":id\"."
+      end
+    end
+  end
+end

data/app/views/alchemy/_menubar.html.erb

@@ -114,14 +114,10 @@
 
     <script type="module" data-turbo-eval="false">
       class Menubar extends HTMLElement {
-        constructor() {
-          super()
+        connectedCallback() {
           const template = this.querySelector("template")
           const attachedShadowRoot = this.attachShadow({ mode: "open" })
           attachedShadowRoot.appendChild(template.content.cloneNode(true))
-        }
-
-        connectedCallback() {
           const width = this.bar.offsetWidth
           this.bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
           this.bar.addEventListener("touchstart", this, { passive: false })