@ship-ui/core 0.17.23 → 0.18.0

package/assets/mcp/components.json

@@ -59,7 +59,7 @@
     "examples": [
       {
         "name": "sandbox-icon",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"size() === ''\" (click)=\"size.set('')\">Default</button>\n        <button [class.active]=\"size() === 'large'\" (click)=\"size.set('large')\">Large</button>\n        <button [class.active]=\"size() === 'small'\" (click)=\"size.set('small')\">Small</button>\n        <button [class.active]=\"size() === 'inherit'\" (click)=\"size.set('inherit')\">Inherit</button>\n      </sh-button-group>\n\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n        <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n        <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n        <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n        <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n        <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n      </sh-button-group>\n    </div>\n\n    @if (size() === 'inherit') {\n      <div class=\"row\">\n        <sh-range-slider>\n          <input type=\"range\" [min]=\"10\" [max]=\"64\" [step]=\"2\" [(ngModel)]=\"sizeValue\" />\n        </sh-range-slider>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\" [style.font-size]=\"sizeValue() + 'px'\">\n  <section>\n    <h4>Cloud-warning</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-bold</sh-icon>\n  </section>\n\n  <section>\n    <h4>Warning</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-bold</sh-icon>\n  </section>\n\n  <section>\n    <h4>Warning warning-octagon</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-bold</sh-icon>\n  </section>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\" [(value)]=\"size\">\n        <button value=\"\">Default</button>\n        <button value=\"large\">Large</button>\n        <button value=\"small\">Small</button>\n        <button value=\"inherit\">Inherit</button>\n      </sh-button-group>\n\n      <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n        <button value=\"\">Default</button>\n        <button value=\"primary\">Primary</button>\n        <button value=\"accent\">Accent</button>\n        <button value=\"warn\">Warn</button>\n        <button value=\"error\">Error</button>\n        <button value=\"success\">Success</button>\n      </sh-button-group>\n    </div>\n\n    @if (size() === 'inherit') {\n      <div class=\"row\">\n        <sh-range-slider>\n          <input type=\"range\" [min]=\"10\" [max]=\"64\" [step]=\"2\" [(ngModel)]=\"sizeValue\" />\n        </sh-range-slider>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\" [style.font-size]=\"sizeValue() + 'px'\">\n  <section>\n    <h4>Cloud-warning</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-bold</sh-icon>\n  </section>\n\n  <section>\n    <h4>Warning</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-bold</sh-icon>\n  </section>\n\n  <section>\n    <h4>Warning warning-octagon</h4>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-thin</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-light</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-fill</sh-icon>\n    <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-bold</sh-icon>\n  </section>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipIcon, ShipRangeSlider } from 'ship-ui';\n\n@Component({\n  selector: 'app-sandbox-icon',\n  imports: [FormsModule, ShipIcon, ShipButtonGroup, ShipRangeSlider],\n  templateUrl: './sandbox-icon.html',\n  styleUrl: './sandbox-icon.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxIcon {\n  size = signal<string>('');\n  sizeValue = signal<number>(10);\n  colorClass = signal<string>('');\n}\n"
       }
     ]
