@ship-ui/core 0.18.3 → 0.18.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.18.3",
+  "version": "0.18.5",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",

package/snippets/ship-ui.code-snippets

@@ -9,7 +9,7 @@
   "ShipIcon: With Options": {
     "prefix": "sh-icon-full",
     "body": [
-      "<sh-icon [color]=\"${1|primary,accent,warn,error,success|}\" [variant]=\"${2|simple,outlined,flat,raised|}\" [size]=\"${3|small,large|}\">",
+      "<sh-icon [color]=\"${1|primary,accent,warn,error,success|}\" [size]=\"${2|small,large|}\">",
       "  $0",
       "</sh-icon>"
     ],
@@ -152,7 +152,7 @@
   "ShipSelect: With Options": {
     "prefix": "sh-select-full",
     "body": [
-      "<sh-select [readonly]=\"${1:false}\">",
+      "<sh-select [color]=\"${1|primary,accent,warn,error,success|}\" [variant]=\"${2|simple,outlined,flat,raised|}\" [size]=\"${3|small|}\" [readonly]=\"${4:false}\">",
       "  $0",
       "</sh-select>"
     ],
@@ -188,6 +188,22 @@
     ],
     "description": "Basic usage of ShipThemeToggle"
   },
+  "ShipAccordion: Basic": {
+    "prefix": "sh-accordion",
+    "body": [
+      "<sh-accordion>$0</sh-accordion>"
+    ],
+    "description": "Basic usage of ShipAccordion"
+  },
+  "ShipAccordion: With Options": {
+    "prefix": "sh-accordion-full",
+    "body": [
+      "<sh-accordion [variant]=\"${1:null}\" [size]=\"${2:null}\">",
+      "  $0",
+      "</sh-accordion>"
+    ],
+    "description": "Full usage of ShipAccordion with common options"
+  },
   "ShipToggleCard: Basic": {
     "prefix": "sh-toggle-card",
     "body": [

package/styles/components/ship-accordion.scss

@@ -0,0 +1,83 @@
+@use '../helpers.scss' as *;
+
+$shipAccordion: true !default;
+
+@if $shipAccordion == true {
+  sh-accordion {
+    --acc-pad: #{p2r(16)};
+    --acc-f: var(--paragraph-30);
+    --acc-bc: var(--base-4);
+    --acc-s: var(--shape-2);
+
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--acc-bc);
+    border-radius: var(--acc-s);
+    overflow: hidden;
+
+    &:empty {
+      display: none;
+    }
+
+    &.small {
+      --acc-pad: #{p2r(12)};
+      --acc-f: var(--paragraph-40);
+    }
+
+    details {
+      width: 100%;
+
+      // Hide standard browser marker
+      & > summary {
+        list-style: none;
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+
+      summary {
+        display: flex;
+        align-items: center;
+        padding: var(--acc-pad);
+        cursor: pointer;
+        user-select: none;
+        transition: background-color 0.2s;
+        font-weight: 500;
+        font-size: var(--acc-f);
+        border-bottom: 1px solid var(--acc-bc);
+
+        &:focus-visible {
+          outline: 2px solid var(--primary-8);
+          outline-offset: -2px;
+          border-radius: var(--acc-s);
+        }
+
+        sh-icon {
+          transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          color: var(--mono-11);
+          margin-left: auto;
+        }
+      }
+
+      &[open] {
+        summary {
+          border-bottom: 1px solid var(--acc-bc);
+
+          sh-icon {
+            transform: rotate(180deg);
+          }
+        }
+
+        + details {
+          border-top: 1px solid var(--acc-bc);
+        }
+      }
+
+      > .content {
+        padding: var(--acc-pad);
+        background: var(--base-2);
+      }
+    }
+  }
+}

package/styles/components/ship-alert.scss

@@ -70,6 +70,16 @@ $shipAlert: true !default;
           display: block;
         }
       }
+
+      &:has(.content:empty) {
+        grid-template-rows: auto;
+        grid-template-areas: 'stateIcon title closeIcon';
+      }
+
+      &:has(.actions:empty):has(.content:empty) {
+        grid-template-columns: auto 1fr;
+        grid-template-areas: 'stateIcon title';
+      }
     }
 
     .actions {
@@ -80,17 +90,6 @@ $shipAlert: true !default;
       gap: p2r(4);
     }
 
