kanso 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 396e93974cc0b18d97827d86306dc782af0e7cf5dd4455aa195147cf342b206b
+  data.tar.gz: cebb358075aa60d66845c99fd77a8c24d54fcfce6af0592f4e447a6d4f1e5bb1
+SHA512:
+  metadata.gz: 06b467cbda43277562df54f8617d0843d2f74888d46e54f204157708c851801587ec6902adae5ce3e8a302501cde02eea7161996e6a06670cf6264a20e740c1f
+  data.tar.gz: 5b166b635e005b0c63a07b558d43a1836426664e19d91362b43524d3a1095d7d62b8281ebbd8a10e62cd0c00aefdfa3cdf7b7d320a147ce61cf2b2355e7e0029

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Santonero
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,352 @@
+# Kanso (簡素)
+
+A rigorously crafted component library for modern Rails applications, built on a philosophy of radical simplicity.
+
+Kanso (簡素) is a Japanese design principle valuing clarity and the elimination of the non-essential. This library is the embodiment of that idea, providing a set of foundational, rigorously tested components that are respectful guests in your application.
+
+This README is the single source of truth. The best API is one that needs no explanation.
+
+## Prerequisites
+
+Kanso is designed to integrate seamlessly into a standard Rails 7+ application. Please ensure your application is configured with:
+
+1.  **Hotwire (Turbo & Stimulus)**
+2.  **Tailwind CSS** (via the `tailwindcss-rails` gem)
+
+## Installation
+
+1.  Add `gem "kanso"` to your `Gemfile`.
+2.  Run `bundle install`.
+3.  Run `bin/rails g kanso:install`.
+
+This generator surgically and safely configures your application. It creates or modifies `tailwind.config.js` and updates your main stylesheet to be aware of Kanso's components and base styles without being destructive.
+
+---
+
+## Component Catalogue
+
+Each component is a self-contained, Hotwire-aware ViewComponent styled with Tailwind CSS. Interactive components include their own lightweight Stimulus controllers, which are automatically registered by the installer.
+
+---
+
+### ButtonComponent
+
+An abstraction for styled actions. It can render a simple tag (`<button>`, `<a>`) or, by leveraging Rails' `button_to` helper, generate a complete single-button form for server-side actions (`DELETE`, `PATCH`, etc.).
+
+**1. Usage (Simple Tag)**
+
+For links or client-side UI interactions.
+
+```erb
+<%# Renders a standard <button> %>
+<%= render Kanso::ButtonComponent.new(theme: :primary) do %>
+  Primary Action
+<% end %>
+
+<%# Renders an <a> tag %>
+<%= render Kanso::ButtonComponent.new(tag: :a, href: dashboard_path) do %>
+  Go to Dashboard
+<% end %>
+```
+
+**2. Usage (Action Form)**
+
+For any action requiring a form, like `DELETE`, `PATCH`, or `POST`.
+
+```erb
+<%# Generates a form with method: :delete %>
+<%= render Kanso::ButtonComponent.new(theme: :danger, url: item_path(@item), method: :delete) do %>
+  Delete Item
+<% end %>
+```
+
+**Options**
+
+*   `theme:` (`Symbol`): The style. Can be `:primary`, `:danger`, or `:default`. Defaults to `:default`.
+
+*   **For Simple Tag Mode:**
+    *   `tag:` (`Symbol`): The HTML tag. Can be `:button` or `:a`. Defaults to `:button`.
+    *   `href:` (`String`): Required if `tag: :a` is used.
+
+*   **For Action Form Mode:**
+    *   `url:` (`String` | `UrlHelper`): **Activates `button_to` mode**. The URL the form will submit to.
+    *   `method:` (`Symbol`): The HTTP method (e.g., `:delete`, `:patch`).
+
+*All other HTML options (`id`, `data-*`, `form:`, etc.) are passed through to the underlying `<button>`, `<a>`, or `button_to` helper.*
+
+---
+
+### IconComponent
+
+Renders a performant, inline SVG icon from the Kanso library.
+
+**Usage:**
+```erb
+<%= render Kanso::IconComponent.new(name: "x-mark", class: "h-5 w-5 text-gray-500") %>
+```
+
+**Options:**
+*   `name:` (`String`, **required**): The name of the icon file (without the `.svg` extension).
+*   *All other HTML options (`class`, `aria-hidden`, etc.) are injected into the `<svg>` tag.*
+
+**Available Icons:**
+
+A complete list of all available icons can be found in the source code:➡️ **[View all available icons](https://github.com/santonero/kanso/tree/main/app/assets/images/kanso/icons)**
+
+---
+
+### NotificationComponent
+
+Renders a dismissible notification panel.
+
+**Usage:**
+
+```erb
+<%= render Kanso::NotificationComponent.new(theme: :success, message: "Your profile was updated.") %>
+```
+
+**Options:**
+*   `message:` (`String`, **required**): The notification's content.
+*   `title:` (`String`, optional): An optional title.
+*   `theme:` (`Symbol`): The style. Can be `:success`, `:error`, `:warning`, or `:info`. Defaults to `:info`.
+
+**Implementation Patterns:**
+
+A notification is most effective when rendered dynamically into a fixed container.
+
+1.  **Add a Global Container** to your layout. This will be the target for all notifications.
+
+    *In `app/views/layouts/application.html.erb`:*
+    ```erb
+    <div id="notifications-container" class="fixed top-4 right-4 z-50 w-full max-w-sm flex flex-col space-y-4">
+    </div>
+    ```
+
+2.  **Render from the Rails Flash:** For redirects, use the `flash:` hash to pass semantic keys that match the component's themes.
+
+    *In a controller:*
+    ```ruby
+    redirect_to @post, flash: { success: "Post was successfully updated." }
+    ```
+    *In your layout (inside the container):*
+    ```erb
+    <% flash.each do |key, message| %>
+      <%= render Kanso::NotificationComponent.new(theme: key, message: message) %>
+    <% end %>
+    ```
+
+3.  **Render from a Turbo Stream:** Append directly to the container for dynamic updates.
+
+    *In a `.turbo_stream.erb` view:*
+    ```erb
+    <%= turbo_stream.append "notifications-container" do %>
+      <%= render Kanso::NotificationComponent.new(theme: :success, message: "Review submitted.") %>
+    <% end %>
+    ```
+
+---
+
+### ModalComponent
+
+Renders a fully self-contained modal dialog, including its trigger. It handles all open/close logic and is designed for both simple, static content and the lazy-loading of any dynamic content via Turbo Frames.
+
+**Usage (Basic):**
+
+For simple confirmation dialogs or modals with static content.
+
+```erb
+<%= render Kanso::ModalComponent.new do |modal| %>
+  <% modal.with_trigger do %>
+    <%= render Kanso::ButtonComponent.new(theme: :danger) do %>
+      Delete Post
+    <% end %>
+  <% end %>
+
+  <% modal.with_header(title: "Confirm Deletion") %>
+
+  <p class="text-gray-600">
+    Are you sure you want to delete this post? This action cannot be undone.
+  </p>
+
+  <% modal.with_footer do %>
+    <%= render Kanso::ButtonComponent.new(data: { action: "kanso--modal#close" }) do %>
+      Cancel
+    <% end %>
+    <%= render Kanso::ButtonComponent.new(
+          theme: :danger,
+          url: post_path(@post),
+          method: :delete
+        ) do %>
+      Yes, Delete It
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+**Recommended Pattern (Lazy-Loading Content):**
+
+For a superior user experience, lazy-load the modal's body inside a Turbo Frame. This example covers the entire workflow, from rendering the form to handling a successful submission.
+
+**1. Render the Modal with a Turbo Frame**
+
+```erb
+<%= render Kanso::ModalComponent.new do |modal| %>
+  <% modal.with_trigger do %>
+    <%= render Kanso::ButtonComponent.new(theme: :primary) do %>
+      New Product
+    <% end %>
+  <% end %>
+
+  <% modal.with_header(title: "New Product") %>
+
+  <%= turbo_frame_tag "modal_form", src: new_product_path, loading: :lazy do %>
+    <%= render Kanso::FormFieldSkeletonComponent.new(fields: 2) %>
+  <% end %>
+
+  <% modal.with_footer do %>
+    <%= render Kanso::ButtonComponent.new(data: { action: "kanso--modal#close" }) do %>
+      Cancel
+    <% end %>
+    <%= render Kanso::ButtonComponent.new(theme: :primary, type: :submit, form: "new_product_form") do %>
+      Create
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+**2. Handle Successful Submissions**
+
+When a form inside a Turbo Frame succeeds, a standard `redirect_to` is trapped. The Kanso pattern uses a custom Turbo Stream action to break out of the modal and perform a full-page visit, letting Turbo Drive handle the flash message naturally.
+
+*First, teach Turbo the `redirect` action in your `application.js`:*
+```javascript
+// app/javascript/application.js
+
+// ...
+
+// Teaches Turbo a new "redirect" action that performs a full-page visit.
+Turbo.StreamActions.redirect = function() {
+  Turbo.visit(this.target);
+}
+```
+
+*Next, in your controller, set the flash and respond to the `turbo_stream` format:*
+```ruby
+# app/controllers/products_controller.rb
+def create
+  @product = Product.new(product_params)
+  if @product.save
+    # Set the flash message that Turbo Drive will render on the next page.
+    flash[:success] = "Product was successfully created."
+
+    respond_to do |format|
+      format.turbo_stream
+      format.html { redirect_to @product, flash: { success: "Product was successfully created." } }
+    end
+  else
+    # On validation failure, Turbo re-renders the frame with errors automatically.
+    render :new, status: :unprocessable_entity
+  end
+end
+```
+
+*Finally, create a stream view that sends the pure `redirect` command:*
+```erb
+<%# app/views/products/create.turbo_stream.erb %>
+<%= turbo_stream.action "redirect", product_path(@product) %>
+```
+
+**Options:**
+*   `size:` (`Symbol`, optional): The max-width. `:sm`, `:md`, `:lg`, `:xl`, `:xxl`. Defaults to `:lg`.
+
+**Slots:**
+*   `with_trigger`: **(Required)** The element that opens the modal. Takes a block.
+*   `with_header(title:)`: (Optional) The modal header.
+    *   `title:` (`String`, **required**): Text for the header.
+*   `with_footer`: (Optional) A dedicated section for action buttons. Takes a block.
+*   **`content` block:** The main content of the modal.
+
+---
+
+### FormFieldComponent
+
+Renders a complete form field unit, including a label, input, help text, and dynamic validation error messages. Designed for seamless integration with Rails form builders.
+
+**Usage:**
+```erb
+<%= form_with model: @user do |form| %>
+  <%= render Kanso::FormFieldComponent.new(form: form, attribute: :name) %>
+<% end %>
+```
+
+**Automatic Error Handling:**
+The component automatically detects and displays validation errors from your model object (`form.object.errors`).
+
+**Options:**
+*   `form:` (`FormBuilder`, **required**): The Rails form builder instance.
+*   `attribute:` (`Symbol`, **required**): The model attribute for the field.
+*   `type:` (`Symbol`, optional): The input type method to call (e.g., `:text_field`, `:password_field`). Defaults to `:text_field`.
+*   `placeholder:` (`String`, optional): Placeholder text for the input.
+*   *All other HTML options are passed directly to the input field.*
+
+**Slots:**
+*   `with_help_text`: (Optional) Renders descriptive text below the input. Takes a block.
+
+---
+
+### FormFieldSkeletonComponent
+
+Provides a loading state placeholder perfectly matched to the `FormFieldComponent`. It's essential for preventing layout shift within lazy-loaded `turbo_frame_tag`.
+
+**Usage:**
+
+Use this as the initial content of a `turbo_frame_tag` while the real form is loading from the server.
+
+```erb
+<%= turbo_frame_tag "product_form", src: new_product_path, loading: :lazy, class: "w-full"  do %>
+  <%# This is displayed instantly while the real form is loading. %>
+  <%= render Kanso::FormFieldSkeletonComponent.new(fields: 2) %>
+<% end %>
+```
+
+**Options:**
+*   `fields:` (`Integer`, optional): The number of skeleton field rows to render. Defaults to `1`.
+
+---
+
+### DropdownComponent
+
+Renders a dropdown menu with a trigger and a floating panel, handling all user interactions and edge cases.
+
+**Usage:**
+```erb
+<%= render Kanso::DropdownComponent.new do |dropdown| %>
+  <% dropdown.with_trigger do %>
+    <%= render Kanso::ButtonComponent.new do %>
+      <span>Options</span>
+      <%= render Kanso::IconComponent.new(name: "chevron-down", class: "h-5 w-5") %>
+    <% end %>
+  <% end %>
+
+  <div class="py-1" role="none">
+    <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Edit</a>
+    <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Duplicate</a>
+  </div>
+<% end %>
+```
+
+**Slots:**
+*   `with_trigger`: **(Required)** The element that toggles the dropdown. Takes a block.
+*   **`content` block:** The content of the floating panel, passed directly to the `render` call.
+
+---
+
+## Development
+
+1.  Clone the repository.
+2.  Run `bundle install`.
+3.  Run `bundle exec rspec` to execute the test suite.
+
+## License
+
+This gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/images/kanso/icons/check-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>

data/app/assets/images/kanso/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

data/app/assets/images/kanso/icons/exclamation-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+</svg>

data/app/assets/images/kanso/icons/exclamation-triangle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+</svg>

data/app/assets/images/kanso/icons/information-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+</svg>

data/app/assets/images/kanso/icons/question-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg>

data/app/assets/images/kanso/icons/x-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>

data/app/assets/images/kanso/icons/x-mark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

data/app/assets/javascripts/kanso/controllers/dropdown_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  toggle(event) {
+    event.stopPropagation()
+
+    if (this.element.classList.contains('active')) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.element.classList.add('active')
+    this.showPanel()
+  }
+
+  close() {
+    if (!this.element.classList.contains('active')) return
+
+    this.element.classList.remove('active')
+    this.hidePanel()
+  }
+
+  closeOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  // --- Animation Helper Methods ---
+
+  showPanel() {
+    this.panelTarget.classList.remove('hidden')
+    this.panelTarget.classList.add('opacity-0', 'scale-95')
+    requestAnimationFrame(() => {
+      this.panelTarget.classList.remove('opacity-0', 'scale-95')
+      this.panelTarget.classList.add('opacity-100', 'scale-100')
+    })
+  }
+
+  hidePanel() {
+    this.panelTarget.classList.remove('opacity-100', 'scale-100')
+    this.panelTarget.classList.add('opacity-0', 'scale-95')
+    setTimeout(() => {
+      this.panelTarget.classList.add('hidden')
+    }, 100)
+  }
+}