@@ -119,7 +119,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n\n  <sh-button-group>\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
         "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipRangeSlider, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-range-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipRangeSlider, ShipButtonGroup, DatePipe],\n  templateUrl: './range-datepicker-sandbox.html',\n  styleUrl: './range-datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeDatepickerSandbox {\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  startDate = signal<Date | null>(new Date());\n  endDate = signal<Date | null>(new Date(Date.now() + 86400000));\n  disabled = signal(false);\n  monthsToShow = signal(2);\n}\n"
       },
       {
@@ -139,8 +139,8 @@
       },
       {
         "name": "datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [class.active]=\"sharp()\" (click)=\"sharp.set(!sharp())\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"startOfWeek() === 1\" (click)=\"startOfWeek.set(1)\">Monday</button>\n    <button [class.active]=\"startOfWeek() === 2\" (click)=\"startOfWeek.set(2)\">Tuesday</button>\n    <button [class.active]=\"startOfWeek() === 3\" (click)=\"startOfWeek.set(3)\">Wednesday</button>\n    <button [class.active]=\"startOfWeek() === 4\" (click)=\"startOfWeek.set(4)\">Thursday</button>\n    <button [class.active]=\"startOfWeek() === 5\" (click)=\"startOfWeek.set(5)\">Friday</button>\n    <button [class.active]=\"startOfWeek() === 6\" (click)=\"startOfWeek.set(6)\">Saturday</button>\n    <button [class.active]=\"startOfWeek() === 0\" (click)=\"startOfWeek.set(0)\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeek()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
-        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal(1);\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n}\n"
+        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [(checked)]=\"disabled\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [(checked)]=\"sharp\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"startOfWeek\">\n    <button value=\"1\">Monday</button>\n    <button value=\"2\">Tuesday</button>\n    <button value=\"3\">Wednesday</button>\n    <button value=\"4\">Thursday</button>\n    <button value=\"5\">Friday</button>\n    <button value=\"6\">Saturday</button>\n    <button value=\"0\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeekComputed()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
+        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal('1');\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n\n  startOfWeekComputed = computed(() => parseInt(this.startOfWeek()));\n}\n"
       },
       {
         "name": "base-datepicker",
@@ -216,7 +216,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n\n  <sh-button-group>\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
         "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipRangeSlider, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-range-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipRangeSlider, ShipButtonGroup, DatePipe],\n  templateUrl: './range-datepicker-sandbox.html',\n  styleUrl: './range-datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeDatepickerSandbox {\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  startDate = signal<Date | null>(new Date());\n  endDate = signal<Date | null>(new Date(Date.now() + 86400000));\n  disabled = signal(false);\n  monthsToShow = signal(2);\n}\n"
       },
       {
@@ -236,8 +236,8 @@
       },
       {
         "name": "datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [class.active]=\"sharp()\" (click)=\"sharp.set(!sharp())\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"startOfWeek() === 1\" (click)=\"startOfWeek.set(1)\">Monday</button>\n    <button [class.active]=\"startOfWeek() === 2\" (click)=\"startOfWeek.set(2)\">Tuesday</button>\n    <button [class.active]=\"startOfWeek() === 3\" (click)=\"startOfWeek.set(3)\">Wednesday</button>\n    <button [class.active]=\"startOfWeek() === 4\" (click)=\"startOfWeek.set(4)\">Thursday</button>\n    <button [class.active]=\"startOfWeek() === 5\" (click)=\"startOfWeek.set(5)\">Friday</button>\n    <button [class.active]=\"startOfWeek() === 6\" (click)=\"startOfWeek.set(6)\">Saturday</button>\n    <button [class.active]=\"startOfWeek() === 0\" (click)=\"startOfWeek.set(0)\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeek()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
-        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal(1);\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n}\n"
+        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [(checked)]=\"disabled\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [(checked)]=\"sharp\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"startOfWeek\">\n    <button value=\"1\">Monday</button>\n    <button value=\"2\">Tuesday</button>\n    <button value=\"3\">Wednesday</button>\n    <button value=\"4\">Thursday</button>\n    <button value=\"5\">Friday</button>\n    <button value=\"6\">Saturday</button>\n    <button value=\"0\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeekComputed()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
+        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal('1');\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n\n  startOfWeekComputed = computed(() => parseInt(this.startOfWeek()));\n}\n"
       },
       {
         "name": "base-datepicker",
@@ -414,7 +414,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n\n  <sh-button-group>\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-range-slider min=\"1\" max=\"3\">\n    <label>Months to show</label>\n    <input type=\"range\" [(ngModel)]=\"monthsToShow\" min=\"1\" max=\"12\" />\n  </sh-range-slider>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    [class]=\"colors()\"\n    [(date)]=\"startDate\"\n    [(endDate)]=\"endDate\"\n    [asRange]=\"true\"\n    [monthsToShow]=\"monthsToShow()\"></sh-datepicker>\n  <p>Start: {{ startDate() | date: 'mediumDate' }}</p>\n  <p>End: {{ endDate() | date: 'mediumDate' }}</p>\n</div>\n",
         "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipRangeSlider, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-range-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipRangeSlider, ShipButtonGroup, DatePipe],\n  templateUrl: './range-datepicker-sandbox.html',\n  styleUrl: './range-datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeDatepickerSandbox {\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  startDate = signal<Date | null>(new Date());\n  endDate = signal<Date | null>(new Date(Date.now() + 86400000));\n  disabled = signal(false);\n  monthsToShow = signal(2);\n}\n"
       },
       {
@@ -434,8 +434,8 @@
       },
       {
         "name": "datepicker-sandbox",
-        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [class.active]=\"sharp()\" (click)=\"sharp.set(!sharp())\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"colors() === ''\" (click)=\"colors.set('')\">Base</button>\n    <button [class.active]=\"colors() === 'primary'\" (click)=\"colors.set('primary')\">Primary</button>\n    <button [class.active]=\"colors() === 'accent'\" (click)=\"colors.set('accent')\">Accent</button>\n    <button [class.active]=\"colors() === 'warn'\" (click)=\"colors.set('warn')\">Warn</button>\n    <button [class.active]=\"colors() === 'error'\" (click)=\"colors.set('error')\">Error</button>\n    <button [class.active]=\"colors() === 'success'\" (click)=\"colors.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\">\n    <button [class.active]=\"startOfWeek() === 1\" (click)=\"startOfWeek.set(1)\">Monday</button>\n    <button [class.active]=\"startOfWeek() === 2\" (click)=\"startOfWeek.set(2)\">Tuesday</button>\n    <button [class.active]=\"startOfWeek() === 3\" (click)=\"startOfWeek.set(3)\">Wednesday</button>\n    <button [class.active]=\"startOfWeek() === 4\" (click)=\"startOfWeek.set(4)\">Thursday</button>\n    <button [class.active]=\"startOfWeek() === 5\" (click)=\"startOfWeek.set(5)\">Friday</button>\n    <button [class.active]=\"startOfWeek() === 6\" (click)=\"startOfWeek.set(6)\">Saturday</button>\n    <button [class.active]=\"startOfWeek() === 0\" (click)=\"startOfWeek.set(0)\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeek()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
-        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal(1);\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n}\n"
+        "html": "<div class=\"controls\">\n  <sh-toggle class=\"raised primary\" [(checked)]=\"disabled\">Disabled</sh-toggle>\n  <sh-toggle class=\"raised primary\" [(checked)]=\"sharp\">Sharp</sh-toggle>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"colors\">\n    <button value=\"\">Base</button>\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group class=\"type-b\" [(value)]=\"startOfWeek\">\n    <button value=\"1\">Monday</button>\n    <button value=\"2\">Tuesday</button>\n    <button value=\"3\">Wednesday</button>\n    <button value=\"4\">Thursday</button>\n    <button value=\"5\">Friday</button>\n    <button value=\"6\">Saturday</button>\n    <button value=\"0\">Sunday</button>\n  </sh-button-group>\n</div>\n\n<div class=\"content\">\n  <sh-datepicker\n    class=\"raised\"\n    [class]=\"exampleClass()\"\n    [(date)]=\"date\"\n    [disabled]=\"disabled()\"\n    [startOfWeek]=\"startOfWeekComputed()\" />\n\n  <p>Selected date: {{ date() | date: 'mediumDate' }}</p>\n</div>\n",
+        "ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipDatepicker, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-datepicker-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipDatepicker, ShipToggle, ShipButtonGroup, DatePipe],\n  templateUrl: './datepicker-sandbox.html',\n  styleUrl: './datepicker-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerSandbox {\n  date = signal<Date | null>(new Date());\n  disabled = signal(false);\n  sharp = signal(false);\n  startOfWeek = signal('1');\n  colors = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n\n  exampleClass = computed(() => this.colors() + ' ' + (this.sharp() ? 'sharp' : ''));\n\n  startOfWeekComputed = computed(() => parseInt(this.startOfWeek()));\n}\n"
       },
       {
         "name": "base-datepicker",
@@ -498,7 +498,7 @@
     "examples": [
       {
         "name": "file-upload-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n\n  <div class=\"row\">\n    <sh-form-field>\n      <label>Accept</label>\n      <input type=\"text\" [(ngModel)]=\"accept\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Placeholder</label>\n      <input type=\"text\" [(ngModel)]=\"placeholder\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Overlay Text</label>\n      <input type=\"text\" [(ngModel)]=\"overlayText\" />\n    </sh-form-field>\n\n    <sh-checkbox class=\"primary raised\" [class.active]=\"multiple()\" (click)=\"multiple.set(!multiple())\">\n      Multiple\n    </sh-checkbox>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-file-upload\n    [(files)]=\"files\"\n    [multiple]=\"multiple()\"\n    [accept]=\"accept()\"\n    [placeholder]=\"placeholder()\"\n    [overlayText]=\"overlayText()\" />\n</div>\n\n<div class=\"files-list\">\n  <h4>Selected Files</h4>\n  <ul>\n    @for (file of files(); track file.name) {\n      <li>{{ file.name }}</li>\n    }\n  </ul>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n\n  <div class=\"row\">\n    <sh-form-field>\n      <label>Accept</label>\n      <input type=\"text\" [(ngModel)]=\"accept\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Placeholder</label>\n      <input type=\"text\" [(ngModel)]=\"placeholder\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Overlay Text</label>\n      <input type=\"text\" [(ngModel)]=\"overlayText\" />\n    </sh-form-field>\n\n    <sh-checkbox class=\"primary raised\" [(checked)]=\"multiple\">\n      Multiple\n    </sh-checkbox>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-file-upload\n    [(files)]=\"files\"\n    [multiple]=\"multiple()\"\n    [accept]=\"accept()\"\n    [placeholder]=\"placeholder()\"\n    [overlayText]=\"overlayText()\" />\n</div>\n\n<div class=\"files-list\">\n  <h4>Selected Files</h4>\n  <ul>\n    @for (file of files(); track file.name) {\n      <li>{{ file.name }}</li>\n    }\n  </ul>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipCheckbox, ShipFileUpload, ShipFormField } from 'ship-ui';\n\n@Component({\n  selector: 'app-file-upload-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipFileUpload, ShipCheckbox, ShipFormField],\n  templateUrl: './file-upload-sandbox.html',\n  styleUrl: './file-upload-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FileUploadSandbox {\n  files = signal<File[]>([]);\n  multiple = signal<boolean>(true);\n  accept = signal<string>('.json,.png');\n  placeholder = signal<string>('Click or drag files here');\n  overlayText = signal<string>('Drop files here');\n}\n"
       },
       {
@@ -590,7 +590,7 @@
       },
       {
         "name": "card-sandbox",
-        "html": "<div class=\"controls\">\n  <header>\n    <div class=\"column\">\n      <p>Controls (sh-card)</p>\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"cardType() === 'type-a'\" (click)=\"cardType.set('type-a')\">Type A</button>\n        <button [class.active]=\"cardType() === 'type-b'\" (click)=\"cardType.set('type-b')\">Type B</button>\n        <button [class.active]=\"cardType() === 'type-c'\" (click)=\"cardType.set('type-c')\">Type C</button>\n      </sh-button-group>\n    </div>\n\n    <div class=\"column\">\n      <p>Controls (sh-toggle-card)</p>\n      <sh-toggle\n        [class.active]=\"disableToggle()\"\n        color=\"primary\"\n        variant=\"raised\"\n        (click)=\"disableToggle.set(!disableToggle())\">\n        Disable Toggle\n      </sh-toggle>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-card [variant]=\"cardType()\">Hello world (sh-card)</sh-card>\n\n  <sh-toggle-card [variant]=\"cardType()\" [disableToggle]=\"disableToggle()\">\n    <ng-container title>Advanced options</ng-container>\n    <p>Hello world (sh-toggle-card)</p>\n\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua.\n    </p>\n\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua.\n    </p>\n  </sh-toggle-card>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <header>\n    <div class=\"column\">\n      <p>Controls (sh-card)</p>\n      <sh-button-group class=\"small\" [(value)]=\"cardType\">\n        <button value=\"type-a\">Type A</button>\n        <button value=\"type-b\">Type B</button>\n        <button value=\"type-c\">Type C</button>\n      </sh-button-group>\n    </div>\n\n    <div class=\"column\">\n      <p>Controls (sh-toggle-card)</p>\n      <sh-toggle [(checked)]=\"disableToggle\" color=\"primary\" variant=\"raised\">Disable Toggle</sh-toggle>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-card [variant]=\"cardType()\">Hello world (sh-card)</sh-card>\n\n  <sh-toggle-card [variant]=\"cardType()\" [disableToggle]=\"disableToggle()\">\n    <ng-container title>Advanced options</ng-container>\n    <p>Hello world (sh-toggle-card)</p>\n\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua.\n    </p>\n\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua.\n    </p>\n  </sh-toggle-card>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipCard, ShipToggle, ShipToggleCard } from 'ship-ui';\n\n@Component({\n  selector: 'app-card-sandbox',\n  imports: [ShipCard, ShipToggleCard, ShipButtonGroup, ShipToggle],\n  templateUrl: './card-sandbox.html',\n  styleUrl: './card-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardSandbox {\n  cardType = signal<'type-a' | 'type-b' | 'type-c'>('type-a');\n  useToggleCard = signal<boolean>(false);\n  disableToggle = signal<boolean>(false);\n}\n"
       },
       {
@@ -672,17 +672,17 @@
       },
       {
         "name": "custom-tabs",
-        "html": "<sh-tabs class=\"primary\">\n  <div tab [class.active]=\"activeTab() === 'tab1'\" (click)=\"activeTab.set('tab1')\">\n    <sh-icon>spinner</sh-icon>\n    Tab 1\n  </div>\n  <div tab [class.active]=\"activeTab() === 'tab2'\" (click)=\"activeTab.set('tab2')\">\n    <sh-icon>hand-palm</sh-icon>\n    Tab 2\n  </div>\n  <div tab [class.active]=\"activeTab() === 'tab3'\" (click)=\"activeTab.set('tab3')\">\n    <sh-icon>check</sh-icon>\n    Tab 3\n  </div>\n</sh-tabs>\n\n@let _activeTab = activeTab();\n\n<div class=\"tab-content\">\n  @if (_activeTab === 'tab1') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab2') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab3') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  }\n</div>\n",
+        "html": "<sh-tabs class=\"primary\" [(value)]=\"activeTab\">\n  <div value=\"tab1\">\n    <sh-icon>spinner</sh-icon>\n    Tab 1\n  </div>\n  <div value=\"tab2\">\n    <sh-icon>hand-palm</sh-icon>\n    Tab 2\n  </div>\n  <div value=\"tab3\">\n    <sh-icon>check</sh-icon>\n    Tab 3\n  </div>\n</sh-tabs>\n\n@let _activeTab = activeTab();\n\n<div class=\"tab-content\">\n  @if (_activeTab === 'tab1') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab2') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab3') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  }\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipIcon, ShipTabs } from 'ship-ui';\nimport Tab from '../../tab/tab';\n\n@Component({\n  selector: 'app-custom-tabs',\n  standalone: true,\n  imports: [ShipTabs, ShipIcon, Tab],\n  templateUrl: './custom-tabs.html',\n  styleUrls: ['./custom-tabs.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CustomTabsComponent {\n  activeTab = signal('tab1');\n}\n"
       },
       {
         "name": "tabs-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n        <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n        <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n        <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n        <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n        <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-tabs [color]=\"colorClass()\">\n    <button tab [class.active]=\"activeTab() === 'tab1'\" (click)=\"activeTab.set('tab1')\">\n      <sh-icon>spinner</sh-icon>\n      Tab 1\n    </button>\n    <button tab [class.active]=\"activeTab() === 'tab2'\" (click)=\"activeTab.set('tab2')\">\n      <sh-icon>hand-palm</sh-icon>\n      Tab 2\n    </button>\n    <button tab [class.active]=\"activeTab() === 'tab3'\" (click)=\"activeTab.set('tab3')\">\n      <sh-icon>check</sh-icon>\n      Tab 3\n    </button>\n  </sh-tabs>\n\n  @let _activeTab = activeTab();\n\n  <div class=\"tab-content\">\n    @if (_activeTab === 'tab1') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    } @else if (_activeTab === 'tab2') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    } @else if (_activeTab === 'tab3') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    }\n  </div>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n        <button value=\"\">Default</button>\n        <button value=\"primary\">Primary</button>\n        <button value=\"accent\">Accent</button>\n        <button value=\"warn\">Warn</button>\n        <button value=\"error\">Error</button>\n        <button value=\"success\">Success</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-tabs [color]=\"colorClass()\" [(value)]=\"activeTab\">\n    <button value=\"tab1\">\n      <sh-icon>spinner</sh-icon>\n      Tab 1\n    </button>\n    <button value=\"tab2\">\n      <sh-icon>hand-palm</sh-icon>\n      Tab 2\n    </button>\n    <button value=\"tab3\">\n      <sh-icon>check</sh-icon>\n      Tab 3\n    </button>\n  </sh-tabs>\n\n  @let _activeTab = activeTab();\n\n  <div class=\"tab-content\">\n    @if (_activeTab === 'tab1') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    } @else if (_activeTab === 'tab2') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    } @else if (_activeTab === 'tab3') {\n      <app-tab [id]=\"_activeTab\"></app-tab>\n    }\n  </div>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipIcon, ShipTabs } from 'ship-ui';\nimport Tab from '../../tab/tab';\n\n@Component({\n  selector: 'app-tabs-sandbox',\n  standalone: true,\n  imports: [ShipTabs, ShipIcon, ShipButtonGroup, Tab],\n  templateUrl: './tabs-sandbox.html',\n  styleUrl: './tabs-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabsSandbox {\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('');\n  tabsClass = computed(() => (this.colorClass() === '' ? '' : this.colorClass()));\n  activeTab = signal('tab1');\n}\n"
       },
       {
         "name": "default-tabs",
-        "html": "<sh-tabs color=\"primary\">\n  <button [class.active]=\"activeTab() === 'tab1'\" (click)=\"activeTab.set('tab1')\">\n    <sh-icon>spinner</sh-icon>\n    Tab 1\n  </button>\n  <button [class.active]=\"activeTab() === 'tab2'\" (click)=\"activeTab.set('tab2')\">\n    <sh-icon>hand-palm</sh-icon>\n    Tab 2\n  </button>\n  <button [class.active]=\"activeTab() === 'tab3'\" (click)=\"activeTab.set('tab3')\">\n    <sh-icon>check</sh-icon>\n    Tab 3\n  </button>\n</sh-tabs>\n\n@let _activeTab = activeTab();\n\n<div class=\"tab-content\">\n  @if (_activeTab === 'tab1') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab2') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab3') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  }\n</div>\n",
+        "html": "<sh-tabs color=\"primary\" [(value)]=\"activeTab\">\n  <button value=\"tab1\">\n    <sh-icon>spinner</sh-icon>\n    Tab 1\n  </button>\n  <button value=\"tab2\">\n    <sh-icon>hand-palm</sh-icon>\n    Tab 2\n  </button>\n  <button value=\"tab3\">\n    <sh-icon>check</sh-icon>\n    Tab 3\n  </button>\n</sh-tabs>\n\n@let _activeTab = activeTab();\n\n<div class=\"tab-content\">\n  @if (_activeTab === 'tab1') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab2') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  } @else if (_activeTab === 'tab3') {\n    <app-tab [id]=\"_activeTab\"></app-tab>\n  }\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipIcon, ShipTabs } from 'ship-ui';\nimport Tab from '../../tab/tab';\n\n@Component({\n  selector: 'app-default-tabs',\n  standalone: true,\n  imports: [ShipTabs, ShipIcon, Tab],\n  templateUrl: './default-tabs.html',\n  styleUrls: ['./default-tabs.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DefaultTabsComponent {\n  activeTab = signal('tab1');\n}\n"
       }
     ]
@@ -1207,7 +1207,7 @@
       },
       {
         "name": "button-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <!-- <sh-toggle [class.active]=\"isSmall()\" class=\"primary raised\" (click)=\"isSmall.set(!isSmall())\">Small</sh-toggle> -->\n\n      <sh-button-group class=\"small type-b\">\n        <button [class.active]=\"sizeClass() === ''\" (click)=\"sizeClass.set('')\">Normal</button>\n        <button [class.active]=\"sizeClass() === 'small'\" (click)=\"sizeClass.set('small')\">Small</button>\n        <button [class.active]=\"sizeClass() === 'xsmall'\" (click)=\"sizeClass.set('xsmall')\">XSmall</button>\n      </sh-button-group>\n\n      <sh-toggle [class.active]=\"isRotated()\" color=\"primary\" variant=\"raised\" (click)=\"isRotated.set(!isRotated())\">\n        Rotated\n      </sh-toggle>\n      <sh-toggle [class.active]=\"isLoading()\" color=\"primary\" variant=\"raised\" (click)=\"isLoading.set(!isLoading())\">\n        Loading\n      </sh-toggle>\n      <sh-toggle [class.active]=\"isDisabled()\" color=\"primary\" variant=\"raised\" (click)=\"isDisabled.set(!isDisabled())\">\n        Disabled\n      </sh-toggle>\n      <sh-toggle [class.active]=\"isReadonly()\" color=\"primary\" variant=\"raised\" (click)=\"isReadonly.set(!isReadonly())\">\n        Readonly\n      </sh-toggle>\n    </div>\n\n    <div class=\"row\">\n      <sh-button-group class=\"small type-b\">\n        <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n        <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n        <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n        <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n        <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n        <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n      </sh-button-group>\n\n      <sh-button-group class=\"small type-b\">\n        <button [class.active]=\"variationClass() === ''\" (click)=\"variationClass.set('')\">Default</button>\n        <button [class.active]=\"variationClass() === 'simple'\" (click)=\"variationClass.set('simple')\">Simple</button>\n        <button [class.active]=\"variationClass() === 'outlined'\" (click)=\"variationClass.set('outlined')\">\n          Outlined\n        </button>\n        <button [class.active]=\"variationClass() === 'flat'\" (click)=\"variationClass.set('flat')\">Flat</button>\n        <button [class.active]=\"variationClass() === 'raised'\" (click)=\"variationClass.set('raised')\">Raised</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n    Default\n    <sh-icon>caret-down</sh-icon>\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n    Primary\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    Primary\n    <sh-icon>caret-down</sh-icon>\n  </button>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <!-- <sh-toggle [(checked)]=\"isSmall\" class=\"primary raised\">Small</sh-toggle> -->\n\n      <sh-button-group class=\"small type-b\" [(value)]=\"sizeClass\">\n        <button value=\"\">Normal</button>\n        <button value=\"small\">Small</button>\n        <button value=\"xsmall\">XSmall</button>\n      </sh-button-group>\n\n      <sh-toggle [(checked)]=\"isRotated\" color=\"primary\" variant=\"raised\">Rotated</sh-toggle>\n      <sh-toggle [(checked)]=\"isLoading\" color=\"primary\" variant=\"raised\">Loading</sh-toggle>\n      <sh-toggle [(checked)]=\"isDisabled\" color=\"primary\" variant=\"raised\">Disabled</sh-toggle>\n      <sh-toggle [(checked)]=\"isReadonly\" color=\"primary\" variant=\"raised\">Readonly</sh-toggle>\n    </div>\n\n    <div class=\"row\">\n      <sh-button-group class=\"small type-b\" [(value)]=\"colorClass\">\n        <button value=\"\">Default</button>\n        <button value=\"primary\">Primary</button>\n        <button value=\"accent\">Accent</button>\n        <button value=\"warn\">Warn</button>\n        <button value=\"error\">Error</button>\n        <button value=\"success\">Success</button>\n      </sh-button-group>\n\n      <sh-button-group class=\"small type-b\" [(value)]=\"variationClass\">\n        <button value=\"\">Default</button>\n        <button value=\"simple\">Simple</button>\n        <button value=\"outlined\">Outlined</button>\n        <button value=\"flat\">Flat</button>\n        <button value=\"raised\">Raised</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n    Default\n    <sh-icon>caret-down</sh-icon>\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    <sh-icon>caret-down</sh-icon>\n    Primary\n  </button>\n\n  <button\n    shButton\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [class.loading]=\"isLoading()\"\n    [class.rotated-icon]=\"isRotated()\"\n    [disabled]=\"isDisabled()\"\n    [attr.readonly]=\"isReadonly() ? true : null\">\n    Primary\n    <sh-icon>caret-down</sh-icon>\n  </button>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { ShipButton, ShipButtonGroup, ShipIcon, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-button-sandbox',\n  imports: [ShipButton, ShipButtonGroup, ShipIcon, ShipToggle],\n  templateUrl: './button-sandbox.html',\n  styleUrl: './button-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonSandbox {\n  isSmall = signal<boolean>(false);\n  isRotated = signal<boolean>(false);\n  isLoading = signal<boolean>(false);\n  isDisabled = signal<boolean>(false);\n  isReadonly = signal<boolean>(false);\n\n  sizeClass = signal<'' | 'small' | 'xsmall'>('');\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  variationClass = signal<'' | 'simple' | 'outlined' | 'flat' | 'raised'>('raised');\n  exampleClass = computed(() => this.colorClass() + ' ' + this.variationClass() + ' ' + this.sizeClass());\n}\n"
       },
       {
@@ -1579,6 +1579,24 @@
         "type": "boolean",
         "description": "",
         "defaultValue": "false"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "noInternalInput",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "checked",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
       }
     ],
     "outputs": [],