-    &:has(.actions:not(:empty)) {
-      .alert {
-        align-items: center;
-        grid-template-columns: auto 1fr 1fr;
-      }
-
-      .close-icon {
-        display: none;
-      }
-    }
-
     .icon {
       grid-area: stateIcon;
       height: p2r(20);
@@ -171,11 +170,6 @@ $shipAlert: true !default;
       }
     }
 
-    &:has(.content:empty) .alert {
-      grid-template-rows: auto;
-      grid-template-areas: 'stateIcon title closeIcon';
-    }
-
     &:has([content]) .alert {
       --alert-p: #{p2r(12)};
     }

package/styles/components/ship-form-field.scss

@@ -369,6 +369,27 @@ $shipFormFieldShadow: false !default;
     &.success {
       --ff-ic: var(--success-8);
     }
+
+    &.horizontal {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: 0 p2r(16);
+
+      label {
+        padding-bottom: 0;
+        margin-bottom: 0;
+        grid-column: 1;
+      }
+
+      .input-wrap {
+        grid-column: 2;
+      }
+
+      .helpers {
+        grid-column: 2;
+      }
+    }
   }
 }
 

package/styles/index.scss

@@ -50,6 +50,7 @@ $shipToggleCard: true !default;
 $shipTable: true !default;
 $shipTabs: true !default;
 $shipFileUpload: true !default;
