@progress/kendo-theme-fluent 11.3.2 → 12.0.0-dev.0

package/dist/meta/variables.json

@@ -2492,6 +2492,90 @@
             "secondary": "var(--kendo-color-secondary, #979593)"
         }
     },
+    "kendo-bubble-border-radius": {
+        "type": "String",
+        "value": "var(--kendo-border-radius-xl, 0.75rem)"
+    },
+    "kendo-bubble-border-radius-sm": {
+        "type": "String",
+        "value": "var(--kendo-border-radius-none, 0px)"
+    },
+    "kendo-bubble-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-bubble-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-bubble-border-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-bubble-border-style": {
+        "type": "String",
+        "value": "solid"
+    },
+    "kendo-bubble-line-height": {
+        "type": "String",
+        "value": "var(--kendo-line-height, normal)"
+    },
+    "kendo-bubble-text": {
+        "type": "String",
+        "value": "var(--kendo-color-base-on-subtle, #323130)"
+    },
+    "kendo-bubble-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
+    },
+    "kendo-bubble-border": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
+    },
+    "kendo-bubble-shadow": {
+        "type": "String",
+        "value": "none"
+    },
+    "kendo-bubble-hover-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle-hover, #e1dfdd)"
+    },
+    "kendo-bubble-hover-border": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle-hover, #e1dfdd)"
+    },
+    "kendo-bubble-active-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle-active, #d2d0ce)"
+    },
+    "kendo-bubble-active-border": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle-active, #d2d0ce)"
+    },
+    "kendo-bubble-focus-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
+    },
+    "kendo-bubble-focus-border": {
+        "type": "String",
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
+    },
+    "kendo-bubble-focus-shadow": {
+        "type": "List",
+        "value": "(0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 8%, transparent))"
+    },
+    "kendo-bubble-expandable-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-bubble-expandable-icon-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2\\.5, 0.625rem)"
+    },
+    "kendo-bubble-expandable-icon-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2\\.5, 0.625rem)"
+    },
     "kendo-avatar-border-width": {
         "type": "String",
         "value": "var(--kendo-avatar-border-width, 1px)"
@@ -15708,29 +15792,17 @@
         "type": "String",
         "value": "var(--kendo-scheduler-marquee-color, var(--kendo-color-primary, #0078d4))"
     },
-    "kendo-chat-transition": {
-        "type": "String",
-        "value": "var(--kendo-chat-transition, var(--kendo-transition, inherit))"
-    },
-    "kendo-chat-link-hover-text": {
-        "type": "String",
-        "value": "var(--kendo-chat-link-hover-text, var(--kendo-color-primary-hover, #106ebe))"
-    },
-    "kendo-chat-link-text": {
-        "type": "String",
-        "value": "var(--kendo-chat-link-text, var(--kendo-color-primary, #0078d4))"
-    },
     "kendo-chat-padding-x": {
         "type": "String",
         "value": "var(--kendo-chat-padding-x, var(--kendo-spacing-4, 1rem))"
     },
     "kendo-chat-padding-y": {
         "type": "String",
-        "value": "var(--kendo-chat-padding-y, var(--kendo-spacing-4, 1rem))"
+        "value": "var(--kendo-spacing-4, 1rem)"
     },
     "kendo-chat-width": {
-        "type": "String",
-        "value": "var(--kendo-chat-width, 500px)"
+        "type": "Number",
+        "value": "320px"
     },
     "kendo-chat-height": {
         "type": "String",
@@ -15752,21 +15824,21 @@
         "type": "String",
         "value": "var(--kendo-chat-line-height, var(--kendo-line-height, normal))"
     },
