kiso 0.2.2.pre → 0.3.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfca4f2a1e45d61e45de52c22a96428de18c04643860ea07c0913d2c29d3c397
-  data.tar.gz: e46ba40a7fe00c0818958742e745058e6cec5990e2b195df085cc2b3e8242477
+  metadata.gz: 17ae0456b44e65c4a1f0c0fc7a0fb854daca4af8bf933d13d0fa2a3e78dc0b5d
+  data.tar.gz: 5dad006edca36a6d23822274557de73667eb8bd8aa69aa575037859ed1983742
 SHA512:
-  metadata.gz: 8ca9dcd4857e5f4eb41086239901a6c347314432ba75189372642dba08d6975fe9caa5466635e94e013f26c858a84ff5af64e2701dd75a3ef946e560b3025011
-  data.tar.gz: 75689ce3b7a06d3377d74ed37f7d5fe1d44c95d19549b6992e5c66bd3b78a8b07e924bbc2ba26a15f02b861f74986565c124369fb7648de5b5655b060dd2d4f6
+  metadata.gz: 490e5777fbc1fd030736c6c7866b3e39855699d7f71be28af41c9fc6bb2cbd7fd6b793d9d302e35886908ce663ddcc98e171ffd1c3419eebf8c6577073276c12
+  data.tar.gz: caa47f1734d26450d7163108cefa70438d75e8ef1201ffc1b4123eb4e5bb5e22aa5f7b545fddad657235d79d18e62aacb05818b6f0aa87922baa20c2d3d66bbb

data/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0.pre] - 2026-03-03
+
+### Added
+
+- Dialog component — modal dialog wrapping the native `<dialog>` element with `showModal()` for focus trapping and backdrop. Sub-parts: header, title, description, body, footer, close. Entry/exit CSS animations with reduced-motion support. Stimulus controller for programmatic open/close.
+- Alert Dialog component — confirmation dialog that requires an explicit user action (`role="alertdialog"`). Cannot be dismissed by Escape or backdrop click. Sub-parts: header, title, description, media, footer, action, cancel. Size variants (default/sm) with responsive media grid layout. Auto-linked `aria-labelledby` and `aria-describedby`.
+- AspectRatio component — lightweight wrapper that applies an aspect ratio via inline style. Accepts any `ratio:` value (defaults to 16:9).
+- Slider component — range input with track, thumb, and fill styling. Supports min/max/step/value, three sizes (sm/md/lg), and disabled state. Stimulus controller for real-time value display.
+- Empty component `:actions` slot for placing buttons below the description.
+- Button `method:` prop — renders a Rails `button_to` form for DELETE/POST/PUT/PATCH actions while preserving all Button styling.
+- Icons guide added to documentation site.
+
+### Fixed
+
+- InputOTP slots missing visible border when a separator is placed inside a group.
+- Sidebar header and footer now use `flex-col` layout matching shadcn structure.
+
 ## [0.2.2.pre] - 2026-03-03
 
 ### Fixed
@@ -68,7 +85,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Lookbook component previews
 - Bridgetown documentation site
 
-[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.2.2.pre...HEAD
+[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.3.0.pre...HEAD
+[0.3.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.3.0.pre
 [0.2.2.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.2.pre
 [0.2.1.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.1.pre
 [0.2.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.0.pre

data/app/assets/tailwind/kiso/dialog.css

@@ -0,0 +1,46 @@
+/* Dialog and Alert Dialog entry/exit animations and scroll lock. */
+
+/* Entry */
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] {
+  animation: kiso-dialog-backdrop-in 200ms ease-out;
+}
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+  animation: kiso-dialog-content-in 200ms ease-out;
+}
+
+/* Exit — data-state="closing" set by Stimulus before calling .close() */
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] {
+  animation: kiso-dialog-backdrop-out 200ms ease-in forwards;
+}
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+  animation: kiso-dialog-content-out 200ms ease-in forwards;
+}
+
+@keyframes kiso-dialog-backdrop-in {
+  from { opacity: 0; }
+}
+@keyframes kiso-dialog-backdrop-out {
+  to { opacity: 0; }
+}
+@keyframes kiso-dialog-content-in {
+  from { opacity: 0; transform: scale(0.95); }
+}
+@keyframes kiso-dialog-content-out {
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+/* Scroll lock — prevent body scroll when modal dialog is open */
+html:has(:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open]:modal) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open],
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]),
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"],
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+    animation: none;
+  }
+}

