@ship-ui/core 0.18.4 → 0.18.5

package/assets/mcp/components.json

@@ -18,18 +18,6 @@
           "success"
         ]
       },
-      {
-        "name": "variant",
-        "type": "ShipSheetVariant | null",
-        "description": "",
-        "defaultValue": "null",
-        "options": [
-          "simple",
-          "outlined",
-          "flat",
-          "raised"
-        ]
-      },
       {
         "name": "size",
         "type": "ShipIconSize | null",
@@ -119,7 +107,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "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",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\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-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,7 +127,7 @@
       },
       {
         "name": "datepicker-sandbox",
-        "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",
+        "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=\"\">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=\"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"
       },
       {
@@ -216,7 +204,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "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",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\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-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,7 +224,7 @@
       },
       {
         "name": "datepicker-sandbox",
-        "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",
+        "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=\"\">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=\"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"
       },
       {
@@ -414,7 +402,7 @@
       },
       {
         "name": "range-datepicker-sandbox",
-        "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",
+        "html": "<div class=\"controls\">\n  <sh-toggle [(checked)]=\"disabled\">Disabled</sh-toggle>\n\n  <sh-button-group [(value)]=\"colors\">\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-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,7 +422,7 @@
       },
       {
         "name": "datepicker-sandbox",
-        "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",
+        "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=\"\">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=\"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"
       },
       {
@@ -1239,6 +1227,40 @@
         "description": "",
         "defaultValue": "false"
       },
