hygguile_hygguile (Untitled Document)

1.14 (hygguile hygguile)

Procedures
Variables

1.14.1 Procedures

Procedure: a content KEY: #:weight #:size #:color #:family #:hover #:extra-classes #:href ¶

Create an HTML anchor link (<a>) component.

If the href key argument evaluates to false, the hyperlink target location defaults directly to the structural evaluation of content.

content: The text label or component displayed inside the interactive anchor boundary.
weight: List of symbols representing font weight CSS classes.
size: List of symbols representing text sizing CSS classes.
color: List of symbols representing base link text color CSS classes.
family: List of symbols representing font family CSS classes.
hover: List of symbols representing interactive state hover coloring CSS rules.
extra-classes: List of base text formatting utility attributes.
href: Optional explicit destination target path URL string.

(a "https://gnu.org" #:extra-classes '(underline))

Procedure: button content KEY: #:id #:type #:hidden #:on-click #:background #:hover-background #:border-size #:border-color #:shadow #:color #:size #:active #:family #:weight #:rounding #:extra-classes ¶

Create a standard HTML button element.

content: The inner content (text string or HTML fragments) of the button.
id: An optional HTML identifier string.
type: A symbol representing the HTML button type (e.g., 'button, 'submit).
hidden: A boolean indicating whether the button should be hidden.
on-click: A JavaScript handler string triggered on click events.
background: List of symbols for background CSS classes.
hover-background: List of symbols for hover background CSS classes.
border-size: List of symbols for border width CSS classes.
border-color: List of symbols for border color CSS classes.
shadow: List of symbols for container shadow CSS classes.
color: List of symbols for text color CSS classes.
size: List of symbols for text sizing CSS classes.
active: List of symbols for active state transformation CSS classes.
family: List of symbols for font family CSS classes.
weight: List of symbols for font weight CSS classes.
rounding: List of symbols for border radius CSS classes.
extra-classes: List of utility formatting layout classes.

(button "Click Me" #:id "btn-primary" #:on-click "alert('Hello!')")

Procedure: carousel KEY: #:id #:carousel-list-css #:item-width #:item-height #:carousel-item-css #:carousel-item-content-css #:carousel-list-wrapper-css #:carousel-button-css #:carousel-left-button-css #:carousel-right-button-css #:fragments ¶

Construct a carousel UI component.

id: The unique HTML string identifier for the inner carousel list element.
carousel-list-css: List of symbols representing CSS classes for the <ul> element.
item-width: List of symbols specifying the width CSS classes for each carousel item.
item-height: List of symbols specifying the height CSS classes for each carousel item.
carousel-item-css: List of symbols representing CSS classes for each item wrapper <li>.
carousel-item-content-css: List of symbols representing CSS classes for the wrapper <div> of the content.
carousel-list-wrapper-css: List of symbols representing CSS classes for the outer wrapper <div>.
carousel-button-css: List of symbols representing base CSS classes for the previous/next buttons.
carousel-left-button-css: List of symbols representing additional CSS classes for the left (previous) button.
carousel-right-button-css: List of symbols representing additional CSS classes for the right (next) button.
fragments: A list of HTML/component S-expression fragments to be rendered as the carousel items.

(carousel #:id "image-carousel"
          #:fragments '(((img (@ (src "img1.png"))))
                        ((img (@ (src "img2.png"))))))

Procedure: carousel-button-js ¶: Undocumented procedure.

Procedure: code content KEY: #:weight #:color #:size #:background #:rounding #:shadow #:padding-y #:padding-x #:code-classes ¶

Create an inline HTML <code> fragment.

content: The code instruction text string.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
background: List of symbols representing inline code surface container background colors.
rounding: List of symbols representing container boundary radius options.
shadow: List of symbols representing structural layout presentation depth drops.
padding-y: List of symbols controlling top/bottom baseline cell padding spaces.
padding-x: List of symbols controlling left/right horizontal boundary alignment padding.
code-classes: List of font typography rules enforcing monospaced code metrics.

(code "(car list-expression)")

Procedure: col content KEY: #:gap #:shadow #:wrap #:padding-y #:padding-x #:rounding #:background #:items #:col-classes ¶

Create a vertical column container using flexbox layout.

content: The inner content elements or fragments to stack vertically.
gap: List of symbols for spacing gaps between elements.
shadow: List of symbols for shadow effect CSS classes.
wrap: List of symbols defining wrap properties.
padding-y: List of symbols for vertical padding CSS classes.
padding-x: List of symbols for horizontal padding CSS classes.
rounding: List of symbols for container border-radius CSS classes.
background: List of symbols for container background CSS classes.
items: List of symbols for cross-axis alignment CSS classes.
col-classes: List of base vertical flex layout CSS classes.

(col '((div "Top Item") (div "Bottom Item")) #:background '(bg-transparent))

Procedure: copy-pre-inner-text-js ¶: Undocumented procedure.

Procedure: custom-fonts KEY: #:preconnects #:fonts #:display-swap ¶

Generate S-expression tags to optimize and load external web typography families asynchronously.

preconnects: A list of S-expression initialization link tags specifying network domains to warm up.
fonts: A list of configuration strings selecting families and weights to include from the external repository API.
display-swap: A string directive identifying font rendering behaviors during file downloads.

(custom-fonts #:fonts '("Merriweather" "Open+Sans"))

Procedure: danger-submit-button content ¶

Create a red-themed HTML form submission button meant for destructive actions.

content: The inner content (text string or HTML fragments) of the button.

(danger-submit-button "Delete Repository")

Procedure: dd content KEY: #:dd-classes #:weight #:family #:color #:size ¶

Create an HTML description details (<dd>) element.

content: The detailed explanation text string or fragment.
dd-classes: List of symbols for layout and fallback color CSS classes.
weight: List of symbols for font weight CSS classes.
family: List of symbols for font family CSS classes.
color: List of symbols for text color CSS classes.
size: List of symbols for text sizing CSS classes.

(dd "An implementation of the Scheme programming language.")

Procedure: dl content KEY: #:dl-classes ¶

Create an HTML description list (<dl>) element.

content: The inner term (<dt>) and description (<dd>) elements.
dl-classes: List of symbols for layout and style CSS classes.

(dl '((dt "Framework") (dd "Hygguile")))

Procedure: dt content KEY: #:dt-classes #:weight #:family #:style #:color #:size ¶

Create an HTML description term (<dt>) element.

content: The term text string or fragment.
dt-classes: List of symbols for default structural padding CSS classes.
weight: List of symbols for font weight CSS classes.
family: List of symbols for font family CSS classes.
style: List of symbols for font style CSS classes.
color: List of symbols for text color CSS classes.
size: List of symbols for text sizing CSS classes.

(dt "Guile Scheme" #:weight '(font-bold))

Procedure: em content KEY: #:weight #:color #:family #:leading #:style #:size ¶

Create an HTML emphasis (<em>) layout block.

content: The inner text content or target inline nodes.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
style: List of symbols representing text element style transformations.
size: List of symbols representing text sizing CSS classes.

(em "Please notice this crucial contextual exception.")

Procedure: fly-out KEY: #:aria-label #:nav-class #:top-ul-class #:items ¶

Construct an outer fly-out navigation menu shell.

aria-label: The accessibility text label string assigned to the <nav> component.
nav-class: List of symbols representing CSS classes for the structural <nav> wrapper.
top-ul-class: List of symbols representing CSS classes for the top-level container <ul>.
items: A list of sub-components or list items to nest within the top-level menu container.

(fly-out #:aria-label "Main Navigation"
         #:items (list (fly-out-item "Home")))

Procedure: fly-out-css ¶: Undocumented procedure.

Procedure: fly-out-item content KEY: #:li-class ¶

Construct a single leaf item within a fly-out menu.

content: The text description, link, or component fragment inside the item container.
li-class: List of symbols representing CSS classes for the wrapping <li> item.

(fly-out-item "Documentation" #:li-class '(px-2 py-2))

Procedure: fly-out-js ¶: Undocumented procedure.

Procedure: fly-out-submenu KEY: #:li-class #:button-class #:ul-class #:button-content #:items ¶

Construct a fly-out sub-menu dropdown block.

li-class: List of symbols representing CSS classes for the wrapper <li> component.
button-class: List of symbols representing CSS classes for the trigger <button> element.
ul-class: List of symbols representing CSS classes for the inner hidden dropdown <ul> list.
button-content: S-expression content or fragments rendered inside the dropdown trigger button.
items: A list of nested child items (typically fly-out-item items) belonging to this sub-menu.

(fly-out-submenu #:button-content '((span "Settings"))
                 #:items (list (fly-out-item "Account Profile")))

Procedure: footer content KEY: #:background #:shadow #:footer-classes ¶

Create an HTML footer element.

content: The inner content or layout fragments of the footer.
background: List of symbols for background CSS classes.
shadow: List of symbols for shadow effect CSS classes.
footer-classes: List of utility formatting and layout CSS classes.

(footer "© 2026 Hygguile Framework")

Procedure: get-short-commit-sha KEY: #:cmd ¶

Retrieve the short Git commit SHA or execute a custom version control command.

cmd: The shell command string to execute, defaulting to the command that fetches the 7-character short commit hash.

(get-short-commit-sha)

Procedure: glyph-option KEY: #:value #:glyph #:content #:family #:selected-value #:option-flex-css ¶

Construct an HTML option styled with an inline icon or glyph indicator.

value: The structural form state value string assigned to the option.
glyph: An S-expression fragment or character representing the icon prefix element.
content: The text label descriptive string. Defaults to value if false.
family: List of symbols representing layout font family CSS classes.
selected-value: The active control target state tracker matching criteria.
option-flex-css: List of symbols determining internal flexbox element alignment constraints.

(glyph-option #:value "nl" #:glyph "🇳🇱" #:content "Nederlands")

Procedure: h1 content KEY: #:weight #:color #:family #:size ¶

Create an HTML <h1> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(h1 "Main Page Title" #:color '(text-stone-900))

Procedure: h2 content KEY: #:weight #:color #:family #:size ¶

Create an HTML <h2> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(h2 "Section Subtitle" #:weight '(font-semibold))

Procedure: h3 content KEY: #:weight #:color #:family #:size ¶

Create an HTML <h3> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(h3 "Subsection Heading")

Procedure: h4 content KEY: #:weight #:color #:family #:size ¶

Create an HTML <h4> heading.

content: The inner text string or child elements of the heading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(h4 "Minor Subsection Title")

Procedure: hr KEY: #:margin #:border #:color ¶

Create an HTML horizontal rule (<hr>) element.

margin: List of symbols representing margin CSS classes.
border: List of symbols representing border width CSS classes.
color: List of symbols representing border color CSS classes.

(hr #:margin '(my-4) #:color '(border-red-500))

Procedure: hygguile-recommended-meta ¶

Return an S-expression list containing basic framework-recommended HTML metadata tags.

Includes mobile-responsive viewport parameters and typical character set configurations.

(hygguile-recommended-meta)

Procedure: hygguile-recommended-resources KEY: #:fonts ¶

Assemble a list of recommended UI resource fragments, including standard web typography assets and component script blocks.

fonts: An S-expression block managing custom font loading configurations, defaulting to the result of (custom-fonts).

(hygguile-recommended-resources)

Procedure: icon KEY: #:type #:weight #:icon-css ¶

Construct an inline HTML icon element using Phosphor formatting.

type: A symbol designating the core identifier name of the Phosphor icon asset (e.g., 'star, 'gear).
weight: A configuration symbol defining line weight thickness variants. Accepts 'bold, 'light, or defaults to 'regular.
icon-css: List of symbols representing additional layout formatting rules or sizing CSS classes.

(icon #:type 'heart #:weight 'bold #:icon-css '(text-red-500 text-2xl))

Procedure: icon-button KEY: #:id #:icon #:content #:hidden #:on-click #:type #:background #:hover-background #:border-size #:border-color #:shadow #:size #:family #:weight #:color #:rounding #:active #:icon-css #:extra-classes #:icon-text-container-classes ¶

Create a button containing both an icon and text.

id: An optional HTML identifier string.
icon: A symbol identifying the type of icon to render.
content: The text string or components positioned next to the icon.
hidden: A boolean indicating whether the button should be hidden.
on-click: A JavaScript handler string triggered on click events.
type: A symbol representing the HTML button type.
background: List of symbols for background CSS classes.
hover-background: List of symbols for hover background CSS classes.
border-size: List of symbols for border width CSS classes.
border-color: List of symbols for border color CSS classes.
shadow: List of symbols for shadow CSS classes.
size: List of symbols for text sizing CSS classes.
family: List of symbols for font family CSS classes.
weight: List of symbols for font weight CSS classes.
color: List of symbols for text color CSS classes.
rounding: List of symbols for border radius CSS classes.
active: List of symbols for active state transformation CSS classes.
icon-css: List of symbols targeting icon coloring and sizing classes.
extra-classes: List of utility layout CSS classes.
icon-text-container-classes: List of symbols applied to the inner layout wrapper surrounding the icon and content.

(icon-button #:icon 'download #:content "Fetch Data" #:on-click "downloadData()")

Procedure: input KEY: #:label #:name #:value #:placeholder #:type #:required #:input-css #:label-css #:input-flex-css ¶

Construct an HTML <input> component with a matching label.

label: The descriptive text string displaying the identity of the field.
name: The name mapping configuration string bound onto form serialization attributes.
value: The standard default textual configuration payload string.
placeholder: The ambient string text descriptive hint applied when the field boundary is unpopulated.
type: A configuration symbol managing browser input rendering choices (e.g., 'text, 'password).
required: A boolean property indicating if form verification forces evaluation validation.
input-css: List of symbols representing layout utility CSS classes for the input field.
label-css: List of symbols representing presentation utility CSS classes for the label field.
input-flex-css: List of symbols regulating structure container box margins and gaps.

(input #:label "Email Address" #:name "email" #:type 'email #:required #t)

Procedure: light-button content ¶

Create a button pre-configured with a light font weight.

content: The inner content (text string or HTML fragments) of the button.

(light-button "Read More...")

Procedure: linear-gradient content KEY: #:container-class #:direction #:steps ¶

Create a container styled with a CSS linear gradient background.

content: The inner layout components or text elements inside the container.
container-class: A string containing additional CSS utility classes for the wrapper.
direction: A symbol or string designating the gradient vector direction (e.g., 'right, 'bottom).
steps: A list of color string steps making up the gradient stops.

(linear-gradient "Gradient Text" #:direction 'right #:steps '("#ff0000" "#0000ff"))

Procedure: mk-class xs ¶

Return a sorted, space-separated string of unique class names from xs.

Takes a list of symbols xs, removes any duplicates, converts them to strings, sorts them alphabetically, and returns them as a single, space-separated string. This is useful for creating a canonical CSS class attribute value.

If xs is the empty list, an empty string is returned.

xs: A list of symbols.

(mk-class '(p-2 bg-stone-900/75))

Procedure: mono content KEY: #:weight #:color #:size #:mono-classes ¶

Create a structural paragraph element wrapped in a monospace text layout.

content: The inner code text string or inline elements.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
mono-classes: List of configuration framework tokens defining a fixed-width layout style.

(mono "$ guix pull")

Procedure: mono-button content ¶

Create a button pre-configured with a monospace font family.

content: The inner content (text string or HTML fragments) of the button.

(mono-button "git commit")

Procedure: option KEY: #:value #:content #:family #:selected-value ¶

Construct an HTML <option> element.

If selected-value matches value, the option will render with a selected attribute status.

value: The structural form state value string assigned to the option.
content: The visual display text string or inner components. Defaults to value if false.
family: List of symbols representing font family CSS classes applied if selected.
selected-value: The active value configuration used to evaluate selection symmetry.

(option #:value "light" #:content "Cozy Light Theme" #:selected-value "dark")

Procedure: p content KEY: #:weight #:color #:family #:leading #:size ¶

Create an HTML paragraph (<p>) component.

content: The text block or inner nodes rendered inside the paragraph boundaries.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
size: List of symbols representing text sizing CSS classes.

(p "This framework focuses on modular, cozy web architectures.")

Procedure: phosphor-icons KEY: #:stylesheet-href ¶

Generate S-expression link tags to pull down standard Phosphor icon asset libraries asynchronously.

Note: If the default value string containing an internal NPM handle is modified, any raw symbol characters must continue to obey parsing constraints.

stylesheet-href: The source URL string pointing directly to the distributed stylesheet manifest location.

(phosphor-icons #:stylesheet-href "https://example.com/assets/icons.css")

Procedure: pre content KEY: #:weight #:color #:size #:background #:rounding #:shadow #:width #:leading #:text-wrap #:padding-y #:padding-x #:pre-classes ¶

Create an HTML preformatted multi-line source code container block (<pre>).

content: The raw multi-line string contents to preserve.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
size: List of symbols representing text sizing CSS classes.
background: List of symbols representing code presentation layout surface background cards.
rounding: List of symbols representing card container boundary radius configurations.
shadow: List of symbols representing card container visual shadow definitions.
width: List of symbols tracking macro dimension constraint rules.
leading: List of symbols processing vertical paragraph text baseline spacing layouts.
text-wrap: List of symbols configuring code boundary line wrapping constraints.
padding-y: List of symbols processing top/bottom container padding margins.
padding-x: List of symbols processing side outer margin boundaries padding options.
pre-classes: List of structural code scrolling mechanisms and whitespace behaviors.

(pre "(define (hello)\n  (display \"Hi\"))")

Procedure: pretty-quote str ¶

Transform explicit S-expression (quote symbol) fragments within a string into shorthand syntax.

str: The target input string containing raw code snippets or text representations.

(pretty-quote "This is a (quote example) line.")

Procedure: remember-dark-theme-js ¶: Undocumented procedure.

Procedure: render-if-nempty render-func item ¶

Apply render-func to item if item is neither empty nor false.

Returns an empty list if item evaluates to null or false.

render-func: A single-argument procedure to evaluate the layout with item.
item: The data element or fragment list to inspect.

(render-if-nempty (lambda (i) `(b ,i)) "Bold Text")

Procedure: render-if-nestring expr x ¶

Evaluate and return the result of expr with x if x is a non-empty string.

If x is false or an empty string, returns an empty list.

expr: A single-argument procedure to apply to x.
x: The string value or condition to check.

(render-if-nestring (lambda (val) `((p ,val))) "Hello")

Procedure: row content KEY: #:gap #:shadow #:wrap #:padding-y #:padding-x #:rounding #:background #:items #:row-classes ¶

Create a horizontal row container using flexbox layout.

content: The inner content elements or fragments to align horizontally.
gap: List of symbols for spacing gaps between elements.
shadow: List of symbols for shadow effect CSS classes.
wrap: List of symbols defining wrap properties.
padding-y: List of symbols for vertical padding CSS classes.
padding-x: List of symbols for horizontal padding CSS classes.
rounding: List of symbols for container border-radius CSS classes.
background: List of symbols for container background CSS classes.
items: List of symbols for cross-axis alignment CSS classes.
row-classes: List of base horizontal flex layout CSS classes.

(row '((div "Left Element") (div "Right Element")) #:gap '(gap-4))

Procedure: select KEY: #:options #:on-change #:name #:id #:family #:select-classes ¶

Construct a dropdown list interactive selection menu wrapper.

options: A list of option or glyph-option S-expressions making up the menu rows.
on-change: A string JavaScript execution statement evaluated during interaction changes.
name: The element name context configuration string bound onto target HTML form tracking.
id: The unique DOM string selector matching layout identifier tables.
family: List of symbols representing base structural font choices.
select-classes: List of symbols specifying visual layout styles for the component wrapper card.

(select #:id "theme-picker"
        #:on-change "console.log('Changed!')"
        #:options (list (option #:value "dim")))

Procedure: show-notifications-from-url-js KEY: #:header-classes #:close-icon-on-click #:close-icon-classes #:title-container-classes #:notification-tray-container-classes ¶

Generate a client-side script block that handles rendering notifications from URL parameters.

This macro sets up a DOM listener evaluating parameters matching notify-title and notify-body from the window URL properties. When populated, it generates the corresponding component subtree inside the layout tray wrapper designated by the element identifier notification-tray.

header-classes: A space-separated string containing CSS layout configuration targeting the card header text elements.
close-icon-on-click: The client-side callback script evaluated whenever a dismiss interaction triggers.
close-icon-classes: A space-separated string containing structural component icon identifiers and layout options.
title-container-classes: A space-separated string containing CSS layout parameters handling the alignment properties of the text boundaries.
notification-tray-container-classes: A space-separated string containing global structural box presentation layouts applied directly onto the notification layout wrapper block.

(show-notifications-from-url-js #:header-classes "text-lg font-bold")

Procedure: strong content KEY: #:weight #:color #:family #:leading #:size ¶

Create an HTML strong importance (<strong>) text fragment.

content: The inner phrase string or inline elements requiring strong visual weight.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
leading: List of symbols representing line-height spacing CSS classes.
size: List of symbols representing text sizing CSS classes.

(strong "Warning: Destructive action ahead!")

Procedure: sub-h1 content KEY: #:weight #:color #:family #:style #:size ¶

Create a lighter, styled secondary <h1> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
style: List of symbols representing font style layout configuration options (e.g., italic).
size: List of symbols representing text sizing CSS classes.

(sub-h1 "A deeper dive into the architecture")

Procedure: sub-h2 content KEY: #:weight #:style #:color #:family #:size ¶

Create a lighter, styled secondary <h2> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(sub-h2 "Contextual commentary block")

Procedure: sub-h3 content KEY: #:weight #:style #:color #:family #:size ¶

Create a lighter, styled secondary <h3> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(sub-h3 "Detailed breakdown notes")

Procedure: sub-h4 content KEY: #:weight #:style #:color #:family #:size ¶

Create a lighter, styled secondary <h4> heading wrapper.

content: The inner text string or child elements of the subheading.
weight: List of symbols representing font weight CSS classes.
style: List of symbols representing font style layout configuration options.
color: List of symbols representing text color CSS classes.
family: List of symbols representing font family CSS classes.
size: List of symbols representing text sizing CSS classes.

(sub-h4 "Supplemental metadata label")

Procedure: submit-button content ¶

Create a green-themed standard HTML form submission button.

content: The inner content (text string or HTML fragments) of the button.

(submit-button "Save Preferences")

Procedure: textarea KEY: #:label #:name #:value #:required #:textarea-css #:label-css #:textarea-flex-css ¶

Construct an HTML <textarea> multiline field block.

label: The explicit header string informing users of required field contexts.
name: The unique string structural identifier mapping the entity across standard DOM tables.
value: The initial text block paragraph payload string nested inside the block.
required: A field completion mandatory requirement boolean validation gate switch.
textarea-css: List of symbols targeting specific dimensions and borders configuration styles.
label-css: List of symbols handling sizing constraints applied onto the matching label tags.
textarea-flex-css: List of symbols managing outer wrapper responsive card flex constraints.

(textarea #:label "User Bio" #:name "biography" #:value "Born in Scheme...")

Procedure: toggle-dark-theme-js ¶: Undocumented procedure.

Procedure: trigger-notification-function-js KEY: #:title #:body #:duration #:body-font-family ¶

Generate a JavaScript IIFE string that pushes notification parameters into the URL query string and reloads the window.

title: The fallback string title of the notification.
body: The core informational content string of the notification.
duration: The visibility timeline limit in milliseconds before the notification is cleared.
body-font-family: The fallback typography class string applied to the notification’s description field.

(trigger-notification-function-js #:title "Alert" #:body "System update complete.")

Procedure: ui-mode-button KEY: #:icon #:content #:type #:background #:hover-background #:border-size #:border-color #:shadow #:size #:active #:family #:weight #:color #:on-click #:rounding #:icon-css #:extra-classes #:icon-text-container-classes ¶

Create a utility button pre-wired to toggle UI dark/light mode themes.

icon: A symbol identifying the default icon type.
content: The description text displayed within the button layout.
type: A symbol representing the HTML button type.
background: List of symbols for background CSS classes.
hover-background: List of symbols for hover background CSS classes.
border-size: List of symbols for border width CSS classes.
border-color: List of symbols for border color CSS classes.
shadow: List of symbols for shadow CSS classes.
size: List of symbols for text sizing CSS classes.
active: List of symbols for active state transformation CSS classes.
family: List of symbols for font family CSS classes.
weight: List of symbols for font weight CSS classes.
color: List of symbols for text color CSS classes.
on-click: The global JavaScript function invocation string triggered to process the theme change.
rounding: List of symbols for border radius CSS classes.
icon-css: List of symbols targeting icon coloring and sizing classes.
extra-classes: List of utility layout CSS classes.
icon-text-container-classes: List of symbols applied to the inner layout wrapper surrounding the icon and content.

(ui-mode-button #:content "Switch Theme")

Procedure: with-footer KEY: #:main #:footer ¶

Wrap a main content fragment and a footer fragment within a full-screen vertical flex container.

main: S-expression representing the main content layout.
footer: S-expression representing the footer layout.

(with-footer #:main '((p "Hello World")) #:footer '((footer "Standard Footer")))

1.14.2 Variables

Variable: doctype-html ¶

"<!DOCTYPE html>"

Variable: notification-tray ¶

((div (@@ (id notification-tray) (class "fixed right-8 top-8 z-32")) ""))