chore: Updated CHANGELOG, stories and stories metadata (#1745)

Author: rkaraivanov

CHANGELOG.md

@@ -4,11 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [6.1.0] - 2025-06-11
+## [6.1.0] - 2025-06-12
 ### Added
 - Date Range Picker
 
 ### Changed
+- Updated the readonly styles of most form associated components across all themes to better signify when a component
+  is in a readonly state.
 - #### File input
   - **Breaking change**: `igcChange` & `igcCancel` events detail now returns the underlying component `files` property.
 - #### Tooltip
@@ -27,6 +29,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Incorrect date rollover for in certain scenarios [#1710](https://github.com/IgniteUI/igniteui-webcomponents/issues/1710)
 - #### Combo
   - Case insensitive icon styles in themes [#1728](https://github.com/IgniteUI/igniteui-webcomponents/pull/1728)
+- #### Input
+  - Replace border in fluent theme with a box-shadow [#1726](https://github.com/IgniteUI/igniteui-webcomponents/pull/1726)
+  - Focused state background color in Indigo theme [#1732](https://github.com/IgniteUI/igniteui-webcomponents/pull/1732)
 - #### Textarea
   - Label height and component height override [#1715](https://github.com/IgniteUI/igniteui-webcomponents/pull/1715)
 

scripts/_package.json

@@ -43,6 +43,7 @@
     "combo",
     "date input",
     "date picker",
+    "date range picker",
     "dialog",
     "divider",
     "dropdown",
@@ -72,7 +73,7 @@
   ],
   "customElements": "custom-elements.json",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.0",
+    "@floating-ui/dom": "^1.7.0",
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.0",
     "lit": "^3.3.0"

stories/badge.stories.ts

@@ -71,7 +71,7 @@ function renderTabs(args: IgcBadgeArgs) {
   return ['primary', 'info', 'success', 'warning', 'danger'].map(
     (variant, idx) => html`
       <igc-tab>
-        <span>
+        <span slot="label">
           ${variant.toUpperCase()}
           <igc-badge
             variant=${variant as IgcBadgeArgs['variant']}

stories/input.stories.ts

@@ -39,9 +39,9 @@ const metadata: Meta<IgcInputComponent> = {
       control: 'text',
     },
     type: {
-      type: '"email" | "number" | "password" | "search" | "tel" | "text" | "url"',
+      type: '"text" | "email" | "number" | "password" | "search" | "tel" | "url"',
       description: 'The type attribute of the control.',
-      options: ['email', 'number', 'password', 'search', 'tel', 'text', 'url'],
+      options: ['text', 'email', 'number', 'password', 'search', 'tel', 'url'],
       control: { type: 'select' },
       table: { defaultValue: { summary: 'text' } },
     },
@@ -164,7 +164,7 @@ interface IgcInputArgs {
   /** The value of the control. */
   value: string | Date;
   /** The type attribute of the control. */
-  type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+  type: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
   /**
    * The input mode attribute of the control.
    * See [relevant MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)

stories/tooltip.stories.ts

@@ -45,10 +45,9 @@ const metadata: Meta<IgcTooltipComponent> = {
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
-    disableArrow: {
+    withArrow: {
       type: 'boolean',
-      description:
-        'Whether to disable the rendering of the arrow indicator for the tooltip.',
+      description: 'Whether to render an arrow indicator for the tooltip.',
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
@@ -77,7 +76,7 @@ const metadata: Meta<IgcTooltipComponent> = {
         'left-end',
       ],
       control: { type: 'select' },
-      table: { defaultValue: { summary: 'top' } },
+      table: { defaultValue: { summary: 'bottom' } },
     },
     anchor: {
       type: 'Element | string',
@@ -130,9 +129,9 @@ const metadata: Meta<IgcTooltipComponent> = {
   },
   args: {
     open: false,
-    disableArrow: false,
+    withArrow: false,
     offset: 6,
-    placement: 'top',
+    placement: 'bottom',
     showTriggers: 'pointerenter',
     hideTriggers: 'pointerleave, click',
     showDelay: 200,
@@ -147,8 +146,8 @@ export default metadata;
 interface IgcTooltipArgs {
   /** Whether the tooltip is showing. */
   open: boolean;
-  /** Whether to disable the rendering of the arrow indicator for the tooltip. */
-  disableArrow: boolean;
+  /** Whether to render an arrow indicator for the tooltip. */
+  withArrow: boolean;
   /** The offset of the tooltip from the anchor in pixels. */
   offset: number;
   /** Where to place the floating element relative to the parent anchor element. */
@@ -203,7 +202,7 @@ export const Basic: Story = {
 
     <igc-tooltip
       anchor="basic-tooltip"
-      .disableArrow=${args.disableArrow}
+      .withArrow=${args.withArrow}
       .offset=${args.offset}
       .hideDelay=${args.hideDelay}
       .showDelay=${args.showDelay}