@mozaic-ds/web-components 1.0.0-beta.7 → 1.0.0

package/dist/components/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/README.md

@@ -0,0 +1,17 @@
+# `m-checkbox`
+
+A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the checkbox, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the checkbox element, typically used for form submission. | `string` |   |
+| `label` | The text label displayed next to the checkbox. | `string` |   |
+| `checked` | The checkbox's checked state. | `boolean` | `$bindable(false)` |
+| `indeterminate` | Sets the checkbox to an indeterminate state (partially selected). | `boolean` |   |
+| `isinvalid` | If `true`, applies an invalid state to the checkbox. | `boolean` |   |
+| `disabled` | If `true`, disables the checkbox, making it non-interactive. | `boolean` |   |
+| `indented` | If `true`, indent the checkbox. | `boolean` |   |
+

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,10 +1,10 @@
-import{$ as K,a9 as N,c as P,k as Q,p as R,a as T,b as m,l as U,f as E,s as A,d as b,t as x,h as w,i as V,j as u,r as d,g as D,m as r,e as W}from"../../custom-element.js";import{i as F}from"../../if.js";import{e as X}from"../../each.js";import{s as f,r as Y}from"../../attributes.js";import{b as Z}from"../../input.js";import{c as $}from"../../custom-element-forward-events.js";function ee(v,t,i,y,n){var s=()=>{y(i[v])};i.addEventListener(t,s),n?K(()=>{i[v]=n()}):s(),(i===document.body||i===window||i===document)&&N(()=>{i.removeEventListener(t,s)})}var ae=E('<legend class="mc-field__legend svelte-11asba7"> </legend>'),re=E('<label class="mc-checkbox__label svelte-11asba7"> </label>'),oe=E('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),ie=E('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-11asba7"><!> <div class="mc-field__container"></div></fieldset></div>');const te={hash:"svelte-11asba7",code:`/**
+import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r as p,e as E,g as y,d as C,s as q,m as t,h as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as L}from"../../each.js";import{r as N,s as m}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=k('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=k('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=k("<div></div>");const U={hash:"svelte-11asba7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-11asba7 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-11asba7 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-11asba7 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-11asba7:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-11asba7:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-11asba7:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate, .mc-checkbox__input.svelte-11asba7:disabled {border-color:transparent;}.mc-checkbox__input.svelte-11asba7:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled + .mc-checkbox__label:where(.svelte-11asba7) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:not(:disabled):checked:hover, .mc-checkbox__input.svelte-11asba7:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-11asba7 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-11asba7 {padding-inline:0;}.mc-field--group.svelte-11asba7 {border-width:0;margin-inline:0;padding:0;}
+/* stylelint-disable string-no-newline */.mc-field__content.svelte-11asba7 {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */`};function se(v,t){const i=Q();R(t,!0),T(v,te);const y=[];let n=m(t,"name",7),s=m(t,"id",7,i),h=m(t,"options",7),g=m(t,"legend",7),_=m(t,"values",31,()=>U([]));function C(e){var a;return((a=h()[e])==null?void 0:a.id)??`${s()}-${e}`}var G={get name(){return n()},set name(e){n(e),u()},get id(){return s()},set id(e=i){s(e),u()},get options(){return h()},set options(e){h(e),u()},get legend(){return g()},set legend(e){g(e),u()},get values(){return _()},set values(e=[]){_(e),u()}},p=ie(),B=b(p),M=b(B);{var I=e=>{var a=ae(),k=b(a,!0);d(a),x(()=>D(k,g())),w(e,a)};F(M,e=>{g()&&e(I)})}var H=A(M,2);return X(H,23,h,(e,a)=>C(a),(e,a,k)=>{var z=oe(),o=b(z);Y(o);let L;var j,O=A(o,2);{var S=l=>{var c=re(),q=b(c,!0);d(c),x(J=>{f(c,"for",J),D(q,r(a).label)},[()=>C(r(k))]),w(l,c)};F(O,l=>{r(a).label&&l(S)})}d(z),x((l,c)=>{L=W(o,1,"mc-checkbox__input svelte-11asba7",null,L,l),f(o,"id",c),f(o,"name",n()),o.disabled=r(a).disabled,f(o,"aria-invalid",r(a).isinvalid),j!==(j=r(a).value)&&(o.value=(o.__value=r(a).value)??"")},[()=>({"is-invalid":r(a).isinvalid}),()=>C(r(k))]),ee("indeterminate","change",o,l=>r(a).indeterminate=l,()=>r(a).indeterminate),Z(y,[],o,()=>(r(a).value,_()),_),w(e,z)}),d(H),d(B),d(p),x(()=>f(p,"id",s())),w(v,p),V(G)}customElements.define("m-checkbox-group",P(se,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,$));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-11asba7:where(.mc-field__content--inline:where(.svelte-11asba7)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function V(x,i){D(i,!0),F(x,U);const z=[];let v=o(i,"name",7),b=o(i,"options",7),l=o(i,"value",31,()=>G([])),u=o(i,"inline",7),n=o(i,"isinvalid",7);var B={get name(){return v()},set name(e){v(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return l()},set value(e=[]){l(e),s()},get inline(){return u()},set inline(e){u(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},c=T();return K(c,21,b,L,(e,r)=>{var h=R(),a=C(h);N(a);var w,M=q(a,2);{var H=f=>{var d=Q(),j=C(d,!0);p(d),_(()=>{m(d,"for",t(r).id),I(j,t(r).label)}),g(f,d)};J(M,f=>{t(r).label&&f(H)})}p(h),_(()=>{E(a,1,y(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),m(a,"id",t(r).id),m(a,"name",v()),a.disabled=t(r).disabled,a.indeterminate=t(r).indeterminate,m(a,"aria-invalid",n()),w!==(w=t(r).value)&&(a.value=(a.__value=t(r).value)??"")}),O(z,[],a,()=>(t(r).value,l()),l),g(e,h)}),p(c),_(()=>E(c,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-11asba7")),g(x,c),S(B)}customElements.define("m-checkbox-group",A(V,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{},isinvalid:{}},[],[],!0,P));
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/checkboxgroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/universal.js","../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["import { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen } from './shared.js';\n\n/**\n * @param {'innerHTML' | 'textContent' | 'innerText'} property\n * @param {HTMLElement} element\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_content_editable(property, element, get, set = get) {\n\telement.addEventListener('input', () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t});\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\tif (element[property] !== value) {\n\t\t\tif (value == null) {\n\t\t\t\t// @ts-ignore\n\t\t\t\tvar non_null_value = element[property];\n\t\t\t\tset(non_null_value);\n\t\t\t} else {\n\t\t\t\t// @ts-ignore\n\t\t\t\telement[property] = value + '';\n\t\t\t}\n\t\t}\n\t});\n}\n\n/**\n * @param {string} property\n * @param {string} event_name\n * @param {Element} element\n * @param {(value: unknown) => void} set\n * @param {() => unknown} [get]\n * @returns {void}\n */\nexport function bind_property(property, event_name, element, set, get) {\n\tvar handler = () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t};\n\n\telement.addEventListener(event_name, handler);\n\n\tif (get) {\n\t\trender_effect(() => {\n\t\t\t// @ts-ignore\n\t\t\telement[property] = get();\n\t\t});\n\t} else {\n\t\thandler();\n\t}\n\n\t// @ts-ignore\n\tif (element === document.body || element === window || element === document) {\n\t\tteardown(() => {\n\t\t\telement.removeEventListener(event_name, handler);\n\t\t});\n\t}\n}\n\n/**\n * @param {HTMLElement} element\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_focused(element, set) {\n\tlisten(element, ['focus', 'blur'], () => {\n\t\tset(element === document.activeElement);\n\t});\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    options: Array<CheckboxGroupOption>;\n    name: string;\n    id?: string;\n    legend?: string;\n    values?: Array<string | number>;\n  }\n\n  const uid = $props.id();\n  let {\n    name,\n    id = uid,\n    options,\n    legend,\n    values = $bindable([]),\n  }: Props = $props();\n\n  function getOptionId(index: number): string {\n    return options[index]?.id ?? `${id}-${index}`;\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt, index (getOptionId(index))}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input\"\n            class:is-invalid={opt.isinvalid}\n            id={getOptionId(index)}\n            {name}\n            disabled={opt.disabled}\n            bind:indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={values}\n            value={opt.value}\n          />\n          {#if opt.label}\n            <label for={getOptionId(index)} class=\"mc-checkbox__label\"\n              >{opt.label}</label\n            >\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["bind_property","property","event_name","element","set","get","handler","render_effect","teardown","uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div_1","opt","$.set_text","text_1","$.get","consequent_1","input","$.set_attribute","input_value","$.bind_property","$$value","customElementForwardEvents"],"mappings":"0XAwCO,SAASA,GAAcC,EAAUC,EAAYC,EAASC,EAAKC,EAAK,CACtE,IAAIC,EAAU,IAAM,CAEnBF,EAAID,EAAQF,CAAQ,CAAC,CACtB,EAEAE,EAAQ,iBAAiBD,EAAYI,CAAO,EAExCD,EACHE,EAAc,IAAM,CAEnBJ,EAAQF,CAAQ,EAAII,EAAG,CACxB,CAAC,EAEDC,EAAO,GAIJH,IAAY,SAAS,MAAQA,IAAY,QAAUA,IAAY,WAClEK,EAAS,IAAM,CACdL,EAAQ,oBAAoBD,EAAYI,CAAO,CAChD,CAAC,CAEH;;;;;;;;2DC/DA,OAsBQG,EAAGC,EAAA,iCAEPC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,aAAKL,CAAG,EACRM,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,GAAA,IAAAK,EAAA,CAAA,CAAA,CAAA,WAGCC,EAAYC,EAAuB,OACnC,QAAAC,EAAAN,EAAO,EAACK,CAAK,IAAb,YAAAC,EAAgB,KAAE,GAAOP,EAAE,KAAIM,CAAK,EAC7C,mFAROX,EAAG,wOAeHO,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,EAAGN,IAAA,qGAgBXO,EAAAC,EAAAC,EAAAH,CAAG,EAAC,KAAK,GADD,CAAA,IAAAP,IAAYC,CAAK,CAAA,CAAA,mBAD1BS,EAAAH,CAAG,EAAC,OAAKJ,EAAAQ,CAAA,qGANFC,EAAA,SAAAF,EAAAH,CAAG,EAAC,SAEAM,EAAAD,EAAA,eAAAF,EAAAH,CAAG,EAAC,SAAS,EAEpBO,KAAAA,EAAAJ,EAAAH,CAAG,EAAC,SAAJK,EAAA,OAAAA,EAAA,QAAAF,EAAAH,CAAG,EAAC,QAAK,MAPE,KAAA,CAAA,aAAAG,EAAAH,CAAG,EAAC,SAAS,GAC3B,IAAAP,IAAYC,CAAK,CAAA,IAGDc,GAAA,gBAAA,SAAAH,EAAAI,GAAAN,EAAAH,CAAG,EAAC,cAAaS,EAAA,IAAAN,EAAjBH,CAAG,EAAC,aAAa,gBAG9BG,EAAAH,CAAG,EAAC,MADCT,EAAM,GAANA,2DArBxB,kJA5BYmB","x_google_ignoreList":[0]}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).\n   */\n  interface Props {\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the checkbox group.\n     */\n    value?: Array<string>;\n    /**\n     * list of properties of each checkbox button of the checkbox group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      indeterminate?: boolean;\n      indented?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the checkbox group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    name,\n    options,\n    value = $bindable([]),\n    inline,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\n    <div class=\"mc-checkbox mc-field__item\">\n      <input\n        type=\"checkbox\"\n        class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        disabled={option.disabled}\n        indeterminate={option.indeterminate}\n        aria-invalid={isinvalid}\n        bind:group={value}\n        value={option.value}\n      />\n      {#if option.label}\n        <label for={option.id} class=\"mc-checkbox__label\">{option.label}</label>\n      {/if}\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["name","$.prop","$$props","options","value","$.proxy","inline","isinvalid","$.each","div","option","$.set_attribute","label","$.get","$.set_text","text","$$render","consequent","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAAA,+BA8CIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EACPE,EAAKH,EAAAC,EAAA,QAAA,GAAA,IAAAG,EAAA,CAAA,CAAA,CAAA,EACLC,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,EAASN,EAAAC,EAAA,YAAA,CAAA,0QAKJM,OAAAA,EAAAC,EAAA,GAAAN,OAAWO,IAAM,iFAcNC,EAAAC,EAAA,MAAAC,EAAAH,CAAM,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,KAAK,oBAD5DG,EAAAH,CAAM,EAAC,OAAKM,EAAAC,CAAA,yBATP,qBAAsBV,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDI,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRH,GAAS,EAEhBY,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFN,EAAK,GAALA,gCAXP,oBAAqBE,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,uJA9CYc"}

package/dist/components/checkboxgroup/CheckboxGroup.spec.js

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import CheckboxGroup from './CheckboxGroup.svelte';
+const baseOptions = [
+    { id: 'cb1', label: 'Option 1', value: 'opt1' },
+    { id: 'cb2', label: 'Option 2', value: 'opt2' },
+    { id: 'cb3', label: 'Option 3', value: 'opt3' },
+];
+describe('m-checkbox-group component', () => {
+    it('renders all checkbox options', () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: [],
+            },
+        });
+        baseOptions.forEach((opt) => {
+            const checkbox = getByLabelText(opt.label);
+            expect(checkbox).toBeTruthy();
+            expect(checkbox.name).toBe('choices');
+            expect(checkbox.value).toBe(opt.value);
+            expect(checkbox.checked).toBe(false);
+        });
+    });
+    it('pre-selects values from the value prop', () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: ['opt2'],
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        const cb3 = getByLabelText('Option 3');
+        expect(cb1.checked).toBe(false);
+        expect(cb2.checked).toBe(true);
+        expect(cb3.checked).toBe(false);
+    });
+    it('updates value when user toggles checkboxes', async () => {
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                value: [],
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        await fireEvent.click(cb1);
+        expect(cb1.checked).toBe(true);
+        await fireEvent.click(cb2);
+        expect(cb2.checked).toBe(true);
+        await fireEvent.click(cb1);
+        expect(cb1.checked).toBe(false);
+    });
+    it('applies invalid class and aria-invalid when isinvalid=true', () => {
+        const { container, getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                isinvalid: true,
+            },
+        });
+        const inputs = container.querySelectorAll('input[type="checkbox"]');
+        inputs.forEach((input) => {
+            expect(input).toHaveClass('is-invalid');
+            expect(input).toHaveAttribute('aria-invalid', 'true');
+        });
+        const cb1 = getByLabelText('Option 1');
+        expect(cb1).toHaveClass('is-invalid');
+    });
+    it('applies inline layout when inline=true', () => {
+        const { container } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: baseOptions,
+                inline: true,
+            },
+        });
+        const wrapper = container.querySelector('.mc-field__content');
+        expect(wrapper).toHaveClass('mc-field__content--inline');
+    });
+    it('renders disabled checkboxes properly', () => {
+        const disabledOptions = [
+            { id: 'cb1', label: 'Option 1', value: 'opt1', disabled: true },
+            { id: 'cb2', label: 'Option 2', value: 'opt2' },
+        ];
+        const { getByLabelText } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: disabledOptions,
+            },
+        });
+        const cb1 = getByLabelText('Option 1');
+        const cb2 = getByLabelText('Option 2');
+        expect(cb1.disabled).toBe(true);
+        expect(cb2.disabled).toBe(false);
+    });
+    it('sets indeterminate checkboxes', () => {
+        const { container } = render(CheckboxGroup, {
+            props: {
+                name: 'choices',
+                options: [
+                    { id: 'cb1', label: 'Option 1', value: 'opt1', indeterminate: true },
+                ],
+            },
+        });
+        const input = container.querySelector('input[type="checkbox"]');
+        expect(input.indeterminate).toBe(true);
+    });
+});

package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts

@@ -1,14 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Checkbox Groups are used to manage multiple checkbox selections within a group.
- * They usually find their place in forms and allow users to choose multiple options.
- *
- * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const AllChecked: any;
-export declare const SomeDisabled: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=CheckboxGroup.stories.d.ts.map

package/dist/components/checkboxgroup/CheckboxGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBAuCE,IAAI;AArCT,wBAqCU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAiCzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AA+B5C,eAAO,MAAM,YAAY,KAAoB,CAAC"}
+{"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAyDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/checkboxgroup/CheckboxGroup.stories.js

@@ -1,146 +1,62 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Checkbox Groups are used to manage multiple checkbox selections within a group.
- * They usually find their place in forms and allow users to choose multiple options.
- *
- * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox Group',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        legend: {
-            description: 'Specify the legend of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specify the checkbox group id',
-            control: { type: 'text' },
-        },
-        options: {
-            description: 'Specify the checkbox options in JSON format. ```{ value: string; id?: string; label?: string; disabled?: boolean; indeterminate?: boolean; isinvalid?: boolean; }[]```',
-            control: { type: 'object' },
-        },
-        values: {
-            description: 'Specify the select items selected values in checkbox options',
-            control: { type: 'object' },
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-checkbox-group',
+    args: {
+        name: 'checkboxGroupName',
+        value: ['checkbox2'],
+        options: [
+            {
+                id: 'checkbox-01',
+                label: 'checkbox Label',
+                value: 'checkbox1',
             },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox group is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
+            {
+                id: 'checkbox-02',
+                label: 'checkbox Label',
+                value: 'checkbox2',
             },
-        },
+            {
+                id: 'checkbox-03',
+                label: 'checkbox Label',
+                value: 'checkbox3',
+            },
+            {
+                id: 'checkbox-04',
+                label: 'checkbox Label',
+                value: 'checkbox4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-checkbox-group>
+    `;
     },
 };
-const Template = (args) => {
-    const checkboxGroup = document.createElement('m-checkbox-group');
-    checkboxGroup.setAttribute('id', args.id || 'checkbox-group-id');
-    checkboxGroup.setAttribute('legend', args.legend || 'Checkbox Group Title');
-    checkboxGroup.setAttribute('options', JSON.stringify(args.options || []));
-    checkboxGroup.setAttribute('values', JSON.stringify(args.values || []));
-    checkboxGroup.onchange = action('onChange');
-    checkboxGroup.onblur = action('onBlur');
-    return checkboxGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option2'],
-};
-Default.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(group).not.toBeNull();
-    expect(checkboxGroup?.length).toBe(3);
-    await userEvent.click(checkboxGroup[0]);
-    expect(checkboxGroup?.[0]).toBeChecked();
-};
-export const AllChecked = Template.bind({});
-AllChecked.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option1', 'option2', 'option3'],
-};
-AllChecked.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.length).toBe(3);
-    checkboxGroup?.forEach((checkbox) => expect(checkbox).toBeChecked());
-};
-export const SomeDisabled = Template.bind({});
-SomeDisabled.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: true,
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            checked: true,
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            checked: false,
-        },
-    ],
-};
-SomeDisabled.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.[0]).toBeDisabled();
-};
+export default meta;
+export const Default = {};

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -9,62 +9,68 @@
 />
 
 <script lang="ts">
