lostcoords-ui 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be63d4a81a906b754a7dda9d321d5e0d79b45ac4ca18b39dc3e542d8b10a9822
-  data.tar.gz: 2073ae1b254f4f6aa61c4665bf1d3e4123d756b0bcfdb345ee1f5182452f6c14
+  metadata.gz: 471fb41889b06f5e2adebcead43c299a7da5930df990e1c021c16276d35b80a9
+  data.tar.gz: 5daa36f87b519492932c134a51756b6ad84767057f1c49157e5e8a1dc23d7e20
 SHA512:
-  metadata.gz: 7c00c795e03e402e554532c542b4d6ac748b9efb61dad9e057b5698a99a70ac9f49671f211ce7fd467d5b2d12693d63d2243583f6bd94bd454da2cd24b77ba13
-  data.tar.gz: 9333e9c1cdf9a7e7a35ca00ad411be173578203af5c82deedd1f432e812361a9b01f22e74f5234aae75351a1e115e57cb1675b3b76239c6eae770a89106144d7
+  metadata.gz: a596e626cb38bb949e96a6ed087e0566ff5a874dbf8d5c6d23e1e631579a22e2b5f3f9eaa85afd370856d2639ce39393746c3b45954c38d149a1b558755442b4
+  data.tar.gz: 3cb8ebe401d0ffbf1cc2626cd9f98a4ec002e6715fcb189cd6329e5cddc3879ecd0149c21cdba1ffa747dd745bad31e0c49f7d11e90a707ac2f784f4f30fc38c

data/README.md

@@ -21,7 +21,7 @@ its gem version, so publishing a library update does not upgrade consumers.
 ## Install
 
 ```ruby
-gem "lostcoords-ui", "~> 0.6.0"
+gem "lostcoords-ui", "~> 0.7.0"
 ```
 
 The engine adds its rendering helpers to host views, its JavaScript to the asset paths and its pins to
@@ -242,7 +242,7 @@ Use `--lc-card-bg`, `--lc-card-border`, `--lc-card-radius` and `--lc-card-shadow
 Badge, icon badge, Alert and Toast share `neutral`, `primary`, `success`, `warning` and `destructive` tones.
 
 `lc_toggle` renders a pressed button. Use `lc_toggle_group` with `lc_toggle_group_item` for mutually exclusive
-choices and a native submitted value. Navigation uses `lc_button_link_to` and `aria-current`, so links keep their native behavior.
+choices and a native submitted value; it is a radiogroup of radio buttons to assistive technology. Navigation uses `lc_button_link_to` and `aria-current`, so links keep their native behavior.
 `lc_collapsible` expands content through a native `<details>` element. `lc_alert` renders persistent inline feedback;
 `lc_toast` adds timed dismissal.
 
@@ -360,7 +360,7 @@ Every interactive component works from the keyboard without extra code:
 |---|---|
 | Menu | Arrow Down or Up on the button opens on the first or last item. Arrows move and wrap, Home and End jump, a letter jumps to the next item that starts with it, Enter or Space activates, Escape closes and returns focus. |
 | Tabs | Arrows along the tab list's orientation, Home and End. Automatic tabs select on focus; manual tabs on Enter or Space. |
-| Toggle group | One Tab stop. All four arrows move and select, wrapping; Left and Right follow the text direction. |
+| Toggle group | One Tab stop. All four arrows move and select, wrapping, as native radios do; Left and Right follow the text direction. |
 | Emoji picker | Arrow Down from the search enters the grid, arrows move through it by row, Arrow Up from the top row returns to the search, and Enter in the search picks the best match. The grid is one Tab stop. |
 | Dialogs, sheets, popovers, menus, tooltips | Escape closes the topmost one and returns focus to what opened it; an open tooltip closes before the menu or dialog around it. Escape in a search field with text clears it first. |
 
@@ -405,6 +405,11 @@ ordered by `--lc-z-popover`, `--lc-z-overlay` and `--lc-z-toast`.
 <%= turbo_stream.append "toasts" do %><%= lc_toast "Project saved." %><% end %>
 ```
 
+While a modal dialog or sheet is open the page behind it can't scroll: the body is pinned with
+`position: fixed` and marked `data-modal-scroll-lock="true"`, so `window.scrollY` reads 0 until it
+closes. Scroll-driven chrome, such as a header that fills in once the page scrolls, should keep its
+state while that attribute is set; the body's `--lc-scroll-lock-y` holds the real offset.
+
 Two in-page layers remain: `z-sticky` keeps app chrome such as a sticky header above content, and
 `z-raised` lifts an element over its neighbours. Put `isolate` on the main content area, so any z-index
 inside it stays below the chrome. Tailwind drops a `z-*` class it can't resolve without a warning, so