+      {
+        "name": "color",
+        "type": "ShipColor | null",
+        "description": "",
+        "defaultValue": "null",
+        "options": [
+          "primary",
+          "accent",
+          "warn",
+          "error",
+          "success"
+        ]
+      },
+      {
+        "name": "variant",
+        "type": "ShipSheetVariant | null",
+        "description": "",
+        "defaultValue": "null",
+        "options": [
+          "simple",
+          "outlined",
+          "flat",
+          "raised"
+        ]
+      },
+      {
+        "name": "size",
+        "type": "ShipSize | null",
+        "description": "",
+        "defaultValue": "null",
+        "options": [
+          "small"
+        ]
+      },
       {
         "name": "optionTitle",
         "type": "string | null",
@@ -1373,7 +1395,7 @@
     "methods": [
       {
         "name": "trigger",
-        "parameters": "click)=\"open()\"\n        [class.stretch]=\"stretch()\"\n        [class.small]=\"small()\"\n        [class.readonly]=\"readonly() || disabled()\">\n        <ng-content select=\"label\" ngProjectAs=\"label\" />\n        <ng-content select=\"[prefix]\" ngProjectAs=\"[prefix]\" />\n        <ng-content select=\"[boxPrefix]\" ngProjectAs=\"[boxPrefix]\" />\n\n        <div class=\"input\" [class.show-search-text]=\"_showSearchText\" ngProjectAs=\"input\">\n          <div class=\"selected-value\" [class.is-selected]=\"_inputState === 'selected'\">\n            @if (asFreeText() && inputValue().length > 0 && !isOpen()",
+        "parameters": "click)=\"open()\"\n        [color]=\"color()\"\n        [variant]=\"variant()\"\n        [size]=\"size()\"\n        [class.stretch]=\"stretch()\"\n        [class.small]=\"small()\"\n        [class.readonly]=\"readonly() || disabled()\">\n        <ng-content select=\"label\" ngProjectAs=\"label\" />\n        <ng-content select=\"[prefix]\" ngProjectAs=\"[prefix]\" />\n        <ng-content select=\"[boxPrefix]\" ngProjectAs=\"[boxPrefix]\" />\n\n        <div class=\"input\" [class.show-search-text]=\"_showSearchText\" ngProjectAs=\"input\">\n          <div class=\"selected-value\" [class.is-selected]=\"_inputState === 'selected'\">\n            @if (asFreeText() && inputValue().length > 0 && !isOpen()",
         "returnType": "any",
         "description": ""
       },
@@ -1665,6 +1687,78 @@
     "cssVariables": [],
     "examples": []
   },
+  {
+    "name": "ShipAccordion",
+    "selector": "sh-accordion",
+    "path": "core/projects/ship-ui/src/lib/ship-accordion/ship-accordion.ts",
+    "description": "### Usage\n\nShipAccordion seamlessly wraps the native `&lt;details&gt;` HTML element.\nUse `allowMultiple` to control open exclusivity natively, or allow multi-expand.",
+    "inputs": [
+      {
+        "name": "name",
+        "type": "string",
+        "description": "",
+        "defaultValue": "`sh-accordion-${Math.random("
+      },
+      {
+        "name": "allowMultiple",
+        "type": "boolean",
+        "description": "",
+        "defaultValue": "false"
+      },
+      {
+        "name": "variant",
+        "type": "'base' | 'outlined' | 'flat' | null",
+        "description": "",
+        "defaultValue": "null"
+      },
+      {
+        "name": "size",
+        "type": "string | null",
+        "description": "",
+        "defaultValue": "null"
+      },
+      {
+        "name": "value",
+        "type": "string | null",
+        "description": "",
+        "defaultValue": "null"
+      }
+    ],
+    "outputs": [],
+    "methods": [
+      {
+        "name": "effect",
+        "parameters": "() => {\n      const isMultiple = this.allowMultiple();\n      const groupName = this.name();\n      const valStr = this.value();\n      const vals = valStr ? valStr.split(',').filter((v) => v !== ''",
+        "returnType": "[];\n\n      this.items().forEach((details) =>",
+        "description": ""
+      }
+    ],
+    "cssVariables": [
+      {
+        "name": "--acc-pad",
+        "defaultValue": "#{p2r(16)}"
+      },
+      {
+        "name": "--acc-f",
+        "defaultValue": "var(--paragraph-30)"
+      },
+      {
+        "name": "--acc-bc",
+        "defaultValue": "var(--base-4)"
+      },
+      {
+        "name": "--acc-s",
+        "defaultValue": "var(--shape-2)"
+      }
+    ],
+    "examples": [
+      {
+        "name": "sandbox-accordion",
+        "html": "<div class=\"controls\">\n  <p>Controls</p>\n  <header>\n    <div class=\"row\">\n      <sh-toggle [(checked)]=\"allowMultiple\" class=\"primary raised\">Allow Multiple Open</sh-toggle>\n      <sh-select\n        class=\"raised primary\"\n        color=\"primary\"\n        variant=\"raised\"\n        [selectMultiple]=\"allowMultiple()\"\n        [options]=\"availablePanels\"\n        [(selectedOptions)]=\"selectedPanelsArray\">\n        <label>Open Panels</label>\n        <!-- Hidden input since select needs an element natively -->\n        <input type=\"text\" style=\"display: none\" />\n      </sh-select>\n    </div>\n  </header>\n</div>\n\n<div class=\"sandbox\">\n  <sh-accordion [(value)]=\"openPanels\" [allowMultiple]=\"allowMultiple()\" [variant]=\"variantType()\">\n    <details value=\"panel1\">\n      <summary>Personal Information</summary>\n      <p>\n        This is standard content projected inside native HTML tags! The entire accordion is configured seamlessly with\n        DOM structure.\n      </p>\n    </details>\n\n    <details value=\"panel2\">\n      <summary>Advanced Settings</summary>\n      <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n        <label>Settings A</label>\n        <input type=\"text\" value=\"Configuration\" />\n      </div>\n    </details>\n\n    <details value=\"panel3\">\n      <summary>Danger Zone</summary>\n      <button class=\"sh-button error flat\">Delete Account</button>\n    </details>\n  </sh-accordion>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipAccordion, ShipSelect, ShipToggle } from 'ship-ui';\n\n@Component({\n  selector: 'app-sandbox-accordion',\n  imports: [FormsModule, ShipAccordion, ShipToggle, ShipSelect],\n  templateUrl: './sandbox-accordion.html',\n  styleUrl: './sandbox-accordion.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxAccordion {\n  openPanels = signal<string>('panel1');\n  allowMultiple = signal<boolean>(false);\n  variantType = signal<'base' | 'outlined' | 'flat' | null>('base');\n\n  availablePanels = ['panel1', 'panel2', 'panel3'];\n  selectedPanelsArray = signal<string[]>(['panel1']);\n\n  constructor() {\n    effect(() => {\n      const arrStr = this.selectedPanelsArray().join(',');\n      if (this.openPanels() !== arrStr) {\n        this.openPanels.set(arrStr);\n      }\n    });\n\n    effect(() => {\n      const valStr = this.openPanels();\n      const currentArr = valStr ? valStr.split(',').filter((x) => x) : [];\n      if (currentArr.join(',') !== this.selectedPanelsArray().join(',')) {\n        this.selectedPanelsArray.set(currentArr);\n      }\n    });\n  }\n}\n"
+      }
+    ]
+  },
   {
     "name": "ShipToggleCard",
     "selector": "sh-toggle-card",
@@ -1817,6 +1911,21 @@
       }
     ],
     "examples": [
+      {
+        "name": "overlay-sidenav",
+        "html": "<div class=\"sandbox\">\n  <sh-sidenav class=\"overlay\" [(isOpen)]=\"isNavOpen\">\n    <ng-container sidenav>\n      <div style=\"padding: 16px;\">\n        <h3>Overlay</h3>\n        <p>Links</p>\n      </div>\n    </ng-container>\n\n    <div style=\"padding: 16px; display: flex; flex-direction: column; gap: 16px;\">\n      <button shButton class=\"primary\" (click)=\"isNavOpen.set(true)\">Open Overlay Sidenav</button>\n      <p>This variant completely overlays the content and provides a backdrop scrim that dismisses the nav on click.</p>\n    </div>\n  </sh-sidenav>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipButton, ShipSidenav } from 'ship-ui';\n\n@Component({\n  selector: 'app-overlay-sidenav',\n  imports: [ShipSidenav, ShipButton],\n  templateUrl: './overlay-sidenav.html',\n  styleUrl: './overlay-sidenav.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OverlaySidenav {\n  isNavOpen = signal(false);\n}\n"
+      },
+      {
+        "name": "simple-sidenav",
+        "html": "<div class=\"sandbox\">\n  <sh-sidenav class=\"simple\" [(isOpen)]=\"isNavOpen\">\n    <ng-container sidenav>\n      <div style=\"padding: 16px;\">\n        <h3>Simple</h3>\n        <p>Links</p>\n      </div>\n    </ng-container>\n\n    <ng-container sidenav-closed-topbar>\n      <button shButton class=\"simple icon\" (click)=\"isNavOpen.set(!isNavOpen())\">\n        <sh-icon>list</sh-icon>\n      </button>\n    </ng-container>\n\n    <div style=\"padding: 16px; display: flex; flex-direction: column; gap: 16px;\">\n      <button shButton class=\"primary\" (click)=\"isNavOpen.set(!isNavOpen())\">Toggle Simple Sidenav</button>\n      <p>This variant supports collapsing gracefully down to either an icon-only mode or top-bar mode based on breakpoints.</p>\n    </div>\n  </sh-sidenav>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipSidenav, ShipButton, ShipIcon } from 'ship-ui';\n\n@Component({\n  selector: 'app-simple-sidenav',\n  imports: [ShipSidenav, ShipButton, ShipIcon],\n  templateUrl: './simple-sidenav.html',\n  styleUrl: './simple-sidenav.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SimpleSidenav {\n  isNavOpen = signal(true);\n}\n"
+      },
+      {
+        "name": "default-sidenav",
+        "html": "<div class=\"sandbox\">\n  <sh-sidenav [(isOpen)]=\"isNavOpen\">\n    <ng-container sidenav>\n      <div style=\"padding: 16px;\">\n        <h3>Default Nav</h3>\n        <p>Links</p>\n      </div>\n    </ng-container>\n\n    <div style=\"padding: 16px; display: flex; flex-direction: column; gap: 16px;\">\n      <button shButton class=\"primary\" (click)=\"isNavOpen.set(!isNavOpen())\">Toggle Sidenav</button>\n      <p>This is the default fixed position sidenav variant.</p>\n    </div>\n  </sh-sidenav>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipSidenav, ShipButton } from 'ship-ui';\n\n@Component({\n  selector: 'app-default-sidenav',\n  imports: [ShipSidenav, ShipButton],\n  templateUrl: './default-sidenav.html',\n  styleUrl: './default-sidenav.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DefaultSidenav {\n  isNavOpen = signal(true);\n}\n"
+      },
       {
         "name": "sandbox-sidenav",
         "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",
@@ -2150,7 +2259,7 @@
       },
       {
         "name": "range-slider-sandbox",
-        "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",
+        "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\">Default</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"
       },
       {
@@ -2989,7 +3098,7 @@
       },
       {
         "name": "base-alert",
-        "html": "<!-- Using attribute inputs -->\n<sh-alert>Base alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
+        "html": "<!-- Using attribute inputs -->\n<sh-alert>Default alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipAlert, ShipButton } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-alert',\n  standalone: true,\n  imports: [ShipAlert, ShipButton],\n  templateUrl: './base-alert.html',\n  styleUrl: './base-alert.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseAlert {\n  active = signal(false);\n}\n"
       },
       {
@@ -3046,7 +3155,7 @@
       },
       {
         "name": "base-alert",
-        "html": "<!-- Using attribute inputs -->\n<sh-alert>Base alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
+        "html": "<!-- Using attribute inputs -->\n<sh-alert>Default alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipAlert, ShipButton } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-alert',\n  standalone: true,\n  imports: [ShipAlert, ShipButton],\n  templateUrl: './base-alert.html',\n  styleUrl: './base-alert.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseAlert {\n  active = signal(false);\n}\n"
       },
       {
@@ -3145,7 +3254,7 @@
       },
       {
         "name": "base-alert",
-        "html": "<!-- Using attribute inputs -->\n<sh-alert>Base alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
+        "html": "<!-- Using attribute inputs -->\n<sh-alert>Default alert</sh-alert>\n<sh-alert color=\"primary\">Primary alert</sh-alert>\n<sh-alert color=\"accent\">Accent alert</sh-alert>\n<sh-alert color=\"warn\">Warn alert</sh-alert>\n<sh-alert color=\"error\">Error alert</sh-alert>\n<sh-alert color=\"success\">Success alert</sh-alert>\n<sh-alert color=\"success\">\n  Success alert\n  <p>with a paragraph</p>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<sh-alert color=\"primary\">\n  Success alert\n  <p>with a paragraph</p>\n  <button shButton color=\"primary\" variant=\"outlined\" size=\"small\">Button</button>\n</sh-alert>\n\n<!-- Alternative: Using CSS classes -->\n<!--\n<sh-alert class=\"primary\">Primary alert</sh-alert>\n<sh-alert class=\"accent\">Accent alert</sh-alert>\n<button shButton class=\"outlined primary small\">Button</button>\n-->\n",
         "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { ShipAlert, ShipButton } from 'ship-ui';\n\n@Component({\n  selector: 'app-base-alert',\n  standalone: true,\n  imports: [ShipAlert, ShipButton],\n  templateUrl: './base-alert.html',\n  styleUrl: './base-alert.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseAlert {\n  active = signal(false);\n}\n"
       },
       {

package/bin/mcp/index.js

@@ -4586,6 +4586,7 @@ var require_limitLength = __commonJS((exports) => {
 var require_pattern = __commonJS((exports) => {
   Object.defineProperty(exports, "__esModule", { value: true });
   var code_1 = require_code2();
+  var util_1 = require_util();
   var codegen_1 = require_codegen();
   var error2 = {
     message: ({ schemaCode }) => (0, codegen_1.str)`must match pattern "${schemaCode}"`,
@@ -4598,10 +4599,18 @@ var require_pattern = __commonJS((exports) => {
     $data: true,
     error: error2,
     code(cxt) {
-      const { data, $data, schema, schemaCode, it } = cxt;
+      const { gen, data, $data, schema, schemaCode, it } = cxt;
       const u = it.opts.unicodeRegExp ? "u" : "";
-      const regExp = $data ? (0, codegen_1._)`(new RegExp(${schemaCode}, ${u}))` : (0, code_1.usePattern)(cxt, schema);
-      cxt.fail$data((0, codegen_1._)`!${regExp}.test(${data})`);
+      if ($data) {
+        const { regExp } = it.opts.code;
+        const regExpCode = regExp.code === "new RegExp" ? (0, codegen_1._)`new RegExp` : (0, util_1.useFunc)(gen, regExp);
+        const valid = gen.let("valid");
+        gen.try(() => gen.assign(valid, (0, codegen_1._)`${regExpCode}(${schemaCode}, ${u}).test(${data})`), () => gen.assign(valid, false));
+        cxt.fail$data((0, codegen_1._)`!${valid}`);
+      } else {
+        const regExp = (0, code_1.usePattern)(cxt, schema);
+        cxt.fail$data((0, codegen_1._)`!${regExp}.test(${data})`);
+      }
     }
   };
   exports.default = def;
@@ -7888,7 +7897,7 @@ class Doc {
 var version = {
   major: 4,
   minor: 3,
-  patch: 5
+  patch: 6
 };
 
 // node_modules/zod/v4/core/schemas.js
@@ -8928,7 +8937,7 @@ var $ZodRecord = /* @__PURE__ */ $constructor("$ZodRecord", (inst, def) => {
         if (keyResult instanceof Promise) {
           throw new Error("Async schemas not supported in object keys currently");
         }
-        const checkNumericKey = typeof key === "string" && number.test(key) && keyResult.issues.length && keyResult.issues.some((iss) => iss.code === "invalid_type" && iss.expected === "number");
+        const checkNumericKey = typeof key === "string" && number.test(key) && keyResult.issues.length;
         if (checkNumericKey) {
           const retryResult = def.keyType._zod.run({ value: Number(key), issues: [] }, ctx);
           if (retryResult instanceof Promise) {
@@ -10094,7 +10103,7 @@ function finalize(ctx, schema) {
           }
         }
       }
-      if (refSchema.$ref) {
+      if (refSchema.$ref && refSeen.def) {
         for (const key in schema2) {
           if (key === "$ref" || key === "allOf")
             continue;