@@ -1801,7 +1819,7 @@
     "examples": [
       {
         "name": "sandbox-sidenav",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [class.active]=\"isNavOpen()\" class=\"primary raised\">\n        Open/Close\n        <input type=\"checkbox\" [(ngModel)]=\"isNavOpen\" />\n      </sh-toggle>\n\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"sidenavType() === ''\" (click)=\"sidenavType.set('')\">Default</button>\n        <button [class.active]=\"sidenavType() === 'overlay'\" (click)=\"sidenavType.set('overlay')\">Overlay</button>\n        <button [class.active]=\"sidenavType() === 'simple'\" (click)=\"sidenavType.set('simple')\">Simple</button>\n      </sh-button-group>\n    </div>\n\n    @if (sidenavType() === 'overlay') {\n      <div class=\"row\">\n        <sh-toggle [class.active]=\"disableDrag()\" class=\"primary raised\">\n          Disable Drag\n          <input type=\"checkbox\" [(ngModel)]=\"disableDrag\" />\n        </sh-toggle>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-sidenav [class]=\"sidenavType()\" [(isOpen)]=\"isNavOpen\" [disableDrag]=\"disableDrag()\">\n    <ng-container sidenav>sidenav</ng-container>\n\n    <ng-container sidenav-closed-topbar><button (click)=\"isNavOpen.set(!isNavOpen())\">hello</button></ng-container>\n\n    hello world\n  </sh-sidenav>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [(checked)]=\"isNavOpen\" class=\"primary raised\">Open/Close</sh-toggle>\n\n      <sh-button-group class=\"small\" [(value)]=\"sidenavType\">\n        <button value=\"\">Default</button>\n        <button value=\"overlay\">Overlay</button>\n        <button value=\"simple\">Simple</button>\n      </sh-button-group>\n    </div>\n\n    @if (sidenavType() === 'overlay') {\n      <div class=\"row\">\n        <sh-toggle [(checked)]=\"disableDrag\" class=\"primary raised\">Disable Drag</sh-toggle>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-sidenav [class]=\"sidenavType()\" [(isOpen)]=\"isNavOpen\" [disableDrag]=\"disableDrag()\">\n    <ng-container sidenav>sidenav</ng-container>\n\n    <ng-container sidenav-closed-topbar><button (click)=\"isNavOpen.set(!isNavOpen())\">hello</button></ng-container>\n\n    hello world\n  </sh-sidenav>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipSidenav, ShipSidenavType, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-sandbox-sidenav',\n  imports: [FormsModule, ShipSidenav, ShipButtonGroup, ShipToggle],\n  templateUrl: './sandbox-sidenav.html',\n  styleUrl: './sandbox-sidenav.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxSidenav {\n  sidenavType = signal<ShipSidenavType>('simple');\n  isNavOpen = signal(false);\n  disableDrag = signal(false);\n}\n"
       }
     ]