data/app/assets/tailwind/kiso/engine.css

@@ -7,7 +7,9 @@
 @import "./radio-group.css";
 @import "./color-mode.css";
 @import "./dashboard.css";
+@import "./dialog.css";
 @import "./input-otp.css";
+@import "./slider.css";
 
 /* Scan Kiso's own files so host apps don't need to know the gem's internals.
    Paths are relative to THIS file (app/assets/tailwind/kiso/engine.css).

data/app/assets/tailwind/kiso/input-otp.css

@@ -8,3 +8,20 @@
   0%, 70%, 100% { opacity: 1; }
   20%, 50% { opacity: 0; }
 }
+
+/* Separator-adjacent rounding — when a separator sits inside a group,
+   round the slot edges next to it so each visual cluster has proper corners.
+   Also reset the negative margin so the slot after a separator starts fresh. */
+
+@layer utilities {
+  [data-slot="input-otp-slot"]:has(+ [data-slot="input-otp-separator"]) {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  [data-slot="input-otp-separator"] + [data-slot="input-otp-slot"] {
+    margin-left: 0;
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+}

data/app/assets/tailwind/kiso/slider.css

@@ -0,0 +1,27 @@
+@layer components {
+  /* Center the thumb over its left % position */
+  [data-slot="slider-thumb"] {
+    transform: translateX(-50%);
+    top: 50%;
+    margin-top: calc(-1 * var(--thumb-offset, 0.5rem));
+  }
+
+  /* Size-specific thumb offsets (half the thumb size) */
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-3) {
+    --thumb-offset: 0.375rem;
+  }
+
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-4) {
+    --thumb-offset: 0.5rem;
+  }
+
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-5) {
+    --thumb-offset: 0.625rem;
+  }
+
+  /* Disabled state */
+  [data-slot="slider"]:has(input:disabled) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

data/app/javascript/controllers/kiso/dialog_controller.js

