diff --git a/packages/calcite-components/src/utils/responsive.spec.ts b/packages/calcite-components/src/utils/responsive.spec.ts
index e69a27ee008..4706eca6608 100644
--- a/packages/calcite-components/src/utils/responsive.spec.ts
+++ b/packages/calcite-components/src/utils/responsive.spec.ts
@@ -8,10 +8,11 @@ describe("getBreakpoints()", () => {
document.head.innerHTML = `
`;
@@ -22,6 +23,7 @@ describe("getBreakpoints()", () => {
medium: toBeInteger(),
small: toBeInteger(),
xsmall: toBeInteger(),
+ xxsmall: toBeInteger(),
},
});
});
diff --git a/packages/calcite-components/src/utils/responsive.ts b/packages/calcite-components/src/utils/responsive.ts
index 73864dd5f3e..b8cf103dec0 100644
--- a/packages/calcite-components/src/utils/responsive.ts
+++ b/packages/calcite-components/src/utils/responsive.ts
@@ -4,6 +4,7 @@ export interface Breakpoints {
medium: number;
small: number;
xsmall: number;
+ xxsmall: number;
};
}
@@ -35,6 +36,7 @@ export async function getBreakpoints(): Promise {
medium: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-md"),
small: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-sm"),
xsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xs"),
+ xxsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xxs"),
},
});
});
diff --git a/support/dictionaries/dict-calcite-design-system.txt b/support/dictionaries/dict-calcite-design-system.txt
index 78bed29a167..2d88329f599 100644
--- a/support/dictionaries/dict-calcite-design-system.txt
+++ b/support/dictionaries/dict-calcite-design-system.txt
@@ -73,6 +73,7 @@ tibt
## sizing
xsmall
+xxsmall
## svg
svgs