@@ -2132,7 +2150,7 @@
       },
       {
         "name": "range-slider-sandbox",
-        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-toggle class=\"primary raised\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">\n      Disabled\n    </sh-toggle>\n    <sh-toggle class=\"primary raised\" [class.active]=\"readonly()\" (click)=\"readonly.set(!readonly())\">\n      Read-only\n    </sh-toggle>\n\n    @if (variation() !== 'thick') {\n      <sh-toggle class=\"primary raised\" [class.active]=\"alwaysShow()\" (click)=\"alwaysShow.set(!alwaysShow())\">\n        Always show value indicator\n      </sh-toggle>\n    }\n    <sh-toggle class=\"primary raised\" [class.active]=\"sharp()\" (click)=\"sharp.set(!sharp())\">Sharp</sh-toggle>\n  </div>\n\n  <sh-button-group>\n    <button [class.active]=\"color() === 'primary'\" (click)=\"color.set('primary')\">Primary</button>\n    <button [class.active]=\"color() === 'accent'\" (click)=\"color.set('accent')\">Accent</button>\n    <button [class.active]=\"color() === 'warn'\" (click)=\"color.set('warn')\">Warn</button>\n    <button [class.active]=\"color() === 'error'\" (click)=\"color.set('error')\">Error</button>\n    <button [class.active]=\"color() === 'success'\" (click)=\"color.set('success')\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group>\n    <button [class.active]=\"variation() === 'base'\" (click)=\"variation.set('base')\">Base</button>\n    <button [class.active]=\"variation() === 'thick'\" (click)=\"variation.set('thick')\">Thick</button>\n    <button [class.active]=\"variation() === 'outlined'\" (click)=\"variation.set('outlined')\">Outlined</button>\n    <button [class.active]=\"variation() === 'flat'\" (click)=\"variation.set('flat')\">Flat</button>\n    <button [class.active]=\"variation() === 'raised'\" (click)=\"variation.set('raised')\">Raised</button>\n  </sh-button-group>\n\n  <div class=\"fields\">\n    <sh-form-field>\n      <label>Unit</label>\n      <input type=\"text\" [(ngModel)]=\"unit\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Min</label>\n      <input type=\"text\" [(ngModel)]=\"min\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Max</label>\n      <input type=\"text\" [(ngModel)]=\"max\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Step</label>\n      <input type=\"text\" [(ngModel)]=\"step\" />\n    </sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox-example\">\n  <sh-range-slider\n    [unit]=\"unit()\"\n    [class]=\"color() + ' ' + variation()\"\n    [class.sharp]=\"sharp()\"\n    [class.always-show]=\"alwaysShow()\">\n    <input\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\" />\n  </sh-range-slider>\n  <p>Selected: {{ value() }}</p>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-toggle class=\"primary raised\" [(checked)]=\"disabled\">Disabled</sh-toggle>\n    <sh-toggle class=\"primary raised\" [(checked)]=\"readonly\">Read-only</sh-toggle>\n\n    @if (variation() !== 'thick') {\n      <sh-toggle class=\"primary raised\" [(checked)]=\"alwaysShow\">Always show value indicator</sh-toggle>\n    }\n    <sh-toggle class=\"primary raised\" [(checked)]=\"sharp\">Sharp</sh-toggle>\n  </div>\n\n  <sh-button-group [(value)]=\"color\">\n    <button value=\"primary\">Primary</button>\n    <button value=\"accent\">Accent</button>\n    <button value=\"warn\">Warn</button>\n    <button value=\"error\">Error</button>\n    <button value=\"success\">Success</button>\n  </sh-button-group>\n\n  <sh-button-group [(value)]=\"variation\">\n    <button value=\"base\">Base</button>\n    <button value=\"thick\">Thick</button>\n    <button value=\"outlined\">Outlined</button>\n    <button value=\"flat\">Flat</button>\n    <button value=\"raised\">Raised</button>\n  </sh-button-group>\n\n  <div class=\"fields\">\n    <sh-form-field>\n      <label>Unit</label>\n      <input type=\"text\" [(ngModel)]=\"unit\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Min</label>\n      <input type=\"text\" [(ngModel)]=\"min\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Max</label>\n      <input type=\"text\" [(ngModel)]=\"max\" />\n    </sh-form-field>\n\n    <sh-form-field>\n      <label>Step</label>\n      <input type=\"text\" [(ngModel)]=\"step\" />\n    </sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox-example\">\n  <sh-range-slider\n    [unit]=\"unit()\"\n    [class]=\"color() + ' ' + variation()\"\n    [class.sharp]=\"sharp()\"\n    [class.always-show]=\"alwaysShow()\">\n    <input\n      type=\"range\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\" />\n  </sh-range-slider>\n  <p>Selected: {{ value() }}</p>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipFormField, ShipRangeSlider, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-range-slider-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipRangeSlider, ShipButtonGroup, ShipToggle, ShipFormField],\n  templateUrl: './range-slider-sandbox.html',\n  styleUrl: './range-slider-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeSliderSandbox {\n  value = signal(50);\n  min = signal(0);\n  max = signal(100);\n  step = signal(1);\n  disabled = signal(false);\n  readonly = signal(false);\n  alwaysShow = signal(false);\n  sharp = signal(false);\n  unit = signal('%');\n  color = signal<'primary' | 'accent' | 'warn' | 'success' | 'error'>('primary');\n  variation = signal<'base' | 'thick' | 'outlined' | 'flat' | 'raised'>('base');\n}\n"
       },
       {
@@ -2171,7 +2189,7 @@
     "name": "ShipStepper",
     "selector": "sh-stepper",
     "path": "core/projects/ship-ui/src/lib/ship-stepper/ship-stepper.ts",
-    "description": "### Colors\n\nStepper colors can be set using the\n`color`\nattribute. Available options are:\n**primary**\n,\n**accent**\n,\n**warn**\n,\n**error**\n, and\n**success**\n.",
+    "description": "### Colors\n\nStepper colors can be set using the\n`color`\nattribute. Available options are:\n**primary**\n,\n**accent**\n,\n**warn**\n,\n**error**\n, and\n**success**\n.\n\n:::info\nThis component utilizes the **Ship Sheet** utility for its visual structure. It supports standard sheet variations and is affected by global sheet variables.\n:::",
     "inputs": [
       {
         "name": "color",
@@ -2188,7 +2206,14 @@
       }
     ],
     "outputs": [],
-    "methods": [],
+    "methods": [
+      {
+        "name": "super",
+        "parameters": "'[value], [step], [routerLinkActive], button, a', 'active');\n\n    effect(() => {\n      this.items().forEach((item) => {\n        if (!item.querySelector('.sh-radio')",
+        "returnType": "any",
+        "description": ""
+      }
+    ],
     "cssVariables": [
       {
         "name": "--step-track-bg",
@@ -2222,23 +2247,23 @@
     "examples": [
       {
         "name": "stepper-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\">\n        <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n        <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n        <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n        <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n        <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n        <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-stepper [color]=\"colorClass()\">\n    <div step [class.active]=\"activeStep() === 0\" (click)=\"activeStep.set(0)\">\n      <sh-radio />\n      Step 1\n    </div>\n    <div step [class.active]=\"activeStep() === 1\" (click)=\"activeStep.set(1)\">\n      <sh-radio />\n      Step 2\n    </div>\n    <div step [class.active]=\"activeStep() === 2\" (click)=\"activeStep.set(2)\">\n      <sh-radio />\n      Step 3\n    </div>\n  </sh-stepper>\n\n  @let _activeStep = activeStep();\n\n  <div class=\"step-content\">\n    @if (_activeStep === 0) {\n      <div>Step 1 Content</div>\n    } @else if (_activeStep === 1) {\n      <div>Step 2 Content</div>\n    } @else if (_activeStep === 2) {\n      <div>Step 3 Content</div>\n    }\n  </div>\n</div>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipRadio, ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-stepper-sandbox',\n  standalone: true,\n  imports: [ShipStepper, ShipRadio, ShipButtonGroup],\n  templateUrl: './stepper-sandbox.html',\n  styleUrl: './stepper-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperSandbox {\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('');\n  stepperClass = computed(() => (this.colorClass() === '' ? '' : this.colorClass()));\n  activeStep = signal(0);\n}\n"
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n        <button value=\"\">Default</button>\n        <button value=\"primary\">Primary</button>\n        <button value=\"accent\">Accent</button>\n        <button value=\"warn\">Warn</button>\n        <button value=\"error\">Error</button>\n        <button value=\"success\">Success</button>\n      </sh-button-group>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-stepper [color]=\"colorClass()\" [(value)]=\"activeStep\">\n    <div value=\"0\">Step 1</div>\n    <div value=\"1\">Step 2</div>\n    <div value=\"2\">Step 3</div>\n  </sh-stepper>\n\n  @let _activeStep = activeStep();\n\n  <div class=\"step-content\">\n    @if (_activeStep === '0') {\n      <div>Step 1 Content</div>\n    } @else if (_activeStep === '1') {\n      <div>Step 2 Content</div>\n    } @else if (_activeStep === '2') {\n      <div>Step 3 Content</div>\n    }\n  </div>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-stepper-sandbox',\n  standalone: true,\n  imports: [ShipStepper, ShipButtonGroup],\n  templateUrl: './stepper-sandbox.html',\n  styleUrl: './stepper-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperSandbox {\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('');\n  stepperClass = computed(() => (this.colorClass() === '' ? '' : this.colorClass()));\n  activeStep = signal('0');\n}\n"
       },
       {
         "name": "router-stepper",
-        "html": "<sh-stepper class=\"primary\">\n  <div step routerLink=\"/steppers/step-1\" routerLinkActive=\"active\">\n    <sh-radio />\n    Step 1\n  </div>\n  <div step routerLink=\"/steppers/step-2\" routerLinkActive=\"active\">\n    <sh-radio />\n    Step 2\n  </div>\n  <div step routerLink=\"/steppers/step-3\" routerLinkActive=\"active\">\n    <sh-radio />\n    Step 3\n  </div>\n  <div step routerLink=\"/steppers/step-4\" routerLinkActive=\"active\">\n    <sh-radio />\n    Step 4\n  </div>\n  <div step routerLink=\"/steppers/step-5\" routerLinkActive=\"active\">\n    <sh-radio />\n    Step 5\n  </div>\n</sh-stepper>\n",
-        "ts": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { ShipRadio, ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-router-steppers',\n  standalone: true,\n  imports: [ShipStepper, ShipRadio, RouterLink, RouterLinkActive],\n  templateUrl: './router-steppers.html',\n  styleUrl: './router-steppers.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Steppers {}\n"
+        "html": "<sh-stepper class=\"primary\">\n  <div routerLink=\"/steppers/step-1\" routerLinkActive=\"active\">Step 1</div>\n  <div routerLink=\"/steppers/step-2\" routerLinkActive=\"active\">Step 2</div>\n  <div routerLink=\"/steppers/step-3\" routerLinkActive=\"active\">Step 3</div>\n  <div routerLink=\"/steppers/step-4\" routerLinkActive=\"active\">Step 4</div>\n  <div routerLink=\"/steppers/step-5\" routerLinkActive=\"active\">Step 5</div>\n</sh-stepper>\n",
+        "ts": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-router-steppers',\n  standalone: true,\n  imports: [ShipStepper, RouterLink, RouterLinkActive],\n  templateUrl: './router-steppers.html',\n  styleUrl: './router-steppers.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Steppers {}\n"
       },
       {
         "name": "default-stepper",
-        "html": "<sh-stepper>\n  <button [class.active]=\"activeStep() === 0\" (click)=\"activeStep.set(0)\">\n    <sh-radio />\n    Step 1\n  </button>\n  <button [class.active]=\"activeStep() === 1\" (click)=\"activeStep.set(1)\">\n    <sh-radio />\n    Step 2\n  </button>\n  <button [class.active]=\"activeStep() === 2\" (click)=\"activeStep.set(2)\">\n    <sh-radio />\n    Step 3\n  </button>\n</sh-stepper>\n\n@let _activeStep = activeStep();\n\n<div class=\"step-content\">\n  @if (_activeStep === 0) {\n    <div>Step 1 Content</div>\n  } @else if (_activeStep === 1) {\n    <div>Step 2 Content</div>\n  } @else if (_activeStep === 2) {\n    <div>Step 3 Content</div>\n  }\n</div>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipRadio, ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-default-steppers',\n  standalone: true,\n  imports: [ShipStepper, ShipRadio],\n  templateUrl: './default-steppers.html',\n  styleUrls: ['./default-steppers.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DefaultStepperComponent {\n  activeStep = signal(0);\n}\n"
+        "html": "<sh-stepper [(value)]=\"activeStep\">\n  <button value=\"0\">\n    Step 1\n  </button>\n  <button value=\"1\">\n    Step 2\n  </button>\n  <button value=\"2\">\n    Step 3\n  </button>\n</sh-stepper>\n\n@let _activeStep = activeStep();\n\n<div class=\"step-content\">\n  @if (_activeStep === '0') {\n    <div>Step 1 Content</div>\n  } @else if (_activeStep === '1') {\n    <div>Step 2 Content</div>\n  } @else if (_activeStep === '2') {\n    <div>Step 3 Content</div>\n  }\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-default-steppers',\n  standalone: true,\n  imports: [ShipStepper],\n  templateUrl: './default-steppers.html',\n  styleUrls: ['./default-steppers.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DefaultStepperComponent {\n  activeStep = signal('0');\n}\n"
       },
       {
         "name": "custom-stepper",
-        "html": "<sh-stepper>\n  <div step [class.active]=\"activeStep() === 0\" (click)=\"activeStep.set(0)\">\n    <sh-radio />\n    Step 1\n  </div>\n  <div step [class.active]=\"activeStep() === 1\" (click)=\"activeStep.set(1)\">\n    <sh-radio />\n    Step 2\n  </div>\n  <div step [class.active]=\"activeStep() === 2\" (click)=\"activeStep.set(2)\">\n    <sh-radio />\n    Step 3\n  </div>\n</sh-stepper>\n\n@let _activeStep = activeStep();\n\n<div class=\"step-content\">\n  @if (_activeStep === 0) {\n    <div>Step 1 Content</div>\n  } @else if (_activeStep === 1) {\n    <div>Step 2 Content</div>\n  } @else if (_activeStep === 2) {\n    <div>Step 3 Content</div>\n  }\n</div>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipRadio, ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-custom-steppers',\n  standalone: true,\n  imports: [ShipStepper, ShipRadio],\n  templateUrl: './custom-steppers.html',\n  styleUrls: ['./custom-steppers.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CustomSteppersComponent {\n  activeStep = signal(0);\n}\n"
+        "html": "<sh-stepper [(value)]=\"activeStep\">\n  <div value=\"0\">\n    Step 1\n  </div>\n  <div value=\"1\">\n    Step 2\n  </div>\n  <div value=\"2\">\n    Step 3\n  </div>\n</sh-stepper>\n\n@let _activeStep = activeStep();\n\n<div class=\"step-content\">\n  @if (_activeStep === '0') {\n    <div>Step 1 Content</div>\n  } @else if (_activeStep === '1') {\n    <div>Step 2 Content</div>\n  } @else if (_activeStep === '2') {\n    <div>Step 3 Content</div>\n  }\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipStepper } from 'ship-ui';\n\n@Component({\n  selector: 'app-custom-steppers',\n  standalone: true,\n  imports: [ShipStepper],\n  templateUrl: './custom-steppers.html',\n  styleUrls: ['./custom-steppers.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CustomSteppersComponent {\n  activeStep = signal('0');\n}\n"
       }
     ]
   },
@@ -2328,8 +2353,8 @@
     "examples": [
       {
         "name": "base-button-group",
-        "html": "<sh-button-group [class.small]=\"small()\" [class]=\"type()\">\n  @for (item of items(); track $index) {\n    <button [class.active]=\"activeIndex() === $index\" (click)=\"updateActiveIndex($index)\">\n      <sh-icon>circle</sh-icon>\n      Hello\n    </button>\n  }\n</sh-button-group>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipIcon } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-button-group',\n  imports: [ShipButtonGroup, ShipIcon],\n  templateUrl: './base-button-group.html',\n  styleUrl: './base-button-group.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseButtonGroup {\n  small = input<boolean>(false);\n  type = input<'' | 'type-b'>('');\n  activeIndex = signal<number | null>(null);\n\n  items = signal(new Array(5).fill(0));\n\n  updateActiveIndex(newIndex: number) {\n    this.activeIndex.set(newIndex === this.activeIndex() ? null : newIndex);\n  }\n}\n"
+        "html": "<sh-button-group [class.small]=\"small()\" [class]=\"type()\">\n  @for (item of items(); track $index; let idx = $index) {\n    <button [class.active]=\"activeIndex() === idx\" (click)=\"updateActiveIndex(idx)\">\n      <sh-icon>circle</sh-icon>\n      Hello\n    </button>\n  }\n</sh-button-group>\n\n<sh-button-group [class.small]=\"small()\" [class]=\"type()\" [(value)]=\"selected\">\n  <button value=\"one\">One</button>\n  <button value=\"two\">Two</button>\n  <button value=\"three\">Three</button>\n  <button value=\"four\">Four</button>\n  <button value=\"five\">Five</button>\n</sh-button-group>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipIcon } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-button-group',\n  imports: [ShipButtonGroup, ShipIcon],\n  templateUrl: './base-button-group.html',\n  styleUrl: './base-button-group.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseButtonGroup {\n  small = input<boolean>(false);\n  type = input<'' | 'type-b'>('');\n  activeIndex = signal<number | null>(null);\n  selected = signal<string | null>(null);\n\n  items = signal(new Array(5).fill(0));\n\n  updateActiveIndex(newIndex: number) {\n    this.activeIndex.set(newIndex === this.activeIndex() ? null : newIndex);\n  }\n}\n"
       }
     ]
   },
@@ -2497,13 +2522,18 @@
       {
         "name": "data-passing-dialog",
         "html": "<div style=\"padding: 2rem\">\n  <p>Dialog received: {{ data()?.message }}</p>\n  <button shButton (click)=\"closeWithValue()\">Close with value</button>\n</div>\n",
-        "ts": "import { Component, inject, input, output } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'data-passing-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-passing-dialog.html',\n  styleUrl: './data-passing-dialog.scss',\n})\nexport class DataPassingDialog {\n  #dialog = inject(ShipDialogService);\n\n  type = input<string>();\n\n  openDialog() {\n    const dialogRef = this.#dialog.open(DataDialogContent, {\n      class: this.type() ?? '',\n      data: { message: 'Hello from parent!' },\n      closed: (result: any) => {\n        console.log('Dialog function closed with: \\t' + result);\n      },\n    });\n\n    dialogRef.component.closed.subscribe((res) => {\n      console.log('Dialog component closed: \\t', res);\n    });\n\n    dialogRef.closed.subscribe((res) => {\n      console.log('Dialog ref closed: \\t', res);\n    });\n  }\n}\n\n@Component({\n  selector: 'data-dialog-content',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-dialog-content.html',\n  styleUrl: './data-dialog-content.scss',\n})\nclass DataDialogContent {\n  data = input<{ message: string }>();\n  closed = output<string>();\n\n  closeWithValue() {\n    console.log('closeWithValue');\n    this.closed.emit('Some value from dialog');\n  }\n}\n"
+        "ts": "import { Component, inject, input, output } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'data-passing-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-passing-dialog.html',\n  styleUrl: './data-passing-dialog.scss',\n})\nexport class DataPassingDialog {\n  #dialog = inject(ShipDialogService);\n\n  type = input<string>();\n\n  openDialog() {\n    const dialogRef = this.#dialog.open(DataDialogContent, {\n      class: this.type() ?? '',\n      data: { message: 'Hello from parent!', hello: true },\n      closed: (result: any) => {\n        console.log('Dialog function closed with: \\t' + result);\n      },\n    });\n\n    dialogRef.component.closed.subscribe((res) => {\n      console.log('Dialog component closed: \\t', res);\n    });\n\n    dialogRef.closed.subscribe((res) => {\n      console.log('Dialog ref closed: \\t', res);\n    });\n  }\n}\n\n@Component({\n  selector: 'data-dialog-content',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-dialog-content.html',\n  styleUrl: './data-dialog-content.scss',\n})\nclass DataDialogContent {\n  data = input<{ message: string; hello: boolean }>();\n  closed = output<string>();\n\n  closeWithValue() {\n    console.log('closeWithValue');\n    this.closed.emit('Some value from dialog');\n  }\n}\n"
       },
       {
         "name": "dialog-as-component",
         "html": "<button shButton (click)=\"openDialog()\" [class.type]=\"type()\">Open dialog as component</button>\n\n<sh-dialog [(isOpen)]=\"isOpen\" (closed)=\"close()\">hello im dialog content</sh-dialog>\n",
         "ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButton, ShipDialog } from 'ship-ui';\n\n@Component({\n  selector: 'app-dialog-as-component',\n  imports: [ShipDialog, ShipButton],\n  templateUrl: './dialog-as-component.html',\n  styleUrl: './dialog-as-component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DialogAsComponent {\n  type = input<string>();\n\n  isOpen = signal(false);\n\n  openDialog() {\n    this.isOpen.set(true);\n  }\n\n  close() {\n    this.isOpen.set(false);\n  }\n}\n"
       },
+      {
+        "name": "template-dialog",
+        "html": "<button shButton (click)=\"openTemplateDialog(myDialog)\">Open Template Dialog</button>\n\n<ng-template #myDialog let-data let-close=\"close\">\n  <div content>\n    <h2>{{ data.message }}</h2>\n    <p>This dialog is rendered entirely from a TemplateRef.</p>\n    <div>\n      <button shButton (click)=\"close()\">Close Dialog</button>\n    </div>\n  </div>\n</ng-template>\n",
+        "ts": "import { Component, inject, input, TemplateRef } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'template-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './template-dialog.html',\n  styleUrl: './template-dialog.scss',\n})\nexport class TemplateDialog {\n  #dialog = inject(ShipDialogService);\n  type = input<string>();\n\n  openTemplateDialog(template: TemplateRef<any>) {\n    this.#dialog.open(template, {\n      data: { message: 'Hello from Template!' },\n      class: this.type() || 'default',\n    });\n  }\n}\n"
+      },
       {
         "name": "basic-dynamic-dialog",
         "html": "<button shButton (click)=\"openDialog()\">Open Basic Dialog</button>\n",
@@ -2526,8 +2556,8 @@
     "methods": [
       {
         "name": "open",
-        "parameters": "component: Type<T>, options?: _Options",
-        "returnType": "ShipDialogInstance<T>",
+        "parameters": "componentOrTemplate: T,\n    options?: _Options",
+        "returnType": "T extends TemplateRef<any> ? ShipDialogTemplateInstance<T> : T extends Type<infer I> ? ShipDialogInstance<I> : never;\n  open<T = any, K = ComponentDataType<T>, U = ComponentClosedType<T>>(\n    componentOrTemplate: Type<T> | TemplateRef<any>,\n    options?: any\n  ): ShipDialogInstance<any>",
         "description": ""
       }
     ],
@@ -2536,13 +2566,18 @@
       {
         "name": "data-passing-dialog",
         "html": "<div style=\"padding: 2rem\">\n  <p>Dialog received: {{ data()?.message }}</p>\n  <button shButton (click)=\"closeWithValue()\">Close with value</button>\n</div>\n",
-        "ts": "import { Component, inject, input, output } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'data-passing-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-passing-dialog.html',\n  styleUrl: './data-passing-dialog.scss',\n})\nexport class DataPassingDialog {\n  #dialog = inject(ShipDialogService);\n\n  type = input<string>();\n\n  openDialog() {\n    const dialogRef = this.#dialog.open(DataDialogContent, {\n      class: this.type() ?? '',\n      data: { message: 'Hello from parent!' },\n      closed: (result: any) => {\n        console.log('Dialog function closed with: \\t' + result);\n      },\n    });\n\n    dialogRef.component.closed.subscribe((res) => {\n      console.log('Dialog component closed: \\t', res);\n    });\n\n    dialogRef.closed.subscribe((res) => {\n      console.log('Dialog ref closed: \\t', res);\n    });\n  }\n}\n\n@Component({\n  selector: 'data-dialog-content',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-dialog-content.html',\n  styleUrl: './data-dialog-content.scss',\n})\nclass DataDialogContent {\n  data = input<{ message: string }>();\n  closed = output<string>();\n\n  closeWithValue() {\n    console.log('closeWithValue');\n    this.closed.emit('Some value from dialog');\n  }\n}\n"
+        "ts": "import { Component, inject, input, output } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'data-passing-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-passing-dialog.html',\n  styleUrl: './data-passing-dialog.scss',\n})\nexport class DataPassingDialog {\n  #dialog = inject(ShipDialogService);\n\n  type = input<string>();\n\n  openDialog() {\n    const dialogRef = this.#dialog.open(DataDialogContent, {\n      class: this.type() ?? '',\n      data: { message: 'Hello from parent!', hello: true },\n      closed: (result: any) => {\n        console.log('Dialog function closed with: \\t' + result);\n      },\n    });\n\n    dialogRef.component.closed.subscribe((res) => {\n      console.log('Dialog component closed: \\t', res);\n    });\n\n    dialogRef.closed.subscribe((res) => {\n      console.log('Dialog ref closed: \\t', res);\n    });\n  }\n}\n\n@Component({\n  selector: 'data-dialog-content',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './data-dialog-content.html',\n  styleUrl: './data-dialog-content.scss',\n})\nclass DataDialogContent {\n  data = input<{ message: string; hello: boolean }>();\n  closed = output<string>();\n\n  closeWithValue() {\n    console.log('closeWithValue');\n    this.closed.emit('Some value from dialog');\n  }\n}\n"
       },
       {
         "name": "dialog-as-component",
         "html": "<button shButton (click)=\"openDialog()\" [class.type]=\"type()\">Open dialog as component</button>\n\n<sh-dialog [(isOpen)]=\"isOpen\" (closed)=\"close()\">hello im dialog content</sh-dialog>\n",
         "ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButton, ShipDialog } from 'ship-ui';\n\n@Component({\n  selector: 'app-dialog-as-component',\n  imports: [ShipDialog, ShipButton],\n  templateUrl: './dialog-as-component.html',\n  styleUrl: './dialog-as-component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DialogAsComponent {\n  type = input<string>();\n\n  isOpen = signal(false);\n\n  openDialog() {\n    this.isOpen.set(true);\n  }\n\n  close() {\n    this.isOpen.set(false);\n  }\n}\n"
       },
+      {
+        "name": "template-dialog",
+        "html": "<button shButton (click)=\"openTemplateDialog(myDialog)\">Open Template Dialog</button>\n\n<ng-template #myDialog let-data let-close=\"close\">\n  <div content>\n    <h2>{{ data.message }}</h2>\n    <p>This dialog is rendered entirely from a TemplateRef.</p>\n    <div>\n      <button shButton (click)=\"close()\">Close Dialog</button>\n    </div>\n  </div>\n</ng-template>\n",
+        "ts": "import { Component, inject, input, TemplateRef } from '@angular/core';\nimport { ShipButton, ShipDialogService } from 'ship-ui';\n\n@Component({\n  selector: 'template-dialog',\n  standalone: true,\n  imports: [ShipButton],\n  templateUrl: './template-dialog.html',\n  styleUrl: './template-dialog.scss',\n})\nexport class TemplateDialog {\n  #dialog = inject(ShipDialogService);\n  type = input<string>();\n\n  openTemplateDialog(template: TemplateRef<any>) {\n    this.#dialog.open(template, {\n      data: { message: 'Hello from Template!' },\n      class: this.type() || 'default',\n    });\n  }\n}\n"
+      },
       {
         "name": "basic-dynamic-dialog",
         "html": "<button shButton (click)=\"openDialog()\">Open Basic Dialog</button>\n",
@@ -2591,6 +2626,24 @@
         "type": "boolean",
         "description": "",
         "defaultValue": "false"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "noInternalInput",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "checked",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
       }
     ],
     "outputs": [],
@@ -2616,27 +2669,27 @@
     "examples": [
       {
         "name": "base-toggle",
-        "html": "<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" color=\"primary\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" color=\"accent\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" color=\"warn\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" color=\"error\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" color=\"success\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" disabled />\n",
+        "html": "<sh-toggle [(checked)]=\"active\" />\n<sh-toggle [(checked)]=\"active\" color=\"primary\" />\n<sh-toggle [(checked)]=\"active\" color=\"accent\" />\n<sh-toggle [(checked)]=\"active\" color=\"warn\" />\n<sh-toggle [(checked)]=\"active\" color=\"error\" />\n<sh-toggle [(checked)]=\"active\" color=\"success\" />\n<sh-toggle [(checked)]=\"active\" [disabled]=\"true\" />\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-toggle',\n  standalone: true,\n  imports: [ShipToggle],\n  templateUrl: './base-toggle.html',\n  styleUrl: './base-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseToggle {\n  active = signal(false);\n}\n"
       },
       {
         "name": "outlined-toggle",
-        "html": "<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" color=\"primary\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" color=\"accent\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" color=\"warn\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" color=\"error\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" color=\"success\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"outlined\" disabled />\n",
+        "html": "<sh-toggle [(checked)]=\"active\" variant=\"outlined\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" color=\"primary\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" color=\"accent\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" color=\"warn\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" color=\"error\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" color=\"success\" />\n<sh-toggle [(checked)]=\"active\" variant=\"outlined\" [disabled]=\"true\" />\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-outlined-toggle',\n  standalone: true,\n  imports: [ShipToggle],\n  templateUrl: './outlined-toggle.html',\n  styleUrl: './outlined-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OutlinedToggle {\n  active = signal(false);\n}\n"
       },
       {
         "name": "simple-toggle",
-        "html": "<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" color=\"primary\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" color=\"accent\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" color=\"warn\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" color=\"error\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" color=\"success\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"simple\" disabled />\n",
+        "html": "<sh-toggle [(checked)]=\"active\" variant=\"simple\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" color=\"primary\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" color=\"accent\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" color=\"warn\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" color=\"error\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" color=\"success\" />\n<sh-toggle [(checked)]=\"active\" variant=\"simple\" [disabled]=\"true\" />\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-simple-toggle',\n  standalone: true,\n  imports: [ShipToggle],\n  templateUrl: './simple-toggle.html',\n  styleUrl: './simple-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SimpleToggle {\n  active = signal(false);\n}\n"
       },
       {
         "name": "raised-toggle",
-        "html": "<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" color=\"primary\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" color=\"accent\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" color=\"warn\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" color=\"error\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" color=\"success\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"raised\" disabled />\n",
+        "html": "<sh-toggle [(checked)]=\"active\" variant=\"raised\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" color=\"primary\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" color=\"accent\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" color=\"warn\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" color=\"error\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" color=\"success\" />\n<sh-toggle [(checked)]=\"active\" variant=\"raised\" [disabled]=\"true\" />\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-raised-toggle',\n  standalone: true,\n  imports: [ShipToggle],\n  templateUrl: './raised-toggle.html',\n  styleUrl: './raised-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RaisedToggle {\n  active = signal(false);\n}\n"
       },
       {
         "name": "flat-toggle",
-        "html": "<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" color=\"primary\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" color=\"accent\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" color=\"warn\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" color=\"error\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" color=\"success\" />\n<sh-toggle [class.active]=\"active()\" (click)=\"active.set(!active())\" variant=\"flat\" disabled />\n",
+        "html": "<sh-toggle [(checked)]=\"active\" variant=\"flat\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" color=\"primary\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" color=\"accent\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" color=\"warn\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" color=\"error\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" color=\"success\" />\n<sh-toggle [(checked)]=\"active\" variant=\"flat\" [disabled]=\"true\" />\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-flat-toggle',\n  standalone: true,\n  imports: [ShipToggle],\n  templateUrl: './flat-toggle.html',\n  styleUrl: './flat-toggle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlatToggle {\n  active = signal(false);\n}\n"
       }
     ]
@@ -2761,7 +2814,7 @@
       },
       {
         "name": "chip-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [class.active]=\"isSmall()\" color=\"primary\" variant=\"raised\" (click)=\"isSmall.set(!isSmall())\">\n        Small\n      </sh-toggle>\n      <sh-toggle [class.active]=\"isSharp()\" color=\"primary\" variant=\"raised\" (click)=\"isSharp.set(!isSharp())\">\n        Sharp\n      </sh-toggle>\n      <sh-toggle [class.active]=\"isDynamic()\" color=\"primary\" variant=\"raised\" (click)=\"isDynamic.set(!isDynamic())\">\n        Dynamic coloring\n      </sh-toggle>\n    </div>\n\n    <div class=\"row\">\n      @if (isDynamic()) {\n        <div>\n          <p>It's not great at colors to light, we're working on a better css based color algorithm.</p>\n          <br />\n          <sh-color-picker\n            [renderingType]=\"'hsl'\"\n            [showDarkColors]=\"true\"\n            [selectedColor]=\"selectedColor()\"\n            (currentColor)=\"currentColor.set($event)\" />\n        </div>\n      } @else {\n        <sh-button-group class=\"small\">\n          <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n          <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n          <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n          <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n          <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n          <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n        </sh-button-group>\n\n        <sh-button-group class=\"small\">\n          <button [class.active]=\"variationClass() === ''\" (click)=\"variationClass.set('')\">Default</button>\n          <button [class.active]=\"variationClass() === 'simple'\" (click)=\"variationClass.set('simple')\">Simple</button>\n          <button [class.active]=\"variationClass() === 'outlined'\" (click)=\"variationClass.set('outlined')\">\n            Outlined\n          </button>\n          <button [class.active]=\"variationClass() === 'flat'\" (click)=\"variationClass.set('flat')\">Flat</button>\n          <button [class.active]=\"variationClass() === 'raised'\" (click)=\"variationClass.set('raised')\">Raised</button>\n        </sh-button-group>\n      }\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <span>Chip</span>\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n    <span>Chip</span>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n    <span>Chip</span>\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <span>Chip</span>\n  </sh-chip>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [(checked)]=\"isSmall\" color=\"primary\" variant=\"raised\">Small</sh-toggle>\n      <sh-toggle [(checked)]=\"isSharp\" color=\"primary\" variant=\"raised\">Sharp</sh-toggle>\n      <sh-toggle [(checked)]=\"isDynamic\" color=\"primary\" variant=\"raised\">Dynamic coloring</sh-toggle>\n    </div>\n\n    <div class=\"row\">\n      @if (isDynamic()) {\n        <div>\n          <p>It's not great at colors to light, we're working on a better css based color algorithm.</p>\n          <br />\n          <sh-color-picker\n            [renderingType]=\"'hsl'\"\n            [showDarkColors]=\"true\"\n            [selectedColor]=\"selectedColor()\"\n            (currentColor)=\"currentColor.set($event)\" />\n        </div>\n      } @else {\n        <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n          <button value=\"\">Default</button>\n          <button value=\"primary\">Primary</button>\n          <button value=\"accent\">Accent</button>\n          <button value=\"warn\">Warn</button>\n          <button value=\"error\">Error</button>\n          <button value=\"success\">Success</button>\n        </sh-button-group>\n\n        <sh-button-group class=\"small\" [(value)]=\"variationClass\">\n          <button value=\"\">Default</button>\n          <button value=\"simple\">Simple</button>\n          <button value=\"outlined\">Outlined</button>\n          <button value=\"flat\">Flat</button>\n          <button value=\"raised\">Raised</button>\n        </sh-button-group>\n      }\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <span>Chip</span>\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n    <span>Chip</span>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n    <span>Chip</span>\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <sh-icon>circle</sh-icon>\n  </sh-chip>\n\n  <sh-chip\n    [color]=\"colorClass()\"\n    [variant]=\"variationClass()\"\n    [size]=\"sizeClass()\"\n    [sharp]=\"isSharp()\"\n    [dynamic]=\"isDynamic()\"\n    [style.--chip-c]=\"isDynamic() ? currentColor()?.hsl : undefined\">\n    <span>Chip</span>\n  </sh-chip>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipChip, ShipColorPicker, ShipIcon, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-chip-sandbox',\n  imports: [ShipIcon, ShipChip, ShipButtonGroup, ShipToggle, ShipColorPicker],\n  templateUrl: './chip-sandbox.html',\n  styleUrl: './chip-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ChipSandbox {\n  isSmall = signal<boolean>(false);\n  isSharp = signal<boolean>(false);\n  isDynamic = signal<boolean>(false);\n  hasIcon = signal<boolean>(true);\n  hasSuffixIcon = signal<boolean>(true);\n  hasText = signal<boolean>(true);\n\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  variationClass = signal<'' | 'simple' | 'outlined' | 'flat' | 'raised'>('raised');\n  sizeClass = computed(() => (this.isSmall() ? 'small' : ''));\n\n  // Color picker\n  selectedColor = signal<[number, number, number]>([60, 131, 246]);\n  currentColor = signal<{ rgb: string; hex: string; hsl: string; hue: number; saturation: number } | null>(null);\n\n  // colorEffect = effect(() => {\n  //   if (this.isDynamic()) {\n  //     this.currentColor.set({\n  //       rgb: 'rgb(132,156,255)',\n  //       hex: '#849cff',\n  //       hsl: 'hsl(228, 100%, 76%)',\n  //       hue: 228,\n  //       saturation: 100,\n  //     });\n  //   }\n  // });\n}\n"
       },
       {
@@ -2835,7 +2888,7 @@
     "examples": [
       {
         "name": "base-sortable",
-        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [class.active]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
+        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [checked]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { AfterDropResponse, moveIndex, ShipCheckbox, ShipList, ShipSortable } from 'ship-ui';\n\nconst TODOS = [\n  {\n    title: 'Simple sorting of list',\n    done: true,\n  },\n  {\n    title: 'Sorting animation',\n    done: true,\n  },\n  {\n    title: 'Support sortable handle',\n    done: true,\n  },\n  {\n    title: 'Support gap in sorting list ',\n    done: true,\n  },\n  {\n    title: 'Support placeholder',\n    done: true,\n  },\n  {\n    title: 'Support animation only when dragging',\n    done: true,\n  },\n  {\n    title: 'Support multiple lists',\n    done: false,\n  },\n  {\n    title: 'Support draggable grids',\n    done: false,\n  },\n];\n\ntype Todo = (typeof TODOS)[0];\n\n@Component({\n  selector: 'app-base-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable, ShipCheckbox],\n  templateUrl: './base-sortable.html',\n  styleUrl: './base-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseSortable {\n  todos = signal(TODOS);\n\n  toggleTodo(index: number) {\n    this.todos.update((todos) => {\n      todos[index].done = !todos[index].done;\n\n      return todos;\n    });\n  }\n\n  reorderTodo(event: AfterDropResponse) {\n    this.todos.update((arr) => moveIndex<Todo>(arr, event));\n  }\n}\n"
       }
     ]
@@ -2871,7 +2924,7 @@
     "examples": [
       {
         "name": "base-sortable",
-        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [class.active]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
+        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [checked]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { AfterDropResponse, moveIndex, ShipCheckbox, ShipList, ShipSortable } from 'ship-ui';\n\nconst TODOS = [\n  {\n    title: 'Simple sorting of list',\n    done: true,\n  },\n  {\n    title: 'Sorting animation',\n    done: true,\n  },\n  {\n    title: 'Support sortable handle',\n    done: true,\n  },\n  {\n    title: 'Support gap in sorting list ',\n    done: true,\n  },\n  {\n    title: 'Support placeholder',\n    done: true,\n  },\n  {\n    title: 'Support animation only when dragging',\n    done: true,\n  },\n  {\n    title: 'Support multiple lists',\n    done: false,\n  },\n  {\n    title: 'Support draggable grids',\n    done: false,\n  },\n];\n\ntype Todo = (typeof TODOS)[0];\n\n@Component({\n  selector: 'app-base-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable, ShipCheckbox],\n  templateUrl: './base-sortable.html',\n  styleUrl: './base-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseSortable {\n  todos = signal(TODOS);\n\n  toggleTodo(index: number) {\n    this.todos.update((todos) => {\n      todos[index].done = !todos[index].done;\n\n      return todos;\n    });\n  }\n\n  reorderTodo(event: AfterDropResponse) {\n    this.todos.update((arr) => moveIndex<Todo>(arr, event));\n  }\n}\n"
       }
     ]
@@ -3285,7 +3338,7 @@
       },
       {
         "name": "toggle-select-menu-example",
-        "html": "<sh-menu>\n  <button shButton class=\"outlined\">Open toggle select menu</button>\n  <ng-container menu>\n    @for (item of menuItems; track item.value) {\n      <button (click)=\"toggle($event, item)\">\n        <sh-checkbox [class.active]=\"isSelected(item)\" class=\"primary raised\">\n          {{ item.label }}\n        </sh-checkbox>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
+        "html": "<sh-menu>\n  <button shButton class=\"outlined\">Open toggle select menu</button>\n  <ng-container menu>\n    @for (item of menuItems; track item.value) {\n      <button (click)=\"toggle($event, item)\">\n        <sh-checkbox [checked]=\"isSelected(item)\" class=\"primary raised\">\n          {{ item.label }}\n        </sh-checkbox>\n      </button>\n    }\n  </ng-container>\n</sh-menu>\n",
         "ts": "import { Component } from '@angular/core';\nimport { ShipButton, ShipCheckbox, ShipMenu } from 'ship-ui';\n\n@Component({\n  selector: 'sh-toggle-select-menu-example',\n  templateUrl: './toggle-select-menu-example.html',\n  styleUrls: ['./toggle-select-menu-example.scss'],\n  imports: [ShipMenu, ShipButton, ShipCheckbox],\n  standalone: true,\n})\nexport class ToggleSelectMenuExample {\n  menuItems = [\n    { label: 'Email Notifications', value: 'email' },\n    { label: 'SMS Alerts', value: 'sms' },\n    { label: 'Push Notifications', value: 'push' },\n  ];\n  selected: Set<string> = new Set();\n\n  toggle($event: MouseEvent, item: any) {\n    $event.stopPropagation();\n\n    if (this.selected.has(item.value)) {\n      this.selected.delete(item.value);\n    } else {\n      this.selected.add(item.value);\n    }\n    // Force change detection for Set\n    this.selected = new Set(this.selected);\n  }\n\n  isSelected(item: any) {\n    return this.selected.has(item.value);\n  }\n}\n"
       }
     ]
@@ -3326,6 +3379,24 @@
         "type": "boolean",
         "description": "",
         "defaultValue": "false"
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "noInternalInput",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "checked",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
       }
     ],
     "outputs": [],
@@ -3394,7 +3465,7 @@
       },
       {
         "name": "event-card-sandbox",
-        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle\n        [class.active]=\"useDynamicColor()\"\n        class=\"primary raised\"\n        (click)=\"useDynamicColor.set(!useDynamicColor())\">\n        Use dynamic color\n      </sh-toggle>\n\n      @if (useDynamicColor()) {\n        <input\n          type=\"color\"\n          [disabled]=\"!useDynamicColor()\"\n          [ngModel]=\"dynamicColor()\"\n          (ngModelChange)=\"dynamicColor.set($event)\" />\n      }\n    </div>\n\n    @if (!useDynamicColor()) {\n      <div class=\"row\">\n        <sh-button-group class=\"small\">\n          <button [class.active]=\"colorClass() === ''\" (click)=\"colorClass.set('')\">Default</button>\n          <button [class.active]=\"colorClass() === 'primary'\" (click)=\"colorClass.set('primary')\">Primary</button>\n          <button [class.active]=\"colorClass() === 'accent'\" (click)=\"colorClass.set('accent')\">Accent</button>\n          <button [class.active]=\"colorClass() === 'warn'\" (click)=\"colorClass.set('warn')\">Warn</button>\n          <button [class.active]=\"colorClass() === 'error'\" (click)=\"colorClass.set('error')\">Error</button>\n          <button [class.active]=\"colorClass() === 'success'\" (click)=\"colorClass.set('success')\">Success</button>\n        </sh-button-group>\n\n        <sh-button-group class=\"small\">\n          <button [class.active]=\"variationClass() === ''\" (click)=\"variationClass.set('')\">Default</button>\n          <button [class.active]=\"variationClass() === 'simple'\" (click)=\"variationClass.set('simple')\">Simple</button>\n          <button [class.active]=\"variationClass() === 'outlined'\" (click)=\"variationClass.set('outlined')\">\n            Outlined\n          </button>\n          <button [class.active]=\"variationClass() === 'flat'\" (click)=\"variationClass.set('flat')\">Flat</button>\n          <button [class.active]=\"variationClass() === 'raised'\" (click)=\"variationClass.set('raised')\">Raised</button>\n        </sh-button-group>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    Just text in the card\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n\n    <button shButton>Action 1</button>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    Event card with just buttons projected as actions Event card with just buttons projected as actionsEvent card with\n    just buttons projected as actionsEvent card with just buttons projected as actionsEvent card with just buttons\n    projected as actionsEvent card with just buttons projected as actions\n\n    <button shButton>Action 1</button>\n    <button shButton>Action 2</button>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n    <button shButton>And a action button</button>\n  </sh-event-card>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [(checked)]=\"useDynamicColor\" color=\"primary\" variant=\"raised\">Use dynamic color</sh-toggle>\n\n      @if (useDynamicColor()) {\n        <input\n          type=\"color\"\n          [disabled]=\"!useDynamicColor()\"\n          [ngModel]=\"dynamicColor()\"\n          (ngModelChange)=\"dynamicColor.set($event)\" />\n      }\n    </div>\n\n    @if (!useDynamicColor()) {\n      <div class=\"row\">\n        <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n          <button value=\"\">Default</button>\n          <button value=\"primary\">Primary</button>\n          <button value=\"accent\">Accent</button>\n          <button value=\"warn\">Warn</button>\n          <button value=\"error\">Error</button>\n          <button value=\"success\">Success</button>\n        </sh-button-group>\n\n        <sh-button-group class=\"small\" [(value)]=\"variationClass\">\n          <button value=\"\">Default</button>\n          <button value=\"simple\">Simple</button>\n          <button value=\"outlined\">Outlined</button>\n          <button value=\"flat\">Flat</button>\n          <button value=\"raised\">Raised</button>\n        </sh-button-group>\n      </div>\n    }\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    Just text in the card\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n\n    <button shButton>Action 1</button>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    Event card with just buttons projected as actions Event card with just buttons projected as actionsEvent card with\n    just buttons projected as actionsEvent card with just buttons projected as actionsEvent card with just buttons\n    projected as actionsEvent card with just buttons projected as actions\n\n    <button shButton>Action 1</button>\n    <button shButton>Action 2</button>\n  </sh-event-card>\n\n  <sh-event-card [class]=\"exampleClass()\" [style.--sheet-c]=\"useDynamicColor() ? dynamicColor() : null\">\n    <h3>Card with title</h3>\n    <p>and description</p>\n    <button shButton>And a action button</button>\n  </sh-event-card>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButton, ShipButtonGroup, ShipEventCard, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-event-card-sandbox',\n  imports: [FormsModule, ShipEventCard, ShipButton, ShipToggle, ShipButtonGroup],\n  templateUrl: './event-card-sandbox.html',\n  styleUrl: './event-card-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EventCardSandbox {\n  colorClass = signal<'' | 'primary' | 'accent' | 'warn' | 'error' | 'success'>('primary');\n  variationClass = signal<'' | 'simple' | 'outlined' | 'flat' | 'raised'>('simple');\n\n  useDynamicColor = signal<boolean>(false);\n  dynamicColor = signal<string>('#2f54eb');\n\n  exampleClass = computed(() => {\n    if (this.useDynamicColor()) return 'dynamic';\n\n    return this.variationClass() + ' ' + this.colorClass();\n  });\n}\n"
       },
       {
@@ -3592,7 +3663,7 @@
       },
       {
         "name": "form-field-sandbox",
-        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showLabel()\" (click)=\"showLabel.set(!showLabel())\">\n      Label\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showPrefix()\" (click)=\"showPrefix.set(!showPrefix())\">\n      Prefix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showSuffix()\" (click)=\"showSuffix.set(!showSuffix())\">\n      Suffix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showHint()\" (click)=\"showHint.set(!showHint())\">\n      Hint\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showError()\" (click)=\"showError.set(!showError())\">\n      Error\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">\n      Disabled\n    </sh-checkbox>\n  </div>\n\n  <div class=\"row\">\n    <sh-button-group class=\"small\">\n      <button type=\"button\" [class.active]=\"inputType() === 'text'\" (click)=\"inputType.set('text')\">Text</button>\n      <button type=\"button\" [class.active]=\"inputType() === 'number'\" (click)=\"inputType.set('number')\">Number</button>\n      <button type=\"button\" [class.active]=\"inputType() === 'textarea'\" (click)=\"inputType.set('textarea')\">\n        Textarea\n      </button>\n    </sh-button-group>\n\n    <sh-button-group class=\"small\">\n      <button type=\"button\" [class.active]=\"size() === ''\" (click)=\"size.set('')\">Default</button>\n      <button type=\"button\" [class.active]=\"size() === 'small'\" (click)=\"size.set('small')\">Small</button>\n      <button type=\"button\" [class.active]=\"size() === 'autosize'\" (click)=\"size.set('autosize')\">Autosize</button>\n      <button type=\"button\" [class.active]=\"size() === 'center'\" (click)=\"size.set('center')\">Center</button>\n    </sh-button-group>\n  </div>\n  <div class=\"row\">\n    @if (showLabel()) {\n      <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n    }\n    @if (showPrefix()) {\n      <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n    }\n    @if (showSuffix()) {\n      <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n    }\n    @if (showHint()) {\n      <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n    }\n    @if (showError()) {\n      <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n    }\n    <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-form-field [variant]=\"size()\">\n    @if (showLabel()) {\n      <label>{{ label() }}</label>\n    }\n    @if (showPrefix()) {\n      <ng-container prefix>{{ prefix() }}</ng-container>\n    }\n    @if (showSuffix()) {\n      <ng-container suffix>{{ suffix() }}</ng-container>\n    }\n    @if (inputType() === 'text') {\n      <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'number') {\n      <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'textarea') {\n      <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n    }\n    @if (showHint()) {\n      <span hint>{{ hint() }}</span>\n    }\n    @if (showError()) {\n      <span error>{{ error() }}</span>\n    }\n  </sh-form-field>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\">\n      Label\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showPrefix\">\n      Prefix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showSuffix\">\n      Suffix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showHint\">\n      Hint\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showError\">\n      Error\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"disabled\">\n      Disabled\n    </sh-checkbox>\n  </div>\n\n  <div class=\"row\">\n    <sh-button-group class=\"small\" [(value)]=\"inputType\">\n      <button type=\"button\" value=\"text\">Text</button>\n      <button type=\"button\" value=\"number\">Number</button>\n      <button type=\"button\" value=\"textarea\">\n        Textarea\n      </button>\n    </sh-button-group>\n\n    <sh-button-group class=\"small\" [(value)]=\"size\">\n      <button type=\"button\" value=\"\">Default</button>\n      <button type=\"button\" value=\"small\">Small</button>\n      <button type=\"button\" value=\"autosize\">Autosize</button>\n      <button type=\"button\" value=\"center\">Center</button>\n    </sh-button-group>\n  </div>\n  <div class=\"row\">\n    @if (showLabel()) {\n      <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n    }\n    @if (showPrefix()) {\n      <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n    }\n    @if (showSuffix()) {\n      <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n    }\n    @if (showHint()) {\n      <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n    }\n    @if (showError()) {\n      <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n    }\n    <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-form-field [variant]=\"size()\">\n    @if (showLabel()) {\n      <label>{{ label() }}</label>\n    }\n    @if (showPrefix()) {\n      <ng-container prefix>{{ prefix() }}</ng-container>\n    }\n    @if (showSuffix()) {\n      <ng-container suffix>{{ suffix() }}</ng-container>\n    }\n    @if (inputType() === 'text') {\n      <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'number') {\n      <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'textarea') {\n      <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n    }\n    @if (showHint()) {\n      <span hint>{{ hint() }}</span>\n    }\n    @if (showError()) {\n      <span error>{{ error() }}</span>\n    }\n  </sh-form-field>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField } from 'ship-ui';\n\n@Component({\n  selector: 'app-form-field-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n  templateUrl: './form-field-sandbox.html',\n  styleUrl: './form-field-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n  label = signal<string>('Label');\n  showLabel = signal<boolean>(true);\n  prefix = signal<string>('');\n  showPrefix = signal<boolean>(false);\n  suffix = signal<string>('');\n  showSuffix = signal<boolean>(false);\n  placeholder = signal<string>('Placeholder...');\n  hint = signal<string>('');\n  showHint = signal<boolean>(false);\n  error = signal<string>('');\n  showError = signal<boolean>(false);\n  disabled = signal<boolean>(false);\n  inputType = signal<'text' | 'number' | 'textarea'>('text');\n  size = signal<string>(''); // '', 'small', 'autosize', etc.\n  value = signal<string>('');\n}\n"
       }
     ]
