@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/src/panel/panel.ts

@@ -26,6 +26,9 @@ export type ViewConfig = Readonly<{
   /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink
    *  bar they print in paper, flat, and ring in their own colour inside their edge. */
   actions?: ReadonlyArray<Html | string>;
+  /** A strip on the head tint between the title bar and the body, for a field that picks what
+   *  the body shows (an area over its tasks). Its labels print in on-head. */
+  shelf?: ReadonlyArray<Html | string>;
   body: ReadonlyArray<Html | string>;
   /** A ruled foot under the body: a note line, then actions pushed right. */
   foot?: ReadonlyArray<Html | string>;
@@ -46,6 +49,7 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
     lead = [],
     meta,
     actions = [],
+    shelf = [],
     body,
     foot = [],
     isFlush = false,
@@ -68,6 +72,7 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
           ...slotView("span", "panel-acts", actions, h),
         ],
       ),
+      ...slotView("div", "panel-shelf", shelf, h),
       ...(isFlush ? body : [h.div([h.Class("panel-body")], body)]),
       ...slotView("div", "panel-foot", foot, h),
     ],

package/src/passwordField/passwordField.ts

@@ -3,7 +3,7 @@ import { Match, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { pressedAttribute } from "../button/button.ts";
-import { describedByError, errorView } from "../field/field.ts";
+import { controlAttributes, errorView, helpView } from "../field/field.ts";
 import * as IconButton from "../iconButton/iconButton.ts";
 import * as Meter from "../meter/meter.ts";
 
@@ -95,12 +95,10 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             h.span(
               [h.Class("password")],
               [
-                // NOTE: @foldkit/ui gap: Input has no required option, so the wrapper says it.
                 h.input([
                   ...groups.input,
                   h.Autocomplete(autocomplete),
-                  ...describedByError(id, error, help !== undefined, h),
-                  ...(isRequired ? [h.AriaRequired(true)] : []),
+                  ...controlAttributes(id, error, help, isRequired, h),
                 ]),
                 IconButton.view(
                   {
@@ -136,9 +134,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                     ],
                   ),
                 ]),
-            ...(help === undefined
-              ? []
-              : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
           ],
         ),
     },