bh 6.6.0 → 6.7.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bh
 version: !ruby/object:Gem::Version
-  version: 6.6.0
+  version: 6.7.0
 platform: ruby
 authors:
 - claudiob
@@ -82,7 +82,6 @@ files:
 - app/stylesheets/bh.css
 - app/stylesheets/bh/base.css
 - app/stylesheets/bh/chat.css
-- app/stylesheets/bh/flow.css
 - app/stylesheets/bh/map.css
 - app/stylesheets/bh/pin.css
 - app/stylesheets/bh/search.css
@@ -103,6 +102,8 @@ files:
 - lib/bh.rb
 - lib/bh/engine.rb
 - lib/bh/form_builder.rb
+- lib/bh/form_builder/adornments.rb
+- lib/bh/form_builder/buttons.rb
 - lib/bh/form_builder/comboboxes.rb
 - lib/bh/form_builder/controls.rb
 - lib/bh/form_builder/pins.rb
@@ -110,10 +111,10 @@ files:
 - lib/bh/helpers/chats.rb
 - lib/bh/helpers/chats/asides.rb
 - lib/bh/helpers/chats/asks.rb
+- lib/bh/helpers/confirmations.rb
 - lib/bh/helpers/dialogs.rb
-- lib/bh/helpers/flows.rb
-- lib/bh/helpers/heads.rb
-- lib/bh/helpers/notices.rb
+- lib/bh/helpers/toasts.rb
+- lib/bh/helpers/tooltips.rb
 - lib/bh/message.rb
 - lib/bh/version.rb
 - package.json

data/app/stylesheets/bh/flow.css

@@ -1,94 +0,0 @@
-/* The page `flow` draws: a column taking the rest of the window so the foot rests at the
-   bottom of a tall screen and scrolls into view on a short one, everything centered. */
-.flow { flex: 1; display: flex; flex-direction: column; text-align: center }
-.flow > header { display: flex; justify-content: center; margin-bottom: 2rem }
-.flow > h1 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.02em }
-.flow > p { margin: 0 0 1.5rem }
-/* `display: contents`, so a `button_to` form stops being a box and its button becomes a flex
-   item, which is what lets the middot space evenly between two words. A button in the foot is
-   a word among words: the foot's size, no padding and no height of its own. */
-.flow > footer { flex: none; margin-top: auto; padding-top: 2.5rem; display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; font-size: 0.875rem }
-.flow > footer form { display: contents }
-.flow > footer .btn { font-size: inherit; padding: 0; min-height: 0 }
-@media (max-width: 575px) { .flow > header { margin-bottom: 1.75rem } }
-
-/* The one element on the page allowed a fill, a border and a shadow at once, because it holds
-   the only thing the page is for. As wide as the page said, `--flow-width`, and nine tenths of
-   the page color rather than `opacity`, which would fade the border and the words with it. */
-.flow-card {
-  width: 100%;
-  max-width: var(--flow-width, 75rem);
-  background: color-mix(in srgb, var(--bs-bg-body) 90%, transparent);
-  border: 1px solid var(--bs-primary-border);
-  border-radius: 0.375rem;
-  box-shadow: -0.5rem 1rem 2.25rem -0.75rem rgb(6 22 40 / 40%);
-}
-/* Centered on the controls rather than the form, since a field does not inherit it and a
-   form helper may hard-code `text-start`. */
-/* The card is read down the middle, and so is what a form says about itself: the legend over a
-   group, a submit, a single box a page is nothing but. A row is the exception -- its words and
-   the box under them are read from where they start, since a label centered over the box it
-   names leaves the eye hunting for where each one begins. */
-.flow-card .form-label, .flow-card .form-control, .flow-card .invalid-feedback { text-align: center }
-.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) :is(.flow-field, .form-check),
-.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) .flow-field .form-label,
-.flow-card form:has(.flow-field ~ .flow-field, .form-check ~ .form-check) .flow-field .form-control { text-align: start }
-
-/* A ticked box and the words beside it are a row of two, with room between them: Bootstrap
-   hangs the box in the padding by a negative margin, which puts it under centered words. */
-.flow-card .form-check { display: flex; align-items: start; gap: 1rem; padding-left: 0 }
-.flow-card .form-check .form-check-input { flex: none; margin: 0.25em 0 0 }
-
-/* A group of controls carries its own spacing, and twice as much under it as over: the words
-   over a group belong to it, and even space either side would let them drift between two. */
-.flow-fieldset { margin-block: 1rem 2rem; gap: 1rem }
-
-/* The words and the control they name, as one cell, which is what lets a form be laid out in
-   columns however much markup a control draws for itself. Named for the flow rather than the
-   form: Bootstrap has a `form-field` of its own, whose rules sized our words to themselves and
-   held them at the left of a row they were meant to be centered in. */
-.flow-card .flow-field { display: grid; align-content: start }
-
-/* A card wide enough for two columns takes them, and everything else in the fieldset -- the
-   legend, a submit -- keeps the whole row. The card is what is measured rather than the
-   window, so the narrow card of a sign-in page stays one column on the widest screen. */
-.flow-card { container-type: inline-size }
-@container (min-width: 40rem) {
-  .flow-card fieldset.d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem }
-  .flow-card fieldset.d-grid > :not(.flow-field) { grid-column: 1 / -1 }
-}
-/* A rule between two ways of doing the same thing, with room either side of it: a card is
-   short enough that a thin line needs the space to read as a divide rather than as a scratch. */
-.flow-card hr { margin-block: 2rem }
-
-/* The same edge the card wears, rather than Bootstrap's fainter default. */
-.flow-card .dialog { --bs-dialog-border-color: var(--bs-primary-border) }
-
-/* A card holding something longer than the page takes the rest of the window and scrolls that
-   part inside itself, so the line at its head, whatever sits at its foot and the way out under
-   the card stay in sight however long it gets. A thread is one such thing and says so by its
-   own markup; anything else -- a contract, a table -- says `flow-scroll` on the part that
-   scrolls. `flex: none` before the height: the column is a flex item of `main`, and `flex: 1`
-   would size it to its content and let the page grow and scroll instead. `min-height: 0` down
-   the chain, since a flex item will not shrink below its content without it. The 2rem is the
-   layout's `py-4`, the gutter above and below `main`. A card given a height cannot always
-   honour it -- a short window leaves less room than what does not scroll needs -- so it
-   scrolls whole rather than letting what it holds out past its own edges. */
-.flow:has(.chat-thread, .flow-scroll, .flow-middle) { flex: none; height: calc(100svh - 2rem) }
-.flow-card:has(.chat-thread, .flow-scroll, .flow-middle) { display: flex; flex-direction: column; flex: 1; min-height: 15rem; overflow: auto }
-.flow-card .chat-thread,
-.flow-card > :has(.flow-scroll) { display: flex; flex-direction: column; flex: 1; min-height: 0 }
-.flow-card .chat, .flow-card .flow-scroll { flex: 1; min-height: 0; overflow-y: auto }
-.flow-card .chat-ask { text-align: center }
-/* A bubble reads from its start, though: a flow centers a card's words, and an answer long
-   enough to wrap is a paragraph, which is read down an edge rather than about a middle. */
-.flow-card .chat-bubble { text-align: start }
-
-/* A card standing as tall as those but with little in it: what it holds sits in the middle of
-   it, down as well as across, rather than at the top of a sheet of white. */
-.flow-card .flow-middle { flex: 1; display: flex; flex-direction: column; justify-content: center }
-/* On a phone the card is the page: it breaks out of the gutter with `margin-inline` rather
-   than a width, so it stays in the flow, and loses the side border and the corners with it. */
-@media (width < 768px) {
-  .flow-card:has(.chat-thread) { width: auto; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); border-inline: 0; border-radius: 0 }
-}