data/app/assets/javascripts/kanso/controllers/form_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static target = [ "errorField", "errorMessage" ]
+
+  errorFieldTargetConnected(element) {
+    if (document.activeElement === document.body || document.activeElement === this.element) {
+      element.focus();
+    }
+  }
+
+  errorMessageTargetConnected(element) {
+    requestAnimationFrame(() => {
+      element.classList.remove("opacity-0", "-translate-y-2");
+    });
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+import { enter, leave } from "transition";
+
+export default class extends Controller {
+  static targets = ["container", "backdrop", "panel"];
+
+  connect() {
+    this.clickedOnBackdrop = false;
+  }
+
+  backdropMousedown(event) {
+    if (event.target === this.backdropTarget) {
+      this.clickedOnBackdrop = true;
+    }
+  }
+
+  backdropMouseup(event) {
+    if (this.clickedOnBackdrop && event.target === this.backdropTarget) {
+      this.close(event);
+    }
+    this.clickedOnBackdrop = false;
+  }
+
+  open(event) {
+    event.preventDefault();
+
+    this.triggerElement = event.currentTarget;
+    this.element.classList.add("active");
+    this.containerTarget.classList.remove("hidden");
+
+    enter(this.backdropTarget);
+    enter(this.panelTarget);
+  }
+
+  close(event) {
+    if (!this.element.classList.contains("active")) return;
+    event.preventDefault();
+
+    Promise.all([
+      leave(this.panelTarget),
+      leave(this.backdropTarget)
+    ]).then( () => {
+      this.element.classList.remove("active");
+      this.containerTarget.classList.add("hidden");
+      this.triggerElement?.focus();
+    });
+  }
+}

data/app/assets/javascripts/kanso/controllers/notification_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 5000 }
+  }
+
+  connect() {
+    this.animateIn();
+
+    this.timeout = setTimeout(() => {
+      this.close();
+    }, this.durationValue);
+  }
+
+  animateIn() {
+    requestAnimationFrame(() => {
+      this.element.classList.remove('opacity-0', 'translate-x-full');
+    });
+  }
+
+  close() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+
+    this.animateOut();
+  }
+
+  animateOut() {
+    this.element.classList.add('opacity-0', 'transform', 'scale-95');
+
+    this.element.addEventListener('transitionend', () => {
+      this.element.remove();
+    }, { once: true });
+  }
+
+  disconnect() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+}

