@rivet-health/design-system 26.4.0 → 26.5.0

package/esm2020/lib/input/radio/radio.component.mjs

@@ -14,10 +14,10 @@ export class RadioComponent {
     }
 }
 RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}\n"] }]
+            args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], identifier: [{

package/fesm2015/rivet-health-design-system.mjs

@@ -3510,10 +3510,10 @@ class RadioComponent {
     }
 }
 RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}\n"] }]
+            args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n", styles: [":host{display:inline-flex}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], identifier: [{