npm - @taiga-ui/addon-mobile - Versions diffs - 5.21.0 → 5.22.0-canary.7c35aae - Mend

@taiga-ui/addon-mobile 5.21.0 → 5.22.0-canary.7c35aae

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/addon-mobile",
-  "version": "5.21.0",
+  "version": "5.22.0-canary.7c35aae",
   "description": "Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.",
   "keywords": [
     "angular",
@@ -36,6 +36,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile.mjs"
     },
+    "./components": {
+      "types": "./components/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
+    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-directives.mjs"
@@ -44,34 +48,6 @@
       "types": "./services/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-services.mjs"
     },
-    "./components": {
-      "types": "./components/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-components.mjs"
-    },
-    "./directives/dropdown-mobile": {
-      "types": "./directives/dropdown-mobile/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs"
-    },
-    "./directives/elastic-sticky": {
-      "types": "./directives/elastic-sticky/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs"
-    },
-    "./directives/dropdown-sheet": {
-      "types": "./directives/dropdown-sheet/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs"
-    },
-    "./directives/responsive-dialog": {
-      "types": "./directives/responsive-dialog/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs"
-    },
-    "./directives/ripple": {
-      "types": "./directives/ripple/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs"
-    },
-    "./directives/touchable": {
-      "types": "./directives/touchable/index.d.ts",
-      "default": "./fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs"
-    },
     "./components/bottom-sheet": {
       "types": "./components/bottom-sheet/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs"
@@ -96,6 +72,10 @@
       "types": "./components/pull-to-refresh/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs"
     },
+    "./components/search-bar": {
+      "types": "./components/search-bar/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-components-search-bar.mjs"
+    },
     "./components/sheet-dialog": {
       "types": "./components/sheet-dialog/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs"
@@ -107,6 +87,30 @@
     "./components/tab-bar": {
       "types": "./components/tab-bar/index.d.ts",
       "default": "./fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs"
+    },
+    "./directives/dropdown-mobile": {
+      "types": "./directives/dropdown-mobile/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-mobile.mjs"
+    },
+    "./directives/dropdown-sheet": {
+      "types": "./directives/dropdown-sheet/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-dropdown-sheet.mjs"
+    },
+    "./directives/elastic-sticky": {
+      "types": "./directives/elastic-sticky/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs"
+    },
+    "./directives/responsive-dialog": {
+      "types": "./directives/responsive-dialog/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-responsive-dialog.mjs"
+    },
+    "./directives/ripple": {
+      "types": "./directives/ripple/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs"
+    },
+    "./directives/touchable": {
+      "types": "./directives/touchable/index.d.ts",
+      "default": "./fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs"
     }
   },
   "peerDependencies": {
@@ -115,10 +119,11 @@
     "@angular/core": ">=19.0.0",
     "@ng-web-apis/common": "^5.3.0",
     "@ng-web-apis/platform": "^5.3.0",
-    "@taiga-ui/cdk": "5.21.0",
-    "@taiga-ui/core": "5.21.0",
-    "@taiga-ui/kit": "5.21.0",
-    "@taiga-ui/layout": "5.21.0",
+    "@ng-web-apis/resize-observer": "^5.3.0",
+    "@taiga-ui/cdk": "5.22.0",
+    "@taiga-ui/core": "5.22.0",
+    "@taiga-ui/kit": "5.22.0",
+    "@taiga-ui/layout": "5.22.0",
     "@taiga-ui/polymorpheus": "^5.0.1",
     "rxjs": ">=7.0.0"
   },

package/styles/ios/tab-bar.less CHANGED Viewed

@@ -12,39 +12,28 @@
         block-size: 3.375rem;
         backdrop-filter: none;
+        .liquid-glass-vars();
         --t-tabbar-offset: max(env(safe-area-inset-bottom), 1.25rem);
-        --t-tabbar-bg: rgba(255, 255, 255, 0.7);
-        --t-tabbar-glow: rgba(255, 255, 255, 1);
         --t-tabbar-active: rgba(255, 255, 255, 0.9);
-        --t-tabbar-bevel: linear-gradient(227deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 21%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.95) 45%, #fff 48%, #fff 50%, #fff 52%, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.35) 80%, rgba(255, 255, 255, 0) 95%);
+        // the tab bar has its own bevel lighting angles and keeps
+        // the light backdrop filter in both themes
+        --t-glass-filter: blur(0.25rem) saturate(6) brightness(1.05);
+        --t-glass-bevel-filter: brightness(1.05);
+        --t-glass-bevel: linear-gradient(227deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.35) 21%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.95) 45%, #fff 48%, #fff 50%, #fff 52%, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.35) 80%, rgba(255, 255, 255, 0) 95%);
         &::before {
+            .liquid-glass(0 0.5rem 2rem rgba(0, 0, 0, 0.1));
             content: '';
             position: absolute;
             inset: 0;
             border-radius: inherit;
-            background: var(--t-tabbar-bg);
-            box-shadow:
-                0 0.5rem 2rem rgba(0, 0, 0, 0.1),
-                inset 0 0 0.75rem var(--t-tabbar-glow);
-            backdrop-filter: blur(0.25rem) saturate(6) brightness(1.05);
             opacity: 1;
         }
         &::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            padding: 1px;
-            pointer-events: none;
-            border-radius: inherit;
-            background: var(--t-tabbar-bevel);
-            filter: brightness(1.05);
-            -webkit-mask:
-                linear-gradient(#000 0 0) content-box,
-                linear-gradient(#000 0 0);
-            -webkit-mask-composite: xor;
-            mask-composite: exclude;
+            .liquid-glass-bevel();
         }
         [tuiTabBarItem] {
@@ -154,9 +143,11 @@
 &.tui-liquid-glass [tuiTheme='dark'] nav[tuiTabBar],
 [tuiTheme='dark'] &.tui-liquid-glass nav[tuiTabBar],
 &[tuiTheme='dark'].tui-liquid-glass nav[tuiTabBar] {
+    .liquid-glass-dark();
     --tui-active-color: var(--tui-text-primary);
-    --t-tabbar-bg: rgba(88, 88, 88, 0.31);
-    --t-tabbar-glow: rgba(31, 31, 31, 0.8);
     --t-tabbar-active: rgba(255, 255, 255, 0.18);
-    --t-tabbar-bevel: linear-gradient(-6deg, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.15) 95%);
+    --t-glass-filter: blur(0.25rem) saturate(6) brightness(1.05);
+    --t-glass-bevel-filter: brightness(1.05);
+    --t-glass-bevel: linear-gradient(-6deg, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.15) 95%);
 }