rip-lang 3.13.119 → 3.13.121

package/docs/ui/field.rip

@@ -0,0 +1,53 @@
+# Field — accessible headless form field wrapper
+#
+# Associates a label, description, and error message with a form control.
+# Generates linked IDs for aria-labelledby/describedby/errormessage.
+# Ships zero CSS.
+#
+# Usage:
+#   Field label: "Email", error: errors.email
+#     Input value <=> email, type: "email"
+
+export Field = component
+  @label:: string := ""
+  @description:: string := ""
+  @error:: string := ""
+  @disabled:: boolean := false
+  @required:: boolean := false
+
+  _id =! "fld-#{Math.random().toString(36).slice(2, 8)}"
+
+  mounted: ->
+    ctrl = @_root?.querySelector('input, select, textarea, button, [role]')
+    if ctrl
+      ctrl.setAttribute 'aria-labelledby', "#{_id}-label" if @label
+      ctrl.setAttribute 'aria-describedby', "#{_id}-desc" if @description
+      ctrl.setAttribute 'aria-errormessage', "#{_id}-err" if @error
+      ctrl.setAttribute 'aria-invalid', true if @error
+      ctrl.setAttribute 'aria-required', true if @required
+
+  ~>
+    ctrl = @_root?.querySelector('input, select, textarea, button, [role]')
+    return unless ctrl
+    if @error
+      ctrl.setAttribute 'aria-invalid', true
+      ctrl.setAttribute 'aria-errormessage', "#{_id}-err"
+    else
+      ctrl.removeAttribute 'aria-invalid'
+      ctrl.removeAttribute 'aria-errormessage'
+
+  render
+    div $disabled: @disabled?!, $invalid: @error?!
+      if @label
+        label id: "#{_id}-label", $label: true
+          @label
+          if @required
+            span $required: true, aria-hidden: "true"
+              " *"
+      slot
+      if @description and not @error
+        div id: "#{_id}-desc", $description: true
+          @description
+      if @error
+        div id: "#{_id}-err", role: "alert", $error: true
+          @error

package/docs/ui/fieldset.rip

@@ -0,0 +1,22 @@
+# Fieldset — accessible headless fieldset with legend
+#
+# Groups related fields with an optional legend. Disables all children
+# when @disabled is set. Ships zero CSS.
+#
+# Usage:
+#   Fieldset legend: "Shipping Address"
+#     Field label: "Street"
+#       Input value <=> street
+#     Field label: "City"
+#       Input value <=> city
+
+export Fieldset = component
+  @legend:: string := ""
+  @disabled:: boolean := false
+
+  render
+    fieldset disabled: @disabled, $disabled: @disabled?!
+      if @legend
+        legend $legend: true
+          @legend
+      slot

package/docs/ui/form.rip

@@ -0,0 +1,39 @@
+# Form — accessible headless form with validation and submission
+#
+# Wraps native <form> with submit handling, validation state, and
+# loading indicator support. Prevents default submission and emits
+# a 'submit' event. Ships zero CSS.
+#
+# Usage:
+#   Form @submit: handleSubmit
+#     Field label: "Name"
+#       Input value <=> name
+#     Button
+#       "Submit"
+
+export Form = component
+  @disabled:: boolean := false
+
+  submitting := false
+  submitted := false
+  errors := {}
+
+  _onSubmit: (e) ->
+    e.preventDefault()
+    return if @disabled or submitting
+    submitting = true
+    submitted = true
+    @emit 'submit', { form: e.target }
+
+  setErrors: (errs) ->
+    errors = errs or {}
+
+  setSubmitting: (val) ->
+    submitting = val
+
+  render
+    form @submit: @_onSubmit, novalidate: true
+      $disabled: @disabled?!
+      $submitting: submitting?!
+      $submitted: submitted?!
+      slot