+$shipAccordion: true !default;
 
 @use './components/ship-alert-container.scss' with (
   $shipAlert: $shipAlert
@@ -160,3 +161,6 @@ $shipFileUpload: true !default;
 @use './components/ship-file-upload.scss' with (
   $shipFileUpload: $shipFileUpload
 );
+@use './components/ship-accordion.scss' with (
+  $shipAccordion: $shipAccordion
+);

package/types/ship-ui-core.d.ts

@@ -493,15 +493,29 @@ declare class ShipFormField {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipFormField, "sh-form-field", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, ["label", "[boxPrefix]", "[prefix]", "[textPrefix]", "input", "textarea", "[textSuffix]", "[suffix]", "[boxSuffix]", "[error]", "[hint]"], true, never>;
 }
 
+declare class ShipAccordion {
+    private selfElement;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<string | null>;
+    readonly allowMultiple: _angular_core.InputSignal<boolean>;
+    readonly variant: _angular_core.InputSignal<"outlined" | "flat" | "base" | null>;
+    readonly size: _angular_core.InputSignal<string | null>;
+    hostClasses: _angular_core.Signal<string>;
+    protected items: _angular_core.Signal<HTMLDetailsElement[]>;
+    constructor();
+    onToggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipAccordion, "sh-accordion", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+
 declare class ShipIcon implements AfterContentInit {
     #private;
     color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
     size: _angular_core.InputSignal<ShipIconSize | null>;
     hostClasses: _angular_core.Signal<string>;
     ngAfterContentInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipIcon, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipIcon, "sh-icon", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipIcon, "sh-icon", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class ShipList {
@@ -642,6 +656,9 @@ declare class ShipSelect {
     value: _angular_core.InputSignal<string | undefined>;
     label: _angular_core.InputSignal<string | undefined>;
     asFreeText: _angular_core.InputSignal<boolean>;
+    color: _angular_core.InputSignal<ShipColor | null>;
+    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    size: _angular_core.InputSignal<ShipSize | null>;
     optionTitle: _angular_core.InputSignal<string | null>;
     freeTextTitle: _angular_core.InputSignal<string | null>;
     freeTextPlaceholder: _angular_core.InputSignal<string | null>;
@@ -649,6 +666,7 @@ declare class ShipSelect {
     placeholder: _angular_core.InputSignal<string | undefined>;
     readonly: _angular_core.ModelSignal<boolean>;
     disabled: _angular_core.ModelSignal<boolean>;
+    hostClasses: _angular_core.Signal<string>;
     lazySearch: _angular_core.InputSignal<boolean>;
     inlineSearch: _angular_core.InputSignal<boolean>;
     asText: _angular_core.InputSignal<boolean>;
@@ -686,7 +704,7 @@ declare class ShipSelect {
     inputValueEffect: _angular_core.EffectRef;
     inputRefElEffect: _angular_core.EffectRef;
     selectedLabels: _angular_core.Signal<string>;
-    inputState: _angular_core.Signal<"closed" | "selected" | "loading" | "open-searching" | "open" | "searching">;
+    inputState: _angular_core.Signal<"open" | "closed" | "selected" | "loading" | "open-searching" | "searching">;
     hasSearch: _angular_core.Signal<boolean>;
     ngOnInit(): void;
     setInitInput(): void;
@@ -704,7 +722,7 @@ declare class ShipSelect {
     updateInputElValue(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipSelect, "sh-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "asFreeText": { "alias": "asFreeText"; "required": false; "isSignal": true; }; "optionTitle": { "alias": "optionTitle"; "required": false; "isSignal": true; }; "freeTextTitle": { "alias": "freeTextTitle"; "required": false; "isSignal": true; }; "freeTextPlaceholder": { "alias": "freeTextPlaceholder"; "required": false; "isSignal": true; }; "validateFreeText": { "alias": "validateFreeText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lazySearch": { "alias": "lazySearch"; "required": false; "isSignal": true; }; "inlineSearch": { "alias": "inlineSearch"; "required": false; "isSignal": true; }; "asText": { "alias": "asText"; "required": false; "isSignal": true; }; "isClearable": { "alias": "isClearable"; "required": false; "isSignal": true; }; "selectMultiple": { "alias": "selectMultiple"; "required": false; "isSignal": true; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; "selectedOptionTemplate": { "alias": "selectedOptionTemplate"; "required": false; "isSignal": true; }; "placeholderTemplate": { "alias": "placeholderTemplate"; "required": false; "isSignal": true; }; "freeTextOptionTemplate": { "alias": "freeTextOptionTemplate"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; "isSignal": true; }; }, { "readonly": "readonlyChange"; "disabled": "disabledChange"; "isOpen": "isOpenChange"; "isLoading": "isLoadingChange"; "options": "optionsChange"; "selectedOptions": "selectedOptionsChange"; "cleared": "cleared"; "onAddNewFreeTextOption": "onAddNewFreeTextOption"; }, ["inlineTemplate"], ["label", "[prefix]", "[boxPrefix]", "input", "textarea"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipSelect, "sh-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "asFreeText": { "alias": "asFreeText"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "optionTitle": { "alias": "optionTitle"; "required": false; "isSignal": true; }; "freeTextTitle": { "alias": "freeTextTitle"; "required": false; "isSignal": true; }; "freeTextPlaceholder": { "alias": "freeTextPlaceholder"; "required": false; "isSignal": true; }; "validateFreeText": { "alias": "validateFreeText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lazySearch": { "alias": "lazySearch"; "required": false; "isSignal": true; }; "inlineSearch": { "alias": "inlineSearch"; "required": false; "isSignal": true; }; "asText": { "alias": "asText"; "required": false; "isSignal": true; }; "isClearable": { "alias": "isClearable"; "required": false; "isSignal": true; }; "selectMultiple": { "alias": "selectMultiple"; "required": false; "isSignal": true; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; "selectedOptionTemplate": { "alias": "selectedOptionTemplate"; "required": false; "isSignal": true; }; "placeholderTemplate": { "alias": "placeholderTemplate"; "required": false; "isSignal": true; }; "freeTextOptionTemplate": { "alias": "freeTextOptionTemplate"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; "isSignal": true; }; }, { "readonly": "readonlyChange"; "disabled": "disabledChange"; "isOpen": "isOpenChange"; "isLoading": "isLoadingChange"; "options": "optionsChange"; "selectedOptions": "selectedOptionsChange"; "cleared": "cleared"; "onAddNewFreeTextOption": "onAddNewFreeTextOption"; }, ["inlineTemplate"], ["label", "[prefix]", "[boxPrefix]", "input", "textarea"], true, never>;
 }
 
 type ShipSidenavType = 'overlay' | 'simple' | '';
@@ -1019,6 +1037,10 @@ interface ShipConfig {
     icon?: ShipComponentConfig;
     stepper?: ShipComponentConfig;
     select?: ShipComponentConfig;
+    accordion?: ShipComponentConfig;
+    tabs?: ShipComponentConfig;
+    'event-card'?: ShipComponentConfig;
+    datepicker?: ShipComponentConfig;
     alertVariant?: '' | 'simple' | 'outlined' | 'flat' | 'raised';
     cardType?: '' | 'type-b' | 'type-c';
     dialogType?: 'type-b';
@@ -1026,5 +1048,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortable, SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
 export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };