IgniteUI · ChronosSF · Sep 25, 2026 · Jul 20, 2026 · Aug 11, 2026 · Aug 12, 2026
diff --git a/browser/index.html b/browser/index.html
@@ -30,7 +30,7 @@
     <!-- <link href="https://fonts.googleapis.com/css?family=Kanit&display=swap" rel="stylesheet"> -->
     <!-- <link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'> -->
   </head>
-  <body>
+  <body class="ig-scrollbar ig-typography">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json
@@ -21,14 +21,14 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/jest": "^29.2.0",
     "@types/node": "^24.7.1",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser": "^3.2.4",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.3.3",
     "typescript": "^4.8.4",
     "vite": "^7.1.9",
     "vitest": "^3.2.4",

diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css
@@ -1,9 +1,9 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-@layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
+@source "./index.tsx";
+
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
 
 igc-badge {
     --ig-size: var(--ig-size-small);

diff --git a/samples/layouts/accordion/customization/src/AccordionCustomization.css b/samples/layouts/accordion/customization/src/AccordionCustomization.css
diff --git a/samples/layouts/accordion/customization/src/index.css b/samples/layouts/accordion/customization/src/index.css
@@ -0,0 +1,66 @@
+.accordion-sample {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.accordion-content {
+    width: min(760px, 100%);
+    margin: 0 auto;
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.accordion-sample igc-accordion {
+    display: block;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 4px;
+}
+
+.panel-description {
+    margin: 0 0 16px;
+    color: var(--ig-gray-700);
+}
+
+.categories-container {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px 24px;
+    max-width: 520px;
+}
+
+.category-option,
+.rating-option {
+    margin: 4px 0;
+}
+
+.range-summary {
+    display: flex;
+    justify-content: space-between;
+    max-width: 560px;
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+
+.cost-slider {
+    max-width: 560px;
+    margin: 8px 0 0;
+}
+
+.rating-options {
+    display: grid;
+    gap: 8px;
+    max-width: 360px;
+}
+
+.rating-control {
+    flex-direction: row;
+}
+
+.time-input {
+    max-width: 260px;
+}
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import "./AccordionCustomization.css";
 import {
   IgrAccordion,
   IgrCheckbox,
@@ -22,6 +21,8 @@ import "igniteui-webcomponents/themes/light/bootstrap.css";
 
 type Category = { checked: boolean; type: string };
 
+const ratingOptions = [2, 3, 4, 5];
+
 const clearIcon =
   "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>";
 const clockIcon =
@@ -37,14 +38,15 @@ export default class AccordionCustomization extends React.Component<any, any> {
   ];
 
   private dateTimeInput: IgrDateTimeInput;
+  private transportationPanel: IgrExpansionPanel;
 
   constructor(props: any) {
     super(props);
     this.state = {
       categories: this.categories,
       cost: { lower: 200, upper: 800 },
       rating: "",
-      time: "Time",
+      time: "Any time",
     };
 
     this.categoriesChange = this.categoriesChange.bind(this);
@@ -53,30 +55,42 @@ export default class AccordionCustomization extends React.Component<any, any> {
     this.timeChange = this.timeChange.bind(this);
     this.clearTime = this.clearTime.bind(this);
     this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
+    this.transportationPanelRef = this.transportationPanelRef.bind(this);
 
     registerIconFromText("clear", clearIcon, "material");
     registerIconFromText("clock", clockIcon, "material");
   }
 
+  public componentDidMount() {
+    if (this.transportationPanel) {
+      this.transportationPanel.open = true;
+    }
+  }
+
   public render(): JSX.Element {
+    const selectedCategories = this.state.categories
+      .filter((c: Category) => c.checked)
+      .map((c: Category) => c.type)
+      .join(", ");
+
     return (
-      <div id="root">
-        <div className="sample-wrapper">
+      <div className="accordion-sample">
+        <div className="accordion-content">
           <IgrAccordion>
-            <IgrExpansionPanel>
+            <IgrExpansionPanel ref={this.transportationPanelRef}>
               <span slot="title">
-                Categories
-                {this.state.categories.some((c: Category) => c.checked) && ": "}
-                {this.state.categories
-                  .filter((c: Category) => c.checked)
-                  .map((c: Category) => c.type)
-                  .join(", ")}
+                Transportation{selectedCategories && `: ${selectedCategories}`}
               </span>
+              <span slot="subtitle">Choose how you want to travel</span>
               <span>
+                <p className="panel-description">
+                  Select one or more transportation options for your trip.
+                </p>
                 <div className="categories-container">
                   {this.state.categories.map((c: Category) => {
                     return (
                       <IgrCheckbox
+                        className="category-option"
                         key={"checkbox-" + c.type}
                         onChange={(e: IgrCheckboxChangeEventArgs) =>
                           this.categoriesChange(e, c.type)
@@ -91,11 +105,19 @@ export default class AccordionCustomization extends React.Component<any, any> {
             </IgrExpansionPanel>
             <IgrExpansionPanel>
               <span slot="title">
-                Cost: $<span id="lowerCost">{this.state.cost.lower}</span> to $
-                <span id="upperCost">{this.state.cost.upper}</span>
+                Budget: ${this.state.cost.lower} - ${this.state.cost.upper}
               </span>
+              <span slot="subtitle">Set the price range</span>
               <span>
+                <p className="panel-description">
+                  Adjust the minimum and maximum cost for available options.
+                </p>
+                <div className="range-summary">
+                  <span>${this.state.cost.lower}</span>
+                  <span>${this.state.cost.upper}</span>
+                </div>
                 <IgrRangeSlider
+                  className="cost-slider"
                   min={0}
                   max={1000}
                   lower={this.state.cost.lower}
@@ -106,14 +128,19 @@ export default class AccordionCustomization extends React.Component<any, any> {
             </IgrExpansionPanel>
             <IgrExpansionPanel>
               <span slot="title">
-                Rating{this.state.rating && ": "}
+                Minimum Rating{this.state.rating && ": "}
                 {this.state.rating}
               </span>
+              <span slot="subtitle">Filter by review score</span>
               <span>
-                <IgrRadioGroup alignment="horizontal">
-                  {[1, 2, 3, 4].map((rating) => {
+                <p className="panel-description">
+                  Choose the lowest rating you want to include in the results.
+                </p>
+                <IgrRadioGroup className="rating-options">
+                  {ratingOptions.map((rating) => {
                     return (
                       <IgrRadio
+                        className="rating-option"
                         key={`${rating}star`}
                         name="rating"
                         value={rating.toString()}
@@ -124,8 +151,8 @@ export default class AccordionCustomization extends React.Component<any, any> {
                             rating > 1 ? "s" : ""
                           } or more`}
                           max={5}
-                          value={rating + 0.5}
-                          className="size-small"
+                          value={rating}
+                          className="rating-control size-small"
                           readOnly={true}
                         ></IgrRating>
                       </IgrRadio>
@@ -136,11 +163,16 @@ export default class AccordionCustomization extends React.Component<any, any> {
             </IgrExpansionPanel>
             <IgrExpansionPanel>
               <span slot="title">
-                {this.state.time}
+                Arrival Time
+                {this.state.time !== "Any time" && `: ${this.state.time}`}
               </span>
+              <span slot="subtitle">Set the latest arrival time</span>
               <span>
+                <p className="panel-description">
+                  Pick the latest acceptable arrival time for your trip.
+                </p>
                 <IgrDateTimeInput
-                  className="size-small"
+                  className="time-input size-small"
                   inputFormat="hh:mm tt"
                   label="Arrive before"
                   ref={this.dateTimeInputRef}
@@ -194,11 +226,11 @@ export default class AccordionCustomization extends React.Component<any, any> {
     const s = e.target as IgrDateTimeInput;
     const result =
       s.value !== null
-        ? `Arrive before ${e.detail.toLocaleTimeString([], {
+        ? e.detail.toLocaleTimeString([], {
             hour: "2-digit",
             minute: "2-digit",
-          })}`
-        : "Time";
+          })
+        : "Any time";
     this.setState({
       time: result,
     });
@@ -207,7 +239,7 @@ export default class AccordionCustomization extends React.Component<any, any> {
   public clearTime() {
     this.dateTimeInput.clear();
     this.setState({
-      time: "Time",
+      time: "Any time",
     });
   }
 
@@ -217,8 +249,14 @@ export default class AccordionCustomization extends React.Component<any, any> {
     }
     this.dateTimeInput = input;
   }
+
+  public transportationPanelRef(panel: IgrExpansionPanel) {
+    if (!panel) {
+      return;
+    }
+    this.transportationPanel = panel;
+  }
 }
 
-// rendering above component to the React DOM
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<AccordionCustomization />);
diff --git a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css b/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css
diff --git a/samples/layouts/accordion/nested-scenario/src/index.css b/samples/layouts/accordion/nested-scenario/src/index.css
@@ -0,0 +1,24 @@
+.accordion-sample {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.accordion-content {
+    width: min(760px, 100%);
+    margin: 0 auto;
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.accordion-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+}
+
+.accordion-sample igc-accordion {
+    display: block;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 4px;
+}