@@ -3650,7 +3721,7 @@
       },
       {
         "name": "form-field-sandbox",
-        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showLabel()\" (click)=\"showLabel.set(!showLabel())\">\n      Label\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showPrefix()\" (click)=\"showPrefix.set(!showPrefix())\">\n      Prefix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showSuffix()\" (click)=\"showSuffix.set(!showSuffix())\">\n      Suffix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showHint()\" (click)=\"showHint.set(!showHint())\">\n      Hint\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"showError()\" (click)=\"showError.set(!showError())\">\n      Error\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [class.active]=\"disabled()\" (click)=\"disabled.set(!disabled())\">\n      Disabled\n    </sh-checkbox>\n  </div>\n\n  <div class=\"row\">\n    <sh-button-group class=\"small\">\n      <button type=\"button\" [class.active]=\"inputType() === 'text'\" (click)=\"inputType.set('text')\">Text</button>\n      <button type=\"button\" [class.active]=\"inputType() === 'number'\" (click)=\"inputType.set('number')\">Number</button>\n      <button type=\"button\" [class.active]=\"inputType() === 'textarea'\" (click)=\"inputType.set('textarea')\">\n        Textarea\n      </button>\n    </sh-button-group>\n\n    <sh-button-group class=\"small\">\n      <button type=\"button\" [class.active]=\"size() === ''\" (click)=\"size.set('')\">Default</button>\n      <button type=\"button\" [class.active]=\"size() === 'small'\" (click)=\"size.set('small')\">Small</button>\n      <button type=\"button\" [class.active]=\"size() === 'autosize'\" (click)=\"size.set('autosize')\">Autosize</button>\n      <button type=\"button\" [class.active]=\"size() === 'center'\" (click)=\"size.set('center')\">Center</button>\n    </sh-button-group>\n  </div>\n  <div class=\"row\">\n    @if (showLabel()) {\n      <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n    }\n    @if (showPrefix()) {\n      <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n    }\n    @if (showSuffix()) {\n      <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n    }\n    @if (showHint()) {\n      <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n    }\n    @if (showError()) {\n      <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n    }\n    <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-form-field [variant]=\"size()\">\n    @if (showLabel()) {\n      <label>{{ label() }}</label>\n    }\n    @if (showPrefix()) {\n      <ng-container prefix>{{ prefix() }}</ng-container>\n    }\n    @if (showSuffix()) {\n      <ng-container suffix>{{ suffix() }}</ng-container>\n    }\n    @if (inputType() === 'text') {\n      <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'number') {\n      <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'textarea') {\n      <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n    }\n    @if (showHint()) {\n      <span hint>{{ hint() }}</span>\n    }\n    @if (showError()) {\n      <span error>{{ error() }}</span>\n    }\n  </sh-form-field>\n</div>\n",
+        "html": "<div class=\"controls\">\n  <div class=\"row\">\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\">\n      Label\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showPrefix\">\n      Prefix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showSuffix\">\n      Suffix\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showHint\">\n      Hint\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showError\">\n      Error\n    </sh-checkbox>\n    <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"disabled\">\n      Disabled\n    </sh-checkbox>\n  </div>\n\n  <div class=\"row\">\n    <sh-button-group class=\"small\" [(value)]=\"inputType\">\n      <button type=\"button\" value=\"text\">Text</button>\n      <button type=\"button\" value=\"number\">Number</button>\n      <button type=\"button\" value=\"textarea\">\n        Textarea\n      </button>\n    </sh-button-group>\n\n    <sh-button-group class=\"small\" [(value)]=\"size\">\n      <button type=\"button\" value=\"\">Default</button>\n      <button type=\"button\" value=\"small\">Small</button>\n      <button type=\"button\" value=\"autosize\">Autosize</button>\n      <button type=\"button\" value=\"center\">Center</button>\n    </sh-button-group>\n  </div>\n  <div class=\"row\">\n    @if (showLabel()) {\n      <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n    }\n    @if (showPrefix()) {\n      <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n    }\n    @if (showSuffix()) {\n      <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n    }\n    @if (showHint()) {\n      <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n    }\n    @if (showError()) {\n      <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n    }\n    <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n  </div>\n</div>\n\n<div class=\"sandbox\">\n  <sh-form-field [variant]=\"size()\">\n    @if (showLabel()) {\n      <label>{{ label() }}</label>\n    }\n    @if (showPrefix()) {\n      <ng-container prefix>{{ prefix() }}</ng-container>\n    }\n    @if (showSuffix()) {\n      <ng-container suffix>{{ suffix() }}</ng-container>\n    }\n    @if (inputType() === 'text') {\n      <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'number') {\n      <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n    } @else if (inputType() === 'textarea') {\n      <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n    }\n    @if (showHint()) {\n      <span hint>{{ hint() }}</span>\n    }\n    @if (showError()) {\n      <span error>{{ error() }}</span>\n    }\n  </sh-form-field>\n</div>\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField } from 'ship-ui';\n\n@Component({\n  selector: 'app-form-field-sandbox',\n  standalone: true,\n  imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n  templateUrl: './form-field-sandbox.html',\n  styleUrl: './form-field-sandbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n  label = signal<string>('Label');\n  showLabel = signal<boolean>(true);\n  prefix = signal<string>('');\n  showPrefix = signal<boolean>(false);\n  suffix = signal<string>('');\n  showSuffix = signal<boolean>(false);\n  placeholder = signal<string>('Placeholder...');\n  hint = signal<string>('');\n  showHint = signal<boolean>(false);\n  error = signal<string>('');\n  showError = signal<boolean>(false);\n  disabled = signal<boolean>(false);\n  inputType = signal<'text' | 'number' | 'textarea'>('text');\n  size = signal<string>(''); // '', 'small', 'autosize', etc.\n  value = signal<string>('');\n}\n"
       }
     ]