-    "kendo-chat-typing-indicator-dot-size": {
+    "kendo-chat-item-spacing-y": {
         "type": "String",
-        "value": "var(--kendo-chat-typing-indicator-dot-size, 8px)"
+        "value": "var(--kendo-spacing-4, 1rem)"
     },
-    "kendo-chat-typing-indicator-dot-spacing": {
-        "type": "String",
-        "value": "var(--kendo-chat-typing-indicator-dot-spacing, calc(var(--kendo-spacing-2\\.5, 0.625rem) / 2))"
+    "kendo-chat-message-spacing": {
+        "type": "Null",
+        "value": "null"
     },
-    "kendo-chat-item-spacing-x": {
-        "type": "String",
-        "value": "var(--kendo-spacing-2, 0.5rem)"
+    "kendo-chat-message-max-width": {
+        "type": "Calculation",
+        "value": "min(75%, 460px)"
     },
-    "kendo-chat-item-spacing-y": {
+    "kendo-chat-message-gap": {
         "type": "String",
-        "value": "var(--kendo-spacing-4, 1rem)"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
     "kendo-chat-message-list-padding-x": {
         "type": "String",
@@ -15774,12 +15846,16 @@
     },
     "kendo-chat-message-list-padding-y": {
         "type": "String",
-        "value": "var(--kendo-chat-padding-y, var(--kendo-spacing-4, 1rem))"
+        "value": "var(--kendo-spacing-4, 1rem)"
     },
     "kendo-chat-message-list-spacing": {
         "type": "String",
         "value": "var(--kendo-spacing-4, 1rem)"
     },
+    "kendo-chat-message-status-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
     "kendo-chat-timestamp-font-size": {
         "type": "String",
         "value": "var(--kendo-chat-timestamp-font-size, var(--kendo-font-size-sm, inherit))"
@@ -15790,7 +15866,7 @@
     },
     "kendo-chat-timestamp-transform": {
         "type": "String",
-        "value": "var(--kendo-chat-timestamp-transform, uppercase)"
+        "value": "none"
     },
     "kendo-chat-timestamp-text": {
         "type": "String",
@@ -15798,7 +15874,15 @@
     },
     "kendo-chat-timestamp-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-timestamp-bg, normal)"
+        "value": "normal"
+    },
+    "kendo-chat-timestamp-separator-bg": {
+        "type": "String",
+        "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
+    },
+    "kendo-chat-timestamp-separator-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
     },
     "kendo-chat-message-meta-font-size": {
         "type": "String",
@@ -15814,199 +15898,171 @@
     },
     "kendo-chat-author-line-height": {
         "type": "String",
-        "value": "var(--kendo-chat-author-line-height, var(--kendo-line-height-lg, normal))"
-    },
-    "kendo-chat-bubble-padding-x": {
-        "type": "String",
-        "value": "var(--kendo-chat-bubble-padding-x, var(--kendo-spacing-3, 0.75rem))"
+        "value": "var(--kendo-line-height-xs, normal)"
     },
-    "kendo-chat-bubble-padding-y": {
+    "kendo-chat-status-text": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-padding-y, var(--kendo-spacing-2, 0.5rem))"
+        "value": "var(--kendo-color-subtle, #605e5c)"
     },
     "kendo-chat-bubble-spacing": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-spacing, var(--kendo-spacing-0\\.5, 0.125rem))"
-    },
-    "kendo-chat-bubble-line-height": {
-        "type": "String",
-        "value": "var(--kendo-chat-bubble-line-height, var(--kendo-line-height, normal))"
-    },
-    "kendo-chat-scroll-button-padding": {
-        "type": "String",
-        "value": "var(--kendo-chat-scroll-button-padding, var(--kendo-spacing-2, 0.5rem))"
-    },
-    "kendo-chat-card-deck-scrollbar-size": {
-        "type": "String",
-        "value": "var(--kendo-chat-card-deck-scrollbar-size, 20px)"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
-    "kendo-chat-bubble-border-radius": {
+    "kendo-chat-toolbar-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-border-radius, var(--kendo-spacing-3, 0.75rem))"
+        "value": "var(--kendo-chat-toolbar-bg, var(--kendo-toolbar-bg, var(--kendo-color-surface, #faf9f8)))"
     },
-    "kendo-chat-bubble-border-radius-sm": {
+    "kendo-chat-toolbar-text": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-border-radius-sm, var(--kendo-border-radius, 0))"
+        "value": "var(--kendo-chat-toolbar-text, var(--kendo-toolbar-text, var(--kendo-color-on-app-surface, #323130)))"
     },
