Merge pull request #307 from silinternational/develop

Release - 11.9.0 - Checkbox: add name and value props

Author: hobbitronics

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
+## [11.9.0](https://github.com/silinternational/ui-components/compare/v11.8.2...v11.9.0) (2025-05-05)
+
+### Added
+
+- **Checkbox:** add name and value attributes and expose change event ([df1d009](https://github.com/silinternational/ui-components/commit/df1d00960db1bda8f9c3210824fa10175450707a))
+
+### [11.8.2](https://github.com/silinternational/ui-components/compare/v11.8.1...v11.8.2) (2025-05-02)
+
+### Fixed
+
+- **TextArea:** Fix label overlapping prefilled text ([17c5cf8](https://github.com/silinternational/ui-components/commit/17c5cf878048b2dc9304947a28477184bae0f1e4))
+
 ### [11.8.1](https://github.com/silinternational/ui-components/compare/v11.8.0...v11.8.1) (2025-04-10)
 
 ### Fixed

components/mdc/Checkbox/Checkbox.svelte

@@ -19,26 +19,48 @@ export let disabled = false
 export let uppercase = false
 /** @type {string} random id prefixed with checkbox- for the input id*/
 export let inputID = generateRandomID('checkbox-')
+/** @type {string} name attribute for the checkbox input - important for forms */
+export let name = ''
+/** @type {string} value attribute when checked (default is "on") */
+export let value = 'on'
 
 let checkboxElement = {}
 let formFieldElement = {}
 let checkbox
 
-$: if (checkbox) checkbox.checked = checked
-
 onMount(() => {
   checkbox = new MDCCheckbox(checkboxElement)
   const formField = new MDCFormField(formFieldElement)
-
   formField.input = checkbox
+
+  checkbox.checked = checked
 })
 
-const handleChange = () => dispatch(checkbox.checked ? 'checked' : 'unchecked')
+$: if (checkbox && checkbox.checked !== checked) {
+  checkbox.checked = checked
+}
+
+const handleChange = () => {
+  if (checkbox) {
+    checked = checkbox.checked
+    dispatch(checkbox.checked ? 'checked' : 'unchecked')
+  }
+}
 </script>
 
 <div class="mdc-form-field {$$props.class || ''}" bind:this={formFieldElement}>
   <div class="mdc-checkbox" bind:this={checkboxElement}>
-    <input type="checkbox" {disabled} on:change={handleChange} class="mdc-checkbox__native-control" id={inputID} />
+    <input
+      type="checkbox"
+      {name}
+      {value}
+      {checked}
+      {disabled}
+      on:change={handleChange}
+      on:change
+      class="mdc-checkbox__native-control"
+      id={inputID}
+    />
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
         <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />

components/mdc/TextInput/TextArea.svelte

@@ -44,6 +44,7 @@ $: valueIsEmpty = value === ' ' || !value
 $: warn = showWarn
 $: !valueIsEmpty && addOrRemoveInvalidClass(error, element)
 $: addOrRemoveInvalidClass(showError || showWarn, element)
+$: floating = !!label && !value.length
 
 onMount(() => {
   resize()
@@ -82,8 +83,8 @@ label {
 <label
   class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
-  class:mdc-text-field--label-floating={label}
-  class:mdc-text-field--with-internal-counter={maxlength}
+  class:mdc-text-field--label-floating={floating}
+  class:mdc-text-field--with-internal-counter={!!maxlength}
   class:warn
   class:showError
   bind:this={element}

index.d.ts

@@ -38,6 +38,8 @@ declare module '@silintl/ui-components' {
     uppercase?: boolean
     class?: string
     inputID?: string
+    name?: string
+    value?: string
   }
   export class Checkbox extends SvelteComponent<CheckboxProps> {}