data/lib/bh/helpers/flows.rb

@@ -1,49 +0,0 @@
-module Bh
-  module Helpers
-    # The page of a signup flow: a mark over whatever it stands on, a title, a line, one card,
-    # the way out.
-    module Flows
-      # How wide the card is unless a page says otherwise: as wide as a thread, a table or a
-      # contract wants. A page asking one question says a narrower one.
-      WIDTH = '75rem'
-
-      # Draws the page around the card's content: `header` over what the view said in
-      # `content_for` — its `:title`, its `:subtitle`, how wide the card is in `:width` — and
-      # the pieces of `footer` under the card joined by a middot. No header draws no header,
-      # no subtitle no line and an empty footer no foot: a page says only what it has. Every
-      # other option is an attribute of the column, which is where a host names the controller
-      # that paints what the page stands on.
-      def flow(header: nil, footer: [], **options, &)
-        parts = [
-          (tag.header header if header),
-          *bh_flow_words,
-          bh_flow_card(content_for(:width), &),
-          bh_flow_footer(footer),
-        ]
-        classes = class_names 'flow', options[:class]
-
-        tag.div safe_join(parts.compact), class: classes, **options.except(:class)
-      end
-
-    private
-
-      def bh_flow_words
-        [tag.h1(content_for(:title)), (tag.p content_for :subtitle if content_for? :subtitle)]
-      end
-
-      def bh_flow_card(width, &)
-        width = width.presence || WIDTH
-        style = "--flow-width: #{width}" unless width == WIDTH
-
-        tag.div capture(&), class: 'flow-card p-3 md:p-4 mx-auto', style:
-      end
-
-      def bh_flow_footer(pieces)
-        pieces = Array(pieces).compact_blank
-        return if pieces.empty?
-
-        tag.footer safe_join(pieces, tag.span('·', class: 'fg-2', aria: { hidden: true }))
-      end
-    end
-  end
-end

data/lib/bh/helpers/heads.rb

@@ -1,27 +0,0 @@
-module Bh
-  module Helpers
-    # What a page built on Bootstrap 6 puts in its `<head>`.
-    module Heads
-      # One line per tag, each at the depth a head's children sit at in a layout indented
-      # by two: `<html>`, then `<head>`, then these.
-      INDENT = "\n    "
-
-      # The metas Bootstrap and Turbo read, and the stylesheet and script this gem serves.
-      # `color-scheme` is what lets `light dark` follow the system, so most pages need no
-      # theme attribute at all. A page refresh Turbo is sent morphs the page in place and
-      # keeps the scroll, so an answer landing in a thread leaves the reader where they were.
-      # The icon font is the host's to link: which glyphs a page draws is the host's business,
-      # and a gem reaching for somebody else's CDN on its own is not.
-      def bh_head_tags
-        safe_join [
-          tag.meta(name: 'viewport', content: 'width=device-width, initial-scale=1'),
-          tag.meta(name: 'color-scheme', content: 'light dark'),
-          tag.meta(name: 'turbo-refresh-method', content: 'morph'),
-          tag.meta(name: 'turbo-refresh-scroll', content: 'preserve'),
-          tag.link(rel: 'stylesheet', href: "#{Engine::PREFIX}css/bh.css"),
-          tag.script('', type: 'module', src: "#{Engine::PREFIX}js/bh.js"),
-        ], INDENT
-      end
-    end
-  end
-end