-    "kendo-chat-avatar-size": {
+    "kendo-chat-toolbar-border": {
         "type": "String",
-        "value": "var(--kendo-chat-avatar-size, 32px)"
+        "value": "var(--kendo-chat-toolbar-border, inherit)"
     },
-    "kendo-chat-avatar-spacing": {
+    "kendo-chat-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-avatar-spacing, var(--kendo-spacing-2, 0.5rem))"
+        "value": "var(--kendo-chat-bg, var(--kendo-color-surface, #faf9f8))"
     },
-    "kendo-chat-toolbar-padding-x": {
+    "kendo-chat-text": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-padding-x, var(--kendo-toolbar-md-padding-x, var(--kendo-spacing-2, 0.5rem)))"
+        "value": "var(--kendo-chat-text, var(--kendo-color-on-app-surface, #323130))"
     },
-    "kendo-chat-toolbar-padding-y": {
+    "kendo-chat-border": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-padding-y, var(--kendo-toolbar-md-padding-y, var(--kendo-spacing-2, 0.5rem)))"
+        "value": "var(--kendo-chat-border, color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent))"
     },
-    "kendo-chat-toolbar-spacing": {
+    "kendo-chat-alt-bubble-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-spacing, var(--kendo-toolbar-md-spacing, var(--kendo-spacing-2, 0.5rem)))"
+        "value": "var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4))"
     },