data/app/assets/javascripts/kanso/helpers/transition.js

@@ -0,0 +1,49 @@
+function getTransitionClasses(element, stage) {
+  const from = element.dataset[`transition${capitalize(stage)}From`] || '';
+  const to = element.dataset[`transition${capitalize(stage)}To`] || '';
+  return {
+    from: from.split(' ').filter(Boolean),
+    to: to.split(' ').filter(Boolean)
+  };
+}
+
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function enter(element) {
+  const classes = getTransitionClasses(element, 'enter');
+
+  return new Promise(resolve => {
+    element.classList.remove('hidden');
+    element.classList.add(...classes.from);
+
+    requestAnimationFrame(() => {
+      element.classList.remove(...classes.from);
+      element.classList.add(...classes.to);
+
+      element.addEventListener('transitionend', () => {
+        resolve();
+      }, { once: true });
+    });
+  });
+}
+
+export function leave(element) {
+  const classes = getTransitionClasses(element, 'leave');
+
+  return new Promise(resolve => {
+    element.classList.add(...classes.from);
+
+    requestAnimationFrame(() => {
+      element.classList.remove(...classes.from);
+      element.classList.add(...classes.to);
+
+      element.addEventListener('transitionend', () => {
+        element.classList.add('hidden');
+        element.classList.remove(...classes.to);
+        resolve();
+      }, { once: true });
+    });
+  });
+}