{
  "id": "@typed/ui/Group#Group",
  "canonicalId": "@typed/ui/Group#Group",
  "symbol": {
    "id": "@typed/ui/Group#Group",
    "packageName": "@typed/ui",
    "moduleName": "Group",
    "exportName": "Group",
    "kind": "function",
    "signatures": [
      "export declare function Group<const Options extends GroupOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, GroupInternalProps<Options>>, Options[\"content\"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;"
    ],
    "summary": "Renders a semantic group with an explicit accessible name.",
    "sections": {},
    "examples": [
      {
        "language": "ts",
        "code": "import { RefSubject } from \"@typed/fx\";\nimport { html } from \"@typed/template\";\nimport { Button } from \"@typed/ui/Button\";\nimport { component } from \"@typed/ui/Component\";\nimport * as Group from \"@typed/ui/Group\";\n\nexport const PreviewActions = component(function* () {\n  const rotation = yield* RefSubject.make(45);\n  const scale = yield* RefSubject.make(150);\n  return html`<section>\n    <p>Rotation: ${rotation} degrees. Scale: ${scale}%.</p>\n    ${Group.Label({\n      content: \"Preview controls\",\n      props: { id: \"preview-control-label\", class: \"control-group-label\" },\n    })}\n    ${Group.Group({\n      labelledBy: \"preview-control-label\",\n      props: { class: \"preview-actions\" },\n      content: [\n        Button({ content: \"Reset rotation\", onclick: RefSubject.set(rotation, 0) }),\n        Button({ content: \"Reset scale\", onclick: RefSubject.set(scale, 100) }),\n      ],\n    })}\n  </section>`;\n});"
      }
    ],
    "relations": [],
    "source": {
      "file": "packages/ui/src/Group.ts",
      "line": 97
    },
    "since": "1.0.0",
    "category": "Structure and naming"
  },
  "exposure": {
    "recordKind": "declaration",
    "id": "@typed/ui/Group#Group",
    "packageName": "@typed/ui",
    "packageVersion": "1.0.0-beta.7",
    "moduleName": "Group",
    "consumerSpecifier": "@typed/ui/Group",
    "exportName": "Group",
    "qualifiedName": "Group",
    "declarationKey": "declaration:c4c2654ce098ace132918de6",
    "family": "function",
    "signatures": [
      "export declare function Group<const Options extends GroupOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, GroupInternalProps<Options>>, Options[\"content\"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;"
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/Group.ts",
        "start": {
          "line": 97,
          "column": 1
        },
        "end": {
          "line": 112,
          "column": 2
        }
      }
    ],
    "aliases": [
      "@typed/ui#Group.Group",
      "@typed/ui/index#Group.Group"
    ],
    "isAlias": false,
    "static": false
  },
  "declaration": {
    "declarationKey": "declaration:c4c2654ce098ace132918de6",
    "name": "Group",
    "family": "function",
    "facets": [
      {
        "family": "function",
        "syntaxKind": "FunctionDeclaration",
        "signatures": [
          "export declare function Group<const Options extends GroupOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, GroupInternalProps<Options>>, Options[\"content\"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;"
        ],
        "typeParameters": [
          "const Options extends GroupOptions",
          "const Host extends HostResult = never"
        ],
        "sourceSpans": [
          {
            "file": "packages/ui/src/Group.ts",
            "start": {
              "line": 97,
              "column": 1
            },
            "end": {
              "line": 112,
              "column": 2
            }
          }
        ],
        "static": false,
        "readonly": false,
        "optional": false
      }
    ],
    "signatures": [
      "export declare function Group<const Options extends GroupOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, GroupInternalProps<Options>>, Options[\"content\"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;"
    ],
    "typeParameters": [
      "const Options extends GroupOptions",
      "const Host extends HostResult = never"
    ],
    "summary": "Renders a semantic group with an explicit accessible name.",
    "sections": {},
    "examples": [
      {
        "language": "ts",
        "code": "import { RefSubject } from \"@typed/fx\";\nimport { html } from \"@typed/template\";\nimport { Button } from \"@typed/ui/Button\";\nimport { component } from \"@typed/ui/Component\";\nimport * as Group from \"@typed/ui/Group\";\n\nexport const PreviewActions = component(function* () {\n  const rotation = yield* RefSubject.make(45);\n  const scale = yield* RefSubject.make(150);\n  return html`<section>\n    <p>Rotation: ${rotation} degrees. Scale: ${scale}%.</p>\n    ${Group.Label({\n      content: \"Preview controls\",\n      props: { id: \"preview-control-label\", class: \"control-group-label\" },\n    })}\n    ${Group.Group({\n      labelledBy: \"preview-control-label\",\n      props: { class: \"preview-actions\" },\n      content: [\n        Button({ content: \"Reset rotation\", onclick: RefSubject.set(rotation, 0) }),\n        Button({ content: \"Reset scale\", onclick: RefSubject.set(scale, 100) }),\n      ],\n    })}\n  </section>`;\n});"
      }
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/Group.ts",
        "start": {
          "line": 97,
          "column": 1
        },
        "end": {
          "line": 112,
          "column": 2
        }
      }
    ],
    "since": "1.0.0",
    "category": "Structure and naming"
  }
}