-    "kendo-chat-toolbar-bg": {
+    "kendo-chat-alt-bubble-text": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-bg, var(--kendo-toolbar-bg, var(--kendo-color-surface, #faf9f8)))"
+        "value": "var(--kendo-chat-alt-bubble-text, var(--kendo-color-surface-alt, #ffffff))"
     },
-    "kendo-chat-toolbar-text": {
+    "kendo-chat-alt-bubble-border": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-text, var(--kendo-toolbar-text, var(--kendo-color-on-app-surface, #323130)))"
+        "value": "var(--kendo-chat-alt-bubble-border, var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4)))"
     },
-    "kendo-chat-toolbar-border": {
+    "kendo-chat-alt-bubble-shadow": {
         "type": "String",
-        "value": "var(--kendo-chat-toolbar-border, inherit)"
+        "value": "none"
     },
-    "kendo-chat-quick-reply-padding-x": {
+    "kendo-chat-alt-bubble-hover-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-padding-x, var(--kendo-spacing-3, 0.75rem))"
+        "value": "var(--kendo-color-primary-hover, #106ebe)"
     },
-    "kendo-chat-quick-reply-padding-y": {
+    "kendo-chat-alt-bubble-hover-border": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-padding-y, var(--kendo-spacing-2, 0.5rem))"
+        "value": "var(--kendo-color-primary-hover, #106ebe)"
     },
-    "kendo-chat-quick-reply-spacing": {
+    "kendo-chat-alt-bubble-active-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-spacing, var(--kendo-spacing-2, 0.5rem))"
+        "value": "var(--kendo-color-primary-active, #005a9e)"
     },
-    "kendo-chat-quick-reply-line-height": {
+    "kendo-chat-alt-bubble-active-border": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-line-height, var(--kendo-chat-bubble-line-height, var(--kendo-line-height, normal)))"
+        "value": "var(--kendo-color-primary-active, #005a9e)"
     },
-    "kendo-chat-bg": {
+    "kendo-chat-alt-bubble-focus-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-bg, var(--kendo-color-surface, #faf9f8))"
+        "value": "var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4))"
     },
-    "kendo-chat-text": {
+    "kendo-chat-alt-bubble-focus-border": {
         "type": "String",
-        "value": "var(--kendo-chat-text, var(--kendo-color-on-app-surface, #323130))"
+        "value": "var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4))"
     },
-    "kendo-chat-border": {
-        "type": "String",
-        "value": "var(--kendo-chat-border, color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent))"
+    "kendo-chat-alt-bubble-focus-shadow": {
+        "type": "List",
+        "value": "(0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #0078d4) 16%, transparent))"
     },
-    "kendo-chat-bubble-bg": {
+    "kendo-chat-typing-indicator-text": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-bg, var(--kendo-color-surface-alt, #ffffff))"
+        "value": "var(--kendo-color-base-on-subtle, #323130)"
     },
-    "kendo-chat-bubble-text": {
-        "type": "String",
-        "value": "var(--kendo-chat-bubble-text, var(--kendo-color-on-app-surface, #323130))"
+    "kendo-chat-file-width": {
+        "type": "Number",
+        "value": "240px"
     },
-    "kendo-chat-bubble-border": {
+    "kendo-chat-file-padding-x": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-border, var(--kendo-chat-bubble-bg, var(--kendo-color-surface-alt, #ffffff)))"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
-    "kendo-chat-bubble-shadow": {
+    "kendo-chat-file-padding-y": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-shadow, var(--kendo-box-shadow-depth-1, none))"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
-    "kendo-chat-bubble-hover-shadow": {
+    "kendo-chat-file-gap": {
         "type": "String",
-        "value": "var(--kendo-chat-bubble-hover-shadow, var(--kendo-box-shadow-depth-2, none))"
+        "value": "var(--kendo-spacing-1, 0.25rem)"
     },
-    "kendo-chat-bubble-selected-shadow": {
-        "type": "String",
-        "value": "var(--kendo-chat-bubble-selected-shadow, var(--kendo-box-shadow-depth-3, none))"
+    "kendo-chat-file-border-width": {
+        "type": "Number",
+        "value": "1px"
     },
-    "kendo-chat-alt-bubble-bg": {
+    "kendo-chat-file-border-style": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4))"
+        "value": "solid"
     },
-    "kendo-chat-alt-bubble-text": {
+    "kendo-chat-file-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-text, var(--kendo-color-surface-alt, #ffffff))"
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
     },
-    "kendo-chat-alt-bubble-border": {
+    "kendo-chat-file-text": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-border, var(--kendo-chat-alt-bubble-bg, var(--kendo-color-primary, #0078d4)))"
+        "value": "var(--kendo-color-base-on-subtle, #323130)"
     },
-    "kendo-chat-alt-bubble-shadow": {
+    "kendo-chat-file-border": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-shadow, var(--kendo-box-shadow-depth-1, none))"
+        "value": "var(--kendo-color-base-subtle, #edebe9)"
     },
-    "kendo-chat-alt-bubble-hover-shadow": {
+    "kendo-chat-file-border-radius": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-hover-shadow, var(--kendo-box-shadow-depth-2, none))"
+        "value": "var(--kendo-border-radius-md, 0.25rem)"
     },
-    "kendo-chat-alt-bubble-selected-shadow": {
+    "kendo-chat-file-download-padding-x": {
         "type": "String",
-        "value": "var(--kendo-chat-alt-bubble-selected-shadow, var(--kendo-box-shadow-depth-3, none))"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
-    "kendo-chat-quick-reply-bg": {
+    "kendo-chat-file-download-padding-y": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-bg, transparent)"
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
-    "kendo-chat-quick-reply-text": {
-        "type": "String",
-        "value": "var(--kendo-chat-quick-reply-text, var(--kendo-color-primary, #0078d4))"
+    "kendo-chat-message-pinned-border-width": {
+        "type": "Number",
+        "value": "1px"
     },
-    "kendo-chat-quick-reply-border": {
+    "kendo-chat-message-pinned-border-style": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-border, var(--kendo-color-primary, #0078d4))"
+        "value": "solid"
     },
-    "kendo-chat-quick-reply-hover-bg": {
+    "kendo-chat-message-pinned-border-color": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-hover-bg, var(--kendo-color-primary, #0078d4))"
+        "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
     },
-    "kendo-chat-quick-reply-hover-text": {
+    "kendo-chat-message-reference-padding-x": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-hover-text, var(--kendo-color-surface-alt, #ffffff))"
+        "value": "var(--kendo-spacing-1, 0.25rem)"
     },
-    "kendo-chat-quick-reply-hover-border": {
+    "kendo-chat-message-reference-padding-y": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-hover-border, var(--kendo-color-primary, #0078d4))"
+        "value": "var(--kendo-spacing-1, 0.25rem)"
     },
-    "kendo-chat-quick-reply-focus-offset": {
+    "kendo-chat-message-reference-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-focus-offset, var(--kendo-spacing-0\\.5, 0.125rem))"
+        "value": "var(--kendo-color-surface, #faf9f8)"
     },
-    "kendo-chat-quick-reply-focus-outline-width": {
+    "kendo-chat-message-reference-text": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-focus-outline-width, 1px)"
+        "value": "var(--kendo-color-on-app-surface, #323130)"
     },
-    "kendo-chat-quick-reply-focus-outline-style": {
+    "kendo-chat-message-reference-marker-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-focus-outline-style, solid)"
+        "value": "var(--kendo-color-base-emphasis, #605e5c)"
     },
-    "kendo-chat-quick-reply-focus-outline-color": {
+    "kendo-chat-message-reference-marker-alt-bg": {
         "type": "String",
-        "value": "var(--kendo-chat-quick-reply-focus-outline-color, initial)"
-    },
-    "kendo-chat-quick-reply-shadow-opacity": {
-        "type": "Number",
-        "value": "0"
-    },
-    "kendo-chat-quick-reply-shadow-blur": {
-        "type": "Null",
-        "value": "null"
-    },
-    "kendo-chat-quick-reply-shadow-spread": {
-        "type": "Null",
-        "value": "null"
+        "value": "var(--kendo-color-primary, #0078d4)"
     },
     "kendo-media-player-border-width": {
         "type": "String",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "11.3.2",
+    "version": "12.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "11.3.2",
+    "version": "12.0.0-dev.0",
     "previewColors": [
         "#1b1a19",
         "#21201f",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "11.3.2",
+    "version": "12.0.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#faf9f8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "11.3.2",
+  "version": "12.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "11.3.2",
-    "@progress/kendo-theme-utils": "11.3.2"
+    "@progress/kendo-theme-core": "12.0.0-dev.0",
+    "@progress/kendo-theme-utils": "12.0.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "dda792b83f27d1dd1f3cb44658b5b4ed3d26d729"
+  "gitHead": "e1ba80301b9bb9353203603cb431d8ce1891e0c6"
 }

package/scss/bubble/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-bubble--styles() {
+    @include import-once( "bubble" ) {
+        @include core-styles();
+        @include kendo-bubble--layout();
+        @include kendo-bubble--theme();
+    }
+}

package/scss/bubble/_layout.scss

@@ -0,0 +1,9 @@
+@use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bubble/_layout.scss" as *;
+
+@mixin kendo-bubble--layout() {
+
+    @include kendo-bubble--layout-base();
+
+}

package/scss/bubble/_theme.scss

@@ -0,0 +1,16 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bubble/_theme.scss" as *;
+
+@mixin kendo-bubble--theme() {
+    @include kendo-bubble--theme-base();
+
+    .k-bubble {
+
+        &:focus,
+        &.k-focus {
+            box-shadow: inset 0 0 0 #{$kendo-bubble-border-width} k-color(app-surface),
+                        inset 0 0 0 calc( #{$kendo-bubble-border-width} * 2 ) k-color(base-emphasis);
+        }
+    }
+}