-  import type { CheckboxGroupOption } from './checkboxgroup.types';
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+   */
   interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+      indeterminate?: boolean;
+      indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
-  const uid = $props.id();
   let {
     name,
-    id = uid,
     options,
-    legend,
-    values = $bindable([]),
+    value = $bindable([]),
+    inline,
+    isinvalid,
   }: Props = $props();
-
-  function getOptionId(index: number): string {
-    return options[index]?.id ?? `${id}-${index}`;
-  }
 </script>
 
-<div class="checkbox-group-container" {id}>
-  <fieldset class="mc-field mc-field--group">
-    {#if legend}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-    <div class="mc-field__container">
-      {#each options as opt, index (getOptionId(index))}
-        <div class="mc-checkbox mc-field__item">
-          <input
-            type="checkbox"
-            class="mc-checkbox__input"
-            class:is-invalid={opt.isinvalid}
-            id={getOptionId(index)}
-            {name}
-            disabled={opt.disabled}
-            bind:indeterminate={opt.indeterminate}
-            aria-invalid={opt.isinvalid}
-            bind:group={values}
-            value={opt.value}
-          />
-          {#if opt.label}
-            <label for={getOptionId(index)} class="mc-checkbox__label"
-              >{opt.label}</label
-            >
-          {/if}
-        </div>
-      {/each}
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option}
+    <div class="mc-checkbox mc-field__item">
+      <input
+        type="checkbox"
+        class={['mc-checkbox__input', isinvalid && 'is-invalid']}
+        id={option.id}
+        {name}
+        disabled={option.disabled}
+        indeterminate={option.indeterminate}
+        aria-invalid={isinvalid}
+        bind:group={value}
+        value={option.value}
+      />
+      {#if option.label}
+        <label for={option.id} class="mc-checkbox__label">{option.label}</label>
+      {/if}
     </div>
-  </fieldset>
+  {/each}
 </div>
 
 <style>/**
@@ -213,4 +219,9 @@
   gap: 0.25rem 1rem;
 }
 
-/* stylelint-enable string-no-newline */</style>
+/* stylelint-enable string-no-newline */
+.mc-field__content:where(.mc-field__content--inline) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}</style>

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts

@@ -1,12 +1,36 @@
-import type { CheckboxGroupOption } from './checkboxgroup.types';
+/**
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+ */
 interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+        indeterminate?: boolean;
+        indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;
 //# sourceMappingURL=CheckboxGroup.svelte.d.ts.map

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,UAAU,KAAK;IACb,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACjC;AAoDH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqCH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/checkboxgroup/README.md

@@ -0,0 +1,14 @@
+# `m-checkbox-group`
+
+A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `name*` | The name attribute for the checkbox element, typically used for form submission. | `string` |   |
+| `value` | The current value of the checkbox group. | `Array<string>` | `$bindable([])` |
+| `options*` | list of properties of each checkbox button of the checkbox group | `Array<{ id: string; label: string; value: string; disabled?: boolean; indeterminate?: boolean; indented?: boolean; }>` |   |
+| `isinvalid` | If `true`, applies an invalid state to the checkbox group. | `boolean` |   |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` |   |
+