@@ -614,6 +619,9 @@ bin/rails server            # the dummy app in test/dummy
 bin/rails tailwindcss:build
 bin/test
 bin/lint
+npx playwright install chromium   # once
+bin/browser-test            # every suite in test/browser, headless, against its own docs server
+bin/browser-test sheets     # one suite; BASE_URL=https://ui.localhost reuses a running server
 ```
 
 The icon catalog and its MIT license live in `vendor/heroicons`. Regenerate them from the pinned

data/app/assets/tailwind/lostcoords/ui/popover.css

@@ -21,55 +21,3 @@
     }
   }
 }
-
-@layer components {
-  /* Desktop: the .lc-sheet becomes an anchored popover instead of a bottom sheet. */
-  @media (width >= 40rem) {
-    .lc-sheet--anchored {
-      @apply lc-popover-shell;
-
-      display: none;
-      flex-direction: column;
-      position: absolute;
-      inset-block: calc(100% + --spacing(2)) auto;
-      inset-inline: auto 0;
-      inline-size: min(24rem, calc(100vw - --spacing(8)));
-      max-block-size: min(28rem, calc(100vh - --spacing(24)));
-      padding-block-end: 0;
-      border-radius: var(--radius-3xl);
-      pointer-events: auto;
-
-      &[data-open] {
-        display: flex;
-      }
-    }
-  }
-
-  /* Enter/exit for small overlays, whichever way they open: a [hidden] toggle
-     (amount calculator, colour picker), the Popover API (phone nav menus) or a
-     modal <dialog>. The closed state is the exit pose, so close animates too;
-     allow-discrete holds display/overlay until it ends. --lc-pop-y sets the
-     direction: popovers drop from their trigger, dialogs rise. */
-  .lc-popover-pop {
-    --lc-pop-from: translateY(var(--lc-pop-y, -0.25rem)) scale(0.96);
-
-    transform-origin: var(--lc-pop-origin, top);
-    transition:
-      opacity 160ms var(--lc-ease-out-expo),
-      transform 240ms var(--lc-ease-out-expo),
-      display 240ms allow-discrete,
-      overlay 240ms allow-discrete;
-
-    &:is([hidden], [popover]:not(:popover-open), dialog:not([open])) {
-      opacity: 0;
-      transform: var(--lc-pop-from);
-    }
-
-    &:is(:not([hidden], [popover], dialog), :popover-open, dialog[open]) {
-      @starting-style {
-        opacity: 0;
-        transform: var(--lc-pop-from);
-      }
-    }
-  }
-}

data/app/assets/tailwind/lostcoords/ui/sheet.css

@@ -1,65 +1,5 @@
 @layer components {
   @media (width < 40rem) {
-    .lc-sheet {
-      position: fixed;
-
-      /* Anchored from the top edge at the screen height it opened at
-         (lc-sheet), then lifted by its own height. In-app browsers
-         (Brave, Chrome) resize the page under the keyboard; anything hung
-         from the bottom edge jumps a frame as they do, but the top holds. */
-      inset: var(--lc-sheet-floor, 100dvh) 0 auto;
-      translate: 0 -100%;
-      margin: 0;
-      inline-size: 100%;
-      max-block-size: calc(var(--lc-sheet-floor, 100dvh) * 0.9);
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding-block-end: max(env(safe-area-inset-bottom), 1rem);
-      border: 1px solid var(--lc-glass-edge);
-      border-start-start-radius: var(--radius-3xl);
-      border-start-end-radius: var(--radius-3xl);
-
-      /* Published as a variable, not just applied, because the sticky chrome
-         that rides on top of the sheet — the grabber bar, the pinned action
-         row — has to paint the *same* surface or it reads as a seam. In dark
-         mode the sheet is a lightened paper-2/paper-3 mix while --background is
-         0.045 lightness darker, which is exactly the band you could see. */
-      --lc-sheet-bg: var(--background);
-      @supports (background: light-dark(white, black)) {
-        --lc-sheet-bg: light-dark(var(--background), color-mix(in oklab, var(--muted) 92%, var(--accent)));
-      }
-      background: var(--lc-sheet-bg);
-      color: var(--foreground);
-      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
-      transform: translateY(var(--lc-sheet-offscreen));
-      transition:
-        transform var(--lc-sheet-duration) var(--lc-ease-sheet),
-        display var(--lc-sheet-duration) allow-discrete,
-        overlay var(--lc-sheet-duration) allow-discrete;
-    }
-
-    /* Popover-API reveal (currency): top layer drives display, so showPopover()/
-       hidePopover() animate the slide both ways, with a native ::backdrop. */
-    .lc-sheet[popover] { display: none; flex-direction: column; max-block-size: min(calc(var(--lc-sheet-floor, 100svh) * 0.72), 34rem); }
-    .lc-sheet[popover]:popover-open {
-      display: flex;
-      transform: translateY(0);
-
-      @starting-style { transform: translateY(var(--lc-sheet-offscreen)); }
-    }
-    .lc-sheet[popover]::backdrop {
-      background: var(--lc-scrim);
-      backdrop-filter: blur(2px);
-      opacity: 0;
-      transition:
-        opacity var(--lc-sheet-duration) var(--lc-ease-sheet),
-        display var(--lc-sheet-duration) allow-discrete,
-        overlay var(--lc-sheet-duration) allow-discrete;
-
-      @media (prefers-reduced-motion: reduce) { transition: none; }
-    }
-    .lc-sheet[popover]:popover-open::backdrop { opacity: 1; @starting-style { opacity: 0; } }
-
     /* UIKit's 36×5 grabber. */
     :is([data-lc-sheet-target~="handle"], dialog[data-controller~="lc-sheet"])::before {
       content: "";
@@ -87,7 +27,7 @@
 
       position: fixed;
 
-      /* Anchored from the top edge, like .lc-sheet: the keyboard covers it and
+      /* Anchored from the top edge: the keyboard covers it and
          nothing moves. */
       inset: calc(var(--lc-sheet-floor, 100dvh) - var(--lc-sheet-gap)) 0 auto;
       translate: 0 -100%;

data/app/helpers/lostcoords/ui/form_helper.rb

@@ -7,12 +7,13 @@ module Lostcoords::Ui
       "lc-press inline-flex items-center justify-center gap-1.5 whitespace-nowrap " \
       "h-control-sm rounded-xl border-0 bg-transparent " \
       "px-3 font-sans text-label cursor-pointer no-underline " \
-      "text-muted-foreground hover:text-foreground " \
+      "text-muted-foreground not-disabled:hover:text-foreground " \
       "aria-selected:bg-background aria-selected:text-foreground " \
+      "aria-checked:bg-background aria-checked:text-foreground " \
       "aria-pressed:bg-background aria-pressed:text-foreground " \
       "aria-[current]:not-aria-[current=false]:bg-background aria-[current]:not-aria-[current=false]:text-foreground " \
       "transition-[background-color,color,box-shadow,transform] duration-(--lc-motion-quick) ease-(--lc-ease-out) " \
-      "disabled:opacity-40 disabled:pointer-events-none " \
+      "disabled:cursor-not-allowed disabled:text-[color-mix(in_oklab,var(--foreground)_38%,transparent)] " \
       "[&_svg]:size-[1.1em] [&_svg]:shrink-0"
 
     TOGGLE_GROUP_ITEM_ACTIVE = "bg-background text-foreground hover:text-foreground"

data/app/helpers/lostcoords/ui/structures_helper.rb

@@ -35,10 +35,12 @@ module Lostcoords::Ui
       end
     end
 
+    # One choice from a few options, as a segmented control. Arrows move and select, like native radios,
+    # so it is a radiogroup of radio buttons to assistive technology.
     def lc_toggle_group(label:, name: nil, value: nil, **attributes, &block)
       lc_label!(label, :label)
-      defaults = { class: lc_toggle_group_class, role: "group", aria: { label: label }, data: { slot: "toggle-group", controller: "lc-selection", action: "click->lc-selection#select keydown->lc-selection#navigate", lc_selection_value_value: value } }
-      tag.div(**lc_attributes(defaults, attributes, { role: "group", aria: { label: label } })) do
+      defaults = { class: lc_toggle_group_class, role: "radiogroup", aria: { label: label }, data: { slot: "toggle-group", controller: "lc-selection", action: "click->lc-selection#select keydown->lc-selection#navigate", lc_selection_value_value: value } }
+      tag.div(**lc_attributes(defaults, attributes, { role: "radiogroup", aria: { label: label } })) do
         safe_join([ (hidden_field_tag(name, value, data: { lc_selection_target: "input" }) if name), (capture(&block) if block) ].compact)
       end
     end
@@ -46,8 +48,8 @@ module Lostcoords::Ui
     def lc_toggle_group_item(label = nil, value: nil, selected: false, **attributes, &block)
       value ||= label
       lc_label!(value, :value)
-      defaults = { class: lc_toggle_group_item_class, type: "button", aria: { pressed: selected }, data: { slot: "toggle-group-item", lc_selection_target: "option", value: value } }
-      required = { type: "button", data: { lc_selection_target: "option", value: value } }
+      defaults = { class: lc_toggle_group_item_class, aria: { checked: selected }, data: { slot: "toggle-group-item" } }
+      required = { type: "button", role: "radio", data: { lc_selection_target: "option", value: value } }
       tag.button(block ? capture(&block) : label, **lc_attributes(defaults, attributes, required))
     end
 

data/app/javascript/lostcoords/ui/controllers/lc_selection_controller.js

@@ -9,7 +9,7 @@ export default class extends Controller {
     const selected = this.options.find((option) =>
       this.hasValueValue
         ? option.dataset.value === this.valueValue
-        : option.getAttribute("aria-pressed") === "true",
+        : option.getAttribute("aria-checked") === "true",
     )
     this.initialOption = selected || this.options[0]
     this.apply(this.initialOption)
@@ -41,7 +41,7 @@ export default class extends Controller {
 
   apply(selected) {
     for (const option of this.optionTargets) {
-      option.setAttribute("aria-pressed", String(option === selected))
+      option.setAttribute("aria-checked", String(option === selected))
       option.tabIndex = option === selected ? 0 : -1
     }
     if (this.hasInputTarget) this.inputTarget.value = selected?.dataset.value || ""

data/app/javascript/lostcoords/ui/controllers/lc_sheet_controller.js

@@ -155,8 +155,11 @@ export default class extends Controller {
     if (this.gesture?.dragging) this.track(event.clientY, event.timeStamp)
   }
 
-  onPointerUp() {
+  // A mouse drag that ends off the sheet is followed by a click on the
+  // <dialog> itself, which reads as a backdrop click and would close it.
+  onPointerUp(event) {
     this.stopMouseTracking()
+    if (this.gesture && Math.abs(event.clientY - this.gesture.startY) > 4) swallowNextClick()
     this.onTouchEnd()
   }
 
@@ -420,3 +423,12 @@ export default class extends Controller {
     return isSheetViewport()
   }
 }
+
+function swallowNextClick() {
+  const swallow = (event) => {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+  window.addEventListener("click", swallow, { capture: true, once: true })
+  setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0)
+}

data/lib/lostcoords/ui/form_builder.rb

@@ -1,4 +1,13 @@
 module Lostcoords::Ui
+  # Rails wraps a field with errors in <div class="field_with_errors">. Controls this builder renders show
+  # errors themselves, so the wrapper is skipped while it renders; other forms keep Rails' behaviour.
+  module SkipsFieldErrorWrapper
+    def error_wrapping(html_tag)
+      @template_object.instance_variable_get(:@lc_skip_field_error_wrapper) ? html_tag : super
+    end
+  end
+  ActionView::Helpers::Tags::Base.prepend(SkipsFieldErrorWrapper)
+
   # Rails form builder that renders the library's controls and connects model errors to them.
   #
   #   <%= lc_form_with model: @project do |form| %>
@@ -16,6 +25,21 @@ module Lostcoords::Ui
       date_field time_field datetime_field datetime_local_field month_field week_field
     ].freeze
 
+    # Every helper that renders a control, wrapped so Rails' error wrapper stays out of its markup.
+    WRAPPED = [ *field_helpers, :select, :collection_select, :grouped_collection_select, :time_zone_select,
+      :collection_check_boxes, :collection_radio_buttons, :switch, :choice ].uniq - %i[label fields_for fields hidden_field]
+
+    module WithoutFieldErrorWrapper
+      WRAPPED.each do |helper|
+        module_eval <<~RUBY, __FILE__, __LINE__ + 1
+          def #{helper}(...)
+            without_field_error_wrapper { super(...) }
+          end
+        RUBY
+      end
+    end
+    prepend WithoutFieldErrorWrapper
+
     INPUTS.each do |selector|
       define_method(selector) do |method, options = {}|
         size = control_size!(options)
@@ -95,6 +119,14 @@ module Lostcoords::Ui
     end
 
     private
+      def without_field_error_wrapper
+        previous = @template.instance_variable_get(:@lc_skip_field_error_wrapper)
+        @template.instance_variable_set(:@lc_skip_field_error_wrapper, true)
+        yield
+      ensure
+        @template.instance_variable_set(:@lc_skip_field_error_wrapper, previous)
+      end
+
       def control_size!(options)
         options[:size].is_a?(Symbol) || options[:size].is_a?(String) && options[:size].match?(/\A[a-z]+\z/) ? options.delete(:size).to_sym : :md
       end

data/lib/lostcoords/ui/version.rb

@@ -1,5 +1,5 @@
 module Lostcoords
   module Ui
-    VERSION = "0.6.0"
+    VERSION = "0.7.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lostcoords-ui
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Lost Coordinates