@@ -0,0 +1,140 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Dialog controller. Wraps the native `<dialog>` element with `showModal()`
+ * for proper focus trapping, backdrop, and Escape-to-close behavior.
+ *
+ * The `<dialog>` element itself is the controller root. It acts as the
+ * backdrop overlay (fixed inset-0 with bg-black/50). A content wrapper
+ * inside provides the centered panel.
+ *
+ * @example
+ *   <dialog data-controller="kiso--dialog"
+ *           data-kiso--dialog-open-value="true"
+ *           data-slot="dialog">
+ *     <div data-slot="dialog-content">
+ *       <button data-action="kiso--dialog#close" data-slot="dialog-close">×</button>
+ *       <h2>Title</h2>
+ *       <p>Description</p>
+ *     </div>
+ *   </dialog>
+ *
+ *   <!-- Trigger from outside -->
+ *   <button data-action="kiso--dialog#open">Open</button>
+ *
+ * @property {boolean} openValue - Whether the dialog should open on connect (default: false)
+ * @property {boolean} dismissableValue - Whether backdrop click and Escape close the dialog (default: true). Set to false for alert dialogs.
+ * @fires kiso--dialog:open - Dispatched when the dialog opens
+ * @fires kiso--dialog:close - Dispatched when the dialog closes
+ */
+export default class extends Controller {
+  static values = {
+    open: { type: Boolean, default: false },
+    dismissable: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this._handleBackdropClick = this._handleBackdropClick.bind(this)
+    this._handleCancel = this._handleCancel.bind(this)
+    this.element.addEventListener("click", this._handleBackdropClick)
+    this.element.addEventListener("cancel", this._handleCancel)
+
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    this._clearCloseTimers()
+    this.element.removeEventListener("click", this._handleBackdropClick)
+    this.element.removeEventListener("cancel", this._handleCancel)
+  }
+
+  /**
+   * Opens the dialog as a modal via `showModal()`.
+   */
+  open() {
+    if (this.element.open) return
+    this.element.showModal()
+    this.dispatch("open")
+  }
+
+  /**
+   * Closes the dialog with an exit animation. Sets `data-state="closing"`
+   * to trigger the CSS animation, then calls `dialog.close()` after
+   * the animation completes.
+   */
+  close() {
+    if (!this.element.open || this._isClosing) return
+    this._isClosing = true
+
+    this.element.dataset.state = "closing"
+
+    this._onCloseEnd = () => {
+      this._clearCloseTimers()
+      delete this.element.dataset.state
+      this._isClosing = false
+      this.element.close()
+      this.dispatch("close")
+    }
+    this.element.addEventListener("animationend", this._onCloseEnd)
+
+    // Fallback if no animation runs (e.g. prefers-reduced-motion)
+    this._closingTimeout = setTimeout(this._onCloseEnd, 250)
+  }
+
+  /**
+   * Responds to Stimulus Value changes for external open/close control.
+   */
+  openValueChanged() {
+    // Skip during connect — handled in connect() directly
+    if (!this.element.isConnected) return
+
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  /**
+   * Removes pending close animation listeners and timeouts.
+   *
+   * @private
+   */
+  _clearCloseTimers() {
+    clearTimeout(this._closingTimeout)
+    if (this._onCloseEnd) {
+      this.element.removeEventListener("animationend", this._onCloseEnd)
+      this._onCloseEnd = null
+    }
+  }
+
+  /**
+   * Closes the dialog when clicking the backdrop (the `<dialog>` element
+   * itself, outside the content panel).
+   *
+   * @param {MouseEvent} event
+   * @private
+   */
+  _handleBackdropClick(event) {
+    if (!this.dismissableValue) return
+    if (event.target === this.element) {
+      this.close()
+    }
+  }
+
+  /**
+   * Intercepts the native `cancel` event (fired on Escape) to route
+   * through our `close()` method for exit animation.
+   *
+   * @param {Event} event
+   * @private
+   */
+  _handleCancel(event) {
+    event.preventDefault()
+    if (this.dismissableValue) {
+      this.close()
+    }
+  }
+}

data/app/javascript/controllers/kiso/index.js

@@ -1,6 +1,7 @@
 import KisoComboboxController from "./combobox_controller.js"
 import KisoCommandController from "./command_controller.js"
 import KisoCommandDialogController from "./command_dialog_controller.js"
+import KisoDialogController from "./dialog_controller.js"
 import KisoDropdownMenuController from "./dropdown_menu_controller.js"
 import KisoInputOtpController from "./input_otp_controller.js"
 import KisoPopoverController from "./popover_controller.js"
@@ -15,6 +16,7 @@ const KisoUi = {
     application.register("kiso--combobox", KisoComboboxController)
     application.register("kiso--command", KisoCommandController)
     application.register("kiso--command-dialog", KisoCommandDialogController)
+    application.register("kiso--dialog", KisoDialogController)
     application.register("kiso--dropdown-menu", KisoDropdownMenuController)
     application.register("kiso--input-otp", KisoInputOtpController)
     application.register("kiso--popover", KisoPopoverController)
@@ -31,6 +33,7 @@ export {
   KisoComboboxController,
   KisoCommandController,
   KisoCommandDialogController,
+  KisoDialogController,
   KisoDropdownMenuController,
   KisoInputOtpController,
   KisoPopoverController,

data/app/javascript/controllers/kiso/slider_controller.js

@@ -0,0 +1,276 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Connects a visual slider (track, range, thumb) to a hidden `<input type="range">`
+ * for form submission and accessibility.
+ *
+ * The hidden input stores the value for form submission. The thumb element has
+ * `role="slider"` with ARIA attributes for screen readers. Mouse drag, touch drag,
+ * track click, and keyboard navigation all update both the visual position and the
+ * hidden input value.
+ *
+ * @example
+ *   <div data-controller="kiso--slider"
+ *        data-kiso--slider-min-value="0"
+ *        data-kiso--slider-max-value="100"
+ *        data-kiso--slider-step-value="1">
+ *     <input type="range" data-kiso--slider-target="input" class="sr-only"
+ *            min="0" max="100" step="1" value="50">
+ *     <div data-kiso--slider-target="track" data-slot="slider-track">
+ *       <div data-kiso--slider-target="range" data-slot="slider-range"
+ *            style="width: 50%"></div>
+ *     </div>
+ *     <div data-kiso--slider-target="thumb" data-slot="slider-thumb"
+ *          role="slider" tabindex="0"
+ *          aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"
+ *          style="position: absolute; left: 50%"></div>
+ *   </div>
+ *
+ * @property {HTMLInputElement} inputTarget - The hidden range input for form submission
+ * @property {HTMLElement} trackTarget - The background track element
+ * @property {HTMLElement} rangeTarget - The filled range portion
+ * @property {HTMLElement} thumbTarget - The draggable thumb handle
+ * @property {Number} minValue - Minimum slider value
+ * @property {Number} maxValue - Maximum slider value
+ * @property {Number} stepValue - Step increment
+ *
+ * @fires kiso--slider:change - When the slider value changes.
+ *   Detail: `{ value: number }`
+ */
+export default class extends Controller {
+  static targets = ["input", "track", "range", "thumb"]
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+  }
+
+  /**
+   * Binds event listeners for mouse, touch, keyboard, and track click.
+   */
+  connect() {
+    this._handleMouseDown = this._handleMouseDown.bind(this)
+    this._handleMouseMove = this._handleMouseMove.bind(this)
+    this._handleMouseUp = this._handleMouseUp.bind(this)
+    this._handleTouchStart = this._handleTouchStart.bind(this)
+    this._handleTouchMove = this._handleTouchMove.bind(this)
+    this._handleTouchEnd = this._handleTouchEnd.bind(this)
+    this._handleTrackClick = this._handleTrackClick.bind(this)
+    this._handleKeyDown = this._handleKeyDown.bind(this)
+
+    this.thumbTarget.addEventListener("mousedown", this._handleMouseDown)
+    this.thumbTarget.addEventListener("touchstart", this._handleTouchStart, { passive: false })
+    this.thumbTarget.addEventListener("keydown", this._handleKeyDown)
+    this.trackTarget.addEventListener("click", this._handleTrackClick)
+
+    this._dragging = false
+  }
+
+  /**
+   * Removes all event listeners.
+   */
+  disconnect() {
+    this.thumbTarget.removeEventListener("mousedown", this._handleMouseDown)
+    this.thumbTarget.removeEventListener("touchstart", this._handleTouchStart)
+    this.thumbTarget.removeEventListener("keydown", this._handleKeyDown)
+    this.trackTarget.removeEventListener("click", this._handleTrackClick)
+
+    // Clean up any lingering global listeners from an interrupted drag
+    document.removeEventListener("mousemove", this._handleMouseMove)
+    document.removeEventListener("mouseup", this._handleMouseUp)
+    document.removeEventListener("touchmove", this._handleTouchMove)
+    document.removeEventListener("touchend", this._handleTouchEnd)
+  }
+
+  /**
+   * @returns {boolean} Whether the slider is disabled
+   * @private
+   */
+  get _isDisabled() {
+    return this.inputTarget.disabled
+  }
+
+  /**
+   * Starts mouse drag tracking.
+   *
+   * @param {MouseEvent} event
+   * @private
+   */
+  _handleMouseDown(event) {
+    if (this._isDisabled) return
+    event.preventDefault()
+
+    this._dragging = true
+    document.addEventListener("mousemove", this._handleMouseMove)
+    document.addEventListener("mouseup", this._handleMouseUp)
+    this.thumbTarget.focus()
+  }
+
+  /**
+   * Updates slider position during mouse drag.
+   *
+   * @param {MouseEvent} event
+   * @private
+   */
+  _handleMouseMove(event) {
+    if (!this._dragging) return
+    this._updateFromPointer(event.clientX)
+  }
+
+  /**
+   * Ends mouse drag tracking.
+   *
+   * @private
+   */
+  _handleMouseUp() {
+    this._dragging = false
+    document.removeEventListener("mousemove", this._handleMouseMove)
+    document.removeEventListener("mouseup", this._handleMouseUp)
+  }
+
+  /**
+   * Starts touch drag tracking.
+   *
+   * @param {TouchEvent} event
+   * @private
+   */
+  _handleTouchStart(event) {
+    if (this._isDisabled) return
+    event.preventDefault()
+
+    this._dragging = true
+    document.addEventListener("touchmove", this._handleTouchMove, { passive: false })
+    document.addEventListener("touchend", this._handleTouchEnd)
+    this.thumbTarget.focus()
+  }
+
+  /**
+   * Updates slider position during touch drag.
+   *
+   * @param {TouchEvent} event
+   * @private
+   */
+  _handleTouchMove(event) {
+    if (!this._dragging) return
+    event.preventDefault()
+    this._updateFromPointer(event.touches[0].clientX)
+  }
+
+  /**
+   * Ends touch drag tracking.
+   *
+   * @private
+   */
+  _handleTouchEnd() {
+    this._dragging = false
+    document.removeEventListener("touchmove", this._handleTouchMove)
+    document.removeEventListener("touchend", this._handleTouchEnd)
+  }
+
+  /**
+   * Jumps the thumb to the clicked position on the track.
+   *
+   * @param {MouseEvent} event
+   * @private
+   */
+  _handleTrackClick(event) {
+    if (this._isDisabled) return
+    this._updateFromPointer(event.clientX)
+    this.thumbTarget.focus()
+  }
+
+  /**
+   * Handles keyboard navigation on the thumb.
+   *
+   * Arrow keys adjust by step, Page Up/Down by 10x step, Home/End jump to min/max.
+   *
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  _handleKeyDown(event) {
+    if (this._isDisabled) return
+
+    const current = parseFloat(this.inputTarget.value)
+    const step = this.stepValue
+    let newValue = current
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        newValue = current + step
+        break
+      case "ArrowLeft":
+      case "ArrowDown":
+        newValue = current - step
+        break
+      case "PageUp":
+        newValue = current + step * 10
+        break
+      case "PageDown":
+        newValue = current - step * 10
+        break
+      case "Home":
+        newValue = this.minValue
+        break
+      case "End":
+        newValue = this.maxValue
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    this._setValue(newValue)
+  }
+
+  /**
+   * Calculates value from a pointer's X coordinate relative to the track.
+   *
+   * @param {number} clientX - The pointer's X coordinate
+   * @private
+   */
+  _updateFromPointer(clientX) {
+    const rect = this.trackTarget.getBoundingClientRect()
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+    const rawValue = this.minValue + ratio * (this.maxValue - this.minValue)
+    this._setValue(rawValue)
+  }
+
+  /**
+   * Snaps a value to the nearest step, clamps to min/max, and updates
+   * the hidden input, visual position, and ARIA attributes.
+   *
+   * @param {number} rawValue - The unsnapped value
+   * @private
+   */
+  _setValue(rawValue) {
+    const step = this.stepValue
+    const snapped = Math.round(rawValue / step) * step
+    const clamped = Math.max(this.minValue, Math.min(this.maxValue, snapped))
+
+    // Round to avoid floating point artifacts
+    const decimals = step.toString().includes(".") ? step.toString().split(".")[1].length : 0
+    const value = parseFloat(clamped.toFixed(decimals))
+
+    if (parseFloat(this.inputTarget.value) === value) return
+
+    this.inputTarget.value = value
+    this._updateVisual(value)
+
+    this.dispatch("change", { detail: { value } })
+  }
+
+  /**
+   * Updates the visual position of the range and thumb elements,
+   * and syncs ARIA attributes.
+   *
+   * @param {number} value - The current slider value
+   * @private
+   */
+  _updateVisual(value) {
+    const percent = ((value - this.minValue) / (this.maxValue - this.minValue)) * 100
+    this.rangeTarget.style.width = `${percent}%`
+    this.thumbTarget.style.left = `${percent}%`
+    this.thumbTarget.setAttribute("aria-valuenow", value)
+  }
+}

data/app/views/kiso/components/_alert_dialog.html.erb

@@ -0,0 +1,28 @@
+<%# locals: (open: false, size: :default, css_classes: "", **component_options) %>
+<%
+  # Store the dialog id on the view context so child sub-part partials
+  # (_title, _description) can auto-generate matching aria-labelledby /
+  # aria-describedby id attributes without requiring the caller to pass
+  # the id through each nested kui() call.
+  @_kiso_alert_dialog_id = component_options[:id]
+  aria = {}
+  if @_kiso_alert_dialog_id
+    aria[:labelledby] = "#{@_kiso_alert_dialog_id}-title"
+    aria[:describedby] = "#{@_kiso_alert_dialog_id}-description"
+  end
+%>
+<%= content_tag :dialog,
+    class: Kiso::Themes::AlertDialog.render(class: css_classes),
+    role: "alertdialog",
+    aria: aria,
+    data: kiso_prepare_options(component_options, slot: "alert-dialog",
+      controller: "kiso--dialog",
+      kiso__dialog_open_value: (open ? true : nil),
+      kiso__dialog_dismissable_value: false),
+    **component_options do %>
+  <div class="<%= Kiso::Themes::AlertDialogContent.render(size: size) %>"
+       data-slot="alert-dialog-content"
+       data-size="<%= size %>">
+    <%= yield %>
+  </div>
+<% end %>

data/app/views/kiso/components/_aspect_ratio.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (ratio: 16.0/9, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    style: "aspect-ratio: #{ratio}",
+    class: Kiso::Themes::AspectRatio.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "aspect-ratio"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_button.html.erb

@@ -1,19 +1,33 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
-             type: :button, href: nil, disabled: false,
-             css_classes: "", **component_options) %>
-<% tag_name = href.present? ? :a : :button
-   if tag_name == :a
-     component_options[:href] = href
-     component_options[:"aria-disabled"] = true if disabled
-   else
-     component_options[:type] = type
-     component_options[:disabled] = true if disabled
-   end %>
-<%= content_tag tag_name,
-    class: Kiso::Themes::Button.render(
-      color: color, variant: variant, size: size, block: block,
-      class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "button"),
-    **component_options do %>
-  <%= yield %>
+             type: :button, href: nil, method: nil, disabled: false,
+             form: {}, css_classes: "", **component_options) %>
+<%
+  css = Kiso::Themes::Button.render(
+    color: color, variant: variant, size: size, block: block, class: css_classes)
+  data = kiso_prepare_options(component_options, slot: "button")
+  use_button_to = href.present? && method.present? && method.to_s != "get"
+%>
+<% if use_button_to %>
+  <%= button_to href,
+      method: method,
+      class: css,
+      form_class: "contents",
+      data: data,
+      disabled: disabled || nil,
+      form: form.presence,
+      **component_options do %>
+    <%= yield %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <% component_options[:type] = type
+     component_options[:disabled] = true if disabled %>
+  <%= content_tag :button, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
 <% end %>