@@ -3717,7 +3788,7 @@
     "examples": [
       {
         "name": "base-color-picker",
-        "html": "<sh-button-group>\n  <button [class.active]=\"renderingType() === 'hsl'\" (click)=\"renderingType.set('hsl')\">\n    <sh-icon>circle</sh-icon>\n    HSL Wheel\n  </button>\n  <button [class.active]=\"renderingType() === 'rgb'\" (click)=\"renderingType.set('rgb')\">\n    <sh-icon>circle</sh-icon>\n    RGB\n  </button>\n  <button [class.active]=\"renderingType() === 'grid'\" (click)=\"renderingType.set('grid')\">\n    <sh-icon>circle</sh-icon>\n    Grid\n  </button>\n  <button [class.active]=\"renderingType() === 'hue'\" (click)=\"renderingType.set('hue')\">\n    <sh-icon>circle</sh-icon>\n    Hue\n  </button>\n  <button [class.active]=\"renderingType() === 'saturation'\" (click)=\"renderingType.set('saturation')\">\n    <sh-icon>circle</sh-icon>\n    Saturation\n  </button>\n</sh-button-group>\n\n@if (renderingType() === 'hsl') {\n  <sh-toggle [class.active]=\"showDarkColors()\" class=\"primary raised\" (click)=\"showDarkColors.set(!showDarkColors())\">\n    Show dark colors\n  </sh-toggle>\n}\n\n@if (renderingType() === 'grid' || renderingType() === 'rgb') {\n  <!-- <sh-range-slider unit=\"%\" class=\"primary raised\">\n  <label>ngModel</label>\n  <input type=\"range\" min=\"0\" [max]=\"360\" [(ngModel)]=\"gridHue\" />\n</sh-range-slider>\n -->\n\n  <sh-color-picker renderingType=\"hue\" (currentColor)=\"selectedHue.set($event.hue)\"></sh-color-picker>\n}\n\n@if (renderingType() === 'hue') {\n  <sh-toggle [class.active]=\"direction()\" class=\"primary raised\" (click)=\"direction.set(!direction())\">\n    Direction\n  </sh-toggle>\n}\n\n@if (renderingType() === 'saturation') {\n  <sh-toggle [class.active]=\"direction()\" class=\"primary raised\" (click)=\"direction.set(!direction())\">\n    Direction\n  </sh-toggle>\n}\n\n<sh-color-picker\n  [renderingType]=\"renderingType()\"\n  [showDarkColors]=\"showDarkColors()\"\n  [direction]=\"direction() ? 'vertical' : 'horizontal'\"\n  [hue]=\"selectedHue()\"\n  (currentColor)=\"currentColor.set($event)\"></sh-color-picker>\n\n<div class=\"colors\">\n  <div class=\"swatch\" [style.background]=\"currentColor()?.hex\"></div>\n\n  <div class=\"color-text\">\n    <p>RGB: {{ currentColor()?.rgb }}</p>\n    <p>HEX: {{ currentColor()?.hex }}</p>\n    <p>HSL: {{ currentColor()?.hsl }}</p>\n    <p>Hue: {{ currentColor()?.hue }}</p>\n    <p>Saturation: {{ currentColor()?.saturation }}</p>\n  </div>\n</div>\n<!-- <pre>{{ currentColor() | json }}</pre> -->\n",
+        "html": "<sh-button-group [(value)]=\"renderingType\">\n  <button value=\"hsl\">\n    <sh-icon>circle</sh-icon>\n    HSL Wheel\n  </button>\n  <button value=\"rgb\">\n    <sh-icon>circle</sh-icon>\n    RGB\n  </button>\n  <button value=\"grid\">\n    <sh-icon>circle</sh-icon>\n    Grid\n  </button>\n  <button value=\"hue\">\n    <sh-icon>circle</sh-icon>\n    Hue\n  </button>\n  <button value=\"saturation\">\n    <sh-icon>circle</sh-icon>\n    Saturation\n  </button>\n</sh-button-group>\n\n@if (renderingType() === 'hsl') {\n  <sh-toggle [(checked)]=\"showDarkColors\" color=\"primary\" variant=\"raised\">Show dark colors</sh-toggle>\n}\n\n@if (renderingType() === 'grid' || renderingType() === 'rgb') {\n  <!-- <sh-range-slider unit=\"%\" class=\"primary raised\">\n  <label>ngModel</label>\n  <input type=\"range\" min=\"0\" [max]=\"360\" [(ngModel)]=\"gridHue\" />\n</sh-range-slider>\n -->\n\n  <sh-color-picker renderingType=\"hue\" (currentColor)=\"selectedHue.set($event.hue)\"></sh-color-picker>\n}\n\n@if (renderingType() === 'hue') {\n  <sh-toggle [(checked)]=\"direction\" color=\"primary\" variant=\"raised\">Direction</sh-toggle>\n}\n\n@if (renderingType() === 'saturation') {\n  <sh-toggle [(checked)]=\"direction\" color=\"primary\" variant=\"raised\">Direction</sh-toggle>\n}\n\n<sh-color-picker\n  [renderingType]=\"renderingType()\"\n  [showDarkColors]=\"showDarkColors()\"\n  [direction]=\"direction() ? 'vertical' : 'horizontal'\"\n  [hue]=\"selectedHue()\"\n  (currentColor)=\"currentColor.set($event)\"></sh-color-picker>\n\n<div class=\"colors\">\n  <div class=\"swatch\" [style.background]=\"currentColor()?.hex\"></div>\n\n  <div class=\"color-text\">\n    <p>RGB: {{ currentColor()?.rgb }}</p>\n    <p>HEX: {{ currentColor()?.hex }}</p>\n    <p>HSL: {{ currentColor()?.hsl }}</p>\n    <p>Hue: {{ currentColor()?.hue }}</p>\n    <p>Saturation: {{ currentColor()?.saturation }}</p>\n  </div>\n</div>\n<!-- <pre>{{ currentColor() | json }}</pre> -->\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipButtonGroup, ShipColorPicker, ShipIcon, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-color-picker',\n  imports: [ShipColorPicker, ShipButtonGroup, ShipIcon, ShipToggle],\n  templateUrl: './base-color-picker.html',\n  styleUrl: './base-color-picker.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseColorPicker {\n  renderingType = signal<'hsl' | 'rgb' | 'grid' | 'hue' | 'saturation'>('hsl');\n  aColor = signal<[number, number, number]>([255, 255, 255]);\n  currentColor = signal<{ rgb: string; hex: string; hsl: string; hue: number; saturation: number } | null>(null);\n  showDarkColors = signal(false);\n  direction = signal(false);\n  selectedHue = signal(0);\n}\n"
       }
     ]